/* [변수 설정] */
   :root {
       --primary-color: #4f46e5;
       --primary-hover: #4338ca;
       --accent-color: #16a085;
       --bg-color: #F4F5FA;
       /* 전체 배경색 */
       --sidebar-bg: #e9eef6;
       --text-main: #111827;
       --text-sub: #6b7280;
       --border-color: #e5e7eb;
       --divider-color: #b0b8c1;
       --white: #ffffff;
       --header-bg: #f8fafc;
       --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   }

   /* [기본 설정] */
   * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
       outline: none;
   }

   body {
       font-family: 'Pretendard', sans-serif;
       height: 100vh;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       color: var(--text-main);
       background-color: var(--bg-color);
   }

   /* [상단 헤더] */
   header {
       background-color: var(--white);
       border-bottom: 1px solid var(--border-color);
       padding: 0 20px;
       height: 60px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       z-index: 10;
   }

   .header-left {
       padding-left: 10px;
   }

   #toggle-btn {
       background: none;
       border: none;
       color: var(--text-main);
       font-size: 24px;
       cursor: pointer;
       padding: 5px;
       border-radius: 4px;
       transition: 0.2s;
   }

   #toggle-btn:hover {
       background-color: var(--bg-color);
   }

   .logo {
       font-weight: 800;
       font-size: 20px;
       color: var(--primary-color);
       letter-spacing: -0.5px;
   }

   /* [메인 컨테이너] */
   .main-container {
       display: flex;
       flex: 1;
       overflow-x: auto;
       /* ★핵심: 공간이 부족하면 가로 스크롤바 생성 */
       overflow-y: hidden;
       /* 세로 스크롤은 패널 내부에서 처리 */
       height: calc(100vh - 60px);
       width: 100%;
       min-width: 0;
       /* 플렉스박스 버그 방지 */
   }

   /* 1. [사이드바] */
   /* 사이드바 컨테이너가 부모의 높이를 100% 차지하도록 설정 */
   #sidebar-container {
       height: 100%;
       display: flex;
       /* 내부의 .sidebar가 높이를 꽉 채우도록 도와줌 */
   }

   .sidebar {
       width: 240px;
       /* 고정 너비 */
       min-width: 240px;
       /* 줄어들지 않음 */
       flex-shrink: 0;
       /* ★핵심: 화면이 좁아져도 찌그러지지 않음 */
       background-color: var(--sidebar-bg);
       border-right: 1px solid var(--border-color);
       display: flex;
       flex-direction: column;
       padding: 20px 15px;
       z-index: 1;
   }

   .sidebar.active {
       width: 240px;
   }

   .sidebar-menu {
       padding: 20px 10px;
   }

   .sidebar-menu button {
       width: 100%;
       padding: 14px 20px;
       margin-bottom: 8px;
       background: transparent;
       border: none;
       color: #4b5563;
       /* 글자색 진한 회색 */
       text-align: left;
       font-size: 16px;
       cursor: pointer;
       border-radius: 10px;
       /* 둥글게 */
       transition: all 0.2s ease;
       font-weight: 600;
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .sidebar-menu button:hover {
       background-color: #dbeafe;
       /* 호버 시 연한 파랑 */
       color: var(--primary-color);
   }

   .sidebar-menu button.active-menu {
       background-color: var(--primary-color);
       color: white;
       box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
       /* 그림자 추가 */
   }

   /* 2. [왼쪽 패널] - 다시 카드 스타일 적용! */
   .left-panel {
       /* 가로 크기 고정 (이전 요청사항 유지) */
       width: 600px;
       min-width: 600px;
       flex-shrink: 0;

       background-color: var(--bg-color);
       padding: 25px;
       border-right: 1px solid var(--border-color);

       /* ★ 핵심 변경사항: flex 대신 block 사용 */
       display: block;
       overflow-y: auto;
       /* 내용이 길면 패널 안에 스크롤바 생성 */
       height: 100%;
       /* 부모 높이만큼 채움 */
   }

   /* 공통 카드 스타일 (하얀 박스 + 그림자) */
   .card-box {
       /* flex 관련 속성 제거하고 마진으로 간격 조정 */
       margin-bottom: 20px;
       background-color: var(--white);
       padding: 20px;
       border-radius: 12px;
       box-shadow: var(--shadow-sm);
       border: 1px solid var(--border-color);

       /* 크기 고정 */
       flex-shrink: 0;
       height: auto;
       /* 내용물만큼만 높이 차지 */
   }

   /* 첫번째 카드 스타일 */
   .card-first {
       display: grid;
       grid-template-columns: 1fr 1fr 0.8fr;
       /* 3개의 열 비율 (이름:날짜:버튼) */
       gap: 8px 12px;
       /* 위아래 간격 8px, 좌우 간격 12px */
       align-items: center;
       /* 세로 중앙 정렬 */
   }

   /* 라벨 스타일 (작고 굵게) */
   .grid-label {
       font-size: 13px;
       font-weight: 600;
       color: #555;
   }

   /* 하단 큰 버튼 (2칸 차지) */
   .btn-span-2 {
       grid-column: span 2;
       /* 2개의 열을 합침 */
   }

   /* 타이틀 스타일 (카드 내부 혹은 패널 상단) */
   h2.panel-title {
       font-size: 18px;
       color: var(--text-main);
       margin-bottom: 5px;
       font-weight: 700;
       display: flex;
       align-items: center;
       gap: 8px;
   }

   h2.panel-title::before {
       content: '';
       width: 4px;
       height: 18px;
       background: var(--primary-color);
       border-radius: 2px;
   }

   /* 입력 폼 스타일 */
   .input-row {
       display: flex;
       gap: 15px;
   }

   .input-item {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 5px;
   }

   label {
       font-size: 13px;
       font-weight: 600;
       color: #555;
   }

   input[type="text"],
   input[type="date"],
   input[type="number"] {
       padding: 10px;
       border: 1px solid #d1d5db;
       border-radius: 6px;
       font-size: 14px;
       width: 100%;
   }

   /* 버튼 그룹 */
   .btn-row {
       display: flex;
       gap: 10px;
       margin-top: 5px;
   }

   button.btn-act {
       flex: 1;
       padding: 12px;
       border: none;
       border-radius: 8px;
       font-weight: 600;
       cursor: pointer;
       transition: 0.2s;
       font-size: 14px;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
       white-space: nowrap;
   }

   .btn-load {
       background: #ffffff;
       /* 배경(회색)과 분리되도록 순백색 사용 */
       border: 1px solid #cbd5e1;
       /* 저장 버튼과 싸우지 않는 은은한 테두리 */
       color: #475569;
       /* 글자는 확실하게 보이도록 진한 톤 */
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
       /* 그림자를 줘서 버튼이 살짝 떠 보이게 만듦 */
   }

   .btn-load:hover {
       background: #f8fafc;
       border-color: #94a3b8;
       color: #1e293b;
   }

   .btn-save {
       background: var(--accent-color);
       color: white;
   }

   .btn-save:hover {
       background: #138a72;
   }

   .btn-print {
       background: var(--primary-color);
       color: white;
   }

   .btn-print:hover {
       background: var(--primary-hover);
   }

   /* 테이블 래퍼 (카드 스타일 적용됨) */
   .table-card {
       /* ★ 높이를 픽셀로 딱 고정해버립니다. */
       height: 400px;

       /* 내부 스크롤 설정 */
       padding: 0;
       display: flex;
       flex-direction: column;
   }

   /* 테이블 스크롤 영역 */
   .table-scroll-area {
       flex: 1;
       overflow: auto;
       /* 카드 안에서 테이블만 스크롤 됨 */
   }

   /* 테이블 스타일 */
   table {
       width: 100%;
       border-collapse: separate;
       border-spacing: 0;
       font-size: 13px;
   }

   th {
       position: sticky;
       top: 0;
       z-index: 10;
       padding: 12px 5px;
       font-weight: 600;
       color: #555;
       background-color: var(--header-bg);
       border-bottom: 1px solid #ccc;
       text-align: center;
   }

   td {
       padding: 8px;
       border-bottom: 1px solid #eee;
       text-align: center;
   }

   .sep-right {
       border-right: 2px solid var(--divider-color) !important;
   }

   /* 입력 칸 디자인 */
   .editable input {
       width: 100%;
       box-sizing: border-box;
       text-align: center;
       padding: 6px;
       border: 1px solid #e2e8f0;
       border-radius: 4px;
       background-color: #fff;
       font-size: 13px;
   }

   .editable input:focus {
       border-color: var(--primary-color);
       outline: none;
       box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
   }

   .readonly input {
       width: 100%;
       text-align: center;
       border: none;
       background: transparent;
       font-weight: bold;
       color: var(--primary-color);
       font-size: 14px;
   }

   /* 푸터 합계 */
   tfoot tr {
       background-color: #f1f5f9;
       font-weight: bold;
       position: sticky;
       bottom: 0;
       z-index: 10;
   }

   tfoot td {
       padding: 12px 6px;
       border-top: 2px solid #cbd5e1;
       color: #333;
   }

   .total-label {
       text-align: right;
       padding-right: 15px;
       color: #555;
   }


   /* =========================================
   [우측 패널 리뉴얼: 인덱스 탭 + 카드 스타일]
   ========================================= */

   /* 1. 우측 패널 배경 및 레이아웃 (좌측과 통일) */
   .right-panel {
       width: 900px;
       /* 고정 너비 (A4 용지가 잘리지 않고 들어가는 크기) */
       min-width: 900px;
       /* 줄어들지 않음 */
       flex-shrink: 0;
       /* 찌그러지지 않음 */
       background-color: var(--bg-color);
       padding: 25px;
       display: flex;
       flex-direction: column;
       gap: 10px;
       overflow: hidden;
   }

   /* 2. 인덱스 탭 영역 (카드 바로 위에 붙음) */
   .tab-index-container {
       display: flex;
       gap: 4px;
       /* 탭 사이 간격 */
       margin-bottom: -1px;
       /* 카드 테두리와 겹치게 하여 자연스럽게 연결 */
       padding-left: 10px;
       /* 탭 시작 위치 */
       z-index: 5;
       /* 카드보다 위에 오도록 */
   }

   /* 3. 인덱스 탭 버튼 스타일 */
   .tab-index-btn {
       padding: 10px 20px 8px 20px;
       background-color: #e5e7eb;
       /* 비활성 탭: 배경색보다 약간 진한 회색 */
       border: 1px solid #d1d5db;
       border-bottom: none;
       /* 아래쪽 테두리 없앰 */
       border-radius: 8px 8px 0 0;
       /* 위쪽만 둥글게 */
       color: var(--text-sub);
       font-size: 14px;
       font-weight: 600;
       cursor: pointer;
       transition: 0.2s;
       position: relative;
       top: 1px;
       /* 테두리 겹침용 */
   }

   /* 활성화된 탭 (흰색, 카드와 연결됨) */
   .tab-index-btn.active {
       background-color: var(--white);
       color: var(--primary-color);
       border-color: var(--border-color);
       /* 카드 테두리 색과 동일 */
       border-bottom: 1px solid var(--white);
       /* 흰색으로 덮어서 뚫린 효과 */
       z-index: 10;
       font-weight: 700;
   }

   .tab-index-btn:hover:not(.active) {
       background-color: #d1d5db;
   }

   /* 4. 미리보기 카드 본체 (흰색 박스) */
   .preview-card {
       flex: 1;
       /* 남은 공간 꽉 채움 */
       background-color: var(--white);
       border: 1px solid var(--border-color);
       border-radius: 12px;
       /* 둥근 모서리 */
       /* 왼쪽 위 모서리는 탭과 자연스럽게 연결되도록 조정 가능하지만, 12px 유지해도 무방 */
       box-shadow: var(--shadow-sm);
       display: flex;
       flex-direction: column;
       overflow: hidden;
       /* 내부 스크롤이 둥근 모서리 침범 안 하게 */
       position: relative;
       z-index: 1;
   }

   /* 5. 탭 내용 영역 (스크롤은 여기서 발생) */
   .tab-content {
       flex: 1;
       padding: 40px;
       /* 종이 주변 여백 */
       overflow-y: auto;
       /* 세로 스크롤 */
       display: none;
       /* 기본 숨김 */
       flex-direction: column;
       align-items: center;
       /* 종이 가운데 정렬 */
       background-color: #f9fafb;
       /* 카드 내부 배경 (종이 돋보이게 연한 회색) */
   }

   .tab-content.active {
       display: flex;
   }

   .tab-header {
       display: flex;
       background-color: var(--white);
       border-bottom: 1px solid var(--border-color);
       padding: 0 20px;
   }

   .tab-btn {
       padding: 15px 20px;
       cursor: pointer;
       border: none;
       background: none;
       font-size: 14px;
       color: var(--text-sub);
       font-weight: 500;
       border-bottom: 2px solid transparent;
       transition: 0.2s;
   }

   .tab-btn:hover {
       color: var(--primary-color);
       background-color: #f9fafb;
   }

   .tab-btn.active {
       color: var(--primary-color);
       border-bottom: 2px solid var(--primary-color);
       font-weight: 700;
   }

   .tab-content {
       flex: 1;
       padding: 30px;
       overflow-y: auto;
       display: none;
       flex-direction: column;
       align-items: center;
       justify-content: flex-start;
   }

   .tab-content.active {
       display: flex;
   }

   .paper-sheet {
       width: 210mm;
       min-height: 297mm;
       background: white;
       box-shadow: var(--shadow-md);
       padding: 40px;
       margin-bottom: 30px;
   }

   ::-webkit-scrollbar {
       width: 8px;
       height: 8px;
   }

   ::-webkit-scrollbar-thumb {
       background: #cbd5e1;
       border-radius: 4px;
   }

   ::-webkit-scrollbar-track {
       background: transparent;
   }

   /* =========================================
        [시험지 미리보기 전용 스타일 (추가됨)]
           ========================================= */

   /* A4 용지 스타일 재정의 */
   .paper {
       width: 210mm;
       min-height: 297mm;
       /* 높이 고정보다는 min-height 권장 */
       background-color: white;
       padding: 0mm;
       margin: 0 auto 30px auto;
       /* 중앙 정렬 및 아래 여백 */
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
       box-sizing: border-box;
       position: relative;
   }

   /* 엑셀 테이블 스타일 */
   .excel-table {
       width: 100%;
       height: auto;
       border-collapse: collapse;
       table-layout: fixed;
   }

   .excel-table td {
       border: none;
       /* 기본 테두리 없음 (클래스로 제어) */
       vertical-align: middle;
       text-align: center;
       font-size: 5pt;
       padding: 0;
       word-break: break-all;
       color: #000;
       /* 글자색 검정 강제 */
   }

   /* 병합된 셀 스타일 */
   .merged {
       background-color: white;
   }

   /* [선 그리기 도구] */
   .b-all {
       border: 1px solid #000 !important;
   }

   .bt {
       border-top: 1px solid #000 !important;
   }

   .bb {
       border-bottom: 1px solid #000 !important;
   }

   .bl {
       border-left: 1px solid #000 !important;
   }

   .br {
       border-right: 1px solid #000 !important;
   }

   .b-all-thick {
       border: 3px solid #000 !important;
   }

   .bt-thick {
       border-top: 3px solid #000 !important;
   }

   .bb-thick {
       border-bottom: 3px solid #000 !important;
   }

   .bl-thick {
       border-left: 3px solid #000 !important;
   }

   .br-thick {
       border-right: 3px solid #000 !important;
   }

   .border-thick-outer {
       border: none;
   }

   /* 디테일 폰트 설정 */
   .f-DT {
       text-align: center;
       font-size: 7mm !important;
       font-family: 'Malgun Gothic', sans-serif;
       font-weight: bold;
   }

   .f-page-odd {
       text-align: right !important;
       font-size: 7mm !important;
       font-family: 'Malgun Gothic', sans-serif;
   }

   .f-page-even {
       text-align: left !important;
       font-size: 7mm !important;
       font-family: 'Malgun Gothic', sans-serif;
   }

   .f-code {
       text-align: center !important;
       font-size: 3mm !important;
   }

   .f-numb {
       text-align: left !important;
       font-size: 3mm !important;
   }

   .f-scr {
       text-align: right !important;
       padding-right: 3mm !important;
       font-size: 3mm !important;
   }

   .f-page-d {
       text-align: center !important;
       font-size: 3mm !important;
       font-family: 'Malgun Gothic', sans-serif;
   }

   /* 인쇄 설정 */
   @media print {

       .sidebar,
       header,
       .left-panel,
       .tab-header {
           display: none !important;
       }

       /* 메뉴 숨김 */
       .main-container {
           display: block;
           overflow: visible;
       }

       .right-panel {
           display: block;
           overflow: visible;
           background: none;
       }

       .tab-content {
           display: block !important;
           padding: 0;
           overflow: visible;
       }

       .paper {
           margin: 0;
           box-shadow: none;
           width: 100%;
           height: 100%;
           page-break-after: always;
       }

       .paper:last-child {
           page-break-after: auto;
       }
   }


   /* =========================================
   [답안지(Answer Sheet) 전용 스타일 추가]
   ========================================= */

   /* 답안지는 A5 사이즈 (148mm x 210mm) */
   .paper.a5-size {
       width: 148mm;
       min-height: 210mm;
   }

   /* 답안지용 점선 스타일 (기존에 없어서 추가) */
   .bb-dashed {
       border-bottom: 0.5px dashed #A6A6A6 !important;
   }

   /* 답안지 전용 폰트 스타일 */
   .f-title {
       text-align: center;
       font-size: 3mm !important;
       font-family: 'Malgun Gothic', sans-serif;
       /* 폰트 통일 */
       font-weight: bold;
   }

   /* 답안지는 칸이 좁으므로 글자를 조금 더 작게 조정 */
   .sheet-table .f-code {
       font-size: 2.5mm !important;
       text-align: center !important;
   }

   .sheet-table .f-numb {
       font-size: 2.5mm !important;
       text-align: center !important;
   }

   .sheet-table .f-scr {
       font-size: 2.5mm !important;
       text-align: center !important;
       padding-right: 0 !important;
   }

   /* 답안지 테이블 배경색 */
   .bg-gray {
       background-color: #F2F2F2;
   }

   /* [답지(Key) 전용 스타일 추가] */
   .f-inside {
       text-align: center !important;
       font-size: 5mm !important;
       /* 답안지보다 글자가 큼 */
       font-family: 'Malgun Gothic', sans-serif;
       font-weight: bold;
   }


   /* [check_exam.html 전용] 검색, 목록, 페이지네이션 스타일 */

   /* 1. 검색창 영역 (이미지 배치 적용) */
   .search-box {
       display: flex;
       flex-direction: column;
       /* 위아래 2단 구조 */
       gap: 15px;
       /* 윗줄과 아랫줄 사이 간격 */
       margin-bottom: 20px;
       background: white;
       padding: 20px;
       border-radius: 12px;
       box-shadow: var(--shadow-sm);
       /* border: 1px solid var(--border-color);  <-- 테두리 제거 요청 반영 */
   }

   /* 윗줄: 입력창들 가로 배치 */
   .search-row-inputs {
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: 10px;
       /* 각 입력창 사이 간격 */
   }

   /* 아랫줄: 버튼 우측 정렬 */
   .search-row-button {
       display: flex;
       justify-content: flex-end;
       /* 오른쪽 끝으로 보냄 */
   }

   .date-range-box {
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .date-range-box input[type="date"] {
       flex: 1;
       /* 날짜 입력창 너비 균등 분배 */
   }

   /* 2. 리스트 아이템 스타일 (그대로 유지) */
   .paper-list {
       display: flex;
       flex-direction: column;
       gap: 10px;
       min-height: 300px;
   }

   .paper-item {
       background: white;
       padding: 15px;
       border-radius: 8px;
       border: 1px solid var(--border-color);
       /* 리스트 아이템 테두리는 유지 */
       cursor: pointer;
       transition: 0.2s;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .paper-item:hover {
       border-color: var(--primary-color);
       box-shadow: var(--shadow-sm);
       transform: translateY(-2px);
   }

   .paper-item.selected {
       border-color: var(--primary-color);
       background-color: #e0e7ff;
   }

   .paper-info h4 {
       font-size: 15px;
       margin-bottom: 4px;
       color: var(--text-main);
   }

   .paper-info span {
       font-size: 13px;
       color: var(--text-sub);
   }

   .paper-arrow {
       color: var(--text-sub);
       font-weight: bold;
   }

   /* 3. 페이지네이션 스타일 (그대로 유지) */
   .pagination {
       display: flex;
       justify-content: center;
       gap: 5px;
       margin-top: 20px;
       padding-bottom: 20px;
   }

   .page-btn {
       min-width: 32px;
       height: 32px;
       border: 1px solid var(--border-color);
       background: white;
       border-radius: 4px;
       cursor: pointer;
       color: var(--text-sub);
       font-size: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: 0.2s;
   }

   .page-btn:hover {
       background: #f3f4f6;
       color: var(--primary-color);
   }

   .page-btn.active {
       background: var(--primary-color);
       color: white;
       border-color: var(--primary-color);
       font-weight: bold;
   }



   /* 안내 문구 (빈 화면) 스타일 */
   /* 미리보기에 있는 안내문구 */
   .empty-guide {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       height: 100%;
       min-height: 300px;
       /* 최소 높이 확보 */
       color: #adb5bd;
       text-align: center;
   }

   .guide-icon {
       font-size: 48px;
       margin-bottom: 15px;
       opacity: 0.5;
   }

   .empty-guide h3 {
       font-size: 18px;
       color: #495057;
       margin-bottom: 8px;
       font-weight: bold;
   }

   .empty-guide p {
       font-size: 14px;
       line-height: 1.5;
       color: #868e96;
   }

   /* =========================================
   [자동완성(추천) 드롭다운 스타일]
========================================= */
   .suggest-wrapper {
       position: relative;
       width: 100%;
   }

   .suggest-wrapper input {
       width: 100%;
       /* 입력창이 영역을 꽉 채우도록 설정 */
   }

   .suggest-list {
       position: absolute;
       top: 100%;
       left: 0;
       width: 100%;
       background: white;
       border: 1px solid var(--border-color);
       border-top: none;
       border-radius: 0 0 8px 8px;
       box-shadow: var(--shadow-md);
       max-height: 200px;
       overflow-y: auto;
       z-index: 100;
       margin: 0;
       padding: 0;
       list-style: none;
       display: none;
       /* 기본 상태는 숨김 */
   }

   .suggest-list li {
       padding: 10px 12px;
       font-size: 14px;
       color: var(--text-main);
       cursor: pointer;
       border-bottom: 1px solid #f1f5f9;
   }

   .suggest-list li:last-child {
       border-bottom: none;
   }

   .suggest-list li:hover {
       background-color: #f8fafc;
       color: var(--primary-color);
       font-weight: bold;
   }