/* =====================================================================
   hub_ui.css — 분석/허브 페이지 공통 컴포넌트층 (토큰 혼입 금지 — 토큰은 _tokens.css)
   2026-06-11 · D-1 CSS 공통 클래스 정리 (스펙: standalone_pages_redux/SYNTHESIS.md §4-3)

   로드 계약: _tokens.css 다음, 페이지 <style> 앞에 link — 페이지 고유 변형은
   각 페이지 <style> 의 동일 셀렉터가 뒤에서 덮는다(동일 특이도 후행 우선).
   사용처: index · coverage_atlas · corpus_desk · knowledge_atlas · data_about · article (W2-2 등재)
   (study_drill/qid/subtopic 계열은 별도 — qid_style.css 등 기존 유지 · 합류 시 본 목록 갱신 의무)

   내용 2층:
   ① 공통 골격 — reset·topbar(허브/서브 2변형)·wrap·card·empty-hint·foot
   ② 패턴 5종+ — LaunchCard(.launch-card+.cta-launch/.cta-sub) · 미니 진척바
      (.bar-track/.bar-fill) · annotation(.chart-note) · RecencyChip(.chip-recent)
      · zero-state(.empty-hint 겸용 — 문안 규약은 각 페이지 렌더 책임)
      · FilterChip(.filter-chip — W2-2) · 모달 스크림(.modal-scrim)

   위계 규약 (W2-2 — 권장안 §2):
   - 타이틀 정본 = 본문 .page-lede(h1 --fs-title + .pl-sub --fs-body · 2026-07-02 탑바 화면명 은퇴 — 탑바=옴니바 전용)
   - CTA 위계: 화면당 주 발사 1개 = solid .cta-launch · 보조 = --ghost · 텍스트 링크 CTA 금지
   - 탭 타깃: 주 CTA 44px · 필터 칩 38px (min-height)

   §0 공식 예외 헌장 (W2-3 — 권장안 §3 · "누락"과 "예외"의 구분 SoT · 각 파일에 '예외 헌장' 표식 1줄):
   ① qid — serif 지문 · IBM Plex Mono · 1280px · AXC 16색 체계는 차기 qid 리디자인까지 잔존(이월).
      ※ topbar 는 2026-06-12 전반 통일 지시로 표준 합류(구 '다크바 양모드' 예외 폐지 — 밝은 표면+경계선·다크 토큰 flip).
   ② grid/triage — 운영자 도구 자체 토큰계·13px 현상 유지. 단 브랜드 문구·백링크·
      JS 인라인 색·수치 SoT 는 표준 준수.
   ③ census_home — hub_ui 미링크 자족(기결정 · 캐스케이드 충돌 회피). 토큰만 사용 ·
      브랜드 마크업 패턴은 표준 추종.
   ④ 로고 SVG — index·data_about·census_home 3페이지 한정(qid serif 충돌 기결정).
      서브 변형 페이지의 로고 부재 = 설계 의도(비결함).
   ⑤ serif 규약 — "법령·판례 원문 인용면 한정"(_tokens.css --font-serif 주석 동기) ·
      qid stem 잔존은 ①의 이월 항목.

   캐시 의례 (W3-2): JS 수정 시 해당 <script ?v=> 동기 의무 — hub_counts.js 는
   build_hub_dossier.py 가 재생성 시 자동 재서명(수동 갱신 불요).
   ===================================================================== */

