/* qid_style.css — 문항 채점대(#4 하이브리드) · 2026-06-07 이식
   목업 qid_mockup_hybrid.html <style> 이식(목업은 2026-07-19 스크래치 정리로 제거 → git history) + 네비 크롬(topbar·과목/회차 탭·페이저·검색). 손글씨 테마 폐기.
   2026-06-12 다크/라이트 대응: 색 전부 토큰화 + prefers-color-scheme 다크 세트. topbar 는 의도된 다크바라 양 모드 동일 유지.
   예외 헌장 ①(hub_ui.css §0): serif 지문·IBM Plex Mono·1280px = 승인 예외. (AXC 16색 예외는 2026-06-15 P2-10 에서 해체·해소)
   (구 '다크 topbar 양모드' 예외는 2026-06-12 전반 통일 지시로 폐지 — topbar 는 표준 합류) */

/* (구 문제 지문 타자기체 @font-face — 2026-07-06 롤백 뒤 미사용이었고 2026-09-20 서체 정리로 파일째 은퇴. 답안지는 강원교육모두 = _tokens.css) */
:root{
  color-scheme:light;
  /* 표면 */
  --paper:#f3f3f0; --sheet:#fff; --sheet-2:#f4f4ee; --sheet-hover:#fcfcf7; --focus-bg:#eef4ff;
  /* 선/구분 */
  --grid:#e5e5df; --grid-strong:#c7c7bd;
  /* 잉크 */
  --ink:#1d1d1f; --ink-2:#3a3b35; --sub:#6b6b66; --faint:#bcbcb2;
  /* 펜(오답/적색) --pen/--pen-soft/--pen-line = 2026-09-13 _tokens.css 정본으로 승격(형제 채점 화면 공유 · 여기 재정의 금지) */
  /* 앰버(시점/개정) */
  --amber:#d68a1f; --amber-soft:#fdf3e0; --amber-line:#ecd9b3; --amber-ink:#7d5410;
  /* 인디고(강조/네비) */
  --indigo:#0B7A53; --indigo-soft:#e5f2eb;/* 2026-07-06 컬러 조화: qid accent = 브랜드 딥그린(--brand-deep 정합·레거시 토큰명 유지). correct(--o #2f7d5b)보다 딥/틸 톤이라 구분 */
  /* 오(정답/녹색) */
  --o:#2f7d5b; --o-soft:#e8f5e9; --o-line:#b6dcc6; --o-ink:#1f5c43;
  /* 퍼플(개정 amd) */
  --purple:#5e35b1; --purple-soft:#ede7f6;
  /* accent 배경 위 텍스트 — 라이트=흰글씨, 다크=어두운 글씨로 flip (accent 가 밝아지므로) */
  --on-accent:#fff;
  /* 반경 — OX 드릴(study_drill/_tokens) 정합: r-xs 6 · r-sm 8 · r-md 12 · r-lg 16 · pill (각진 모서리 통일) */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:9999px;
  /* ═══ design-pass v1.0 계약 (2026-09-11) — 스킬 `.claude/skills/design-pass` §1 이 단일 SoT ═══
     타이포 5단 = _tokens.css 토큰 4 + 배지 1. ★새 스케일을 만든 게 아니라 형제(article)가 이미 쓰는
     어휘로 «합류»한 것이다(수렴 전 실측: 이 파일만 글자 36종·행간 11종 — article 은 11종·5종).
     --fs-meta(12px)는 여기서 처음 정의됐다가 2026-09-13 _tokens.css 로 승격(페이지 사본 7벌 통합 · 재정의 금지). */
  /* 아이콘 3눈금 --ic-*·모션 1곡선 --dp-* = _tokens.css 정본(2026-09-13 승격 · 이 파일 사본 2026-09-14 제거 · 재정의 금지). */
  /* 선지 행 기하 — ★사선·버블·행 패딩이 «한 벌»이라 변수 하나로 묶는다.
     이 파일 296~301줄 주석이 기록한 과거 사고(「.bubble 의 em 과 .slash 의 em 이 서로 다른 자였다」)는
     기하를 손으로 계산해 두 곳에 적었기 때문에 났다. 아래 셋만 바꾸면 사선이 따라온다. */
  --bub-d:32px;          /* 버블 지름 — 계약 §1-g 터치(행 전체가 히트영역: 32 + 상하 10 = 52) */
  --mrow-px:8px; --mrow-py:10px;
}
/* ★다크 2벌 — 위 @media 는 **OS 자동**용(`:not([data-theme])` 가드 필수), 아래 미러는 **강제 다크**용.
   2026-07-29 봉합: 종전엔 @media 한 벌뿐이라 테마 토글로 다크를 고른 사용자(OS 라이트)에게
   _tokens.css 토큰만 뒤집히고 이 파일의 재정의가 안 걸려 **흰 배경에 흰 글자**가 됐다
   (실측 `.sheet-inner` color=rgb(233,236,241) / bg=rgb(255,255,255) = 대비 약 1.1:1).
   반대 방향(OS 다크 + 강제 라이트)도 `:not([data-theme])` 가드가 없어 다크가 눌러앉아 있었다.
   ★★두 블록은 **동일 선언 미러** — 한쪽을 고치면 반드시 양쪽 동기(_tokens.css 다크 미러 블록 머리말과 같은 규약). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    color-scheme:dark;
    --paper:#15161A; --sheet:#1C1D22; --sheet-2:#23252B; --sheet-hover:#23252B; --focus-bg:#1A2238;
    --grid:#2E3138; --grid-strong:#3A3E47;
    --ink:#E9ECF1; --ink-2:#C4C8D0; --sub:#A6AAB5; --faint:#6B7080;
    --amber:#FBBF24; --amber-soft:#2A2310; --amber-line:#4A3A18; --amber-ink:#E3B566;
    --indigo:#3BE0AE; --indigo-soft:#123528;/* 컬러 조화(다크): 브랜드 그린 계열 accent — correct(--o #34D399)보다 밝은 틸민트로 구분 */
    --o:#34D399; --o-soft:#0E2A20; --o-line:#1F4D3A; --o-ink:#7FD9AE;
    --purple:#B79DF0; --purple-soft:#241B3A;
    --on-accent:#15161A;
  }
}
/* 강제 다크 미러(html[data-theme="dark"]) — 위 블록과 동일 선언(★동기 필수) */
:root[data-theme="dark"]{
    color-scheme:dark;
    --paper:#15161A; --sheet:#1C1D22; --sheet-2:#23252B; --sheet-hover:#23252B; --focus-bg:#1A2238;
    --grid:#2E3138; --grid-strong:#3A3E47;
    --ink:#E9ECF1; --ink-2:#C4C8D0; --sub:#A6AAB5; --faint:#6B7080;
    --amber:#FBBF24; --amber-soft:#2A2310; --amber-line:#4A3A18; --amber-ink:#E3B566;
    --indigo:#3BE0AE; --indigo-soft:#123528;/* 컬러 조화(다크): 브랜드 그린 계열 accent — correct(--o #34D399)보다 밝은 틸민트로 구분 */
    --o:#34D399; --o-soft:#0E2A20; --o-line:#1F4D3A; --o-ink:#7FD9AE;
    --purple:#B79DF0; --purple-soft:#241B3A;
    --on-accent:#15161A;
  }


*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Pretendard Variable",Pretendard,sans-serif;background:var(--paper);color:var(--ink);font-size:var(--fs-body);line-height:1.7;word-break:keep-all;overflow-wrap:anywhere} /* W3-7 15px→1rem(글자크기 다이얼 --fs 연동) · W3-5 keep-all */
.mono{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.sp{flex:1}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:8px;top:8px;background:var(--sheet);padding:.4em .8em;z-index:100;border:1px solid var(--indigo);border-radius:var(--r-sm)}

/* ===== topbar (표준 합류 — 라이트/다크 토큰 flip · 2026-06-12 전반 통일) =====
   구 '의도된 다크바' 예외 폐지(사용자 명시 통일 지시). 배경/글자/경계 = hub_ui 표준과 동형
   (밝은 표면 + 하단 경계선) · 다크는 prefers-color-scheme @media 가 토큰 flip 으로 자동 대응. */
:root{--topbar-h:52px;--sticky-top:188px} /* P2-11 파생 상수 — topbar 52 + 융합카드(패딩16+과목행46+Z0 36+리본22+테두리2 ≈122) + 마진 갭 14 = sheet/panel sticky top·max-height 파생(2026-07-23 카드 융합으로 196→188) */
.topbar{position:sticky;top:0;z-index:50;display:flex;gap:.5em;align-items:center;min-height:var(--topbar-h);
  padding:.4em 0;background:var(--paper);color:var(--ink);font-size:var(--fs-caption);box-shadow:var(--shadow-2)}/* 슬림 스트립(학습 집중 셸 2026-07-03) — 검색·이전/다음·다시풀기 = Z0 이관 */
/* 가로 인셋 = 타 페이지 옴니박스의 **내부 콘텐츠 시작선**에 정렬(2026-07-13 · qid/study_drill 은 옴니 미보유 자족 탑바).
   옴니 기하: 박스 좌변 = max(탑바패딩 sp-4, (100% − 1108)/2)  [max-width:1108 중앙정렬]
             내부 콘텐츠 = 박스 좌변 + 테두리 1px + 입력 패딩 sp-4
   ★값 변경 시 동기 = hub_ui.css .topbar 패딩 · hub_palette.js .omni-box(max-width) / .omni-input(padding·border) */
.topbar{padding-inline:calc(max(var(--sp-4), (100% - 1108px)/2) + 1px + var(--sp-4))}
@media(max-width:760px){.topbar{padding-inline:calc(var(--sp-2) + 1px + var(--sp-4))}}
@media(max-width:640px){.topbar{padding-inline:calc(var(--sp-2) + 1px + var(--sp-3))}}/* 모바일 옴니 입력 패딩 sp-3 */
.topbar .back{font-size:var(--fs-caption,.8rem);color:var(--sub);text-decoration:none;white-space:nowrap;padding:6px 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center;
  margin-left:-10px}/* 음수 마진 = padding 좌 10px 상쇄 — 클릭 영역(hover pill)은 보존하고 아이콘 광학선만 옴니 콘텐츠선에 맞춘다(2026-07-13) */
.topbar .back:hover{background:var(--sheet-2);color:var(--ink)}
.topbar .back .fi{font-size:var(--fs-title)}/* 홈 아이콘 20×20 */
.crumb-title{font-weight:var(--fw-med);font-size:var(--fs-caption);color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/* 구 h1 → crumb 강등(가시 h1 = sr-only) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== XScroll 가장자리 페이드 — hub_ui.css §XScroll 정본 사본(2026-07-29 신설).
   qid 는 hub_ui.css 미링크 자족 페이지라 정본 규칙이 통째로 없었고, 그래서 hub_xscroll.js SEL 이 `.subject-tabbar` 를
   이름으로 등재해 두고도 이 페이지에서만 신호가 0이었다(모바일 390 실측 넘침 49px = 「경영학개론」이 잘려 있었다).
   배선 = qid.html 의 hub_xscroll.js <script> 1줄(자가 부팅). 값은 정본과 동기 — 정본이 바뀌면 여기도 같이. ===== */
.xsw{position:relative;min-width:0}
.xsw::before,.xsw::after{content:"";position:absolute;top:var(--xs-in,0px);bottom:var(--xs-in,0px);width:40px;z-index:2;
  pointer-events:none;opacity:0;transition:opacity var(--dp-dur) var(--dp-ease);border-radius:inherit}
.xsw::before{left:var(--xs-in,0px);background:linear-gradient(90deg,var(--xs-bg,var(--surface)),var(--xs-bg,var(--surface)) 30%,transparent)}
.xsw::after{right:var(--xs-in,0px);background:linear-gradient(270deg,var(--xs-bg,var(--surface)),var(--xs-bg,var(--surface)) 30%,transparent)}
.xsw.xs-l::before{opacity:1}   /* 왼쪽에 가려진 내용 있음 */
.xsw.xs-r::after{opacity:1}    /* 오른쪽에 더 있음 = 스크롤 신호 */
@media (prefers-reduced-motion:reduce){.xsw::before,.xsw::after{transition:none}}

/* ===== 과목탭 — 융합 카드(.navwrap) 첫 줄(2026-07-23 상단 셸 통합 · 시각 정본=hub_ui.css §SubjectTabbar · state 클래스만 기존 JS 계약 .active) ===== */
.subject-tabbar{display:flex;gap:var(--sp-1);overflow-x:auto;scrollbar-width:none;padding-bottom:var(--sp-2)}
.subject-tabbar::-webkit-scrollbar{display:none}
.subject-tabbar[hidden]{display:none}/* 선별 모드=과목행 접기(display:flex 가 UA [hidden] 을 이기는 함정 가드) */
.subject-tab{flex:0 0 auto;font-size:var(--fs-caption);font-weight:var(--fw-med);color:var(--sub);text-decoration:none;
  background:var(--surface-sunken,var(--sheet-2));border:1px solid transparent;border-radius:var(--r-pill);padding:7px 14px;
  min-height:38px;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center}
.subject-tab:hover{color:var(--ink)}
.subject-tab.active{background:var(--brand-deep,var(--indigo));color:var(--on-brand-deep,var(--on-accent));font-weight:var(--fw-bold)}

/* ===== 상단 셸 = 단일 융합 카드 (2026-07-23 · study_drill .hudwrap 동형) — 과목탭+Z0+리본 한 박스 · sticky 1층 ===== */
.navwrap{position:sticky;top:var(--topbar-h);z-index:40;
  width:calc(100% - 2*var(--sp-3));max-width:calc(1140px - 2*var(--sp-6));margin:var(--sp-2) auto var(--sp-3);
  padding:var(--sp-2) var(--sp-3);background:var(--canvas,var(--sheet));border:1px solid var(--line,var(--grid));border-radius:var(--r-md);box-shadow:var(--shadow-3)}
.z0{display:flex;align-items:center;gap:.45em;width:100%}
/* 선별 모드 뱃지+해제 — study_drill .mode-badge/.mode-x 동형(값 변경 시 동기) */
.mode-badge{display:none;align-items:center;gap:6px;border-radius:var(--r-pill);padding:5px 12px;min-height:32px;
  font-size:var(--fs-caption);font-weight:var(--fw-semi);background:var(--color-warn-bg);color:var(--color-warn);
  border:1px solid var(--color-warn);min-width:0;flex:0 1 auto}
.mode-badge.show{display:inline-flex}
.mode-badge .bt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mode-x{display:none;align-items:center;gap:4px;flex:none;border:1px solid var(--color-warn);background:transparent;
  color:var(--color-warn);border-radius:var(--r-pill);padding:5px 12px;min-height:32px;font-size:var(--fs-caption);white-space:nowrap;cursor:pointer}
.mode-x.show{display:inline-flex}
/* ===== 결과 리본 (융합 카드 셋째 줄 · 회차/덱 정오답 지도 · 색=_tokens correct/wrong · 등장=좌→우 와이프) ===== */
.ribbonrow{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:8px 2px 0}
/* ═══ 회차 정오답 «점 격자»(2026-09-11 design-pass §3-B) ═══
   구판은 높이 14px 알약 하나를 N칸으로 나눈 막대였다 — 뭉툭하고 한 칸이 무엇인지 읽히지 않았다.
   시험지 여백에 찍어 둔 채점 표시처럼 «점»으로. 세로 공간도 절반만 쓴다.
   ★칸 수 = 문항 수라 폭이 좁아지면 겹친다 → 지름을 고정하고 균등 분배(space-between)로 둔다. */
.rib{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:3px;height:12px}
.rib i{position:relative;flex:0 1 9px;width:9px;height:9px;min-width:4px;border-radius:50%;overflow:hidden;background:var(--grid)}
.rib i>b{position:absolute;inset:0;transform-origin:left}
.rib i.o>b{background:var(--color-correct)} .rib i.x>b{background:var(--pen)}
.rib i.skip>b{background:var(--sub);opacity:.42;transform:scaleX(1)}/* 미풀이 넘김=옅은 회색 채움(미도달 빈칸과 구분·정오답 대비 저채도) */
.rib i.o{--flashc:color-mix(in srgb, var(--color-correct) 65%, transparent)}/* 글로우=토큰 기반(라이트/다크 자동) */
.rib i.x{--flashc:color-mix(in srgb, var(--color-wrong) 78%, transparent)}
.rib i.seen{cursor:pointer}
.rib i.cur{outline:2px solid var(--ink);outline-offset:2px;z-index:2;overflow:visible}
.rib i.new>b{animation:ribwipe .30s ease}
@keyframes ribwipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rib i.flash{animation:ribflash .6s ease}
@keyframes ribflash{0%{box-shadow:0 0 0 0 transparent}25%{box-shadow:0 0 8px 2px var(--flashc)}100%{box-shadow:0 0 0 0 transparent}}
/* 정답률·시도수 readout = 리본 bar 옆 상시 표기(전 뷰포트 동일 · qid 는 풀폭 아님) */
.readout{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-meta);color:var(--sub);white-space:nowrap;flex:0 0 auto;display:inline-flex;gap:2px;align-items:center}
.readout b{color:var(--ink)}
.readout b.pop{animation:accpop .5s ease}
@keyframes accpop{0%{transform:scale(1)}30%{transform:scale(1.3);color:var(--color-accent)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.rib i.new>b,.rib i.flash,.readout b.pop{animation:none!important}}
.z0-arrow{font-family:inherit;font-size:var(--fs-h3);line-height:1.0;width:34px;min-height:34px;border:1px solid var(--grid-strong);background:var(--sheet);color:var(--ink-2);border-radius:var(--r-pill);cursor:pointer;flex:none}
.z0-arrow:hover{border-color:var(--indigo);color:var(--indigo)}
.z0-pick{position:relative;flex:none}
.z0-pick>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35em;font-size:var(--fs-caption);color:var(--ink-2);
  border:1px solid var(--grid-strong);background:var(--surface-sunken,var(--sheet-2));border-radius:var(--r-pill);padding:.35em .85em;min-height:34px;white-space:nowrap}
