/*
 * 그로잉 학생 화면 스타일. 색·글꼴 토큰과 화면 요소 규칙은 디자인 v0.3 시안(design/src/prototype.template.html)에서 가져왔다.
 * v0.3(총괄 DEV-I-003, 디자인팀 태블릿 규칙): 기기 이름이 아니라 학생 화면의 실제 폭으로 배치한다.
 *   풀이 화면(.solve)은 컨테이너 쿼리(app)로, 확인 창(#ov-root, 화면 전체 폭)은 같은 기준의 미디어 쿼리로.
 *   960px 이상 본문+오른쪽 목록 / 미만 한 단+아래 바+목록 패널 · 700px 이상 확인 창 가운데 · 600px 이상 본문 여백 24·32px
 *   · 480px 미만 확인 창 단추 세로 · pointer: coarse 누르는 곳 44px 이상. 폭이 바뀌어도 화면을 다시 그리지 않는다.
 */

/* Layout: 왼쪽 조작대(시나리오·서버 흉내) + 오른쪽 기기 화면. 기기 화면 안이 실제 학생 화면 시안이다. */
:root {
  --brand: #1a69ad;          /* 로고 파랑 */
  --brand-ink: #0f4c82;
  --brand-soft: #eaf2fa;     /* GR 지점 묶음 바탕 */
  --brand-line: #8db3d6;     /* 미선택 점선 */
  --bg: #f3f5f8;             /* 시안 바깥 바탕 (파랑 쪽으로 기운 회색) */
  --surface: #ffffff;
  --ink: #17202b;
  --muted: #5b6878;
  --line: #d9e0e8;
  --warn: #a14d00;           /* 저장 안 됨·충돌·제출 거부 위치. 라이트에서 --warn-soft 위 대비 5.3:1(이전 #b85a00은 4.27:1로 4.5 미달) */
  --warn-soft: #fff3e6;
  --lock: #7b8794;
  --lock-soft: #eef1f4;
  --focus: #1a69ad;
  --on-accent: #ffffff;      /* 파랑·주황 바탕 위 글자 */
  --shadow: 0 1px 2px rgba(16, 36, 61, .06), 0 8px 24px rgba(16, 36, 61, .08);
  --f-ui: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --f-text: "Source Serif 4", "Noto Serif", Georgia, "Apple SD Gothic Neo", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #6fa8de; --brand-ink: #a9cdf0; --brand-soft: #18293b; --brand-line: #4f7aa3;
    --bg: #0f141a; --surface: #161d25; --ink: #e6ecf2; --muted: #9aa8b7; --line: #2a3542;
    --warn: #f0a050; --warn-soft: #33250f; --lock: #8a96a3; --lock-soft: #1f2730; --focus: #8cc0f0; --on-accent: #0b1622;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand: #6fa8de; --brand-ink: #a9cdf0; --brand-soft: #18293b; --brand-line: #4f7aa3;
  --bg: #0f141a; --surface: #161d25; --ink: #e6ecf2; --muted: #9aa8b7; --line: #2a3542;
  --warn: #f0a050; --warn-soft: #33250f; --lock: #8a96a3; --lock-soft: #1f2730; --focus: #8cc0f0; --on-accent: #0b1622;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-ui); font-size: 14px; line-height: 1.5; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- 학생 화면 공통 ---------- */
.ahead { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); min-height: 56px; }
.ahead .mark { width: 26px; height: 26px; border-radius: 50% 50% 0 50%; background: var(--brand); flex: none; transform: rotate(0deg); }
.ahead .t { font-weight: 600; font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahead { flex-wrap: nowrap; min-width: 0; }
/* 320px급: 상태 칩·지점 단추·나가기가 제목 옆에 다 못 들어가 문서가 8px 넘치던 것을 줄바꿈으로 해결(DEV-I-021 후속 B) */
@media (max-width: 360px) { .solve .ahead { flex-wrap: wrap; row-gap: 4px; } .solve .ahead .t { flex: 1 1 120px; } }
.chip { font-size: 12px; border-radius: 999px; padding: 3px 10px; border: 1px solid var(--line); white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.chip[data-k="saving"] { color: var(--brand); border-color: var(--brand-line); }
.chip[data-k="ok"] { color: var(--muted); }
.chip[data-k="warn"] { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); font-weight: 600; }
.chip[data-k="lock"] { color: var(--lock); background: var(--lock-soft); }
.chip button { border: 0; background: none; padding: 0; text-decoration: underline; color: inherit; font-weight: 600; }
.band { padding: 8px 16px; font-size: 13px; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--line); }
.band[data-k="warn"] { background: var(--warn-soft); color: var(--warn); }
.band[data-k="info"] { background: var(--brand-soft); color: var(--brand-ink); }
.band button { margin-left: auto; border: 1px solid currentColor; background: none; border-radius: 6px; padding: 2px 10px; color: inherit; font-weight: 600; white-space: nowrap; }

.body { flex: 1; overflow: auto; min-height: 0; }
.solve { container: app / inline-size; }
.cols { display: grid; gap: 0; }
.main { padding: 16px; display: grid; gap: 20px; align-content: start; min-width: 0; }
/* 좁은 폭: 목록은 머리글 '목록' 단추로 여는 패널 */
.side { display: none; }
.list-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 0 10px; min-height: 36px; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
.list-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.list-h h2 { margin: 0; font-size: 17px; }
.list-backdrop { display: none; position: fixed; inset: 0; background: rgba(12, 22, 34, .45); z-index: 3; }
.solve[data-list="open"] .list-backdrop { display: block; }
.solve[data-list="open"] .side {
  display: grid; align-content: start; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  max-height: 85%; overflow: auto; background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: var(--shadow);
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
}
@container app (min-width: 600px) { .main { padding: 24px 32px; } }
@container app (min-width: 700px) {
  .solve[data-list="open"] .side { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(420px, calc(100% - 32px)); border-radius: 12px; }
}
/* 넓은 폭(960px 이상): 본문 + 오른쪽 목록. 목록 패널을 연 채 넓어져도 오른쪽 목록으로 보이고 입력할 수 있다 */
@container app (min-width: 960px) {
  .cols { grid-template-columns: minmax(0, 1fr) 300px; min-height: 100%; }
  .main { padding: 28px 40px; max-width: 800px; justify-self: center; width: 100%; }
  .side, .solve[data-list="open"] .side {
    display: grid; align-content: start; gap: 14px; position: static; transform: none; width: auto; max-height: none; overflow: visible;
    border-radius: 0; box-shadow: none; z-index: auto; border-left: 1px solid var(--line); padding: 24px 20px; background: var(--bg);
  }
  .gr { font-size: 18px; }
  .foot, .list-btn, .list-h, .solve[data-list="open"] .list-backdrop { display: none !important; }
}