/* ===== ① 공통 골격 ===== */
*{box-sizing:border-box;margin:0;min-width:0}
body{font-family:var(--font-body);background:var(--surface);color:var(--ink);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere} /* W3-5: 한글 어절 절단 방지(390px) — 긴 무공백 토큰은 anywhere 가 안전망 */
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* 검색 입력란은 전역 초록 focus ring 대신 navy 테두리만 — '검색창 초록 네모 테두리' 제거 (2026-06-23) */
input[type=search]:focus-visible{box-shadow:none;border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* 앱 내 모션 감소 토글(me.html → pref_boot.js html[data-motion="reduce"]) — OS 설정과 OR (사용자가 명시 선택) */
html[data-motion="reduce"] *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
/* 부제설명 숨김 토글(me.html → pref_boot.js html[data-lede="hide"]) — .pl-sub 만 은닉, 제목은 유지.
   ★hub_palette.js PALETTE_CSS 폴백에도 동일 규칙 미러(hub_ui 미링크 inbar 페이지). */
html[data-lede="hide"] .page-lede .pl-sub{display:none}

/* 로고 = 인라인 SVG 1장(2026-07-18 전환). 구 방식(라이트/다크 img 2장 스왑)은 두 로고 겹침 + SVG-as-img 마스크 콜드로드시 ㄹ 구멍 미렌더 결함이 있어 인라인화. 박스(ㅁ)색만 테마 전환·ㄴ 고정. 정본=hub_palette.js .nlogo 블록 · 값 동기 필수 */
/* 첫 페인트용(인라인 로고 페이지) — hub_palette PALETTE_CSS 주입 전에도 크기·박스색 정확 */
.omni-brand .nlogo{height:22px;width:auto;display:block}
:root{--nlogo-box:#3a4150}
@media(prefers-color-scheme:dark){:root:not([data-theme]){--nlogo-box:#c4bdb0}}
:root[data-theme="dark"]{--nlogo-box:#c4bdb0}
/* 상단 바 — 서브페이지(.back+h1) 기본 gap sp-3 · 허브(.brand+.topnav)는 페이지에서 gap 만 sp-4 로 */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--sp-3);height:var(--topbar-h);
  padding:0 var(--sp-4);background:var(--surface)}/* 가로장식선 제거+패딩 sp-4=.shell 거터 정합(검색창 폭=본문 폭 · 2026-07-02 전면 헤더) */
@media(max-width:760px){.topbar{padding-left:var(--sp-2);padding-right:var(--sp-2)}}/* 폭 위계(2026-07-03): 모바일 옴니박스(390−16=374)>sticky/콘텐츠 박스(366/358) — 데탑과 동일하게 옴니가 최광폭. ★자족 탑바 5종(amend_*·census_home·coordinator·study_drill)에 사본 동기 */
.topbar .back{font-size:var(--fs-caption);color:var(--ink-muted);padding:6px 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center}
/* (2026-07-20 정적화) 구 a.back 은닉 규칙 삭제 — inbar 페이지 탑바에서 a.back 마크업 자체가 사라짐(옴니바 정적 상주 · 로고=홈 링크). grid/triage 등 팰릿 미로드 페이지의 a.back 은 정상 홈 링크로 복원 */
.topbar .back:hover{background:var(--surface-sunken)}
.topbar .back .fi{font-size:20px}/* 아이콘 단독 back — 20×20 */
.topbar h1{font-size:var(--fs-h3);font-weight:var(--fw-bold)}/* (2026-07-20 정적화) 사전강등 원복 — inbar 탑바에 h1 실재 0(전수 실측)이라 이주·플래시 자체가 소멸. 팰릿 미로드 페이지(subscribe 등) 탑바 h1 원크기 유지 */
.topbar .stamp{margin-left:auto;font-size:var(--fs-caption);color:var(--ink-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw} /* W2-2 승급 — 정본(article 발) · 2026-06-16 좁은폭 우측클립 가드 */
/* 우측 액션 클러스터 — 전체메뉴(좌)·계정 아바타(우) 결정적 정렬 컨테이너(2026-06-27). hub_palette/auth 가 각각 prepend/append */
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
/* (2026-07-20 정적화) 아바타 가드·탑바 높이 선예약 전부 삭제 — 옴니바 마크업이 HTML 상주(+hub_palette.css head 링크)라
   첫 페인트=최종 구조. 탑바 높이·아바타 착지 모두 처음부터 확정 → 과도기 자체가 소멸(선예약 매직넘버 68px 폐기). */
/* 모바일: 보조 진척 스탬프 숨김(본문 우선) · .stamp(article) + 인라인 .mono 스탬프(coverage/corpus/knowledge) 양 패턴 */
@media(max-width:560px){.topbar .stamp,.topbar>.mono{display:none}}
.brand{font-weight:var(--fw-bold);font-size:var(--fs-h3);letter-spacing:-.01em;white-space:nowrap}
.brand .ac{color:var(--brand-deep)}
.brand small{font-weight:var(--fw-reg);color:var(--ink-muted);font-size:var(--fs-caption);margin-left:6px}
.brand-logo{height:24px;width:auto;vertical-align:middle}  /* 노무랩 ㄴㅁㄹ 가로 마크 — 테마적응 SVG */
.topnav{margin-left:auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{padding:6px 12px;border-radius:var(--r-pill);font-size:var(--fs-caption);font-weight:var(--fw-med);color:var(--ink-muted);white-space:nowrap}
.topnav a:hover{background:var(--surface-sunken);color:var(--ink)}

/* 레이아웃 — 서브 980px 기본 · 허브는 페이지에서 1140px/상단 sp-4 로 */
.wrap{max-width:var(--w-hub);margin:0 auto;padding:var(--sp-3) var(--sp-4) var(--sp-8)}/* 폭 단일 통일 1140 2026-06-29(구 980) · 최상단 여백 전역 12px */
section{margin-top:var(--sp-6)}
.shell>section:first-child,.wrap>section:first-child{margin-top:0}/* 첫 section 이 컨테이너 패딩과 이중 적용되던 필요이상 여백 제거 — 전역 */
.sec-head{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-3);flex-wrap:wrap}
.sec-head h2{font-size:var(--fs-h3);font-weight:var(--fw-bold);letter-spacing:-.01em}
.sec-head .sub{font-size:var(--fs-caption);color:var(--ink-muted)}
.sec-head .more{margin-left:auto;font-size:var(--fs-caption);color:var(--brand-deep);font-weight:var(--fw-med);white-space:nowrap}
/* 페이지 lede 정본(2026-07-02 단일 헤더 후속) — 본문 첫 요소 = 화면명 20px(옴니 드랍다운 바로가기 문구와 동일)
   + 다음 행 16px 설명 · 좌패딩 0(컨테이너 거터 외 들여쓰기 금지) · sticky 필터바가 있으면 그 위(비고정·스크롤 퇴장).
   ★hub_ui 미링크 inbar 페이지(amend_*·census_home·coordinator·study_drill) 폴백 = hub_palette.js PALETTE_CSS 동일 3규칙 — 변경 시 양쪽 동기. */
.page-lede{margin:0 0 var(--sp-4);padding:0}
.page-lede h1,.page-lede .pl-main{font-size:var(--fs-title);font-weight:var(--fw-bold);color:var(--ink);line-height:1.4;margin:0}
.page-lede .pl-sub{font-size:var(--fs-body);color:var(--ink-muted);line-height:1.5;margin:4px 0 0}

/* 온보딩 스트립 정본(2026-07-19 공유 승격 — 구 interleave/knowledge_atlas/blind_spots 인라인 3벌 이관).
   3단계 학습법 스테퍼(.hsteps/.hstep/.harrow) + 선택 KPI(.hprog — 페이지에 수치 정본이 이미 있으면 미탑재).
   ★hub_ui 미링크 자족 페이지(study_drill·numberline)는 인라인 사본 — 변경 시 양쪽 동기.
   숨김 토글 = me.html → pref_boot.js html[data-howto="hide"] (lede 토글과 대칭). */
.howto{display:flex;align-items:center;gap:18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:13px 18px;margin:var(--sp-2) 0 var(--sp-3);flex-wrap:wrap}
.hsteps{display:flex;align-items:center;gap:10px;flex:1 1 auto;flex-wrap:wrap}
.hstep{display:flex;align-items:center;gap:8px}
.hstep .n{width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:var(--brand-deep);color:var(--on-brand-deep);font-size:var(--fs-caption);font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.hstep .t{font-size:var(--fs-caption);font-weight:var(--fw-semi);color:var(--ink)}
.hstep .d{font-size:var(--fs-caption);color:var(--ink-faint);display:block;margin-top:-2px;font-weight:var(--fw-reg)}
.harrow{color:var(--line-strong)}
.hprog{flex:0 0 auto;display:flex;gap:16px;border-left:1px solid var(--line);padding-left:18px}
.hprog .k{text-align:center;min-width:34px}
.hprog .kv{display:block;font-size:var(--fs-kpi-sm);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;line-height:1.15;color:var(--ink)}/* kv=span(유효 중첩)·block 표시는 여기서 */
.hprog .kv.gr{color:var(--brand-deep)}
.hprog .kv.wr{color:var(--color-warn)}
.hprog .kl{font-size:var(--fs-caption);color:var(--ink-faint)}
@media(max-width:760px){
  .howto{padding:12px 14px;gap:10px}
  .hsteps{row-gap:6px}
  .hprog{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:10px;width:100%;justify-content:space-around}
}
/* ★모바일 = 세로 스텝 리스트(2026-07-22). 구 가로 배치는 폭·문구 길이에 따라 1열/2열로 제각각 접히고
   그때 화살표(→)가 줄 끝이나 줄 앞에 고아로 남아 아무것도 가리키지 않았다(전 7페이지 동일 증상).
   가로 화살표를 숨기고 번호 원 사이를 잇는 세로 연결선으로 순서를 표현 — 3단계 읽는 순서가 한 방향으로 고정된다. */
@media(max-width:620px){
  .hsteps{flex-direction:column;align-items:stretch;gap:9px}
  .hstep{align-items:flex-start;position:relative}
  .hstep>.t{flex:1 1 auto;min-width:0}
  .hstep:not(:last-child)::after{content:"";position:absolute;left:10px;top:25px;bottom:-12px;width:1px;background:var(--line)}
  .harrow{display:none}
}
html[data-howto="hide"] .howto{display:none}
body.subview .howto{display:none}/* 하위뷰(응시·상세) 진입 시 안내 은닉 — .page-lede 은닉과 동축(크럼 규약) */

/* 하위뷰 크럼 정본(2026-07-10) — 같은 페이지 안에서 화면이 바뀌는 뷰의 위치줄. 형식 "{목록면 이름} › 민법"(브랜드 그린 링크 + › 구분자).
   ★첫 마디는 그 페이지가 원래 쓰던 목록면 이름(판례 목록·용어 목록·둘러보기…) — 통일 대상은 형식이지 문구가 아니다.
   페이지 이동 링크(다른 html)에는 쓰지 않는다. 하위뷰 진입 시 body.subview 를 켜 .page-lede(메인·서브 타이틀)를 은닉 — 크럼이 타이틀을 대신한다.
   ★로컬 .crumb 재정의 금지(정본 무력화) — 페이지 고유 여백만 조정할 것. */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:var(--fs-caption);color:var(--ink-muted);margin:0 0 var(--sp-3)}
.crumb a,.crumb .cb{color:var(--brand-deep);font-weight:var(--fw-med);text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.crumb a:hover,.crumb .cb:hover{text-decoration:underline}
.crumb .sep{color:var(--ink-faint)}
.crumb .cur{color:var(--ink-muted)}
/* 진입 통로 복귀(?from=) — 크럼 앞머리. 생성=kz.js kzFromLink()(크럼 페이지 자동 부착).
   ★크럼 링크(브랜드 그린 = 페이지 안 목록면)와 색을 갈라 역할을 구분한다: 이건 잉크 bold = 다른 페이지로 나감.
   구분자(›) 없이 여백으로만 분리 — 크럼 경로의 한 마디가 아니기 때문. « = 방향 표식이라 한 단 흐리게. */
.crumb .cback{color:var(--ink);font-weight:var(--fw-bold);text-decoration:none;margin-right:14px}
.crumb .cback:hover{text-decoration:underline}
.crumb .cback .ar{color:var(--ink-faint);font-weight:var(--fw-med);margin-right:3px}
body.subview .page-lede{display:none}

.card{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1)}
.card--pad{padding:var(--sp-5)} /* W2-2 — 기본 패딩 변형(드릴/집중 카드) */
.empty-hint{font-size:var(--fs-caption);color:var(--ink-faint);padding:var(--sp-2)}
.foot{margin-top:var(--sp-8);font-size:var(--fs-caption);color:var(--ink-faint);text-align:center;line-height:1.7}

/* ===== ② 패턴 5종 ===== */

/* LaunchCard(처방 카드) — .card 에 좌측 4px 바 + 주 CTA 48px 풀폭 + 보조 텍스트 링크 */
.launch-card{border-left:4px solid var(--brand-deep)}
/* ★gap 필수(2026-07-16 오너 지적) — display:flex 컨테이너는 아이콘 span 과 라벨 사이의 "글자 공백"을
   익명 아이템 앞뒤 여백으로 잘라내 아이콘이 글자에 달라붙는다(마크업에 한 칸 띄어도 소용없음).
   자족 사본 amend_news.html 은 이미 gap:6px 보유 — 공유 정본만 빠져 있던 드리프트. */
.cta-launch{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:var(--r-sm);
  background:var(--brand);color:var(--on-brand);font-weight:var(--fw-bold)}
.cta-launch:hover{filter:brightness(.96)}
.cta-launch--ghost{background:none;border:1px solid var(--brand-deep);color:var(--brand-deep)}
.cta-launch--ghost:hover{filter:none;background:var(--surface-sunken)}
.cta-sub{display:inline-block;margin-top:var(--sp-2);font-size:var(--fs-caption);color:var(--brand-deep);font-weight:var(--fw-med)}

/* 미니 진척바 — 트랙 sunken·8px 기본(행 안 6px 은 --6) · 채움 의미색은 페이지/인라인 책임
   (수치 라벨 상시 병기 — 색 단독 인코딩 금지는 렌더 규약) */
.bar-track{height:8px;border-radius:var(--r-pill);background:var(--surface-sunken);overflow:hidden}
.bar-track--6{height:6px}
.bar-fill{display:block;height:100%;border-radius:var(--r-pill)}

/* annotation 2행 — ① "읽는 법: …" ② "→ 지금 할 일: …"(동사 b 강조는 페이지 책임) */
.chart-note{font-size:var(--fs-caption);color:var(--ink-muted);margin-top:var(--sp-2);line-height:1.55}

/* RecencyChip — N≥1 "최근 3년 N문항"(.on) / N=0 "마지막 출제 {y}년" · title=연도별 전량 */
.chip-recent{font-size:var(--fs-micro);border-radius:var(--r-pill);padding:1px 8px;background:var(--surface-sunken);color:var(--ink-faint);white-space:nowrap}
.chip-recent.on{background:var(--color-brand-cite-bg);color:var(--color-brand-cite)}

/* FilterChip — 과목/유형 필터 정본 (W2-2 신설 · 기존 페이지 자체 .chip 과 이름 분리 —
   .chip 정본화는 기각(§4-3): article/index 기정의 .chip 에 미선언 속성 누출로 무변경 불변식 붕괴) */
.filter-chip{min-height:38px;padding:0 var(--sp-3);border:1px solid var(--line-strong);background:var(--canvas);
  border-radius:var(--r-pill);font-size:var(--fs-caption);font-weight:var(--fw-med);color:var(--ink-muted);cursor:pointer}
.filter-chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* 모달/시트 스크림 — --scrim 토큰 페어 (W2-2) */
.modal-scrim{position:fixed;inset:0;background:var(--scrim);z-index:50}

/* 용어 카드 + 조문 칩 — index↔knowledge 합류 (D-1 보류분 · 2026-06-11)
   페이지 고유 변형은 후행 <style> 오버라이드: knowledge=.term-card 배경·syn 간격·def summary·.st 변형
   · corpus .art-chip 은 별계(세리프·40px 발사 칩 — 페이지 정의가 전속, font-size:inherit 카운터 포함) */
.term-card{border:1px solid var(--line);border-left:3px solid var(--color-brand-cite);border-radius:var(--r-sm);padding:var(--sp-3);margin-bottom:var(--sp-2)}
.term-card .tt{font-weight:var(--fw-bold)}
.term-card .syn{font-size:var(--fs-caption);color:var(--ink-muted);margin:2px 0 var(--sp-2)}
.term-card .def{font-size:var(--fs-caption);line-height:1.55;color:var(--ink)}
.term-card .arts{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin-top:var(--sp-2)}
.art-chip{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--bdg-h-s);padding:0 var(--bdg-px-s);font-family:var(--font-mono);font-size:var(--fs-micro);line-height:1;background:var(--color-brand-cite-bg);color:var(--color-brand-cite);border-radius:var(--r-pill);border:1px solid transparent}/* S 티어 정본(2026-07-12) — border 는 항상 1px(무색=transparent): 소비처가 보더를 얹어도 높이 불변 */

/* ===== ③ v2 분석 3페이지 공용 부품 (2026-06-12 · IMPLEMENTATION_SPEC §1·P0-1) =====
   신호색은 기존 토큰만 — 약점/오답/답바뀜=--color-warn(이 팔레트는 danger red 미보유,
   변별은 텍스트 라벨이 책임 · 색 단독 인코딩 금지) · 최근=.chip-recent 별도 */

/* SubjectTabbar — sticky 과목 필터(전체·노1·노2·민·사보·경) · 게이팅 과목=.gated
   2026-07-02 사용자: 라운드박스 형태 통일 — canvas 박스+보더+radius, 그림자=박스 자체(검색창 발산량 60%).
   구 우측 mask 페이드는 박스 bg·보더까지 지워 폐기(★mask 는 box-shadow 도 삼킴 — mask 재도입 시 mask-clip:no-clip 필수). */
.subject-tabbar{position:sticky;top:var(--topbar-h);z-index:30;display:flex;gap:var(--sp-1);overflow-x:auto;scrollbar-width:none;
  padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3);
  background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-3)}
.subject-tabbar::-webkit-scrollbar{display:none}
.subject-tabbar[hidden]{display:none}/* display:flex 가 UA [hidden] 을 이기는 함정 가드 — 빈 탭바 그림자 띠 방지(2026-07-02) */
.subject-tab{flex:0 0 auto;font-size:var(--fs-caption);font-weight:var(--fw-med);color:var(--ink-muted);
  background:var(--surface-sunken);border:1px solid transparent;border-radius:var(--r-pill);padding:7px 14px;
  min-height:38px;white-space:nowrap}
.subject-tab.on{background:var(--brand-deep);color:var(--on-brand-deep)} /* W2-1: --on-brand(≈3.6:1) → on-brand-deep 페어 — brand-deep 명도 보정과 단일 커밋(과도기 대비 악화 방지) */
.subject-tab.gated{color:var(--ink-faint)}
.subject-tab .n{font-family:var(--font-mono);font-size:var(--fs-nano);margin-left:4px;opacity:.75}

/* WeaknessBadge — 색+텍스트 병기 상태칩 · wrong/amend=warn · unseen=중립(faint) */
.badge-weak{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-micro);font-weight:var(--fw-med);
  border-radius:var(--r-pill);padding:1px 8px;white-space:nowrap;background:var(--surface-sunken);color:var(--ink-muted)}