.z0-pick>summary::-webkit-details-marker{display:none}
.z0-pick>summary:hover{border-color:var(--indigo);color:var(--indigo)}
.z0-pick[open]>summary{border-color:var(--indigo)}
.z0-pick>summary .fi{color:var(--faint)}
.z0-round{font-weight:var(--fw-semi)}
.z0-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:45;min-width:300px;max-width:min(560px,86vw);max-height:52vh;overflow:auto;
  background:var(--sheet);border:1px solid var(--grid);border-radius:var(--r-md);box-shadow:var(--shadow-2,0 12px 36px rgba(0,0,0,.18));padding:.7em .85em}
.z0-qnav .qnav-pos{font-family:"IBM Plex Mono",monospace;color:var(--ink-2)}
.z0-search{position:relative;margin-left:auto;flex:0 1 300px;min-width:120px}
.z0-search-ic{position:absolute;left:.72em;top:50%;transform:translateY(-50%);font-size:var(--fs-caption);color:var(--brand-deep);pointer-events:none}/* 돋보기 — fi 마스크=currentColor라 라이트/다크 자동 */
.z0-search #searchInput{width:100%;font-family:inherit;font-size:var(--fs-caption);padding:.42em .7em .42em 2.1em;border:1px solid var(--grid-strong);background:var(--sheet);color:var(--ink);border-radius:var(--r-pill)}
.z0-search #searchInput::placeholder{color:var(--faint)}

/* ===== 회차 스트립 (Z0 팝오버 내부) ===== */
.round-strip{display:flex;gap:.3em;flex-wrap:wrap}
.round-tab{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-meta);padding:.25em .7em;border:1px solid var(--grid);background:var(--sheet);color:var(--sub);border-radius:var(--r-pill);cursor:pointer;flex:none}
.round-tab:hover{border-color:var(--indigo);color:var(--indigo)}
.round-tab.active{background:var(--indigo);color:var(--on-accent);border-color:var(--indigo);font-weight:var(--fw-semi)}
.round-tab.more{border-style:solid;color:var(--sub);opacity:.85}
.round-tab.more:hover{opacity:1}

/* 채점 후 시트 내 '다시 풀기' (구 탑바 reset 이관) */
.resetp{font-family:inherit;font-size:var(--fs-meta);padding:.25em .7em;border:1px solid var(--pen-line);background:var(--sheet);color:var(--pen);border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:.3em}
.resetp:hover{background:var(--pen-soft)}

/* ===== 반응형 — 학습 집중 셸(2026-07-03): 과목탭·Z0 가 전 뷰포트 공용(구 바텀시트 폐지) ===== */
@media(max-width:900px){
  .navwrap{position:static}/* 모바일·태블릿 = 수직공간 우선(시트/패널도 static 구간) — 순회는 j/k·다음 CTA 병행 */
}
@media(max-width:560px){
  html,body{overflow-x:clip;max-width:100%}/* ★clip(hidden 아님) — hidden 은 스크롤 컨테이너를 만들어 자손 position:sticky 를 무력화(집중모드 Z0 가 액자 띠 밑으로 파묻힘 · 2026-07-12 Safari 실측). clip 은 가로 넘침만 잘라 sticky 생존 */
  .topbar{gap:.4em .5em;padding-block:.45em}/* ★padding 단축형 금지 — 위 padding-inline(옴니 콘텐츠선 정렬)을 덮는다(2026-07-13) */
  .topbar .back{font-size:var(--fs-meta);padding:5px 8px;margin-left:-8px}/* 음수 마진 = 좁은폭 padding 8px 상쇄(위 -10px 재정의) */
  .z0{flex-wrap:wrap;row-gap:.45em;gap:.3em}
  .z0-pick>summary{padding:.3em .6em;font-size:var(--fs-meta);min-height:30px}
  .z0-arrow{width:30px;min-height:30px;font-size:var(--fs-body)}
  .z0-search{flex-basis:100%;margin-left:0}/* 검색창 자기 행 전폭 — 내비 1행 + 검색 1행 2단 구성 */
  .mode-x .xt{display:none}.mode-x{padding:5px 10px}/* 좁은 폭=✕ 아이콘만(study_drill 동형) */
  .mode-badge{font-size:var(--fs-meta);padding:4px 10px;flex:1 1 0;min-width:56px}/* 줄바꿈 대신 축소(말줄임) — ✕까지 한 줄 수용 */
  .z0-search{order:10}/* 검색=마지막 → 선별 ✕가 첫 줄(‹ › 옆)에 합류(홀로 꺾임 방지) */
  .z0-pop{max-width:calc(100vw - 2*var(--sp-4))}
  .bench{margin:.7em auto;padding:0 .6em}
}

/* ===== bench (채점대 + 패널) ===== */
.bench{display:grid;grid-template-columns:55% 45%;gap:0;max-width:1140px;margin:1.1em auto;padding:0 1em;align-items:start;scroll-margin-top:var(--sticky-top)} /* 폭 단일 통일 1140 2026-06-29(구 1280) · W3-7 sticky 스택 가림 가드 · P2-11 상수 단일화 */
@media(max-width:900px){.bench{grid-template-columns:1fr}}
.sheet{background:var(--sheet);border:1px solid var(--grid);border-radius:var(--r-lg);box-shadow:0 6px 24px rgba(0,0,0,.04);position:sticky;top:var(--sticky-top);align-self:start;max-height:calc(100vh - var(--sticky-top) - 16px);overflow:auto;min-width:0} /* OX 드릴 카드(r-lg 16px) 정합 · P2-11 상수 단일화 · min-width:0=grid아이템이 넓은 표 min-content로 안 늘어나 .qtable-wrap 가로스크롤 살림(본문 잘림 방지) */
@media(max-width:900px){.sheet{position:static;max-height:none;overflow:visible}}
.sheet-inner{--card-pad:var(--sp-5);--pad-b:var(--sp-6);
  padding:var(--sp-5) var(--card-pad) var(--pad-b)}
.sheet-inner:focus{outline:none}

/* ★배지 행 정본 (2026-07-12 배지 일관화): align-items:center + 기하는 아래 그룹 규칙이 단독 결정.
   구 baseline 정렬 + 클래스별 제각각 패딩/radius 로 인해, 행에서 가장 큰 배지(.cmp-trigger 28px)가
   행 높이를 정하고 작은 배지(14px) 아래 여백이 남던 문제 봉합. 개별 규칙은 색·굵기만 담당한다.
   ★그룹 규칙이 개별 규칙보다 앞 — 개별 border 색이 뒤에서 이겨야 하므로 순서 고정. */
.exam-head{display:flex;flex-wrap:wrap;gap:.5em;align-items:center;border-bottom:2px solid var(--ink);padding-bottom:.5em;margin-bottom:.9em;font-size:var(--fs-caption);color:var(--sub)}
.exam-head .qno{font-weight:var(--fw-bold);color:var(--ink);font-size:var(--fs-caption)}
/* S 티어(표식) — 세로패딩 0 · 보더 항상 1px(무색=transparent) · pill 단일
   ★2026-09-12: .cband/.eband/.ruling-badge/.subtopic-link 는 이 머리에서 «문제 밑» 스트립(.qfacts)으로
   내려갔다. 여기 남은 것은 채점 «전»에 뜨는 둘뿐 — seal(현행 변동 있음)·twarn(천천히 읽기).
   ★twarn 은 지금 실데이터에서 한 번도 뜨지 않는다(라이브 _empirical_signals 1,981건 전건에
   trap_warning_class 필드 부재 = 공장 미발행). 코드가 틀린 게 아니라 재료가 안 온다 — 남겨 둔다. */
.exam-head .seal,.exam-head .twarn{
  display:inline-flex;align-items:center;box-sizing:border-box;height:var(--bdg-h-s);padding:0 var(--bdg-px-s);
  border:1px solid transparent;border-radius:var(--r-pill);line-height:1.0;font-size:var(--fs-micro,.7rem);
  font-weight:var(--fw-semi);white-space:nowrap}
/* M 티어(행 내 액션) — 표준 L(38px) 은 이 밀집 헤더에선 행 높이를 혼자 결정해 버려 M 로 강등(소주제 riskchips 선례 정본화) */
.exam-head .resetp{
  box-sizing:border-box;height:var(--bdg-h-m);padding:0 var(--bdg-px-m);
  border-radius:var(--r-pill);line-height:1.0;font-size:var(--fs-caption)}
.exam-head .seal{color:var(--amber);border-color:var(--amber)}
/* B5 — 함정경고(문항 단위 trap_warning_class · 사전노출 안전·OX 비누설) */
.exam-head .twarn{border-color:currentColor}
.exam-head .twarn.t-snap{color:var(--amber)}
.exam-head .twarn.t-slow{color:var(--color-brand-cite,var(--brand-deep))}
.favstar{margin-left:auto;background:none;border:none;cursor:pointer;font-size:var(--fs-h3);color:var(--faint);line-height:1.0;padding:0}
.favstar.on{color:var(--amber)}

/* 조건부 시점 밴드 */
/* ═══ 개정 시간축 — 이 제품에만 있는 축(design-pass §3-B 독창 요소) ═══
   출제 당시와 현행의 답이 다른 문항. 구판은 호박색 그라디언트 «박스»라 경고 띠처럼 읽혔고 축은 한 줄에
   눌려 있었다. → 색면을 걷어내고 시트 카드 «머리»에 얹는 스트립으로 세운다.
   ★마크업 무수정 — 자식(.sb-tag/.sb-axis/.sb-grade/.sb-note)이 이미 형제라 세로 정렬만 바꾸면 된다.
   카드 안쪽 여백(.sheet-inner --card-pad)을 음수 마진으로 되물어 가장자리까지 붙인다. */
.spineband{display:flex;flex-direction:column;align-items:stretch;gap:6px;
  margin:calc(-1 * var(--block-gap)) calc(-1 * var(--card-pad)) var(--block-gap);
  padding:var(--sp-3) var(--card-pad);
  background:linear-gradient(180deg,var(--amber-soft),transparent);
  border-bottom:1px solid var(--grid);border-radius:var(--r-lg) var(--r-lg) 0 0;
  font-size:var(--fs-meta);color:var(--amber-ink)}
.sb-tag{font-weight:var(--fw-semi);white-space:nowrap}
/* S-4: ?showAmend=1 진입 시 개정 배너 일시 강조(스크롤 착지 후 펄스) */
.spineband.amend-focus{animation:amendPulse 1.2s ease-out 2}
@keyframes amendPulse{0%{box-shadow:0 0 0 0 var(--amber-line)}40%{box-shadow:0 0 0 5px var(--amber-soft)}100%{box-shadow:0 0 0 0 transparent}}
.spineband .sb-note{font-size:var(--fs-meta);line-height:1.55;color:var(--amber-ink);border-top:1px solid var(--amber-line);padding-top:.35em}
/* ★등폭 글꼴을 뺀다 — 축 라벨에 한글이 섞인다(「제105호 개정」). IBM Plex Mono 에 한글 글리프가 없어
   폴백이 일어나면 자간이 무너진다(계약 §1-f). 숫자 정렬은 tabular-nums 로 충분하다. */
.spineband .sb-axis{display:flex;align-items:center;gap:8px;font-size:var(--fs-meta);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.sb-axis .sb-t{white-space:nowrap;color:var(--amber-ink);font-weight:var(--fw-med)}
.sb-axis .nd{width:9px;height:9px;border-radius:50%;background:var(--faint)}
.sb-axis .nd.amb{background:var(--amber)} .sb-axis .nd.cur{background:var(--ink)}
.sb-axis .ln{flex:1;min-width:20px;height:2px;border-radius:2px;background:var(--grid)}
.sb-axis .ln:first-of-type{background:linear-gradient(90deg,var(--grid),var(--amber))}  /* 답이 뒤집히는 구간만 물든다 */
/* 판례변경 축 밴드 — 개정(앰버)과 시각 분리(보라 --color-accent) · 채점 무접촉 서사 표기(2026-07-13 2차-B) */
.spineband.prec{background:linear-gradient(180deg,color-mix(in srgb,var(--color-accent) 8%,var(--canvas)),transparent);color:var(--color-accent)}
.spineband.prec .sb-note,.spineband.prec .sb-t{color:var(--color-accent);border-color:color-mix(in srgb,var(--color-accent) 35%,var(--canvas))}
.spineband.prec .nd.amb{background:var(--color-accent)} .spineband.prec .ln{background:color-mix(in srgb,var(--color-accent) 35%,var(--canvas))}
.flipseal.prec{color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 8%,var(--canvas));border-color:var(--color-accent)}

.stem{font-weight:var(--fw-bold);font-size:var(--fs-title);line-height:1.45;letter-spacing:-.015em;margin:.2em 0 .9em}
/* design-pass §1-f 세리프 용도 교정(2026-09-11): 문두는 «산세리프 굵게».
   _tokens.css 가 --font-serif 를 「법령·판례 원문 인용면 한정」으로 정의해 뒀는데 실제로는 정반대로
   쓰이고 있었다(문두=세리프 / 조문·판례=세리프 0). 되돌리면 문두 가독이 오르고 원문과 해설이 눈으로 갈린다.
   구 타자기체·@font-face 는 재사용 대비 유지(2026-07-06 롤백 이력). */
.combo-stem{font-size:var(--fs-caption);color:var(--ink-2);background:var(--sheet-2);padding:.5em .8em;margin:.3em 0 .9em;border-radius:var(--r-sm)}
.combo-stem div{margin:.13em 0}
/* 문제 본문 표 ([[TABLE]] JSON 렌더) */
.qtable-wrap{overflow-x:auto;margin:.8em 0} /* 2026-06-16 P2 예방: 다열 표가 좁은 폭 초과 시 가로 스크롤(본문 잘림 방지) */
.qtable{border-collapse:collapse;margin:0;width:auto;background:var(--sheet);font-family:"Pretendard Variable",Pretendard,sans-serif;font-weight:var(--fw-reg);font-size:var(--fs-caption);line-height:1.45;border:1.5px solid var(--grid-strong)}
.qtable th,.qtable td{border:1px solid var(--grid);padding:.5em 1em;text-align:left;vertical-align:middle}
.qtable th{background:var(--indigo-soft);font-weight:var(--fw-bold);color:var(--indigo);white-space:nowrap;text-align:center}
.qtable td{color:var(--ink)}
.qtable tbody tr:nth-child(even){background:var(--sheet-2)}
/* 모바일: 지문표는 열 적고(3~5) 셀 짧음 → 가로 스크롤 대신 뷰포트 폭에 맞춰 전부 노출.
   헤더 줄바꿈 허용 + 여백·폰트 축소 + width:100%로 채움(.qtable-wrap 스크롤은 초과 시 안전망으로 잔존). */
@media (max-width:640px){
  .qtable{width:100%;font-size:var(--fs-caption)}
  .qtable th{white-space:normal}
  .qtable th,.qtable td{padding:.4em .5em}
}

.mrow{display:flex;align-items:flex-start;gap:12px;padding:var(--mrow-py) var(--mrow-px);min-height:52px;border-bottom:1px solid var(--grid);cursor:pointer;position:relative}
.mrow:hover{background:var(--sheet-hover)}
.bubble{flex:none;width:var(--bub-d);height:var(--bub-d);padding:0;cursor:pointer;border:2px solid var(--grid-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"IBM Plex Mono";font-size:var(--fs-caption);color:var(--sub);background:var(--sheet);transition:color var(--dp-dur) var(--dp-ease),background var(--dp-dur) var(--dp-ease),border-color var(--dp-dur) var(--dp-ease),transform var(--dp-dur) var(--dp-ease)} /* W3-3 button화 대응(p0·cursor) */
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px} /* W3-3 키보드 포커스 링 */
.mrow:hover .bubble{border-color:var(--indigo)}
.mtext{flex:1;padding-top:.12em;font-size:var(--fs-body)}
.mark-O{border-color:var(--o)!important;color:var(--o)!important;box-shadow:0 0 0 3px var(--o-soft)}
.mark-X{border-color:var(--pen-line)!important;color:var(--faint)!important}
.mark-O-amend{border-color:var(--amber)!important;color:var(--amber)!important;box-shadow:0 0 0 3px var(--amber-soft)}
.mark-X-amend{border-color:var(--amber)!important;color:var(--amber)!important}
/* 채점 사선 = "이 진술은 거짓" 표식(내 정오답 아님 · .mrow.is-wrong=진술 참거짓).
   ★2026-09-12 오너 지시 — «행을 가로지르는 긴 펜 획»으로 되돌린다. 축은 그대로(거짓인 선지 전부).
   경위: 2026-07-16 에 구 -22도 사선이 원 밖으로 삐져나와 낙서처럼 읽힌다는 이유로 원 «안»에 가두는
   정제(45도·1.35em)를 했는데, 그 결과 표식이 버블 장식 크기(실측 19×19px)로 쪼그라들어
   「시험지에 빨간 펜으로 긋는다」는 행위 은유가 사라졌다. 진짜 원인은 길이가 아니라 기하가
   손계산 rem 이었던 것(아래 옛 주석)이고, 그건 2026-09-11 에 변수 파생으로 이미 해결됐다.
   → 길이를 되돌리되(글자 끝까지) 기울기는 «각도»가 아니라 «올라가는 높이»로 고정한다 —
   각도를 고정하면 긴 선지에서 오른쪽 끝이 글자 줄을 벗어난다(qid_app.js `PEN_RISE` 한 자리에서 조절).
   번호는 사선 위층(z-index)에 두고 글자 둘레만 행 바닥색으로 녹아웃해 획 위에서도 또렷이 남는다. */
/* ★기하 = 변수 파생(2026-09-11 design-pass). 손계산 좌표 폐기 — --bub-d/--mrow-* 만 고치면 따라온다.
   획이 지나는 높이 = 버블 중심(--mrow-py + --bub-d/2) — 첫 줄 글자의 중간과도 거의 맞는다. */
/* ★획은 «글자 끝»에서 멈춘다 — --slash-w 는 qid_app.js `fitSlashes()` 가 선지 본문 span 을 실측해 넣는다.
   CSS 는 글자 폭을 알 수 없다(.mtext 는 flex:1 이라 늘 행 끝까지 차지한다). 폴백(측정 전·JS 실패)은
   행 전폭 — 획이 아예 안 보이는 것보다 길게라도 보이는 쪽이 낫다. */
