/* 1. 세련된 한국어 웹 폰트 (Pretendard) 적용 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif !important;
    background-color: #f8f9fa !important; /* 배경을 아주 연한 회색으로 해서 콘텐츠가 돋보이게 함 */
}

/* 2. 상단 메뉴바에 부드러운 그림자 추가 */
.navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
}

/* 3. 메인 박스(게시판, 문제 목록 등) 모서리를 둥글게 하고 입체감 부여 */
.panel, .jumbotron, .well {
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    background-color: #ffffff !important;
}

/* 4. 버튼과 입력창 디자인 다듬기 */
.btn, .form-control {
    border-radius: 6px !important;
}

/* 5. 테이블(문제 목록, 순위표 등) 디자인 깔끔하게 정리 */
.table>thead>tr>th {
    border-bottom: 2px solid #e2e8f0 !important;
    color: #475569 !important;
    font-weight: 600 !important;
}
.table>tbody>tr>td {
    vertical-align: middle !important;
}

/* --- 문제 제출창(분할 화면) 레이아웃 수정 --- */

/* 1. 분할되었을 때 양쪽 창이 차지하는 비율 강제 지정 */

#window1.col-md-6 {
    width: 10% !important; /* 오른쪽 에디터 창 넓이 */
    float: left !important;
    padding-left: 1px !important; /* 문제 창과의 간격 (이 값을 조절해서 더 붙일 수 있습니다) */
    margin-left: 0% !important;    /* 가운데 여백 */
}

/* 2. 에디터(iframe) 디자인 깔끔하게 다듬기 */
#window1 iframe {
    width: 100% !important;
    height: 500px !important; /* 에디터 세로 길이 시원하게 늘리기 */
    border: 1px solid #d1d5db !important; /* 연한 테두리 */
    border-radius: 12px !important; /* 모서리 둥글게 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
    background-color: #ffffff !important;
}
/* --- 제출창(에디터) 내부 여백 및 가운데 정렬 강제 해제 --- */

/* 1. 에디터를 오른쪽으로 밀어내던 범인(offset) 제거 */
form#frmSubmit > div,
div[class*="col-md-offset-"], 
div[class*="col-sm-offset-"] {
    margin-left: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. 에디터(CodeMirror) 영역을 화면 100%로 꽉 채우기 */
.CodeMirror {
    margin: 0 !important;
    width: 100% !important;
    border: 1px solid #d1d5db !important; /* 깔끔한 테두리 */
}

/* 3. 에디터 안쪽 텍스트와 숫자 사이의 답답한 간격 최적화 */
.CodeMirror-gutters {
    padding-left: 0 !important;
    background-color: #f8f9fa !important; /* 숫자 배경을 연한 회색으로 */
    border-right: 1px solid #e5e7eb !important;
}

/* --- HUSTOJ 공통: 폼 하단의 제출/초기화 버튼 레이아웃 자동 복구 --- */

/* 1. 버튼이 가로로 쫙 찢어지는 현상 방지 및 크기/디자인 통일 */
form button[type="submit"], 
form button[type="reset"], 
form input[type="submit"], 
form input[type="reset"] {
    display: inline-block !important;
    width: 120px !important;      /* 버튼 가로 넓이 고정 */
    height: 40px !important;      /* 버튼 세로 높이 고정 */
    padding: 0 !important;
    margin: 0 5px !important;     /* 버튼 사이 간격 띄우기 */
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
}

/* 2. 버튼들을 감싸고 있는 마지막 영역을 강제로 가운데 정렬 (Flexbox) */
form .form-group:last-of-type {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 20px !important;
}

form .form-group:last-of-type > div[class*="col-"] {
    width: auto !important;
    margin-left: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 10px !important; /* 버튼 사이 간격 */
}