.badge-weak.kind-wrong,.badge-weak.kind-amend{background:var(--color-warn-bg);color:var(--color-warn)}
.badge-weak.kind-unseen{background:var(--surface-sunken);color:var(--ink-faint)}

/* rx-row 처방/소주제 행 — [순위][제목 2줄클램프][진척바·칩·배지][▶발사] · 행 hover 강조
   행 전체 또는 내부 .rx-main 이 링크 · .rx-go(별도 발사) 44px 터치 타깃 */
.rx-row{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2);border-top:1px solid var(--line)}
.rx-row:first-child{border-top:0}
.rx-row:hover{background:var(--surface-sunken)}
.rx-rank{flex:0 0 auto;min-width:1.6em;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--ink-faint);text-align:right}
.rx-main{flex:1;min-width:0;display:block}
.rx-name{font-size:var(--fs-caption);font-weight:var(--fw-med);color:var(--ink);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rx-meta{display:flex;align-items:center;gap:var(--sp-2);margin-top:3px;flex-wrap:wrap}
.rx-go{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  font-size:var(--fs-caption);font-weight:var(--fw-bold);color:var(--brand-deep);border-radius:var(--r-sm)}
.rx-go:hover{background:var(--surface-sunken)}

/* ===== ④ 통합 레이아웃·디자인 시스템 (2026-06-21 · docs/ideation/2026-06-21_layout_unification_system) =====
   색·폰트·원자는 이미 통일됨 → 마지막 비일관 축 '셸(폭)+합성 상호작용 패턴'을 정본화.
   ★신규 네임스페이스로 §4-3 .chip 기각(미선언 속성 누출) 회피 — 라이브가 쓰는 .fold(study_drill/corpus)·
   .seg(다수)·.sheet(study_drill) 와 이름 분리 확인 끝(.foldsec/.segctl). 신설 색 토큰 0개.
   소비 전엔 inert(Wave 0). 페이지별 atomic 마이그레이션은 SoT §6 롤아웃 순서. */

/* PageShell — 폭 단일 SoT (.wrap/.main/.console 3종 + 880 하드 + var(--w-report,860) 죽은폴백 흡수) */
.shell{margin:0 auto;padding:var(--sp-3) var(--sp-4) var(--sp-8)}/* 최상단 여백 전역 12px(구 sp-5) 2026-06-22 */
.shell[data-w="hub"]{max-width:var(--w-hub);padding-top:var(--sp-3)}    /* 1140 — index·data_about */
.shell[data-w="report"]{max-width:var(--w-report)}                     /* 980  — 분석/탐색 */
.shell[data-w="focus"]{max-width:var(--w-focus)}                       /* 760  — 드릴/집중 */
/* 폭 통일(2026-07-02 사용자): 데탑 콘텐츠 컬럼 거터 sp-4→sp-6 — 본문·sticky 박스=1092(옴니박스 1108보다 좌우 8px 인셋 · subtopic .console 기하 전거).
   모바일(≤760) 거터 불변. ★페이지 로컬 .wrap 재정의(article·amend_news·drill_*)는 이 규칙을 이기므로 각 페이지 동기 미디어 오버라이드 필요. */
@media(min-width:761px){.wrap,.shell{padding-left:var(--sp-6);padding-right:var(--sp-6)}}

/* duo — '주/보조' 무게중심을 역할이 결정(임의 fr 금지 · 7fr5fr↔1fr1.6fr 비대방향 역전 종식) */
.duo{display:grid;gap:var(--sp-4);align-items:start}
.duo[data-split="main"]{grid-template-columns:8fr 4fr}   /* 주 콘텐츠 무거움(규약) */
.duo[data-split="even"]{grid-template-columns:1fr 1fr}   /* 대등 비교 */
/* ★붕괴는 [data-split] 속성으로 특이도 정합(미디어쿼리는 특이도 미상승 → .duo 만으론 [data-split=main] 못 이김) */
@media(max-width:880px){.duo,.duo[data-split]{grid-template-columns:1fr}}

/* Bento — 균일 발견 그리드 (2026-06-22 허브 리디자인 · .duo 위에 얹음 · 임의 fr 금지 계승).
   '타일 크기=우선순위'는 hero 를 풀폭 밴드로 분리해 표현 → 벤토 타일은 균일.
   auto-fit minmax 가 모바일에서 자동 1열 스택(가로 캐러셀 기각=발견성 우선 · 별도 미디어쿼리 불요). */
.bento{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:var(--sp-3)}

/* (BottomTab .btab 은퇴 2026-07-02 — 홈 단일 헤더 재편으로 마지막 사용처(index) 제거) */

/* ===== XScroll — 가로 스크롤 가장자리 페이드 공용 정본 (2026-07-12 통합)
   그전: 스크롤러마다 제각각(.fbar=마스크 · qid_style=::after 그라데이션 · data_about/knowledge_atlas=각자 마스크),
         대부분의 가로 필터엔 아예 없음. → 여기 하나로 흡수(적용 = hub_xscroll.js 가 스크롤러를 .xsw 로 감싸고 좌우 상태 부착).
   ★스크롤러 자신에게 mask 를 걸면 안 된다 — 라운드 박스형 필터바(.sfbar·.subject-tabbar)는 배경·테두리·그림자까지 같이 지워진다
     (2026-07-02 .subject-tabbar 마스크 폐기 경위 동일). 대신 래퍼에 "그 스크롤러의 실제 배경색" 그라데이션을 얹어 글씨 위를 덮는다
     → 글씨가 배경으로 사라지는 결과는 마스크와 동일하고, 박스 외형은 무손상. 배경색 = hub_xscroll.js 가 실측해 --xs-bg 주입. ===== */
.xsw{position:relative;min-width:0}
/* ★들여쓰기 = 스크롤러의 보더 두께(--xs-in · JS 실측 주입 · 보더 없으면 0).
   고정 1px 로 두면 보더 없는 스크롤러(.picker)에서 가장자리 1px 열이 안 덮여 칩 테두리·글자가 실선 잔상으로 남는다(2026-07-12). */
.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 .18s ease;border-radius:inherit}
/* 가장자리 쪽은 확실히 덮고(15%) 그 뒤로 길게 감쇠 — 불투명 구간이 너무 짧으면 글자가 비쳐 뿌옇게 남는다. */
.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}}