.slash,.uslash{position:absolute;left:var(--mrow-px);right:auto;
  width:var(--slash-w,calc(100% - 2*var(--mrow-px)));
  top:calc(var(--slash-top, calc(var(--mrow-py) + var(--bub-d)/2)) - 1px + var(--slash-dy,0px));height:2px;border-radius:var(--r-pill);
  background:var(--pen);transform-origin:0 50%;transform:rotate(var(--slash-rot,-2deg));opacity:0;z-index:0}
.graded .mrow.is-wrong .slash{opacity:.9}
/* 그어지는 모션 — 행은 채점 시 «새로 만들어지므로» transition 이 아니라 animation 이다(계약 §1-h).
   ★.pen-draw 는 «채점으로 넘어간 그 렌더»에만 붙는다(qid_app.js `_penWas`). render() 는 선지 클릭·
     뷰 전환마다 다시 도는데, 안 가르면 획이 그때마다 처음부터 다시 그어져 목록이 출렁인다.
   ★지연은 위에서 아래로 — 다섯 획이 동시에 튀어나오면 「그었다」가 아니라 「켜졌다」로 보인다. */
.pen-draw .mrow.is-wrong .slash{animation:penDraw var(--dp-dur) var(--dp-ease) both}
.pen-draw .mrow:nth-child(2).is-wrong .slash{animation-delay:.05s}
.pen-draw .mrow:nth-child(3).is-wrong .slash{animation-delay:.1s}
.pen-draw .mrow:nth-child(4).is-wrong .slash{animation-delay:.15s}
.pen-draw .mrow:nth-child(5).is-wrong .slash{animation-delay:.2s}
/* @keyframes penDraw = _tokens.css 정본(2026-09-13 승격 · 형제 채점 화면과 한 벌) */
.graded .mrow.is-wrong .bubble{position:relative;z-index:1;background:transparent}
/* 녹아웃 = 숫자 글리프 둘레 2px 를 "행의 바닥색"으로 밀어내 사선과 분리.
   ★--ko 는 행이 자기 배경을 바꿀 때 같이 따라와야 한다 — 색을 var(--sheet) 로 고정하면 hover·포커스 행에서
   숫자 둘레에만 딴 색 링이 떠 얼룩진다(2026-07-16 자기검사 적발). 배경을 바꾸는 규칙마다 --ko 를 동반할 것. */
.mrow{--ko:var(--sheet)}
.mrow:hover{--ko:var(--sheet-hover)}
.mrow.foc{--ko:var(--focus-bg)}
.graded .mrow.is-wrong .bubble{text-shadow:0 0 2px var(--ko),0 0 2px var(--ko),0 0 3px var(--ko)}
.mrow.foc{background:var(--focus-bg);box-shadow:inset 3px 0 0 var(--indigo)}
.mypick{font-size:var(--fs-meta);color:var(--indigo);border:1px solid var(--indigo);border-radius:var(--r-xs);padding:0 .35em;margin-left:.4em;font-family:"IBM Plex Mono";white-space:nowrap}
.flipseal{font-size:var(--fs-meta);color:var(--amber-ink);background:var(--amber-soft);border:1px solid var(--amber);border-radius:var(--r-xs);padding:.05em .4em;margin-left:.4em;font-weight:var(--fw-semi);white-space:nowrap}
.pre-hint{text-align:center;color:var(--faint);font-size:var(--fs-caption);margin:1em 0 .2em}

/* ===== 우 패널 ===== */
/* P2-11: 패널도 sticky+독립 스크롤 — 긴 풀이에서 시트가 일찍 바닥나 '선지 보며 풀이 읽기' 대조가 후반 붕괴하던 것 해소 */
.panel{margin-left:0;border-left:none;padding-left:0;position:sticky;top:var(--sticky-top);align-self:start;max-height:calc(100vh - var(--sticky-top) - 16px);overflow:auto;min-height:6em;min-width:0}/* min-width:0=grid아이템 축소 허용(그리드모드 table.lg nowrap 헤더가 패널 밀어내는 것 방지) */
@media(max-width:900px){.panel{position:static;max-height:none;overflow:visible;margin-left:0;border-left:none;border-top:2px solid var(--grid);padding-left:0;padding-top:1.1em;margin-top:1.2em}}
.panel.locked{filter:grayscale(1) opacity(.32);pointer-events:none}
.panel.locked::after{content:"채점 전 · 답안지 버블을 마킹하면 채점됩니다";position:absolute;inset:0;display:flex;justify-content:center;padding-top:2.5em;color:var(--sub);font-size:var(--fs-caption);filter:none}
/* P0-2: 채점 전 우패널 — 정답 비누설 메타(인출 프롬프트+회수 진입)로 공백 해소 */
.panel.pregrade{padding-left:1.3em}
@media(max-width:900px){.panel.pregrade{border-left:none;padding-left:0}}
.panel.pregrade{border-left:none;padding-left:0}
/* ===== 레이아웃 2비율 — 양쪽 2:1 / 양쪽 1:2 · 데스크톱 전용 (2026-07-06 4모드 → 09-11 스위치+시트 접기 → 09-13 접기 폐지) ===== */
.bench.lay-split21{grid-template-columns:1.7fr 1fr}   /* 양쪽 · 문제 넓게(2:1) */
.bench.lay-split12{grid-template-columns:1fr 1.75fr}  /* 양쪽 · 분석 넓게(1:2·문제 ~36% 레일) */
/* ★복원(2026-09-11) — 양쪽 칸 모드에서는 선지 해설이 «오른쪽 패널»에만 나온다. 이 줄이 없으면
   좌우 이중 노출된다. 앞서 lay-leftfull/rightfull 을 «줄 단위» 정규식으로 걷다가 같은 줄에 쉼표로
   이어져 있던 이 규칙까지 함께 지워진 것(design-pass 함정 k 의 2번째 피해 · 촬영에서 재발견). */
.bench.lay-split21 .mrow-explain,.bench.lay-split12 .mrow-explain{display:none}
@media(max-width:900px){ /* 모바일=현행 세로 스택 · 비율 상태 무시(양쪽 다 표시) */
  /* ★이 줄이 없으면 .bench.lay-split12(특이도 0,2,0)가 위의 .bench{1fr}(0,1,0)를 이겨 모바일이
     2칸으로 남는다 — 시트가 100px대로 눌려 문두가 한 글자씩 끊긴다. 2026-09-11 실촬영에서 재발견. */
  .bench.lay-split21,.bench.lay-split12{grid-template-columns:1fr}
}
/* ═══ 폭 스위치 — 구 4칸 세그먼트(2:1·1:2·문제·분석) 대체 (2026-09-11 design-pass) ═══
   비율은 켬/끔 하나로 충분하다. 자동 전환(autoLayoutForGrade)이 채점 시 켜 주고, 사용자가 누르면
   그때부터 수동 고정(qid_layout_explicit="manual" · 「내 정보 › 표시 설정」과 같은 키를 공유).
   ★구판은 그 «영구 전환»이 화면에 한 글자도 안 적혀 있었다 — 스위치는 상태가 보이므로 침묵 전환이 아니다. */
.z0-wide{display:inline-flex;align-items:center;gap:8px;flex:none;margin-left:4px;
  height:32px;padding:0 2px;border:none;border-radius:var(--r-sm);
  background:transparent;color:var(--sub);font:inherit;font-size:var(--fs-meta);font-weight:var(--fw-semi);
  white-space:nowrap;cursor:pointer;transition:color var(--dp-dur) var(--dp-ease)}
.z0-wide .zw-sw{width:34px;height:19px;border-radius:var(--r-pill);background:var(--grid-strong);
  position:relative;flex:none;transition:background var(--dp-dur) var(--dp-ease)}
.z0-wide .zw-sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:var(--sheet);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--dp-dur) var(--dp-ease)}
.z0-wide[aria-pressed="true"]{color:var(--indigo)}   /* 테두리 없음 — 상태는 스위치가 말한다(2026-09-11 오너) */
.z0-wide[aria-pressed="true"] .zw-sw{background:var(--indigo)}
.z0-wide[aria-pressed="true"] .zw-sw::after{transform:translateX(15px)}
@media(max-width:900px){.z0-wide{display:none}}  /* 한 칸으로 스택되는 폭에서는 비율 자체가 없다 */

/* ===== 해설 패널 4존 재편 (2026-07-06): 판정/선지별 분석/문항 맥락·심화/다음 행동 ===== */
/* ═══ 존 = 묶음 카드 (2026-09-11 design-pass 4단계 · 목업 v2 구조) ═══
   라벨은 카드 «바깥» 작은 회색 글씨, 내용은 .zbody 흰 카드. iOS 설정앱의 묶음 목록 골격이다. */
.zone{margin-bottom:var(--zone-gap);background:transparent}
.zone:last-child{margin-bottom:0}
.zbody{background:var(--sheet);border:var(--hair) solid var(--grid);border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(16,18,27,.05),0 6px 20px rgba(16,18,27,.04);
  padding:var(--card-pad);overflow:hidden}
.zone-action .zbody{background:transparent;border:none;box-shadow:none;padding:0}
.zone-choices>.p-label,.zone-context>.p-label{display:flex;align-items:center;gap:.6em}
.zone-choices>.p-label .viewtog{margin-left:auto}
.verdict-row{display:flex;align-items:center;gap:.8em;margin:.15em 0 .6em}
.v-pace{margin-left:auto;font-size:var(--fs-meta);color:var(--ink-muted);white-space:nowrap;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}/* 시간축 P3 페이스 캡션 — 빈 텍스트=무형(공간 0) · 좁은 폭=말줄임(행 넘침 금지) */
.verdict{font-weight:var(--fw-bold);font-size:var(--fs-body);padding:.22em .8em;border-radius:var(--r-md)}
.verdict .fi,.pbadge .fi{margin-right:.22em;vertical-align:-.1em}
.verdict.no{background:var(--pen-soft);color:var(--pen)}
.verdict.ok{background:var(--o-soft);color:var(--o-ink)}
.verdict.reveal{background:var(--sheet-2);color:var(--sub)}
.v-today{font-size:var(--fs-meta);color:var(--sub)}
/* ===== 선지별 분석 2단 (Phase 3) — 순위 목록 ▏선택 선지 상세 ===== */
.prow{display:flex;gap:6px;align-items:center;padding:7px 6px;border-radius:var(--r-xs);cursor:pointer}
.prow:hover{background:var(--sheet-hover)}
.prow.foc{background:var(--indigo-soft)}
.prow-rank{font-family:"IBM Plex Mono";font-size:var(--fs-meta);font-weight:var(--fw-bold);color:var(--faint);white-space:nowrap;flex:none;letter-spacing:.01em}
.prow-num{font-family:"IBM Plex Mono";font-weight:var(--fw-bold);font-size:var(--fs-title);line-height:1.0;flex:none}
.prow-num.x{color:var(--pen)}.prow-num.o{color:var(--o)}.prow-num.neu{color:var(--sub)}
.prow-ox{margin-left:auto;font-family:"IBM Plex Mono";font-weight:var(--fw-bold);font-size:var(--fs-meta);padding:1px 6px;border-radius:var(--r-xs);flex:none}
.prow-ox.o{color:var(--o-ink);background:var(--o-soft)}.prow-ox.x{color:var(--pen);background:var(--pen-soft)}.prow-ox.neu{color:var(--sub)}
.explain-lead>b{display:block;font-size:var(--fs-meta);font-weight:var(--fw-bold);text-transform:uppercase;color:var(--indigo);letter-spacing:.03em;margin-bottom:3px}
.explain-lead>p{margin:0;font-size:var(--fs-caption);line-height:1.7}
/* 모두 펼침 */
.allcard{border:1px solid var(--grid);border-radius:var(--r-sm);padding:11px 13px;margin-bottom:8px;background:var(--sheet)}
.ac-h{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.ac-num{font-family:"IBM Plex Mono";font-weight:var(--fw-bold);font-size:var(--fs-h3)}.ac-num.x{color:var(--pen)}.ac-num.o{color:var(--o)}.ac-num.neu{color:var(--sub)}
.ac-tag{font-size:var(--fs-meta);font-weight:var(--fw-bold);color:var(--pen);border:1px solid var(--pen-line);border-radius:var(--r-sm);padding:0 6px}
.ac-tag.mine{color:var(--indigo);border-color:var(--indigo)}
.ac-ex{font-size:var(--fs-caption);line-height:1.7}
/* 좌 sheet 선지 해설: split/rightfull 은 우 Zone B 가 담당 → 숨김(leftfull=문제·해설 전폭에서만 노출) */
.pg-card{border:1px solid var(--grid);background:var(--sheet);border-radius:var(--r-sm);padding:.7em .9em;margin-bottom:.9em}
.pg-card .pg-cap{display:block;font-size:var(--fs-meta);font-weight:var(--fw-bold);letter-spacing:.04em;color:var(--indigo);text-transform:uppercase;margin-bottom:.4em}
.pg-card .pg-q{font-size:var(--fs-body);line-height:1.55;color:var(--ink)}
.pg-card .pg-meta{margin-top:.5em;font-size:var(--fs-meta);color:var(--sub)}
.pg-subtopic{color:var(--indigo);text-decoration:none;border-bottom:1px solid currentColor}
.pg-subtopic:hover{border-bottom-style:solid}
/* 상위 갈래(2026-07-29 · 무료 필드) — 링크가 아닌 **맥락 라벨**이라 링크 어휘(인디고·점선밑줄)를 쓰지 않는다.
   무료 사용자에겐 이 칩만 뜨고(소주제 링크는 유료 게이트), 유료에겐 `갈래 › 소주제↗` 로 이어진다. */
.pg-midcat{color:var(--ink-2);font-weight:var(--fw-semi)}
.pg-sep{margin:0 .35em;color:var(--faint)}
.pg-recall{display:flex;flex-wrap:wrap;gap:.45em;margin-bottom:.9em}
.pg-rbtn{font-family:inherit;font-size:var(--fs-meta);padding:.4em .85em;border:1px solid var(--grid-strong);background:var(--sheet);color:var(--ink-2);border-radius:var(--r-pill);cursor:pointer}
.pg-rbtn:hover{border-color:var(--indigo);color:var(--indigo)}
.pg-hint{font-size:var(--fs-caption);color:var(--faint);text-align:center;margin-top:.4em}
/* 카드 «바깥» 라벨 — 좌측 컬러바를 떼고 회색 캡션으로. 카드가 스스로 경계를 말하므로 바가 중복이다. */
.p-label{display:flex;align-items:baseline;gap:var(--inline-gap);
  font-size:var(--fs-meta);font-weight:var(--fw-semi);color:var(--sub);letter-spacing:.02em;
  line-height:1.45;padding:0 var(--gutter) var(--label-gap)}
.p-label>*{margin-left:auto}                   /* 세그먼트 토글은 우측 정렬 */
/* ★라벨 옆 보조문은 «글자 크기가 다른 한 줄»이다 — align-items:center 로 상자를 가운데 맞추면
   14px 과 12px 의 밑줄이 어긋난다(2026-09-11 오너 지적). 축을 baseline 으로 바꾸고,
   글자가 아닌 조작부만 가운데로 되돌린다. 보조문의 세로 마진도 이 줄에선 0 이어야 한다. */
.p-label .cluster-sub,.p-label .cluster-theme{margin:0;padding-left:0}
.p-label>button,.p-label .viewtog,.p-label .z0-wide{align-self:center}
.p-label-in{padding-left:0;padding-right:0}    /* 카드 «안»에 남는 라벨(잠금 패널) */
.viewtog{margin-left:auto;display:flex;border:1px solid var(--grid);border-radius:var(--r-sm);overflow:hidden}
.viewtog button{font-family:inherit;font-size:var(--fs-meta);padding:.2em .6em;border:none;background:var(--sheet);color:var(--sub);cursor:pointer}
.viewtog button.on{background:var(--indigo);color:var(--on-accent)}
/* design-pass §1-b 색면 제거(2026-09-11): 분홍 색면 → 좌측 바(09-21 폐기 → 라벨색+아이콘) + 라벨.
   _tokens.css 헌장 「시맨틱 상태색 — 색 단독 금지, 항상 아이콘+라벨+좌측 컬러바 병기」의 이행이다.
   축도 --pen(오답)에서 --o(정답 핵심)로 교정 — 이 블록이 말하는 것은 «정답의 근거»다. */
/* ★1순위 앵커 = 이 한 덩어리. 목업 v3 대로 «한 단 큰 글씨»로 올리고 좌측 컬러바를 뗀다 —
   카드가 이미 경계를 말하는데 바까지 두면 구판의 「띠 겹침」 인상이 남는다(2026-09-11 오너 지적). */
.gist{font-size:var(--fs-h3);line-height:1.6;letter-spacing:-.01em;border-left:none;padding:0;margin-bottom:var(--block-gap)}
/* P0-4: gist 단일 1순위 앵커 — 작은 캡션으로 '먼저 읽을 것' 확정 */
.gist .gist-cap{display:block;font-size:var(--fs-meta);font-weight:var(--fw-bold);letter-spacing:.04em;color:var(--o);margin-bottom:.25em}
/* 근거 규범 1줄(2026-07-29 · intent.self_core_concept · 문항 단위 1개) — gist(무엇이 갈랐나) 다음에 "그 근거 규범"을 잇는다.
   gist 는 pen(빨강) 강조로 1순위를 잡고 있으므로 여기는 **한 단 낮은 위계**: 무채 카드(2026-09-18 좌강조바 폐기).
   gist 의 margin-bottom(1em)을 물려받지 않도록 바로 위로 당겨 붙인다(두 블록이 한 덩어리로 읽히게). */
.gist + .core-concept{margin-top:-.6em}
.core-concept{font-size:var(--fs-caption);line-height:1.55;color:var(--ink-2);
  padding:.5em .75em;border-radius:var(--r-sm);margin-bottom:1em}
.core-concept .cc-cap{display:block;font-size:var(--fs-meta);font-weight:var(--fw-bold);letter-spacing:.04em;color:var(--indigo);margin-bottom:.2em;opacity:.9}

/* P0-1: 내가 고른 오답 선지 진단 카드 (정답 오답노트보다 우선 · 함정=빨강계 통일) */
.mywrong{padding:.1em 0 .1em .8em;margin-bottom:1em}
.mywrong .mw-h{font-size:var(--fs-meta);font-weight:var(--fw-bold);color:var(--pen);margin-bottom:.35em}
.mywrong .mw-pick{font-family:"IBM Plex Mono";background:var(--pen);color:var(--on-accent);border-radius:var(--r-xs);padding:.05em .45em;margin-right:.35em}
.mywrong .mw-core{font-size:var(--fs-caption);line-height:1.45;margin:.2em 0;color:var(--ink-2)}
.mywrong .mw-mech{display:flex;gap:.3em;flex-wrap:wrap;margin:.35em 0}
.mywrong .mw-root{font-size:var(--fs-caption);line-height:1.45;margin:.3em 0 .1em;color:var(--ink-2)}

/* P0-4: 보조 정보(의도/콤보 교차)는 채도 강등 — 색은 작은 라벨에만, 본문은 무채 카드 */
/* (죽은 잉크 제거 2026-07-29: .intent-line/.il-q=출제의도 독립블록 폐지(gist 병합) · .lowreason/.td-low=confidence 전면 비노출(07-05)
    · .pair-row=평문 파서 은퇴(07-18) · .nc-result/.nc-today=결과 요약이 .verdict-row 로 승격(07-06). 전부 발행처 0건 실측.) */
/* 콤보 정답 묶음 교차 검증 카드 (intent_v_next) */
.combox{font-size:var(--fs-caption);background:var(--sheet-2);border:1px solid var(--grid);border-radius:var(--r-sm);padding:.5em .7em;margin-bottom:.8em;line-height:1.55}
.combox .cx-l{font-size:var(--fs-meta);font-weight:var(--fw-bold);letter-spacing:.03em;color:var(--o);margin-right:.4em;text-transform:uppercase}
.combox .cx-no{color:var(--amber-ink);font-size:var(--fs-meta)}
.combox .cx-brief{margin-top:.3em;color:var(--amber-ink);font-size:var(--fs-caption);border-top:1px solid var(--amber-line);padding-top:.3em}
.combox .cx-why{margin-top:.25em;color:var(--sub);font-size:var(--fs-meta)}
.combox .mono{font-family:"IBM Plex Mono",monospace}

/* (구 우선순위 리스트 `.prio*` 8클래스 제거 2026-07-29 — 2026-07-06 선지별 분석 3모드 재편에서 `.mrow`+`.viewtog` 로
    대체됐는데 CSS 만 12줄 남아 있었다. 발행처 repo 전수 0건: qid_app 의 `prio` 는 prioIdxs()·study_priority_order 식별자뿐.) */

.insp{padding:.5em .2em .2em}
.insp .sub{padding:.35em 0;border-bottom:1px solid var(--grid)}.insp .sub:last-child{border-bottom:none}
.insp b{font-size:var(--fs-meta);color:var(--indigo);display:inline-block;margin-bottom:.1em}
.insp .sub.prec b{color:var(--o)}.insp .sub.memo b{color:var(--amber)}
.insp p{margin:0;font-size:var(--fs-caption);line-height:1.55}
/* 법조문 표기 서식 — 선두 조문명 배지 + 문장 중 조문번호 볼드 */
.art-badge{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-meta);font-weight:var(--fw-bold);color:var(--indigo);background:var(--indigo-soft);border:1px solid var(--grid);padding:.04em .5em;border-radius:var(--r-pill);vertical-align:.1em;margin-right:.2em;white-space:nowrap}
/* 채점 후 좌패널 선지별 해설(choice_ctx.self_explain_text) 인라인 */
.mrow-explain{margin-top:.45em;font-size:var(--fs-caption);line-height:1.55;color:var(--ink-2);background:var(--sheet);padding:.4em .65em;border-radius:0 var(--r-sm) var(--r-sm) 0}
/* 선지 비교표 가로 스크롤 + 우측 페이드/스크롤 표식 */
.lg-scroll{position:relative}
.lg-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 구 상시 우측 그라데이션(::after) 폐기(2026-07-12) — 스크롤 신호 = XScroll 공용(.xsw · hub_xscroll.js 자동 감지)이 승계.
   구판은 넘침 여부와 무관하게 늘 떠 있어 "끝인지 아닌지"를 못 알려줬다. 승계판은 넘칠 때만·양끝에서 소멸. */
