/* ============================================================================
   base.css — 응시 화면(index.html) 골격 · 문항 카드 · 결과
   토큰은 css/apple.css 에서만 정의한다. 이 파일은 소비만 한다.
   클래스명은 js/render.js 등이 참조하므로 절대 바꾸지 않는다.
   ============================================================================ */

/* ── 앱 크롬 ───────────────────────────────────────────────────────────── */
#topbar{
  position:sticky;top:0;z-index:200;
  height:52px;display:flex;align-items:center;justify-content:space-between;gap:var(--ap-s4);
  padding:0 var(--ap-s6);
  background:var(--ap-chrome);color:var(--ap-label);
  backdrop-filter:var(--ap-material);-webkit-backdrop-filter:var(--ap-material);
  border-bottom:1px solid var(--ap-separator-hair);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #topbar{background:var(--ap-chrome-solid)}
}
.tb-logo{
  display:flex;align-items:center;gap:var(--ap-s2);
  font-size:var(--ap-t-callout);font-weight:600;letter-spacing:-.012em;color:var(--ap-label);
}
.tb-dot{width:7px;height:7px;border-radius:50%;background:var(--ap-blue);flex-shrink:0}
.tb-logo em{font-style:normal;font-weight:400;color:var(--ap-label-3)}
.tb-prog{display:flex;align-items:center;gap:var(--ap-s3);min-width:0}
.tb-lbl{
  font-size:var(--ap-t-caption);font-weight:500;color:var(--ap-label-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-bar{width:180px;max-width:34vw;height:4px;border-radius:var(--ap-r-pill);background:var(--ap-fill-2);overflow:hidden}
.tb-fill{height:100%;border-radius:inherit;background:var(--ap-blue);transition:width var(--ap-dur-3) var(--ap-ease-out)}

/* 시험 타이머 — 어두운 HUD (Apple 의 Dynamic Island 계열 반전 표면) */
.mec-timer{
  position:fixed;top:64px;right:16px;z-index:150;display:none;align-items:center;gap:6px;
  padding:7px 13px;border-radius:var(--ap-r-pill);
  background:rgba(29,29,31,.9);color:#fff;
  backdrop-filter:var(--ap-material);-webkit-backdrop-filter:var(--ap-material);
  font-size:var(--ap-t-subhead);font-weight:600;font-variant-numeric:tabular-nums;
  box-shadow:var(--ap-shadow-md);
}
.mec-timer.warn{background:rgba(215,0,21,.94);animation:mecPulse 1.2s var(--ap-ease) infinite}
.mt-ic{font-size:13px;line-height:1}
@keyframes mecPulse{0%,100%{opacity:1}50%{opacity:.62}}

/* ── 레이아웃 ──────────────────────────────────────────────────────────── */
#layout{display:flex;min-height:calc(100vh - 52px)}
#sidebar{
  width:248px;flex-shrink:0;display:none;flex-direction:column;
  position:sticky;top:52px;height:calc(100vh - 52px);overflow-y:auto;
  padding:var(--ap-s5) 0;
  background:var(--ap-surface-2);border-right:1px solid var(--ap-separator-soft);
}
#sidebar.show{display:flex}
.sb-lbl{
  padding:0 var(--ap-s6);margin-bottom:var(--ap-s2);
  font-size:var(--ap-t-caption2);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ap-label-4);
}
.sb-step{
  display:flex;align-items:center;gap:var(--ap-s3);
  min-height:40px;padding:8px 14px;margin:1px var(--ap-s3);
  border-radius:var(--ap-r-sm);
  transition:background var(--ap-dur-1) var(--ap-ease);
}
.sb-dot{
  width:24px;height:24px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--ap-gray-4);background:var(--ap-surface);
  font-size:var(--ap-t-caption2);font-weight:600;color:var(--ap-label-4);
  transition:background var(--ap-dur-2) var(--ap-ease-out),border-color var(--ap-dur-2) var(--ap-ease-out),color var(--ap-dur-2) var(--ap-ease-out);
}
.sb-txt{font-size:var(--ap-t-footnote);font-weight:500;color:var(--ap-label-4);transition:color var(--ap-dur-2) var(--ap-ease)}
.sb-step.done .sb-dot{background:var(--ap-green-tint);border-color:transparent;color:var(--ap-green)}
.sb-step.done .sb-txt{color:var(--ap-label-3)}
.sb-step.active{background:var(--ap-blue-tint)}
.sb-step.active .sb-dot{background:var(--ap-blue);border-color:var(--ap-blue);color:#fff}
.sb-step.active .sb-txt{color:var(--ap-blue-text);font-weight:600}
.sb-div{height:1px;background:var(--ap-separator-soft);margin:var(--ap-s3) var(--ap-s5)}
.sb-foot,.sb-footer{padding:var(--ap-s3) var(--ap-s5);margin-top:auto}
.sb-foot-row{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.sb-foot-icon{font-size:13px;opacity:.5}
.sb-foot-txt,.sb-info{font-size:var(--ap-t-caption);line-height:1.5;color:var(--ap-label-4)}

#main{flex:1;min-width:0;padding:var(--ap-s7) var(--ap-s8) var(--ap-s10)}
#app{width:var(--ap-content);margin:0 auto}

/* ── 등록 폼 ───────────────────────────────────────────────────────────── */
.rf{margin-bottom:var(--ap-s5)}
.rf label,.rf-label{
  display:block;margin-bottom:var(--ap-s2);
  font-size:var(--ap-t-footnote);font-weight:500;color:var(--ap-label-2);letter-spacing:-.003em;
}
.rf-req{color:var(--ap-red);margin-left:2px}
.rf-opt{color:var(--ap-label-4);font-weight:400}
.rf-input,.rf-sel{
  width:100%;min-height:46px;padding:12px 14px;
  background:var(--ap-surface);color:var(--ap-label);
  border:1px solid var(--ap-separator);border-radius:var(--ap-r);
  font-size:var(--ap-t-callout);line-height:var(--ap-t-callout-lh);
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--ap-dur-1) var(--ap-ease),box-shadow var(--ap-dur-1) var(--ap-ease);
}
.rf-input::placeholder{color:var(--ap-label-4)}
.rf-input:hover,.rf-sel:hover{border-color:var(--ap-gray-3)}
.rf-input:focus,.rf-sel:focus{outline:none;border-color:var(--ap-blue);box-shadow:0 0 0 4px var(--ap-blue-ring)}
.rf-input.err,.rf-sel.err{border-color:var(--ap-red)}
.rf-input.err:focus,.rf-sel.err:focus{box-shadow:0 0 0 4px rgba(215,0,21,.24)}
.rf-sel{
  flex:1;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.dob-row{display:flex;gap:var(--ap-s2)}

/* ── 섹션 헤더 ─────────────────────────────────────────────────────────── */
.sec-hd{margin-bottom:var(--ap-s6)}
/* 뒤로가기(왼쪽) + 단계 배지(오른쪽) 한 줄 — 배지는 항상 오른쪽 끝에 붙는다 */
.sec-hd-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ap-s3);
  margin-bottom:var(--ap-s3);
}
.back-btn{flex-shrink:0}
.sec-badge{
  display:inline-block;margin-bottom:var(--ap-s3);
  padding:4px 11px;border-radius:var(--ap-r-pill);
  background:var(--ap-blue-tint);color:var(--ap-blue-text);
  font-size:var(--ap-t-caption2);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.sec-title{
  font-size:var(--ap-t-title1);line-height:var(--ap-t-title1-lh);letter-spacing:var(--ap-t-title1-ls);
  font-weight:700;color:var(--ap-label);margin-bottom:var(--ap-s1);
}
.sec-desc{font-size:var(--ap-t-subhead);line-height:1.55;color:var(--ap-label-3)}

/* ── 문항 카드 ─────────────────────────────────────────────────────────── */
.qcard,.intake-card,.q-panel,.writing-card,.lst-card,.spk-card,.complete-screen{
  background:var(--ap-surface);
  border:1px solid var(--ap-separator-soft);
  border-radius:var(--ap-r-lg);
  box-shadow:var(--ap-shadow-xs);
  overflow:hidden;
}
.qcard-meta{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ap-s3);
  padding:13px 22px;border-bottom:1px solid var(--ap-separator-soft);
  background:var(--ap-surface-2);
}
.qc-num{font-size:var(--ap-t-caption);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ap-label-3)}
.qc-dots{display:flex;gap:4px}
.qc-dot{width:6px;height:6px;border-radius:var(--ap-r-pill);background:var(--ap-gray-4);transition:all var(--ap-dur-2) var(--ap-ease-out)}
.qc-dot.done{background:var(--ap-blue)}
.qc-dot.cur{background:var(--ap-blue);width:16px}
.qc-badge{
  padding:3px 10px;border-radius:var(--ap-r-pill);
  background:var(--ap-indigo-tint);color:var(--ap-indigo);
  font-size:var(--ap-t-caption2);font-weight:600;letter-spacing:.04em;
}
.qcard-body{padding:var(--ap-s6) var(--ap-s6) var(--ap-s5)}
.qcard-footer{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ap-s3);
  padding:14px var(--ap-s6);border-top:1px solid var(--ap-separator-soft);
  background:var(--ap-surface-2);
}
.q-stimulus{
  margin-bottom:var(--ap-s4);padding:13px 16px;
  background:var(--ap-fill);border-radius:var(--ap-r-md);
  font-size:var(--ap-t-subhead);line-height:1.65;color:var(--ap-label-2);
}
.q-text{
  font-size:var(--ap-t-body);line-height:var(--ap-t-body-lh);letter-spacing:var(--ap-t-body-ls);
  font-weight:500;color:var(--ap-label);margin-bottom:var(--ap-s5);
}
.q-text.big,.prea1 .q-text{font-size:var(--ap-t-title3);line-height:1.45;font-weight:600}

