/* =========================================================================
   component.css
   역할: 재사용 가능한 UI 컴포넌트 — 패널 · 버튼 · 폼 컨트롤 · 검색행 · 테이블 ·
        페이지네이션 · 등록폼 행 · 파일첨부 · Y/N 토글 · 모달
   ========================================================================= */

/* ===================== 패널 ===================== */
.panel{
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:6px;
  box-shadow:var(--shadow-panel);
  margin-bottom:20px;
}
.panel__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
}
.panel__title{font-size:15px; font-weight:700; color:var(--c-text-strong); display:flex; align-items:center; gap:8px;}
.panel__title .count{color:var(--c-primary); font-weight:700;}
.panel__toggle{
  background:none; border:1px solid var(--c-border); border-radius:var(--radius);
  padding:6px 12px; font-size:12.5px; color:var(--c-neutral-strong); display:flex; align-items:center; gap:4px;
}
.panel__toggle:hover{background:var(--c-bg-muted);}
.panel--pad{padding:20px;}

/* ===================== 검색영역 (행 기반 flex) ===================== */
.search-grid{border-top:1px solid var(--c-border);}
.search-grid.collapsed{display:none;}
.search-row{display:flex; flex-wrap:wrap;}
.field__label{
  width:140px; flex:none;
  background:var(--c-bg-muted); border-right:1px solid var(--c-border); border-bottom:1px solid var(--c-border);
  padding:12px 16px; font-size:13px; font-weight:700; color:var(--c-text-strong); display:flex; align-items:center;
}
.field__label.is-empty{background:var(--c-surface);}
.field__label .req{color:var(--c-danger); margin-right:2px;}
.field__control{
  flex:1; min-width:220px;
  border-bottom:1px solid var(--c-border); border-right:1px solid var(--c-border);
  padding:10px 16px; display:flex; align-items:center;
}
.search-row .field__control:last-child{border-right:none;}

.search-actions{
  display:flex; justify-content:flex-end; gap:8px; padding:16px 20px;
}

/* ===================== 폼 컨트롤 ===================== */
input[type="text"], input[type="number"], input[type="date"], select, textarea{
  width:100%; border:1px solid var(--c-border); border-radius:var(--radius);
  padding:8px 12px; height:38px; background:var(--c-surface);
}
textarea{height:auto; resize:vertical;}
input::placeholder, textarea::placeholder{color:var(--c-placeholder);}
input:focus, select:focus, textarea:focus{border-color:var(--c-primary);}
input:disabled, select:disabled, textarea:disabled{background:var(--c-bg-disabled); color:var(--c-neutral-strong);}
select{appearance:none; -webkit-appearance:none; background-repeat:no-repeat; background-position:right 12px center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0 L5 6 L10 0 Z' fill='%23666666'/></svg>");
  padding-right:30px;}

/* 날짜 범위 필드 <DateRangePicker> (§4.10) */
.date-range{display:flex; align-items:center; gap:10px;}
.date-range input[type="date"]{flex:1; min-width:0;}
.date-range__sep{color:var(--c-neutral-strong); flex:none;}