/* FilterBar — 과목/유형 필터 정본 (.chip/.subjtab/.picker/.filter-chip 4~5변종 흡수 · 선택=ink 단일·aria-pressed) */
.fbar{position:sticky;top:var(--topbar-h);z-index:30;display:flex;flex-wrap:wrap;gap:var(--sp-2);
  align-items:center;padding:var(--sp-2) 0;margin-bottom:var(--sp-3);background:var(--surface)}
/* 구 우측 mask 페이드 폐기(2026-07-12) — XScroll 공용(.xsw)이 승계. 마스크는 이 바의 sticky 배경까지 지워 스크롤 시 결과가 비쳤다. */
.fbar-grp{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.fchip{min-height:38px;padding:0 var(--sp-3);border:1px solid var(--line-strong);background:var(--canvas);
  border-radius:var(--r-pill);font-size:var(--fs-caption);font-weight:var(--fw-med);color:var(--ink-muted);cursor:pointer}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.fchip-n{font-family:var(--font-mono);font-size:var(--fs-nano);opacity:.75;margin-left:4px;font-style:normal}

/* FoldSection — <details> 접이식 정본 (.fold 충돌 회피=.foldsec · ad-hoc 18곳+더보기 7클래스 흡수)
   ★cap 초과는 .fs-body 에 전건 보존 후 닫음만 — display:none 삭제 금지(silent-drop 구조적 불가) */
.foldsec{border-top:1px solid var(--line);margin-top:var(--sp-3);padding-top:var(--sp-2)}
.foldsec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--sp-2);
  min-height:44px;font-size:var(--fs-caption);font-weight:var(--fw-med);color:var(--ink-muted)}