/* ── 선택지 ───────────────────────────────────────────────────────────── */
.opts{display:flex;flex-direction:column;gap:var(--ap-s2)}
.opt{
  display:flex;align-items:center;gap:var(--ap-s3);
  min-height:52px;padding:13px 16px;
  background:var(--ap-surface);
  border:1px solid var(--ap-separator);border-radius:var(--ap-r-md);
  cursor:pointer;user-select:none;
  transition:background var(--ap-dur-1) var(--ap-ease),border-color var(--ap-dur-1) var(--ap-ease),transform var(--ap-dur-1) var(--ap-ease-out);
}
.opt:hover{background:var(--ap-fill);border-color:var(--ap-gray-3)}
.opt:active{transform:scale(.995)}
.opt.sel{background:var(--ap-blue-tint);border-color:var(--ap-blue);box-shadow:inset 0 0 0 1px var(--ap-blue)}
.opt-k{
  width:30px;height:30px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--ap-gray-3);background:var(--ap-surface);
  font-size:var(--ap-t-footnote);font-weight:600;color:var(--ap-label-3);
  transition:background var(--ap-dur-1) var(--ap-ease),border-color var(--ap-dur-1) var(--ap-ease),color var(--ap-dur-1) var(--ap-ease);
}
.opt.sel .opt-k{background:var(--ap-blue);border-color:var(--ap-blue);color:#fff}
.opt-txt{flex:1;min-width:0;font-size:var(--ap-t-callout);line-height:1.45;color:var(--ap-label)}
.opt.big{min-height:60px;padding:16px 18px}
.opt.big .opt-txt{font-size:var(--ap-t-body)}

.img-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ap-s3)}
.img-opt{
  padding:20px 14px;text-align:center;cursor:pointer;
  background:var(--ap-surface);
  border:1px solid var(--ap-separator);border-radius:var(--ap-r-lg);
  transition:background var(--ap-dur-1) var(--ap-ease),border-color var(--ap-dur-1) var(--ap-ease),transform var(--ap-dur-1) var(--ap-ease-out);
}
.img-opt:hover{background:var(--ap-fill);border-color:var(--ap-gray-3)}
.img-opt:active{transform:scale(.98)}
.img-opt.sel{background:var(--ap-blue-tint);border-color:var(--ap-blue);box-shadow:inset 0 0 0 1px var(--ap-blue)}
.img-opt-emoji{display:block;font-size:44px;line-height:1;margin-bottom:var(--ap-s2)}
.img-opt-lbl{font-size:var(--ap-t-subhead);font-weight:500;color:var(--ap-label-2)}
.img-opt.sel .img-opt-lbl{color:var(--ap-blue-text);font-weight:600}