/* ===================== 버튼 ===================== */
.btn{
  border-radius:var(--radius); border:1px solid transparent; padding:9px 18px;
  font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.btn--sm{padding:6px 12px; font-size:12.5px;}
.btn--primary{background:var(--c-primary); color:#fff;}
.btn--primary:hover{background:var(--c-primary-dark);}
.btn--primary-outline{background:#fff; color:var(--c-primary); border-color:var(--c-primary);}
.btn--primary-outline:hover{background:#EAF3FC;}
.btn--secondary{background:var(--c-secondary); color:var(--c-text-strong);}
.btn--secondary:hover{background:#CFCFCF;}
.btn--neutral-outline{background:#fff; color:var(--c-neutral-strong); border-color:var(--c-border);}
.btn--neutral-outline:hover{background:var(--c-bg-muted);}
.btn--neutral-strong{background:var(--c-neutral-strong); color:#fff;}
.btn--neutral-strong:hover{background:#525252;}
.btn--danger{background:var(--c-danger); color:#fff;}
.btn--danger:hover{background:var(--c-danger-dark);}
.btn--success-outline{background:#fff; color:var(--c-success); border-color:var(--c-success);}
.btn--success-outline:hover{background:#EBF5E7;}
.btn:disabled{opacity:.5; cursor:default;}

/* ===================== 결과 테이블 ===================== */
.result-actions{display:flex; gap:8px;}
.table-wrap{overflow-x:auto; border-top:1px solid var(--c-border);}
table.data-table{width:100%; border-collapse:collapse; min-width:900px;}
.data-table thead th{
  background:var(--c-bg-header); color:var(--c-text-strong); font-weight:700; font-size:13px;
  padding:12px 10px; text-align:center; border-bottom:1px solid var(--c-border); white-space:nowrap;
}
.data-table tbody td{
  padding:12px 10px; text-align:center; font-size:13.5px; border-bottom:1px solid var(--c-bg-header);
}
.data-table tbody tr:hover{background:#FAFBFC;}
.data-table td.name-cell{text-align:left;}
.anchor{
  color:var(--c-primary); font-weight:700; text-decoration:underline;
  background:none; border:none; padding:0; font-size:13.5px; cursor:pointer;
}
.status-y{color:var(--c-text); font-weight:400;}
.status-n{color:var(--c-danger); font-weight:700;}
.empty-row td{padding:40px 0; color:var(--c-placeholder); font-size:13.5px;}

.result-footer{
  display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
}
.page-size-select{width:auto; min-width:70px;}
.page-controls{display:flex; align-items:center; gap:4px;}
.page-btn{
  min-width:28px; height:28px; border:1px solid var(--c-border); background:#fff; border-radius:var(--radius);
  font-size:12.5px; color:var(--c-text);
}
.page-btn.active{background:var(--c-primary); border-color:var(--c-primary); color:#fff; font-weight:700;}
.page-btn.nav{border:none; background:none; color:var(--c-neutral-strong);}
.page-info{font-size:12.5px; color:var(--c-neutral-strong);}

.data-table th.th-left{text-align:left;}

/* ===================== 문제 구성 정보 (시험지관리 등록) ===================== */
.exam-compose__summary{font-size:13.5px; font-weight:700; color:var(--c-text-strong); background:var(--c-bg-muted); padding:6px 14px; border-radius:14px;}
.exam-compose-table td{padding:6px 8px;}
.exam-compose-table input[type="number"]{width:64px; height:32px; padding:4px 6px; text-align:center;}
.exam-compose-table input[disabled]{background:var(--c-bg-disabled); color:var(--c-neutral-strong);}

/* ===================== 등록 폼 (행 기반 flex) ===================== */
.form-table{border-top:1px solid var(--c-border);}
.form-row{display:flex; border-bottom:1px solid var(--c-border);}
.form-row--last{border-bottom:none;}
.select-md{max-width:320px;}
.form-row__label{
  width:180px; flex:none;
  background:var(--c-bg-muted); padding:14px 20px; font-weight:700; color:var(--c-text-strong);
  display:flex; align-items:flex-start; gap:2px; font-size:13.5px;
}
.form-row__label .req{color:var(--c-danger);}
.form-row__control{flex:1; min-width:0; padding:14px 20px;}
.form-row__control .hint{font-size:12px; color:var(--c-neutral-strong); margin-top:6px;}
.field-inline{display:flex; align-items:center; gap:8px;}
.field-inline input{max-width:320px;}
.field-inline .unit{color:var(--c-neutral-strong); font-size:13px;}
.char-count{text-align:right; font-size:12px; color:var(--c-neutral-strong); margin-top:4px;}
.field-error{border-color:var(--c-danger) !important; background:#FDEDEB;}
.field-error-msg{color:var(--c-danger); font-size:12px; margin-top:6px; display:none;}
.field-error-msg.show{display:block;}

/* ===================== 파일첨부 ===================== */
.file-upload{border:1px solid var(--c-border); border-radius:var(--radius); overflow:hidden;}
.file-upload__toolbar{
  display:flex; justify-content:flex-end; gap:8px; padding:10px 14px; background:var(--c-bg-muted);
  border-bottom:1px solid var(--c-border);
}
table.file-table{width:100%; border-collapse:collapse;}
.file-table th{background:var(--c-bg-header); padding:8px 12px; font-size:12.5px; text-align:left; border-bottom:1px solid var(--c-border);}
.file-table th.chk{width:36px;}
.file-table th.size{width:120px; text-align:right;}
.file-table td{padding:8px 12px; font-size:13px; border-bottom:1px solid var(--c-bg-header);}
.file-table td.size{text-align:right; color:var(--c-neutral-strong);}
.file-upload__empty{padding:22px 0; text-align:center; font-size:13px; color:var(--c-neutral-strong);}
.file-upload__empty .fake-link{color:var(--c-primary); font-weight:700; text-decoration:underline; cursor:pointer;}
.file-upload__constraint{padding:8px 14px; font-size:12px; color:var(--c-neutral-strong); border-top:1px solid var(--c-border);}
.file-upload__constraint b{color:var(--c-danger);}

/* ===================== 컨텍스트 바 (상위 과정명 표시 + 목록 버튼) ===================== */
.context-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--c-border); background:var(--c-bg-muted);
}
.context-bar__label{font-size:13px; color:var(--c-neutral-strong); margin-right:10px;}
.context-bar__value{font-size:14px; font-weight:700; color:var(--c-text-strong);}

/* ===================== 테이블 체크박스 컬럼 ===================== */
.data-table th.chk-col, .data-table td.chk-col{width:36px; text-align:center;}

/* ===================== 보기(옵션) 테이블 — 객관식/OX 문제 등록 ===================== */
.option-table-wrap{border:1px solid var(--c-border); border-radius:var(--radius); overflow:hidden;}
.option-table-toolbar{display:flex; justify-content:flex-end; padding:10px 14px; background:var(--c-bg-muted); border-bottom:1px solid var(--c-border);}
table.option-table{width:100%; border-collapse:collapse;}
.option-table th{background:var(--c-bg-header); padding:10px; font-size:13px; font-weight:700; text-align:center; border-bottom:1px solid var(--c-border);}
.option-table td{padding:8px 10px; text-align:center; border-bottom:1px solid var(--c-bg-header); font-size:13.5px;}
.option-table th.col-no, .option-table td.col-no{width:60px;}
.option-table th.col-answer, .option-table td.col-answer{width:80px;}
.option-table th.col-del, .option-table td.col-del{width:90px;}
.option-table td.col-text{text-align:left;}
.option-table td.col-text input{width:100%;}
.option-table td.col-fixed{font-weight:700; color:var(--c-text-strong);}
.inline-count{margin-right:8px; font-weight:600; color:var(--c-text-strong);}
.dynamic-sub{margin-top:16px;}
.dynamic-sub .form-row__label{background:none; padding:0 0 8px; font-size:13.5px;}
.toggle-yn{display:inline-flex; border:1px solid var(--c-primary); border-radius:var(--radius); overflow:hidden;}
.toggle-yn__opt{
  padding:8px 26px; background:#fff; color:var(--c-primary); border:none; font-weight:700; font-size:13px;
}
.toggle-yn__opt.active{background:var(--c-primary); color:#fff;}
.toggle-yn__opt:disabled{opacity:.4; cursor:not-allowed;}

.form-actions{
  display:flex; justify-content:flex-end; gap:8px; padding:20px;
}

/* ===================== 모달 (confirm / alert) ===================== */
.modal-overlay{
  position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(20,25,35,.45);
  display:none; align-items:center; justify-content:center; z-index:100;
}
.modal-overlay.open{display:flex;}
.modal{
  background:#fff; border-radius:8px; box-shadow:var(--shadow-modal);
  width:360px; padding:28px 24px 20px; text-align:center;
}
.modal__msg{font-size:15px; color:var(--c-text-strong); font-weight:600; margin-bottom:22px; white-space:pre-line;}
.modal__actions{display:flex; justify-content:center; gap:8px;}

/* ===================== 네이비 헤더 팝업 (스타일가이드 §3.3) ===================== */
.dialog-overlay{
  position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(20,25,35,.45);
  display:none; align-items:flex-start; justify-content:center; z-index:110;
  padding:48px 16px; overflow-y:auto;
}
.dialog-overlay.open{display:flex;}
.dialog{
  background:#fff; border-radius:8px; box-shadow:var(--shadow-modal);
  width:100%; max-width:900px; overflow:hidden;
}
.dialog__header{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--c-navy); padding:16px 20px;
}
.dialog__title{margin:0; font-size:18px; font-weight:700; color:#fff;}
.dialog__close{background:none; border:none; color:#fff; font-size:18px; line-height:1; opacity:.85;}
.dialog__close:hover{opacity:1;}
.dialog__body{padding:20px; max-height:calc(100vh - 160px); overflow-y:auto;}
.dialog__section-title{font-size:15px; font-weight:700; color:var(--c-text-strong); margin:18px 0 10px; display:flex; align-items:center; justify-content:space-between;}
.dialog__actions{display:flex; justify-content:flex-end; gap:8px; margin-top:20px;}

/* 팝업 상단 컨텍스트(과정명 등) 행 */
.dialog__context{
  display:flex; border:1px solid var(--c-border); border-radius:var(--radius); overflow:hidden; margin-bottom:6px;
}
.dialog__context .k{background:var(--c-bg-muted); padding:12px 16px; font-weight:700; font-size:13px; white-space:nowrap; border-right:1px solid var(--c-border);}
.dialog__context .v{padding:12px 16px; font-size:14px;}

/* 넓은 팝업 (문제일괄등록 등 가로 스크롤 그리드용) */
.dialog--wide{max-width:1200px;}

/* ===================== 문제일괄등록 팝업 ===================== */
.bulk-upload__row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px solid var(--c-border); border-radius:var(--radius);
  background:var(--c-bg-muted); padding:12px 14px; margin-bottom:14px;
}
.bulk-upload__label{font-weight:700; font-size:13px; margin-right:4px;}
.bulk-upload__filename{color:var(--c-neutral-strong); font-size:13px; min-width:140px;}
.bulk-upload__spacer{flex:1;}
.bulk-notice{
  border:1px solid var(--c-border); border-radius:var(--radius);
  background:#FFFDF3; padding:14px 16px; margin-bottom:14px;
  font-size:12.5px; color:var(--c-text); line-height:1.7;
}
.bulk-notice b{color:var(--c-danger);}
.bulk-notice .bulk-notice__title{font-weight:700; color:var(--c-text-strong); margin-bottom:6px; display:block; font-size:13px;}
.bulk-notice ol{margin:0; padding-left:18px;}
.bulk-notice .link{color:var(--c-primary); text-decoration:underline; font-weight:600; cursor:pointer;}

/* 정합성 결과 그리드 (가로 스크롤) */
.bulk-result-wrap{overflow-x:auto; border-top:1px solid var(--c-border);}
table.bulk-result{width:100%; border-collapse:collapse; min-width:1400px;}
.bulk-result th{background:var(--c-bg-header); color:var(--c-text-strong); font-weight:700; font-size:12px; padding:9px 8px; text-align:center; border-bottom:1px solid var(--c-border); white-space:nowrap;}
.bulk-result th .req{color:var(--c-danger);}
.bulk-result td{padding:9px 8px; text-align:center; font-size:12.5px; border-bottom:1px solid var(--c-bg-header); white-space:nowrap;}
.bulk-result .res-ok{color:var(--c-success); font-weight:700;}
.bulk-result .res-err{color:var(--c-danger); font-weight:700;}

/* ===================== 시험지 미리보기 팝업 ===================== */
.exam-preview__head{
  border:1px solid var(--c-border); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:16px; background:var(--c-bg-muted);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.exam-preview__title{font-size:16px; font-weight:700; color:var(--c-text-strong);}
.exam-preview__meta{font-size:13px; color:var(--c-neutral-strong);}
.exam-preview__timer{font-size:14px; font-weight:700; color:var(--c-danger);}
.exam-q{border:1px solid var(--c-border); border-radius:var(--radius); padding:16px 18px; margin-bottom:12px;}
.exam-q__no{font-weight:700; color:var(--c-primary); margin-right:6px;}
.exam-q__text{font-size:14px; color:var(--c-text-strong); font-weight:600; margin-bottom:6px;}
.exam-q__badges{font-size:12px; color:var(--c-neutral-strong); margin-bottom:12px;}
.exam-q__opt{display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13.5px; color:var(--c-text);}
.exam-q__opt .circle{width:16px; height:16px; border:1px solid var(--c-border); border-radius:50%; flex:none;}
.exam-q__answer-area{width:100%; min-height:90px; border:1px solid var(--c-border); border-radius:var(--radius); padding:10px; background:var(--c-bg-muted); color:var(--c-placeholder); font-size:13px;}

/* 문제출제범위 선택 태그 */
.scope-tag{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--c-primary); color:#fff; border-radius:4px;
  padding:5px 10px; font-size:12.5px; font-weight:600; margin-right:6px;
}
.scope-tag__x{background:none; border:none; color:#fff; font-size:11px; line-height:1; opacity:.85;}
.scope-tag__x:hover{opacity:1;}

/* 마스터-디테일 선택된 행 */
.data-table tbody tr.row-selected{background:#EAF3FC;}
.data-table tbody tr.row-selected:hover{background:#E1EEFA;}

/* ===================== 마스터-디테일 2분할 (과제관리 목록) ===================== */
.master-detail{display:flex; gap:20px; align-items:flex-start;}
.master-detail__col{flex:1; min-width:0;}
.md-panel-title{font-size:15px; font-weight:700; color:var(--c-text-strong); margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.md-panel-title .count{font-size:13px; color:var(--c-neutral-strong); font-weight:400;}
.md-panel-title .spacer{flex:1;}
.detail-empty{
  border:1px solid var(--c-border); border-radius:var(--radius); background:var(--c-bg-muted);
  padding:40px 20px; text-align:center; color:var(--c-neutral-strong); font-size:13.5px;
}

/* ===================== 오프셋 범위 필드 (응시시점 / 제출기준) ===================== */
.offset-range{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.offset-range .num{width:90px;}
.offset-range .time{width:110px;}
.offset-range .sel-week{width:150px;}
.offset-range .unit{color:var(--c-neutral-strong); font-size:13px; white-space:nowrap;}

/* ===================== 화면 전환 (목록 ⇄ 등록) ===================== */
[hidden]{display:none !important;}
.screen{display:none;}
.screen.active{display:block;}

/* ===================== 반응형 (컴포넌트) ===================== */
@media (max-width:1100px){
  .search-row{flex-direction:column;}
  .field__label, .field__control{width:100%;}
}
@media (max-width:860px){
  .form-row{flex-direction:column;}
  .form-row__label{width:100%; border-bottom:none; padding-bottom:6px;}
  .result-footer{flex-direction:column; gap:10px; align-items:stretch;}
  .page-controls{justify-content:center;}
}