.item { display: grid; gap: 12px; }
.item-h { display: flex; align-items: baseline; gap: 2px 8px; flex-wrap: wrap; }   /* F2: 위치 문구가 길면 다음 줄로 */
.item-h .no { font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; flex: none; white-space: nowrap; }   /* F2: '3번'이 갈라지지 않게 */
.item-h .q { font-weight: 600; }
.loc { font-size: 12.5px; color: var(--muted); }

/* ---------- GR 문장 ---------- */
.gr { font-family: var(--f-text); font-size: 17px; line-height: 2.25; overflow-wrap: break-word; }
.pt {
  display: inline; padding: 3px 4px; margin: 0 2px; border-radius: 6px;
  background: var(--brand-soft); border: 1.5px dashed var(--brand-line);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: border-color .15s, background .15s;
}
.pt-no { font-family: var(--f-ui); font-size: 12.5px; font-weight: 700; color: var(--on-accent); background: var(--brand); border-radius: 999px; padding: 1px 7px; margin-right: 3px; display: inline-flex; align-items: center; gap: 3px; vertical-align: 2px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.pt-flag { display: inline-block; font-size: 11px; line-height: 1; }
.br, .sep { color: var(--muted); }
.pt-head { white-space: nowrap; }
.opt { border: 0; background: none; padding: 2px 3px; border-radius: 4px; font-family: inherit; font-size: inherit; line-height: 1.4; color: var(--ink); min-height: 32px; text-decoration: none; text-align: left; white-space: normal; overflow-wrap: anywhere; max-width: calc(100% - 16px); vertical-align: baseline; }
/* 긴 보기는 단추 안에서 줄바꿈. 번호 배지·[ 와 첫 보기, 마지막 보기와 ] 는 붙여 둔다. 16px: 지점 묶음의 안쪽 여백·테두리 */
/* 여러 줄 보기는 첫 줄을 문장 기준선에 맞춤(지원 브라우저만. 미지원이면 마지막 줄 기준) */
.opt { baseline-source: first; }
/* F5(DEV-I-004): 배지('12 ! 확인' 등) 폭을 고정값으로 빼던 방식 대신, 번호 배지·[·첫 보기를 inline-flex 한 줄로 두고
   첫 보기가 남은 폭 안에서 줄바꿈한다(마지막 보기·] 묶음과 같은 방식). 배지 폭이 달라도 본문을 넘지 않는다 */
.pt-head { display: inline-flex; align-items: baseline; max-width: calc(100% - 16px); vertical-align: baseline; }
.pt-head .pt-no, .pt-head .br { flex: none; }
.pt-head .opt { min-width: 0; max-width: none; }
.pt-tail { display: inline-flex; align-items: baseline; gap: .25em; max-width: calc(100% - 16px); vertical-align: baseline; }
.pt-tail .opt { min-width: 0; max-width: none; }
.opt:hover { background: var(--brand-soft); }
.opt[aria-checked="true"] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; color: var(--brand-ink); }
.opt[aria-checked="true"]::before { content: "✓\00a0"; font-family: var(--f-ui); font-size: .8em; }
.opt:disabled { cursor: default; color: inherit; }
.pt[data-s="dirty"], .pt[data-s="saving"], .pt[data-s="saved"] { border-style: solid; border-color: var(--brand); }
.pt[data-s="failed"], .pt[data-s="conflict"] { border: 2px solid var(--warn); background: var(--warn-soft); }
.pt[data-s="failed"] .pt-no, .pt[data-s="conflict"] .pt-no { background: var(--warn); }
.pt[data-s="locked"] { border: 1px solid var(--lock); background: var(--lock-soft); }
.pt[data-s="locked"] .pt-no { background: var(--lock); }
.pt.flash { border: 2px dashed var(--warn); animation: flash 1s 1; }
@keyframes flash { 50% { background: var(--warn-soft); } }
.spin { width: 9px; height: 9px; border: 2px solid color-mix(in srgb, var(--on-accent) 45%, transparent); border-top-color: var(--on-accent); border-radius: 50%; animation: sp .8s linear infinite; display: inline-block; }
@keyframes sp { to { transform: rotate(360deg); } }
.ring { width: 8px; height: 8px; border: 1.5px solid var(--on-accent); border-radius: 50%; display: inline-block; }

/* ---------- 일반 문항 ---------- */
.mc { display: grid; gap: 8px; }
.mc .o { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; min-height: 48px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 10px 12px; }
.mc .o[aria-checked="true"] { border: 2px solid var(--brand); padding: 9px 11px; font-weight: 600; }
.mc .o .c { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--muted); display: grid; place-items: center; font-size: 12px; flex: none; }
.mc .o[aria-checked="true"] .c { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }
.mc .dk { justify-self: start; border: 0; background: none; color: var(--muted); text-decoration: underline; padding: 6px 2px; min-height: 44px; }
.mc .dk[aria-pressed="true"] { color: var(--brand-ink); font-weight: 700; }
.mc .dk[aria-pressed="true"]::before { content: "✓ "; }
.st { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; min-height: 18px; }
.st[data-s="failed"], .st[data-s="conflict"], .st[data-s="err"] { color: var(--warn); font-weight: 600; }
.box { border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 12px; }
.box.flash { border: 2px dashed var(--warn); }
.omr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.omr input { width: 72px; height: 44px; font-size: 20px; text-align: center; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); font-variant-numeric: tabular-nums; }
.omr input[data-err="1"] { border-color: var(--warn); }