.vis-stim{
  margin-bottom:var(--ap-s5);padding:var(--ap-s6);text-align:center;
  background:var(--ap-fill);border-radius:var(--ap-r-lg);
}

/* ── 자기평가(intake) ─────────────────────────────────────────────────── */
.iq-block{padding:var(--ap-s6)}
.iq-block+.iq-block{border-top:1px solid var(--ap-separator-soft)}
.iq-hd{display:flex;gap:var(--ap-s3);align-items:flex-start;margin-bottom:var(--ap-s3)}
.iq-num{
  width:26px;height:26px;flex-shrink:0;margin-top:2px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ap-blue);color:#fff;font-size:var(--ap-t-caption);font-weight:600;
}
.iq-txt{font-size:var(--ap-t-callout);font-weight:500;line-height:1.45;color:var(--ap-label)}
.iq-opts{display:flex;flex-direction:column;gap:var(--ap-s1);padding-left:38px}
.iq-opt{
  display:flex;align-items:center;gap:var(--ap-s3);
  min-height:44px;padding:11px 14px;
  border:1px solid var(--ap-separator);border-radius:var(--ap-r);
  font-size:var(--ap-t-footnote);color:var(--ap-label-2);
  cursor:pointer;user-select:none;
  transition:background var(--ap-dur-1) var(--ap-ease),border-color var(--ap-dur-1) var(--ap-ease),color var(--ap-dur-1) var(--ap-ease);
}
.iq-opt:hover{background:var(--ap-fill);border-color:var(--ap-gray-3)}
.iq-opt.sel{background:var(--ap-blue-tint);border-color:var(--ap-blue);color:var(--ap-blue-text);font-weight:600}
.iq-radio{
  width:20px;height:20px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--ap-gray-3);
  transition:background var(--ap-dur-1) var(--ap-ease),border-color var(--ap-dur-1) var(--ap-ease);
}
.iq-opt.sel .iq-radio{background:var(--ap-blue);border-color:var(--ap-blue)}
.iq-opt.sel .iq-radio::after{content:'';width:7px;height:7px;border-radius:50%;background:#fff}
.intake-footer{
  display:flex;justify-content:flex-end;
  padding:var(--ap-s4) var(--ap-s6);border-top:1px solid var(--ap-separator-soft);
  background:var(--ap-surface-2);
}

/* ── 리딩 ─────────────────────────────────────────────────────────────── */
.read-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--ap-s6);align-items:start}
.passage-panel{
  position:sticky;top:68px;max-height:calc(100vh - 100px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--ap-surface);border:1px solid var(--ap-separator-soft);
  border-radius:var(--ap-r-lg);box-shadow:var(--ap-shadow-xs);
}
.passage-head{
  flex-shrink:0;padding:14px 20px;
  background:var(--ap-surface-2);border-bottom:1px solid var(--ap-separator-soft);
}
.passage-head-title{font-size:var(--ap-t-subhead);font-weight:600;color:var(--ap-label)}
.passage-head-type{
  margin-top:2px;font-size:var(--ap-t-caption2);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ap-label-3);
}
.passage-body{
  flex:1;overflow-y:auto;padding:22px;
  font-size:var(--ap-t-callout);line-height:1.85;color:var(--ap-label);
}
.passage-body.big{font-size:var(--ap-t-body);line-height:2}
.passage-p{margin:0 0 1em}
.passage-p:last-child{margin-bottom:0}
.q-panel-meta{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ap-s3);
  padding:13px 20px;background:var(--ap-surface-2);
  border-bottom:1px solid var(--ap-separator-soft);
}

