/* ============================================================================
   report-sheet.css — 응시자에게 보여주는 AI 진단 리포트 시트 (.rpt-*)
   원래 js/results.js 가 문자열로 만들어 <style> 로 주입하던 CSS 를 여기로 옮겼다.
   그래야 토큰이 한 곳(css/apple.css)에서만 오고, design-audit 검사도 받는다.
   클래스명은 js/results.js 가 만들어내므로 그대로 유지한다.
   ============================================================================ */

.rpt{display:flex;flex-direction:column;gap:var(--ap-s6);margin:var(--ap-s5) 0;text-align:left}

/* ── 레벨 히어로 ──────────────────────────────────────────────────────── */
.rpt-hero{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--ap-s5);
  padding:var(--ap-s5);border-radius:var(--ap-r-xl);
  background:var(--ap-blue-tint);
}
.rpt-lv{font-size:46px;font-weight:700;line-height:.9;letter-spacing:-.03em;color:var(--ap-blue-text)}
.rpt-lv small{display:block;margin-top:8px;font-size:var(--ap-t-footnote);font-weight:600;color:var(--ap-label-2)}
.rpt-say{flex:1;min-width:220px;font-size:var(--ap-t-footnote);line-height:1.65;color:var(--ap-label-2)}
.rpt-say b{font-weight:600;color:var(--ap-label)}

/* ── 섹션 제목 ────────────────────────────────────────────────────────── */
.rpt h3{
  display:flex;align-items:center;gap:var(--ap-s2);margin:0 0 3px;
  font-size:var(--ap-t-subhead);font-weight:600;letter-spacing:-.006em;color:var(--ap-label);
}
.rpt h3::after{content:"";flex:1;height:1px;background:var(--ap-separator-soft)}
.rpt .sub{margin:0 0 var(--ap-s4);font-size:var(--ap-t-caption);color:var(--ap-label-3)}

/* ── 스킬 미터 ────────────────────────────────────────────────────────── */
.rpt-meter{
  display:grid;grid-template-columns:92px 1fr 116px;align-items:center;gap:var(--ap-s3);
  padding:var(--ap-s2) 0;border-bottom:1px solid var(--ap-separator-soft);
}
.rpt-meter:last-child{border-bottom:0}
.rpt-meter .nm{font-size:var(--ap-t-footnote);font-weight:600;color:var(--ap-label)}
.rpt-track{position:relative;height:10px;border-radius:var(--ap-r-pill);background:var(--ap-fill-2);overflow:hidden}
.rpt-fill{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--ap-blue)}
.rpt-track.pend{
  background:repeating-linear-gradient(90deg,var(--ap-fill-2) 0 7px,transparent 7px 13px);
  box-shadow:inset 0 0 0 1px var(--ap-separator);
}
.rpt-band{text-align:right;font-size:var(--ap-t-caption);font-weight:700;color:var(--ap-label);font-variant-numeric:tabular-nums}
.rpt-band .pct{font-size:var(--ap-t-caption);font-weight:500;color:var(--ap-label-3)}
.rpt-band.pend{font-size:var(--ap-t-caption);font-weight:500;color:var(--ap-label-3)}
.rpt-ticks{display:grid;grid-template-columns:92px 1fr 116px;gap:var(--ap-s3)}
.rpt-ticks .t{
  display:flex;justify-content:space-between;margin-top:6px;
  font-size:9.5px;letter-spacing:.03em;color:var(--ap-label-4);
}
.rpt-rat{margin-top:var(--ap-s3);font-size:var(--ap-t-caption);line-height:1.6;color:var(--ap-label-2)}

/* ── 세그먼티드 (성인/주니어 환산 토글) ──────────────────────────────── */
.rpt-seg{
  display:inline-flex;gap:2px;margin-bottom:var(--ap-s3);
  padding:2px;border-radius:var(--ap-r);background:var(--ap-fill);
}
.rpt-seg button{
  min-height:32px;padding:6px 14px;border:0;border-radius:8px;
  background:transparent;color:var(--ap-label-2);
  font:inherit;font-size:var(--ap-t-caption);font-weight:500;cursor:pointer;
  transition:background var(--ap-dur-2) var(--ap-ease-out),color var(--ap-dur-1) var(--ap-ease),
             box-shadow var(--ap-dur-2) var(--ap-ease-out);
}
.rpt-seg button:hover{color:var(--ap-label)}
.rpt-seg button.on{background:var(--ap-surface);color:var(--ap-label);font-weight:600;box-shadow:var(--ap-shadow-xs)}
@media (pointer:coarse){.rpt-seg button{min-height:var(--ap-tap)}}