/* ---------- 아래 바 ---------- */
.foot { border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; align-items: center; background: var(--surface); }
.foot .prog { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.foot .next { border: 1px solid var(--line); background: none; border-radius: 8px; padding: 0 12px; height: 44px; }
.primary { background: var(--brand); color: var(--on-accent); border: 0; border-radius: 8px; height: 44px; padding: 0 18px; font-weight: 600; margin-left: auto; }
.primary:disabled { opacity: .45; cursor: not-allowed; }
.secondary { background: none; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; height: 44px; padding: 0 16px; }
.toggle-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.toggle { background: none; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; min-height: 44px; padding: 0 14px; }
.toggle.on { border-width: 2px; font-weight: 700; background: var(--line); }
.toggle:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* ---------- 데스크톱 지점 목록 ---------- */
.side h4 { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.plist { display: grid; gap: 4px; }
.plist button { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; text-align: left; border: 1px solid transparent; background: var(--surface); border-radius: 8px; padding: 8px 10px; }
.plist button:hover { border-color: var(--brand-line); }
.plist .n { font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.plist .v { font-family: var(--f-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist .v.empty { color: var(--muted); font-family: var(--f-ui); font-size: 13px; }
.plist .s { font-size: 12px; color: var(--muted); }
.plist .s[data-s="failed"], .plist .s[data-s="conflict"] { color: var(--warn); font-weight: 600; }
.side .primary { width: 100%; margin: 0; }

/* ---------- 덮개 화면 (재로그인·충돌·제출) ---------- */
.ov { position: absolute; inset: 0; background: rgba(12, 22, 34, .45); display: flex; align-items: flex-end; justify-content: center; z-index: 5; }
.sheet { background: var(--surface); width: 100%; max-width: 520px; border-radius: 16px 16px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 14px; max-height: 90%; overflow: auto; }
.sheet h2 { margin: 0; font-size: 18px; text-wrap: balance; }
.sheet p { margin: 0; color: var(--muted); }
.sheet .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.sheet .acts .primary { margin-left: 0; flex: 1; }
.sheet .acts .secondary { flex: 1; }
/* 확인 창은 화면 전체 위(#ov-root)에 뜨므로 같은 폭 기준을 미디어 쿼리로 쓴다 */
@media (min-width: 700px) { .ov { align-items: center; } .sheet { border-radius: 12px; } }
/* F1(DEV-I-004): .sheet .acts .primary/.secondary { flex: 1 }이 세로 쌓기보다 구체성이 높아 flex-basis 0이 높이에 적용돼 단추가 21~23px로 눌렸다.
   같은 구체성으로 덮고 높이 44px을 명시한다 */
@media (max-width: 479px) { .sheet .acts { flex-direction: column; } .sheet .acts > *, .sheet .acts .primary, .sheet .acts .secondary { flex: none; width: 100%; min-height: 44px; } }
.cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }   /* F4: 긴 한 단어가 칸 최소 폭을 늘리지 않게 */
.cmp div { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 4px; }
.cmp b { font-family: var(--f-text); font-size: 18px; overflow-wrap: anywhere; }
.cmp small { color: var(--muted); }
.ctx { font-family: var(--f-text); font-size: 15px; background: var(--bg); border-radius: 8px; padding: 10px 12px; color: var(--ink); }
.ctx mark { background: none; border-bottom: 2px dashed var(--warn); color: inherit; padding: 0 2px; }
.rej { display: grid; gap: 8px; }
.rej .g { display: grid; gap: 6px; }
.rej .g b { font-size: 14px; }
.rej .g div { display: flex; flex-wrap: wrap; gap: 6px; }
.rej .g button { border: 1px solid var(--warn); color: var(--warn); background: none; border-radius: 6px; padding: 4px 10px; min-height: 36px; font-weight: 600; }
.field { display: grid; gap: 4px; }
.field label { font-size: 13px; font-weight: 600; }
.field input { height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: var(--surface); }
.err { color: var(--warn); font-size: 13px; font-weight: 600; min-height: 20px; margin: 0; }

/* ---------- 전체 화면 (로그인·상태·완료) ---------- */
.full { flex: 1; overflow: auto; display: grid; place-items: center; padding: 24px 20px; }
.card { width: 100%; max-width: 380px; display: grid; gap: 16px; }
.card h2 { margin: 0; font-size: 21px; text-wrap: balance; }
.card p { margin: 0; color: var(--muted); }
.card .brand-text { justify-self: start; font-size: 20px; font-weight: 800; color: var(--brand, inherit); }
.card .primary { margin-left: 0; width: 100%; }
.card .secondary { width: 100%; }
.badge-status { justify-self: start; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: var(--lock-soft); color: var(--muted); }
.note { border: 1.5px dashed var(--brand-line); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.toast { position: absolute; left: 50%; transform: translateX(-50%); bottom: 80px; background: var(--ink); color: var(--surface); border-radius: 8px; padding: 8px 14px; font-size: 13px; z-index: 8; max-width: 90%; }
.clr { font-family: var(--f-ui); font-size: 12.5px; color: var(--muted); border: 0; background: none; text-decoration: underline; text-underline-offset: 3px; padding: 4px 6px; min-height: 32px; vertical-align: 1px; }
.clr:hover { color: var(--ink); }
.clr:disabled { opacity: .5; cursor: default; }
.mc-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.exit { border: 0; background: none; color: var(--muted); font-size: 13px; padding: 6px 4px; min-height: 44px; white-space: nowrap; }
.notice { background: var(--warn-soft); color: var(--warn) !important; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; }
.pt-static { border-style: solid; border-color: var(--line); background: var(--lock-soft); color: var(--muted); }
.pt-static .pt-no { background: var(--lock); }
.static-note { font-family: var(--f-ui); font-size: 11.5px; color: var(--muted); margin: 0 4px; white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 제품 화면 틀 (시안의 기기 틀 대체) ---------- */
html, body { height: 100%; margin: 0; }
#app { min-height: 100%; height: 100dvh; display: flex; flex-direction: column; position: relative; background: var(--surface); }
@media (min-width: 1281px) { #app { max-width: 1280px; margin: 0 auto; border-inline: 1px solid var(--line); } }
.ov { position: fixed; }
.toast { position: fixed; }
.pt + .clr { margin-left: 2px; }
.loading { padding: 24px 16px; color: var(--muted); }
.devnote { font-size: 12px; color: var(--muted); border-top: 1px dashed var(--line); padding: 8px 16px; }
.solve { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.form-stack { display: grid; gap: 12px; }
[hidden] { display: none !important; }
.form-stack .primary { width: 100%; margin-left: 0; }

/* ---------- v0.2: 과제 목록·정보, 안내, 입력 방식 ---------- */
.list-main { padding: 16px; display: grid; gap: 14px; max-width: 720px; width: 100%; margin: 0 auto; align-content: start; }
.list-main h2 { margin: 4px 0; font-size: 20px; }
.alist { display: grid; gap: 10px; }
.acard { display: grid; gap: 4px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 14px; }
.acard:hover { border-color: var(--brand-line); }
.acard .at { font-weight: 700; font-size: 16px; }
.acard .ameta { font-size: 13px; color: var(--muted); }
.badge-status[data-s="in-progress"] { background: var(--brand-soft); color: var(--brand-ink); }
.badge-status[data-s="submitted"] { background: var(--lock-soft); color: var(--ink); }
.info { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; }
.info dt { color: var(--muted); font-size: 13px; }
.info dd { margin: 0; }
.notice-ok { background: var(--brand-soft); color: var(--brand-ink); border-radius: 8px; padding: 10px 12px; margin: 0; }
.guide { display: grid; gap: 2px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.guide b { color: var(--ink); font-size: 15px; }
.guide .mem { font-size: 12px; }
.instr { margin: 0; font-size: 14px; color: var(--ink); font-weight: 600; }
.modebar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 13px; }
.modebar .seg button { min-height: 40px; }
.modebar .hint { color: var(--warn); font-weight: 600; }
.omr-wrap { display: grid; gap: 4px; }
/* 터치 기기(pointer: coarse): 누르는 곳 44px 이상, GR 줄 간격 확대 */
@media (pointer: coarse) {
  .gr { line-height: 2.75; }
  .opt { min-height: 44px; padding: 8px 6px; }
  .clr { min-height: 44px; padding: 10px 8px; }
  .list-btn, .exit, .band button { min-height: 44px; }
  /* F3(DEV-I-004): 저장 칩 안 '보기'·'다시 시도'. 가상 요소로 넓히지 않고 단추 상자 자체를 44×44 이상으로 키운다
     (누르는 곳 = 단추 상자). 음수 여백으로 칩 모양과 머리글 배치 폭은 그대로 둔다: 세로는 칩 위아래로,
     가로는 칩 자신의 안쪽 여백(10px)과 앞의 '·' 쪽으로만 넓어지고 칩 테두리 밖(옆 단추 쪽)으로는 나가지 않는다 */
  .chip button { min-height: 44px; min-width: 44px; margin: -13px -10px; padding: 0 10px; }
  .plist button { min-height: 48px; }
  .rej .g button { min-height: 44px; }
  .modebar .seg button { min-height: 44px; }
}

/* ---------- v0.4: GR 결과 화면(총괄 DEV-I-007). 디자인 결과 화면 v0.1 result.css를 그대로 붙이고, 총괄 결정 반영분을 아래에 더함 ---------- */
.result { container: app / inline-size; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.result .cols { display: grid; }
.rmain { padding: 16px; display: grid; gap: 18px; align-content: start; min-width: 0; }
.rside { padding: 0 16px 24px; display: grid; gap: 10px; align-content: start; min-width: 0; }
@container app (min-width: 600px) { .rmain { padding: 24px 32px; } .rside { padding: 0 32px 28px; } }
@container app (min-width: 960px) {
  .result .cols { grid-template-columns: minmax(0, 1fr) 300px; min-height: 100%; }
  .rmain { padding: 28px 40px; max-width: 800px; justify-self: center; width: 100%; }
  .rside { border-left: 1px solid var(--line); padding: 24px 20px; background: var(--bg); }
  .rgr { font-size: 18px; }
}

/* 제출·채점 상태 */
.rhead { display: grid; gap: 2px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.rhead b { color: var(--ink); font-size: 15px; }
.rstat { border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 8px; background: var(--surface); }
.rstat h2 { margin: 0; font-size: 18px; text-wrap: balance; }
.rstat p { margin: 0; color: var(--muted); }
.rstat[data-k="pending"] { border-style: dashed; border-color: var(--lock); }
.rstat[data-k="partial"] { border-color: var(--brand-line); }
.rstat[data-k="complete"] { border-color: var(--brand); }
.rcount { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.rcount span { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rcount [data-r="correct"] { color: var(--brand-ink); border-color: var(--brand-line); }
.rcount [data-r="incorrect"] { color: var(--warn); border-color: var(--warn); }
.rcount [data-r="pending"] { color: var(--muted); border-style: dashed; }
.rcheck { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 12.5px; color: var(--muted); }
.rcheck .secondary { height: 44px; }
.rcheck .secondary:disabled { opacity: .5; }

/* 문장 속 지점 결과: 고른 보기 하나와 정오 표시만(다른 보기·정답 문구는 보이지 않음) */
.rgr { font-family: var(--f-text); font-size: 17px; line-height: 2.25; overflow-wrap: break-word; margin: 0; }
.rp {
  display: inline; padding: 3px 6px; margin: 0 2px; border-radius: 6px; border: 1.5px solid var(--line);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; white-space: normal;
}
/* 복습 패널: 보기·제출·상태·근거 패널을 담는 지점은 블록 흐름으로 각자 공간을 차지한다(인라인 상자가 조각나 뒤 지문을 덮던 결함) */
.rp.rp-open { display: block; line-height: 1.6; margin: 10px 0; padding: 10px 12px; clear: both; }
.rp.rp-open > .toggle-group { margin: 8px 0; }
.rp.rp-open > .primary { display: inline-block; margin: 4px 8px 4px 0; }
.rp.rp-open > .ev-note { display: block; margin: 6px 0; line-height: 1.5; }
.rp.rp-open > .ev-box { margin: 8px 0; }
.rp .pt-no { margin-right: 4px; }
.rp .sel { font-weight: 600; overflow-wrap: anywhere; }
/* 번호와 첫 답이 줄바꿈으로 갈라지지 않게 묶고, 긴 복수 답은 그 뒤에서만 줄바꿈한다 */
.rp .pt-no { white-space: nowrap; }
.rp .pt-no + .sel { display: inline-block; max-width: calc(100% - 3.5em); vertical-align: top; }
.rp .tag { font-family: var(--f-ui); font-size: 12px; font-weight: 700; margin-left: 6px; white-space: nowrap; vertical-align: 1px; }
.rp[data-r="correct"] { border-color: var(--brand); background: var(--brand-soft); }
.rp[data-r="correct"] .tag { color: var(--brand-ink); }
.rp[data-r="incorrect"] { border: 2px solid var(--warn); background: var(--warn-soft); }
.rp[data-r="incorrect"] .pt-no { background: var(--warn); }
.rp[data-r="incorrect"] .tag { color: var(--warn); }
.rp[data-r="pending"] { border-style: dashed; border-color: var(--lock); background: var(--lock-soft); }
.rp[data-r="pending"] .pt-no { background: var(--lock); }
.rp[data-r="pending"] .tag { color: var(--muted); font-weight: 600; }
.rp.changed { outline: 2px dashed var(--warn); outline-offset: 2px; }

/* 지점별 결과 목록 */
.rside h3 { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.rlist { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rlist li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 44px; }
.rlist .n { font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.rlist .v { font-family: var(--f-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rlist .s { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.rlist li[data-r="correct"] .s { color: var(--brand-ink); }
.rlist li[data-r="incorrect"] { border-color: var(--warn); }
.rlist li[data-r="incorrect"] .s { color: var(--warn); }
.rlist li[data-r="pending"] { border-style: dashed; }
.rlist li[data-r="pending"] .s { color: var(--muted); font-weight: 600; }
.rnote { font-size: 12.5px; color: var(--muted); margin: 0; }
.rside .secondary, .rside .primary { width: 100%; margin: 0; }
.rfoot { display: grid; gap: 8px; }
/* 총괄 결정: 다시 확인 실패는 오류 카드(지난 정오·집계 숨김). 결과 대기(점선 회색)와 구분되게 경고 색 */
.rstat[data-k="error"] { border: 2px solid var(--warn); background: var(--warn-soft); }
.rstat[data-k="error"] h2 { color: var(--warn); }
@media (pointer: coarse) { .rcheck .secondary, .rside .secondary, .result .exit { min-height: 44px; } }

/* ---- DEV-I-010 GR 오답 근거 문제 화면(디자인 근거 문제 화면 v0.1 evidence.css 그대로). 기존 규칙 변경 없음, P1(.rp)은 그대로 ---- */
.ev-sep { border: 0; border-top: 1px solid var(--line); margin: 0; }
.ev-entry { display: grid; gap: 6px; }
.ev-entry .primary { margin: 0; width: 100%; }
.ev-entry p { margin: 0; font-size: 12.5px; color: var(--muted); }
@container app (min-width: 600px) { .ev-entry .primary { width: auto; justify-self: start; padding: 0 22px; } }

/* 원래 문장(참고): 지점은 원래 문제처럼 보기 묶음만. 정답으로 채우지 않고 정오·근거 구절을 넣지 않는다 */
.evref { border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; background: var(--bg); }
.evref h3 { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.evref p { margin: 0; font-family: var(--f-text); font-size: 16px; line-height: 2.1; overflow-wrap: break-word; }
.refpt { display: inline; padding: 2px 5px; margin: 0 2px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.refpt .pt-no { background: var(--lock); margin-right: 3px; }
.refpt .nb { white-space: nowrap; }
.refpt.on { border: 1.5px solid var(--brand); color: var(--ink); }
.refpt.on .pt-no { background: var(--brand); }

/* 근거 문제 카드 */
.evcard { border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 12px; background: var(--surface); scroll-margin-top: 12px; }
.evcard[data-s="answered"] { border-color: var(--brand-line); }
.evcard[data-s="on_hold"], .evcard[data-s="question_unavailable"], .evcard[data-s="cancelled"] { border-style: dashed; border-color: var(--lock); background: var(--lock-soft); }
.evhead { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.evhead h2 { margin: 0; font-size: 16px; }
.evhead .pt-no { margin: 0; }
.evchip { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.evchip[data-s="open"] { color: var(--brand-ink); border-color: var(--brand-line); background: var(--brand-soft); }
.evchip[data-s="answered"] { color: var(--ink); }
.evchip[data-s="on_hold"], .evchip[data-s="question_unavailable"], .evchip[data-s="cancelled"] { border-style: dashed; }
.evmine { margin: 0; font-size: 13px; color: var(--muted); }
.evmine b { font-family: var(--f-text); color: var(--ink); font-size: 15px; }
.evstem { margin: 0; font-weight: 600; font-size: 15px; word-break: keep-all; overflow-wrap: anywhere; }
.evbody { margin: 0; color: var(--muted); word-break: keep-all; overflow-wrap: anywhere; }
.evbody b { color: var(--ink); }

.evopts { display: grid; gap: 8px; margin: 0; padding: 0; }
.evo {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; text-align: left;
  min-height: 48px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  font-size: 15px; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; white-space: normal;
}
.evo .c { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--muted); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; margin-top: 1px; }
.evo .t { min-width: 0; }
.evo .mine { display: block; font-size: 12px; font-weight: 700; color: var(--brand-ink); margin-top: 4px; }
.evo[aria-checked="true"] { border: 2px solid var(--brand); padding: 10px 11px; background: var(--brand-soft); }
.evo[aria-checked="true"] .c { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }
.evo:disabled { cursor: default; color: inherit; }
.evo:disabled:not([aria-checked="true"]) { opacity: .72; }

.evres { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; }
.evres .r { font-weight: 700; border-radius: 999px; padding: 3px 12px; border: 1.5px solid var(--line); white-space: nowrap; }
.evres .r[data-r="correct"] { color: var(--brand-ink); border-color: var(--brand); background: var(--brand-soft); }
.evres .r[data-r="incorrect"] { color: var(--warn); border: 2px solid var(--warn); background: var(--warn-soft); }
.evres small { color: var(--muted); }

.evacts { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.evacts .primary { margin: 0; }
.evacts .draft { font-size: 12.5px; color: var(--muted); flex: 1 1 200px; }
.evstate { border-radius: 8px; padding: 10px 12px; font-size: 13.5px; display: grid; gap: 8px; }
.evstate[data-k="info"] { background: var(--brand-soft); color: var(--brand-ink); }
.evstate[data-k="warn"] { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.evstate .secondary { justify-self: start; height: 44px; background: var(--surface); color: var(--ink); font-weight: 400; }
@container app (max-width: 479px) { .evacts .primary { width: 100%; } }

/* 오른쪽 단(넓은 폭) / 아래(좁은 폭): 근거 문제 목록 */
.evlist { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.evlist button { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; width: 100%; text-align: left; min-height: 48px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 8px 10px; }
.evlist .n { font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.evlist .s { font-size: 12.5px; color: var(--muted); }
@media (pointer: coarse) { .evo { min-height: 52px; } }
/* 제품 보강: 터치 기기에서 근거 화면 단추 44px */
@media (pointer: coarse) { .evidence .secondary, .evidence .exit, .evacts .primary, .ev-entry .primary { min-height: 44px; } }

/* ---------- v0.5: 내 단어장 목록·상세(총괄 DEV-I-013, 디자인 단어장 v0.1). 한 단, 최대 720px(list-main) ---------- */
.lhead { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.lhead h2 { flex: 1; min-width: 0; }
.lhead .secondary { min-height: 44px; }
.words { word-break: keep-all; }
.words h2 { overflow-wrap: anywhere; }
.wlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wrow { width: 100%; min-height: 44px; display: grid; gap: 4px; text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 12px 14px; }
.wrow:hover:not(:disabled) { border-color: var(--brand-line); }
.wrow:disabled { opacity: .55; cursor: not-allowed; }
.wrow:focus-visible, .words [tabindex="-1"]:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.whw { font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.wmn { color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.wmeta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.wforms { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.wform { white-space: normal; overflow-wrap: anywhere; }
.wcount { white-space: nowrap; }
/* 근거 질문 줄기: 첫 줄은 질문, 둘째 줄은 지문의 해당 문장(대상 표현은 【】) — 줄바꿈을 보존한다 */
.evstem, .ev-stem { white-space: pre-line; overflow-wrap: anywhere; }
.wbusy { margin: 0; font-size: 13px; color: var(--muted); }
.wempty { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); }
.whead { display: grid; gap: 6px; }
.whead h2 { margin: 0; font-size: 24px; }
.wmeaning { margin: 0; display: flex; gap: 8px; align-items: baseline; overflow-wrap: anywhere; }
.wlab { font-size: 12.5px; color: var(--muted); flex: none; }
.wsub { margin: 4px 0 0; font-size: 15px; }
.wsrc { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; background: var(--surface); }
.wsform { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.wsrc .info dd { overflow-wrap: anywhere; min-width: 0; }
.wfoot { display: flex; flex-wrap: wrap; gap: 8px; }
.wfoot .secondary { min-height: 44px; }
@media (max-width: 360px) { .wsrc .info { grid-template-columns: 1fr; gap: 2px; } .wsrc .info dd { margin-bottom: 6px; } }

/* ---------- v0.6: 단어 시험(DEV-I-020). 한 단(list-main, 최대 720px), 모바일 우선, 터치 44px ---------- */
.quiz { word-break: keep-all; }
.quiz h2, .quiz h3 { overflow-wrap: anywhere; }
.quiz [tabindex="-1"]:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.qlead { margin: 0; color: var(--muted); font-size: 14px; }
.qdemo { margin: 0; padding: 8px 12px; border: 1px solid var(--warn); background: var(--warn-soft); color: var(--warn); border-radius: 8px; font-size: 13px; font-weight: 600; }
.qstart { margin-left: 0; width: 100%; }
.qprog { margin: 0; font-size: 13px; color: var(--muted); }
.qcard { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.qhw { margin: 0; font-size: 24px; overflow-wrap: anywhere; }
.qprompt { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.qopts { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.qopts legend { padding: 0; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.qopt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; overflow-wrap: anywhere; }
.qopt[data-checked="true"] { border-color: var(--brand); background: var(--brand-soft); }
.qopt input { width: 22px; height: 22px; flex: none; margin: 0; }
.qopt:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.qopts:disabled .qopt { cursor: default; opacity: .8; }
.qconf .qopt { min-height: 44px; }
.qsubmit { margin-left: 0; width: 100%; }
.qhint { margin: 0; font-size: 12.5px; color: var(--muted); }
.qres { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); list-style: none; }
.qverdict { font-weight: 700; font-size: 13px; }
.qverdict[data-v="correct"] { color: var(--brand-ink); }
.qverdict[data-v="wrong"] { color: var(--warn); }
.qsep { margin: 0; font-size: 12.5px; color: var(--muted); }
.quiz .primary { margin-left: 0; }
@media (min-width: 600px) { .qstart, .qsubmit { width: auto; justify-self: start; padding: 0 22px; } }

/* Director content review */
.content-review{max-width:1000px;margin:0 auto;padding:24px;overflow-wrap:anywhere}
.content-review section,.review-row{padding:18px;margin:16px 0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}
.content-review header{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.review-field{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.content-review input,.content-review textarea,.content-review select{box-sizing:border-box;width:100%;min-width:0;padding:12px;border:1px solid var(--muted);border-radius:6px;font:inherit;background:var(--surface);color:var(--ink)}
.content-review pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}
.content-review button{margin:6px 8px 6px 0;min-height:44px}
@media(max-width:500px){.content-review{padding:12px}.content-review section,.review-row{padding:12px}}
.content-review input[type=file]{padding:10px;background:var(--lock-soft)}
.content-review input[type=checkbox]{width:auto;margin-right:8px}
.pdf-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.pdf-compare pre{margin:6px 0;padding:8px;background:var(--lock-soft);border-radius:6px}
.pdf-accepted{font-weight:700;color:var(--ok, #1d5c3a)}
.review-row summary{cursor:pointer;font-weight:600}
.manual-entry{margin:16px 0}
.manual-entry>summary{cursor:pointer;color:var(--muted)}
:root { --ok: #1d5c3a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ok: #8fd4a8; } }
:root[data-theme="dark"] { --ok: #8fd4a8; }

/* ---- 원장 인수 결함 ①: 신규 화면(정답·해설 보기, 오답·근거 다시 풀기)의 누락 스타일. 새 시안이 아니라 기존 토큰·.evcard 모양을 그대로 재사용 ---- */
.detail-point { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin: 8px 0; padding: 0; }
.detail-point > summary { cursor: pointer; font-weight: 700; padding: 12px 14px; min-height: 44px; display: flex; align-items: center; }
.detail-point[data-r="correct"] { border-color: var(--brand); }
.detail-point[data-r="incorrect"] { border: 2px solid var(--warn); }
.detail-point[data-r="pending"] { border-style: dashed; border-color: var(--lock); background: var(--lock-soft); }
.detail-point dl { margin: 0; padding: 0 14px 14px; display: grid; gap: 4px; }
.detail-point dt { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.detail-point dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.ev-box { display: grid; gap: 8px; margin: 8px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ev-note { display: inline-block; font-size: 12.5px; color: var(--muted); }
/* 긴 지문 복습: 지점 제출 결과는 해당 지점 단추 바로 옆(아래)에 둔다. 비어 있으면 공간을 차지하지 않는다 */
.pt-fb { display: block; font-size: 14px; font-weight: 600; margin: 6px 0; }
.pt-fb:empty { display: none; }
.pt-fb[data-ok="true"]::before { content: "✓ "; }
.pt-fb[data-ok="false"]::before { content: "✗ "; }

/* ---------- 공통 사이드바 (원장 요구: 접히는 메뉴, 브랜드=메인 복귀) ---------- */
:root { --nav-w: 248px; --nav-w-min: 68px; --bar-h: 52px; }
.gshell { display: contents; }
.gnav { position: fixed; inset: 0 auto 0 0; width: var(--nav-w); background: var(--lock-soft); border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 40; overflow: hidden; }
.nav-head { display: flex; align-items: center; min-height: 56px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.nav-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--brand-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.nav-g { width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--brand); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; }
.nav-list { flex: 1; overflow-y: auto; padding: 8px; display: grid; align-content: start; gap: 2px; }
.nav-group { margin: 8px 8px 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.nav-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-decoration: none; text-align: left; width: 100%; white-space: nowrap; }
.nav-item:hover { background: var(--brand-soft); }
.nav-item[aria-current="page"] { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
.nav-ic { width: 24px; flex: none; text-align: center; font-size: 16px; }
.nav-foot { border-top: 1px solid var(--line); padding: 8px; }
.nav-user { margin: 0 8px 4px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-bar { display: none; }
.nav-toggle { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 18px; }
.nav-scrim { display: none; }
body.has-shell #app { margin-left: var(--nav-w); }
body.nav-ready #app { transition: margin-left .15s; }
body.nav-ready .gnav { transition: width .15s; }
body.nav-ready .nav-bar { transition: left .15s; }
/* 데스크톱 접힘: 아이콘 레일. 토글 단추는 레일 맨 위(브랜드 아래)에 둔다 */
.gnav-desk-toggle { display: none; }
@media (min-width: 900px) {
  .nav-bar { display: flex; position: fixed; top: 8px; left: calc(var(--nav-w) + 8px); z-index: 41; background: none; }
  .nav-bar-title { display: none; }
  body.nav-collapsed { --nav-w: var(--nav-w-min); }
  body.nav-collapsed .nav-brand-text, body.nav-collapsed .nav-label, body.nav-collapsed .nav-group, body.nav-collapsed .nav-user { display: none; }
  body.nav-collapsed .nav-head { padding: 0 16px; }
  body.nav-collapsed .nav-item { padding: 0 20px; }
  body.has-shell #app > .ahead, body.has-shell #app > header { padding-left: 64px; } /* 토글 단추가 제목을 가리지 않게 */
}
@media (min-width: 900px) and (max-width: 1100px) { :root { --nav-w: 208px; } }
/* 사이드바가 있으면 본문 영역 = 화면 − 사이드바. 1280 상한은 본문에만 적용하고 사이드바 폭을 더해 넘치지 않게 한다 */
body.has-shell #app { min-width: 0; width: auto; }
@media (min-width: 1281px) { body.has-shell #app { max-width: none; margin-right: 0; border-inline-end: 0; } }
/* 폭 899px 이하(모바일·좁은 패드): 아이콘 레일 대신 닫힌 오버레이 패널 */
@media (max-width: 899px) {
  body.has-shell #app { margin-left: 0; padding-top: var(--bar-h); }
  .nav-bar { display: flex; align-items: center; gap: 10px; position: fixed; inset: 0 0 auto 0; height: var(--bar-h); padding: 4px 8px; background: var(--surface); border-bottom: 1px solid var(--line); z-index: 41; }
  .nav-bar-title { font-weight: 700; color: var(--brand-ink); }
  .gnav { width: min(280px, 85vw); transform: translateX(-100%); visibility: hidden; transition: transform .15s, visibility 0s .15s; z-index: 60; }
  body.nav-open .gnav { transform: none; visibility: visible; transition-delay: 0s; box-shadow: var(--shadow); }
  body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 50; }
}

/* 교사·원장 운영/검수 화면(헤더+main): 사이드바와 함께 쓸 때 여백·제목 정렬. 로그아웃·브랜드는 사이드바가 맡는다 */
body.has-shell #app > header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px 8px 64px; min-height: var(--bar-h); border-bottom: 1px solid var(--line); }
body.has-shell #app > header h1 { margin: 0; font-size: 18px; }
body.has-shell #app > header .brand-text, body.has-shell #app > header button { display: none; }
body.has-shell #app > main { padding: 16px; max-width: 960px; width: 100%; overflow-wrap: anywhere; }
@media (max-width: 899px) { body.has-shell #app > header { padding-left: 16px; } body.has-shell #app > main { padding: 12px; } }

/* ---------- 오답 복습 할 일(학생)·개입 필요 학생(교사). 빨강은 개입 경고에만 쓰고, 사유 문구·⚠ 아이콘을 함께 보인다 ---------- */
:root { --alert: #b3261e; --alert-soft: #fdecea; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --alert: #f2a29b; --alert-soft: #3a1714; } }
:root[data-theme="dark"] { --alert: #f2a29b; --alert-soft: #3a1714; }
.rtasks, .ivbox { margin: 12px 0 20px; }
.rt-panel { margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow-wrap: anywhere; }
.rtasks li, .ivrow { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; margin: 6px 0; list-style: none; }
.ivrow { border-color: var(--alert); background: var(--alert-soft); }
.iv-flag { color: var(--alert); font-weight: 700; }
.iv-reason { color: var(--ink); overflow-wrap: anywhere; }
.iv-sum { font-weight: 600; }
.ivbox ul, .rtasks ul { padding: 0; margin: 0; }

/* GR 복습: 풀지 않는 다른 지점은 등록된 원문 보기 그대로 빨간 글씨로 참조 표시(원장 요구, GR 한정). 오답 표시가 아니다. */
.ref-src { color: var(--alert); font-weight: 600; }
.ref-src::before { content: "⚑ "; font-size: 0.8em; }
.tabbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.tabbar .toggle { min-height: 44px; }
.rt-legend { font-size: 14px; margin: 8px 0; }
.rt-progress { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-weight: 700; margin: 4px 0 8px; }
.rt-progress .rt-pointno { background: var(--brand); color: var(--on-accent); border-radius: 999px; padding: 1px 10px; }

/* 학습량·오늘 목표 카드(홈). 태블릿 768/1024에서는 두 줄(새 학습/복습)을 나란히, 모바일은 세로로 쌓는다. */
.goal-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 12px 0 20px; background: var(--surface); color: var(--ink); }
.goal-card h3 { margin: 0 0 8px; }
.goal-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.goal-level { display: grid; gap: 4px; align-content: start; min-width: 0; }
.goal-level .toggle, .goal-level button { width: 100%; min-height: 44px; }
.goal-row { padding: 10px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.goal-row p { flex: 1 1 100%; margin: 0; }
.goal-row button { min-height: 44px; }
@media (min-width: 768px) { .goal-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .goal-card > h3, .goal-card > p, .goal-card > div[data-testid="goal-picker"] { grid-column: 1 / -1; } .goal-row { border-top: 1px solid var(--line); align-content: start; } }
@media (max-width: 479px) { .goal-levels { grid-template-columns: 1fr; } }

/* ---------- 가독성 정돈(원장 요구): 글자 위계·줄간격·카드 여백·버튼 정렬·PDF 필드 묶음. 기능·마크업·정책은 그대로, 큰 재설계 없음 ---------- */
:root { --fs-title: 20px; --fs-sub: 16px; --fs-body: 15px; --fs-small: 13px; --card-pad: 16px; --gap: 14px; }
body { font-size: var(--fs-body); line-height: 1.6; }
.list-main h2, .lhead h2, .rstat h2, .card h2 { font-size: var(--fs-title); line-height: 1.35; }
.list-main h3, .rside h3, .goal-card h3, .evhead h2 { font-size: var(--fs-sub); line-height: 1.4; }
.list-main p, .rstat p, .evbody, .detail-point dd { line-height: 1.65; }
.ameta, .loc, .rnote, .st { font-size: var(--fs-small); line-height: 1.5; }
/* 카드: 같은 안쪽 여백과 간격 */
.acard, .rstat, .evcard, .rt-panel, .ev-box, .box, .goal-card, .rtasks li, .ivrow, .wsrc { padding: var(--card-pad); }
.alist, .rtasks ul, .ivbox ul { gap: var(--gap); }
.acard { gap: 6px; }
.rtasks li, .ivrow { gap: 6px; margin: 8px 0; }
/* 목록 카드의 제목·메타·단추 정렬 */
.acard .at { line-height: 1.4; overflow-wrap: anywhere; }
.list-main .primary, .list-main .secondary, .rt-panel .primary, .rt-panel .secondary, .evacts .primary { margin: 0; }
.list-main .primary, .evacts .primary { justify-self: start; }
.evacts, .rcheck, .wfoot, .sheet .acts { gap: 8px 12px; align-items: center; }
/* 긴 지문(GR)·긴 보기: 줄간격 유지, 읽기 폭 제한 */
.gr, .rgr { line-height: 2.1; word-break: keep-all; overflow-wrap: anywhere; }
.opt { overflow-wrap: anywhere; word-break: keep-all; }
.evref p, .evstem { line-height: 1.9; }
.evo { padding-block: 12px; }
/* 결과·해설 상세: 항목 간 구분, 라벨은 작게·값은 본문 크기 */
.detail-point > summary { font-size: var(--fs-body); }
.detail-point dt { font-size: var(--fs-small); font-weight: 600; }
.detail-point dd { font-size: var(--fs-body); margin-bottom: 2px; }
.detail-point dl { gap: 2px; padding-bottom: 16px; }
/* PDF 등록·재업로드·검수: 필드 묶음(fieldset)과 라벨·입력 정렬 */
.content-review fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 14px 0; min-width: 0; }
.content-review legend { font-weight: 700; padding: 0 6px; font-size: var(--fs-sub); }
.content-review h2, .content-review h3 { line-height: 1.4; margin: 0 0 8px; }
.content-review h2 { font-size: var(--fs-title); }
.content-review h3 { font-size: var(--fs-sub); }
.content-review label { line-height: 1.5; overflow-wrap: anywhere; }
.content-review p { line-height: 1.65; margin: 6px 0; }
.content-review section > button, .content-review .review-row > button { margin-left: 0; }
.content-review .toggle-group { margin: 10px 0; }
/* 한 줄에 단추가 여러 개일 때 높이·정렬 통일 */
.content-review button, .list-main button.secondary, .list-main button.primary { min-height: 44px; }
/* 넓은 화면 본문 읽기 폭: 목록형 화면은 가운데 정렬 */
@media (min-width: 1100px) { .list-main:not(.quiz) { max-width: 800px; } }
@media (max-width: 479px) { :root { --card-pad: 14px; } .list-main { padding: 12px; } .acard .at { font-size: 15px; } }
/* 클래스 없는 기본 단추(원장 화면 헤더 등): 브라우저 기본 면색 대신 토큰 색을 써 다크에서도 4.5:1 이상 */
.content-review button:not([class]), #app > header button:not([class]) { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 0 14px; }
/* 원장 문항 등록 화면: 체크박스와 문구를 한 줄로 정렬, 제목 크기·중복 브랜드 문구 정리(사이드바가 브랜드를 맡음) */
.content-review label:has(> input[type=checkbox]) { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; margin: 10px 0; }
.content-review label:has(> input[type=checkbox]) > input { margin: 4px 0 0; flex: none; width: 20px; height: 20px; }
.content-review label:has(> input[type=checkbox]) + button, .content-review label:has(> input[type=checkbox]) + .primary { margin-top: 6px; }
body.has-shell .content-review header h1 { font-size: var(--fs-title); margin: 0; }
body.has-shell .content-review header .brand-text { display: none; }
/* 900px 이상에서 메뉴 토글(고정 위치, 본문 왼쪽 위)이 원장 화면 제목을 가리지 않게 제목 줄 왼쪽에 토글 폭만큼 비운다. 899px 이하는 별도 상단 막대가 있어 불필요 */
@media (min-width: 900px) { body.has-shell .content-review header { padding-left: 56px; min-height: var(--bar-h); } }

/* 결과 지점 "틀림" 태그: 연한 주황 면(--warn-soft) 위 글자 대비 4.27 → 4.5 이상. 면·테두리의 --warn은 그대로 두고 글자색만 진하게(다크는 기존 --warn 값 유지) */
:root { --warn-ink: #8f4400; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --warn-ink: #f0a050; } }
:root[data-theme="dark"] { --warn-ink: #f0a050; }
.rp[data-r="incorrect"] .tag { color: var(--warn-ink); }