.foldsec>summary::-webkit-details-marker{display:none}
.foldsec>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(--ink-faint);transition:transform .15s}
.foldsec[open]>summary::before{transform:rotate(90deg)}
.foldsec>summary:hover{color:var(--ink)}
.foldsec .fs-n{color:var(--ink-faint);font-size:var(--fs-micro)}
.foldsec--plain{border:0;margin-top:var(--sp-1);padding:0}
.foldsec--plain>summary{min-height:auto;padding:var(--sp-1) 0}

/* SegmentedControl — 배타 모드전환 정본 (.seg 충돌 회피=.segctl · .modeseg/.tabs 흡수)
   필터(.fchip·N택·pill)와 의미축 분리: 배타 2~3택은 캡슐 — 모양으로 '배타냐 다중이냐' 구분 */
.segctl{display:inline-flex;background:var(--surface-sunken);border-radius:var(--r-pill);padding:3px;gap:2px}
.seg-btn{min-height:38px;padding:0 var(--sp-4);border:0;background:none;border-radius:var(--r-pill);
  font-size:var(--fs-caption);font-weight:var(--fw-med);color:var(--ink-muted);white-space:nowrap;cursor:pointer}
/* 활성=aria-selected(tablist) 또는 aria-pressed(toggle group) 양 관례 수용 → 토글 의미 페이지는 클래스 교체만으로 합류 */
.seg-btn[aria-selected="true"],.seg-btn[aria-pressed="true"]{background:var(--canvas);color:var(--ink);box-shadow:var(--shadow-1);font-weight:var(--fw-bold)}