/* ── CEFR 사다리 ──────────────────────────────────────────────────────── */
.rpt-ladder{display:flex;flex-direction:column;gap:var(--ap-s1);margin:var(--ap-s1) 0 var(--ap-s4)}
.rpt-rung{
  display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:var(--ap-s3);
  min-height:40px;padding:9px 13px;border-radius:var(--ap-r);background:var(--ap-fill);
}
.rpt-rung.on{background:var(--ap-blue-tint)}
.rpt-rung .rl-band{font-size:var(--ap-t-subhead);font-weight:700;color:var(--ap-label-3);font-variant-numeric:tabular-nums}
.rpt-rung.on .rl-band{color:var(--ap-blue-text)}
.rpt-rung .rl-name{font-size:var(--ap-t-caption);color:var(--ap-label-2)}
.rpt-rung.on .rl-name{font-weight:600;color:var(--ap-label)}
.rpt-rung .rl-you{
  padding:3px 10px;border-radius:var(--ap-r-pill);white-space:nowrap;
  background:var(--ap-blue);color:#fff;
  font-size:var(--ap-t-caption2);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.rpt-cando{
  padding:14px 16px;border-radius:var(--ap-r-md);background:var(--ap-fill);
  font-size:var(--ap-t-footnote);line-height:1.65;color:var(--ap-label-2);
}
.rpt-cando b{font-weight:600;color:var(--ap-label)}

/* ── 타시험 환산 ──────────────────────────────────────────────────────── */
.rpt-eq{width:100%;font-size:var(--ap-t-footnote)}
.rpt-eq td{padding:10px 2px;border-bottom:1px solid var(--ap-separator-soft);color:var(--ap-label-2)}
.rpt-eq tr:last-child td{border-bottom:0}
.rpt-eq td:last-child{text-align:right;font-weight:700;color:var(--ap-label);font-variant-numeric:tabular-nums}
.rpt-indic{margin-top:var(--ap-s2);font-size:var(--ap-t-caption2);line-height:1.55;color:var(--ap-label-3)}

/* ── 강점 / 개선점 ────────────────────────────────────────────────────── */
.rpt-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--ap-s4)}
.rpt-panel{padding:var(--ap-s4);border:1px solid var(--ap-separator-soft);border-radius:var(--ap-r-lg)}
.rpt-panel .cap{
  margin-bottom:var(--ap-s3);
  font-size:var(--ap-t-caption2);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.rpt-panel.good .cap{color:var(--ap-green)}
.rpt-panel.focus .cap{color:var(--ap-orange)}
.rpt-panel ul{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.rpt-panel li{position:relative;padding-left:15px;font-size:var(--ap-t-caption);line-height:1.55;color:var(--ap-label-2)}
.rpt-panel li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--ap-green)}
.rpt-panel.focus li::before{background:var(--ap-orange)}
.rpt-panel li b{font-weight:600;color:var(--ap-label)}

/* ── 학습 계획 ────────────────────────────────────────────────────────── */
.rpt-step{
  display:grid;grid-template-columns:26px 1fr auto;align-items:start;gap:var(--ap-s3);
  margin-bottom:var(--ap-s3);padding:13px 15px;
  border:1px solid var(--ap-separator-soft);border-radius:var(--ap-r-lg);
}
.rpt-step .n{font-size:var(--ap-t-title3);font-weight:700;line-height:1;color:var(--ap-blue-text)}
.rpt-step .ar{margin-bottom:2px;font-size:var(--ap-t-footnote);font-weight:600;color:var(--ap-label)}
.rpt-step .ds{font-size:var(--ap-t-caption);line-height:1.55;color:var(--ap-label-2)}
.rpt-step .wn{
  align-self:center;padding:3px 10px;border-radius:var(--ap-r-pill);white-space:nowrap;
  background:var(--ap-fill);color:var(--ap-label-3);font-size:var(--ap-t-caption2);
}
.rpt-foot{
  padding-top:var(--ap-s4);border-top:1px solid var(--ap-separator-soft);
  font-size:var(--ap-t-caption);line-height:1.6;color:var(--ap-label-3);
}

@media (max-width:520px){
  .rpt-cols{grid-template-columns:1fr}
  .rpt-meter,.rpt-ticks{grid-template-columns:70px 1fr 84px}
  .rpt-hero{padding:var(--ap-s4)}
  .rpt-lv{font-size:38px}
}