/* ── 작문 ─────────────────────────────────────────────────────────────── */
.writing-hd{padding:var(--ap-s6);background:var(--ap-blue-tint);border-bottom:1px solid var(--ap-separator-soft)}
.writing-hd-eye{
  margin-bottom:var(--ap-s2);font-size:var(--ap-t-caption2);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ap-blue-text);
}
.writing-hd-inst{font-size:var(--ap-t-callout);line-height:1.6;font-weight:500;color:var(--ap-label)}
.writing-hd-ctx{margin-top:var(--ap-s2);font-size:var(--ap-t-footnote);color:var(--ap-label-2)}
.writing-hd-tags{display:flex;flex-wrap:wrap;gap:var(--ap-s2);margin-top:var(--ap-s3)}
.writing-tag{
  padding:3px 10px;border-radius:var(--ap-r-pill);
  background:var(--ap-surface);color:var(--ap-label-2);
  font-size:var(--ap-t-caption2);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.writing-frames{padding:var(--ap-s4) var(--ap-s5);background:var(--ap-fill);border-bottom:1px solid var(--ap-separator-soft)}
.frame-line{
  margin-bottom:var(--ap-s2);padding-bottom:4px;
  border-bottom:1.5px solid var(--ap-gray-4);
  font-size:var(--ap-t-subhead);line-height:1.8;color:var(--ap-label-2);
}
.writing-ta-wrap{padding:var(--ap-s5)}
.writing-ta{
  width:100%;min-height:170px;padding:14px;
  background:var(--ap-surface);color:var(--ap-label);
  border:1px solid var(--ap-separator);border-radius:var(--ap-r-md);
  font-family:inherit;font-size:var(--ap-t-callout);line-height:1.7;resize:vertical;
  transition:border-color var(--ap-dur-1) var(--ap-ease),box-shadow var(--ap-dur-1) var(--ap-ease);
}
.writing-ta:focus{outline:none;border-color:var(--ap-blue);box-shadow:0 0 0 4px var(--ap-blue-ring)}
.writing-footer{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ap-s3);
  padding:12px var(--ap-s5);background:var(--ap-surface-2);
  border-top:1px solid var(--ap-separator-soft);
}
.wc-txt{font-size:var(--ap-t-footnote);font-weight:500;color:var(--ap-label-3)}

