/* =========================================================================
   classroom.css — 강의실 · 시험 · 성적 · 모달
   프로토타입 assets/css/style.css의 섹션 30, 31, 32, 33를 그대로 옮긴 파일입니다.
   ※ 파일 순서(globals.css의 import 순서)가 곧 캐스케이드 순서입니다. 바꾸지 마세요.
   ========================================================================= */

/* --------------------------------------------------------------------------
   30. 강의실 (lecture.html)
   -------------------------------------------------------------------------- */
.classroom{ padding-top:8px }
.classroom__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-7); flex-wrap:wrap; padding:16px 0 24px;
}
.classroom__title{ display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap }
.classroom__title h1{ font-size:var(--fs-2xl); font-weight:700; color:var(--ink); letter-spacing:-.02em }
.lec-period{
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:var(--blue-soft); color:var(--navy);
  border-radius:var(--r-md); padding:7px 14px;
  font-size:var(--fs-sm); font-weight:600; font-variant-numeric:tabular-nums;
}
.classroom__grid{ display:grid; grid-template-columns:1fr 380px; gap:var(--s-8); align-items:start }

/* 좌측 — 플레이어 */
.player__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:#0e0e12; border-radius:var(--r-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-5);
  color:rgba(255,255,255,.5);
}
.player__play{
  width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center;
}
.player__play::before{
  content:""; border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff; margin-left:4px;
}
.player__note{ font-size:var(--fs-sm); letter-spacing:.02em }

.cur-lecture{ margin-top:22px }
.cur-lecture h2{ font-size:var(--fs-xl); font-weight:700; color:var(--ink); letter-spacing:-.02em }

/* 진도율 */
.lec-progress{
  display:flex; align-items:center; gap:var(--s-6); margin:18px 0 26px;
  padding:18px 22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
.lec-progress__label{ font-size:var(--fs-sm); font-weight:700; color:var(--muted); white-space:nowrap }
.lec-progress__track{ flex:1; height:10px; border-radius:var(--r-full); background:var(--surface-alt); overflow:hidden }
.lec-progress__track i{ display:block; height:100%; border-radius:var(--r-full); background:var(--navy); transition:width .8s ease }
.lec-progress__pct{ font-size:var(--fs-2xl); font-weight:700; color:var(--blue); font-variant-numeric:tabular-nums; white-space:nowrap }

/* 자주 묻는 질문 — .faq 재활용, 래퍼만 */
.lec-qna h3{ font-size:var(--fs-md); font-weight:700; color:var(--ink); margin-bottom:12px }

/* 우측 사이드 */
.lec-side{ display:grid; gap:var(--s-6)}
.panel-card{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden }

/* 토글 헤더 (학습자료·필수 프로그램) */
.panel-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); width:100%;
  padding:var(--pad-card-y) var(--pad-card); font-size:var(--fs-md); font-weight:700; color:var(--ink); text-align:left;
}
.panel-toggle:hover{ background:#FAFBFD }
.panel-body[hidden]{ display:none }

/* 학습자료 3분할 */
.material-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line) }
/* 자료가 없는 칸은 <a> 대신 <span aria-disabled>로 그립니다. a에만 규칙을 걸면
   그 칸만 모양이 무너져 3칸이 어긋나므로 자식 전체를 대상으로 합니다. */