/* MasterDetail — 사이드바+본문 (subtopic 248/tables 264 → --rail-w 토큰 단일 · 붕괴 880 단일) */
.mdetail{display:grid;grid-template-columns:var(--rail-w,248px) 1fr;gap:0;min-height:calc(100vh - var(--topbar-h))}
.md-side{position:sticky;top:var(--topbar-h);align-self:start;height:calc(100vh - var(--topbar-h));overflow:auto;
  border-right:1px solid var(--line);padding:var(--sp-4)}
.md-main{min-width:0;padding:var(--sp-6)}
@media(max-width:880px){
  .mdetail{grid-template-columns:1fr;min-height:0}
  .md-side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding-bottom:var(--sp-2)}
}

/* T3-3 모바일 터치타깃 44px (데스크탑 밀도 유지) */
@media(max-width:560px){.topbar .back,.topnav a{min-height:44px;display:inline-flex;align-items:center}}

/* ===== FAQ 「궁금증」 공유 컴포넌트 (faq_card.js · S1 curiosity / S3 subtopic 온램프 / S2 search) ===== */
/* ② 답 블록 (3단 브릿지 — 점진 공개·인출연습 보존) */
.brg-reveal{margin:var(--sp-1) 0 var(--sp-3)}
.brg-reveal>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:38px;
  font-size:var(--fs-caption);font-weight:var(--fw-med);color:var(--brand-deep);
  border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:6px 14px;background:var(--canvas)}