/* ── 리스닝 플레이어 ──────────────────────────────────────────────────── */
.lst-player{padding:var(--ap-s5) var(--ap-s6);background:var(--ap-surface-2);border-bottom:1px solid var(--ap-separator-soft)}
.lst-player-title{font-size:var(--ap-t-headline);font-weight:600;letter-spacing:-.012em;color:var(--ap-label)}
.lst-player-ctx{margin-bottom:var(--ap-s4);font-size:var(--ap-t-footnote);color:var(--ap-label-3)}
.lst-controls{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ap-s3)}
.lst-play-btn{
  display:inline-flex;align-items:center;gap:var(--ap-s2);
  min-height:44px;padding:11px 22px;border-radius:var(--ap-r-pill);
  background:var(--ap-blue);color:#fff;border:none;
  font-family:inherit;font-size:var(--ap-t-subhead);font-weight:600;cursor:pointer;
  transition:background var(--ap-dur-1) var(--ap-ease),transform var(--ap-dur-1) var(--ap-ease-out);
}
.lst-play-btn:hover:not(:disabled){background:var(--ap-blue-hover)}
.lst-play-btn:active:not(:disabled){transform:scale(.97)}
.lst-play-btn:disabled{opacity:.4;cursor:not-allowed}
.lst-spd{
  padding:5px 11px;border-radius:var(--ap-r-pill);
  background:var(--ap-fill);color:var(--ap-label-3);
  font-size:var(--ap-t-caption2);font-weight:600;
}
.lst-wave{display:flex;align-items:center;gap:3px;height:28px;padding:2px 8px}
.lst-wave span{display:block;width:4px;height:4px;border-radius:var(--ap-r-pill);background:var(--ap-blue);transition:height .09s ease}
.lst-wave.off{display:none}
.cur-spk{
  display:inline-flex;align-items:center;gap:7px;margin-top:var(--ap-s3);
  padding:6px 14px;border-radius:var(--ap-r-pill);
  background:var(--ap-blue-tint);color:var(--ap-blue-text);
  font-size:var(--ap-t-caption);font-weight:600;
}
.transcript{max-height:300px;overflow-y:auto;padding:var(--ap-s3) var(--ap-s4);display:flex;flex-direction:column;gap:var(--ap-s1)}
.dlg-turn{
  display:flex;align-items:flex-start;gap:var(--ap-s3);
  padding:10px;border-radius:var(--ap-r-md);border:1px solid transparent;
  transition:background var(--ap-dur-2) var(--ap-ease),border-color var(--ap-dur-2) var(--ap-ease);
}
.dlg-turn.active{background:var(--ap-blue-tint);border-color:transparent}
.dlg-turn.active .dlg-bubble{border-color:var(--ap-blue)}
.dlg-turn.right{flex-direction:row-reverse}
.dlg-body{display:flex;flex-direction:column}
.dlg-turn.right .dlg-body{align-items:flex-end}
.dlg-turn.right .dlg-bubble{background:var(--ap-indigo-tint);border-color:transparent;border-radius:var(--ap-r-md) var(--ap-r-md) 4px var(--ap-r-md)}
.dlg-av{
  width:40px;height:40px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:19px;
  background:var(--ap-blue-tint);border:1px solid var(--ap-separator-soft);
}
.dlg-av.r{background:var(--ap-indigo-tint)}
.dlg-name{
  margin-bottom:5px;font-size:var(--ap-t-caption2);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ap-label-3);
}
.dlg-bubble{
  max-width:82%;padding:10px 14px;
  background:var(--ap-surface);border:1px solid var(--ap-separator-soft);
  border-radius:var(--ap-r-md) var(--ap-r-md) var(--ap-r-md) 4px;
  font-size:var(--ap-t-subhead);line-height:1.55;color:var(--ap-label);
  transition:border-color var(--ap-dur-2) var(--ap-ease);
}
.nar-turn{padding:6px 4px;border-radius:var(--ap-r-sm);border:1px solid transparent;transition:background var(--ap-dur-2) var(--ap-ease)}
.nar-turn.active{background:var(--ap-blue-tint)}
.nar-txt{
  padding:11px 15px;background:var(--ap-fill);border-radius:var(--ap-r-md);
  font-size:var(--ap-t-callout);line-height:1.7;color:var(--ap-label-2);
}
.lst-q-section{padding:var(--ap-s5);border-top:1px solid var(--ap-separator-soft)}
.lst-wait{padding:var(--ap-s5) 0;text-align:center;font-size:var(--ap-t-footnote);color:var(--ap-label-4)}

/* ── 스피킹 ───────────────────────────────────────────────────────────── */
.spk-scene{
  padding:var(--ap-s6);text-align:center;
  background:var(--ap-fill);border-bottom:1px solid var(--ap-separator-soft);
}
.spk-scene-emojis{font-size:54px;letter-spacing:8px;line-height:1.3;margin-bottom:7px}
.spk-scene-cap{font-size:var(--ap-t-footnote);color:var(--ap-label-3)}
.spk-action{padding:var(--ap-s5)}
.flex-e{display:flex;justify-content:flex-end}
.prep-box{
  margin-bottom:var(--ap-s4);padding:var(--ap-s6);text-align:center;
  background:var(--ap-blue-tint);border-radius:var(--ap-r-lg);
}
.prep-count{
  font-size:60px;font-weight:600;line-height:1;letter-spacing:-.03em;
  color:var(--ap-blue-text);font-variant-numeric:tabular-nums;
}
.prep-lbl{margin-top:var(--ap-s2);font-size:var(--ap-t-subhead);color:var(--ap-label-3)}
.rec-box{
  margin-bottom:var(--ap-s4);padding:var(--ap-s6);text-align:center;
  border:1px solid var(--ap-separator);border-radius:var(--ap-r-lg);background:var(--ap-fill);
  transition:background var(--ap-dur-2) var(--ap-ease),border-color var(--ap-dur-2) var(--ap-ease);
}
.rec-box.idle{background:var(--ap-fill);border-color:var(--ap-separator)}
.rec-box.rec{background:var(--ap-red-tint);border-color:var(--ap-red-solid);animation:recPulse 1.6s var(--ap-ease) infinite}
.rec-box.done{background:var(--ap-green-tint);border-color:transparent}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,59,48,.22)}50%{box-shadow:0 0 0 12px rgba(255,59,48,0)}}
.rec-ico{font-size:32px;margin-bottom:var(--ap-s2)}
.rec-time{
  margin:3px 0;font-size:36px;font-weight:600;line-height:1.1;letter-spacing:-.02em;
  color:var(--ap-red);font-variant-numeric:tabular-nums;
}
.rec-prog-bg{height:4px;margin:var(--ap-s2) 0;border-radius:var(--ap-r-pill);background:var(--ap-fill-2);overflow:hidden}
.rec-prog-f{height:100%;border-radius:inherit;background:var(--ap-red-solid);transition:width 1s linear}
.rec-lbl{font-size:var(--ap-t-footnote);color:var(--ap-label-3)}
.mic-warn{
  display:flex;gap:var(--ap-s3);align-items:flex-start;
  margin-bottom:var(--ap-s3);padding:13px 15px;border-radius:var(--ap-r-md);
  background:var(--ap-orange-tint);color:var(--ap-orange);
  font-size:var(--ap-t-footnote);line-height:1.55;
}
audio{width:100%;margin-top:var(--ap-s3);border-radius:var(--ap-r-pill)}