.material-grid > *{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3); text-align:center;
  padding:20px 12px; font-size:var(--fs-sm); font-weight:600; color:var(--muted); line-height:1.4;
}
.material-grid > * + *{ border-left:1px solid var(--line) }
.material-grid a:hover{ background:#FAFBFD }
.material-grid a:first-child{ color:var(--navy); font-weight:700 }
/* 자료가 없으면 눌리지 않는다는 걸 색으로 알립니다 */
.material-grid [aria-disabled="true"]{ color:var(--disabled); cursor:not-allowed }
.material-grid [aria-disabled="true"] .m-ico{ opacity:.45 }
.material-grid .m-ico{
  width:52px; height:52px; border-radius:var(--r-md); background:var(--blue-soft);
  display:flex; align-items:center; justify-content:center;
}

/* 강의목차 */
.toc__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:18px 20px; border-bottom:1px solid var(--line);
}
.toc__head b{ font-size:var(--fs-md); font-weight:700; color:var(--ink) }
.toc__head b span{ color:var(--blue); margin-left:3px }
.toc__badge{
  font-size:var(--fs-xs); font-weight:700; color:#fff; background:var(--navy);
  border-radius:var(--r-sm); padding:4px 10px;
}
.toc__list{ max-height:560px; overflow-y:auto }
.toc__item + .toc__item{ border-top:1px dashed var(--line) }
.toc__item a{
  display:flex; align-items:center; gap:var(--s-5); padding:14px 20px; line-height:1.4;
}
.toc__item a:hover{ background:#FAFBFD }
.toc__no{ font-size:var(--fs-sm); font-weight:700; color:var(--blue); flex:none; font-variant-numeric:tabular-nums }
.toc__title{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-2); flex:1 }
.toc__done{
  flex:none; font-size:var(--fs-xs); font-weight:700; color:var(--green);
  background:var(--green-soft); border-radius:var(--r-sm); padding:4px 9px;
}
.toc__item.is-current a{ background:var(--navy) }
.toc__item.is-current .toc__no{ color:#8FB4F0 }
.toc__item.is-current .toc__title{ color:#fff; font-weight:700 }
.toc__item.is-current .toc__done{ color:#fff; background:rgba(255,255,255,.16) }

/* 필수 프로그램 목록 */
.program-list{ border-top:1px solid var(--line); padding:10px 6px }
.program-list a{
  display:flex; align-items:center; gap:var(--s-5); padding:11px 14px; border-radius:var(--r-md);
  font-size:var(--fs-sm); color:var(--ink-2);
}
.program-list a:hover{ background:#FAFBFD }
.program-list .p-ico{
  width:34px; height:34px; border-radius:var(--r-sm); background:var(--surface-alt);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.program-list .p-tag{
  margin-left:auto; flex:none; font-size:var(--fs-xs); font-weight:700; color:var(--blue);
  border:1px solid var(--blue-line); border-radius:var(--r-full); padding:2px 8px;
}

@media (max-width:980px){
  .classroom__grid{ grid-template-columns:1fr }
  .lec-side{ order:-1 }   /* 모바일: 목차를 영상 위로 */
}
@media (max-width:560px){
  .classroom__title h1{ font-size:var(--fs-xl) }
  .material-grid{ grid-template-columns:1fr }
  .material-grid > * + *{ border-left:0; border-top:1px solid var(--line) }
  .lec-progress{ flex-wrap:wrap; gap:var(--s-5)}
}

/* --------------------------------------------------------------------------
   31. 시험 응시 (exam.html)
   -------------------------------------------------------------------------- */
.exam{ max-width:820px; margin:0 auto; padding-top:8px }
.exam__head{ padding:16px 0 22px }
.exam__head h1{ font-size:var(--fs-2xl); font-weight:700; color:var(--ink); letter-spacing:-.02em; text-align:center }

/* 시험 정보 요약 (헤더 테이블 대체 — 각진 카드) */
.exam-info{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--navy); border-radius:var(--r-lg); overflow:hidden; margin-bottom:14px;
}
.exam-info div{ padding:16px 18px; text-align:center }
.exam-info div + div{ border-left:1px solid rgba(255,255,255,.12) }
.exam-info dt{ font-size:var(--fs-xs); color:#8FB4F0; margin-bottom:5px }
.exam-info dd{ font-size:var(--fs-sm); font-weight:700; color:#fff; font-variant-numeric:tabular-nums }

/* 진행 상태 바 (풀이한 문항 수 · 남은 시간) */
.exam-status{
  position:sticky; top:var(--header-h); z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 20px; margin-bottom:22px;
}
.exam-status__count{ font-size:var(--fs-sm); color:var(--muted); font-weight:600 }
.exam-status__count b{ color:var(--blue); font-variant-numeric:tabular-nums }
.exam-status__timer{ display:flex; align-items:center; gap:var(--s-3); font-size:var(--fs-sm); font-weight:700; color:var(--ink) }
.exam-status__timer .clock{
  background:var(--blue-soft); color:var(--navy); border-radius:var(--r-sm);
  padding:5px 12px; font-size:var(--fs-md); font-variant-numeric:tabular-nums;
}

/* 문항 카드 */
.q-list{ display:grid; gap:var(--s-5)}
.q-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px }
.q-card.is-answered{ border-color:var(--blue-line) }
.q-card__q{ display:flex; gap:var(--s-4); font-size:var(--fs-md); font-weight:700; color:var(--ink); line-height:1.5; margin-bottom:16px }
.q-card__num{
  flex:none; min-width:26px; height:26px; padding:0 7px; border-radius:var(--r-sm);
  background:var(--navy); color:#fff; font-size:var(--fs-sm); font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;
}
.q-card.is-answered .q-card__num{ background:var(--blue) }

/* 보기 (라디오) — 2열, 클릭 영역 전체 */
.q-options{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3)}
.q-options.is-single{ grid-template-columns:1fr }
.q-option{
  display:flex; align-items:flex-start; gap:var(--s-4); cursor:pointer;
  padding:12px 15px; border:1px solid var(--line); border-radius:var(--r-md);
  font-size:var(--fs-sm); color:var(--ink-2); line-height:1.5; transition:border-color .12s, background-color .12s;
}
.q-option:hover{ border-color:var(--blue-line); background:#FAFBFD }
.q-option input{ position:absolute; opacity:0; width:0; height:0 }
.q-option .radio{
  flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--surface); position:relative; transition:border-color .12s;
}
.q-option:has(input:checked),
.q-option.is-selected{ border-color:var(--blue); background:var(--blue-soft) }
.q-option:has(input:checked) .radio,
.q-option.is-selected .radio{ border-color:var(--blue) }
.q-option:has(input:checked) .radio::after,
.q-option.is-selected .radio::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--blue);
}
.q-option input:focus-visible + .radio{ outline:2px solid var(--blue); outline-offset:2px }

/* 제출 바 */
.exam-submit{ margin-top:24px; text-align:center }
.exam-submit .btn{ min-width:280px }
.exam-submit__note{ font-size:var(--fs-sm); color:var(--muted); margin-top:12px }

@media (max-width:980px){
  .exam-info{ grid-template-columns:repeat(2,1fr) }
  .exam-info div:nth-child(3){ border-left:0 }
  .exam-info div:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.12) }
  .q-options{ grid-template-columns:1fr }
}

