/* ===== css/style.css ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ══ 글자 단계(화면 표준 S9, 2026-10-15 docs/design/EyeLearn_App_Screen_Standard.md 11절) — 제목 계열은 이 토큰만 씁니다.
     T1 화면 제목 · T2 카드 제목 · T3 소제목/목록 줄 이름 · 라벨(대문자) · N1 주인공 숫자 · N2 칸 숫자. 폰(≤600)에서는 T1 · N1 만 줄입니다. */
  --t1: 28px; --t2: 19px; --t3: 16px; --fs-body: 14px; --fs-label: 12px; --n1: 28px; --n2: 20px;
  /* ══ 전체 화이트 테마 — 배경은 흰색, 글자는 검정에 가까운 톤으로 강하게 고정 ══ */
  /* ══ 디자인 가이드(2026-10-02, docs/design/EyeLearn_Design_Guide.md) — 행동 · 활성 = 보라, 제목 = 남색, 넓은 면 = 옅은 중립.
     값만 바꿨다 — 이름(--accent 등)은 규칙 220여 곳이 쓴다. 지문의 글자 · 행간 · 문단 간격은 시선 잡음이 정해 손대지 않는다(.passage-para) ══ */
  --bg-primary: #f7f8fc;
  --bg-secondary: #eef0f6;
  --bg-elevated: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.92);
  --text-primary: #18213a;
  --text-dim: rgba(24, 33, 58, 0.66);
  --text-faint: rgba(24, 33, 58, 0.4);
  --border-soft: rgba(24, 33, 58, 0.09);
  --border-mid: rgba(24, 33, 58, 0.17);
  --navy: #07015a;
  --accent: #6012f3;
  --accent-hover: #4d0fcc;
  --accent-pressed: #3e0aa8;
  --accent-soft: rgba(96, 18, 243, 0.1);
  --accent-glow: rgba(96, 18, 243, 0.25);
  --success: #167d57;
  --warning: #b45309;
  --danger: #b42318;
  --radius: 16px;
  --sidebar-w: 84px;

  /* ══ 지문·문제 패널의 하단을 화면 높이의 몇 배 지점에 둘 것인가 ══
     1 = 제한 없음. 패널이 상단 패딩부터 하단바 바로 위까지 세로를 다 쓴다.

     [2/3 이었다가 되돌렸다 — 2026-09-05]
     한동안 0.667 이었다. 근거는 "카메라가 화면 위에 있어 아래를 볼수록 눈꺼풀이 동공을
     가린다"였고, 실제로 1점 캘리브레이션에서 화면 아래쪽 두 점이 264~323px 틀렸다.
     읽을 것을 그 구간에 두면 그 자리의 시선은 못 쓴다고 봤다.

     그 전제는 **1점 캘리브레이션의 취약성**이었다. 캘리브레이션을 1점→5점 두 단계로
     옮기면서(config.js CAL_MODE) SDK 가 아래쪽 자리를 직접 맞추게 됐고, 같은 자리
     오차가 264px → 88px 로 떨어졌다. 전제가 약해졌으므로 세로를 다시 다 쓴다.

     아래쪽이 위쪽보다 부정확한 것 자체는 여전히 사실이다. 5점이 줄였을 뿐 없애지
     못했다. 되돌려 재려면 ?bottom=0.667 을 쓴다(config.js §2b) — 값을 규칙마다 박지
     않고 여기 하나로 둔 이유가 그것이다.

     [주의] 이 값이 1 일 때 max-height 는 flex 가 줄 수 있는 높이보다 커서 아무것도
     묶지 않는다. 즉 규칙이 살아 있어도 실제 높이는 flex:1 이 정한다. */
  --reading-bottom-ratio: 1;
  /* #readingLayout 의 위쪽 패딩. 패널 상단이 여기서 시작하므로 위 비율로 하단을
     맞추려면 높이에서 이만큼을 빼야 한다. 두 값이 어긋나지 않게 한 곳에서 정의한다. */
  --reading-pad-top: 12px;

  /* ══ 읽는 상자의 가로 기하 — 한 곳에서만 정한다 ══
     [왜 사이드바 폭이 여기 없는가] 예전에는 #readingLayout 에 padding-left:
     var(--sidebar-w) 가 걸려 있어 읽는 상자가 84px 오른쪽에서 시작했다. 이제 좌측 메뉴는
     독해 화면에서 **겹쳐 뜨기만 하고 밀지 않는다**(아래 body.rd-open 규칙). 상자의 폭이
     메뉴의 열림/닫힘과 무관해야 하는 이유는 두 가지다:
       ① 메뉴를 되살릴 때 리플로우가 일어나면 지문 줄바꿈이 달라져, 이미 찍힌 시선 좌표와
          어긋난다(리플레이·히트맵이 통째로 틀어진다).
       ② calcheck.js 의 확인점은 #readingPanels 를 실측해서 놓는데(_calchkReadingBox),
          그 측정은 독해 화면이 뜨기 **전**에 돈다. 상자가 메뉴 상태에 따라 달라지면
          확인점만 옛 자리에 남는다.

     아래 세 값에서 지문 패널과 문제 패널의 자리가 모두 나온다. 정답설명 창(.ar-docked)도
     같은 값으로 문제 패널에 정확히 포갠다 — 두 곳에 숫자를 박으면 한쪽만 바뀐다. */
  --reading-pad-left: 12px;
  /* 90% → 98%. 가운데 정렬도 걷었다(align-self:flex-start) — 상자를 왼쪽 끝으로 붙여
     좌우 여백 5%+5% 를 문제 패널 쪽으로 넘긴다. */
  --reading-panels-ratio: 0.98;
  /* 58% → 52%. [지문은 좁아지지 않는다] 사이드바 몫(84px)과 여백 8% 가 함께 풀려서,
     같은 화면에서 지문 패널의 **실제 px 폭은 오히려 조금 넓어진다**(1920px 화면에서
     958 → 972px). 줄당 글자수를 보존하는 것이 행간·폰트를 키울 때 세웠던 조건이었고
     (project-typography-resolution), 그 조건이 그대로 지켜진다.
     문제 패널은 694 → 898px(+29%) — 선지가 접히는 횟수가 줄어든다. */
  --passage-ratio: 0.52;
  --rd-panels-w: calc(var(--reading-panels-ratio) * (100vw - var(--reading-pad-left)));
  --rd-q-left:   calc(var(--reading-pad-left) + var(--passage-ratio) * var(--rd-panels-w));
  --rd-q-w:      calc((1 - var(--passage-ratio)) * var(--rd-panels-w));
}

html, body { width: 100%; height: 100%; overflow: hidden; }
/* 확대를 막는다 — 아이패드 Safari 는 viewport 의 user-scalable=no 를 무시해, 단추를 빠르게 두 번 누르면(Next · Next)
   click 대신 「두 번 탭 확대」가 되어 페이지가 1.6배 확대되고 그 뒤 누름이 엉뚱한 자리로 갔다(2026-09-27 진단 판:
   1180×734 → 738×459, touchcancel · click 미도착). 스크롤(끌기)은 그대로 되고, 확대되면 시선 좌표도 어긋나므로 막는 것이 맞다. */
html, body { touch-action: pan-x pan-y; }
button, a, input, select, textarea, label, [onclick], [role="button"] { touch-action: manipulation; }

/* 제목은 남색(가이드) — 학생 화면(#ieltsScreen)의 h1~h3 · 화면 머리 글. 강조 글(em 등)은 제 규칙의 색을 그대로 쓴다 */
#ieltsScreen :is(h1, h2, h3), #ieltsScreen .ie-title { color: var(--navy); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* 주 단추(채운 보라) 공통 상태 — 디자인 가이드 2단계(2026-10-02) */
:is(.ie-btn-main, .ui-dlg-btn.is-main:not(.is-danger), .rp-save-btn, .hm-check-go, .hm-cont, .nav-btn.nav-next, .nav-btn.nav-end):hover:not(:disabled) {
  background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
:is(.ie-btn-main, .ui-dlg-btn.is-main:not(.is-danger), .rp-save-btn, .hm-check-go, .hm-cont, .nav-btn.nav-next, .nav-btn.nav-end):active:not(:disabled) {
  background: var(--accent-pressed); border-color: var(--accent-pressed); }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* ?€?€ Fullscreen gaze canvas ?€?€ */
#appSidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  z-index: 700;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 4px;
  padding: 14px 8px;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* 캘리브레이션 중에는 점이 사이드바 뒤에 가려질 수 있어 완전히 숨긴다 */
.calibrating #appSidebar { display: none; }

/* ── 독해 화면에서는 감춰 둔다 (body.rd-open — js/sidebar.js 가 #readingLayout 의
   .hidden 을 지켜보며 켜고 끈다) ──
   [미는 것이 아니라 겹치는 것] 감춰도 #readingLayout 의 폭은 그대로다. 되살릴 때 지문이
   오른쪽으로 밀리면 줄바꿈이 달라져 이미 찍힌 시선 좌표와 어긋나고, 확인점을 놓는
   calcheck.js 의 실측(_calchkReadingBox)도 옛 자리에 남는다(:root 주석 참고).
   그래서 사이드바는 z-index(700) 로 지문 위에 얹혔다 빠질 뿐이다 — 읽는 동안 왼쪽 84px 을
   덮지 않도록 기본이 '감춤'이고, 필요할 때만 회복 아이콘으로 불러낸다. */
body.rd-open #appSidebar {
  transform: translateX(-100%);
  /* visibility 까지 끄는 이유: 화면 밖으로 밀린 버튼도 Tab 으로는 잡힌다. 읽는 도중
     실수로 그중 하나가 눌리면 이번 회차가 통째로 날아간다. 미끄러져 나가는 동안만
     보이도록 전환을 끝에 붙인다(0s linear .18s). */
  visibility: hidden;
  transition: transform .18s ease, visibility 0s linear .18s, box-shadow .18s ease;
}
body.rd-open.sb-peek #appSidebar {
  transform: none;
  visibility: visible;
  box-shadow: 10px 0 30px rgba(22, 23, 28, .16);
  transition: transform .18s ease, visibility 0s, box-shadow .18s ease;
}
/* 버튼이 많아 세로가 모자랄 수 있다 — 겹쳐 뜨는 동안에도 스스로 스크롤되게 둔다. */
#appSidebar { overflow-y: auto; overscroll-behavior: contain; }

/* 감추기(사이드바 안) / 회복(떠 있는 아이콘) — 같은 일을 하는 짝이라 모양을 맞춘다.
   독해 화면이 아닐 때는 둘 다 없다: 그때는 사이드바가 늘 떠 있는 것이 기본이다. */
#sbHide, #sbRestore { display: none; }
body.rd-open #sbHide { display: flex; }
body.rd-open:not(.sb-peek) #sbRestore { display: flex; }
#sbHide {
  flex-direction: row; align-items: center; justify-content: center; gap: 5px;
  margin-bottom: 2px; padding: 6px 2px;
  border-radius: 10px; border: 1px solid var(--border-soft);
  background: transparent; color: var(--text-faint);
  font: 600 10px Inter, sans-serif; cursor: pointer; flex-shrink: 0;
}
#sbHide:hover { border-color: var(--accent); color: var(--accent); }
/* 회복 아이콘 — 지문 글자가 시작되는 자리(왼쪽 40px)보다 안쪽에 둔다. 읽는 중에 시선을
   끌면 안 되므로 평소에는 흐리게 두고, 가까이 가야 또렷해진다. */
#sbRestore {
  position: fixed; top: 5px; left: 5px; z-index: 720;
  width: 28px; height: 28px; padding: 0;
  align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid var(--border-soft);
  background: var(--bg-elevated); color: var(--text-dim);
  font-size: 13px; line-height: 1; cursor: pointer;
  opacity: .32; transition: opacity .15s ease, border-color .15s ease;
}
#sbRestore:hover { opacity: 1; border-color: var(--accent); color: var(--accent); }
/* 캘리브레이션 중에는 사이드바와 함께 사라진다 — 점을 가릴 자리다. */
.calibrating #sbRestore { display: none !important; }

/* ── 왼쪽 바 학습 3단계 버튼 ── 순서를 강제하지 않으므로 잠그지 않는다.
   '지금 차례'(is-current)는 권장일 뿐이고, 끝난 단계는 is-done으로 조용히 표시한다.
   상태는 stage.js _setFlowBtn()이 하단 바에 주던 것을 그대로 준다. */
.sb-btn.sb-flow.is-current {
  border-color: var(--accent);
  background: var(--accent-soft);
  animation: sbFlowPulse 1.8s ease-in-out infinite;
}
.sb-btn.sb-flow.is-done { opacity: .62; }
.sb-btn.sb-flow.is-done .sb-label::after { content: ' ✓'; color: var(--success); }
@keyframes sbFlowPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%      { box-shadow: 0 0 0 5px rgba(96, 18, 243,0); }
}

.sb-sep {
  height: 1px; margin: 6px 4px;
  background: var(--border-soft);
}
.sb-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.sb-icon { font-size: 18px; line-height: 1; }
/* 선 아이콘(디자인 가이드 2026-10-02 — 전에는 이모지) — 메뉴 바(.sb-icon) · 홈(.hm-svg). 색은 단추 글자색을 따른다(남색, 지금 칸 보라) */
.sb-icon svg, .hm-svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-icon:empty { display: none; }
/* nowrap을 쓰지 않는다 — "리플레이 Summary"처럼 긴 라벨이 사이드바 폭(84px)을 넘어
   옆으로 삐져나갔다. 두 줄로 접히게 두고 가운데 정렬한다. */
.sb-label {
  font-size: 12px; font-weight: 600; letter-spacing: -0.01em;
  text-align: center; line-height: 1.25; word-break: keep-all;
}
.sb-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: rgba(96, 18, 243, 0.35);
  color: var(--text-primary);
}
.sb-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

@media screen and (max-width: 640px) {
  :root { --sidebar-w: 60px; }
  #appSidebar { padding: 10px 4px; }
  .sb-label { display: none; }
  .sb-group-label { display: none; }
}

#gazeCanvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 10;
  pointer-events: none;
}

/* ?€?€ HUD overlay ?€?€ */
#hud {
  position: fixed; top: 20px; left: 20px;
  z-index: 100;
  display: none;  /* 부트시작부터 숨김 — 디버그 전용 */
  flex-direction: column; gap: 8px;
  max-width: 340px;
  transition: opacity 0.4s;
}
/* 쾘리브레이션 중 HUD 숫김 */
.calibrating #hud,
.calibrating #statusText {
  display: none !important;
}

#statusText {
  font-size: 14px; font-weight: 400;
  color: var(--text-primary);
  padding: 10px 16px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(22,23,28,0.06);
}

.pill-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}

.pill {
  font-size: 11px; font-weight: 400;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  transition: all 0.3s;
}
.pill[data-state="ok"]    { color: var(--success); border-color: rgba(15,157,88,0.35); }
.pill[data-state="warn"]  { color: var(--warning); border-color: rgba(180,83,9,0.35); }
.pill[data-state="error"] { color: var(--danger);  border-color: rgba(220,38,38,0.35); }

/* ?€?€ Start screen ?€?€ */
#startScreen {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  background: var(--bg-primary);
  transition: opacity 0.5s, visibility 0.5s;
  padding: 24px;
  padding-left: calc(var(--sidebar-w) + 24px);
}
#startScreen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* 상단 eyebrow 라벨 */
.ss-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(96, 18, 243,.3);
  padding: 5px 14px; border-radius: 99px;
}

/* 메인 타이틀 */
#startScreen h1 {
  font-size: 46px; font-weight: 700; line-height: 1.15;
  text-align: center; margin: 0;
  color: var(--text-primary);
}
.ss-accent {
  display: block;
  background: linear-gradient(135deg, #4d0fcc, #7c3aed, #be185d);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 큰따옴표 태그라인 */
.ss-tagline {
  font-size: 18px; font-weight: 400;
  color: rgba(22,23,28,.65);
  font-style: italic; text-align: center;
  margin: 0;
}

/* 설명문 */
.ss-desc {
  font-size: 14px; color: var(--text-dim);
  max-width: 440px; text-align: center; line-height: 1.75;
  margin: 0;
}

/* 기능 뱃지 3개 */
.ss-badges {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.ss-badge {
  font-size: 12px; font-weight: 600;
  padding: 6px 14px; border-radius: 99px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-mid);
  color: rgba(22,23,28,.8);
  letter-spacing: .3px;
  transition: background .2s;
}

/* 시작 버튼 */
#btnStart {
  padding: 15px 52px;
  font-size: 16px; font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6012f3, #7c3aed);
  border: none; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 28px rgba(124,58,237,.45);
  transition: transform 0.2s, box-shadow 0.2s;
  letter-spacing: .4px;
}
#btnStart:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(124,58,237,.65); }
#btnStart:active { transform: scale(0.97); }
#btnStart:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* 하단 안내문 */
.ss-note {
  font-size: 11px; color: rgba(22,23,28,.4);
  text-align: center; margin: 0; line-height: 1.6;
}

/* ===== Warm-up Screen ===== */
/* 2026-10-02 다시 짬(사용자 「Start 가 스크롤해야 보인다」) — 위 칸(.wu-body)만 스크롤, 아래 칸(.wu-foot: 얼굴 확인 · Start · redo)은
   늘 화면 안. 화면 높이를 재서 맞추지 않는다 — 어느 높이든 단추 줄이 먼저 자리를 잡고 남는 높이를 안내가 쓴다. */
#warmupScreen {
  position: fixed; inset: 0; z-index: 198;
  display: flex; flex-direction: column;
  padding-left: var(--sidebar-w);
  background: var(--bg-primary);
  animation: wu-fade-in .35s ease;
}
#warmupScreen.hidden { display: none; }
@keyframes wu-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wu-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  gap: 18px; padding: 28px 24px 16px;
}
.wu-foot {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 24px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-soft); background: var(--bg-primary);
}

.wu-title {
  font-size: 32px; font-weight: 700; line-height: 1.2;
  text-align: center; color: var(--text-primary); margin: 0;
}
.wu-sub {
  font-size: 15px; line-height: 1.55; color: rgba(22,23,28,.65);
  text-align: center; margin: 0; max-width: 520px;
}

/* 자세 · 조명 안내 세 칸(2026-10-01 사용자, index.html .wu-tips · boot.js _wuTipsFill) — 컴퓨터는 가로 셋, 폰은 「아이콘 | 글」 한 줄씩.
   거리 칸 맨 아래는 잰 거리(판정 없이 숫자 그대로) — 값이 오기 전에도 자리를 잡아 두어 칸이 들썩이지 않게 */
.wu-tips { width: 100%; max-width: 580px; }
.wu-tips-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wu-tip { background: var(--bg-elevated); border: 1px solid var(--border-mid); border-radius: 14px; padding: 14px 12px; text-align: center;
  display: flex; flex-direction: column; gap: 4px; }
.wu-tip-ico { font-size: 22px; line-height: 1; }
.wu-tip b { font-size: 14px; color: var(--text-primary); }
.wu-tip p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.wu-tip p.wu-tip-now { min-height: 1.45em; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

#btnWarmupStart {
  padding: 15px 54px;
  font-size: 16px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6012f3, #7c3aed);
  border: none; border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 28px rgba(124,58,237,.45);
  transition: transform .2s, box-shadow .2s;
  letter-spacing: .4px;
}
#btnWarmupStart:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(124,58,237,.65); }
#btnWarmupStart:active { transform: scale(.97); }
#btnWarmupStart:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.wu-note {
  font-size: 11px; color: rgba(22,23,28,.4);
  text-align: center; margin: 0;
}

@media screen and (max-width: 600px) {
  .wu-body { gap: 12px; padding: 20px 16px 12px; }
  .wu-foot { gap: 8px; padding: 12px 16px; }
  .wu-title { font-size: 24px; }
  .wu-sub   { font-size: 14px; }
  .wu-tips-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .wu-tip { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; text-align: left; padding: 10px 12px; }
  .wu-tip-ico { grid-row: 1 / span 3; }
  .wu-tip p.wu-tip-now { min-height: 0; }
  .wu-tip p.wu-tip-now:empty { display: none; }
  #btnWarmupStart { width: 100%; max-width: 360px; padding: 14px 24px; }
}

/* ?€?€ Calibration overlay ?€?€ */
#calOverlay {
  position: fixed; inset: 0; z-index: 150;
  display: none; align-items: center; justify-content: center;
  background: var(--bg-primary);
}
#calOverlay.active { display: flex; }
#calOverlay.active #hud { display: none; }

/* 점 + 링 통합 컨테이너 — JS가 left/top으로 이동 */
#calPoint {
  position: fixed;
  width: 80px; height: 80px;
  top: 50%; left: 50%;
  transform: translate(-40px, -40px);
  z-index: 155;
  /* 폸트 전환 트랜지션 */
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 1;
}
/* 다음 포인트로 넘어가기 직전: 페이드아웃 + 축소 */
#calPoint.cal-exit {
  opacity: 0;
  transform: translate(-40px, -40px) scale(0.5);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
/* 새 포인트 등장: 페이드인 + 확대 */
#calPoint.cal-enter {
  opacity: 0;
  transform: translate(-40px, -40px) scale(0.5);
  transition: none;
}

/* 1점 캘리브레이션의 점을 확인 화면 중앙점으로 그대로 이어받는 동안.
   링은 꽉 찬 채로 두고(비웠다 채우면 그 순간이 "다시 시작"으로 읽힌다) 점만 맥동시켜
   "아직 이 점을 보는 중"임을 알린다.
   transform 은 건드리지 않는다 — _moveCalPoint 가 left/top 에 -40px 을 이미 태우고
   transform 을 translate(0,0) 으로 두는 규약이라, 여기서 transform 을 쓰면 그 규약을
   덮어써 점이 40px 어긋난다. 독립 속성 scale 은 transform 과 합성되므로 안전하다. */
#calPoint.cal-hold { animation: calHoldPulse 1.1s ease-in-out infinite; }
@keyframes calHoldPulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.08; }
}

/* 하단바 우하단 — 「캘리 5점」/「캘리 1점」. 결과를 읽을 때 어느 쪽으로 잡혔는지 알아야
   한다. 5점이 멈춰 되돌아간 회차는 색을 달리해 눈에 걸리게 한다. */
.tb-calmode {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  color: var(--text-secondary, #64748b);
  background: var(--bg-elevated, transparent);
  white-space: nowrap;
  pointer-events: auto;
  cursor: default;
}
.tb-calmode:empty { display: none; }
.tb-calmode.is-fallback { color: #d97706; border-color: #d97706; }

/* SVG 링: 컨테이너 전체 채움 */
#calPoint svg {
  position: absolute;
  inset: 0;
}

/* 빛나는 점: 컨테이너 정중앙 */
/* 흰 배경에서는 다크 배경 전제였던 "흰 중심점"이 배경에 묻혀 보이지 않으므로,
   중심을 진한 accent 색으로 채우고 얇은 흰 테두리로 배경과 경계를 분리한다 —
   흰 배경 위에서도 응시 대상이 또렷하게 도드라지도록. */
#calDot {
  position: absolute;
  width: 36px; height: 36px;
  top: 22px; left: 22px;   /* (80 - 36) / 2 = 22 */
  border-radius: 50%;
  background: radial-gradient(circle, #6d28d9 0%, var(--accent) 70%, #3e0aa8 100%);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(22,23,28,.15), 0 0 22px var(--accent-glow), 0 0 44px var(--accent-glow);
  animation: calPulse 1.2s ease-in-out infinite;
  transform-origin: 18px 18px;
}
@keyframes calPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}

/* SVG 원형 프로그레스 링 */
.cal-ring-bg {
  fill: none;
  stroke: rgba(22,23,28,.14);
  stroke-width: 5;
}
.cal-ring-fill {
  fill: none;
  stroke: #7c3aed;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 201.06;   /* 2π × 32 */
  stroke-dashoffset: 201.06;  /* 시작 시 비엄음 */
  transform: rotate(-90deg);
  transform-origin: 40px 40px;
  /* stroke만 transition, dashoffset는 JS가 직접 컴트롤 */
  transition: stroke .35s ease;
}

/* 걸음 표시 — 다섯 중 몇 번째를 재고 있는가.
   링은 이 점 하나의 진행률이라 "얼마나 남았는지"를 말하지 못한다. 그 말은 여기서만 한다.
   응시 대상(점)에서 눈을 뺏으면 안 되므로 안내 문구 바로 아래, 작고 조용하게 둔다. */
#calSteps {
  position: absolute; top: 100px;
  display: flex; gap: 10px;
  z-index: 156;
}
#calSteps:empty { display: none; }
.cal-step {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(22,23,28,.16);
  transition: background .25s ease, transform .25s ease;
}
.cal-step.is-done { background: rgba(22,23,28,.42); }
.cal-step.is-now  { background: var(--accent); transform: scale(1.5); }

#calInstruction {
  position: absolute; top: 60px;
  font-size: 16px; font-weight: 400;
  color: rgba(22,23,28,.8);
  text-align: center; max-width: 400px; line-height: 1.6;
  z-index: 156;
}

/* ?€?€ Memory monitor ?€?€ */
#memMonitor {
  position: fixed; bottom: 20px; left: 20px;
  z-index: 100;
  font-size: 11px; font-weight: 400;
  padding: 6px 12px;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: var(--text-dim);
  display: none;  /* 항상 숨김 */
}

/* ?€?€ Debug panel ?€?€ */
#debugToggle {
  display: none;  /* 무당벼레 숨김 */
}
#debugToggle:hover { transform: scale(1.1); }

#debugPanel {
  position: fixed; bottom: 74px; right: 20px;
  z-index: 9998;
  width: 360px; max-width: calc(100vw - 40px);
  height: 260px; max-height: 40vh;
  overflow-y: auto;
  padding: 12px;
  background: var(--bg-elevated);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px; line-height: 1.4;
  color: #0f9d58;
  white-space: pre-wrap; word-break: break-word;
  display: none;
  box-shadow: 0 12px 34px rgba(22,23,28,.18);
}
#debugPanel.open { display: block; }

#debugToolbar {
  position: fixed; bottom: 74px; right: 388px;
  z-index: 9998;
  display: none; flex-direction: column; gap: 6px;
}
#debugPanel.open ~ #debugToolbar { display: flex; }

.dbg-btn {
  padding: 6px 12px;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary); cursor: pointer;
  white-space: nowrap;
}
.dbg-btn:hover { background: var(--border-soft); }

/* ?€?€ Gaze info ?€?€ */
#gazeInfo {
  position: fixed; top: 20px; right: 20px;
  z-index: 100;
  font-size: 12px; font-weight: 400;
  padding: 8px 14px;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: var(--text-dim);
  display: none;  /* 항상 숨김 */
}

/* ?€?€ Responsive ?€?€ */
@media screen and (max-width: 600px) {
  #hud { max-width: calc(100vw - 40px); }
  #startScreen h1 { font-size: 30px; }
  .ss-tagline { font-size: 15px; }
  .ss-desc { font-size: 13px; padding: 0 10px; }
  #debugPanel { width: calc(100vw - 40px); }
}

/* ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧
   Reading Layout ??Passage + Questions
   ?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧?먥븧 */

#readingLayout {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;        /* panels on top, toolbar at bottom (DOM order) */
  padding-top: var(--reading-pad-top); /* 상단 단계 표시기가 사라져 여유 공간만 소량 확보 */
  padding-bottom: 12px;          /* 하단 툴바와 지문·문제 패널 사이 여백 */
  padding-left: var(--reading-pad-left); /* 좌측 메뉴는 겹쳐 뜬다 — 자리를 비워 두지 않는다(:root 주석) */
  overflow: hidden;
  background: var(--bg-primary);
}
#readingLayout.hidden { display: none; }

/* 독해 모드 중 HUD 사용 안 함 */
.reading-mode #hud,
.reading-mode #gazeInfo,
.reading-mode #memMonitor,
.reading-mode #debugToggle,
.reading-mode #debugPanel,
.reading-mode #debugToolbar {
  display: none !important;
}

/* ?€?€ Toolbar (하단 고정, 가운데 정렬) ?€?€ */
#readingToolbar {
  flex-shrink: 0;
  /* 우하단 캘리 표기(.tb-calmode)를 흐름 밖에 띄우기 위한 기준. 흐름 안에 넣으면
     justify-content:center 로 가운데 모은 버튼 묶음이 왼쪽으로 밀린다. */
  position: relative;
  /* --reading-bottom-ratio 가 1 미만이면 패널이 거기서 성장을 멈추고 flex-column 의
     남는 공간이 마지막 항목 뒤로 간다 — 그대로 두면 툴바가 그 선 바로 아래까지 따라
     올라온다. 툴바는 화면 맨 아래에 있어야 하므로 남는 공간을 툴바 **위**로 민다.
     비율이 1(기본)이면 남는 공간 자체가 없어 이 줄은 아무 일도 하지 않는다. 그래도
     지우지 않는다 — ?bottom 으로 비율을 되돌리는 순간 다시 필요해진다. */
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 8px;
  padding: 8px 20px;
  min-height: 50px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-secondary);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.timer-display {
  font-family: 'Courier New', monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  min-width: 64px;
  transition: opacity 0.2s;
}
.timer-display.hidden { display: none; }

.toolbar-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
/* ── 학습 흐름 그룹 구분(2026-08-17, "1단계: UI 재배치") ── */
.tb-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tb-sep {
  width: 1px;
  height: 22px;
  flex-shrink: 0;
  background: var(--border-soft);
}

.toggle-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 0;
  min-width: 80px;               /* 텍스트 변경 시도 너비 고정 */
  text-align: center;
  border-radius: 20px;
  border: 1.5px solid var(--border-mid);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
  background: var(--bg-elevated);
  color: var(--text-primary);
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-family: inherit;
}
.toggle-btn:hover {
  background: var(--accent-soft);
  border-color: rgba(96, 18, 243, 0.5);
  transform: translateY(-1px);
}
.toggle-btn.is-on {
  background: rgba(15, 157, 88, 0.12);
  border-color: rgba(15, 157, 88, 0.45);
  color: var(--success);
}
.toggle-btn.is-off {
  background: var(--bg-secondary);
  border-color: var(--border-mid);
  color: var(--text-dim);
}
.toggle-btn.replay-btn {
  background: rgba(180, 83, 9, 0.08);
  border-color: rgba(180, 83, 9, 0.3);
  color: var(--warning);
}
.toggle-btn.replay-btn:hover:not(:disabled) {
  background: rgba(180, 83, 9, 0.18);
  border-color: rgba(180, 83, 9, 0.55);
}
.toggle-btn.replay-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.toggle-btn.replay-btn { min-width: 96px; }  /* ▶ 리플레이 ↔ ■ 중단 텍스트 교체돼도 너비 고정 */
@keyframes pulse-replay {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.35); }
  50%       { box-shadow: 0 0 0 7px rgba(180, 83, 9, 0); }
}

/* ?€?€ Panels row ?€?€ */
/* .rd-panels 등 class 짝은 replay.js/summary-replay.js/heatmap.js가 이 서브트리를 클론할 때
   (js/dom.js _cloneReadingContent) id를 지워도 레이아웃이 그대로 적용되게 하기 위한 훅이다 —
   클론은 원본과 id가 겹치면 안 되지만(getElementById 오염 방지), class까지 지울 이유는 없다. */
#readingPanels, .rd-panels {
  flex: 1;
  /* ── 하단을 화면 높이의 --reading-bottom-ratio 지점에 맞춘다 ──
     기본값 1 에서는 이 상한이 flex 가 줄 수 있는 높이보다 커서 아무것도 묶지 않는다
     — 실제 높이는 위의 flex:1 이 정하고, 패널은 하단바 바로 위까지 내려간다.
     비율을 1 미만으로 낮췄을 때만(?bottom) 아래 계산이 실제로 작동한다.

     패널 상단이 --reading-pad-top 에서 시작하므로, 하단이 그 비율 지점에 오려면
     높이는 (비율 × 화면높이 − 상단패딩) 이다. 이 한 줄이 #passagePanel 과
     #questionsPanel 을 동시에 줄인다 — 둘 다 이 상자의 flex 자식이라 높이를 여기서
     받아 가므로, 지문과 문제·선지가 같이 움직인다.

     [id 와 class 를 둘 다 쓰는 이유] replay.js·heatmap.js·summary-replay.js 가 이
     서브트리를 클론할 때 id 는 지우고 class 는 남긴다. #readingPanels 에만 걸면
     클론에서 이 규칙이 빠져 레이아웃이 통째로 깨진다 — 2026-08-15 에 실제로 있었던
     회귀다(index.html 그 자리 주석 참고).

     [vh 와 dvh] 아래 dvh 줄은 지원하는 브라우저에서만 앞줄을 덮어쓴다. iOS 처럼 주소창이
     접혔다 펴지는 환경에서 100vh 는 실제로 보이는 높이보다 크고, 그러면 하단이 의도한
     비율보다 아래로 내려가 — 이 규칙이 막으려는 바로 그 구간에 글이 놓인다. */
  max-height: calc(var(--reading-bottom-ratio) * 100vh  - var(--reading-pad-top));
  max-height: calc(var(--reading-bottom-ratio) * 100dvh - var(--reading-pad-top));
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 0;
  /* 폭과 자리는 :root 의 --reading-pad-left / --reading-panels-ratio 하나에서 나온다.
     정답설명 창(.ar-docked)이 문제 패널에 정확히 포개지려면 같은 식을 써야 한다. */
  width: var(--rd-panels-w);
  align-self: flex-start;  /* 왼쪽 끝에 붙인다 — 남는 여백은 전부 오른쪽(문제 패널 쪽)으로 */
}

/* ?€?€ Panel headers (sticky) ?€?€ */
.panel-header {
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 4px 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
}

.q-counter {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-secondary);
  padding: 2px 9px;
  border-radius: 999px;
  margin-left: 8px;
  letter-spacing: 0.01em;
}

/* ?€?€ Panels base ?€?€ */
#passagePanel, .rd-passage-panel,
#questionsPanel, .rd-questions-panel {
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 18, 243,0.3) transparent;
}
#passagePanel::-webkit-scrollbar, .rd-passage-panel::-webkit-scrollbar,
#questionsPanel::-webkit-scrollbar, .rd-questions-panel::-webkit-scrollbar { width: 5px; }
#passagePanel::-webkit-scrollbar-thumb, .rd-passage-panel::-webkit-scrollbar-thumb,
#questionsPanel::-webkit-scrollbar-thumb, .rd-questions-panel::-webkit-scrollbar-thumb {
  background: rgba(96, 18, 243,0.3);
  border-radius: 999px;
}

#passagePanel, .rd-passage-panel {
  /* 50% 였다(2026-09-10 58%). 지문 폰트를 14.5 → 17px 로 올리면 줄당 글자수가 1/1.17 배가
     되어 줄 수가 1.17 배로 늘고(높이는 줄 간격까지 겹쳐 1.37 배), 무엇보다 리턴스윕 진폭이
     작아진다 — 문장 안 되돌아봄은 글자에 비례해 커지는데 스윕은 줄 폭에 묶여 있으니 둘이
     가까워진다. 글 폭을 같은 비율로 넓히면 줄 수도 스윕 분리도 그대로다.
     [2026-09-12] 비율은 58% → 52% 로 내렸지만 **실제 px 폭은 줄지 않는다** — 사이드바 몫과
     좌우 여백이 함께 풀렸기 때문이다(:root --passage-ratio 주석에 화면별 수치). 값 자체는
     거기 한 곳에만 있다: 리플레이 클론이 기록 당시 지문 폭을 되살릴 때 같은 자를 쓴다. */
  flex: 0 0 calc(var(--passage-ratio) * 100%);
  overflow-y: auto;
  padding: 16px 28px 60px;
  border-right: 1px solid var(--border-mid);
}

/* questionsPanel: 나머지 전체 (오른쪽 viewport 끝까지) */
#questionsPanel, .rd-questions-panel {
  flex: 1;                   /* 나머지 전부 사용 → 오른쪽 공백 없음 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
#questionsPanel .panel-header, .rd-questions-panel .panel-header {
  flex-shrink: 0;
  margin-bottom: 0;
  padding: 10px 28px 12px;
}

/* ?€?€ Question viewport (scrollable area) ?€?€ */
#questionViewport, .rd-question-viewport {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 12px 28px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 18, 243,0.3) transparent;
}
#questionViewport::-webkit-scrollbar, .rd-question-viewport::-webkit-scrollbar { width: 5px; }
#questionViewport::-webkit-scrollbar-thumb, .rd-question-viewport::-webkit-scrollbar-thumb {
  background: rgba(96, 18, 243,0.3);
  border-radius: 999px;
}

/* Hide all question blocks by default; JS adds .q-current to show one */
.question-block { display: none; }
.question-block.q-current { display: block; }

/* ?€?€ Question navigation ?€?€ */
#questionNav {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border-mid);
  background: var(--bg-secondary);
}
.nav-btn {
  flex: 1;
  min-height: 48px;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-mid);
  background: var(--bg-elevated);
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  font-family: inherit;
}
.nav-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}
.nav-btn.nav-next,
.nav-btn.nav-end {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── AI따라읽기(EMME) ── */
.toggle-btn.emme-btn {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.4);
  color: #6d28d9;
}
.toggle-btn.emme-btn:hover:not(:disabled) {
  background: rgba(167, 139, 250, 0.24);
  border-color: rgba(167, 139, 250, 0.65);
}
.toggle-btn.emme-btn:disabled { opacity: 0.5; cursor: default; transform: none; }

#questionPanelHeader.hidden,
/* .panel-header 가 .hidden 과 같은 특정도라 소스 순서에서 이겨 버린다 — id 를 붙여
   확실히 접는다. 안 붙이면 페이지 로드 때부터 헤더가 계속 보인다(실제로 기출 화면
   우상단에 "AI코칭 진행 중" 이 떠 있었다). */
#aicHeader.hidden,
#emmeHeader.hidden,
#emmeBalloonLayer.hidden,
#emmeProgress.hidden,
#emmeCtrl.hidden,
.emme-balloon.hidden { display: none; }

#emmeBalloonLayer {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 28px 16px;
}

/* 지나간 말풍선을 누적해서 보여주는 요약 로그 — 실시간 설명 자체는 이제 지문 쪽 툴팁
   (#emmeTooltip)에서 뜨고, 여기는 "놓쳤으면 나중에 훑어볼 수 있는" 조용한 기록용. */
#emmeLogList {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
}
.emme-log-entry {
  font: 400 12.5px/1.5 Inter, sans-serif;
  color: rgba(22,23,28,.8);
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-left: 3px solid #7c3aed;
  border-radius: 8px;
  padding: 8px 10px;
  animation: _emmeBalloonIn .3s cubic-bezier(.34,1.56,.64,1);
}

.emme-balloon {
  max-width: 380px;
  /* 지문/문제 위에 겹쳐 뜨므로 반투명이면 뒤 텍스트와 섞여 글자를 읽을 수 없었다 — 앱 전체가
     흰 배경으로 바뀐 뒤에도, 이 말풍선만은 의도적으로 불투명한 네이비를 유지해 아래 지문과
     확실히 분리되는 "콜아웃"으로 남긴다(버튼처럼 자체 배경색을 갖는 UI 요소와 동일 취급). */
  background: linear-gradient(160deg, #23264a, #1a1d3a);
  border: 1.5px solid rgba(167,139,250,.5);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.55);
  font: 400 13.5px/1.6 Inter, sans-serif;
  color: #e8ecf4;
  animation: _emmeBalloonIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes _emmeBalloonIn {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 근거/발문앵커/1차인상/반전/전략 확인 중에만 말풍선에 붙는 "계속하기" 버튼 — 팝업이 뜨면
   재생이 자동으로 멈추고, 이 버튼을 눌러야만 다음으로 넘어간다(자동 진행 없음). */
.emme-balloon-ctrl {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.emme-balloon-btn {
  display: block;
  width: 100%;
  font: 600 12px/1.4 Inter, sans-serif;
  color: #e8ecf4;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(167,139,250,.4);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background .15s ease;
}
.emme-balloon-btn:hover { background: rgba(167,139,250,.22); }
.emme-balloon-btn-continue {
  border-color: rgba(167,139,250,.7);
  background: rgba(167,139,250,.14);
  font-weight: 700;
}
.emme-balloon-btn-continue:hover { background: rgba(167,139,250,.3); }

/* 지문 위에 뜨는 실시간 설명 — 문장 바로 근처에 떠서 시선 이동 거리를 최소화한다.
   레이아웃을 밀지 않도록 fixed + JS가 매번 좌표를 계산해 배치한다(#emmeTooltip). */
#emmeTooltip {
  position: fixed;
  z-index: 600;
}

#emmeCtrl {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px 16px;
}
#emmeCtrl .nav-btn { flex: 0 0 auto; padding: 9px 18px; }

/* 다 읽은 뒤 자동으로 넘어가지 않고, 이 버튼을 눌러야 문제 풀기로 넘어간다 */
#emmeBtnDone {
  flex-shrink: 0;
  margin: 0 20px 16px;
  padding: 13px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #6012f3, #a78bfa);
  color: #fff;
  font: 700 14px Inter, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(96, 18, 243,.35);
  transition: transform .15s ease, box-shadow .15s ease;
  animation: _emmeBalloonIn .3s cubic-bezier(.34,1.56,.64,1);
}
#emmeBtnDone:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(96, 18, 243,.5);
}
#emmeBtnDone.hidden { display: none; }

/* AI따라읽기 진행 시간 — "읽는 데 얼마나 걸리는지"를 진행바+숫자로 한눈에 보여준다 */
#emmeProgress {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
}
#emmeTimeLabel {
  flex-shrink: 0;
  font: 700 12px/1 Inter, sans-serif;
  color: var(--text-dim);
  min-width: 84px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
#emmeProgTrack {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--border-mid);
  overflow: hidden;
  cursor: pointer;
  transition: height .12s ease;
}
/* 클릭/드래그로 원하는 시점으로 바로 이동(seek)할 수 있음을 암시 — 살짝 두꺼워지는 정도로만 */
#emmeProgTrack:hover { height: 8px; }
#emmeProgFill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, #6012f3, #a78bfa);
  transition: width .1s linear;
}

/* 지문 문장 — 처음부터 전부 자리를 차지한 채 opacity만 바뀌어서, reveal 도중 줄바꿈이 흔들리지 않는다. */
.emme-char {
  opacity: 0;
  transition: opacity .12s ease;
}

/* AI 시선 dot — replay.js 리플레이 dot과 같은 톤(보라 계열로 구분) */
#emmeGazeDot {
  position: fixed;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,181,253,.95) 20%, rgba(96, 18, 243,.6) 70%);
  border: 2px solid #a78bfa;
  box-shadow: 0 0 14px rgba(167,139,250,.85);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 500;
  transition: left .1s linear, top .1s linear;
}
/* 말풍선이 뜨는 동안(=일정 시간 그 자리에 머무는 동안) dot이 정지해도 "멈춰 보이지"
   않도록 은은하게 맥동시킨다 — "여기가 중요하다"는 신호를 텍스트를 안 읽어도 전달. */
#emmeGazeDot.emme-dot-pulse {
  animation: _emmeDotPulse 1.1s ease-in-out infinite;
}
@keyframes _emmeDotPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(167,139,250,.85); transform: translate(-50%,-50%) scale(1); }
  50%      { box-shadow: 0 0 28px rgba(167,139,250,1);   transform: translate(-50%,-50%) scale(1.3); }
}

/* ?€?€ Passage intro line ?€?€ */
.passage-intro {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(96, 18, 243, 0.07);
  border-left: 3px solid var(--accent);
  padding: 8px 14px;
  border-radius: 6px;
  margin-bottom: 22px;
}

/* ?€?€ Passage paragraphs (AOI units) ??wider spacing ?€?€ */
.passage-para {
  /* 14.5px 이었다(2026-09-10 17px). 글자를 키운 이유는 세로가 아니라 가로와 눈이다 —
     세로 분해능은 아래 행간이 정한다. 키운 만큼 줄당 글자수가 줄어 리턴스윕 진폭이
     작아지므로, 지문 패널 폭을 같은 비율(50% → 58%)로 함께 넓혔다. 둘을 같이 움직여야
     「되돌아봄 : 스윕」 비율이 그대로 남는다 — 그 비율이 오츠가 가르는 대상이다. */
  font-size: 17px;
  /* ── 행간은 세로 분해능이 정한다(2026-09-10) ──
     이 회차들의 세로 잡음은 정합 뒤 잔차로 33~50px, 캘리브레이션 실측으로 64px 인데
     줄 간격은 1.5×14.5 = 21.75px 였다. 잡음의 1/3~1/2 인 눈금으로는 어떤 알고리즘도
     「어느 줄」을 못 가린다 — 리플레이의 읽기 표가 그래서 문단까지만 말해 왔다.
     2.75 × 14.5 = 39.9px. 잔차 σ 와 같은 크기다.
     **폰트는 일부러 안 건드린다.** 폰트를 키우면 문장 안 되돌아봄의 폭이 함께 커지고
     줄당 글자수가 줄어 리턴스윕 진폭이 작아진다 — 세로를 얻고 가로(스윕 분리)를 잃는다.
     행간만 만지면 줄당 글자수가 그대로라 스윕 판정은 지금 그대로 남는다.
     문단 사이(margin 40 + padding 18×2)는 그대로 둔다 — 이미 줄 간격의 두 배다. */
  line-height: 2.75;
  color: var(--text-primary);
  /* ── 문단 사이는 폰트가 아니라 잡음이 정한다(2026-09-10) ──
     AOI 판정 사각형은 이웃과 간격을 절반씩 나눠 갖는다(session.js _aoiComputeGeom).
     40px 일 때 글자~글자 119px, 경계까지 여유 59px 인데 이 회차들의 σy 는 67px 이었다 —
     프레임 하나가 이웃 문단으로 넘어갈 확률이 1−Φ(59/67) ≈ 19% 다. 문단별 머문 시간의
     1/5 이 옆으로 새고 있었다는 뜻이고, 그 샘은 화면에 안 나타난다.
     90px → 글자~글자 ≈ 170px, 여유 85px = σy 의 1.27배 → 10%.
     **이 값은 글자를 키워도 안 바뀐다.** σy 는 트래커와 앉은 거리가 정하는 값이라
     화면 배율과 무관하다. 「줄 간격의 몇 배」로 잡으면 안 되고 σy 로 잡아야 한다. */
  margin-bottom: 90px;
  padding: 18px 22px;
  border-radius: 12px;
  /* ── border shorthand 가 아닌 longhand 분리: aoi-active border-color override 쓸 수 있도록 ── */
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  background: transparent;   /* 흰 배경 위 인쇄물처럼 — 카드 틴트 없이 순수 텍스트만 */
  transition: border-color 0.25s ease,
              box-shadow   0.25s ease,
              background   0.25s ease;
  word-break: keep-all;
}

.underline-ref {
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(22,23,28,0.55);
}

/* ?€?€ Question blocks (AOI units) ?€?€ */
.question-block {
  margin-bottom: 0;
  padding: 18px 20px 14px;
  border-radius: 14px;
  /* ── border shorthand 가 아닌 longhand 분리 ── */
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  background: transparent;   /* 흰 배경 위 인쇄물처럼 — 카드 틴트 없이 순수 텍스트만 */
  transition: border-color 0.25s ease,
              box-shadow   0.25s ease,
              background   0.25s ease;
}

.question-header {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 40px;           /* 발문↔선지 간격 — 선지 사이(74px)와 같은 이유로 벌린다.
                                    아래는 이 값을 30px 로 되돌릴 때 남긴 옛 기록이다.
                                    옛 주석: 시선판별용으로 70px까지 벌려봤으나
                                     정확도 개선이 크지 않아 가독성 우선으로 되돌림 */
}

.question-num {
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
  min-width: 26px;
  line-height: 1.5;
}

.question-text {
  /* 16 → 17px(2026-09-12). 문제 패널이 694 → 898px 로 넓어져 줄당 글자수가 남으므로,
     발문을 지문과 **같은 크기**로 맞춘다 — 둘을 오가는 눈이 크기를 다시 맞출 일이 없다. */
  font-size: 17px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.75;   /* 선지와 같은 값 — 발문이 두 줄일 때 줄 간격이 선지와 어긋나지 않게 */
}

.score-badge {   /* 배점 배지 — 발문과 같은 비율로(2026-09-10, 10.5 → 12) */
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--warning);
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251,191,36,0.25);
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 5px;
  vertical-align: middle;
}

/* ?€?€ Choice list ?€?€ */
.choice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 35px;           /* 선지↔선지 간격.
                          [2026-09-10] 19px 이었다(그 전에 70px 을 실험했다가 "정확도 개선이
                          크지 않아" 되돌린 자리다 — 그때는 개선을 잴 자가 없었다).
                          선지는 지문 줄과 달리 정합이 없다: 프레임 하나의 세로 위치가 그대로
                          AOI 히트가 되므로, 유효 잡음이 잔차 σ 가 아니라 캘리브레이션 σy(≈64px)
                          다. 그래서 지문 줄 간격(39.9px)보다 더 벌어져 있어야 한다.
                          35 + 글줄(16×1.75=28) + padding 8×2 + border 1.5×2 = 선지 중심 사이 82px.
                          [2026-09-12 에도 35px 을 그대로 둔다] 이 간격의 자는 화면 폭이
                          아니라 캘리브레이션 σy 다 — 패널을 넓혀도 세로 잡음은 하나도
                          안 줄어든다. 폭에서 얻은 것은 "선지가 덜 접힌다" 하나뿐이고,
                          세로로 얻은 3px 은 글자를 키운 덤이다. */
}

.choice-list li {
  position: relative;
  /* 13 → 15px(2026-09-10) → 16px(2026-09-12). 선지 사이는 gap+padding 이 정하므로 글자를
     키워도 그 간격은 그대로인데, 글줄 높이가 올라 선지 중심 사이가 79 → 82px 이 된다 —
     게이트(캘리브레이션 σy 대비)가 그만큼 더 열린다. 글자가 커져 선지가 두 줄이 되어도
     손해가 없다: 블록이 커지면 선지 중심 사이는 오히려 벌어진다.
     [행간 1.65 → 1.75] 두 줄로 접힌 선지 안에서 두 줄이 서로 다른 줄로 갈리려면 그 안의
     줄 간격도 잡음보다 커야 한다. 지문이 2.75 까지 간 것과 같은 이유지만 여기서는 선지
     사이(82px)를 지켜야 해서 그만큼 못 간다 — 선지 안 줄 간격 28px 은 여전히 σy 아래다.
     **선지 안에서 어느 줄인지는 못 가린다**고 보는 편이 맞다.
     [폰트를 키운 진짜 이유는 폭이다] 패널이 +29% 넓어져 글자를 6.7% 키워도 줄당 글자수가
     오히려 26% 늘어난다 — 두 줄로 접히는 선지 자체가 줄어든다. */
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-primary);
  padding: 8px 14px 8px 40px;   /* ① 글자가 커진 만큼 왼쪽 자리도 넓힌다(38 → 40) */
  border-radius: 8px;
  background: transparent;
  border: 1.5px solid transparent;
  word-break: keep-all;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.choice-list li:hover {
  background: var(--accent-soft);
  border-color: rgba(96, 18, 243, 0.35);
  color: var(--text-primary);
  transform: translateX(2px);
}
.choice-list li.selected {
  background: rgba(96, 18, 243, 0.12);
  border-color: rgba(96, 18, 243, 0.6);
  color: var(--text-primary);
}
.choice-list li.selected::before {
  color: var(--accent);
}
.choice-list li::before {
  position: absolute;
  left: 11px;
  top: 8px;
  font-weight: 700;
  color: rgba(22,23,28,0.85);
  font-size: 16px;   /* 선지 글자와 같이 올린다(2026-09-12, 15 → 16) */
}
.choice-list li:nth-child(1)::before { content: '①'; }
.choice-list li:nth-child(2)::before { content: '②'; }
.choice-list li:nth-child(3)::before { content: '③'; }
.choice-list li:nth-child(4)::before { content: '④'; }
.choice-list li:nth-child(5)::before { content: '⑤'; }

/* ── 정답 피드백 상태 ── */
.choice-list li.correct {
  background: rgba(15, 157, 88, 0.14);
  border-color: rgba(15, 157, 88, 0.6);
  color: #0f9d58;
}
.choice-list li.correct::before { color: #0f9d58; }
.choice-list li.wrong {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.5);
  color: #dc2626;
}
.choice-list li.wrong::before { color: #dc2626; }
.choice-list li.reveal {
  border-color: rgba(180, 83, 9, 0.55);
  color: #b45309;
}
.choice-list li.reveal::before { color: #b45309; }
.choice-list.answered li { cursor: default; pointer-events: none; transform: none !important; }

/* ?€?€ Q3 material box ?€?€ */
.q3-material {
  background: var(--bg-secondary);
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 16px;   /* 선지와 같이 올린다(2026-09-10 13 → 15, 2026-09-12 15 → 16) */
  line-height: 1.75;
  color: var(--text-dim);
  transition: opacity .4s ease;   /* AI따라읽기 2단계에서 자료 박스를 페이드인시킬 때 씀 */
}
/* AI따라읽기 2단계에서 [자료]를 행/문단 단위로 순서대로 훑어 읽을 때 부드럽게 나타나도록 —
   평상시(opacity는 항상 1)엔 트랜지션이 걸릴 일이 없어 일반 화면엔 영향 없다. */
.q3-row { margin-bottom: 6px; transition: opacity .25s ease; }
.q3-label { font-weight: 700; color: var(--text-primary); }
.q3-paragraphs { margin-top: 8px; padding-left: 1em; }
.q3-paragraphs p { margin-bottom: 7px; word-break: keep-all; transition: opacity .25s ease; }
.q3-bracket {
  display: inline;
  border: 1.5px solid rgba(22,23,28,0.55);
  padding: 0 2px;
  border-radius: 2px;
}
.q3-nummark { font-weight: 700; color: var(--accent); }
.q3-check {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.q3-wave {
  text-decoration: underline wavy;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(22,23,28,0.6);
}

/* ══ AOI 활성 하이라이트 ══
   !important 사용: 다른 규칙과 CSS 캐스케이드 경쟁을 완전히 차단함
   outline으로 이중 테두리: border-color이 안 보여도 outline이 보임 */
.passage-para.aoi-active,
.question-block.aoi-active {
  border-color: #0f9d58 !important;
  outline: 3px solid #0f9d58 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(15, 157, 88, 0.16),
              0 0 14px rgba(15, 157, 88, 0.25) !important;
  background: rgba(15, 157, 88, 0.05) !important;
  animation: aoiGlow 1.2s ease-in-out infinite !important;
}
@keyframes aoiGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(15,157,88,0.2), 0 0 10px rgba(15,157,88,0.18); }
  50%       { box-shadow: 0 0 0 6px rgba(15,157,88,0.12), 0 0 18px rgba(15,157,88,0.3); }
}

/* ══ AI따라읽기 2단계 — 근거 하이라이트를 매크로/마이크로 두 겹으로 표시 ══
   매크로: "이 구역을 보라" — 실측 시선 AOI 활성 표시(.aoi-active)와 같은 초록을 재사용한다.
   EMME 재생 중엔 실측 AOI 판정 자체가 꺼져 있어(_emmeStart 참고) 충돌 없이 같은 의미를
   그대로 이어받을 수 있다. 문단이든, 자료 안의 문단(<p>)이든, 자료 박스 전체든 다 이 클래스
   하나로 통일 — "지금 여기를 보고 있다"는 신호는 항상 같은 색이어야 한눈에 읽힌다. */
.emme-target-para {
  border-color: #0f9d58 !important;
  outline: 3px solid rgba(15, 157, 88, 0.85) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(15, 157, 88, 0.16), 0 0 14px rgba(15, 157, 88, 0.28) !important;
  transition: outline-color .2s ease, box-shadow .2s ease;
}
/* 마이크로: 매크로(초록) 구역 안에서 정확히 어느 문장/표시기호인지 — 보라로 한 단계 더 좁힌다. */
.emme-evidence-sent {
  background: rgba(124, 58, 237, 0.22);
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22);
  transition: background .2s ease, box-shadow .2s ease;
}
/* 문제3형 [자료] 안의 표시기호(.q3-bracket/.q3-nummark/.q3-check/.q3-wave)를 근거로 정밀
   지목할 때 — 이미 있는 마킹 span 위에 그대로 얹는다. */
.emme-evidence-span {
  background: rgba(124, 58, 237, 0.28);
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.32);
  transition: background .2s ease, box-shadow .2s ease;
}
/* 함정 후보(실제 근거는 아니지만 표면적으로 헷갈릴 만한 문장) — 진짜 근거(보라)와 헷갈리지
   않도록 주황 점선으로 구분. 먼저 잠깐 들렀다가 진짜 근거로 넘어간다는 신호. */
.emme-evidence-trap {
  border-color: #b45309 !important;
  outline: 3px dashed rgba(180, 83, 9, 0.9) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(180, 83, 9, 0.16), 0 0 12px rgba(180, 83, 9, 0.28) !important;
  background: rgba(180, 83, 9, 0.07) !important;
}

/* ══ EMME 핵심문장/근거 표시 — 실제 시험장에서 학생이 연필로 그을 수 있는 표시(밑줄/체크/
   대괄호/번호)만 쓴다. 형광펜·배경색처럼 시험지에서 흉내낼 수 없는 방식은 의도적으로 배제. ══ */

/* 문단의 핵심문장 — 1단계에서 문단을 다 읽은 뒤 확정되며, 세션 내내(2단계까지) 유지된다. */
.emme-key-sentence {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: #b45309;
}

/* 2단계 근거가 그 문단의 핵심문장과 일치할 때 — "역시 여기였다"는 확인 체크. */
.emme-key-checked::after {
  content: ' \2713';
  color: #0f9d58;
  font-weight: 700;
}

/* 2단계 근거가 핵심문장과는 다른 문장/구절일 때 — 대괄호로 짚어준다. */
.emme-key-bracket::before { content: '['; margin-right: 1px; }
.emme-key-bracket::after  { content: ']'; margin-left: 1px; }
.emme-key-bracket::before, .emme-key-bracket::after {
  color: #b45309;
  font-weight: 700;
}

/* 비교형 선지처럼 근거가 2곳 이상일 때 — 봐야 할 순서를 번호로 명시. */
.emme-key-order::before {
  content: attr(data-emme-order) ' ';
  color: #7c3aed;
  font-weight: 700;
}

/* 선택형(interactive) 모드 — 문단을 다 읽은 뒤 사용자가 직접 골라볼 수 있는 문장들. */
.emme-pick-candidate {
  cursor: pointer;
  outline: 1.5px dashed rgba(124, 58, 237, 0.55);
  outline-offset: 3px;
  border-radius: 4px;
  transition: background .15s ease, outline-color .15s ease;
}
.emme-pick-candidate:hover {
  background: rgba(124, 58, 237, 0.1);
  outline-color: rgba(124, 58, 237, 0.9);
}

/* 지문 전체 핵심문단 고르기(AI따라읽기 마지막 단계) — 문장이 아니라 문단 통째로 고른다.
   문장 후보(.emme-pick-candidate)와 같은 계열이되 테두리를 문단 박스에 맞춰 넉넉히 준다. */
.emme-pick-para {
  cursor: pointer;
  outline: 2px dashed rgba(124, 58, 237, 0.5);
  outline-offset: 6px;
  border-radius: 6px;
  transition: background .15s ease, outline-color .15s ease;
}
.emme-pick-para:hover {
  background: rgba(124, 58, 237, 0.08);
  outline-color: rgba(124, 58, 237, 0.9);
}

/* ── 선지 옆에 붙는 판정 배지(일치/불일치/적절/부적절/해당/비해당) — 근거 확인 후 남아서
   선지들을 한눈에 비교할 수 있게 한다. ── */
.emme-verdict-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #6d28d9;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: 999px;
  vertical-align: middle;
  animation: _emmeBalloonIn .25s cubic-bezier(.34,1.56,.64,1);
}
/* 반전(1차 인상과 실제 판정이 어긋난 선지) — 착각하기 쉬운 지점이라는 걸 다른 색으로 표시 */
.emme-verdict-reversal {
  color: #c2410c;
  background: rgba(194, 65, 12, 0.12);
  border-color: rgba(194, 65, 12, 0.45);
}

/* ── "1차 인상"(근거 확인 전, 선지 표현만 보고 드는 예감) — 아직 확정 판정이 아니므로 근거
   하이라이트(초록/보라/주황점선)와 확실히 구분되는 노랑 점선을 쓴다. "지금은 추측 단계"라는
   시각 언어. ── */
.emme-hunch {
  outline: 3px dashed rgba(180, 83, 9, 0.85) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(180, 83, 9, 0.14), 0 0 12px rgba(180, 83, 9, 0.25) !important;
  border-radius: 8px;
}

/* ══ 리플레이 AOI 테두리 ══ — 지문 문단(파랑) / 문제-선지 블록(초록), 기록된 frame.aois 기준 즉시 토글
   !important: 클론 요소에 남아있을 수 있는 인라인/캐스케이드 충돌 차단 */
.replay-aoi-para,
.replay-aoi-q {
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.replay-aoi-para.replay-aoi-hit {
  border-color: #6012f3 !important;
  box-shadow: 0 0 0 4px rgba(96, 18, 243,.18), 0 0 12px rgba(96, 18, 243,.3) !important;
  background: rgba(96, 18, 243,.06) !important;
}
.replay-aoi-q.replay-aoi-hit {
  border-color: #0f9d58 !important;
  box-shadow: 0 0 0 4px rgba(15,157,88,.18), 0 0 12px rgba(15,157,88,.3) !important;
  background: rgba(15,157,88,.06) !important;
}

/* 문항 "풀이 중" 구간에서만 파랑 대신 적용 — 지금 보고 있는 문단이 그 문항의 근거문단인지(초록)
   아닌지(빨강)를 알려준다. renderFrame()이 qPhaseWindow 안에 있을 때만 이 클래스들을 토글하고,
   구간 밖에서는 기존 .replay-aoi-hit(파랑)로 되돌아간다. */
.replay-aoi-para.replay-aoi-hit-evid {
  border-color: #0f9d58 !important;
  box-shadow: 0 0 0 4px rgba(15,157,88,.2), 0 0 14px rgba(15,157,88,.35) !important;
  background: rgba(15,157,88,.08) !important;
}
.replay-aoi-para.replay-aoi-hit-nonevid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 4px rgba(220,38,38,.2), 0 0 14px rgba(220,38,38,.35) !important;
  background: rgba(220,38,38,.08) !important;
}

/* ?€?€ Replay Gaze Dot ?€?€ */
/* 흰 배경에서는 노란 점 가장자리가 배경과 잘 안 갈려서, 어두운 테두리 링을 한 겹
   덧붙여 경계를 분명히 한다(다크 배경 전제였던 기존엔 없어도 충분히 도드라졌음). */
#replayDot {
  position: fixed;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,0,0.98) 25%, rgba(245,158,11,0.75) 70%);
  border: 2px solid #b45309;
  box-shadow: 0 0 0 1px rgba(22,23,28,.15), 0 0 12px rgba(245,158,11,0.55);
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%);
  display: none;
}

/* ?€?€ Reading Layout Responsive ?€?€ */
@media screen and (max-width: 700px) {
  #readingLayout { padding-top: 10px; padding-bottom: 10px; }
  #readingPanels, .rd-panels {
    flex-direction: column;
    overflow-y: auto;
  }
  #passagePanel, .rd-passage-panel {
    flex: none;
    overflow-y: visible;
    min-height: auto;
    padding: 12px 16px 24px;
    border-right: none;
    border-bottom: 1px solid var(--border-mid);
  }
  #questionsPanel, .rd-questions-panel {
    flex: none;
    min-height: 60vh;
  }
  #debugPanel { width: calc(100vw - 40px); }
}

/* ═══════════════════════════════════════════════════════════════
   §  Gaze Stats Modal
   ═══════════════════════════════════════════════════════════════ */

/* 통계 버튼 강조색 */
.stats-btn { border-color: rgba(180,83,9,0.5) !important; }
.stats-btn:hover { background: rgba(180,83,9,0.12) !important; border-color: #b45309 !important; }

/* 오버레이 */
.stats-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22,23,28,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
.stats-modal.hidden { display: none; }
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* 카드 */
.stats-card {
  background: var(--bg-elevated);
  border: 1px solid rgba(180,83,9,0.3);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(22,23,28,0.25), 0 0 0 1px var(--border-soft);
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 헤더 */
.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.stats-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #b45309;
  letter-spacing: 0.02em;
}
.stats-close {
  background: none;
  border: 1px solid var(--border-mid);
  color: #6b7280;
  border-radius: 8px;
  width: 32px; height: 32px;
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.stats-close:hover { background: var(--border-soft); color: var(--text-primary); border-color: var(--border-mid); }

/* 스크롤 영역 */
.stats-content {
  overflow-y: auto;
  padding: 20px 24px 24px;
  flex: 1;
}
.stats-content::-webkit-scrollbar { width: 6px; }
.stats-content::-webkit-scrollbar-track { background: transparent; }
.stats-content::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }

/* 섹션 */
.stats-section {
  margin-bottom: 22px;
}
.stats-section:last-child { margin-bottom: 0; }
.stats-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}

/* 요약 그리드 */
.stats-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
.stats-kpi {
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
}
.stats-kpi-val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.stats-kpi-label {
  font-size: 0.68rem;
  color: #6b7280;
  margin-top: 4px;
  letter-spacing: 0.04em;
}

/* 테이블 */
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.stats-table th {
  text-align: left;
  color: #6b7280;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 4px 8px 8px;
  letter-spacing: 0.05em;
}
.stats-table th:last-child { text-align: right; }
.stats-table td {
  padding: 7px 8px;
  color: var(--text-dim);
  border-top: 1px solid var(--border-soft);
}
.stats-table td:last-child { text-align: right; color: var(--text-primary); font-weight: 600; }
.stats-table tr:hover td { background: var(--bg-secondary); }

/* 진행 바 */
.stats-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stats-bar-bg {
  flex: 1;
  height: 6px;
  background: var(--border-soft);
  border-radius: 3px;
  overflow: hidden;
}
.stats-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #0f9d58, #10b981);
  transition: width 0.4s ease;
}
.stats-bar-fill.yellow { background: linear-gradient(90deg, #b45309, #f59e0b); }
.stats-bar-fill.blue   { background: linear-gradient(90deg, #6012f3, #3b82f6); }

/* ═══ 문제별 지문·선지 세부 분포 (analysis.js _renderPhaseAoiBreakdownTable) ═══ */
.phase-aoi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media screen and (max-width: 900px) {
  .phase-aoi-grid { grid-template-columns: 1fr; }
}
.phase-aoi-block {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  overflow: hidden;
}
.phase-aoi-block-title {
  padding: 6px 12px;
  font: 700 12px Inter,sans-serif;
  color: #b45309;
  background: rgba(180,83,9,.07);
  border-bottom: 1px solid var(--border-soft);
}

/* ═══ 문제별 시선 히트맵 (js/heatmap.js) ═══ */
.phase-heatmap-section {
  padding: 16px 20px 24px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-soft);
}
.phase-heatmap-title {
  font: 600 13px Inter,sans-serif;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media screen and (max-width: 900px) {
  .heatmap-grid { grid-template-columns: 1fr; }
}
.heatmap-cell {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  padding: 10px;
  overflow: hidden;
}
.heatmap-cell-title {
  font: 700 11px Inter,sans-serif;
  color: var(--accent);
  margin-bottom: 8px;
}
.heatmap-cell-empty {
  font: 12px Inter,sans-serif;
  color: var(--text-faint);
  padding: 20px 0;
  text-align: center;
}
.heatmap-viewport {
  border-radius: 6px;
  background: var(--bg-secondary);
}

/* 타임스탬프 */
.stats-timestamp {
  font-size: 0.7rem;
  color: #6b7280;
  text-align: right;
  margin-top: 14px;
}

/* ─── 시선그래프 버튼 ─── */
.graph-btn {
  background: linear-gradient(135deg,rgba(180,83,9,.12),rgba(245,158,11,.08)) !important;
  border-color: rgba(180,83,9,.45) !important;
  color: #b45309 !important;
}
.graph-btn:hover {
  background: linear-gradient(135deg,rgba(180,83,9,.22),rgba(245,158,11,.14)) !important;
  border-color: rgba(180,83,9,.8) !important;
}
.graph-btn:disabled { opacity:.35 !important; cursor:not-allowed !important; }

/* ─── 단계(stage.js)에 따라 잠기는 리뷰 버튼 공통 disabled 표시 ─── */
.history-btn:disabled,
.stats-btn:disabled,
.coaching-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* ─── 공통 모달 오버레이 ─── */
.gaze-modal-overlay {
  position: fixed; inset: 0; z-index: 8000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px);
}
.gaze-modal-overlay.hidden { display: none; }

/* preAnalysisModal의 "다시 시도"/"결과 복사" 버튼 — 이 클래스는 element별로 개별 지정하는
   기존 관례를 따른다(전역 .hidden{display:none} 규칙이 이 코드베이스엔 없음). */
#btnPreAnalysisRetry.hidden,
#btnPreAnalysisPreview.hidden,
#btnPreAnalysisCopy.hidden { display: none; }

/* 결과 목록이 길면 버튼 줄이 박스 밖으로 밀려 잘렸다 — .gaze-modal-box 가
   max-height:94vh 에 overflow:hidden 인데 본문에 스크롤이 없어서, 지문이 늘수록
   "결과 복사"가 보이지 않는다(지문 9편에서 이미 재현). 본문만 스크롤시키고
   버튼 줄은 줄어들지 않게 고정한다. flex 자식은 min-height:0 을 줘야 실제로 줄어든다. */
#preAnalysisModal #preAnalysisBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#preAnalysisModal .gaze-modal-box > div:last-child { flex: 0 0 auto; }

/* apiKeyModal은 gazeGraphModal 등 다른 .gaze-modal-overlay 위에 겹쳐 떠야 한다
   (ensureApiKey()가 시선그래프/코칭 리포트를 그리는 도중 키 입력을 요청함). 같은
   z-index(8000)에 DOM 순서상 apiKeyModal이 먼저 나와서, 나중에 그려지는
   gazeGraphModal이 그 위를 덮어 "입력창이 떴다가 바로 가려지는" 것처럼 보이던
   문제 — ID 선택자로 이 모달만 확실히 최상단에 오도록 고정한다. */
#apiKeyModal { z-index: 10000; }

.gaze-modal-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 24px 64px rgba(22,23,28,.28);
  width: 90vw;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gaze-modal-hdr {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  font: 700 14px/1 Inter,sans-serif;
  color: var(--text-primary);
  letter-spacing: .03em;
  flex-shrink: 0;
}

.gaze-modal-close {
  padding: 4px 12px;
  font: 600 11px Inter,sans-serif;
  border-radius: 20px;
  border: 1.5px solid var(--border-mid);
  background: var(--bg-secondary);
  color: #6b7280;
  cursor: pointer;
}
.gaze-modal-close:hover { background: rgba(220,38,38,.1); color: #dc2626; }

/* ===== Coaching Report Panel ===== */
.coaching-btn {
  background: linear-gradient(135deg, #6012f3, #7c3aed) !important;
  color: #fff !important;
  border-color: rgba(124,58,237,.5) !important;
}
.coaching-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #6d28d9, #9333ea) !important;
  box-shadow: 0 0 14px rgba(124,58,237,.55) !important;
}

@keyframes cr-pulse {
  0%,100%{ box-shadow:0 0 8px rgba(124,58,237,.4); }
  50%{ box-shadow:0 0 20px rgba(124,58,237,.85); }
}

/* ===== Phase2(동형문제풀이) — AI소크라테스 다음 단계임을 초록 계열로 구분(2026-08-17) ===== */
.toggle-btn.phase2-btn {
  background: rgba(15, 157, 88, 0.10);
  border-color: rgba(15, 157, 88, 0.4);
  color: var(--success);
}
.toggle-btn.phase2-btn:hover:not(:disabled) {
  background: rgba(15, 157, 88, 0.2);
  border-color: rgba(15, 157, 88, 0.6);
}
.toggle-btn.phase2-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  transform: none;
}
.toggle-btn.phase2-btn.phase2-ready {
  animation: p2-pulse 1.6s ease infinite;
}
@keyframes p2-pulse {
  0%,100%{ box-shadow:0 0 8px rgba(15,157,88,.4); }
  50%{ box-shadow:0 0 20px rgba(15,157,88,.85); }
}

/* ===== History (지난 기록) ===== */
.history-btn {
  background: linear-gradient(135deg, rgba(13,148,136,.14), rgba(20,184,166,.1)) !important;
  border-color: rgba(13,148,136,.45) !important;
  color: #0d9488 !important;
}
.history-btn:hover {
  background: linear-gradient(135deg, rgba(13,148,136,.24), rgba(20,184,166,.18)) !important;
  border-color: rgba(13,148,136,.8) !important;
}

.history-empty {
  color: var(--text-faint);
  text-align: center;
  padding: 28px 0;
  font: 13px Inter, sans-serif;
}

.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  margin-bottom: 8px;
}
.history-row-date {
  font: 600 12.5px Inter, sans-serif;
  color: var(--text-primary);
}
.history-row-meta {
  font: 12px Inter, sans-serif;
  color: #6b7280;
  margin-top: 3px;
}
.history-badge {
  color: #7c3aed;
  margin-left: 4px;
}
.history-row-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.history-row-btns button {
  padding: 5px 11px;
  font: 600 11px Inter, sans-serif;
  border-radius: 14px;
  border: 1px solid var(--border-mid);
  background: var(--bg-elevated);
  color: var(--accent);
  cursor: pointer;
}
.history-row-btns button:hover { background: var(--accent-soft); }
.history-row-btns button.history-danger { color: #dc2626; border-color: rgba(220,38,38,.35); }
.history-row-btns button.history-danger:hover { background: rgba(220,38,38,.1); }

/* ===== Self-Report Overlay (사후 자기평가) ===== */
/* 자기평가 마법사는 없어졌지만(질문이 AI따라읽기로 옮겨감) 이 배경 규칙은
   #answerReview가 쓴다(#socratesReview는 2026-08-23 폐기). */
.self-report-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4,6,20,.85);
  backdrop-filter: blur(4px);
}
.self-report-overlay.hidden { display: none; }

.self-report-nav-btn {
  padding: 9px 20px;
  font: 700 12px Inter, sans-serif;
  border-radius: 20px;
  border: 1.5px solid var(--border-mid);
  background: var(--bg-secondary);
  color: var(--accent);
  cursor: pointer;
}
.self-report-nav-btn:disabled { opacity: .3; cursor: not-allowed; }
.self-report-nav-btn.self-report-nav-primary {
  background: linear-gradient(135deg,#6012f3,#7c3aed);
  border-color: transparent;
  color: #fff;
  margin-left: auto;
}

/* 자기평가 중 지문 문단/문장 선택 상태 — AOI 시선 하이라이트(초록)와 구분되는 골드 계열 */


.cr-panel {
  width: 100%;
  flex: 1;               /* readingPanels 숨김 시 남은 공간 전체 차지 */
  overflow-y: auto;
  background: var(--bg-elevated);
  border-bottom: 1px solid rgba(96, 18, 243,.25);
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 18, 243,.4) transparent;
  animation: cr-slide-in .3s ease;
}
@keyframes cr-slide-in {
  from { opacity:0; transform:translateY(-12px); }
  to   { opacity:1; transform:translateY(0); }
}
.cr-panel.hidden { display: none; }

.cr-header {
  padding: 10px 18px;
  background: rgba(96, 18, 243,.1);
  border-bottom: 1px solid rgba(96, 18, 243,.2);
  position: sticky;
  top: 0;
  z-index: 10;
}
/* 배경 바(.cr-header)는 패널 전체 폭을 그대로 채우고, 실제 내용(제목/버튼)만
   #crBody와 같은 폭으로 좁혀 가운데 정렬한다 — 헤더와 본문 좌우가 맞춰 보이게. */
.cr-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.cr-title {
  font-size: 13px;
  font-weight: 700;
  color: #4d0fcc;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cr-model-badge {
  font-size: 9px;
  font-weight: 400;
  background: rgba(96, 18, 243,.18);
  color: #4d0fcc;
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: .4px;
}
.cr-header-btns { display: flex; align-items: center; gap: 8px; }

.cr-close-btn {
  font-size: 11px;
  padding: 4px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background .2s;
}
.cr-close-btn:hover { background: var(--border-soft); color: var(--text-primary); }

/* 지난 기록의 옛 스키마(note 단일필드) 코칭 결과를 최신 5영역 형식으로 다시 만들 때 사용 —
   닫기 버튼과 헷갈리지 않게 인디고 톤으로 구분. */
.cr-regen-btn {
  background: rgba(96, 18, 243,.1);
  border-color: rgba(96, 18, 243,.35);
  color: #4d0fcc;
}
.cr-regen-btn:hover:not(:disabled) { background: rgba(96, 18, 243,.18); color: #3e0aa8; }
.cr-regen-btn:disabled { opacity: .5; cursor: default; }

/* 가독성을 위한 읽기폭 제한 — 코칭 리포트가 화면 전체 폭(.cr-panel)을 그대로 쓰면
   줄 길이가 너무 길어져서 눈이 다음 줄을 찾기 힘들어진다. 본문은 약 720px(가독성
   권장 65~75자 분량)로 제한하고 가운데 정렬 — 화면이 더 좁으면(모바일 등)
   width:100%가 우선해 자연스럽게 줄어든다(가로 스크롤 없음). 좌우 여백은 .cr-panel의
   배경색과 같아서 잘려 보이지 않고 의도된 여백처럼 보인다. */
#crBody {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cr-headline-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(251,191,36,.16), rgba(236,72,153,.14));
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 14px;
  padding: 16px 18px;
}
.cr-hl-icon { font-size: 24px; flex-shrink: 0; line-height: 1; }
.cr-hl-text {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #92400e;
}

.cr-overall-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 12px;
  padding: 14px 16px;
}
.cr-ov-icon { font-size: 22px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.cr-ov-text {
  font-size: 13px;
  line-height: 1.7;
  color: #3e0aa8;
}

/* 다음 지문에 바로 써먹는 팁 — keyHabit 바로 다음, overall보다 위. 스크롤 없이 보이는
   자리에 "지금 당장 쓸 수 있는 것 하나"를 두기 위한 카드라 초록 계열로 구분. */
.cr-nexttip-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(52,211,153,.16), rgba(16,185,129,.1));
  border: 1px solid rgba(52,211,153,.35);
  border-radius: 14px;
  padding: 14px 18px;
}
.cr-nexttip-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.cr-nexttip-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #047857;
  margin-bottom: 3px;
}
.cr-nexttip-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #065f46;
}

.cr-section-hdr {
  font-size: 12px;
  font-weight: 700;
  color: rgba(22,23,28,.55);
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.cr-q-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cr-q-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.cr-q-card.cr-correct { border-color: rgba(15,157,88,.4); }
.cr-q-card.cr-wrong   { border-color: rgba(220,38,38,.4); }
.cr-q-card.cr-unknown { border-color: rgba(148,163,184,.35); }

.cr-q-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
}
.cr-q-card.cr-correct .cr-q-header { background: rgba(15,157,88,.1); }
.cr-q-card.cr-wrong   .cr-q-header { background: rgba(220,38,38,.1); }
.cr-q-card.cr-unknown .cr-q-header { background: rgba(148,163,184,.1); }

.cr-q-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: .5px;
}
.cr-q-result {
  font-size: 11px;
  font-weight: 600;
  color: rgba(22,23,28,.7);
}
.cr-q-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cr-q-readverdict {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.cr-q-readverdict.cr-rv-red    { color: #dc2626; background: rgba(220,38,38,.12); }
.cr-q-readverdict.cr-rv-orange { color: #c2410c; background: rgba(194,65,12,.12); }
.cr-q-readverdict.cr-rv-green  { color: #0f9d58; background: rgba(15,157,88,.12); }
.cr-q-readverdict.cr-rv-gray   { color: #6b7280; background: rgba(148,163,184,.15); }

.cr-q-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-elevated);
}
/* 문항 카드 내 5영역(한 줄 진단/정답의 논리/읽기 흔적/정석 리딩/다음 행동) — 기본 펼침,
   토글 없이 항상 전부 보여준다. 값이 빈 영역은 렌더 단계에서 아예 생략된다. */
.cr-q-sub + .cr-q-sub {
  padding-top: 10px;
  border-top: 1px dashed var(--border-mid);
}
.cr-q-sub-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: rgba(22,23,28,.5);
  margin-bottom: 3px;
}
.cr-q-sub-body {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(22,23,28,.85);
}
/* "읽기 흔적" 영역 전용 — 판정 근거(색+수치)를 서술 문장 위에 짧게 붙인다. */
.cr-q-trace-signal {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(22,23,28,.6);
  margin-bottom: 4px;
}
.cr-q-trace-dot {
  font-size: 8px;
  line-height: 1;
}
.cr-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(22,23,28,.8);
}
.cr-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
}
.cr-green  { color: #0f9d58; }
.cr-orange { color: #b45309; }
.cr-blue   { color: #2563eb; }

.cr-coaching-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cr-coaching-card {
  flex: 1;
  min-width: 220px;
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
}
.cr-speed-card    { background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.28); }
.cr-acc-card      { background: rgba(99,102,241,.06); border-color: rgba(99,102,241,.28); }

/* 압축 포맷 — 속도/정확도 신호를 하나로 섞은 우선순위 목록 카드 */
.cr-priority-card {
  background: rgba(96, 18, 243,.06);
  border: 1px solid rgba(96, 18, 243,.28);
  border-radius: 12px;
  padding: 14px 16px;
}

/* ── 지문 구조 박스(paragraphMap) — "📖 지문 구조 총정리" 카드 안, AI 산문 위에 배치.
   왼쪽 열에 "문단1" 번호(+역할), 세로 구분선, 오른쪽 열에 "핵심문장 : ...", "내용요약 : ..."
   두 줄을 라벨+콜론+내용을 한 줄로 붙여 보여준다. 박스 사이 화살표에 문단간 관계
   라벨(전개/예시/대조/인과/종합)을 붙여 구조를 전달한다. 새 색 팔레트 없이 이 앱 기존
   accent(인디고#6012f3/보라#a78bfa)만 재사용. */
.cr-pmap { display: flex; flex-direction: column; }
.cr-pbox {
  display: flex;
  align-items: stretch;
  gap: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  padding: 12px 14px;
}
/* 왼쪽 열 — "문단1"이 이 박스가 몇 번째 문단인지 한눈에 들어와야 하므로 굵고 밝게. */
.cr-pbox-num {
  flex-shrink: 0;
  min-width: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #4d0fcc;
}
.cr-pbox-role {
  font-size: 10px;
  font-weight: 600;
  color: rgba(22,23,28,.5);
  margin-top: 3px;
}
.cr-pbox-divider {
  flex-shrink: 0;
  width: 1px;
  background: var(--border-mid);
  align-self: stretch;
}
/* 오른쪽 열 — "라벨 : 내용" 한 줄씩. 문항 카드의 필드 라벨(.cr-q-sub-label)과 색 위계는
   맞추되, 여긴 라벨이 줄 앞에 인라인으로 붙는 형태라 세로 여백만 행 사이에 둔다. */
.cr-pbox-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.cr-pbox-row { line-height: 1.6; }
.cr-pbox-fieldname {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: rgba(22,23,28,.55);
  margin-right: 2px;
}
.cr-pbox-sep { color: rgba(22,23,28,.35); margin-right: 6px; }
.cr-pbox-quote {
  font-style: italic;
  font-size: 12.5px;
  color: rgba(22,23,28,.92);
}
.cr-pbox-summary {
  font-size: 11.5px;
  color: rgba(22,23,28,.65);
}
.cr-pbox-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(22,23,28,.35);
  padding: 6px 0;
}
.cr-pbox-rel {
  font-size: 10.5px;
  font-weight: 700;
  color: #6d28d9;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.3);
  border-radius: 999px;
  padding: 2px 9px;
}
.cr-pbox-final {
  background: linear-gradient(135deg, rgba(96, 18, 243,.12), rgba(124,58,237,.08));
  border: 1px solid rgba(96, 18, 243,.35);
}
.cr-pbox-final .cr-pbox-num { color: #6d28d9; }
.cr-pbox-final .cr-pbox-divider { background: rgba(124,58,237,.3); }
.cr-pbox-final .cr-pbox-quote { font-size: 13px; }

.cr-ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.cr-ol li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(22,23,28,.85);
}
.cr-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border-mid);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 1px;
}
.cr-loading {
  text-align: center;
  padding: 24px;
  color: rgba(22,23,28,.5);
  font-size: 13px;
  animation: cr-blink .8s ease infinite alternate;
}
@keyframes cr-blink { from{opacity:.4} to{opacity:1} }

/* ═══ 정답풀이 화면 (리드스마트 3·5단계) — js/answerreview.js ═══
   오버레이 자체는 .self-report-overlay를 재사용하고(같은 z-index·배경), 안쪽 박스만
   따로 잡는다. 문항 카드 + 문단별 시선 막대 두 덩어리로만 구성된 압축 화면이다. */
.ar-box {
  width: 92vw; max-width: 900px; height: 88vh;
  display: flex; flex-direction: column;
  background: var(--bg-primary);
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border-soft);
}
.ar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  font: 700 15px Inter, sans-serif; color: var(--text-primary);
  flex-shrink: 0;
}
.ar-body { flex: 1; overflow-y: auto; padding: 18px; }
.ar-foot {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-top: 1px solid var(--border-soft);
  flex-shrink: 0;
}
/* 다음에 무엇을 하는지 미리 알려주는 한 줄 — 주 버튼이 단계에 따라 바뀌므로,
   바뀌는 이유를 학생이 먼저 알고 있어야 갑작스럽지 않다. */
.ar-hint { font: 12px/1.5 Inter, sans-serif; color: var(--text-dim); }
.ar-actions { display: flex; gap: 10px; flex-shrink: 0; }
.ar-btn {
  padding: 8px 18px; border-radius: 20px; cursor: pointer;
  font: 600 13px Inter, sans-serif; border: 1px solid var(--border-mid);
  background: var(--bg-elevated); color: var(--text-primary);
}
.ar-btn-socrates { border: none; background: linear-gradient(135deg,#6012f3,#7c3aed); color: #fff; }

.ar-score { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.ar-score-num { font: 700 34px Inter, sans-serif; color: var(--accent); }
.ar-score-den { font: 700 18px Inter, sans-serif; color: var(--text-dim); }
.ar-score-label { font: 13px Inter, sans-serif; color: var(--text-dim); }

.ar-section-title {
  font: 700 13px Inter, sans-serif; color: var(--text-dim);
  letter-spacing: .04em; margin: 22px 0 10px;
}
.ar-q {
  border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 14px; margin-bottom: 12px; background: var(--bg-elevated);
}
.ar-qhead { display: flex; gap: 8px; align-items: baseline; }
.ar-qmark { font-size: 15px; }
.ar-qnum  { font: 700 14px Inter, sans-serif; color: var(--text-primary); }
.ar-qtext { font: 600 14px/1.6 Inter, sans-serif; color: var(--text-primary); }
.ar-qmeta { font: 12px Inter, sans-serif; color: var(--text-dim); margin: 8px 0 10px; }

.ar-choices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ar-choice {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 6px;
  padding: 8px 10px; border-radius: 8px;
  font: 13px/1.6 Inter, sans-serif; color: var(--text-primary);
  background: var(--bg-primary); border: 1px solid transparent;
}
.ar-choice.is-answer     { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.35); }
.ar-choice.is-wrong-pick { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.35); }
.ar-cnum  { color: var(--text-dim); }
.ar-verdict {
  margin-left: 6px; padding: 1px 6px; border-radius: 10px;
  font: 700 10px Inter, sans-serif; color: var(--text-dim);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
}
.ar-tag { margin-left: 6px; padding: 1px 7px; border-radius: 10px; font: 700 10px Inter, sans-serif; }
.ar-tag-answer { background: rgba(34,197,94,.20); color: #16a34a; }
.ar-tag-mine   { background: rgba(239,68,68,.18); color: #dc2626; }
.ar-why { grid-column: 2 / -1; font: 12px/1.6 Inter, sans-serif; color: var(--text-dim); margin-top: 4px; }
/* ── 실제 정답률 (2026-09-16) ──────────────────────────────────────────────
   메가스터디 집계에서 우리 수능 기출 문항 몫만 잘라 온 값. 정오 배지 바로 다음에 놓는다 —
   O/X 를 본 학생의 다음 물음이 "나만 틀렸나"라서다. 수치가 없는 문항에서는 칸이 안 나간다. */
.ar-rate {
  padding: 12px 16px; border-radius: 12px; margin: -6px 0 14px;
  border: 1px solid var(--border-soft); background: var(--bg-secondary);
}
.ar-rate-hd {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 8px;
  font: 600 11px Inter, sans-serif; color: var(--text-faint); letter-spacing: .06em;
}
.ar-rate-src { font: 400 11px Inter, sans-serif; letter-spacing: 0; color: var(--text-faint); opacity: .85; }
.ar-rate-body { display: flex; flex-direction: column; gap: 5px; }
.ar-rate-row { display: flex; gap: 9px; align-items: baseline; }
.ar-rate-lbl {
  flex: 0 0 auto; min-width: 52px; white-space: nowrap;
  font: 600 11px Inter, sans-serif; color: var(--text-faint); letter-spacing: .04em;
}
.ar-rate-val { font: 400 13px/1.6 Inter, sans-serif; color: var(--text-primary); }
.ar-rate-val b { font-weight: 700; }
.ar-rate-band {
  margin-left: 4px; padding: 1px 7px; border-radius: 10px;
  font: 700 10px Inter, sans-serif; color: var(--text-dim);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
}
/* 선지 한 줄의 선택률 — 숫자만 둔다. 이 줄에서 눈에 띄어야 할 것은 선지 원문이다. */
.ar-cpct {
  grid-row: 1; align-self: baseline; white-space: nowrap;
  font: 700 11px Inter, sans-serif; color: var(--text-faint); letter-spacing: .02em;
}
.ar-choice.is-answer .ar-cpct     { color: #16a34a; }
.ar-choice.is-wrong-pick .ar-cpct { color: #dc2626; }

/* 근거 자리와 관계 — 문장으로 쓰면 그것만으로 두 줄이 되므로 꼬리표 하나로 둔다 */
.ar-cmeta {
  grid-column: 2 / -1; margin-top: 4px;
  font: 700 11px Inter, sans-serif; color: var(--text-faint); letter-spacing: .02em;
}
/* 인용은 지문이 화면에 없을 때만 나온다(answerreview.js _arRenderReveal) */
.ar-cquote {
  grid-column: 2; margin-top: 3px; padding-left: 9px;
  border-left: 2px solid var(--border-mid);
  font: 12px/1.65 Inter, sans-serif; color: var(--text-secondary);
}

.ar-gaze { border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px; background: var(--bg-elevated); }
.ar-bar-row {
  display: grid; grid-template-columns: 52px 1fr 54px 88px;
  align-items: center; gap: 8px; margin-bottom: 8px;
  font: 12px Inter, sans-serif; color: var(--text-primary);
}
.ar-bar-label { color: var(--text-dim); }
.ar-bar-track { height: 10px; border-radius: 5px; background: var(--bg-primary); overflow: hidden; }
.ar-bar-fill  { display: block; height: 100%; background: linear-gradient(90deg,#6012f3,#7c3aed); }
.ar-bar-val   { text-align: right; }
.ar-bar-reg   { color: var(--text-dim); text-align: right; }
.ar-gaze-note { font: 12px/1.7 Inter, sans-serif; color: var(--text-dim); margin-top: 10px; }
.ar-empty     { font: 13px Inter, sans-serif; color: var(--text-dim); }

/* ═══ 코칭리포트 — 기출 vs 동형 비교 카드 (리드스마트 6단계) ═══ */
.cr-cmp-table { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.cr-cmp-head, .cr-cmp-row {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  align-items: center; gap: 8px;
  font: 13px Inter, sans-serif; color: var(--text-primary);
}
.cr-cmp-head {
  font: 700 11px Inter, sans-serif; color: var(--text-dim);
  padding-bottom: 4px; border-bottom: 1px solid var(--border-soft);
}
.cr-cmp-row { padding: 6px 0; }
.cr-cmp-label { color: var(--text-dim); }
.cr-cmp-delta { font-weight: 700; }
.cr-cmp-up   { color: #16a34a; }
.cr-cmp-down { color: #dc2626; }
.cr-cmp-flat { color: var(--text-dim); }

.cr-cmp-qlist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cr-cmp-q {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 20px;
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  font: 12px Inter, sans-serif; color: var(--text-primary);
}
.cr-cmp-qnum   { font-weight: 700; color: var(--text-dim); }
.cr-cmp-arrow  { color: var(--text-dim); }
.cr-cmp-change { font: 700 11px Inter, sans-serif; }
.cr-cmp-improved  { color: #16a34a; }
.cr-cmp-regressed { color: #dc2626; }
.cr-cmp-same      { color: var(--text-dim); }

/* ═══ 하단 바 흐름 버튼 — 리드스마트 학습 3단계 진행 표시 (stage.js _updateFlowButtons) ═══
   그룹 라벨 문구를 없앤 자리를 이 세 상태가 대신한다.
     · 잠김(disabled)  — 아직 차례가 아님
     · 지금 차례(.is-current) — 은은한 펄스로 "여기를 누를 차례"임을 드러냄
     · 완료(.is-done)  — 흐리게 + 체크. 눌러서 되돌아갈 수는 있다. */
.tb-flow { gap: 6px; }
.toggle-btn.flow-btn.is-current {
  border-color: var(--accent);
  animation: flow-pulse 1.8s ease infinite;
}
@keyframes flow-pulse {
  0%,100% { box-shadow: 0 0 6px rgba(96, 18, 243,.35); }
  50%     { box-shadow: 0 0 18px rgba(96, 18, 243,.75); }
}
.toggle-btn.flow-btn.is-done {
  opacity: .55;
  border-color: var(--border-soft);
}
.toggle-btn.flow-btn.is-done::after {
  content: ' ✓';
  color: #16a34a;
  font-weight: 700;
}

/* 개발자 도구(사전분석) — 학습 메뉴와 섞이지 않도록 눈에 덜 띄게 둔다. */
.sb-btn.sb-dev { opacity: .5; }
.sb-btn.sb-dev:hover:not(:disabled) { opacity: 1; }

/* 🔁 기출문제풀이 — 흐름 3버튼 중 가운데. 따라읽기(보라)와 동형(초록) 사이에서
   "지금 실제로 푸는 단계"임이 드러나도록 강조색을 쓴다. */
.toggle-btn.exam-btn {
  background: rgba(96, 18, 243, 0.10);
  border-color: rgba(96, 18, 243, 0.4);
  color: #6012f3;
}
.toggle-btn.exam-btn:hover:not(:disabled) {
  background: rgba(96, 18, 243, 0.2);
  border-color: rgba(96, 18, 243, 0.65);
}
.toggle-btn.exam-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* 정답풀이 화면의 기록 이름 입력줄 — 기본 부분(날짜·지문 주제)은 보여주기만 하고
   덧붙이는 설명만 입력받는다. 저장은 이미 끝난 뒤라 여기서는 갱신만 일어난다. */
.ar-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  background: var(--bg-elevated);
}
.ar-name.hidden { display: none; }
.ar-name-label { font: 700 11px Inter, sans-serif; color: var(--text-dim); }
.ar-name-base  { font: 12px Inter, sans-serif; color: var(--text-primary); }
.ar-name-input {
  flex: 1; min-width: 140px;
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border-mid); background: var(--bg-primary);
  color: var(--text-primary); font: 12px Inter, sans-serif;
}

/* 기록 목록의 이름 인라인 편집 */
.history-row-date { cursor: pointer; }
.history-row-date.history-row-static { cursor: default; }
/* '기록' 목록의 묶음 머리 — 진단 리포트와 학습 회차가 한 목록에 섞여 보이지 않게(history.js) */
.history-sec {
  margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border-mid);
  font: 700 12px Inter, sans-serif; color: var(--text-dim); letter-spacing: .02em;
}
.history-sec small { font-weight: 400; color: var(--text-faint); margin-left: 4px; }
.history-label-input {
  width: 100%; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--border-mid); background: var(--bg-primary);
  color: var(--text-primary); font: 13px Inter, sans-serif;
}

/* ═══ 시선그래프 구간 탭 (1단계 따라읽기 / 2단계 기출 / 4단계 동형) ═══ */
.gg-tabs {
  display: flex; gap: 6px;
  padding: 10px 18px 0;
  border-bottom: 1px solid var(--border-soft);
}
.gg-tab {
  padding: 8px 16px; border-radius: 10px 10px 0 0;
  border: 1px solid var(--border-soft); border-bottom: none;
  background: var(--bg-elevated); color: var(--text-dim);
  cursor: pointer; font: 600 12px Inter, sans-serif;
}
.gg-tab:hover { color: var(--text-primary); }
.gg-tab.is-active {
  background: var(--bg-primary); color: var(--accent);
  border-color: var(--accent);
}
.phase-heatmap-note { font: 12px/1.6 Inter, sans-serif; color: var(--text-dim); padding: 4px 0 8px; }

/* ═══ 1단계 AI 추종도 패널 ═══ */
.gg-follow { padding: 14px 20px 0; }
.gg-follow-title { font: 700 13px Inter, sans-serif; color: var(--text-primary); margin-bottom: 10px; }
.gg-follow-nums { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 10px; }
.gg-follow-nums span { display: flex; flex-direction: column; gap: 2px; }
.gg-follow-nums b { font: 700 20px Inter, sans-serif; color: var(--accent); }
.gg-follow-nums small { font: 11px Inter, sans-serif; color: var(--text-dim); }
.gg-follow-chart {
  width: 100%; height: 90px; display: block;
  background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 8px;
}
.gg-follow-line { fill: none; stroke: #6012f3; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.gg-follow-ok   { stroke: #16a34a; stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.gg-follow-legend { font: 11px Inter, sans-serif; color: var(--text-dim); margin-top: 6px; }

/* 하단 바로 지난 단계를 열어본 화면(stage.js openStage) — 답은 그때 고른 그대로 칠해
   두되 다시 고를 수는 없다. 클릭이 되는 것처럼 보이면 눌러보게 되고, 눌러도 아무 일이
   없으면 고장으로 읽힌다. */
#questionViewport.is-review .choice-list li { cursor: default; }

/* ═══ 시선 코멘트 (analysis.js §14-F-1h) — 화면 제일 아래 ═══
   그래프를 보기 전에 읽는 글이라 "읽히는 것"이 우선이다: 문장은 목록으로 끊어 한 줄에
   하나씩, 수치만 굵게 해서 아래 표에서 같은 값을 찾아보게 만든다. */
.gaze-comment {
  margin: 14px 20px 20px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
}
.gc-hd { font: 700 13px Inter, sans-serif; color: var(--text-primary); margin-bottom: 10px; }
.gc-sec { margin-bottom: 10px; }
.gc-sec h4 {
  margin: 0 0 5px; font: 700 11px Inter, sans-serif; color: var(--text-dim);
  letter-spacing: .04em;
}
.gc-list { margin: 0; padding-left: 16px; }
.gc-list li { font: 13px/1.75 Inter, sans-serif; color: var(--text-primary); }
.gc-list li b { font-weight: 700; color: var(--accent); }
.gc-q { margin-bottom: 8px; }
.gc-q:last-child { margin-bottom: 0; }
.gc-q-hd {
  display: flex; align-items: center; gap: 8px;
  font: 700 12px Inter, sans-serif; color: var(--text-primary); margin-bottom: 3px;
}
.gc-chip { padding: 1px 8px; border-radius: 20px; font: 700 10px Inter, sans-serif; }
.gc-chip.is-o { background: rgba(15,157,88,.12);  color: #0f9d58; }
.gc-chip.is-x { background: rgba(220,38,38,.12);  color: #dc2626; }
.gc-chip.is-n { background: rgba(107,114,128,.12); color: var(--text-dim); }
.gc-foot {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
  font: 11px/1.7 Inter, sans-serif; color: var(--text-dim);
}
.cr-cmp-follow {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
  font: 12px/1.7 Inter, sans-serif; color: var(--text-dim);
}
.cr-cmp-follow b { color: var(--text-primary); }

/* 1단계 문단별 마디 기록 — 무엇을 물었고 무엇을 골랐나를 한 줄씩. 정오답 색을 쓰지
   않는다: 문단마다 채점 대상 마디가 여럿이라 한 문단을 O/X 하나로 접을 수 없고,
   이 화면이 말하려는 것은 점수가 아니라 어디서 막혔나이기 때문이다. */
.cr-beats { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 2px; }
.cr-beat  { display: flex; gap: 8px; font: 12px/1.6 Inter, sans-serif; }
.cr-beat-k { flex: 0 0 96px; color: var(--text-dim); }
.cr-beat-v { color: var(--text-primary); }

/* 보류한 자리 — 학생이 이의를 낸 AI 의 말. 옳고 그름을 색으로 말하지 않는다.
   채점이 끝난 지금 판단하라는 뜻이지, 누가 맞았다는 뜻이 아니다. */
.cr-q-sub.cr-held { border-left: 2px dashed var(--border-mid); padding-left: 10px; margin-top: 8px; }
.cr-q-sub.cr-held .cr-q-sub-body { font-style: italic; color: var(--text-dim); }

/* ═══ 오늘의학습 팝업 (js/todaystudy.js) — 학습 3단계 전환 전담 화면 ═══
   네 시점이 모두 같은 골격을 쓴다: 제목 / 설명 / 행동 / 진행 띠.
   내용이 짧아도 크기가 같도록 본문에 최소 높이를 주고 행동 영역이 남는 공간을 채운다 —
   팝업이 뜰 때마다 크기가 널뛰면 "다른 창"처럼 보인다. */
.ts-box {
  max-width: 460px; width: 92vw; min-height: 330px;
  display: flex; flex-direction: column;
  padding: 26px 26px 20px;
}
.ts-title {
  font: 700 18px/1.4 Inter, sans-serif; color: var(--text-primary);
  text-align: center; margin-bottom: 10px;
}
/* 설명은 박스 없이 문장으로만 — 줄바꿈은 본문 문자열의 개행을 그대로 살린다. */
.ts-lead {
  font: 13px/1.8 Inter, sans-serif; color: var(--text-dim);
  text-align: center; white-space: pre-line; margin: 0;
}

/* 행동 영역이 남는 높이를 채워, 버튼이 항상 같은 자리(가운데)에 온다. */
.ts-actions {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
}
.ts-btn {
  padding: 11px 22px; border-radius: 22px; cursor: pointer;
  font: 700 14px Inter, sans-serif;
  border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-primary);
}
.ts-btn-primary { border: none; background: linear-gradient(135deg,#6012f3,#7c3aed); color: #fff; }
.ts-btn-lg { min-width: 260px; padding: 13px 26px; font-size: 15px; }
/* 건너뛰기 — 버튼이 아니라 작은 글씨로 둔다. 같은 크기 박스로 두면 무엇을 눌러야
   하는지가 흐려진다. */
.ts-link {
  border: none; background: none; cursor: pointer;
  font: 12px Inter, sans-serif; color: var(--text-dim);
  text-decoration: underline; text-underline-offset: 3px; padding: 4px;
}
.ts-link:hover { color: var(--text-primary); }

/* 진행 띠 — 테두리 없이 색·굵기·기호로만 상태를 구분한다(알약 박스를 셋 더 만들지 않기 위해). */
.ts-steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft);
}
.ts-arrow { color: var(--text-faint); font-size: 12px; }
.ts-step {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 12px Inter, sans-serif; color: var(--text-faint);
}
.ts-step-icon { font-size: 13px; }
.ts-step.is-current { color: var(--accent); font-weight: 700; animation: ts-pulse 1.8s ease infinite; }
@keyframes ts-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.ts-step.is-done    { color: #16a34a; }
.ts-step.is-skipped { color: var(--text-dim); }
.ts-step-badge { font-size: 11px; font-weight: 700; }
/* 안내 목록(읽기용)과 선택지(누르는 것)를 눈으로 갈라주는 라벨 */

/* 보조 버튼(정답풀이 보기) — 주 버튼보다 한 단계 낮은 무게. 건너뛰기 같은 작은 글씨와도 구분된다. */
.ts-btn-secondary {
  min-width: 260px; padding: 10px 22px;
  border: 1.5px solid var(--border-mid); background: var(--bg-elevated);
  color: var(--text-primary); font-size: 13px;
}
.ts-btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* 주 버튼 아래 곁들이는 것들 — 가로 한 줄의 작은 글씨. 세로로 쌓으면 "순서대로 밟아야
   하는 목록"으로 읽혀서, 어디를 눌러야 하는지가 흐려진다. */
.ts-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ts-links-sep { color: var(--text-faint); font-size: 11px; }
/* AI따라읽기 완주 후 "종료 →" — 작은 컨트롤 버튼이라 그냥 두면 완주 신호가 약하다. */
.nav-btn.emme-finish-ready {
  animation: emme-finish-pulse 1.6s ease infinite;
  border-color: var(--accent);
}
@keyframes emme-finish-pulse {
  0%,100% { box-shadow: 0 0 6px rgba(96, 18, 243,.4); }
  50%     { box-shadow: 0 0 18px rgba(96, 18, 243,.85); }
}

/* ═══ 하단 바 — 화면 표시 조절 한 묶음 ═══ */
/* 왼쪽 "오늘의 학습" 3단계가 빠지고 표시 조절만 남았다. space-between이면 홀로 남은
   묶음이 왼쪽 끝에 붙어버리므로 가운데로 모은다. */
.toolbar-btns { width: 100%; justify-content: center; }
.tb-view { display: flex; align-items: center; gap: 8px; }

/* 타이머 — "⏱ 타이머" 버튼 대신 시계 옆 스위치. 버튼 라벨보다 스위치가
   "지금 켜져 있다"를 한눈에 보여준다. 꺼도 스위치는 남아 다시 켤 수 있다. */
.tb-timer {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid var(--border-soft); background: var(--bg-elevated);
}
.tb-switch {
  position: relative; width: 34px; height: 18px; flex-shrink: 0;
  padding: 0; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border-mid); background: var(--bg-primary);
  transition: background .18s ease, border-color .18s ease;
}
.tb-switch-knob {
  position: absolute; top: 1px; left: 1px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--text-faint);
  transition: transform .18s ease, background .18s ease;
}
.tb-switch.is-on { background: var(--accent-soft); border-color: var(--accent); }
.tb-switch.is-on .tb-switch-knob { transform: translateX(16px); background: var(--accent); }


/* ═══════════════════════════════════════════════════════════════════════════
   § 지문 구조 태깅 — 실행 옵션 + 태깅 미리보기(검수 화면)

   미리보기의 표시 체계는 기반 문서(「국어비문학 수능읽기」)의 지문 표시법을 그대로
   옮긴 것이다: 개념 ○ / 키워드 밑줄 / 역주행 △ / 정주행 >. 태깅이 제대로 됐다면 이
   화면은 "제대로 표시하며 읽은 지문"과 똑같이 생겨야 하고, 그렇지 않다면 태깅이
   틀린 것이다 — 그래서 검수자가 지문 한 장만 보고 판단할 수 있게 만든다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 사전분석 모달 실행 옵션 ── */
.prea-opts {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 0 14px; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  background: var(--bg-primary);
}
.prea-opts label {
  display: flex; align-items: center; gap: 8px;
  font: 600 12px/1.4 Inter,sans-serif; color: var(--text-primary); cursor: pointer;
}
.prea-opts label span { font-weight: 400; color: var(--text-faint); }
.prea-opts input { accent-color: var(--accent); cursor: pointer; }

/* ── 지문 고르기(사전분석) ── */
.prea-pick {
  margin: 0 0 14px; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  background: var(--bg-primary);
}
.prea-pick-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 7px;
  font: 600 12px/1.4 Inter,sans-serif; color: var(--text-primary);
}
.prea-pick-all {
  padding: 2px 9px; margin-left: 4px; border-radius: 20px;
  border: 1px solid var(--border-mid); background: var(--bg-secondary);
  color: var(--text-dim); cursor: pointer; font: 600 11px Inter,sans-serif;
}
.prea-pick-list {
  max-height: 150px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  font: 12px/1.4 Inter,sans-serif; color: var(--text-faint);
}
.prea-pick-list label {
  display: flex; align-items: center; gap: 7px;
  font: 400 11.5px/1.4 Inter,sans-serif; color: var(--text-dim); cursor: pointer;
}
.prea-pick-list input { accent-color: var(--accent); cursor: pointer; }

/* ── 진입 화면 지문 고르기 ──
   두 줄로 묶는다: 1단계 / 2·3단계. 한 줄에 다 늘어놓으면 어느 셀렉트가 어느 단계 것인지
   읽히지 않는다. 카드(테두리+옅은 배경)로 감싸 소개 문구·시작 버튼과 시각적으로 가른다.
   시작 화면은 밝은 배경이므로 .ss-badge 와 같은 계열의 어두운 글씨를 쓴다. */
.ss-pick {
  width: 100%; max-width: 640px; margin: 6px auto 22px;
  padding: 12px 16px 14px;
  border: 1px solid var(--border-mid); border-radius: 14px;
  background: var(--bg-secondary);
  display: flex; flex-direction: column; gap: 8px;
}
.ss-pick-hdr {
  font: 700 11px Inter,sans-serif; letter-spacing: .4px;
  color: rgba(22,23,28,.38);
}
.ss-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ss-pick-tag {
  flex: 0 0 122px; align-self: center;
  font: 600 11.5px Inter,sans-serif; color: rgba(22,23,28,.5);
  line-height: 1.35;
}
.ss-pick-tag b {          /* 단계 번호는 윗줄에 따로 세운다 */
  display: block;
  font-weight: 700; color: rgba(22,23,28,.75);
}
.ss-pick select {
  flex: 1 1 200px; min-width: 0;
  padding: 7px 12px; border-radius: 10px;
  border: 1px solid var(--border-mid); background: #fff;
  color: rgba(22,23,28,.85); font: 600 12px Inter,sans-serif; cursor: pointer;
}
.ss-pick select#pickYear { flex: 0 0 104px; }
.ss-pick select:hover { border-color: var(--accent); }
#btnPassagePreview {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 10px;
  border: 1px solid var(--border-mid); background: #fff;
  color: rgba(22,23,28,.8); font: 600 12px Inter,sans-serif; cursor: pointer;
  transition: border-color .2s;
}
#btnPassagePreview:hover { border-color: var(--accent); }

/* ── 지문 점검 모드 ── 세션이 아니므로 HUD·툴바·사이드바는 감춘다. */
body.prev-mode #hud,
body.prev-mode #readingToolbar,
body.prev-mode #questionNav,
body.prev-mode #appSidebar { display: none !important; }
/* 점검 모드에서는 문항을 전부 펼친다. 평소에는 .q-current 하나만 보이도록 되어 있어
   (위 .question-block 규칙) 그대로 두면 문항이 하나도 안 보인다 — 문항이 제대로
   그려지는지 확인하는 것이 이 모드의 목적이므로 전부 세로로 쌓아 보여 준다. */
body.prev-mode .question-block { display: block; }
/* 점검 바가 화면 아래에 고정으로 뜨므로 그만큼 자리를 비워 준다 — 안 그러면 지문과
   문항의 마지막 줄이 바에 가려 "제대로 나오는지" 확인할 수가 없다. */
body.prev-mode #passagePanel,
body.prev-mode #questionViewport { padding-bottom: 72px; }
/* 이 프로젝트에는 범용 .hidden 규칙이 없다 — 감출 요소마다 id 를 붙여 따로 정의한다
   (804행 주석 참조). 이 줄이 없으면 class="hidden" 이 아무 일도 하지 않아 점검 바가
   누르지도 않았는데 화면 아래에 계속 떠 있는다. */
#passagePreviewBar.hidden { display: none; }
#passagePreviewBar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 9000;
  display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 24px;
  background: rgba(22,23,28,.92); color: #fff; box-shadow: 0 8px 26px rgba(0,0,0,.32);
  font: 600 12px Inter,sans-serif;
}
#passagePreviewBar button {
  padding: 5px 13px; border-radius: 16px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10); color: #fff; font: 600 12px Inter,sans-serif; cursor: pointer;
}
#passagePreviewBar button:hover { background: rgba(255,255,255,.2); }
#passagePreviewBar .prev-close { background: rgba(255,255,255,.9); color: #16171c; border-color: transparent; }
#prevBarLabel { max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#prevBarCount { color: rgba(255,255,255,.6); }

/* ── 미리보기 본문 ── */
.tagpv-root { overflow-y: auto; flex: 1; padding-right: 4px; }
.tagpv-nav {
  padding: 3px 10px; font: 600 11px Inter,sans-serif; border-radius: 20px;
  border: 1.5px solid var(--border-mid); background: var(--bg-secondary);
  color: var(--text-dim); cursor: pointer;
}
.tagpv-nav:hover { background: var(--border-soft); }

.tagpv-head { margin-bottom: 10px; }
.tagpv-struct {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font: 700 15px/1.4 Inter,sans-serif; color: var(--text-primary);
}
.tagpv-chip {
  font: 600 10px/1 Inter,sans-serif; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 20px;
  background: var(--accent-soft); color: var(--accent);
}
.tagpv-why   { margin-top: 5px; font: 400 12px/1.6 Inter,sans-serif; color: var(--text-dim); }
.tagpv-topic { margin-top: 4px; font: 600 12px/1.6 Inter,sans-serif; color: var(--accent); }

.tagpv-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 14px; padding: 9px 12px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  background: var(--bg-primary);
  font: 400 11px/1.9 Inter,sans-serif; color: var(--text-dim);
}
.tagpv-legend span { display: inline-flex; align-items: center; gap: 4px; }

.tagpv-body  { font: 400 15px/2.15 'Noto Serif KR', serif; color: var(--text-primary); }
.tagpv-para  { margin: 0 0 16px; position: relative; padding-left: 26px; }
.tagpv-paralabel {
  position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 10px/1 Inter,sans-serif;
  background: var(--bg-secondary); color: var(--text-faint);
}
.tagpv-sent { transition: background .12s ease; }
.tagpv-sent:hover { background: rgba(96, 18, 243,.05); }

/* 문장 단위 표시 */
.tagpv-thesis { font-weight: 700; box-shadow: inset 0 -3px 0 var(--accent-glow); }
.tagpv-slow   { background: rgba(180,83,9,.06);  box-shadow: inset 3px 0 0 var(--warning); }
.tagpv-fast   { opacity: .68; }

/* 구간(span) 단위 표시 — 겹쳐도 깨지지 않도록 배경/밑줄/테두리로 층을 나눈다 */
.tagpv-term {
  border: 1.5px solid var(--accent); border-radius: 999px;
  padding: 0 5px; margin: 0 1px; font-weight: 600;
}
.tagpv-def  { box-shadow: inset 0 -2px 0 rgba(37,99,235,.55); }
.tagpv-key  { background: rgba(250,204,21,.42); border-radius: 3px; }
.tagpv-step { box-shadow: inset 0 -2px 0 rgba(15,157,88,.5); }

/* 배지 — 문장 앞에 붙는 △ / > / P·C·S / ①②③ */
.tagpv-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; margin-right: 3px;
  vertical-align: 2px; border-radius: 5px;
  font: 700 10px/1 Inter,sans-serif; font-style: normal;
  background: var(--bg-secondary); color: var(--text-faint);
  cursor: help;
}
.tagpv-badge-strong { background: #fde68a; color: #92400e; }
.tagpv-badge-p    { background: #fee2e2; color: #b91c1c; }
.tagpv-badge-c    { background: #ffedd5; color: #c2410c; }
.tagpv-badge-s    { background: #dcfce7; color: #15803d; }
.tagpv-badge-r    { background: #ede9fe; color: #6d28d9; }
.tagpv-badge-step { background: #d1fae5; color: #047857; }
.tagpv-badge-cm   { background: #e0e7ff; color: #3e0aa8; }
.tagpv-badge-df   { background: #fce7f3; color: #9d174d; }
.tagpv-badge-era  { background: #e2e8f0; color: #334155; }
.tagpv-badge-cb   { background: #f3f4f6; color: #4b5563; }
.tagpv-badge-rb   { background: #dbeafe; color: #1d4ed8; }

/* 폐기 목록 — 검수자가 "무엇이 왜 떨어졌는지"를 바로 보게 한다 */
.tagpv-dropped {
  margin-top: 18px; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  background: var(--bg-primary);
  font: 400 11px/1.7 Inter,sans-serif; color: var(--text-dim);
}
.tagpv-dropped b { display: block; margin-bottom: 4px; color: var(--warning); }

/* ── 태깅 미리보기 · 문항 목록 ──
   검수자가 "학생이 실제로 무엇을 언제 클릭하게 되는지"를 지문 바로 아래에서 확인한다.
   피드백을 통째로 펼쳐 두는 이유는, 필연성 절이 실제로 들어갔는지가 눈으로 바로
   드러나야 하기 때문이다(§5.3 형식 강제의 육안 검수 지점). */
.tagpv-qs { margin-top: 20px; }
.tagpv-qs-hdr {
  display: block; margin-bottom: 8px;
  font: 700 12px/1 Inter,sans-serif; letter-spacing: .04em; color: var(--accent);
}
.tagpv-q {
  margin-bottom: 10px; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  background: var(--bg-primary);
}
.tagpv-q-hdr {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font: 600 13px/1.5 Inter,sans-serif; color: var(--text-primary);
}
.tagpv-q-meta { margin-top: 3px; font: 400 11px/1.6 Inter,sans-serif; color: var(--text-faint); }
.tagpv-q-choices { display: flex; flex-direction: column; gap: 1px; margin-top: 5px; }
.tagpv-q-choices span { font: 400 12px/1.6 Inter,sans-serif; color: var(--text-dim); }
.tagpv-q-ans { color: var(--success) !important; font-weight: 600; }
.tagpv-q-fb {
  margin-top: 4px; padding-left: 8px;
  border-left: 2px solid var(--border-mid);
  font: 400 12px/1.65 Inter,sans-serif; color: var(--text-dim);
}
.tagpv-q-fb b { margin-right: 5px; font-weight: 700; color: var(--text-faint); }
.tagpv-q-fb.ok   { border-left-color: var(--success); }
.tagpv-q-fb.near { border-left-color: var(--warning); }
.tagpv-q-fb.no   { border-left-color: var(--danger); }

/* ═══ AI 튜터링 런타임 ═══
   구간 클릭(pickSpan)은 글자 span(.emme-char)에 클래스를 얹기만 한다 — DOM을 다시 쓰지
   않으므로 charify 결과·AOI·리플레이가 전혀 영향받지 않는다. */
.emme-span-candidate {
  background: rgba(250, 204, 21, .28);
  box-shadow: inset 0 -2px 0 rgba(180, 83, 9, .45);
  cursor: pointer;
}
.emme-span-candidate:hover { background: rgba(250, 204, 21, .5); }
.emme-span-key {
  background: rgba(15, 157, 88, .18);
  box-shadow: inset 0 -2px 0 var(--success);
}

/* 4지선다 — 말풍선 안에 버튼 목록으로. #questionsPanel은 건드리지 않는다(2단계 스케줄이
   그 DOM을 전제로 동작한다). */
.emme-mc-list { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.emme-mc-btn {
  text-align: left; white-space: normal; line-height: 1.5;
  padding: 7px 11px; border-radius: 9px;
}
.emme-balloon-hint {
  margin-top: 6px; padding: 6px 9px; border-radius: 8px;
  background: rgba(180, 83, 9, .08); color: var(--warning);
  font: 400 12px/1.55 Inter, sans-serif;
}

/* ═══ 근거 되짚기 — 2026-08-24 정답풀이에서 떼어냈다(지금은 쓰이지 않는다) ═══
   해설을 보기 전에 근거를 스스로 찾아보게 한다. 해설을 흐려 막지는 않는다 — 흐린 글을
   읽으려 애쓰게 만들 뿐이고, 순서(되짚기가 위, 해설이 아래)로 이미 뜻이 전해진다. */
.eq-card {
  padding: 14px 16px; margin-bottom: 6px;
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--bg-primary);
}
.eq-progress { font: 700 11px/1 Inter, sans-serif; color: var(--text-faint); letter-spacing: .05em; }
.eq-target {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 7px;
  font: 400 13px/1.6 Inter, sans-serif; color: var(--text-dim);
}
.eq-qnum { font-weight: 700; color: var(--text-primary); }
.eq-cnum { font-weight: 700; color: var(--accent); }
.eq-ctext { flex: 1 1 240px; }
.eq-badge-wrong {
  padding: 2px 7px; border-radius: 20px; background: #fee2e2; color: #b91c1c;
  font: 700 10px/1.5 Inter, sans-serif;
}
.eq-stem { margin: 12px 0 9px; font: 600 15px/1.5 Inter, sans-serif; color: var(--text-primary); }
.eq-opts { display: flex; flex-direction: column; gap: 6px; }
.eq-opts-row { flex-direction: row; flex-wrap: wrap; }
.eq-opt {
  text-align: left; padding: 9px 13px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--border-mid); background: var(--bg-elevated);
  color: var(--text-primary); font: 400 13px/1.55 Inter, sans-serif;
  transition: border-color .15s ease, background .15s ease;
}
.eq-opt:hover { border-color: var(--accent); background: var(--accent-soft); }
.eq-opt-sent { font-family: 'Noto Serif KR', serif; }

.eq-feedback { padding: 12px 14px; border-radius: 10px; border-left: 3px solid var(--border-mid); }
.eq-feedback.is-correct { background: rgba(15,157,88,.07);  border-left-color: var(--success); }
.eq-feedback.is-wrong   { background: rgba(180,83,9,.07);   border-left-color: var(--warning); }
.eq-fb-head   { font: 700 14px/1.4 Inter, sans-serif; color: var(--text-primary); }
.eq-fb-answer { margin-top: 6px; font: 400 13px/1.65 'Noto Serif KR', serif; color: var(--text-primary); }
.eq-fb-reason { margin-top: 7px; font: 400 12px/1.7 Inter, sans-serif; color: var(--text-dim); }
.eq-next-row  { display: flex; justify-content: flex-end; margin-top: 11px; }
.eq-next {
  padding: 7px 18px; border-radius: 20px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #6012f3, #7c3aed); color: #fff;
  font: 600 12px Inter, sans-serif;
}
.eq-skip {
  display: block; margin: 0 0 6px auto; padding: 4px 12px;
  border: none; background: none; cursor: pointer;
  color: var(--text-faint); font: 400 11px Inter, sans-serif; text-decoration: underline;
}
.eq-summary { font: 400 13px/1.6 Inter, sans-serif; color: var(--text-dim); }
.eq-summary b { color: var(--accent); }

/* 검증용 반복 실행 버튼 — 개발자 모드에서만 붙는다(emme-rerun.js). 학습용 버튼과 확실히
   구분되어야 실수로 누르지 않는다. */
.emme-rerun-btn {
  border-style: dashed !important;
  color: var(--text-dim) !important;
}
.emme-rerun-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* (가)/(나) 복합 지문의 구획 라벨 — 문단이 아니라 문단들의 머리표다.
   .passage-para 가 아니므로 AOI·문단 번호에 섞이지 않는다. */
.passage-section {
  margin: 14px 0 4px;
  font: 700 15px/1.4 'Noto Serif KR', serif;
  color: var(--text-primary);
}
.passage-section:first-of-type { margin-top: 4px; }
/* 리포트 What Worked 의 할 일 단추(2026-10-02) — 그 줄 끝에 작게 */
.rp-txt .rp-act { margin-left: 6px; padding: 3px 10px; font-size: 13px; vertical-align: baseline; }
.rp-txt.is-wk p + p { margin-top: 6px; }
/* 지금 문항이 가리키는 문단(ielts.js _ieMarkSection, 2026-10-02) — 표시 글자에 칩, 문단 옆에 얇은 띠. 지문은 움직이지 않는다 */
.passage-section.is-asked { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--accent); color: #fff; transition: background .2s; }
.passage-para.is-asked { box-shadow: -10px 0 0 -7px var(--accent); }
.ie-sec-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px; border: 0; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); font: 700 14px Inter, sans-serif; cursor: pointer; }
.ie-head .ie-sec-chip { margin-left: 8px; min-height: 26px; font-size: 13px; }
.ie-sec-chip.is-label { cursor: default; }

/* ── 원문의 [A] 범위 (js/variant.js markedRange) ──
   문항이 "[A]에 대한 이해"를 묻는데 화면에 [A]가 없으면 학생은 어디를 말하는지 알 수
   없다. DOM 에 표식(.marked-range)만 달려 있고 CSS 가 없어 어느 지문에서도 안 보이는
   상태였다(2026-09-04 발견). 시험지처럼 문단 왼쪽에 세로 괄호를 세우고 이름을 붙인다.
   범위가 두 문단에 걸치면 가운데 문단은 세로획만 이어 받아 한 줄로 보이게 한다. */
.passage-para.marked-range {
  position: relative;
  padding-left: 48px;
}
.passage-para.marked-range::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 0;
  bottom: 0;
  width: 8px;
  border-left: 2px solid var(--text-primary);
  border-top: 0;
  border-bottom: 0;
}
.passage-para.marked-range-start::before {
  top: 14px;
  border-top: 2px solid var(--text-primary);
}
.passage-para.marked-range-end::before {
  bottom: 14px;
  border-bottom: 2px solid var(--text-primary);
}
/* 범위가 이어지는 문단은 세로획을 문단 사이 여백(.passage-para margin-bottom)까지 늘인다.
   안 늘이면 문단마다 획이 끊겨 한 범위가 둘로 읽힌다. */
.passage-para.marked-range:not(.marked-range-end)::before {
  /* 문단 사이 여백(.passage-para margin-bottom 90px)만큼 — 40px 이던 시절의 값이 남아 괄호가 끊겼다 */
  bottom: -90px;
}
.passage-para.marked-range-start::after {
  content: attr(data-mark-label);
  position: absolute;
  left: 0;
  top: 14px;
  font: 700 12.5px/1.2 'Noto Serif KR', serif;
  color: var(--text-primary);
}

/* ═══ AI코칭 (js/aicoach.js) ═══
   기출문제풀이와 같은 패널(#passagePanel / #questionsPanel)을 그대로 빌려 쓴다.
   그래서 레이아웃 규칙은 여기서 정하지 않고, 문단 가리기와 질문 UI만 맡는다. */

/* 아직 안 열린 문단 — display:none 이 아니다. 자리를 차지한 채 글자만 감춰야
   문단이 열릴 때마다 레이아웃이 흔들리지 않고, 그래야 AOI 좌표와 시선 판정이 어긋나지 않는다. */
.passage-para.aic-unread { visibility: hidden; }

/* ── 읽기 시작점 표시는 없다 — 2026-09-09 넣었다가 같은 날 걷었다 ──
   지금 읽을 문단의 첫 줄 왼쪽에 점 하나를 두었는데, 원문의 [A] 범위가 있는 문단에서
   **글자를 알아볼 수 없게** 덮었다. 위치를 잘못 잡아서가 아니라 **같은 자리를 쓴 것**이다:
   [A] 의 세로 괄호가 `.passage-para.marked-range::before` 이고 점도 ::before 였다. 한
   요소에 ::before 는 하나뿐이라, 뒤에 선 규칙이 앞의 괄호를 통째로 대신했다.

   다시 넣는다면 ::before 를 쓰면 안 된다 — 그리고 [A] 문단은 padding-left 가 48px 로
   달라서 자리도 따로 잡아야 한다. 그 값어치를 다시 따져 보고 넣을 일이다. */

/* '덮고 한 문장' 동안만 지문 전체를 가린다. aic-unread 와 같은 방식으로 자리를 남기고
   글자만 감춘다 — 레이아웃이 흔들리면 AOI 좌표가 어긋나기 때문이다. 답하면 곧바로 걷는다. */
.passage-para.aic-covered { visibility: hidden; }

/* 이미 읽은 문단 — 그대로 둔다. 한떄 흐리게 가렸는데, 뒤 문단의 질문은 앞 문단을
   전제로 묻는 일이 많아(문단 관계·예측 확인) 앞을 못 보게 하면 풀 수 없는 문항이 생긴다.
   지금까지 읽은 범위는 전부 보이고, 아직 안 열린 문단만 가린다. */

#aicHeader .aic-select {
  margin-left: auto;
  padding: 3px 8px;
  font-size: 12px;
  border: 1px solid var(--border-mid);
  border-radius: 7px;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* 질문 자리 — #questionsPanel 안에서 남은 높이를 채우고 스스로 스크롤된다. */
#aicPanel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 28px 28px;
}
#aicPanel.hidden { display: none; }

.aic-wait { font-size: 14.5px; line-height: 1.7; color: var(--text-dim); }
.aic-stem { font-weight: 700; font-size: 15.5px; line-height: 1.65; color: var(--text-primary); margin-bottom: 14px; }
.aic-choices { display: flex; flex-direction: column; gap: 8px; }
.aic-choice {
  text-align: left; padding: 11px 14px; font-size: 14px; line-height: 1.55;
  border: 1px solid var(--border-mid); border-radius: 10px;
  background: var(--bg-secondary); color: var(--text-primary); cursor: pointer;
}
.aic-choice:hover:not(:disabled) { border-color: var(--accent); }
.aic-choice:disabled { cursor: default; opacity: .6; }
/* 쓰는 카드 — 고르는 카드와 같은 테두리를 쓰되 입력이라는 것이 보이게 배경만 다르다. */
.aic-write {
  width: 100%; box-sizing: border-box; margin: 10px 0 12px;
  padding: 11px 14px; font-size: 14px; line-height: 1.6;
  font-family: inherit; resize: vertical; min-height: 76px;
  border: 1px solid var(--border-mid); border-radius: 10px;
  background: var(--bg-primary); color: var(--text-primary);
}
.aic-write:focus { outline: none; border-color: var(--accent); }
.aic-choice.aic-write-done { font-weight: 700; }
.aic-choice.aic-correct { background: rgba(46,160,90,.16); border-color: rgba(46,160,90,.75); opacity: 1; }
.aic-choice.aic-wrong   { background: rgba(214,80,80,.14); border-color: rgba(214,80,80,.7);  opacity: 1; }

.aic-feedback { margin-top: 14px; padding: 13px 15px; border-radius: 10px; font-size: 14px; line-height: 1.7; }
.aic-fb-ok { background: rgba(46,160,90,.12); color: var(--text-primary); }
.aic-fb-no { background: rgba(214,80,80,.10); color: var(--text-primary); }

/* ── 다섯 마디 ──
   맞았다·틀렸다를 색으로도 말하지 않는다. 판정은 학생이 넷째 마디에서 스스로 하고,
   그때까지 화면에는 다음 말만 나온다. 그래서 이 말풍선은 초록도 빨강도 아니다. */
.aic-fb-say { background: var(--bg-secondary); color: var(--text-primary); }

/* 선지 두 줄 — 위는 국어 개념어, 아래는 그 풀이.
   개념어만 내면 무슨 뜻인지 모르고, 풀이만 내면 기출 해설서에서 만날 말을 못 배운다. */
.aic-choice-term { display: block; font-weight: 700; font-size: 14.5px; }
.aic-choice-def  { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }
.aic-choice.aic-chosen .aic-choice-term { color: var(--accent); }

/* 둘까지 고르는 카드 — 고른 칸은 테두리로 남는다. 하나만 고르는 카드는 누르는 즉시
   넘어가므로 표시가 필요 없지만, 여기서는 확인 버튼을 누를 때까지 화면에 머문다. */
.aic-choice.aic-chosen { border-color: var(--accent); background: var(--bg-secondary); }
.aic-next[disabled] { opacity: .45; cursor: default; }

/* 문단 해설 — 판정 한 줄에 원리와 근거가 붙어 길어진다. 읽을 수 있게 폭과 줄간을 준다. */
.aic-feedback.aic-fb-say { line-height: 1.85; max-width: 60ch; }

/* 문단별로 다시 보기 — 지문을 마친 뒤에만 뜬다. 읽는 중이 아니므로 길어도 된다.
   여기서만 ○/✗ 를 쓴다: 읽는 동안에는 판정을 보이지 않지만, 끝나고 무엇이 맞고
   무엇이 달랐는지는 정확히 알려 줘야 한다. */
.aic-review { margin-top: 18px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.aic-review-hdr {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-dim); margin-bottom: 10px;
}
.aic-review-row {
  padding: 11px 13px; margin-bottom: 8px;
  background: var(--bg-secondary); border-radius: 10px;
}
/* 문단이 막 끝났을 때의 화면은 .aic-ledger 가 따로 그린다(아래) — 예전에는 이 칸을
   그대로 넓게만 써서(.aic-review-fresh) 한 문단에서 갈리는 셋을 한 줄에 담았는데,
   판정 표시 하나가 셋을 대표하는 모양이라 라벨은 맞고 예측은 빗나간 자리에서
   화면이 거짓말을 했다. */
/* 머리 한 줄이 판정과 실제 라벨을 함께 진다 — 예전에는 배지 · '실제' 줄 · 해설 첫
   문장이 같은 사실을 세 번 말했다. 표시(○/✗)는 번호와 라벨 사이에 끼워 눈이 왼쪽에서
   오른쪽으로 한 번만 지나가게 한다. */
.aic-review-head { font-size: 13.5px; margin-bottom: 5px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.aic-review-head b { flex: 0 0 auto; }
.aic-rv-truth { font-weight: 600; color: var(--text-primary); }
.aic-review-line { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.65; margin-top: 3px; }
.aic-rv-k { flex: 0 0 78px; color: var(--text-dim); white-space: nowrap; }
/* 한글은 낱말 사이에서 끊는다 — 기본값이면 '세지 않았어/요'처럼 낱말 가운데가 갈린다. */
.aic-rv-v { flex: 1; color: var(--text-primary); word-break: keep-all; overflow-wrap: anywhere; }
/* 해설 — 판정 문장을 뺀 원리와 근거만. 열쇠말 없이 한 덩어리로 흘린다: 남은 줄이
   이것 하나라 '왜' 라는 이름표가 오히려 줄을 하나 더 만든다. */
.aic-rv-why { font-size: 12.5px; line-height: 1.7; color: var(--text-dim); margin-top: 4px; }
.aic-rv-ok  { color: rgba(46,160,90,.95); font-size: 12px; font-weight: 700; }
.aic-rv-no  { color: rgba(214,80,80,.95); font-size: 12px; font-weight: 700; }
.aic-rv-dim { color: var(--text-dim); font-size: 12px; }

/* 문단 결산 — 문단 하나를 마친 자리. 그 문단에서 물은 것마다 한 칸이다.
   껍데기(.aic-review)는 끝의 목록과 같이 쓰고 안쪽만 다르다: 여기는 읽는 중이 아니라
   방금 그 문단 하나를 갈라 보이는 자리라, 칸이 셋까지 서고 줄이 길어도 된다.
   위쪽 경계선은 두지 않는다 — 카드 안에 단독으로 뜨는 덩어리라 나눌 상대가 없다. */
.aic-ledger { margin-top: 0; border-top: 0; padding-top: 0; }
.aic-ledger-item {
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--bg-secondary); border-radius: 10px;
}
.aic-ledger-item:last-child { margin-bottom: 0; }
/* 물음 한 줄 — 판정 표시가 물음 앞에 선다. 칸이 셋이라, 판정부터 보여야 어느 칸을
   자세히 볼지 학생이 먼저 고를 수 있다. */
.aic-ledger-q {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 6px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
}
/* 통계 — '열 번 중 몇 번'. 해설(.aic-rv-why)보다 한 단계 더 물러나 있어야 한다:
   읽어야 할 것은 판정과 해설이고, 이 줄은 그 둘을 재는 자다. */
.aic-ledger-stat {
  font-size: 12px; line-height: 1.7; color: var(--text-dim);
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-soft);
  word-break: keep-all; overflow-wrap: anywhere;
}
/* 아직 판가름 나지 않은 칸의 한 줄. 판정 표시가 설 자리에 대신 서는 말이라,
   흐리게 두되 기울이지 않는다 — 한글 이탤릭은 화면에서 읽기가 나빠진다. */
.aic-ledger-pending {
  font-size: 12.5px; line-height: 1.7; color: var(--text-dim); margin-top: 4px;
}

/* 덩어리 이름 밑의 한 줄. 시간 배분(.aic-time-sub)과 같은 자리·같은 크기다 —
   이름 붙은 덩어리 셋이 나란해야 어느 것이 어느 것에 딸린 것인지 헷갈리지 않는다. */
.aic-review-sub { font-size: 12.5px; line-height: 1.65; color: var(--text-dim); margin-bottom: 10px; }

/* 이 글이 어떻게 짜였나 — 마무리 화면의 첫 덩어리. 껍데기(.aic-review)는 시간 배분·
   문단 목록과 같이 쓰고, 안쪽만 다르다.
   여기에는 ○/✗ 가 없다. 이 덩어리는 이 글을 설명하지 학생을 채점하지 않는다 —
   같은 칸에 점수를 얹으면 눈이 짜임이 아니라 제 점수를 먼저 좇는다. */
.aic-out-way  { font-size: 13.5px; line-height: 1.6; color: var(--text-primary); margin-bottom: 10px; }
/* 사슬 — 문단 하나가 한 칸이고 칸마다 그 문단의 말 한 줄이 붙는다. 가로였는데
   세로로 내렸다: 인용을 얹으면 가로로는 여덟 문단이 서지 않고, 무엇보다 인용이 라벨
   밑에 와야 "이 라벨이 저 문장을 가리킨다"로 읽힌다.
   왼쪽 세로줄이 화살표를 대신한다 — 칸마다 →를 그리면 그것만 여덟 개가 된다. */
.aic-out-seq  { display: flex; flex-direction: column; border-left: 2px solid var(--border-soft); }
.aic-out-step { position: relative; padding: 0 0 12px 14px; }
.aic-out-step:last-child { padding-bottom: 0; }
/* 세로줄 위의 매듭. 문단 번호가 그 자리에 앉는다. */
.aic-out-step::before {
  content: ''; position: absolute; left: -5px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-mid);
}
.aic-out-step.is-deep::before { background: rgba(90,110,220,.75); }
.aic-out-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; font-size: 12.5px; }
.aic-out-n { font-style: normal; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.aic-out-t { color: var(--text-primary); font-weight: 600; }
/* 천천히 읽어야 할 자리. 판정이 아니라 지문의 성질이라 짜임 쪽에 남는다 —
   어디서 속도를 늦췄어야 하는지가 그 글의 생김새다. 시간 배분 태그와 같은 색이다. */
.aic-out-tag {
  font-size: 10.5px; padding: 1px 6px; border-radius: 6px;
  background: rgba(90,110,220,.16); color: var(--text-primary);
}
/* 구조어 — 학생이 지문에서 눈으로 확인할 수 있는 유일한 근거다. */
.aic-out-mk { font-size: 11px; color: var(--text-dim); }
/* 지문의 말. 라벨보다 흐리게 둔다 — 라벨이 제목이고 이쪽이 그 근거다. */
.aic-out-q  { margin-top: 3px; font-size: 12px; line-height: 1.65; color: var(--text-dim); }
.aic-out-tail { font-size: 11.5px; line-height: 1.6; color: var(--text-dim); margin-top: 11px; }

/* 시간 배분 — 100자당 초를 막대로. 초를 그대로 재면 긴 문단이 늘 이기므로 길이로 나눈다.
   색으로 좋고 나쁨을 말하지 않는다: 천천히/빠르게는 그 문단의 성격이지 학생의 성적이 아니다. */
.aic-time-sub { font-size: 12.5px; line-height: 1.65; color: var(--text-dim); margin-bottom: 10px; }
.aic-time-bars { display: flex; flex-direction: column; gap: 6px; }
.aic-time-row  { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.aic-time-k    { flex: 0 0 46px; color: var(--text-dim); }
.aic-time-tag  { flex: 0 0 46px; font-size: 11px; text-align: center; border-radius: 6px; padding: 2px 0; }
.aic-time-tag.deep { background: rgba(90,110,220,.16); color: var(--text-primary); }
.aic-time-tag.fast { background: var(--bg-secondary);  color: var(--text-dim); }
.aic-time-bar  { flex: 1; height: 8px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; }
.aic-time-bar i { display: block; height: 100%; border-radius: 4px; }
.aic-time-bar i.deep { background: rgba(90,110,220,.75); }
.aic-time-bar i.fast { background: var(--border-mid); }
.aic-time-v    { flex: 0 0 auto; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* 견주는 데서 뺀 문단 — 지우지 않는다. 건너뛴 문단도 보여야 할 관찰이다. */
.aic-time-row.aic-time-out { opacity: .45; }

/* ── 이 지문을 어떻게 읽으셨나(aicoach.js _aicReadBlock) ──
   막대는 "그 문단을 한 번 읽는 데 드는 최소 시간 대비 실제로 쓴 시간"이다. 가운데 눈금이
   그 최소 시간이라, 문단마다 길이가 달라도 눈금은 한 줄로 선다. 눈금에 못 미친 줄만
   색으로 말한다 — 넘긴 줄에는 아무 말도 얹지 않는다. */
.aic-rd-bars { display: flex; flex-direction: column; gap: 6px; }
.aic-rd-row  { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.aic-rd-k    { flex: 0 0 46px; color: var(--text-dim); }
.aic-rd-bar  {
  position: relative; flex: 1; height: 8px; border-radius: 4px;
  background: var(--bg-secondary); overflow: visible;
}
.aic-rd-bar i {
  display: block; height: 100%; border-radius: 4px;
  /* 중립 회색이다. 초록처럼 "잘함"으로 읽히는 색을 쓰지 않는다 — 오래 읽은 것이 잘한
     것도 아니고 빨리 읽은 것이 잘한 것도 아니다. 이 막대가 말하는 것은 눈금뿐이다. */
  background: rgba(22, 23, 28, .32);
}
/* 눈금은 하나다 — 기출이 요구하는 통독 속도(800자/분). 자리는 aicoach.js 가 정한다. */
.aic-rd-tick {
  position: absolute; top: -3px; width: 2px; height: 14px;
  background: var(--text-dim); border-radius: 1px;
}
.aic-rd-v { flex: 0 0 auto; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.aic-rd-row.is-short .aic-rd-bar i { background: rgba(214,80,80,.75); }
.aic-rd-row.is-short .aic-rd-k     { color: rgba(190,60,60,.95); }

/* 끝마디의 문단 번호 — 세로로 쌓으면 8문단짜리에서 화면을 넘긴다. */
.aic-choices.aic-choices-row { flex-direction: row; flex-wrap: wrap; }
.aic-choices-row .aic-choice { flex: 0 0 auto; padding: 9px 14px; }

/* 룰베이스가 답할 수 없는 반박을 받는 자리. 선택지가 아니라 보류이므로 무게를 낮춘다. */
.aic-choice.aic-held {
  margin-top: 10px; align-self: flex-start;
  background: transparent; border-style: dashed; color: var(--text-dim); font-size: 13px;
}

/* 제한 시간 — 첫마디에는 없다(sec=0). 둘째 마디만 문단 난도에 따라 8초 또는 14초다. */
.aic-timer {
  margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--text-dim);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.aic-timer.aic-timer-low { color: rgba(214,80,80,.95); }

/* 짚을 수 있는 문장 — 밑줄 하나로만 알린다. 강조하면 그 문장이 답처럼 읽힌다. */
.passage-para .sent.aic-pickable {
  cursor: pointer;
  border-bottom: 1px dashed var(--border-mid);
}
.passage-para .sent.aic-pickable:hover { background: rgba(255,255,255,.06); border-bottom-color: var(--accent); }
.aic-answer-line { margin-top: 8px; font-size: 13.5px; color: var(--text-dim); font-weight: 600; }
.aic-done { padding: 14px 16px; background: var(--bg-secondary); border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.aic-next {
  margin-top: 16px; padding: 10px 18px; font-size: 14px; font-weight: 700;
  border: none; border-radius: 10px; background: var(--accent); color: #fff; cursor: pointer;
}
.aic-next:hover { filter: brightness(1.08); }
/* 1단계 AI코칭 요약 — 문단별로 무엇을 했나(추종도 패널이 있던 자리). */
.gg-aic-rows { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.gg-aic-cell { display: flex; flex-direction: column; font-size: 12px; }
.gg-aic-cell small { color: var(--text-dim); font-size: 11px; }
/* 지문 하나를 마쳤을 때 두 번째 선택지 — 주 버튼과 나란히 두되 무게를 낮춘다. */
.aic-next.aic-next-sub {
  margin-left: 10px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-mid);
}

/* ═══ 사이드바 · 설정 하위 메뉴 ═══
   자주 쓰지 않는 넷을 접어 둔다. 안의 버튼은 접혀 있어도 id·onclick 이 그대로라
   stage.js 의 잠금/해제가 평소처럼 동작한다. */
.sb-sub {
  display: flex; flex-direction: column; gap: 4px;
  padding-left: 6px;
  border-left: 2px solid var(--border-mid);
  margin-left: 6px;
}
.sb-sub.hidden { display: none; }
.sb-sub .sb-btn { padding: 7px 2px; }
.sb-sub .sb-icon { font-size: 15px; }
.sb-caret { display: inline-block; font-size: 10px; transition: transform .18s ease; }
#sbSettings.is-open .sb-caret { transform: rotate(180deg); }
#sbSettings.is-open { color: var(--text-primary); }

/* ═══ 시선데이터 리포트 (js/gazereport.js) ═══
   시선그래프가 세부 통계라면 이쪽은 한눈 요약이다. 스크롤이 생기면 "한눈에"가 성립하지
   않으므로, 흐름 지도(SVG)는 viewBox로 폭에 맞추고 히트맵은 배율을 실측 계산해 넣는다. */
.gr-body {
  overflow: auto;
  max-height: 84vh;
  padding: 16px 22px 24px;
  background: var(--bg-primary);
}
.gr-banner { margin-bottom: 12px; }
.gr-banner.is-warn {
  padding: 9px 14px; border-radius: 10px;
  background: rgba(180,83,9,.08); border: 1px solid rgba(180,83,9,.25);
  color: #b45309; font: 400 12px/1.5 Inter, sans-serif;
}

/* ── 요약 카드 ── */
.gr-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.gr-card {
  flex: 1 1 140px; min-width: 140px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
}
.gr-card b     { font: 700 21px Inter, sans-serif; color: var(--accent); }
/* 값 둘을 한 줄에 쓰는 카드(지문 38% · 문제 62%) — 21px로는 좁은 화면에서 줄이 넘친다. */
.gr-card b.is-pair { font-size: 16px; }
.gr-card span  { font: 600 11px Inter, sans-serif; color: var(--text-dim); }
.gr-card small { font: 11px Inter, sans-serif; color: var(--text-faint); }

/* ── 한 줄 코멘트 — 문장은 시선그래프 코멘트 생성기에서 그대로 온다 ── */
.gr-comment {
  list-style: none; margin: 0 0 14px; padding: 10px 14px;
  border-radius: 10px; background: var(--accent-soft);
  border: 1px solid rgba(96, 18, 243,.16);
}
.gr-comment li { font: 13px/1.7 Inter, sans-serif; color: var(--text-primary); }
.gr-comment li + li { margin-top: 2px; }
.gr-comment b { color: var(--accent); }

.gr-sec-title {
  font: 700 13px Inter, sans-serif; color: var(--text-primary);
  margin: 6px 0 8px;
}
.gr-foot { font: 11px/1.6 Inter, sans-serif; color: var(--text-faint); margin: 6px 0 16px; }
.gr-foot-note { margin-top: 6px; }

/* ── 히트맵 — 문항별로 표 오른쪽에 [지문 | 그 문항] 두 칸 ── */
.gr-heat-cell {
  background: var(--bg-elevated); border: 1px solid var(--border-mid);
  border-radius: 10px; padding: 10px; overflow: hidden;
}
.gr-heat-title { font: 700 11px Inter, sans-serif; color: var(--accent); margin-bottom: 8px; }
.gr-heat-empty { font: 12px Inter, sans-serif; color: var(--text-dim); padding: 10px 2px 2px; }

.gr-more { margin-top: 18px; text-align: center; }
.gr-more-btn {
  padding: 9px 20px; border-radius: 20px; cursor: pointer;
  border: 1.5px solid rgba(96, 18, 243,.35); background: var(--accent-soft);
  color: var(--accent); font: 600 12px Inter, sans-serif;
}
.gr-more-btn:hover { background: rgba(96, 18, 243,.16); }

/* ── 세부영역 3단(§7) ── */
.gr-detail {
  display: block; width: 100%; height: auto; margin: 0 auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft); border-radius: 12px;
}
.gr-detail .grd-ax    { font: 10px Inter, sans-serif; fill: var(--text-faint); }
.gr-detail .grd-row   { font: 600 11px Inter, sans-serif; fill: var(--text-dim); text-anchor: end; }
.gr-detail .grd-ph-t  { font: 700 11px Inter, sans-serif; text-anchor: middle; }
/* 화살표 선 위에 글자가 얹히지 않도록, 글자 자리만 배경색으로 덮어 구멍을 낸다. */
.gr-detail .grd-ph-bg { fill: var(--bg-elevated); }
.gr-detail .grd-seg-t { font: 10px Inter, sans-serif; fill: #fff; text-anchor: middle; }
.gr-detail .grd-mk-t  { font: 700 11px Inter, sans-serif; fill: #fff; text-anchor: middle; }
.gr-detail .grd-mk-l  { font: 11px Inter, sans-serif; fill: var(--text-dim); }
.gr-detail .grd-none  { font: 10px Inter, sans-serif; fill: var(--text-faint); }
.gr-detail .grd-ph:hover rect, .gr-detail .grd-seg:hover rect { filter: brightness(1.12); }

/* ── 문제별 세부 분포표(§8) — 문항 카드를 가로로 나란히 ── */
/* 표·히트맵·각주 한 덩어리를 가운데. 폭은 _grRenderQHeat()가 칸 크기를 확정한 뒤 px로 넣는다 —
   행마다 따로 가운데 정렬하면 행 폭이 조금만 달라져도 표 열이 좌우로 흔들린다. */
.gr-q-wrap { margin-inline: auto; max-width: 100%; }
.gr-q-list { display: flex; flex-direction: column; gap: 14px; }
.gr-q-row  { display: flex; gap: 14px; align-items: flex-start; }
.gr-q-heat { flex: 0 0 auto; min-width: 0; display: flex; gap: 12px; align-items: flex-start; }
.gr-t-card {
  flex: 0 0 430px; max-width: 430px;
  background: var(--bg-elevated); border: 1px solid var(--border-mid); border-radius: 10px; overflow: hidden;
}
.gr-t-head { padding: 8px 12px; font: 700 12px Inter, sans-serif; border-bottom: 1px solid var(--border-soft); }
.gr-t-head.is-o { color: #0f9d58; background: rgba(15,157,88,.07); }
.gr-t-head.is-x { color: #dc2626; background: rgba(220,38,38,.07); }
.gr-t-head.is-n { color: var(--text-dim); background: rgba(22,23,28,.04); }
/* 카드 머리 아래 관측 한 줄 — 판정이 아니라 잰 값이다(문제1이 왜 긴지 등). */
.gr-t-note-line {
  padding: 6px 12px;
  font: 11px/1.6 Inter, sans-serif; color: var(--text-dim);
  background: rgba(22,23,28,.03);
  border-bottom: 1px solid var(--border-soft);
}

.gr-t { width: 100%; border-collapse: collapse; font: 11px Inter, sans-serif; color: var(--text-primary); }
.gr-t th {
  padding: 6px 6px; font: 600 10px Inter, sans-serif; color: var(--text-dim);
  background: rgba(22,23,28,.05); border-bottom: 1px solid var(--border-soft); text-align: center;
}
.gr-t th:first-child { text-align: left; padding-left: 10px; }
.gr-t td { padding: 5px 6px; text-align: center; border-bottom: 1px solid var(--border-soft); }
.gr-t td.gr-t-l { text-align: left; padding-left: 10px; font-weight: 600; color: var(--text-dim); }
.gr-t tr.is-evid  td.gr-t-l { color: #2563eb; }
.gr-t tr.is-waste           { background: rgba(239,68,68,.08); }
.gr-t tr.is-waste td.gr-t-l { color: #dc2626; }
/* 값이 전부 0인 행 = 그 구간에 안 본 영역. 지우지 않고 흐리게 둔다 — "안 봤다"도 정보다. */
.gr-t tr.is-empty { opacity: .42; }
.gr-t-note { color: var(--text-faint); font-style: italic; }
/* 유형 게이트가 닫힌 문항 — 빨강이 없는 이유를 표 바로 아래에서 밝힌다. 밝히지 않으면
   "빨강이 없다 = 낭비가 없었다"로 읽혀 정반대의 안심을 준다. */
.gr-t-gate {
  padding: 7px 12px;
  font: 11px/1.6 Inter, sans-serif; color: var(--text-dim);
  background: rgba(37,99,235,.06);
  border-top: 1px solid var(--border-soft);
}
.gr-t-gate b { color: #2563eb; font-weight: 700; }

.gr-t-v { vertical-align: middle; background: rgba(22,23,28,.03); border-left: 1px solid var(--border-soft); }
.gr-t-v b    { display: block; font: 700 18px Inter, sans-serif; }
.gr-t-v span { display: block; font: 10px/1.4 Inter, sans-serif; color: var(--text-dim); margin-top: 2px; }
.gr-t-v.is-o b { color: #0f9d58; }
.gr-t-v.is-x b { color: #dc2626; }
.gr-t-v.is-n b { color: var(--text-faint); }

.gr-t-k { padding: 0 3px; border-radius: 3px; font-weight: 700; }
.gr-t-k.is-evid  { color: #2563eb; }
.gr-t-k.is-waste { color: #dc2626; }

@media screen and (max-width: 1100px) {
  .gr-q-row  { flex-direction: column; }
  .gr-t-card { flex: 1 1 auto; max-width: none; width: 100%; }
}

/* 1단계 정답풀이의 해설 — layer 2 feedback(onCorrect/onWrong)을 그대로 보여준다. */
.ar-why.ar-explain {
  margin-top: 8px; padding: 9px 12px; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid rgba(96, 18, 243,.16);
  color: var(--text-primary); font: 12px/1.7 Inter, sans-serif;
}
#answerReviewTabs { padding: 8px 18px 0; }

/* ── 코칭리포트 탭(coaching.js) ── 응답 하나를 네 화면으로 나눠 보여준다. */
.cr-tabs  { margin-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.cr-tabpanel { display: flex; flex-direction: column; gap: 14px; }
.cr-note {
  padding: 10px 14px; border-radius: 10px;
  background: rgba(22,23,28,.04); border: 1px solid var(--border-soft);
  color: var(--text-dim); font: 11px/1.7 Inter, sans-serif;
}
.cr-chg { font: 700 11px Inter, sans-serif; padding: 2px 8px; border-radius: 10px; }
.cr-chg.is-up   { color: #0f9d58; background: rgba(15,157,88,.10); }
.cr-chg.is-down { color: #dc2626; background: rgba(220,38,38,.10); }

/* ═══ AI소크라테스 대화 — 우하단 버튼 + 채팅 패널 ═══════════════════════════════
   z-index 대역: 사이드바 700 · EMME 툴팁 600 위, 정답풀이 9000 · 시선데이터 8000 위,
   API 키 입력창(#apiKeyModal 10000) 아래. 버튼 9500 / 패널 9600.
   위치는 bottom:74px — #readingToolbar 바로 위다(#debugPanel이 같은 값을 쓰는 이유).
   전역 .hidden{display:none} 규칙이 이 코드베이스엔 없으므로 각자 선언한다. */
/* 알약형 — 예전에는 52px 원에 🦉 하나였는데, 배경색이 --bg-elevated 라 오버레이 위에서
   떠 보이지 않고 라벨이 없어 장식으로 읽혔다. 이름을 붙이고 accent 로 칠한다.
   위치는 js/socchat.js 의 _socFabDock() 이 열린 화면의 박스 안쪽으로 끌어온다 —
   right:20px 고정이면 넓은 화면에서 가운데 박스와 700px 가까이 벌어졌다. */
/* [왜 아이콘 하나인가] 글자를 단 알약 꼴은 폭이 250px가 넘어, 정답풀이 패널의 '다음 문항'
   버튼 위를 덮었다(2026-09-02 신고). 이름은 좌측 메뉴에도 있으므로 여기서는 부엉이만 둔다. */
.soc-fab {
  position: fixed; bottom: 74px; right: 20px; z-index: 9500;
  display: flex; align-items: center; justify-content: center; gap: 0;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  border: none; background: var(--accent); color: #fff;
  box-shadow: 0 8px 24px rgba(96, 18, 243,.34);
  font: 700 13px Inter, sans-serif; line-height: 1; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.soc-fab-ico { font-size: 22px; line-height: 1; }
.soc-fab-lbl { display: none; }   /* 이름은 툴팁(title)과 좌측 메뉴에 남는다 */
.soc-fab:hover    { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(96, 18, 243,.42); }
.soc-fab.is-open  { box-shadow: 0 0 0 4px var(--accent-soft), 0 8px 24px rgba(96, 18, 243,.34); }
.soc-fab.hidden   { display: none; }

/* is-mini는 예전에 "한 번 열어본 뒤 원형으로 접는" 상태였다. 이제 기본이 원형이라
   따로 할 일이 없다 — 클래스는 socchat.js가 계속 붙이므로 규칙만 비워 둔다. */

/* 처음 한 번만 — 버튼을 두 번 흔들고 말풍선을 3.5초 띄운다. */
.soc-fab.is-nudge { animation: socNudge 1.1s ease-in-out 2; }
@keyframes socNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.soc-fab-hint {
  position: fixed; z-index: 9501;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(22,23,28,.9); color: #fff;
  font: 600 12px Inter, sans-serif; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(22,23,28,.28);
  animation: socHintIn .2s ease;
}
.soc-fab-hint.hidden { display: none; }
@keyframes socHintIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* 화면 안에 두는 '이어서 짚어보기' 카드 — 정답풀이·시선데이터 본문 끝. */
.soc-cta {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 4px; padding: 12px 14px;
  border: 1px solid var(--accent); border-radius: 12px;
  background: var(--accent-soft);
}
.soc-cta-ico  { font-size: 20px; line-height: 1; flex-shrink: 0; }
.soc-cta-text { flex: 1; min-width: 0; font: 600 12.5px/1.5 Inter, sans-serif; color: var(--text-primary); }
.soc-cta-btn {
  flex-shrink: 0; padding: 8px 16px; border-radius: 18px;
  border: none; background: var(--accent); color: #fff;
  font: 700 12px Inter, sans-serif; cursor: pointer;
}
.soc-cta-btn:hover { filter: brightness(1.08); }
/* 정답풀이에서는 이 카드가 본문 맨 끝이라, 끝까지 내리면 도킹된 🦉 버튼이 카드의
   '물어보기' 위에 얹힌다. 버튼 높이(52)+여백만큼 아래를 비워 둔다. */
#answerReview .soc-cta { margin-bottom: 76px; }

.soc-panel {
  position: fixed; bottom: 136px; right: 20px; z-index: 9600;
  width: 380px; max-width: calc(100vw - 40px);
  height: 560px; max-height: calc(100vh - 200px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(22,23,28,.28);
  display: flex; flex-direction: column; overflow: hidden;
}
.soc-panel.hidden { display: none; }

.soc-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--border-soft);
  background: var(--bg-secondary); flex-shrink: 0;
}
.soc-hdr-title { font: 700 13px Inter, sans-serif; color: var(--text-primary); }
.soc-hdr-ctx {
  flex: 1; min-width: 0; text-align: right;
  font: 600 10px Inter, sans-serif; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.soc-close {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border-mid); background: var(--bg-elevated);
  color: #6b7280; font: 600 11px Inter, sans-serif; cursor: pointer;
}
.soc-close:hover { background: rgba(220,38,38,.1); color: #dc2626; }

.soc-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}

.soc-row { display: flex; }
.soc-row.is-ai { justify-content: flex-start; }
.soc-row.is-me { justify-content: flex-end; }

.soc-bubble {
  max-width: 86%; padding: 9px 12px; border-radius: 14px;
  font: 400 12.5px/1.6 Inter, sans-serif; word-break: break-word;
}
.soc-row.is-ai .soc-bubble {
  background: var(--bg-secondary); color: var(--text-primary);
  border: 1px solid var(--border-soft); border-bottom-left-radius: 4px;
}
.soc-row.is-me .soc-bubble {
  background: var(--accent); color: #fff; border-bottom-right-radius: 4px;
}
.soc-bubble b { font-weight: 700; }

.soc-ul { margin: 6px 0 0; padding-left: 4px; list-style: none; }
.soc-ul li { padding: 2px 0; font: 400 12px/1.6 Inter, sans-serif; }
.soc-dim  { color: var(--text-dim); font-size: 11px; }
.soc-note {
  margin-top: 4px; color: var(--text-dim);
  font: 400 10.5px/1.5 Inter, sans-serif;
}

/* 화면·단계가 바뀐 자리 표시 — 스레드는 하나로 이어지되 어디서 넘어왔는지는 남긴다. */
.soc-sep {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-faint); font: 600 10px Inter, sans-serif;
}
.soc-sep::before, .soc-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--border-soft);
}

.soc-chips {
  flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px 0; border-top: 1px solid var(--border-soft);
}
.soc-chip {
  padding: 6px 11px; border-radius: 16px;
  border: 1.5px solid var(--border-mid); background: var(--bg-elevated);
  color: var(--text-primary); font: 600 11px Inter, sans-serif; cursor: pointer;
}
.soc-chip:hover { border-color: var(--accent); background: var(--accent-soft); }

.soc-input { flex-shrink: 0; display: flex; gap: 8px; padding: 10px 14px 12px; }
.soc-input input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 18px;
  border: 1.5px solid var(--border-soft); background: var(--bg-secondary);
  color: var(--text-primary); font: 400 12px Inter, sans-serif;
}
.soc-input input:disabled { color: var(--text-faint); cursor: not-allowed; }
.soc-send {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--accent); color: #fff;
  font: 700 14px Inter, sans-serif; cursor: pointer;
}
.soc-send:disabled { background: var(--border-mid); cursor: not-allowed; }

@media screen and (max-width: 640px) {
  /* 좁은 화면에서는 알약이 폭을 먹는다 — 원형으로 두고 말풍선만 띄운다. */
  .soc-fab   { bottom: 68px; right: 12px; width: 46px; height: 46px; padding: 0; border-radius: 50%; justify-content: center; }
  .soc-fab .soc-fab-lbl { display: none; }
  .soc-fab-hint { max-width: calc(100vw - 24px); white-space: normal; }
  .soc-panel { bottom: 122px; right: 12px; left: 12px; width: auto; max-height: calc(100vh - 180px); }
}

/* ── AI소크라테스 대화 2단계: 인용·되묻기·생각 중 ─────────────────────────────
   인용문은 모델이 쓴 글이 아니라 우리가 문장 ID로 꺼낸 원문이다. 그래서 말풍선 본문과
   시각적으로 확실히 갈라 놓는다 — 학생이 "이건 지문에 진짜 있는 문장"으로 읽어야 한다. */
.soc-cite {
  margin-top: 7px; padding: 7px 10px;
  border-left: 3px solid var(--accent);
  background: var(--bg-primary); border-radius: 0 8px 8px 0;
  font: 400 11.5px/1.6 Inter, sans-serif; color: var(--text-primary);
}
.soc-cite span {
  display: block; margin-top: 3px;
  color: var(--text-dim); font: 600 10px Inter, sans-serif;
}
.soc-row.is-me .soc-cite { background: rgba(255,255,255,.16); border-left-color: #fff; color: #fff; }

/* 지문에 없는 배경지식으로 답한 경우 — 막지 않되 섞이지 않게 표시한다. */
.soc-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 9px;
  background: rgba(180,83,9,.12); color: var(--warning);
  font: 700 9.5px Inter, sans-serif; vertical-align: middle;
}

/* 되묻기 — 말풍선 아래 왼쪽에 붙는 클릭 가능한 한 문장. 무시해도 되게 작게. */
.soc-fu { display: flex; margin-top: -4px; }
.soc-chip.is-fu {
  border-style: dashed; color: var(--accent);
  font-weight: 400; max-width: 100%; text-align: left; white-space: normal;
}

.soc-think { color: var(--text-dim); }
.soc-think::after {
  content: ''; display: inline-block; width: 1em; text-align: left;
  animation: socDots 1.2s steps(4, end) infinite;
}
@keyframes socDots { 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} }

/* 칩은 두 줄이다 — 위는 즉답(실측치), 아래는 AI에게 물어보는 것. 성격이 다르니 모양도 다르다. */
.soc-chips { flex-direction: column; align-items: stretch; gap: 6px; }
.soc-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.soc-chip.is-fact {
  padding: 4px 9px; font-size: 10.5px;
  border-style: solid; border-color: var(--border-soft);
  background: var(--bg-secondary); color: var(--text-dim);
}
.soc-chip.is-fact:hover { color: var(--text-primary); border-color: var(--border-mid); background: var(--bg-secondary); }
.soc-chip.is-ask { max-width: 100%; text-align: left; white-space: normal; line-height: 1.45; }

/* ── 나의 예지력 지수 ──────────────────────────────────────────────────────
   AI읽기코칭이 도는 내내 #questionsPanel 맨 위에 붙어 있다. #aicPanel 밖이라
   카드가 지워져도 살아남는다.
   읽는 화면 위에 늘 떠 있는 유일한 숫자다. 그래서 자리는 작게 잡고, 움직일 때만
   한 번 깜빡인다 — 계속 움직이면 지문이 아니라 이쪽으로 눈이 간다. */
.aic-fore {
  padding: 10px 13px 11px; margin-bottom: 12px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  background: var(--bg-secondary);
}
.aic-fore.hidden { display: none; }
.aic-fore-top  { display: flex; align-items: baseline; gap: 8px; }
.aic-fore-hdr  { font-size: 12px; font-weight: 700; color: var(--text-dim); letter-spacing: .02em; }
.aic-fore-v    { margin-left: auto; font-size: 20px; font-weight: 700; line-height: 1;
                 color: var(--text-primary); font-variant-numeric: tabular-nums; }
.aic-fore-d    { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aic-fore-d.up   { color: rgba(46,160,90,.95); }
.aic-fore-d.down { color: rgba(214,80,80,.95); }
/* 0~100 눈금. 숫자만 있으면 62가 높은 건지 낮은 건지 알 수 없다. */
.aic-fore-bar  { height: 6px; margin-top: 8px; border-radius: 3px;
                 background: var(--border-soft); overflow: hidden; }
.aic-fore-bar i { display: block; height: 100%; border-radius: 3px;
                  background: rgba(90,110,220,.75); transition: width .45s ease; }
.aic-fore-tail { margin-top: 7px; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
/* 움직인 순간에만 한 번. */
.aic-fore.is-pulse { animation: aicForePulse .55s ease; }
@keyframes aicForePulse {
  0%   { border-color: var(--border-soft); }
  35%  { border-color: rgba(90,110,220,.65); }
  100% { border-color: var(--border-soft); }
}
/* 마무리 화면의 성장폭 한 줄 — 사실 줄(aic-answer-line)과 같은 층이다. */
.aic-fore-wrap { font-weight: 600; }

/* (가)(나) 통합 지문에서 글이 바뀌는 자리. 여덟 문단을 한 줄로 이으면 5문단에서 다른
   글이 시작한다는 사실이 사라지고, 통합 지문에서 그건 가장 크게 틀리는 읽기가 된다. */
.aic-out-part {
  margin: 0 0 8px -14px; padding: 3px 0 0;
  font-size: 11.5px; font-weight: 700; color: var(--text-dim);
}
.aic-out-step + .aic-out-part { margin-top: 4px; }

/* ── 근거 짚기의 답 ────────────────────────────────────────────────────────
   물었으면 답한다. 지문의 그 문장에 표를 내고, 같은 문장을 말풍선에 옮겨 그 안의
   표지 하나만 굵게 한다 — 어디였는지와 무엇이었는지는 다른 물음이라 둘 다 보인다. */
.passage-para .sent.aic-answer-sent {
  background: rgba(90,110,220,.18);
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(90,110,220,.18);
}
.aic-point {
  margin-top: 8px; padding: 10px 12px;
  border-left: 2px solid rgba(90,110,220,.55); border-radius: 0 8px 8px 0;
  background: var(--bg-secondary);
  font-size: 12.5px; line-height: 1.75; color: var(--text-dim);
}
/* 답이 되는 말. 이 화면에서 학생이 가져갈 것은 이 몇 글자다. */
.aic-point-mk {
  color: var(--text-primary); font-weight: 700;
  background: rgba(90,110,220,.22); border-radius: 4px; padding: 1px 3px;
}

/* ── 예지력이 걸린 물음 ────────────────────────────────────────────────────
   셋째 마디(그리고 그것을 대신한 좁히기) 위에만 붙는다. 걸린 줄 모르고 건 것은
   내기가 아니다 — 무엇이 걸렸는지 알고 골라야 그 선택에 값이 붙는다.
   위쪽 예지력 칸(.aic-fore)과 같은 색을 쓴다: 이 표가 저 숫자를 가리킨다는 것이
   설명 없이 이어져야 한다. 다른 마디에는 붙이지 않는다 — 어디서나 뜨는 표는 표가 아니다. */
.aic-stake {
  display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 9px; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--text-primary);
  background: rgba(90,110,220,.16);
  box-shadow: inset 0 0 0 1px rgba(90,110,220,.28);
}

/* ── 어절 짚기 ─────────────────────────────────────────────────────────────
   이 단계의 주축이 된 마디. 지문 문장을 글자 span 으로 쪼개 어절을 후보로 삼는다.
   쪼개는 것은 .sent 안쪽이므로 시선이 보는 사각형(.passage-para[data-aoi] · .sent)은
   그대로다. 카드를 떠날 때 원본 innerHTML 로 되돌린다.

   [왜 span 에 아무 모양도 안 주나] 글자마다 상자를 만들면 자간과 줄바꿈이 미세하게
   달라지고, 그러면 문단의 높이가 바뀌어 좌표가 어긋난다. .aic-char 는 모양을 하나도
   갖지 않고, 색은 어절 전체에 걸리는 클래스로만 준다. */
.passage-para .sent .aic-char { display: inline; }

/* 짚을 수 있는 자리 — 알리되 답처럼 보이지 않게. 밑줄 하나와 손가락 커서뿐이다. */
.passage-para .sent .aic-char.aic-span-candidate {
  cursor: pointer;
  border-bottom: 1px dashed var(--border-mid);
}
.passage-para .sent .aic-char.aic-span-candidate:hover {
  background: rgba(255,255,255,.07);
  border-bottom-color: var(--accent);
}

/* 학생이 짚은 자리. 형광펜을 그은 모양이다 — 종이 위에서 하던 일과 같은 동작이므로
   같은 모양으로 보인다. */
.passage-para .sent .aic-char.aic-span-on {
  background: rgba(226,170,60,.30);
  border-bottom: 2px solid rgba(226,170,60,.85);
}

/* 답이 되는 자리. 짚은 것 위에 겹쳐 그려도 구별되도록 색을 달리한다 — 학생이 짚은
   곳과 짚었어야 할 곳이 한 화면에 함께 남는 것이 이 마디의 되짚기다. */
.passage-para .sent .aic-char.aic-span-key {
  background: rgba(90,110,220,.26);
  border-bottom: 2px solid rgba(90,110,220,.8);
  color: var(--text-primary);
  font-weight: 700;
}

/* 기출 선지를 그대로 인용하는 자리. 우리가 쓴 말이 아니라는 것이 보여야 한다. */
.aic-quote {
  margin: 10px 0 2px; padding: 11px 13px;
  border-left: 3px solid var(--border-mid); border-radius: 0 8px 8px 0;
  background: var(--bg-secondary);
  font-size: 14.5px; line-height: 1.75; color: var(--text-primary);
}

/* ── 덮고 한 문장의 코치 한마디 ────────────────────────────────────────────
   낱말 되짚기는 즉시 뜨고, 모델의 말은 이 자리에 나중에 채워진다. [네 →]는 처음부터
   눌리므로 이 상자는 "기다리는 곳"이 아니라 "늦게 도착하는 곳"이다 — 그래서 자리만
   미리 잡아 두고, 못 채우면 조용히 접는다. */
.aic-coach { border-left-color: rgba(226,170,60,.65); }
.aic-coach-hdr {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  color: rgba(226,170,60,.95);
  margin-bottom: 5px;
}
.aic-coach-wait {
  color: var(--text-dim);
  animation: aic-coach-blink .9s ease infinite alternate;
}
@keyframes aic-coach-blink { from { opacity: .45 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .aic-coach-wait { animation: none } }

/* ── 마지막 정리의 '덮고 한 문장' ──────────────────────────────────────────
   한 편을 도는 동안 학생이 직접 쓴 것은 이 한 문장뿐이다. 짜임 바로 앞에 두어
   "당신은 이렇게 썼고, 글은 이렇게 짜였습니다"가 나란히 놓이게 한다. */
.aic-mywrite { border-left-color: rgba(226,170,60,.65); margin-top: 12px; }
.aic-mywrite-hdr { color: rgba(226,170,60,.95); }
.aic-mywrite-q {
  margin-bottom: 6px;
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.7;
}
.aic-mywrite-coach {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed var(--border-mid);
  color: var(--text-dim);
}

/* ═════════════════════════════════════════════════════════════════════════════
   § 기출 순차 리뷰 (answerreview.js) — B 채점 → C 문항별 → D 총평
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── 문제 패널 자리에 도킹 ──
   ③에서 근거문단을 지문에 짚어주는데, 화면을 통째로 덮으면 그 문단이 안 보인다.
   그래서 오버레이는 왼쪽 지문을 살려 두고 **방금까지 문제·선지가 있던 그 칸에 정확히
   포갠다** — 가로 자리와 폭이 #questionsPanel 과 같다.
   [왜 같은 자리여야 하나] 학생이 보던 선지가 있던 자리에서 그 선지의 해설이 이어진다.
   예전에는 화면 오른쪽 끝에 min(740px, 50vw) 로 붙었는데, 문제 패널과 폭도 오른쪽 끝
   위치도 달라서 창이 뜰 때 눈이 한 번 옮겨 앉아야 했다.
   폭·자리는 :root 의 --rd-q-left / --rd-q-w 에서 온다 — 패널 비율을 바꾸면 이 창이 저절로
   따라온다. 두 곳에 숫자를 박으면 한쪽만 바뀐다.
   backdrop을 지우고 pointer-events를 흘려보내, 왼쪽 지문을 스크롤할 수 있게 둔다. */
.self-report-overlay.ar-docked {
  background: none;
  backdrop-filter: none;
  justify-content: flex-start;
  align-items: stretch;
  pointer-events: none;
}
.self-report-overlay.ar-docked .ar-box {
  pointer-events: auto;
  margin-left: var(--rd-q-left);
  width: var(--rd-q-w);
  max-width: none;
  height: 100vh;
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--border-mid);
  border-right: 1px solid var(--border-mid);
  box-shadow: -18px 0 46px rgba(22, 23, 28, .13);
}
/* 좁은 화면에서는 도킹이 지문을 다 밀어낸다 — 그때는 원래대로 덮는다. */
@media screen and (max-width: 900px) {
  .self-report-overlay.ar-docked {
    background: rgba(4, 6, 20, .85);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    pointer-events: auto;
  }
  .self-report-overlay.ar-docked .ar-box {
    margin-left: 0;
    width: 92vw; height: 88vh; border-radius: 16px;
    border: 1px solid var(--border-soft); box-shadow: none;
  }
}

/* ── 읽기 처방전의 마지막 한 걸음 ──
   선지 안의 '다음'(내용 축)과 색을 나눈다. 이쪽은 이번 풀이의 읽는 방식에서 나온 것이라
   학생마다 다르고, 오늘 당장 바꿀 수 있는 한 가지다(reading-rx.js _rxNextStep). */
.rx-step {
  display: flex; gap: 10px; align-items: baseline;
  margin-top: 12px; padding: 11px 13px; border-radius: 10px;
  background: var(--accent-soft); border: 1px solid rgba(96, 18, 243,.22);
}
.rx-step-lbl {
  flex: 0 0 62px; font: 700 11px Inter, sans-serif;
  color: var(--accent); letter-spacing: .04em;
}
.rx-step-body { font: 13px/1.75 Inter, sans-serif; color: var(--text-primary); }

/* ── 기출 기준 막대 ── 2026-09-09 오각형을 대신한다
   [왜 막대인가] 오각형은 다섯 축을 한 그림에 겹쳐 "모양"을 읽게 했다. 그런데 축마다 기준이
   다르고(요구시간·목표 속도·100%) 그중 하나는 늘 만점 근처에 붙어 있어서, 모양이 아무 말도
   하지 않았다. 막대는 축마다 자기 기준을 옆에 데리고 다닌다. */
.ar-std { margin: 0 0 16px; }
.ar-std-block {
  margin: 0 0 12px; padding: 12px 14px; border-radius: 11px;
  background: var(--bg-secondary); border: 1px solid var(--border-soft);
}
.ar-std-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.ar-std-title { font: 700 12.5px Inter, sans-serif; color: var(--text-dim); letter-spacing: .02em; }
.ar-std-val { font: 700 15px Inter, sans-serif; color: var(--text-primary); }

.ar-bar-row { display: flex; align-items: center; gap: 9px; margin: 5px 0; }
.ar-bar-lbl { flex: 0 0 30px; font: 600 11.5px Inter, sans-serif; color: var(--text-faint); text-align: right; }
.ar-bar-track {
  flex: 1 1 auto; position: relative; height: 15px; border-radius: 8px;
  background: rgba(22,23,28,.06); overflow: visible;
}
.ar-bar-fill { display: block; height: 100%; border-radius: 8px; }
.ar-bar-fill.is-ref   { background: var(--text-faint); opacity: .45; }
.ar-bar-fill.is-in    { background: #0f9d58; }
.ar-bar-fill.is-over  { background: #e08a15; }
.ar-bar-fill.is-plain { background: var(--accent); opacity: .75; }
.ar-bar-fill.is-check { background: var(--accent); }
/* 목표 눈금 — 축의 끝(=목표)에 선 하나만 세운다. 넘고 못 넘고를 색으로 말하지 않는다. */
.ar-bar-goal {
  position: absolute; right: -1px; top: -3px; width: 2px; height: 21px;
  background: var(--text-dim); border-radius: 1px;
}
.ar-bar-val { flex: 0 0 auto; min-width: 62px; font: 700 12px Inter, sans-serif; color: var(--text-primary); }
.ar-bar-diff { margin: 7px 0 0 39px; font: 700 12.5px Inter, sans-serif; }
.ar-bar-diff.is-over { color: #b8730f; }
.ar-bar-diff.is-in   { color: #0b7a45; }
.ar-bar-note { margin: 8px 0 0 39px; font: 11.5px/1.65 Inter, sans-serif; color: var(--text-faint); }

/* ④ 무엇이 어긋났나 — 확인율에 매단 줄이라 들여쓴다(종속이 배치로 보여야 한다) */
.ar-gap-list {
  margin: -4px 0 0; padding: 10px 14px 11px 30px; list-style: disc;
  border-left: 2px solid var(--border-soft);
}
.ar-gap-list li { font: 12.5px/1.75 Inter, sans-serif; color: var(--text-primary); }

/* ── §5 이 문항에서 내 읽기 — 배지 + 세 마디 ──
   세 줄의 성질이 다르다(관측·해석·행동)는 것이 눈에도 보여야 한다: 라벨을 왼쪽에 고정
   폭으로 세우고, 마지막 줄만 강조 배경을 준다. */
.ar-read-badge { margin-left: 8px; font: 700 11px Inter, sans-serif; padding: 2px 9px; }
.ar-read { display: flex; flex-direction: column; gap: 9px; }
.ar-read-row { display: flex; gap: 11px; align-items: baseline; }
/* 칸 이름은 한 줄 — 고정 폭(62px)에 가두면 「지문으로 간 길」이 두 줄로 꺾였다(2026-09-12).
   짧은 이름은 그 폭을 지켜 줄 맞춤을 두고, 긴 이름만 제 길이만큼 편다. 세 칸(아래 ev·mark)이 같은 규칙. */
.ar-read-lbl {
  flex: 0 0 auto; min-width: 62px; white-space: nowrap; font: 700 11px Inter, sans-serif;
  color: var(--text-faint); letter-spacing: .04em;
}
.ar-read-body { font: 13px/1.75 Inter, sans-serif; color: var(--text-primary); min-width: 0; }
/* 강조는 「다음에는」(동작) 한 줄 — 마지막 줄이 아니다. 새 칸은 그 아래 「이 문항이라면 · 다음 지문에서」가 온다(2026-09-13). */
.ar-read-row.is-act {
  margin-top: 2px; padding: 10px 12px; border-radius: 10px;
  background: var(--accent-soft); border: 1px solid rgba(96, 18, 243,.22);
}
.ar-read-row.is-act .ar-read-lbl { color: var(--accent); }

/* 이 문항이 무엇을 묻는가 — 선지를 읽기 전에 오는 한 문장(answerreview.js _arAskHtml) */
.ar-ask {
  margin: 10px 0 2px; padding: 11px 13px; border-radius: 10px;
  background: var(--bg-secondary); border: 1px solid var(--border-soft);
  font: 13px/1.75 Inter, sans-serif; color: var(--text-secondary);
}

/* ── 접기 ──
   문제·선지를 다시 보려고 화면을 치우는 자리다. 닫는 것이 아니라 줄이는 것이라
   DOM 은 그대로 있고, 펴면 하던 자리에서 이어진다(answerreview.js arToggleMin). */
.ar-head-btns { display: flex; align-items: center; gap: 6px; }
.ar-min-btn {
  width: 26px; height: 26px; padding: 0; border-radius: 7px; cursor: pointer;
  font: 700 13px Inter, sans-serif; line-height: 1;
  border: 1px solid var(--border-mid); background: transparent; color: var(--text-dim);
}
.ar-min-btn:hover { border-color: var(--accent); color: var(--accent); }

.self-report-overlay.ar-min {
  background: none; backdrop-filter: none; pointer-events: none;
  align-items: flex-end; justify-content: flex-end;
}
.self-report-overlay.ar-min .ar-box {
  pointer-events: auto;
  width: auto; max-width: none; height: auto;
  margin: 0 20px 20px 0;
  border-radius: 999px;
  border: 1px solid var(--border-mid);
  box-shadow: 0 8px 24px rgba(22, 23, 28, .18);
}
.self-report-overlay.ar-min .ar-head {
  border-bottom: none; padding: 9px 12px 9px 16px; gap: 12px;
  font-size: 13px;
}
.self-report-overlay.ar-min #answerReviewTabs,
.self-report-overlay.ar-min .ar-body,
.self-report-overlay.ar-min .ar-foot { display: none; }

/* ── 근거문단 표시 ──
   emme의 초록 하이라이트와 색을 나눈다: 저쪽은 "지금 여기를 보라"는 진행 중 안내고,
   이쪽은 "정답의 근거는 여기였다"는 사후 표시라 학생이 둘을 섞으면 안 된다. */
.ar-evid-para {
  background: rgba(96, 18, 243, .07) !important;
  outline: 2px solid rgba(96, 18, 243, .55) !important;
  outline-offset: 2px;
  border-radius: 6px;
  transition: outline-color .2s ease, background .2s ease;
}

/* ── 판정 색 ── 정오(맞음/틀림)와 다른 축이라 초록·빨강을 그대로 쓰지 않는다.
   "찍어서 맞음"은 맞았는데도 경고여야 하므로 주황이 따로 필요하다.
   선택자를 .ar-chip/.ar-verdict와 묶어 명시도를 올린다 — 홑클래스로 두면 아래
   .ar-chip의 회색 배경과 명시도가 같아서, 나중에 선언된 그쪽이 판정 색을 덮는다. */
.ar-chip.ar-v-ok,     .ar-verdict.ar-v-ok     { background: rgba(15,157,88,.12);  color: #0b7a44; }
.ar-chip.ar-v-warn,   .ar-verdict.ar-v-warn   { background: rgba(180,83,9,.14);   color: #a1490a; }
.ar-chip.ar-v-interp, .ar-verdict.ar-v-interp { background: rgba(109,91,208,.14); color: #5a49bd; }
.ar-chip.ar-v-miss,   .ar-verdict.ar-v-miss   { background: rgba(220,38,38,.12);  color: #c02626; }
.ar-chip.ar-v-none,   .ar-verdict.ar-v-none   { background: rgba(22,23,28,.07);   color: var(--text-dim); }

/* ── B · 채점 ── */
.ar-score-big .ar-score-num { font-size: 44px; }
.ar-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ar-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px; border: none; cursor: pointer;
  font: 600 13px Inter, sans-serif;
  background: rgba(22,23,28,.06); color: var(--text-primary);
}
.ar-chip:hover { filter: brightness(.96); }
.ar-chiprow-nums .ar-chip { min-width: 40px; justify-content: center; }
.ar-lead {
  font: 13px/1.75 Inter, sans-serif; color: var(--text-dim);
  padding: 12px 14px; border-radius: 10px; background: var(--bg-secondary);
}

/* ── C · 문항 하나 ── */
.ar-progress {
  font: 700 11px Inter, sans-serif; letter-spacing: .1em;
  color: var(--text-faint); margin-bottom: 8px;
}
.ar-qhead-big { margin-bottom: 16px; }
.ar-qhead-big .ar-qtext { font-size: 15px; }

.ar-step {
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--bg-elevated); padding: 16px; margin-bottom: 12px;
}
.ar-step-hd {
  display: flex; align-items: center; gap: 8px;
  font: 700 13px Inter, sans-serif; color: var(--text-primary);
  margin-bottom: 12px;
}
/* 단계 번호는 네모, 선지 번호는 동그라미(①~⑤). 예전에는 단계도 ①이라 선지와 섞여
   "①선지 판정"의 ①이 1번 선지를 가리키는 것처럼 읽혔다. 모양으로 갈라 놓는다. */
/* 번호는 CSS 카운터가 매긴다(2026-09-13) — 조건부 칸(못 그린 시선경로·재검증 등)이 빠져도
   번호가 건너뛰지 않는다. display:none 인 요소는 카운터를 올리지 않는다. */
.ar-body { counter-reset: arstep; }
/* 채점과 총평의 칸 안 — 원래 화면 바닥에 따로 서던 조각들이라 제 여백을 칸에 맞춰 줄인다 */
.ar-step > .ar-closing { margin-top: 0; }
.ar-step > .ar-section-title:first-child,
.ar-step > .ar-classify:first-child { margin-top: 0; }
.ar-step .ar-std { margin-bottom: 0; }
.ar-step .ar-std-block:last-child { margin-bottom: 0; }
.ar-step > .ar-chiprow:last-child { margin-bottom: 0; }
.ar-step-n { counter-increment: arstep; }
.ar-step-n::before { content: counter(arstep); }
.ar-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 3px;
  border-radius: 5px; background: var(--accent); color: #fff;
  font: 700 12px Inter, sans-serif; letter-spacing: 0;
}

/* ④ 이 문항을 풀 때 내 시선 — 왕복표·히트맵을 담는 칸 */
.ar-step-gaze { border-color: rgba(96, 18, 243,.32); }

/* ⑤ 이 문항에서 내 읽기 — 시선표 바로 아래의 읽기 코칭 */
.ar-step-coach { border-color: rgba(16,185,129,.34); }
.ar-ai-badge::before { content: 'º8'; margin-right: 4px; }
.ar-coachblock { margin-top: 2px; }
.ar-coach-text {
  font: 14px/1.85 Inter, sans-serif; color: var(--text-primary);
  padding: 11px 13px; border-radius: 9px;
  background: rgba(16,185,129,.07); border-left: 3px solid rgba(16,185,129,.55);
  white-space: pre-wrap;
}
.ar-coach-wait, .ar-coach-none {
  font: 13px/1.7 Inter, sans-serif; color: var(--text-secondary);
  padding: 9px 12px; border-radius: 9px; background: var(--bg-subtle, rgba(0,0,0,.03));
}
/* 폐기 사유는 작게 — 학생에겐 곁가지지만, 왜 비었는지는 보여야 한다 */
.ar-coach-none span { display: block; margin-top: 3px; font-size: 12px; opacity: .72; }
.ar-coach-btn {
  margin-left: 8px; padding: 4px 11px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  font: 600 12px Inter, sans-serif;
}
.ar-coach-btn:hover { background: var(--accent); color: #fff; }

/* ── 읽기 처방전 ── 지문·문장·낱말이 본체이고 시선은 맨 위 한 줄이다 */
.rx { font: 14px/1.8 Inter, sans-serif; color: var(--text-primary); }
.rx-lead {
  font-weight: 700; color: var(--accent);
  padding: 7px 11px; margin-bottom: 8px; border-radius: 8px;
  background: rgba(96, 18, 243,.08);
}
.rx-ask { color: var(--text-secondary); margin-bottom: 10px; font-size: 13.5px; }
.rx-block {
  border: 1px solid var(--border, rgba(0,0,0,.1)); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 9px;
}
/* 지금 이 학생에게 급한 칸 — 틀렸으면 자기가 고른 선지, 맞았으면 정답 선지 */
.rx-block.is-focus { border-color: rgba(16,185,129,.55); background: rgba(16,185,129,.05); }
.rx-choice { font-weight: 600; margin-bottom: 7px; }
.rx-tag {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 6px;
  background: var(--accent); color: #fff; font: 700 11px Inter, sans-serif;
}
.rx-row { display: flex; gap: 8px; margin-top: 5px; }
.rx-n {
  flex: 0 0 30px; font: 700 11px Inter, sans-serif; color: var(--text-secondary);
  padding-top: 4px;
}
.rx-body { flex: 1 1 auto; }
/* 놓치면 안 되는 낱말 — 원문에 실재함을 생성 단계에서 기계로 대조했다 */
.rx-w { background: rgba(250,204,21,.42); color: inherit; border-radius: 3px; padding: 0 1px; }
.rx-next .rx-body { color: var(--text-primary); font-weight: 400; }
.rx-next .rx-n { color: var(--accent); }

/* ── D · 총평 ── */
.ar-patterns { margin: 0 0 4px; padding-left: 18px; }
.ar-patterns li {
  font: 13px/1.8 Inter, sans-serif; color: var(--text-primary); margin-bottom: 7px;
}

/* ── 푸터 ── B~D 안에서만 순서를 이끈다. 사이드바 이동은 그대로 자유다. */
.ar-btn-next {
  border: none; background: linear-gradient(135deg, #6012f3, #7c3aed); color: #fff;
}
.ar-btn-sub { background: var(--bg-secondary); }
.ar-btn.is-locked { opacity: .4; cursor: not-allowed; filter: grayscale(1); }

/* ── 겨냥 동형 ── 기출에서 근거를 놓친 문항에 대응하는 동형 문항 표식. */

.ar-axis { color: #a1490a; }
/* 근거 칸 안의 한 줄이었다가 섹션으로 독립한 자리(2026-09-06 answerreview.js _arRenderAxis) */
.ar-axis-card {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 11px 13px; border-radius: 10px;
  background: rgba(180,83,9,.06); border: 1px solid rgba(180,83,9,.18);
}
.ar-axis-card .ar-axis { font: 700 14px Inter, sans-serif; }
.ar-axis-card .ar-rx-gloss { flex: 1 1 100%; margin: 0; }
.ar-chip.ar-axis-chip { background: rgba(180,83,9,.14); color: #a1490a; font-weight: 700; }
.ar-axis-note { font: 12.5px/1.75 Inter, sans-serif; color: var(--text-dim); margin-bottom: 4px; }
/* 함정 축 풀이 — 축 이름 바로 아래 한 줄. 이름만으로는 전이되지 않는다. */
.ar-rx-gloss {
  display: block; margin-top: 5px;
  font: 12.5px/1.7 Inter, sans-serif; color: var(--text-dim);
}
.ar-axis-list { margin-top: 8px; }
.ar-axis-list li { font-size: 12.5px; }

/* ── 학생 서술 입력(①·⑥) ──────────────────────────────────────────────────
   이 두 칸이 오답노트의 본문이다. 보조 입력처럼 작게 두면 아무도 안 쓰므로,
   선지·해설과 같은 크기·같은 무게로 둔다. */
.ar-write { margin-top: 12px; }
.ar-write-q {
  display: block; margin-bottom: 7px;
  font: 700 13px Inter, sans-serif; color: var(--text-primary);
}
.ar-write-in {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border-mid); background: var(--bg-elevated);
  font: 400 13px/1.6 Inter, sans-serif; color: var(--text-primary);
  transition: border-color .15s ease;
}
.ar-write-in:focus { outline: none; border-color: var(--accent); background: var(--accent-soft); }
.ar-step-rewrite { border-color: rgba(15, 157, 88, .4); background: rgba(15, 157, 88, .03); }

/* 관측 층 표시 — 시선이 아니라 화면 스크롤로 잰 값임을 숨기지 않는다. */
.ar-level-tag {
  margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  font: 600 10px Inter, sans-serif; letter-spacing: .04em;
  color: var(--text-dim); background: var(--bg-secondary); border: 1px solid var(--border-soft);
}

/* 제재 한 줄 — 표에서 내려온 자리. 방향만 가리키므로 조용해야 한다. */
.rp-class-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  margin: 10px 0 2px; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: 10px;
  font-size: 13px; color: var(--text-secondary, #64748b);
}
.rp-class-lh {
  font-size: 12px; font-weight: 600;
  color: var(--text-dim, #94a3b8);
}
.rp-class-say { flex-basis: 100%; font-size: 12px; color: var(--text-dim, #94a3b8); }

/* ── 오답노트 목록 (js/notebook.js) ──────────────────────────────────────────
   진단 화면과 같은 상자를 쓰되, 여기는 고르고 되짚는 자리라 위쪽 절반이 필터다.
   칩은 눌러서 켜고 끄는 것이므로 켜진 상태가 한눈에 보여야 한다. */
.nb-count {
  margin-left: auto; margin-right: 12px;
  font-size: 12px; font-weight: 400;
  color: var(--text-dim, #94a3b8);
}
.nb-filters {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; margin-bottom: 16px;
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--bg-elevated, rgba(0,0,0,.02));
}
.nb-frow { display: flex; align-items: flex-start; gap: 10px; }
.nb-fh {
  flex: 0 0 92px; padding-top: 5px;
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary, #64748b);
}
.nb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-chip {
  font: inherit; font-size: 12px; line-height: 1;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-primary); color: var(--text-secondary, #64748b);
  cursor: pointer;
}
.nb-chip:hover { border-color: var(--accent); color: var(--accent); }
.nb-chip.is-on {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.nb-n { margin-left: 5px; opacity: .65; font-variant-numeric: tabular-nums; }

.nb-list { display: flex; flex-direction: column; gap: 12px; }
.nb-card {
  padding: 14px 16px;
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--bg-primary);
}
.nb-psg { font-size: 12px; color: var(--text-dim, #94a3b8); }
.nb-kind {
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border-soft); color: var(--text-secondary, #64748b);
}
/* 발문 — 이 줄이 있어야 노트 한 장만 읽고도 무슨 문제였는지 되살아난다. */
.nb-stem {
  margin: 8px 0 6px; font-size: 14px; line-height: 1.6;
  color: var(--text-primary, #16171c);
}
.nb-ans { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0; font-size: 13px; }
.nb-ans-mine { color: var(--text-secondary, #64748b); }
.nb-ans-mine.is-x { color: #dc2626; }
.nb-ans-ok { color: #0f9d58; }
/* 오답노트 카드의 실제 정답률 (2026-09-16 사용자) — 「내 답/정답」 바로 아래.
   32%를 틀린 것과 82%를 틀린 것은 내 답만 봐서는 구별되지 않는다. */
.nb-rate {
  margin: 4px 0 2px; font: 12px/1.6 Inter, sans-serif; color: var(--text-dim);
}
.nb-rate b { font-weight: 700; color: var(--text-primary); }
.nb-rate-band {
  padding: 1px 6px; border-radius: 9px;
  font: 700 10px Inter, sans-serif; color: var(--text-dim);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
}
.nb-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}
.nb-goto, .nb-open, .nb-reset {
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  cursor: pointer; white-space: nowrap;
}
.nb-goto:hover, .nb-open:hover, .nb-reset:hover { background: var(--accent); color: #fff; }
.nb-gate { display: flex; gap: 8px; margin-top: 12px; }

/* 원장이 이 자리를 어떻게 보고 있는가 — 노트가 따로 판정하지 않고 읽어 온 것이다.
   색은 진단 화면의 상태 색(.rp-open 등)을 그대로 쓴다. 두 화면에서 같은 자리가 다른
   색으로 보이면 학생은 둘을 다른 것으로 읽는다. */
.nb-led {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid currentColor;
}
.nb-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nb-due {
  font-size: 12px; color: var(--text-dim, #94a3b8);
  font-variant-numeric: tabular-nums;
}
.nb-due.is-due { color: var(--accent); font-weight: 600; }
.nb-rv {
  font: inherit; font-size: 12px; line-height: 1;
  padding: 7px 11px; border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-primary); color: var(--text-secondary, #64748b);
  cursor: pointer; white-space: nowrap;
}
.nb-rv:hover { border-color: var(--accent); color: var(--accent); }
.nb-rv.is-again:hover { border-color: #d97706; color: #d97706; }
.nb-open.is-due { background: var(--accent); color: #fff; }
.nb-open.is-due:hover { filter: brightness(1.08); }

/* 오답 동형 재시험 — 계획·결과 화면은 모의고사 상자(.mk-slot)를 그대로 빌려 쓴다.
   두 화면이 하는 일이 같아서(시험지를 보여 주고 짚어보기로 보낸다) 모양이 갈리면 안 된다. */
.nb-runbar { align-items: center; margin: 0 0 16px; }
.nb-runsay { font-size: 12px; color: var(--text-dim, #94a3b8); }
.rt-skip {
  margin: 6px 0 0; padding-left: 18px;
  font-size: 13px; line-height: 1.9; color: var(--text-secondary, #64748b);
}
.rt-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nb-retest { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.nb-retest-h { font-size: 12px; font-weight: 600; color: var(--text-dim, #94a3b8); }
.nb-retest .rt-marks { margin-top: 0; }
.rt-mark {
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 9px; border-radius: 999px; border: 1px solid currentColor;
}
.rt-mark.is-o { color: #0f9d58; }
.rt-mark.is-x { color: #dc2626; }

/* 같은 말을 몇 번 썼나 — 학생의 문장이 주인공이라 그것만 크게 두고 나머지는 물린다. */
.nb-group { margin: 0 0 18px; }
.nb-group-hd {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 6px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
}
.nb-group-n { font-size: 12px; color: var(--text-dim, #94a3b8); font-variant-numeric: tabular-nums; }
.nb-glist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nb-glist li { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 2px solid var(--accent); }
.nb-gq { font-size: 14px; line-height: 1.6; color: var(--text-primary, #16171c); }
.nb-gm { font-size: 11px; color: var(--text-dim, #94a3b8); }

/* ── 종이 한 장 (js/notebook.js nbPrint) ─────────────────────────────────────
   화면에는 없는 물건이다. 인쇄할 때만 나타나고, 그때는 이것만 나타난다. */
#notePrint { display: none; }
@media print {
  /* 앱은 통째로 감춘다. 오버레이·사이드바·시계까지 전부 body 의 직계라 이 한 줄로 걷힌다.
     진단 리포트를 인쇄할 때(body.mr-printing)는 css/mockreport.css 가 같은 일을 리포트 기준으로 한다. */
  body:not(.mr-printing):not(.rp-printing) > *:not(#notePrint) { display: none !important; }
  body { background: #fff; }
  #notePrint {
    display: block;
    padding: 0; margin: 0;
    color: #000; font-size: 10.5pt; line-height: 1.55;
  }
  .np-top { border-bottom: 1.5pt solid #000; padding-bottom: 6pt; margin-bottom: 10pt; }
  .np-top h1 { margin: 0; font-size: 15pt; letter-spacing: -.01em; }
  .np-meta { margin-top: 3pt; font-size: 9pt; color: #444; }
  /* 노트 한 장이 페이지에 걸쳐 잘리면 훑을 수가 없다. */
  .np-card {
    page-break-inside: avoid; break-inside: avoid;
    padding: 7pt 0; border-bottom: .5pt solid #bbb;
  }
  .np-hd { display: flex; gap: 7pt; align-items: baseline; font-size: 9pt; color: #333; }
  .np-i { font-weight: 700; color: #000; }
  .np-mark { font-weight: 700; }
  .np-psg { font-weight: 600; }
  .np-when { margin-left: auto; color: #666; }
  .np-stem { margin: 3pt 0 2pt; font-weight: 600; }
  .np-ans, .np-evid, .np-rate { margin: 1pt 0; }
  .np-evid { color: #333; }
  .np-rate { color: #444; font-size: 8.5pt; }
  /* 학생이 쓴 문장 — 이 종이의 본문이라 유일하게 눈에 걸리게 둔다. */
  .np-said {
    margin: 3pt 0 1pt; padding-left: 6pt;
    border-left: 2pt solid #000; font-weight: 600;
  }
  .np-cause { margin-top: 2pt; font-size: 9pt; color: #555; }
  @page { margin: 14mm 13mm; }
}

@media screen and (max-width: 640px) {
  .nb-frow { flex-direction: column; gap: 4px; }
  .nb-fh { flex: none; padding-top: 0; }
}

/* ── 오답노트 카드 ────────────────────────────────────────────────────────
   가장 큰 글자는 학생이 쓴 문장이다. 축·근거·처방은 그것을 둘러싼 사실이다. */
.nt-list { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 4px; }
.nt-card {
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border-mid); background: var(--bg-elevated);
}
.nt-hd { display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px; }
.nt-qn {
  flex: none; padding: 2px 8px; border-radius: 6px;
  font: 700 11px Inter, sans-serif; color: var(--accent); background: var(--accent-soft);
}
.nt-title { font: 700 14px Inter, sans-serif; color: var(--text-primary); }
.nt-said {
  margin: 8px 0; padding: 10px 12px; border-left: 3px solid var(--accent);
  background: var(--bg-secondary); border-radius: 0 8px 8px 0;
  font: 400 14px/1.7 Inter, sans-serif; color: var(--text-primary);
}
.nt-said-lbl {
  display: block; margin-bottom: 4px;
  font: 600 10px Inter, sans-serif; letter-spacing: .06em; color: var(--text-faint);
}
.nt-causes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.nt-cause {
  padding: 3px 9px; border-radius: 999px;
  font: 600 11px Inter, sans-serif; color: var(--warning);
  background: rgba(180, 83, 9, .08); border: 1px solid rgba(180, 83, 9, .2);
}
.nt-evid { margin-top: 8px; font: 13px/1.6 Inter, sans-serif; color: var(--text-dim); }
.ar-retest li { margin-bottom: 8px; }

/* ── 학습 원장 화면 ────────────────────────────────────────────────────────
   점수 그래프가 아니라 '남은 일'을 보여주는 화면이다. 색은 상태를 가르는 데만 쓴다. */
.rp-lead { font: 700 17px/1.5 Inter, sans-serif; color: var(--text-primary); margin-bottom: 4px; }
.rp-sub  { font: 13px/1.6 Inter, sans-serif; color: var(--text-dim); margin-bottom: 6px; }
.rp-note { margin-top: 8px; font: 12px/1.6 Inter, sans-serif; color: var(--text-dim); }
.rp-thin {
  margin: 14px 0; padding: 12px 14px; border-radius: 10px;
  background: var(--bg-secondary); border: 1px solid var(--border-soft);
  font: 13px/1.7 Inter, sans-serif; color: var(--text-dim);
}

.rp-axisgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px; margin: 10px 0 4px;
}
.rp-axis {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border-mid); background: var(--bg-elevated);
}
.rp-axis-name  { font: 700 14px Inter, sans-serif; color: var(--text-primary); }
.rp-axis-state { font: 600 11px Inter, sans-serif; }
.rp-axis-meta  { font: 11px Inter, sans-serif; color: var(--text-faint); }
.rp-open     { border-color: rgba(220, 38, 38, .35);  background: rgba(220, 38, 38, .04); }
.rp-open     .rp-axis-state { color: var(--danger); }
.rp-cleared  { border-color: rgba(180, 83, 9, .35);   background: rgba(180, 83, 9, .04); }
.rp-cleared  .rp-axis-state { color: var(--warning); }
.rp-mastered { border-color: rgba(15, 157, 88, .4);   background: rgba(15, 157, 88, .05); }
.rp-mastered .rp-axis-state { color: var(--success); }
.rp-unseen   { opacity: .5; }
.rp-unseen   .rp-axis-state { color: var(--text-faint); }

.rp-crosswrap { overflow-x: auto; margin: 10px 0 4px; }
.rp-cross { border-collapse: collapse; font: 13px Inter, sans-serif; min-width: 420px; }
.rp-cross th, .rp-cross td {
  padding: 7px 10px; text-align: center; border: 1px solid var(--border-soft);
  color: var(--text-dim);
}
.rp-cross th { font-weight: 600; background: var(--bg-secondary); white-space: nowrap; }
.rp-cross .rp-rowh { text-align: left; color: var(--text-primary); }
.rp-cross .rp-hot {
  font-weight: 700; color: var(--danger); background: rgba(220, 38, 38, .07);
}
.rp-verdict {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(96, 18, 243, .4); background: rgba(96, 18, 243, .04);
  font: 14px/1.7 Inter, sans-serif; color: var(--text-primary);
}
.rp-rx { margin-top: 8px; font: 400 13px/1.7 Inter, sans-serif; }

.rp-next { margin: 10px 0 4px; padding-left: 22px; }
.rp-next li { margin-bottom: 7px; font: 14px/1.6 Inter, sans-serif; color: var(--text-primary); }
.rp-when { margin-left: 8px; font: 12px Inter, sans-serif; color: var(--accent); }
.rp-w    { margin-left: 6px; font: 12px Inter, sans-serif; color: var(--text-faint); }

.rp-wk { display: flex; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
.rp-wk-h { flex: none; font: 600 12px Inter, sans-serif; color: var(--text-faint); min-width: 62px; }
.rp-clean { border-color: var(--border-soft); }
.rp-clean .rp-axis-state { color: var(--text-dim); }

/* ── 맞춤 모의고사 시험지 ──────────────────────────────────────────────────── */
.mk-slots { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; }

/* ── 조판 결과의 난도 한 줄 (2026-09-16) ────────────────────────────────────
   목표만 적고 결과를 숨기면 시험지가 거짓말을 한다. 우리 지문 풀로 한 부에 낼 수 있는
   어려운 문항은 3~9개이고 수능 평균은 8개다 — 못 닿을 때 학생이 알아야 한다. */
.mk-diff {
  display: flex; gap: 11px; align-items: baseline;
  margin: 10px 0 2px; padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--border-soft); background: var(--bg-secondary);
}
.mk-diff-h {
  flex: 0 0 auto; font: 600 11px Inter, sans-serif;
  color: var(--text-faint); letter-spacing: .06em;
}
.mk-diff-b { font: 12.5px/1.7 Inter, sans-serif; color: var(--text-dim); }
.mk-diff-b b { color: var(--text-primary); font-weight: 700; }
.mk-diff-t {
  margin: 0 3px; padding: 1px 7px; border-radius: 10px; white-space: nowrap;
  font: 700 11px Inter, sans-serif; color: var(--text-dim);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
}
/* 수치를 몰라 못 맞춘 편수 — 조용히 넘기면 "맞췄다"로 읽힌다 */
.mk-diff-x { display: block; margin-top: 3px; color: var(--text-faint); }
.mk-slot {
  display: flex; gap: 12px; padding: 13px 15px; border-radius: 11px;
  border: 1px solid var(--border-mid); background: var(--bg-elevated);
}
.mk-slot-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px Inter, sans-serif; color: #fff; background: var(--accent);
}
.mk-slot-body { flex: 1; min-width: 0; }
.mk-slot-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.mk-slot-area { font: 700 13px Inter, sans-serif; color: var(--text-primary); }
.mk-slot-meta { font: 12px Inter, sans-serif; color: var(--text-dim); }
.mk-fresh, .mk-seen {
  padding: 2px 7px; border-radius: 999px; font: 600 10px Inter, sans-serif;
}
.mk-fresh { color: var(--success); background: rgba(15, 157, 88, .1); }
.mk-seen  { color: var(--text-dim); background: var(--bg-secondary); }
.mk-slot-topic { font: 600 15px/1.5 Inter, sans-serif; color: var(--text-primary); }
.mk-slot-id { font: 11px Inter, monospace; color: var(--text-faint); margin-top: 2px; }
.mk-slot-hits { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mk-hits-h { font: 600 11px Inter, sans-serif; color: var(--text-faint); }
.mk-slot-hits.mk-none { font: 12px Inter, sans-serif; color: var(--text-faint); }
.mk-howto {
  margin-top: 8px; padding: 12px 14px; border-radius: 10px;
  background: var(--bg-secondary); border: 1px solid var(--border-soft);
}
.mk-howto p { margin: 0 0 8px; font: 13px/1.7 Inter, sans-serif; color: var(--text-dim); }
.mk-howto p:last-child { margin-bottom: 0; }
.ar-chip.mk-maybe { opacity: .62; border-style: dashed; }

/* 모의고사 응시 중 화면에 남는 하나뿐인 시계 */
.mk-chip {
  position: fixed; top: 14px; right: 18px; z-index: 8500;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--bg-glass); border: 1px solid var(--border-mid);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  font: 600 13px Inter, sans-serif; color: var(--text-primary);
}
.mk-chip-n { color: var(--text-dim); font-size: 12px; }
.mk-chip-t { font-variant-numeric: tabular-nums; font-size: 15px; }
.mk-chip.is-over .mk-chip-t { color: var(--danger); }
/* 응시 중에는 되돌아보기 화면으로 새는 길을 막는다 — 실전이어야 한다. */
body.mock-running #appSidebar .sb-btn:not(#sbHome) { opacity: .35; pointer-events: none; }
.mk-review { flex: none; align-self: center; }

/* ═══ 정답풀이 문항 화면 (2026-09-02 재설계) ═══
   순서가 곧 주장이다: 정오답 → 선지 판정 → 근거 → 오답노트 → 시선.
   앞의 셋은 문항의 사실, 넷째는 학생의 말, 다섯째는 관측치다. 셋을 섞지 않는다. */

/* ── 정오 배지 — 이 화면에서 학생이 가장 먼저 보는 것 ── */
.ar-mark {
  display: flex; align-items: stretch; gap: 14px;
  padding: 14px 16px; border-radius: 12px; margin-bottom: 14px;
  border: 1px solid var(--border-mid); background: var(--bg-elevated);
}
.ar-mark.is-o { border-color: rgba(15,157,88,.45);  background: rgba(15,157,88,.05); }
.ar-mark.is-x { border-color: rgba(220,38,38,.42);  background: rgba(220,38,38,.04); }
.ar-mark.is-none { border-color: var(--border-mid); background: var(--bg-secondary); }
.ar-mark-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 84px; padding-right: 14px;
  border-right: 1px solid var(--border-soft);
  font: 700 30px/1 Inter, sans-serif; color: var(--text-primary);
}
.ar-mark.is-o .ar-mark-badge { color: #0b7a44; }
.ar-mark.is-x .ar-mark-badge { color: #c02626; }
.ar-mark-badge span { font: 600 11px Inter, sans-serif; color: var(--text-dim); white-space: nowrap; }
.ar-mark-body { display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 0; }
.ar-mark-row { display: flex; gap: 9px; align-items: baseline; }
.ar-mark-lbl {
  flex: 0 0 auto; min-width: 34px; white-space: nowrap; font: 600 11px Inter, sans-serif;
  color: var(--text-faint); letter-spacing: .06em;
}
.ar-mark-val { font: 400 13px/1.65 Inter, sans-serif; color: var(--text-primary); }
.ar-mark-val.is-dim { color: var(--text-faint); }

/* ── 채점 화면의 문항별 표 (2026-09-16 사용자) ──────────────────────────────
   O/X 칩 한 줄이던 자리다. 칩은 정오와 유형밖에 못 말해서, 학생이 "몇 번을 틀렸나"만 알고
   화면을 떠났다. 표는 같은 이동(줄을 누르면 그 문항)을 하면서 견줄 것을 나란히 놓는다 —
   내 답 · 정답 · 실제 정답률 · 남들이 가장 많이 고른 오답.
   정답률이 없는 지문(동형 · 2016.11 수능 이전)에서는 그 두 칸을 아예 안 만든다. */
.ar-qtable-wrap { overflow-x: auto; margin-bottom: 12px; }
.ar-qtable {
  width: 100%; border-collapse: collapse;
  font: 13px Inter, sans-serif; color: var(--text-primary);
}
.ar-qtable th {
  padding: 6px 10px; text-align: left; white-space: nowrap;
  font: 600 11px Inter, sans-serif; color: var(--text-faint); letter-spacing: .06em;
  border-bottom: 1px solid var(--border-mid);
}
.ar-qtable td {
  padding: 9px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle;
}
.ar-qt-row { cursor: pointer; transition: background .12s ease; }
.ar-qt-row:hover { background: rgba(22,23,28,.04); }
.ar-qt-row:hover .ar-qt-go { opacity: .9; }
.ar-qt-q b { font-weight: 700; }
.ar-qt-kind {
  margin-left: 6px; padding: 1px 6px; border-radius: 9px;
  font: 700 10px Inter, sans-serif; color: var(--text-dim);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
}
/* 정오는 칸 하나에만 색을 준다 — 줄 전체를 칠하면 정답률이 안 읽힌다 */
.ar-qt-mark { font: 700 15px Inter, sans-serif; text-align: center; width: 34px; }
.ar-qt-row.is-o .ar-qt-mark    { color: #0b7a44; }
.ar-qt-row.is-x .ar-qt-mark    { color: #c02626; }
.ar-qt-row.is-none .ar-qt-mark { color: var(--text-faint); }
.ar-qt-mine, .ar-qt-ans { font-size: 15px; white-space: nowrap; }
.ar-qt-row.is-x .ar-qt-mine { color: #c02626; }
.ar-qt-ans { color: #0b7a44; }
.ar-qt-rate { font: 700 13px Inter, sans-serif; }
.ar-qt-band, .ar-qt-flag {
  margin-left: 5px; padding: 1px 6px; border-radius: 9px; white-space: nowrap;
  font: 700 10px Inter, sans-serif; color: var(--text-dim);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
}
.ar-qt-flag { color: #c02626; background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.25); }
.ar-qt-flag.is-mine { color: #b45309; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
.ar-qt-t { white-space: nowrap; }
.ar-qt-none { color: var(--text-faint); }
.ar-qt-go { width: 18px; text-align: right; font-weight: 700; opacity: .35; }
.ar-qt-src { font: 11px Inter, sans-serif; color: var(--text-faint); margin: -4px 0 12px; }

/* ── ② 근거는 어디에 ── */
.ar-ev { display: flex; flex-direction: column; gap: 10px; }
.ar-ev-row { display: flex; gap: 11px; align-items: baseline; }
.ar-ev-lbl {
  flex: 0 0 auto; min-width: 68px; white-space: nowrap; font: 600 11px Inter, sans-serif;
  color: var(--text-faint); letter-spacing: .06em;
}
.ar-ev-val { font: 13px/1.8 Inter, sans-serif; color: var(--text-primary); min-width: 0; }
/* 유형 게이트가 닫힌 문항 — 적어 둔 근거 문단이 전부가 아니라는 단서. */
.ar-ev-gate { display: block; font: 11px/1.6 Inter, sans-serif; color: #2563eb; margin-top: 2px; }
.ar-ev-rel {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 5px;
  background: var(--bg-secondary); font: 600 11px Inter, sans-serif; color: var(--text-dim);
}

/* ── ③ 오답노트 — 강제하지 않으므로 눈에 띄되 무겁지 않게 ── */
.ar-step-note { border-color: rgba(15,157,88,.34); background: rgba(15,157,88,.025); }
.ar-step-sub {
  margin-left: 8px; font: 400 11.5px Inter, sans-serif;
  color: var(--text-faint); letter-spacing: 0;
}
.ar-note-q { font: 700 13px Inter, sans-serif; color: var(--text-primary); margin-bottom: 9px; }
.ar-note-hint { font: 400 11.5px Inter, sans-serif; color: var(--text-faint); }
.ar-cause-opts { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.ar-cause-btn {
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  font: 400 12.5px Inter, sans-serif;
  border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-primary);
  transition: border-color .15s ease, background .15s ease;
}
.ar-cause-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.ar-cause-btn.is-picked {
  border-color: var(--accent); background: var(--accent-soft); font-weight: 700;
}

/* ── ④ 문항별 시선 — 시선데이터 메뉴의 표를 그대로 담는다 ──
   표+히트맵 덩어리는 실측 폭이 px로 못박히므로(gazereport.js), 좁은 정답풀이 패널에서는
   가로로 스크롤시킨다. 여기서 줄여 그리면 히트맵 좌표가 어긋난다. */
.ar-gazeblock { overflow-x: auto; padding-bottom: 4px; }
.ar-gazeblock .gr-q-wrap { margin: 0; }
.ar-gazeblock .gr-q-row { margin-bottom: 0; }

/* 오답노트 카드의 정오 표식 */
.nt-mark {
  padding: 1px 7px; border-radius: 5px;
  font: 700 11px Inter, sans-serif;
}
.nt-mark.is-o { background: rgba(15,157,88,.14); color: #0b7a44; }
.nt-mark.is-x { background: rgba(220,38,38,.12); color: #c02626; }
.nt-mark.is-n { background: rgba(22,23,28,.07); color: var(--text-dim); }

/* ═══ 정답풀이 2차 보강 (2026-09-02) ═══ */

/* ── 문항 유형 — 어휘·사실·추론·비판 ── */
.ar-kind { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: -4px 0 12px; }
.ar-kind-badge {
  padding: 3px 10px; border-radius: 999px;
  font: 700 12px Inter, sans-serif;
  background: rgba(96, 18, 243,.1); color: #6012f3; border: 1px solid rgba(96, 18, 243,.28);
}
.ar-kind-badge.is-hybrid { background: rgba(180,83,9,.1); color: #a1490a; border-color: rgba(180,83,9,.3); }
.ar-kind-tag {
  padding: 2px 7px; border-radius: 5px;
  font: 700 10.5px Inter, sans-serif; color: var(--text-dim); background: var(--bg-secondary);
}
.ar-kind-say { font: 12px/1.6 Inter, sans-serif; color: var(--text-dim); }

/* (선지별 근거 목록은 2026-09-06 선지 줄 안으로 접혔다 — .ar-cmeta / .ar-cquote) */

/* ── 지문의 근거 문장 — 선지 번호를 문장 머리 위에 적는다 ──
   ::before 로 넣는 이유: 지문에 노드를 끼우면 textContent가 달라져 줄 수·글자수·히트맵
   클론이 조금씩 어긋난다. 보이는 것만 더하고 데이터는 건드리지 않는다.
   [글을 밀지 않는다 — 2026-09-22] 번호를 글자처럼 끼우면 그 폭만큼 줄바꿈이 바뀌어, 지문 위에 칠하는 줄별
   읽기(line-overlay.js)가 기록된 줄과 짝을 못 짓는다. 번호를 글 흐름 밖(문장 첫 줄 위)에 띄운다.
   색은 선지마다 다르다(--ar-c, 줄별 읽기와 같은 다섯 색). 정답은 번호를 채우고, 고른 오답은 빨간 고리. */
.ar-evid-sent {
  position: relative;
  box-shadow: inset 0 -2px 0 var(--ar-c, #6012f3);
  border-radius: 2px;
}
.ar-evid-sent::before {
  content: attr(data-ar-mark);
  position: absolute; left: 0; top: -1.15em;
  padding: 0 3px; border-radius: 4px; line-height: 1.25; white-space: nowrap;
  font: 700 11px Inter, sans-serif; color: var(--ar-c, #6012f3);
  background: #fff; border: 1px solid var(--ar-c, #6012f3);
  pointer-events: none; z-index: 4;
}
.ar-evid-sent.is-answer::before { background: var(--ar-c, #6012f3); color: #fff; }
.ar-evid-sent.is-mine:not(.is-answer)::before { box-shadow: 0 0 0 1.5px #dc2626; }

/* ── 기준을 못 낼 때의 빈 칸 ── */
.ar-peer {
  margin: 0 0 16px; padding: 13px 15px; border-radius: 11px;
  background: var(--bg-secondary); border: 1px solid var(--border-soft);
}
.ar-peer.is-loading, .ar-peer.is-empty {
  font: 12.5px/1.6 Inter, sans-serif; color: var(--text-dim);
}
.ar-peer-hd { font: 700 12px Inter, sans-serif; color: var(--text-faint); letter-spacing: .06em; margin-bottom: 8px; }
.ar-peer-note { margin-top: 8px; font: 11.5px/1.6 Inter, sans-serif; color: var(--text-faint); }

/* ── 총평의 한 마디 ── */
.ar-closing {
  margin: 4px 0 18px; padding: 15px 17px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(96, 18, 243,.09), rgba(124,58,237,.06));
  border: 1px solid rgba(96, 18, 243,.28);
}
.ar-closing-hd { font: 700 12px Inter, sans-serif; color: #6012f3; letter-spacing: .08em; margin-bottom: 7px; }
.ar-closing-said { font: 13.5px/1.85 Inter, sans-serif; color: var(--text-primary); }
.ar-closing-next {
  margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(96, 18, 243,.22);
  font: 13.5px/1.85 Inter, sans-serif; color: var(--text-primary);
}
.ar-closing-lbl {
  display: inline-block; margin-right: 7px; padding: 2px 8px; border-radius: 5px;
  background: rgba(96, 18, 243,.14); color: #6012f3;
  font: 700 11px Inter, sans-serif; letter-spacing: .04em;
}

/* 총평 칩에 붙는 갈래 이름 */
.ar-chip-kind {
  margin-left: 5px; padding: 1px 5px; border-radius: 4px;
  background: rgba(22,23,28,.06); color: var(--text-dim);
  font: 700 10px Inter, sans-serif;
}

/* ── 정답풀이 안의 문항별 시선 — 표 아래에 히트맵 ──
   시선데이터 모달은 가로가 넉넉해 표 오른쪽에 붙이지만, 정답풀이 패널은 지문을 가리지
   않을 만큼만 넓다. 옆에 붙이면 히트맵이 손톱만 해지고 가로 스크롤이 생긴다. */
.ar-gazeblock .gr-q-row { flex-direction: column; gap: 10px; }
.ar-gazeblock .gr-t-card { flex: 1 1 auto; max-width: 100%; width: 100%; }
.ar-gazeblock .gr-q-heat { width: 100%; justify-content: center; flex-wrap: wrap; }

/* ── 학습 원장의 함정 타일 (2026-09-02 문구 개편) ── */
.rp-lede { font: 13px/1.8 Inter, sans-serif; color: var(--text-dim); margin: 2px 0 4px; }
.rp-axis-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.rp-axis-gloss { font: 11.5px/1.5 Inter, sans-serif; color: var(--text-dim); }
.rp-axis-meta  { font: 11px/1.5 Inter, sans-serif; color: var(--text-faint); }
.rp-axis-meta b { color: var(--danger); }
/* 그 축 문항들의 평균 정답률 — 바로 위 '몇 번 만나 몇 번 틀림'과 표본이 달라, 장수를
   붙이고 한 칸 띄워 둔다(2026-09-16). */
.rp-axis-rate {
  margin-top: 3px; padding-top: 4px; border-top: 1px dashed var(--border-soft);
  font: 11px/1.5 Inter, sans-serif; color: var(--text-dim);
}
.rp-axis-rate b { color: var(--text-primary); font-weight: 700; }
.rp-axis-rate-n { color: var(--text-faint); }

/* ── 난도로 보면 — 나만 흘린 자리인가 (2026-09-16 사용자) ──────────────────
   경계는 정답률 60%. 원천 자료의 난이도 표에서 「중」이 시작하는 자리다. */
.rp-diffgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px; margin: 10px 0 4px;
}
.rp-diff {
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--border-mid); background: var(--bg-elevated);
}
/* 다수가 맞힌 문항을 틀린 쪽이 더 급한 자리다 — 색으로만 말하고 글로는 말하지 않는다. */
.rp-diff.is-mine   { border-color: rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .04); }
.rp-diff.is-shared { border-color: var(--border-mid); }
.rp-diff-hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.rp-diff-t  { font: 700 14px Inter, sans-serif; color: var(--text-primary); }
.rp-diff-sub { font: 11px Inter, sans-serif; color: var(--text-faint); }
.rp-diff-n {
  margin-left: auto; padding: 1px 8px; border-radius: 10px; white-space: nowrap;
  font: 700 11px Inter, sans-serif; color: var(--text-dim);
  background: var(--bg-secondary); border: 1px solid var(--border-soft);
}
.rp-diff-x { margin-top: 6px; font: 12px/1.6 Inter, sans-serif; color: var(--text-dim); }
.rp-diff-x b { color: var(--text-primary); }
.rp-diff-cause { margin-top: 6px; font: 12px/1.6 Inter, sans-serif; color: var(--text-dim); }
.rp-diff-cause b { color: var(--text-primary); font-weight: 600; }
/* 분모를 밝히는 줄 — 옆 칸의 회차 횟수와 세는 대상이 다르다. 안 적으면 두 수가 같은
   표본으로 읽힌다. */
.rp-diff-src { font-size: 11px; }

/* 바깥 기준선 — 학생 데이터가 한 장도 없어도 참인 눈금. 표본이 없을 때는 이것이 이 절의
   전부이고, 쌓인 뒤에는 내 분포를 견줄 자가 된다(2026-09-16). */
.rp-diff-base {
  margin: 4px 0 10px; padding: 10px 13px; border-radius: 10px;
  font: 12.5px/1.75 Inter, sans-serif; color: var(--text-dim);
  background: var(--bg-secondary); border: 1px solid var(--border-soft);
}
.rp-diff-base b { color: var(--text-primary); font-weight: 700; }
.rp-diff-basesrc { display: block; margin-top: 3px; font-size: 11px; color: var(--text-faint); }

/* 표본 1~3장 — 낱개로만 적는다. 평균도 「대부분」도 쓰지 않는다. */
.rp-diff-one-h {
  margin: 8px 0 4px; font: 600 11px Inter, sans-serif;
  color: var(--text-faint); letter-spacing: .06em;
}
.rp-diff-ones { list-style: none; margin: 0 0 6px; padding: 0; }
.rp-diff-ones li {
  padding: 5px 0; border-bottom: 1px solid var(--border-soft);
  font: 12.5px/1.6 Inter, sans-serif; color: var(--text-dim);
}
.rp-diff-ones li:last-child { border-bottom: none; }
.rp-diff-ones b { color: var(--text-primary); font-weight: 700; }
.rp-diff-mine { color: #c02626; font-weight: 600; }
.rp-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px;
  font: 11.5px/1.7 Inter, sans-serif; color: var(--text-faint);
}
.rp-legend .rp-k {
  display: inline-block; margin-right: 5px; padding: 1px 6px; border-radius: 5px;
  font: 700 11px Inter, sans-serif; border: 1px solid var(--border-mid);
}
.rp-legend .rp-k.rp-open     { color: var(--danger);  border-color: rgba(220,38,38,.35);  background: rgba(220,38,38,.05); }
.rp-legend .rp-k.rp-cleared  { color: var(--warning); border-color: rgba(180,83,9,.35);   background: rgba(180,83,9,.05); }
.rp-legend .rp-k.rp-mastered { color: var(--success); border-color: rgba(15,157,88,.4);   background: rgba(15,157,88,.06); }
.rp-legend .rp-k.rp-clean    { color: var(--text-dim); }
.rp-legend .rp-k.rp-unseen   { color: var(--text-faint); }

/* ── 맞춤 모의고사 · '이 지문으로 다시 볼 것' 칩 (2026-09-02 문구 개편) ──
   이름을 풀어 쓰면서 칩이 길어졌다. 한 줄에 이름, 그 아래 작은 글씨로 몇 문항인지 둔다 —
   가로로 이어 붙이면 카드 폭을 넘겨 줄이 깨진다. */
.mk-slot-hits { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.mk-hits-h {
  flex: 0 0 auto; margin-right: 2px;
  font: 700 11px Inter, sans-serif; color: var(--text-faint); line-height: 24px;
}
.mk-hit {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 5px 10px; border-radius: 9px;
  background: rgba(96, 18, 243,.09); border: 1px solid rgba(96, 18, 243,.26);
}
.mk-hit b { font: 700 12.5px Inter, sans-serif; color: #6012f3; }
.mk-hit-n { font: 600 10.5px Inter, sans-serif; color: var(--text-dim); }
.mk-hit.mk-maybe { background: rgba(180,83,9,.07); border-color: rgba(180,83,9,.26); }
.mk-hit.mk-maybe b { color: #a1490a; }

/* 짧은 이름은 꼬리표로만 남긴다 — 문제집·해설서에서 만나는 말이라 아예 지우지는 않는다. */
.rp-axis-tag, .ar-axis-tag {
  display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px;
  background: rgba(22,23,28,.06); color: var(--text-faint);
  font: 600 10px Inter, sans-serif; vertical-align: middle;
}
.rp-axis-name { line-height: 1.35; }

/* 교차표 행 머리 — 풀어 쓴 이름이 들어가도록 폭을 준다(줄바꿈 허용). */
.rp-cross .rp-rowh { max-width: 190px; white-space: normal; line-height: 1.4; }

/* ── 학습분석: 갈래 네 칸 (2026-09-02 B안) ──
   함정 여덟 칸보다 위에 놓이는 큰 그물. 상태 딱지 대신 막대와 비율로 보여준다 —
   갈래는 '극복'을 판정하는 단위가 아니라 어디가 약한지 가리키는 나침반이기 때문이다. */
.rp-kindgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; margin: 10px 0 4px;
}
.rp-kind {
  display: flex; flex-direction: column; gap: 5px;
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--border-mid); background: var(--bg-elevated);
}
.rp-kind.is-worst { border-color: rgba(220,38,38,.4); background: rgba(220,38,38,.04); }
.rp-kind-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.rp-kind-name { font: 700 15px Inter, sans-serif; color: var(--text-primary); }
.rp-kind-pct {
  font: 700 13px Inter, sans-serif; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.rp-kind.is-worst .rp-kind-pct { color: var(--danger); }
.rp-kind-bar {
  height: 6px; border-radius: 999px; background: rgba(22,23,28,.08); overflow: hidden;
}
.rp-kind-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(96, 18, 243,.75), rgba(124,58,237,.75));
}
.rp-kind.is-worst .rp-kind-bar span { background: linear-gradient(90deg, #dc2626, #ef4444); }
.rp-kind-meta { font: 11.5px/1.5 Inter, sans-serif; color: var(--text-faint); }
.rp-kind-meta b { color: var(--danger); }
.rp-kind-say  { font: 11px/1.5 Inter, sans-serif; color: var(--text-dim); }

/* ── 학습분석: 세 물음 (2026-09-02 C안) ──
   섹션이 곧 진단의 순서다 — 무엇에서 → 왜 → 다음에 무엇을. */
.rp-q { margin: 22px 0 0; }
.rp-q:first-of-type { margin-top: 14px; }
.rp-q-hd {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font: 700 16px Inter, sans-serif; color: var(--text-primary);
}
.rp-q-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--accent); color: #fff; font: 700 12px Inter, sans-serif;
}
.rp-sub-title {
  margin: 14px 0 4px;
  font: 700 12.5px Inter, sans-serif; color: var(--text-dim); letter-spacing: .02em;
}
.rp-q .rp-sub-title:first-child { margin-top: 0; }

/* 겨냥 목록 — 항목마다 처방 한 줄 */
.rp-next li { margin-bottom: 11px; }
.rp-next-hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.rp-next-rx {
  margin-top: 4px; padding: 7px 10px; border-radius: 8px;
  background: var(--bg-secondary);
  font: 12.5px/1.7 Inter, sans-serif; color: var(--text-primary);
}
.rp-next-kind {
  margin-bottom: 12px; padding: 11px 13px; border-radius: 10px;
  background: rgba(96, 18, 243,.07); border: 1px solid rgba(96, 18, 243,.25);
  font: 13px/1.75 Inter, sans-serif; color: var(--text-primary);
}
.rp-next-kind-h {
  display: inline-block; margin-right: 7px; padding: 1px 7px; border-radius: 5px;
  background: rgba(96, 18, 243,.16); color: #6012f3; font: 700 11px Inter, sans-serif;
}

/* ── 학습분석: 좋아지고 있나 (2026-09-02 D안) ──
   점수 곡선이 아니라 '자리가 어디까지 옮겨졌나'를 한 줄 띠로 보여준다. */
.rp-pg-bar {
  display: flex; gap: 2px; height: 12px; margin: 10px 0 7px;
  border-radius: 999px; overflow: hidden; background: rgba(22,23,28,.06);
}
.rp-pg-seg { display: block; height: 100%; }
.rp-pg-mastered { background: #0f9d58; }
.rp-pg-clean    { background: rgba(15,157,88,.42); }
.rp-pg-cleared  { background: #d97706; }
.rp-pg-open     { background: rgba(220,38,38,.55); }
.rp-pg-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font: 11.5px Inter, sans-serif; color: var(--text-dim);
}
.rp-pg-key { display: inline-flex; align-items: center; gap: 5px; }
.rp-pg-key b { color: var(--text-primary); }
.rp-pg-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.rp-pg-sum { margin-left: auto; color: var(--text-faint); }
.rp-pg-move {
  margin-top: 10px; padding: 11px 13px; border-radius: 10px;
  background: var(--bg-secondary);
  font: 13px/1.75 Inter, sans-serif; color: var(--text-primary);
}
.rp-pg-up   { color: var(--success); }
.rp-pg-down { color: var(--danger); }

/* 맞춤 모의고사 — 기록이 얇을 때의 한 줄. 문을 잠그는 대신 사실을 적는다. */
.mk-thin {
  margin: 10px 0 4px; padding: 11px 13px; border-radius: 10px;
  background: rgba(180,83,9,.07); border: 1px solid rgba(180,83,9,.26);
  font: 12.5px/1.75 Inter, sans-serif; color: var(--text-primary);
}

/* 눌리기는 하지만 이번 회차 기록이 없는 버튼 — 죽은 것과 구분한다(0.3은 disabled의 몫). */
.sb-btn.sb-empty { opacity: .55; }
.sb-btn.sb-empty:hover { opacity: 1; }

/* ═══ AI오답노트 창의 글자 위계 (2026-09-02) ═══
   창 제목 > 물음 제목 > 소제목 > 본문 > 카드 속 숫자. 크기가 곧 읽는 순서다.
   물음 아래 내용은 번호 배지만큼 들여쓴다 — 어디까지가 그 물음의 답인지 눈에 보인다. */
#ledgerReportBody .rp-q { margin: 26px 0 0; }
#ledgerReportBody .rp-q:first-of-type { margin-top: 16px; }
#ledgerReportBody .rp-q-hd {
  gap: 10px; margin-bottom: 12px;
  font: 700 18px/1.4 Inter, sans-serif; color: var(--text-primary);
}
#ledgerReportBody .rp-q-n {
  width: 26px; height: 26px; border-radius: 8px; font-size: 14px;
}
/* 물음의 답은 번호 배지 폭(26)+간격(10)만큼 들여쓴다. */
#ledgerReportBody .rp-q > *:not(.rp-q-hd) { padding-left: 36px; }

/* 소제목 — '갈래로 보면'과 '함정으로 보면'이 대등하게 눈에 들어와야 한다. */
#ledgerReportBody .rp-sub-title {
  display: flex; align-items: center; gap: 7px;
  margin: 20px 0 8px;
  font: 700 15px Inter, sans-serif; color: var(--text-primary); letter-spacing: -.01em;
}
#ledgerReportBody .rp-sub-title::before {
  content: ''; width: 4px; height: 15px; border-radius: 2px;
  background: var(--accent); flex: 0 0 auto;
}
#ledgerReportBody .rp-q > .rp-sub-title:first-child,
#ledgerReportBody .rp-sub-title:first-child { margin-top: 0; }

/* 본문 설명은 소제목보다 작게. */
#ledgerReportBody .rp-lede { font: 12.5px/1.75 Inter, sans-serif; color: var(--text-dim); margin: 2px 0 8px; }
#ledgerReportBody .rp-note { font: 12px/1.7 Inter, sans-serif; }

/* 물음 밖의 큰 섹션(좋아지고 있나)은 물음과 같은 무게로 둔다. */
#ledgerReportBody .ar-section-title {
  margin: 26px 0 10px;
  font: 700 18px/1.4 Inter, sans-serif; color: var(--text-primary);
}
#ledgerReportBody .ar-section-title ~ *:not(.ar-section-title):not(.rp-q) { padding-left: 0; }

/* 카드 안 숫자는 가장 작게 — 위계의 맨 아래다. */
#ledgerReportBody .rp-axis-name { font-size: 13.5px; }
#ledgerReportBody .rp-axis-gloss, #ledgerReportBody .rp-axis-meta { font-size: 11px; }
#ledgerReportBody .rp-kind-name { font-size: 16px; }

/* ── AI오답노트: 한 마디 ── 화면 전체를 한 문단으로 옮긴 자리라 맨 위에서 가장 눈에 띈다. */
#ledgerReportBody .rp-say {
  margin: 14px 0 6px; padding: 16px 18px; border-radius: 13px;
  background: linear-gradient(135deg, rgba(96, 18, 243,.10), rgba(124,58,237,.06));
  border: 1px solid rgba(96, 18, 243,.28);
}
#ledgerReportBody .rp-say-hd {
  font: 700 12px Inter, sans-serif; color: #6012f3; letter-spacing: .08em; margin-bottom: 8px;
}
#ledgerReportBody .rp-say-body { font: 14px/1.85 Inter, sans-serif; color: var(--text-primary); }
#ledgerReportBody .rp-say-do {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(96, 18, 243,.22);
}
#ledgerReportBody .rp-say-do-h {
  font: 700 12.5px Inter, sans-serif; color: var(--text-primary); margin-bottom: 6px;
}
#ledgerReportBody .rp-say-do ol { margin: 0; padding-left: 20px; }
#ledgerReportBody .rp-say-do li { font: 13px/1.8 Inter, sans-serif; color: var(--text-primary); margin-bottom: 4px; }

/* 노트 카드의 날짜 */
.nt-when { margin-left: auto; font: 11px Inter, sans-serif; color: var(--text-faint); }
#ledgerReportBody .nt-list { margin-top: 8px; }

/* ── 맞춤 모의고사: 카드 색의 뜻 ──
   같은 자리를 겨냥해도 '반드시 시험되는 문항'과 '골랐을 때만 시험되는 문항'은 값이 다르다.
   색으로 갈라 놓고 뜻을 적지 않으면, 학생은 두 색을 임의의 장식으로 읽는다. */
.mk-legend {
  margin: 12px 0 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--bg-secondary); border: 1px solid var(--border-soft);
}
.mk-legend-row {
  display: flex; align-items: flex-start; gap: 9px;
  font: 12.5px/1.7 Inter, sans-serif; color: var(--text-dim);
}
.mk-legend-row + .mk-legend-row { margin-top: 7px; }
.mk-legend-row b { color: var(--text-primary); }
.mk-swatch {
  flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; border-radius: 4px;
}
.mk-sw-sure  { background: rgba(96, 18, 243,.16);  border: 1px solid rgba(96, 18, 243,.45); }
.mk-sw-maybe { background: rgba(180,83,9,.12);   border: 1px solid rgba(180,83,9,.45); }

/* 맞춤 모의고사: 갈래 칩 — 1차 기준이라 함정 칩보다 진하고 크게. */
.mk-kind {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 6px 12px; border-radius: 9px;
  background: rgba(15,157,88,.10); border: 1px solid rgba(15,157,88,.34);
}
.mk-kind b { font: 700 13.5px Inter, sans-serif; color: #0b7a44; }
.mk-slot-kinds { margin-bottom: 6px; }

/* 약점이 아니라 실전 구성을 채우며 함께 나오는 갈래 — 겨냥한 것과 눈으로 갈린다. */
.mk-kind.mk-kind-side { background: rgba(22,23,28,.05); border-color: var(--border-mid); }
.mk-kind.mk-kind-side b { color: var(--text-dim); }
.mk-sw-kind { background: rgba(15,157,88,.14); border: 1px solid rgba(15,157,88,.45); }

/* ── 맞춤 모의고사: 칩을 격자로 세운다 (2026-09-02) ──
   이름 길이가 제각각이라(‘사실’ vs ‘누구 얘기인지 바꿔치기’) 폭이 들쭉날쭉했다.
   라벨과 칩을 두 칸으로 나누고 칩은 같은 폭의 격자에 넣는다 — 두 줄(갈래·함정)이 같은
   컨테이너 폭을 쓰므로 열 수가 같아지고, 칩이 세로로도 줄을 맞춘다. */
.mk-slot-hits {
  display: grid; grid-template-columns: 68px minmax(0, 1fr);
  align-items: start; gap: 8px;
}
.mk-slot-hits.mk-none { display: block; }
.mk-hits-h {
  line-height: 1.45; padding-top: 5px; text-align: right;
  font: 700 11px Inter, sans-serif; color: var(--text-faint);
}
.mk-chips {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 6px; min-width: 0;
}
.mk-chips-wide { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); margin-bottom: 4px; }

/* 칩 자체도 크기를 맞춘다 — 이름 두 줄까지는 같은 높이로 버틴다. */
.mk-chips .mk-kind, .mk-chips .mk-hit {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 46px; padding: 7px 11px; border-radius: 9px; min-width: 0;
}
/* 이름 자리를 두 줄로 고정한다 — 한 줄짜리('사실')와 두 줄짜리('누구 얘기인지 바꿔치기')가
   섞이면 칩 높이가 48과 65로 갈려 격자가 어긋나 보인다. 빈 줄을 감수하고 높이를 맞춘다. */
.mk-chips .mk-kind b, .mk-chips .mk-hit b {
  display: flex; align-items: center; min-height: 34px;
  font-size: 12.5px; line-height: 1.35; word-break: keep-all;
}
.mk-chips .mk-hit-n { font-size: 10.5px; line-height: 1.3; }

/* 범례 한 줄은 '색 견본 + 설명 한 덩어리'다 — 설명을 감싸지 않으면 flex 가 문장을
   토막 내 칸처럼 늘어놓는다(2026-09-02에 실제로 그렇게 깨졌다). */
.mk-legend-text { display: block; min-width: 0; }
.mk-legend-text b { display: inline; }

/* ── 글의 분류 — 제재와 전개 방식 ───────────────────────────────────────────
   두 축을 색으로 갈라 둔다. 제재(무엇을 다루는가)는 남색, 전개 방식(어떻게 펼치는가)은
   자주색이다. 같은 색으로 두면 두 축이 한 덩어리로 읽혀, 갈라 센 뜻이 사라진다. */
.ar-cf-tag { display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:700; white-space:nowrap; }
.ar-cf-field { background:#e8eefc; color:#1e3a8a; border:1px solid #c7d7f7; }
.ar-cf-way   { background:#f3e9fb; color:#6b21a8; border:1px solid #e2cdf3; }
.ar-cf-fused { display:inline-block; margin-left:6px; padding:3px 9px; border-radius:999px;
  background:#fff4e5; color:#9a3412; border:1px solid #fcd9b0; font-size:12px; font-weight:700; }

.ar-classify { margin:14px 0 6px; padding:12px 14px; border-radius:12px;
  background:#fafbff; border:1px solid #e6eaf5; }
.ar-cf-row { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.ar-cf-row + .ar-cf-row { margin-top:8px; }
.ar-cf-say { flex:1 1 260px; min-width:0; font-size:13px; color:#4b5563; line-height:1.55; }

.passage-field { margin:2px 0 10px; }
.mk-slot-cf { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 4px; }
.rp-class-h { margin:12px 0 6px; font-size:13px; font-weight:700; color:#374151; }

/* ── 맞춤 모의고사: 글의 분류 칩 (2026-09-02) ────────────────────────────────
   갈래(초록)·함정(파랑/갈색)이 문항을 고른다면 이것은 글을 고른다. 색을 자주로 갈라
   두는 것은 고르는 대상이 다르기 때문이다 — 같은 색이면 넷째 기준이 아니라 함정의
   변종으로 읽힌다. 설명 문장이 길어 칸을 넓게 잡는다. */
.mk-cf {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 46px; padding: 7px 11px; border-radius: 9px; min-width: 0;
  background: rgba(107,33,168,.07); border: 1px solid rgba(107,33,168,.28);
}
.mk-cf .mk-hit-n { line-height: 1.4; word-break: keep-all; }
/* 이미 잘하는 쪽 — 구성을 채우려고 들어간 글이라 겨냥한 것과 눈으로 갈린다. */
.mk-cf.mk-cf-side { background: rgba(22,23,28,.05); border-color: var(--border-mid); }
.mk-cf.mk-cf-side .ar-cf-tag { background: rgba(22,23,28,.06); color: var(--text-dim);
  border-color: var(--border-mid); }
.mk-slot-cfs { margin-top: 6px; }
.mk-slot-cfs .mk-chips { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.mk-sw-cf { background: rgba(107,33,168,.14); border: 1px solid rgba(107,33,168,.45); }

/* 시험지 전체 요약의 한 줄 — 슬롯 이름 · 배지 · 이유를 세 칸으로 세운다. */
.mk-cfrow {
  display: grid; grid-template-columns: 92px minmax(0, auto) minmax(0, 1fr);
  align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 5px;
  border-radius: 9px; background: rgba(22,23,28,.03); border: 1px solid var(--border-soft);
}
.mk-cfrow-slot { font: 700 11.5px Inter, sans-serif; color: var(--text-faint); text-align: right; }
.mk-cfrow-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.mk-cfrow-why { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; word-break: keep-all; }
@media screen and (max-width: 720px) {
  .mk-cfrow { grid-template-columns: 1fr; gap: 5px; }
  .mk-cfrow-slot { text-align: left; }
}

/* 맞춤 모의고사: 이 시험지가 어느 골격인가 (2026-09-02) */
.mk-bp { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px;
  background: rgba(22,23,28,.03); border: 1px solid var(--border-soft); }
.mk-bp-tag { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px;
  background: rgba(96, 18, 243,.10); border: 1px solid rgba(96, 18, 243,.32);
  font: 700 12px Inter, sans-serif; color: #3e0aa8; white-space: nowrap; }
.mk-bp-say { flex: 1 1 260px; min-width: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }

/* ── 맞춤 모의고사: 시험지 짜기 패널 (2026-09-02) ────────────────────────────
   칩은 전부 같은 꼴이다 — 분량이든 제재든 "누르면 켜지는 것"이라는 사실이 먼저 읽혀야
   한다. 켜진 칩만 남색으로 채운다. */
.mk-opts { margin: 12px 0 6px; border: 1px solid var(--border-mid);
  border-radius: 12px; background: #fff; overflow: hidden; }
.mk-opts-sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; cursor: pointer; list-style: none; background: rgba(22,23,28,.02); }
.mk-opts-sum::-webkit-details-marker { display: none; }
.mk-opts-sum::before { content: '▸'; color: var(--text-faint); font-size: 12px; }
.mk-opts[open] .mk-opts-sum::before { content: '▾'; }
.mk-opts-title { font: 700 13.5px Inter, sans-serif; color: var(--text-strong, #16171c); }
.mk-opts-now { font-size: 12.5px; color: var(--text-dim); }
.mk-opts-more { margin-left: auto; font-size: 11.5px; color: var(--text-faint); }
.mk-opts[open] .mk-opts-more { visibility: hidden; }
.mk-opt-real { display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: rgba(15,157,88,.12); border: 1px solid rgba(15,157,88,.4);
  font: 700 10.5px Inter, sans-serif; color: #0b7a44; }

.mk-opts-body { padding: 4px 14px 12px; border-top: 1px solid var(--border-soft); }
.mk-optrow { display: grid; grid-template-columns: 116px minmax(0, 1fr);
  gap: 10px; align-items: start; padding: 10px 0; }
.mk-optrow + .mk-optrow { border-top: 1px dashed var(--border-soft); }
.mk-optrow-h { padding-top: 5px; text-align: right;
  font: 700 12px Inter, sans-serif; color: var(--text-faint); }
.mk-optrow-b { min-width: 0; }
.mk-optchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-optrow-note { margin-top: 6px; font-size: 11.5px; line-height: 1.5;
  color: var(--text-dim); word-break: keep-all; }

.mk-opt { padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid var(--border-mid);
  font: 600 12.5px Inter, sans-serif; color: var(--text-dim); white-space: nowrap; }
.mk-opt:hover { border-color: rgba(96, 18, 243,.45); color: #3e0aa8; }
.mk-opt.is-on { background: rgba(96, 18, 243,.10); border-color: rgba(96, 18, 243,.5);
  color: #3e0aa8; font-weight: 700; }

.mk-optmin { display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-faint); }
.mk-optmin-in { width: 62px; padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--border-mid); font: 600 12.5px Inter, sans-serif; }

.mk-opts-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.mk-opts-hint { font-size: 11.5px; color: var(--text-faint); }
#mockExamBody.is-rebuilding { opacity: .55; transition: opacity .12s; }

@media screen and (max-width: 720px) {
  .mk-optrow { grid-template-columns: 1fr; gap: 5px; }
  .mk-optrow-h { text-align: left; padding-top: 0; }
}

/* 맞춤 모의고사의 응시 진입 갈림길(시선 켜고 / 시선 없이)은 2026-09-17 걷어냈다 — 늘 시선으로 치른다(mockexam.js mockRequestStart). */

/* 지금 조건에서 고를 수 없는 칩 — 숨기지 않고 흐리게 남긴다(2026-09-02).
   사라지면 "원래 없던 것"으로 읽히지만, 흐리게 남으면 "조건을 풀면 생긴다"로 읽힌다. */
.mk-opt.is-off { opacity: .38; cursor: not-allowed; background: rgba(22,23,28,.03);
  border-style: dashed; }
.mk-opt.is-off:hover { border-color: var(--border-mid); color: var(--text-dim); }
.mk-capped { display: inline; color: #9a3412; font-weight: 700; }

/* ── 맞춤 모의고사: 맨 아래 참조 (2026-09-02) ────────────────────────────────
   골격 설명과 색 범례를 여기로 내렸다. 한 번 읽으면 다음부터는 안 읽는 설명글이라
   시험지보다 뒤에, 시험지보다 작게 둔다. */
.mk-ref { margin: 20px 0 4px; padding: 12px 14px 10px; border-radius: 10px;
  background: rgba(22,23,28,.025); border: 1px solid var(--border-soft); }
.mk-ref-h { margin-bottom: 8px; font: 700 11px Inter, sans-serif;
  letter-spacing: .02em; color: var(--text-faint); }
.mk-ref-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }
.mk-ref-row .mk-swatch { flex: 0 0 auto; margin-top: 3px; }
.mk-ref-row .mk-bp-tag { flex: 0 0 auto; padding: 1px 8px; font-size: 10.5px; }
.mk-ref-text { flex: 1 1 auto; min-width: 0; display: block;
  font-size: 11px; line-height: 1.6; color: var(--text-faint); word-break: keep-all; }
.mk-ref-text b { color: var(--text-dim); }


/* ── Gaze Plot ── 지금은 화면에 없다(2026-09-09 뗐다 · js/gazeplot.js 참고)
   히트맵 옆에 같은 크기로 서던 칸의 규칙이다. 겉모양은 .gr-heat-cell 을 그대로 쓰고, 여기서는
   클론 글자를 눌러 선과 원이 앞에 서게 하는 것과 칸 아래 관측 한 줄만 더했다.
   되살릴 때 이 규칙이 필요하므로 지우지 않고 둔다. */
.gr-heat-cell .gp-clone,
.gr-heat-scale .gp-clone { opacity: .42; }
.gr-plot-cap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin-top: 5px; font: 10.5px/1.5 Inter, sans-serif; color: var(--text-faint);
}
.gr-plot-k { display: inline-flex; align-items: center; gap: 4px; }
.gr-plot-k::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1px solid; }
.gr-plot-k.is-fwd::before { border-color: #0f9d58; background: rgba(15,157,88,.22); }
.gr-plot-k.is-reg::before { border-color: #dc2626; background: rgba(220,38,38,.22); }
.gr-plot-n { flex: 1 1 100%; }

/* ── 선지별 길 — 정답풀이 안에 앉힌 리플레이의 그 그림 (2026-09-12) ──
   리플레이에서는 모달을 꽉 채우지만 여기서는 세로로 흐르는 칸이라, 높이를 줄 수에서
   정하고(gazestill.js renderChoiceLink) 폭은 이 칸의 폭을 그대로 받는다. 히트맵과 달리
   px 로 못박힌 좌표가 없어 가로 스크롤이 필요 없다 — 캔버스를 그 폭에 맞춰 그린다. */
.ar-linkwrap[hidden] { display: none; }
.ar-linkblock { position: relative; }
.ar-linkblock canvas { max-width: 100%; }
.gs-link-foot {
  margin-top: 8px; font: 12px/1.75 Inter, sans-serif; color: var(--text-dim);
  word-break: keep-all;
}
.gs-link-foot > div { margin-top: 2px; }
/* [설명 줄을 다시 편다 — 2026-09-13] 문항 화면에서 설명 줄을 접던 까닭(바로 위 왕복표 범례)이
   사라졌다 — 표를 걷었고, 선지 번호 아래 시간이 무엇인지도 이 줄이 말한다. */

/* ── 정답풀이 동안 지문 문단 첫머리의 「N문단」 (2026-09-22) ──
   글 흐름 밖(문단 상자 안쪽 위 여백 18px)에 띄운다 — 글을 밀면 지문 위 줄별 읽기가 기록된 줄과 짝을 못 짓는다.
   번호는 CSS 카운터가 매긴다(문단 순서 = .passage-para 순서). */
#passagePanel.ar-para-no { counter-reset: arpara; }
#passagePanel.ar-para-no .passage-para { position: relative; counter-increment: arpara; }
#passagePanel.ar-para-no .passage-para::before {
  content: '¶' counter(arpara);   /* 「1문단」(한국어)이었다 — 학생 화면은 영어(2026-09-28). 리포트 · 근거 문구의 ¶N 과 같은 꼴 */
  position: absolute; top: 2px; left: 22px;
  font: 700 11px/1.3 Inter, sans-serif; color: #6366f1; letter-spacing: .02em;
  pointer-events: none; z-index: 4;
}

/* ── 줄별 읽기 — 정답설명의 한 줄 막대(범례 · 문단 목차 · 켬/끔). 그림은 왼쪽 실제 지문과 원래 문항 위에
   바로 칠한다(answerreview/line-overlay.js, 2026-09-22). */
.gs-lr-rail { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.gs-lr-para {
  padding: 2px 9px; border-radius: 999px; cursor: pointer; font: 600 11px Inter, sans-serif;
  background: #fff; border: 1px solid #0d9488; color: #115e59;
}
.gs-lr-para.is-full { background: rgba(13,148,136,.22); }
.gs-lr-para.is-none { background: #f8fafc; border-color: #cbd5e1; color: #94a3b8; }
.ar-line-toggle {
  padding: 2px 10px; border-radius: 999px; cursor: pointer; font: 600 11px Inter, sans-serif;
  background: #fff; border: 1px solid #94a3b8; color: #475569; margin-left: auto;
}
.gs-lr-foot { margin-top: 6px; font: 12px/1.7 Inter, sans-serif; color: var(--text-dim); word-break: keep-all; }
.gs-lr-foot summary { cursor: pointer; color: #9ca3af; font-weight: 600; margin-top: 2px; }
.gs-lr-more > div { margin-top: 2px; }

/* 읽기 속도 제목 뒤의 단서 — 「읽은 36%의 속도」 (2026-09-12) */
.ar-std-sub { font-weight: 400; color: var(--text-dim); font-size: 11px; }

/* ── 두 선지 맞대기 (2026-09-13, 진단 v2 E) ──
   파랑 = 실제로는(정답지가 아는 것) · 주황 = 학생 머릿속(추정) · 빨간 점선 = 학생에게 없던 연결.
   맞음·틀림 초록/빨강은 판정 칩(ar-v-ok · ar-v-miss)과 같은 색을 쓴다. */
.ar-mt { display: flex; flex-direction: column; gap: 10px; }
.ar-mt-lead { font: 13px/1.75 Inter, sans-serif; color: var(--text-primary); }
.ar-mt-rule {
  font: 12.5px/1.7 Inter, sans-serif; color: var(--text-dim);
  padding: 8px 11px; border-radius: 8px; background: var(--bg-secondary);
}
.ar-mt-card {
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border: 1px solid var(--border-mid); border-radius: 10px; background: var(--bg-elevated);
}
.ar-mt-choice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font: 600 13.5px/1.6 Inter, sans-serif; color: var(--text-primary); }
.ar-mt-num { font-weight: 700; }
.ar-mt-text { flex: 1 1 260px; min-width: 0; }
.ar-mt-badge, .ar-mt-truth, .ar-mt-ok { font: 700 11px Inter, sans-serif; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.ar-mt-badge.is-mine { background: var(--text-primary); color: #fff; }
.ar-mt-badge.is-ans  { background: rgba(37,99,235,.12); color: #1d4ed8; }
.ar-mt-truth.is-t, .ar-mt-ok.is-t { background: rgba(71,85,105,.12); color: #475569; }   /* 초록은 사람 색 전용(2026-09-14) */
.ar-mt-side[class*="ar-tone-"] { border-left: 3px solid var(--t); }
.ar-mt-who[class*="ar-tone-"] { color: var(--t); }
.ar-mt-truth.is-f, .ar-mt-ok.is-f { background: rgba(220,38,38,.10); color: #c02626; }
.ar-mt-tail { font: 12px/1.6 Inter, sans-serif; color: var(--text-dim); }
.ar-mt-parts { display: flex; flex-direction: column; gap: 6px; }
.ar-mt-part {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px;
  padding: 8px; border-radius: 8px; background: var(--bg-secondary);
}
.ar-mt-side {
  flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 6px 9px; border-radius: 6px; background: var(--bg-elevated); border: 1px solid var(--border-soft);
}
.ar-mt-side.is-bogi { border-color: rgba(15,118,110,.30); background: rgba(15,118,110,.05); }
.ar-mt-who { font: 700 11px Inter, sans-serif; color: var(--text-dim); letter-spacing: .02em; }
.ar-mt-say { font: 600 13px/1.6 Inter, sans-serif; color: var(--text-primary); }
.ar-mt-quote { font: 12px/1.7 "AppleMyungjo", "Batang", serif; color: var(--text-dim); }
.ar-mt-rel {
  flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px;
  font: 12px/1.45 Inter, sans-serif; color: var(--text-dim); text-align: right;
}
.ar-mt-row {
  display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 8px;
  font: 13px/1.7 Inter, sans-serif; color: var(--text-primary);
}
.ar-mt-lbl { flex: 0 0 auto; white-space: nowrap; font: 700 11px Inter, sans-serif; letter-spacing: .03em; }
.ar-mt-row.is-truth { background: rgba(37,99,235,.08); }
.ar-mt-row.is-truth .ar-mt-lbl { color: #1d4ed8; }
.ar-mt-row.is-guess { background: rgba(180,83,9,.09); }
.ar-mt-row.is-guess .ar-mt-lbl { color: #a1490a; }
.ar-mt-row.is-seen { padding-block: 2px; font-size: 12px; color: var(--text-dim); }
.ar-mt-row.is-seen .ar-mt-lbl { color: var(--text-faint); }
.ar-mt-miss {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
  border: 1.5px dashed rgba(220,38,38,.55); border-radius: 10px;
}
.ar-mt-miss-hd { font: 700 12px Inter, sans-serif; color: #c02626; }
.ar-mt-miss ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ar-mt-miss li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 13px/1.6 Inter, sans-serif; }
.ar-mt-miss small { flex-basis: 100%; font-size: 11.5px; color: var(--text-dim); }
.ar-mt-type {
  font: 700 11px Inter, sans-serif; padding: 1px 7px; border-radius: 4px; white-space: nowrap;
  background: rgba(220,38,38,.08); color: #c02626;
}
@media screen and (max-width: 520px) {
  .ar-mt-rel { align-items: flex-start; text-align: left; }
  .ar-mt-row { flex-direction: column; gap: 2px; }
}

/* ── 연결 그림 (2026-09-14, 2025 기출) ──
   말의 주인 → 지문의 말 → 선지 둘. 검은 실선 = 이어진 연결 · 빨간 점선 = 학생에게 없던 연결 ·
   주황 점선 = 이렇게 이었을 것이라는 추정. 색은 두 선지 맞대기(ar-mt)와 같다. */
.ar-map { display: flex; flex-direction: column; gap: 8px; }
/* 가로 스크롤을 두지 않는다(2026-09-14 사용자) — 그림 폭은 600 으로 짜고 창에 맞춰 줄어든다. 600 보다 크게는 안 늘린다. */
.ar-map-scroll {
  overflow: hidden; padding: 8px 6px;
  border: 1px solid var(--border-mid); border-radius: 10px; background: var(--bg-elevated);
}
.ar-map-scroll > svg { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto; }
.ar-map svg text { font-family: Inter, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
/* 사람 색 7 · <보기> 회색 · 빨강(잘못된 곳 전용) — 2026-09-14 사용자. 번호는 readcoach.js rcOwnerTones 가 매긴다.
   글자에도 쓰는 진한 톤(흰 바탕 대비 4.5:1 이상) + 상자 바탕 옅은 톤. 빨강·주황 계열은 사람 색에 넣지 않는다. */
:root {
  --ar-tone-1: #15803d; --ar-tone-1-bg: #ecf7f0;   /* 초록 */
  --ar-tone-2: #1d4ed8; --ar-tone-2-bg: #ecf1fd;   /* 파랑 */
  --ar-tone-3: #6d28d9; --ar-tone-3-bg: #f3eefd;   /* 보라 */
  --ar-tone-4: #8a5a00; --ar-tone-4-bg: #faf3e3;   /* 황토 */
  --ar-tone-5: #0e7490; --ar-tone-5-bg: #e8f5f8;   /* 청록 */
  --ar-tone-6: #a21caf; --ar-tone-6-bg: #fbeefc;   /* 자홍 — 기출 전체로 넓히며 더함(한 그림 주인 최대 7) */
  --ar-tone-7: #4d7c0f; --ar-tone-7-bg: #f1f6e8;   /* 올리브 */
  --ar-tone-0: #57606a; --ar-tone-0-bg: #f2f4f6;   /* <보기> */
  --ar-err: #c02626;
}
.ar-tone-1 { --t: var(--ar-tone-1); --tb: var(--ar-tone-1-bg); }
.ar-tone-2 { --t: var(--ar-tone-2); --tb: var(--ar-tone-2-bg); }
.ar-tone-3 { --t: var(--ar-tone-3); --tb: var(--ar-tone-3-bg); }
.ar-tone-4 { --t: var(--ar-tone-4); --tb: var(--ar-tone-4-bg); }
.ar-tone-5 { --t: var(--ar-tone-5); --tb: var(--ar-tone-5-bg); }
.ar-tone-6 { --t: var(--ar-tone-6); --tb: var(--ar-tone-6-bg); }
.ar-tone-7 { --t: var(--ar-tone-7); --tb: var(--ar-tone-7-bg); }
.ar-tone-0 { --t: var(--ar-tone-0); --tb: var(--ar-tone-0-bg); }

/* 상자 — 바탕은 불투명(여러 줄로 쌓으면 선이 상자 뒤로 지나간다) */
.ar-map-owner rect { fill: var(--tb, var(--bg-elevated)); stroke: var(--t, var(--text-primary)); stroke-width: 1.6; }
.ar-map-owner text { fill: var(--t, var(--text-primary)); }
.ar-map-claim rect { fill: var(--tb, var(--bg-elevated)); stroke: var(--t, var(--border-mid)); stroke-width: 1.5; }
.ar-map-claim.is-none rect { stroke-dasharray: 4 3; }
.ar-map-tag { fill: var(--t, var(--text-dim)); font-size: 11px; font-weight: 700; }
.ar-map-choice rect { fill: var(--bg-secondary); stroke: #4b5563; stroke-width: 1.3; }
.ar-map-choice.is-mine rect { stroke: var(--ar-err); stroke-width: 2; }
.ar-map-choice.is-mine .ar-map-t2 { fill: var(--ar-err); font-weight: 700; }
.ar-map-choice.is-right rect { stroke: var(--text-primary); stroke-width: 2; }   /* 맞힌 문항 — 고르신 답 · 정답 */
.ar-map-choice.is-right .ar-map-t2 { fill: var(--text-primary); font-weight: 700; }
.ar-map-t1 { fill: var(--text-primary); font-size: 13px; font-weight: 600; }
.ar-map-tc { fill: var(--text-primary); font-size: 13.5px; font-weight: 700; }
.ar-map-t2 { fill: var(--text-dim); font-size: 11px; }
/* 선 — 이어진 연결은 그 말 주인의 색, 잘못된 곳은 빨강(없던 연결 점선 · 추정 점점선), 사람 사이·다리의 이어진 연결은 회색 */
.ar-map-e { fill: none; stroke-width: 1.6; }
.ar-map-e.is-have { stroke: var(--t, #6b7280); }
.ar-map-e.is-stub { stroke: var(--t, #6b7280); stroke-width: 3; stroke-linecap: round; }
.ar-map-e.is-miss { stroke: var(--ar-err); stroke-width: 2; stroke-dasharray: 7 4; }
.ar-map-e.is-wrong { stroke: var(--ar-err); stroke-width: 2.2; stroke-dasharray: 1 5; stroke-linecap: round; }
.ar-map-lbg { fill: var(--bg-elevated); }
.ar-map-l { font-size: 11.5px; font-weight: 600; fill: var(--t, var(--text-dim)); }
.ar-map-l.is-miss, .ar-map-l.is-wrong { fill: var(--ar-err); font-weight: 700; }
.ar-map-g { fill: none; stroke-width: 1.5; stroke: var(--t, var(--border-mid)); stroke-dasharray: 6 4; }
.ar-map-g.is-miss { stroke: var(--ar-err); }
.ar-map-gl { font-size: 11.5px; font-weight: 700; fill: var(--t, var(--text-dim)); }
.ar-map-gl.is-miss { fill: var(--ar-err); }
/* 그림 아래 말 — 말 인용은 그 사람 색, 잘못을 짚는 말은 빨강 */
.ar-map-q { color: var(--t, inherit); font-weight: 600; }
.ar-map-err { color: var(--ar-err); font-weight: 600; }
.ar-map-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 12px/1.6 Inter, sans-serif; color: var(--text-dim); }
.ar-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ar-map-legend svg { width: 34px; height: 8px; }
.ar-map-sw { display: inline-block; width: 22px; height: 12px; border: 1.5px dashed var(--ar-err); border-radius: 3px; }
.ar-map-cap { font: 13px/1.75 Inter, sans-serif; color: var(--text-primary); }
.ar-map-more { display: flex; flex-direction: column; gap: 4px; }
.ar-map-more-hd { font: 700 12px Inter, sans-serif; color: var(--text-dim); }
.ar-map-more ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ar-map-more li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 13px/1.6 Inter, sans-serif; color: var(--text-primary); }

/* ═══ 기출 실전 (js/mockpaper.js) ═══ */
.mk-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.mk-mode-btn { text-align: left; padding: 10px 14px; border-radius: 10px; cursor: pointer;
  background: var(--bg-secondary); border: 1px solid var(--border-mid);
  font: 700 14px Inter, sans-serif; color: var(--text-primary); }
.mk-mode-btn span { display: block; margin-top: 2px; font: 400 12px Inter, sans-serif; color: var(--text-dim); }
.mk-mode-btn.is-on { border-color: var(--accent); background: var(--accent-soft); }
.pp-opts { border-top: none; padding: 4px 0 8px; }
.pp-resume { border-color: var(--accent); }
.pp-groups { display: grid; gap: 10px; margin: 10px 0 4px; }
.pp-group { border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px 12px; }
.pp-group-h { font: 700 13px Inter, sans-serif; margin-bottom: 4px; }
.pp-group-h span { font-weight: 400; color: var(--text-dim); margin-left: 6px; }
.pp-set { display: grid; grid-template-columns: 76px 1fr auto; gap: 8px; padding: 3px 0;
  font: 13px/1.5 Inter, sans-serif; border-top: 1px dashed var(--border-soft); }
.pp-set:first-of-type { border-top: none; }
.pp-set-no { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pp-set-min { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pp-areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.pp-area { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-mid);
  font: 13px Inter, sans-serif; }
.pp-area i { font-style: normal; color: var(--text-dim); }

.mk-chip.pp-chip { gap: 8px; padding: 5px 8px 5px 6px; }
.pp-chip-btn { padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-mid); background: var(--bg-secondary);
  font: 600 12px Inter, sans-serif; color: var(--text-primary); }
.pp-chip-btn:hover { border-color: var(--accent); color: var(--accent); }
.pp-chip-btn.is-on { border-color: #d97706; color: #b45309; }
.mk-chip.is-low .mk-chip-t { color: var(--danger); }
.mk-chip.is-warn { animation: ppWarn .6s ease-in-out 4; }
@keyframes ppWarn { 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, .25); } }

.pp-board { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-start;
  justify-content: center; padding: 64px 16px 16px; background: rgba(15, 16, 20, .35); overflow-y: auto; }
.pp-board.hidden { display: none; }
.pp-board-card { width: min(720px, 100%); background: var(--bg-primary, #fff); border-radius: 14px;
  border: 1px solid var(--border-mid); box-shadow: 0 10px 40px rgba(0,0,0,.18); padding: 16px 18px; }
.pp-board-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 10px;
  font: 15px Inter, sans-serif; }
.pp-board-hd span { font-size: 13px; color: var(--text-dim); }
.pp-board-note { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft);
  font: 13px/1.6 Inter, sans-serif; }
.pp-board-g { margin-bottom: 10px; }
.pp-board-gh { font: 700 12px Inter, sans-serif; color: var(--text-dim); margin-bottom: 4px; }
.pp-board-cells { display: flex; flex-wrap: wrap; gap: 5px; }
.pp-cell { position: relative; min-width: 38px; height: 34px; padding: 0 6px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-mid); background: var(--bg-secondary);
  font: 600 13px Inter, sans-serif; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pp-cell.is-done { background: var(--accent-soft); border-color: rgba(96, 18, 243,.45); color: #3e0aa8; }
.pp-cell.is-flag { border-color: #d97706; }
.pp-cell i { position: absolute; top: -7px; right: -4px; font-style: normal; font-size: 11px; color: #d97706; }
.pp-cell.is-cur { outline: 2px solid var(--accent); outline-offset: 1px; }
.pp-board-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.pp-board-legend .pp-cell { cursor: default; font-size: 11px; height: 26px; }
.pp-board-acts { display: flex; justify-content: flex-end; gap: 8px; }

/* ── 기출 실전 세트의 조판 (js/variant.js · docs/paper-set-schema.md) ── */
/* 시 — 한 칸이 한 행. 연은 문단(여백 90px 은 세로 잡음이 정한 값이라 그대로 둔다). */
.passage-verse .sent { display: block; }
/* 표(TOEIC 가격표 · 일정표 · 설문, 6단계) — 한 줄이 문장 하나(.sent), 칸은 .pt-c. 첫 줄은 머리. js/passage-render.js */
.passage-table .sent { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 0 10px;
  border-bottom: 1px solid var(--border, rgba(127,127,127,.25)); padding: 2px 0; }
.passage-table .sent:first-child { font-weight: 600; }
.passage-table .pt-c { overflow-wrap: anywhere; }
/* 짧은 블록(js/passage-render.js passageBriefMark, 2026-09-30) — 이메일 머리 · 인사 · 서명 · 광고 제목 · 목록 · 표 · 한 줄 문단,
   쓰기 · 말하기 안내 칸. 줄 간격 2.75 · 문단 사이 90px 은 긴 산문의 시선 판정 값이라 여기에는 걸지 않는다.
   이어진 짧은 블록은 사이를 좁히고 판정에서 한 묶음으로 본다(ielts.js ieltsEvidenceReach groups). 산문 문단은 그대로다. */
.passage-para.is-brief { line-height: 1.55; }
.passage-para.is-brief-join { margin-bottom: 0; padding-bottom: 5px; }
.passage-para.is-brief-join + .passage-para.is-brief { padding-top: 5px; }
/* 그림(SAT 그래프 · 모의고사 문항 그림, 6-④) — 지문 칸 폭에 맞춘다. js/ielts.js _iePassage */
.passage-image .ie-fig { display: block; max-width: 100%; height: auto; margin: 4px auto; background: #fff; border-radius: 6px; }
/* 높이는 지문 칸의 보이는 높이까지(2026-10-06) — --ie-fig-max 는 js/ielts.js _ieFigFit 가 칸을 재서 넣는다. 없으면 폭만 맞춘다.
   폭은 높이 상한에 맞춰 비율대로 줄어든다(width auto). 누르면 크게(_ieZoom) */
.passage-image .ie-fig { width: auto; max-height: var(--ie-fig-max, none); object-fit: contain; cursor: zoom-in; align-self: center; }
/* 문항마다 지문이 따로 있는 세트(SAT) — 지금 문항의 지문만 밝힌다. js/ielts.js _ieFocusParas */
#passagePanel.ie-items .ie-dim { opacity: .28; transition: opacity .15s; }
/* 지문 · 문항 1:1(SAT, 2026-10-05) — 묶음 아래 빈 자리로 한 화면에 한 묶음. 흐리게는 쓰지 않는다(다른 지문은 칸 밖) */
#passagePanel.ie-pairs .ie-dim { opacity: 1; }
#passagePanel .ie-qpad { display: block; pointer-events: none; }
#passagePanel.ie-pairs { overscroll-behavior: contain; }
.ie-sblank { display: inline-block; min-width: 4em; border-bottom: 2px solid var(--text-faint); vertical-align: baseline; }
.passage-summary { background: var(--bg-secondary); }
.passage-summary-label { margin: 0 0 -8px 24px; font: 700 13px/1.4 'Noto Serif KR', serif; color: var(--text-primary); }
/* 출처 줄·각주 — 문단 번호를 먹지 않는 글이라 문단 사이 여백 안에 붙여 놓는다 */
.passage-source { margin: -78px 24px 54px; text-align: right; font: 14px/1.6 'Noto Serif KR', serif; color: var(--text-dim); }
.passage-notes { margin: -46px 24px 54px; font: 13.5px/1.7 'Noto Serif KR', serif; color: var(--text-dim); }
.passage-source + .passage-notes { margin-top: -40px; }
.passage-figure { text-align: center; }
.passage-figure .sent { display: block; text-align: left; }
.pp-figure-img { max-width: 100%; height: auto; border: 1px solid var(--border-soft); border-radius: 6px; }
.pp-table { width: 100%; border-collapse: collapse; margin: 6px 0 8px; font-size: 15px; line-height: 1.6; color: var(--text-primary); }
.pp-table caption { caption-side: top; text-align: left; font-weight: 700; padding-bottom: 4px; }
.pp-table th, .pp-table td { border: 1px solid var(--border-mid); padding: 5px 8px; vertical-align: middle; text-align: center; word-break: keep-all; }
.pp-table th { background: var(--bg-secondary); font-weight: 700; }
.q3-label-c { text-align: center; }
.q3-text .q3-paragraphs, .q3-table .q3-row, .q3-image .q3-row { padding-left: 0; color: var(--text-primary); }
/* 옛한글 — 첫가끝 조합을 하는 글꼴을 앞세운다. 바탕·굴림·궁서는 낱자로 가른다(variant.js _OLD_HANGUL_RE). */
.ohg { font-family: 'HCR Batang', '함초롬바탕', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', 'Noto Sans CJK KR', 'Source Han Sans K', sans-serif; }
/* 지문 없는 단독 문항 — 지문 칸을 접고 문항을 넓게 */
#readingPanels.pp-no-passage #passagePanel { display: none; }
/* 기출 실전 중에는 세트마다 도는 세트 시계(#readingTimer)를 감춘다 — 학생에게 보이는 시계는 남은 80분 하나다 */
body.pp-running #readingTimer, body.pp-running #btnToggleTimer { display: none; }
/* 원문의 네모 친 낱말(발문이 그 낱말을 가리킨다 — 18~21 「누명」, 28~31 「비밀」) */
.pp-box { border: 1.5px solid var(--text-primary); padding: 0 3px; border-radius: 2px; }

/* ══ 원정 연료 알림 (js/expedition-ui.js) — 고정 요소라 지문 레이아웃을 밀지 않는다 ══ */
:root {
  --exp-amber: #b45309;
  --exp-amber-soft: #fff7ed;
}
/* 연료 카드 — 결과 화면 점수 칸 아래, 문서 흐름 안(2026-09-27: 떠 있는 알림은 폰에서 메뉴 · 단추를 가려 걷었다) */
.exp-card {
  display: flex; align-items: center; gap: 16px; margin: 12px 0;
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border-mid); border-left: 4px solid var(--exp-amber);
  border-radius: var(--radius); padding: 14px 16px; font-size: 14px;
}
.exp-card-text { flex: 1; min-width: 0; }
.exp-card .exp-toast-go { width: auto; flex: none; margin-top: 0; padding: 10px 16px; }
@media screen and (max-width: 560px) {
  .exp-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .exp-card .exp-toast-go { width: 100%; }
}
/* 메뉴 「Expedition」의 +N — 지도를 열 때까지 받은 연료 */
.sb-btn { position: relative; }
/* 아이콘과 이름 사이 한 줄(흐름 안) — 모서리에 띄우면 숫자가 길 때 아이콘을 덮었다(2026-09-29) */
.sb-badge { align-self: center; max-width: 100%; box-sizing: border-box; padding: 1px 5px; border-radius: 999px; white-space: nowrap;
  background: var(--exp-amber); color: #fff; font: 700 10px/1.4 Inter, sans-serif; pointer-events: none; }
.exp-toast-head { font-weight: 700; font-size: 18px; color: var(--exp-amber); margin-bottom: 8px; }
.exp-toast-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding: 3px 0; }
.exp-toast-calc { color: var(--text-dim); font-size: 12px; }
.exp-toast-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); color: var(--text-dim); font-size: 13px; }

.exp-toast-go {
  margin-top: 10px; width: 100%; padding: 8px 0; border: 0; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 700; cursor: pointer;
}

/* ══ 원정 맵 (js/expedition-ui.js) ══ */
:root { --exp-teal: #14b8a6; }
/* 메뉴 Map 의 화면(2026-09-30) — 환경설정과 같은 자리(컴퓨터 · 폰 모두 아래 메뉴 바 위에서 끝남), 그 바로 위 층 */
body[data-exam] #expeditionScreen { left: 0; bottom: var(--bottom-bar-h); z-index: 602; overflow-x: hidden; }
/* 모바일용 판(세로 2:3, 2026-09-30) — 지도 한 장이 머리 줄 아래 한 화면에 다 들어오게(창 높이 − 아래 메뉴 바 − 머리 줄 · 여백) */
.exp-app { --exp-map-maxw-port: calc((100dvh - var(--bottom-bar-h, 0px) - var(--rt-tb-h, 0px) - 150px) / 1.5); }   /* 맨 위 줄(2026-10-04)만큼 더 뺀다 */
.exp-map.is-port { aspect-ratio: 2 / 3; max-width: var(--exp-map-maxw-port); }
.exp-layout.is-port .exp-main > .exp-strip { max-width: none; }
.exp-map.is-port .exp-camp { width: 12%; }
/* 지도 고르기 창 — 컴패니언 고르기 창(.comp-*)의 틀을 쓰고 칸만 그림 비율로 */
.exp-map-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.exp-map-grid.is-port { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.exp-map-grid .comp-card img { height: auto; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.exp-map-grid.is-port .comp-card img { aspect-ratio: 2 / 3; }
.exp-map-grid .comp-card b { font-size: 14px; }
.exp-body { padding: 14px 0 0; }
/* 지도 높이의 한도 — 팝업 창(88vh)이 아니라 이 화면 칸의 높이(창 높이 − 아래 메뉴 바)에서 머리 줄 · 캠프 줄 · 여백 몫을 뺀 만큼 */
.exp-app { --exp-map-maxw: calc((100dvh - var(--bottom-bar-h, 0px) - var(--rt-tb-h, 0px) - 250px) * 1.5); }
.exp-main { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.exp-main > .exp-strip { width: 100%; max-width: var(--exp-map-maxw); box-sizing: border-box; }

.exp-map { position: relative; aspect-ratio: 3 / 2; width: 100%; max-width: var(--exp-map-maxw); border-radius: 14px; overflow: hidden; background: #cfd8e3; }
.exp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exp-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 흰 점선 아래 어두운 띠 — 밝은 길 바닥(새 테마의 크림색 길)에서도 점선이 보이게(2026-09-30) */
.exp-route-under { fill: none; stroke: rgba(15,17,25,0.38); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.exp-route { fill: none; stroke: rgba(255,255,255,0.9); stroke-width: 6; stroke-dasharray: 2 16; stroke-linecap: round; }
.exp-route-done { fill: none; stroke: var(--exp-teal); stroke-width: 9; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(20,184,166,0.8)); }
.exp-dot { fill: #fff; stroke: rgba(0,0,0,0.25); stroke-width: 2; }
.exp-dot.is-done { fill: var(--exp-teal); stroke: #fff; }

.exp-camp, .exp-summit { position: absolute; transform: translate(-50%, -78%); width: 7%; text-align: center; pointer-events: none; }
.exp-summit { transform: translate(14px, -20%); width: auto; }
.exp-camp img { width: 100%; display: block; }
.exp-camp.is-locked img { opacity: 0.85; }
.exp-chip {
  display: inline-flex; gap: 4px; align-items: baseline; white-space: nowrap;
  margin-top: 2px; padding: 2px 8px; border-radius: 8px;
  background: rgba(22,23,28,0.78); color: #fff; font-size: clamp(9px, 1.1vw, 12px); font-weight: 700;
}
.exp-chip small { font-weight: 400; opacity: 0.8; }
/* 캠프 이름표 — 캠프 점 바로 아래, 컴패니언(z 2)·핀(z 3) 위 층. 컴패니언은 점에서 위로 그려지므로 발밑 글자가 가리지 않는다 */
.exp-camp-lbl { position: absolute; z-index: 4; transform: translate(-50%, 4px); pointer-events: none; }
.exp-camp-lbl .exp-chip { margin-top: 0; }
.exp-camp-lbl.is-next .exp-chip { background: var(--accent); }
.exp-climber { position: absolute; z-index: 2; height: 11%; transform: translate(-50%, -96%); pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.35)); }
/* 도착 카드는 지도 아래 가운데 — 위 가운데에 두면 W 모양 지도의 위쪽 거점을 가렸다(2026-09-30) */
.exp-arrive {
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 14px; max-width: 86%;
  padding: 12px 20px; border-radius: 16px; background: rgba(22,23,28,0.85); color: #fff; cursor: pointer;
  animation: exp-pop .4s ease-out;
}
.exp-arrive-who { height: clamp(60px, 12vw, 110px); }
.exp-arrive-txt { display: flex; flex-direction: column; gap: 2px; }
.exp-arrive-txt b { font-size: clamp(18px, 2.6vw, 30px); white-space: nowrap; }
.exp-arrive-txt { min-width: max-content; }
.exp-arrive-txt span { color: #fcd34d; font-weight: 700; font-size: 16px; }
.exp-arrive-txt small { color: rgba(255,255,255,0.75); font-size: 12px; }
.exp-arrive-badges { display: flex; gap: 10px; }
.exp-arrive-badges figure { margin: 0; text-align: center; }
.exp-arrive-badges img { width: clamp(48px, 7vw, 76px); }
.exp-arrive-badges figcaption { font-size: 11px; font-weight: 700; }
.exp-arrive.hidden { display: none; }
@keyframes exp-pop { from { opacity: 0; transform: translate(-50%, -8px); } }

/* 원정 달력(2026-10-05) — 시즌 띠 · 오늘 몇째 날 · 지난 원정 · 출발 앞 길 · 반 점 · 오늘 점 */
.exp-season { display: flex; gap: 3px; height: 8px; margin: -2px 0 10px; }
.exp-season i { border-radius: 4px; background: var(--border-soft); }
.exp-season i.is-past { background: rgba(20,184,166,.45); }
.exp-season i.is-cur { background: var(--exp-teal); }
.exp-trip-day { margin: 0 0 8px; font-size: 14px; color: var(--text-dim); }
.exp-trip-day b { color: var(--text); font-weight: 700; }
.exp-past { list-style: none; margin: 0; padding: 0 4px; font-size: 13px; color: var(--text-dim); }
.exp-past li + li { margin-top: 3px; }
.exp-route-skip { fill: none; stroke: rgba(15,17,25,0.45); stroke-width: 12; stroke-linecap: round; }
.exp-dot.is-half { fill: rgba(20,184,166,.45); stroke: #fff; }
.exp-dot.is-today { stroke: var(--exp-amber); stroke-width: 4; }
.exp-side-day span { display: block; font-size: 12px; font-weight: 400; color: var(--text-dim); }
.exp-stat { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--border-soft); }
.exp-stat span { color: var(--text-dim); font-size: 13px; }
.exp-stat b { font-size: 18px; }
.exp-amber { color: var(--exp-amber); }
.exp-next { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--accent-soft); }
.exp-next-label { font-size: 12px; color: var(--text-dim); }
.exp-next-name { font-size: 20px; font-weight: 700; margin: 2px 0 8px; }
.exp-next-name small { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.exp-bar { height: 8px; border-radius: 4px; background: rgba(22,23,28,0.08); overflow: hidden; }
.exp-bar i { display: block; height: 100%; background: var(--exp-teal); }
.exp-next-left { margin-top: 6px; font-size: 13px; color: var(--text-dim); }

.exp-strip { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
  margin: 12px 0 0; padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 14px; }
.exp-strip li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; }
.exp-strip-dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--border-mid); background: #fff; margin-bottom: 4px; }
.exp-strip li.is-done .exp-strip-dot { background: var(--exp-teal); border-color: var(--exp-teal); }
.exp-strip li.is-next .exp-strip-dot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.exp-strip b { font-size: 13px; }
.exp-strip small { font-size: 11px; color: var(--text-dim); }
.exp-strip li.is-locked b { color: var(--text-dim); }

.exp-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px 8px; margin-top: 14px; }
.exp-badge { margin: 0; text-align: center; }
.exp-badge img { width: min(64px, 100%); filter: grayscale(1); opacity: 0.35; }
.exp-badge.is-earned img { filter: none; opacity: 1; }
.exp-badge figcaption { font-size: 13px; line-height: 1.3; color: var(--text-dim); margin-top: 4px; }
.exp-badge.is-earned figcaption { color: var(--text-primary); font-weight: 700; }
@media screen and (max-width: 560px) {
  .exp-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .exp-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 짜임 — 가안(2026-10-11 사용자 「지도 아래가 허전하다」 → 「가」) ──
   넓은 화면: 왼쪽 기둥(지도 카드 → CHALLENGES 줄 → BADGES → 글자 단추) | 오른쪽 기둥 360px(TODAY · NEXT GOAL · 숫자, 위에 붙음).
   지도는 기둥 폭으로 — 창 높이로 줄이지 않는다(가로 판). 세로 판(폰)은 한 화면 한도(--exp-map-maxw-port) 그대로.
   중간 폭(821~1100px)은 지도 → 오른쪽 셋 한 줄 → 챌린지 → 배지, 폰은 지도 → TODAY → CHALLENGES → NEXT GOAL → 숫자 → 배지(두 기둥 display: contents). */
.exp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.exp-main { align-items: stretch; gap: 16px; }
.exp-box { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 16px; padding: 16px; box-sizing: border-box; min-width: 0; }
.exp-mapcard { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.exp-mapcard > .exp-head { align-self: stretch; margin: 0; }
.exp-mapcard .exp-map:not(.is-port) { max-width: none; }
.exp-mapcard .exp-strip { width: 100%; max-width: none; margin: 0; padding: 4px 0 0; border: 0; border-radius: 0; background: none; }
.exp-side-day { font-size: 22px; font-weight: 700; }
.exp-head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.exp-head-txt { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; min-width: 0; }
.exp-head .exp-trip-day { margin: 0; font-size: 15px; }
.exp-head .exp-course { margin: 0; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.exp-head .exp-season { margin: 10px 0 0; }
.exp-side { position: sticky; top: calc(var(--rt-tb-h, 0px) + var(--exp-top-h, 0px) + 12px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.exp-today-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.exp-today-row span { font-size: 15px; color: var(--text-dim); }
.exp-today-row b { font-size: 22px; }
.exp-daybar { margin-top: 10px; height: 10px; border-radius: 5px; background: rgba(22,23,28,0.08); overflow: hidden; }
.exp-daybar i { display: block; height: 100%; background: var(--accent); }
.exp-daybar.is-done i { background: var(--exp-teal); }
.exp-box.exp-next { margin: 0; background: var(--bg-elevated); }
.exp-box.exp-next .exp-next-label { font-size: 14px; }
.exp-nums .exp-stat { padding: 9px 0; }
.exp-nums .exp-stat:first-child { border-top: 0; padding-top: 0; }
.exp-nums .exp-stat:last-child { padding-bottom: 0; }
.exp-nums .exp-stat span { font-size: 14px; }
.exp-nums .exp-stat b { font-size: 18px; }
.exp-sec-h { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.exp-sec-h small { margin-left: 6px; font-size: 14px; font-weight: 600; color: var(--text-dim); }
.exp-badgebox .exp-badges { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.exp-links { display: flex; flex-direction: column; gap: 10px; }
.exp-links-row { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0 4px; }
.exp-link { border: 0; background: none; padding: 4px 0; font: 600 14px Inter, sans-serif; color: var(--accent); cursor: pointer; }
.exp-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.exp-rules .exp-rule { font-size: 13px; }
.exp-rules .exp-rule:first-child { margin-top: 0; }
.exp-box.exp-past { margin: 0; padding: 16px; font-size: 14px; }
@media screen and (max-width: 1100px) {
  .exp-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch;
    grid-template-areas: "map map map" "today next nums" "ch ch ch" "badges badges badges" "links links links"; }
  .exp-main, .exp-side { display: contents; }
  .exp-mapcard { grid-area: map; } .exp-today { grid-area: today; } .exp-box.exp-next { grid-area: next; } .exp-nums { grid-area: nums; }
  .exp-chrow { grid-area: ch; } .exp-badgebox { grid-area: badges; } .exp-links { grid-area: links; }
}
@media screen and (max-width: 820px) {
  .exp-layout { display: flex; flex-direction: column; gap: 14px; }
  .exp-mapcard { order: 1; } .exp-today { order: 2; } .exp-chrow { order: 3; } .exp-box.exp-next { order: 4; } .exp-nums { order: 5; } .exp-badgebox { order: 6; } .exp-links { order: 7; }
  .exp-box { padding: 14px; }
  /* 거점 띠 · 배지는 한 줄 가로 밀기(두세 줄로 접지 않음) */
  .exp-mapcard .exp-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 4px; }
  .exp-mapcard .exp-strip li { flex: 0 0 92px; scroll-snap-align: start; }
  .exp-badgebox .exp-badges { display: flex; overflow-x: auto; gap: 8px; scroll-snap-type: x mandatory; }
  .exp-badgebox .exp-badge { flex: 0 0 84px; scroll-snap-align: start; }
}

/* 홈 카드 */
.exp-home { display: flex; align-items: center; gap: 12px; margin: 14px auto 0; max-width: 560px; width: 100%;
  padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border-soft);
  border-left: 4px solid var(--exp-teal); border-radius: 14px; text-align: left; }
.exp-home.hidden { display: none; }
.exp-home img { height: 48px; }
.exp-home-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.exp-home-txt span { font-size: 13px; color: var(--text-dim); }
.exp-home button { border: 0; border-radius: 10px; padding: 8px 12px; background: var(--accent-soft); color: var(--accent); font-weight: 700; cursor: pointer; white-space: nowrap; }

/* 오늘의 연료 정산 */
.exp-settle-box { max-width: 640px; height: auto; max-height: 88vh; }
.exp-settle-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.exp-settle-day { font-size: 13px; font-weight: 700; color: var(--accent); }
.exp-settle-label { font-size: 20px; font-weight: 700; }
.exp-settle-big { font-size: clamp(34px, 7vw, 52px); font-weight: 700; color: var(--exp-amber); line-height: 1; }
.exp-settle-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--bg-elevated);
  border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; }
.exp-settle-table th, .exp-settle-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); text-align: left; white-space: nowrap; }
.exp-settle-table th { font-weight: 700; }
.exp-settle-table .exp-num { text-align: right; font-weight: 700; }
.exp-settle-table tfoot th, .exp-settle-table tfoot td { border-bottom: 0; background: var(--exp-amber-soft); }
.exp-dim { color: var(--text-faint); }
.exp-settle-move { margin: 14px 0; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); font-size: 14px; }
.exp-settle-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media screen and (max-width: 560px) { .exp-settle-table { font-size: 12px; } .exp-settle-table th, .exp-settle-table td { padding: 7px 6px; } }
/* 읽은 글자 + 보너스 (2026-09-25) */
.exp-toast-sub { margin: -4px 0 8px; font-size: 13px; color: var(--text-dim); }
.exp-toast-calc { white-space: normal; }
.exp-settle-table thead th { font-size: 12px; font-weight: 600; color: var(--text-dim); background: var(--bg-secondary); }
.exp-settle-table td small { display: block; font-size: 11px; color: var(--text-dim); white-space: normal; }
.exp-settle-table td { vertical-align: top; }
.exp-rule { margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--text-dim); }
.exp-lines-link { display: block; margin-top: 2px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 11px; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.exp-line-panel { cursor: default; max-width: min(420px, calc(100vw - 32px)); }
/* 정산 · 원정 맵은 오늘의학습 팝업(gaze-modal-overlay) 위에 뜬다 — 닫으면 팝업으로 돌아간다 */
#expSettleScreen { z-index: 10050; }
.exp-settle-table tr.is-now { background: var(--exp-amber-soft); }
.exp-settle-table tr.is-now th small { display: block; font-size: 11px; font-weight: 600; color: var(--exp-amber); }
/* 1단계 마무리 화면의 연료 칸 */
.exp-wrap { margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: var(--exp-amber-soft);
  border: 1px solid rgba(180, 83, 9, 0.25); }
.exp-wrap-main { font-size: 16px; }
.exp-wrap-main b { color: var(--exp-amber); font-size: 20px; }
.exp-wrap-sub { margin-top: 2px; font-size: 12px; color: var(--text-dim); }
.exp-wrap-go { margin-top: 8px; padding: 6px 12px; border: 0; border-radius: 8px; background: var(--exp-amber);
  color: #fff; font-weight: 700; cursor: pointer; }
.exp-settle-table th small.exp-topic { display: block; font-size: 11px; font-weight: 400; color: var(--text-dim); }

/* 컴패니언 고르기 */
.comp-picker { position: fixed; inset: 0; z-index: 10100; background: rgba(15,17,25,.55); display: grid; place-items: center; padding: 16px; }
.comp-picker.hidden { display: none; }
.comp-box { width: min(980px, 100%); max-height: 92vh; overflow: auto; background: var(--bg-primary); border-radius: 20px; padding: 20px; }
.comp-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.comp-head b { display: block; font-size: 22px; }
.comp-head span { font-size: 13px; color: var(--text-dim); }
.comp-close { border: 0; background: var(--bg-secondary); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; flex: none; }
.comp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media screen and (max-width: 700px) { .comp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.comp-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 16px;
  border: 2px solid var(--border-soft); background: var(--bg-elevated); cursor: pointer; font: inherit; color: inherit; }
.comp-card:hover, .comp-card.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.comp-card img { height: 110px; max-width: 100%; object-fit: contain; margin-bottom: 6px; }
.comp-card b { font-size: 17px; }
.comp-card small { font-size: 12px; color: var(--text-dim); }
.comp-card span { font-size: 12px; text-align: center; }

/* 원정 맵의 컴패니언 — 걷는 동안 살짝 흔들린다(그림이 한 장이라 움직임으로 가른다) */
.exp-climber.is-walking { animation: exp-bob .35s ease-in-out infinite alternate; }
@keyframes exp-bob { from { transform: translate(-50%, -96%) rotate(-3deg); } to { transform: translate(-50%, -100%) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .exp-climber.is-walking { animation: none; } }

/* 알림·정산의 「자세히」 접기 */
.exp-toast-more { margin-top: 6px; font-size: 13px; }
.exp-toast-more summary { cursor: pointer; color: var(--text-dim); font-size: 12px; }
.exp-settle-more { margin: 10px 0; }
.exp-settle-more summary { cursor: pointer; font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }


/* ══ 홈(2026-09-25 3차, js/home.js) — 시안 06_38_16 PM 구성. 왼쪽 메뉴는 그대로, 홈 안쪽만.
      창 높이에 맞춰 한 화면(스크롤 없음) — 크기는 창 높이(vh)에 따라 줄어든다. ══ */
#startScreen { display: block; overflow-y: auto; justify-content: initial; align-items: initial; padding-top: 16px; padding-bottom: 16px; }
.hx { height: 100%; max-width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 0 8px;
  display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 18px); color: var(--text-primary); }
.hx.is-empty .hx-grid { visibility: hidden; }
.hx-top { flex: none; display: flex; justify-content: space-between; align-items: center; }
.hx-subject { position: relative; }
.hx-subject summary { list-style: none; cursor: pointer; display: inline-flex; gap: 10px; align-items: center;
  padding: clamp(6px, 1.1vh, 10px) 16px; border: 1px solid var(--border-mid); border-radius: 12px; background: var(--bg-elevated); font-weight: 700; }
.hx-subject summary::-webkit-details-marker { display: none; }
.hx-subject-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; min-width: 160px; padding: 6px;
  border-radius: 12px; background: var(--bg-elevated); border: 1px solid var(--border-soft); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.hx-subject-menu span { display: block; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.hx-subject-menu .is-on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.hx-top-r { display: flex; align-items: center; gap: 16px; }
.hx-day { font-size: 15px; color: var(--text-dim); letter-spacing: .04em; }
.hx-day b { font-size: clamp(22px, 3.6vh, 32px); color: var(--text-primary); margin-left: 4px; }
.hx-focus { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid var(--border-mid);
  border-radius: 12px; background: var(--bg-elevated); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-primary); }
.hx-switch { position: relative; width: 38px; height: 20px; border-radius: 10px; background: var(--border-mid); transition: background .2s; }
.hx-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .2s; }
.hx-focus.is-on .hx-switch { background: var(--accent); }
.hx-focus.is-on .hx-switch::after { left: 20px; }

.hx-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 20px; }
.hx.is-focus .hx-grid { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.hx.is-map .hx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* 왼쪽 */
.hx-left { min-height: 0; display: flex; flex-direction: column; gap: clamp(6px, 1.2vh, 14px); }
.hx-eyebrow { align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.hx-eyebrow:hover { color: var(--accent); }
#startScreen h1.hx-title { margin: 0; font-size: clamp(22px, 5vh, 44px); font-weight: 700; line-height: 1.15; text-align: left; }
.hx-desc { margin: 0; font-size: clamp(13px, 2.1vh, 18px); color: var(--text-dim); }
.hx-today { display: flex; flex-direction: column; gap: clamp(8px, 1.5vh, 16px); padding: clamp(12px, 2.2vh, 24px);
  border-radius: 20px; background: var(--bg-elevated); border: 1px solid var(--border-soft); box-shadow: 0 4px 18px rgba(0,0,0,.04); }
.hx-today-hd { display: flex; justify-content: space-between; align-items: flex-start; }
.hx-today-hd > b { font-size: clamp(17px, 2.8vh, 24px); }
.hx-progress { text-align: right; font-size: 13px; color: var(--text-dim); }
.hx-progress b { font-size: 18px; color: var(--text-primary); }
.hx-segs { display: flex; gap: 4px; margin-top: 6px; }
.hx-segs i { width: 60px; height: 9px; border-radius: 5px; background: var(--bg-secondary); }
.hx-segs i.is-on { background: var(--exp-teal); }
.hx-stepper { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; }
.hx-step { display: flex; align-items: center; gap: 10px; font-size: clamp(13px, 2.2vh, 17px); font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.hx-step.is-done, .hx-step.is-now { color: var(--text-primary); }
.hx-step-dot { width: clamp(26px, 4.6vh, 40px); height: clamp(26px, 4.6vh, 40px); border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--border-mid); background: #fff; font-size: 15px; color: var(--text-dim); }
.hx-step.is-done .hx-step-dot { background: var(--exp-teal); border-color: var(--exp-teal); color: #fff; font-weight: 700; }
.hx-step.is-now .hx-step-dot { border-color: var(--accent); color: var(--accent); }
.hx-step-line { flex: 1; min-width: 20px; height: 2px; background: var(--border-mid); }
.hx-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: clamp(12px, 2.2vh, 24px);
  border-radius: 16px; background: var(--accent-soft); }
.hx-next-txt small { font-size: 13px; color: var(--text-dim); }
.hx-next-txt small em { font-style: normal; font-weight: 700; color: var(--accent); }
.hx-next-txt .hx-topic { display: block; margin: clamp(2px, .6vh, 8px) 0; font-size: clamp(19px, 3.8vh, 32px); font-weight: 700; line-height: 1.2; }
.hx-next-txt .hx-topic span { display: block; font-size: clamp(14px, 2.4vh, 20px); font-weight: 400; margin-top: 2px; }
.hx-next-txt p { margin: 0; font-size: clamp(12px, 2vh, 15px); color: var(--text-dim); }
.hx-next-art { width: clamp(56px, 12vh, 120px); height: clamp(56px, 12vh, 120px); border-radius: 50%; display: grid; place-items: center;
  align-self: center; font-size: clamp(28px, 6vh, 56px); background: rgba(255,255,255,.7); }
.hx-next-cta { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; margin-top: clamp(4px, 1vh, 10px); }
.hx-next #btnStart { width: 100%; margin: 0; display: flex; justify-content: center; align-items: center; gap: 12px;
  border-radius: 12px; padding: clamp(10px, 2vh, 18px) 20px; font-size: clamp(15px, 2.8vh, 21px); }
.hx-play { font-size: .9em; }
.hx-next-sub:empty { display: none; }
.hx-link { align-self: center; border: 0; background: none; color: var(--accent); font-weight: 700; cursor: pointer; font-size: 14px; }
.hx-done { border: 1px solid var(--border-soft); border-radius: 12px; padding: 0 14px; }
.hx-done[hidden] { display: none; }
.hx-done summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: clamp(6px, 1.3vh, 12px) 0; font-size: 14px; }
.hx-done summary::-webkit-details-marker { display: none; }
.hx-done summary::after { content: '⌄'; margin-left: auto; font-size: 18px; color: var(--text-dim); }
.hx-done[open] summary::after { content: '⌃'; }
.hx-ck { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--exp-teal);
  color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.hx-done-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hx-done-list button { width: 100%; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; text-align: left; padding: 6px 10px;
  border: 0; border-radius: 10px; background: var(--bg-secondary); font: inherit; font-size: 13px; color: inherit; cursor: pointer; }
.hx-done-list button:disabled { cursor: default; }
.hx-done-list em { font-style: normal; color: var(--text-dim); margin-left: auto; font-size: 12px; }
.hx-card { display: flex; align-items: center; gap: 12px; padding: clamp(8px, 1.6vh, 16px) 16px; border-radius: 16px;
  background: var(--bg-elevated); border: 1px solid var(--border-soft); font: inherit; color: inherit; text-align: left; }
button.hx-card { cursor: pointer; width: 100%; }
.hx-card-ico { width: clamp(32px, 5.5vh, 46px); height: clamp(32px, 5.5vh, 46px); border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); flex: none; font-size: 18px; }
.hx-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hx-card-txt b { font-size: 15px; }
.hx-card-txt small { font-size: 12px; color: var(--text-dim); }
.hx-card-go { font-size: 22px; color: var(--text-faint); }

/* 오른쪽 */
.hx-right { min-height: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 14px); }
.hx-scene { flex: 1; min-height: 0; display: flex; justify-content: center; }
.hx-scene:empty, .hx.is-focus .hx-scene { display: none; }
.hx-scene-btn { position: relative; height: 100%; width: auto; max-width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0;
  border-radius: 18px; overflow: hidden; cursor: pointer; background: #cfd8e3; container-type: size; }
.hx-scene-bg { position: absolute; max-width: none; height: auto; }
.hx-say { position: absolute; left: 7%; top: 6%; max-width: 78%; display: flex; align-items: center; gap: 2.4cqw; padding: 2cqw 4cqw 2cqw 2cqw;
  border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 4px 12px rgba(0,0,0,.12);
  font-size: max(10px, 4.1cqw); font-weight: 700; line-height: 1.45; text-align: left; }
.hx-say::after { content: ''; position: absolute; left: 22%; bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: rgba(255,255,255,.96); }
.hx-say img { width: 11cqw; height: 11cqw; border-radius: 50%; background: #fff; flex: none; }
.hx-comp { position: absolute; left: 30%; bottom: 4%; height: 58%; transform: translateX(-50%); filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
.hx-sign { position: absolute; right: 5%; bottom: 20%; padding: 2cqw 4cqw; border-radius: 6px; transform: rotate(-3deg);
  background: #7c4a1e; color: #fde7c7; font-weight: 700; font-size: max(10px, 4.2cqw); line-height: 1.35; text-align: center; box-shadow: 0 3px 0 #4a2a10; }
.hx-journey { flex-direction: column; align-items: stretch; gap: clamp(4px, 1vh, 10px); }
.hx-journey-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.hx-journey-hd > b { font-size: 16px; }
.hx-journey-hd span { color: var(--text-dim); }
.hx-journey-hd span b { color: var(--accent); }
.hx-track { position: relative; display: block; height: clamp(22px, 4vh, 34px); }
.hx-track-mt { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 18px; }
.hx-track-mt.is-end { left: auto; right: 0; }
.hx-track-line { position: absolute; left: 8%; right: 8%; top: 50%; border-top: 2px dashed var(--border-mid); }
.hx-track-done { position: absolute; left: 8%; top: calc(50% - 1px); height: 3px; background: var(--exp-teal); border-radius: 2px; }
.hx-track-pt { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--border-mid); }
.hx-track-me { position: absolute; top: 50%; width: clamp(22px, 4vh, 32px); height: clamp(22px, 4vh, 32px); transform: translate(-50%, -50%);
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--exp-teal); }
.hx-track-me.is-dot { width: 12px; height: 12px; background: var(--exp-teal); }
.hx-journey small { font-size: 11px; color: var(--text-dim); }
.hx-review[hidden] { display: none; }
.hx-review .hx-card-txt b { font-size: clamp(18px, 3.4vh, 28px); font-weight: 700; }
.hx-review button { border: 0; border-radius: 10px; padding: 8px 14px; background: var(--accent-soft); color: var(--accent); font-weight: 700; cursor: pointer; white-space: nowrap; }
.hx-week { flex-direction: column; align-items: stretch; gap: clamp(4px, 1vh, 10px); }
.hx-week-hd { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.hx-week-hd > b { font-size: 15px; }
.hx-week-hd span b { font-size: 16px; }
.hx-week-row { display: flex; justify-content: space-between; }
.hx-week-row span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--text-dim); }
.hx-week-row i { width: clamp(20px, 3.6vh, 28px); height: clamp(20px, 3.6vh, 28px); border-radius: 50%; border: 2px solid var(--border-mid);
  display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; }
.hx-week-row span.is-on i { background: var(--exp-teal); border-color: var(--exp-teal); }
.hx-week-row span.is-today { color: var(--text-primary); font-weight: 700; }

/* 다른 지문 고르기 창 */
.hx-pick { position: fixed; inset: 0; z-index: 10100; background: rgba(15,17,25,.45); display: grid; place-items: center; padding: 16px; }
.hx-pick.hidden { display: none; }
/* 칸 너비를 창 안에 묶는다 — auto 칸이면 긴 지문 이름(셀렉트 옵션)만큼 늘어나 창 밖으로 나가 ✕ 가 안 보였다 */
.hx-pick { grid-template-columns: minmax(0, 760px); justify-content: center; overflow-y: auto; }
.hx-pick-box { max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box; }
.hx-pick .ss-pick { max-width: none; margin: 0; box-sizing: border-box; }
.hx-pick .ss-pick select { max-width: 100%; }
.hx-pick-box { width: min(760px, 100%); background: var(--bg-primary); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.hx-pick-hd { display: flex; justify-content: space-between; align-items: center; font-size: 18px; }
.hx-pick .ss-note { margin: 0; font-size: 12px; text-align: center; }

/* 창이 낮으면 장면을 접는다 */
@media screen and (max-height: 600px) { .hx-scene { display: none; } }
/* 좁은 화면 — 세로로 쌓고 스크롤을 허용한다 */
@media screen and (max-width: 900px) {
  .hx { height: auto; }
  .hx-grid, .hx.is-focus .hx-grid, .hx.is-map .hx-grid { grid-template-columns: minmax(0, 1fr); }
  .hx-right { order: -1; }
  .hx-scene { height: min(45vh, 320px); flex: none; }
  .hx-stepper { flex-wrap: wrap; }
}
/* 컴패니언 바꾸기 — 오른쪽 그림 바로 위, 이름 없이(2026-09-25) */
.hx-friend { flex: none; align-self: flex-end; border: 0; background: none; padding: 0; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--text-dim); cursor: pointer; }
.hx-friend:hover { color: var(--accent); }
.hx-friend[hidden] { display: none; }
/* 장면 — 배경은 칸을 늘 가득 채우고(창 크기가 바뀌어도 비지 않게), 살짝 연하게 해 컴패니언이 앞에 서게(2026-09-25) */
.hx-scene-btn { cursor: pointer; }
.hx-scene-bg { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  filter: saturate(.8) brightness(1.08); }
.hx-scene-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.42)); pointer-events: none; }
.hx-scene-btn .hx-friend { position: absolute; top: 3.5%; right: 3.5%; z-index: 2; align-self: auto; padding: 1.4cqw 3cqw;
  border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(0,0,0,.12);
  font-size: max(10px, 3.4cqw); color: var(--text-primary); }
.hx-scene-btn .hx-friend:hover { color: var(--accent); }
.hx-say { top: 14%; z-index: 1; }
.hx-comp { z-index: 1; }
.hx-sign { z-index: 1; }
/* DAY 를 더 드러나게 */
.hx-day { display: inline-flex; align-items: baseline; gap: 8px; padding: clamp(4px, 1vh, 8px) 16px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent); }
.hx-day span { font-size: clamp(14px, 2.4vh, 18px); font-weight: 700; letter-spacing: .08em; }
.hx-day b { font-size: clamp(28px, 5.4vh, 44px); font-weight: 700; color: var(--accent); margin: 0; line-height: 1; }
/* 캠프 근접 풍경 · 나무 팻말 · 미니맵(2026-09-25) — 장면이 지도의 어디인지 바로 보이게 */
.hx-scene-bg { object-position: center; filter: none; transform: none; }
.hx-scene-veil { background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.18)); }
.hx-say { left: 5%; top: 14%; max-width: 58%; }
.hx-comp { left: 30%; bottom: 3%; height: 56%; }
.hx-sign { right: 3%; bottom: 3%; width: 30%; padding: 0; background: none; box-shadow: none; transform: rotate(-3deg); border-radius: 0; }
.hx-sign img { display: block; width: 100%; }
.hx-sign span { position: absolute; left: 6%; right: 6%; top: 17%; height: 38%; display: grid; place-items: center; text-align: center;
  color: #fff4dc; font-weight: 700; font-size: max(10px, 4cqw); line-height: 1.3; text-shadow: 0 1px 2px rgba(60,30,10,.8); }
@media (prefers-reduced-motion: reduce) {  }
/* 스크립트가 오기 전(캐시 없는 첫 로드는 수 초) — 빈 칸 대신 기본 문구 · 베이스캠프 장면 · 흐린 자리 */
.hx-scene-btn.is-loading { cursor: default; }
.hx-right .hx-card:empty { min-height: clamp(56px, 10vh, 96px); background: linear-gradient(90deg, var(--bg-secondary), var(--bg-elevated), var(--bg-secondary));
  background-size: 200% 100%; animation: hx-shimmer 1.4s linear infinite; }
@keyframes hx-shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .hx-right .hx-card:empty { animation: none; } }
/* 원정 맵 안쪽 틀 — 확대 연출을 칸 안에서만 */
.exp-map-in { position: absolute; inset: 0; will-change: transform; }

/* 장면 = 전체 맵 입구(2026-09-25) — 늘 보이는 「전체 맵 보기」, 마우스를 올리면 살짝 확대. 「친구 바꾸기」는 캐릭터 발밑 */
.hx-scene-bg { transition: transform .3s ease; }
.hx-scene-btn:hover .hx-scene-bg, .hx-scene-btn:focus-visible .hx-scene-bg { transform: scale(1.03); }
.hx-scene-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hx-mapbtn { position: absolute; top: 4%; right: 3.5%; z-index: 2; padding: 1.6cqw 3.2cqw; border-radius: 999px;
  background: rgba(255,255,255,.95); box-shadow: 0 2px 10px rgba(0,0,0,.15); font-size: max(11px, 3.8cqw); font-weight: 700;
  color: var(--accent); white-space: nowrap; transition: background .2s, color .2s; }
.hx-scene-btn:hover .hx-mapbtn, .hx-scene-btn:focus-visible .hx-mapbtn { background: var(--accent); color: #fff; }
.hx-comp { left: 30%; bottom: 11%; height: 52%; }
.hx-scene-btn .hx-friend { position: absolute; top: auto; right: auto; left: 30%; bottom: 2.5%; transform: translateX(-50%);
  z-index: 2; padding: 1.2cqw 3cqw; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(0,0,0,.12);
  font-size: max(10px, 3.2cqw); font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.hx-say { max-width: 56%; }
/* 말풍선 — 줄은 문장 단위로만 꺾는다(글자가 중간에 꺾이지 않게) */
.hx-say { max-width: 66%; }
.hx-say span { white-space: nowrap; }
/* 「전체 맵 보기」 — 버튼 모양 없이 작은 글자로 우상귀에(2026-09-25 사용자). 정상 꼭대기(가로 78~86% · 세로 15~20%)보다 위에 둔다 */
.hx-mapbtn { top: 2.2%; right: 3%; padding: 0; background: none; box-shadow: none; border-radius: 0;
  font-size: max(10px, 3cqw); font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.4); }
.hx-scene-btn:hover .hx-mapbtn, .hx-scene-btn:focus-visible .hx-mapbtn { background: none; color: #fff; text-decoration: underline; }
/* 말풍선이 정상 쪽으로 번지지 않게 */
.hx-say { max-width: 60%; }
/* 말풍선 — 글자는 늘 흰 풍선 안(2026-09-25): 단어 단위로만 꺾고(keep-all), 아주 긴 단어만 글자 중간에서,
   풍선 폭은 글자에 맞추되 60% 까지, 세 줄을 넘으면 말줄임. 글자 크기는 장면에 비례(최소 11px) */
.hx-say { width: max-content; max-width: 60%; font-size: max(11px, 3.8cqw); }
.hx-say span { min-width: 0; white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* 장면 + 그 아래 「친구 바꾸기 ›」 한 줄 */
.hx-scene-col { height: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hx-scene-col .hx-scene-btn { height: calc(100% - 24px); }
.hx-friend-link { flex: none; border: 0; background: none; padding: 0 2px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--text-dim); cursor: pointer; line-height: 20px; }
.hx-friend-link:hover { color: var(--accent); text-decoration: underline; }
/* 컴패니언을 줄이고 말풍선을 또렷하게(2026-09-25) — 머리 꼭대기가 장면 위쪽 ~54% 로 내려가 말풍선과 사이에 빈 하늘,
   꼬리는 컴패니언 중심선(장면 가로 28% = 풍선 왼쪽 5% + 23cqw)을 가리킨다 */
.hx-comp { left: 28%; bottom: 8%; height: 38%; }
.hx-say { left: 5%; top: 12%; border: 1px solid rgba(22,23,28,.14); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.hx-say img { width: 9cqw; height: 9cqw; }
.hx-say::before, .hx-say::after { content: ''; position: absolute; left: 23cqw; transform: translateX(-50%); border-style: solid;
  border-color: transparent; border-bottom-width: 0; }
.hx-say::before { bottom: calc(-1 * max(11px, 3.2cqw)); border-width: max(11px, 3.2cqw) max(9px, 2.6cqw) 0; border-top-color: rgba(22,23,28,.14); }
.hx-say::after  { bottom: calc(-1 * max(10px, 3cqw) + 1px); border-width: max(10px, 3cqw) max(8px, 2.4cqw) 0; border-top-color: rgba(255,255,255,.96); }
/* 큰 장면에서도 말풍선이 두 줄에 들어가 컴패니언 머리와 겹치지 않게 */
.hx-say { max-width: 62%; font-size: max(11px, 3.4cqw); }
/* 원정 맵의 현재 위치 핀(2026-09-25) — 컴패니언(지도 높이 11%, 발끝이 좌표) 머리 바로 위에 핀 끝이 오게,
   위아래로 천천히 오르내리고 끝 아래 그림자는 핀이 오르면 작아진다. 움직임 줄이기면 멈춘 핀 */
.exp-map-in { container-type: size; }
.exp-pin { position: absolute; z-index: 3; width: max(20px, 4cqw); pointer-events: none;
  transform: translate(-50%, calc(-100% - 11.2cqh)); }
.exp-pin img { display: block; width: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); animation: exp-pin-bob 1s ease-in-out infinite alternate; }
.exp-pin-shadow { position: absolute; left: 25%; width: 50%; bottom: -3px; height: 5px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.35), rgba(0,0,0,0)); animation: exp-pin-shadow 1s ease-in-out infinite alternate; }
@keyframes exp-pin-bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes exp-pin-shadow { from { transform: scale(1); opacity: .9; } to { transform: scale(.6); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .exp-pin img, .exp-pin-shadow { animation: none; } }
#expArrive { z-index: 4; }
/* 핀을 조금 더 크게 — 「여기가 현재 위치」가 한눈에 */
.exp-pin { width: max(26px, 5.5cqw); }
/* 컴패니언 25% 크게(38 → 47.5%, 2026-09-25) — 머리가 말풍선에 닿지 않게 발을 아래로(8 → 3%) */
.hx-comp { height: 47.5%; bottom: 3%; }
.hx-say { top: 9%; }

/* ══ 폰 폭 — 좌측 메뉴를 아래 가로 바로(2026-09-25). 데스크톱은 그대로다.
      기존 버튼을 그대로 옮긴다(동작 · 잠금 표시 · 안내창이 한 벌). 바에는 학습 흐름 순서로
      홈 · 지문읽기 · 문제풀이 · 오답노트 · 더보기, 나머지는 「더보기」 시트(js/sidebar.js)에서.
      읽기·캘리브레이션 화면에서는 지금처럼 숨긴다(body.rd-open · .calibrating). ══ */
#sbMore { display: none; }
@media screen and (max-width: 768px) {
  :root { --sidebar-w: 0px; --bottom-bar-h: calc(60px + env(safe-area-inset-bottom, 0px)); }
  #appSidebar {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: var(--bottom-bar-h);
    flex-direction: row; align-items: stretch; justify-content: space-around; gap: 0;
    padding: 4px 4px env(safe-area-inset-bottom, 0px); overflow: visible;
    border-right: 0; border-top: 1px solid var(--border-soft);
  }
  #appSidebar > .sb-btn, #appSidebar .sb-sep, #sbSettingsGroup { display: none; }
  #appSidebar > .sb-btn.sb-primary { display: flex; flex: 1; min-width: 0; justify-content: center; padding: 6px 2px; gap: 2px; border-radius: 10px; }
  #appSidebar .sb-icon { font-size: 20px; }
  #appSidebar .sb-label { font-size: 12px; }
  /* 좁은 칸용 짧은 이름(기출지문읽기 → 지문읽기). 전체 이름은 title 에 남아 있다 */
  #appSidebar .sb-label[data-short] { font-size: 0; }
  #appSidebar .sb-label[data-short]::before { content: attr(data-short); font-size: 12px; }
  #appSidebar .sb-label[data-short]::after { font-size: 12px; }
  /* 지금 화면 — 홈이면 홈 칸, 단계를 진행 중이면 그 학습 칸(sb-flow.is-current 는 원래 규칙) */
  body.home-open #sbHome { color: var(--accent); background: var(--accent-soft); }
  #appSidebar .sb-btn.sb-flow.is-current { animation: none; }

  /* 더보기 시트 — 같은 메뉴가 위로 펼쳐지며 바에 없던 버튼을 격자로. 바 칸은 맨 아래 줄에 그대로 */
  body.sb-more #appSidebar {
    height: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
    padding: 14px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(22, 23, 28, .18);
  }
  body.sb-more #appSidebar > .sb-btn { display: flex; padding: 10px 2px; }
  body.sb-more #sbSettingsGroup { display: contents !important; }
  body.sb-more #sbSettingsGroup .sb-btn { display: flex; padding: 10px 2px; }
  body.sb-more #sbSettingsGroup > :not(.sb-btn) { display: none; }
  body.sb-more #sbHide { display: none; }
  body.sb-more #sbSettings { order: 9; }   /* 환경설정(2026-09-27) — 시트 칸들 끝, 바 칸 앞 */
  /* 시트 안 순서 — 모의고사 → 정답설명 · 시선데이터 → 기록 → 원정 맵 → 설정 묶음, 바 칸은 맨 아래 */
  body.sb-more #sbMock { order: 1; }
  body.sb-more #sbAnswerReview { order: 2; }
  body.sb-more #sbGazeData { order: 3; }
  body.sb-more #sbHistory { order: 4; }
  body.sb-more #sbChallenge { order: 5; }
  body.sb-more #sbSocrates { order: 6; }
  body.sb-more #sbGazeGraph { order: 7; }
  body.sb-more #sbReplay { order: 8; }
  body.sb-more #appSidebar > .sb-btn.sb-primary { order: 20; grid-column: auto; }
  body.sb-more #appSidebar::before { content: 'More'; grid-column: 1 / -1; order: 0; font-size: 13px; font-weight: 700;
    color: var(--text-dim); padding: 0 4px 2px; }
  body.sb-more #sbMore { color: var(--accent); background: var(--accent-soft); }
  /* 시트 뒤 어둡게 — 바깥을 누르면 닫힌다(sidebar.js) */
  body.sb-more::after { content: ''; position: fixed; inset: 0; z-index: 690; background: rgba(15, 17, 25, .35); }
  /* 바 5칸이 한 줄에 — 시트가 아닐 때 바 칸만 */
  body:not(.sb-more) #appSidebar > .sb-btn.sb-primary { display: flex; }

  /* 화면이 바에 가리지 않게 — 왼쪽 여백은 --sidebar-w: 0 이 없앤다, 아래는 바 높이만큼 */
  #startScreen { padding-left: 12px; padding-right: 12px; padding-bottom: 12px; }

  /* 바가 스크롤 중에 사라졌다 나타나던 것(Android Chrome, 2026-09-26).
     화면을 꽉 채우는 fixed 스크롤 칸(#startScreen = inset 0 + overflow auto)은 Chrome 이
     페이지 본체처럼 다뤄, 그 칸을 스크롤하면 주소창이 접혔다 펴진다. 그동안 화면 높이가
     바뀌어 bottom: 0 인 바가 주소창 높이만큼 밀렸다 돌아온다.
     → 화면은 바 위에서 끝낸다(bottom = 바 높이). 칸이 화면을 꽉 채우지 않으니 본체로
       다뤄지지 않고, 주소창이 움직이지 않으니 바도 제자리다. 끝에서 끌어당겨도 본체로
       넘어가지 않게 막는다(당겨서 새로고침 포함). */
  html, body { height: 100%; height: 100dvh; overscroll-behavior: none; }

  /* 지문 고르기 창 — 폰에서는 단계 이름을 윗줄에, 셀렉트·버튼은 한 줄씩 꽉 차게, 글자는 읽히는 크기로 */
  .hx-pick .ss-pick-tag { flex: 1 1 100%; font-size: 13px; }
  .hx-pick .ss-pick select, .hx-pick .ss-pick select#pickYear, .hx-pick #btnPassagePreview { flex: 1 1 100%; font-size: 15px; padding: 10px 12px; }
  .hx-pick-hd { position: sticky; top: 0; margin: -18px -20px 0; padding: 16px 20px 8px; background: var(--bg-primary); z-index: 1; }

  /* 오늘의 학습 — 동그라미 문서 그림이 오른쪽 칸을 차지해 제목이 두세 줄로 꺾였다. 폰에서는 그림을 빼 제목에 온 폭을 준다 */
  .hx-next { grid-template-columns: minmax(0, 1fr); }
  .hx-next-art { display: none; }
  #startScreen, #warmupScreen { bottom: var(--bottom-bar-h); overscroll-behavior: contain; }
  /* 흐림 필터는 스크롤 중 그리기가 빠지는 원인이 될 수 있다 — 바탕은 이미 불투명 */
  #appSidebar { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media screen and (max-width: 768px) {
  /* 옛 규칙(640px 이하에서 이름 숨김)을 이긴다 — 아래 바는 아이콘 + 이름 */
  #appSidebar .sb-label { display: block; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* 시트는 5칸 격자 — 위에 더보기 항목, 맨 아래 줄에 바 칸 5개가 그대로 한 줄 */
  body.sb-more #appSidebar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.sb-more #appSidebar > #sbHome { grid-column-start: 1; }
  /* 환경설정은 시트에 둔다 — 폰에서 Settings 로 가는 길은 이 시트뿐이다(2026-09-27: 수능 때의 「설정 숨김」이 남아 폰에서 Settings 가 없었다) */
  body.sb-more #appSidebar #sbHide { display: none; }
  body.sb-more #appSidebar .sb-label { font-size: 12px; white-space: normal; }
}

/* ══ 폰 폭 기출 풀이 — 「지문 | 문항」 두 칸 탭(js/mobile-tabs.js, 2026-09-26) ══
      #readingLayout.mt-on 일 때만. 두 패널을 같은 폭으로 가로로 나란히 두고 옆으로 밀기만 한다 —
      다시 그리지 않으니 지문 줄 자리가 그대로이고, 패널마다 제 스크롤이 있어 탭마다 자리가 남는다.
      id 선택자로만 건다: 리플레이·히트맵 클론(.rd-* 클래스)은 지금 모양 그대로다.

      [층 셋] ① 탭 = 책갈피 — 섹션을 가르는 가장 큰 구조. 켜진 탭은 아래 종이(패널)와 한 몸이고
      꺼진 탭은 뒤에 꽂힌 책갈피다. 버튼처럼 떠 보이는 모양(알약·그림자)은 쓰지 않는다.
      ② 「‹ 이전  1 2 3 4  다음 ›」 = 문항 탭 안의 한 줄(번호는 동그라미 없는 글자). 채워진 버튼은
      마지막 문항의 「종료」 하나뿐이다(제출이 이 화면에서 가장 큰 행동이다).

      [가로를 넓힌다] 좌우 여백이 세 겹(화면 12 + 칸 16 + 문단 2+22 = 한쪽 52px)이라 360px 폰에서
      한 줄이 17~18자에서 끊겼다 → 한쪽 18px 안팎으로. 줄 간격(2.75)·문단 사이(90px)는 시선의
      「어느 줄 · 어느 문단」 해상도 몫이라 그대로 둔다(2026-09-26 사용자 결정). */
#mtTabs, #mtQNums { display: none; }
@media screen and (max-width: 700px) {
  #readingLayout.mt-on { --mt-p-paper: #ffffff; --mt-q-paper: #f7f6ff;
    padding-left: 0; padding-right: 0; }

  /* ① 책갈피 탭 */
  #readingLayout.mt-on #mtTabs { display: flex; flex: none; align-items: flex-end; gap: 6px;
    margin: 0; padding: 0 12px; border-bottom: 1px solid var(--border-mid); }
  #mtTabs button { flex: 1; position: relative; cursor: pointer; margin-bottom: -1px;
    padding: 8px 0 7px; border: 1px solid var(--border-mid); border-bottom: 1px solid var(--border-mid);
    border-radius: 12px 12px 0 0; background: #e9e9ee; color: var(--text-dim);
    font: 700 15px Inter, sans-serif; }
  #mtTabs button.is-on { padding: 11px 0 9px; color: var(--accent); z-index: 1;
    border-top: 3px solid var(--accent); border-bottom-color: transparent; }
  #mtTabs button[data-tab="p"].is-on { background: var(--mt-p-paper); }
  #mtTabs button[data-tab="q"].is-on { background: var(--mt-q-paper); }
  #mtQCount { font-weight: 600; opacity: .75; }
  /* 메뉴 되살리기(☰)는 아래 도구 줄 맨 앞(mobile-tabs.js 가 그 자리로 옮긴다) — 떠 있지 않고 줄 안에 선다 */
  #readingToolbar #sbRestore { position: static; width: 36px; height: 36px; font-size: 16px; opacity: 1; flex: none; }

  /* 종이 — 탭과 같은 바탕으로 이어진다 */
  /* 폭은 화면 전체 — 데스크톱 식(98% × (100vw − 12px))을 쓰면 폰에서 오른쪽 약 20px 이 빈다 */
  #readingLayout.mt-on #readingPanels { flex-direction: row; overflow: hidden; width: 100%; align-self: stretch; }
  #readingLayout.mt-on #passagePanel,
  #readingLayout.mt-on #questionsPanel { flex: 0 0 100%; width: 100%; min-height: 0; }
  #readingLayout.mt-on #passagePanel { overflow-y: auto; overscroll-behavior: contain; border-bottom: 0;
    padding: 10px 4px 24px; background: var(--mt-p-paper); }
  #readingLayout.mt-on #questionsPanel { background: var(--mt-q-paper); }
  #readingLayout.mt-on.mt-q #passagePanel,
  #readingLayout.mt-on.mt-q #questionsPanel { transform: translateX(-100%); }
  #readingLayout.mt-on.mt-anim #passagePanel,
  #readingLayout.mt-on.mt-anim #questionsPanel { transition: transform .22s ease; }

  /* 가로 — 문단 좌우 22 → 12, 문항 상자 20 → 10, 선지 번호 자리 40 → 30 (1단계 분할도 지문은 같게) */
  #readingLayout.mt-on #passagePanel .passage-para,
  #readingLayout.mt-split #passagePanel .passage-para { padding-right: 12px; }
  #readingLayout.mt-on #passagePanel .passage-para:not(.marked-range),
  #readingLayout.mt-split #passagePanel .passage-para:not(.marked-range) { padding-left: 12px; }
  #readingLayout.mt-on #questionViewport { padding: 6px 4px 12px; overscroll-behavior: contain; }
  #readingLayout.mt-on #questionViewport .question-block { padding-left: 10px; padding-right: 10px; }
  #readingLayout.mt-on #questionViewport .choice-list li { padding-left: 30px; padding-right: 8px; }
  #readingLayout.mt-on #questionViewport .choice-list li::before { left: 6px; }

  /* ② 문항 번호 — 「‹ 이전  1 2 3 4  다음 ›」 의 가운데. 동그라미 없이 글자만(선지 ①② 와 헷갈리지 않게) */
  #readingLayout.mt-on #mtQNums { display: flex; flex: 1; min-width: 0; justify-content: center; align-items: center; gap: 2px; }
  #mtQNums button { position: relative; min-width: 30px; height: 40px; padding: 0 6px; cursor: pointer;
    border: 0; background: transparent; color: var(--text-faint); font: 600 16px Inter, sans-serif; }
  #mtQNums button.is-done { color: var(--text-primary); }
  #mtQNums button.is-cur { color: var(--accent); font-weight: 700; }
  #mtQNums button.is-later::before { content: ''; position: absolute; top: 6px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #f5b82e; }   /* Skip for now(ielts-timeq.js) */
  #mtQNums button.is-cur::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 6px;
    height: 2px; border-radius: 1px; background: var(--accent); }

  /* ③ 이전/다음 — 상자 없는 글자 링크 · 「종료」만 채운 버튼 */
  #readingLayout.mt-on #questionNav { justify-content: space-between; align-items: center; gap: 0;
    padding: 4px 10px 8px; border-top: 0; background: transparent; }
  #readingLayout.mt-on #questionNav .nav-btn { flex: none; padding: 10px 8px; border: 0; border-radius: 8px;
    background: transparent; color: var(--accent); font: 600 15px Inter, sans-serif; transform: none; }
  #readingLayout.mt-on #questionNav .nav-btn:disabled { color: var(--text-faint); opacity: .5; }
  #readingLayout.mt-on #questionNav .nav-btn.nav-end { padding: 10px 26px; background: var(--accent); color: #fff; }

  /* 아래 도구 줄 — ☰ · 시선 · 영역 · 시간(토글은 그대로). 캘리 표기만 뺀다(타이머 위에 겹쳐 잘랐다) */
  #readingLayout.mt-on #calModeTag,
  #readingLayout.mt-split #calModeTag { display: none; }

  /* ══ 1단계(AI읽기코칭) — 위 지문 · 아래 코칭 칸(js/mobile-tabs.js mtSheet) ══
        겹쳐 띄우지 않는다: 지문 칸의 높이를 실제로 줄여야 아래 칸을 보는 시선이 문단 판정에 안 든다.
        아래 칸 높이는 카드 종류가 정한다(data-sheet) — 내용만큼, 상한만 상태마다 다르다.
        지문 칸 위끝은 늘 같은 자리라 줄 자리(문서 흐름 좌표)가 흔들리지 않는다. */
  #readingLayout.mt-split { padding-left: 0; padding-right: 0; }
  #readingLayout.mt-split #readingPanels { flex-direction: column; overflow: hidden; width: 100%; align-self: stretch; }
  #readingLayout.mt-split #passagePanel { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    border-bottom: 0; padding: 10px 4px 24px; }
  #readingLayout.mt-split #questionsPanel { flex: none; min-height: 0; max-height: 55vh; max-height: 55dvh;
    overflow: hidden; border-top: 1px solid var(--border-mid); background: var(--mt-q-paper, #f7f6ff);
    box-shadow: 0 -6px 16px rgba(22, 23, 28, .06); transition: max-height .2s ease; }
  #readingLayout.mt-split #aicPanel { padding: 12px 14px 0; overscroll-behavior: contain; }
  /* ① 행동 줄 — 칸 바닥에 고정(mobile-tabs.js _mtGatherActions). 본문만 스크롤된다 */
  #readingLayout.mt-split .mt-actions { position: sticky; bottom: 0; z-index: 1; margin: 8px -14px 0; padding: 8px 14px 12px;
    display: flex; flex-direction: column; gap: 6px; background: var(--mt-q-paper, #f7f6ff);
    border-top: 1px solid var(--border-soft); }
  #readingLayout.mt-split .mt-actions.is-empty { padding: 0; border-top: 0; margin-top: 0; min-height: 12px; }
  #readingLayout.mt-split .mt-actions .aic-next { margin-top: 0; }
  #readingLayout.mt-split .mt-actions .aic-choices { flex-direction: row; gap: 8px; }
  #readingLayout.mt-split .mt-actions .aic-choices > .aic-choice { flex: 1; text-align: center; }
  /* ③ 넘칠 때 — 본문 아래 끝 흐림 + 「▾ 더 보기」(행동 줄 바로 위에 뜬다) */
  #readingLayout.mt-split .mt-more { position: absolute; left: 0; right: 0; bottom: 100%; height: 44px; border: 0; cursor: pointer;
    display: flex; align-items: flex-end; justify-content: center; padding: 0 0 4px;
    background: linear-gradient(to bottom, rgba(247, 246, 255, 0), var(--mt-q-paper, #f7f6ff) 70%);
    color: var(--accent); font: 700 13px Inter, sans-serif; }
  #readingLayout.mt-split .mt-more[hidden] { display: none; }
  /* 고르기 카드 — 선지 여백을 줄여 한 화면에 먼저 맞춘다 */
  #readingLayout.mt-split .aic-choices { gap: 6px; }
  #readingLayout.mt-split .aic-choice { padding: 9px 12px; }
  /* ② 높이 상한은 고정 비율이 아니라 「지문이 최소한 남는 선」 — mobile-tabs.js _mtSheetFit 이 인라인으로 준다
        (짚기 = 짚을 문단 전체 · 고르기/알려주기/읽기 = 지문 3줄 · 쓰기/마무리 = 머리 띠). 칸은 그 안에서 내용만큼만 자란다.
        쓰기 때 폰 키보드는 뷰포트를 줄인다(index.html interactive-widget) — 상한도 resize 로 다시 잰다. */
  #readingLayout.mt-split .aic-next { width: 100%; }
}
@media screen and (max-width: 700px) and (prefers-reduced-motion: reduce) {
  #readingLayout.mt-on.mt-anim #passagePanel,
  #readingLayout.mt-on.mt-anim #questionsPanel { transition: none; }
}

/* 워밍업 화면의 얼굴 표시(js/boot.js _wuFaceWatch) — 워밍업이 뜨는 순간 추적이 켜져 있으므로 여기서 이미 보고 있다 */
.wu-face { margin: 0; min-height: 1.5em; font-size: 14px; font-weight: 700; color: var(--text-dim); }
.wu-face:empty { visibility: hidden; }
.wu-face.is-on { color: var(--success); }
.wu-fix { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--text-dim); }   /* 카메라가 막혔을 때 다시 켜는 길(boot.js, 2026-10-16) */

/* ═══ 미니게임 「보고 맞히기」(js/minigame.js, 2026-09-26) ═══
   화면 전체를 덮는다 — 사이드바(700)·폰 아래 바 위. 색은 이 화면만의 것이다(크림 · 남색 · 초록 링).
   보기 원은 화면 네 귀퉁이 쪽으로 벌린다 — 시선 오차보다 원 사이가 훨씬 멀어야 「가장 가까운 보기」가 맞다. */
.mg {
  --mg-bg: #fbf7ec; --mg-card: #fff4d9; --mg-line: #efe4c8; --mg-ink: #1b2a5c; --mg-dim: #6b7390;
  --mg-green: #1fbf98; --mg-red: #ec5a5a; --mg-blue: #2f5bea; --mg-yellow: #ffd54a;
  position: fixed; inset: 0; z-index: 9500; overflow-y: auto;
  background: var(--mg-bg); color: var(--mg-ink);
  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.mg.hidden { display: none; }
.mg-app {
  min-height: 100%; max-width: 1100px; margin: 0 auto; box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
}
.mg-loading { margin: auto; text-align: center; color: var(--mg-dim); display: flex; flex-direction: column; gap: 16px; align-items: center; }

.mg-top { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 8px; min-height: 52px; }
.mg-back {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent;
  font-size: 34px; line-height: 1; color: var(--mg-ink); cursor: pointer; font-family: inherit;
}
.mg-back:hover { background: var(--mg-card); }
.mg-prog { text-align: center; font-weight: 700; font-size: 15px; }
.mg-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.mg-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e2dccb; }
.mg-dots i.is-done { background: var(--mg-green); opacity: .55; }
.mg-dots i.is-on { background: var(--mg-green); box-shadow: 0 0 0 3px rgba(31,191,152,.25); }
.mg-stars { display: flex; justify-content: center; gap: 2px; font-size: 14px; margin-top: 2px; }
.mg-stars i { font-style: normal; color: #e2dccb; }
.mg-stars i.is-ok { color: #f5b82e; }
.mg-stars i.is-no { color: #f2b9b9; }
.mg-combo {
  visibility: hidden; background: #fff0d9; color: #e0561b; font-weight: 700; font-size: 14px;
  border-radius: 999px; padding: 6px 12px; white-space: nowrap;
}
.mg-combo.is-on { visibility: visible; }
.mg-again, .mg-note {
  align-self: center; margin: 4px 0; border-radius: 999px; padding: 6px 16px; font-weight: 700; font-size: 15px;
  background: #dce6ff; color: var(--mg-blue);
}
.mg-note { background: #fde8d6; color: #b4541a; font-weight: 700; }

.mg-stage { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 2vh; padding: 1.5vh 0; }
.mg-row { display: flex; justify-content: space-between; gap: 16px; }
.mg-opt {
  --size: clamp(96px, min(21vw, 20vh), 180px); --mg-fill: 0;
  position: relative; width: var(--size); height: var(--size); flex: none; border-radius: 50%;
  border: 2px solid var(--mg-line); background: #fffdf7; color: var(--mg-ink);
  box-shadow: 0 6px 18px rgba(120, 100, 50, .08);
  font-family: inherit; font-weight: 700; font-size: clamp(22px, calc(var(--size) * .17), 38px);
  cursor: pointer; transition: opacity .3s ease, background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.mg-stage.is-clue .mg-opt { opacity: 0; pointer-events: none; }
.mg-ring { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); transform: rotate(-90deg); pointer-events: none; }
.mg-ring circle {
  fill: none; stroke: var(--mg-green); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--mg-fill) * 100);
}
.mg-opt.is-warm { border-color: rgba(31, 191, 152, .45); }
.mg-opt.is-look { border-color: var(--mg-green); background: #ecfaf5; }
.mg-pct {
  position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  background: var(--mg-green); color: #fff; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 2px 10px;
}
.mg-pct:empty { display: none; }
.mg-opt.is-right { background: #dff7ee; border-color: var(--mg-green); }
.mg-opt.is-wrong { background: #fde4e4; border-color: var(--mg-red); }
.mg-opt.is-wrong .mg-ring circle { stroke: var(--mg-red); }

.mg-card {
  width: 100%; max-width: 720px; margin: 0 auto; box-sizing: border-box; text-align: center;
  background: var(--mg-card); border-radius: 24px; padding: 3vh 24px 2.4vh;
}
.mg-card-q { font-weight: 700; font-size: clamp(20px, 3.2vh, 30px); }
.mg-card-q::after { content: ""; display: block; width: 72px; height: 4px; border-radius: 2px; background: #f5b82e; margin: 6px auto 0; }
.mg-card-def { margin-top: 1.4vh; font-size: clamp(19px, 3vh, 28px); line-height: 1.55; word-break: keep-all; }
.mg-timer { height: 6px; margin: 2vh auto 0; max-width: 280px; border-radius: 3px; background: #f1e4c0; overflow: hidden; }
.mg-timer i { display: block; height: 100%; background: #f5b82e; transform-origin: left; animation: mgTimer linear forwards; }
.mg-stage:not(.is-clue) .mg-timer { visibility: hidden; }
@keyframes mgTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.mg-foot { display: flex; justify-content: center; padding-top: 1vh; }
.mg-hint { background: #e8eefc; color: var(--mg-blue); border-radius: 999px; padding: 10px 20px; font-weight: 700; font-size: 15px; }
.mg-hint.is-warn { background: #fde8d6; color: #b4541a; }

.mg-result {
  flex: 1; width: 100%; max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 1.4vh; padding: 1vh 0;
}
.mg-verdict { font-size: clamp(26px, 4.4vh, 40px); font-weight: 700; color: var(--mg-green); }
.mg-result.is-no .mg-verdict { color: var(--mg-red); }
.mg-word { font-size: clamp(40px, 7vh, 64px); font-weight: 700; letter-spacing: .06em; line-height: 1.1; }
.mg-hanja { font-size: 20px; font-weight: 700; color: var(--mg-dim); }
.mg-hanja span { font-size: 15px; font-weight: 600; margin-left: 6px; }
.mg-box {
  width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--mg-line);
  border-radius: 16px; padding: 14px 18px; line-height: 1.6; font-size: 17px; word-break: keep-all;
}
.mg-def { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.mg-say {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #e8eefc;
  font-size: 18px; cursor: pointer;
}
.mg-ex p { margin: 0; }
.mg-ex mark { background: none; color: var(--mg-blue); font-weight: 700; }
.mg-ex small { display: block; margin-top: 6px; color: var(--mg-dim); font-size: 13px; }
.mg-picked { background: #fff7f7; border-color: #f6d4d4; font-size: 15px; }
.mg-picked b { color: var(--mg-red); margin-right: 4px; }
.mg-foot-row { display: flex; gap: 12px; width: 100%; max-width: 720px; align-items: stretch; }
.mg-plus { display: flex; align-items: center; background: var(--mg-card); border-radius: 16px; padding: 0 18px; font-weight: 700; font-size: 18px; }
.mg-plus.is-none { display: none; }
.mg-next { flex: 1; }

.mg-btn {
  border: 0; border-radius: 16px; padding: 16px 22px; font-family: inherit;
  font-size: 18px; font-weight: 700; color: var(--mg-ink); cursor: pointer;
}
.mg-btn small { display: block; font-size: 12px; font-weight: 600; opacity: .7; margin-top: 2px; }
.mg-btn-main { background: var(--mg-yellow); box-shadow: 0 4px 0 #e8b923; }
.mg-btn-main:active { transform: translateY(2px); box-shadow: 0 2px 0 #e8b923; }
.mg-btn-ghost { background: #fff; border: 2px solid var(--mg-line); }

.mg-intro, .mg-sum {
  flex: 1; width: 100%; max-width: 520px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding-bottom: 4vh;
}
.mg-intro-comp { height: clamp(90px, 16vh, 150px); width: auto; }
.mg-title { margin: 0; font-size: clamp(34px, 6vh, 48px); font-weight: 700; }
.mg-sub { margin: 0; color: var(--mg-dim); font-size: 17px; }
.mg-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.mg-steps li { background: var(--mg-card); border-radius: 999px; padding: 9px 12px; font-weight: 700; font-size: 15px; }
.mg-steps b { display: inline-block; background: var(--mg-ink); color: #fff; border-radius: 999px; padding: 1px 8px; margin-right: 6px; font-size: 13px; }
.mg-intro-stats, .mg-sum-meta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; color: var(--mg-dim); font-weight: 700; font-size: 15px; }
.mg-intro-btns { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 6px; }
.mg-sum-stars { font-size: 48px; letter-spacing: 6px; }
.mg-sum-stars i { font-style: normal; color: #e2dccb; }
.mg-sum-stars i.is-on { color: #f5b82e; }
.mg-sum-score { font-size: 24px; font-weight: 700; }
.mg-sum-score b { font-size: 48px; font-weight: 700; }
.mg-pairs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.mg-pairs b { width: 100%; font-size: 15px; }
.mg-pairs span { background: #fff7f7; border: 1px solid #f6d4d4; border-radius: 999px; padding: 4px 12px; font-weight: 700; }

@media screen and (max-width: 768px) {
  body.sb-more #sbMinigame { order: 5; }
  .mg-opt { --size: clamp(84px, 30vw, 134px); }
  .mg-card { padding: 2.4vh 16px 2vh; }
}

/* ═══ IELTS Reading(js/ielts.js, 2026-09-26) ═══════════════════════════════════
   목록 · 결과는 화면 전체를 덮는 .ie, 푸는 동안은 독해 화면(#readingLayout.ie-on)의 문항 칸에 .ie-qblock 하나. */
.ie {
  position: fixed; inset: 0; z-index: 9500; overflow-y: auto;
  /* 스크롤바 자리를 늘 비워 둔다 — 카드가 적어 스크롤바가 없는 메뉴(Mock test)에서 화면이 8px 옆으로 밀렸다(2026-09-27) */
  scrollbar-gutter: stable;
  background: var(--bg-primary); color: var(--text-primary);
  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.ie.hidden { display: none; }
.ie-app { max-width: 980px; margin: 0 auto; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; }
.ie-loading { margin: 20vh auto; text-align: center; color: var(--text-dim); display: flex; flex-direction: column; gap: 16px; align-items: center; }
.ie-top { display: grid; grid-template-columns: 48px 1fr; align-items: center; min-height: 52px; }
.ie-back { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; font-size: 34px; line-height: 1;
  color: var(--text-primary); cursor: pointer; font-family: inherit; }
.ie-back:hover { background: var(--bg-secondary); }
.ie-title { font-size: var(--t1); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }   /* T1 — 한 단계 들어간 화면(세트 · 리포트 · Words)도 메뉴 제목과 같게(S9) */
/* 탭 줄은 메뉴마다 같은 높이 — 탭이 없는 메뉴(모의고사 등)에서도 자리를 지키고, 오른쪽에 그 메뉴의 조절 칸(⏱ · 속도)을 둔다(2026-09-27) */
.ie-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 16px; min-height: 38px; }
.ie-tabs-ctl { margin-left: auto; display: flex; align-items: center; }
.ie-tabs-ctl .ie-chip, .ie-tabs-ctl .ie-pace-ctl { margin: 0; }
/* 3층 갈래 칩(2026-09-30) — 기능 탭 · 방법 줄보다 작게. 목록을 거르는 칩이라 윗층과 급이 달라 보여야 한다 */
.ie-tab { border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-primary); border-radius: 999px;
  padding: 6px 14px; font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer; }
.ie-tab.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 이 메뉴에 세트가 없는 탭 — 숨기지 않고 흐리게 둔다(메뉴를 바꿔도 탭 줄 높이가 같게, 2026-09-27) */
.ie-tab.is-empty { opacity: .38; cursor: not-allowed; border-style: dashed; }
/* 탭이 적용되지 않는 모의고사 — 같은 탭을 보이지 않게 그려 자리만 지킨다 */
.ie-tab.is-ghost { display: inline-block; visibility: hidden; pointer-events: none; }
.ie-tabs-ctl.is-ghost-row { pointer-events: none; }   /* PC 폭에서는 폭 · 높이 0, 폰 폭에서만 한 줄 자리(아래 560px 규칙) */
.ie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ie-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--border-soft); background: var(--bg-elevated); color: var(--text-primary); cursor: pointer;
  font-family: inherit; }   /* 그림자 없음 — 카드 한 벌(화면 표준 S4, 2026-10-14) */
.ie-card:hover { border-color: var(--accent); }
.ie-card-type { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .02em; }
.ie-card-name { font-size: var(--t3); font-weight: 700; line-height: 1.3; }
.ie-card-au { font-style: normal; text-transform: none; letter-spacing: 0; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: #e7f6ee; color: var(--success); font-size: 12px; }
.ie-card-meta { font-size: 13px; color: var(--text-dim); }
.ie-card-res { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--text-dim); background: var(--bg-secondary);
  border-radius: 999px; padding: 3px 10px; }
.ie-card-res.is-full { color: var(--success); background: rgba(22, 125, 87, .1); }
/* ── Exams 카드(2026-10-05, 한 번 되돌린 뒤 다시) — 새 클래스 iec-* 에만. 다른 화면의 규칙은 건드리지 않는다 ──
   네 줄: 유형 칩 · 자리 | 제목 | 문항 · 낱말 | 결과 막대. 영역 색은 카드 왼쪽 띠 · 칩 · 막대 · 영역 탭 밑줄에만 */
.iec-a-reading { --iec: #6012F3; --iec-soft: #F3EEFF; }
.iec-a-listening { --iec: #0F766E; --iec-soft: #E6F6F4; }
.iec-a-writing { --iec: #C2410C; --iec-soft: #FFF4EC; }
.iec-a-speaking { --iec: #BE185D; --iec-soft: #FDF0F6; }
.ie-card.iec { gap: 8px; padding: 14px 16px 14px 14px; border-left: 4px solid var(--iec, var(--accent)); }
.ie-card.iec:hover { border-color: var(--iec, var(--accent)); }
.iec-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.iec-chips { display: flex; flex-wrap: nowrap; gap: 4px; min-width: 0; overflow: hidden; }
.iec-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; border-radius: 999px;
  background: var(--iec-soft, var(--accent-soft)); color: var(--iec, var(--accent)); font-size: 12px; font-weight: 600; }
.iec-more { flex: none; padding: 2px 4px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.iec-pos { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.iec-tag { font-style: normal; padding: 1px 8px; border-radius: 999px; background: var(--bg-secondary); color: var(--text-dim); font-size: 11px; font-weight: 600; }
.iec-name { font-size: var(--t3); font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.iec-no { font-weight: 600; color: var(--text-dim); white-space: nowrap; }   /* 똑같아 보이는 카드에만 붙는 「· Set N」(2026-10-15) */
.iec-meta { font-size: 13px; color: var(--text-dim); }
.iec-res { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.iec-bar { flex: 0 0 72px; height: 6px; border-radius: 3px; background: var(--bg-secondary); overflow: hidden; }
.iec-bar b { display: block; height: 100%; background: var(--iec, var(--accent)); }
.iec-res.is-full { color: var(--success); }
.iec-res.is-full .iec-bar b { background: var(--success); }
.ie-card.iec-mock { background: #07015A; border-color: #07015A; color: #fff; }
.iec-mock .iec-chip { background: rgba(255, 255, 255, .14); color: #fff; }
.iec-mock .iec-pos, .iec-mock .iec-meta, .iec-mock .iec-res { color: rgba(255, 255, 255, .78); }
.iec-mock .iec-bar { background: rgba(255, 255, 255, .2); }
.iec-mock .iec-bar b { background: #fff; }
.ie-card.iec-mock:hover { border-color: #07015A; }
.ie-skill.is-on.iec-a-listening, .ie-skill.is-on.iec-a-writing, .ie-skill.is-on.iec-a-speaking { border-bottom-color: var(--iec); }
.ie-src { margin-top: 20px; font-size: 12px; color: var(--text-faint); }
.ie-btn { border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-primary); border-radius: 12px;
  min-height: 48px; padding: 12px 18px; font-weight: 600; font-size: 15px; font-family: inherit; cursor: pointer; }
.ie-btn-main { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 리스닝 문항 아래 「Next question ›」(ielts.js ieltsNavUi) — 폰만. 넓은 화면은 아래 「Next →」가 가까이 있다 */
.ie-qnext { display: none; }
@media (max-width: 700px) { .question-block.q-current .ie-qnext { display: block; width: 100%; margin-top: 16px; } }

/* 결과 */
.ie-res { display: flex; flex-direction: column; gap: 14px; }
.ie-score { font-size: 22px; color: var(--text-dim); }
.ie-score b { font-size: 48px; color: var(--text-primary); }
.ie-res-meta { color: var(--text-dim); font-size: var(--fs-body); margin-top: 0; }   /* 제목이 T1(28 · 줄 높이 1.2)이라 위로 당기지 않음 — 당기면 두 줄 제목과 겹침(S9) */
.ie-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ie-tile { background: var(--bg-elevated); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 2px 8px rgba(22, 23, 28, .04); }
.ie-tile > span { font-size: 13px; font-weight: 700; color: var(--text-dim); }
.ie-tile > b { font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ie-tile > small { font-size: 12px; color: var(--text-dim); }
.ie-action { background: var(--accent-soft); color: var(--text-primary); border-left: 4px solid var(--accent); border-radius: 10px;
  padding: 12px 14px; font-size: 15px; line-height: 1.55; font-weight: 600; }
.ie-rtable { width: 100%; border-collapse: collapse; background: var(--bg-elevated); border-radius: var(--radius); overflow: hidden; font-size: 15px; }
.ie-rtable th, .ie-rtable td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); text-align: left; }
.ie-rtable th { font-size: 13px; color: var(--text-dim); font-weight: 700; }
.ie-rtable tr.is-ok td:last-child { color: var(--success); font-weight: 700; }
.ie-rtable tr.is-no td:last-child { color: var(--danger); font-weight: 700; }
.ie-rtable tr.is-no td:nth-child(2) { color: var(--danger); }
.ie-rtable td.ie-ev { font-size: 13px; font-weight: 700; white-space: nowrap; }
.ie-rtable td.ie-ev.is-ok { color: var(--success); }
.ie-rtable td.ie-ev.is-no { color: var(--text-faint); }
.ie-box { background: var(--bg-elevated); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.ie-dw { display: grid; grid-template-columns: 76px 1fr 52px; gap: 8px; align-items: center; font-size: 13px; }
.ie-dw-l { color: var(--text-dim); white-space: nowrap; }
.ie-dw-bar { height: 10px; background: var(--bg-secondary); border-radius: 999px; overflow: hidden; }
.ie-dw-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.ie-dw-v { text-align: right; font-variant-numeric: tabular-nums; }
.ie-res-btns { display: flex; flex-wrap: wrap; gap: 8px; }
/* 단어 복습(2026-10-02, words-review.js) */
.iw-review-row { margin: 0 0 12px; }
.iw-known { margin-left: auto; border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-dim); border-radius: 999px;
  padding: 3px 10px; font: 600 12px Inter, sans-serif; cursor: pointer; }
.iw-row.is-known { opacity: .55; }
.wr { max-width: 640px; }
.wr-ask { margin: 4px 0 6px; color: var(--text-dim); font-size: 14px; }
.wr-def { font-size: 20px; line-height: 1.5; margin: 0 0 18px; color: var(--text-primary); font-weight: 600; }
.wr-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.wr-opt { border: 1px solid var(--border-mid); background: var(--bg-elevated); border-radius: 12px; padding: 14px 10px; font: 700 16px Inter, sans-serif;
  color: var(--text-primary); cursor: pointer; }
.wr-opt.is-ok { border-color: var(--success); background: rgba(22, 125, 87, .1); color: var(--success); }
.wr-opt.is-no { border-color: var(--danger); background: rgba(180, 35, 24, .08); color: var(--danger); }
.wr-opt.is-dim { opacity: .5; }
.wr-note { color: var(--text-dim); font-size: 14px; margin: 0 0 16px; }
/* 듣기 문장별 빈칸(2026-10-02, ielts-dict.js) */
.dict { max-width: 720px; }
.dict-n { font-weight: 600; color: var(--text-dim); font-size: var(--fs-body); }
.dict-play { align-self: flex-start; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); border-radius: 999px;
  padding: 10px 20px; font: 700 15px Inter, sans-serif; cursor: pointer; }
.dict-text { font-size: 19px; line-height: 2; margin: 18px 0 8px; color: var(--text-primary); }
.dict-in { font: inherit; padding: 2px 8px; border: 0; border-bottom: 2px solid var(--accent); background: var(--accent-soft); border-radius: 6px 6px 0 0; outline: none; }
.dict-ans { font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.dict-ans.is-ok, .dict-mark.is-ok { color: var(--success); } .dict-ans.is-ok { background: rgba(22, 125, 87, .1); }
.dict-ans.is-no, .dict-mark.is-no { color: var(--danger); } .dict-ans.is-no { background: rgba(180, 35, 24, .08); }
.dict-mark { margin: 0 0 14px; font-weight: 700; }
.dict-sum { font-size: 22px; margin: 8px 0 18px; }

/* 푸는 동안 — 사이드바는 홈만(모의고사와 같은 잠금) */
body.ielts-running #appSidebar .sb-btn:not(#sbHome) { opacity: .35; pointer-events: none; }
#readingLayout.ie-on .passage-intro { font: 700 19px/1.35 'Inter', 'Pretendard', sans-serif; color: var(--text-primary); margin-bottom: 8px; }
#readingLayout.ie-on .passage-section { font-family: 'Inter', 'Pretendard', sans-serif; }
.ie-credit { margin: 18px 0 6px; font-size: 12px; color: var(--text-faint); line-height: 1.4; }
/* 지문 글의 언어(2026-10-09, read-profiles.js _readTextLang) — 영어 아닌 시험의 지문 · 문항 · 결과 칸.
   한글: 라틴 글자는 Inter 그대로, 한글만 Noto Sans KR(그 시험을 열 때 실림 — 없으면 기기 한글 글꼴).
   줄바꿈은 낱말(띄어쓰기) 단위 — 기본(normal)은 한글을 글자마다 끊어 「탐|험」처럼 낱말 가운데서 줄이 갈렸다(문항 · 선지).
   지문 문단(.passage-para)은 원래 keep-all 이다. 한 낱말이 칸보다 길 때만 그 안에서 끊는다(break-word — 칸 최소 폭은 그대로). */
body[data-text-lang="ko"] #readingLayout, body[data-text-lang="ko"] #ieltsScreen { word-break: keep-all; overflow-wrap: break-word; }
body[data-text-lang="ko"] #readingLayout .passage-para, body[data-text-lang="ko"] #readingLayout .passage-intro,
body[data-text-lang="ko"] #readingLayout .passage-section, body[data-text-lang="ko"] .ie-qblock, body[data-text-lang="ko"] #ieltsScreen {
  font-family: Inter, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }


/* 문항 블록 */
.ie-qblock { font-family: 'Inter', 'Pretendard', sans-serif; }
.ie-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ie-type { font-size: 13px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .02em; }
.ie-quit { border: 0; background: transparent; color: var(--text-dim); font-weight: 600; font-size: 13px; font-family: inherit;
  cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.ie-quit:hover { background: var(--bg-secondary); }
.ie-group { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ie-range { font-weight: 700; font-size: 16px; }
.ie-instr { margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--text-dim); line-height: 1.5; }
/* 묶음 머리(Questions 7–12 · Quit) → 지시문 → 문항 줄(번호 · 유형) 차례(2026-09-30) — 묶음이 위, 문항이 아래 */
.ie-ghead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ie-qblock > .ie-instr { margin: 4px 0 14px; }
.ie-qblock > .ie-head { padding-top: 12px; border-top: 1px solid var(--border-soft); }
.ie-item { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.ie-prompt { display: flex; gap: 10px; font-size: 16px; line-height: 1.5; }
.ie-prompt > b { flex: none; min-width: 22px; }
/* SAT Math(2026-10-10, sat-math.js) — 문제 글이 문단 · 표 · 그림 · MathML. 문단은 위아래로, 가운데 줄(수식 한 줄)은 가운데 */
.ie-prompt.ie-rich { display: block; }
.ie-rich p { margin: 0 0 10px; }
.ie-rich p:last-child { margin-bottom: 0; }
.ie-rich .mx-c { text-align: center; }
.ie-rich math { font-size: 1.08em; }
.ie-rich math[display="block"] { margin: 6px 0; }
.ie-rich img.mx-img { display: inline; vertical-align: middle; max-height: 3.2em; }
.ie-rich img.fig { display: block; max-width: 100%; height: auto; margin: 8px auto; background: #fff; border-radius: 6px; }
.ie-rich table { border-collapse: collapse; margin: 8px auto; font-size: 14px; }
.ie-rich th, .ie-rich td { border: 1px solid var(--border-soft); padding: 4px 10px; text-align: center; }
.ie-opt .ie-rich p { display: inline; margin: 0; }
.ie-spr { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ie-spr .ie-num { width: 9em; font-size: 18px; padding: 8px 10px; border: 1px solid var(--border-mid); border-radius: 8px; background: var(--bg-elevated); color: var(--text-primary); }
.ie-spr-hint { font-size: 12px; color: var(--text-dim); }
/* SAT Math 공식표(2026-10-11) — 문항 칸 위 단추 · 앱 안 창. 그림은 흰 바탕이라 창 안쪽도 흰 바탕(어두운 화면에서도) */
.sm-ref-bar { display: flex; justify-content: flex-end; margin: 0 0 8px; }
/* Math 기술 지도(sat-math-skill.js)는 2026-10-18 부터 다른 영역 Skills 칸과 같은 칸 꼴(.sk-bars · .sk-bar) — 옛 .ms-dom · .ms-sk 목록 규칙은 걷음 */
.ms-card .hs-doors { margin: 0 0 10px; }
.sm-ref-btn { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-primary); cursor: pointer; }
.sm-ref-btn:hover { border-color: var(--text-dim); }
.sm-ref-ov { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sm-ref-box { background: #fff; color: #111; border-radius: 12px; max-width: 760px; width: 100%; max-height: calc(100vh - 32px); overflow: auto; padding: 12px 16px 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.sm-ref-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sm-ref-x { font-size: 24px; line-height: 1; background: none; border: 0; color: #333; cursor: pointer; padding: 2px 8px; }
.sm-ref-box img { display: block; width: 100%; height: auto; }
/* 우리 공식표(2026-10-11, 운영 앱) — 이름 칸 · 수식 칸 두 열, 좁은 화면은 한 열 */
.sm-ref-sheet dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 12px; align-items: baseline; }
.sm-ref-sheet dt { font-weight: 600; font-size: 14px; }
.sm-ref-sheet dd { margin: 0; font-size: 17px; }
.sm-ref-sheet .sm-ref-sep { display: inline-block; width: 24px; }
.sm-ref-sheet p { margin: 4px 0; font-size: 14px; }
@media (max-width: 480px) { .sm-ref-sheet dl { grid-template-columns: 1fr; gap: 2px; } .sm-ref-sheet dd { margin-bottom: 8px; } }
.ie-evnote.ie-rich { margin-top: 6px; }
.ie-pick { font-size: 13px; font-weight: 700; color: var(--accent); }
.ie-opts { display: flex; flex-direction: column; margin-top: 14px;
  /* 선지 사이 — 읽기 좋은 간격(2026-10-22 사용자 「선지간 간격을 줄여서 가독성을 높이자」). 선지 단위 시선 판정은 하지 않는다 —
     선지는 문항 칸의 일부로만 본다(CLAUDE.md 2절). 옛 clamp(40px, 7vh, 72px)는 어느 선지를 봤는지 가르려고 시선 오차보다 벌린 값이었다(2026-09-26).
     발문 ↔ 첫 선지(14px)를 선지 사이(10px)보다 조금 넓게 — 「묻는 말 → 고를 것」이 한눈에 갈린다 */
  gap: 10px; }
@media (max-width: 600px) { .ie-opts { gap: 8px; } }
.ie-opt { display: flex; gap: 12px; align-items: baseline; text-align: left; padding: 13px 14px; border-radius: 12px;
  border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-primary);
  font-size: 15px; line-height: 1.55; font-family: inherit; cursor: pointer; }
.ie-opt > b { flex: none; }
.ie-opts.is-tf { flex-direction: row; flex-wrap: wrap; column-gap: 20px; }
/* 그림 선지 넷(TOPIK 듣기 1~3번) — 2×2 격자, 번호는 그림 왼쪽 위 */
.ie-opts.is-img { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ie-opts.is-img .ie-opt { align-items: flex-start; padding: 10px; }
.ie-opt-img { display: block; flex: 1; min-width: 0; max-width: 100%; max-height: 180px; object-fit: contain; }
.ie-opt.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.ie-opt:disabled { cursor: default; }
.ie-opt.is-right { border-color: var(--success); background: rgba(22, 125, 87, .1); }
.ie-opt.is-wrong { border-color: var(--danger); background: rgba(180, 35, 24, .08); }
.ie-match { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.ie-legend { background: var(--bg-secondary); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ie-legend-t { font-weight: 700; margin-bottom: 2px; }
.ie-legend-r { display: grid; grid-template-columns: 34px 1fr; gap: 6px; line-height: 1.4; }
.ie-block { display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 2.1; }
.ie-row-h { font-weight: 700; }
.ie-row-li { display: grid; grid-template-columns: 16px 1fr; }
.ie-row-li > i { font-style: normal; color: var(--text-dim); }
.ie-gap { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* 지문 · 문항 글 속 빈칸(TOEIC Part 5 · 6, 6-②) — 번호 + 고른 보기 글(없으면 밑줄). 지금 문항의 빈칸을 밝힌다. js/ielts.js _ieBlanks */
.ie-pblank { display: inline-flex; align-items: baseline; gap: 4px; padding: 0 4px; border-bottom: 2px solid var(--text-faint); }
.ie-pblank > b { font-size: 12px; color: var(--accent); }
/* TOEFL 하이라이트 — 어휘 · 문장 단순화 문항이 가리키는 낱말(실제 시험 화면처럼), 6-③ */
.ie-ln { display: inline-block; width: 2.2em; margin-right: .4em; text-align: right; font-size: 12px; font-weight: 400;
  color: var(--text-faint); user-select: none; }   /* ITP 줄 번호 — 문항이 「line 12」를 가리킨다(6-③) */
.ie-hl { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.ie-pblank > i { font-style: normal; min-width: 3.5em; }
.ie-pblank.is-filled > i { color: var(--accent); font-weight: 600; }
.ie-pblank.is-cur { background: color-mix(in srgb, var(--accent) 14%, transparent); border-bottom-color: var(--accent); }
.ie-gap > b { font-size: 12px; color: var(--accent); }
.ie-gap.is-other { color: var(--text-faint); }
.ie-gap.is-other > b { color: var(--text-faint); }
.ie-ghost { display: inline-block; min-width: 4.5em; padding: 0 6px; border-bottom: 1px dashed var(--border-mid); color: var(--text-dim); }
.ie-ghost.is-empty::after { content: '\00a0'; }
.ie-gap.is-cur { background: var(--accent-soft); border-radius: 8px; padding: 2px 4px; }
.ie-head .question-num { font-weight: 700; font-size: 18px; margin-right: 8px; }
.ie-head .ie-type { margin-right: auto; }
.ie-in { width: 11em; max-width: 46vw; padding: 4px 8px; font-size: 15px; line-height: 1.4; font-family: inherit;
  border: 1px solid var(--border-mid); border-radius: 8px; background: var(--bg-elevated); color: var(--text-primary); }
.ie-in:focus, .ie-sel:focus { outline: 2px solid var(--accent-glow); border-color: var(--accent); }
/* 낱말 머리가 붙은 빈칸(TOEFL 글자 채우기, 6-③) — 번호 뒤에 머리 · 칸이 붙어 한 낱말로, 칸은 빠진 글자 수만큼(size) */
.ie-gap-word { gap: 0; }
.ie-gap-word > b { margin-right: 4px; }
.ie-gap-word .ie-in { width: auto; padding: 2px 4px; margin-left: 1px; }
.ie-sel { padding: 4px 6px; font-size: 15px; line-height: 1.4; font-family: inherit; border: 1px solid var(--border-mid);
  border-radius: 8px; background: var(--bg-elevated); color: var(--text-primary); min-width: 64px; }
.ie-in.is-right, .ie-sel.is-right { border-color: var(--success); background: rgba(22, 125, 87, .08); }
.ie-in.is-wrong, .ie-sel.is-wrong { border-color: var(--danger); background: rgba(180, 35, 24, .06); }
.ie-fix { margin-left: 6px; font-size: 13px; font-weight: 700; color: var(--success); white-space: normal; }
.ie-table { border-collapse: collapse; font-size: 14px; width: 100%; }
.ie-table th, .ie-table td { border: 1px solid var(--border-mid); padding: 6px 8px; text-align: left; vertical-align: top; line-height: 1.6; }
.ie-table thead th { background: var(--bg-secondary); }
.ie-table .ie-in { width: 8em; }
/* 문항 그림 — 원래 크기보다 늘리지 않는다(2026-10-06, 전에는 폭 100% 로 작은 그림이 흐리게 커졌다). 누르면 크게(js/ielts.js _ieZoom) */
.ie-img { display: block; width: auto; max-width: min(100%, 640px); height: auto; border-radius: 8px; background: #fff; cursor: zoom-in;
  align-self: flex-start; }   /* 문항 칸(.ie-group)은 세로 flex — 늘리기(stretch)를 끈다 */
/* 크게 보기 — 화면을 덮는 판, 그림은 비율을 지켜 판에 꽉 차게(작은 그림도 키운다). 누르면 닫힌다 */
.ie-zoom { position: fixed; inset: 0; z-index: 15000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 12, 30, .82); cursor: zoom-out; }
.ie-zoom img { max-width: 100%; max-height: 100%; background: #fff; border-radius: 8px; }   /* 크기는 js/ielts.js _ieZoom 이 판에 맞춰 준다 */

/* 바꿔 쓴 표현 — 채점 뒤 근거 상자와 칠(글자 크기 · 여백을 안 바꾼다: 줄 자리가 그대로여야 한다) */
.ie-evbox { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--bg-secondary);
  display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }
.ie-evbox.is-wrong { background: #fff6e5; }
.ie-evhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ie-evgo { border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--accent); border-radius: 999px;
  padding: 5px 12px; font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap; }
/* 듣기 근거 상자의 대본(ielts-listen.js ieltsListenScriptLines, 2026-10-04) — 접힌 한 줄, 펴면 그 구간의 대본 줄 · 정답 줄은 노란 띠 */
.ls-script { margin-top: 8px; font-size: 14px; }
.ls-script > summary { cursor: pointer; color: var(--accent); font-weight: 600; width: fit-content; }
.ls-script p { margin: 6px 0 0; padding: 4px 8px; border-radius: 6px; line-height: 1.55; color: var(--text-primary); }
.ls-script p.is-key { background: #fff1c2; box-shadow: inset 3px 0 0 #e2b500; }
/* 다시 듣기가 재생하지 않는 문장 — 같은 발화의 앞뒤라 두되 흐리게(ielts-listen.js ieltsListenEvParts, 2026-10-07) */
.ls-script .ls-off { opacity: .45; }
.ie-evpair { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: baseline; }
.ie-evpair .ie-evarrow { grid-column: 1 / -1; color: var(--text-faint); font-size: 12px; line-height: 1; padding-left: 10px; }
.ie-evtag { font-size: 12px; font-weight: 700; color: var(--text-dim); background: var(--bg-elevated); border-radius: 6px; padding: 1px 6px; }
.ie-evtag.is-p { color: #07015A; background: #E6E8F0; }   /* 노란 꼬리표는 형광으로 읽혀 회색으로(2026-10-05) */
.ie-evq-t { text-decoration: underline; text-decoration-color: #8A93A8; text-underline-offset: 3px; }   /* 회색 — 보라 밑줄은 링크처럼 보였다(2026-10-05) */
.ie-evp-t { font-weight: 700; }
.ie-evnote { color: var(--text-dim); font-size: 13px; }
/* 근거는 글자로(2026-10-05 사용자 「형광은 시선이 읽은 녹색 줄에만」) — 답 문장 = 굵은 남색 + 금색 실선 밑줄, 짝 낱말 = 굵게. 배경 없음 */
mark.ie-evq { background: none; color: #07015A; padding: 0; font-weight: 800; text-decoration: underline 2px #E2B500; text-underline-offset: 3px; text-decoration-skip-ink: none; }   /* skip-ink none — 글자 꼬리에서 밑줄이 끊겨 보였다 */
mark.ie-evp { background: none; color: #07015A; padding: 0; font-weight: 800; }
mark.ie-evqq { background: transparent; color: inherit; padding: 0; text-decoration: underline;
  text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ie-rtable tbody tr { cursor: pointer; }

/* 시간 예산(js/ielts-budget.js) */
.ie-chip { align-self: flex-start; margin: 0 0 6px; border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-dim);
  border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer; }
.ie-chip.is-on { color: var(--accent); border-color: var(--accent-glow); background: var(--accent-soft); }
.ie-chip small { font-weight: 400; opacity: .8; margin-left: 4px; }
.ie-budget-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--bg-secondary); z-index: 5; }
.ie-budget-bar i { display: block; height: 100%; background: var(--accent); transition: width 1s linear; }
.ie-budget-bar.is-warn i { background: #f5b82e; }
.ie-budget-bar.is-over i { background: var(--danger); }
.ie-budget-text { font-size: 13px; font-weight: 700; color: var(--text-dim); padding: 2px 4px 6px; font-variant-numeric: tabular-nums; }
.ie-budget-text.is-warn { color: #b45309; }
.ie-budget-text.is-over { color: var(--danger); }
.ie-time-sum { font-size: 13px; color: var(--text-dim); margin-left: 6px; }
.ie-time-sum .is-over { color: var(--danger); font-style: normal; font-weight: 700; }
.ie-timebar { position: relative; display: flex; height: 14px; border-radius: 999px; overflow: visible; background: var(--bg-secondary); }
.ie-timebar > .ie-seg:first-child { border-radius: 999px 0 0 999px; }
.ie-seg { display: inline-block; height: 100%; }
.ie-legend-row .ie-seg { width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.ie-seg.is-read { background: #7c9cf5; }
.ie-seg.is-question { background: var(--accent); }
.ie-seg.is-back { background: #f5b82e; }
.ie-seg.is-other { background: #d7d7de; }
.ie-budget-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text-primary); }
.ie-legend-row { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-dim); }

/* 훑어읽기(js/ielts-skim.js) — 가릴 때는 visibility 만(자리 · 줄 위치는 그대로) */
.ie-skim-wait .question-block { display: none !important; }
.ie-skim-wait-msg { margin: 24px 8px; text-align: center; font-size: var(--t3); font-weight: 700; color: var(--text-primary); line-height: 1.6; }
.ie-skim-wait-msg small { font-size: 13px; font-weight: 400; color: var(--text-dim); }
.ie-book-done { display: flex; justify-content: center; margin: 20px 0 28px; }   /* 책 연재 — 지문 끝의 「Done reading」(2026-10-15) */
/* 책 연재 — 전자책 쪽 넘김(ielts-book.js). 쪽 = 지문 칸의 scrollTop(코드가 옮긴다), 학생 스크롤은 막는다. 책 글꼴 · 줄 간격은 쪽을 재기 전에 정해진다 */
#passagePanel.ie-book-pages { overflow: hidden !important; overscroll-behavior: contain; position: relative; }
#passagePanel.ie-book-pages .passage-para { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; line-height: 1.75; margin: 0 0 .9em; padding: 0; }   /* 문단 사이는 책처럼 — 시험 지문의 넓은 문단 간격은 쓰지 않는다 */
#passagePanel.ie-book-pages .passage-para + .passage-para { text-indent: 1.4em; }
.ie-book-foot { position: absolute; left: 0; right: 0; z-index: 2; }   /* 자리(top) · 바탕색(--bk-bg)은 ielts-book.js 가 넣는다 */
.ie-book-cover { background: var(--bk-bg, #fff); }
.ie-book-nav { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px 0 10px; background: var(--bk-bg, #fff); border-top: 1px solid var(--border-color, #e3e3ea); }
.ie-book-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-color, #dfe3ec); background: var(--card-bg, #fff); font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-primary); }
.ie-book-nav button:disabled { opacity: .35; cursor: default; }
.ie-book-pg { min-width: 96px; text-align: center; font-size: 13px; font-weight: 600; color: var(--text-dim); }
#passagePanel.ie-skim-covered { position: relative; }
#passagePanel.ie-skim-covered > * { visibility: hidden; }
#passagePanel.ie-skim-covered::after { content: attr(data-cover);   /* 문구는 TXT.ielts.skim.covered(ielts-skim.js 가 싣는다) */
  position: absolute; top: 40px; left: 0; right: 0;
  text-align: center; font-size: 15px; font-weight: 700; color: var(--text-dim); }
.ie-pace-catch { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9400; display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 14px; border: 1px solid var(--accent); border-radius: 999px; background: var(--bg-elevated, #fff); color: var(--text-primary); font-size: var(--fs-body); box-shadow: 0 4px 14px rgba(0,0,0,.08); }   /* Speed up 띠보다 두 문단 이상 뒤(2026-10-22) */
.ie-pace-catch[hidden] { display: none; }
@media (max-width: 600px) { .ie-pace-catch { left: 16px; right: 16px; transform: none; justify-content: space-between; border-radius: 14px; } }
.ie-pace-catch button { border: 0; border-radius: 999px; background: var(--accent); color: #fff; padding: 6px 12px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.ie-skim-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; z-index: 9400; display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(22, 23, 28, .9); color: #fff; font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.ie-skim-pill button { border: 0; border-radius: 999px; background: var(--accent); color: #fff; padding: 8px 14px; font-weight: 700; font-size: 14px;
  font-family: inherit; cursor: pointer; }
.ie-skim-q { max-width: 340px; }
/* 훑는 동안 아래 단추는 숨긴다 — 누르면 가려 둔 문항으로 넘어가 채점까지 간다 */
#questionViewport.ie-skim-wait ~ #questionNav { visibility: hidden; }
.ie-rtable.is-skim tr.is-no td:nth-child(2) { color: inherit; }
.ie-rtable.is-skim tr.is-no td:nth-child(3) { color: var(--danger); }
@media (min-width: 769px) { .ie-skim-pill { left: auto; right: 28px; transform: none; bottom: 96px; } }
#passagePanel.ie-skim-read.ar-para-no .passage-para::before { content: '¶' counter(arpara); font-size: 12px; }

/* 속도 가이드(js/ielts-pace.js) — 문단 단위 띠. 배경 · 투명도만(줄 자리 그대로) */
#passagePanel.ie-pace .passage-para { transition: background .35s, opacity .35s; border-radius: 6px; }
#passagePanel.ie-pace .passage-para.ie-pace-on { background: #fff4c7; box-shadow: 0 0 0 6px #fff4c7; }
#passagePanel.ie-pace .passage-para.ie-pace-done { opacity: .5; }
/* Speed reading 덩어리 띠(2026-10-02) — 문단은 옅게, 그 안의 덩어리 하나를 진하게 */
#passagePanel.ie-guide-chunks .passage-para.ie-pace-on { background: #fffbea; box-shadow: 0 0 0 6px #fffbea; }
#passagePanel .ie-ck-on { background: #ffe27a; border-radius: 4px; box-shadow: 0 0 0 2px #ffe27a; }
.ie-guide { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.ie-guide .ie-chip small { font-weight: 400; opacity: .75; }
.ie-pace-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--text-dim); }
.ie-pace-ctl button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-mid); background: var(--bg-elevated);
  font-size: 18px; font-weight: 700; color: var(--text-primary); cursor: pointer; font-family: inherit; }
.ie-pace-ctl b { color: var(--text-primary); font-size: 16px; min-width: 80px; text-align: center; }
.ie-skim-pill #iePacePause { background: rgba(255, 255, 255, .18); }
/* 막대 글 두 줄 — 속도(굵게) · 남은 시간(작게). 꺾이지 않게(2026-10-19 폰 사진: 「200 / wpm · / 3:50 · paused」 세 줄) */
#ieSkimLeft { display: flex; flex-direction: column; flex: none; white-space: nowrap; line-height: 1.2; }
#ieSkimLeft small { font-size: 13px; font-weight: 600; opacity: .75; }
.ie-skim-pill #iePacePause { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 16px; }
.ie-skim-pill .ie-skim-done { flex: none; white-space: nowrap; padding: 12px 18px; }
/* 폰 — 아래 칸 맨 위의 꽉 찬 띠(ielts-skim.js ieltsSkimPillDock). 떠 있지 않으니 그림자 · 둥근 끝 없이, 단추는 오른쪽에 */
.ie-skim-pill.is-dock { position: static; transform: none; z-index: auto; border-radius: 0; box-shadow: none; padding: 8px 12px 8px 16px;
  background: rgb(22, 23, 28); }
.ie-skim-pill.is-dock .ie-skim-done { margin-left: auto; }
/* 덩어리는 줄 끝에서 쪼개지지 않고 통째로 다음 줄로 — 폰에서 「Credit for this / development」 */
#passagePanel .ie-ck { white-space: nowrap; }   /* 줄 폭보다 넓은 덩어리는 ielts-pace.js 가 그려 본 뒤 나눈다 */

/* 찾기 훈련(js/ielts-drill.js) */
.ie-modes { display: flex; gap: 0; margin: 4px 0 6px; background: var(--bg-secondary); border-radius: 12px; padding: 4px; width: fit-content; }
.ie-mode { border: 0; background: transparent; color: var(--text-dim); border-radius: 9px; padding: 8px 16px;
  font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; }
.ie-mode.is-on { background: var(--bg-elevated); color: var(--text-primary); box-shadow: 0 1px 4px rgba(22, 23, 28, .1); }
/* ═══ 메뉴 세 층(js/ielts.js _ieRenderList, 2026-09-30) — 1층 기능 탭(밑줄) · 2층 방법(.ie-modes) · 기술 카드 · 3층 칩(.ie-tab) ═══ */
.ie-skills { display: flex; gap: 2px; margin: 2px 0 10px; border-bottom: 1px solid var(--border-soft); overflow-x: auto; scrollbar-width: none; }
.ie-skills::-webkit-scrollbar { display: none; }
.ie-skill { flex: 0 0 auto; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: transparent; padding: 10px 14px;
  font-weight: 700; font-size: 15px; font-family: inherit; color: var(--text-dim); cursor: pointer; }
.ie-skill:hover { color: var(--text-primary); }
.ie-skill.is-on { color: var(--text-primary); border-bottom-color: var(--accent); }
/* Words 는 기능이 아니라 여러 기능에 걸친 단어장 — 세로 선으로 떼어 둔다. 오른쪽 끝에 두면 있는지 몰라서
   기능 탭 바로 옆에 「| Words」 로 붙인다(사용자 2026-10-03) */
.ie-skill-words, .ie-skill-full { margin-left: 6px; position: relative; padding-left: 18px; }
.ie-skill-words::before, .ie-skill-full::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; border-left: 1px solid var(--border-mid); }
/* Skill drills 의 기술 카드 셋 — 무엇을 하는가 한 줄 + 무엇을 재는가 */
.ie-drills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0 8px; max-width: 780px; }
.ie-drill { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-primary); font-family: inherit; cursor: pointer; }
.ie-drill:hover { border-color: var(--accent-glow, var(--accent)); }
.ie-drill.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.ie-drill-name { font-weight: 700; font-size: var(--t3); }
.ie-drill-does { font-size: 13px; line-height: 1.35; }
.ie-drill-meas { font-size: 12px; color: var(--text-dim); }
/* IELTS Academic | General Training — 제목 옆 작은 두 칸 */
.ie-variant { display: inline-flex; margin-left: 12px; vertical-align: middle; padding: 3px; border-radius: 999px; background: var(--bg-secondary); }
.ie-variant button { border: 0; background: transparent; border-radius: 999px; padding: 4px 11px; font-weight: 700; font-size: 12px;
  font-family: inherit; color: var(--text-dim); cursor: pointer; }
.ie-variant button.is-on { background: var(--bg-elevated); color: var(--text-primary); box-shadow: 0 1px 3px rgba(22, 23, 28, .12); }
@media screen and (max-width: 560px) {
  /* 기능 넷 + Words 가 한 줄에 다 보이게 — 옆으로 밀면 Words 가 화면 밖에 숨었다(2026-09-30 390px 화면) */
  .ie-skill { flex: 1 1 auto; padding: 10px 4px; font-size: 14px; }
  .ie-skill-words, .ie-skill-full { flex: 0 0 auto; margin-left: 4px; padding-left: 10px; }
  /* Full mock 이 있는 시험(IELTS)은 칸이 여섯이라 폰 폭에 안 들어간다 — 영역 넷이 첫 줄을 똑같이 나누고,
     Full mock │ Words 는 둘째 줄 왼쪽에(2026-10-07 사용자). 옆으로 밀면 두 칸이 화면 밖에 있었다 */
  .ie-skills.has-full { flex-wrap: wrap; gap: 0; }
  .ie-skills.has-full .ie-skill:not(.ie-skill-full):not(.ie-skill-words) { flex: 1 1 25%; box-shadow: 0 1px 0 var(--border-soft); }
  .ie-skills.has-full .ie-skill-full { margin-left: 0; padding-left: 10px; }
  .ie-skills.has-full .ie-skill-full::before { display: none; }
  /* 카드 셋은 세 칸 한 줄 그대로 — 옆으로 넘기면 고른 카드가 화면 밖에 있었다. 폭이 좁아 「무엇을 재는가」는 뺀다 */
  .ie-drills { gap: 6px; }
  .ie-drill { padding: 9px 8px; gap: 2px; }
  .ie-drill-name { font-size: var(--t3); }
  .ie-drill-does { font-size: 12px; line-height: 1.3; }
  .ie-drill-meas { display: none; }
  .ie-variant { display: flex; width: fit-content; margin: 6px 0 0; }
}
/* 안내문은 두 줄 자리를 지킨다 — 두 줄짜리(TOEIC · TOEFL · SAT 모의고사) 메뉴에서만 카드가 16px 내려가지 않게(2026-09-27) */
.ie-mode-note { margin: 0 0 6px; font-size: 13px; line-height: 16px; min-height: 32px; color: var(--text-dim); }
/* 이 영역에 세트가 없을 때 목록 자리 한 줄(2026-10-06 운영 앱 — TXT.ielts.list.noSets) */
.ie-empty-note { margin: 8px 0 0; font-size: 15px; color: var(--text-dim); }
.ie-drill .ie-opts, .ie-drill .ie-sel, .ie-drill .ie-in { opacity: .45; pointer-events: none; }
/* 지시문 — 선지(둥근 상자)와 다른 꼴로: 상자 없이 왼쪽 막대 + 강조색 굵은 글씨(2026-09-28 사용자 지시, 점선 상자는 선지로 보였다) */
.ie-drillbox { margin: 14px 0 18px; padding: 4px 0 4px 12px; border-left: 4px solid var(--accent);
  display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.ie-drill-ask { font-weight: 700; color: var(--accent); }
.ie-drill-ask::before { content: '👆 '; }
/* 「Find」 — 넓은 화면에도(2026-10-18 docs/dev/30 단계 3: 시계는 이 단추부터, 문항 읽는 시간을 빼려고). 폰은 지문 탭으로도 넘김 */
.ie-drill-go { display: inline-block; align-self: flex-start; border: 0; background: var(--accent); color: #fff; border-radius: 999px;
  padding: 8px 16px; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; }
.ie-drill-ask.is-skip { color: var(--text-dim); font-weight: 600; }
.ie-drill-ask.is-skip::before { content: ''; }
.ie-drill-msg b { font-weight: 700; }
.ie-drill-msg .is-ok { color: var(--success); }
.ie-drill-msg .is-no { color: #b4541a; }
.ie-drill-msg .is-try { color: var(--danger); }
.ie-drill-pair { margin-top: 4px; font-size: 14px; color: var(--text-dim); }
/* 찾기 문항만 들른다는 한 줄(2026-10-19 4번 A안) — 지시 막대 안 맨 위, 흐린 글씨 */
.ie-drill-only { margin: 0; font-size: 14px; color: var(--text-dim); }
.ie-drill-pp .sent { cursor: pointer; border-radius: 3px; transition: background .15s; }
.ie-drill-pp .sent:hover { background: var(--accent-soft); }
.ie-drill-pp .sent.ie-drill-ok { background: #d9f5e8; }
.ie-drill-pp .sent.ie-drill-no { background: #fde4e4; }
.ie-rtable tbody tr:hover { background: var(--bg-secondary); }

@media screen and (max-width: 768px) {
  body.sb-more #sbIelts { order: 5; }
  .ie-grid { grid-template-columns: 1fr; }
  .ie-match { flex-direction: column; align-items: flex-start; }
}

/* ══ 시험 고르기(js/exam-pack.js, 2026-09-27) — 사이드바 맨 위 「IELTS | 수능」.
      메뉴는 data-exam-only 로 시험마다 걸러 보인다. IELTS 모드에서는 IELTS 목록이 홈이라
      IELTS 화면이 사이드바(데스크톱 왼쪽 · 폰 아래 바) 자리를 비워 두고 뜬다. ══ */
.sb-exam { display: flex; flex-direction: column; gap: 3px; padding: 3px; margin-bottom: 6px;
  border-radius: 12px; background: var(--bg-secondary); flex-shrink: 0; }
.sb-exam-btn { border: 0; border-radius: 9px; padding: 6px 2px; background: transparent; color: var(--text-dim);
  font: 700 12px Inter, sans-serif; cursor: pointer; }
.sb-exam-btn:hover { color: var(--text-primary); }
.sb-exam-btn.is-on { background: var(--bg-elevated); color: var(--accent); box-shadow: 0 1px 3px rgba(22, 23, 28, .12); }
body.mock-running .sb-exam, body.ielts-running .sb-exam { opacity: .35; pointer-events: none; }
/* 시험이 하나뿐이면 고를 것이 없다(js/exam-pack.js) — 폰 더보기 시트 규칙보다 무겁게 */
body[data-exam-count="1"] .sb-exam { display: none !important; }

body[data-exam] [data-exam-only="suneung"] { display: none !important; }
body[data-exam="suneung"] [data-exam-only="ielts"] { display: none !important; }
/* 폰 더보기 시트의 설정 묶음 규칙(body.sb-more #sbSettingsGroup { display: contents !important })을 이긴다 — 같은 무게, 뒤에 적힌 쪽 */
body[data-exam] #sbSettingsGroup { display: none !important; }
/* IELTS 는 IELTS 모드의 홈이 여므로 따로 단추를 두지 않는다 */
#sbIelts { display: none !important; }

/* 홈 자리 — 홈(z 200) 위 · 사이드바(z 700) 아래. 원정(z 9000) · 미니게임 · 더보기 시트가 그 위에 뜬다 */
/* 시험 목록 화면(독해 엔진 — IELTS · TOEIC · TOEFL · SAT 모두)은 사이드바 옆에. 2026-09-27 까지 이 규칙들이
   data-exam 이 ielts 일 때에만 걸려, 다른 시험을 고르면 목록(z 9500)이 사이드바를 덮어 메뉴가 사라졌다 — 시험 이름으로 거르지 않는다 */
body[data-exam] #ieltsScreen { left: var(--sidebar-w); z-index: 600; }
/* 환경설정 화면(settings.js) — 목록과 같은 자리, 목록 바로 위 층 */
body[data-exam] #settingsScreen { left: var(--sidebar-w); z-index: 601; }
/* 결과 창은 독해 화면(채점 뒤 「지문과 함께 보기」로 돌아갈 자리) 위에 뜬다 — 그동안 사이드바는 감춰져 있어(rd-open)
   왼쪽 84px 틈으로 뒤의 지문 글자가 비쳤다(2026-09-27). 독해 화면이 열려 있으면 왼쪽 끝까지 덮는다 — 메뉴는 ☰ 로 그 위에 뜬다 */
body[data-exam].rd-open #ieltsScreen, body[data-exam].rd-open #settingsScreen { left: 0; }
/* 목록이 홈이다 — 목록의 「‹」(닫기 → 수능 홈)는 IELTS 모드에서 두지 않는다 */
body[data-exam] #ieltsScreen .ie-back[onclick="closeIelts()"] { display: none; }
/* 숨긴 「‹」 가 48px 칸을 지켜 제목이 아래 탭 · 카드보다 48px 안쪽에서 시작했다(사용자 2026-10-03) — 그 칸째 뺀다 */
body[data-exam] #ieltsScreen .ie-top-list:has(> .ie-back[onclick="closeIelts()"]) { grid-template-columns: 1fr auto; }
@media screen and (max-width: 560px) { body[data-exam] #ieltsScreen .ie-top-list:has(> .ie-back[onclick="closeIelts()"]) { grid-template-columns: 1fr; } }

@media screen and (max-width: 768px) {
  body[data-exam] #ieltsScreen, body[data-exam] #settingsScreen { left: 0; bottom: var(--bottom-bar-h); }
  /* 아래 바 — 수능 칸(지문읽기 · 문제풀이 · 오답노트)이 빠진 자리에 원정 · 미니게임 */
  body[data-exam]:not(.sb-more) #sbChallenge,
  body[data-exam]:not(.sb-more) #sbMinigame {
    display: flex; flex: 1; min-width: 0; justify-content: center; padding: 6px 2px; gap: 2px; border-radius: 10px; }
  /* 시험 고르기는 더보기 시트 맨 위 한 줄 */
  #appSidebar .sb-exam { display: none; }
  body.sb-more #appSidebar .sb-exam { display: flex; flex-direction: row; grid-column: 1 / -1; order: 0; margin: 0 0 4px; }
  body.sb-more #appSidebar .sb-exam-btn { flex: 1; padding: 10px 2px; font-size: 13px; }
}

/* ══ 앱 안 대화 상자(js/dialog.js, 2026-09-27 D4) — 브라우저 alert · confirm 대신. 첫 화면(z 20000) 위 ══ */
.ui-dlg { position: fixed; inset: 0; z-index: 25000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(15, 17, 25, .45); }
.ui-dlg-box { width: min(420px, 100%); box-sizing: border-box; padding: 22px 20px 16px; border-radius: 16px;
  background: var(--bg-elevated); color: var(--text-primary); box-shadow: 0 18px 48px rgba(15, 17, 25, .28);
  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
/* 캘리브레이션 품질 신호등(js/cal-quality.js, 2026-09-29) — 켜진 불 하나 · 그 아래 제목 */
.ui-dlg-head { margin: 0 0 12px; }
.cq { text-align: center; }
.cq-light { display: inline-flex; gap: 12px; padding: 10px 16px; border-radius: 999px; background: #1f2330; }
.cq-lamp { width: 30px; height: 30px; border-radius: 50%; display: block; opacity: .2; }
.cq-lamp.is-red { background: #ef4444; }
.cq-lamp.is-amber { background: #f5b400; }
.cq-lamp.is-green { background: #22c55e; }
.cq-lamp.is-on { opacity: 1; }
.cq-lamp.is-red.is-on { box-shadow: 0 0 14px 3px rgba(239, 68, 68, .65); }
.cq-lamp.is-amber.is-on { box-shadow: 0 0 14px 3px rgba(245, 180, 0, .6); }
.cq-lamp.is-green.is-on { box-shadow: 0 0 14px 3px rgba(34, 197, 94, .6); }
.cq-title { margin: 10px 0 0; font-size: 20px; font-weight: 700; }
.cq.is-good .cq-title { color: var(--success); }
.cq.is-fair .cq-title { color: #b45309; }
.cq.is-poor .cq-title { color: var(--danger); }
.ui-dlg-msg { margin: 0 0 18px; font-size: 16px; line-height: 1.55; white-space: pre-line; }
.ui-dlg-btns { display: flex; justify-content: flex-end; gap: 8px; }
.ui-dlg-btn { min-width: 88px; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border-mid);
  background: var(--bg-elevated); color: var(--text-primary); font: 600 15px 'Inter', sans-serif; cursor: pointer; }
.ui-dlg-btn.is-main { background: var(--accent); border-color: var(--accent); color: #fff; }
.ui-dlg-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ══ 4단계 ④(2026-09-27) ══
   미니게임은 코드만 남기고 화면에서는 열지 않는다(사용자 결정) — 사이드바 · 폰 아래 바 · 더보기 시트 모두에서 숨긴다.
   다시 열 때는 이 규칙만 지운다(js/minigame.js 가 단추를 스스로 건다). */
#sbMinigame { display: none !important; }
/* 원정 맵 오른쪽 칸 맨 아래 — 컴패니언 바꾸기(수능 홈의 「친구 바꾸기」를 옮김) */
.exp-comp-btn { margin-top: 12px; width: 100%; }

/* ══ 내 지문 붙여넣기(js/ielts-paste.js, 2026-09-27 5단계) ══ */
.ie-card-paste { border-style: dashed; }
.ie-card-paste .ie-card-type { font-size: 20px; }
.ie-paste-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; font-weight: 700; font-size: 14px; }
.ie-paste-field textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-mid);
  background: var(--bg-elevated); color: var(--text-primary); font: 400 15px/1.5 'Inter', 'Pretendard', sans-serif; resize: vertical; }
.ie-paste-err { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fef2f2; color: var(--danger); font-size: 14px; }
.ie-paste-err.hidden { display: none; }

/* ══ 계정 줄(js/server/account.js, 2026-09-27 5단계) — IELTS 목록 머리 오른쪽 ══ */
.ie-top.ie-top-list { grid-template-columns: 48px 1fr auto; }
.rt-account { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; font-size: 13px; }
.rt-account[hidden] { display: none; }
.rt-account-who { color: var(--text-dim); }
.rt-account-btn { border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-primary); border-radius: 999px;
  padding: 6px 12px; font: 600 13px 'Inter', 'Pretendard', sans-serif; cursor: pointer; }
.rt-account-in { border-color: var(--accent); color: var(--accent); }
.rt-account-del { color: var(--danger); }
.rt-account-msg { flex-basis: 100%; margin: 2px 0 0; text-align: right; color: var(--text-dim); }
@media screen and (max-width: 560px) { .ie-top.ie-top-list { grid-template-columns: 48px 1fr; } .rt-account { grid-column: 1 / -1; justify-content: flex-start; } }
/* 폰 폭 — 메뉴를 바꿔도 카드가 같은 높이에서 시작하게(2026-09-27). 안내문은 세 줄 자리를 지키고, 탭이 있는 시험(IELTS)은
   조절 칸(⏱ · 속도)을 늘 둘째 줄에 두며 그 줄 자리를 모든 메뉴에서 비워 둔다 — 탭 옆에 안 들어가 한 줄 더 내려가던 것 */
@media screen and (max-width: 560px) {
  .ie-mode-note { min-height: 48px; }
  /* 모드 줄(Practice … Mock test)이 폰 폭보다 넓어 목록 화면 전체가 옆으로 밀렸다(2026-09-27 폰 사용자 사진) —
     화면 폭에 맞춰 칸을 나누고(글자는 두 줄까지), 목록 화면은 옆으로 스크롤하지 않는다 */
  .ie-modes { width: 100%; box-sizing: border-box; }
  .ie-mode { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 13px; line-height: 1.2; }
  #ieltsScreen, #settingsScreen { overflow-x: hidden; }
  .ie-tabs.has-tabs { min-height: 80px; align-content: flex-start; }
  .ie-tabs.has-tabs .ie-tabs-ctl { flex-basis: 100%; margin-left: 0; min-height: 34px; }   /* ⏱ 칩 · 속도 조절 · 빈 자리 모두 같은 높이 */
}

/* ═══ 환경설정(js/settings.js, 2026-09-27) — Account · Display · Data on this device ═══ */
#sbSettings { margin-top: auto; }   /* 컴퓨터 사이드바 맨 아래 */
/* 머리줄은 스크롤해도 위에 붙는다 — 아래(About 등)까지 내려가도 × 로 닫을 수 있게(2026-09-27) */
.ie-top.rt-set-top { position: sticky; top: 0; z-index: 2; margin: -12px -16px 0; padding: 4px 16px; background: var(--bg-primary);
  grid-template-columns: 48px 1fr 44px; border-bottom: 1px solid var(--border-soft); }
.rt-set-x { width: 40px; height: 40px; border: 1px solid var(--border-soft); border-radius: 50%; background: var(--bg-elevated);
  color: var(--text-primary); font-size: 24px; line-height: 1; cursor: pointer; }
.rt-set-x:hover { border-color: var(--accent); color: var(--accent); }
.rt-set-sec { margin: 18px 0; padding: 16px 18px; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--bg-elevated); }
.rt-set-sec h3 { margin: 0 0 10px; font-size: var(--t2); font-weight: 700; }
.rt-set-note { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
.rt-set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rt-set-row p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.rt-set-switch { display: inline-flex; flex: none; padding: 3px; border-radius: 10px; background: var(--bg-secondary); }
.rt-set-switch button { border: 0; padding: 7px 14px; border-radius: 8px; background: transparent; color: var(--text-dim); font: 700 13px inherit; cursor: pointer; }
.rt-set-switch button.is-on { background: var(--accent); color: #fff; }
.rt-set-danger { border: 1px solid var(--danger); color: var(--danger); background: transparent; padding: 9px 14px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.rt-set-flash { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 13.5px; }
.rt-account-full { display: block; }
.rt-account-full .rt-account-who { display: block; margin-bottom: 10px; font-weight: 600; }
.rt-account-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-account-who-btn { background: transparent; border: 0; text-decoration: underline; cursor: pointer; }
/* 되돌릴 수 없는 일의 확인 창(dialog.js uiConfirmDanger) */
.ui-dlg-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: 14px; cursor: pointer; }
.ui-dlg-btn.is-main.is-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
/* 로그인 창(server/account.js, 2026-10-01) — 앱 안 대화 상자(.ui-dlg)의 틀에 입력칸 · Google 단추 · 글자 링크 */
.rt-auth { display: flex; flex-direction: column; gap: 10px; }
.rt-auth-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 4px; }
.rt-auth-head h2 { margin: 0; font-size: var(--t2); }
.rt-auth-x { border: 0; background: none; color: var(--text-dim); font-size: 24px; line-height: 1; width: 40px; height: 40px; cursor: pointer; border-radius: 10px; }
/* Google 단추(2026-10-03) — Google 로그인 단추 꼴: 흰 바탕 · 회색 테두리 · 왼쪽에 다색 G 로고 · 가운데 글자 */
.rt-auth-google { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 16px; border-radius: 12px;
  border: 1px solid #747775; background: #fff; color: #1F1F1F; font-size: 15px; font-weight: 600; cursor: pointer; }
.rt-auth-google:hover { background: #F7F8FC; }
.rt-auth-google .rt-g-logo { width: 20px; height: 20px; flex: 0 0 auto; }
.rt-auth-or { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 13px; }
.rt-auth-or::before, .rt-auth-or::after { content: ''; flex: 1; border-top: 1px solid var(--border-mid); }
.rt-auth-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-dim); }
.rt-auth-input { display: flex; align-items: stretch; border: 1px solid var(--border-mid); border-radius: 12px; background: var(--bg-elevated); overflow: hidden; }
.rt-auth-input:focus-within { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
.rt-auth-input input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--text-primary); font-size: 16px; outline: none; }
.rt-auth-show { border: 0; background: none; color: var(--accent); font-size: 13px; padding: 0 12px; cursor: pointer; }
.rt-auth-main { width: 100%; margin-top: 4px; }
.rt-auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.rt-auth-alt { width: 100%; margin-top: 8px; }   /* 로그인 창 안의 「Create account」 단추(2026-10-18 QA) */
.rt-auth-link { border: 0; background: none; padding: 6px 0; color: var(--accent); font-size: 14px; cursor: pointer; }
.rt-auth-hint { margin: -4px 0 0; font-size: 13px; color: var(--text-dim); }
.rt-auth-text { margin: 0; font-size: 16px; line-height: 1.55; }
.rt-auth-msg { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--text-dim); }
.rt-auth-msg:empty { display: none; }
.rt-auth .ui-dlg-btns { margin-top: 4px; }
.rt-auth button:disabled, .rt-auth input:disabled { opacity: .6; cursor: default; }
/* 버그 리포트 창(js/track.js rtBugReportOpen, 2026-10-01) — 앱 안 대화 상자(.ui-dlg) 틀에 글 칸 · 주소 칸 */
.rt-bug { display: flex; flex-direction: column; gap: 10px; }
.rt-bug .ui-dlg-head { margin: 0; }
.rt-bug-msg, .rt-bug-email { width: 100%; box-sizing: border-box; border: 1px solid var(--border-mid); border-radius: 12px; background: var(--bg-elevated);
  color: var(--text-primary); font: inherit; font-size: 16px; padding: 10px 12px; }
.rt-bug-msg { resize: vertical; min-height: 120px; line-height: 1.5; }
.rt-bug-email { min-height: 44px; }
.rt-bug-msg:focus, .rt-bug-email:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
.rt-bug .ui-dlg-check { margin: 0; }
.rt-bug-err { margin: 0; font-size: 14px; color: var(--danger); }
.rt-bug .ui-dlg-btn:disabled { opacity: .5; cursor: default; }
/* 가입 창의 메일 체크 · Settings 의 메일 칸(2026-10-01) */
.rt-auth-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--text-primary); cursor: pointer; }
.rt-auth-check input { margin-top: 3px; }
.rt-mail { margin: 4px 0 14px; }
.rt-mail h4 { margin: 0 0 8px; font-size: var(--t3); color: var(--text-primary); font-weight: 700; }
.rt-mail-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; }
.rt-mail-row input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.rt-mail-row b { display: block; font-size: 15px; font-weight: 600; }
.rt-mail-row small { display: block; font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.rt-set-gap { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.rt-set-credits { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }
/* Settings › Legal(2026-10-15) — 사이트 약관 · 개인정보 · 환불 링크 세 줄 */
.rt-set-legal { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rt-set-legal a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--accent, #5b4bd6); font-weight: 600; text-decoration: none; }
.rt-set-legal a:hover { text-decoration: underline; }

/* iOS 판 안내(settings.js rtIosNoticeHtml · 워밍업 #wuIos, 2026-09-27) — 시선 추적은 iOS 26.5 이상 */
.rt-ios-note { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 10px; padding: 10px 12px; border-radius: 12px;
  background: #fff7e6; border: 1px solid #f5c26b; color: #7a4b00; font-size: 13.5px; line-height: 1.5; }
.rt-ios-note span { flex: 1; }
.rt-ios-note.hidden { display: none; }
/* 홈 축하(home-cheer.js, 2026-10-03) — 칸 위 조각 캔버스 · 테두리 한 번 빛남 · 칸 안 한 줄 */
.hm-cheer-host { position: relative; }
.hm-cheer-fx { position: absolute; pointer-events: none; z-index: 3; }
/* 양옆 12 를 잡고 글만큼 넓게 가운데(fit-content + auto) — left:50% 는 칸 폭의 절반에서 글을 꺾었다(2026-10-19 폰 사진).
   모서리 20: 한 줄이면 알약, 두 줄이면 둥근 상자(999 는 두 줄에서 타원이 된다) */
.hm-cheer-msg { position: absolute; left: 12px; right: 12px; top: 10px; width: fit-content; margin: 0 auto; z-index: 4; box-sizing: border-box;
  padding: 8px 14px; border-radius: 20px; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; line-height: 1.3; text-align: center;
  box-shadow: 0 8px 22px rgba(96, 18, 243, .28); animation: hm-cheer-in .35s ease-out both; transition: opacity .4s; pointer-events: none; }
.hm-cheer-msg.is-out { opacity: 0; }
.hm-cheer-host.is-cheer { animation: hm-cheer-glow 1.3s ease-out; }
@keyframes hm-cheer-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hm-cheer-glow { 0% { box-shadow: 0 0 0 0 rgba(96, 18, 243, .45); } 60% { box-shadow: 0 0 0 10px rgba(96, 18, 243, 0); } 100% { box-shadow: 0 0 0 0 rgba(96, 18, 243, 0); } }
@media (prefers-reduced-motion: reduce) { .hm-cheer-msg { animation: none; } .hm-cheer-host.is-cheer { animation: none; } }
/* 처음 사용자 안내(onboard.js, 2026-10-03) — 밝힌 자리(구멍) 밖을 어둡게, 그 아래(위) 말풍선 */
.onb { position: fixed; inset: 0; z-index: 20000; }
.onb-hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(10, 12, 40, .58); transition: all .25s ease; pointer-events: none; }
.onb-tip { position: fixed; box-sizing: border-box; padding: 16px 18px 14px; border-radius: 16px; background: var(--bg-elevated, #fff); color: var(--text-primary);
  box-shadow: 0 16px 40px rgba(10, 12, 40, .3); transition: top .25s ease, left .25s ease; }
.onb-n { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--accent); }
.onb-t { margin: 0 0 6px; font-size: var(--t3); font-weight: 700; }
.onb-x { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.onb-btns { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.onb-skip { border: 0; background: transparent; color: var(--text-dim); font: 600 14px Inter, sans-serif; cursor: pointer; padding: 8px 4px; }
.onb-next { border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: 700 14px Inter, sans-serif; padding: 9px 20px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .onb-hole, .onb-tip { transition: none; } }
.wu-first { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.wu-first.hidden { display: none; }
.onb-hint { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft, rgba(96, 18, 243, .08)); color: var(--accent); font-size: 13.5px; font-weight: 600; }
.rt-set-btns { display: flex; flex-wrap: wrap; gap: 8px; }
/* 막는 안내(2026-10-03) — 빨간 글 · 닫기 없음 */
.rt-ios-note.is-blocked { background: #fdecec; border-color: #e5484d; color: #b4232a; font-size: 14.5px; }
.rt-ios-note.is-blocked b { font-weight: 700; }
.rt-ios-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.wu-ios { max-width: 520px; margin: 10px auto; text-align: left; }

/* ═══ 한 판 리포트 「Your Reading Profile」(ielts-report.js, 2026-09-28 — 사용자 시안) ═══
   색은 앱 강조색(--accent 보라)과 로고의 청록 둘. 카드는 흰 바탕 · 옅은 테두리 · 둥근 18px. */
.ie-app.rp-wide { max-width: 1100px; }
.rp { --rp-ink: #0f1a4d; --rp-violet: var(--accent); --rp-teal: #0b9cba; --rp-soft: rgba(96, 18, 243, 0.08);
  display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.rp-head { position: relative; padding: 4px 2px 2px; }
.rp-brand { display: flex; align-items: center; gap: 8px; font-size: 20px; color: var(--rp-ink); }
.rp-brand img { width: 34px; height: 34px; object-fit: contain; }
.rp-chip { position: absolute; top: 4px; right: 2px; border: 1px solid var(--border-mid); background: var(--bg-elevated);
  border-radius: 10px; padding: 6px 14px; font-size: 13px; font-weight: 700; color: var(--rp-ink); }
.rp-title { margin: 14px 0 2px; font-size: var(--t1); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--rp-ink); }
.rp-title em { font-style: normal; color: var(--rp-violet); }
.rp-sub { margin: 4px 0 0; font-size: clamp(15px, 2vw, 20px); color: var(--rp-ink); opacity: .85; }
.rp-set { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--text-dim); }
.rp-row1 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.rp-row1 > :only-child { grid-column: 1 / -1; max-width: 560px; }
/* 결과 화면 — Gaze Path 를 접힘 밖, 요약 바로 아래 한 줄 가득(ielts-report.js, 2026-10-04) */
.rp-gp-out { margin: 14px 0; }
/* 할 일 종합(ielts-report.js ieltsReportPlan, 2026-10-04) — ① What to do next ② Your skills in this set ③ Evidence check ④ Your reading pattern */
.rp .rq-next, .rp .rq-skills, .rp .rq-ev, .rp .rq-pat { margin: 14px 0; }
/* 칸 머리 통일(2026-10-05) — 모든 칸이 원 아이콘 52 · 제목 20px 보라 · 부제 13px(_rpCardHead · 옛 rp-card-h 와 같은 모양), 머리 아래 12px */
.rp-sec-h { margin-bottom: 12px; }
/* 글자 크기 통일 — 본문 14px · 줄 제목 15px 굵게 · 보조 13px · 칩 12px */
.rq-pat p, .rq-cell p, .ev-act, .mp-h, .qt-table td { font-size: 14px; }
.rq-next ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rq-act { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--bg-primary); }
.rq-k { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font: 700 14px Inter, sans-serif; }
.rq-act:not(:first-child) .rq-k { background: rgba(96, 18, 243, .12); color: var(--accent); }
.rq-t { min-width: 0; }
.rq-t b { font-size: var(--t3); }
.rq-t p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.rq-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.rq-qs { font-size: 12px; color: var(--text-dim); margin-right: 2px; }
.rq-chip { min-height: 26px; padding: 0 8px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--bg-elevated); font: 600 12px Inter, sans-serif; color: var(--text-primary); cursor: pointer; }
.rq-chip.is-ok { color: var(--success); }
.rq-chip.is-no { color: #c0392b; }
.rq-chip.is-back { border-color: currentColor; border-width: 2px; }
.rq-chip.is-noback { border-style: dashed; border-color: currentColor; }
.rq-b .ie-btn, .rq-go { margin: 0; white-space: nowrap; min-height: 36px; padding: 6px 12px; font-size: 13px; }
.rq-plan { font-size: 13px; font-weight: 700; color: var(--success); white-space: nowrap; }
/* 학습 방법 전체 목록(2026-10-05) — 권하는 것은 보라 테두리 */
.wn-kit { margin: 0 0 14px; }
.wn-kit-h { margin: 0 0 8px; font-size: 14px; } .wn-kit-h b { margin-right: 4px; }
.wn-kit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.wn-m { padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-primary); }
.wn-m.is-rec { border: 2px solid var(--accent); background: rgba(96, 18, 243, .05); }
.wn-m-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; }
.wn-m-h b { font-size: var(--t3); }
.wn-m-h span { font-size: var(--fs-label); font-weight: 600; color: var(--text-dim); }
.wn-m.is-rec .wn-m-h span { color: var(--accent); }
.wn-m p { margin: 4px 0 2px; font-size: 13px; line-height: 1.4; }
.wn-m small { font-size: 12px; color: var(--text-dim); }
.wn-rec { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
/* What to do next 표(2026-10-05 — 할 일 + 축별 진단 합침) */
.wn-focus { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(96, 18, 243, .07); font-size: 14px; }
.wn-focus b { color: var(--accent); margin-right: 4px; }
.wn-table { width: 100%; border-collapse: collapse; }
.wn-table th { padding: 6px 8px; font-size: 13px; font-weight: 700; color: var(--accent); text-align: left; border-bottom: 1px solid var(--border-soft); }
.wn-table td { padding: 12px 8px; font-size: 14px; vertical-align: top; border-bottom: 1px solid var(--border-soft); }
.wn-row.is-keep td { color: var(--text-dim); }
.wn-row.is-habit td { background: var(--bg-primary); }
.wn-skill { width: 30%; } .wn-skill b { font-size: var(--t3); }
.wn-st { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.wn-k { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.wn-why span { display: block; line-height: 1.45; } .wn-why span + span { margin-top: 4px; }
.wn-when { white-space: nowrap; font-size: 13px; color: var(--text-dim); }
.wn-act { text-align: right; white-space: nowrap; }
/* Action items 칸 강조(2026-10-05) — 머리 줄은 한 줄의 띠(옅은 회색, 양 끝 둥근 모서리)이고 그 안에서 Action items 만 보라,
   보라 칸 바탕은 머리부터 표 끝까지 이어져 맨 아래 모서리를 닫는다. 칸 폭은 고정, 단추는 칸 폭에 맞춰 모두 같은 폭(일체감) */
@media screen and (min-width: 701px) {
  .wn-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
  .wn-table th { padding: 10px 12px; background: var(--bg-secondary); border-bottom: 0; color: var(--text-primary); }
  .wn-table th:nth-child(1) { width: 26%; border-radius: 10px 0 0 0; } .wn-table th:nth-child(2) { width: 27%; } .wn-table th:nth-child(3) { width: 18%; }
  .wn-table th:nth-child(4) { width: 13%; } .wn-table th:nth-child(5) { width: 16%; border-radius: 0 10px 0 0; }
  .wn-table td { padding: 14px 12px; }
  .wn-table td.wn-when { white-space: normal; }
}
/* 보라는 누르는 단추 색이라 머리 · 칸에는 쓰지 않는다(2026-10-05 사용자 「보라는 동작할 것 같다」) — 머리는 짙은 남색 굵은 글자, 칸은 옅은 회색 */
.wn-table th.wn-act-h { color: var(--rp-ink, #0f1a4d); font-size: var(--fs-label); font-weight: 600; text-align: center; letter-spacing: .12em; text-transform: uppercase; background: #e6e8f0; }
.wn-table td.wn-act { background: #f4f5f9; text-align: center; vertical-align: middle; }
.wn-table tbody tr:last-child td.wn-act { border-radius: 0 0 10px 0; border-bottom: 0; }
.wn-table td.wn-act .ie-btn { width: 100%; justify-content: center; font-weight: 700; }
@media screen and (max-width: 700px) {
  .wn-table thead { display: none; }
  .wn-table, .wn-table tbody { display: block; }
  /* 폰 카드(2026-10-05) — Skill / Why / Do this · When 한 줄 / Action 단추 폭 가득 */
  .wn-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "skill skill" "why why" "do when" "act act"; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
  .wn-table td { padding: 0; border: 0; width: auto; }
  .wn-skill { grid-area: skill; } .wn-why { grid-area: why; } .wn-do { grid-area: do; font-weight: 600; } .wn-when { grid-area: when; align-self: center; white-space: normal; } .wn-act { grid-area: act; align-self: center; }
  .wn-table td.wn-act { background: none; text-align: left; } .wn-table td.wn-act .ie-btn { width: 100%; margin-top: 2px; }
  .wn-table td.wn-when { text-align: right; }
  .wn-table td.wn-act:not(:empty)::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 800; color: var(--rp-ink, #0f1a4d); text-transform: uppercase; letter-spacing: .04em; }
}
.rq-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 10px; font-size: 12px; color: var(--text-dim); }
.rq-legend .rq-chip { cursor: default; min-height: 20px; padding: 0 6px; }
.rq-srows { display: flex; flex-direction: column; }
.rq-srow { display: grid; grid-template-columns: 170px minmax(0, 1fr) 48px 92px 150px; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.rq-srow:first-child { border-top: 0; }
.rq-srow .rq-chips { margin: 0; }
.rq-sname { font-weight: 600; font-size: 14px; }
.rq-sn { font-variant-numeric: tabular-nums; font-size: 14px; }
.rq-sb { justify-self: end; }
.rq-srow.is-none .rq-sname, .rq-srow.is-none .rq-chips { color: var(--text-faint); }
.rq-grid { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.rq-colh { font-size: 13px; font-weight: 700; color: var(--text-dim); }
.rq-rowh { align-self: center; font-size: 13px; font-weight: 700; color: var(--text-dim); }
.rq-cell { padding: 12px; border-radius: 12px; background: var(--bg-primary); border-left: 4px solid var(--border-soft); }
.rq-cell.is-good { border-left-color: var(--success); }
.rq-cell.is-warn { border-left-color: #E2B500; }
.rq-cell.is-bad { border-left-color: #c0392b; }
.rq-cell b { font-size: 14px; }
.rq-cell p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.rq-cell .ie-btn { margin-top: 8px; }
.rq-pat p { margin: 4px 0 0; line-height: 1.55; color: var(--text-primary); }
.rq-pat .pat-k { margin-top: 8px; }
.rq-pat .pat-k b { color: var(--accent); margin-right: 4px; }
/* 리포트 머리 — 시험 이름은 로고 옆(2026-10-05), Print 는 오른쪽 */
.rp-brand .rp-chip { position: static; display: inline; margin: 0 0 0 10px; padding: 0; border: 0; background: none; border-radius: 0; font-size: 15px; font-weight: 800; color: var(--rp-ink); vertical-align: middle; }   /* 단추 모양 없이 굵은 글자만(2026-10-05) */
/* Question by question 정오 — 초록 · 빨강 굵게(2026-10-05), 맨 끝 Evidence 칸은 옛 끝 칸 색 규칙에서 뺀다 */
.qt-row.is-ok .qt-mark { color: var(--success); font-weight: 700; }
.qt-row.is-no .qt-mark { color: var(--danger, #c0392b); font-weight: 700; }
.ie-rtable tr.qt-row td.qt-evc { color: inherit; font-weight: 400; }
/* Evidence check — SWOT 표처럼(2026-10-05): 왼쪽 행 머리 정오, 위 열 머리 근거, 칸마다 큰 숫자 · 칩 · 다음 행동 */
.ev-swot { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; margin: -6px; width: calc(100% + 12px); }
.ev-swot thead th { padding: 8px 10px; border-radius: 10px; background: var(--bg-secondary); font-size: 13px; font-weight: 700; color: var(--text-primary); text-align: left; vertical-align: top; }
.ev-swot thead th:first-child { background: none; width: 58px; }
.ev-swot thead th small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.ev-row { width: 58px; padding: 8px 4px; border-radius: 10px; font-size: 13px; font-weight: 700; text-align: center; vertical-align: middle; }
.ev-row span { display: block; font-size: 18px; line-height: 1.2; }
.ev-row.is-right { background: rgba(22, 125, 87, .1); color: var(--success); }
.ev-row.is-wrong { background: rgba(192, 57, 43, .08); color: #c0392b; }
.ev-cell { padding: 12px; border-radius: 10px; vertical-align: top; background: var(--bg-primary); border-top: 4px solid var(--border-soft); }
.ev-cell.is-good { border-top-color: var(--success); background: rgba(22, 125, 87, .05); }
.ev-cell.is-warn { border-top-color: #E2B500; background: rgba(226, 181, 0, .06); }
.ev-cell.is-bad { border-top-color: #c0392b; background: rgba(192, 57, 43, .05); }
.ev-cell.is-bad2 { border-top-color: #e67e22; background: rgba(230, 126, 34, .06); }
.ev-k { display: flex; align-items: baseline; gap: 8px; }
.ev-n { font: 700 26px/1 Inter, sans-serif; color: var(--rp-ink, #0f1a4d); }
.ev-k span { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.ev-act { margin: 8px 0 0; line-height: 1.45; color: var(--text-primary); }
.ev-act b { color: var(--accent); }
.ev-eg { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.ev-cell .ie-btn { margin-top: 8px; }
@media screen and (max-width: 560px) {
  .ev-swot { border-spacing: 4px; margin: -4px; width: calc(100% + 8px); }
  .ev-swot thead th:first-child, .ev-row { width: 40px; }
  .ev-row { font-size: 11px; } .ev-cell { padding: 8px; } .ev-n { font-size: 20px; }
}
@media screen and (max-width: 700px) {
  .rq-act { grid-template-columns: 28px minmax(0, 1fr); }
  .rq-b { grid-column: 2; }
  .rq-srow { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name n pill" "chips chips chips" "btn btn btn"; row-gap: 6px; }
  .rq-sname { grid-area: name; } .rq-sn { grid-area: n; } .rq-srow > .sk-badge, .rq-srow > span:nth-child(4) { grid-area: pill; } .rq-srow .rq-chips { grid-area: chips; } .rq-sb { grid-area: btn; justify-self: start; }
  .rq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rq-grid > span:first-child, .rq-rowh { display: none; }
}
.rp-col { display: flex; flex-direction: column; gap: 12px; }
.rp-card { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(15, 26, 77, .04); }
.rp-card-h { display: flex; align-items: center; gap: 12px; }
.rp-card-h h2 { margin: 0; font-size: var(--t2); font-weight: 700; color: var(--rp-violet); }
.rp-card-h p { margin: 2px 0 0; font-size: 13px; color: var(--text-dim); }
.rp-ico { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--rp-soft); display: grid; place-items: center; }
.rp-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--rp-violet); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.rp-tile { display: flex; align-items: center; gap: 12px; background: var(--bg-elevated); border: 1px solid var(--border-soft);
  border-radius: 16px; padding: 12px 14px; }
.rp-tile .rp-ico { width: 58px; height: 58px; }
.rp-tile.is-pace .rp-ico { background: var(--rp-violet); }
.rp-tile.is-acc .rp-ico { background: var(--rp-teal); }
.rp-tile .rp-ico svg { stroke: #fff; }
.rp-tile span { display: block; font-size: 14px; font-weight: 700; color: var(--rp-ink); }
.rp-tile b { display: block; font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--rp-ink); font-variant-numeric: tabular-nums; }
.rp-tile b small { font-size: 18px; font-weight: 700; margin-left: 4px; color: var(--rp-violet); }
.rp-tile.is-acc b small { color: var(--rp-teal); }
.rp-tile em { display: block; font-style: normal; font-size: 12px; color: var(--text-dim); }
.rp-radar { width: 100%; max-width: 440px; display: block; margin: 6px auto 0; overflow: visible; }
.rp-grid { fill: none; stroke: rgba(96, 18, 243, .16); stroke-width: 1; }
.rp-grid:last-of-type { fill: rgba(96, 18, 243, .03); }
.rp-spoke { stroke: rgba(96, 18, 243, .12); }
.rp-tgt { fill: none; stroke: #8a8fa3; stroke-width: 1.6; stroke-dasharray: 6 5; }
.rp-tgt-dot { fill: #8a8fa3; }
.rp-mine { fill: rgba(96, 18, 243, .08); stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; }
.rp-mine-dot { fill: var(--accent); }
.rp-ax { font-size: 13px; font-weight: 600; fill: #2d2a8c; }
.rp-ax.is-none { fill: var(--text-faint); }
.rp-ax-v { font-size: 12px; font-weight: 700; fill: var(--text-dim); }
.rp-legend { display: flex; justify-content: center; gap: 24px; font-size: 12px; color: var(--rp-ink); margin-top: 4px; }
.rp-legend span::before { content: ''; display: inline-block; width: 28px; margin-right: 8px; vertical-align: middle; }
.rp-lg-mine::before { border-top: 3px solid var(--accent); }
.rp-lg-tgt::before { border-top: 2px dashed #8a8fa3; }
.rp-note { margin: 6px 0 0; text-align: center; font-size: 12px; color: var(--text-dim); }
.rp-radar { max-width: 480px; }
/* Gaze Path — 표준 글 위에 원(멈춤) · 화살표(건너뜀) · 빨강(되돌아봄). 원은 청록, 되돌아봄은 빨강(시안) */
/* 그림 · 이음선 · 재생기는 gazepath.css(2026-10-01, 홍보 사이트와 함께 씀). 여기는 리포트의 칸 · 범례 · 인쇄 */
.rp-gp-box { position: relative; margin-top: 12px; padding: 22px 18px; border: 1px solid var(--border-soft); border-radius: 14px; background: #fff; }
/* 머리 오른쪽 위 — 🖨 Print 와 시험 칩을 나란히(사용자 2026-09-29). 폰 폭에서는 제목 아래 한 줄로 함께 내려온다 */
.rp-tools { position: absolute; top: 4px; right: 2px; display: flex; align-items: center; gap: 8px; }
.rp-tools .rp-chip { position: static; }
.rp-print { border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--rp-ink); border-radius: 10px;
  padding: 6px 14px; font: 700 13px/1.2 Inter, sans-serif; cursor: pointer; }
.rp-print:hover { border-color: var(--accent); color: var(--accent); }
.rp-gp-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.rp-gp-legend span { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: center; }
.rp-gp-legend i { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: block; }
.rp-gp-legend b { font-size: 14px; color: var(--rp-violet); }
.rp-gp-legend small { font-size: 12px; color: var(--text-dim); }
.rp-gp-fix { background: rgba(47, 191, 170, .45); }
.rp-gp-reg { background: rgba(239, 83, 80, .5); }
/* 사카드는 화살촉 없는 선분 — 화살촉은 되돌아봄(빨강)에만(사용자 2026-09-29) */
.rp-gp-sac { border-radius: 0 !important; height: 3px !important; background: var(--accent); }
/* 글 칸 넷 — 아이콘 원 · 보라 제목(+ 굵은 한 줄 제목) · 본문 */
.rp-txt { display: flex; gap: 16px; align-items: flex-start; }
.rp-txt h2 { margin: 2px 0 4px; font-size: 20px; font-weight: 700; color: var(--rp-violet); line-height: 1.3; }
.rp-txt-head { margin-left: 16px; font-size: 17px; font-weight: 700; color: var(--rp-ink); }
.rp-txt p { margin: 0; font-size: 15px; line-height: 1.5; color: #3d4466; }
.rp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rp-row2.is-one { grid-template-columns: 1fr; }
/* Your Path to Target — 두 칸(지금 범위 → 목표) · Focus 줄 */
.rp-path-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.rp-path-tile { flex: 1 1 240px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border-soft); border-radius: 14px; padding: 12px 14px; }
.rp-path-tile span { display: block; font-size: 14px; font-weight: 700; color: var(--rp-violet); }
.rp-path-tile b { display: block; font-size: 32px; font-weight: 700; color: var(--rp-ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.rp-path-tile small { display: block; font-size: 12px; color: var(--text-dim); }
/* 옛 규칙 뒤에 둬야 이긴다(2026-10-05 — 앞에 두었더니 옛 flex · 240px · 32px 이 덮어 폰에서 범위 칸이 폭을 다 먹었다) */
/* Path to Target — 두 칸 늘 한 줄(2026-10-05), 칸 아이콘 없음 */
.rp-path-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch; }   /* 칸 셋 늘 같은 폭(폰에서 범위 칸이 폭을 다 먹었다, 2026-10-05) */
.rp-path-tile { min-width: 0; flex: 1 1 0; }
/* 같은 줄의 숫자 칸(Reading pace · Answer accuracy, 2026-10-05) — 범위 칸과 같은 높이 · 같은 폭 */
.rp-path-row > .rp-tile { min-width: 0; flex: 1 1 0; margin: 0; }
@media screen and (max-width: 560px) {
  .rp-path-row { gap: 6px; } .rp-path-tile, .rp-path-row > .rp-tile { padding: 8px; }
  .rp-path-tile b, .rp-path-row > .rp-tile b { font-size: 20px; } .rp-path-tile span, .rp-path-row > .rp-tile span { font-size: 11px; }
  .rp-path-row > .rp-tile .rp-ico { display: none; } .rp-path-row > .rp-tile b small { font-size: 11px; margin-left: 2px; }
  .rp-path-tile b { font-size: 17px; white-space: nowrap; }
  .rp-path-tile small, .rp-path-row > .rp-tile small, .rp-path-row > .rp-tile em { font-size: 10px; }
}
.rp-ico.is-teal { background: rgba(11, 156, 186, .12); }
.rp-ico.is-teal svg { stroke: var(--rp-teal); }
.rp-path-arrow { font-size: 30px; color: var(--rp-violet); opacity: .6; }
.rp-path-sel { margin: 2px 0; font-family: inherit; font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--rp-ink); border: 1px solid var(--border-mid);
  border-radius: 10px; padding: 2px 8px; background: var(--bg-elevated); cursor: pointer; }
.rp-path-set { margin: 10px 0 0; font-size: 13px; color: var(--text-dim); }   /* 예측이 있을 때 이 세트 하나의 범위(2026-10-02) */
.rp-path-focus { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px;
  font-size: 16px; color: var(--rp-ink); }
/* 맨 아래 로그인 칸 */
.rp-save { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rp-save > div { flex: 1 1 260px; }
.rp-save b { display: block; font-size: 16px; color: var(--rp-ink); }
.rp-save p { margin: 2px 0 0; font-size: 13px; color: var(--text-dim); }
.rp-save-btn { border: 0; border-radius: 12px; min-height: 48px; padding: 12px 22px; background: var(--accent); color: #fff; font: inherit; font-weight: 600;
  font-size: 15px; cursor: pointer; }
.rp-save-btn:hover { filter: brightness(1.08); }
/* 8단계 — 리포트 아래(시간 · 머문 시간 · 정답 표 · 단추)를 리포트 카드 모양으로. 리포트가 있을 때만(.rp-wide) */
.rp-wide .ie-res { gap: 14px; }
.rp-wide .ie-res > .ie-box, .rp-wide .ie-res > .ie-rtable { border: 1px solid var(--border-soft); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 26, 77, .04); }
.rp-wide .ie-res > .ie-box { padding: 16px 18px; }
.rp-wide .ie-res > .ie-box > b:first-child { font-size: 18px; font-weight: 700; color: var(--accent); }
.rp-wide .ie-rtable th { color: var(--accent); }
.rp-qhead { margin: 6px 2px -4px; }
.rp-qhead h2 { margin: 0; font-size: var(--t2); font-weight: 700; color: var(--accent); }
.rp-qhead p { margin: 2px 0 0; font-size: 13px; color: var(--text-dim); }
.rp-wide .ie-res-btns { justify-content: center; gap: 10px; margin-top: 4px; }
.rp-wide .ie-res-btns .ie-btn { padding: 12px 20px; font-weight: 700; }
@media screen and (max-width: 760px) {
  .rp-row1 { grid-template-columns: 1fr; }
  .rp-chip { position: static; display: inline-block; margin-top: 8px; }
  .rp-tools { position: static; margin-top: 8px; }
  .rp-tools .rp-chip { margin-top: 0; }
  .rp-ax { font-size: 12px; }
  .rp-gp-legend { grid-template-columns: 1fr; }
  .rp-row2 { grid-template-columns: 1fr; }
  .rp-path-arrow { display: none; }
  .rp-txt-head { display: block; margin: 4px 0 0; }
}

/* ═══ 메뉴 Report — 지난 판 목록 + 오답노트(ielts-runs.js, 2026-09-28) ═══ */
.ir-exam { margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--text-dim); border: 1px solid var(--border-mid); border-radius: 8px; padding: 2px 8px; vertical-align: middle; }
.ir-sec { margin-top: 14px; }
.ir-sec h2 { margin: 0 2px 8px; font-size: var(--t2); font-weight: 700; color: var(--accent); }
.ir-list { display: flex; flex-direction: column; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 16px; overflow: hidden; }
/* 한 줄 = 글자(.ir-row, 누르지 않음) + 오른쪽 끝 단추 셋(.ir-acts, 2026-10-04) */
.ir-line { display: flex; align-items: center; border-bottom: 1px solid var(--border-soft); }
.ir-line:last-child { border-bottom: 0; }
.ir-line > .ir-row { flex: 1; min-width: 0; border-bottom: 0; }
/* 단추 셋 Report · Retry · Answers(2026-10-04) — 늘 같은 차례 · 같은 폭, 없는 단추는 빈자리 */
.ir-acts { flex: none; display: grid; grid-template-columns: repeat(3, 84px); gap: 6px; padding-right: 14px; }
.ir-act { display: flex; }
.ir-act .ie-btn { flex: 1; margin: 0; min-height: 34px; padding: 4px 6px; font-size: 13px; white-space: nowrap; }
.ir-row { display: grid; grid-template-columns: 64px 1fr auto 56px; gap: 10px; align-items: center; padding: 12px 14px; border: 0;
  border-bottom: 1px solid var(--border-soft); background: transparent; font: inherit; text-align: left; color: var(--text-primary); }
.ir-row:last-child { border-bottom: 0; }
.ir-date { font-size: 13px; color: var(--text-dim); }
/* 세트 이름은 두 줄까지 — 한 줄로 줄이면 비슷한 이름의 세트를 가르지 못했다(폰 「Sleep and the Remembe…」, 2026-10-02 화면 훑기). 셋째 줄부터 말줄임 */
.ir-name { min-width: 0; font-weight: 400; overflow: hidden; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.ir-score { font-weight: 400; font-variant-numeric: tabular-nums; }   /* 이름 · 점수는 보통 두께(2026-10-04 사용자) */
.ir-score.is-full { color: var(--success); }
.ir-time { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: right; }
.ir-go { color: var(--text-faint); font-size: 20px; }
.ir-empty { margin: 0 2px; color: var(--text-dim); font-size: 14px; }
.ir-when { margin: 0 2px; font-size: 13px; color: var(--text-dim); }
@media screen and (max-width: 560px) { .ir-row { grid-template-columns: 46px 1fr auto; gap: 8px; padding: 12px 8px 12px 12px; } .ir-time { display: none; }
  /* 폰 — 줄을 두 층으로(2026-10-05 다시 짬): 위 아이콘 | 이름(난이도 표는 이름 아래) · 점수, 아래 날짜 · 단추 셋(작게) */
  .ir-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name name score" "date acts acts"; gap: 8px 10px; align-items: center; padding: 12px; }   /* 이름은 단추 위 폭까지 쓴다(점수만 오른쪽 끝) */
  .ir-line > .ir-row { display: contents; }
  .ir-line .ir-row .ir-name { grid-area: name; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 8px; align-items: center; }
  .ir-line .ir-row .ir-name .ir-lv { grid-column: 2; justify-self: start; }
  .ir-line .ir-row .ir-score { grid-area: score; align-self: start; padding-top: 4px; }
  .ir-line .ir-row .ir-date { grid-area: date; padding-left: 36px; white-space: nowrap; }
  .ir-line .ir-acts { grid-area: acts; grid-template-columns: repeat(3, auto); gap: 4px; padding: 0; }
  .ir-line .ir-act .ie-btn { min-height: 30px; padding: 3px 9px; font-size: 12px; } }
/* 쪽 넘김(2026-10-04) — ‹ Prev 1 2 3 … 9 Next › */
.ir-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; margin: 14px 0 4px; }
.ir-pager button { min-width: 36px; min-height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; background: transparent;
  color: var(--text-primary); font: 600 14px Inter, sans-serif; cursor: pointer; }
.ir-pager button:hover:not(:disabled) { border-color: var(--border-mid); }
.ir-pager .ir-pg.is-on { background: var(--accent); color: #fff; cursor: default; }
.ir-pager .ir-pg-nav { color: var(--accent); }
.ir-pager button:disabled { color: var(--text-faint); cursor: default; }
.ir-pg-gap { min-width: 20px; text-align: center; color: var(--text-dim); }
/* 붙여넣기 — 한 덩어리 칸 아래 「Split into boxes」 줄(ielts-paste.js, 2026-09-28) */
.ie-paste-split { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 18px; }
.ie-paste-split span { font-size: 13px; color: var(--text-dim); }

/* ═══ 메뉴 Words — 단어장(ielts-words.js, 2026-09-28) ═══ */
.iw-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.iw-tab, .iw-lv { border: 1px solid var(--border-mid); background: var(--bg-elevated); border-radius: 999px; padding: 7px 14px; font: inherit;
  font-size: 14px; font-weight: 700; color: var(--text-primary); cursor: pointer; }
.iw-tab.is-on, .iw-lv.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.iw-levels { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.iw-lv { padding: 5px 12px; font-size: 13px; }
.iw-count { margin: 0 2px 8px; font-size: 13px; color: var(--text-dim); }
.iw-list { display: flex; flex-direction: column; gap: 8px; }
.iw-row { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 14px; padding: 12px 14px; }
.iw-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.iw-head b { font-size: var(--t3); color: var(--text-primary); }
.iw-lvtag { font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 7px; background: var(--accent-soft); color: var(--accent); }
.iw-lvtag.is-C2, .iw-lvtag.is-L6 { background: rgba(190, 18, 60, .1); color: #be123c; }
.iw-lvtag.is-C1, .iw-lvtag.is-L5 { background: rgba(180, 83, 9, .12); color: #b45309; }
.iw-lvtag.is-off { background: var(--bg-secondary); color: var(--text-dim); }
.iw-aw { font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 7px; background: rgba(11, 156, 186, .12); color: #0b7f98; }
.iw-exam { margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--text-dim); background: var(--bg-secondary); }
.iw-exams { margin-bottom: 4px; }
.iw-texts { font-size: 12px; color: var(--text-dim); margin-left: auto; }
.iw-def { margin: 6px 0 0; font-size: 15px; color: var(--text-primary); }
.iw-ex { margin: 6px 0 0; font-size: 14px; color: #3d4466; line-height: 1.5; }
.iw-ex b { color: var(--accent); }
.iw-set { margin-top: 6px; border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--text-dim); cursor: pointer; }
.iw-set:hover { color: var(--accent); }
.iw-set.is-plain, .iw-set.is-plain:hover { margin-bottom: 0; cursor: default; color: var(--text-dim); }   /* 말하기에서 들어온 짝 — 여는 세트가 없어 단추가 아님(2026-10-09) */
.iw-para p { margin: 0; font-size: 15px; line-height: 1.5; }
.iw-para span { color: var(--accent); font-weight: 700; margin: 0 4px; }
.iw-src { margin: 14px 2px 0; font-size: 12px; color: var(--text-faint); }
/* Words 화면(2026-10-06 설계 A · B) — Today 칸 · 상태 띠 · 찾기 · 접힌 줄. 상태 색 다섯: new 회색 · learning 노랑 · familiar 연보라 · mastered 보라 · known 초록 */
.iw-today { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 16px; padding: 12px 16px 14px; margin: 0 0 14px; }
.iw-today h2 { margin: 0 0 4px; font-size: var(--t2); color: var(--text-primary); }
.iw-t-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 6px 0; }
.iw-t-row + .iw-t-row { border-top: 1px solid var(--border-soft); }
.iw-t-ex { min-width: 52px; font-size: 14px; color: var(--text-primary); }
.iw-t-n { flex: 1; min-width: 0; white-space: nowrap; font-size: 14px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.iw-today .iw-review { margin: 0; }
.iw-bar { display: flex; gap: 2px; height: 8px; margin: 10px 0 8px; border-radius: 999px; overflow: hidden; background: var(--bg-secondary); }
.iw-bar i { display: block; min-width: 4px; }
.iw-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.iw-lg { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text-dim); cursor: pointer; font-variant-numeric: tabular-nums; }
.iw-lg.is-on { color: var(--accent); font-weight: 700; }
.iw-lg i, .iw-dot { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.iw-bar .is-new, .iw-lg.is-new i, .iw-fold.is-new .iw-dot { background: #CDD3E0; }
.iw-bar .is-learning, .iw-lg.is-learning i, .iw-fold.is-learning .iw-dot { background: #F2B53A; }
.iw-bar .is-familiar, .iw-lg.is-familiar i, .iw-fold.is-familiar .iw-dot { background: #A78BFA; }
.iw-bar .is-mastered, .iw-lg.is-mastered i, .iw-fold.is-mastered .iw-dot { background: #6012F3; }
.iw-bar .is-known, .iw-lg.is-known i, .iw-fold.is-known .iw-dot { background: #22A06B; }
.iw-q { display: block; width: 100%; box-sizing: border-box; min-height: 40px; margin: 0 0 10px; padding: 0 12px; border: 1px solid var(--border-mid); border-radius: 10px;
  background: var(--bg-elevated); font: inherit; font-size: 15px; color: var(--text-primary); }
.iw-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 8px; }
.iw-tools .iw-count { margin: 0 auto 0 2px; }
.iw-sel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); }
.iw-sel select { min-height: 34px; padding: 0 8px; border: 1px solid var(--border-mid); border-radius: 10px; background: var(--bg-elevated); font: 600 13px Inter, sans-serif; color: var(--text-primary); }
.iw-list .ir-empty { margin: 4px 2px; }
.iw-fold { padding: 0; }
.iw-fold > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.iw-fold > summary::-webkit-details-marker { display: none; }
.iw-sum { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.iw-fold .iw-head b { font-size: var(--t3); }
.iw-fold .iw-def { margin: 0; font-size: 14px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-fold[open] .iw-def { white-space: normal; color: var(--text-primary); }
.iw-chev { flex: none; color: var(--text-faint); font-size: 18px; transition: transform .15s; }
.iw-fold[open] .iw-chev { transform: rotate(90deg); }
.iw-body { padding: 0 14px 12px 33px; }
.iw-body .iw-ex { margin-top: 0; }
.iw-state { margin: 6px 0 0; font-size: 12px; color: var(--text-dim); }
.iw-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 6px; }
.iw-acts .iw-set { margin-top: 0; }
.iw-fold.is-known { opacity: .65; }
.iw-para .iw-pq { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-primary); }
.iw-para .iw-pp { margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-primary); }
.iw-para .iw-pp span { margin: 0 6px 0 0; }

/* ══ 리포트 인쇄 · PDF(js/ielts-report.js ieltsReportPrint, 2026-09-29) — 앱을 숨기고 리포트 화면만 A4 에.
   [인쇄는 컴퓨터 배치 — 2026-10-01 사용자 「인쇄물이 화면과 다름」] A4 인쇄 폭(약 640px)이 「폭이 좁으면」 규칙에 걸려 종이에
   폰 리포트가 찍혔다(두 칸 → 한 칸 · 칩 · 도구가 밀림 · 경로 화살표 숨김). 이 파일의 max-width · max-height 규칙은 모두
   `screen and` 로 화면에서만 건다. 화면은 그대로다.
   Gaze Path 는 끝 모습(모든 멈춤) — 인쇄 직전 JS 가 재생을 끝내고, 여기서도 가려진 것을 모두 드러낸다 ══ */
@media print {
  /* 여백은 쪽마다 — 쪽을 넘겨도 위아래가 붙지 않게 @page 로(인쇄 창의 여백이 「기본값」일 때 이 값을 쓴다) */
  @page { size: A4; margin: 16mm 14mm; }
  /* 앱은 html · body 를 화면 높이에 묶고 넘침을 숨긴다(html, body { height: 100%; overflow: hidden }) — 인쇄에서 풀지 않으면
     첫 쪽까지만 나왔다(사용자 2026-09-29) */
  html:has(body.rp-printing), body.rp-printing { height: auto !important; overflow: visible !important; }
  body.rp-printing { background: #fff !important; }
  body.rp-printing > *:not(#ieltsScreen) { display: none !important; }
  body.rp-printing #ieltsScreen { position: static !important; inset: auto !important; display: block !important;
    overflow: visible !important; height: auto !important; background: #fff !important; }
  /* 양옆 여백을 한 겹 더 — 인쇄 창의 여백을 「최소」로 두어도 글이 종이 끝에 붙지 않게 */
  body.rp-printing #ieltsScreen .ie-app { max-width: none; padding: 0 6mm; overflow: visible; height: auto !important; }
  body.rp-printing #ieltsScreen .ie-top, body.rp-printing #ieltsScreen .ie-res-btns, body.rp-printing .rp-print,
  body.rp-printing .rp-gp-ctl, body.rp-printing .rp-save, body.rp-printing .exp-card, body.rp-printing .rp-path-focus button { display: none !important; }
  body.rp-printing .rp-gp-svg .is-pend { visibility: visible !important; }
  body.rp-printing .rp-gp-svg .rp-gp-cur { display: none !important; }
  body.rp-printing * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.rp-printing .rp-card, body.rp-printing .rp-tiles, body.rp-printing .ie-rtable tr { break-inside: avoid; page-break-inside: avoid; }
}

/* ══ 읽는 화면의 도구 줄(👁 Gaze · Areas · 시간 · 캘리 표기)을 없앴다 — 컴퓨터 · 폰 모두(2026-09-30 사용자).
      보기 셋은 Settings › Display(js/settings.js)에서 켜고 끈다. 요소는 남겨 둔다(캘리 표기 글은 Settings 가 읽는다). ══ */
#readingLayout #readingToolbar { display: none; }
/* 푼 시간(Settings 에서 켰을 때) — 컴퓨터는 문항 칸 위 한 줄 오른쪽에 작게. 폰은 아래 칸 번호 줄 끝(아래 규칙) */
#questionsPanel > #readingTimer { display: block; flex: none; padding: 4px 16px 0; text-align: right; font-size: 13px; letter-spacing: .04em;
  min-width: 0; color: var(--text-dim); }
#questionsPanel > #readingTimer.hidden { display: none; }
/* 리플레이 · 히트맵 클론(id 가 지워진 사본)에는 시계를 그리지 않는다 */
.rd-questions-panel > .timer-display:not(#readingTimer) { display: none; }

/* ══ 폰 폭 아래 칸 — 시험 풀이의 조작을 화면 아래에(js/mobile-tabs.js _mtDockSync, 2026-09-30 사용자) ══
      폰은 카메라가 화면 위에 있어 아래쪽을 볼수록 시선이 덜 맞는다. 판정이 필요 없는 조작을 아래에 모으고 글 · 문항은 그 위에만.
      [위계] 맨 아래 줄 = ☰ + 「Passage │ Questions」 — 페이지 아래에 매달린 브라우저 탭(켜진 탭은 페이지와 같은 바탕으로 이어지고,
      꺼진 탭은 뒤로 물러난 회색 띠 위의 흐린 글자). 그 위는 켜진 페이지의 연속 — 재생 막대(리스닝) · 작은 번호 줄(Questions 에서만).
      높이는 든 줄들의 실제 높이(시선 흔들림으로 키우지 않음 — 모든 판이 같은 모양). 칸 안에는 AOI 가 없다. */
#mtDock { display: none; }
@media screen and (max-width: 700px) {
  #readingLayout.mt-docked { padding-bottom: 0; }
  /* 지문 없는 판(리스닝 · 지문 없는 문항)도 탭 판(.mt-on)과 같은 폰 여백 — 넓은 화면 여백(문항 칸 28 + 문항 상자 20)이 그대로라
     358px 화면에서 「Why you missed it」 카드가 225px 이었다(2026-10-19 배포본 실측, 사용자 사진) */
  #readingLayout.mt-docked:not(.mt-on) #questionViewport { padding-left: 4px; padding-right: 4px; }
  #readingLayout.mt-docked:not(.mt-on) #questionViewport .question-block { padding-left: 10px; padding-right: 10px; }
  /* 설명 카드는 문항 상자 안쪽 여백까지 써서 화면 옆 여백 약 16(표준 S1)에 닿는다 */
  #readingLayout.mt-docked #questionViewport .ie-xr { margin-left: -8px; margin-right: -8px; }
  #readingLayout.mt-docked #mtDock { display: flex; flex-direction: column; flex: none; }
  /* 페이지 쪽 — 켜진 페이지와 같은 바탕(탭 구조가 없는 판은 화면 바탕) */
  #readingLayout.mt-docked #mtDock { --mt-page: var(--bg-primary); }
  #readingLayout.mt-on #mtDock { --mt-page: var(--mt-p-paper); }
  #readingLayout.mt-on.mt-q #mtDock { --mt-page: var(--mt-q-paper); }
  #mtDock .ls-player { margin: 0; padding: 6px 12px; border: 0; border-radius: 0; gap: 4px 10px; background: var(--mt-page); }
  /* 번호 줄 — Questions 의 하위 · 보조: 작은 글자, 화살표만(누름 칸은 손가락 크기) */
  #mtDock #questionNav { justify-content: space-between; align-items: center; gap: 0; padding: 0 4px; border-top: 0;
    background: var(--mt-page); }
  #readingLayout.mt-on:not(.mt-q) #mtDock #questionNav { display: none; }
  #readingLayout.mt-docked #mtQNums { display: flex; flex: 1; min-width: 0; justify-content: flex-start; align-items: center; gap: 0;
    overflow-x: auto; scrollbar-width: none; }
  /* 넘치면(문항이 많으면) 가운데 맞춤이 앞 번호를 잘랐다 — 앞에서부터 놓고 양끝 여백(auto)으로 가운데에 모은다 */
  #readingLayout.mt-docked #mtQNums > :first-child { margin-left: auto; }
  #readingLayout.mt-docked #mtQNums > :last-child { margin-right: auto; }
  /* 누름 칸 44 — 34 는 손가락에 작아 다음 문항으로 넘기기 어려웠다(2026-10-19 사용자, 리스닝) */
  #mtDock #mtQNums button { min-width: 36px; height: 44px; padding: 0 4px; font: 600 13px Inter, sans-serif; }
  #mtDock #mtQNums button.is-cur::after { bottom: 8px; }
  #mtDock #questionNav .nav-btn { flex: none; min-width: 44px; height: 44px; padding: 0 8px; border: 0; border-radius: 8px;
    background: transparent; color: var(--accent); font: 600 18px Inter, sans-serif; transform: none; }
  #mtDock #questionNav .nav-btn:disabled { color: var(--text-faint); opacity: .5; }
  /* 마지막 문항의 채점 · 제출 — 이 판에서 가장 큰 행동이라 보조 줄 안에서도 이것만 채운다 */
  #mtDock #questionNav .nav-btn.nav-end { padding: 0 16px; background: var(--accent); color: #fff; font-size: 13px; }
  #mtDock #questionNav #readingTimer { flex: none; min-width: 0; margin: 0 4px; font-size: 12px; letter-spacing: .02em; color: var(--text-dim); }
  /* 탭 줄 — 페이지 바로 아래에 매달린 브라우저 탭 */
  #readingLayout.mt-on #mtDock #mtTabs { display: flex; align-items: flex-start; gap: 4px; margin: 0; padding: 0 10px;
    border: 0; border-top: 1px solid var(--border-mid); background: var(--bg-secondary); }
  #mtDock #mtTabs button { flex: 1; margin: 0 0 6px; padding: 11px 0 10px; border: 1px solid transparent; border-top: 0;
    border-radius: 0 0 12px 12px; background: transparent; color: var(--text-dim); font: 600 15px Inter, sans-serif; }
  /* 켜진 탭 — 페이지 바탕으로 칠하고 위 선을 덮어(-1px) 페이지와 한 몸으로 */
  #mtDock #mtTabs button.is-on { margin-top: -1px; padding-top: 12px; border-color: var(--border-mid); border-top: 0;
    border-bottom: 3px solid var(--accent); color: var(--accent); font-weight: 700; }
  #mtDock #mtTabs button[data-tab="p"].is-on { background: var(--mt-p-paper); }
  #mtDock #mtTabs button[data-tab="q"].is-on { background: var(--mt-q-paper); }
  /* 맨 아래 — 앱의 기본 메뉴 다섯 칸을 늘 보인다(☰ 로 불러내지 않는다, 2026-09-30 사용자). 읽는 화면은 그 위에서 끝난다.
     풀이 중에는 시험을 바꾸지 않으므로 시험 줄은 접는다. 메뉴 높이는 sidebar.js 가 잰 --bottom-bar-h */
  body.mt-dock-menu #appSidebar { transform: none; visibility: visible; box-shadow: none; transition: none; }
  body.mt-dock-menu #readingLayout.mt-docked { bottom: var(--bottom-bar-h); }
  body.mt-dock-menu #sbRestore, body.mt-dock-menu #sbHide { display: none !important; }
  body.mt-dock-menu #appSidebar .sb-exam { display: none !important; }
  /* 푸는 동안의 메뉴 잠금(흐리게 · 눌리지 않음)을 푼다 — 눌러도 아무 일이 없는 단추가 되지 않게. 누르면 그만둘지 묻거나 한 줄(sidebar.js) */
  body.mt-dock-menu.ielts-running #appSidebar .sb-btn:not(#sbHome) { opacity: 1; pointer-events: auto; }
}

/* ══ 메뉴 다섯 칸 — Home · Exams · Report · Map · Settings(2026-09-30 사용자). 폰은 아래 한 줄, 컴퓨터는 왼쪽 바 ══
      시험 줄(IELTS · TOEIC · TOEFL · SAT)은 Exams 의 펼침 — Exams · Report 를 고른 동안만(body[data-nav], js/sidebar.js rtNavSet).
      앱을 열면 Exams 가 눌린 상태다. Words 칸은 뺐다(시험 안 │ Words 만). 폰 바 높이는 든 줄들의 실제 높이(sidebar.js → --bottom-bar-h). */
/* 켜진 칸 — 지금 연 화면(홈 화면이 생기기 전의 Home 은 목록을 열지만 Home 칸이 켜진다) */
body[data-exam][data-nav="home"] #sbHome, body[data-exam][data-nav="exams"] #sbExams, body[data-exam][data-nav="report"] #sbReport,
body[data-exam][data-nav="challenge"] #sbChallenge, body[data-exam][data-nav="settings"] #sbSettings { color: var(--accent); background: var(--accent-soft); }
body[data-exam][data-nav]:not([data-nav="home"]) #sbHome { color: inherit; background: transparent; }
/* 시험 줄 — Exams · Report 가 아닐 때 접는다(컴퓨터 · 폰 모두) */
body[data-exam]:not([data-nav="exams"]):not([data-nav="report"]) #appSidebar .sb-exam { display: none !important; }
@media screen and (max-width: 768px) {
  body[data-exam] #appSidebar { height: auto; flex-wrap: wrap; row-gap: 2px; padding-top: 6px; }
  body[data-exam] #sbMore, body[data-exam] #sbMinigame { display: none !important; }
  body[data-exam][data-nav="exams"] #appSidebar .sb-exam,
  body[data-exam][data-nav="report"] #appSidebar .sb-exam { display: flex; flex-direction: row; flex: 0 0 100%; order: 0; margin: 0 4px 2px; }
  body[data-exam] #appSidebar .sb-exam-btn { flex: 1; padding: 8px 2px; font-size: 13px; }
  body[data-exam] #sbHome, body[data-exam] #sbExams, body[data-exam] #sbReport,
  body[data-exam] #sbChallenge, body[data-exam] #sbSettings {
    display: flex; flex: 1 1 0; min-width: 0; justify-content: center; margin: 0; padding: 6px 2px; gap: 2px; border-radius: 10px; }
  body[data-exam] #sbHome { order: 1; }
  body[data-exam] #sbExams { order: 2; }
  body[data-exam] #sbReport { order: 3; }
  body[data-exam] #sbChallenge { order: 4; }   /* 2026-10-18 사용자 — Report 가 셋째, Challenge 가 넷째(예전 Map 자리) */
  body[data-exam] #sbSettings { order: 5; }
}


/* ══ 컴퓨터 폭도 메뉴를 아래 가로 바로(2026-09-30 사용자) — 폰과 같은 다섯 칸 Home · Exams · Report · Map · Settings ══
      왼쪽 바(84px)를 쓰지 않는다. 시험 줄은 다섯 칸 바로 위 한 줄(Exams · Report 에서만 — 위의 body[data-nav] 규칙).
      화면들(목록 · 설정 · 첫 화면 · 읽는 화면)은 바 위에서 끝난다 — 바 높이는 sidebar.js 가 잰 --bottom-bar-h.
      읽는 화면에서도 메뉴를 늘 보인다(폰과 같게) — 푸는 중에 누르면 그만둘지 묻거나 한 줄(sidebar.js · settings.js). */
@media (min-width: 769px) {
  :root { --bottom-bar-h: 64px; }   /* 재기 전 자리 — sidebar.js 가 곧 실제 높이로 바꾼다 */
  body[data-exam] { --sidebar-w: 0px; }
  body[data-exam] #appSidebar { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: auto;
    flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 2px 8px;
    padding: 6px 12px; border-right: 0; border-top: 1px solid var(--border-soft); overflow: visible; }
  body[data-exam] #appSidebar > .sb-btn { flex: 0 0 104px; margin: 0; padding: 6px 2px; }
  body[data-exam] #appSidebar .sb-label { font-size: 12px; }
  body[data-exam] #sbHide, body[data-exam] #sbRestore, body[data-exam] #sbMore { display: none !important; }
  body[data-exam] #sbSettings { margin-top: 0; }
  body[data-exam] #appSidebar .sb-exam { flex-direction: row; flex: 0 0 100%; justify-content: center; order: 0; margin: 0 0 2px;
    background: transparent; }
  body[data-exam] #appSidebar .sb-exam-btn { flex: 0 0 104px; padding: 7px 2px; font-size: 13px; }
  body[data-exam] #sbHome { order: 1; }
  body[data-exam] #sbExams { order: 2; }
  body[data-exam] #sbReport { order: 3; }
  body[data-exam] #sbChallenge { order: 4; }   /* 2026-10-18 사용자 — Report 가 셋째, Challenge 가 넷째(예전 Map 자리) */
  body[data-exam] #sbSettings { order: 5; }
  body[data-exam] #ieltsScreen, body[data-exam] #settingsScreen { left: 0; bottom: var(--bottom-bar-h); }
  body[data-exam] #startScreen, body[data-exam] #warmupScreen { bottom: var(--bottom-bar-h); }   /* 워밍업도 — 빠져 있어 노트북에서 바가 Start 를 덮었다(2026-10-02 verify_deploy) */
  /* 읽는 화면 — 메뉴를 감추지 않고, 화면은 메뉴 위에서 끝난다. 풀이 중에는 시험 줄을 접고 잠금(흐리게)을 푼다 */
  body[data-exam].rd-open #appSidebar { transform: none; visibility: visible; box-shadow: none; transition: none; }
  body[data-exam].rd-open #readingLayout { bottom: var(--bottom-bar-h); }
  body[data-exam].ielts-running #appSidebar .sb-exam { display: none !important; }
  body[data-exam].ielts-running #appSidebar .sb-btn:not(#sbHome) { opacity: 1; pointer-events: auto; }
}

/* ══ 홈 화면(js/home.js, 2026-09-30 사용자 설계) — 폰은 한 줄로 쌓고, 넓은 화면(900px 이상)은 두 칸 ══
      왼쪽 = Today's plan · Quick practice, 오른쪽 = 이번 주 숫자 · 연속 · 최근 판(시안의 넓은 화면 배치). */
.hm { max-width: 1100px; }
/* 메뉴 다섯(Home · Exams · Report · Map · Settings)의 폭을 홈 하나로(사용자 2026-10-02 — 노트북에서 메뉴마다 폭이 달랐다:
   홈 1100 · Exams/Report 980 · Map 980(.exp-app 1180 이 뒤의 .ie-app 980 에 덮였다) · Settings 720).
   폰 · 태블릿은 창 폭에 맞고 노트북에서 이 폭까지 넓어진다 → 폰 < 태블릿 < 노트북. 세트 · 결과 화면은 그대로 */
.ie-app.hm, .ie-app.ie-menu, .ie-app.ir-menu, .ie-app.exp-app, .ie-app.rt-set, .ie-app.rp-wide, .ie-app.ch-app, .ie-app.hs-missed, .ie-app.dr-app { max-width: 1100px; }   /* 리포트(rp-wide)도 같은 폭(2026-10-05) · Missed questions(hs-missed)도 Report 와 같은 폭(2026-10-18 표준 S1 — 980 이었다) */
/* 노트북(창 1200 이상 · 마우스)은 한 단계 크게 — 글자 · 칸 · 여백을 함께 키우고(zoom), 폭도 창에 따라 넓힌다
   (사용자 2026-10-02 「폰 < 태블릿 < 노트북」 B안). 태블릿 가로(1180 · 손가락)까지는 위 그대로라 노트북이 늘 더 크다.
   본문 14 → 16 · 제목 28 → 32. 폭 = 창의 88% (위 한도 1440) — zoom 안의 길이라 zoom 으로 나눈다 */
@media screen and (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .ie-app.hm, .ie-app.ie-menu, .ie-app.ir-menu, .ie-app.exp-app, .ie-app.rt-set, .ie-app.rp-wide, .ie-app.ch-app, .ie-app.hs-missed, .ie-app.dr-app { --menu-zoom: 1.143; zoom: var(--menu-zoom); max-width: calc(min(88vw, 1440px) / var(--menu-zoom)); }
  /* 지도 높이 한도(창 높이 − 아래 메뉴 바)도 zoom 에 곱해져 캠프 줄이 메뉴 바 밑으로 갔다 — 창 몫만 zoom 으로 나눈다.
     빼 두는 몫 170(위 190): 캠프 줄은 아래에서 zoom 을 되돌려 낮아진다 */
  .ie-app.exp-app { --exp-map-maxw: calc(((100dvh - var(--bottom-bar-h, 0px)) / var(--menu-zoom) - var(--rt-tb-h, 0px) - 230px) * 1.5);
    --exp-map-maxw-port: calc(((100dvh - var(--bottom-bar-h, 0px)) / var(--menu-zoom) - var(--rt-tb-h, 0px) - 150px) / 1.5); }
  /* 캠프 줄은 지도 폭에 묶여 있어 키우면 이름이 두 줄로 접힌다 — 이 줄만 zoom 을 되돌리고 폭은 지도와 같게 */
  .ie-app.exp-app .exp-main > .exp-strip { zoom: calc(1 / var(--menu-zoom)); max-width: calc(var(--exp-map-maxw) * var(--menu-zoom)); }
}
.hm-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
/* 맨 위 줄(home.js rtTopBarHtml, 2026-10-04 사용자) — 로고 · 시험 넷 · 계정. Home · Exams · Report · Map · Settings 가 같은 줄,
   스크롤해도 위에 붙는다. 높이 --rt-tb-h 는 지도 높이 셈(.exp-app)과 그 아래 머리(.rt-set-top)의 붙는 자리가 함께 쓴다.
   폭이 모자라면(컨테이너 폭) Beta → 로고 크기 → 시험 이름 사이 순서로 줄이고, 「Sign in」 글자는 줄이지 않는다 */
.ie-app { --rt-tb-h: 60px; }
.rt-tb-slot { display: contents; }
.rt-tb { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  height: var(--rt-tb-h); margin: -12px -16px 12px; padding: 0 16px; background: var(--bg-elevated); border-bottom: 1px solid var(--border-soft);
  container-type: inline-size; }
.rt-tb-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.rt-tb .hm-logo { height: 32px; }
.rt-tb-exams { display: flex; justify-content: center; gap: 22px; min-width: 0; }
.rt-tb-exams button { position: relative; border: 0; padding: 8px 0; background: none; color: var(--text-dim); font: 600 15px Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.rt-tb-exams button:hover { color: var(--text-primary); }
.rt-tb-exams button.is-on { color: var(--accent); font-weight: 700; }
.rt-tb-exams button.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 1px; background: var(--accent); }
.rt-tb-acct { display: flex; justify-content: flex-end; }
.rt-tb-busy { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
body[data-exam-count="1"] .rt-tb-exams { visibility: hidden; }
body.mock-running .rt-tb-exams, body.ielts-running .rt-tb-exams { opacity: .35; pointer-events: none; }
@container (max-width: 520px) { .rt-tb .rt-beta { display: none; } .rt-tb-exams { gap: 14px; } }
@container (max-width: 400px) { .rt-tb .hm-logo { height: 24px; } .rt-tb-exams { gap: 10px; } .rt-tb-exams button { font-size: 13px; }
  .rt-tb .hm-signin { padding: 6px 12px; font-size: 13px; } .rt-tb .hm-avatar { width: 34px; height: 34px; font-size: 15px; } }
/* 그 아래 머리(Settings · Map 의 ‹ + 제목)는 맨 위 줄 바로 밑에 붙는다 */
/* 좁은 폭 — 시험 이름 줄이 제 칸에 안 들어가면(home.js rtTopBarFit 이 잼) 두 줄: 위 로고 · 계정, 아래 시험(넘치면 옆으로 밂). 2026-10-11 */
.rt-tb.is-tight { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand acct" "exams exams"; height: auto; row-gap: 0; padding-top: 8px; }
.rt-tb.is-tight .rt-tb-brand { grid-area: brand; }
.rt-tb.is-tight .rt-tb-acct { grid-area: acct; }
.rt-tb.is-tight .rt-tb-exams { grid-area: exams; justify-content: space-between; gap: 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rt-tb.is-tight .rt-tb-exams::-webkit-scrollbar { display: none; }
.rt-tb ~ .ie-top.rt-set-top, .rt-tb-slot ~ .ie-top.rt-set-top { top: var(--rt-tb-h); margin-top: -12px; }
.hm-logo { height: 36px; width: auto; }
/* 공부 목표 창(goal-editor.js, 2026-10-03) */
.ge-box { width: min(540px, 100%);   /* 과목 칩 넷이 한 줄에(2026-10-04 사용자 — 전에는 460) */ display: flex; flex-direction: column; gap: 14px; }
.ge-head { display: flex; align-items: center; justify-content: space-between; }
.ge-head h2 { margin: 0; font: 700 20px Inter, sans-serif; color: #07015A; }
.ge-exams { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: #F7F8FC; }
.ge-exams button { flex: 1; min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: #56627A; font: 600 14px Inter, sans-serif; cursor: pointer; }
.ge-exams button.is-on { background: #6012F3; color: #fff; }
.ge-body { display: flex; flex-direction: column; gap: 12px; }
.ge-row { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #56627A; }
.ge-row input, .ge-row select { min-height: 44px; padding: 0 12px; border: 1px solid #E4E7EF; border-radius: 12px; background: #fff; color: #18213A; font: 400 16px Inter, sans-serif; }
.ge-row input:focus, .ge-row select:focus { outline: 3px solid #6012F3; outline-offset: 1px; }
.ge-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #18213A; margin-top: -4px; }
.ge-note { margin: 0; font-size: 13px; line-height: 1.5; color: #56627A; }
.ge-lead { margin: -6px 0 0; font-size: 14px; line-height: 1.5; color: #56627A; }   /* 처음 목표 창 한 줄(2026-10-05) */
.ge-vars { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* Academic · General Training 두 칸 */
/* 창이 화면보다 길면 안에서 스크롤 — 폰 700px 에서 처음 목표 창이 717px 라 위가 잘렸다(2026-10-05) */
.ge-box { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
@media screen and (max-height: 760px) { .ge-wrap.is-first .ge-box { gap: 10px; } .ge-wrap.is-first .ge-body { gap: 9px; } }
/* 향상할 과목(2026-10-04) — 칩 모양 체크 상자, Reading 은 늘 켜짐(비활성) */
.ge-skills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }   /* 넷이 늘 한 줄 — 시험에 과목이 적으면(SAT 둘) 왼쪽부터 */
.ge-skill { position: relative; display: flex; cursor: pointer; min-width: 0; }
.ge-skill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ge-skill span { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 8px; white-space: nowrap; border: 1px solid #E4E7EF; border-radius: 999px; background: #fff;
  color: #56627A; font: 600 14px Inter, sans-serif; }
.ge-skill input:checked + span { border-color: #6012F3; background: #F3EEFF; color: #6012F3; }
.ge-skill input:checked + span::before { content: '✓'; margin-right: 6px; }
.ge-skill input:disabled + span { cursor: default; opacity: .75; }
.ge-skill input:focus-visible + span { outline: 3px solid #6012F3; outline-offset: 1px; }
/* 폰 — 넷이 한 줄에 들도록 글자를 줄이고 ✓ 는 뺀다(고른 칩은 보라 테두리 · 바탕으로 가린다) */
@media screen and (max-width: 480px) { .ge-skills { gap: 6px; } .ge-skill span { padding: 0 4px; font-size: 12.5px; } .ge-skill input:checked + span::before { content: none; } }
.hm-days-left { border: 0; padding: 0; background: none; font: inherit; font-weight: 700; color: #6012F3; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.exp-course { display: block; margin-top: 2px; border: 0; padding: 0; background: none; font: 400 13px/1.4 Inter, sans-serif; color: var(--text-dim); text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }   /* 예전 span 과 같은 작은 글자(2026-10-03 사용자 「폰트가 너무 크다」) */
/* 로고 → 홈(2026-10-03) — 단추 모양 없이 로고 그대로, 누를 수 있음만 */
.rt-logo { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; }
.rt-logo:focus-visible { outline: 3px solid #6012F3; outline-offset: 3px; }
.rt-logo-sm { margin-right: 10px; }
.rt-logo-sm .rt-logo-img { height: 26px; width: auto; display: block; }
@media screen and (max-width: 768px) { .rt-logo-sm { display: none; } }
/* 베타 꼬리표(2026-10-01) — 시작 화면 · 홈 머리의 로고 옆, 홍보 사이트와 같은 모양(로고 보라 테두리) */
.hm-brand { display: inline-flex; align-items: center; gap: 8px; }
/* 카메라 권한 창이 떠 있는 동안 맨 위 한 줄(gazeprep.js _gpBanner, 2026-10-01) */
#rtCamAsk { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 30000; max-width: min(560px, calc(100% - 24px));
  padding: 10px 16px; border-radius: 12px; background: #16171c; color: #fff; font: 600 14px/1.45 Inter, -apple-system, sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); text-align: center; }
#rtCamAsk[hidden] { display: none; }
.rt-beta { display: inline-block; padding: 1px 8px; border: 1.5px solid #6012f3; border-radius: 999px; color: #6012f3; background: #fff;
  font: 700 12px/1.5 Inter, -apple-system, sans-serif; letter-spacing: .04em; white-space: nowrap; }
.hm-avatar { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--accent); color: #fff;
  font: 700 17px Inter, sans-serif; cursor: pointer; }
.hm-signin { border: 1px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent);
  padding: 7px 16px; font: 700 14px Inter, sans-serif; cursor: pointer; }
.hm-title { margin: 6px 0 14px; font: 700 var(--t1)/1.2 Inter, sans-serif; color: var(--text-primary); letter-spacing: -.01em; }
/* 채운 보라 단추는 화면에 하나(화면 표준 S5, 2026-10-14) — 진단 칸(Start my free check)이 있으면 Continue 는 테두리 단추 */
.hm:has(.hm-check-go) .hm-cont { background: var(--bg-elevated); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.hm:has(.hm-check-go) .hm-cont:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.hm-exams { display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--bg-secondary); max-width: 560px; }
.hm-exams button { flex: 1; border: 0; border-radius: 10px; background: transparent; padding: 10px 4px; color: var(--text-dim);
  font: 700 15px Inter, sans-serif; cursor: pointer; }
.hm-exams button.is-on { background: var(--accent); color: #fff; }
/* 화면 머리의 시험 탭(Report · Words, exam-pack.js examTabsHtml, 2026-10-02) — 홈 시험 탭과 같은 모양.
   이 탭이 보이는 동안 폰 아래 시험 줄은 숨긴다 — 같은 탭이 위 · 아래 두 번 보이지 않게(사용자 결정 (가)). 노트북 왼쪽 메뉴는 그대로 */
.ex-tabs { margin: 0 0 14px; }
/* 목록 머리의 문항 수(2026-10-02) — 그 시험의 합, 제목 옆 작은 회색 글자 */
.ie-qcount { margin-left: 10px; font-size: 14px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
@media screen and (max-width: 768px) { body:has(#ieltsScreen:not(.hidden) .ex-tabs) #appSidebar .sb-exam { display: none !important; } }
.hm-info { margin: 10px 2px 0; font-size: 14px; color: var(--text-dim); }
.hm-target { border: 0; background: transparent; color: var(--text-dim); font: inherit; padding: 0; cursor: pointer; }
.hm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px;
  grid-template-areas: "plan" "next" "side"; }
.hm-a-plan { grid-area: plan; } .hm-a-next { grid-area: next; } .hm-a-side { grid-area: side; }
.hm-grid > div { display: flex; min-width: 0; }
.hm-grid > div:empty { display: none; }
/* 오른쪽 기둥(2026-10-17 홈 다시 짬) — Challenge 한 줄 위 · Report 한 줄 아래. 폰은 Practice 아래로 쌓인다.
   둘 다 없으면(판도 챌린지도 없음) 기둥째 숨고 Practice 가 한 줄 가득 */
.hm-a-side { flex-direction: column; gap: 16px; }
.hm-a-side > div { display: flex; min-width: 0; }
.hm-a-side > div:empty { display: none; }
.hm-grid.is-solo:not(.has-ch) .hm-a-side { display: none; }
/* 넓은 화면 — 위 Today 가로 전체, 아래 Practice(넓게) | 오른쪽 기둥. 기둥은 Practice 높이로 늘리지 않는다(남는 아래는 비움) */
@media (min-width: 900px) {
  .hm-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "plan plan" "next side"; align-items: start; }
  .hm-grid.is-solo:not(.has-ch) { grid-template-areas: "plan plan" "next next"; }
}
.hm-info-h { margin: 0; }   /* 제목 줄 오른쪽 — 목표 · 시험일(2026-10-17) */
/* 오늘 칸의 카드 셋(2026-10-17 사용자 「카드 모양으로 갈무리」) — Studied today · Study days · This week.
   짝(고리 · 목표, 수 · 요일 점, 숫자 셋)은 한 카드 안. 폰은 위 둘 · 아래 하나, 노트북은 1 : 1 : 2 한 줄. 모양은 숫자 칸(.hm-tile) 그대로 */
.hm-dts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.hm-dt-week { grid-column: 1 / -1; }
@media (min-width: 900px) { .hm-dts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); } .hm-dt-week { grid-column: auto; } }
.hm-dts + .hm-tiles { margin-top: 10px; }
.hm-dt { flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; border: 0; font: inherit; color: inherit; text-align: left; }
button.hm-dt { cursor: pointer; }
.hm-dt .hm-dt-l { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.hm-dt-row { display: flex; align-items: center; gap: 8px; }
.hm-dt b { color: var(--text-primary); }   /* 큰 숫자 — 숫자 칸의 흐린 span 색을 물려받지 않게 */
.hm-dt-goal svg { width: 28px; height: 28px; flex: 0 0 auto; transform: rotate(-90deg); }
.hm-dt-goal circle { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.hm-dt-goal.is-met { background: #F3EEFF; }
.hm-dt .hm-dt-s { font-size: 13px; color: var(--text-dim); }
.hm-dt .hm-goal-ed { color: #6012F3; }
.hm-dt .hm-days span { font-size: 11px; }
.hm-dt-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.hm-dt-nums > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-dt-nums small { font-size: 13px; color: var(--text-dim); }
@media (max-width: 359px) { .hm-dt .hm-days span { font-size: 0; gap: 0; } }   /* 아주 좁으면 요일 글자를 빼고 점만 */
.hm-h-more { border: 0; padding: 0; background: none; font: 600 13px Inter, sans-serif; color: var(--accent); cursor: pointer; white-space: nowrap; }
.hm-card { display: block; width: 100%; box-sizing: border-box; padding: 20px; border-radius: 16px; border: 1px solid var(--border-soft);
  background: var(--bg-elevated); text-align: left; font-family: inherit; color: var(--text-primary); }
.hm-card h2 { margin: 0; font: 700 var(--t2) Inter, sans-serif; }
/* 네 칸의 공통 틀(2026-10-04) — 세로로 쌓고, 바닥 줄(.hm-foot)은 남는 높이를 위에 두고 맨 아래 */
.hm-grid .hm-card { display: flex; flex-direction: column; flex: 1; }
.hm-foot { margin-top: auto; }
.hm-grid .hm-card > .hm-foot { margin-top: auto; }
.hm-grid .hm-card > :nth-last-child(2) { margin-bottom: 12px; }
/* 머리 줄 — 아이콘 · 제목 · 오른쪽 칸 하나. 넷 모두 같은 높이 */
.hm-h { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0 0 14px; }
.hm-h h2 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-h-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(96, 18, 243, .08); color: var(--accent); }
.hm-h-ic .hm-svg { width: 20px; height: 20px; }
.hm-h-r { flex: none; display: flex; align-items: center; }
.hm-go { color: var(--text-dim); font-size: 20px; }
/* 진단 칸(?start=check, 2026-10-02) */
.hm-check { margin-top: 16px; background: linear-gradient(180deg, rgba(96, 18, 243, .12), rgba(96, 18, 243, .04)); border-color: rgba(96, 18, 243, .25); }
.hm-check p { margin: 4px 0 12px; font-size: 14px; color: var(--text-dim); }
/* 처음 온 사람 칸의 시작 단추(2026-10-02) — 진단 화면(css/check.css)으로 */
.hm-check-go { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 12px; background: var(--accent); color: #fff;
  font: 600 16px Inter, sans-serif; cursor: pointer; }
/* 진단 한 줄 — 이 시험을 푼 뒤 홈 맨 아래(2026-10-02) */
.hm-check-row { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--border-soft);
  border-radius: 12px; background: var(--bg-elevated); color: var(--accent); font: 600 15px Inter, sans-serif; cursor: pointer; text-align: left; }
/* Today's plan — 띠: 할 일 수 + 막대(2026-10-04 — 보라 바탕 · 0% 걷음, 네 칸 같은 흰 바탕) */
.hm-strip { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 14px; color: var(--text-dim); }
.hm-strip span { flex: none; }
.hm-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(96, 18, 243, .15); overflow: hidden; }
.hm-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
/* 공통 줄(2026-10-04) — 네 칸이 모두 이 모양: 동그라미 아이콘 · 굵은 한 줄 · 흐린 한 줄 · 끝 표시, 높이 하나 */
.hm-task { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; box-sizing: border-box; margin: 0 0 8px; padding: 10px 14px;
  border: 0; border-radius: 12px; background: var(--bg-primary); text-align: left; font-family: inherit; color: var(--text-primary); cursor: pointer; }
.hm-task-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-elevated); font-size: 16px; color: var(--navy); }
.hm-task-ic .hm-svg { width: 18px; height: 18px; }
.hm-task.is-done .hm-task-ic { background: var(--success); color: #fff; font-weight: 700; }
.hm-link .hm-svg { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; }
.hm-task-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-task-t b { font-size: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 흐린 줄은 한 줄 — 이름만 말줄임, 숫자(문항 수 · 분 · 점수)는 늘 다 보인다 */
.hm-task-t small.hm-task-sub { display: flex; min-width: 0; font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.hm-task-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-task-meta, .hm-task-dot { flex: none; white-space: nowrap; }
.hm-cont { width: 100%; min-height: 48px; padding: 12px 0; border: 0; border-radius: 12px; background: var(--accent); color: #fff;
  font: 600 16px Inter, sans-serif; cursor: pointer; }
/* 이번 주 숫자 */
.hm-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.hm-tiles:not(.hm-band) > :last-child:nth-child(odd) { grid-column: 1 / -1; }   /* 이번 주 숫자 셋(2026-10-16 Study days 걷음) — 남는 칸은 한 줄 가득 */
.hm-today .hm-info { margin: 0 2px 10px; }   /* 목표 · 시험일 한 줄을 오늘 칸 안으로(2026-10-16) */
.hm-tile { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 14px; }
.hm-tile { background: var(--bg-primary); }   /* 숫자 칸은 모두 같은 중립 바탕(디자인 가이드, 2026-10-02 — 전에는 칸마다 초록 · 파랑 · 주황 · 청록) */
.hm-tile-ic { font-size: 22px; line-height: 1.2; color: var(--navy); }
.hm-tile-ic .hm-svg { width: 22px; height: 22px; }
.hm-tile.is-band { grid-column: 1 / -1; background: rgba(96, 18, 243, .08); }   /* 예측 밴드(2026-10-02) — 한 줄 가득 */
.hm-band { margin-bottom: 14px; }
.hm-task-why { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--accent); white-space: normal; }   /* Today's plan 까닭 한 줄(2026-10-08) */
.hm-band .hm-tile.is-band:not(:only-child) { grid-column: auto; }
.hm-band .hm-tile.is-band.is-total { grid-column: 1 / -1; }   /* SAT 총점(2026-10-11) — 한 줄 가득, 아래에 R&W · Math 두 칸 */
.sk-listen .sk-listen-l li { grid-template-columns: minmax(150px, max-content) 1fr; }   /* 듣기 장부 — 축 이름이 두 줄로 꺾이지 않게(2026-10-08) */
.sk-listen-l li.is-weak span { color: var(--navy); font-weight: 600; }   /* 읽기 · 듣기 예측이 둘이면 나란히(2026-10-08) */
@media (max-width: 600px) { .sk-listen .sk-listen-l li { grid-template-columns: 1fr; gap: 0; } }   /* 폰 — 기준 이름이 길면 이름 · 숫자가 붙어 보였다(2026-10-17 Report 1단계) */
.hm-tile div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-tile b { font: 700 var(--n2) Inter, sans-serif; } .hm-tile b small { font-size: 13px; font-weight: 700; }
.hm-tile span { font-size: 13px; color: var(--text-dim); }
.hm-tile em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--success); }
.hm-tile em.is-down { color: var(--text-dim); }   /* 지난주보다 낮으면 흐리게 — 빨강으로 겁주지 않는다 */
.hm-link { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; box-sizing: border-box; padding: 10px 14px;
  border: 0; border-radius: 12px; background: var(--bg-secondary); color: var(--accent); font: 700 14px Inter, sans-serif; cursor: pointer; }
/* Your progress — 「This week」 작은 이름표 · 아직 못 잰 칸(— + 여는 조건) */
.hm-week { margin: 0 0 8px; font-size: 13px; color: var(--text-dim); }
.hm-tiles + .hm-task, .hm-tiles + .hm-streak { margin-top: 12px; }
.hm-tile.is-empty b { color: var(--text-dim); }
.hm-tile em.is-wait { font-weight: 600; color: var(--text-dim); }
/* 연속 — Your progress 안의 공통 줄(2026-10-04), 요일 점은 줄 오른쪽 */
.hm-days { flex: none; display: flex; gap: 6px; }
.hm-days span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--text-dim); }
.hm-days i { width: 14px; height: 14px; border-radius: 50%; background: var(--bg-secondary); }
.hm-days span.is-on i { background: var(--success); }
/* 최근 판 — 공통 줄(.hm-task), 다 맞힌 판은 끝에 ✓ */
.hm-ok { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--success); color: #fff; font-size: 13px; font-weight: 700; }
/* Recent 줄 끝 「Gaze replay」 표(2026-10-06) — 시선 경로가 있는 판, 줄을 누르면 그 판 Gaze Path 로 */
.hm-gz { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #F3EEFF; color: #6012F3; font-size: 12px; font-weight: 600; white-space: nowrap; }
.hm-gz .hm-svg { width: 14px; height: 14px; }
.hm-ok + .hm-gz { margin-left: -4px; }
@media screen and (max-width: 560px) { .hm-days { gap: 3px; } }

/* ═══ 결과 화면 요약 — 점수 · 고칠 것 하나 · 틀린 문항 · More details(ielts-gap.js, 2026-10-03 단계 A — docs/dev/18 2-5) ═══ */
.gap-top { display: flex; flex-direction: column; gap: 12px; }
.gap-score { display: flex; align-items: baseline; gap: 10px; }
.gap-score b { font-size: 34px; font-weight: 800; color: var(--rp-ink, var(--text-primary)); letter-spacing: -0.02em; }
.gap-score span { font-size: 14px; color: var(--text-dim); }

/* 리뷰 피드 · 점수 예측(ielts-feed.js, 2026-10-16 — docs/dev/24 14절). 카드 = hm-card 꼴(16 · 테두리 · 그림자 없음), 글자는 S9 단계 */
.fd-said { color: var(--text-dim); }
.fd-conf { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--rp-ink, var(--text-primary)); }
.fd-conf.is-locked { font-weight: 400; color: var(--text-dim); }
.fd-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.fd-start .fd-go { min-height: 48px; padding: 0 22px; font-size: var(--t3); font-weight: 700; }
.fd-later { flex-basis: 100%; margin: 0; font-size: var(--fs-body); color: var(--text-dim); }
.fd-pred { max-width: 640px; margin: 48px auto; padding: 0 16px; text-align: center; }
.fd-pred-q { margin: 0 0 20px; font-size: var(--t2); font-weight: 700; line-height: 1.35; }
.fd-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fd-chip { min-width: 48px; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border-mid); background: var(--bg-elevated);
  color: var(--text-primary); font-size: var(--t3); font-weight: 700; cursor: pointer; }
.fd-chip:hover { border-color: var(--accent); color: var(--accent); }
.fd-skip { margin-top: 16px; }
.fd-feed { display: flex; flex-direction: column; gap: 16px; padding-bottom: 32px; }
.fd-card { padding: 20px; border-radius: 16px; border: 1px solid var(--border-soft); background: var(--bg-elevated); }
.fd-card.is-done { border-color: var(--border-mid); }
.fd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fd-n { font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.fd-tag { font-size: var(--fs-label); font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--rp-soft, rgba(96, 18, 243, .08)); color: var(--accent); }
.fd-tag.is-sure { background: #fff1e6; color: #b45309; }
.fd-tag.is-prove { background: #e8f6f1; color: #0f7a5a; }
.fd-q { margin: 0 0 8px; font-size: var(--t3); font-weight: 600; line-height: 1.45; }
.fd-blank { color: var(--accent); }
.fd-mine { margin: 0 0 8px; font-size: var(--fs-body); color: var(--text-dim); }
.fd-mine.is-ok { color: var(--text-primary); }
.fd-para { margin: 8px 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--rp-soft, rgba(96, 18, 243, .06)); }
.fd-para-n { display: block; margin-bottom: 4px; font-size: var(--fs-label); font-weight: 700; color: var(--accent); }
.fd-para p { margin: 0; font-size: var(--fs-body); line-height: 1.6; }
.fd-opts { display: flex; flex-direction: column; gap: 8px; }
.fd-opts.is-tri { flex-direction: row; flex-wrap: wrap; }
.fd-opt { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-mid);
  background: var(--bg-elevated); color: var(--text-primary); font-size: var(--fs-body); text-align: left; cursor: pointer; }
.fd-opt b { flex: none; }
.fd-opt em { margin-left: auto; font-style: normal; font-size: var(--fs-label); color: var(--text-dim); }
.fd-opt.is-yours { opacity: .55; text-decoration: line-through; cursor: default; }
.fd-opt.is-right { border-color: var(--success); background: rgba(16, 185, 129, .08); opacity: 1; text-decoration: none; }
.fd-opt.is-wrong { border-color: #dc2626; background: rgba(220, 38, 38, .06); }
.fd-opt:not(:disabled):hover { border-color: var(--accent); }
.fd-text { display: flex; gap: 8px; }
.fd-text .xr-in { flex: 1; min-width: 0; }
.fd-reveal { margin-top: 12px; }
.fd-verdict { margin: 0 0 8px; font-size: var(--fs-body); font-weight: 700; }
.fd-verdict.is-ok { color: var(--success); }
.fd-verdict.is-no { color: var(--text-primary); }
.fd-quote { margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid #f5c400; background: #fffbe6; font-size: var(--fs-body); line-height: 1.6; }
.fd-quote b { font-weight: 700; }
.fd-why { margin: 0; font-size: var(--fs-body); line-height: 1.5; }
.fd-call { margin: 0 0 8px; font-size: var(--fs-body); }
.fd-ask { margin: 8px 0; font-size: var(--fs-body); font-weight: 600; }
.fd-sents { display: flex; flex-direction: column; gap: 6px; }
.fd-sent { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--bg-elevated); color: var(--text-primary);
  font-size: var(--fs-body); line-height: 1.5; text-align: left; cursor: pointer; }
.fd-sent:not(:disabled):hover { border-color: var(--accent); }
.fd-sent.is-right { border-color: var(--success); background: rgba(16, 185, 129, .08); }
.fd-sent.is-wrong { border-color: #dc2626; }
.fd-end { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fd-done { margin: 0; font-size: var(--t3); font-weight: 700; }
.fd-fold { width: 100%; }
.fd-fold summary { cursor: pointer; font-size: var(--fs-body); color: var(--text-dim); padding: 6px 0; }
.fd-fold .fd-card { margin-top: 10px; }

.fd-rule { margin: 0 0 12px; font-size: var(--fs-body); line-height: 1.5; color: var(--text-dim); }
.fd-gi { padding: 12px 0; border-top: 1px solid var(--border-soft); }
.fd-gi:first-of-type { border-top: 0; padding-top: 0; }
.fd-gi .fd-n { margin-right: 6px; }
.fd-quote.is-cue { border-left-color: var(--border-mid); background: var(--rp-soft, rgba(96, 18, 243, .06)); }
.fd-words { margin: 8px 0 0; font-size: var(--fs-body); font-weight: 600; color: var(--accent); }
.fd-words.is-known { font-weight: 400; color: var(--text-dim); }
.fd-words .xr-link { margin-left: 8px; font-weight: 400; }
.fd-surewhy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-label); color: var(--text-dim); }
.fd-wchip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--bg-elevated); color: var(--text-dim);
  font-size: var(--fs-label); cursor: pointer; }
.fd-wchip.is-on { border-color: var(--accent); color: var(--accent); }
.fd-wchip:disabled:not(.is-on) { opacity: .5; cursor: default; }
.fd-today { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--fs-body); }
.fd-today-k { font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.fd-today.is-end { padding: 16px 0 4px; }
/* 오늘 드릴 시작 · 끝(ielts-action.js, 2026-10-16) */
.act-start { padding: 8px 0 32px; }   /* 안쪽 폭 640 걷음(2026-10-18 표준 S1 — 폭은 바깥 .dr-app 하나) */
.act-what { margin: 0 0 16px; font-size: var(--t3); line-height: 1.45; }
.act-dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 0 0 20px; padding: 20px; border-radius: 16px; border: 1px solid var(--border-soft); background: var(--bg-elevated); }
.act-dl dt { font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); padding-top: 2px; }
.act-dl dd { margin: 0; font-size: var(--fs-body); line-height: 1.5; }
.act-done { margin: 0 0 12px; font-size: var(--fs-body); color: var(--success); font-weight: 600; }
.act-end { margin: 0 0 16px; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--success); background: rgba(16, 185, 129, .06); }
.xr-conf { margin: 8px 0; }
.st-check { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--success); }
.st-open, .st-conf { margin-bottom: 16px; }
.st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--border-soft); font-size: var(--fs-body); }
.st-row:first-of-type { border-top: 0; }
.st-k { font-weight: 700; }
.st-st { font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.st-meta { flex: 1; min-width: 120px; color: var(--text-dim); }
.st-closed { margin: 10px 0 0; font-size: var(--fs-body); color: var(--success); }
.st-big { margin: 4px 0 6px; font-size: var(--t3); font-weight: 700; }
.st-sub { margin: 0 0 4px; font-size: var(--fs-body); color: var(--text-dim); }
.st-slips { margin-top: 12px; }
.st-slips-h { margin: 0 0 4px; font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.act-end-k { margin: 0 0 8px; font-size: var(--t3); font-weight: 700; color: var(--success); }
/* Find facts 결과 맨 위 — 지난 드릴과 견줌(ielts-drill.js, 2026-10-17). 표는 .act-cmp 를 그대로 쓴다 */
.ie-dcmp { margin: 0 0 16px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--border-mid); }
.ie-dcmp-k { margin: 0 0 4px; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dim); }   /* 라벨(S9) */
.ie-dcmp .act-cmp { margin: 0; }
.act-cmp { margin: 0 0 12px; border-collapse: collapse; font-size: var(--fs-body); }
.act-cmp th, .act-cmp td { padding: 4px 16px 4px 0; text-align: left; }
.act-cmp thead th { font-size: var(--fs-label); color: var(--text-dim); font-weight: 700; }
@media (max-width: 600px) { .act-dl { grid-template-columns: 1fr; gap: 4px; } .act-dl dd { margin-bottom: 8px; } }
.gap-card { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-left: 4px solid var(--accent);
  border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.gap-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: .12em; }
.gap-name { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: var(--text-primary);
  background: rgba(96, 18, 243, 0.08); border-radius: 999px; padding: 3px 10px; }
.gap-said { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-primary); }
.gap-why { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-dim); }
.gap-do { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-primary); }
.gap-again { color: var(--text-dim); }
.gap-card .gp-btn { align-self: flex-start; margin-top: 4px; }
.gap-list { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 16px; padding: 12px 14px; }
.gap-list h2 { margin: 2px 4px 8px; font-size: var(--t2); font-weight: 700; color: var(--text-primary); }
.gap-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gap-li { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; text-align: left; font: inherit;
  background: transparent; border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px 12px; color: var(--text-primary); }
button.gap-li { cursor: pointer; }
button.gap-li:hover { border-color: var(--accent); }
.gap-qn { min-width: 30px; font-weight: 800; color: var(--accent); }
.gap-ans { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.gap-ans s { color: var(--text-dim); }
.gap-tag { font-size: 12px; font-weight: 700; color: var(--text-dim); background: var(--bg-base, rgba(0,0,0,.04));
  border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px 9px; }
.gap-go { color: var(--text-dim); font-size: 18px; }
details.rp-more { display: flex; flex-direction: column; gap: 14px; }
details.rp-more > summary { cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; color: var(--accent);
  border: 1px solid var(--border-mid); border-radius: 12px; padding: 12px 14px; background: var(--bg-elevated); }
details.rp-more > summary::-webkit-details-marker { display: none; }
details.rp-more > summary::after { content: ' ▾'; }
details.rp-more[open] > summary::after { content: ' ▴'; }
details.rp-more[open] > summary { margin-bottom: 14px; }
details.rp-more > * + * { margin-top: 14px; }
@media (max-width: 700px) {
  .gap-score b { font-size: 28px; }
  .gap-said { font-size: 16px; }
}
@media print {
  body.rp-printing details.rp-more > summary { display: none !important; }
  body.rp-printing .gap-card .gp-btn, body.rp-printing .gap-go { display: none !important; }
}

/* ═══ 틀린 문항 X-ray — 먼저 짐작 → X-ray → 다시 고르기(ielts-xray.js, 2026-10-03 단계 B — docs/dev/18 2-6) ═══ */
/* 설명 패널(Why you missed it, 2026-10-03) — 문항 칸과 다른 옷: 남색 머리 띠 · 연보라 몸통 · 왼쪽 보라 줄 · 단계 표시(가이드: 남색 위 흰 글자) */
.ie-xr { margin: 14px 0; min-width: 0; }
.ie-xr *, .ie-xr *::before, .ie-xr *::after { box-sizing: border-box; }
.xr-panel { border-radius: 16px; overflow: clip;   /* clip — hidden 이면 아래 붙는 행동 줄(.xr-act sticky)이 붙지 않는다(2026-10-05) */ background: #F3EEFF; border: 1px solid rgba(96, 18, 243, .22); border-left: 4px solid #6012F3;
  box-shadow: 0 8px 22px rgba(7, 1, 90, .10); }
.xr-band { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 16px; border: 0; background: #07015A; color: #fff;
  font: 700 13px/1.4 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-align: left; cursor: default; }
.xr-grip { display: none; width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.xr-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.xr-yours { margin: 0; font-size: 14px; color: #56627A; }
.xr-yours s { color: #B42318; font-weight: 700; }
.xr-ask, .xr-card { display: flex; flex-direction: column; gap: 10px; }
/* 처음 나타날 때 한 번 */
.ie-xr.is-new .xr-panel { animation: xrIn .35s ease-out; }
@keyframes xrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ie-xr.is-new .xr-panel { animation: none; } }
/* ①② 동안 문항의 선지 · 입력칸은 흐리게 — 눈이 패널로 */
.ie-qblock.xr-dim .ie-opts, .ie-qblock.xr-dim .ie-match select, .ie-qblock.xr-dim .ie-block, .ie-qblock.xr-dim .ie-table, .ie-qblock.xr-dim .ie-pick {
  opacity: .45; pointer-events: none; transition: opacity .2s ease; }
/* 폰 서랍(2026-10-04)은 2026-10-16 에 걷었다 — 패널은 늘 문항 칸 제자리, Passage 탭에서는 칩(.xr-backchip) */
@keyframes xrUp { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
/* 듣기 — 대본 줄(2026-10-03): 정답 조각은 다시 답하기 전까지 흐리게, 함정 · 넘김 신호는 글자 범위에만 */
.xr-lx { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #E4E7EF; }
.xr-lx-row { display: flex; align-items: flex-start; gap: 8px; }
.xr-lx-row p { margin: 2px 0 0; font-size: 15px; line-height: 1.55; color: #18213A; }
.xr-play { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #E4E7EF; background: #F7F8FC; color: #07015A; cursor: pointer; font-size: 12px; }
.xr-play:hover { border-color: #6012F3; color: #6012F3; }
.xr-lx-key { background: #fff1c2; box-shadow: inset 0 -2px 0 #e2b500; border-radius: 3px; }
.xr-lx-hide { filter: blur(5px); background: #fff1c2; border-radius: 3px; user-select: none; }
.xr-lx-trap { background: rgba(220, 38, 38, .12); box-shadow: inset 0 -2px 0 #B42318; border-radius: 3px; }
.xr-lx-cue { box-shadow: inset 0 -2px 0 #07015A; }
.xr-lx-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.xr-lx-lg-hide::before, .xr-lx-lg-trap::before, .xr-lx-lg-cue::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.xr-lx-lg-hide::before { background: #fff1c2; border: 1px solid #e2b500; }
.xr-lx-lg-trap::before { background: rgba(220, 38, 38, .12); border: 1px solid #B42318; }
.xr-lx-lg-cue::before { border-bottom: 2px solid #07015A; border-radius: 0; }
.xr-legend span + span { margin-left: 12px; }
/* 결과 목록 — 설명 패널이 준비된 문항 */
.gap-review { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #F3EEFF; color: #6012F3; font-size: 12px; font-weight: 700; white-space: nowrap; }
.xr-ask b { font-size: 16px; color: var(--text-primary); }
.xr-ask p { margin: 0; font-size: 13px; color: var(--text-dim); }
/* 고르기 칸 — 처음엔 X-ray 「먼저 짐작」 네 칸(10-16 R1 로 걷음), 지금은 기술 지도 「스스로 고르기」(.sk-ask-row)가 쓴다. 누르는 자리는 칸 전체, 높이 44px 이상 */
.xr-g { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 56px;
  padding: 8px 4px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center;
  border: 1px solid #E4E7EF; background: #fff; color: #18213A; }
.xr-g span { overflow-wrap: anywhere; }
@container (min-width: 680px) {   /* 넓은 줄이면 한 줄 */
  .xr-g { flex-direction: row; gap: 8px; min-height: 44px; padding: 8px 10px; font-size: 14px; }
}
.xr-g:hover { border-color: #6012F3; color: #6012F3; }
.xr-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .04em; }
.xr-reply { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-primary); }
.xr-path { font-size: 14px; color: var(--text-primary); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xr-path > b { font-weight: 700; margin-right: 2px; }
.xr-path i { font-style: normal; color: var(--text-dim); }
.xr-step { border: 1px solid var(--border-soft); border-radius: 8px; padding: 2px 8px; background: var(--bg-secondary, rgba(0,0,0,.03)); }
.xr-step small { color: var(--text-dim); }
.xr-step.is-ev { border-color: #e2b500; background: #fff1c2; }
.xr-first { flex-basis: 100%; font-size: 13px; color: var(--text-dim); }
.xr-where { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; }
.xr-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-dim); }
.xr-legend span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.xr-lg-ev::before { background: #fff1c2; border: 1px solid #e2b500; }
.xr-lg-trap::before { background: #ffd9d6; border: 1px solid #e0544a; }
mark.ie-evtrap { background: none; color: #B91C1C; padding: 0; text-decoration: underline wavy #e0544a; text-underline-offset: 3px; }   /* 함정 = 빨간 글자 + 물결 */
.xr-fixrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* 칸 넷(2026-10-05) — A 결론 · B 눈이 한 일 · C 답의 자리, 칸 머리는 작은 대문자 · D 행동은 패널 아래에 붙는다 */
.xr-sec { display: flex; flex-direction: column; gap: 8px; }
.xr-sec + .xr-sec { padding-top: 12px; border-top: 1px solid rgba(96, 18, 243, .14); }
.xr-sec-h { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #56627A; }
/* 들여쓰기(2026-10-05 사용자) — 칸 머리 아래 1단(왼쪽 연한 세로줄), 그 안의 칩 줄 · 범례 · 짝은 2단 */
.xr-sec-b { display: flex; flex-direction: column; gap: 8px; margin-left: 2px; padding-left: 12px; border-left: 2px solid rgba(7, 1, 90, .12); }
.xr-sub { display: flex; flex-direction: column; gap: 8px; padding-left: 12px; }
.xr-lane-n { margin-left: 0; }
.xr-key { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: #56627A; }
.xr-key-r { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.xr-key-r > b { min-width: 84px; font-weight: 700; color: #18213A; }
.xr-key-r span { display: inline-flex; align-items: center; gap: 5px; }
.xr-key-r span[class^="xr-lnk-"]::before { content: ''; width: 18px; height: 10px; border-radius: 3px; }
.xr-sub .ie-evpair { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: baseline; column-gap: 8px; row-gap: 2px; }
.xr-sub .ie-evpair .ie-evarrow { grid-column: 1 / -1; width: 74px; padding-left: 0; text-align: center; }   /* ↔ 는 꼬리표 열 가운데, 줄 하나를 다 차지 */
.xr-sub .ie-evtag { justify-self: start; }
.xr-sub .ie-evtag.is-p { background: #E6E8F0; color: #07015A; }   /* 꼬리표는 회색 — 노란색은 형광으로 읽힌다(2026-10-05) */
.xr-a-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.xr-a-top .gap-name { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: #E6E8F0; color: #07015A; font-size: 13px; font-weight: 700; }
.xr-lane-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13px; }
.xr-lane-h b { color: #18213A; }
.xr-lane-h span { color: #56627A; }
.xr-lane-n { margin-top: 6px; font-size: 13px; color: #18213A; font-weight: 600; }
.xr-act { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 8px; margin: 4px -16px -16px; padding: 10px 16px 12px;
  background: #F3EEFF; border-top: 1px solid rgba(96, 18, 243, .18); }
.ie-evpair b { font-weight: 800; color: #07015A; }
@media screen and (max-width: 560px) {
  .xr-sec-b { padding-left: 10px; } .xr-sub { padding-left: 8px; }
  .xr-key-r > b { min-width: 0; flex-basis: 100%; }
  .xr-sub .ie-evpair { grid-template-columns: 64px minmax(0, 1fr); } .xr-sub .ie-evpair .ie-evarrow { width: 64px; }
  /* 폰 서랍(화면의 42%)에서 붙는 줄이 본문을 덜 가리게 — 단추와 「Show the answer」 를 한 줄에 */
  .xr-act { padding: 8px 16px 10px; }
  .xr-act .xr-fixrow { flex-wrap: nowrap; gap: 10px; }
  .xr-act .ie-btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .xr-act .xr-link { white-space: nowrap; font-size: 13px; }
  .xr-act .xr-fix-tail { display: none; }   /* 폰 — 「Re-read ¶5(E)」 까지만 */
}
.xr-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; }
.xr-wait { color: var(--text-dim); }
.xr-no { color: #c0392b; font-weight: 600; }
.xr-text { display: inline-flex; gap: 8px; align-items: center; }
.xr-in { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border-mid); min-width: 160px; }
.xr-link { font: inherit; font-size: 13px; background: none; border: 0; padding: 4px 0; color: var(--text-dim); text-decoration: underline; cursor: pointer; }
.xr-back { align-self: flex-start; }
.xr-done { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.xr-done.is-ok { color: #1e8e5a; }
.ie-qblock.xr-picking .ie-opt:not(:disabled) { cursor: pointer; outline: 2px dashed rgba(96, 18, 243, .35); outline-offset: 1px; }
#passagePanel.xr-focus .passage-para:not(.xr-ev) { opacity: .28; transition: opacity .3s; }
#passagePanel.xr-focus .passage-para.xr-ev { background: rgba(255, 241, 194, .35); border-radius: 8px; }
/* 고치기 세션 · 시험일(ielts-fixq.js, 2026-10-03 단계 C) */
.xr-goal { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--bg-secondary, rgba(0,0,0,.03)); }
.xr-goal b { font-size: 14px; color: var(--text-primary); }
.xr-goal > span { font-size: 13px; color: var(--text-dim); }
.xr-goal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xr-goal-in { font: inherit; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-primary); }
.hm-days-left { color: var(--accent); font-weight: 700; }
/* 근거 사슬 문장 색 · 문장마다 머문 시간(ielts-xray.js ieltsXrayPaint, 2026-10-03 단계 E — 주석이 있는 세트) */
#passagePanel.xr-proving .sent { cursor: pointer; }
#passagePanel.xr-proving .sent:hover { background: rgba(108, 92, 231, .10); border-radius: 3px; }
#passagePanel .sent.xr-s-miss { background: rgba(220, 38, 38, .14); border-radius: 3px; }
.xr-proof-ask { margin: 8px 0 4px; }
.xr-proof-got, .xr-proof-miss, .xr-proof-end { margin: 4px 0; font-size: 14px; color: var(--text-dim); }
/* 근거 사슬 역할 — 글자만(배경은 시선 줄 .xr-ln 이 맡는다, 2026-10-05). 녹색 · 보라는 쓰지 않는다(시선 색 · 누르는 것) */
#passagePanel .sent.xr-s-key, .xr-tx-key   { color: #07015A; font-weight: 800; text-decoration: underline 2px #E2B500; text-underline-offset: 3px; text-decoration-skip-ink: none; }
#passagePanel .sent.xr-s-sup, .xr-tx-sup   { color: #1D4ED8; font-weight: 600; }
#passagePanel .sent.xr-s-over, .xr-tx-over { color: #C2410C; font-weight: 600; }
#passagePanel .sent.xr-s-cond, .xr-tx-cond { color: #0E7490; font-weight: 600; }
#passagePanel .sent.xr-s-trap, .xr-tx-trap { color: #B91C1C; text-decoration: underline wavy #e0544a; text-underline-offset: 3px; }
#passagePanel .sent[data-xr-step]::before { content: attr(data-xr-step); display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
  margin-right: 4px; border-radius: 999px; background: #07015A; color: #fff; font-size: 11px; font-weight: 700; text-align: center; vertical-align: 1px; text-decoration: none; }   /* 남색 — 보라는 누르는 것 */
.xr-lg-key::before { background: #fff1c2; border: 1px solid #e2b500; }
.xr-lg-sup::before { background: #dceeff; border: 1px solid #3d8bd9; }
.xr-lg-over::before { background: #dcf5e6; border: 1px solid #23a26b; }
.xr-lg-cond::before { background: #efe3ff; border: 1px solid #8b5cf6; }
.xr-times { font-size: 13px; color: var(--text-primary); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.xr-tm { white-space: nowrap; }
.xr-tm.is-trap { color: #B91C1C; font-weight: 600; }
.xr-tm.is-key { color: #07015A; font-weight: 700; }
.xr-tm.is-sup { color: #1D4ED8; } .xr-tm.is-over { color: #C2410C; } .xr-tm.is-cond { color: #0E7490; }
/* 기술 지도(ielts-skill.js, 2026-10-03 단계 F) */
/* Report 맨 위 두 칸(2026-10-04) — 왼쪽 Your reading analysis · 오른쪽 Your reading gaze pattern. 홈 네 칸과 같은 카드 틀,
   넓은 화면은 좌우 반씩 · 높이 같게 · 바닥 줄 같은 선, 폰은 분석 → 시선 차례로 쌓음. 한 칸뿐이면 한 줄 가득 */
.ir-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 14px; }
/* 시간에 따른 진척(2026-10-05) — 위 정확도 · 아래 문항당 시간, 가로축(공부한 날)만 같다 */
.ir-trend { margin-top: 14px; }
.tr-ranges { display: inline-flex; gap: 4px; margin: 2px 0 10px; }
.tr-ranges button { min-height: 32px; padding: 0 12px; border: 1px solid var(--border-mid, #d5d9e4); border-radius: 999px; background: #fff; color: #56627A; font: 600 13px Inter, sans-serif; cursor: pointer; }
.tr-ranges button.is-on { border-color: #6012F3; background: #F3EEFF; color: #6012F3; }
.tr-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; }
.tr-row + .tr-row { margin-top: 6px; }
.tr-k { display: flex; flex-direction: column; gap: 2px; }
.tr-k b { font-size: 13px; color: #18213A; } .tr-k span { font-size: var(--n2); font-weight: 700; color: #07015A; } .tr-k small { font-size: 12px; color: #56627A; }
.tr-plot { position: relative; }
.tr-svg { width: 100%; height: 96px; display: block; overflow: visible; }
.tr-line { fill: none; stroke: #07015A; stroke-width: 2; vector-effect: non-scaling-stroke; }
.tr-plot.is-time .tr-line { stroke: #0E7490; }
.tr-target { stroke: #8A93A8; stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.tr-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; padding: 0; border: 2px solid #6012F3; border-radius: 50%; background: #fff; cursor: pointer; }   /* 점은 누를 수 있음 — 보라 */
.tr-dot::before { content: ''; position: absolute; inset: -10px; }   /* 손가락 닿는 자리 넓힘 */
.tr-dot:hover, .tr-dot:focus-visible, .tr-dot.is-on { background: #6012F3; }
.tr-dot:focus-visible { outline: 2px solid #6012F3; outline-offset: 2px; }
.tr-ticks { position: relative; height: 18px; margin: 4px 0 0 162px; font-size: 11.5px; color: #56627A; }
.tr-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ir-day { margin: 4px 0 8px; font-size: 13px; color: #56627A; }
@media screen and (max-width: 560px) {
  .tr-row { grid-template-columns: 92px minmax(0, 1fr); gap: 8px; } .tr-ticks { margin-left: 100px; }
  .tr-ticks span:not(:first-child):not(:last-child) { display: none; }
}
.ir-top > .ir-card { display: flex; flex-direction: column; min-width: 0; }
.ir-top > .ir-card > .hm-foot { margin-top: auto; }
@media (min-width: 900px) {
  .ir-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .ir-top > .ir-card:only-child { grid-column: 1 / -1; }
}
.ir-top .sk-note { margin-top: auto; padding-top: 10px; }
/* 기술 칸 — 오각형 위에 겹친 칩(꼭짓점 이름표) · 아래 상세 띠 하나(2026-10-04, 축 줄 다섯을 걷음) */
.sk-chart { position: relative; width: 100%; max-width: 560px; margin: 0 auto; }
.sk-chart .sk-radar { display: block; width: 100%; max-width: none; height: auto; }
.sk-chip { position: absolute; display: flex; flex-direction: column; gap: 3px; max-width: 27%; padding: 5px 8px; border: 1px solid transparent; border-radius: 10px;
  background: var(--bg-elevated); font: inherit; color: var(--text-primary); cursor: pointer; line-height: 1.25; }
.sk-chip.is-left { align-items: flex-end; text-align: right; }
.sk-chip.is-right { align-items: flex-start; text-align: left; }
.sk-chip.is-mid { align-items: center; text-align: center; }
.sk-chip b { font-size: 13px; font-weight: 700; color: #2d2a8c; }
.sk-chip > span { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: inherit; }
.sk-chip.is-left > span { justify-content: flex-end; } .sk-chip.is-mid > span { justify-content: center; }
.sk-chip .sk-badge { font-style: normal; font-size: 11px; padding: 1px 7px; }
.sk-chip em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.sk-chip:hover { border-color: var(--border-mid); }
.sk-chip.is-sel { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(96, 18, 243, .12); }
.sk-chip.is-none { cursor: default; } .sk-chip.is-none b, .sk-chip.is-none span { color: var(--text-faint); }
.sk-detail { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--bg-primary); }   /* 늘 세로로 — 가로 flex 에서 문 줄이 폭을 다 가져가 제목이 한 글자씩 꺾였다(2026-10-17 Report 1단계) */
.sk-detail-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sk-detail-t b { font-size: var(--t3); }
.sk-detail-t small { font-size: 13px; color: var(--text-dim); }
.sk-detail-go { flex: none; margin: 0; white-space: nowrap; }
@media screen and (max-width: 560px) {
  .sk-chip { max-width: 30%; padding: 4px 5px; }
  .sk-chip b { font-size: 11.5px; }
  .sk-chip .sk-badge { font-size: 10px; padding: 1px 5px; }
  .sk-chip em { font-size: 11px; }
  .sk-detail { flex-direction: column; align-items: stretch; }
}
/* 시선 칸 — 판 한 줄(이름만 말줄임) · 재생기는 리포트의 칸 머리 · 테두리를 걷고 이 칸 안에 */
.ir-gaze-run { display: flex; min-width: 0; margin: 0 0 4px; font-size: 14px; color: var(--text-dim); white-space: nowrap; }
.ir-gaze-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--text-primary); }
.ir-gaze-meta { flex: none; }
.ir-gp { margin: 0 0 12px; gap: 0; }
.ir-gp .rp-gp { border: 0; padding: 0; background: none; box-shadow: none; }
.ir-gp .rp-card-h { display: none; }
/* Report 첫 화면 칸은 낮게(2026-10-20 사용자 「세로높이가 좀 길다」) — 그림판 여백을 줄이고, 범례는 이름만 한 줄(숫자 · 설명은 Full report 에),
   「Circle size …」 주석은 뺀다(그림판 안 기준 원 「= 250 ms」가 같은 말) */
.ir-gp .rp-gp-box { margin-top: 8px; padding: 12px 14px; }
.ir-gp .rp-gp-ctl { margin-top: 8px; }
.ir-gp .rp-gp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 10px; }
.ir-gp .rp-gp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ir-gp .rp-gp-legend i { width: 12px; height: 12px; }
.ir-gp .rp-gp-legend i.rp-gp-sac { width: 16px; height: 3px; border-radius: 2px; }
.ir-gp .rp-gp-legend b { font-size: 12px; font-weight: 600; }
.ir-gp .rp-gp-legend small, .ir-gp .rp-note { display: none; }
.sk-map .sk-ask, .sk-map .sk-cmp { margin: 4px 2px 10px; font-size: 15px; color: var(--text-primary); }
.sk-map .sk-cmp { font-weight: 600; }
.sk-picks { display: flex; flex-wrap: wrap; gap: 8px; }
/* 자기 짐작 질문 — 오각형 아래 작은 한 줄(2026-10-05) */
.sk-ask-row { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-primary); }
.sk-ask-s { margin: 0 0 8px; font-size: 13px; color: var(--text-dim); }
.sk-ask-row .xr-g { font-size: 13px; padding: 6px 10px; }
.sk-body { display: grid; grid-template-columns: minmax(260px, 1fr) 1fr; gap: 14px; align-items: center; }
.sk-radar { width: 100%; height: auto; overflow: visible; }
.sk-badge { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.sk-badge.is-learning, .sk-st-learning { color: #b45309; }
.sk-badge.is-learning { background: #fff3e0; }
.sk-badge.is-improving, .sk-st-improving { color: #2563eb; }
.sk-badge.is-improving { background: #e8f0ff; }
.sk-badge.is-secure, .sk-st-secure { color: #15803d; }
.sk-badge.is-secure { background: #e6f6ec; }
.sk-note { margin: 10px 2px 0; font-size: 12px; color: var(--text-dim); }
.sk-radar .sk-old { fill: rgba(96, 18, 243, 0.05); stroke: rgba(96, 18, 243, 0.35); stroke-width: 1.5; stroke-dasharray: 3 3; }
.sk-moment { margin: 0; padding: 10px 14px; border-radius: 12px; background: #e6f6ec; color: #15803d; font-size: 15px; font-weight: 600; }
.sk-moment .sk-fuel { margin-left: 6px; color: #b45309; font-weight: 700; white-space: nowrap; }
@media (max-width: 700px) { .sk-body { grid-template-columns: 1fr; } }
/* 홈 「오늘」 카드 — 하루 몇 분 묻는 줄(home.js, 2026-10-03 단계 C 나머지) */
.hm-mins { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin: 0 0 12px; border-radius: 12px; background: var(--bg-elevated); border: 1px dashed var(--accent); }
.hm-mins b { font-size: 14px; color: var(--text-primary); }
.hm-mins-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hm-mins-row button { font: inherit; font-size: 14px; font-weight: 700; padding: 7px 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--accent); background: var(--bg-elevated); color: var(--accent); }
.hm-mins-row button:hover { background: var(--accent); color: #fff; }
.hm-mins-row select { font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-primary); }
/* 확신도 세 점(ielts-conf.js, 2026-10-03 단계 J) */
.ie-conf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--text-dim); }
.ie-conf[hidden] { display: none; }
.ie-conf button { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-primary); }
.ie-conf button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Paragraph mapping(ielts-map.js, 2026-10-03 단계 G) */
body.ie-mapping #questionNav { display: none !important; }
.im-form { display: flex; flex-direction: column; gap: 10px; }
.im-row { display: grid; grid-template-columns: 64px minmax(160px, 1fr) 2fr; gap: 8px; align-items: center; }
.im-k { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.im-role, .im-gist { font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border-mid); background: var(--bg-elevated); color: var(--text-primary); min-width: 0; }
.im-res { display: grid; grid-template-columns: 64px 1fr; gap: 4px 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-elevated); }
.im-res.is-ok .im-cmp { color: var(--success); font-weight: 600; }
.im-res.is-no .im-cmp { color: #b45309; }
.im-gists { grid-column: 2; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-body); color: var(--text-dim); }
.im-legend { margin: 0; font-size: var(--fs-body); color: var(--text-dim); }
@media (max-width: 600px) { .im-row { grid-template-columns: 1fr; } }
/* 낱말 복습 — 떠올리기 단계 · 근거 문장 낱말(words-review.js, 2026-10-03) */
.wr-proof { margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: #fff1c2; color: #7a5b00; font-size: 13px; font-weight: 600; }
.wr-hint { margin: 4px 0 8px; font-size: 14px; color: var(--text-dim); }
/* 복습 사다리 · 끝 화면(2026-10-06 설계 C · D) */
.wr-prog { height: 4px; margin: 0 0 14px; border-radius: 999px; background: var(--bg-secondary); overflow: hidden; }
.wr-prog i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.wr-tag { padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; vertical-align: middle; }
.wr-word { margin: 0 0 18px; font-size: 28px; font-weight: 700; color: var(--text-primary); }
/* 낱말 소리 단추(2026-10-15 사용자 「과목별 단어 훈련 — 사운드 들리게」) — 낱말 옆 작은 둥근 단추, 답을 본 뒤 줄은 낱말 + 단추 */
.wr-spk { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 10px; padding: 0; vertical-align: middle;
  border: 1px solid var(--border-color, #dfe3ec); border-radius: 50%; background: var(--card-bg, #fff); font-size: 16px; line-height: 1; cursor: pointer; }
.wr-spk:hover { border-color: var(--accent, #5b4bd6); }
.iw-head .wr-spk { width: 28px; height: 28px; margin-left: 0; font-size: 13px; }   /* Words 목록 줄 — 낱말 옆 작은 단추 */
.wr-say { display: flex; align-items: center; margin: 4px 0 8px; font-size: 18px; color: var(--text-primary); }
.wr-cloze { margin: 0 0 6px; font-size: 17px; line-height: 1.65; color: var(--text-primary); }
.wr-cloze b { color: var(--accent); }
.wr-gap { display: inline-block; min-width: 5em; min-height: 1.2em; vertical-align: bottom; padding: 0 4px; border-bottom: 2px solid var(--accent); color: var(--accent); font-weight: 700; }
.wr-src { margin: 0 0 16px; font-size: 12px; color: var(--text-dim); }
.wr-opts.is-col { grid-template-columns: 1fr; }
.wr-opts.is-col .wr-opt { padding: 12px 14px 12px 28px; text-align: left; font-size: 15px; font-weight: 600; line-height: 1.4; }
.wr-next { font-weight: 400; color: var(--text-dim); }
.wr-mh { margin: 6px 0 8px; font-size: 15px; color: var(--text-primary); }
.wr-missed { margin: 0 0 16px; padding: 0; list-style: none; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-elevated); }
.wr-missed li { display: flex; gap: 12px; padding: 9px 12px; font-size: 14px; line-height: 1.45; }
.wr-missed li + li { border-top: 1px solid var(--border-soft); }
.wr-missed b { flex: none; width: 34%; min-width: 0; overflow-wrap: anywhere; color: var(--text-primary); }
.wr-missed span { min-width: 0; color: var(--text-dim); }
@media screen and (max-width: 560px) { .wr-missed li { flex-direction: column; gap: 2px; } .wr-missed b { width: auto; } }
.wr-type { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 문제 풀이 키(ielts-input.js, 2026-10-03) — T/F/NG · Y/N/NG 단추의 키 글자(마우스 기기만) · 처음 한 번 안내
   키 글자는 단추 글 **뒤에 한 칸**으로 둔다(2026-10-04 사용자 「단축키 알파벳이 버튼 내용을 가린다」 — 처음엔 오른쪽 위 구석에 떠 있어
   TRUE · FALSE · NOT GIVEN 의 끝 글자를 덮었다). 글 칸 안에 들어가니 단추 폭이 키 글자만큼 늘 뿐 겹치지 않는다. */
@media (hover: hover) and (pointer: fine) {
  .ie-opt.is-tf { align-items: center; gap: 10px; }
  .ie-opt.is-tf::after { flex: none; min-width: 20px; padding: 0 5px; border: 1px solid #E4E7EF; border-radius: 5px;
    background: #F7F8FC; color: #56627A; font: 600 11px/18px Inter, sans-serif; text-align: center; }
  .ie-opt.is-tf.selected::after { border-color: rgba(96, 18, 243, .35); color: var(--accent); background: #fff; }
  .ie-opt.is-tf[data-v="TRUE"]::after { content: 'T'; }
  .ie-opt.is-tf[data-v="FALSE"]::after { content: 'F'; }
  .ie-opt.is-tf[data-v="NOT GIVEN"]::after { content: 'N'; }
  .ie-opt.is-tf.is-yn[data-v="YES"]::after { content: 'Y'; }
  .ie-opt.is-tf.is-yn[data-v="NO"]::after { content: 'N'; }
  .ie-opt.is-tf.is-yn[data-v="NOT GIVEN"]::after { content: 'G'; }
}
.ie-opt:focus-visible { outline: 3px solid #6012F3; outline-offset: 2px; }
.ie-keytip { position: fixed; left: 50%; bottom: calc(var(--bottom-bar-h, 0px) + 18px); transform: translateX(-50%); z-index: 9500; display: flex; align-items: center; gap: 12px;
  max-width: min(640px, calc(100% - 24px)); padding: 10px 14px; border-radius: 12px; background: #07015A; color: #fff; font: 600 14px/1.45 Inter, sans-serif;
  box-shadow: 0 8px 22px rgba(7, 1, 90, .25); }
.ie-keytip button { border: 0; background: none; color: #fff; font-size: 18px; cursor: pointer; }
/* 단어 복습 보기 구석 숫자 — 키 1~4(마우스 기기만, 2026-10-05) */
.wr-opt { position: relative; }
.wr-opt .wr-k { display: none; position: absolute; top: 4px; left: 6px; font-size: 11px; font-weight: 700; color: var(--text-dim); }
@media (hover: hover) and (pointer: fine) { .wr-opt .wr-k { display: block; } }

/* 하루 목표 고리(home.js · study-time.js, 2026-10-03) — 오늘 공부한 시간 / 목표, 넘으면 금색 안쪽 바퀴 */
.hm-goal { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid #E4E7EF; border-radius: 999px;
  background: #F7F8FC; text-align: left; font: inherit; color: #18213A; cursor: pointer; }
.hm-goal svg { width: 30px; height: 30px; flex: 0 0 auto; transform: rotate(-90deg); }
.hm-goal circle { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.hm-goal-bg { stroke: #E4E7EF; }
.hm-goal-fg { stroke: #6012F3; transition: stroke-dasharray .6s ease; }
.hm-goal-over { stroke: #E2B500; stroke-width: 4; }
.hm-goal span { font-size: 13px; font-weight: 700; white-space: nowrap; }
.hm-goal.is-met { border-color: rgba(96, 18, 243, .35); background: #F3EEFF; }
.hm-goal .hm-goal-ed { font-weight: 400; color: #6012F3; }   /* 누르면 공부 목표(2026-10-05) */
/* 폰 — 「Today's plan」 제목이 고리에 밀려 잘렸다(2026-10-04 배포본 390px). 카드 여백 · 고리를 줄여 제목이 다 보이게 */
@media screen and (max-width: 560px) {
  .hm-grid .hm-card { padding: 16px; }
  .hm-h { gap: 8px; }
  .hm-h-ic { width: 32px; height: 32px; }
  .hm-goal { gap: 6px; padding: 3px 8px 3px 3px; }
  .hm-goal svg { width: 24px; height: 24px; }
  .hm-goal span { font-size: 12px; }
}

/* Report — 영역 칩 · 고르기 · 정렬(ielts-runs.js, 2026-10-03) */
.ir-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.ir-areas { display: flex; flex-wrap: wrap; gap: 6px; }
.ir-areas button { min-height: 36px; padding: 0 12px; border: 1px solid #E4E7EF; border-radius: 999px; background: #fff; color: #56627A; font: 600 13px Inter, sans-serif; cursor: pointer; }
.ir-areas button.is-on { border-color: #6012F3; background: #F3EEFF; color: #6012F3; }
.ir-areas button { display: inline-flex; align-items: center; gap: 5px; }
.ir-a-ic { display: inline-flex; } .ir-a-ic .hm-svg { width: 15px; height: 15px; }
/* 폰 — 영역 탭 한 줄 · Sort 는 오른쪽(2026-10-05). 2026-10-17 아이콘만 남기던 것을 글자 칩으로(아이콘이 무엇인지 몰랐다) — 넘치면 가로로 민다 */
@media screen and (max-width: 560px) {
  .ir-tools { flex-wrap: nowrap; gap: 8px; }
  .ir-areas { flex-wrap: nowrap; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .ir-areas::-webkit-scrollbar { display: none; }
  .ir-areas button { flex: none; min-height: 34px; padding: 0 10px; }
  .ir-areas .ir-a-ic { display: none; }
  .ir-sort { flex: none; } .ir-sort > span { display: none; } .ir-sort select { min-height: 34px; padding: 0 6px; font-size: 12px; }
}
.ir-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #56627A; }
.ir-sort select { min-height: 36px; padding: 0 10px; border: 1px solid #E4E7EF; border-radius: 10px; background: #fff; color: #18213A; font: 600 13px Inter, sans-serif; }
.ir-row .ir-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.ir-area { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }   /* 아이콘만(2026-10-04) */
.ir-area .hm-svg { width: 16px; height: 16px; }
.ir-area.is-reading { background: #EEF2FF; color: #3730A3; }
.ir-area.is-listening { background: #ECFDF5; color: #065F46; }
.ir-area.is-writing { background: #FFF7ED; color: #9A3412; }
.ir-area.is-speaking { background: #FDF2F8; color: #9D174D; }
.ir-lv { padding: 0 6px; border: 1px solid #E4E7EF; border-radius: 6px; font-size: 11px; color: #56627A; }
/* Past sets 줄의 「Gaze replay」(2026-10-06) — 그 판 리포트의 Gaze Path 로 곧장 */
/* 친구 챌린지로 낸 판(2026-10-11, challenge.js challengeRunTagHtml) — 그 챌린지 화면으로 */
.ir-ch, .ir-gz { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid rgba(96, 18, 243, .25); border-radius: 999px; background: #F3EEFF; color: #6012F3; font: 600 11px Inter, sans-serif; white-space: nowrap; cursor: pointer; }
.ir-ch .hm-svg, .ir-gz .hm-svg { width: 13px; height: 13px; }
.ir-ch:hover, .ir-gz:hover { background: #E9DEFF; }
.ir-line .ir-row .ir-name .ir-gz, .ir-line .ir-row .ir-name .ir-ch { grid-column: 2; justify-self: start; }
/* Gaze replay 로 열면 이 칸으로 내려간다 — 맨 위 줄(.rt-tb, sticky)에 가리지 않게 */
.rp-gp { scroll-margin-top: 76px; }
.ir-note { margin: 0 0 8px; font-size: 13px; color: #56627A; }
.ir-essay .ui-dlg-box { width: min(620px, 100%); max-height: 86vh; overflow-y: auto; }
.ir-essay-meta { margin: 0 0 10px; font-size: 13px; color: #56627A; }
.ir-essay-text p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: #18213A; }

/* 지도 장면(expedition-ui.js _expWalk, 2026-10-03) — +N 떠오름 · 하루 점 톡 · 막대 차오름 */
.exp-stat { position: relative; }
.exp-plus { position: absolute; right: 0; top: -6px; padding: 2px 8px; border-radius: 999px; background: #F3EEFF; color: #6012F3; font: 700 13px Inter, sans-serif;
  animation: expPlus 2.2s ease-out forwards; pointer-events: none; }
@keyframes expPlus { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 15% { opacity: 1; transform: translateY(0) scale(1.08); } 70% { opacity: 1; transform: translateY(-14px) scale(1); } 100% { opacity: 0; transform: translateY(-26px); } }
.exp-dot.is-pop { animation: expPop .45s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes expPop { 0% { transform: scale(1); } 45% { transform: scale(1.8); } 100% { transform: scale(1); } }
.exp-bar i { transition: width .12s linear; }
@media (prefers-reduced-motion: reduce) { .exp-plus, .exp-dot.is-pop { animation: none; } }

/* 숫자판(odometer.js, 2026-10-03) — 자리마다 0~9 띠, 한 칸 창. 칸 높이 1.2em(글자 위아래가 잘리지 않게), 글줄 아래에 맞춤 */
.rt-odo { font-variant-numeric: tabular-nums; }
/* 숫자판 칸은 둘레 글자를 그대로 — 지도의 .exp-stat span(이름표 13px · 회색)이 띠에 걸려 도는 동안만 작고 흐렸다(사용자 2026-10-03) */
.rt-odo span, .exp-stat .rt-odo span { font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: inherit; }
.odo-in { display: inline-flex; vertical-align: text-bottom; height: 1.2em; line-height: 1.2em; }
.odo-d, .odo-sep { display: inline-block; height: 1.2em; line-height: 1.2em; }
.odo-d { overflow: hidden; }
.odo-strip { display: flex; flex-direction: column; will-change: transform; }
.odo-strip > span { display: block; height: 1.2em; line-height: 1.2em; text-align: center; }
.odo-strip.is-spin { filter: blur(.5px); }
.odo-d.is-stop .odo-strip { animation: odoTick .26s ease-out; }
@keyframes odoTick { 0% { margin-top: -.12em; } 60% { margin-top: .06em; } 100% { margin-top: 0; } }
.rt-odo.odo-pop { display: inline-block; animation: odoPop .36s ease-out; }
@keyframes odoPop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .odo-strip, .rt-odo.odo-pop, .odo-d.is-stop .odo-strip { animation: none; transition: none !important; } }

/* 고치기 더 풀기(ielts-fixq.js ieltsFixMoreHtml, 2026-10-03) — 홈 칸 아래 · 세션 끝 · Report */
.if-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 0; }
.if-more span { font-size: 13px; color: #56627A; }
.if-end .ui-dlg-box .if-more { margin: 4px 0 8px; }

/* 빈칸 문항 — 다시 답하기 전에는 칠한 근거 안의 정답 낱말을 흐리게(ielts-xray.js, 2026-10-03) */
mark.xr-mask { background: #fff1c2; color: inherit; filter: blur(5px); user-select: none; border-radius: 3px; }

/* 홈의 작은 기술 그림(ielts-skill.js ieltsSkillHomeHtml, 2026-10-03) */
.sk-home { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
  background: #fff; font: inherit; text-align: left; cursor: pointer; color: var(--text-primary); }
.sk-home:hover { border-color: var(--accent); }
.sk-mini { width: 52px; height: 52px; flex: none; overflow: visible; }
.sk-mini .rp-mine { stroke-width: 3; }
.sk-mini .rp-tgt { stroke-width: 1.4; stroke-dasharray: 4 3; }
.sk-home-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sk-home-t b { font-size: var(--t3); }
.sk-home-t small { font-size: 13px; color: var(--text-dim); }
/* 홈 Your progress 안에서는 공통 줄과 같은 모양 · 높이(2026-10-04) */
.hm .sk-home { min-height: 62px; box-sizing: border-box; margin: 0 0 8px; padding: 10px 14px; border: 0; background: var(--bg-primary); }
.hm .sk-home .sk-mini { width: 36px; height: 36px; }
.hm .sk-home-t b, .hm .sk-home-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 문항별 시선경로 그림(ielts-xray.js ieltsXrayPathSvg, 2026-10-04) — 문단 열 · 문항 · 차례 선 */
.xr-path { flex-direction: column; align-items: stretch; }
.xr-path > span { color: var(--text-dim); font-size: 13px; }
.xp-svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 6px 0 2px; overflow: visible; }
.xp-name { font: 600 11px Inter, sans-serif; fill: #8a8fa3; }
.xp-name.is-ev { fill: #15803d; }
.xp-row { fill: #f3f4f8; stroke: #e2e5ee; stroke-width: 1; }
.xp-row.is-ev { fill: #e6f6ec; stroke: #86c99c; }
.xp-row.is-miss { stroke: #15803d; stroke-dasharray: 4 3; stroke-width: 1.4; }
.xp-bar { fill: #b9a5f7; }
.xp-bar.is-ev { fill: #15803d; }
.xp-miss { font: 600 11px Inter, sans-serif; fill: #15803d; }
.xp-line { fill: none; stroke: #6012F3; stroke-opacity: .38; stroke-linecap: round; }
.xp-line.is-ev { stroke: #15803d; stroke-opacity: .6; }
.xp-num circle { fill: #fff; stroke: #6012F3; stroke-width: 1.3; }
.xp-num text { font: 700 9px Inter, sans-serif; fill: #6012F3; }
.xp-q { fill: #07015A; }
.xp-qt { font: 700 11px Inter, sans-serif; fill: #fff; }
.xp-again { font: 700 10px Inter, sans-serif; fill: #6012F3; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }

/* 지문 줄 표시(ielts-xray.js _xrLinesPaint, 2026-10-04) — 문단 안에 글자 뒤로 겹쳐 놓는다. 칠하지 않은 줄 = 안 본 줄 */
.passage-para.xr-lines-host { position: relative; z-index: 0; }
.xr-lines { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.xr-ln { position: absolute; border-radius: 6px; }
/* 시선 줄 — 녹색 진하기 세 단계(2026-10-05 사용자 「훑음은 연한 녹색 · 밑줄 긋지 마라」): 훑음 가장 연함 → 읽음 → 다시 읽음 가장 진함 */
.xr-ln.is-read, .xr-lnk-read::before { background: rgba(21, 128, 61, .17); }
.xr-ln.is-again, .xr-lnk-again::before { background: rgba(21, 128, 61, .34); }
.xr-ln.is-skim, .xr-lnk-skim::before { background: rgba(21, 128, 61, .07); }
.xr-lnk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; font-size: 13px; color: var(--text-dim); }
.xr-lnk b { color: var(--text-primary); font-weight: 600; margin-right: 4px; }
.xr-lnk span { display: inline-flex; align-items: center; gap: 5px; }
.xr-lnk span::before { content: ''; width: 18px; height: 10px; border-radius: 3px; }

/* 선지별 시선경로(ielts-xray.js _xrPathBlock, 2026-10-04) — 토글 · 선지 칸 · 선지마다 색 */

/* Question by question 표(ielts-report.js ieltsQTableHtml, 2026-10-05) — 틀린 문항 줄 아래 시선 경로 그림 줄을 펼친 채로 */
.rp .qt-card { margin: 14px 0; }
.qt-table { width: 100%; }
/* 표 맨 위 요약 한 줄(2026-10-05) — 맞힌 수 · 정답률 · 전체 시간 · 문항당 평균 · 근거 확인 */
.qt-sum { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.qt-sum span { padding: 4px 10px; border-radius: 999px; background: var(--bg-secondary); font-size: 13px; font-weight: 600; color: var(--text-primary); }
.qt-table td, .qt-table th { vertical-align: middle; }
.qt-row { cursor: pointer; }
.qt-skill { display: inline-block; min-width: 34px; padding: 1px 6px; border-radius: 6px; background: rgba(96, 18, 243, .08); color: var(--accent); font: 700 12px Inter, sans-serif; text-align: center; }
.qt-time { font-variant-numeric: tabular-nums; }
.qt-ev { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; }
.qt-ev.is-back { color: var(--success); }
.qt-ev.is-noback { color: var(--text-dim); border-style: dashed; }
.qt-path > td { padding: 0 8px 14px !important; background: var(--bg-primary); cursor: default; }
.qt-path-h { padding: 10px 2px 6px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.qt-path-h span { flex-basis: 100%; font-size: 12px; color: var(--text-dim); }
.qt-path-b { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.qt-pic { flex: 1 1 320px; min-width: 0; max-width: 460px; }
.qt-skill { min-width: 0; text-align: left; line-height: 1.3; }   /* 전체 이름(2026-10-05) — 길면 두 줄 */
/* Your path on the questions you missed — 펼친 채로(ielts-report.js ieltsMissedPathsHtml, 2026-10-05) */
.rp .mp-card { margin: 14px 0; }
/* 넓은 화면 한 줄에 둘(2026-10-05), 폰은 처음 셋만 + Show N more */
.mp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mp-item { min-width: 0; padding: 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-primary); }
.mp-item .qt-path-b { flex-direction: column; }
.mp-item .qt-pic { flex: none; max-width: none; width: 100%; }
.mp-more { display: none; margin-top: 10px; }
@media screen and (max-width: 700px) { .mp-grid { grid-template-columns: minmax(0, 1fr); } }
@media screen and (max-width: 560px) {
  .mp-card:not(.is-all) .mp-item.is-extra { display: none; }
  .mp-card:not(.is-all) .mp-more { display: block; width: 100%; }
}
.mp-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.mp-h span { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.ir-paths:empty { display: none; }
/* 숫자 칸 아래 Evidence check(2026-10-05) — 반 폭이라 행 머리(Right · Wrong)를 빼고 두 칸씩 */
.rp-col .rq-ev { margin: 0; }
.rp-col .rq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rp-col .rq-grid > span:first-child, .rp-col .rq-rowh { display: none; }
@media screen and (max-width: 560px) {
  .qt-table thead { display: none; }
  .qt-table, .qt-table tbody { display: block; }
  /* 위 줄 = 번호 · 정오 · 내 답 → 정답, 아래 줄 = 스킬 · 시간 · 근거(답과 같은 줄 왼쪽 끝에 맞춤, 2026-10-05) */
  .qt-row { display: grid; grid-template-columns: 30px 18px auto minmax(0, 1fr) auto; grid-template-areas: "n mark mine right time" ". . sk sk ev"; gap: 4px 6px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--border-soft); }
  .qt-row .qt-right { justify-self: start; } .qt-row .qt-time { justify-self: end; } .qt-row .qt-evc { justify-self: end; }
  .qt-row .qt-skill { white-space: nowrap; }   /* 스킬 이름 한 줄(아래 줄을 넓게 쓴다) */
  .qt-row td { padding: 0 !important; border: 0 !important; }
  .qt-n { grid-area: n; font-weight: 700; } .qt-n::before { content: 'Q'; }
  .qt-mark { grid-area: mark; } .qt-sk { grid-area: sk; } .qt-time { grid-area: time; } .qt-evc { grid-area: ev; }
  .qt-mine { grid-area: mine; } .qt-right { grid-area: right; } .qt-right::before { content: '→ '; color: var(--text-dim); }
  .qt-path { display: block; } .qt-path > td { display: block; padding: 0 6px 12px !important; }
}
/* 지난 판 — 틀린 문항의 시선경로(ielts-runs.js _irPathsFill, 2026-10-04) — 표 안 그림 줄로 옮김(2026-10-05), 옛 접힘 카드(ieltsRunPathsHtml)는 2026-10-22 걷음 */
.ir-paths { margin: 18px 0 6px; }
.ir-paths > h2 { font-size: var(--t2); margin: 0 0 8px; }   /* 칸 제목 T2(S9) — 안의 새 칸 머리를 덮지 않게 > 로만 */

/* 리포트 인쇄(2026-10-05 사용자 「print 가 모니터와 많이 다르다」, 추천대로) — 파일 맨 끝에 두어 앞의 인쇄 · 화면 규칙을 이긴다.
   ① 모니터 배치를 그대로 쪽 폭에 맞춰 줄인다: 고정 폭 880px 로 그린 뒤 쓸 수 있는 폭에 맞춘 배율(아래 단계) — 전에는 폭만 풀어
      두 칸 줄이 반 폭씩 남아 Evidence check 네 칸이 낱말 한두 개 폭으로 찌그러졌다
   ② 종이에 필요 없는 단추를 뺀다(Review · 연습 단추 · Show N more · 아래 단추 줄), 폰의 「셋만」 규칙에 숨은 경로 그림은 모두 편다
   ③ 쪽 나눔 — 한 쪽보다 작은 덩어리만 칸 안에서 나누지 않고, 큰 칸(Your path · 표 · What to do next)은 줄 사이에서 나눈다. 칸 머리는 내용과 붙임
   ④ 접힌 More details 는 화면처럼 빼고, 펼쳐 두었으면 찍는다 */
@media print {
  body.rp-printing #ieltsScreen .ie-app.rp-wide { width: 880px !important; max-width: none !important; padding: 0 !important; margin: 0 auto !important; zoom: 0.6; }
  body.rp-printing .rp-tools, body.rp-printing .rq-go:not(.wn-act .rq-go), body.rp-printing .mp-h .ie-btn, body.rp-printing .mp-more,
  body.rp-printing .ie-res-btns, body.rp-printing .rp-gp-ctl, body.rp-printing .rp-save { display: none !important; }
  body.rp-printing .mp-item.is-extra { display: block !important; }
  body.rp-printing .rp-card { break-inside: auto; page-break-inside: auto; }
  body.rp-printing .rp-card.rp-path, body.rp-printing .rp-card.rp-gp, body.rp-printing .rp-card.rq-ev, body.rp-printing .rp-card.rq-pat, body.rp-printing .rp-tiles,
  body.rp-printing .mp-item, body.rp-printing .qt-row, body.rp-printing .wn-row, body.rp-printing .wn-kit, body.rp-printing .gap-top { break-inside: avoid; page-break-inside: avoid; }
  body.rp-printing .rp-card-h, body.rp-printing .wn-focus, body.rp-printing .qt-sum { break-after: avoid; page-break-after: avoid; }
  body.rp-printing .qt-table thead, body.rp-printing .wn-table thead { display: table-header-group; }
  body.rp-printing details.rp-more:not([open]) { display: none !important; }
  body.rp-printing .wn-kit-grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }   /* 학습 방법 카드 한 줄(모니터처럼) */
  body.rp-printing .rt-tb { display: none !important; }
  body.rp-printing .wn-act .ie-btn { display: inline !important; padding: 0 !important; min-height: 0 !important; border: 0 !important; background: none !important; color: var(--accent) !important; box-shadow: none !important; }   /* Action items 는 종이에도 글자로 */   /* 종이에는 앱 맨 위 줄 대신 리포트 머리의 로고 줄 */
}
/* 폰에서는 Print 를 숨긴다(2026-10-05 — 제목 위 한 줄을 통째로 차지했다, 폰 인쇄는 드물다). 진단 판의 Share 는 남긴다 */
@media screen and (max-width: 560px) { .rp-tools .rp-print:not(.rp-share) { display: none; } .rp-tools:not(:has(.rp-share)) { display: none; } }
/* 리포트 화면 — 맨 위 줄(로고 · 시험)이 있으니 리포트 머리의 로고 줄은 화면에서만 숨긴다(인쇄에는 남는다, 2026-10-05) */
@media screen { .ie-app.rp-wide > .rt-tb ~ .rp .rp-brand { display: none; } }
/* 배율은 그 용지 · 여백에서 쓸 수 있는 폭에 맞춘다(2026-10-05 — 고정 0.716 은 여백 「최소」 · Letter 에서 오른쪽이 비었다).
   인쇄 때 width = 쪽에서 쓸 수 있는 폭이라, 20px 단위로 「880px × 배율 ≤ 그 폭」인 가장 큰 배율 */
@media print and (min-width: 540px) { body.rp-printing #ieltsScreen .ie-app.rp-wide { zoom: 0.614; } }
@media print and (min-width: 560px) { body.rp-printing #ieltsScreen .ie-app.rp-wide { zoom: 0.636; } }
@media print and (min-width: 580px) { body.rp-printing #ieltsScreen .ie-app.rp-wide { zoom: 0.659; } }
@media print and (min-width: 600px) { body.rp-printing #ieltsScreen .ie-app.rp-wide { zoom: 0.682; } }
@media print and (min-width: 620px) { body.rp-printing #ieltsScreen .ie-app.rp-wide { zoom: 0.705; } }
@media print and (min-width: 640px) { body.rp-printing #ieltsScreen .ie-app.rp-wide { zoom: 0.727; } }
@media print and (min-width: 660px) { body.rp-printing #ieltsScreen .ie-app.rp-wide { zoom: 0.75; } }
@media print and (min-width: 680px) { body.rp-printing #ieltsScreen .ie-app.rp-wide { zoom: 0.773; } }
/* 여백(2026-10-05 사용자 「PDF 여백이 너무 없다」) — 리포트 폭 상한 = A4 에서 좌우 14mm 를 뺀 폭(약 688px). 인쇄 창 여백을 「최소」 · 「없음」으로
   골라 쓸 수 있는 폭이 넓어져도 더 늘리지 않고 가운데에 둬 좌우 14mm 이상이 남는다(@page 여백은 「기본값」일 때만 쓰인다).
   위아래는 쪽마다 브라우저가 정해 CSS 로 강제할 수 없어, 첫 쪽 위 · 마지막 쪽 아래에만 8mm */
@media print and (min-width: 688px) { body.rp-printing #ieltsScreen .ie-app.rp-wide { zoom: 0.782; } }
@media print { body.rp-printing #ieltsScreen .ie-app.rp-wide { padding-top: 8mm !important; padding-bottom: 8mm !important; } }

/* ═══ IELTS Full mock test(js/ielts-fullmock.js, 2026-10-07) — 시작 · 사이 · 결과 화면. 새 클래스(fm-*)에만 ═══ */
.fm-secs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fm-sec { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; background: var(--bg-elevated); border-radius: var(--radius); padding: 12px 16px; }
.fm-sec > b { font-size: var(--t3); }
.fm-sec > span { grid-column: 1; font-size: 13px; color: var(--text-dim); }
.fm-sec > em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.fm-sec.is-done > em { color: var(--success); }
.fm-rule, .fm-line { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.fm-h { margin: 8px 0 0; font-size: var(--t2); }
.fm-h3 { margin: 12px 0 6px; font-size: var(--t3); }
.fm-overall .ie-tile { border: 2px solid var(--accent); }
.fm-det > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; }
.fm-det-b { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.fm-det[open] > summary { margin-bottom: 10px; }
.fm-crit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fm-crit-h { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.fm-crit-h > span { font-weight: 700; font-variant-numeric: tabular-nums; }
.fm-crit .wf-quote { margin: 4px 0; }
.fm-why { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
@media (max-width: 600px) { .fm-tiles { grid-template-columns: repeat(2, 1fr); } }
/* mock 리포트(js/ielts-fullmock.js ieltsFullShowResult, 2026-10-07) — 총괄 · Reading 지문 셋. 새 클래스(fm-rp · fm-* 아래)에만 */
.fm-sub { margin: -4px 0 0; font-size: 13px; color: var(--text-dim); }
.fm-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fm-facts li { display: grid; grid-template-columns: 84px 1fr; gap: 10px; font-size: 14px; line-height: 1.45; }
.fm-facts li > b { color: var(--text-dim); font-weight: 600; }
.fm-marks .ie-rtable td:not(:first-child), .fm-marks .ie-rtable th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.fm-fast p { margin: 0 0 8px; font-size: 14px; }
.fm-fast .fm-or > b { font-weight: 600; }
.fm-todo-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fm-todo-l > li { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: start; }
.fm-todo-w { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.fm-todo-l p { margin: 0 0 6px; font-size: 14px; line-height: 1.45; }
.fm-todo-l .ie-res-btns { margin: 0; justify-content: flex-start; }
.fm-todo .fm-line { margin: 10px 0 0; }
.fm-fix { margin: 10px 0; }
.fm-fix h4 { margin: 0 0 6px; font-size: var(--fs-label); font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .12em; }
.fm-fix p { margin: 0 0 6px; font-size: 14px; line-height: 1.45; }
.fm-fix .ie-res-btns { margin: 6px 0 0; justify-content: flex-start; }
.dr-card > .ls-fix { margin: 0; padding: 0; background: none; border-radius: 0; }   /* 듣기 결과의 고칠 것 하나 — 카드 안에서는 상자 한 겹을 걷음(2026-10-19) */
.fm-sec-rp { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px solid var(--border-soft); }
.fm-rp-h { display: flex; align-items: baseline; gap: 10px; }
.fm-rp-h h2 { margin: 0; font-size: var(--t2); }
.fm-rp-h b { margin-left: auto; font-size: var(--n2); font-variant-numeric: tabular-nums; }
.fm-rp-h span { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.fm-tbs { display: flex; flex-direction: column; gap: 6px; }
.fm-tb { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; font-size: 13px; }
.fm-tb-l { font-weight: 700; }
.fm-tb-bar { position: relative; height: 10px; border-radius: 5px; background: var(--bg-secondary); }
.fm-tb-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--accent); }
.fm-tb.is-over .fm-tb-bar > i { background: var(--warning); }
.fm-tb-bar > em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-faint); }
.fm-tb-v { font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; }
.fm-seen { background: var(--accent-soft); border-radius: var(--radius); padding: 10px 12px; }
.fm-seen h4 { margin: 0 0 4px; font-size: var(--t3); }
.fm-seen p { margin: 0; font-size: 14px; line-height: 1.45; }
.fm-pc > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; }
.fm-pc[open] > summary { margin-bottom: 10px; }
.fm-pc-b { display: flex; flex-direction: column; gap: 10px; }
.fm-pc-b h4 { margin: 4px 0 0; font-size: var(--t3); }
.fm-miss { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fm-miss li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.fm-miss li > span { color: var(--text-dim); }
.fm-miss li > .ie-btn { margin-left: auto; padding: 6px 12px; font-size: 13px; }
/* mock 리포트 2단계 — Listening 파트 띠 · 틀린 문항의 관측치 · Writing 과제 줄 · 쓴 글 */
.fm-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fm-strip > div { background: var(--bg-elevated); border-radius: var(--radius); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.fm-strip span { font-size: 12px; color: var(--text-dim); }
.fm-strip b { font-size: 16px; font-variant-numeric: tabular-nums; }
.fm-miss li > small { flex-basis: 100%; font-size: 12px; color: var(--text-faint); }
.fm-pc > summary > small { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.fm-essay > summary { cursor: pointer; font-size: 14px; color: var(--accent); }
.fm-essay p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; white-space: normal; }
@media (max-width: 600px) { .fm-facts li { grid-template-columns: 1fr; gap: 0; } }
/* mock 리포트 3단계 — 머리 줄의 인쇄 · 공유(연습 리포트와 같은 단추 .rp-print) */
.fm-rp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fm-rp-top .fm-sub { margin: 0; }
.fm-rp-top .rp-tools { position: static; display: flex; gap: 8px; }

/* 결제 — Upgrade 창(js/billing.js, 2026-10-08 Paddle 기간권). 대화 상자(.ui-dlg)와 같은 층 · 같은 상자 */
.rt-up { position: fixed; inset: 0; z-index: 25000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(15, 17, 25, .45); }
.rt-up-box { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box;
  padding: 24px 20px 18px; border-radius: 16px; background: var(--bg-elevated); color: var(--text-primary);
  box-shadow: 0 18px 48px rgba(15, 17, 25, .28); font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.rt-up-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 24px; line-height: 1;
  color: var(--text-dim); cursor: pointer; padding: 4px 8px; }
.rt-up-head { margin: 0 0 8px; font-size: var(--t2); }
.rt-up-reason { margin: 0 0 10px; font-size: 14px; color: var(--text-dim); }
.rt-up-list { margin: 0 0 16px; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.rt-up-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; min-height: 40px; }
.rt-up-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 12px; border-radius: 12px;
  border: 1px solid var(--border-mid); }
.rt-up-card.is-best { border: 2px solid var(--accent); }
.rt-up-badge { position: absolute; top: -10px; left: 12px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 11px; font-style: normal; font-weight: 600; }
.rt-up-price { font-size: 20px; font-weight: 700; min-height: 26px; }
.rt-up-buy { margin-top: 4px; padding: 10px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
.rt-up-buy:hover:not(:disabled) { background: var(--accent-hover); }
.rt-up-buy:disabled { opacity: .5; cursor: default; }
.rt-up-note { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.rt-up-note .rt-account-btn { margin-left: 6px; }

/* ══ 메뉴 화면 머리 줄 — 화면 표준 S8(docs/design/EyeLearn_App_Screen_Standard.md, 2026-10-14 사용자 「추천대로」) ══
   Home · Exams · Challenge · Report · Settings 가 같은 줄: 왼쪽 제목(28 · 폰 24, 노트북은 확대로 32) · 오른쪽 그 화면의 행동 하나(있을 때만).
   아래 메뉴로 오가는 맨 위 화면이라 「‹」 · 「×」 는 두지 않는다(Exams 는 10-03 부터 숨겨 왔다 — 그 규칙을 다섯으로 넓힘) */
#ieltsScreen .rt-mh, #settingsScreen .rt-mh { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-height: 52px; margin: 6px 0 14px; }
#ieltsScreen .rt-mh .rt-mh-t, #settingsScreen .rt-mh .rt-mh-t { margin: 0; font: 700 var(--t1)/1.2 Inter, sans-serif; letter-spacing: -.01em; color: var(--navy); }
#ieltsScreen .ie-top-list.rt-mh .ie-title { font: 700 var(--t1)/1.2 Inter, sans-serif; letter-spacing: -.01em; }   /* Exams — 제목 칸 안의 칩 · 문항 수는 제 크기 그대로 */
/* 글자 단계 폰 값(S9) — 토큰만 바꿉니다. 화면마다 폰 제목 크기를 따로 적지 않습니다 */
@media screen and (max-width: 600px) { :root { --t1: 24px; --n1: 24px; } }
/* ══ Review 패널 다시 짬(2026-10-16 사용자 Review 피드백) — 요약 한 줄 · 경로 범례 · 짝 표 · Next action · 폰 칩 · ‹ Results ══ */
.xr-path-sum { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.xp-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: #56627A; }
.xp-k { display: inline-flex; align-items: center; gap: 5px; }
.xp-k-ev::before, .xp-k-other::before { content: ''; width: 14px; height: 9px; border-radius: 2px; }
.xp-k-ev::before { background: #15803d; }
.xp-k-other::before { background: #b9a5f7; }
.xr-pairs { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 1.45; background: #fff; border-radius: 10px; overflow: hidden; }
.xr-pairs th { text-align: left; font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #56627A; background: #E6E8F0; padding: 6px 10px; }
.xr-pairs td { vertical-align: top; padding: 8px 10px; border-top: 1px solid #E6E8F0; color: var(--text-primary); overflow-wrap: anywhere; }
.xr-pairs td + td, .xr-pairs th + th { border-left: 1px solid #E6E8F0; }
.xr-pairs b { font-weight: 700; color: #07015A; }
/* Next actions recommended — 계획에 든 것 한 줄씩, 단추 없음(2026-10-16) */
.xr-next-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.xr-next-list .xr-link { margin-left: 4px; font-size: 13px; }
/* 맞은 문항 패널(Why it's right) — 같은 꼴, 머리 띠와 왼쪽 줄만 녹색 */
.ie-xr.is-right .xr-panel { border-left-color: #15803d; }
.ie-xr.is-right .xr-band { background: #14532d; }
.xr-drop { margin-left: 6px; font-size: 13px; }
.fd-after { margin: 4px 0 0; font-size: 14px; color: var(--text-dim); }
/* 폰 Passage 탭 — 아래 칸 맨 위에 흐름으로 끼우는 칩(탭 줄을 덮지 않음) */
.xr-backchip { flex: none; align-self: center; margin: 6px 0 4px; padding: 7px 14px; border: 0; border-radius: 999px; background: #07015A; color: #fff;
  font: 700 14px Inter, sans-serif; box-shadow: 0 4px 12px rgba(7, 1, 90, .22); cursor: pointer; }
.xr-backchip:focus-visible { outline: 3px solid #6012F3; outline-offset: 2px; }
/* 채점 뒤 문항 칸 머리의 「‹ Results」 — 그만두기 자리 */
.ie-quit.ie-toresults { color: #6012F3; font-weight: 700; }
/* 낱말 뜻(Review 에서만, ielts-wordtap.js) — 뜻이 있는 낱말은 점선 밑줄(글자 자리는 그대로 — Highlight API) */
::highlight(rt-def) { text-decoration: underline dotted rgba(96, 18, 243, .55); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.wt-pop { position: fixed; z-index: 9500; max-width: min(320px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 14px; background: #fff;
  border: 1px solid rgba(96, 18, 243, .22); box-shadow: 0 10px 28px rgba(7, 1, 90, .18); font-size: 14px; line-height: 1.45; color: var(--text-primary); }
.wt-pop .wt-w { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: #07015A; }
.wt-pop .wt-d { margin: 6px 0 10px; }
.wt-pop .wt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wt-pop .wt-in { color: #15803d; font-weight: 700; font-size: 13px; }
.wt-pop .wr-spk { border: 0; background: none; font-size: 16px; cursor: pointer; padding: 0; }
/* 견주기 표(2026-10-16) — 내 값 · 다른 사람들 평균 */
.xr-cmp { width: 100%; border-collapse: collapse; font-size: 13.5px; background: #fff; border-radius: 10px; overflow: hidden; }
.xr-cmp th, .xr-cmp td { padding: 6px 10px; text-align: left; border-top: 1px solid #E6E8F0; }
.xr-cmp thead th { border-top: 0; background: #E6E8F0; font-size: var(--fs-label); font-weight: 600; color: #56627A; }
.xr-cmp tbody th { font-weight: 600; color: #18213A; }
.xr-cmp td { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.xr-cmp-line { margin: 0; font-size: 13.5px; color: #56627A; }

/* Review — Show the answer 뒤에 붙는 근거 글 범례(ielts-xray.js, 2026-10-16) */
.xr-sub > .xr-after-key { margin-top: 2px; }
/* 듣기 Review 「Play this part」 — 근거 칸의 주 행동이라 눈에 띄게(2026-10-16 사용자 「좀 더 강조해서」). 다음 화면으로 넘기는 단추가 아니라 그 자리 재생 */
.xr-playbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px 8px 8px; border: 1.5px solid #6012F3; border-radius: 999px;
  background: #fff; color: #6012F3; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.xr-playbtn:hover { background: #F3EEFF; }
.xr-playbtn:focus-visible { outline: 2px solid #6012F3; outline-offset: 2px; }
/* 다시 듣기 Pause(Resume) · Stop — Play 옆 작은 테두리 단추, 재생 중이 아니면 흐리게(2026-10-16) */
.xr-lsbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 1px solid #c9bdf5; border-radius: 999px;
  background: #fff; color: #07015A; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.xr-lsbtn span { font-size: 11px; color: #6012F3; }
.xr-lsbtn:hover:not(:disabled) { background: #F3EEFF; }
.xr-lsbtn:disabled { opacity: .45; cursor: default; }
.xr-lsctl[data-st="play"] .xr-playbtn, .xr-lsctl[data-st="pause"] .xr-playbtn { background: #F3EEFF; }
.xr-playbtn-i { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #6012F3; color: #fff; font-size: 11px; padding-left: 2px; }

/* ── 홈 다시 짬(2026-10-16, home-stand.js) — 오늘 칸 · Where you stand · Pick up · 문 셋 · Exams 거르기 · 틀린 문항 ── */
.hm-a-plan { display: flex; flex-direction: column; gap: 16px; }
.hm-today .hm-left { margin: 4px 0 10px; font-size: 14px; color: var(--text-dim, #56627A); }
.hs-card .hs-lead, .hs-card .hs-rest { margin: 6px 0 10px; font-size: 14px; color: var(--text-dim, #56627A); line-height: 1.5; }
.hs-ax { padding: 10px 0; border-top: 1px solid var(--border-soft, #E6E8F0); }
.hs-ax:first-of-type { border-top: 0; }
.hs-ax-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hs-ax-t b { font-size: 15px; color: var(--text-primary); }
.hs-ax-t > span { font-size: 14px; color: var(--text-dim, #56627A); }
.hs-doors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hs-door { min-height: 36px; padding: 6px 14px; border: 1px solid #c9bdf5; border-radius: 999px; background: #fff; color: #4B0FCB; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.hs-door:hover { background: #F3EEFF; }
.hs-doors.is-review { margin-top: 4px; }
.sk-detail .hs-doors { margin-top: 0; }
.ie-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.ie-fchip { min-height: 34px; padding: 5px 14px; border: 1px solid var(--border-mid, #d0d5e2); border-radius: 999px; background: var(--bg-elevated, #fff); color: var(--text-primary); font: inherit; font-size: 14px; cursor: pointer; }
.ie-fchip.is-on { border-color: #6012F3; background: #F3EEFF; color: #4B0FCB; font-weight: 700; }
.ie-fchip small { color: var(--text-dim, #56627A); font-weight: 400; margin-left: 2px; }
.hs-misscard { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; cursor: pointer; margin-bottom: 16px; font: inherit; }
.hs-misscard span:first-child { display: flex; flex-direction: column; gap: 2px; }
.hs-misscard b { font-size: 16px; color: var(--text-primary); }
.hs-misscard small { font-size: 14px; color: var(--text-dim, #56627A); }
/* 틀린 문항 목록(2026-10-18 표준 S4 · S9 — History 목록과 같은 흰 카드, 줄 이름 T3 16 · 보조 본문 14, 끊는 폭 600) */
.hs-miss-list { display: flex; flex-direction: column; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 16px; overflow: hidden; }
.hs-miss { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft, #E6E8F0); }
.hs-miss:last-child { border-bottom: 0; }
.hs-miss-d { flex: none; width: 60px; font-size: 14px; color: var(--text-dim, #56627A); }
.hs-miss-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hs-miss-n b { font-size: 16px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-miss-n small { font-size: 14px; color: var(--text-dim, #56627A); }
@media (max-width: 600px) { .hs-miss { padding: 12px; } .hs-miss-d { width: 48px; } .hs-miss .ie-btn { padding: 8px 12px; } }
/* 축 한 줄 설명 · Review 「Want more practice?」 첫 줄(2026-10-16) */
.hs-ax-what { margin: 2px 0 0; font-size: 13px; color: var(--text-dim, #56627A); }
.xr-next-what { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.hs-door { text-align: left; }
/* Challenge 로비 탭 Live now | Past(2026-10-16) */
.cht-tabs { display: inline-flex; gap: 4px; margin: 0; }
.cht-tab { border: 0; background: none; padding: 4px 10px; border-radius: 999px; font: inherit; font-size: inherit; font-weight: 700; color: var(--text-dim, #56627A); cursor: pointer; }
.cht-tab.is-on { background: #F3EEFF; color: #4B0FCB; }
.cht-card.is-ended .cht-left { color: var(--text-dim, #56627A); }

/* ═══ Exams 이름표 줄(js/ielts.js _ieRenderList, 2026-10-17) — 영역을 고르면 그 영역에서 바꿀 것이 곧바로 이름표 붙은 줄로 보인다.
   옛 방법 줄(.ie-modes) · 기술 카드(.ie-drills) · 칩 줄(.ie-tabs) · 제목 줄 규칙은 다른 화면이 쓸 수 있어 그대로 두고, 여기 새 이름으로 더하기만 한다 ═══ */
.iem-sk { display: inline-flex; align-items: center; gap: 6px; }
.iem-skills .iem-ic { display: inline-flex; color: inherit; }   /* 노트북도 아이콘 + 이름(2026-10-17 사용자 「가독성」) — 폰은 켜진 칸만 이름, Mock · Words 는 글자만(아래 600px) */
.iem-ic .hm-svg { width: 18px; height: 18px; }
.iem-opts { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 14px; }
.iem-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; min-height: 34px; }
.iem-chips { gap: 8px; }
.iem-grp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.iem-lab { flex: 0 0 auto; align-self: flex-start; min-width: 84px; font: 600 12px/34px Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.iem-seg { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.iem-short { display: none; }
.iem-qc { margin-left: auto; }
.iem-note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-dim); }
.iem-sub { gap: 8px 16px; }
.iem-sub .ie-pace-ctl, .iem-sub .ie-guide { margin: 0; }
/* 폰 — 영역 줄은 한 줄(켜진 칸만 아이콘 + 이름, 나머지는 아이콘만 · 이름은 aria-label · title), 이름표는 MODE 만 글자로 */
@media screen and (max-width: 600px) {
  .ie-skills.iem-skills, .ie-skills.iem-skills.has-full { flex-wrap: nowrap; gap: 2px; overflow-x: hidden; }
  .ie-skills.iem-skills .ie-skill.iem-sk, .ie-skills.iem-skills.has-full .ie-skill.iem-sk:not(.ie-skill-full):not(.ie-skill-words) { flex: 0 0 auto; padding: 10px 9px; box-shadow: none; }
  .ie-skills.iem-skills .ie-skill-words, .ie-skills.iem-skills .ie-skill-full { margin-left: 4px; padding-left: 13px; }
  .ie-skills.iem-skills.has-full .ie-skill-full::before { display: block; }
  .iem-skills .iem-ic { display: inline-flex; }
  .iem-skills .iem-sk:not(.is-on) .iem-t { display: none; }
  .iem-row { gap: 8px 12px; }
  .iem-lab { min-width: 0; }
  .iem-nolab .iem-lab { display: none; }
  .iem-long { display: none; }
  .iem-short { display: inline; }
  .iem-lab .iem-short { font-size: 16px; }   /* ⏱ — 이름표 글자(12px)로는 너무 작다 */
  /* 390 폭에서 첫 줄(Academic · GT · ⏱ Off · On · 문항 수)과 MODE 셋이 한 줄에 들도록 단추 옆 여백만 줄인다 */
  .iem-seg { gap: 5px; }
  .iem-seg .ie-fchip { padding-left: 11px; padding-right: 11px; }
  .iem-sub .ie-guide .ie-chip { padding-left: 10px; padding-right: 10px; }
}
@media screen and (min-width: 601px) { .iem-chips { padding-left: 94px; } }   /* 넓은 화면 — 칩은 이름표 칸 오른쪽 줄에 맞춘다(이름표 84 + 사이 10) */
/* ═══ Exams 메뉴 4안(2026-10-17) — ① 갈래 토글 + 문항 수 → 영역 줄 → [Solve | Test] │ Find · Speed · Outline → All · New · Tried + ⏱ 토글 ═══ */
.iem-opts-top { margin: 2px 0 6px; }
.iem-tog { display: inline-flex; flex: 0 0 auto; padding: 3px; border-radius: 999px; background: var(--bg-secondary); }
.iem-tog button { border: 0; background: transparent; border-radius: 999px; min-height: 30px; padding: 0 14px; font: 600 14px Inter, sans-serif; color: var(--text-dim); cursor: pointer; }
.iem-tog button.is-on { background: var(--bg-elevated); color: var(--accent); box-shadow: 0 1px 3px rgba(22, 23, 28, .14); cursor: default; }
.iem-modes { gap: 8px 10px; }
.iem-sep { align-self: stretch; width: 1px; margin: 4px 4px; background: var(--border-mid); }
.iem-right { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.iem-budget { display: inline-flex; align-items: center; gap: 8px; }
.iem-blab { font: 600 13px Inter, sans-serif; color: var(--text-dim); white-space: nowrap; }
.ie-filter { align-items: center; }
@media screen and (max-width: 600px) {
  .iem-tog button { padding: 0 11px; }
  .iem-modes { gap: 6px; }
  .iem-sep { margin: 4px 1px; }
  .iem-blab .iem-short { font-size: 16px; }
}
/* ═══ Exams 메뉴 5안(2026-10-17) — 갈래 · 시간 예산은 스위치, 거르기는 밑줄 글자 탭, 방법은 큰 칸(이 줄만 채움) + 한 줄 설명 ═══ */
.iem-sw, .iem-bsw { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 0; font: 600 14px Inter, sans-serif; color: var(--text-dim); cursor: pointer; }
.iem-sw-track { position: relative; flex: 0 0 auto; width: 40px; height: 22px; border-radius: 999px; background: var(--border-mid); transition: background .15s; }
.iem-sw-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(22, 23, 28, .3); transition: left .15s; }
.iem-sw .iem-sw-track { background: var(--accent); }   /* 두 값 스위치 — 어느 쪽이든 켜진 상태라 늘 보라 */
.iem-sw.is-b .iem-sw-knob, .iem-bsw.is-on .iem-sw-knob { left: 20px; }
.iem-sw:not(.is-b) .iem-sw-a, .iem-sw.is-b .iem-sw-b { color: var(--text-primary); font-weight: 700; }
.iem-bsw.is-on .iem-sw-track { background: var(--accent); }
.iem-bsw.is-on .iem-blab { color: var(--text-primary); }
.iem-modes { gap: 10px 18px; }
.iem-mg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.iem-mb { min-height: 44px; padding: 0 18px; border: 1px solid var(--border-mid); border-radius: 12px; background: var(--bg-elevated); color: var(--text-primary); font: 700 16px Inter, sans-serif; cursor: pointer; }
.iem-mb:hover { border-color: var(--accent); }
.iem-mb.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.iem-opts .iem-note { margin: 0; font-size: 14px; line-height: 20px; height: 20px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iem-ftab { border: 0; border-bottom: 2px solid transparent; background: none; margin-right: 14px; padding: 6px 1px; font: 600 15px Inter, sans-serif; color: var(--text-dim); cursor: pointer; }
.iem-ftab.is-on { color: var(--text-primary); border-bottom-color: var(--accent); }
@media screen and (max-width: 600px) {
  .iem-modes { gap: 8px 10px; }
  .iem-mg { gap: 5px; }
  .iem-mb { padding: 0 10px; font-size: 15px; }
  .iem-ftab { margin-right: 12px; }
}
/* ═══ Exams 메뉴 6안(2026-10-17) — Skill drills | Practice 탭 → 세부 큰 칸(5안 .iem-mb) + 한 줄. 거르기 줄은 걷음 ═══ */
/* 탭은 브라우저(크롬) 탭 모양(2026-10-17 사용자 「크롬 헤드리스 탭 곡선으로」) — 켜진 탭은 아래 판과 같은 바탕으로 이어지고, 위 모서리는 둥글게,
   밑 양옆은 안으로 휜 곡선(::before · ::after 의 둥근 홈). 꺼진 탭은 바탕 없이 글자만, 사이에 가는 세로 금 */
.iem-tabset { display: flex; flex-direction: column; }
.iem-tabs { display: flex; align-items: flex-end; gap: 4px; }
.iem-tb { position: relative; border: 0; border-radius: 12px 12px 0 0; background: none; padding: 10px 22px 9px; font: 700 16px Inter, sans-serif; color: var(--text-dim); cursor: pointer; }
.iem-tb:not(.is-on) { background: var(--bg-secondary); box-shadow: inset 0 1px 0 var(--border-soft), inset 1px 0 0 var(--border-soft), inset -1px 0 0 var(--border-soft); }   /* 꺼진 탭도 연한 테두리 · 바탕 — 누를 수 있는 탭으로 보이게(2026-10-17 사용자 「브라우저 탭처럼」) */
.iem-tb:hover:not(.is-on) { color: var(--text-primary); box-shadow: inset 0 1px 0 var(--border-mid), inset 1px 0 0 var(--border-mid), inset -1px 0 0 var(--border-mid); }
.iem-tb.is-on { z-index: 1; background: var(--bg-elevated); color: var(--accent); box-shadow: 0 -1px 0 var(--border-soft), -1px 0 0 var(--border-soft), 1px 0 0 var(--border-soft); }
.iem-tb.is-on::before, .iem-tb.is-on::after { content: ''; position: absolute; bottom: 0; top: auto; width: 12px; height: 12px; border: 0; }
.iem-tb.is-on::before { left: -12px; background: radial-gradient(circle at 0 0, transparent 11.5px, var(--bg-elevated) 12px); }
.iem-tb.is-on::after { right: -12px; left: auto; background: radial-gradient(circle at 100% 0, transparent 11.5px, var(--bg-elevated) 12px); }
.iem-tabpanel { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--bg-elevated); box-shadow: 0 0 0 1px var(--border-soft); }
.iem-tabset.is-first .iem-tabpanel { border-top-left-radius: 0; }   /* 첫 탭이 켜지면 판 왼쪽 위는 탭과 곧게 이어진다 */
.iem-tb.is-on:first-child::before { display: none; }
@media screen and (max-width: 600px) {
  .iem-tb { flex: 1 1 0; text-align: center; padding: 10px 8px 9px; }
  .iem-tabset.is-last .iem-tabpanel { border-top-right-radius: 0; }   /* 폰은 탭이 반씩 — 끝 탭도 판 가장자리에 붙는다 */
  .iem-tb.is-on:last-child::after { display: none; }
  /* 영역 줄 끝 — Full mock · Words 는 아이콘 대신 글자(| Mock | Words) */
  .iem-skills .ie-skill-full .iem-ic, .iem-skills .ie-skill-words .iem-ic { display: none; }
  .ie-skills.iem-skills .iem-sk.ie-skill-full .iem-t, .ie-skills.iem-skills .iem-sk.ie-skill-words .iem-t { display: inline; }
  .ie-skills.iem-skills .ie-skill-words, .ie-skills.iem-skills .ie-skill-full { padding-left: 9px; padding-right: 4px; margin-left: 2px; }
}
/* ═══ Words — Today | Word list 탭(2026-10-17, Exams 와 같은 크롬 탭 · 세부 칸 · 한 줄) ═══ */
.iw-opts { margin-bottom: 14px; }
.iw-study-row { margin: 2px 0 0; }
.iw-study-row .iw-review { margin: 0; }
span.iw-lg { cursor: default; }   /* 진척 띠 이름표는 보기만 — 거르기는 Word list 의 상태 칩 */

/* Report 첫 화면(2026-10-17 docs/dev/26 3단계) — 맨 위 영역 줄 · 점수 칸 · 시선 판이 없을 때 한 줄 */
.ir-areabar { margin: 2px 0 14px; }
.ir-score .hm-band { margin-bottom: 0; }
.ir-score { margin-bottom: 16px; }
.ir-gaze-line { margin: 8px 2px 0; font-size: 14px; color: var(--text-dim, #56627A); }
/* Missed 화면 맨 위 Due today 줄(2026-10-17 docs/dev/26 4단계) — 고칠 문항 대기열의 문 하나 */
/* Due today 칸 — 표준 카드(S4: 흰 바탕 · 테두리 1px · 모서리 16) · 이름 T3 16 · 보조 본문 14(S9, 2026-10-18) */
.hs-due { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--bg-elevated); }
.hs-due span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hs-due b { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.hs-due small { font-size: 14px; color: var(--text-dim, #56627A); }
.hs-due .ie-btn { flex: none; margin: 0; }
/* 한 판 리포트 Weak spots in this set(2026-10-17 docs/dev/26 5단계) — 유형마다 이 세트의 맞힌 수 · 문항 칩 · 문 셋 */
.wk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.wk-row { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid #EEF0F5; }
.wk-row:first-child { border-top: 0; padding-top: 0; }
.wk-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.wk-k b { font-size: 16px; color: var(--text-primary); }
.wk-k span { font-size: 14px; color: var(--text-dim, #56627A); }
.wk-row .hs-doors { margin-top: 0; }

/* 문항별 표 Eyes 칸의 눈 코드(2026-10-17 docs/dev/27 R1) — 중립 꼬리표, 한 줄로 */
.qt-ev.is-eye { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #F3EEFF; color: #4B0FCB; font-size: 12px; font-weight: 600; white-space: nowrap; }
.qt-ev.is-eye.is-lucky { background: #EEF6F2; color: #1F7A4D; }

/* 읽기 장 Your eyes(2026-10-17 docs/dev/27 R2) — 대비 두 줄 · 숫자 셋 · 눈 코드 수. 색은 중립(되돌아봄 · 실수를 빨강으로 겁주지 않음) */
.ey-card { margin-bottom: 16px; }
.ey-sub { margin: 0 0 10px; font-size: 13px; color: var(--text-dim, #56627A); }
.ey-contrast { display: grid; gap: 8px; margin: 0 0 12px; }
.ey-contrast p { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 10px 14px; border-radius: 12px; background: #F3EEFF; }
.ey-contrast p.is-no { background: var(--bg-primary, #F5F6FA); }
.ey-contrast b { min-width: 56px; font: 700 24px Inter, sans-serif; color: #4B0FCB; }
.ey-contrast p.is-no b { color: #56627A; }
.ey-contrast span { font-size: 14px; color: var(--text-primary); }
.ey-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.ey-num { padding: 10px 12px; border: 1px solid #E4E7EF; border-radius: 12px; display: flex; flex-direction: column; gap: 2px; }
.ey-num span { font-size: 12px; color: var(--text-dim, #56627A); }
.ey-num b { font-size: 18px; color: var(--text-primary); }
.ey-wrong { margin: 0; font-size: 14px; color: var(--text-primary); }
.ey-wrong > b { display: block; margin-bottom: 6px; }
/* 코드마다 한 줄 + 오른쪽 문(2026-10-18 네 영역 훈련 D) — 폰에서는 문이 아랫줄로 */
.ey-codes { list-style: none; margin: 0; padding: 0; }
.ey-codes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--border-subtle, #E6E8EF); }
.ey-codes li:first-child { border-top: 0; }
.ey-codes li b { margin-left: 4px; }
.ey-codes .hs-door { flex: none; }
@media (max-width: 600px) { .ey-nums { grid-template-columns: minmax(0, 1fr); } .ey-contrast b { font-size: 20px; min-width: 48px; } }

/* 읽기 Skills 막대(2026-10-17 docs/dev/27 R3) — 맞힌 비율 · 95% 구간(옅은 띠) · 목표선(세로 선) · 등급 */
/* 2026-10-18 사용자 「가로바가 너무 길어 시선이 불편」 — 줄 넷을 칸(타일) 넷으로: 넓은 화면 한 줄에 넷, 그 밖(태블릿 · 폰) 2×2.
   칸이 넷보다 적어도(듣기 · 말하기) 칸 폭은 같고 왼쪽부터 — 늘려 채우면 막대가 다시 길어진다. 막대 길이는 칸 폭에서(px 로 박지 않음) */
.sk-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 12px; }
@media (min-width: 900px) { .sk-bars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sk-bar { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px; border-radius: 12px; background: var(--bg-primary, #F5F6FA); }
.sk-bar.is-none { color: var(--text-faint, #9AA3B5); }
/* 이름은 늘 두 줄 높이 — 한 줄 이름 · 두 줄 이름 칸이 섞여도 막대가 가로로 맞는다 */
.sk-bar-k { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--text-primary); }
.sk-bar.is-none .sk-bar-k { color: var(--text-faint, #9AA3B5); }
.sk-bar-t { position: relative; height: 12px; margin: 2px 0 4px; border-radius: 999px; background: #E4E7EF; overflow: visible; }
.sk-bar-ci { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: #DCD2FB; }
.sk-bar-f { position: absolute; left: 0; top: 3px; bottom: 3px; border-radius: 999px; background: #6012F3; }
.sk-bar-line { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--navy, #18213A); }
.sk-bar-v { font-size: 15px; font-weight: 700; color: var(--navy, #18213A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 막대 바로 위 — 막대와 숫자를 한 번에 */
.sk-timeline { margin: 0 0 10px; padding: 0 2px; font-size: 14px; color: var(--text-primary); }
.sk-timeline b { margin-right: 6px; }

/* 듣기 How you missed · Your writing · Your speaking(2026-10-17 docs/dev/27 R4) */
.sk-why { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--bg-primary, #F5F6FA); font-size: 14px; color: var(--text-primary); }
.sk-why b { display: block; margin-bottom: 4px; font-size: 13px; color: var(--text-dim, #56627A); }
.sk-why p { margin: 2px 0 0; }
p.sk-why b { display: inline; margin-right: 6px; }

/* Report 위 Next(2026-10-17 docs/dev/27 R5) — 영역마다 다음 하나 · 근거 · 문 · 닫히는 기준 */
.nx-card { margin-bottom: 16px; }
.nx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: nx; }
.nx-row { position: relative; padding: 0 0 0 30px; counter-increment: nx; }
.nx-row::before { content: counter(nx); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: #F3EEFF; color: #4B0FCB; font: 700 12px/22px Inter, sans-serif; text-align: center; }
.nx-row > b { display: block; font-size: 15px; color: var(--text-primary); }
.nx-row > p { margin: 4px 0 0; font-size: 14px; color: var(--text-primary); }
.nx-row .hs-doors { margin-top: 8px; }
.nx-row p.nx-done { font-size: 13px; color: var(--text-dim, #56627A); }
.nx-row p.nx-ok { color: #1F7A4D; font-weight: 600; }
.nx-closed { margin: 12px 0 0; font-size: 14px; color: #1F7A4D; font-weight: 600; }

/* 막대의 공식 유형 이름(2026-10-17) — 막대 아래 작게, 두 줄까지(2026-10-18 칸 꼴) */
.sk-bar-types { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.35; font-weight: 400; color: var(--text-dim, #56627A); }
/* 홈 Report 칸 맨 위 Best next step 첫 줄(2026-10-17 docs/dev/27 D5) — 판 줄과 갈리게 옅은 바탕 */
.hm-task.hm-next { background: #F9F7FF; border-radius: 12px; }

/* 읽기 Same or different?(ielts-sod.js, 2026-10-18 네 영역 훈련 C) — 문항 쪽 글과 근거 문장 두 칸 · 고르는 칸(받아쓰기 칩 꼴) */
.sod-box { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-mid); background: var(--bg-elevated); }
.sod-box.is-passage { background: var(--bg-primary, #F5F6FA); }
.sod-box.is-passage.is-look { box-shadow: 0 0 0 2px var(--accent); }   /* Compare 한 줄의 Read the passage(2026-10-22) */
/* Compare 두 단 — 지문 왼쪽 · 진술(과 단추) 오른쪽, 같은 높이에서 시작(2026-10-22 사용자). 폰은 한 단(지문 위) */
.cmp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.cmp-col { min-width: 0; }
.cmp-col .sod-box { margin: 0; }
.dr-app .cmp-pair .sod-box { max-width: none; }
.cmp-col.is-right .trap-ask { margin: 32px 0 12px; }   /* 진술 상자와 묻는 줄 사이를 띄움(2026-10-22 사용자 「붙어 있는 느낌」) */
@media (max-width: 600px) { .cmp-pair { grid-template-columns: 1fr; gap: 12px; } }
.sod-box p { margin: 4px 0 0; font-size: 16px; line-height: 1.55; }
.sod-h { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim, #56627A); }
.sod .xr-pairs { margin-top: 10px; }
/* 읽기 Compare(ielts-sod.js, 2026-10-18 docs/dev/30 단계 2) — 목록의 판(Picked for you · 단위 칩 · 시작) · 진술 낱말 누르기 */
.cmp-panel { margin: 4px 0 14px; padding: 14px 16px; border: 1px solid var(--border-mid); border-radius: var(--radius); background: var(--bg-elevated); }
.cmp-from { margin: 10px 0 8px; font-size: var(--fs-body); color: var(--text-secondary); }
.cmp-picked { margin: 0 0 10px; font-size: var(--fs-body); color: var(--text-primary); font-weight: 600; }
.cmp-units { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cmp-units small { color: var(--text-dim); font-weight: 400; margin-left: 2px; }
/* 진술 상자 — 위 칸은 물음(맥락, 한 단계 낮게), 줄로 갈라 아래가 진술(주인공, 가장 크게). 지문과 진술은 같은 크기 단계(2026-10-22 사용자 「화면에 맞춰 예쁘고 가독성 좋게」) */
.cmp-q { margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--border-soft); }
.cmp-about { margin-top: 4px !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--text-secondary, #44506A); }
.cmp .sod-box.is-passage p { font-size: 17px; line-height: 1.65; }
/* 진술마다 푼 시간 · 가장 빨리 맞힌 진술의 축하(2026-10-22 사용자 「즉각적인 피드백 — 게이미피케이션」) — 한 번 튀고 멈춤 */
.cmp-time { margin-left: 4px; font-weight: 600; color: var(--text-dim); }
.cmp-fast { position: relative; display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 14px;
  animation: cmpFastPop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.cmp-fast::before, .cmp-fast::after { content: '✦'; position: absolute; top: -10px; font-size: 12px; color: var(--accent); animation: cmpFastSpark .9s ease-out .15s both; }
.cmp-fast::before { left: -6px; } .cmp-fast::after { right: -6px; animation-delay: .25s; }
@keyframes cmpFastPop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes cmpFastSpark { 0% { transform: translateY(6px) scale(.4); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-8px) scale(1.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cmp-fast, .cmp-fast::before, .cmp-fast::after { animation: none; } }
.cmp-stmt { margin-top: 6px !important; font-size: 18px !important; line-height: 1.8 !important; font-weight: 500; color: var(--text-primary); }
@media (max-width: 600px) { .cmp-stmt { font-size: 17px !important; } .cmp .sod-box.is-passage p { font-size: 16px; } }
.cmp-w { font: inherit; padding: 1px 3px; border: 0; border-radius: 4px; background: transparent; color: inherit; }
button.cmp-w { cursor: pointer; border-bottom: 1px dashed var(--border-mid); }
button.cmp-w:hover { background: var(--accent-soft); }
.cmp-w.is-diff { background: rgba(180, 83, 9, 0.14); }
.cmp-w.is-ok { outline: 2px solid var(--success); }
.cmp-w.is-no { outline: 2px solid var(--text-faint); }
/* Outline(ielts-map.js, 2026-10-18 단계 5) — 단계 줄 · 4지 · 왜 이 문장인가 · 누른 오답 문장 */
.im-step { margin: 0 0 6px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.im-choices { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.im-ch { text-align: left; padding: 10px 14px; border: 1px solid var(--border-mid); border-radius: 12px; background: var(--bg-elevated); font: inherit; color: inherit; cursor: pointer; }
.im-ch:hover:not(:disabled) { border-color: var(--accent); }
.im-ch.is-ok { border-color: var(--success); background: rgba(22, 125, 87, 0.08); }
.im-ch.is-no { border-color: var(--text-faint); background: var(--bg-secondary); }
.im-ch:disabled { cursor: default; }
.im-keyq { margin: 8px 0 12px; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--accent-soft); font-size: 16px; line-height: 1.55; }
.im-keyq b { display: block; margin-bottom: 2px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.im-why { margin: 4px 0 0; color: var(--text-dim); font-size: var(--fs-body); }
.sent.im-tap-no { background: var(--bg-secondary); outline: 1px dashed var(--text-faint); }
/* Speed up 끊어 읽기(ielts-pace.js, 2026-10-18 단계 6) — 지문 위 카드 · 낱말 사이 틈 단추(누르면 /) · Check 뒤 두 사람이 끊은 자리 */
.ie-mark { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; background: rgba(15, 23, 42, 0.35); }
.ie-mark-card { width: min(640px, 100%); box-sizing: border-box; max-height: calc(100vh - 32px); overflow: auto; padding: 20px; border: 1px solid var(--border-soft);
  border-radius: 16px; background: var(--bg-elevated); box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18); text-align: left; }
.ie-mark-help, .ie-mark-legend { margin: 4px 0 12px; color: var(--text-dim); font-size: var(--fs-body); }
.ie-mark-line { margin: 0 0 12px; font-size: 19px; line-height: 2.2; text-align: left; word-spacing: normal; }
.ck-w { white-space: nowrap; }
.ck-gap { display: inline-block; min-width: 18px; height: 1.6em; margin: 0 1px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--accent); font: inherit; font-weight: 700; vertical-align: middle; text-align: center; }
button.ck-gap { cursor: pointer; background: var(--bg-secondary); }
button.ck-gap:hover { background: var(--accent-soft); }
/* / 색 — 누르는 동안은 보라 바탕, Check 뒤에는 맞음 초록 · 놓침 주황 · 덩어리 안 빨강 · 더 잘게(셈 안 함) 회색. 결과 줄 · 범례가 같은 색(2026-10-22 사용자) */
.ck-gap.is-cut { min-width: 22px; }
button.ck-gap.is-cut { background: var(--accent); color: #fff; }
span.ck-gap.is-ok, span.ck-gap.is-miss, span.ck-gap.is-bad { min-width: 22px; color: #fff; font-size: 1.05em; }
.ck-gap.is-ok { background: var(--success); }
.ck-gap.is-miss { background: var(--warning); }
.ck-gap.is-bad { background: var(--danger); text-decoration: line-through; }
.ck-gap.is-extra { color: var(--text-dim); }
.ck-gap.is-soft { color: var(--text-dim); font-weight: 400; }
.ck-k { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 6px 0; font-weight: 600; }
.ck-k i { display: inline-block; min-width: 20px; border-radius: 6px; font-style: normal; font-weight: 700; text-align: center; color: #fff; }
.ck-k.is-ok { color: var(--success); } .ck-k.is-ok i { background: var(--success); }
.ck-k.is-miss { color: var(--warning); } .ck-k.is-miss i { background: var(--warning); }
.ck-k.is-bad { color: var(--danger); } .ck-k.is-bad i { background: var(--danger); }
.ck-k.is-soft { color: var(--text-dim); font-weight: 400; } .ck-k.is-soft i { color: var(--text-dim); }
.ie-mark-legend .ck-k { font-weight: 400; }
.ie-pace-ref { margin-left: 12px; color: var(--text-dim); font-size: var(--fs-body); }
.ie-pace-ref.is-goal { color: var(--accent); font-weight: 600; }
.ie-pace-ref:empty { display: none; }
.ie-pace-why { flex-basis: 100%; width: 100%; margin: -2px 0 8px; color: var(--text-dim); font-size: var(--fs-body); }   /* 제안 속도의 까닭 한 줄(ielts-pace.js ieltsPaceWhyHtml) */
.ie-mark-btns { display: flex; justify-content: flex-end; }
/* Catch the trap 보기 · 지도(ielts-trap.js, 2026-10-18 단계 7 — 28번 T4) */
.trap-opts { margin: 4px 0 12px; padding: 0; list-style: none; display: grid; gap: 4px; max-width: 760px; }
.trap-opts b { display: inline-block; min-width: 1.4em; }
.trap-img { display: block; max-width: min(520px, 100%); margin: 4px 0 12px; border-radius: 8px; }
/* Report 「Skill drills」 칸(ielts-drill.js ieltsDrillUnitsCardHtml, 2026-10-18 단계 4) — 단위 | 실전 | 드릴 판 수 */
.ir-dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.ir-dtable th, .ir-dtable td { padding: 6px 4px; border-bottom: 1px solid var(--border-soft); text-align: left; font-weight: 400; }
.ir-dtable thead th { font-size: var(--fs-label); color: var(--text-dim); font-weight: 600; }
.ir-dtable td { text-align: right; font-variant-numeric: tabular-nums; width: 7em; }
.ir-dtable .ir-dh th { padding-top: 12px; font-weight: 700; }
.ir-dtable .ir-dh small { font-weight: 400; color: var(--text-dim); }
/* 폰 — Your eyes 코드 줄의 문은 늘 아랫줄로(2026-10-18 배포본 — 줄 길이에 따라 옆 · 아래가 섞였다) */
@media (max-width: 600px) { .ey-codes li { flex-direction: column; align-items: flex-start; } }

/* Report 재배치(2026-10-18 사용자 Report 화면설계) — 맨 위 반반(Predicted score | Your progress over time, 한 칸뿐이면 한 줄 가득) ·
   Reading 세 칸(전체 폭 Reading skills + 아래 Your eyes | Gaze pattern) · History 최근 줄 아래 Missed 한 줄 · View all */
.ir-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.ir-head > .ir-card { margin: 0; min-width: 0; }
@media (min-width: 900px) {
  .ir-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .ir-head > section:only-of-type { grid-column: 1 / -1; }
}
.ir-read { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.ir-read > .ir-card, .ir-read > .ir-top, .ir-read .ey-card { margin: 0; }
/* 까닭 한 줄은 칸 맨 아래 작게(축마다 까닭이 다를 때만 — 모두 같으면 칸 아래 sk-why-all 한 번) */
.sk-bar-why { font-size: 12px; font-weight: 600; color: #4B0FCB; }
.ir-past .hs-misscard { margin-top: 12px; }   /* Missed questions — History 칸 맨 아래 줄(= Report 맨 아랫줄, 2026-10-18 사용자) */
/* History 머리(2026-10-18 사용자 「아이콘 · 무엇의 기록인지 · View all」) — 다른 칸과 같은 아이콘 머리(hm-h) · 오른쪽 View all ›, 아래 한 줄 */
.ir-past .hm-h { margin: 0 0 4px; }
.ir-past .hm-h h2 { margin: 0; font: 700 var(--t2) Inter, sans-serif; color: var(--navy); }
.ir-hsub { margin: 0 2px 10px; font-size: 14px; color: var(--text-dim, #56627A); }
.ir-hist .ir-hsub { margin: -6px 0 12px; }
/* History 화면 제목은 ‹ 바로 옆(머리 줄의 space-between 이 제목을 오른쪽 끝으로 밀었다) */
#ieltsScreen .ir-hist .rt-mh, #ieltsScreen .hs-missed .rt-mh { justify-content: flex-start; }   /* Missed questions 도(2026-10-18) */
/* 같은 까닭이 모든 줄에 붙을 때 칸 아래 한 번(2026-10-18) — 줄 아래 까닭(sk-bar-why)과 같은 색 */
.sk-why-all { margin: 0 2px 10px; font-size: 13px; font-weight: 600; color: #4B0FCB; }
/* AI 가 일하는 동안(ai-wait.js, 2026-10-18) — ✦ 반짝임 · 끝없는 빛 막대 · 한 줄. 움직임을 줄이면 멈춘다 */
.ai-mark { display: inline-block; color: var(--accent); }
.ai-wait { display: block; max-width: 420px; margin: 6px 0; text-align: left; }
.ai-wait-top { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ai-wait .ai-mark { font-size: 16px; animation: ai-twinkle 1.4s ease-in-out infinite; }
.ai-wait-clock { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-dim, #56627A); }
.ai-wait-bar { display: block; height: 4px; margin: 8px 0 6px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(90deg, var(--accent-soft, rgba(99, 64, 255, .12)) 0%, var(--accent, #6340FF) 50%, var(--accent-soft, rgba(99, 64, 255, .12)) 100%);
  background-size: 200% 100%; animation: ai-flow 1.6s linear infinite; }
.ai-wait-line { display: block; font-size: 13px; color: var(--text-dim, #56627A); }
.ai-wait-line:empty { display: none; }
@keyframes ai-twinkle { 0%, 100% { opacity: .45; transform: scale(.9) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }
@keyframes ai-flow { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ai-wait .ai-mark, .ai-wait-bar { animation: none; } }
/* What you said(ielts-sfeed.js, 2026-10-18) — 녹음 칸 아래 내 답의 받아쓰기, 짚은 인용 노란 칠 · 고친 꼴 밑줄 */
.sp-said { margin: 8px 0 4px; padding: 10px 12px; border-radius: 10px; background: var(--bg-primary, #F5F6FA); }
.sp-said p { margin: 4px 0 0; font-size: 15px; line-height: 1.6; }
.sp-said-q { background: #FFF1A8; color: inherit; border-radius: 3px; padding: 0 2px; }
.sp-said-fix { text-decoration-color: #D9480F; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sp-said-to { margin: 0 4px 0 3px; font-size: 13px; font-weight: 600; color: var(--success, #12805C); }
.fk-q { margin: 10px 0 0; font-size: 12px; font-weight: 700; color: var(--text-dim, #56627A); }
/* AI 꼬리표(2026-10-18) — AI 를 부르는 단추 안의 「✦ AI」 알약. 보라 단추 위에서는 흰 바탕 · 보라 글자 */
.ai-badge { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1.6; vertical-align: 1px;
  background: var(--accent-soft, rgba(99, 64, 255, .12)); color: var(--accent, #6340FF); }
.ie-btn-main .ai-badge { background: #fff; color: var(--accent, #6340FF); }
/* ══ 드릴 · 쓰기 · 말하기 화면 — 앱 화면 표준(docs/design/EyeLearn_App_Screen_Standard.md, 2026-10-18 사용자 「표준 화면 UI 따라야 한다 · Drills 의 모든 화면」) ══
   틀은 바깥 .ie-app.dr-app 하나(위 1100 · 노트북 확대 목록, S1). 결과 = 머리 카드(ieltsHeadCardHtml) → 칸 배치(ieltsGridHtml = .ch-grid, S3 · S6).
   카드 한 벌(S4: 흰 · 테두리 1px · 모서리 16 · 그림자 없음 · 안쪽 20, 폰 16) · 글자 단계(S9) · 채운 단추는 머리 카드의 주 단추 하나(S5).
   write.css 가 이 파일 뒤에 실리므로 .dr-app 을 앞에 붙여 한 단계 세게 건다 */
.dr-body { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
.dr-body .ch-g > * { margin: 0; }
.dr-app .dr-head, .dr-app .dr-card, .dr-app .dr-body .wr-sec, .dr-app .ie-res.dict, .dr-app .act-end, .dr-app .ie-dcmp {
  box-sizing: border-box; margin: 0; padding: 20px; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--bg-elevated); box-shadow: none; }
.dr-app .ie-res.dict { margin-top: 12px; max-width: none; }   /* 푸는 화면 — 머리 줄(.ie-top, T1) 아래 카드 하나. 안쪽 폭 720 을 걷음(S1 — 폭은 바깥 틀 하나) */
.dr-app .dict-text, .dr-app .trap-q, .dr-app .trap-lines, .dr-app .dict-why, .dr-app .sod-box, .dr-app .wd-taskbox, .dr-app .wc-text, .dr-app .plan-fs { max-width: 760px; }   /* 읽는 글줄 길이는 카드 안에서(S1 끝 줄) */
/* 머리 카드(S6 1줄) — ‹ · 분류 줄(라벨) · 제목 T1 · 주 단추 · 글자 링크 */
.dr-app .dr-head { position: relative; padding-left: 64px; }
.dr-back { position: absolute; left: 10px; top: 14px; }
.dr-head-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dr-kind { margin: 0; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dim); }
#ieltsScreen .dr-h1, .im-app .dr-h1 { margin: 0; font-size: var(--t1); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.dr-go { align-self: flex-start; min-width: min(100%, 240px); min-height: 48px; margin-top: 8px; padding: 0 24px; border: 0; border-radius: 12px;
  background: var(--accent); color: #fff; font: 600 var(--t3) Inter, sans-serif; cursor: pointer; }   /* 주 단추 — 가이드 5절(48 · 12 · 600) */
.dr-go:hover { background: #5210d6; }
.dr-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 2px 0 0; }
.dr-links .xr-link { font-size: var(--fs-body); font-weight: 600; }
/* 카드 제목 T2 · 내 결과 카드(S7) — 큰 숫자 N1 · 칸 숫자 N2 · 칸 이름 라벨 */
#ieltsScreen .dr-h2, .dr-app .dr-body .wr-sec h2 { margin: 0 0 10px; font-size: var(--t2); font-weight: 700; line-height: 1.35; }
.dr-res { display: flex; flex-direction: column; gap: 10px; }
.dr-big { margin: 0; font-size: var(--n1); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.dr-bk { margin: -6px 0 0; font-size: var(--fs-body); color: var(--text-dim); }
.dr-note { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--text-primary); }
.dr-app .ie-tile { background: var(--surface, #f7f8fc); box-shadow: none; border-radius: 12px; padding: 12px 14px; }
.dr-app .ie-tile > span { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.dr-app .ie-tile > b { font-size: var(--n2); }
/* 문항 표 카드 — 표는 카드 안에서 바탕 없이, 머리 줄은 라벨 */
.dr-app .dr-list { padding: 8px 0; overflow-x: auto; }
.dr-app .ie-rtable { background: transparent; border-radius: 0; font-size: var(--fs-body); }
.dr-app .ie-rtable th { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.dr-app .ie-rtable th:first-child, .dr-app .ie-rtable td:first-child { padding-left: 20px; }
.dr-app .ie-rtable tr:last-child td { border-bottom: 0; }
.dr-app .ie-rtable td.ie-ev { font-size: var(--fs-body); }
.dr-app .ie-dw { font-size: var(--fs-body); }
/* 오늘 드릴 띠 · 지난 판 견줌 — 표준 카드(초록 테두리 걷음, 이름 줄 색만 남김) */
.dr-app .act-end-k { font-size: var(--t2); }
/* 처방 · 원인 카드(gap-card)의 글 — 단계 밖 17 · 15 · 13 → T3 16 · 본문 14 · 라벨 */
.dr-app .gap-card { margin: 0; padding: 20px; }
.dr-app .gap-said { font-size: var(--t3); }
.dr-app .gap-why, .dr-app .gap-do { font-size: var(--fs-body); }
.dr-app .gap-name { font-size: var(--fs-label); font-weight: 600; }
/* 카드 안 글 상자 — 옅은 중립 바탕 · 모서리 12, 테두리 없음(카드 안 줄, S4) */
.dr-app .wr-mine, .dr-app .wr-sample, .dr-app .sod-box, .dr-app .wd-taskbox { border: 0; border-radius: 12px; background: var(--surface, #f7f8fc); padding: 12px 14px; }
.dr-app .sod-box p { font-size: var(--t3); font-weight: 400; }
/* 오늘 드릴 시작 — 머리 카드 아래 카드 하나(dl 은 카드 안이라 제 테두리를 걷음) */
.dr-app .act-start .act-what { margin: 0 0 14px; }
.dr-app .act-start .act-dl { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.dr-app .act-start .act-done { margin: 14px 0 0; }
/* Outline 결과 — 문항 칸 안(읽기 판 #questionViewport, #ieltsScreen 밖). 문단 줄은 목록 카드 안 줄로 */
.im-app .dr-body { padding: 16px 16px 24px; }
.im-list .im-legend { margin-bottom: 4px; }
.im-list .im-res { border: 0; border-top: 1px solid var(--border-soft); border-radius: 0; background: none; padding: 12px 0 0; margin-top: 12px; }
@media (max-width: 600px) {
  .dr-app .dr-head, .dr-app .dr-card, .dr-app .dr-body .wr-sec, .dr-app .ie-res.dict, .dr-app .act-end, .dr-app .ie-dcmp, .dr-app .gap-card { padding: 16px; }
  .dr-app .dr-head { padding-left: 52px; } .dr-back { left: 4px; top: 10px; }
  .dr-go { align-self: stretch; min-width: 0; }
  .dr-app .dr-list { padding: 4px 0; }
  .dr-app .ie-rtable th:first-child, .dr-app .ie-rtable td:first-child { padding-left: 16px; }
}

/* ── 다음 한 걸음(ielts-nextstep.js, 2026-10-19 「Action items · Skill drills 와 연결」) — 결과 화면 · Report · 드릴 결과 ── */
.st-split { margin: 4px 0 0; font-size: var(--fs-body); color: var(--text-secondary); }
/* Next 앞 한 줄(ielts-nudge.js, 2026-10-22 docs/dev/36 G1) — 꾸짖지 않는 중립 색(36번 L5 · L7), 문항 칸 맨 아래 */
.ie-nudge { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft); }
.ie-nudge p { margin: 0 0 10px; font-size: var(--fs-body); color: var(--text-primary); line-height: 1.45; }
.ie-nudge-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ie-nudge-btns .ie-btn { width: auto; flex: none; margin: 0; }
/* 한 문항이 시간을 넘음(ielts-timeq.js, docs/dev/36 G3) — 이전 · 다음 줄 바로 위에 뜨는 한 줄(자리는 js 가 잰다) */
.ie-dcmp-after { margin: 8px 0 0; font-size: 13px; color: var(--text-dim); }   /* 견줌 칸 아래 한 줄(ielts-drill.js ieltsSinceHtml, G4) */
.ie-tq { position: fixed; left: 12px; right: 12px; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--accent); border-radius: 10px; background: var(--bg-elevated); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.ie-tq p { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-body); color: var(--text-primary); line-height: 1.4; font-variant-numeric: tabular-nums; }
.ie-tq .ie-btn { width: auto; flex: none; margin: 0; }
.ie-tq-x { flex: none; width: 32px; height: 32px; border: 0; background: none; color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer; }
.st-card { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.st-card p, .st-time p, .st-dres p { margin: 8px 0 0; line-height: 1.45; }
.st-why { font-weight: 600; color: var(--text-primary); }
.st-done { color: var(--text-secondary); font-size: var(--fs-body); }
.st-also { color: var(--text-secondary); font-size: var(--fs-body); }
.st-prog, .nx-prog { color: var(--accent); font-weight: 600; }
.st-ok { color: var(--success); font-weight: 600; }
.st-doors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.st-eyes { margin: 10px 0 4px; }
.st-eyes p { margin: 2px 0; font-weight: 600; color: var(--text-primary); }
.st-foot { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.st-foot li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.st-foot li > span { flex: 1 1 260px; color: var(--text-primary); }
.st-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin-top: 10px; background: var(--border-soft); }
.st-seg.is-p { background: var(--accent); }
.st-seg.is-q { background: #0b9cba; }
.st-seg.is-o { background: var(--warning); }
.st-seglab { font-size: var(--fs-body); color: var(--text-secondary); }
.st-lab::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 1px; }
.st-lab.is-p::before { background: var(--accent); }
.st-lab.is-q::before { background: #0b9cba; }
.st-lab.is-o::before { background: var(--warning); }
.st-wpm { color: var(--text-secondary); font-size: var(--fs-body); }
.st-tgt p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.st-tsel { font: inherit; font-weight: 600; color: var(--accent); background: transparent; border: 1px solid var(--border-mid); border-radius: 8px; padding: 4px 8px; }
.st-tneed { color: var(--text-secondary); }
.st-olist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.st-olist li { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.st-olist b { min-width: 130px; }
.st-verdict { margin: 10px 0 0; font-weight: 600; }
.st-obar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 8px 12px; border-radius: 10px;
  background: var(--accent-soft); color: var(--text-primary); font-size: var(--fs-body); }
.st-obar small { color: var(--text-secondary); margin-left: auto; }
.st-oline { margin: 4px 0 0; color: var(--accent); font-weight: 600; font-size: var(--fs-body); }
.st-dt { margin-bottom: 12px; }
.st-dt td { width: auto; white-space: nowrap; padding-left: 12px; }
.st-dres h3 { margin: 0; font-size: 16px; }
.st-dres dl { margin: 8px 0 0; display: grid; gap: 4px; }
.st-dres dl > div { display: flex; gap: 10px; }
.st-dres dt { min-width: 130px; color: var(--text-secondary); }
.st-dres dd { margin: 0; font-weight: 600; }
/* Your next steps — 1순위만 무게, 2 · 3순위는 한 줄(2026-10-19) */
.st-h { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.st-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: 13px; flex: none; }
.st-rest { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 8px; }
.st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.st-row > span { flex: 1 1 200px; color: var(--text-primary); }
.st-link { font-weight: 600; white-space: nowrap; }

/* 한 답(2026-10-20 docs/dev/31) — Report 차례: 점수 띠 → [Your next focus | Gaze pattern] → History → Details(접힘).
   Gaze pattern 은 접지 않는다(4-1 — 시선추적 신뢰). 초점 카드는 결과 화면(.rp-card.st-card)과 Report(.nx-card)가 같은 꼴 */
.ir-strip { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) { .ir-strip { grid-template-columns: none; flex-direction: row; align-items: stretch; } .ir-strip > .ir-score { flex: 3 1 0; } .ir-strip > .st-tgt { flex: 2 1 0; display: flex; align-items: center; } }
.ir-strip > .ir-card { margin: 0; padding: 10px 14px; }
.ir-strip .ir-score .hm-h { display: none; }   /* 점수 띠 — 칸 머리 없이 숫자 칸만 한 줄 */
.ir-strip .ir-score .hm-band { display: flex; flex-wrap: wrap; gap: 8px; }
.ir-strip .ir-score .hm-tile { flex: 1 1 160px; padding: 8px 10px; }
.ir-strip .ir-score .hm-tile b { font-size: var(--t3); }
.ir-focus { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.ir-focus > .ir-card { margin: 0; min-width: 0; }
@media (min-width: 900px) { .ir-focus.is-two { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.fc-card .fc-tag { font-size: var(--fs-label); color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.fc-card p { margin: 0; }
.fc-card > * + * { margin-top: 10px; }
.fc-line { font-size: var(--t3); font-weight: 700; color: var(--text-primary); line-height: 1.35; }
.fc-obs { font-size: var(--fs-body); color: var(--text-secondary); }
.fc-pair { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--bg-primary); }
.fc-sub { font-size: var(--fs-label); color: var(--text-dim); }
.fc-pr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; font-size: var(--fs-body); }
.fc-pr b { font-variant-numeric: tabular-nums; }
.fc-pb { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--border-mid, #e3e6ee); overflow: hidden; }
.fc-pb > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.fc-pr.is-u .fc-pb > i { background: var(--text-dim, #56627A); }
.fc-pic { padding: 10px 12px; border: 1px solid var(--border-mid, #e3e6ee); border-radius: 12px; }
.fc-pic:empty { display: none; }
.fc-pic-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--fs-body); }
.fc-pic-g { margin-top: 6px; }
.fc-pic-g .xp-svg { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.fc-pic-l { margin-top: 6px !important; font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }
.fc-do { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fc-why { font-size: var(--fs-body); color: var(--text-secondary); }
.fc-goal { font-size: var(--fs-body); }
.fc-goal b { margin-right: 4px; }
.fc-prog { font-size: var(--fs-body); color: var(--accent); font-weight: 600; }
.fc-also { font-size: var(--fs-body); color: var(--text-dim); }
.ir-more { margin: 4px 0 16px; }
.ir-more > summary { cursor: pointer; padding: 10px 2px; font-weight: 600; color: var(--text-secondary); }
.ir-more > .ir-read { margin-top: 8px; }
.fc-areas { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border-mid, #e3e6ee); display: flex; flex-direction: column; gap: 8px; }
.fc-areas li { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; font-size: var(--fs-body); }
.fc-areas li b { color: var(--text-primary); }
.fc-areas li span { color: var(--text-secondary); }
@media (max-width: 600px) { .fc-areas li { grid-template-columns: minmax(0, 1fr) auto; } .fc-areas li span { grid-column: 1 / -1; grid-row: 2; } }

/* 행동 목록(2026-10-20 docs/dev/33 D4) — 기술 칸 아래, 영역마다 같은 꼴: 쉬운 말 · 수 · 드릴 */
.fc-behs { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-primary); }
.fc-behs-h { margin: 0 0 6px; font-size: var(--fs-body); }
.fc-behs-h small { color: var(--text-dim); font-weight: 400; }
.fc-behs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fc-behs li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: baseline; font-size: var(--fs-body); }
.fc-behs li b { font-variant-numeric: tabular-nums; }

/* 초점 카드 — 샘플 리포트 구조(2026-10-20): 기술 · 점수 → What we noticed → Why this matters → 연습 상자 → Your goal */
.fc2 .fc-skill { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 6px; }
.fc2 .fc-skill b { font-size: var(--t3); text-transform: uppercase; letter-spacing: .03em; color: var(--text-primary); }
.fc2 .fc-skill span { font-size: var(--fs-body); color: var(--text-secondary); font-weight: 600; }
.fc2 .fc-sec { margin-top: 14px; }
.fc2 .fc-sec h4 { margin: 0 0 4px; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.fc2 .fc-sec p { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--text-primary); }
.fc2 .fc-sec p + p { margin-top: 4px; }
.fc-practise { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 16px; padding: 12px 16px; text-align: left;
    border: 1.5px solid var(--accent); border-radius: 12px; background: var(--accent-soft); color: var(--text-primary); cursor: pointer; font: inherit; }
.fc-practise span { display: flex; flex-direction: column; gap: 2px; }
.fc-practise b { font-size: var(--fs-body); text-transform: uppercase; letter-spacing: .03em; color: var(--accent); }
.fc-practise small { font-size: var(--fs-body); color: var(--text-primary); }
.fc-practise i { font-style: normal; font-size: 20px; color: var(--accent); }
.fc-practise:hover { background: rgba(96, 18, 243, .16); }
.ir-skills-top { margin-bottom: 16px; }
.ir-skills-top > .ir-card { margin: 0; }

/* Your eyes 숫자의 뜻 · Also 로 내려간 기술 칸 밝히기(2026-10-20 사용자 「수치의 의미」 · 「해당 섹션으로」) */
.ey-mean { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-primary); }
.ey-num small { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--text-dim, #56627A); }
.ir-skills-top .is-flash { animation: ir-flash 1.8s ease-out; border-radius: 12px; }
@keyframes ir-flash { 0%, 40% { box-shadow: 0 0 0 3px #7C3AED; } 100% { box-shadow: 0 0 0 3px transparent; } }

/* TOPIK 문제 유형 안내(js/topik-howto.js, 2026-10-24) — 풀기 전 예시 카드 · 문제 화면 지시문 아래 영어 한 줄 */
.th-box { width: min(520px, 100%); max-height: 88vh; overflow-y: auto; }
.th-title { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.th-type + .th-type { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-mid); }
.th-name { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; }
.th-ko { margin: 0; font-size: 15px; line-height: 1.55; }
.th-en { margin: 2px 0 10px; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.th-ex { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-mid); font-size: 15px; line-height: 1.6; }
.th-ex p { margin: 0 0 6px; }
.th-lbl { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.th-hear { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--accent-soft); }
.th-given { padding: 4px 8px; border-radius: 8px; background: var(--accent-soft); }
.th-opts { margin: 6px 0 8px; padding: 0; list-style: none; }
.th-opts li { padding: 3px 8px; border-radius: 8px; }
.th-opts li.is-ans { background: var(--accent-soft); font-weight: 600; }
.th-ok { color: var(--accent); }
.th-why { margin: 0 !important; font-size: 14px; color: var(--text-dim); }
.th-why b { color: var(--text-primary); margin-right: 4px; }
.th-wrap .ui-dlg-btns { margin-top: 16px; }
.ie-instr .th-line { margin-top: 2px; }
.th-see { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* General Training 읽기 묶음(ielts.js ieltsGtGroupsHtml, 2026-10-24) — 자리 머리 한 줄 · 카드 셋 · Show all */
.ie-gt-sec + .ie-gt-sec { margin-top: 22px; }
.ie-gt-head { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.ie-gt-about { font-weight: 400; color: var(--text-dim); }
.ie-gt-more { display: block; margin: 10px 0 0 auto; padding: 6px 2px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* 처음 온 손님의 소개 화면(js/intro.js, 2026-10-24) — 홈 위 전체 화면 한 장 */
.rt-intro { position: fixed; inset: 0; z-index: 24000; display: flex; align-items: center; justify-content: center; overflow-y: auto;
  padding: 24px 16px; box-sizing: border-box; background: var(--bg-primary, #F7F7FB); }
.rt-intro-box { width: min(520px, 100%); margin: auto; text-align: left; color: var(--text-primary); }
.rt-intro-brand { margin: 0 0 18px; font-size: 18px; font-weight: 800; color: var(--accent); letter-spacing: -.01em; }
.rt-intro-title { margin: 0 0 12px; font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
.rt-intro-sub { margin: 0 0 22px; font-size: 16px; line-height: 1.55; color: var(--text-dim); }
.rt-intro-lead { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.rt-intro-gains { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rt-intro-gains li { padding: 11px 14px; border-radius: 12px; background: var(--accent-soft); font-size: 15px; color: var(--text-dim); }
.rt-intro-gains b { color: var(--text-primary); }
.rt-intro-setup { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--text-dim); }
.rt-intro-go { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 14px; background: var(--accent); color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.rt-intro-go:hover { background: var(--accent-hover); }
.rt-intro-in { display: block; margin: 14px auto 0; padding: 6px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
@media (max-width: 600px) { .rt-intro-title { font-size: 26px; } }