/* ── 완료 · 결과 ──────────────────────────────────────────────────────── */
.complete-screen{padding:var(--ap-s9) var(--ap-s8);text-align:center}
.cs-icon{font-size:52px;margin-bottom:var(--ap-s4)}
.cs-title{
  margin-bottom:var(--ap-s2);
  font-size:var(--ap-t-title1);line-height:var(--ap-t-title1-lh);letter-spacing:var(--ap-t-title1-ls);
  font-weight:700;color:var(--ap-label);
}
.cs-sub{margin-bottom:var(--ap-s6);font-size:var(--ap-t-subhead);color:var(--ap-label-3)}

.res-hero{
  display:flex;align-items:center;gap:var(--ap-s6);
  margin-bottom:var(--ap-s5);padding:var(--ap-s7);
  border-radius:var(--ap-r-xl);
  background:linear-gradient(135deg,var(--ap-blue) 0%,var(--ap-indigo) 100%);
  box-shadow:var(--ap-shadow);
}
.res-ring{
  width:96px;height:96px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.28);
}
.res-cefr{font-size:34px;font-weight:600;letter-spacing:-.02em;color:#fff}
.res-eye{
  margin-bottom:6px;font-size:var(--ap-t-caption2);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);
}
.res-level{margin-bottom:var(--ap-s2);font-size:var(--ap-t-title1);font-weight:700;letter-spacing:-.02em;color:#fff}
.res-summary{max-width:460px;font-size:var(--ap-t-subhead);line-height:1.6;color:rgba(255,255,255,.88)}

.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ap-s3);margin-bottom:var(--ap-s5)}
.sc-box{
  padding:var(--ap-s4) var(--ap-s3);text-align:center;
  background:var(--ap-surface);border:1px solid var(--ap-separator-soft);border-radius:var(--ap-r-md);
}
.sc-lbl{
  margin-bottom:var(--ap-s2);font-size:var(--ap-t-caption2);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ap-label-3);
}
.sc-bar-bg{height:4px;margin-bottom:var(--ap-s2);border-radius:var(--ap-r-pill);background:var(--ap-fill-2);overflow:hidden}
.sc-bar{height:100%;border-radius:inherit;background:var(--ap-blue)}
.sc-cefr{font-size:var(--ap-t-title3);font-weight:700;letter-spacing:-.014em;color:var(--ap-label)}
.sc-pct{margin-top:2px;font-size:var(--ap-t-caption);color:var(--ap-label-3)}

/* 아코디언 */
.acc{
  margin-bottom:var(--ap-s3);overflow:hidden;
  background:var(--ap-surface);border:1px solid var(--ap-separator-soft);
  border-radius:var(--ap-r-lg);box-shadow:var(--ap-shadow-xs);
}
.acc-hd{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ap-s3);
  width:100%;min-height:var(--ap-tap);padding:14px 20px;text-align:left;
  background:var(--ap-surface);border:none;cursor:pointer;
  transition:background var(--ap-dur-1) var(--ap-ease);
}
.acc-hd:hover{background:var(--ap-fill)}
.acc-hd.open{background:var(--ap-surface-2);border-bottom:1px solid var(--ap-separator-soft)}
.acc-hd h3{margin:0;font-size:var(--ap-t-subhead);font-weight:600;color:var(--ap-label)}
.acc-hd-right{display:flex;align-items:center;gap:var(--ap-s2)}
.acc-cefr{
  padding:3px 10px;border-radius:var(--ap-r-pill);
  background:var(--ap-blue-tint);color:var(--ap-blue-text);
  font-size:var(--ap-t-caption);font-weight:600;
}
.acc-chevron{display:inline-block;font-size:11px;color:var(--ap-label-4);transition:transform var(--ap-dur-2) var(--ap-ease-out)}
.acc-hd.open .acc-chevron{transform:rotate(180deg)}
.acc-bd{display:none;padding:var(--ap-s5) var(--ap-s5)}
.acc-bd.open{display:block}