/* --------------------------------------------------------------------------
   32. 시험 성적 확인 (exam-result.html)
   -------------------------------------------------------------------------- */
.result{ padding-top:8px }

/* 합격 요약 스트립 */
.result-summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-8); flex-wrap:wrap;
  background:var(--navy); color:#fff; border-radius:var(--r-lg); padding:26px 30px; margin-bottom:28px;
}
.result-summary__left{ display:flex; align-items:center; gap:var(--s-6); flex-wrap:wrap }
.result-summary__badge{
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:var(--green-soft); color:var(--green); border-radius:var(--r-md);
  padding:8px 16px; font-size:var(--fs-md); font-weight:700;
}
.result-summary__badge.is-fail{ background:var(--red-soft); color:var(--red) }

/* 합격·불합격이면 배너 전체 색을 바꿉니다 — 합격 연초록, 불합격 분홍.
   (미응시는 기본 남색 그대로) 밝은 배경이라 글씨는 잉크색, 통계 칸은 흰색,
   배지는 채움색으로 뒤집어 대비를 살립니다. */
.result-summary.is-pass{ background:var(--green-soft); color:var(--ink) }
.result-summary.is-fail{ background:var(--red-soft); color:var(--ink) }
.result-summary.is-pass .result-summary__badge{ background:var(--green); color:#fff }
.result-summary.is-fail .result-summary__badge.is-fail{ background:var(--red); color:#fff }
.result-summary.is-pass .result-summary__course small,
.result-summary.is-fail .result-summary__course small{ color:var(--muted) }
.result-summary.is-pass .result-summary__stat,
.result-summary.is-fail .result-summary__stat{ background:#fff }
.result-summary.is-pass .result-summary__stat dt{ color:var(--green) }
.result-summary.is-fail .result-summary__stat dt{ color:var(--red) }
.result-summary__course{ font-size:var(--fs-lg); font-weight:700 }
.result-summary__course small{ display:block; font-size:var(--fs-sm); color:rgba(255,255,255,.65); font-weight:600; margin-top:2px }
.result-summary__stats{ display:flex; gap:var(--s-5)}
.result-summary__stat{ text-align:center; background:rgba(255,255,255,.08); border-radius:var(--r-md); padding:12px 22px }
.result-summary__stat dt{ font-size:var(--fs-xs); color:#8FB4F0; margin-bottom:4px }
.result-summary__stat dd{ font-size:var(--fs-2xl); font-weight:700; font-variant-numeric:tabular-nums }
@media (max-width:560px){ .result-summary__stat{ padding:12px 14px } }

/* 섹션 (왼쪽 강조바 + 제목) */
.result-section{ margin-bottom:26px }
.result-section__head{ display:flex; align-items:center; gap:var(--s-3); margin-bottom:12px }
.result-section__head::before{ content:""; width:4px; height:18px; border-radius:var(--r-sm); background:var(--blue) }
.result-section__head h2{ font-size:var(--fs-md); font-weight:700; color:var(--ink) }

/* 성적 테이블 */
.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface) }
.result-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:640px }
.result-table th{
  background:var(--surface-alt); color:var(--muted); font-weight:700;
  padding:14px 12px; text-align:center; white-space:nowrap;
}
.result-table th + th, .result-table td + td{ border-left:1px solid var(--line) }
.result-table tbody th{ background:var(--surface-alt) }
.result-table td{ padding:16px 12px; text-align:center; color:var(--ink-2); font-variant-numeric:tabular-nums }
.result-table tbody tr + tr td,
.result-table tbody tr + tr th{ border-top:1px solid var(--line) }
.result-table .is-pass{ color:var(--green); font-weight:700 }
.result-table .is-grade{ font-weight:700; color:var(--navy) }
.result-table .is-highlight{ color:var(--blue); font-weight:700 }
/* 2행 헤더(학습평가) */
.result-table .row-label{ background:var(--surface-alt); color:var(--muted); font-weight:700; white-space:nowrap }

/* 학습진도 */
.progress-rows{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface) }
.progress-row{
  display:grid; grid-template-columns:150px 1fr 64px 110px; align-items:center; gap:var(--s-7);
  padding:18px 22px;
}
.progress-row + .progress-row{ border-top:1px solid var(--line) }
.progress-row__label{
  text-align:center; font-size:var(--fs-sm); font-weight:700; color:var(--ink);
  background:var(--surface-alt); border-radius:var(--r-md); padding:10px 0;
}
.progress-row__track{ height:10px; border-radius:var(--r-full); background:var(--surface-alt); overflow:hidden }
.progress-row__track i{ display:block; height:100%; border-radius:var(--r-full) }
.progress-row--current .progress-row__track i{ background:var(--navy) }
.progress-row--recommend .progress-row__track i{ background:var(--blue-300) }
.progress-row__pct{ font-size:var(--fs-sm); font-weight:700; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums }
.progress-row__count{ font-size:var(--fs-sm); color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums }
.progress-row--current .progress-row__count b{ color:var(--navy) }
.progress-row--recommend .progress-row__count b{ color:var(--blue) }