.scroll-hint{font-size:var(--fs-meta);font-weight:var(--fw-bold);color:var(--indigo);background:var(--indigo-soft);padding:.06em .5em;border-radius:var(--r-pill);white-space:nowrap;margin-left:.3em;letter-spacing:0}
.art-go{color:var(--sub);margin:0 .1em 0 .28em;font-weight:var(--fw-reg)}
/* 핵심블럭 정답 선지 프리픽스 배지 */
.gist .ans-badge{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-meta);font-weight:var(--fw-bold);color:var(--o);background:var(--o-soft);border:1px solid var(--o-line);padding:.05em .5em;border-radius:var(--r-pill);vertical-align:.12em;margin-right:.15em}
/* 선지 대비쌍 — 오답/정답 배지 안에 특징 텍스트 */
.pair-duo{display:flex;align-items:stretch;gap:.4em;flex-wrap:wrap}
.pair-duo .pair-vs{align-self:center;color:var(--sub);font-size:var(--fs-caption);margin:0}
.pd-side{flex:1;min-width:8.5em;border-radius:var(--r-sm);padding:.32em .55em;border:1px solid var(--grid)}
.pd-wrong{background:var(--pen-soft);border-color:var(--pen-line)}
.pd-ans{background:var(--o-soft);border-color:var(--o-line)}
.pd-tag{display:block;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-meta);font-weight:var(--fw-bold);margin-bottom:.18em}
.pd-wrong .pd-tag{color:var(--pen)}.pd-ans .pd-tag{color:var(--o)}
.pd-feat{font-size:var(--fs-caption);line-height:1.45;color:var(--ink-2)}
.pair-note{font-size:var(--fs-meta);color:var(--sub);margin-top:.4em;line-height:1.45}
/* 판례 근거 폴백(접지 판례 법리 · self_ox_precedent_basis 공란분) */
.prec-fb-tag{font-size:var(--fs-meta);font-weight:var(--fw-semi);color:var(--faint);background:var(--grid);padding:.04em .5em;border-radius:var(--r-sm);vertical-align:.08em}
/* @판례 접이식 — 요약만 보이고 상세는 '상세 보기' 토글 */
.prec-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4em;flex-wrap:wrap}
.prec-fold>summary::-webkit-details-marker{display:none}
/* 토글 어포던스(2026-07-17 마크업 분리 + ★반전 봉합) — 구 "접기 ▾" 는 규약 B(텍스트 동반=액션 힌트:
   펼치기 아래·접기 위)인데 화살표만 규약 A(디스클로저)를 써서 faq-onramp「접기 ▴」와 정반대였다.
   의사요소=텍스트만 / 아이콘=마크업 span(한 의사요소가 텍스트+마스크 겸업 불가) · 회전으로 방향 통일. */
.prec-fold>summary .prec-more{margin-left:auto;display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-meta);font-weight:var(--fw-bold);color:var(--indigo);background:var(--indigo-soft);padding:.05em .55em;border-radius:var(--r-pill);white-space:nowrap}
.prec-fold>summary .prec-more::before{content:"상세 보기"}
.prec-fold[open]>summary .prec-more::before{content:"접기"}
.prec-fold>summary .prec-more .fi{transition:transform var(--dp-dur) var(--dp-ease)}
.prec-fold[open]>summary .prec-more .fi{transform:rotate(180deg)}
.prec-fold-body{margin-top:.15em}
.prec-fb .prec-item{margin-top:.32em;padding-left:.6em;}
.prec-fb .prec-item b{font-size:var(--fs-meta);color:var(--o);margin:0}
.prec-fb .prec-cid{font-size:var(--fs-meta);color:var(--faint);font-variant-numeric:tabular-nums}
a.prec-cid{color:var(--brand-deep);text-decoration:none;border-bottom:1px solid currentColor;cursor:pointer}/* T2-1(c) 판례 허브 딥링크 */
a.prec-cid:hover{color:var(--brand)}
.prec-fb .prec-ratio{margin:.12em 0 0;font-size:var(--fs-caption);line-height:1.45}
.prec-fb .prec-hold{margin:.18em 0 0;font-size:var(--fs-meta);line-height:1.45;color:var(--faint)}
/* 요지 출처 한 줄(법원 것이 아닐 때만 · 문안 정본 = hub_content.js holdingSource) */
.prec-fb .prec-hsrc{margin:.14em 0 0;font-size:var(--fs-meta);line-height:1.45;color:var(--sub)}
.mech-chips{display:inline-flex;gap:.3em;flex-wrap:wrap;margin-left:.4em}
.trap-mech{display:inline-block;padding:.05em .5em;border-radius:var(--r-sm);background:var(--pen-soft);color:var(--pen);font-size:var(--fs-meta);font-weight:var(--fw-semi);white-space:nowrap}
.trap-mech.sec{background:transparent;color:var(--pen);border:1px solid var(--pen-line)} /* P0-5: 함정은 전부 빨강계(2차=아웃라인 구분) */
.trap-mech.amd{background:var(--purple-soft);color:var(--purple)}
/* 치환쌍(⇄ 표현 교정) — 함정 표현 ↔ 바른 표현 대비 (2026-07-10 감사 B-2) */
.swap-pair{display:flex;align-items:baseline;gap:.45em;flex-wrap:wrap;margin-top:.25em;line-height:1.55}
.swap-pair .sw-x{color:var(--pen);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--pen-line)}
.swap-pair .sw-arr{color:var(--faint);flex:0 0 auto}
.swap-pair .sw-o{color:var(--o-ink);font-weight:var(--fw-semi)}
/* 혼동 대상(헷갈린 상대) — error_pattern.confusion_target (2026-07-10 감사 B-3) */
.ct-row{margin:.35em 0 0;font-size:var(--fs-caption);line-height:1.55;color:var(--sub)}
.ct-row .ct-l{display:inline-block;margin-right:.45em;padding:.02em .45em;border-radius:var(--r-sm);background:var(--pen-soft);color:var(--pen);font-size:var(--fs-meta);font-weight:var(--fw-bold);white-space:nowrap}
.ct-row.sec .ct-l{background:transparent;border:1px solid var(--pen-line)}
.insp .sub.vrow{border-bottom:none;padding:.1em 0 .25em}
.vbadge{display:inline-block;padding:.05em .6em;border-radius:var(--r-sm);font-size:var(--fs-meta);font-weight:var(--fw-bold)}
.vbadge.v-ok{background:var(--o-soft);color:var(--o)}
.vbadge.v-warn{background:var(--amber-soft);color:var(--amber-ink);border:1px solid var(--amber-line)} /* P0-5: 재확인=앰버(경계), 오답=빨강 분리 */
.memo-box{padding:.1em 0;font-size:var(--fs-caption);line-height:1.55;color:var(--ink-2)}
.timeflip{display:flex;border:1px solid var(--amber-line);border-radius:var(--r-sm);overflow:hidden;margin:.2em 0;font-size:var(--fs-caption)}
.timeflip>div{flex:1;padding:.3em .5em}.tf-x{background:var(--sheet-2);color:var(--sub)}.tf-c{background:var(--amber-soft);color:var(--amber-ink);font-weight:var(--fw-semi)}.tf-l{display:block;font-size:var(--fs-meta);opacity:.7}

/* 격자 */
table.lg{border-collapse:collapse;width:100%;font-size:var(--fs-meta);margin-bottom:.3em}/* 각 레이아웃 모드 패널 폭에 맞춤 · 좁으면 .lg-wrap 가로스크롤(모바일) */
table.lg th{background:var(--sheet-2);border-bottom:2px solid var(--grid);border-right:1px solid var(--grid);padding:.3em .4em;text-align:center;font-size:var(--fs-meta);color:var(--sub);font-weight:var(--fw-bold);white-space:nowrap}
table.lg td{border-bottom:1px solid var(--grid);border-right:1px solid var(--grid);padding:.35em .45em;vertical-align:middle}
.lg .fz{text-align:left;white-space:normal;min-width:8em}.lg .fz-idx{font-family:"IBM Plex Mono";font-weight:var(--fw-semi);color:var(--sub);margin-right:.3em}
.lg .cell{cursor:pointer;text-align:center;font-family:"IBM Plex Mono";color:var(--sub)}
.lg td.fz{text-align:left;padding-right:.25em}/* 선지열 데이터셀 좌측정렬·우측 여백 축소(내용에 밀착) */
.lg .cell:hover{background:var(--indigo-soft)}
.lg tr.foc td{background:var(--focus-bg)}
.g-filled{color:var(--ink)}.g-empty{color:var(--faint)}
.axis-chip{font-size:var(--fs-meta);padding:.04em .45em;border-radius:var(--r-xs);white-space:nowrap;background:transparent;border:1px solid var(--grid-strong);color:var(--ink-2)} /* P2-10: 16색 해체 → 단일 무채 아웃라인(종류는 한글 라벨이 변별) */
.amendflag{color:var(--amber);font-weight:var(--fw-bold)}
.amend-hist{color:var(--faint)}
.grid-insp{border:1px solid var(--grid);border-radius:var(--r-sm);padding:.4em .7em;background:var(--sheet);margin-top:.3em}

/* 심화 접이식 */
details.deep{border:1px solid var(--grid);border-radius:var(--r-sm);margin-top:.5em;background:var(--sheet)}
details.deep>summary{cursor:pointer;font-size:var(--fs-meta);font-weight:var(--fw-bold);color:var(--sub);padding:.45em .7em;list-style:none}
details.deep>summary::-webkit-details-marker{display:none}
details.deep>summary .dcount{color:var(--indigo);font-weight:var(--fw-bold);font-size:var(--fs-meta);margin-left:.3em} /* W3 #6: 닫힌 details 내용 배지 */
.p-label .dcount{color:var(--indigo);font-weight:var(--fw-bold);font-size:var(--fs-meta);margin-left:.3em}
.cluster-theme{font-size:var(--fs-caption);color:var(--ink);font-weight:var(--fw-semi);line-height:1.45;margin:.35em 0 .1em;padding-left:calc(.55em + 3px)} /* 연관 묶음 테마 본문(p-label 텍스트와 좌측 정렬) */
.cluster-sub{font-size:var(--fs-meta);color:var(--sub);margin:.1em 0 .4em;padding-left:calc(.55em + 3px)} /* W3 #8: 인접문항 안내 */
/* 연관 묶음 → SRS 반복 훈련 핸드오프 링크 (2026-06-15 보류항 해소) */
.cluster-drill,.combo-drill{display:inline-block;margin-top:.5em;font-size:var(--fs-meta);font-weight:var(--fw-semi);color:var(--indigo);text-decoration:none;border-bottom:1px solid currentColor}
.cluster-drill:hover,.combo-drill:hover{border-bottom-style:solid}
.combo-drill{margin-bottom:.8em}/* T2-4(b) 콤보 분해 발신 */
/* W6: term_dictionary 관련 용어 칩 + 인라인 정의 팝오버 */
.term-chips{display:flex;flex-wrap:wrap;gap:.3em;margin-top:.3em}
.term-chip{font-size:var(--fs-meta);border:1px solid var(--grid);border-radius:var(--r-pill);padding:.18em .7em;color:var(--ink);background:var(--sheet);cursor:pointer;font-weight:var(--fw-semi)}
.term-chip:hover{border-color:var(--indigo);color:var(--indigo)}
.term-chip.on{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.term-def{margin-top:.5em;padding:.6em .8em;border:1px solid var(--grid);border-radius:var(--r-sm);background:var(--sheet)}
.term-def .td-term{font-weight:var(--fw-bold);font-size:var(--fs-caption);display:flex;align-items:center;gap:.5em}
.term-def .td-def{font-size:var(--fs-caption);line-height:1.55;margin-top:.25em}
.term-def .td-syn{font-size:var(--fs-meta);color:var(--sub);margin-top:.35em}
.term-def .td-art{font-size:var(--fs-meta);color:var(--sub);margin-top:.25em}
details.deep>summary::before{content:"";display:inline-block;width:1em;height:1em;flex:0 0 auto;background:currentColor;vertical-align:-.125em;margin-right:.2em;-webkit-mask:url(./icons/angle-small-right.svg?v=20260717) center/contain no-repeat;mask:url(./icons/angle-small-right.svg?v=20260717) center/contain no-repeat;color:var(--indigo);transition:transform var(--dp-dur) var(--dp-ease)}
details.deep[open]>summary::before{transform:rotate(90deg)}
details.deep .dc{padding:.2em .8em .7em;font-size:var(--fs-caption);line-height:1.55}
/* 선지 간 비교 — 배지 카드 */
.pair-card{border:1px solid var(--grid);border-radius:var(--r-sm);padding:.45em .6em;margin:.4em 0;background:var(--sheet)}
.pair-head{display:flex;align-items:center;gap:.5em;margin-bottom:.35em;flex-wrap:wrap}
.pair-vs{color:var(--sub);font-size:var(--fs-caption)}
.pbadge{display:inline-flex;align-items:center;gap:.25em;font-size:var(--fs-meta);font-weight:var(--fw-bold);padding:.12em .55em;border-radius:var(--r-pill);font-family:"IBM Plex Mono";white-space:nowrap}
.pb-ans{background:var(--o-soft);color:var(--o);border:1px solid var(--o-line)}
.pb-wrong{background:var(--pen-soft);color:var(--pen);border:1px solid var(--pen-line)}
.pair-expl{font-size:var(--fs-caption);line-height:1.55;color:var(--ink-2)}
/* 옵션3 — 정답 기준 그루핑 */
.pair-group{border:1px solid var(--grid);border-radius:var(--r-sm);padding:.5em .65em;background:var(--sheet)}
.pg-ans{display:flex;gap:.5em;align-items:baseline;padding-bottom:.45em;margin-bottom:.45em;border-bottom:1px solid var(--grid)}
.pg-ans-core{font-size:var(--fs-caption);color:var(--o-ink);font-weight:var(--fw-semi);line-height:1.45}
.pg-rows{display:flex;flex-direction:column;gap:.15em}
.pg-row{display:flex;gap:.5em;align-items:baseline;padding:.3em 0;font-size:var(--fs-caption);line-height:1.55;border-bottom:1px solid var(--grid)}
.pg-row:last-child{border-bottom:none}
.pg-expl{color:var(--ink-2);flex:1}
/* 출제각 변천 — 타임라인 */
/* .ea-* 규칙은 파일 말미에서 전면 재작성(2026-09-11) — 여기 구판은 제거됨 */
.corr{counter-reset:s;list-style:none;padding:0;margin:.3em 0}
.corr li{position:relative;padding:.22em 0 .22em 1.85em;font-size:var(--fs-caption);line-height:1.55}
.corr li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:.42rem;width:1.25rem;height:1.25rem;line-height:1.25rem;text-align:center;background:var(--pen);color:var(--on-accent);border-radius:50%;font-size:var(--fs-meta);font-family:"IBM Plex Mono"}
.chips{display:flex;flex-wrap:wrap;gap:.3em;margin-top:.5em}
.chip{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--bdg-h-s);padding:0 var(--bdg-px-s);font-size:var(--fs-micro,.7rem);line-height:1.0;border:1px solid var(--grid);border-radius:var(--r-pill);color:var(--sub);background:var(--sheet);text-decoration:none;cursor:pointer}/* S 티어(2026-07-12) */
.chip:hover{border-color:var(--indigo);color:var(--indigo)}
.chip.sticky{border-color:var(--color-wrong)} /* B3: 여러 번 틀리기 쉬운 followup(empirical_sticky) */
.chip.sticky:hover{border-color:var(--color-wrong);color:var(--color-wrong)}
.chip .sk{color:var(--color-wrong);font-weight:var(--fw-bold);font-size:var(--fs-meta);margin-left:.3em;letter-spacing:.02em}
.empty-note{font-size:var(--fs-meta);color:var(--faint);font-style:italic;margin-top:.5em}
/* P1-9: 채점 후 '다음 행동' CTA — 결과 요약 + 다음/회수 (본문 흐름 종착점) */
.next-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.6em;margin-top:1.3em;padding-top:.9em;border-top:2px solid var(--grid)}
.next-cta .nc-btns{margin-left:auto;display:flex;gap:.4em;flex-wrap:wrap}
.next-cta .nc-btn{font-family:inherit;font-size:var(--fs-caption);padding:.42em .9em;border:1px solid var(--grid-strong);background:var(--sheet);color:var(--ink-2);border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:.35em}
.next-cta .nc-btn:hover{border-color:var(--indigo);color:var(--indigo)}
.next-cta .nc-btn.primary{background:var(--indigo);color:var(--on-accent);border-color:var(--indigo);font-weight:var(--fw-semi)}
.next-cta .nc-btn.primary:hover{color:var(--on-accent);opacity:.92}