.brg-reveal>summary::-webkit-details-marker{display:none}
.brg-reveal>summary:hover{border-color:var(--brand-deep);background:var(--surface-sunken)}
.brg-reveal[open]>summary{color:var(--ink-muted);border-color:var(--line)}
.brg-reveal>summary .rv-q{color:var(--ink-faint);font-weight:var(--fw-reg)}
.brg-reveal[open]>summary .rv-q{display:none}
.brg-ans{margin-top:var(--sp-2);padding-left:var(--sp-3);border-left:3px solid var(--color-brand-cite)}
.brg-intent{font-size:var(--fs-caption);color:var(--ink-muted);margin-bottom:4px;line-height:1.55}
.brg-intent .bi-l{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:var(--r-pill);background:var(--surface-sunken);color:var(--ink-faint);font-size:var(--fs-nano);font-weight:var(--fw-bold);white-space:nowrap}
.brg-rule{font-size:var(--fs-body);line-height:1.6;color:var(--ink)}
.brg-note{font-size:var(--fs-nano);color:var(--ink-faint);margin-top:4px;font-family:var(--font-mono)}
.brg-note.asof{color:var(--color-warn);font-family:var(--font-body)}
.brg-detail{margin-top:var(--sp-2)}
.brg-detail>summary{cursor:pointer;list-style:none;font-size:var(--fs-caption);color:var(--ink-muted)}
.brg-detail>summary::-webkit-details-marker{display:none}
.brg-detail>summary:hover{color:var(--ink)}
/* ＋/− 토글(2026-07-17 오너 자산 짝) — 회전으로 만들 수 없는 짝이라 마스크 2벌 교체(.stgrp 동형).
   의사요소가 글리프만 품어 마크업 분리 불요. 신규 자산이라 ?v 불요(URL 자체가 새것). */
.brg-detail>summary::before{content:"";display:inline-block;width:1em;height:1em;flex:0 0 auto;
  background:currentColor;vertical-align:-.125em;margin-right:.25em;color:var(--ink-faint);
  -webkit-mask:url(./icons/plus-small.svg) center/contain no-repeat;mask:url(./icons/plus-small.svg) center/contain no-repeat}
.brg-detail[open]>summary::before{-webkit-mask:url(./icons/minus-small.svg) center/contain no-repeat;mask:url(./icons/minus-small.svg) center/contain no-repeat}
.brg-detail-body{font-size:var(--fs-caption);line-height:1.6;color:var(--ink-muted);margin-top:var(--sp-1)}
/* 개정 답역전 차단 슬리브 (answer_currency_safe=false · answer_moved) */
.brg-amend{margin:var(--sp-1) 0 var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);
  background:var(--color-warn-bg);border-left:3px solid var(--color-warn);
  font-size:var(--fs-caption);line-height:1.55;color:var(--ink)}