.skill-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ap-s2);margin-top:var(--ap-s3)}
.sk-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ap-s2);
  padding:11px 14px;background:var(--ap-fill);border-radius:var(--ap-r);
}
.sk-lbl{font-size:var(--ap-t-caption);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ap-label-3)}
.sk-val{font-size:var(--ap-t-subhead);font-weight:700;color:var(--ap-label)}

.analysis-p{margin-bottom:var(--ap-s3);font-size:var(--ap-t-subhead);line-height:1.7;color:var(--ap-label-2)}
.analysis-hd{
  margin:var(--ap-s3) 0 var(--ap-s2);font-size:var(--ap-t-caption2);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
}
.analysis-hd.green{color:var(--ap-green)}
.analysis-hd.copper{color:var(--ap-indigo)}
.analysis-list{display:flex;flex-direction:column;gap:var(--ap-s1);padding-left:18px;font-size:var(--ap-t-subhead);line-height:1.6;color:var(--ap-label-2)}
.analysis-list li{list-style:disc}

.err-tbl{width:100%;margin-top:var(--ap-s3);font-size:var(--ap-t-footnote)}
.err-tbl th{
  padding:9px 12px;text-align:left;background:var(--ap-surface-2);
  border-bottom:1px solid var(--ap-separator);
  font-size:var(--ap-t-caption2);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ap-label-3);
}
.err-tbl td{padding:11px 12px;border-bottom:1px solid var(--ap-separator-soft);vertical-align:top}
.err-tbl tr:last-child td{border-bottom:none}
.err-orig{color:var(--ap-red);text-decoration:line-through}
.err-fix{color:var(--ap-green);font-weight:600}
.err-badge{
  display:inline-block;padding:2px 9px;border-radius:var(--ap-r-pill);white-space:nowrap;
  background:var(--ap-indigo-tint);color:var(--ap-indigo);
  font-size:var(--ap-t-caption2);font-weight:600;
}
.err-note{margin-top:3px;font-size:var(--ap-t-caption);color:var(--ap-label-3)}

.gram-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--ap-s2)}
.gram-tag{padding:4px 11px;border-radius:var(--ap-r-pill);font-size:var(--ap-t-caption);font-weight:600}
.gram-tag.has{background:var(--ap-green-tint);color:var(--ap-green)}
.gram-tag.need{background:var(--ap-red-tint);color:var(--ap-red)}

.wr-orig{margin-top:var(--ap-s3);padding:14px 16px;background:var(--ap-fill);border-radius:var(--ap-r-md)}
.wr-orig-hd{
  margin-bottom:var(--ap-s2);font-size:var(--ap-t-caption2);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ap-label-3);
}
.wr-orig-txt{font-size:var(--ap-t-subhead);line-height:1.75;color:var(--ap-label-2)}

.reco-card{
  margin-bottom:var(--ap-s3);padding:var(--ap-s5) var(--ap-s6);
  background:var(--ap-blue-tint);border-radius:var(--ap-r-lg);
}
.reco-card h3{margin-bottom:var(--ap-s1);font-size:var(--ap-t-subhead);font-weight:600;color:var(--ap-label)}
.reco-course{margin-bottom:var(--ap-s4);font-size:var(--ap-t-title3);font-weight:700;letter-spacing:-.014em;color:var(--ap-blue-text)}
.pri-list{display:flex;flex-direction:column;gap:var(--ap-s3)}
.pri-item{display:flex;gap:var(--ap-s3)}
.pri-dot{width:7px;height:7px;flex-shrink:0;margin-top:7px;border-radius:50%;background:var(--ap-blue)}
.pri-area{font-size:var(--ap-t-subhead);font-weight:600;color:var(--ap-label)}
.pri-why{font-size:var(--ap-t-footnote);line-height:1.55;color:var(--ap-label-3)}
.pri-act{margin-top:2px;font-size:var(--ap-t-caption);font-weight:500;color:var(--ap-blue-text)}

.teacher-note{
  display:flex;gap:var(--ap-s3);align-items:flex-start;margin-top:var(--ap-s3);
  padding:13px 15px;border-radius:var(--ap-r-md);
  background:var(--ap-blue-tint);color:var(--ap-blue-text);font-size:var(--ap-t-footnote);line-height:1.6;
}
.spk-note{
  display:flex;gap:var(--ap-s3);align-items:flex-start;margin-top:var(--ap-s3);
  padding:12px 14px;border-radius:var(--ap-r-md);
  background:var(--ap-fill);color:var(--ap-label-2);font-size:var(--ap-t-footnote);line-height:1.6;
}