/* ===== 문번 그리드 (Z0 골라가기 팝오버 내부 — 구 하단 페이저 흡수 2026-07-03) ===== */
.qnum-grid{display:grid;grid-template-columns:repeat(auto-fill,2.4em);gap:.35em;justify-content:start;min-width:280px}
.qnum{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-meta);height:2.4em;display:flex;align-items:center;justify-content:center;border:1px solid var(--grid);background:var(--sheet);color:var(--sub);border-radius:var(--r-xs);text-decoration:none;cursor:pointer}
.qnum:hover{border-color:var(--indigo);color:var(--indigo)}
.qnum.cur{background:var(--indigo);color:var(--on-accent);border-color:var(--indigo);font-weight:var(--fw-semi)}

/* ===== 검색 결과 패널 — Z0 검색창 앵커(구 화면상단 fixed → .z0-search absolute 2026-07-03) ===== */
.search-panel{position:absolute;top:calc(100% + 6px);right:0;width:min(680px,92vw);max-height:60vh;overflow:auto;
  background:var(--sheet);border:1px solid var(--grid);border-radius:var(--r-sm);box-shadow:0 12px 36px rgba(0,0,0,.18);z-index:60;display:none}
.search-panel.is-open{display:block}
.sp-item{display:grid;grid-template-columns:auto auto 1fr;gap:.6em;align-items:baseline;padding:.5em .8em;border-bottom:1px solid var(--grid);text-decoration:none;color:var(--ink);cursor:pointer}
.sp-item:hover{background:var(--indigo-soft)}
.sp-cp{font-size:var(--fs-meta);color:var(--indigo);font-weight:var(--fw-semi);white-space:nowrap}
.sp-meta{font-size:var(--fs-meta);color:var(--sub);white-space:nowrap}
.sp-text{font-size:var(--fs-caption);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-empty{padding:.8em;color:var(--sub);font-size:var(--fs-caption);text-align:center}

/* Phase C — 분석 잠금 업셀 (기능 기본안 · 시각 폴리시는 후속 디자인 발주) */
/* ★세로 스택 — 자식이 업셀 카드 하나뿐이던 시절의 가운데정렬 행(구: flex row)이, next-cta 합류(2026-07-16
   게이트 패널 다음문항 동선 복구) 후 카드와 버튼을 나란히 앉혀 정렬이 깨졌다(오너 지적). 카드=가운데,
   CTA=아래 전폭. */
.panel.upsell{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:180px;gap:1.1em}
.panel.upsell .next-cta{width:100%;margin-top:0}
.panel.upsell .nc-btns{margin-left:0;width:100%;justify-content:center}/* 밀어낼 상대가 없는 패널 — margin-left:auto 는 우측 벽에 붙여 들쭉날쭉하게 만든다 */
/* 무료 잠금 패널의 판정 행(2026-07-29 공용화 — 채점은 무료축) : 업셀 패널이 가운데 정렬 세로 스택이라 폭·정렬을 그 문법에 맞춘다.
   .v-pace 의 margin-left:auto 는 가운데 정렬과 싸워 캡션만 우측 벽에 붙으므로 이 스코프에서만 해제(.nc-btns 와 동일 처방). */
.panel.upsell .verdict-row{width:100%;justify-content:center;margin:0}
.panel.upsell .v-pace{margin-left:0}
/* 잠금 안내 카드 — 정본 hub_ui.css 와 «같은 값»(2026-09-13 계약 이관 · 네 벌 동시 갱신 원칙).
   이 페이지는 hub_ui.css 미링크라 사본이 실제로 쓰인다. 값을 바꿀 땐 정본·사본 4곳을 한 커밋에. */
.upsell-card{text-align:center;max-width:360px;margin:var(--block-gap) auto;padding:var(--card-pad);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--canvas)}
.upsell-card .us-lock{margin-bottom:var(--label-gap);line-height:1}
.upsell-card .us-lock .fi{width:var(--ic-lg);height:var(--ic-lg);color:var(--brand-deep)}
.upsell-card .us-title{font-weight:var(--fw-bold);color:var(--ink);margin-bottom:var(--label-gap);font-size:var(--fs-body)}
.upsell-card .us-desc{font-size:var(--fs-caption);color:var(--ink-muted);line-height:1.55;margin-bottom:var(--block-gap)}
.upsell-card .us-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--row-h);padding:.7em 1.1em;border:0;border-radius:var(--r-pill);background:var(--brand-deep);color:var(--on-brand-deep);font-weight:var(--fw-bold);cursor:pointer;font-size:var(--fs-caption)}
.upsell-card .us-btn:hover{filter:brightness(1.08)}
/* 체험 중 1일차 CTA 「구독 등록」 링크(정본 hub_ui.css 2026-09-20 · 유일 생산처가 qid_app.js 인데 qid 는 hub_ui 미링크라 여기 사본이 실제 규칙 · 2026-09-22) */
.lock-note.trial-cta a{color:var(--brand-deep);font-weight:var(--fw-bold);text-decoration:underline;text-underline-offset:.2em}
/* 체험 시작 카드의 보조 갈래·링크 판(정본 hub_ui.css 2026-09-20/21 · 사본 누락 2026-09-22 봉합 — 무료 계정 게이트에서 「구독 안내 →」가 맨 링크로 그려졌다) */
.upsell-card .us-alt{display:block;margin:var(--label-gap) auto 0;min-height:var(--row-h);padding:0 .5em;border:0;background:none;color:var(--ink-muted);font-size:var(--fs-caption);text-decoration:underline;text-underline-offset:.2em;cursor:pointer;font-family:inherit}
.upsell-card .us-alt:hover{color:var(--ink)}
.upsell-card a.us-alt{display:flex;align-items:center;justify-content:center;width:max-content;max-width:100%}

/* uicons 마스크 아이콘 — qid는 hub_ui.css 미링크(자족 스타일시트)라 .fi 베이스+사용분 인라인 (단일소스 ./icons · currentColor 테마적응 · 2026-06-26 이모지 정화) */
/* .fi 아이콘 = icons.css 단일정본(2026-06-30 통일) */




/* 레인 D-2 풀이단계 action 6-enum + 경고 (2026-06-27) */







/* 탑바 back 홈 아이콘(자족) */

/* ===== 레인 D-2: 풀이단계 worked-example stepper (지연주입 · 2026-06-27 신규 5레인) ===== */
.solve-badge-wrap{margin-top:1em}
.solve-badge{display:inline-flex;align-items:center;gap:.5em;font:inherit;font-size:var(--fs-caption);font-weight:var(--fw-bold);color:var(--indigo);background:var(--indigo-soft);border:1px solid var(--indigo);border-radius:var(--r-pill);padding:.5em 1.1em;cursor:pointer}
.solve-badge .fi{width:1.05em;height:1.05em}
.solve-badge:hover{background:var(--indigo);color:#fff}
.solve-badge .sb-sub{font-weight:var(--fw-med);opacity:.75;font-size:var(--fs-meta)}
.solve-badge:hover .sb-sub{opacity:.9}
.solve-load{margin-top:1em;color:var(--faint);font-size:var(--fs-caption)}
.we-stepper{margin-top:.4em;border-left:2px solid var(--indigo-soft);padding-left:1.1em;display:flex;flex-direction:column;gap:.55em}
.we-step{position:relative}
.we-step>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6em;padding:.15em 0}
.we-step>summary::-webkit-details-marker{display:none}
.we-node{position:absolute;left:calc(-1.1em - 6px);top:.5em;width:9px;height:9px;border-radius:50%;background:var(--indigo);border:2px solid var(--paper)}
.we-chip{display:inline-flex;align-items:center;gap:.4em;font-size:var(--fs-meta);font-weight:var(--fw-bold);color:var(--indigo);background:var(--indigo-soft);border-radius:var(--r-pill);padding:.2em .8em}
.we-chip .fi{width:1em;height:1em}
.we-hint{font-size:var(--fs-meta);color:var(--faint)}
.we-step[open]>summary .we-hint{display:none}
.we-body{padding:.5em 0 .3em 0}
.we-text{margin:0 0 .5em 0;font-size:var(--fs-caption);line-height:1.7;color:var(--ink)}
.we-quote{font-size:var(--fs-caption);color:var(--sub);background:var(--sheet);border-radius:var(--r-sm);padding:.5em .8em;line-height:1.55;margin-bottom:.5em}
.we-quote .wq-l{font-size:var(--fs-meta);color:var(--faint);font-weight:var(--fw-semi);text-transform:uppercase;letter-spacing:.04em;margin-right:.5em}
.we-src{color:var(--indigo);text-decoration:none;font-family:var(--font-mono);font-size:var(--fs-caption);white-space:nowrap}
.we-src:hover{text-decoration:underline}
.we-src.plain{color:var(--sub)}
.we-pit{font-size:var(--fs-caption);color:var(--amber-ink);background:var(--amber-soft);border:1px solid var(--amber-line);border-radius:var(--r-sm);padding:.5em .8em;line-height:1.55;display:flex;align-items:flex-start;gap:.5em}
.we-pit .fi{width:1em;height:1em;flex:0 0 auto;margin-top:.15em}
.we-self{margin-top:.8em;display:flex;flex-wrap:wrap;align-items:center;gap:.5em}
.we-self-q{width:100%;font-size:var(--fs-caption);color:var(--sub)}
.we-self-b{font:inherit;font-size:var(--fs-meta);font-weight:var(--fw-semi);border:1px solid var(--grid);border-radius:var(--r-pill);padding:.4em 1em;background:var(--sheet);color:var(--ink);cursor:pointer}
.we-self-b:hover{border-color:var(--indigo)}
.we-self-b.ok:hover{border-color:var(--indigo);background:var(--indigo-soft)}
.we-self-done{font-size:var(--fs-caption);color:var(--sub);line-height:1.45}
/* 레인: calc_walkthrough 계산 풀이 단계(정적 slim·무료·2026-07-04) — worked_example(유료 법리추론)과 별개 산술 분해 섹션 */
details.calc-walk{border:1px solid var(--grid);border-radius:var(--r-sm);margin-top:.6em;background:var(--sheet)}
details.calc-walk>summary{cursor:pointer;font-size:var(--fs-caption);font-weight:var(--fw-bold);color:var(--indigo);padding:.5em .7em;list-style:none;display:flex;align-items:center;gap:.4em}
details.calc-walk>summary::-webkit-details-marker{display:none}
details.calc-walk>summary::before{content:"";display:inline-block;width:1em;height:1em;flex:0 0 auto;background:currentColor;-webkit-mask:url(./icons/angle-small-right.svg?v=20260717) center/contain no-repeat;mask:url(./icons/angle-small-right.svg?v=20260717) center/contain no-repeat;color:var(--indigo);font-size:var(--ic-sm);transition:transform var(--dp-dur) var(--dp-ease)}
details.calc-walk[open]>summary::before{transform:rotate(90deg)}
details.calc-walk>summary .fi{width:1em;height:1em}
details.calc-walk>summary .dcount{color:var(--indigo);font-weight:var(--fw-bold);font-size:var(--fs-meta)}
.calc-walk .cw-hint{font-size:var(--fs-meta);color:var(--faint);font-weight:var(--fw-med);margin-left:auto}
.calc-walk .cw-body{padding:.3em .85em .8em;font-size:var(--fs-caption);line-height:1.55}
.calc-walk .cw-l{font-size:var(--fs-meta);color:var(--faint);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.04em;margin-right:.4em}
.calc-walk .cw-formula{background:var(--indigo-soft);border-radius:var(--r-sm);padding:.5em .7em;line-height:1.55;color:var(--ink)}
.calc-walk .cw-quote{font-size:var(--fs-caption);color:var(--sub);background:var(--paper);border:1px solid var(--grid);border-radius:var(--r-sm);padding:.45em .7em;line-height:1.55;margin-top:.5em}
.calc-walk .cw-quote .wq-l{font-size:var(--fs-meta);color:var(--faint);font-weight:var(--fw-semi);text-transform:uppercase;letter-spacing:.04em;margin-right:.4em}
.calc-walk .cw-inputs{margin-top:.6em}
.calc-walk .cw-inp-list{list-style:none;margin:.3em 0 0;padding:0;display:flex;flex-direction:column;gap:.25em}
.calc-walk .cw-inp-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em}
.calc-walk .cw-val{font-family:var(--font-mono);color:var(--indigo);font-size:var(--fs-caption)}
.calc-walk .cw-src{font-size:var(--fs-meta);color:var(--sub)}
.calc-walk .cw-steps{margin:.7em 0 0;padding-left:1.4em;display:flex;flex-direction:column;gap:.45em}
.calc-walk .cw-steps li{line-height:1.45}
.calc-walk .cw-op{display:block;color:var(--ink)}
.calc-walk .cw-calc{display:inline-block;margin-top:.15em;font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--sub)}
.calc-walk .cw-ar{color:var(--sub)}
.calc-walk .cw-res{color:var(--indigo)}
.calc-walk .cw-check{margin-top:.7em;font-size:var(--fs-caption);display:flex;align-items:center;gap:.4em;flex-wrap:wrap;padding:.45em .7em;border-radius:var(--r-sm)}
.calc-walk .cw-check.ok{background:var(--indigo-soft);color:var(--ink)}
.calc-walk .cw-check.no{background:var(--amber-soft);border:1px solid var(--amber-line);color:var(--amber-ink)}
.calc-walk .cw-check .fi{width:1em;height:1em;color:var(--indigo)}
.calc-walk .cw-mnem{margin-top:.6em;font-size:var(--fs-caption);color:var(--sub);display:flex;align-items:flex-start;gap:.4em;line-height:1.55}
.calc-walk .cw-mnem .fi{width:1em;height:1em;flex:0 0 auto;margin-top:.15em;color:var(--amber-ink)}
/* 판단 순서(subtopic_tip.legal_flowchart) — calc-walk 크롬 재사용 + 조건/분기 전용층 (2026-07-10 감사 B-1) */
.flow-walk .fw-rat{font-size:var(--fs-caption);color:var(--sub);line-height:1.55;padding:.45em .7em;background:var(--paper);border:1px solid var(--grid);border-radius:var(--r-sm);margin-bottom:.6em}
.flow-walk .fw-cond{margin-top:.55em}
.flow-walk .fw-q{display:flex;align-items:flex-start;gap:.5em;line-height:1.55;color:var(--ink);font-weight:var(--fw-semi)}
.flow-walk .fw-num{flex:0 0 auto;width:1.35em;height:1.35em;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--indigo-soft);color:var(--indigo);font-size:var(--fs-meta);font-weight:var(--fw-bold);margin-top:.1em}
.flow-walk .fw-branch{margin:.35em 0 0 1.85em;display:flex;flex-direction:column;gap:.25em;font-size:var(--fs-caption);line-height:1.55}
.flow-walk .fw-branch b{font-size:var(--fs-meta);letter-spacing:.03em;margin-right:.4em}
.flow-walk .fw-yp b{color:var(--indigo)}
.flow-walk .fw-np b{color:var(--faint)}
.flow-walk .fw-ex{margin-top:.7em;font-size:var(--fs-meta);color:var(--sub)}
.flow-walk .fw-ex a{color:var(--indigo);font-family:var(--font-mono);font-size:var(--fs-meta)}