/* 합격·불합격 메시지 */
.result-msg{
  text-align:center; background:var(--green-soft); border-radius:var(--r-lg);
  padding:26px 24px; margin:6px 0 24px;
}
.result-msg strong{ display:block; font-size:var(--fs-md); font-weight:700; color:var(--ink); margin-bottom:6px }
.result-msg p{ font-size:var(--fs-sm); color:var(--green); font-weight:600 }
.result-msg.is-fail{ background:var(--red-soft) }
.result-msg.is-fail p{ color:var(--red) }
.result-table .is-fail{ color:var(--red); font-weight:700 }

.result-cta{ display:flex; justify-content:center; gap:var(--s-4); flex-wrap:wrap }
.result-cta .btn{ min-width:280px }
.result-cta .btn--ghost{ min-width:160px }

@media (max-width:980px){
  .result-summary{ flex-direction:column; align-items:flex-start; gap:var(--s-6)}
  .result-summary__stats{ width:100% }
  .result-summary__stat{ flex:1 }
  .progress-row{ grid-template-columns:1fr; gap:var(--s-4); text-align:center }
  .progress-row__pct, .progress-row__count{ text-align:center }
}

/* --------------------------------------------------------------------------
   33. 공통 센터 모달 (기간 연장 등)
   -------------------------------------------------------------------------- */