/* ── 버튼 (응시 화면 레거시 클래스) ───────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--ap-s2);
  min-height:44px;padding:12px 24px;border-radius:var(--ap-r-pill);
  font-family:inherit;font-size:var(--ap-t-subhead);font-weight:600;letter-spacing:-.006em;
  white-space:nowrap;border:1px solid transparent;cursor:pointer;
  transition:background var(--ap-dur-1) var(--ap-ease),color var(--ap-dur-1) var(--ap-ease),
             border-color var(--ap-dur-1) var(--ap-ease),transform var(--ap-dur-1) var(--ap-ease-out);
}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-p{background:var(--ap-blue);color:#fff}
.btn-p:hover:not(:disabled){background:var(--ap-blue-hover)}
.btn-s,.btn-sec{background:var(--ap-surface);color:var(--ap-label);border-color:var(--ap-separator)}
.btn-s:hover:not(:disabled),.btn-sec:hover:not(:disabled){background:var(--ap-fill);border-color:var(--ap-gray-3)}
.btn-cu{background:var(--ap-indigo);color:#fff}
.btn-cu:hover:not(:disabled){background:var(--ap-indigo-hover)}
.btn-red{background:var(--ap-red);color:#fff}
.btn-red:hover:not(:disabled){background:var(--ap-red-hover)}
.btn-lg{min-height:52px;padding:15px 30px;font-size:var(--ap-t-headline)}
.btn-sm{min-height:36px;padding:8px 18px;font-size:var(--ap-t-footnote)}
@media (pointer:coarse){.btn-sm{min-height:var(--ap-tap)}}

/* ── 로딩 · 토스트 ────────────────────────────────────────────────────── */
.loading-wrap{padding:var(--ap-s10) var(--ap-s5);text-align:center}
.ld-ring{width:44px;height:44px;margin:0 auto var(--ap-s5)}
.ld-spin{
  width:100%;height:100%;border-radius:50%;
  border:3px solid var(--ap-fill-2);border-top-color:var(--ap-blue);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.ld-title{margin-bottom:5px;font-size:var(--ap-t-headline);font-weight:600;color:var(--ap-label)}
.ld-sub{font-size:var(--ap-t-footnote);color:var(--ap-label-3)}

.toast{
  position:fixed;left:50%;bottom:24px;z-index:1000;
  transform:translateX(-50%) translateY(14px);
  max-width:min(92vw,420px);padding:12px 20px;border-radius:var(--ap-r-pill);
  background:rgba(29,29,31,.88);color:#fff;
  backdrop-filter:var(--ap-material);-webkit-backdrop-filter:var(--ap-material);
  font-size:var(--ap-t-footnote);font-weight:500;box-shadow:var(--ap-shadow-lg);
  opacity:0;pointer-events:none;
  transition:opacity var(--ap-dur-2) var(--ap-ease),transform var(--ap-dur-2) var(--ap-ease-out);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── 유틸 ─────────────────────────────────────────────────────────────── */
.divider{height:1px;margin:var(--ap-s5) 0;background:var(--ap-separator-soft)}
.flex-sb{display:flex;align-items:center;justify-content:space-between;gap:var(--ap-s3)}
.mt-4{margin-top:var(--ap-s4)}
.text-sm{font-size:var(--ap-t-footnote);color:var(--ap-label-3)}
.text-xs{font-size:var(--ap-t-caption);color:var(--ap-label-4)}
.tc{text-align:center}

/* ── 반응형 ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  #sidebar{display:none!important}
  .read-layout{grid-template-columns:1fr}
  .passage-panel{position:static;max-height:280px}
  .score-grid{grid-template-columns:repeat(2,1fr)}
  .skill-grid{grid-template-columns:1fr}
  .res-hero{flex-direction:column;align-items:flex-start;gap:var(--ap-s4);padding:var(--ap-s6)}
  #main{padding:var(--ap-s6) var(--ap-s6) var(--ap-s9)}
}
@media (max-width:640px){
  #topbar{padding:0 var(--ap-s4)}
  #main{padding:var(--ap-s4) var(--ap-s4) var(--ap-s9)}
  .dob-row{flex-direction:column}
  .qcard-body{padding:var(--ap-s5) var(--ap-s4)}
  .qcard-meta,.qcard-footer{padding-left:var(--ap-s4);padding-right:var(--ap-s4)}
  .complete-screen{padding:var(--ap-s7) var(--ap-s5)}
  .res-cefr{font-size:30px}
}

/* ── 인쇄 ─────────────────────────────────────────────────────────────── */
@media print{
  #topbar,#sidebar,.mec-timer{display:none!important}
  #main{padding:0!important}
  .acc-bd{display:block!important}
  .res-hero{background:var(--ap-fill)!important;color:var(--ap-label)!important;box-shadow:none}
  .res-cefr,.res-level,.res-summary,.res-eye{color:var(--ap-label)!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}