/* ===== 채점 제외 문항 — 상태 카드·미니 OX 드릴·시간축 대조표 (2026-07-12 현행 채점 정책) ===== */
.bubble.mark-pick{border-color:var(--ink)!important;color:var(--ink)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}/* 드릴 중 내 선택=중립(정오 미공개) */
.spineband .sb-grade{font-size:var(--fs-meta);font-weight:var(--fw-semi);color:var(--amber-ink);border-top:1px solid var(--amber-line);padding-top:.35em}
.statecard{border:1px solid var(--amber);border-radius:var(--r-sm);background:var(--amber-soft);padding:.7em .9em;margin:.15em 0 .6em}
.statecard .sc-head{display:flex;align-items:center;gap:.5em;margin-bottom:.3em}
.statecard .sc-tag{font-size:var(--fs-meta);font-weight:var(--fw-bold);letter-spacing:.05em;color:var(--amber-soft);background:var(--amber);border-radius:var(--r-xs);padding:.14em .5em}
.statecard .sc-title{font-weight:var(--fw-bold);font-size:var(--fs-body);color:var(--amber-ink)}
.statecard .sc-desc{margin-top:.3em;font-size:var(--fs-caption);line-height:1.55;color:var(--amber-ink)}
.oxq-lead{font-size:var(--fs-caption);color:var(--sub);margin:.2em 0 .6em;line-height:1.55}
.oxdrill{display:flex;flex-direction:column;gap:.55em}
.oxq-item{border:1px solid var(--grid-strong);border-radius:var(--r-sm);padding:.6em .75em;background:var(--sheet-2)}
.oxq-item.done{border-color:var(--amber-line)}
.oxq-t{display:flex;gap:.45em;font-size:var(--fs-caption);line-height:1.55}
.oxq-num{flex:0 0 auto;font-weight:var(--fw-bold);color:var(--amber-ink)}
.oxq-btns{display:flex;gap:.5em;margin-top:.5em}
.oxq-btns button{flex:1;padding:.42em .6em;border:1.5px solid var(--grid-strong);border-radius:var(--r-sm);background:var(--sheet);font-size:var(--fs-caption);font-weight:var(--fw-bold);cursor:pointer;color:var(--ink)}
.oxq-btns button:hover:not(:disabled){border-color:var(--ink)}
.oxq-btns button.sel{border-color:var(--amber);background:var(--amber-soft);color:var(--amber-ink)}
.oxq-btns button:disabled{cursor:default;opacity:.6}
.oxq-btns button.sel:disabled{opacity:1}
.oxq-fb{margin-top:.45em;font-size:var(--fs-meta);line-height:1.55;border-top:1px solid var(--grid-strong);padding-top:.4em;color:var(--sub)}
.oxq-fb.ok b{color:var(--o)} .oxq-fb.no b{color:var(--pen)}
.oxq-sum{font-size:var(--fs-caption);font-weight:var(--fw-bold);color:var(--amber-ink);margin:.6em 0 .3em}
.oxq-go{display:block;width:100%;margin-top:.4em;padding:.55em .8em;border:none;border-radius:var(--r-sm);background:var(--brand,var(--indigo));color:var(--on-brand,#fff);font-weight:var(--fw-bold);font-size:var(--fs-caption);cursor:pointer}
.oxq-skip{display:block;margin-top:.6em;border:none;background:none;color:var(--faint);font-size:var(--fs-meta);cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0}
.txt-table{width:100%;border-collapse:collapse;font-size:var(--fs-caption);margin:.2em 0 .4em}
.txt-table th,.txt-table td{border:1px solid var(--grid-strong);padding:.35em .55em;text-align:center}
.txt-table th{background:var(--sheet-2);font-size:var(--fs-meta);color:var(--sub);font-weight:var(--fw-bold)}
.txt-table tr.fl td{background:var(--amber-soft);color:var(--amber-ink);font-weight:var(--fw-bold)}
.txt-narr{font-size:var(--fs-meta);line-height:1.55;color:var(--amber-ink);margin:.3em 0}
.linklike{border:none;background:none;color:var(--indigo);cursor:pointer;font-size:inherit;text-decoration:underline;text-underline-offset:2px;padding:0}
.rib i.exc>b{background:var(--amber);opacity:.75;transform:scaleX(1)}/* 채점 제외=앰버(정오답·미풀이 회색과 구분) */

/* ===== 집중 모드(hub_focus) — sticky 스택 축소 (2026-07-12 · 2026-07-23 융합 카드 재파생) =====
   융합 카드(2026-07-23)로 .navwrap top 재정의는 불요(이미 topbar 직하) — 과목탭 행만 접어 카드를 낮춘다.
   --sticky-top 도 카드 잔여분(Z0 ~36 + 리본 ~22 + 카드패딩 16 + 갭 14 ≈ 88)으로 재파생. */
body.focus-on .subject-tabbar{display:none}
body.focus-on{--sticky-top:calc(var(--topbar-h) + 88px)}
/* ★모바일(≤900px)은 평상시 .navwrap 을 static 으로 풀지만(수직공간 확보), 집중 모드에선 탑바가
   사라져 여유가 생기고, static 이면 Z0 가 스크롤과 함께 액자 상단 띠(44px 불투명) 밑으로 들어가
   가려진다(사용자 신고) → 전 폭에서 sticky 유지. */
@media(max-width:900px){
  body.focus-on .navwrap{position:sticky;top:var(--topbar-h);z-index:39}
}

/* ═══ design-pass §1-f 한국어 조판 — 어절 중간이 쪼개지지 않게. 표·코드는 제외(가로 스크롤이 정본) ═══ */
body,.stem,.mtext,.mrow-explain,.gist,.core-concept,.mywrong,.insp,.explain-lead,
.pg-q,.ac-ex,.ea-intent,.cx-why,.dc,.term-def,.sb-grade,.sb-note,.p-label,.chart-note,
.artq-t,.cmpx,.memoline,.dintent,.cmpt-note{
  word-break:keep-all;overflow-wrap:anywhere}
/* ═══ 모션 1곡선 집행 — 계약 §1-h (2026-09-12) ═══
   상태를 바꾸는데 «즉시 튀던» 자리들을 한 곡선(--dp-ease .22s)에 태운다.
   ★모두 태우지는 않는다 — 계약이 말하는 것은 «움직임이 있는 곳의 곡선을 하나로»이지
   «모든 곳에 움직임을 넣어라»가 아니다. 대상 = 사용자의 조작으로 색·바닥·테두리가
   바뀌는 토글·탭·칩·행. 순간 나타났다 사라지는 것(모달·토스트)은 자기 것이 정본이다.
   ★전이 속성을 열거한다 — `all` 은 폰트·레이아웃까지 태워 예상 밖 지연을 만든다.
   ★남은 사프롤 = hub_palette.css 의 시간 8종(.12~.32s). 그건 공유 정본이라
   여기서 단독 수렴하면 N페이지가 함께 움직인다 — 별건으로 남긴다. */
.subject-tab,.round-tab,.qnum,.term-chip,.resetp,.favstar,.qpill,.tagout,
.qfacts .cmp-trigger,.solve-badge,.z0-arrow{
  transition:color var(--dp-dur) var(--dp-ease),
             background-color var(--dp-dur) var(--dp-ease),
             border-color var(--dp-dur) var(--dp-ease),
             opacity var(--dp-dur) var(--dp-ease)}
/* 선지 행 = 이 화면에서 가장 큰 상태 변화(초점 이동). 바닥과 왼쪽 표시만 태운다 —
   높이·여백을 태우면 목록 전체가 출렁인다. */
.mrow{transition:background-color var(--dp-dur) var(--dp-ease),
                 box-shadow var(--dp-dur) var(--dp-ease)}
/* 알약 풀이줄 = display 토글이라 전이가 안 걸린다(hidden ↔ flex). 나타날 때만 한 번 태운다. */
.qf-legend{animation:qfIn var(--dp-dur) var(--dp-ease)}
@keyframes qfIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}

/* ═══ 모션 감소 존중 — 계약 §1-h ═══
   ★qid 는 hub_ui.css 를 «안 싣는» 자족 페이지다(43/49 페이지가 싣고, 이 페이지는 그 6 중 하나).
   그래서 hub_ui.css:47 의 OS 설정 전역 가드를 **상속받지 못했고**, 여기엔 앱 내 토글
   (html[data-motion])만 있었다 — 즉 «OS 에서 모션을 줄인 사람에게는 아무 효과가 없었다».
   같은 계열 사고 = feedback_dark_cta_onbrand_token_pair(「전수 종결」 뒤 신설된 자족 페이지는 상속 안 함).
   ★남은 자족 페이지 4곳(coverage_atlas·numberline·signup_contact·auth_callback)도 같은 구멍 — 별건. */
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after{
  transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto!important}
}

/* ═══ design-pass §1-f — 세리프의 제자리: 법령·판례 «원문» 인용 전속 ═══
   _tokens.css: --font-serif = 「법령·판례 원문 인용면 한정 (W2-3 예외 헌장 ⑤)」.
   해설 산문(산세리프)과 인용 원문(세리프)이 눈으로 갈려 「무엇이 법의 말인가」가 서식만으로 전달된다. */
.insp .sub.prec p,.prec-fold-body p{
  font-family:var(--font-serif,"Noto Serif KR",serif);font-weight:var(--fw-med);
  line-height:1.85;color:var(--ink);padding-left:.8em}

/* ═══ design-pass §3-B 독창 요소 — 소거법 사선(2026-09-11) ═══
   시험장에서 실제로 하는 행위: 아닌 선지에 연필로 사선을 긋고 남은 것에서 고른다.
   이 repo 에는 그 은유가 이미 반쯤 들어와 있었다 — `.slash` 는 «채점 후 시스템이» 거짓 진술에 긋는
   표시였다. 여기서는 «채점 전 사용자가» 긋는 조작으로 승격한다(클래스는 .uslash 로 분리 — 시스템 표식과
   사용자 흔적을 섞으면 채점 후 어느 쪽이 그은 것인지 구별할 수 없다).
   조작 = 버블 길게 누르기 · Shift+1~5 · 우클릭. 상태는 메모리 전용(localStorage 미사용 —
   `qid_` 접두사는 PB 진도 묶음에 동기되므로 · 계약 §4-e). */
/* ★신호 어휘를 «늘리지 않는다» — 이 개편의 명제 자체가 「어휘 과다가 문제」이므로,
   독창 요소를 넣는다고 새 표식을 하나 더 만들면 고치려던 병을 내가 다시 앓는 것이다(오너 2026-09-11 지적).
   그래서 소거 흔적은 **한 어휘(본문 사선)**만 쓰고, 「언제 보이나」로 중복을 피한다:
     · 채점 «전»  = 내가 지운 선지에 본문 사선 — 이때 화면에 다른 표식은 없다.
     · 채점 «후»  = 적중한 소거는 **끈다**. 시스템이 이미 행에 긴 펜 획(.slash)을 그어 같은 말을 하고 있어
                    두 번 말하면 중복 슬롯이다(`feedback_ui_slot_duplicate_same_info`).
                    **참인 선지를 지운 것(오소거)만 남긴다** — 그건 시스템 표식이 없는 자리라 잔여 정보다.
     · 총평은 그림이 아니라 «한 줄»로(소거 N개 중 M개 적중) — 세는 일은 글자가 더 잘한다.
   초안은 여기서 세 갈래(본문 사선 + 버블 사선 + 초록/펜 구분)를 만들었다가 폐기했다. */
.uslash{display:none}
.mrow.struck .mtext{opacity:.5;text-decoration:line-through;text-decoration-color:var(--pen);
  text-decoration-thickness:1px;transition:opacity var(--dp-dur) var(--dp-ease)}
.mrow.struck .bubble{border-color:var(--pen-line);color:var(--faint)}
.graded .mrow.struck.is-wrong .mtext{text-decoration:none;opacity:1}   /* 적중 = 버블 사선과 중복 → 끈다 */
.graded .mrow.struck.is-wrong .bubble{border-color:inherit;color:inherit}
.strike-hint{color:var(--faint);font-size:var(--fs-meta)}
.strike-tally{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-meta);
  font-weight:var(--fw-semi);color:var(--o)}
.strike-tally.miss{color:var(--pen)}

/* ═══ 모바일 하단 액션바(2026-09-11 design-pass 5단계) ═══
   구판은 「다음 문항」이 해설 1,100px 끝에 있어 모바일에서 한 문항을 끝내려면 끝까지 스크롤해야 했다.
   ★1차 시안은 버튼 줄(.nc-btns) 통째를 고정했는데 버튼이 셋이라 **두 줄로 접혀** 화면 아래 4분의 1을
     먹었다(실촬영 적발). → 고정하는 것은 «주 행동 하나»뿐이고 나머지는 본문 흐름에 그대로 둔다.
     .nc-btns 를 display:contents 로 풀어 자식이 .next-cta 의 flex 에 직접 참여하게 만든 뒤,
     .primary 만 떠 있는 알약으로 올린다(마크업 무수정). */
@media(max-width:560px){
  .next-cta{padding-bottom:0;border-top:1px solid var(--grid);gap:8px}
  .next-cta .nc-btns{display:contents}
  .next-cta .nc-btn:not(.primary){flex:1 1 auto;justify-content:center;min-height:44px;border-radius:var(--r-md)}
  .next-cta .nc-btn.primary{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:45;min-height:50px;justify-content:center;border-radius:var(--r-md);
    box-shadow:0 6px 20px rgba(0,0,0,.18)}
  .bench{padding-bottom:86px}          /* 떠 있는 주 행동 높이만큼 본문 바닥 여백 */
}

/* ═══ 산문 읽기 폭(계약 §1-f · 40~45자/줄) ═══
   ★칸 비율만 고쳐서는 해결되지 않는다 — 실측(2026-09-11 착수 전): 채점 후 1:2 에서 해설 칸이 688px =
   «50자/줄»(상한 45 초과)이었고, 시트 접기를 넣자 전폭 1,200px 에서 70자까지 늘어났다.
   그래서 «칸»이 아니라 «산문 블록»에 상한을 건다. 표·격자(.lg·.qtable)는 대상이 아니다(가로 스크롤이 정본).
   ★상한이 «38em»인 이유 = 한글은 1em 보다 좁게 렌더된다(실측 16px 본문에서 한 글자 13.85px · 14px 에서 12.08px).
   그래서 44자를 원해 44em 을 걸면 실제로는 48~51자가 된다 — 1차 시안이 그랬고 재계측에서 잡았다. */
.gist,.core-concept,.mywrong .mw-core,.mywrong .mw-root,.insp p,.explain-lead>p,
.ac-ex,.ea-intent,.cx-why,.term-def,.dc>p,.artq-t,.cmpx,.memoline,.dintent{max-width:38em}

/* ═══ 조문 한 장 · 혼동 축 · 기억 — 판정 카드 승격분 (2026-09-11 design-pass · 목업 v3) ═══
   구판은 같은 조문 문언이 일곱 자리에 되풀이돼 한 화면이 4,098자였다. 원문을 여기 한 번만 세우고
   선지 상세에서는 뺀다(qid_app.js `_artLean`). 판정 카드 안이라 «카드 안의 카드»가 되지 않게
   테두리를 두르지 않고 배경 한 겹과 헤어라인으로만 가른다(§3-C ① 재발 방지). */
.artq{margin:0 var(--bleed) var(--block-gap);padding:var(--block-gap) var(--card-pad);
  background:var(--sheet-2);border-top:1px solid var(--grid);border-bottom:1px solid var(--grid)}
.artq-h{display:flex;align-items:baseline;gap:var(--inline-gap);margin-bottom:var(--label-gap)}
.artq-no{font-size:var(--fs-caption);font-weight:var(--fw-semi);color:var(--indigo)}
.artq-verd{margin-left:auto;font-size:var(--fs-meta);color:var(--sub);white-space:nowrap}  /* 「문언과 일치」류 판정 꼬리 */
.artq-box{background:var(--sheet);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-4)}
.artq-t{margin:0;font-size:var(--fs-body);line-height:1.8;color:var(--ink-2)}
/* ★밑줄 = 정답 선지가 그대로 옮겨 온 구간. 형광펜이 아니라 «밑줄»인 이유 = 색면 제거 계약(§1-b)과
   본문 가독(글자 위에 색을 덮지 않는다). 굵기·위치를 배경 그라디언트로 그려 줄바꿈을 따라간다. */
.artq-t u{text-decoration:none;color:var(--ink);font-weight:var(--fw-med);
  background:linear-gradient(transparent 62%,var(--o-line) 62%);padding-bottom:1px}
.artq-f{margin-top:var(--sp-2);font-size:var(--fs-meta);color:var(--sub);
  display:flex;align-items:center;gap:6px}
.artq-sw{width:18px;height:8px;border-radius:2px;background:var(--o-line);flex:none}

/* ═══ 축 낱말 형광 (2026-09-11 오너 지시 「중복되는 단어를 형광으로」) ═══
   밑줄과 «같은 녹색»으로 묶는다 — 둘은 한 축의 두 표식이다(밑줄=조문과 선지의 일치 /
   형광=이 화면을 관통하는 낱말). 조문 원문 안에는 형광을 칠하지 않는다(한 요소에 두 표식 금지). */
.hl{font-style:normal;font-weight:var(--fw-semi);color:var(--o-ink);background:var(--o-soft);
  border-radius:var(--r-xs);padding:0 3px;margin:0 -1px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* 혼동 축 2열 — 「A(a) vs B(b)」 꼴에서만(코퍼스 3.4%). 나머지는 .cmpx 산문 그대로 */
.cmpt{margin:0 var(--bleed) var(--block-gap);padding:var(--block-gap) var(--card-pad) var(--sp-3);
  border-top:1px solid var(--grid)}
.cmpt table{width:100%;border-collapse:collapse;margin-top:var(--sp-2);table-layout:fixed}
.cmpt th,.cmpt td{text-align:left;vertical-align:top;padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-caption);line-height:1.55;word-break:keep-all;overflow-wrap:anywhere}
.cmpt th{font-weight:var(--fw-semi);color:var(--ink);border-bottom:1px solid var(--grid-strong)}
.cmpt td{color:var(--ink-2);border-bottom:1px solid var(--grid)}
.cmpt th:first-child,.cmpt td:first-child{padding-left:0}
.cmpt th:last-child,.cmpt td:last-child{padding-right:0;border-left:1px solid var(--grid)}
.cmpt-note{margin:var(--sp-2) 0 0;font-size:var(--fs-meta);line-height:1.55;color:var(--sub)}