.brg-amend b{color:var(--color-warn);font-weight:var(--fw-bold)}
/* S3 소주제 온램프 (접이식 "자주 궁금한 것") */
.faq-onramp{margin:var(--sp-3) 0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.faq-onramp>summary{cursor:pointer;list-style:none;padding:var(--sp-3) var(--sp-4);font-weight:var(--fw-med);
  color:var(--ink);display:flex;align-items:center;gap:8px}
.faq-onramp>summary::-webkit-details-marker{display:none}
.faq-onramp>summary .fo-n{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-faint)}
/* 토글 어포던스(2026-07-17 마크업 분리) — 의사요소는 텍스트만, 아이콘은 마크업 span.
   한 의사요소가 텍스트+마스크를 겸할 수 없어 구 content:"펼치기 ▾" 를 쪼갰다.
   글리프 교체(▾↔▴) 대신 회전 = 닫힘 아래(▾) → 열림 위(▴) 규약 · 전환 애니메이션 획득. */
.faq-onramp>summary .fo-tog{margin-left:auto;display:inline-flex;align-items:center;gap:4px;
  font-size:var(--fs-caption);color:var(--ink-faint);font-weight:var(--fw-reg)}
.faq-onramp>summary .fo-tog::before{content:"펼치기"}
.faq-onramp[open]>summary .fo-tog::before{content:"접기"}
.faq-onramp>summary .fo-tog .fi{transition:transform .15s}
.faq-onramp[open]>summary .fo-tog .fi{transform:rotate(180deg)}
.faq-onramp .fo-body{padding:0 var(--sp-4) var(--sp-3)}
.fo-card{border-top:1px solid var(--line);padding:var(--sp-3) 0}
.fo-q{font-size:var(--fs-body);font-weight:var(--fw-med);color:var(--ink);line-height:1.5;margin:0 0 var(--sp-2)}
.fo-cta{margin-top:var(--sp-2)}
.fo-cta a{font-size:var(--fs-caption);color:var(--brand-deep);font-weight:var(--fw-med);text-decoration:none}
.fo-cta a:hover{text-decoration:underline}
.fo-more{display:inline-block;margin-top:var(--sp-3);font-size:var(--fs-caption);color:var(--brand-deep);
  font-weight:var(--fw-med);text-decoration:none}
.fo-more:hover{text-decoration:underline}

/* S2 답상자 (검색 워크벤치·모달 팰릿 공유 · 답 블록은 위 .brg-*) */
.faq-ab{border:1px solid var(--color-brand-cite);border-left:3px solid var(--color-brand-cite);border-radius:var(--r-md);
  background:var(--color-brand-cite-bg);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3)}
.faq-ab .ab-q{font-size:var(--fs-lede);font-weight:var(--fw-med);color:var(--ink);line-height:1.5;margin-bottom:var(--sp-2)}
.faq-ab .ab-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-2)}
.faq-ab .ab-cta a{font-size:var(--fs-caption);color:var(--brand-deep);font-weight:var(--fw-med);text-decoration:none}
.faq-ab .ab-cta a:hover{text-decoration:underline}
.faq-ab .ab-cta a.alt{color:var(--ink-muted)}

/* 개념 헤더 (2026-06-25 · 검색 워크벤치·모달 팰릿 공유) — 서버 결과가 한 소주제로 응집 시 신뢰 큐. 단정 아님("관련"). */
.concept-hint{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;text-decoration:none;
  border:1px solid var(--color-brand-cite);border-left:3px solid var(--brand-deep);border-radius:var(--r-md);
  background:var(--color-brand-cite-bg);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3)}
.concept-hint:hover{border-color:var(--brand-deep)}
.concept-hint .ch-tag{font-size:var(--fs-caption);font-weight:var(--fw-bold);color:var(--on-brand-deep);
  background:var(--brand-deep);border-radius:var(--r-sm);padding:2px var(--sp-2);white-space:nowrap}
.concept-hint .ch-body{font-size:var(--fs-body);color:var(--ink);line-height:1.4}
.concept-hint .ch-body b{color:var(--brand-deep);font-weight:var(--fw-bold)}
.concept-hint .ch-n{font-size:var(--fs-caption);color:var(--ink-muted);font-weight:var(--fw-med)}
.concept-hint .ch-cta{margin-left:auto;font-size:var(--fs-caption);color:var(--brand-deep);font-weight:var(--fw-med);white-space:nowrap}
.concept-hint:hover .ch-cta{text-decoration:underline}

/* uicons 마스크 아이콘 — 단일 소스 ./icons (faq_card 등 공유 컴포넌트용 · currentColor 테마적응) */
/* .fi 아이콘 = icons.css 단일정본(2026-06-30 통일) */






























/* 분석 잠금 업셀 카드 (NomuContent.upsellHtml 공용 — 3 훈련형+qid 공통 시각) */
.upsell-card{text-align:center;max-width:360px;margin:var(--sp-4) auto;padding:1.6em 1.2em;border:1px dashed var(--brand-deep);border-radius:var(--r-lg);background:var(--sheet)}
.upsell-card .us-lock{margin-bottom:.4em;line-height:1}
.upsell-card .us-lock .fi{width:1.6rem;height:1.6rem;color:var(--brand-deep);opacity:.8}
.upsell-card .us-title{font-weight:700;color:var(--ink);margin-bottom:.4em;font-size:1rem}
.upsell-card .us-desc{font-size:.86rem;color:var(--sub);line-height:1.5;margin-bottom:1em}
.upsell-card .us-btn{padding:.6em 1.4em;border:0;border-radius:var(--r-pill);background:var(--brand-deep);color:var(--on-brand-deep);font-weight:700;cursor:pointer;font-size:.9rem}
.upsell-card .us-btn:hover{filter:brightness(1.08)}