.modal{ position:fixed; inset:0; z-index:120; display:none }
.modal.is-open{ display:flex; align-items:center; justify-content:center; padding:20px }
.modal__dim{ position:absolute; inset:0; background:rgba(15,22,34,.5) }
.modal__panel{
  position:relative; background:var(--surface); border-radius:var(--r-lg);
  width:min(440px, 100%); padding:28px 28px 24px;
  animation:modalIn .16s ease-out both;
}
@keyframes modalIn{ from{ transform:translateY(10px) } to{ transform:none } }
.modal__title{ font-size:var(--fs-lg); font-weight:700; color:var(--ink); letter-spacing:-.02em; margin-bottom:6px }
.modal__course{ font-size:var(--fs-sm); font-weight:700; color:var(--blue); margin-bottom:16px }
.modal__count{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-5);
  background:var(--surface-sunken); border-radius:var(--r-md); padding:14px 16px; margin-bottom:14px;
}
.modal__count span{ font-size:var(--fs-sm); color:var(--muted) }
.modal__count b{ font-size:var(--fs-md); color:var(--ink); font-variant-numeric:tabular-nums }
.modal__count .used{ color:var(--blue) }
.modal__desc{ font-size:var(--fs-sm); color:var(--muted); line-height:1.7; margin-bottom:20px }
.modal__desc b{ color:var(--ink-2) }
.modal__notice{
  display:flex; gap:var(--s-3); align-items:flex-start;
  background:var(--red-soft); border-radius:var(--r-md); padding:12px 14px; margin-bottom:20px;
  font-size:var(--fs-sm); color:var(--red); line-height:1.6;
}
.modal__actions{ display:grid; grid-template-columns:1fr 1.4fr; gap:var(--s-4)}
.modal__actions .btn{ padding:13px }
.modal--done .modal__actions{ grid-template-columns:1fr }
.modal__result{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s-2); padding:8px 0 4px;
}

/* 강의 샘플 팝오버 — 영상 자리는 회색 플레이스홀더입니다.
   실제 연동 시 .modal__video 안의 .ph를 <video> 또는 iframe으로 교체하세요. */
.modal--video .modal__panel{ width:min(760px, 100%); padding:20px }
.modal__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-6); margin-bottom:14px }
.modal__head .modal__title{ margin-bottom:2px }
.modal__head .modal__course{ margin-bottom:0 }
.modal__x{
  flex-shrink:0; width:32px; height:32px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-sm); color:var(--muted); background:var(--surface-sunken);
}
.modal__x:hover{ background:var(--surface-alt); color:var(--ink-2) }
.modal__video{ position:relative; border-radius:var(--r-md); overflow:hidden }
/* 재생 버튼이 가운데를 차지하므로 자리 표시 문구는 아래로 내립니다 */
.modal__video .ph{
  width:100%; aspect-ratio:16/9; border-radius:0;
  justify-content:flex-end; padding-bottom:14px;
}
.modal__video .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%;
  background:rgba(1,1,1,.55); color:#fff; font-size:var(--fs-xl); padding-left:4px;
  display:flex; align-items:center; justify-content:center;
}
.modal__video + .modal__desc{ margin:14px 0 0 }
.modal__result .mark{
  width:52px; height:52px; border-radius:50%; background:var(--green-soft); color:var(--green);
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xl); margin-bottom:6px;
}

/* 수강종료 상태 배지 — 위 상태 태그와 동일한 채움+흰 텍스트 */
.badge--done{ background:var(--blue-300); color:#fff }   /* 파랑 · 자격증 발급 완료 */
.badge--expired{ background:var(--faint); color:#fff }   /* 옅은 회색 · 기간 만료(비활성 상태라 뒤로 물림) */