.cmpx{margin:0 0 var(--sp-3);font-size:var(--fs-caption);line-height:1.55;color:var(--ink-2)}
.cmpx-cap{display:inline-block;margin-right:.45em;padding:.02em .45em;border-radius:var(--r-sm);
  background:var(--indigo-soft);color:var(--indigo);font-size:var(--fs-meta);font-weight:var(--fw-bold);white-space:nowrap}
/* 기억 = 카드 마지막 띠. 조문 카드와 같은 전폭 리듬으로(안쪽에 또 상자를 만들면 §3-C ① 재발) */
.memoline{display:flex;gap:.5em;align-items:baseline;
  margin:var(--block-gap) var(--bleed) var(--bleed);
  padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--amber-line);
  background:var(--amber-soft);color:var(--amber-ink);font-size:var(--fs-caption);line-height:1.55}
.memoline+.vfoot{margin-top:0;border-top-color:var(--amber-line)}
.memoline-k{flex:none;font-weight:var(--fw-bold);color:var(--amber)}

/* 판정 카드 말미 접힘 — 「더 보기」 묶음과 같은 행 리듬. 카드 안쪽 여백을 빠져나가 가장자리까지 닿는다 */
.vfoot{margin:var(--block-gap) var(--bleed) var(--bleed);border-top:var(--hair) solid var(--grid)}
.vfoot>details.deep:first-of-type{border-top:none}
/* 접힌 제목 옆 부제 — 펼치기 전에 결론을 미리 말한다(한 줄 말줄임 · 펼치면 전문) */
.dsub{flex:1;min-width:0;font-size:var(--fs-meta);font-weight:var(--fw-reg);color:var(--sub);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.deep[open]>summary .dsub{white-space:normal;color:var(--faint)}
.dintent{margin:0 0 .5em;font-size:var(--fs-caption);line-height:1.55;color:var(--ink-2)}
/* 접힘 안에서는 좌측 펜 바가 중복(요약 줄이 이미 「왜 낚였나」라고 말한다) */
.vfoot .mywrong{border-left:none;padding-left:0;margin-bottom:0}

/* ═══ 선지별 분석 「이 선지」 — 목록 + 제자리 펼침 (2026-09-11 design-pass 4단계 · 목업 v2) ═══
   행이 곧 선지이고, 고른 행 아래가 곧 풀이다.
   ★이 구조가 대체한 구판 2단 레일(.binner/.blist/.bdetail)의 규칙은 2026-09-12 에 걷어냈다
     — 다섯 소비 페이지(qid·mock_exam·study_drill·essay_exam·essay_report)와 그들이 싣는
     스크립트 30개 전수 대조에서 한 곳도 안 쓰고 있었다. */
.clist{margin:0 var(--bleed) var(--bleed)}
.crow{display:flex;gap:var(--sp-3);align-items:flex-start;cursor:pointer;
  padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--grid)}
.crow:first-child{border-top:none}
.crow:hover{background:var(--sheet-hover)}
.crow.on{background:var(--focus-bg)}
.cnum{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:var(--fs-caption);font-weight:var(--fw-semi);background:var(--sheet-2);color:var(--sub)}
.cnum.o{background:var(--o-soft);color:var(--o-ink)} .cnum.x{background:var(--pen-soft);color:var(--pen)}
.cbody{flex:1;min-width:0}
.ctitle{font-size:var(--fs-caption);line-height:1.55;color:var(--ink);display:flex;gap:var(--sp-2);
  align-items:baseline;flex-wrap:wrap;max-width:38em}
.crow.is-ans .ctitle{font-weight:var(--fw-semi)}
.ctag{flex:none;font-size:var(--fs-meta);font-weight:var(--fw-semi);padding:1px 8px;border-radius:var(--r-pill);
  border:1px solid var(--grid-strong);color:var(--sub)}
.ctag.ok{color:var(--o);border-color:var(--o-line)} .ctag.mine{color:var(--pen);border-color:var(--pen-line)}
.cexp{margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--grid)}
.cexp .insp{padding:0}

/* ═══ 「더 보기」 묶음 목록 (2026-09-11 design-pass 4단계 · 목업 v2) ═══
   구판은 접이식·알약 버튼·칩 목록이 서로 다른 서식으로 본문 흐름에 섞여 있어, 펼치기 전에는
   «무엇이 얼마나 있는지»가 안 보였다. → 한 카드 안에서 전부 «제목 + 분량 + ›» 한 줄로 통일한다.
   ★마크업 무수정 — 자식이 이미 details / button / div 로 나란히 있어 서식만 맞추면 목록이 된다. */
.zbody-list{padding:0}
.zbody-list>details.deep,.zbody-list>.solve-badge-wrap,.zbody-list>div:not(:empty){
  border-top:1px solid var(--grid);margin:0}
.zbody-list>*:first-child,.zbody-list>details.deep:first-of-type{border-top:none}
.zbody-list details.deep{border:none;border-radius:0;background:transparent}
.zbody-list details.deep>summary{display:flex;align-items:center;gap:var(--sp-3);
  min-height:var(--row-h);padding:var(--row-py) var(--row-px);
  font-size:var(--fs-caption);font-weight:var(--fw-med);color:var(--ink)}
.zbody-list details.deep>summary:hover{background:var(--sheet-hover)}
.zbody-list details.deep>summary::before{display:none}            /* 좌측 화살표 → 우측 chevron 으로 이동 */
.zbody-list details.deep>summary .dcount{margin-left:auto;color:var(--sub);font-weight:var(--fw-reg)}
.zbody-list details.deep>summary::after{content:"";width:var(--ic-sm);height:var(--ic-sm);flex:none;
  background:currentColor;color:var(--faint);
  -webkit-mask:url(./icons/angle-small-right.svg?v=20260717) center/contain no-repeat;
  mask:url(./icons/angle-small-right.svg?v=20260717) center/contain no-repeat;
  transition:transform var(--dp-dur) var(--dp-ease)}
.zbody-list details.deep[open]>summary::after{transform:rotate(90deg)}
.zbody-list details.deep .dc{padding:0 var(--sp-5) var(--sp-4)}
/* 알약 버튼(계산 풀이·판단 순서·풀이단계)도 같은 행으로 — 「여기만 버튼」인 이유가 없다 */
.zbody-list .solve-badge-wrap{margin:0}
.zbody-list .solve-badge{display:flex;width:100%;justify-content:flex-start;gap:var(--sp-3);
  min-height:var(--row-h);padding:var(--row-py) var(--row-px);border:none;border-radius:0;
  background:transparent;color:var(--ink);font-weight:var(--fw-med);font-size:var(--fs-caption)}
.zbody-list .solve-badge:hover{background:var(--sheet-hover);color:var(--ink)}
.zbody-list .solve-badge .sb-sub{margin-left:auto;color:var(--sub);opacity:1}
.zbody-list .solve-badge:hover .sb-sub{opacity:1}
/* 연관 묶음·용어는 «행»이 아니라 내용 블록이라 라벨 서식만 맞춘다 */
.zbody-list #clusterAdj,.zbody-list #termZone{padding:var(--sp-4) var(--sp-5)}
.zbody-list #clusterAdj:empty,.zbody-list #termZone:empty,
.zbody-list #calcZone:empty,.zbody-list #solveZone:empty,.zbody-list #flowZone:empty{border-top:none;padding:0}
/* .zbody-list .p-label 여백은 말미 재작성분이 정본(2026-09-11) */
.zbody-list .cluster-theme,.zbody-list .cluster-sub{padding-left:0}
.zbody-list .chart-note{padding:var(--sp-3) var(--sp-5);margin:0}

/* ═══ 다음 행동 — 큰 버튼(2026-09-11 design-pass 4단계 · 목업 v2) ═══
   구판은 작은 알약 3개였다. 한 문항을 끝낸 뒤의 주 행동은 「다음 문항」 하나이므로 크기로 말한다. */
.zone-action .next-cta{border-top:none;padding-top:0;margin-top:0;gap:var(--sp-2)}
.zone-action .nc-btns{margin-left:0;width:100%;gap:var(--sp-2)}
.zone-action .nc-btn{flex:1;justify-content:center;min-height:50px;border-radius:14px;
  font-size:var(--fs-caption);font-weight:var(--fw-semi);box-shadow:0 1px 2px rgba(16,18,27,.05)}
.zone-action .nc-btn.primary{flex:1.3;box-shadow:0 2px 12px rgba(11,122,83,.28)}

/* ═══ 목업 v2 치수 정합 (2026-09-11 · 실측 대조로 잡은 차이) ═══
   4단계에서 «구조»는 목업대로 만들었는데 «여백»은 기존 값을 그대로 뒀다. 같은 프로브로 두 화면의
   computed 값을 나란히 찍어 어긋난 자리만 맞춘다(육안 「일치」 판정 폐기).
   ★글자 크기는 목업 눈금(21/17/16/15/13/11.5)이 아니라 계약 토큰(20/17/16/14/12)을 따른다 —
     15·13 은 repo 스케일에 없다. 다만 목업이 «본문»으로 쓴 자리는 14 가 아니라 16 이어야 한다
     (1단계 수렴에서 --fs-caption 으로 너무 많이 눌렀다). */

/* ① 두 칸 사이 간격 — 실측 0 이었다(카드가 붙어 있었다) */
.bench{gap:var(--sp-6);padding:0 var(--sp-5)}

/* ② 카드 내부 = 묶음 목록(iOS inset list) — 자식마다 여백 + 헤어라인 */
.zone-verdict .zbody,.zone-choices .zbody{padding:0}
.zone-verdict .zbody>*{padding:var(--sp-4) var(--sp-5);margin:0}
.zone-verdict .zbody>*+*{border-top:1px solid var(--grid)}
.zone-verdict .zbody>.verdict-row{padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.zone-choices .clist{margin:0}
.zone-choices .allwrap,.zone-choices .lg-scroll{padding:var(--sp-4) var(--sp-5)}

/* ③ 판정 — 「오답」은 이 카드의 제목이다(실측 16px → 목업 21px 급) */
.verdict-row{gap:var(--sp-3);margin:0}
.verdict{font-size:var(--fs-title);padding:2px 12px;border-radius:var(--r-md)}
.v-today,.v-pace{font-size:var(--fs-caption)}

/* ④ 세그먼트 — 트랙이 없어 버튼 세 개가 맨몸으로 떠 있었다(h21 → 목업 h39) */
.viewtog{margin-left:auto;display:flex;gap:2px;padding:3px;border:none;border-radius:var(--r-md);
  background:var(--sheet-2);overflow:visible}
.viewtog button{font-size:var(--fs-meta);font-weight:var(--fw-semi);padding:5px 11px;
  border-radius:var(--r-xs);background:transparent;color:var(--sub)}
.viewtog button.on{background:var(--sheet);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* 구역 라벨(판정·선지별 분석·더 보기) — 행보다 «한 단 아래»에 둔다.
   ★크기는 .p-label 기본 선언을 14px→12px 로 내려 «한 자리»에서 정한다(여기서 또 덮으면 진실이 둘).
   라벨은 읽는 대상이 아니라 구역의 이름표라 12px 로 충분하고, 색(--sub)과 자간이 이미 라벨임을 말한다.
   ★위 숨 = 구역 사이 24px 에 8px 을 더해 32px. 아래는 8px 그대로 — 라벨이 «자기 카드»에
   붙어 있어야 어느 카드의 이름인지 읽힌다(위 4 : 아래 1). 오너 지적 「더보기 위아래 간격」. */
.zone>.p-label{padding-top:var(--sp-2)}

/* ⑤ 본문 글자 — 목업이 «본문»으로 쓴 자리는 16px 다.
   ★padding 은 여기서 덮지 않는다 — 위 .zbody-list 규칙이 --row-py/--row-px 로 이미 정하고 있고,
   말미에서 같은 속성을 다시 적으면 배정표가 무효가 된다(2026-09-11 정본화에서 실제로 그랬다).
   ★2026-09-12 오너 지적으로 «목록 행»은 여기서 뺐다 — 행이 16px 이면 그 행을 거느리는 구역 라벨
   (14px)보다 커서 목차가 본문처럼 무거워 보인다. 행은 위 .zbody-list 배정표 값(--fs-caption)으로
   되돌린다. 되돌리는 방법 = 여기서 «지우는 것»이다(또 덮으면 진실이 두 자리가 된다). */
.zone-action .nc-btn{font-size:var(--fs-body);min-height:52px}   /* 주 행동 — hub_ui .cta-launch 48 과 미합류(다음 패스 판정) */
.ctitle{font-size:var(--fs-body)}
.insp p,.explain-lead>p,.ac-ex{font-size:var(--fs-body)}

/* ═══ 2차 정합 (2026-09-11 재측정) ═══ */
/* ⑥ 「분석 넓게」 켠 상태의 칸 비율 — 목업은 거의 반반(1fr/1.05fr)인데 라이브는 1fr/1.75fr 라
   시험지가 391px 까지 눌렸다(목업 525px). 승인본이 목업이므로 그 비율로 맞춘다.
   ★읽기 폭 관점에서도 이쪽이 맞다 — 좁은 칸에 들어가는 것이 «학습자가 반드시 읽어야 할 문제 지문»이다. */
/* ★min-width 가드 필수 — 이 줄은 파일 말미라 위쪽 @media(max-width:900px) 의 동일 특이도 규칙을
   순서로 이긴다. 가드 없이 두면 390px 에서도 2칸이 유지돼 시험지가 한 글자씩 세로로 쪼개진다
   (2026-09-11 모바일 촬영에서 실측 · design-pass 함정 l 의 세 번째 재발). */
@media(min-width:901px){.bench.lay-split12{grid-template-columns:1fr 1.05fr}}
/* ⑦ 시험지 선지 행 좌우 여백 — 실측 8px 로 카드 가장자리에 붙어 있었다(목업 20).
   ★--mrow-px 하나만 고치면 사선 기하가 따라온다(변수 파생으로 바꿔 둔 이유). */
:root{--mrow-px:20px}
/* ⑧ 블록 캡션 — 알약과 글자 사이 간격(목업 8) */
.gist .gist-cap,.core-concept .cc-cap,.mywrong .mw-h{display:flex;align-items:baseline;gap:var(--sp-2)}
/* ⑨ 문두 상하 여백(목업 12/16 · 실측 3.2/14.4) · 세그먼트 높이(목업 39 · 실측 30) */
.stem{margin:var(--sp-3) 0 var(--sp-4)}
.viewtog button{padding:7px 11px}

/* ═══ 정정 ① 「더 보기」 첫 줄 군더더기 (2026-09-11 오너 신고) ═══
   카드 최상단 바로 아래에 가로줄이 하나 더 있었다. 원인은 «순서»가 아니라 «특이도»다 —
   해제 규칙 `.zbody-list>*:first-child`(0,2,0)가 구분선 규칙 `.zbody-list>div:not(:empty)`(0,2,1)에
   졌다(`:not()` 의 특이도는 인자의 특이도라 `:empty` 만큼 올라간다).
   ★같은 뿌리의 2번째 증상 = 라벨 바로 아래 «그 라벨의 내용»에도 줄이 그어졌다(있으면 안 되는 줄).
   처방 = 해제 규칙을 같은 형태(타입 포함)로 올려 특이도를 맞추고, 라벨 다음 형제를 명시 제외. */
.zbody-list>div:first-child,.zbody-list>details:first-child{border-top:none}
.zbody-list>.p-label+div,.zbody-list>.p-label+details{border-top:none}
/* ★`+*`(0,2,0)로 썼다가 또 졌다 — 구분선 규칙이 `div:not(:empty)`(0,2,1)이라 타입 선택자를 포함해야
   동률이 되고, 동률이면 나중 선언이 이긴다. 같은 특이도 함정을 한 라운드에 두 번 밟았다. */

/* ═══ 정정 ② 시험지 머리 — 배경 스트립 철회, 헤어라인으로 복귀 (2026-09-12 오너 결정) ═══
   2026-09-11 에 머리를 옅은 바닥(--sheet-2) 스트립으로 깔았는데, 이번에 그 옅은 면이
   **카드 «바닥»**(.qfacts 문항 정보 줄)으로 옮겨 갔다. 둘 다 두면 한 카드에 면이 둘이 되고,
   머리는 이제 신원 둘 + 조작 셋뿐이라 면으로 가를 만큼 무겁지도 않다.
   → 2026-09-11 이전의 굵은 헤어라인 한 줄로 되돌린다(§235 의 기본 선언이 그대로 산다).
   gap 만 역할 토큰으로 승계한다. */
/* 좁은 폭 카드 여백 — ★이 자리에 두는 이유: 파일 위쪽 @media(max-width:560px) 안에 두면
   뒤에 오는 `.sheet-inner` 기본 선언이 동일 특이도를 «순서»로 이겨 죽는다. 실제로 죽어 있었다
   (실측: 390 에서도 padding 이 24px = 데스크톱 값 — 좁은 폭 규칙이 한 번도 산 적이 없다).
   같은 함정을 이 파일에서만 네 번째 밟았다. */
@media(max-width:560px){
  .sheet-inner{--card-pad:var(--sp-4);--pad-b:var(--sp-5);
    padding:var(--sp-4) var(--card-pad) var(--pad-b)}
}
.exam-head{gap:var(--inline-gap);margin-bottom:var(--block-gap)}

/* ═══════ 문항 정보 스트립 — 문제 «밑» (2026-09-12) ═══════
   조립 = qid_app.js qFactsHtml(). 채점 후에만 그린다(채점 전엔 노드 자체가 없다).
   카드 안쪽 패딩을 음수 마진으로 상쇄해 카드 바닥 모서리까지 붙인다 — 머리가 내려놓은
   「옅은 면」을 여기서 받는다. */
.qffoot{margin:var(--zone-gap) calc(-1 * var(--card-pad)) calc(-1 * var(--pad-b));
  padding:var(--sp-3) var(--card-pad);
  border-top:var(--hair) solid var(--grid);background:var(--sheet-2);
  border-radius:0 0 var(--r-lg) var(--r-lg)}
.qffoot.is-bare{border-top:none;background:transparent;padding:0}
.qfacts{display:flex;align-items:center;gap:var(--inline-gap);flex-wrap:nowrap;
  font-size:var(--fs-meta);color:var(--sub)}
.qf-sp{flex:1;min-width:var(--sp-2)}

/* 분할 알약 — 한 알약을 좌우로 가른다. 왼칸=지문 복잡도(중립) · 오른칸=학습자 실측(색).
   색을 오른칸만 지게 한 것은 «결정에 쓰이는 쪽»을 가리키기 위함이다. */
.qpill{flex:none;display:inline-flex;align-items:stretch;
  font:inherit;padding:0;border:1px solid var(--grid-strong);border-radius:var(--r-pill);
  overflow:hidden;background:var(--sheet);cursor:pointer;line-height:1.6}
.qpill>span{padding:.14em .66em;white-space:nowrap}
.qpill .qp-l{background:var(--surface-sunken);color:var(--sub)}
/* 가름선 — 이 표식의 요점은 «둘로 갈렸다»는 것이라 경계가 보여야 한다(실촬영에서 안 보였다) */
.qpill .qp-l+.qp-r{border-left:1px solid var(--grid-strong)}
.qpill .qp-r{font-weight:var(--fw-semi);color:var(--sub)}
/* 바닥은 색을 섞어 만든다 — 고정 *-bg 토큰은 다크에서 검붉게 뭉쳐 «색면»이 아니라 얼룩으로 보였다 */
.qpill .qp-r.e-매우쉬움,.qpill .qp-r.e-쉬움{color:var(--color-correct);
  background:color-mix(in srgb,var(--color-correct) 15%,transparent)}
.qpill .qp-r.e-어려움{color:var(--amber);background:color-mix(in srgb,var(--amber) 15%,transparent)}
.qpill .qp-r.e-킬러{color:var(--color-wrong);background:color-mix(in srgb,var(--color-wrong) 15%,transparent)}
.qpill:hover{border-color:var(--indigo)}

/* 알약 풀이줄 — 낱말이 둘뿐이라 무엇을 가리키는지는 «눌러서» 편다.
   호버 title 은 터치 기기에서 원리적으로 도달 불가라 쓰지 않는다. */
.qf-legend{display:flex;flex-wrap:wrap;gap:var(--tight-gap) 1.1em;
  margin-top:var(--sp-2);padding-top:var(--sp-2);
  border-top:var(--hair) solid var(--grid);
  font-size:var(--fs-meta);color:var(--faint)}
/* ★`[hidden]` 은 display 를 «선언한» 규칙에 특이도와 무관하게 진다(UA 규칙이라 오리진이 아래다).
   숨기려면 같은 선택자 계열로 되받아야 한다 — feedback_theme_lock_needs_matching_specificity. */
.qf-legend[hidden]{display:none}
.qf-legend b{font-weight:var(--fw-reg);display:inline-flex;align-items:center;gap:5px}
.qf-legend i{width:12px;height:8px;border-radius:2px;flex:none}
.qf-legend .k-l{background:var(--surface-sunken);border:1px solid var(--grid)}
.qf-legend .k-r{background:var(--surface-sunken);border:1px solid var(--grid)}
.qf-legend .k-r.e-매우쉬움,.qf-legend .k-r.e-쉬움{background:color-mix(in srgb,var(--color-correct) 15%,transparent);border-color:var(--color-correct)}
.qf-legend .k-r.e-어려움{background:color-mix(in srgb,var(--amber) 15%,transparent);border-color:var(--amber)}
.qf-legend .k-r.e-킬러{background:color-mix(in srgb,var(--color-wrong) 15%,transparent);border-color:var(--color-wrong)}
/* 개념 비교 버튼(공용 부품) — 좁아지면 두 줄로 꺾여 줄 높이가 들쭉날쭉해진다(실촬영).
   이 자리에서만 한 줄로 묶는다. 줄어드는 것은 이름이 긴 소주제 꼬리표 쪽이다. */
.qfacts .cmp-trigger{flex:none;white-space:nowrap}

/* 공식 복수정답 배지 — 머리에서 내려왔다. 알약과 같은 눈금으로 맞춘다. */
.qfacts .ruling-badge{flex:none;font-size:var(--fs-meta);font-weight:var(--fw-bold);
  border:1px solid var(--amber);border-radius:var(--r-pill);padding:.14em .62em;
  color:var(--amber-ink);background:var(--amber-soft);white-space:nowrap;line-height:1.6}

/* ═══════ 꼬리표 — 나가는 링크 (2026-09-12 오너 선택 · 구 「↗」 글자 대체) ═══════
   오른쪽 끝을 뾰족하게 잘라 «어디론가 간다»를 모양으로 말한다. 글자 화살표도 아이콘도 안 쓴다
   (미등록 fi-* 가 검은 네모로 나오는 사고의 사정권 밖 — feedback_html_flaticon_only).
   이름은 안쪽 span 이 말줄임을 맡아, 좁은 폭에서 잘려도 뾰족한 끝이 살아남는다. */
.tagout{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;
  font-size:var(--fs-caption);color:var(--indigo);text-decoration:none;line-height:1.7;
  background:var(--indigo-soft);padding:.16em .9em .16em .55em;
  border-radius:var(--r-xs) 0 0 var(--r-xs);
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%)}
.tagout>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tagout:hover{color:var(--ink);background:var(--o-soft)}
.pg-subtopic.tagout{border-bottom:none}

/* 산문 «안»의 나가는 링크 — 색면 칩을 문장 중간에 박을 수 없다.
   밑줄이 글자를 지나 끝에서 들려 올라가는 한 획으로 대신한다(글리프 0). */
.lnkout{position:relative;padding-right:12px}
.lnkout::before{content:"";position:absolute;left:0;right:12px;bottom:-1px;height:1px;background:currentColor}
.lnkout::after{content:"";position:absolute;right:1px;bottom:-1px;width:12px;height:1px;background:currentColor;
  transform:rotate(-34deg);transform-origin:left bottom}
.we-src.lnkout:hover{text-decoration:none;color:var(--ink)}

/* 390 실촬영에서 머리가 두 줄로 꺾였다(「다시 풀기」 네 글자 때문). 좁은 폭에선 아이콘만 —
   같은 파일 .mode-x .xt 관용구를 따른다. aria-label 은 버튼에 이미 붙어 있어 읽힘은 안 준다. */
@media(max-width:560px){
  .exam-head .resetp .rt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .exam-head .resetp{padding:2px 6px;gap:0}
}
/* 목록 행 사이 구분선 — `.zbody-list details.deep{border:none}` 이 border-top 까지 지워
   행이 맞닿아 있었다(묶음 목록인데 칸이 안 갈렸다). 형제끼리만 되살린다. */
.zbody-list>details.deep+details.deep,.zbody-list>details.deep+.solve-badge-wrap,
.zbody-list>.solve-badge-wrap+details.deep{border-top:1px solid var(--grid)}

/* ═══════ 출제각 변천 — 전면 재작성 (2026-09-11 오너 지적 3건) ═══════
   신고: ①타이틀이 카드 가장자리에 붙음 ②변천 흐름이 «박스 안의 박스» ③박스가 텍스트를 갉아먹음.
   구판 진단:
     · `.ea-card` 가 스스로 `border+background+radius` 를 가진 박스였다. 그 박스가 이미 카드인
       `.zbody` 안에 들어가 테두리가 이중이 됐다(카드 안의 카드).
     · `.zbody-list` 는 자식에게 좌우 여백을 주지 않는다(행마다 각자 준다). 그런데 출제각 블록의
       `.p-label` 과 `.ea-card` 는 여백을 못 받아 가장자리에 붙었다.
     · `.ea-phase` 의 시기 칸이 `3em` 고정이라 라벨이 길면 본문 칸을 밀어 잘렸다.
   재작성 방침 = **박스를 걷고 목록 리듬에 합류**. 구분은 테두리가 아니라 여백과 헤어라인이 한다. */

/* 타이틀 — 다른 목록 행과 같은 들여쓰기 */
.zbody-list>.p-label{padding:var(--sp-4) var(--sp-5) var(--sp-2);color:var(--sub)}
.zbody-list #clusterAdj .p-label,.zbody-list #termZone .p-label{padding:0 0 var(--sp-2)}

/* 출제 이력 한 줄 — 타임라인 «앞»에 놓아 「얼마나 자주 나오나」를 먼저 알려 준다 */
.angle-hist{padding:0 var(--sp-5) var(--sp-3);font-size:var(--fs-meta);color:var(--sub);
  display:flex;align-items:baseline;gap:.4em}
.zbody-list .dc .angle-hist{padding-left:0;padding-right:0}

/* 조문 블록 — 테두리·배경 없음. 조문이 둘 이상이면 헤어라인으로만 가른다 */
.ea-card{border:none;background:transparent;border-radius:0;margin:0;
  padding:0 var(--sp-5) var(--sp-4)}
.ea-card+.ea-card{padding-top:var(--sp-3);border-top:1px solid var(--grid)}
/* ★등폭 글꼴 제거 — 「제3조」는 한글이 섞여 폴백으로 자간이 무너진다(계약 §1-f) */
.ea-card .ea-art{display:inline-flex;align-items:center;gap:4px;font-family:inherit;
  font-size:var(--fs-caption);font-weight:var(--fw-semi);color:var(--indigo);
  margin:0 0 var(--sp-3)}

/* 흐름 — 세로선 + 점. 시기 칸은 «자기 폭»(고정 3em 이 본문을 밀던 것을 폐기) */
.ea-timeline{display:flex;flex-direction:column;gap:0;margin:0 0 0 3px;
  border-left:2px solid var(--grid);padding-left:var(--sp-4)}
.ea-phase{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3);
  align-items:baseline;padding:var(--sp-2) 0;position:relative}
.ea-phase+.ea-phase{border-top:1px solid var(--grid)}
.ea-phase::before{content:"";position:absolute;left:calc(-1 * var(--sp-4) - 6px);top:15px;
  width:8px;height:8px;border-radius:50%;background:var(--indigo)}
/* 시기 칸은 자기 폭이되 최소 폭을 둔다 — 연도가 붙은 블록과 안 붙은 블록이 나란히 오면
   본문 시작점이 어긋나 보인다(실촬영: 제3조와 제28조가 안 맞았다). */
.ea-node{min-width:5em;font-size:var(--fs-caption);font-weight:var(--fw-semi);color:var(--indigo);
  line-height:1.55;white-space:nowrap}
.ea-node small{display:block;font-size:var(--fs-meta);font-weight:var(--fw-reg);
  color:var(--sub);line-height:1.45;white-space:nowrap}
.ea-phase .ea-ptext{font-size:var(--fs-caption);line-height:1.6;color:var(--ink-2);min-width:0}

/* 출제 의도 — 흐름 아래 한 칸 */
.ea-intent{margin:var(--sp-3) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--grid);
  font-size:var(--fs-caption);line-height:1.6;color:var(--amber-ink)}
.ea-intent b{font-size:var(--fs-meta);color:var(--amber);margin-right:6px}
/* 접이식 안에서는 `.dc` 가 이미 좌우 여백을 준다 — .ea-card 가 또 주면 이중 들여쓰기가 된다
   (실촬영: 「출제각 더보기」 안의 제28조가 바깥 제3조보다 오른쪽으로 밀렸다). */
.zbody-list .dc .ea-card{padding-left:0;padding-right:0;padding-bottom:0}
.zbody-list .dc .ea-card+.ea-card{padding-top:var(--sp-3)}

/* ═══════ 내용 블록 안쪽 수직 리듬 (2026-09-12 오너 지적 · 실측 근거) ═══════
   신고 = 「텍스트마다 마진·여백·공간이 하나도 없다」. 프로브로 «글자 상자»끼리 재니
   (요소 rect 는 padding 을 품어 「틈 0」이 거짓으로 나온다 — 반드시 Range 로 글자를 잴 것)
   120줄 중 가장 좁은 자리가 4px·7px 이었고, 나머지 대부분이 11~13px 이었다.
   ★진짜 문제는 «가장 좁은 값»이 아니라 «단이 없는 것»이다 — 한 덩어리 안(4~7)과
   덩어리 사이(11~13)가 거의 같아서 무엇이 무엇에 묶이는지 눈으로 안 갈린다.
   → 역할 배정표(_tokens.css)의 세 단으로 다시 앉힌다: 한 덩어리 안 8 / 덩어리 사이 12.
   ※ em 기반 옛 값(.35em·.1em)이 남아 있던 자리다 — 글자 크기가 내려가며 같이 줄었다. */
.zbody-list .cluster-theme{margin:0 0 var(--sp-2)}
.zbody-list .cluster-sub{margin:0 0 var(--sp-3)}
.zbody-list #clusterAdj .chips{margin-top:0;gap:var(--sp-2)}
.zbody-list .cluster-drill{margin-top:var(--sp-3)}
/* 개정 조문·본문 목록 — 한 줄짜리 항목이 여럿이면 4px 로 맞닿는다(실측) */
.zbody-list .dc>div+div{margin-top:var(--sp-2)}

/* ═══════ 문항정보 띠 — 한 줄이 «원칙»이지 «강제»가 아니다 (2026-09-12 모바일 실측) ═══════
   실측: 390 에서 컨테이너 316px 에 자식 합 335px → 19px 넘침(가로 스크롤 359/316).
   더 나쁜 것은 소주제 꼬리표였다 — nowrap 안에서 flex-shrink 로 «글자 0px» 까지 짜부라져
   내용 168px 이 통째로 사라지고 뾰족한 꼬리 모양만 남아 있었다(1100 에서도 104/168 로 잘림).
   ★한 줄을 지키려고 «글자를 없애는» 것은 거래가 안 맞는다 — 안 들어가면 접는다.
   자리 밀기는 빈 스페이서 대신 `margin-left:auto` 하나로 한다(접힌 줄에서도 오른쪽에 붙는다). */
.qfacts{flex-wrap:wrap;row-gap:var(--sp-2)}
.qf-sp{display:none}
.qfacts>#cmpSlotQid{margin-left:auto}
@media(max-width:560px){
  /* 좁은 폭에서는 «왼쪽 기준선 하나»로 세운다 — 마지막 줄만 오른쪽이던 지그재그를 없앤다.
     ★기각한 안(2026-09-12 촬영으로 반증): 「알약 + 비교 버튼을 한 줄에」로 두 줄을 만들려 했는데,
     알약 폭이 밴드·산식에 따라 변한다(「어려움 · 오답 36%」 145px ↔ 「보통 · 오답 13~46%」 190px).
     넓은 알약에서는 버튼이 못 올라가고 «꼬리표가 버튼 아래»로 밀려 읽는 순서가 뒤집혔다.
     → 폭 산수에 기대지 않는다. 줄 수는 내용에 맡기고 «순서와 기준선»만 고정한다. */
  .qfacts>#cmpSlotQid{margin-left:0}
}

/* ★조문 카드 머리 — 옆 칸이 «안 줄어들면» 이 칸이 한 글자 폭으로 눌린다 (2026-09-12 오너 신고)
   실측(390): 판정 꼬리가 짧을 때(7자) `.artq-no` 165px 정상 → 긴 꼬리(38자) 주입하니 폭 12px·높이 333px,
   즉 「산재법 제87조 제1항」이 한 글자씩 세로로 쏟아졌다. 원인은 `.artq-verd{white-space:nowrap}` 이
   축소를 거부해 남은 압력이 전부 조문 번호로 간 것 — nowrap 은 「문언과 일치」 같은 «짧은 꼬리»를
   전제로 붙인 것인데 데이터에 문장이 들어오면서 전제가 깨졌다.
   ★교훈 = 한 줄을 강제하는 규칙은 옆 칸의 최소 폭을 빼앗는다. 강제할 칸에는 반드시 그 «상한»도 정한다. */
.artq-h{flex-wrap:wrap;row-gap:var(--tight-gap)}
.artq-no{flex:none;white-space:nowrap}
.artq-verd{min-width:0;white-space:normal}

/* ★시간축 대조 블록 — 표 «바깥» 여백이 em 기반 옛 값이라 글자를 줄일 때 같이 줄었다 (2026-09-12 오너 신고)
   실측(390 · 합성 마크업): 표제→표 3px · 표→각주 6px · 각주↔각주 4px. 셋이 거의 같아 단이 없다.
   → 역할 배정표 두 단으로: 한 덩어리 안 8(표제·표 / 각주끼리) · 덩어리 사이 12(표 ↔ 각주 묶음).
   ※셀 안쪽 여백은 안 건드린다 — 행 높이는 이미 「개정으로 뒤집힘」 칩이 정하고 있어 더 키우면 표만 커진다. */
.txt-table{margin:var(--sp-2) 0 var(--sp-3)}
.txt-narr{margin:var(--sp-2) 0 0}

/* ★선지별 분석 카드 «안»의 여백 (2026-09-12 오너 재신고 — 앞 커밋이 표 «주변»만 고쳐 여기까지 안 닿았다)
   실측(390 · 실구조 합성): 카드 위→표제 1px · 각주→「선지별 분석」 0px · 좌우 여백 0.
   원인 둘 — ①`.p-label{padding-top:0}` 이고 이 카드의 라벨은 `.zbody` 안이라
   앞서 넣은 `.zone>.p-label{padding-top}` 이 원리적으로 안 닿는다(자식 선택자).
   ②`.zone-choices .zbody{padding:0}` 이라 «표는 전폭이어야 한다»는 전제가 글자에까지 적용됐다.
   → 글자에는 좌우 여백을 주고 표만 전폭으로 둔다(표는 자기 테두리가 가장자리 노릇을 한다). */
.zone-choices>.zbody>.p-label{padding-top:var(--sp-4);padding-left:var(--sp-5);padding-right:var(--sp-5)}
.zone-choices>.zbody>.txt-narr{padding-left:var(--sp-5);padding-right:var(--sp-5)}