/* 이룬 양형 노트 v2 — self-contained stylesheet (no /shared.css dependency).
   CI tokens copied from practice.html for brand parity. Mobile-first.
   P5(TASK-kit-p5): 콘텐츠 유형별 가로폭 정책 + 타이포/간격 스케일 토큰화 + 카드·표·버튼·포커스 통일. */

/* :root 디자인 토큰은 tokens.css 로 분리됐다(2026-08-03) — 이 파일보다 먼저 로드된다.
   토큰을 여기에 다시 정의하지 말 것(단일 출처 = tokens.css). */

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--sk-bg);
  color: var(--sk-navy);
  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }

/* 공통 포커스 링 — 전 인터랙티브 요소에 일관 적용(키보드 접근성). */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible,
[tabindex]:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); }

.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { left: 16px; top: 16px; width: auto; height: auto; padding: 10px 18px; background: var(--sk-navy); color: #fff; border-radius: var(--sk-radius-pill); z-index: 9999; }
.sk-noscript { text-align: center; padding: 40px 20px; }
/* TASK-7c9aa9(§C-2) — 시각적으로 숨기되 스크린리더에는 노출하는 표준 sr-only 패턴(.skip-link
   와 달리 포커스 시에도 드러나지 않아야 함 — 별도 클래스). */
.sk-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; }

/* 최상위 컨테이너 — 단일 하드 고정폭을 쓰지 않는다: 넓은 max-width + 유동 좌우 여백(clamp). */
.sk-shell { max-width: var(--sk-wide); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 80px; }

/* TASK-9bfb94(resume r1, atom C1, 2026-07-19) — 스크롤 시에도 홈 버튼 상시 접근(대표님 실기기
   지시). padding/높이는 무변경(현행 크기 유지 의무) — position·z-index·배경만 추가. 배경은
   body 와 동일 --sk-bg 로 스크롤되는 본문이 비치지 않게 한다. z-index 는 .sk-result-tabbar
   (10)보다 위. */
.sk-topbar { display: flex; align-items: center; gap: var(--sk-sp-3); padding: 18px 0; position: sticky; top: 0; z-index: 11; background: var(--sk-bg); }
.sk-brand { display: inline-flex; align-items: center; gap: var(--sk-sp-2); font-weight: 800; color: var(--sk-navy); font-size: var(--sk-fs-body); }
.sk-brand__mark { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; }
/* TASK-9bfb94(atom3, 2026-07-19) — 타이틀 배지가 홈 버튼(<button>)으로 전환(app.js showView
   ('goal') 배선) — 외관 무변경(밑줄·색 변화 0) · cursor 만 추가(button 은 신규 브랜드색 0). */
.sk-topbar__badge { position: relative; margin-left: auto; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-sage-dark); background: rgba(135,169,107,0.14); border: 1px solid rgba(135,169,107,0.35); padding: 6px 12px; border-radius: var(--sk-radius-pill); cursor: pointer; }
/* TASK-7d94e2(atom1, 2026-07-19) — 실제 박스(≈36px)는 44px 터치 타깃 기준 미달이나, 시각
   크기·topbar 높이 상수(--sk-topbar-h, 위 §55-64 주석)는 그대로 둔다: 보이지 않는 ::before
   히트영역만 확장(레이아웃에 영향 0 — absolute 자손은 relative 부모 치수에 기여하지 않음). */
.sk-topbar__badge::before { content: ''; position: absolute; inset: -5px; }
/* TASK-48775f(A5, 2026-07-18) — 쉬운말 사전 topbar 진입 링크. 배지 앞에 배치되어 배지의
   margin-left:auto 우측 정렬은 그대로 유지된다(신규 색 토큰 0 · 기존 sage 톤 재사용). */
.sk-topbar__link { position: relative; background: none; border: 0; padding: 6px 4px; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-sage-dark); cursor: pointer; }
.sk-topbar__link:hover { color: var(--sk-navy); }
/* TASK-7d94e2(atom1, 2026-07-19) — .sk-topbar__badge::before 와 동일 기법(44px 히트영역 ·
   시각/topbar 높이 무변경). */
.sk-topbar__link::before { content: ''; position: absolute; inset: -5px; }

/* 뷰 폭 정책: 읽는 뷰(인트로·상황·인자·결과)는 가독 폭 · 선택 뷰(범죄군·유형)는 넓게.
   atom P12-1 — 220ms ease-out 진입(대표님 지시 #11/#17). 뒤로가기(◀)는 sk-view--back 이
   붙어 반대 방향(위→아래 대신 아래→위)에서 진입 — showView(name,{direction}) 가 토글. */
.sk-view { max-width: var(--sk-read); margin-inline: auto; animation: skEnterForward 220ms ease-out; }
.sk-view.sk-view--back { animation-name: skEnterBack; }
.sk-view[hidden] { display: none; }
#view-group, #view-type { max-width: var(--sk-wide); }
@keyframes skEnterForward { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes skEnterBack { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* 진행률 — TASK-6a34ac(P14) atom A: 시각을 SVG 항해 진행선으로 교체(설계 §A). 컨테이너는
   더 이상 고정 6px 바가 아니므로 높이 제약을 없애고 SVG+캡션이 자체 높이를 쓰게 한다. */
.sk-progress { position: relative; margin: var(--sk-sp-3) 0 22px; }

/* TASK-6a34ac(P14) — 항해 프레임(위저드 진행선 A · 사건 항해도 B · CTA 훅 C). 해도(海圖)의
   언어: 가는 선·작은 마커만(장식적 일러스트 0) · 신규 색 토큰 0(기존 --sk-navy/--sk-sage/
   --sk-gold/--sk-cream/--sk-line-strong/--sk-muted/--sk-body 만 재사용). */
.sk-voyage { margin: 0; }
.sk-voyage__svg { display: block; width: 100%; }
.sk-voyage--wizard .sk-voyage__svg { height: 32px; }
.sk-voyage--case .sk-voyage__svg { height: 46px; margin: 0 0 4px; }

.sk-voyage__route { stroke: var(--sk-line-strong); stroke-width: 1.5; }
.sk-voyage__wp { fill: var(--sk-bg); stroke: var(--sk-line-strong); stroke-width: 1.3; }
.sk-voyage--wizard .sk-voyage__wp.is-passed { fill: var(--sk-sage); stroke: var(--sk-sage-dark); }
.sk-voyage__caption { margin: 4px 0 0; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-sage-dark); }

/* atom B — "지나온 구간은 옅게, 남은 구간은 선명하게"(설계 §B): 완료(passed)는 은은하게,
   남은 구간(remaining)이 오히려 강조되어 "어디까지 가야 하는지"를 보여준다. */
.sk-voyage__seg { stroke-width: 2; }
.sk-voyage__seg.is-passed { stroke: var(--sk-line-strong); opacity: .5; }
.sk-voyage__seg.is-remaining { stroke: var(--sk-navy); opacity: 1; }
.sk-voyage__wp-group.is-passed { opacity: .5; }
.sk-voyage__wp-group.is-remaining .sk-voyage__wp { fill: var(--sk-sage); stroke: var(--sk-sage-dark); }
.sk-voyage__wp-label { font-size: 8px; font-weight: 700; fill: var(--sk-muted); }
.sk-voyage__here { font-size: 8px; font-weight: 700; fill: var(--sk-sage-dark); }

/* 배 마커(로고 조형 어휘 차용 글리프 · 로고 자체 사용·변형 아님) + 등대(작게 · Horizon Gold
   불빛 점). 단계 전환 진입 모션 220ms(atom P12 리듬 정합) — reduced-motion/print 무력화는
   기존 P12 모션-끄기 목록에 셀렉터만 추가(§ 아래 두 @media 블록 · 기존 항목 변경 0). */
.sk-voyage__ship-mast, .sk-voyage__ship-hull { stroke: var(--sk-navy); stroke-width: 1.6; stroke-linecap: round; }
.sk-voyage__ship-sail { fill: none; stroke: var(--sk-sage); stroke-width: 1.6; stroke-linecap: round; }
.sk-voyage__ship-inner { animation: skShipArrive 220ms ease-out backwards; }
.sk-voyage__ship-inner--noanim { animation: none; }
@keyframes skShipArrive { from { opacity: 0; transform: scale(0.7) translateY(3px); } }
.sk-voyage__lighthouse-tower { fill: var(--sk-navy); }
.sk-voyage__lighthouse-light { fill: var(--sk-gold); }

/* B+C 카드 본문(사건 항해도 부제 · CTA 훅 2줄 · 버튼) */
.sk-voyage-card__subtitle { font-size: var(--sk-fs-body2); color: var(--sk-body); margin: 0 0 14px; }
.sk-voyage-card__hook { font-size: var(--sk-fs-body2); color: var(--sk-body); line-height: 1.8; margin: 14px 0 0; }
/* Z3-e(2026-07-11 Z-사이클 설계 §Z3-e) — 버튼 가운데 정렬. display:table 로 inline-block과
   동일한 shrink-to-fit 폭을 유지하면서 margin:auto 중앙 정렬을 가능하게 한다(전체폭 확장 방지). */
.sk-voyage-card__btn { display: table; margin: 14px auto 0; }

/* 인트로 / 트랙 카드 — atom P12-7 타이포·깊이 폴리시: 히어로 배경에 기존 CI 크림 톤의
   은은한 그라데이션 밴드(신규 색 토큰 0 · --sk-cream 을 color-mix 로만 옅게 사용). */
.sk-hero {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sk-cream) 55%, transparent) 0%, transparent 75%);
  border-radius: var(--sk-radius-card);
  padding: 10px clamp(4px, 2vw, 16px) 2px;
  margin: 0 0 4px;
}
.sk-hero h1 { font-size: var(--sk-fs-title); font-weight: 900; margin: var(--sk-sp-1) 0 10px; letter-spacing: -0.02em; }
.sk-hero .sk-sub { color: var(--sk-body); font-size: var(--sk-fs-body); margin: 0 0 var(--sk-sp-2); line-height: 1.8; }
/* 3차 실측 지시 ②(2026-07-13) — 첫 화면 법률 조언 아님 명시(결과 화면 배지와 동일 언어) */
.sk-hero-disclaimer { font-size: var(--sk-fs-notice); color: var(--sk-muted); margin: 0 0 var(--sk-sp-5); }
.sk-tracks { display: grid; gap: var(--sk-sp-3); }
/* atom P12-4 — 카드 인터랙션: hover 미세 상승 · active 눌림(scale) · 포커스 링 불변. */
.sk-track-card { display: block; width: 100%; text-align: left; padding: 18px 20px; border-radius: var(--sk-radius-card); border: 1px solid var(--sk-line); background: #fff; box-shadow: var(--sk-shadow-card); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.sk-track-card:not(:disabled):hover { border-color: var(--sk-sage); box-shadow: var(--sk-shadow-hover); transform: translateY(-2px); }
.sk-track-card:not(:disabled):active { transform: scale(.985); }
.sk-track-card__title { font-size: var(--sk-fs-head); font-weight: 800; color: var(--sk-navy); }
.sk-track-card.is-disabled, .sk-track-card:disabled { opacity: 0.55; cursor: not-allowed; background: rgba(0,0,0,0.02); box-shadow: none; }
.sk-track-card__note { display: inline-block; margin-left: var(--sk-sp-2); font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-muted); background: var(--sk-cream); padding: 2px 10px; border-radius: var(--sk-radius-pill); }
/* PLAN-yanghyeong-easy-guide-expansion(TASK-d70f1c 위임 §2 atom3) — Q0 진입 카드 최상단 강조.
   신규 색 토큰 0 — 기존 .sk-block--buildable(gold border + 6% tint) 패턴 그대로 재사용. */
.sk-track-card--highlight { border-color: var(--sk-gold); background: rgba(212,168,83,0.06); }
.sk-track-card--highlight:not(:disabled):hover { border-color: var(--sk-gold); }

/* TASK-8f1425(atom5, 2026-07-18) — 목표 화면(view-goal) 전용 압박감 완화: 제목 소폭 축소 ·
   카드 간 여백 확대 · 보조문 색 옅게. 스코프를 #view-goal 로 한정해 다른 뷰(인트로 3카드 ·
   형사 중간분기 2카드)의 동일 클래스(.sk-tracks/.sk-track-card/.sk-track-card__desc)는
   무변경(신규 색 토큰 0 — 기존 --sk-body/--sk-sp-4 재사용). */
#view-goal .sk-hero h1 { font-size: calc(var(--sk-fs-title) * 0.92); }
#view-goal .sk-tracks { gap: var(--sk-sp-4); }
#view-goal .sk-track-card__desc { color: var(--sk-body); }
/* 카드 head 행(아이콘+제목, 카드②는 +배지) — 기존 .sk-topbar__badge 의 margin-left:auto
   우측 정렬 관행을 그대로 재사용(신규 레이아웃 패턴 0). */
.sk-track-card__head { display: flex; align-items: center; gap: var(--sk-sp-2); margin: 0 0 6px; }
.sk-track-card__icon { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--sk-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* 골드 배지 — 대표님 지시(카드②가 '이룬 양형 노트' 주 앵커임을 한눈에) · 색 토큰은 기존
   .sk-badge-notice 와 동일(신규 색 0 · 이미 AA 검증된 조합 재사용). */
.sk-track-card__badge { flex: none; margin-left: auto; font-size: var(--sk-fs-sm); font-weight: 800; color: var(--sk-navy); background: rgba(212,168,83,0.18); border: 1px solid rgba(212,168,83,0.4); padding: 4px 10px; border-radius: var(--sk-radius-pill); }
/* 범위 고지(목표 화면 하단) — 기존 .sk-hero-disclaimer 와 동일 토큰(신규 색 0). */
.sk-goal-scope-notice { text-align: center; font-size: var(--sk-fs-sm); color: var(--sk-muted); margin: var(--sk-sp-3) 0 0; }

/* 뒤로가기 / 스텝 타이틀 */
/* TASK-7d94e2(atom1, 2026-07-19) — 세로 패딩 8px→12px(--sk-sp-2→--sk-sp-3): 44px 터치 타깃
   기준 미달(≈40.5px) 해소. 가로는 0 유지(문구 자체 폭이 이미 44px 이상 · 신규 색 0). */
.sk-back { background: none; border: 0; padding: var(--sk-sp-3) 0; font-size: var(--sk-fs-body2); font-weight: 700; color: var(--sk-muted); cursor: pointer; }
.sk-back:hover { color: var(--sk-navy); }
.sk-step-back { display: block; }
.sk-step-title { font-size: var(--sk-fs-title); font-weight: 900; margin: 6px 0 14px; }
.sk-hint { font-size: var(--sk-fs-body2); color: var(--sk-body); margin: var(--sk-sp-1) 0 var(--sk-sp-4); }
.sk-empty { font-size: var(--sk-fs-body); color: var(--sk-muted); padding: 20px 0; }

/* 검색 + 리스트 픽커 */
.sk-search { display: block; margin: 0 0 var(--sk-sp-4); }
.sk-search__label { display: block; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-sage-dark); margin-bottom: 6px; }
.sk-search input { width: 100%; padding: 12px 16px; border-radius: var(--sk-radius-inner); border: 1px solid var(--sk-line-strong); font-size: var(--sk-fs-body); background: #fff; color: var(--sk-ink); }
.sk-search input:focus-visible { outline: var(--sk-focus); outline-offset: 1px; border-color: var(--sk-sage); }
/* 선택 카드 그리드 — 화면 폭 활용: 데스크톱 다열(범죄군·유형). */
.sk-pick-list { display: grid; gap: var(--sk-sp-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .sk-pick-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sk-pick-list { grid-template-columns: repeat(3, 1fr); } }
/* 유형 행은 형량 칩을 함께 실어 폭이 넓으므로 데스크톱에서 2열까지만(과밀 방지). */
@media (min-width: 1000px) { #view-type .sk-pick-list { grid-template-columns: repeat(2, 1fr); } }
/* 4차 실측 지시 ②(2026-07-13) — #sk-type-host 는 그리드 컨테이너인데 제목·세부유형 라벨·
   '가./나.' 하위표 제목이 카드 칸 하나를 차지해 배열이 깨졌음 → 카드(.sk-pick) 외 전 요소는
   전폭(full-row)으로 올려 배치. 세부유형 라벨은 회색 박스 → 좌측 강조선의 슬림 라인으로. */
#sk-type-host > :not(.sk-pick) { grid-column: 1 / -1; }
#sk-type-host .sk-subtype-label { background: transparent; border-left: 3px solid var(--sk-sage); border-radius: 0; padding: 2px 0 2px 12px; margin: 0; color: var(--sk-sage-dark); font-weight: 800; }
#sk-type-host .sk-subtable-head { margin: 6px 0 0; }
.sk-pick { display: block; width: 100%; text-align: left; padding: 15px 18px; border-radius: var(--sk-radius-card); border: 1px solid var(--sk-line); background: #fff; box-shadow: var(--sk-shadow-card); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.sk-pick:hover { border-color: var(--sk-sage); box-shadow: var(--sk-shadow-hover); transform: translateY(-2px); }
.sk-pick:active { transform: scale(.985); }
.sk-pick__title { display: block; font-size: var(--sk-fs-body); font-weight: 800; color: var(--sk-navy); }
.sk-pick__meta { display: inline-block; margin-top: var(--sk-sp-1); font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-muted); }
.sk-pick__range { display: flex; flex-wrap: wrap; gap: var(--sk-sp-2); margin-top: var(--sk-sp-2); }
.sk-range-chip { display: inline-flex; flex-direction: column; gap: 1px; background: var(--sk-cream); border-radius: var(--sk-sp-2); padding: 4px 9px; font-size: var(--sk-fs-sm); }
.sk-range-chip__k { font-weight: 800; color: var(--sk-sage-dark); }
.sk-range-chip__v { color: var(--sk-ink); }
/* TASK-9b7ec5(2026-08-01) — eg 흐름 종착 카드(F-5) 권고 형량범위 재표시의 해당 구간 chip
   강조. 노트 위저드 .sk-ranges 열 강조와 동일 색 언어(5차 실측 지시 ① — 감경=sage ·
   기본=navy · 가중=rust)를 data-region-key 로 재적용(CTA 그라디언트 아닌 상태 강조 뱃지 계열). */
.sk-eg-region-chip .sk-range-chip__k, .sk-eg-region-chip .sk-range-chip__v { font-weight: 800; }
.sk-eg-region-chip[data-region-key="mitigated"] { background: rgba(135,169,107,0.22); box-shadow: inset 0 0 0 2px var(--sk-sage); }
.sk-eg-region-chip[data-region-key="mitigated"] .sk-range-chip__k { color: var(--sk-sage-dark); }
.sk-eg-region-chip[data-region-key="basic"] { background: rgba(0,40,92,0.10); box-shadow: inset 0 0 0 2px var(--sk-navy); }
.sk-eg-region-chip[data-region-key="basic"] .sk-range-chip__k { color: var(--sk-navy); }
.sk-eg-region-chip[data-region-key="aggravated"] { background: rgba(138,90,30,0.14); box-shadow: inset 0 0 0 2px var(--sk-rust); }
.sk-eg-region-chip[data-region-key="aggravated"] .sk-range-chip__k { color: var(--sk-rust); }
.sk-subtable-head { font-size: var(--sk-fs-body2); font-weight: 800; color: var(--sk-sage-dark); margin: 18px 0 var(--sk-sp-2); padding-bottom: 6px; border-bottom: 1px solid var(--sk-cream); }
.sk-subtype-label { font-size: var(--sk-fs-body2); font-weight: 700; color: var(--sk-navy); background: rgba(0,40,92,0.05); border-radius: var(--sk-radius-inner); padding: var(--sk-sp-2) 14px; margin: 0 0 14px; }

/* 범죄군 선택 — 대분류 카드 그리드(11개 전부 노출 · 접이식 없음, P2) */
.sk-group-heading { font-size: var(--sk-fs-title); font-weight: 900; color: var(--sk-navy); margin: 6px 0 14px; letter-spacing: -0.01em; }
.sk-group-heading:focus-visible { outline: var(--sk-focus); outline-offset: 4px; border-radius: 6px; }
.sk-cat-grid { display: grid; grid-template-columns: 1fr; gap: var(--sk-sp-3); }
@media (min-width: 560px) { .sk-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .sk-cat-grid { grid-template-columns: repeat(3, 1fr); } }
.sk-cat-card { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 88px; width: 100%; text-align: left; padding: var(--sk-sp-4) 18px; border-radius: var(--sk-radius-card); border: 1px solid var(--sk-line); background: #fff; box-shadow: var(--sk-shadow-card); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.sk-cat-card:hover { border-color: var(--sk-sage); box-shadow: var(--sk-shadow-hover); transform: translateY(-2px); }
.sk-cat-card:active { transform: scale(.985); }
.sk-cat-card__title { font-size: var(--sk-fs-head); font-weight: 800; color: var(--sk-navy); }
.sk-cat-card__meta { font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-muted); }

/* 상황 질문 */
/* atom⑥(P3-4, TASK-52d696 2026-07-18) — 다수범죄 재진입 시(상황 4문항은 사건 공통이라 초기화
   되지 않음) 첫 문항에서 "이전 답 그대로 진행" 1버튼 제공(app.js renderVarStep). */
.sk-vars-keep { display: block; width: 100%; margin: 0 0 var(--sk-sp-4); }
.sk-question h2 { font-size: var(--sk-fs-title); font-weight: 900; margin: 0 0 18px; }
.sk-options { display: grid; gap: var(--sk-sp-3); }
.sk-option { text-align: left; padding: 14px 18px; border-radius: var(--sk-radius-inner); border: 1px solid var(--sk-line-strong); background: #fff; font-size: var(--sk-fs-body); font-weight: 600; color: var(--sk-ink); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.sk-option:hover { border-color: var(--sk-sage); }
.sk-option.is-active { background: var(--sk-navy); border-color: var(--sk-navy); color: #fff; }

/* TASK-f7bfa4(atom4, 2026-07-18) — 목표 프리레이어(view-goal) + 단계 찾기(view-stagefinder)
   신규 스타일. 기존 토큰(--sk-*)·기존 클래스(.sk-hero·.sk-tracks·.sk-track-card·.sk-question·
   .sk-options·.sk-option·.sk-procmap-banner) 최대 재사용 — 아래는 그 클래스들로 채우지 못한
   최소 보조 요소만(목업 p1.css 참조 · 신규 클래스 최소). */
.sk-goal-existing-link { display: block; width: 100%; text-align: center; margin: var(--sk-sp-5) 0 0; background: none; border: 0; padding: var(--sk-sp-2) 0; font-size: var(--sk-fs-body2); font-weight: 700; color: var(--sk-muted); cursor: pointer; }
.sk-goal-existing-link:hover { color: var(--sk-navy); }
/* TASK-8f1425-v2(atom1, 2026-07-19) — 쉬운말 사전 보조 강등: 구 카드③ 자리를 대신하는 소형
   텍스트 링크(신규 색 토큰 0 — .sk-goal-existing-link 와 동일 톤 · font-size 만 sm 로 더 작게). */
.sk-goal-easyhelp-link { display: block; width: 100%; text-align: center; margin: var(--sk-sp-3) 0 0; background: none; border: 0; padding: var(--sk-sp-3) 0; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-muted); cursor: pointer; }
.sk-goal-easyhelp-link:hover { color: var(--sk-navy); }
/* TASK-9bfb94(atom1, 2026-07-19) — 준비 가이드 진입을 소형 아웃라인 버튼으로 승격(주요 3카드
   보다 작은 보조 버튼 급). .sk-goal-easyhelp-link 위 modifier — 표면(폭·여백·테두리)만 재정의,
   글자 크기/굵기/색/hover 색전환은 기반 규칙 재사용(신규 색 토큰 0 · 기존 sage/line 톤). */
.sk-goal-prep-btn { display: table; width: auto; max-width: 100%; margin: var(--sk-sp-3) auto 0; padding: var(--sk-sp-2) var(--sk-sp-4); border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-pill); background: #fff; }
.sk-goal-prep-btn:hover { border-color: var(--sk-sage); background: rgba(135,169,107,0.08); }
/* TASK-9bfb94(resume r1, atom C2, 2026-07-19) — 문서+펜 아이콘(카드 아이콘 스트로크 계열
   재사용 · fill:none · stroke-linecap/linejoin:round). 텍스트 라인 높이에 맞춘 소형 규격
   (26px 카드 아이콘보다 작게 — 보조 버튼 급 유지). 신규 색 토큰 0(기존 sage-dark 재사용). */
.sk-goal-prep-btn__icon { flex: none; width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; fill: none; stroke: var(--sk-sage-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sk-stagefinder-progress { font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-sage-dark); margin: 0 0 var(--sk-sp-2); }
.sk-stagefinder-why { font-size: var(--sk-fs-body2); color: var(--sk-body); margin: -8px 0 var(--sk-sp-4); line-height: 1.6; }
.sk-option--unknown { border-style: dashed; color: var(--sk-muted); font-weight: 700; }
.sk-option--unknown:hover { border-color: var(--sk-sage-dark); color: var(--sk-sage-dark); }
.sk-stagefinder-opt__label { display: block; }
.sk-stagefinder-opt__marker { display: block; margin-top: 5px; font-size: var(--sk-fs-sm); font-weight: 400; color: var(--sk-muted); line-height: 1.55; }

/* 인자 체크 */
.sk-factor-sec { margin: 0 0 18px; }
.sk-factor-sec--special { background: #fff; border: 1px solid var(--sk-cream); border-radius: var(--sk-radius-inner); padding: 14px 16px; box-shadow: var(--sk-shadow-card); }
.sk-factor-sec__title { font-size: var(--sk-fs-body); font-weight: 900; margin: var(--sk-sp-1) 0 12px; }
.sk-factor-sec__title.is-mit { color: var(--sk-sage-dark); }
.sk-factor-sec__title.is-agg { color: var(--sk-rust); }
.sk-factor { padding: 12px 0; border-top: 1px solid rgba(0,40,92,0.06); }
.sk-factor:first-of-type { border-top: 0; }
.sk-factor__text { font-size: var(--sk-fs-body); color: var(--sk-ink); line-height: 1.6; margin-bottom: var(--sk-sp-2); }
.sk-factor__head { display: flex; align-items: flex-start; gap: var(--sk-sp-2); }
.sk-factor__head .sk-factor__text { flex: 1; }
/* 8차 피드백 ②(2026-07-13) — 일반양형인자 쉬운 설명 1줄(항상 표시 · 문안보다 옅게) */
.sk-factor__easy { font-size: var(--sk-fs-body2); color: var(--sk-muted); line-height: 1.55; margin: -4px 0 var(--sk-sp-2); }
/* 8차 피드백 ②(2026-07-13) — "?"가 흰 바탕 옅은 색이라 눈에 안 띈다는 피드백 → 세이지
   틴트 pill + 진한 글자 + 크기 확대(22→26px)로 가시성 강화(특별·일반 인자 공통). */
.sk-factor__help { position: relative; flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--sk-radius-pill); border: 1px solid var(--sk-sage); background: rgba(135,169,107,0.16); color: var(--sk-sage-dark); font-size: var(--sk-fs-body2); font-weight: 900; line-height: 1; cursor: pointer; box-shadow: 0 1px 2px rgba(0,40,92,0.06); transition: background .15s ease, color .15s ease, border-color .15s ease; }
/* TASK-7d94e2(atom1, 2026-07-19) — 26px 아이콘 시각 유지(위임 §2 atom1 명시) + 44px 히트영역만
   ::before 로 확장(26+9×2=44 · 좌측 텍스트 쪽으로 1px 미세 중첩은 텍스트가 비-클릭 요소라
   무해). */
.sk-factor__help::before { content: ''; position: absolute; inset: -9px; }
.sk-factor__help:hover { background: rgba(135,169,107,0.3); border-color: var(--sk-sage-dark); color: var(--sk-navy); }
.sk-factor__help[aria-expanded="true"] { background: var(--sk-navy); color: #fff; border-color: var(--sk-navy); }
.sk-factor__helppanel { background: rgba(0,40,92,0.04); border: 1px solid var(--sk-cream); border-radius: var(--sk-radius-inner); padding: 14px 16px; margin: 2px 0 10px; }
.sk-factor__helppanel[hidden] { display: none; }
.sk-factor__deflabel { display: inline-block; font-size: var(--sk-fs-sm); font-weight: 800; color: var(--sk-sage-dark); margin-bottom: 3px; }
.sk-factor__deftext { font-size: var(--sk-fs-body); color: var(--sk-body); margin: 0 0 10px; line-height: 1.8; white-space: pre-line; }
.sk-seg { display: inline-flex; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-pill); overflow: hidden; }
/* TASK-7d94e2(atom1, 2026-07-19) — 세로 패딩 7px→11px: 44px 터치 타깃 기준 미달(≈37.8px)
   해소(가로 14px 유지 — 이미 44px 이상). */
.sk-seg__btn { border: 0; background: #fff; padding: 11px 14px; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-muted); cursor: pointer; border-left: 1px solid rgba(0,40,92,0.1); }
.sk-seg__btn:first-child { border-left: 0; }
.sk-seg__btn.is-active { background: var(--sk-navy); color: #fff; }
.sk-seg__btn:focus-visible { outline: var(--sk-focus); outline-offset: -2px; }
.sk-general { margin: 6px 0 18px; }
.sk-general > summary { cursor: pointer; font-size: var(--sk-fs-body); font-weight: 800; color: var(--sk-navy); padding: 12px 0; }
.sk-general__desc { font-size: var(--sk-fs-body); color: var(--sk-body); margin: var(--sk-sp-1) 0 14px; line-height: 1.8; padding: 0 2px; }
/* 일반양형인자 아코디언 내부 인자 섹션 — 상하 여백으로 항목군 구분 명확화(⑤). */
/* 4차 실측 지시 ⑤(2026-07-13) — 일반양형인자 섹션도 특별(.sk-factor-sec--special)과 동일한
   흰 카드 UI 로 통일 */
.sk-general .sk-factor-sec { margin: 0 0 14px; background: #fff; border: 1px solid var(--sk-cream); border-radius: var(--sk-radius-inner); padding: 14px 16px; box-shadow: var(--sk-shadow-card); }
.sk-factor-go { display: block; width: 100%; margin-top: var(--sk-sp-2); }

/* 용어 풀이(glossary) — 구조 용어 아코디언 + 인자 도움말 패널 공통 */
.sk-gloss { margin: var(--sk-sp-1) 0 var(--sk-sp-4); border: 1px solid var(--sk-cream); border-radius: var(--sk-radius-inner); background: #fff; }
.sk-gloss__summary { cursor: pointer; font-size: var(--sk-fs-body); font-weight: 800; color: var(--sk-navy); padding: 13px 16px; }
.sk-gloss__summary:hover { color: var(--sk-navy-dark); }
.sk-gloss__summary:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); border-radius: var(--sk-radius-inner); }
.sk-gloss__body { padding: 2px 18px 16px; }
/* 항목 사이 구분선 + 안쪽 여백으로 나열 텍스트를 분리(⑤). */
.sk-gloss__item { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--sk-cream); }
.sk-gloss__item:first-child { padding-top: var(--sk-sp-1); border-top: 0; }
.sk-gloss__term { display: block; font-size: var(--sk-fs-body); font-weight: 800; color: var(--sk-sage-dark); margin-bottom: var(--sk-sp-1); }
.sk-gloss__plain { display: block; font-size: var(--sk-fs-body); color: var(--sk-body); line-height: 1.85; }
/* TASK-8f1425-v2(atom3, 2026-07-19) — easy_terms 조문 ref 소형 배지(신규 색 토큰 0 —
   .sk-topbar__badge 와 동일 sage 계열 토큰 재사용 · easy_terms 히트에만 부착). */
.sk-gloss__ref { display: inline-block; margin-left: var(--sk-sp-2); font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-sage-dark); background: rgba(135,169,107,0.14); border: 1px solid rgba(135,169,107,0.35); padding: 2px 10px; border-radius: var(--sk-radius-pill); }
.sk-gloss__disclaimer { font-size: var(--sk-fs-notice); color: var(--sk-muted); line-height: 1.75; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--sk-cream); }

/* 인자표 조인 실패 / 원용 안내 (인자 단계) */
.sk-factor-error { font-size: var(--sk-fs-body2); color: var(--sk-rust); background: rgba(212,168,83,0.12); border: 1px solid var(--sk-gold); border-radius: var(--sk-radius-inner); padding: 14px 16px; margin: var(--sk-sp-1) 0 var(--sk-sp-4); line-height: 1.7; }
.sk-ref-note { font-size: var(--sk-fs-body2); color: var(--sk-body); background: rgba(0,40,92,0.05); border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-inner); padding: 14px 16px; margin: var(--sk-sp-1) 0 var(--sk-sp-4); line-height: 1.75; }

/* TASK-2f9c14 atom E(#9) — 특별→일반 인자 절차도. 가로(데스크톱)→세로(모바일)로 화살표
   방향만 반응형 전환(순수 CSS · 외부 lib 0 · CI 토큰만). */
.sk-procedure { margin: 0 0 var(--sk-sp-4); }
.sk-procedure__flow { display: flex; align-items: stretch; gap: var(--sk-sp-3); }
.sk-procedure__step { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--sk-radius-inner); border: 1px solid var(--sk-line-strong); background: #fff; }
.sk-procedure__num { font-size: var(--sk-fs-sm); font-weight: 800; color: var(--sk-sage-dark); }
.sk-procedure__label { font-size: var(--sk-fs-body); font-weight: 900; color: var(--sk-navy); }
.sk-procedure__desc { font-size: var(--sk-fs-body2); color: var(--sk-body); line-height: 1.6; }
.sk-procedure__arrow { align-self: center; font-size: 1.3rem; font-weight: 900; color: var(--sk-sage-dark); flex-shrink: 0; }
.sk-procedure__note { font-size: var(--sk-fs-sm); color: var(--sk-muted); margin: var(--sk-sp-2) 0 0; line-height: 1.7; }
@media (max-width: 560px) {
  .sk-procedure__flow { flex-direction: column; }
  .sk-procedure__arrow { align-self: center; transform: rotate(90deg); }
}

/* 원용 원문 카드 (결과) — 원문 verbatim, 줄바꿈 보존. 본문 크기·넉넉한 행간으로 문단 단위 가독(⑤). */
.sk-ref-text { font-size: var(--sk-fs-body); color: var(--sk-ink); line-height: 1.9; margin: 12px 0 0; padding: 14px 16px; background: rgba(0,40,92,0.03); border: 1px solid var(--sk-cream); border-radius: var(--sk-radius-inner); white-space: pre-wrap; word-break: keep-all; overflow-wrap: break-word; }

/* 결과 대시보드 카드 — 테두리·그림자·모서리 한 규칙으로 통일. */
.sk-card { background: #fff; border: 1px solid var(--sk-cream); border-radius: var(--sk-radius-card); box-shadow: var(--sk-shadow-card); padding: var(--sk-sp-5); margin-bottom: var(--sk-sp-4); }
.sk-card__title { font-size: var(--sk-fs-head); font-weight: 900; margin: 0 0 14px; color: var(--sk-navy); }

/* atom P12-7 — 결과 화면 두 번째 그라데이션 밴드 위치(핵심 요약 카드 상단 · 신규 색 토큰
   0 · --sk-cream 을 흰 배경과 color-mix 로만 혼합). */
.sk-summary { background-image: linear-gradient(165deg, color-mix(in srgb, var(--sk-cream) 55%, #fff) 0%, #fff 55%); }

.sk-summary__grid { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 16px; margin: 0; }
.sk-summary__grid dt { font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-muted); }
.sk-summary__grid dd { font-size: var(--sk-fs-body2); color: var(--sk-ink); margin: 0; }
.sk-summary__gap-title { font-size: var(--sk-fs-sm); font-weight: 800; color: var(--sk-sage-dark); margin: 16px 0 6px; }
.sk-summary__gap { margin: 0; padding-left: 18px; font-size: var(--sk-fs-body2); color: var(--sk-body); }
.sk-summary__gap li { margin: 3px 0; }

/* TASK-2f9c14 atom F(#15) — 핵심 요약 리드·보강 줄. */
.sk-summary__lead { font-size: var(--sk-fs-body2); font-weight: 700; color: var(--sk-navy); margin: 0 0 var(--sk-sp-3); line-height: 1.6; }

/* atom F(#10) — 결과 최상단 배지형 고지(핵심 요약 위 · 항상 노출). */
.sk-badge-notice { display: inline-block; font-size: var(--sk-fs-sm); font-weight: 800; color: var(--sk-navy); background: rgba(212,168,83,0.18); border: 1px solid rgba(212,168,83,0.4); padding: 5px 14px; border-radius: var(--sk-radius-pill); margin: 0 0 var(--sk-sp-3); }

/* atom F(#10) — 도표 직하단 상시 노출 고지 박스(접이식 금지). */
.sk-range-notice { font-size: var(--sk-fs-body2); color: var(--sk-body); background: rgba(0,40,92,0.05); border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-inner); padding: 12px 16px; margin: 10px 0 var(--sk-sp-4); line-height: 1.7; }

/* atom F(victim 결과 렌더) — 피해자 안내 블록(2층 대체 · .sk-items 와 동일 구분선 스타일). */
.sk-victim-guide__list { list-style: none; margin: 0; padding: 0; }
.sk-victim-guide__list li { padding: 12px 0; border-top: 1px solid rgba(0,40,92,0.06); }
.sk-victim-guide__list li:first-child { border-top: 0; }
.sk-victim-guide__item { font-size: var(--sk-fs-body); color: var(--sk-ink); line-height: 1.8; margin: 0; }

/* 1층 — 양형기준 · 표는 좁은 화면에서 래퍼가 가로 스크롤(페이지는 밀리지 않음). */
.sk-layer1__type { font-size: var(--sk-fs-body); font-weight: 800; color: var(--sk-navy); margin: 0 0 12px; }
.sk-ranges-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 14px; }
/* 4차 실측 지시 ⑦(2026-07-13) — 감경/기본/가중 3칸 좌우 폭 동일(전 표 공통 · table-layout
   fixed). 긴 값(벌금 병기)은 칸 안에서 줄바꿈된다. */
.sk-ranges { width: 100%; min-width: 320px; border-collapse: collapse; table-layout: fixed; }
.sk-ranges th, .sk-ranges td { width: 33.33%; word-break: keep-all; overflow-wrap: break-word; }
.sk-ranges th, .sk-ranges td { border: 1px solid var(--sk-cream); padding: 10px 8px; text-align: center; font-size: var(--sk-fs-body2); vertical-align: top; }
.sk-ranges th { background: var(--sk-bg); font-weight: 800; color: var(--sk-muted); }
.sk-ranges td { color: var(--sk-ink); }
.sk-ranges__line { line-height: 1.5; }
/* 권고 영역 열 강조 — 색만이 아니라 굵기 + 테두리(inset ring)로도 구분(색각 이상 고려). */
.sk-ranges .is-region { color: var(--sk-navy); font-weight: 800; }
.sk-ranges th.is-region { font-weight: 900; }
/* 5차 실측 지시 ① — 표 강조도 열별 색 분리(감경=sage · 기본=navy · 가중=rust) */
.sk-ranges .sk-ranges__cell--mitigated.is-region { background: rgba(135,169,107,0.22); box-shadow: inset 0 0 0 2px var(--sk-sage); }
.sk-ranges th.sk-ranges__cell--mitigated.is-region { color: var(--sk-sage-dark); }
.sk-ranges .sk-ranges__cell--basic.is-region { background: rgba(0,40,92,0.10); box-shadow: inset 0 0 0 2px var(--sk-navy); }
.sk-ranges th.sk-ranges__cell--basic.is-region { color: var(--sk-navy); }
.sk-ranges .sk-ranges__cell--aggravated.is-region { background: rgba(138,90,30,0.14); box-shadow: inset 0 0 0 2px var(--sk-rust); }
.sk-ranges th.sk-ranges__cell--aggravated.is-region { color: var(--sk-rust); }

/* TASK-kit-p6 — 형량범위 시각 도표(축/카드 공용 배색). 감경=sage · 기본=navy 중립 ·
   가중=gold — 기존 .sk-region--* 팔레트와 동일 색 언어(색+굵기+테두리 3중 강조). */
.sk-range-diagram { margin: 0 0 var(--sk-sp-4); }
.sk-range-diagram__lead { font-size: var(--sk-fs-sm); color: var(--sk-muted); margin: 0 0 10px; line-height: 1.6; }

.sk-range-axis__track { position: relative; height: 72px; background: var(--sk-bg); border: 1px solid var(--sk-cream); border-radius: var(--sk-radius-inner); overflow: visible; }
/* atom P12-2 — 최초 렌더 draw-in: 세그먼트가 0→실폭(inline width)으로 220ms 성장 · nth-child
   로 60ms 간격 stagger. backwards 로 delay 구간 동안 width:0 유지(순간 풀폭 플래시 방지). */
@keyframes skGrowWidth { from { width: 0; } }
.sk-range-axis__seg { position: absolute; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; opacity: 0.55; transition: opacity .15s ease; animation: skGrowWidth 220ms ease-out backwards; }
.sk-range-axis__seg:nth-child(1) { animation-delay: 0ms; }
.sk-range-axis__seg:nth-child(2) { animation-delay: 60ms; }
.sk-range-axis__seg:nth-child(3) { animation-delay: 120ms; }
/* 5차 실측 지시 ①(2026-07-13) — 감경(sage 초록) vs 가중 색차 불명확 → 가중 = gold(옅은 황금)
   에서 rust(짙은 앰버 · 인자 제목 .is-agg 와 동일 색 언어)로 통일해 뚜렷이 분리. */
.sk-range-axis__seg--mitigated { background: var(--sk-sage); top: 6px; bottom: 44px; }
.sk-range-axis__seg--basic { background: var(--sk-navy); top: 26px; bottom: 26px; }
.sk-range-axis__seg--aggravated { background: var(--sk-rust); top: 44px; bottom: 6px; }
.sk-range-axis__seg.is-region { opacity: 1; box-shadow: 0 0 0 2px var(--sk-navy); z-index: 2; }
.sk-range-axis__seg-label { font-size: 12.5px; font-weight: 800; color: #fff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.sk-range-axis.is-undetermined .sk-range-axis__seg { opacity: 0.4; box-shadow: none; }

.sk-range-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sk-sp-3); }
/* atom P12-2 — 카드 폴백 fade-stagger(축 도표와 동일 220ms/60ms 리듬). */
@keyframes skCardFadeUp { from { opacity: 0; transform: translateY(8px); } }
.sk-range-card { border-radius: var(--sk-radius-inner); padding: 12px 14px; border: 1px solid var(--sk-cream); background: var(--sk-bg); animation: skCardFadeUp 220ms ease-out backwards; }
.sk-range-cards .sk-range-card:nth-child(1) { animation-delay: 0ms; }
.sk-range-cards .sk-range-card:nth-child(2) { animation-delay: 60ms; }
.sk-range-cards .sk-range-card:nth-child(3) { animation-delay: 120ms; }
.sk-range-card--mitigated { border-color: rgba(135,169,107,0.55); }
.sk-range-card--aggravated { border-color: rgba(138,90,30,0.55); }
.sk-range-card.is-region { box-shadow: inset 0 0 0 2px var(--sk-navy); font-weight: 800; }
.sk-range-card--mitigated.is-region { background: rgba(135,169,107,0.22); box-shadow: inset 0 0 0 2px var(--sk-sage); }
.sk-range-card--aggravated.is-region { background: rgba(138,90,30,0.16); box-shadow: inset 0 0 0 2px var(--sk-rust); }
.sk-range-card--basic.is-region { background: rgba(0,40,92,0.08); }
.sk-range-cards.is-undetermined .sk-range-card.is-region { box-shadow: none; background: var(--sk-bg); font-weight: 400; }
.sk-range-card__label { display: block; font-size: var(--sk-fs-sm); font-weight: 800; color: var(--sk-muted); margin: 0 0 4px; }
.sk-range-card__value { display: flex; align-items: baseline; gap: 4px; font-size: var(--sk-fs-body2); color: var(--sk-ink); font-weight: 700; }
.sk-range-card__arrow { color: var(--sk-navy); font-weight: 900; }
.sk-range-card__badge { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--sk-rust); background: rgba(138,90,30,0.12); padding: 2px 8px; border-radius: var(--sk-radius-pill); }

/* 인라인 인자 조정(atom 2) — 기존 인자 체크 단계(.sk-factor-sec/.sk-seg)와 동일 마크업 재사용. */
.sk-inline-adjust { margin: var(--sk-sp-5) 0 0; padding-top: var(--sk-sp-4); border-top: 1px dashed var(--sk-line-strong); }
.sk-inline-adjust__title { font-size: var(--sk-fs-body2); font-weight: 800; color: var(--sk-navy); margin: 0 0 10px; }

@media print {
  .sk-range-axis__seg-label { text-shadow: none; }
  .sk-range-card__badge { background: transparent; border: 1px solid var(--sk-rust); }
}

/* atom P12-3 — 실시간 재계산 반응: 값/영역이 실제로 바뀐 경우에만 JS 가 붙이는 1회성 pulse
   (자동 반복 없음 · animation-iteration-count 기본값 1). */
@keyframes skRecalcPulse { 0% { opacity: 0; transform: scale(0.97); } 60% { opacity: 1; transform: scale(1.015); } 100% { opacity: 1; transform: scale(1); } }
.sk-recalc-pulse { animation: skRecalcPulse 220ms ease-out; }

.sk-layer1__count { font-size: var(--sk-fs-body2); font-weight: 800; color: var(--sk-navy); margin: 0 0 10px; }
.sk-layer1__count .sk-count { display: inline-block; min-width: 1ch; color: var(--sk-sage-dark); }
.sk-region { border-radius: var(--sk-radius-inner); padding: 12px 16px; }
.sk-region--mitigated { background: rgba(135,169,107,0.20); border: 1px solid rgba(135,169,107,0.6); }
.sk-region--aggravated { background: rgba(138,90,30,0.13); border: 1px solid rgba(138,90,30,0.55); }
.sk-region--undetermined { background: rgba(0,40,92,0.05); border: 1px solid var(--sk-line-strong); }
.sk-region--basic { background: var(--sk-bg); border: 1px solid var(--sk-cream); }
.sk-region__head { font-size: var(--sk-fs-body); font-weight: 900; margin: 0 0 6px; color: var(--sk-navy); }
.sk-region__note { font-size: var(--sk-fs-body2); color: var(--sk-body); margin: 0; line-height: 1.75; }
.sk-rules { margin-top: 14px; }
.sk-rules > summary { cursor: pointer; font-size: var(--sk-fs-body2); font-weight: 700; color: var(--sk-navy); }
.sk-rules > summary:hover { color: var(--sk-navy-dark); }
.sk-rules > summary:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); border-radius: var(--sk-sp-2); }
/* 평가원칙 원문 — 본문 크기 + 문단 간 여백 + 안쪽 여백으로 문단 단위 가독(⑤). */
.sk-rules__p { font-size: var(--sk-fs-body); color: var(--sk-body); line-height: 1.85; margin: 14px 0 0; padding: 0 2px 0 4px; white-space: pre-wrap; }
/* 9차 A3 — 평가원칙 소절 헤딩('01 형량범위의 결정방법') + 특칙 맥락 라벨 */
.sk-rules__h { font-size: var(--sk-fs-body); color: var(--sk-navy); font-weight: 700; margin: 18px 0 0; padding: 0 2px 0 4px; }
.sk-rules__ctx { font-size: var(--sk-fs-caption, 12px); color: var(--sk-muted); margin: 14px 0 -10px; padding: 0 2px 0 4px; }

/* 9차 지시 #1 — 감경(−)/가중(＋) 방향 표시(칩 + 카운트 마커). 기존 sage/rust 팔레트 재사용. */
.sk-polarity-chip { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: var(--sk-fs-sm); font-weight: 700; vertical-align: middle; }
.sk-polarity-chip--mit { background: color-mix(in srgb, var(--sk-sage) 16%, #fff); color: var(--sk-sage-dark); border: 1px solid color-mix(in srgb, var(--sk-sage) 45%, transparent); }
.sk-polarity-chip--agg { background: color-mix(in srgb, var(--sk-rust) 12%, #fff); color: var(--sk-rust); border: 1px solid color-mix(in srgb, var(--sk-rust) 40%, transparent); }
.sk-polarity { display: inline-block; min-width: 1.1em; text-align: center; border-radius: 4px; font-weight: 800; }
.sk-polarity--mit { color: var(--sk-sage-dark); background: color-mix(in srgb, var(--sk-sage) 16%, #fff); }
.sk-polarity--agg { color: var(--sk-rust); background: color-mix(in srgb, var(--sk-rust) 12%, #fff); }

/* 게이지 */
.sk-gauge { margin: 0 0 var(--sk-sp-4); }
.sk-gauge__label { font-size: var(--sk-fs-body2); font-weight: 700; color: var(--sk-sage-dark); margin: 0 0 6px; }
.sk-gauge__track { height: 8px; border-radius: var(--sk-radius-pill); background: var(--sk-cream); overflow: hidden; }
.sk-gauge__fill { height: 100%; background: var(--sk-sage); border-radius: var(--sk-radius-pill); transition: width .3s ease; }
.sk-layer2__sub { font-size: var(--sk-fs-body); font-weight: 800; color: var(--sk-navy); margin: 18px 0 10px; }

/* 블록 카드 (준비 층) */
.sk-block { background: var(--sk-bg); border: 1px solid var(--sk-cream); border-radius: var(--sk-radius-inner); padding: var(--sk-sp-4) 18px; margin-bottom: 12px; }
.sk-block--buildable { border-color: var(--sk-gold); background: rgba(212,168,83,0.06); }
.sk-block__title { font-size: var(--sk-fs-head); font-weight: 900; margin: 0 0 6px; display: inline-block; }
.sk-lead, .sk-info, .sk-intro-note { font-size: var(--sk-fs-body2); color: var(--sk-body); line-height: 1.8; margin: var(--sk-sp-1) 0 12px; }
.sk-criteria { background: rgba(0,40,92,0.04); border-radius: var(--sk-sp-2); padding: 10px 14px; margin: 0 0 12px; }
.sk-criteria__title { font-size: var(--sk-fs-sm); font-weight: 800; color: var(--sk-navy); margin: 0 0 6px; }
.sk-criteria ol { margin: 0; padding-left: 18px; font-size: var(--sk-fs-sm); color: var(--sk-body); }
.sk-items { list-style: none; margin: 0; padding: 0; }
.sk-items li { padding: 11px 0; border-top: 1px solid rgba(0,40,92,0.06); }
.sk-items li:first-child { border-top: 0; }
.sk-items label { display: flex; align-items: flex-start; gap: 10px; font-size: var(--sk-fs-body); color: var(--sk-ink); line-height: 1.75; cursor: pointer; }
.sk-items input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--sk-navy); }
.sk-item-note { font-size: var(--sk-fs-sm); color: var(--sk-muted); margin: var(--sk-sp-1) 0 0 28px; }
.sk-caution { font-size: var(--sk-fs-notice); color: var(--sk-rust); background: rgba(212,168,83,0.12); border-left: 3px solid var(--sk-gold); border-radius: 6px; padding: var(--sk-sp-2) 12px; margin: 6px 0 0 28px; }
.sk-block-caution { font-size: var(--sk-fs-notice); color: var(--sk-rust); margin: 10px 0 0; }
.sk-footnotes { margin-top: 12px; }
.sk-footnotes > summary { cursor: pointer; font-size: var(--sk-fs-body2); font-weight: 700; color: var(--sk-navy); }
.sk-footnotes > summary:hover { color: var(--sk-navy-dark); }
.sk-footnotes > summary:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); border-radius: var(--sk-sp-2); }
.sk-footnotes ol { margin: 12px 0 0; padding-left: 18px; }
.sk-footnotes li { margin-bottom: 14px; }
.sk-fn-quote { font-size: var(--sk-fs-body2); color: var(--sk-body); line-height: 1.8; margin: 0 0 4px; }
.sk-fn-source { font-size: var(--sk-fs-notice); color: var(--sk-muted); margin: 0; }

.sk-badge { display: inline-block; font-size: var(--sk-fs-sm); font-weight: 800; padding: 3px 10px; border-radius: var(--sk-radius-pill); margin-left: var(--sk-sp-2); vertical-align: middle; }
.sk-badge--top { background: var(--sk-gold); color: #4A360F; }
.sk-badge--high { background: rgba(135,169,107,0.18); color: var(--sk-sage-dark); }
.sk-badge--build { background: rgba(212,168,83,0.18); color: #4A360F; }
.sk-badge--verify { background: rgba(0,40,92,0.08); color: var(--sk-navy); margin-left: 6px; }

/* 3층 — 우선순위 */
.sk-priority { margin: 0; padding-left: 20px; }
.sk-priority li { margin-bottom: 14px; }
.sk-priority__title { font-size: var(--sk-fs-body); font-weight: 800; color: var(--sk-navy); }
.sk-priority__lead { font-size: var(--sk-fs-body2); color: var(--sk-body); margin: var(--sk-sp-1) 0 0; line-height: 1.7; }
.sk-priority__timing { font-size: var(--sk-fs-body2); color: var(--sk-navy); background: rgba(212,168,83,0.1); border-radius: var(--sk-radius-inner); padding: 10px 14px; margin: var(--sk-sp-2) 0 0; }

/* 반성문·탄원서 준비 가이드(TASK-1c9a3c) — 경로 세그먼트 토글(.sk-result-tab 필 스타일
   재사용) + 일반 항목 목록(피해야 할 것·한계 고지). 신규 CSS 최소화(사양 §8 프로히비션) —
   카드·버튼·인용문 등 나머지는 전부 기존 .sk-card/.sk-btn/.sk-options/.sk-option/.sk-criteria/
   .sk-item-note/.sk-fn-quote/.sk-ref-text/.sk-procmap-focus__navbtn 재사용(신규 CSS 0). */
.sk-prep-segbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--sk-sp-4); }
/* OP-1 정정(TASK-1c9a3c) — .sk-result-tab 기본 스타일은 다크 탭바(--sk-navy) 전제의 흰 글자라
   밝은 배경의 본 세그바에서는 비활성 버튼이 사실상 보이지 않음(발견성 결함). 세그바 한정으로
   비활성 상태를 네이비 윤곽 필로 재정의(.is-active 골드 필은 그대로). */
.sk-prep-segbar .sk-result-tab:not(.is-active) { color: var(--sk-navy); background: transparent; border-color: color-mix(in srgb, var(--sk-navy) 45%, transparent); }
.sk-prep-segbar .sk-result-tab:not(.is-active):hover { color: var(--sk-navy-dark); background: rgba(212,168,83,0.15); }
.sk-prep-list { margin: 0; padding-left: 20px; }
.sk-prep-list li { margin-bottom: 10px; font-size: var(--sk-fs-body2); color: var(--sk-body); line-height: 1.7; }
/* TASK-f6a1c8(atom2, 2026-07-19) — 준비 가이드 3줄 요약(위임 §2 atom2). 신규 색 토큰 0(기존
   --sk-cream/--sk-body/--sk-radius-inner 재사용 — .sk-prep-copy-privacy-note 와 동일 계열
   은은한 박스) · who_purpose 바로 위(가장 먼저) 배치는 app.js renderPrepView 에서 처리. */
.sk-prep-summary { margin: 0 0 var(--sk-sp-4); padding: 14px 16px 14px 34px; border-radius: var(--sk-radius-inner); background: var(--sk-cream); }
.sk-prep-summary li { font-size: var(--sk-fs-body2); color: var(--sk-body); line-height: 1.7; margin-bottom: 8px; }
.sk-prep-summary li:last-child { margin-bottom: 0; }
/* TASK-7c9aa9(§C-3) — 체크 토글(자기점검) 방어 보강: 색상 외 상태 표현으로 ✓ 아이콘 병행
   (일부 환경 흰-흰 대비 저하 방어 · 코덱스 보고서 지적 — 로컬 재현 0이나 방어 유지). 자기점검
   체크리스트(.sk-prep-checklist)에만 스코프 — 위저드 선택형 .sk-option(다른 화면)은 무영향. */
.sk-prep-checklist .sk-option.is-active::before { content: "✓ "; font-weight: 900; }
/* TASK-7c9aa9 resume r1(2026-07-19) — 대표님 실측 지시: 복사 버튼 2종(빈 구조·프롬프트)이 잘
   안 보임 → 기존 브랜드 강조 버튼(.sk-btn--gold · '양형 노트로 준비 시작'과 동일 톤 · 신규
   색 토큰 0)으로 승격 + 복사 아이콘(⧉ 겹친 사각형) 병행. 아이콘은 ::before 의사요소로 처리 —
   bindPrepCopyButton() 의 textContent 스왑('복사됨' ↔ 원문)이 실 DOM 자식만 건드리므로
   ::before 는 상태 전환과 무관하게 항상 유지된다(자식 SVG 방식이었다면 textContent 스왑이
   아이콘을 지워버렸을 것 — 의도적 선택). 크기/터치 영역은 .sk-btn 기존 padding 유지(축소 0). */
.sk-prep-copy-btn::before { content: "⧉"; margin-right: 6px; font-weight: 900; }
/* TASK-7d94e2(atom2, 2026-07-19) — 복사 실패 시 시각 안내(버튼 바로 아래 · 기존 aria-live
   #sk-prep-live 는 스크린리더 전용이라 시각 사용자 안내가 없었음). 신규 색 토큰 0(기존
   --sk-rust 경고 톤 재사용 — .sk-factor-error 와 동일 계열). */
.sk-prep-copy-fail { margin: 6px 0 0; font-size: var(--sk-fs-sm); color: var(--sk-rust); }
/* TASK-e4a2d9(atom1, 2026-07-19) — 프롬프트 복사 성공 직후 개인정보 재경고(위임 §2 atom1).
   신규 색 토큰 0(기존 --sk-cream/--sk-body/--sk-navy 재사용) — 실패 안내(.sk-prep-copy-fail)와
   달리 경고 톤이 아니라 사실 확인이므로 크림 배경의 안내 박스로 구분. */
.sk-prep-copy-privacy-note { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--sk-radius-inner); background: var(--sk-cream); font-size: var(--sk-fs-sm); color: var(--sk-body); }
.sk-prep-copy-privacy-note a { color: var(--sk-navy); font-weight: 700; text-decoration: underline; }
/* OP-1 정정 resume r1(C1, 2026-07-19) — 대표님 판정(카드 일렬 나열 가독성 저하)으로 ②~⑥
   섹션을 네이티브 <details class="sk-prep-toggle"> 아코디언으로 전환(JS 상태 0). summary
   타이포는 기존 .sk-card__title 토큰(--sk-fs-head/900/--sk-navy) 값을 그대로 재사용하되
   margin 은 열림 상태에서만 부여(닫힘 상태 여백 낭비 방지) — 화살표는 기존 상세정보 아코디언
   언어(.sk-gloss__summary 등 · 568행 부근)와 동일 ▸/▾ 메커니즘(신규 색·트랜지션 0 · 별도
   selector 로 자기완결 처리해 기존 규칙군은 무변경). */
.sk-prep-toggle > summary { cursor: pointer; list-style: none; font-size: var(--sk-fs-head); font-weight: 900; color: var(--sk-navy); }
.sk-prep-toggle > summary::-webkit-details-marker { display: none; }
.sk-prep-toggle > summary::before { content: "▸"; display: inline-block; margin-right: var(--sk-sp-2); color: var(--sk-sage-dark); font-size: var(--sk-fs-sm); transition: transform .15s ease; }
.sk-prep-toggle[open] > summary::before { transform: rotate(90deg); }
.sk-prep-toggle[open] > summary { margin: 0 0 14px; }
.sk-prep-toggle > summary:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); border-radius: var(--sk-radius-inner); }
@media (prefers-reduced-motion: reduce) { .sk-prep-toggle > summary::before { transition: none; } }

/* CTA */
.sk-cta { border-color: var(--sk-line-strong); }
/* TASK-9bfb94(resume r1, atom C1, 2026-07-19) — #sk-cta-sec 는 app.js 안 t.scrollIntoView()
   대상(voyage 훅 버튼 클릭 시). sticky topbar(--sk-topbar-h · resume r2 실측 72px)가 상단을
   가리므로 네이티브 scroll-margin-top 으로 여유를 준다(별도 JS 계산 불요 — scrollIntoView
   가 자동 반영). */
/* UX9-ST(2026-08-30 대표님 지적 ④) — 위 r1 주석의 "topbar 가 상단을 가리므로" 는 절반이었다.
   결과·노트 화면에서는 topbar 밑에 탭바(.sk-result-tabbar-wrap · sticky)가 한 겹 더 붙어
   고정 스택 바닥이 133.6px 다(tokens.css --sk-sticky-stack-h 주석에 5뷰포트 실측 기록).
   --sk-topbar-h(72px)만 쓰면 62px 모자라 제목이 탭바 뒤로 들어간다.
   [구: 이 규칙은 --sk-topbar-h 를 썼다 — SUPERSEDED 2026-08-30. 구 리터럴을 주석에 그대로
    두면 dev-smoke V29-④d 의 「구 규칙 부재」 네거티브가 자기 주석에 걸린다 — 산문으로 쓴다] */
#sk-cta-sec { scroll-margin-top: var(--sk-sticky-stack-h); }
/* 소년·학폭 변호노트 준비자료 접힘 카드 = jvJumpToPrepBlock() 의 scrollIntoView({block:'start'})
   대상(app.js). 이 점프는 요약 탭 준비물 그리드 칸 클릭에서 일어나며, 그 시점 탭바는 이미
   화면에 붙어 있다 — 실측에서 카드 제목 「보호자 의견서」가 스택 121px 아래로 완전히 묻혔다.
   학폭(sk-hpacc-)은 현재 점프 호출부가 없지만 같은 렌더러 계열이 만드는 같은 성격의 대상이라
   함께 건다(scroll-margin-top 은 스크롤 대상이 되기 전까지 아무 효과가 없어 위험 0). */
[id^="sk-jvacc-"], [id^="sk-hpacc-"] { scroll-margin-top: var(--sk-sticky-stack-h); }
.sk-cta__head { font-size: var(--sk-fs-head); font-weight: 900; margin: 0 0 var(--sk-sp-2); color: var(--sk-navy); }
.sk-cta__lead { font-size: var(--sk-fs-body); color: var(--sk-body); margin: 0 0 18px; }
.sk-cta__core h3, .sk-cta__pers h3 { font-size: var(--sk-fs-head); font-weight: 900; color: var(--sk-navy); margin: 18px 0 var(--sk-sp-2); }
.sk-cta__point { font-size: var(--sk-fs-body2); color: var(--sk-body); line-height: 1.8; margin: 0 0 var(--sk-sp-2); }
.sk-cta__pull { font-size: var(--sk-fs-body); font-weight: 700; color: var(--sk-navy); border-left: 3px solid var(--sk-sage); background: rgba(135,169,107,0.08); margin: 14px 0; padding: 12px 16px; border-radius: 0 var(--sk-radius-inner) var(--sk-radius-inner) 0; }
.sk-cta__note { font-size: var(--sk-fs-sm); color: var(--sk-muted); margin: 0; line-height: 1.7; }
.sk-cta__pers { border-top: 1px solid var(--sk-cream); padding-top: var(--sk-sp-1); }
.sk-cta__unknown { font-size: var(--sk-fs-body2); font-weight: 700; color: var(--sk-navy); background: rgba(0,40,92,0.05); border-radius: var(--sk-radius-inner); padding: 10px 14px; margin: 0 0 var(--sk-sp-2); }
.sk-cta-channels { display: grid; gap: var(--sk-sp-3); margin: 18px 0 0; }
.sk-cta-channel { display: block; text-align: center; padding: 14px 18px; border-radius: var(--sk-radius-inner); border: 1px solid var(--sk-line-strong); background: #fff; font-weight: 800; color: var(--sk-navy); font-size: var(--sk-fs-body); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.sk-cta-channel:hover { border-color: var(--sk-sage); }
.sk-cta-channel--primary { background: var(--sk-navy); color: #fff; border-color: var(--sk-navy); margin-top: 18px; }
.sk-cta-channel--primary:hover { background: var(--sk-navy-dark); border-color: var(--sk-navy-dark); }
.sk-cta-channel:disabled { opacity: 0.5; cursor: not-allowed; }
.sk-cta-channel:disabled:hover { border-color: var(--sk-line-strong); }
/* TASK-7c9aa9(§A, 2026-07-19) — CTA full 재설계: 핵심 채널 3종 1행(compact 규격 재사용 ·
   신규 채널 스타일 0) + 나머지 채널 "다른 상담 방법" 접이식(기본 접힘). 아이콘 1행은 기존
   3열 그리드 패턴(.sk-procmap-rolecta__channels/.sk-easyhelp-bridge__channels 와 동일 값)을
   컨텍스트별 자기완결로 반복 — 신규 색 토큰 0. 접이식 화살표는 .sk-prep-toggle 과 동일
   ▸/▾ 메커니즘을 별도 selector 로 자기완결(기존 규칙군 무변경) · 크기만 본문2/700 로 더
   가볍게(주 섹션 헤딩이 아닌 CTA 하위 링크이므로 — .sk-rules 톤과 동일 위계). */
.sk-cta-full-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sk-cta-more { margin: var(--sk-sp-3) 0 0; }
.sk-cta-more > summary { cursor: pointer; list-style: none; font-size: var(--sk-fs-body2); font-weight: 700; color: var(--sk-navy); }
.sk-cta-more > summary::-webkit-details-marker { display: none; }
.sk-cta-more > summary:hover { color: var(--sk-navy-dark); }
.sk-cta-more > summary::before { content: "▸"; display: inline-block; margin-right: var(--sk-sp-2); color: var(--sk-sage-dark); font-size: var(--sk-fs-sm); transition: transform .15s ease; }
.sk-cta-more[open] > summary::before { transform: rotate(90deg); }
.sk-cta-more[open] > summary { margin: 0 0 10px; }
.sk-cta-more > summary:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); border-radius: var(--sk-sp-2); }
@media (prefers-reduced-motion: reduce) { .sk-cta-more > summary::before { transition: none; } }
/* TASK-48775f(소단위a, 2026-07-18) — .sk-cta__bridge 규칙 제거(렌더 지점 삭제로 orphan 발생 ·
   본인 변경이 만든 orphan만 정리 · rule 14 P3). */
.sk-cta__slogan { font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-sage-dark); text-align: center; margin: 14px 0 0; }

/* TASK-8f1425-v2(atom2, 2026-07-19) — 쉬운말 사전 하단 고정 "이중 브리지" 블록(신규 색 토큰
   0 — .sk-procmap-rolecta/.sk-cta-channel* 와 동일 토큰 재사용). 위 .sk-cta__bridge(제거된
   구 슬로건 다리 개념)와는 무관한 별개 신규 클래스 — 명칭 유사성 혼동 주의 주석. */
.sk-easyhelp-bridge { background: #fff; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-inner); padding: 16px; margin: var(--sk-sp-4) 0 0; }
.sk-easyhelp-bridge__lead { font-size: var(--sk-fs-body2); font-weight: 700; color: var(--sk-navy); margin: 0 0 var(--sk-sp-3); line-height: 1.6; }
.sk-easyhelp-bridge__primary { display: grid; gap: var(--sk-sp-3); }
.sk-easyhelp-bridge__btn { display: block; width: 100%; text-align: center; }
.sk-easyhelp-bridge__channels { grid-template-columns: repeat(3, 1fr); gap: 6px; }

/* TASK-2f3dcc(atom1, 2026-07-19) — 사전 빈 상태(카테고리 칩 골격 + 추천 검색어 칩 + 모아보기
   더보기) + 무결과 관련어 칩 + 상담 버튼 2차 위계. 신규 색 토큰 0(기존 pill 계열 토큰 재사용 —
   .sk-topbar__badge/.sk-cta-channel--sm 과 동일 navy/sage 계열). */
.sk-easyhelp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sk-sp-4); }
.sk-easyhelp-chip { border: 1px solid var(--sk-line-strong); background: #fff; color: var(--sk-navy); font-size: var(--sk-fs-sm); font-weight: 700; padding: 7px 14px; border-radius: var(--sk-radius-pill); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.sk-easyhelp-chip:hover { border-color: var(--sk-sage); }
.sk-easyhelp-chip.is-active { background: var(--sk-navy); border-color: var(--sk-navy); color: #fff; }
.sk-easyhelp-chip:disabled { opacity: 0.5; cursor: not-allowed; }
.sk-easyhelp-chip:disabled:hover { border-color: var(--sk-line-strong); }
.sk-easyhelp-more { display: block; width: 100%; text-align: center; margin: var(--sk-sp-3) 0 0; }
/* 무결과 상담 버튼 2차 위계 강등 — app.js 에서 --primary 수식자를 제거해 기본(outline) 톤으로
   낮추고, 여기서는 위 관련어 칩과의 여백만 보강(신규 색 0). */
.sk-easyhelp-empty__consult { margin-top: var(--sk-sp-3); }

/* ⑤ 접이식 펼침 표시(화살표) + 클릭 affordance — 용어풀이·평가원칙·일반인자·근거 공통.
   TASK-422d6e(atom⑦) — 절차 지도 "더 알아보기"(.sk-procmap-learnmore__summary) 도 동일
   접이식 언어에 합류(신규 색 토큰 0 · 기존 화살표 패턴 재사용). */
.sk-gloss__summary, .sk-rules > summary, .sk-general > summary, .sk-footnotes > summary,
.sk-procmap-learnmore__summary { list-style: none; }
.sk-gloss__summary::-webkit-details-marker,
.sk-rules > summary::-webkit-details-marker,
.sk-general > summary::-webkit-details-marker,
.sk-footnotes > summary::-webkit-details-marker,
.sk-procmap-learnmore__summary::-webkit-details-marker { display: none; }
.sk-gloss__summary::before, .sk-rules > summary::before,
.sk-general > summary::before, .sk-footnotes > summary::before,
.sk-procmap-learnmore__summary::before {
  content: "▸"; display: inline-block; margin-right: var(--sk-sp-2); color: var(--sk-sage-dark);
  font-size: var(--sk-fs-sm); transition: transform .15s ease;
}
details.sk-gloss[open] > .sk-gloss__summary::before,
details.sk-rules[open] > summary::before,
details.sk-general[open] > summary::before,
details.sk-footnotes[open] > summary::before,
details.sk-procmap-learnmore[open] > .sk-procmap-learnmore__summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .sk-gloss__summary::before, .sk-rules > summary::before,
  .sk-general > summary::before, .sk-footnotes > summary::before,
  .sk-procmap-learnmore__summary::before { transition: none; }
}

/* TASK-88dff8 atom P12 — 감축 모드 전면 존중: 신설한 모든 모션(뷰 전환·draw-in·recalc
   pulse·reveal·카드 hover/active lift)을 여기 한 곳에서 끈다(atom 8 금지 목록 정합). */
@media (prefers-reduced-motion: reduce) {
  .sk-view, .sk-view.sk-view--back,
  .sk-range-axis__seg, .sk-range-cards .sk-range-card,
  .sk-recalc-pulse, .sk-reveal, .sk-reveal.sk-reveal--in,
  .sk-voyage__ship-inner,
  .sk-track-card, .sk-pick, .sk-cat-card,
  .sk-kakao-float,
  .sk-procmap-modal {
    animation: none !important;
    transition: none !important;
  }
  .sk-track-card:not(:disabled):hover, .sk-pick:hover, .sk-cat-card:hover,
  .sk-track-card:not(:disabled):active, .sk-pick:active, .sk-cat-card:active,
  .sk-kakao-float:hover {
    transform: none;
  }
  .sk-reveal { opacity: 1; transform: none; }
}

/* ⑥ 핵심 요약 — 권고 영역 한 줄 강조(영역색 .sk-region--* 재사용) */
.sk-summary__region { display: flex; flex-direction: column; gap: 3px; margin: var(--sk-sp-4) 0 0; padding: 12px 16px; border-radius: var(--sk-radius-inner); }
.sk-summary__region-label { font-size: var(--sk-fs-sm); font-weight: 800; color: var(--sk-sage-dark); }
.sk-summary__region-head { font-size: var(--sk-fs-body); font-weight: 800; color: var(--sk-navy); line-height: 1.5; }

/* Z3-a(2026-07-11 Z-사이클 설계 §Z3-a) — 결과 화면 sticky 상단 탭(뷰 전환 · 앵커 스크롤
   아님 · 구 목차/상단 액션 카드 대체). 신규 색 토큰 0(기존 navy/line/bg 재사용). */
/* 9차 #2 → 10차-α ③(2026-07-15 대표님 지시 "여전히 안 보임 · 채도 높은 색") — navy 솔리드
   바 + gold 활성 필(CI 고채도 액센트 · 신규 브랜드색 0). 페이지에서 가장 강한 대비 표면. */
/* TASK-9bfb94(resume r1, atom C1, 2026-07-19) — topbar 가 sticky(top:0·z-index:11)로 전환되며
   이 탭바도 top:0 이면 topbar 밑에 겹친다. top 을 --sk-topbar-h 만큼 내려 겹침을 없앤다
   (z-index 10 < topbar 11 는 무변경 유지 — topbar 가 항상 위). */
/* UX8 A-1(2026-08-29 대표님 지적 ⑥) — 오버플로 글리프(◂ ▸)가 탭 글자를 덮던 결함.
   원인: 글리프가 `overflow-x:auto` 스크롤 컨테이너 안의 절대배치라 **콘텐츠와 함께 밀린다**
   (412px 실측 — 끝까지 스크롤하면 우측 끝에 있던 글리프가 x=22 로 이동해 활성 탭 위에 얹혔다).
   `is-scroll-start/end` 는 양 끝에서만 숨기므로 중간 스크롤 구간을 못 막는다.
   수정: sticky·여백·글리프를 **스크롤되지 않는 래퍼**(.sk-result-tabbar-wrap)로 옮긴다.
   스크롤 메커니즘·탭 스타일·라벨은 무변경. */
.sk-result-tabbar-wrap { position: sticky; top: var(--sk-topbar-h); z-index: 10; margin: 0 0 var(--sk-sp-4); }
.sk-result-tabbar { position: relative; display: flex; gap: 6px; background: var(--sk-navy); padding: 8px; border-bottom: 3px solid var(--sk-gold); border-radius: var(--sk-radius-inner); box-shadow: var(--sk-shadow-hover); overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* TASK-e4a2d9(atom2, 2026-07-19) — 탭바 가로 스크롤 시각 단서(위임 §2 atom2). 좌우 끝 고정
   페이드(position:absolute 는 sticky 컨테이너의 padding box 기준이라 스크롤해도 뷰포트에
   고정 — 별도 JS 계산 불요). pointer-events:none 으로 탭 클릭 무방해. 신규 색 토큰 0(기존
   --sk-navy 재사용, transparent 로 페이드). */
/* TASK-c1d6fe(atom1, 2026-08-21 · 412px 최적화 위임 §2 atom1) — 위 TASK-e4a2d9 의 "정직 한계"
   (스크롤 끝에 닿아도 계속 노출되는 정적 페이드)를 해소: ▸/◂ 글리프(기존 .sk-eg-frow__arrow
   화살표 관례 재사용 — 신규 아이콘 자산 0) 추가 + 스크롤 시작/끝 도달 시 opacity:0(JS 는
   scrollLeft 비교로 .is-scroll-start/-end 클래스 2개만 토글 — 탭 building/switching/keydown
   로직 무접촉). 오버플로가 없는 화면(예 1280px 데스크톱)은 "시작"과 "끝"이 항상 동시에 참이라
   별도 분기 없이 자연히 양쪽 다 숨는다. */
.sk-result-tabbar-wrap::before, .sk-result-tabbar-wrap::after { position: absolute; top: 0; bottom: 0; width: 20px; display: flex; align-items: center; font-size: 13px; font-weight: 800; color: rgba(255,255,255,.88); pointer-events: none; z-index: 1; opacity: 1; transition: opacity .15s ease; }
.sk-result-tabbar-wrap::before { left: 0; content: "◂"; justify-content: flex-start; padding-left: 3px; background: linear-gradient(to right, var(--sk-navy) 45%, transparent); }
.sk-result-tabbar-wrap::after { right: 0; content: "▸"; justify-content: flex-end; padding-right: 3px; background: linear-gradient(to left, var(--sk-navy) 45%, transparent); }
.sk-result-tabbar-wrap.is-scroll-start::before { opacity: 0; }
.sk-result-tabbar-wrap.is-scroll-end::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sk-result-tabbar-wrap::before, .sk-result-tabbar-wrap::after { transition: none; } }
.sk-result-tab { flex: 1 0 auto; min-width: max-content; padding: 10px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, #fff 28%, transparent); background: color-mix(in srgb, #fff 10%, transparent); font-size: var(--sk-fs-body2); font-weight: 700; color: rgba(255,255,255,.88); cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.sk-result-tab:hover { color: #fff; background: color-mix(in srgb, #fff 20%, transparent); }
.sk-result-tab.is-active { background: var(--sk-gold); color: var(--sk-navy); border-color: var(--sk-gold); font-weight: 800; }
.sk-result-tab:focus-visible { outline: 2px solid var(--sk-gold); outline-offset: 2px; }

/* 10차-α ② — 요약 탭 최하단 다음 탭 유도 카드(이탈 방지 · 대표님 지시). */
.sk-nexttab { margin-top: var(--sk-sp-4); padding: 18px 16px; border-radius: var(--sk-radius-inner); background: var(--sk-navy); box-shadow: var(--sk-shadow-card); }
.sk-nexttab__title { margin: 0; font-size: var(--sk-fs-body); font-weight: 800; color: #fff; }
.sk-nexttab__lead { margin: 6px 0 12px; font-size: var(--sk-fs-body2); color: rgba(255,255,255,.85); line-height: 1.6; }
.sk-nexttab__row { display: flex; gap: 8px; flex-wrap: wrap; }
.sk-nexttab__btn { flex: 1 1 160px; padding: 12px 14px; border-radius: 999px; border: 0; background: var(--sk-gold); color: var(--sk-navy); font-weight: 800; font-size: var(--sk-fs-body2); cursor: pointer; }
.sk-nexttab__btn:hover { filter: brightness(1.06); }
.sk-tab-panel[hidden] { display: none; }
@media (max-width: 480px) {
  /* TASK-7d94e2(atom1, 2026-07-19) — 세로 패딩만 9px→11px(44px 터치 타깃 · ≈41.8px→45.8px).
     가로 10px 은 atom⑤(P3-3) 5탭 폭 튜닝 보존을 위해 무변경. */
  .sk-result-tab { padding: 11px 10px; font-size: var(--sk-fs-sm); }
}
/* atom⑤(P3-3, TASK-52d696 2026-07-18) — 390px 첫 노출에서 5번째 탭('지금 할 일')이 우측
   잘림(실측). 480px 룰만으로는 부족 — 400px 이하에서 gap·패딩을 한 단계 더 좁혀 5탭 총폭을
   줄인다(라벨·탭 개수 변경 0 · 정보 삭제 0). */
@media (max-width: 400px) {
  .sk-result-tabbar { gap: 3px; padding: 6px; }
  /* TASK-7d94e2(atom1, 2026-07-19) — 세로 패딩만 8px→11px(≈39.8px→45.8px). 가로 7px 은
     atom⑤(P3-3) 390px 5탭 잘림 수정 보존을 위해 무변경. */
  .sk-result-tab { padding: 11px 7px; }
}

/* Z3-b — 병합 CTA 카드(구 상단 액션 카드 + 하단 CTA 상세 통합) — 눈에 띄도록 sage 강조 유지. */
.sk-cta-single { border: 1px solid rgba(135,169,107,0.5); background: rgba(135,169,107,0.06); }
.sk-cta-single .sk-cta__head { margin-top: 0; }

/* 레이어 섹션 포커스 표시(프로그램적 포커스 시 — CTA 훅 탭 전환 등) */
.sk-layer1:focus-visible, .sk-layer2:focus-visible, .sk-layer3:focus-visible { outline: var(--sk-focus); outline-offset: 3px; }

/* Z3-c(2026-07-11 Z-사이클 설계 §Z3-c) — 결과 화면 한정 플로팅 카카오톡 버튼(#view-result
   의 자식이므로 결과 화면이 숨겨지면 함께 숨는다). 신규 색 토큰 0(기존 navy 재사용) ·
   인쇄 미노출(.no-print) · 하단 여백으로 설문/고지 카드를 가리지 않게 한다. */
#view-result { padding-bottom: 84px; }
/* TASK-bde80a(2026-07-18 4차 지시①) — 절차 지도(시안 A 전체 지도·시안 B 포커스 카드 공용
   #view-procmap)에서도 카톡 플로팅을 상시 노출하도록 정정되어, 포커스 카드 하단 내비/CTA
   버튼이 고정 버튼(우하단 150×50 + 24px 여백)에 가리지 않도록 동일 여백을 둔다. */
#view-procmap { padding-bottom: 132px; }  /* 실측 정정(2026-07-18): 84px로는 최하단 solid 버튼이 플로팅(높이~56px+여백)에 가림 — 캡처 V4_C5_cta_logos 근거 */
/* 3차 실측 지시 ⑫(2026-07-13) — 플로팅 카톡 버튼을 yirun.kr 홈페이지 .yr-quick--kakao
   (shared.css) 규격 그대로 이식: 프로스트 화이트 필 + 카카오 옐로 아이콘 배지 + '카톡 상담'.
   TASK-9bfb94(resume r2, atom C3, 2026-07-19) — 대표님 판정 "너무 큼" → 텍스트 제거 + 원형
   아이콘-only(56px 지름 · #view-procmap 132px 하단 여백 계산이 이미 "~56px+여백" 가정이라
   무회귀). gap/font-size/font-weight/white-space(텍스트 전용 속성) 제거 · width 150→56 ·
   height 50→56 · border-radius 12px(둥근 사각) → 50%(원형). transition 에서 width/opacity
   는 아래 컴팩트 로직 제거로 무의미해져 함께 제거(hover 의 transform/box-shadow 만 잔존). */
.sk-kakao-float { position: fixed; right: calc(24px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 20; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; color: var(--sk-navy); background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0,40,92,0.18); transition: transform .2s, box-shadow .2s; }
.sk-kakao-float:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,40,92,0.24); }
.sk-kakao-float svg { fill: #3C1E1E; background: #FEE500; padding: 5px; border-radius: 8px; width: 28px; height: 28px; box-sizing: border-box; flex-shrink: 0; }
.sk-kakao-float:focus-visible { outline: var(--sk-focus); outline-offset: 3px; }
/* 2026-08-01 결과 화면 CTA 겹침 정정(대표님 지시) — updateEgFixedBar() 가 결과 화면에서
   kakaoFloat.hidden=true 로 숨기려 하지만, 위 .sk-kakao-float{display:inline-flex}(클래스 특이도)가
   UA [hidden]{display:none} 을 이겨 숨김이 무효화돼 하단 고정 CTA 와 겹쳤다. [hidden] 을 클래스에
   결합(특이도 0,2,0)해 숨김 의도를 실효화한다. 인자 화면 리프트(96px)는 hidden 미사용이라 무영향. */
.sk-kakao-float[hidden] { display: none; }
/* atom⑨(P3-7, TASK-52d696 2026-07-18) 스크롤 축소 로직(.sk-kakao-float--compact 토글) —
   TASK-9bfb94(resume r2, atom C3, 2026-07-19) 로 원형 아이콘-only(56px)가 되며 세그/토글
   가림 완화 목적 자체가 소멸(축소할 텍스트가 더 이상 없음) → 본 변경이 만든 dead code 라
   P3 orphan 정리 원칙에 따라 규칙·app.js 스크롤 리스너 함께 제거(대표님 "전면 표시" 지시는
   불변 — 이제 애초에 축소되지 않으므로 그 지시를 위반하지 않음). */

/* atom P12-5 — 결과 섹션 순차 등장(IntersectionObserver 1회 · attachReveal 이 sk-reveal-in
   전환 전까지 sk-reveal 만 붙인다 · 재계산 재조립 시엔 sk-reveal 없이 곧장 --in 만 붙어
   애니메이션 재생 없음). */
.sk-reveal { opacity: 0; transform: translateY(8px); }
.sk-reveal.sk-reveal--in { opacity: 1; transform: translateY(0); transition: opacity 220ms ease-out, transform 220ms ease-out; }

/* 고지 */
.sk-notice { padding: var(--sk-sp-1) 2px; }
.sk-notice__gate { font-size: var(--sk-fs-body2); font-weight: 700; color: var(--sk-navy); margin: 0 0 10px; line-height: 1.7; }
.sk-notice__meta { font-size: var(--sk-fs-notice); color: var(--sk-muted); margin: 0 0 var(--sk-sp-2); }
.sk-disclaimer, .sk-privacy { font-size: var(--sk-fs-notice); color: var(--sk-muted); line-height: 1.8; margin: var(--sk-sp-1) 0; }

/* 결과 액션 · 버튼 상태(주/보조/비활성 구분) */
.sk-result-actions { display: flex; flex-wrap: wrap; gap: var(--sk-sp-3); margin: 22px 0 0; }
.sk-result-actions button { font-size: var(--sk-fs-body2); font-weight: 700; padding: 11px 18px; border-radius: var(--sk-radius-pill); border: 1px solid var(--sk-line-strong); background: #fff; color: var(--sk-navy); cursor: pointer; transition: border-color .15s ease; }
.sk-result-actions button:hover { border-color: var(--sk-sage); }
/* atom①(P2-4, TASK-52d696 2026-07-18) — "처음부터 다시 하기" 클릭 시 즉시 초기화 대신
   인라인 확인 1단계(브라우저 confirm() 대신 — 패킷 §2 atom1 권고). 버튼과 같은 flex 컨테이너
   (.sk-result-actions) 안에 붙되 항상 한 줄 전체를 차지(flex-basis 100%)해 기존 버튼 레이아웃과
   겹치지 않는다. yes/no 버튼은 .sk-result-actions button 일반 규칙(위)의 흰색 배경을 그대로
   물려받으므로 강조가 필요한 yes 버튼만 2-class 선택자로 override(특이도 상속 순서 무관하게
   확실히 이기도록). */
.sk-restart-confirm { flex: 1 1 100%; margin-top: 2px; padding: 14px 16px; border-radius: var(--sk-radius-inner); background: rgba(212,168,83,0.14); border: 1px solid var(--sk-gold); }
.sk-restart-confirm__msg { margin: 0 0 12px; font-size: var(--sk-fs-body2); font-weight: 700; color: var(--sk-navy); line-height: 1.6; }
.sk-restart-confirm__row { display: flex; gap: 10px; flex-wrap: wrap; }
.sk-restart-confirm .sk-restart-confirm__yes { background: var(--sk-navy); color: #fff; border-color: var(--sk-navy); }
.sk-restart-confirm .sk-restart-confirm__yes:hover { background: var(--sk-navy-dark); border-color: var(--sk-navy-dark); }
.sk-btn { font-size: var(--sk-fs-body2); font-weight: 700; padding: 11px 18px; border-radius: var(--sk-radius-pill); border: 1px solid var(--sk-line-strong); background: #fff; color: var(--sk-navy); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.sk-btn:hover { border-color: var(--sk-sage); }
.sk-btn--primary { background: var(--sk-navy); color: #fff; border-color: var(--sk-navy); }
.sk-btn--primary:hover { background: var(--sk-navy-dark); border-color: var(--sk-navy-dark); }
/* TASK-422d6e(atom③) — 히어로 골드 CTA 톤(기존 --sk-gold/--sk-navy-dark 재사용 · 신규 색 0 ·
   .sk-nexttab__btn 과 동일 색 조합). 절차 지도 인패널 CTA 1순위 버튼 전용. */
.sk-btn--gold { background: var(--sk-gold); color: var(--sk-navy-dark); border-color: var(--sk-gold); font-weight: 800; }
.sk-btn--gold:hover { background: color-mix(in srgb, var(--sk-gold) 88%, #fff); border-color: var(--sk-gold); }
.sk-btn:disabled, .sk-result-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.sk-btn:disabled:hover, .sk-result-actions button:disabled:hover { border-color: var(--sk-line-strong); }

.sk-footer { text-align: center; font-size: var(--sk-fs-sm); color: var(--sk-muted); padding: var(--sk-sp-5) 0 0; }

/* TASK-88dff8 atom P13 — 기능 피드백 설문 카드(결과 화면 최하단). 기존 sk-card/sk-question/
   sk-option/sk-btn 토큰 재사용 · 신규 색 토큰 0. */
.sk-survey__head { display: flex; align-items: center; gap: var(--sk-sp-2); margin: 0 0 var(--sk-sp-2); }
.sk-survey__head .sk-card__title { margin: 0; }
.sk-badge--pending { background: rgba(212,168,83,0.18); color: #4A360F; }
.sk-survey__q { margin: 0 0 18px; }
.sk-survey__q-title { font-size: var(--sk-fs-body); font-weight: 800; color: var(--sk-navy); margin: 0 0 10px; }
.sk-survey__opts { display: grid; gap: var(--sk-sp-2); grid-template-columns: 1fr; }
@media (min-width: 560px) { .sk-survey__opts { grid-template-columns: repeat(3, 1fr); } }
.sk-survey__checks { display: grid; gap: 8px; }
.sk-survey__check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--sk-fs-body2); color: var(--sk-ink); cursor: pointer; }
.sk-survey__check input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--sk-navy); }
.sk-survey__privacy { font-size: var(--sk-fs-notice); color: var(--sk-rust); margin: 0 0 8px; line-height: 1.6; }
.sk-survey__text { width: 100%; padding: 10px 14px; border-radius: var(--sk-radius-inner); border: 1px solid var(--sk-line-strong); font: inherit; font-size: var(--sk-fs-body); color: var(--sk-ink); background: #fff; resize: vertical; }
.sk-survey__text:disabled, .sk-survey__opts .sk-option:disabled, .sk-survey__check input:disabled { opacity: 0.55; cursor: not-allowed; }
.sk-survey__submit { margin-top: 4px; }
.sk-survey__done { font-size: var(--sk-fs-body); font-weight: 700; color: var(--sk-sage-dark); margin: 0; }
.sk-survey__error { font-size: var(--sk-fs-body2); color: var(--sk-rust); margin: 10px 0 0; }

@media (max-width: 480px) {
  .sk-shell { padding: 0 16px 60px; }
  .sk-summary__grid { grid-template-columns: 1fr; gap: 2px 0; }
  .sk-summary__grid dt { margin-top: var(--sk-sp-2); }
  /* atom ③ — 상단 핵심 요약·다음 행동 카드를 한 화면에 인지 가능하도록 여백 축소 */
  .sk-card { padding: var(--sk-sp-4); margin-bottom: 12px; }
  .sk-summary__region { padding: 10px 12px; margin-top: 12px; }
  .sk-cta__lead { margin-bottom: 12px; }
  .sk-cta-channel { padding: 13px 16px; }
}

/* 인쇄 — 결과 뷰만, 상담 지참용 표지 레이아웃 */
@media print {
  body * { visibility: hidden; }
  #view-result, #view-result * { visibility: visible; }
  #view-result { position: absolute; left: 0; top: 0; width: 100%; max-width: none; margin: 0; padding: 0; }
  .no-print { display: none !important; }
  .sk-card { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; page-break-inside: avoid; }
  .sk-ranges-wrap { overflow-x: visible; }
  .sk-ranges .is-region { background: #eee !important; box-shadow: none; outline: 2px solid #333; outline-offset: -2px; }
  /* Z3-a — 인쇄 시 탭 무시(전 섹션 노출) — hidden 인 탭 패널도 강제로 표시한다. */
  .sk-tab-panel[hidden] { display: block !important; }
  /* atom P12-1/2/3/5/8 — 인쇄 시 모션 0(신설 애니메이션 전부 무력화 + reveal 강제 표시). */
  .sk-view, .sk-view.sk-view--back,
  .sk-range-axis__seg, .sk-range-cards .sk-range-card,
  .sk-recalc-pulse, .sk-reveal, .sk-reveal.sk-reveal--in,
  .sk-voyage__ship-inner,
  .sk-track-card, .sk-pick, .sk-cat-card {
    animation: none !important;
    transition: none !important;
  }
  .sk-reveal { opacity: 1 !important; transform: none !important; }
}

/* 화면에서는 숨기고 인쇄본에만 노출 — 상담 지참용 표지가 어떤 전제로 나온 결과인지
   보여 주기 위한 상황 변수 요약(⑥ 상단 간결화와 인쇄 정보량을 함께 만족). */
.sk-print-only { display: none; }
@media print {
  .sk-print-only { display: grid; }
}

/* ===== 3차 실측 지시(2026-07-13) 신규 스타일 ===== */

/* ⑧ 인자 화면 — '구간 고르기(특별) → 구간 안 위치(일반)' 예시 시각 도표 */
.sk-rangeviz { display: flex; flex-direction: column; gap: var(--sk-sp-4); margin: var(--sk-sp-2) 0 var(--sk-sp-4); padding: 14px 16px; border: 1px dashed var(--sk-line-strong); border-radius: var(--sk-radius-inner); background: var(--sk-bg); }
.sk-rangeviz__cap { font-size: var(--sk-fs-body2); color: var(--sk-body); line-height: 1.7; margin: 0 0 8px; }
.sk-rangeviz__bar { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--sk-line-strong); }
.sk-rangeviz__title { font-size: var(--sk-fs-body2); font-weight: 900; color: var(--sk-navy); margin: 0 0 4px; }
.sk-rangeviz__zone { flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; padding: 8px 2px; font-weight: 800; color: var(--sk-muted); background: #fff; }
.sk-rangeviz__zone-label { font-size: var(--sk-fs-sm); font-weight: 900; }
.sk-rangeviz__zone--mitigated .sk-rangeviz__zone-label { color: var(--sk-sage-dark); }
.sk-rangeviz__zone--aggravated .sk-rangeviz__zone-label { color: var(--sk-rust); }
.sk-rangeviz__zone-range { font-size: var(--sk-fs-sm); font-weight: 700; word-break: keep-all; }
.sk-rangeviz__zone + .sk-rangeviz__zone { border-left: 1px solid var(--sk-line); }
.sk-rangeviz__zone.is-picked { background: rgba(135,169,107,0.18); color: var(--sk-sage-dark); box-shadow: inset 0 0 0 2px var(--sk-sage); }
.sk-rangeviz__zoom { display: flex; align-items: center; gap: 10px; }
.sk-rangeviz__endlabel { font-size: var(--sk-fs-sm); font-weight: 900; color: var(--sk-sage-dark); flex-shrink: 0; }
.sk-rangeviz__band { position: relative; height: 24px; border-radius: 8px; background: rgba(135,169,107,0.18); border: 2px solid var(--sk-sage); flex: 1; }
/* 8차 피드백 ①(2026-07-13) — 왕복 애니메이션이 정신없다는 피드백 → 정적 점(고정 위치)으로 교체. */
.sk-rangeviz__dot { position: absolute; top: 50%; left: 40%; width: 12px; height: 12px; border-radius: 50%; background: var(--sk-navy); transform: translateY(-50%); }

/* ⑨ '일반양형인자 보기' 가시성 — 버튼형 박스 + 글씨 확대 + 안내 배지 */
.sk-general > summary.sk-general__summary { display: flex; align-items: center; font-size: var(--sk-fs-head); border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-inner); background: #fff; padding: 14px 16px; box-shadow: var(--sk-shadow-card); }
.sk-general__summary-hint { margin-left: auto; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-sage-dark); background: rgba(135,169,107,0.14); border: 1px solid rgba(135,169,107,0.35); padding: 4px 10px; border-radius: var(--sk-radius-pill); }
details.sk-general[open] > summary.sk-general__summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* 4차 실측 지시 ⑦(2026-07-13) — 핵심 요약 정보(범죄군~준비된 감경 근거)를 하나의 표로 묶어
   가시성 확보: 테두리 + 행 구분선 + 라벨 열 음영(dt). 인쇄용(sk-print-only)은 기존 유지. */
.sk-summary .sk-summary__grid:not(.sk-print-only) { border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-inner); overflow: hidden; gap: 0; grid-template-columns: minmax(130px, auto) 1fr; }
.sk-summary .sk-summary__grid:not(.sk-print-only) dt { background: var(--sk-bg); padding: 10px 14px; margin: 0; border-bottom: 1px solid var(--sk-cream); display: flex; align-items: center; }
.sk-summary .sk-summary__grid:not(.sk-print-only) dd { padding: 10px 14px; margin: 0; border-bottom: 1px solid var(--sk-cream); }
.sk-summary .sk-summary__grid:not(.sk-print-only) dt:nth-last-of-type(1),
.sk-summary .sk-summary__grid:not(.sk-print-only) dd:nth-last-of-type(1) { border-bottom: 0; }

/* ⑩ 핵심 요약 — 권고 형량범위 표 삽입부 헤딩/힌트 */
.sk-summary__rangehead { font-size: var(--sk-fs-body); font-weight: 900; color: var(--sk-navy); margin: var(--sk-sp-4) 0 var(--sk-sp-2); }
.sk-summary__rangehint { font-size: var(--sk-fs-sm); color: var(--sk-muted); margin: var(--sk-sp-1) 0 0; }

/* ===== v2 확장(2026-07-13) — 집행유예 기준 탭 · 다수범죄 합산 카드 ===== */

/* 집행유예 — 표 선택 버튼 줄바꿈 허용 · 판정 카드/특칙은 기존 sk-region/sk-caution 재사용 */
.sk-prob-tabsel { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sk-sp-4); }
.sk-prob-tabsel .sk-option { flex: 0 1 auto; min-width: 140px; }
.sk-prob-special { margin: var(--sk-sp-3) 0 0; }

/* 다수범죄 합산 카드 */
.sk-mc { margin: var(--sk-sp-5) 0 0; padding: 14px 16px; border: 1px dashed var(--sk-line-strong); border-radius: var(--sk-radius-inner); background: var(--sk-bg); }
.sk-mc__list { margin: var(--sk-sp-2) 0; padding-left: 22px; }
.sk-mc__item { margin: 0 0 8px; font-size: var(--sk-fs-body2); color: var(--sk-ink); }
.sk-mc__label { font-weight: 700; margin-right: 8px; }
.sk-mc__range { color: var(--sk-sage-dark); font-weight: 700; margin-right: 8px; white-space: nowrap; }
.sk-mc__del { border: 1px solid var(--sk-line-strong); background: #fff; border-radius: var(--sk-radius-pill); padding: 2px 10px; font-size: var(--sk-fs-sm); color: var(--sk-muted); cursor: pointer; }
.sk-mc__del:hover { color: var(--sk-rust); border-color: var(--sk-rust); }
.sk-mc__add { margin: var(--sk-sp-1) 0 var(--sk-sp-2); }
.sk-mc__result { margin-top: var(--sk-sp-3); }
.sk-mc__blocked { margin-top: var(--sk-sp-2); padding: 10px 14px; background: rgba(138,90,30,0.07); border: 1px solid rgba(138,90,30,0.35); border-radius: var(--sk-radius-inner); }
.sk-mc__reason { font-size: var(--sk-fs-body2); color: var(--sk-body); margin: 4px 0; line-height: 1.7; }

/* ---- 7차 실측 지시 ①② (2026-07-13) — 중분류 쉬운 설명 + 유형 번호 안내표 ---- */
/* ① 중분류 카드 설명 1줄: 유형 카드 설명(sk-pick__meta)과 동일 톤, 개수 표기와 구분되게 일반 굵기 */
.sk-pick__meta--expl { display: block; font-weight: 500; color: var(--sk-body); line-height: 1.6; }
.sk-subtype-expl { margin: -8px 0 14px; padding: 0 0 0 15px; font-size: var(--sk-fs-body2); }
/* ② 유형 번호 안내표 (접이식 · sk-rules 요약 톤 재사용) */
.sk-typelegend { margin: 10px 0 14px; padding: 8px 14px; background: rgba(0,40,92,0.04); border: 1px dashed rgba(0,40,92,0.25); border-radius: var(--sk-radius-inner); }
.sk-typelegend > summary { cursor: pointer; font-size: var(--sk-fs-body2); font-weight: 700; color: var(--sk-navy); list-style: none; }
.sk-typelegend > summary:hover { color: var(--sk-navy-dark); }
.sk-typelegend > summary:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); border-radius: var(--sk-sp-2); }
.sk-typelegend > summary::before { content: '▸ '; }
.sk-typelegend[open] > summary::before { content: '▾ '; }
.sk-typelegend__sub { margin: 8px 0 2px; font-size: var(--sk-fs-sm); font-weight: 800; color: var(--sk-sage-dark); }
.sk-typelegend__list { margin: 4px 0 8px; padding-left: 18px; font-size: var(--sk-fs-body2); color: var(--sk-body); line-height: 1.8; }

/* ==================================================================
   TASK-procv2(axis①-⑤ · 2026-07-16) — 절차 지도 v2: 인터랙티브 항해도.
   기존 .sk-procedure(2-step 요약 카드 · 인자 화면용)와 별개 목적 —
   접두 sk-procmap- 신설. voyage 시각 언어(.sk-voyage__*)는 재사용.
================================================================== */
/* TASK-422d6e — 구 텍스트 나열 스테이지 셀렉터(.sk-procmap-stagequiz__group) 는 그 렌더
   함수(renderProcMapStageSelect) 제거와 함께 orphan 정리(atom①). */
.sk-badge--victim { background: rgba(0,40,92,0.08); color: var(--sk-navy); }
.sk-badge--lawyer { background: rgba(212,168,83,0.22); color: #4A360F; }

/* axis⑤-b — 초안 고지 배너(화면 상단 1곳 · procMapData.meta.status 데이터 구동) */
.sk-procmap-banner { font-size: var(--sk-fs-sm); font-weight: 700; color: #4A360F; background: rgba(212,168,83,0.16); border: 1px solid rgba(212,168,83,0.4); border-radius: var(--sk-radius-inner); padding: 8px 14px; margin: 0 0 var(--sk-sp-3); }

/* TASK-procv3(2026-07-17) — 대표님 GR-1 시각 반려 2회("난잡·조잡") 후 승인된 정적 시안
   A(전체 지도 · HTML 이중 레일 세로 타임라인)+B(현재 단계 포커스 카드) 이식. 구 항해도(배·
   등대 SVG 은유 · TASK-procv21 voyage-wrap/strip/panel 3블록)를 전면 교체. 시안 원본(GR-1
   승인) = yirun-ax repo docs/sentencing_kit/mockups/A_timeline_spine.html·B_focus_card.html
   — 하드코드 hex 대신 기존 CI v5.0 팔레트 토큰(--sk-navy 등)으로 매핑해 이식했다. */

/* ---- 시안 A: 전체 지도(세로 타임라인) ---- */
.sk-procmap-timeline__h1 { font-size: var(--sk-fs-title); font-weight: 900; margin: var(--sk-sp-3) 0 4px; line-height: 1.3; }
.sk-procmap-timeline__lead { font-size: var(--sk-fs-body2); color: var(--sk-body); margin: 0 0 4px; line-height: 1.55; }
.sk-procmap-timeline__legend { display: flex; gap: 14px; margin: var(--sk-sp-3) 0 6px; font-size: var(--sk-fs-sm); color: var(--sk-muted); flex-wrap: wrap; }
.sk-procmap-timeline__leg { display: inline-flex; align-items: center; gap: 6px; }
.sk-procmap-timeline__leg--def::before { content: ''; width: 16px; height: 3px; border-radius: 2px; background: var(--sk-navy); }
.sk-procmap-timeline__leg--vic::before { content: ''; width: 16px; height: 0; border-top: 3px dashed var(--sk-sage); }
.sk-procmap-timeline__leg--now::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--sk-gold); box-shadow: 0 0 0 3px rgba(212,168,83,.28); }

/* TASK-422d6e(atom①) — 역할 세그먼트 칩 토글(트랙 필터). 기존 3-way 세그먼트 컨트롤
   (.sk-seg/.sk-seg__btn — 인자 화면 등에서 이미 쓰는 mutually-exclusive 패턴)을 그대로
   재사용 — 신규 색 토큰 0. */
.sk-procmap-tracktoggle { margin: var(--sk-sp-3) 0 4px; }
.sk-procmap-tracktoggle__hint { margin: 8px 2px 0; }

/* 두 레일(피의자·피고인 1열 · 피해자 2열)을 CSS Grid 한 grid 안에 두고, 각 노드에 JS 가
   grid-row 를 mainRowIndexById 정수로 직접 지정한다(행 높이는 auto — 내용이 긴 행도
   겹치지 않는다. 구 SVG rowY()/procMapVoyageViewHeight() 픽셀 계산 불필요). TASK-422d6e —
   트랙 필터가 '피해자'만 남았을 때는 .sk-procmap-timeline__map--victim-only 가 협소한
   132px 우측열 대신 전체 폭 1열로 이관(JS 가 각 셀 gridColumn 도 함께 '1'로 재지정한다). */
.sk-procmap-timeline__map { position: relative; display: grid; grid-template-columns: 1fr 132px; column-gap: var(--sk-sp-3); align-items: start; margin-top: var(--sk-sp-2); }
.sk-procmap-timeline__map--victim-only { grid-template-columns: 1fr; }
.sk-procmap-timeline__rail { width: 3px; border-radius: 2px; justify-self: start; align-self: stretch; }
.sk-procmap-timeline__rail--def { grid-column: 1; margin-left: 8px; background: var(--sk-navy); }
.sk-procmap-timeline__rail--vic { grid-column: 2; margin-left: 4px; width: 0; border-left: 3px dashed var(--sk-sage); opacity: .7; }

.sk-procmap-tl-node { position: relative; grid-column: 1; display: flex; gap: var(--sk-sp-2); align-items: flex-start; padding: 2px 0 var(--sk-sp-3); }
.sk-procmap-tl-node--victim { grid-column: 2; }
.sk-procmap-tl-node__dot { flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; border-radius: 50%; background: #fff; border: 3px solid var(--sk-navy); }
.sk-procmap-tl-node--victim .sk-procmap-tl-node__dot { width: 12px; height: 12px; border-color: var(--sk-sage-dark); }
.sk-procmap-tl-node__dot--fork { border-style: dashed; }
.sk-procmap-tl-node__body { min-width: 0; }
.sk-procmap-tl-node__stage { font-size: .68rem; font-weight: 700; color: var(--sk-muted); letter-spacing: .02em; margin: 0; }
/* atom②(P2-5, TASK-52d696 2026-07-18) — 실측 높이 19px(2줄 39px) < 44px 권고(Apple HIG)·
   24px(WCAG 2.5.8). padding 확대로 히트영역만 넓힌다(폭 98~191px 는 이미 충분 · 높이만
   보정) — 1줄 기준 14px 패딩 시 약 19+28=47px, 축소 폰트(victim) 기준 약 17+28=45px 로
   양쪽 모두 44px 이상 확보. */
.sk-procmap-tl-node__title { display: block; text-align: left; background: none; border: 0; padding: 14px 0; font: inherit; font-size: var(--sk-fs-body2); font-weight: 700; color: var(--sk-navy); margin-top: 2px; line-height: 1.35; cursor: pointer; }
.sk-procmap-tl-node__title:hover { text-decoration: underline; }
.sk-procmap-tl-node__title:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); border-radius: 4px; }
.sk-procmap-tl-node--victim .sk-procmap-tl-node__title { font-size: var(--sk-fs-sm); color: var(--sk-sage-dark); }
.sk-procmap-tl-node__forks { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sk-procmap-tl-node__flag { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-rust); }

.sk-procmap-tl-chip { display: inline-block; font-size: var(--sk-fs-sm); font-weight: 600; color: var(--sk-body); background: #fff; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-pill); padding: 4px 11px; }
.sk-procmap-tl-chip--outcome { border-style: dashed; color: var(--sk-muted); cursor: default; }
button.sk-procmap-tl-chip--fork { cursor: pointer; font: inherit; }
button.sk-procmap-tl-chip--fork:hover { border-color: var(--sk-sage); }
button.sk-procmap-tl-chip--fork:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); }

.sk-procmap-timeline__foot { margin-top: var(--sk-sp-4); font-size: var(--sk-fs-sm); color: var(--sk-muted); line-height: 1.5; border-top: 1px solid var(--sk-line); padding-top: var(--sk-sp-3); }

/* ---- 시안 B: 현재 단계 포커스 카드 ---- */
.sk-procmap-focus-rail-wrap { margin: var(--sk-sp-2) 0 var(--sk-sp-3); }
.sk-procmap-focus-rail { position: relative; display: flex; justify-content: space-between; margin: var(--sk-sp-2) 2px 4px; }
.sk-procmap-focus-rail::before { content: ''; position: absolute; left: 12px; right: 12px; top: 9px; height: 3px; background: var(--sk-line); border-radius: 2px; }
.sk-procmap-focus-rail__fill { position: absolute; left: 12px; top: 9px; height: 3px; background: var(--sk-navy); border-radius: 2px; }
/* TASK-422d6e(atom④·#4, 2026-07-18) — 레일 단계가 button 이 됨(클릭 시 그 버킷의 대표 노드로
   이동) · 기존 레이아웃은 그대로 두고 button 기본 스타일만 리셋(포커스 링은 전역 button:
   focus-visible 규칙 상속). */
.sk-procmap-focus-rail__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.sk-procmap-focus-rail__step:disabled { cursor: default; }
.sk-procmap-focus-rail__step:not(:disabled):hover .sk-procmap-focus-rail__label { color: var(--sk-navy); text-decoration: underline; }
.sk-procmap-focus-rail__dot { width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 3px solid var(--sk-navy); }
.sk-procmap-focus-rail__step.is-todo .sk-procmap-focus-rail__dot { border-color: var(--sk-line-strong); }
.sk-procmap-focus-rail__step.is-done .sk-procmap-focus-rail__dot { background: var(--sk-navy); }
.sk-procmap-focus-rail__step.is-now .sk-procmap-focus-rail__dot { background: var(--sk-gold); border-color: var(--sk-gold); box-shadow: 0 0 0 4px rgba(212,168,83,.25); }
.sk-procmap-focus-rail__label { font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-muted); }
.sk-procmap-focus-rail__step.is-now .sk-procmap-focus-rail__label { color: var(--sk-navy); font-weight: 800; }
.sk-procmap-focus-rail__cap { text-align: center; font-size: var(--sk-fs-sm); color: var(--sk-muted); margin: 4px 0 0; }

.sk-procmap-focus__crumb { display: flex; align-items: center; gap: 8px; font-size: var(--sk-fs-sm); color: var(--sk-muted); margin: 0 2px var(--sk-sp-3); flex-wrap: wrap; }
.sk-procmap-focus__crumb b { color: var(--sk-navy); font-weight: 700; }

/* TASK-422d6e(atom⑥·#11, 2026-07-18) — 전체 지도 복귀 상시 버튼(상단 · crumb 위 · 기존
   .sk-back 톤 재사용 · 신규 색 0). 하단 보조 아웃라인 행(atom④·§7-#3)에도 별개 진입점이
   있다 — 대체 아닌 공존. */
.sk-procmap-focus__topnav { margin: 0 0 var(--sk-sp-1); }

/* TASK-422d6e(atom③·#2, 2026-07-18) — 양형자료 준비(side view) 상단 절차 안내 복귀 링크
   (procMapReturnNode 컨텍스트 존재 시에만 · 기존 .sk-back 톤 재사용). */
.sk-procmap-return-link { display: block; margin: 0 0 var(--sk-sp-3); }

/* TASK-3bc56b(atom⑤, 2026-07-18 3차) — 양형 노트 → 절차 안내 상시 진입점(side view 입장
   선택 화면 · 결과 화면 CTA 인근). procMapReturnNode 컨텍스트 유무와 무관하게 항상 노출
   (위 .sk-procmap-return-link 와 별개) — 기존 .sk-procmap-focus__navbtn/--prev 아웃라인
   스타일 재사용(신규 색 0) + 배치 여백만 추가. */
.sk-procmap-entry-link { margin: var(--sk-sp-3) 0 0; }

.sk-procmap-focus { background: #fff; border-radius: var(--sk-radius-card); box-shadow: var(--sk-shadow-card); border: 1px solid var(--sk-line-strong); overflow: hidden; }
.sk-procmap-focus__head { background: linear-gradient(135deg, var(--sk-navy), var(--sk-navy-dark)); color: #fff; padding: 18px 20px 20px; }
.sk-procmap-focus__now-tag { display: inline-block; font-size: var(--sk-fs-sm); font-weight: 800; background: var(--sk-gold); color: var(--sk-navy-dark); border-radius: var(--sk-radius-pill); padding: 3px 10px; letter-spacing: .03em; }
.sk-procmap-focus__title { font-size: var(--sk-fs-title); font-weight: 800; margin-top: 10px; letter-spacing: -.02em; color: #fff; }
.sk-procmap-focus__what { font-size: var(--sk-fs-body2); color: rgba(255,255,255,.85); line-height: 1.6; margin-top: 8px; }
.sk-procmap-focus__head .sk-badge--victim { background: rgba(255,255,255,.22); color: #fff; margin-top: 8px; display: inline-block; }

.sk-procmap-focus__body { padding: var(--sk-sp-4) 20px 20px; }
.sk-procmap-focus__sub { font-size: var(--sk-fs-sm); font-weight: 800; color: var(--sk-sage-dark); letter-spacing: .02em; margin: 0 0 9px; }
.sk-procmap-focus__sub:not(:first-child) { margin-top: var(--sk-sp-4); }

/* TASK-9a711f(atom3, 2026-07-18) — 단계 설명(what)·lawyer_flag.reason 이 navy head 에서 흰
   body 로 이동(행동 카드 최상단화). .sk-procmap-focus__what 은 흰 글자(navy 배경 전용)라
   흰 배경에서 그대로 쓰면 안 보임 — 문구·데이터는 무변경, 색 톤만 body 용으로 신설. */
.sk-procmap-focus__what-body { font-size: var(--sk-fs-body2); color: var(--sk-body); line-height: 1.7; margin: 0 0 var(--sk-sp-3); }

.sk-procmap-focus__refs { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-procmap-focus__ref { font-size: var(--sk-fs-sm); color: var(--sk-muted); background: var(--sk-bg); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-inner); padding: 5px 9px; }
/* TASK-3bc56b(atom⑧, 2026-07-18 3차) — 전건이 button(조문 팝업 트리거). 구 "+N건 · 확인
   중" 요약 span(.sk-procmap-focus__ref--more)은 전건 표시로 대체되며 제거(orphan 정리). */
button.sk-procmap-focus__ref { cursor: pointer; font: inherit; transition: border-color .15s ease; }
button.sk-procmap-focus__ref:hover { border-color: var(--sk-sage); }
button.sk-procmap-focus__ref:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); }

.sk-procmap-focus__nav { display: flex; gap: 10px; margin-top: var(--sk-sp-4); }
.sk-procmap-focus__navbtn { flex: 1; text-align: center; font-size: var(--sk-fs-body2); font-weight: 700; border-radius: var(--sk-radius-inner); padding: 13px; text-decoration: none; display: block; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.sk-procmap-focus__navbtn--prev { color: var(--sk-navy); background: #fff; border: 1.5px solid var(--sk-line-strong); }
.sk-procmap-focus__navbtn--prev:hover { border-color: var(--sk-sage); }
.sk-procmap-focus__navbtn--next { color: #fff; background: var(--sk-navy); border: 1.5px solid var(--sk-navy); }
.sk-procmap-focus__navbtn--next:hover { background: var(--sk-navy-dark); border-color: var(--sk-navy-dark); }
/* TASK-422d6e(atom②·#3) — 분기 다음-단계 버튼: 갈래 라벨 + 화살표(텍스트 " →") + primary
   스타일(.sk-btn/.sk-btn--primary 그대로 재사용 — 색은 유틸리티 클래스가 공급, 여기선 균등
   폭 레이아웃만 추가). C6 처럼 다음 노드가 없는 종점은 disabled(.sk-btn:disabled 기존 규칙
   재사용 — 존재하지 않는 이동을 약속하지 않는다). */
.sk-procmap-focus__branchnext { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--sk-sp-3); }
.sk-procmap-focus__branchnext-label { display: block; width: 100%; font-size: var(--sk-fs-sm); font-weight: 800; color: var(--sk-sage-dark); letter-spacing: .02em; }
.sk-procmap-focus__branchnext-btn { flex: 1 1 auto; }
/* TASK-3bc56b(atom④, 2026-07-18 3차) — 분기 없이 다음 노드만 있는 단일 "다음 단계" 버튼이
   navWrap(아웃라인 행) 밖에서 단독으로 쓰일 때의 여백(구 .sk-procmap-focus__nav 의
   margin-top 을 이 위치로 이전). navbtn 자체는 flex 부모 없이도 display:block 이라 폭 100%. */
.sk-procmap-focus__navbtn--solo { margin: var(--sk-sp-4) 0 0; }

/* TASK-6343e9(2026-07-18) — C5/C6 전용 "형량 준비 시작" 버튼(.sk-procmap-panel__prepare-btn)
   은 전 노드로 확장된 골드 CTA(.sk-procmap-rolecta__prepare)와 완전 중복돼 app.js에서
   제거됐다 — 이 클래스를 쓰는 요소가 더는 없어 규칙도 orphan 정리한다. */

/* TASK-3bc56b(atom③ 연동, 2026-07-18 3차) — "이 단계에서 준비·확인할 것" 강조 박스 존재감
   보강(제목 1.05rem→1.15rem · 좌측 보더 4px→5px · 옅은 그림자 추가로 카드형 위계 확보).
   변호인+CTA 블록이 라이트 톤으로 낮아진 뒤에도 체크리스트가 시각 위계 상단에 오도록 하는
   목적 — 색 토큰은 기존 --sk-cream/--sk-sage/--sk-shadow-card 그대로(신규 색 0). */
.sk-procmap-prepare-box { background: var(--sk-cream); border-left: 5px solid var(--sk-sage); border-radius: 0 var(--sk-radius-inner) var(--sk-radius-inner) 0; padding: 16px 18px; margin: 0 0 var(--sk-sp-4); box-shadow: var(--sk-shadow-card); }
.sk-procmap-prepare-box__title { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; font-weight: 800; color: var(--sk-navy); margin: 0 0 10px; }
.sk-procmap-prepare-box__title::before { content: '✓'; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--sk-sage); color: #fff; font-size: .75rem; font-weight: 900; }
.sk-procmap-prepare-box .sk-procmap-checklist { margin-bottom: 0; }

/* TASK-9a711f(atom3, 2026-07-18) — 행동 카드 최상단화(목업 S4 구조). 보조문(승인 문안) +
   4개 이상 접힘("전체 N개 보기") — 기존 톤(--sk-muted/--sk-sage-dark) 재사용, 신규 색 0. */
.sk-procmap-prepare-box__sub { font-size: var(--sk-fs-body2); color: var(--sk-muted); line-height: 1.6; margin: 0 0 12px; }
/* TASK-noteprocmap(2026-08-27) — 학폭 절차 탭 가해/피해 병기 그룹 라벨(정본 v1 「피해측」·
   「가해측」 토큰). 준비 박스 제목 위계 아래 소제목 — 기존 토큰만 사용(신규 색 0). */
.sk-procmap-prepare-box__side { font-size: var(--sk-fs-body2); font-weight: 800; color: var(--sk-navy); margin: 12px 0 4px; }
.sk-noteprocmap { margin-bottom: 16px; }
.sk-noteprocmap .sk-procmap-timeline__map--victim-only { grid-template-columns: 1fr; }
.sk-procmap-prepare-box__more { margin-top: 2px; }
.sk-procmap-prepare-box__more > .sk-procmap-checklist { margin-top: 8px; }
.sk-procmap-prepare-box__more-summary { cursor: pointer; font-size: var(--sk-fs-sm); font-weight: 800; color: var(--sk-sage-dark); padding: 4px 0; list-style: none; }
.sk-procmap-prepare-box__more-summary::-webkit-details-marker { display: none; }
.sk-procmap-prepare-box__more-summary:hover { color: var(--sk-navy); }
.sk-procmap-prepare-box__more-summary:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); }

/* axis③ — 지금 준비할 것(체크박스 · 로컬 상태만). TASK-422d6e(atom④) — 항목 텍스트 아래
   prepare_detail[].how 보조 설명(있을 때만) 추가. */
.sk-procmap-checklist { list-style: none; margin: 0 0 var(--sk-sp-2); padding: 0; }
.sk-procmap-checklist__item { margin: 0 0 8px; }
.sk-procmap-checklist__label { display: flex; align-items: flex-start; gap: 8px; font-size: var(--sk-fs-body2); color: var(--sk-body); line-height: 1.6; cursor: pointer; }
.sk-procmap-checklist__label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.sk-procmap-checklist__text { display: flex; flex-direction: column; gap: 3px; }
.sk-procmap-checklist__how { font-size: var(--sk-fs-sm); color: var(--sk-muted); line-height: 1.5; }

/* TASK-422d6e(atom⑦) — "더 알아보기" 아코디언(learn_more). 단계 설명(head 의 what) 바로
   아래에 body 최상단으로 배치 — 정보 영역이 CTA 보다 시각적으로 우세하도록. 기본 접힘. */
.sk-procmap-learnmore { margin: 0 0 var(--sk-sp-4); border: 1px solid var(--sk-cream); border-radius: var(--sk-radius-inner); background: #fff; }
.sk-procmap-learnmore__summary { cursor: pointer; font-size: var(--sk-fs-body); font-weight: 800; color: var(--sk-navy); padding: 12px 14px; }
.sk-procmap-learnmore__summary:hover { color: var(--sk-navy-dark); }
.sk-procmap-learnmore__summary:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); border-radius: var(--sk-sp-2); }
.sk-procmap-learnmore__body { padding: 0 14px 14px; }
.sk-procmap-learnmore__p { font-size: var(--sk-fs-body2); color: var(--sk-body); line-height: 1.8; margin: 0 0 10px; }
.sk-procmap-learnmore__p:last-child { margin-bottom: 0; }

/* TASK-3bc56b(atom②/③, 2026-07-18 3차) — 변호인 역할 + CTA 통합 단일 블록(구
   .sk-procmap-lawyerrole 네이비 카드 + .sk-procmap-cta 골드 틴트 박스를 대체). 라이트 톤
   (흰 배경 + 기존 --sk-line-strong 보더)으로 통합해 골드는 "양형자료 준비 시작" 버튼
   한 곳에만 남긴다(신규 색 토큰 0 · 골드·네이비 대비 과잉으로 준비·확인 박스가 묻히던
   문제 해소 목적). */
.sk-procmap-rolecta { background: #fff; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-inner); padding: 16px; margin: 0 0 var(--sk-sp-4); }
.sk-procmap-rolecta__title { font-size: var(--sk-fs-body); font-weight: 900; color: var(--sk-navy); margin: 0 0 8px; }
.sk-procmap-rolecta__text { font-size: var(--sk-fs-body2); color: var(--sk-body); line-height: 1.7; margin: 0 0 14px; }
.sk-procmap-rolecta__prepare { display: block; width: 100%; text-align: center; font-size: var(--sk-fs-body); margin: 0 0 10px; }
/* 채널 3버튼 1줄화(구 TASK-422d6e atom⑤·#10 유지) — 고정 3열 + 축소 패딩/줄바꿈 금지
   (overflow ellipsis)로 @390px 에서도 한 행을 보장한다(라벨은 app.js
   PROCMAP_CTA_CHANNEL_SHORT 로 이미 짧음 — ellipsis 는 방어적 fallback). */
.sk-procmap-rolecta__channels { grid-template-columns: repeat(3, 1fr); gap: 6px; }
/* TASK-6343e9(2026-07-18 · 패킷 §2 atom5) — criminal.json meta.lawyer_flag_notice 결과-비약속
   보호 고지 1줄(기존 .sk-notice__meta 톤 재사용 — 신규 색 토큰 0). */
.sk-procmap-rolecta__notice { font-size: var(--sk-fs-notice); color: var(--sk-muted); line-height: 1.6; margin: 10px 0 0; }
/* TASK-bde80a(atom⑥, 2026-07-18 4차 지시) — 이모지 라벨을 아이콘(svg)+텍스트 인라인 배치로
   승격(display: inline-flex 로 전환 · 상위 .sk-cta-channel 의 block/text-align 을 덮어씀). */
.sk-cta-channel--sm { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 6px; font-size: var(--sk-fs-sm); font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-cta-channel__icon { width: 16px; height: 16px; flex-shrink: 0; }
.sk-cta-channel--sm .sk-cta-channel__icon + span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* axis② — C5 '1심 결과 분포' 미니 수평바(카드별 독립 — 비교·합산 마크업 없음) */
.sk-procmap-minibars { margin: var(--sk-sp-2) 0 var(--sk-sp-3); display: flex; flex-direction: column; gap: var(--sk-sp-3); }
.sk-procmap-minibar { padding: 10px 12px; border-radius: var(--sk-radius-inner); border: 1px solid var(--sk-line-strong); background: var(--sk-cream); }
.sk-procmap-minibar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.sk-procmap-minibar__label { font-size: var(--sk-fs-sm); color: var(--sk-body); line-height: 1.5; }
.sk-procmap-minibar__value { font-size: var(--sk-fs-body); font-weight: 900; color: var(--sk-navy); flex-shrink: 0; }
.sk-procmap-minibar__track { height: 8px; border-radius: var(--sk-radius-pill); background: rgba(0,40,92,0.08); overflow: hidden; }
.sk-procmap-minibar__fill { height: 100%; background: var(--sk-sage); border-radius: var(--sk-radius-pill); }
.sk-procmap-minibar__src { font-size: var(--sk-fs-sm); color: var(--sk-muted); margin: 6px 0 0; }
.sk-procmap-minibar__notice { font-size: var(--sk-fs-notice); color: var(--sk-muted); margin: 2px 0 0; line-height: 1.6; }

/* TASK-422d6e(atom⑤) — 조문 바텀시트/모달(모바일 우선: 하단 시트 · 640px+ 는 중앙 다이얼로그
   로 승격). 딤 배경 + role="dialog" aria-modal="true"(JS 가 부여) + 닫기 버튼/ESC/딤 클릭
   3경로 닫기. 신규 색 토큰 0(navy 반투명 딤 · 기존 --sk-radius-card/--sk-shadow-hover 재사용). */
.sk-procmap-modal-overlay { position: fixed; inset: 0; background: rgba(0,20,45,.55); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.sk-procmap-modal { position: relative; width: 100%; max-width: var(--sk-read); max-height: 82vh; overflow-y: auto; background: #fff; border-radius: var(--sk-radius-card) var(--sk-radius-card) 0 0; padding: var(--sk-sp-5) var(--sk-sp-4) var(--sk-sp-4); box-shadow: var(--sk-shadow-hover); animation: skSheetUp 200ms ease-out; }
@keyframes skSheetUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 640px) {
  .sk-procmap-modal-overlay { align-items: center; padding: var(--sk-sp-4); }
  .sk-procmap-modal { border-radius: var(--sk-radius-card); max-height: 78vh; }
}
.sk-procmap-modal__close { position: absolute; top: 12px; right: 12px; background: var(--sk-cream); border: 0; border-radius: var(--sk-radius-pill); padding: 6px 12px; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-navy); cursor: pointer; }
.sk-procmap-modal__close:hover { background: var(--sk-line); }
.sk-procmap-modal__ref { font-size: var(--sk-fs-head); font-weight: 900; color: var(--sk-navy); margin: 0 40px 12px 0; }
.sk-procmap-modal__summary { font-size: var(--sk-fs-body); color: var(--sk-ink); line-height: 1.8; margin: 0 0 10px; }
.sk-procmap-modal__excerpt { font-size: var(--sk-fs-body2); color: var(--sk-body); line-height: 1.8; margin: 0 0 12px; padding: 12px 14px; background: rgba(0,40,92,.04); border: 1px solid var(--sk-cream); border-radius: var(--sk-radius-inner); white-space: pre-wrap; word-break: keep-all; overflow-wrap: break-word; }
.sk-procmap-modal__notice { font-size: var(--sk-fs-notice); color: var(--sk-rust); margin: 0; }

/* PLAN-yanghyeong-easy-guide-card-interview(G6, 2026-07-29) — 쉬운 양형 가이드 카드 인터뷰
   (시안 B+C 하이브리드 · 목업 docs/sentencing_kit/mockups/easy_guide_mockups_v1.html 기준).
   신규 색 토큰(hex) 0 — 전부 기존 --sk-* 토큰 재사용. 모션(transition/animation) 0건 신설 —
   .sk-view 상위 클래스가 prefers-reduced-motion 전역 가드를 이미 상속한다(위 atom P12 블록). */
.sk-eg-badge { display: inline-block; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-sage-dark); background: var(--sk-cream); padding: 4px 12px; border-radius: var(--sk-radius-pill); margin: var(--sk-sp-2) 0 0; }
.sk-eg-facts { list-style: none; margin: var(--sk-sp-3) 0; padding: 0; }
.sk-eg-facts li { font-size: var(--sk-fs-body2); color: var(--sk-body); padding: 6px 0 6px 26px; position: relative; }
.sk-eg-facts li::before { content: '✓'; position: absolute; left: 2px; color: var(--sk-sage-dark); font-weight: 800; }
/* PLAN-yanghyeong-easy-guide-card-interview(G6 resume r2 · 2026-07-29) — 대표님 OP-1 정정
   #2: 카카오톡 수준 시각 문법(레퍼런스: 고객센터·프로야구봇·멜론·카카오I번역 스크린샷).
   resume r1 의 말풍선/턴 골격은 유지하되 밀도·타이포·카드 문법을 전면 재작업 — 하단 고정
   입력 영역(sk-eg-input)은 폐지(선택지가 대화 흐름 카드 안으로 이동). 신규 색 토큰은 위
   :root 파생 2건(--sk-eg-thread-bg·--sk-eg-user-bubble-bg)뿐, 그 외 전부 기존 --sk-* 재사용.
   본문 14px = var(--sk-fs-sm) · 질문 15px = var(--sk-fs-notice) 기존 토큰과 정확히 일치해
   그대로 재사용 — 12/13/10/11px 만 이 스코프 전용 리터럴(기존 named 토큰 없음 · P2). */
.sk-eg-turn { display: flex; flex-direction: column; margin-bottom: 14px; }
.sk-eg-turn--active { margin-bottom: 0; }
/* 스레드 로그(role="log" aria-live="polite" — app.js egSyncThread() 가 append-only 로만
   갱신해 재낭독을 막는다). 카톡 블루그레이 아날로그 배경(navy 파생 · 신규 브랜드색 아님). */
.sk-eg-thread { display: flex; flex-direction: column; background: var(--sk-eg-thread-bg); border-radius: var(--sk-radius-card); padding: 14px 10px; }
.sk-eg-chat-progress { position: sticky; top: var(--sk-topbar-h); z-index: 9; background: var(--sk-bg); padding: 8px 0 4px; margin: 0 0 var(--sk-sp-2); }

/* 시안 C — 라벨형 5단계 진행 경로(항해 은유 절제). 슬림화(dot 14→12px · 라벨 10px 유지). */
.sk-eg-steps { display: flex; gap: 4px; margin: 0; }
.sk-eg-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sk-eg-step__dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--sk-line-strong); }
.sk-eg-step--done .sk-eg-step__dot { background: var(--sk-sage-dark); border-color: var(--sk-sage-dark); }
.sk-eg-step--now .sk-eg-step__dot { background: var(--sk-gold); border-color: var(--sk-gold); }
.sk-eg-step__label { font-size: 12.5px; font-weight: 700; color: var(--sk-muted); text-align: center; }
.sk-eg-step--now .sk-eg-step__label { color: var(--sk-rust); }

/* 봇 메시지 그룹 — 아바타(기존 헤더 로고 asset 재사용) + 이름 라벨 1회(카톡 그룹핑 문법 ·
   같은 턴 연속 말풍선은 그룹 재사용 — app.js 가 턴당 1그룹만 만들어 자연히 충족). */
.sk-eg-msggroup { display: flex; gap: 8px; margin: 0 0 10px; max-width: 92%; }
.sk-eg-msggroup--bot { align-self: flex-start; }
.sk-eg-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #fff; border: 1px solid var(--sk-line); }
.sk-eg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sk-eg-msggroup__body { min-width: 0; flex: 1; }
.sk-eg-botname { margin: 0 0 3px; font-size: 12.5px; font-weight: 700; color: var(--sk-muted); }

/* 말풍선 — 본문 14px(var(--sk-fs-sm)) · line-height 1.5 · padding 10px 14px · 말풍선 간
   6px · 카톡 첫 모서리 각짐(봇=좌상 · 내 답=우상). */
.sk-eg-bubble { display: inline-block; max-width: 100%; border-radius: 16px; padding: 10px 14px; margin: 0; font-size: var(--sk-fs-sm); line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }
.sk-eg-bubble--bot { background: #fff; border: 1px solid var(--sk-line); color: var(--sk-body); border-radius: 4px 16px 16px 16px; box-shadow: var(--sk-shadow-card); }
.sk-eg-bubble--q { font-size: var(--sk-fs-notice); font-weight: 600; color: var(--sk-navy); }
.sk-eg-bubble--user { background: var(--sk-eg-user-bubble-bg); color: var(--sk-ink); font-weight: 600; border-radius: 16px 4px 16px 16px; }
/* 시안 B — 중립 인정 전환문(질문 사이 요약 버블 · copy.ack 없으면 미표시). */
.sk-eg-ack { background: var(--sk-cream); color: var(--sk-sage-dark); font-weight: 600; border-color: transparent; }

/* 말풍선 옆 타임스탬프(카톡 위치 문법 — 봇=오른쪽 하단 · 내 답=왼쪽 하단 · 렌더 시각 표시
   전용 · 결정론 무관). */
.sk-eg-bubblerow { display: flex; align-items: flex-end; gap: 6px; margin: 0 0 6px; }
.sk-eg-bubblerow--bot { justify-content: flex-start; }
.sk-eg-bubblerow--user { justify-content: flex-end; }
.sk-eg-timestamp { flex-shrink: 0; font-size: 10px; color: var(--sk-muted); white-space: nowrap; padding-bottom: 2px; }

.sk-eg-userblock { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; max-width: 78%; margin: 0 0 10px; }
/* TASK-4de924(atom1, 2026-08-25 · 코덱스 Peer Review A3) — 터치 영역 44px 확보. 시각 크기(패딩·
   마진)는 무변경, ::before pseudo-element 로 세로 hit-area 만 확장(.sk-eg-flow-skip::before 기법
   재사용 · kit.css:1477). line-height 1.7 상속 × font-size 14px = 23.8px 콘텐츠 높이 + inset
   -11px 양쪽 = 45.8px ≥44px. */
.sk-eg-msg__edit { position: relative; background: none; border: 0; padding: 0; margin: -4px 2px 0 0; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-sage-dark); cursor: pointer; }
.sk-eg-msg__edit::before { content: ''; position: absolute; inset: -11px 0; }

/* "왜 묻나요?" 인라인 토글 — 12px(고치기와 동일 축소 스케일). */
.sk-eg-why { margin: 4px 0 0; }
.sk-eg-why > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--sk-sage-dark); list-style: none; }
.sk-eg-why > summary:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); border-radius: var(--sk-sp-2); }
.sk-eg-why__body { font-size: 12.5px; color: var(--sk-body); background: var(--sk-cream); border-radius: var(--sk-radius-inner); padding: 8px 12px; margin-top: 6px; line-height: 1.5; }

/* 선택지 = 봇 메시지 그룹 안 스택 버튼(카카오I번역 언어선택 패턴). 하단 고정 칩 그리드 폐지 —
   fieldset/radio 시맨틱은 그대로(대표님 확정 접근성 불변). */
.sk-eg-fieldset { border: 0; padding: 0; margin: 8px 0 0; min-width: 0; }
.sk-eg-choices { display: flex; flex-direction: column; gap: 8px; }
.sk-eg-choice { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; padding: 0 14px; border-radius: 8px; border: 1px solid var(--sk-line-strong); background: #fff; font-size: var(--sk-fs-sm); font-weight: 600; color: var(--sk-ink); cursor: pointer; text-align: center; }
.sk-eg-choice:hover { border-color: var(--sk-sage); }
.sk-eg-choice.is-active { border-color: var(--sk-sage-dark); background: color-mix(in srgb, var(--sk-sage) 12%, #fff); }
.sk-eg-choice--unknown { border-style: dashed; color: var(--sk-muted); font-weight: 600; }

/* TASK-ff7304(2026-08-12 · 대표님 프리뷰 실측 ②③) — 선택지를 한 줄에 2개씩. 세로로만 쌓이면
   소년 트랙처럼 선택지가 7~11개인 질문에서 화면 밖까지 밀려 이탈 원인이 된다. 좁은 화면은
   1열 유지(560px = 기존 .sk-cat-grid 브레이크포인트 재사용 · 신규 브레이크포인트 0).

   2026-08-13 대표님 프리뷰 실측(「2줄로만 나오게 · 잘 모르겠어요를 빈 공간으로 올려」) —
   구 규칙은 '잘 모르겠어요'를 개수와 무관하게 항상 전체 폭으로 깔았다. 그래서 선택지가
   짝수인 질문(JV-Q1a·Q3·Q3b3·Q5·Q6)에서 왼쪽에 빈 칸을 남긴 채 한 행을 더 썼다.
   전체 폭을 '혼자 남을 때'로 좁힌다 — 총 개수가 홀수면 마지막 칸이 실제로 혼자이므로
   전체 폭(종전 동작 보존 · 대표님 실측 대상 아님), 짝수면 앞 칸 옆에 붙어 2×2 로 닫힌다.
   'unknown 은 항상 opt_order 마지막'이 11문 전수 확인된 전제라 :last-child 로 판별한다.
   전수 결과: 4→2행(3행에서 감소) · 8→4행(5행에서 감소) · 5·7·9·11 은 종전과 동일.
   좁은 화면(<560px)은 애초에 1열이라 무관. */
.sk-eg-choices--2col { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) {
  .sk-eg-choices--2col { grid-template-columns: repeat(2, 1fr); }
  /* 홀수 개 → 마지막 칸이 혼자 남는 경우에만 전체 폭 */
  .sk-eg-choices--2col .sk-eg-choice--unknown:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.sk-eg-choices--2col .sk-eg-choice { min-height: 48px; height: 100%; padding: 8px 12px; line-height: 1.35; }
/* 말미 괄호구를 한 덩어리로 — applyChoiceLabel 의 <wbr> 과 짝. 괄호 안에서 다시 끊기면
   "(또는 열릴 / 예정이에요)" 가 되어 실측 지적이 그대로 남는다. */
.sk-eg-choice__paren { white-space: nowrap; }

/* TASK-3cd78e(HP-Q1b · 정본 §D · 목업 M1) — 유형 복수 선택 칩. .sk-eg-choice 기본(테두리·배경·
   hover·is-active)은 그대로 재사용하고, 라벨+설명 2행 좌측정렬 레이아웃만 modifier 로 얹는다. */
.sk-eg-choices--multi { gap: 7px; }
.sk-eg-choice--chip { justify-content: flex-start; text-align: left; min-height: 0; padding: 10px 12px; }
.sk-eg-choice__chiplabel { display: flex; flex-direction: column; gap: 2px; }
.sk-eg-choice__chiplabel b { font-size: var(--sk-fs-sm); font-weight: 800; color: var(--sk-navy); }
.sk-eg-choice__chipdesc { font-size: var(--sk-fs-skim); font-weight: 500; color: var(--sk-muted); line-height: 1.4; }

/* TASK-ff7304(대표님 프리뷰 실측 ①) — 보호처분 1~10호를 줄글 목록에서 표로. 10개 항목을
   13px 불릿 줄글로 쌓으니 "뭘 봐야 하는지 모르겠다"는 실측 피드백. 호(戶)를 좌측 고정 열로
   빼고 기간을 우측 열로 분리해 훑어읽기 축을 만든다. 본문도 13px → 15px 로 올린다. */
.sk-jv-dispo { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.sk-jv-dispo caption { text-align: left; font-size: var(--sk-fs-skim); color: var(--sk-muted); padding-bottom: 4px; }
.sk-jv-dispo th { text-align: left; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-muted); padding: 0 0 6px; border-bottom: 1px solid var(--sk-line-strong); }
.sk-jv-dispo th:last-child { text-align: right; white-space: nowrap; }
.sk-jv-dispo td { font-size: var(--sk-fs-notice); color: var(--sk-ink); line-height: 1.45; padding: 9px 0; border-bottom: 1px solid var(--sk-line); vertical-align: top; }
.sk-jv-dispo td:last-child { text-align: right; white-space: nowrap; font-size: var(--sk-fs-sm); color: var(--sk-muted); padding-left: 10px; }
.sk-jv-dispo tr:last-child td { border-bottom: 0; }
.sk-jv-dispo__ho { display: inline-block; min-width: 2.6em; font-weight: 800; color: var(--sk-navy); }

/* TASK-2d569e(2026-08-19 · PLAN-hakpok-goshi-range-alignment N-5) — 학폭 기준표 사다리(atom2/
   atom5). .sk-jv-dispo(표) 문법을 최소 확장(rung 2 재사용 · 신규 디자인 발명 0) — 강조(hit)는
   .sk-eg-region-chip 의 sage 강조 문법을, 비강조(dim)는 기존 opacity 저감 관행(voyage .is-passed)
   을 재사용한다. */
.sk-hp-ladder { margin: var(--sk-sp-2) 0; border-top: 1px solid var(--sk-line); }
.sk-hp-lrow { display: flex; align-items: center; gap: var(--sk-sp-2); padding: 7px 2px; border-bottom: 1px solid var(--sk-line); }
.sk-hp-lrow__no { flex: 0 0 34px; font-size: var(--sk-fs-skim); font-weight: 800; color: var(--sk-muted); background: var(--sk-bg); border: 1px solid var(--sk-line-strong); border-radius: 7px; text-align: center; padding: 3px 0; }
.sk-hp-lrow__nm { flex: 1; font-size: var(--sk-fs-body2); font-weight: 700; color: var(--sk-body); }
.sk-hp-lrow__cat { flex: 0 0 auto; font-size: var(--sk-fs-skim); font-weight: 700; color: var(--sk-muted); }
.sk-hp-lrow--hit { background: color-mix(in srgb, var(--sk-sage) 10%, transparent); }
.sk-hp-lrow--hit .sk-hp-lrow__no { background: var(--sk-sage-dark); border-color: var(--sk-sage-dark); color: #fff; }
.sk-hp-lrow--hit .sk-hp-lrow__nm { color: var(--sk-navy); font-weight: 800; }
.sk-hp-lrow--dim { opacity: .45; }
.sk-hp-lrow--res .sk-hp-lrow__no { border-style: dashed; }
.sk-hp-lrow--res .sk-hp-lrow__nm { font-weight: 600; }
.sk-hp-lrow--res .sk-hp-lrow__cat { color: var(--sk-gold); }
.sk-hp-ladder-caption { font-size: var(--sk-fs-body2); color: var(--sk-muted); line-height: 1.55; margin: 4px 0 0; }
/* 「전체 구간 보기」 접힘(변호노트 조치 탭 전용 · 정본 §E) — 강조·의결(res) 외 행 숨김. */
.sk-hp-ladder-collapsed .sk-hp-lrow:not(.sk-hp-lrow--hit) { display: none; }
.sk-hp-goshi-table th, .sk-hp-goshi-table td { text-align: center; }
/* TASK-3cd78e(정본 §E) — 375px 고시표 가로 스크롤(원문 verbatim·열 구조 불변 · 표시만 스크롤). */
.sk-hp-goshi-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 4px 0 2px; }
.sk-hp-goshi-scroll .sk-hp-goshi-table { min-width: 560px; width: max-content; }
.sk-hp-goshi-hint { margin: 6px 0 0; }
/* TASK-3cd78e(정본 §C) — 노트 조치 탭 요소별 높게/낮게/알아 둘 점 3블록. */
.sk-hp-facsec { margin-top: 10px; }
.sk-hp-facsec__h { font-size: var(--sk-fs-skim); font-weight: 800; color: var(--sk-sage-dark); margin-bottom: 3px; }
.sk-hp-facsec--low .sk-hp-facsec__h { color: var(--sk-gold); }
.sk-hp-facsec--note .sk-hp-facsec__h { color: var(--sk-navy); }
.sk-hp-facsec--note { background: var(--sk-cream); border-radius: var(--sk-radius-inner); padding: 8px 10px 2px; }
.sk-hp-linkprep { border-top: 1px dashed var(--sk-line-strong); margin-top: var(--sk-sp-3); padding-top: var(--sk-sp-2); }
.sk-hp-linkprep__chips { display: flex; flex-wrap: wrap; gap: var(--sk-sp-2); margin: 4px 0 6px; }
.sk-hp-chip { margin-left: 0; }

/* TASK-ff7304(대표님 프리뷰 실측 ④) — 결과 말미 CTA 가 약하다. 채널 버튼이 하단 바 뒤에
   한 번 더 숨어 있어 마지막 화면이 텍스트 카드로 끝났다. 카드 자체를 강조면으로 올리고
   승인된 채널 블록을 카드 안에 직접 넣는다(신규 문안 0 · renderCtaBlock 재사용). */
.sk-eg-richcard--cta { border: 1px solid var(--sk-sage-dark); background: color-mix(in srgb, var(--sk-sage) 7%, #fff); }
.sk-eg-richcard--cta .sk-eg-richcard__title { font-size: var(--sk-fs-head); }
.sk-eg-richcard--cta .sk-eg-plead { font-size: var(--sk-fs-notice); color: var(--sk-body); }
.sk-eg-richcard--cta .sk-cta-channels { margin-top: 10px; }

/* 결과·답변확인 = 리치 카드(멜론 카드 패턴). 기존 .sk-card 재사용(패딩·그림자·radius 공용) +
   이 modifier 는 아바타 컬럼과의 정렬·타이포만 얹는다(P3 — 공용 클래스 정의 자체는 무변경). */
.sk-eg-richcard { margin: 0 0 10px 40px; padding: 14px 16px; } /* 40px ≈ 아바타(32)+gap(8) — 봇 버블 컬럼과 정렬 */
.sk-eg-richcard__title { margin: 0 0 4px; font-size: var(--sk-fs-notice); font-weight: 800; color: var(--sk-navy); }
.sk-eg-richcard__caveat { margin: 4px 0 10px; font-size: 12.5px; color: var(--sk-muted); line-height: 1.5; }
.sk-eg-richcard__caveat--limit { font-size: var(--sk-fs-body2); }
/* TASK-4de924(atom3, 2026-08-25 · 코덱스 Peer Review B5) — 결과 카드 본문 13px → 15.2px 상향.
   47+17곳 전수 분류(완료보고 참조) 결과 다수는 판단을 바꾸는 본문이나, 출처 표기·부가주석
   성격 소수는 --skim modifier 로 12px 유지(선례: .sk-eg-richcard__caveat--limit 반대 방향
   재사용 — 그쪽은 base 유지+상향 modifier, 이쪽은 base 상향+skim modifier). */
.sk-eg-richcard__section { margin: 0 0 8px; font-size: var(--sk-fs-body); color: var(--sk-body); line-height: 1.55; }
.sk-eg-richcard__section--skim { font-size: var(--sk-fs-skim); }
.sk-eg-richcard__list { list-style: none; margin: 4px 0 8px; padding: 0; }
.sk-eg-richcard__list li { font-size: var(--sk-fs-body); color: var(--sk-body); padding: 3px 0 3px 18px; position: relative; line-height: 1.5; }
.sk-eg-richcard__list--skim li { font-size: var(--sk-fs-skim); }
.sk-eg-richcard__list li::before { content: '·'; position: absolute; left: 4px; color: var(--sk-sage-dark); font-weight: 900; }
.sk-eg-richcard__note { margin: 8px 0 0; font-size: 12.5px; color: var(--sk-muted); line-height: 1.5; }
.sk-eg-richcard__note--limit { font-size: var(--sk-fs-body2); }
/* 2026-07-31 대표님 지적 — B1 인자 리스트: <details> 접기 폐지 후 정식 용어 상시 병기 + li 안 <p> 기본
   마진이 ::before 불릿과 첫 줄을 어긋나게 하던 줄바꿈 결함 정정. */
.sk-eg-richcard__list li p { margin: 0; }
.sk-eg-richcard__list li + li { margin-top: 8px; }
.sk-eg-richcard__formal { font-size: 12.5px; color: var(--sk-muted); margin-top: 2px; }
/* 지적 ⑤ — 결과 점진 공개: 다음 단계 버튼 행(마지막 공개 단계에만 부착 · 클릭 시 제거). */
.sk-eg-stagerow { margin: 10px 0 2px 40px; }

.sk-eg-richcard__notice-inline { margin: 6px 0; font-size: 12.5px; font-weight: 700; color: var(--sk-rust); }
/* 카드 하단 버튼 행 2분할(멜론 "상세정보/재생하기" 문법) — 답변확인 카드는 단일 버튼(자식 1개). */
.sk-eg-actionrow { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sk-eg-actionrow__btn { flex: 1 1 100%; } /* r2-fix: 반폭 압착 시 다행 버튼이 타원형으로 붕괴 → 전폭 스택(카톡 리치카드 하단 버튼 행 문법) */
.sk-eg-actionrow__btn .sk-btn { width: 100%; }
.sk-eg-actionrow__btn .sk-cta-channels { justify-content: center; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; } /* r2-fix2: 대표님 지시 — CTA 3종 수직 나열 → 병렬(3열) · eg 카드 스코프 한정(공용 클래스 본체 불변) */
.sk-eg-actionrow__btn .sk-cta-channel { padding: 12px 4px; font-size: 13px; } /* r2-fix2b: 1/3 폭에서 "카톡 상담" 말줄임 방지 — 컴팩트 패딩·폰트(eg 스코프 한정) */

/* 2026-07-31 지적 ②→④ 개정 — 결과 CTA 색 체계 = 네이비 통일(세이지 CTA 폐지 · 세이지는
   상태 뱃지에만 잔존). 채널 버튼(시트·준비요약 내) = 네이비 fill · 준비요약/변호노트 보조
   버튼 = 네이비 weak(연네이비 배경 — TDS Button weak 문법 · 지적 ③ "색을 줘" 반영).
   eg 결과 카드 스코프 한정(공용 .sk-cta-channel·.sk-goal-easyhelp-link 본체 불변). */
.sk-eg-richcard .sk-cta-channels .sk-cta-channel, .sk-egfix-sheet .sk-cta-channels .sk-cta-channel { background: var(--sk-action-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px color-mix(in srgb, var(--sk-navy) 28%, transparent); }
.sk-eg-richcard .sk-cta-channels .sk-cta-channel:hover, .sk-egfix-sheet .sk-cta-channels .sk-cta-channel:hover { background: var(--sk-navy-dark); border-color: transparent; }
.sk-eg-secondary-btn { display: block; width: 100%; margin: 0; padding: 12px 16px; text-align: center; background: var(--sk-action-weak); border: 0; border-radius: var(--sk-radius-inner); color: var(--sk-navy); font-size: var(--sk-fs-body); font-weight: 800; cursor: pointer; transition: background .15s ease; }
.sk-eg-secondary-btn:hover { background: var(--sk-action-weak-hover); color: var(--sk-navy); }

.sk-eg-summary-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sk-sp-3); padding: 8px 0; border-bottom: 1px dashed var(--sk-line); }
.sk-eg-summary-item__q { font-size: 12.5px; color: var(--sk-muted); }
.sk-eg-summary-item__a { font-size: 13px; font-weight: 700; color: var(--sk-ink); }
/* TASK-4de924(atom1, 2026-08-25 · 코덱스 Peer Review A3) — 터치 영역 44px 확보. 시각 크기(패딩)는
   무변경, ::before pseudo-element 로 세로 hit-area 만 확장(.sk-eg-flow-skip::before 기법 재사용 ·
   kit.css:1477). line-height 1.7 상속 × font-size 14px = 23.8px + padding 8px = 31.8px 콘텐츠
   높이 + inset -7px 양쪽 = 45.8px ≥44px. */
.sk-eg-summary-item__edit { position: relative; flex-shrink: 0; background: none; border: 0; padding: 4px 8px; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-sage-dark); cursor: pointer; }
.sk-eg-summary-item__edit::before { content: ''; position: absolute; inset: -7px 0; }

/* notice = 카드 아래 시스템 메시지 스타일(가운데 정렬 · 11px muted — 카톡 "○○님이 나갔습니다"
   류 시스템 메시지 문법). */
.sk-eg-systemnotice { margin: 4px 0 0 40px; font-size: var(--sk-fs-skim); color: var(--sk-muted); text-align: center; }

/* 브릿지 착지(bounded) 후보 하이라이트 — 기존 .sk-pick/.sk-track-card 카드에 덧대는 modifier
   (위저드 안 렌더 — 본 시각 재작업 범위 밖 · 무변경). */
.sk-eg-candidate--highlight { border-color: var(--sk-sage-dark); box-shadow: inset 0 0 0 1px var(--sk-sage-dark); }
.sk-eg-candidate-badge { display: inline-block; margin-top: 6px; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-sage-dark); background: var(--sk-cream); padding: 2px 10px; border-radius: var(--sk-radius-pill); }

/* PLAN-yanghyeong-easy-guide-expansion(TASK-d70f1c, 2026-07-29) — Q0 진입 퍼널(#view-eg-q0).
   위 .sk-eg-avatar·.sk-eg-msggroup·.sk-eg-bubble 계열·.sk-eg-choices·.sk-eg-choice 를 그대로
   (주의: 주석 안에 별표+슬래시 시퀀스 금지 — 조기 종료로 아래 규칙 파괴 · Codex a6f78a96 지적 정정)
   재사용(신규 0) — 이 블록은 guide-proto.html 확정 구조(Q0-A 1열 문장형 → Q0-B 2열 컴팩트 ·
   라벨+보조 2행)에 대응하는 카드형 칩 그리드만 신설한다. 신규 색 토큰 0(기존 --sk-* 재사용).
   40px 좌측 여백 = 위 .sk-eg-richcard 관행과 동일(아바타 32 + gap 8, 봇 버블 컬럼 정렬). */
.sk-eg-q0-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 10px 40px; }
@media (min-width: 480px) { .sk-eg-q0-grid--two { grid-template-columns: 1fr 1fr; } }
.sk-eg-q0-chip {
  display: flex; flex-direction: column; gap: 2px; text-align: left; font-family: inherit;
  min-height: 44px; padding: 11px 14px; border-radius: var(--sk-radius-inner);
  border: 1.5px solid var(--sk-line-strong); background: #fff; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.sk-eg-q0-chip:hover { border-color: var(--sk-sage-dark); background: color-mix(in srgb, var(--sk-sage) 8%, #fff); }
.sk-eg-q0-chip:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); }
.sk-eg-q0-chip--muted { color: var(--sk-muted); border-style: dashed; }
.sk-eg-q0-chip__label { font-weight: 700; font-size: var(--sk-fs-body2); line-height: 1.4; color: var(--sk-navy); }
.sk-eg-q0-chip__sub { font-size: 12.5px; color: var(--sk-muted); line-height: 1.35; }
.sk-eg-q0-actions { margin: 0 0 10px 40px; }
/* 자유입력 행 — guide-proto.html .gp-free 이식(kit.css 토큰만 재사용 · 신규 색 0). */
.sk-eg-q0-free { display: flex; gap: 8px; margin: 0 0 6px 40px; }
.sk-eg-q0-free input {
  flex: 1; min-width: 0; border: 1.5px solid var(--sk-line-strong); border-radius: var(--sk-radius-pill);
  padding: 11px 16px; font-size: 16px; font-family: inherit; color: var(--sk-ink); background: #fff;
}
.sk-eg-q0-free input:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); }
.sk-eg-q0-reset { text-align: center; padding: 4px 0 8px; }
.sk-eg-q0-reset button { background: none; border: 0; padding: 8px; font-size: var(--sk-fs-sm); color: var(--sk-muted); text-decoration: underline; cursor: pointer; font-family: inherit; }

/* TASK-1f6dc6(2026-07-31 v2 재설계 · docs/sentencing_kit/2026-07-31_result_screen_redesign_v2_spec.md
   §2-2/§2-3 · S4 ListRow/S5 BoardRow/S6 Badge/S7 ListHeader/S1 FixedBottomCTA 문법). 신규 색
   토큰 0(전부 기존 --sk-* 재사용 — --sk-gold 는 이미 존재). */

/* 발견 섹션 헤더(ListHeader) — 2026-07-31 지적 ②(위계 붕괴): 섹션 제목을 오버라인급(작게·
   muted)으로 낮춰 행 라벨(진네이비 800)과 명확히 분리. 카운터도 중립색(진행 표시는 행동이
   아니므로 강조 0). */
.sk-eg-frow-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sk-sp-2); margin-top: var(--sk-sp-2); }
.sk-eg-frow-header .sk-eg-richcard__title { margin-bottom: 0; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-muted); letter-spacing: .01em; }
.sk-eg-frow-counter { flex-shrink: 0; font-size: var(--sk-fs-skim); font-weight: 700; color: var(--sk-muted); }

/* 발견 행(ListRow) — 2026-07-31 지적 ②(행이 버튼으로 안 보임): 행 = 라운드 터치 카드(연네이비
   배경 + 우측 화살표 + 눌림 피드백). 접힘=라벨+화살표/뱃지 · 펼침(BoardRow)=쉬운 설명+정식
   용어+훅+질문+응답 3버튼(sk-seg 재사용). */
.sk-eg-frows { margin: 8px 0 0; }
.sk-eg-frows li { padding: 0; }
.sk-eg-frows li::before { content: none; } /* 행 자체가 단위 — 기존 richcard__list 불릿 무력화 */
.sk-eg-frow { border-radius: var(--sk-radius-inner); background: color-mix(in srgb, var(--sk-navy) 4%, #fff); transition: background .15s ease; }
.sk-eg-frow + .sk-eg-frow { margin-top: 8px !important; } /* richcard__list li+li 8px 규칙과 동치 명시 */
.sk-eg-frow__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sk-sp-2); width: 100%; min-height: 48px; padding: 12px 14px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; border-radius: var(--sk-radius-inner); }
.sk-eg-frow__head:hover { background: color-mix(in srgb, var(--sk-navy) 7%, #fff); }
.sk-eg-frow__head:active { background: color-mix(in srgb, var(--sk-navy) 10%, #fff); }
.sk-eg-frow__label { font-size: var(--sk-fs-body); font-weight: 800; color: var(--sk-navy); }
.sk-eg-frow__aux { flex-shrink: 0; }
.sk-eg-frow__arrow { display: inline-block; color: var(--sk-muted); font-size: var(--sk-fs-body2); transition: transform .15s ease; }
.sk-eg-frow__head[aria-expanded="true"] .sk-eg-frow__arrow { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .sk-eg-frow__arrow { transition: none; } }
.sk-eg-frow__panel { padding: 0 14px var(--sk-sp-3); }
.sk-eg-frow__panel[hidden] { display: none; }
/* TASK-3cd78e(정본 §B) — 학폭 요소 1줄 힌트. head 형제(panel 밖)라 접힘 상태에서도 노출. */
.sk-eg-frow__hint { font-size: var(--sk-fs-skim); color: var(--sk-body); line-height: 1.5; margin: 0; padding: 0 14px 10px; }
.sk-eg-frow__easy { font-size: var(--sk-fs-body2); color: var(--sk-body); line-height: 1.6; margin: 0 0 4px; }
.sk-eg-frow__formal { font-size: var(--sk-fs-skim); color: var(--sk-muted); margin: 0 0 var(--sk-sp-2); }
.sk-eg-frow__hook { font-size: var(--sk-fs-skim); color: var(--sk-muted); line-height: 1.5; margin: 0 0 var(--sk-sp-2); }
.sk-eg-frow__q { font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-ink); margin: 0 0 var(--sk-sp-2); }
/* 대표님 지시(2026-08-05) — 인자 턴을 말풍선 안으로 넣으면서 마지막 줄의 아래 여백이
   말풍선 안에 남는다. 말풍선 안에서만 제거(밖 사용처는 종전 그대로). */
.sk-eg-bubble--frow > :last-child { margin-bottom: 0; }
.sk-eg-frow__seg { display: flex; flex-wrap: wrap; }
.sk-eg-frow__seg .sk-seg__btn { flex: 1 1 auto; }
/* OP-1 정정 resume round 2(2026-08-19 · CoS 375px 시각 검증 정정2) — 5지 세그먼트(학폭 5요소
   자가 점검)는 nowrap 으로 "1행 5등분"을 강제하고, 3지 대비 축소 패딩·폰트로 375px 폭에서
   5칸이 겹침·줄바꿈 없이 들어가게 한다(목업 R2 .fopts 문법 재사용 · 신규 색·모양 0). */
.sk-hp-seg { flex-wrap: nowrap; }
.sk-hp-seg .sk-seg__btn { flex: 1 1 0; min-width: 0; padding: 8px 2px; font-size: var(--sk-fs-skim); line-height: 1.25; text-align: center; }

/* 응답 상태 뱃지(Badge fill/weak · S6). */
.sk-eg-fbadge { display: inline-block; font-size: var(--sk-fs-sm); font-weight: 700; padding: 4px 10px; border-radius: var(--sk-radius-pill); }
.sk-eg-fbadge--yes { background: var(--sk-sage-dark); color: #fff; }
.sk-eg-fbadge--unknown { background: rgba(212,168,83,0.16); color: var(--sk-rust); border: 1px solid rgba(212,168,83,0.4); }
.sk-eg-fbadge--no { background: var(--sk-cream); color: var(--sk-muted); }

/* TASK-5f473e(2026-07-31 v3 확인 흐름) — 인자 턴 하단 F-4 소형 건너뛰기 링크. 기존 토큰만
   재사용(--sk-fs-skim·--sk-muted·--sk-navy·--sk-focus) — 신규 색 토큰 0. */
.sk-eg-flow-skip { position: relative; display: inline-block; margin: 6px 0 0; padding: 4px 0; background: none; border: 0; font-size: var(--sk-fs-skim); font-weight: 700; color: var(--sk-muted); text-decoration: underline; cursor: pointer; }
/* TASK-c1d6fe(atom2a, 2026-08-21 · 412px 탭타겟 44px 규범 위임 §2 atom2) — 시각 크기(글자·
   밑줄·padding)는 무변경, 세로 hit-area 만 pseudo-element 로 확장(실측 28.4px[12px×1.7 상속
   line-height + padding 8px] → 44.4px · position:absolute 라 레이아웃 시프트 0 · .sk-factor__help
   의 기존 inset 확장 관례[하단 §range 탭 44px 규칙]와 동일 기법). 가로는 0(라벨 텍스트 자체가
   이미 44px 이상 · 인접 .sk-eg-flow-skip--all[margin-left 16px]과의 겹침을 피하려 가로는
   건드리지 않는다). */
.sk-eg-flow-skip::before { content: ''; position: absolute; inset: -8px 0; }
.sk-eg-flow-skip:hover { color: var(--sk-navy); }
.sk-eg-flow-skip:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); border-radius: 4px; }
/* TASK-f63e12 OP-1 정정 resume round 1(2026-08-21) — 학폭 S2 wizard 턴 한정: 요소별 건너뛰기
   (skipBtn)와 전체 건너뛰기(skipAllBtn·신규 ③)가 인접 append 되어 간격 없이 붙어 읽히던
   결함 정정. 공유 .sk-eg-flow-skip 규칙(형사·소년 단일 skip 링크)은 무변경 — 이 modifier는
   skipAllBtn 에만 부여돼 그 옆(또는 375px 줄바꿈 시 그 앞)에 여백만 더한다. */
/* TASK-d50406(atom2, 2026-08-25 · C6-d 발견성 상향 · 설계정본 §3 "skip_all 시각 위계만 상향")
   — 학폭 5요소 자가평가 탈출구(skip_all)가 12px 밑줄 링크(base)라 발견성이 낮다는 페르소나
   지적. 터치 영역(::before inset:-8px 0)은 이미 44px 이상이라 그대로 두고(무접촉), 시각
   크기·형태만 기존 보조 버튼 토큰(--sk-fs-sm·--sk-action-weak·--sk-radius-inner — 신규 색
   토큰 0 · .sk-eg-secondary-btn 과 동일 토큰 재사용)으로 올려 옆의 개별 skip 링크보다 눈에
   띄게 한다. base .sk-eg-flow-skip 규칙 · 다른 두 skipBtn(형사·소년) 시각은 무변경 — 이
   modifier 는 skipAllBtn 에만 적용된다. */
.sk-eg-flow-skip--all { margin-left: 16px; padding: 6px 12px; font-size: var(--sk-fs-sm); font-weight: 800; color: var(--sk-navy); text-decoration: none; background: var(--sk-action-weak); border-radius: var(--sk-radius-inner); }
.sk-eg-flow-skip--all:hover { background: var(--sk-action-weak-hover); }

/* 유형 카드 다이어트(P1) — MC-12 접기(.sk-cta-more 재사용 · 신규 접기 CSS 0). eg-richcard
   스코프 안 여백만 보강. */
.sk-eg-richcard .sk-cta-more { margin-top: var(--sk-sp-2); }

/* 하단 고정 CTA(FixedBottomCTA · S1) — 결과 화면 진입 시에만 노출(app.js updateEgFixedBar()).
   safe-area 패딩 · 상단 페이드로 콘텐츠 위 부유. */
/* 2026-08-05 대표님 지시 — 페이드가 28%까지 이어져 카운터 문구(패딩 상단 14px 지점)가
   투명 구간에 놓였고, 그 뒤로 선택지 버튼이 비쳐 '겹쳐 보이는' 현상이 났다. 페이드를
   10%로 좁혀 문구가 불투명 배경 위에 오게 한다(부드러운 경계는 유지). */
.sk-egfix-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 14px var(--sk-sp-4) calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent 0%, var(--sk-bg) 10%, var(--sk-bg) 100%); }
.sk-egfix-bar[hidden] { display: none; }
/* 대표님 지시(2026-08-05) — 고정 바가 position:fixed 라 자리를 차지하지 않아 마지막 턴의
   선택지·안내문을 덮었다(결과·사정·요약 화면 공통). 바가 떠 있는 동안만 스레드 하단에
   바 높이(대략 count 1줄 + 버튼 + 상하 패딩)만큼 여백을 예약한다. updateEgFixedBar 가
   body.sk-has-egfix 를 토글한다. */
body.sk-has-egfix .sk-footer { padding-bottom: 116px; }
.sk-egfix-count { margin: 0 0 8px; font-size: var(--sk-fs-sm); font-weight: 700; color: var(--sk-navy); text-align: center; }
/* 2026-07-31 지적 ④ — 주 CTA = 네이비 계열 통일(세이지 그라디언트 폐지). 클릭 유도는 색이
   아니라 효과로: 부유 그림자(elevation) + 눌림 스케일 + 응답 발생 시 bump 애니메이션
   (updateEgFixedBar 가 카운트 변화 시 .sk-egfix-btn--bump 재부착). */
.sk-egfix-btn { display: block; width: 100%; padding: 15px; border: 0; border-radius: var(--sk-radius-inner); font-size: var(--sk-fs-body); font-weight: 800; color: #fff; cursor: pointer; background: var(--sk-action-grad); box-shadow: 0 8px 20px color-mix(in srgb, var(--sk-navy) 38%, transparent); transition: transform .12s ease, box-shadow .12s ease; }
.sk-egfix-btn:hover { box-shadow: 0 10px 24px color-mix(in srgb, var(--sk-navy) 46%, transparent); transform: translateY(-1px); }
.sk-egfix-btn:active { transform: translateY(0) scale(.985); box-shadow: 0 4px 12px color-mix(in srgb, var(--sk-navy) 30%, transparent); }
.sk-egfix-btn:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); }
.sk-egfix-btn--bump { animation: sk-egfix-bump .35s ease; }
@keyframes sk-egfix-bump { 0% { transform: scale(1); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sk-egfix-btn { transition: none; } .sk-egfix-btn--bump { animation: none; } }

/* 채널 선택 레이어 — .sk-procmap-modal-overlay/.sk-procmap-modal 구조 재사용(신규 오버레이
   CSS 0 · 조문 바텀시트와 동일 bottom-sheet 문법). */
.sk-egfix-sheet__lead { font-size: var(--sk-fs-body); font-weight: 700; color: var(--sk-navy); margin: 0 40px 12px 0; }
.sk-egfix-sheet .sk-cta-channels { margin-top: 0; }
.sk-egfix-sheet__close { display: block; width: 100%; margin-top: var(--sk-sp-3); padding: 12px; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-inner); background: #fff; color: var(--sk-muted); font-size: var(--sk-fs-sm); font-weight: 700; cursor: pointer; }
.sk-egfix-sheet__close:hover { color: var(--sk-navy); border-color: var(--sk-navy); }

/* ═══ 2026-07-31 L2 심층 감사 ①(가) — 인자 화면(view-factors) 주 CTA 하단 고정 바 +
   섹션 진행 카운터. egfix 바와 동일 시각 언어(역할 토큰 재사용 · 문안 불변). 카톡 플로팅은
   숨기지 않고(TASK-bde80a 재숨김 금지) 바 위로 올린다. ═══ */
.sk-factors-fixbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 12px var(--sk-sp-4) calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent 0%, var(--sk-bg) 28%, var(--sk-bg) 100%); }
body:not(.sk-has-factors-bar) .sk-factors-fixbar { display: none; }
.sk-factors-fixbar .sk-factor-go { display: block; width: 100%; max-width: var(--sk-read); margin: 0 auto; }
.sk-factors-fixbar-pad { height: 84px; }
.sk-factor-sec__count { float: right; }
body.sk-has-factors-bar #sk-kakao-float { bottom: 96px; }

/* 원자 B-1 보강(2026-08-13) — firstframe.js 가 <html> 에 건 클래스로 첫 프레임에서 허브를 숨긴다.
   q0 를 억지로 띄우지는 않는다(그 안이 아직 비어 있어 빈 화면이 된다) — 목표는 "틀린 화면을 안
   보여주는 것"이고, 로딩 문구는 곧이어 app.js 가드가 채운다. */
html.sk-goto-eg #view-goal { display: none !important; }

/* ═══ TASK-570f47(2026-08-17 · PLAN-juvenile-byeonhonote-v2-ux) — 소년 변호노트 v2 재설계.
   목업 A/B(위임 §1) 구조 재현. 신규 색·타이포 토큰 0 — 전부 기존 --sk-navy/--sk-cream/
   --sk-gold(뱃지 경유)/--sk-sage-dark/--sk-bg/--sk-muted/--sk-fs-*/--sk-radius-* 재사용.
   아코디언은 .sk-prep-toggle(§555 부근) 과 동일 네이티브 <details> 기법의 최소 병렬 구현 —
   그 클래스는 카드 안 단일 토글 1개를 전제해 여기(카드 자체가 여러 개인 목록) 그대로
   재사용할 수 없다. ═══ */
.sk-jv-pinhead { font-size: var(--sk-fs-sm); font-weight: 800; color: var(--sk-navy); margin: 0 0 8px; }
.sk-jv-pinrow { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-jv-pin { flex: 1 1 100px; border: 1.5px solid var(--sk-sage-dark); border-radius: var(--sk-radius-inner); background: rgba(135,169,107,0.08); padding: 8px 10px; text-align: center; }
.sk-jv-pin b { display: block; font-size: var(--sk-fs-sm); color: var(--sk-navy); font-weight: 800; }

.sk-jv-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 6px 0 4px; }
@media (min-width: 480px) { .sk-jv-grid { grid-template-columns: repeat(2, 1fr); } }
/* 대표님 지시(2026-08-17) — 셀 내용 가로·세로 가운데 정렬 + 축 배지 1줄 고정(nowrap). */
.sk-jv-grid__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; text-align: center; border: 1px solid var(--sk-line-strong); border-radius: var(--sk-radius-inner); background: #fff; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; }
.sk-jv-grid__cell:hover, .sk-jv-grid__cell:focus-visible { border-color: var(--sk-navy); }
.sk-jv-grid__title { display: block; font-size: var(--sk-fs-body2); font-weight: 800; color: var(--sk-navy); margin-bottom: 6px; }
.sk-jv-grid__axes { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; max-width: 100%; }
/* 대표님 지시(2026-08-17 2차) — 배지 2개가 셀 폭을 벗어나지 않도록 그리드 안에서는 축소형. */
.sk-jv-grid__axes .sk-badge { white-space: nowrap; font-size: 12.5px; padding: 2px 7px; margin-left: 0; }

.sk-jv-stepper { display: flex; align-items: flex-start; gap: 4px; margin-top: 14px; }
.sk-jv-stepper__step { flex: 1; text-align: center; font-size: var(--sk-fs-sm); color: var(--sk-muted); }
.sk-jv-stepper__step.is-current { color: var(--sk-navy); font-weight: 700; }
.sk-jv-stepper__dot { display: block; width: 26px; height: 26px; margin: 0 auto 4px; border-radius: 50%; background: var(--sk-cream); color: #fff; line-height: 26px; font-weight: 800; font-size: var(--sk-fs-sm); }
.sk-jv-stepper__step.is-current .sk-jv-stepper__dot { background: var(--sk-navy); }
/* TASK-ffa3e2(2026-08-18 · PLAN-byeonhoguide-hakpok-track H-5) — 학폭 인스레드 미니 스텝퍼
   (정본 §0 "대화 인스레드 축약형" · 위임 §2 atom6 "요약탭 스텝퍼 스타일 축소 재사용"). 기존
   .sk-jv-stepper 를 그대로 쓰되 대화 버블 안에 들어가므로 여백·점 크기만 축소한다(신규 색·
   레이아웃 0 — 순수 크기 modifier). */
.sk-jv-stepper--mini { gap: 2px; margin-top: 8px; }
.sk-jv-stepper--mini .sk-jv-stepper__step { font-size: 12.5px; }
.sk-jv-stepper--mini .sk-jv-stepper__dot { width: 20px; height: 20px; line-height: 20px; font-size: 12.5px; margin-bottom: 2px; }

.sk-jvacc { border: 1px solid var(--sk-cream); border-radius: var(--sk-radius-inner); background: var(--sk-bg); padding: 12px 16px; margin-bottom: 10px; }
.sk-jvacc[open] { border-color: var(--sk-navy); }
.sk-jvacc > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sk-jvacc > summary::-webkit-details-marker { display: none; }
.sk-jvacc > summary::after { content: "▸"; margin-left: auto; color: var(--sk-sage-dark); font-size: var(--sk-fs-sm); transition: transform .15s ease; }
.sk-jvacc[open] > summary::after { transform: rotate(90deg); }
.sk-jvacc > summary:focus-visible { outline: var(--sk-focus); outline-offset: var(--sk-focus-offset); border-radius: var(--sk-radius-inner); }
@media (prefers-reduced-motion: reduce) { .sk-jvacc > summary::after { transition: none; } }
.sk-jvacc__title { font-size: var(--sk-fs-head); font-weight: 900; color: var(--sk-navy); }
/* 대표님 지시(2026-08-17 2차) — 제목·「먼저 볼 것」·축 배지를 한 줄에 칸 안으로: summary 안 배지 축소형. */
.sk-jvacc > summary .sk-badge { white-space: nowrap; font-size: 12.5px; padding: 2px 7px; margin-left: 0; }
/* 대표님 지시(2026-08-17) — 요지는 제목 옆이 아니라 줄바꿈해 아래 전폭 표시(예: 합의서·화해 ↵ 상대방과 이야기가 된 경우 그 내용). order로 배지·화살표(row 1) 뒤에 배치. */
.sk-jvacc__hint { font-size: var(--sk-fs-body2); color: var(--sk-muted); flex: 1 1 100%; order: 10; margin-top: 2px; }
.sk-jvacc__body { padding-top: 10px; }

.sk-jv-todo { font-size: var(--sk-fs-sm); color: var(--sk-navy); background: rgba(0,40,92,0.05); border-radius: var(--sk-radius-inner); padding: 9px 11px; margin-top: 8px; }
.sk-jv-todo b { color: var(--sk-sage-dark); }

.sk-jv-prog { font-size: var(--sk-fs-sm); color: var(--sk-muted); text-align: right; margin: 0 0 8px; }

.sk-card.sk-jv-disclaimer { background: var(--sk-cream); box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   디자인 시스템 v2 「웜 페이퍼 + 블루 액션」 — 가이드 표면 스킨 (사이클 2 · 2026-08-26)
   PLAN-design-overhaul · 최종 세트 r3 GR-1 확정. 토큰 = tokens.css --yg-* 블록.
   Stage 2a 범위: 전역 바탕·서체 + 상단 바 + 유형 선택 첫 화면(.sk-a0*).
   대화·질문 화면 스킨(Stage 2c)과 변호노트(사이클 3)는 후속 — 구 규칙은 삭제하지 않고
   본 섹션의 후행 규칙이 이기게 둔다(cascade · GR-3 이력은 git).
   ═══════════════════════════════════════════════════════════════════════════ */

/* 전역 — 웜 페이퍼 바탕 · Noto Sans KR 우선(정본 §3) */
body {
  background: var(--yg-bg);
  color: var(--yg-ink);
  font-family: var(--yg-font);
}

/* 절 경계 줄바꿈 유틸(정본 §3 조판 규칙 — landing.css 와 동일 선언) */
.yg-clause { display: inline-block; }

/* 상단 바 — r3 앱 헤더: 좌 = 브랜드 타일 + 이룬 변호가이드(홈 버튼) · 우 = 사무소 링크(보조) +
   쉬운말 사전 pill. DOM 순서(사무소 링크 → 사전 → 배지)는 무변경 — flex order 로만 재배열. */
.sk-topbar { background: var(--yg-bg); border-bottom: 1px solid var(--yg-line-soft); }
.sk-topbar__badge {
  order: -1; margin-left: 0; margin-right: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--yg-ink);
  background: none; border: none; padding: 0; border-radius: 0;
}
.sk-topbar__badge::after { content: none; }
/* 브랜드 타일(임시 체크 마크 — PLAN-byeonhoguide-logo 정본 확정 시 교체) */
.sk-topbar__badge::before {
  content: ''; position: static; inset: auto;
  width: 26px; height: 26px; border-radius: 8px; background: var(--yg-action);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5 L6 10.5 L11 4.5' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px 14px; background-position: center; background-repeat: no-repeat;
  display: inline-block; flex: none;
}
.sk-brand { order: 2; font-size: 12.5px; font-weight: 500; color: var(--yg-muted); }
.sk-brand__mark { display: none; }
.sk-topbar__link {
  order: 3;
  font-size: 13px; font-weight: 700; color: var(--yg-action);
  background: var(--yg-action-tint); border: none; border-radius: var(--yg-r-pill);
  padding: 8px 14px; min-height: 36px; cursor: pointer; text-decoration: none;
}
.sk-topbar__link:hover { background: #E2E9FF; }

/* ── 유형 선택 첫 화면 (r3 「03 유형 선택」 · 구 앱 홈 대체) ── */
.sk-a0 { display: flex; flex-direction: column; gap: 14px; padding: 10px 0 30px; max-width: 560px; }
.sk-a0__title { margin: 0; font-size: 25px; font-weight: 900; letter-spacing: -0.01em; color: var(--yg-ink); }
.sk-a0__notice {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--yg-fill-soft); border-radius: var(--yg-r-inner); padding: 11px 14px;
  color: #5C6470;
}
.sk-a0__notice-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.sk-a0__notice-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--yg-body); }
.sk-a0__tracks { display: flex; flex-direction: column; gap: 10px; }
.sk-a0-card {
  display: flex; align-items: center; gap: 14px; min-height: 74px; padding: 0 18px;
  background: var(--yg-surface); border: 1px solid var(--yg-line); border-radius: var(--yg-r-card);
  font-family: inherit; cursor: pointer; text-align: left;
  box-shadow: 0 1px 3px rgba(58, 66, 80, 0.05);
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.sk-a0-card:hover { border-color: var(--yg-action); background: var(--yg-action-tint); }
.sk-a0-card:active { transform: scale(.99); }
.sk-a0-card:focus-visible { outline: 2px solid var(--yg-action); outline-offset: 2px; }
.sk-a0-card__icon {
  flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--yg-action-tint);
  display: inline-flex; align-items: center; justify-content: center; color: var(--yg-action);
}
.sk-a0-card__icon svg { width: 22px; height: 22px; }
.sk-a0-card__label { flex-grow: 1; font-size: 16.5px; font-weight: 700; color: var(--yg-ink); }
.sk-a0-card__chev { flex: none; width: 18px; height: 18px; color: var(--yg-control-line); }
.sk-a0__aux {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--yg-line-soft); margin-top: 6px;
}
.sk-a0-aux {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px; min-height: 52px;
  background: var(--yg-fill-faint); border: 1px solid var(--yg-line); border-radius: 13px;
  font-family: inherit; cursor: pointer; text-align: left; color: var(--yg-muted);
  transition: border-color .12s ease, background .12s ease;
}
.sk-a0-aux:hover { border-color: var(--yg-action); background: var(--yg-action-tint); }
.sk-a0-aux:focus-visible { outline: 2px solid var(--yg-action); outline-offset: 2px; }
.sk-a0-aux__icon { flex: none; width: 18px; height: 18px; }
.sk-a0-aux__label { flex-grow: 1; font-size: 14px; font-weight: 700; color: var(--yg-body); }
.sk-a0-aux__badge {
  flex: none; font-size: 12.5px; font-weight: 700; color: var(--yg-action);
  background: var(--yg-action-tint); border-radius: 6px; padding: 3px 7px;
}
.sk-a0-aux__chev { flex: none; width: 15px; height: 15px; color: var(--yg-control-line); }
/* 준비 가이드 행 — 기존 .sk-goal-easyhelp-link/.sk-goal-prep-btn 마크업(V29-①a 계약 verbatim
   보존)을 aux 행 시각 문법으로 재조판(후행 규칙이 구 스타일을 덮는다). */
.sk-a0__aux .sk-goal-prep-btn {
  display: flex; align-items: center; gap: 12px; width: auto; margin: 0;
  padding: 13px 15px; min-height: 52px;
  background: var(--yg-fill-faint); border: 1px solid var(--yg-line); border-radius: 13px;
  font-size: 14px; font-weight: 700; color: var(--yg-body); text-align: left; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.sk-a0__aux .sk-goal-prep-btn:hover { border-color: var(--yg-action); background: var(--yg-action-tint); }
.sk-a0__aux .sk-goal-prep-btn .sk-goal-prep-btn__icon { flex: none; width: 18px; height: 18px; stroke: var(--yg-muted); fill: none; stroke-width: 1.5; }

/* v2 — 포커스 링 색 = 행동 단일색(blue). 구 세이지 링(--sk-focus)의 색만 교체(두께·오프셋 유지 ·
   정본 §2 「선택 표시 = action」 · 사이클 2a 전역 선적용). */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible,
[tabindex]:focus-visible { outline-color: var(--yg-action); }

/* ── Stage 2c — 대화·질문 화면 스킨 (아트보드 04·05 AB2-Question · 2026-08-26) ──
   범위 = 가이드 대화 표면(sk-eg-*) 시각만: 스레드 바탕 · 아바타 타일 · 말풍선 · 선택
   카드(q0 chip · choice) · 진행 스텝 · 복구 링크 · 뒤로가기. 마크업·엔진·문안 무변경
   (CSS-only cascade — 구 규칙 삭제 0 · GR-3 이력은 git). 토큰 = --yg-*. */

/* 스레드 — 쿨 그레이 패널을 웜 페이퍼 위 투명 흐름으로(아트보드: 별도 패널 없음). */
.sk-eg-thread { background: none; border-radius: 0; padding: 6px 0 10px; }
.sk-eg-chat-progress { background: var(--yg-bg); }

/* 아바타 — 30px 블루 타일(radius 10) + 「이룬」 워드 타일(정본 §5 대화 말풍선 행 ·
   로고 정본 확정 시 이미지 교체 — 상단 바 타일과 동일 대기 상태). */
.sk-eg-avatar {
  width: 30px; height: 30px; border-radius: 10px; border: none;
  background: var(--yg-action); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
}
.sk-eg-avatar img { display: none; }
.sk-eg-avatar::after { content: '이룬'; }

/* 말풍선 — 가이드 = surface + line 테두리 + 웜 섀도 · 사용자 = 행동색 채움 + 흰 글자
   (구 카톡풍 골드 틴트 폐지 · 정본 §5). 꼬리 4 기하는 기존 값 그대로. */
.sk-eg-bubble { font-size: 15px; line-height: 1.65; padding: 12px 16px; }
.sk-eg-bubble--bot {
  background: var(--yg-surface); border: 1px solid var(--yg-line); color: var(--yg-ink);
  box-shadow: 0 1px 3px rgba(58, 66, 80, 0.05); padding: 13px 16px;
}
.sk-eg-bubble--q { font-size: 16.5px; font-weight: 900; letter-spacing: -0.01em; color: var(--yg-ink); }
.sk-eg-bubble--user { background: var(--yg-action); color: #FFFFFF; font-weight: 500; }
.sk-eg-timestamp { color: var(--yg-muted); }

/* Q0 카드형 칩 — 선택 카드 문법(radius 14 · 1.5px line · 제목 15.5/700 + 부제 13 muted ·
   최소 62px · hover/포커스 = 행동색 테두리). muted(잘 모르겠어요)는 soft fill 카드. */
.sk-eg-q0-chip {
  background: var(--yg-surface); border: 1.5px solid var(--yg-line); border-radius: 14px;
  padding: 13px 15px; min-height: 62px;
  box-shadow: none;
  transition: border-color .12s ease, background .12s ease;
}
.sk-eg-q0-chip:hover { border-color: var(--yg-action); background: var(--yg-action-tint); }
.sk-eg-q0-chip__label { font-size: 15.5px; font-weight: 700; color: var(--yg-ink); }
.sk-eg-q0-chip__sub { font-size: 13px; line-height: 1.6; color: var(--yg-muted); }
.sk-eg-q0-chip--muted { border-style: solid; border-color: var(--yg-control-line); background: var(--yg-fill-soft); }
.sk-eg-q0-chip--muted .sk-eg-q0-chip__label { color: var(--yg-body); }
.sk-eg-q0-chip--muted:hover { border-color: var(--yg-action); background: var(--yg-action-tint); }

/* 인터뷰 선택지(단일열 리스트) — 동일 선택 카드 문법 · 선택 상태 = tint 배경 + 행동색
   테두리(정본 §5 「선택 카드」 · 구 세이지 상태색 폐지). */
.sk-eg-choice {
  border: 1.5px solid var(--yg-line); border-radius: 14px; background: var(--yg-surface);
  color: var(--yg-ink); font-weight: 700; min-height: 48px;
  transition: border-color .12s ease, background .12s ease;
}
.sk-eg-choice:hover { border-color: var(--yg-action); background: var(--yg-action-tint); }
.sk-eg-choice.is-active { border-color: var(--yg-action); background: var(--yg-action-tint); }
.sk-eg-choice--unknown { border-style: solid; border-color: var(--yg-control-line); background: var(--yg-fill-soft); color: var(--yg-body); }

/* ── UX8 B-1 「인터뷰 질문 위계」 A안 (2026-08-29 대표님 승인 · 목업 = yirun-ax
   docs/sentencing_kit/ux8_mockups/a.html · 412 캡처 captures/b1_412_a.png) ──
   지적 ① 실측 원인 = 질문이 선택지·지난 대화와 같은 흰 카드 계열이고, 그 위에 봇이름·남은질문이
   동급 2줄로 쌓여 "지금 답할 것"이 화면에서 1순위로 읽히지 않았다. A안 = 대화 문법(아바타·
   말풍선·꼬리)은 그대로 두고 **활성 턴에서만** 위계를 조정한다. 마크업 신규 클래스 0 — 두
   인터뷰 계열(W1 buildW1BotGroup · 쉬운가이드 buildEgBotGroup)이 공유하는 .sk-eg-turn--active
   아래에서 기존 클래스만 다시 그린다(재사용 사다리 rung 2 · 호출부 일괄 보증). */

/* ① 질문 승격 — 아바타 들여쓰기를 뺀 나머지 폭을 다 쓰고(92% 상한 해제), 글자를 키우고,
   좌측에 행동색 띠를 둔다. 완료된 턴의 질문은 손대지 않는다(지난 대화는 그대로 물러나 있어야
   활성 질문이 1순위가 된다). */
.sk-eg-turn--active .sk-eg-msggroup { max-width: 100%; }
.sk-eg-turn--active .sk-eg-bubble--q {
  font-size: 18.5px; line-height: 1.5;
  border-left: 4px solid var(--yg-action); padding-left: 14px;
}
/* ② 진행 안내 강등 — 합쳐진 한 줄(app.js buildW1BotGroup)에 질문과의 간격만 준다. 색·굵기는
   기존 .sk-eg-botname 그대로 둔다(--yg-muted 로 낮추면 12.5px 에서 대비 3.4:1 로 WCAG AA
   미달 · 기존 --sk-muted 는 5.6:1). */
.sk-eg-turn--active .sk-eg-botname { margin-bottom: 6px; }
/* ③ 활성 턴 타임스탬프 숨김 — 답할 질문 옆의 시각은 위계만 흐린다(완료 턴에는 유지). */
.sk-eg-turn--active .sk-eg-timestamp { display: none; }
/* ④ 선택지 계열 분리 — 봇 말풍선(흰 surface + line)과 같은 계열이라 "지금 내가 답할 곳"이
   구분되지 않았다. 활성 턴의 선택지 묶음(fieldset)을 옅은 필 패널로 감싼다. 선택 카드 문법
   자체는 위 .sk-eg-choice 그대로. 인자 흐름 턴은 fieldset 을 쓰지 않아 영향 0. */
.sk-eg-turn--active .sk-eg-fieldset {
  margin-top: 10px; padding: 12px; border-radius: 16px;
  background: var(--yg-fill-soft); border: 1px solid var(--yg-line-soft);
}
/* 패널 바탕이 fill-soft 라 같은 fill-soft 인 "잘 모르겠어요"가 바탕에 묻힌다 — 한 단 밝은
   fill-faint + 컨트롤 라인으로 되살린다(약한 선택지라는 성격은 유지). */
.sk-eg-turn--active .sk-eg-fieldset .sk-eg-choice--unknown {
  background: var(--yg-fill-faint); border-color: var(--yg-control-line);
}

/* 진행 스텝(라벨형 도트) — 상태색을 행동 단일색으로(done/now = action · 구 세이지/골드
   폐지 · 정본 §2 「진행 바 = action」). */
.sk-eg-step__dot { border-color: var(--yg-control-line); }
.sk-eg-step--done .sk-eg-step__dot { background: var(--yg-action); border-color: var(--yg-action); }
.sk-eg-step--now .sk-eg-step__dot { background: var(--yg-action-deep); border-color: var(--yg-action-deep); }
.sk-eg-step__label { color: var(--yg-muted); }
.sk-eg-step--now .sk-eg-step__label { color: var(--yg-action-deep); }

/* 복구 링크 — muted + 밑줄(정본 §5 텍스트 버튼) · 뒤로가기 hover = 행동색. */
.sk-eg-q0-reset button { font-size: 14px; font-weight: 500; color: var(--yg-muted); text-underline-offset: 3px; }
.sk-back:hover { color: var(--yg-action); }

/* ── 사이클 3 — 변호노트·결과·상담 시트 스킨 (아트보드 AB2-Note·NoteEntry·ConsultCTA ·
   2026-08-26) ── 범위 = 결과·노트 표면 시각만(카드 스택 · 점검 행 · 배지 · 인자 행 ·
   하단 고정 CTA · 세그 컨트롤). 마크업·엔진·문안 무변경(CSS-only cascade · 구 규칙
   삭제 0). 토큰 = --yg-*. */

/* 카드 스택 — surface + radius 18 + 웜 섀도(아트보드 보더리스 문법 · 보더는 투명 유지로
   레이아웃 시프트 0). */
.sk-card {
  background: var(--yg-surface); border-color: transparent; border-radius: 18px;
  box-shadow: 0 2px 8px rgba(58, 66, 80, 0.06);
}

/* 점검 목록 — 체크 = 행동 단일색 · 디바이더 웜(정본 §5 점검 행). */
.sk-items li { border-top-color: var(--yg-line-softer); }
.sk-items input[type="checkbox"],
.sk-survey__check input[type="checkbox"],
.sk-procmap-checklist__label input[type="checkbox"] { accent-color: var(--yg-action); }

/* 버튼 — 주 행동 = 파랑 채움(정본 §5 · 화면당 1개) · 보조 = 컨트롤 보더 · 구 골드
   브랜드 강조 CTA 는 행동 단일색으로 흡수(정본 §2 — 골드는 warn 전용). */
.sk-btn { border-radius: var(--yg-r-control); border-color: var(--yg-control-line); color: var(--yg-body-strong); }
.sk-btn:hover { border-color: var(--yg-action); background: var(--yg-action-tint); }
.sk-btn--primary { background: var(--yg-action); border-color: var(--yg-action); color: #FFFFFF; }
.sk-btn--primary:hover { background: var(--yg-action-deep); border-color: var(--yg-action-deep); }
.sk-btn--gold { background: var(--yg-action); border-color: var(--yg-action); color: #FFFFFF; box-shadow: var(--yg-shadow-cta); }
.sk-btn--gold:hover { background: var(--yg-action-deep); border-color: var(--yg-action-deep); }

/* 배지 — 정보성 = tint · 구 골드 강조 = warn 계열 흡수 · 준비중/미해당 = soft fill
   (정본 §5 카운터/뱃지 · 상태 세이지 폐지). */
.sk-badge--top { background: var(--yg-warn-bg); color: var(--yg-warn-text); }
.sk-badge--high { background: var(--yg-action-tint); color: var(--yg-action-deep); }
.sk-badge--build, .sk-badge--pending { background: var(--yg-fill-soft); color: var(--yg-body); }
.sk-badge--verify, .sk-badge--victim { background: var(--yg-action-tint); color: var(--yg-action-deep); }
.sk-badge--lawyer { background: var(--yg-warn-bg); color: var(--yg-warn-text); }
.sk-badge-notice { background: var(--yg-warn-bg); border-color: #EAD9B0; color: var(--yg-warn-text); }
.sk-eg-fbadge--yes { background: var(--yg-action); color: #FFFFFF; }
.sk-eg-fbadge--unknown { background: var(--yg-warn-bg); color: var(--yg-warn-text); border-color: #EAD9B0; }
.sk-eg-fbadge--no { background: var(--yg-fill-soft); color: var(--yg-body); }

/* 발견·인자 행 — 연네이비 틴트 → 웜 faint + line · hover/선택 = 행동 tint. */
.sk-eg-frow { background: var(--yg-fill-faint); }
.sk-eg-frow__head:hover { background: var(--yg-action-tint); }
.sk-eg-frow__head:active { background: var(--yg-action-tint); }
.sk-eg-frow__label { color: var(--yg-ink); }
.sk-eg-richcard__title { color: var(--yg-ink); }

/* 세그 응답 컨트롤 — 선택 = 행동 단일색(구 네이비 채움 교체). */
.sk-seg { border-color: var(--yg-control-line); }
.sk-seg__btn { border-left-color: var(--yg-line-soft); color: var(--yg-muted); }
.sk-seg__btn.is-active { background: var(--yg-action); color: #FFFFFF; }

/* 섹션 헤딩(아코디언 summary 류) — 네이비 → 잉크. */
.sk-general > summary { color: var(--yg-ink); }
.sk-gloss__summary { color: var(--yg-ink); }
.sk-gloss__summary:hover { color: var(--yg-action); }

/* 하단 고정 상담 CTA — 웜 페이드 + 행동색 채움 + 블루 섀도(정본 §5 하단 고정 CTA ·
   구 네이비 그라디언트 폐지). */
.sk-egfix-bar { background: linear-gradient(180deg, transparent 0%, var(--yg-bg) 10%, var(--yg-bg) 100%); }
.sk-egfix-count { color: var(--yg-body); }
.sk-egfix-btn {
  background: var(--yg-action); border-radius: var(--yg-r-control);
  box-shadow: 0 8px 20px rgba(46, 91, 255, 0.22);
}
.sk-egfix-btn:hover { background: var(--yg-action-deep); box-shadow: 0 10px 24px rgba(46, 91, 255, 0.26); transform: translateY(-1px); }
.sk-egfix-btn:active { box-shadow: 0 4px 12px rgba(46, 91, 255, 0.2); }

/* 검토 변호사 줄 — 웜 muted(아트보드 하단 고정 표기). */
.sk-footer { color: var(--yg-muted); }

/* 사이클 3 보강 — 위저드 표면 세이지 액센트 이행(정본 §2 — 네이비·세이지 v2 미사용).
   텍스트 라벨 = muted/body-strong · hover·포커스 경계 = 행동 단일색. 의미 전달용
   양형 구간 칩(감경/기본/가중 색 구분)은 판단 보류 — 본 블록 비대상. */
.sk-voyage__caption { color: var(--yg-muted); }
.sk-search__label { color: var(--yg-muted); }
.sk-search input:focus-visible { border-color: var(--yg-action); }
#sk-type-host .sk-subtype-label { border-left-color: var(--yg-action); color: var(--yg-body-strong); }
.sk-subtable-head { color: var(--yg-body-strong); border-bottom-color: var(--yg-line); }
.sk-stagefinder-progress { color: var(--yg-muted); }
.sk-track-card:not(:disabled):hover { border-color: var(--yg-action); }
.sk-pick:hover { border-color: var(--yg-action); }
.sk-cat-card:hover { border-color: var(--yg-action); }
.sk-option:hover { border-color: var(--yg-action); }
.sk-goal-prep-btn:hover { border-color: var(--yg-action); background: var(--yg-action-tint); }

/* 사이클 3 보강 — 결과 탭 바 재조판: 구 네이비 pill 바 → 아트보드 AB2-Note 밑줄 탭
   (surface 바 · 활성 = ink 2.5px 밑줄 · 비활성 = muted 500 · 오버플로 글리프 유지 ·
   sticky·스크롤 메커니즘 무변경 — 시각만). */
.sk-result-tabbar {
  background: var(--yg-surface); border-bottom: 1px solid var(--yg-line-soft);
  border-radius: 0; box-shadow: none; gap: 4px; padding: 0 12px;
}
.sk-result-tabbar-wrap::before { color: var(--yg-muted); background: linear-gradient(to right, var(--yg-surface) 45%, transparent); }
.sk-result-tabbar-wrap::after { color: var(--yg-muted); background: linear-gradient(to left, var(--yg-surface) 45%, transparent); }
.sk-result-tab {
  border: 0; border-radius: 0; background: none;
  padding: 11px 10px; font-size: 14.5px; font-weight: 500; color: var(--yg-muted);
  border-bottom: 2.5px solid transparent;
}
.sk-result-tab:hover { color: var(--yg-ink); background: none; }
.sk-result-tab.is-active { background: none; color: var(--yg-ink); border-color: transparent; border-bottom-color: var(--yg-ink); font-weight: 700; }
.sk-result-tab:focus-visible { outline: 2px solid var(--yg-action); outline-offset: -2px; }

/* 결과 카드 제목류 — 네이비 → 잉크(정본 §6 「구조는 굵은 타이포가 담당」). */
.sk-card h2, .sk-card h3, .sk-card h4 { color: var(--yg-ink); }
/* 탭 바 스크롤바 트랙 숨김 — pill 바 시절 네이비에 묻혀 있던 트랙이 surface 바에서
   회색 띠로 드러남. 오버플로 단서는 기존 ▸/◂ 글리프가 담당(스크롤 동작 무변경). */
.sk-result-tabbar { scrollbar-width: none; }
.sk-result-tabbar::-webkit-scrollbar { display: none; }

/* ── 사이클 3 정정 r2 (2026-08-26 대표님 지시) ──
   ① 양형 구간 색 통일 — 감경 sage/기본 navy/가중 rust 3색 의미 팔레트 폐지(정본 §2
   행동 단일색). 구분은 색상(hue)이 아니라 라벨·위치·강조 1색으로: 판정 구간 = action
   블루 강조 · 나머지 = 웜 뉴트럴. ② 항해 진행선 — 결과 화면 제외 삭제(위저드 단계는
   가이드 흐름 자체가 위치를 말해준다 · 대표님 결정). CSS-only · 엔진 무변경. */

/* ① 구간 칩(대화 결과) — 키별 3색 → 단일 action 강조. */
.sk-range-chip__k { color: var(--yg-body-strong); }
.sk-eg-region-chip[data-region-key="mitigated"],
.sk-eg-region-chip[data-region-key="basic"],
.sk-eg-region-chip[data-region-key="aggravated"] {
  background: var(--yg-action-tint); box-shadow: inset 0 0 0 2px var(--yg-action);
}
.sk-eg-region-chip[data-region-key="mitigated"] .sk-range-chip__k,
.sk-eg-region-chip[data-region-key="basic"] .sk-range-chip__k,
.sk-eg-region-chip[data-region-key="aggravated"] .sk-range-chip__k { color: var(--yg-action-deep); }

/* ① 구간 블록(결과 카드) — 판정 구간 = tint + action 보더 · 미확정 = soft fill 중립. */
.sk-region--mitigated, .sk-region--aggravated { background: var(--yg-action-tint); border-color: var(--yg-action); }
.sk-region--basic { background: var(--yg-action-tint); border: 1px solid var(--yg-action); }
.sk-region--undetermined { background: var(--yg-fill-soft); border-color: var(--yg-line); }

/* ① 형량범위 축 도표 — 3단 세그 동일 중립(라벨·위치가 구분) · 판정 구간만 action 채움. */
.sk-range-axis__track { background: var(--yg-surface); border-color: var(--yg-line); }
.sk-range-axis__seg--mitigated, .sk-range-axis__seg--basic, .sk-range-axis__seg--aggravated { background: var(--yg-control-line); }
.sk-range-axis__seg-label { color: var(--yg-body-strong); text-shadow: none; }
.sk-range-axis__seg.is-region { background: var(--yg-action); box-shadow: 0 0 0 2px var(--yg-action-deep); }
.sk-range-axis__seg.is-region .sk-range-axis__seg-label { color: #FFFFFF; text-shadow: none; }

/* ② 항해 진행선 — 위저드 4단계(범죄군·유형·상황·인자) 삭제 · 결과(#sk-progress-result)만
   존치(대표님 2026-08-26 「결과를 제외하고는 삭제」). display:none = 접근성 트리에서도 제거. */
#sk-progress-group, #sk-progress-type, #sk-progress-vars, #sk-progress-factors { display: none; }
/* r3(2026-08-27 대표님 「삭제」) — 결과 화면 진행선도 삭제: 결과 정본 아트보드(AB2-Note)에
   진행선이 없고 위치 인지는 탭 바가 담당. 렌더 코드는 보존(복원 = 이 1줄 제거). */
#sk-progress-result { display: none; }

/* ── 사이클 4 — 디자인 시스템 정합 전수 점검 처분 (2026-08-27 대표님 「1. 진행 · 2. 삭제 ·
   3. 권고대로」) ── 범위 = ① 절차 안내(procmap) v2 이행(네이비 히어로·골드 도트·세이지
   체크 → 잉크·행동 단일색·warn 표준) ② 상담 CTA 블록(.sk-cta-channel) ③ 위저드 질문
   표면(카드 제목 네이비 → 잉크 · 질문 제목 21px · 선택 활성 = 행동색) ④ 인자 예시
   도표·범위 카드 폴백 단일 강조색(r2 문법 완결) ⑤ 결과 「사건의 현재 위치」 항해 카드
   삭제. 타이포 하한 12.5px 상향은 원 선언부 in-place(예외 = 대화 타임스탬프 · 랜딩 푸터
   법정 고지 — 정본 §3 r3 note). CSS-only cascade · 구 규칙 삭제 0 · 엔진 무변경. */

/* ① 절차 안내 — 고지 배너 = warn 표준 토큰(골드 의미 유지 · 값만 표준화). */
.sk-procmap-banner { color: var(--yg-warn-text); background: var(--yg-warn-bg); border-color: #EAD9B0; }

/* ① 절차 안내 — 타임라인: 경로·현재 = 행동 단일색 · 피해자 트랙 = 중립(구분 = 대시·위치 ·
   정본 §2 세이지 미사용). */
.sk-procmap-timeline__leg--def::before { background: var(--yg-action); }
.sk-procmap-timeline__leg--vic::before { border-top-color: var(--yg-control-line); }
.sk-procmap-timeline__leg--now::before { background: var(--yg-action); box-shadow: 0 0 0 3px rgba(46,91,255,.22); }
.sk-procmap-timeline__rail--def { background: var(--yg-action); }
.sk-procmap-timeline__rail--vic { border-left-color: var(--yg-control-line); }
.sk-procmap-tl-node__dot { border-color: var(--yg-action); }
.sk-procmap-tl-node--victim .sk-procmap-tl-node__dot { border-color: var(--yg-control-line); }
.sk-procmap-tl-node__title { color: var(--yg-ink); }
.sk-procmap-tl-node--victim .sk-procmap-tl-node__title { color: var(--yg-body); }
.sk-procmap-tl-node__flag { color: var(--yg-warn-text); }
/* UX8 A-3(2026-08-29 대표님 지적 ④) — 갈림 칩이 v1 pill 문법(radius pill · 1px ·
   4/11 패딩 · 세이지 hover)에 남아 v2 선택 카드 언어와 어긋났다. .sk-eg-choice 선택 카드
   문법으로 정합(신규 토큰 0). --outcome(비클릭 점선)의 시각 구분은 유지.
   히트 영역: 구 약 26px → 44px 이상(WCAG 2.5.8 · Apple HIG). */
.sk-procmap-tl-chip {
  border-width: 1.5px; border-color: var(--yg-line); border-radius: var(--yg-r-control);
  background: var(--yg-surface); color: var(--yg-ink);
  font-size: 13.5px; font-weight: 700; line-height: 1.4; padding: 11px 14px;
  transition: border-color .12s ease, background .12s ease;
}
.sk-procmap-tl-chip--outcome { border-style: dashed; border-color: var(--yg-control-line); background: var(--yg-fill-soft); color: var(--yg-body); }
button.sk-procmap-tl-chip--fork:hover { border-color: var(--yg-action); background: var(--yg-action-tint); }
button.sk-procmap-tl-chip--fork:focus-visible { outline: 2px solid var(--yg-action); outline-offset: 1px; }
.sk-procmap-timeline__foot { border-top-color: var(--yg-line); }

/* ① 절차 안내 — 단계 레일(focus-rail): done/now = 행동색 · todo = 컨트롤 보더. */
.sk-procmap-focus-rail__fill { background: var(--yg-action); }
.sk-procmap-focus-rail__dot { border-color: var(--yg-action); }
.sk-procmap-focus-rail__step.is-todo .sk-procmap-focus-rail__dot { border-color: var(--yg-control-line); }
.sk-procmap-focus-rail__step.is-done .sk-procmap-focus-rail__dot { background: var(--yg-action); }
.sk-procmap-focus-rail__step.is-now .sk-procmap-focus-rail__dot { background: var(--yg-action); border-color: var(--yg-action); box-shadow: 0 0 0 4px rgba(46,91,255,.2); }
.sk-procmap-focus-rail__step:not(:disabled):hover .sk-procmap-focus-rail__label { color: var(--yg-action-deep); }
.sk-procmap-focus-rail__step.is-now .sk-procmap-focus-rail__label { color: var(--yg-ink); }
.sk-procmap-focus__crumb b { color: var(--yg-ink); }

/* ① 절차 안내 — 현재 단계 카드: 네이비 그라디언트 히어로 → surface 카드 문법(정본 §5 ·
   「현재 단계」 마커만 행동색). */
.sk-procmap-focus { border-color: transparent; box-shadow: var(--yg-shadow-card); }
.sk-procmap-focus__head { background: var(--yg-fill-faint); border-bottom: 1px solid var(--yg-line-soft); }
.sk-procmap-focus__now-tag { background: var(--yg-action); color: #FFFFFF; }
.sk-procmap-focus__title { color: var(--yg-ink); }
.sk-procmap-focus__what { color: var(--yg-body); }
.sk-procmap-focus__head .sk-badge--victim { background: var(--yg-action-tint); color: var(--yg-action-deep); }
.sk-procmap-focus__sub { color: var(--yg-body-strong); }
.sk-procmap-focus__ref { background: var(--yg-fill-faint); border-color: var(--yg-line); color: var(--yg-muted); }
button.sk-procmap-focus__ref:hover { border-color: var(--yg-action); }
.sk-procmap-focus__navbtn { border-radius: var(--yg-r-control); }
.sk-procmap-focus__navbtn--prev { color: var(--yg-body-strong); border-color: var(--yg-control-line); }
.sk-procmap-focus__navbtn--prev:hover { border-color: var(--yg-action); background: var(--yg-action-tint); }
/* next = 보조 행동(tint) — 주 행동 채움은 화면당 1개(「양형자료 준비 시작」)라는 정본 §5
   원칙 유지(구 네이비 채움을 파랑 채움으로 바꾸면 채움 2개가 되므로 한 단 내림). */
.sk-procmap-focus__navbtn--next { background: var(--yg-action-tint); border-color: var(--yg-action-tint); color: var(--yg-action-deep); }
.sk-procmap-focus__navbtn--next:hover { background: #E2E9FF; border-color: var(--yg-action); }
.sk-procmap-focus__branchnext-label { color: var(--yg-body-strong); }

/* ① 절차 안내 — 준비·확인 박스(크림+세이지 → soft fill+행동색) · 더 알아보기 · 변호인
   역할 블록 · 미니바 · 조문 팝업. */
.sk-procmap-prepare-box { background: var(--yg-fill-soft); border-left-color: var(--yg-action); box-shadow: var(--yg-shadow-card); }
.sk-procmap-prepare-box__title { color: var(--yg-ink); }
.sk-procmap-prepare-box__side { color: var(--yg-ink); } /* TASK-noteprocmap — v2 잉크 정합 */
.sk-procmap-prepare-box__title::before { background: var(--yg-action); }
.sk-procmap-prepare-box__more-summary { color: var(--yg-action); }
.sk-procmap-prepare-box__more-summary:hover { color: var(--yg-action-deep); }
.sk-procmap-learnmore { border-color: var(--yg-line); }
.sk-procmap-learnmore__summary { color: var(--yg-ink); }
.sk-procmap-learnmore__summary:hover { color: var(--yg-action); }
.sk-procmap-rolecta { border-color: var(--yg-line); }
.sk-procmap-rolecta__title { color: var(--yg-ink); }
.sk-procmap-minibar { background: var(--yg-fill-soft); border-color: var(--yg-line); }
.sk-procmap-minibar__value { color: var(--yg-ink); }
.sk-procmap-minibar__fill { background: var(--yg-action); }
.sk-procmap-modal__close { background: var(--yg-fill-soft); color: var(--yg-body-strong); }
.sk-procmap-modal__ref { color: var(--yg-ink); }
.sk-procmap-modal__excerpt { background: var(--yg-fill-faint); border-color: var(--yg-line); }
.sk-procmap-modal__notice { color: var(--yg-warn-text); }

/* ② 상담 CTA 블록 — 주 = 행동색 채움 58px/r14(정본 §5 주 행동 버튼 · 구 네이비 폐지) ·
   채널 = 보조 아웃라인. */
.sk-cta-channel { border-radius: var(--yg-r-control); border-color: var(--yg-control-line); color: var(--yg-body-strong); }
.sk-cta-channel:hover { border-color: var(--yg-action); background: var(--yg-action-tint); }
.sk-cta-channel:disabled:hover { border-color: var(--yg-control-line); }
.sk-cta-channel--primary { background: var(--yg-action); border-color: var(--yg-action); color: #FFFFFF; padding: 17px 18px; font-size: 17px; font-weight: 700; box-shadow: var(--yg-shadow-cta); }
.sk-cta-channel--primary:hover { background: var(--yg-action-deep); border-color: var(--yg-action-deep); }

/* ③ 위저드 질문 표면 — 질문 제목 = 정본 §3 21px/900(구 v1 클램프 25px · 랜딩 히어로
   29px는 별개) · 카드 제목 네이비 → 잉크 · 선택 활성 = 행동색. */
.sk-question h2, .sk-step-title, .sk-group-heading, .sk-procmap-timeline__h1 { font-size: 21px; }
.sk-group-heading { color: var(--yg-ink); }
.sk-track-card__title, .sk-pick__title, .sk-cat-card__title, .sk-card__title { color: var(--yg-ink); }
.sk-track-card__icon { stroke: var(--yg-action); }
.sk-track-card__note { background: var(--yg-fill-soft); }
.sk-track-card--highlight { border-color: var(--yg-action); background: var(--yg-action-tint); }
.sk-track-card--highlight:not(:disabled):hover { border-color: var(--yg-action-deep); }
.sk-track-card__badge { color: var(--yg-action-deep); background: var(--yg-action-tint); border-color: transparent; }
.sk-option.is-active { background: var(--yg-action); border-color: var(--yg-action); }
.sk-option--unknown:hover { border-color: var(--yg-action); color: var(--yg-body-strong); }
.sk-goal-existing-link:hover, .sk-goal-easyhelp-link:hover { color: var(--yg-action); }
.sk-goal-prep-btn__icon { stroke: var(--yg-action); }
.sk-typelegend { background: var(--yg-fill-faint); border-color: var(--yg-control-line); }
.sk-typelegend > summary { color: var(--yg-ink); }
.sk-typelegend > summary:hover { color: var(--yg-action); }
.sk-inline-adjust__title { color: var(--yg-body-strong); }
.sk-range-chip { background: var(--yg-fill-soft); }
.sk-jv-grid__cell:hover, .sk-jv-grid__cell:focus-visible { border-color: var(--yg-action); }
.sk-jv-grid__title, .sk-jv-pinhead, .sk-jv-pin b { color: var(--yg-ink); }
.sk-jv-pin { border-color: var(--yg-action); background: var(--yg-action-tint); }
.sk-jv-stepper__dot { background: var(--yg-fill-soft); color: var(--yg-muted); }
.sk-jv-stepper__step.is-current { color: var(--yg-ink); }
.sk-jv-stepper__step.is-current .sk-jv-stepper__dot { background: var(--yg-action); color: #FFFFFF; }

/* ③ 대화(eg) 잔재 — 진행 스텝 세이지·골드 → 행동색 · 배지·팩트 체크·왜 아코디언 ·
   「고치기」 텍스트 버튼(정본 §5 텍스트 버튼 = action 700). */
.sk-eg-msg__edit { color: var(--yg-action); font-weight: 700; }
.sk-eg-step--done .sk-eg-step__dot { background: var(--yg-action); border-color: var(--yg-action); }
.sk-eg-step--now .sk-eg-step__dot { background: var(--yg-action); border-color: var(--yg-action); box-shadow: 0 0 0 3px rgba(46,91,255,.2); }
.sk-eg-step--now .sk-eg-step__label { color: var(--yg-action-deep); }
.sk-eg-badge { color: var(--yg-action-deep); background: var(--yg-action-tint); }
.sk-eg-facts li::before { color: var(--yg-action); }
.sk-eg-why > summary { color: var(--yg-action); }
.sk-eg-why__body { background: var(--yg-fill-soft); }
.sk-eg-richcard__notice-inline { color: var(--yg-warn-text); }

/* ③ 인자 절차 2단 카드(특별→일반) — 세이지 번호·화살표/네이비 라벨 → 행동색·잉크. */
.sk-procedure__num { color: var(--yg-action); }
.sk-procedure__label { color: var(--yg-ink); }
.sk-procedure__arrow { color: var(--yg-control-line); }
.sk-procedure__step { border-color: var(--yg-line); }

/* ④ 인자 예시 도표(rangeviz)·범위 카드 폴백 — r2 단일 강조색 문법 완결(감경 세이지·
   가중 러스트 폐지 · 구분 = 라벨·위치 · 판정/픽 구간만 행동색). */
.sk-rangeviz { background: var(--yg-fill-faint); border-color: var(--yg-control-line); }
.sk-rangeviz__title { color: var(--yg-ink); }
.sk-rangeviz__zone--mitigated .sk-rangeviz__zone-label,
.sk-rangeviz__zone--aggravated .sk-rangeviz__zone-label { color: var(--yg-body-strong); }
.sk-rangeviz__zone.is-picked { background: var(--yg-action-tint); color: var(--yg-action-deep); box-shadow: inset 0 0 0 2px var(--yg-action); }
.sk-rangeviz__endlabel { color: var(--yg-action-deep); }
.sk-rangeviz__band { background: var(--yg-action-tint); border-color: var(--yg-action); }
.sk-rangeviz__dot { background: var(--yg-action); }
.sk-range-card { border-color: var(--yg-line); background: var(--yg-fill-faint); }
.sk-range-card--mitigated, .sk-range-card--aggravated { border-color: var(--yg-line); }
.sk-range-card.is-region { box-shadow: inset 0 0 0 2px var(--yg-action); }
.sk-range-card--mitigated.is-region, .sk-range-card--aggravated.is-region { background: var(--yg-action-tint); box-shadow: inset 0 0 0 2px var(--yg-action); }
.sk-range-card--basic.is-region { background: var(--yg-action-tint); }
.sk-range-cards.is-undetermined .sk-range-card.is-region { background: var(--yg-fill-faint); }
.sk-range-card__arrow { color: var(--yg-action); }
.sk-range-card__badge { color: var(--yg-warn-text); background: var(--yg-warn-bg); }

/* ④b 결과 요약 잔재 — 리드·구간표 헤더 네이비/세이지/러스트 → 잉크·행동 단일색(r2 구간
   블록 문법과 동일). */
.sk-summary__lead { color: var(--yg-ink); }
.sk-summary__gap-title { color: var(--yg-body-strong); }
.sk-summary__region-label { color: var(--yg-body-strong); }
.sk-summary__region-head { color: var(--yg-ink); }
.sk-summary__rangehead { color: var(--yg-ink); }
.sk-summary .sk-summary__grid:not(.sk-print-only) dt { background: var(--yg-fill-faint); border-bottom-color: var(--yg-line-soft); }
.sk-summary .sk-summary__grid:not(.sk-print-only) dd { border-bottom-color: var(--yg-line-soft); }
.sk-ranges .sk-ranges__cell--mitigated.is-region,
.sk-ranges .sk-ranges__cell--basic.is-region,
.sk-ranges .sk-ranges__cell--aggravated.is-region { background: var(--yg-action-tint); box-shadow: inset 0 0 0 2px var(--yg-action); }
.sk-ranges th.sk-ranges__cell--mitigated.is-region,
.sk-ranges th.sk-ranges__cell--basic.is-region,
.sk-ranges th.sk-ranges__cell--aggravated.is-region { color: var(--yg-action-deep); }

/* ⑤ 결과 「사건의 현재 위치」 항해 카드 — 삭제(대표님 「삭제」 2026-08-27 · 항해 시각물·
   어휘 전면 종결 · r2/r3 진행선 삭제의 잔여분). 카드 안 「변호사와 다음 단계 정하기」
   CTA 도 함께 내려감 — 상담 진입은 「지금 할 일」 탭 CTA 블록이 담당. 렌더 코드 보존
   (복원 = 이 1줄 제거). */
.sk-voyage-card { display: none; }

/* ── 사이클 4b — W5 심벌 정본 적용 (2026-08-27 대표님 「승인. 파비콘·헤더 타일 교체 진행해」) ──
   정본 = yirun-ax docs/sentencing_kit/design_overhaul/logo/w5_vector/byeonhoguide_symbol_master.svg
   (knockout · 데이터 URI 인라인 = kit.css 캐시버스터에 실려 함께 무효화). 구 임시 타일
   (체크 마크 · 「이룬」 글자)은 위 규칙에 보존 — 이 블록이 cascade 로 대체한다. */
.sk-topbar__badge::before {
  background: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201000%201000%22%3E%3Cpath%20fill=%22%232E5BFF%22%20fill-rule=%22evenodd%22%20d=%22M%20265%200%20H%20735%20C%20899%200%201000%20101%201000%20265%20V%20735%20C%201000%20899%20899%201000%20735%201000%20H%20265%20C%20101%201000%200%20899%200%20735%20V%20265%20C%200%20101%20101%200%20265%200%20Z%20M%20312%20100%20A%20160%20160%200%201%200%20312.01%20100%20Z%20M%20574%2050%20A%20282%20408%200%200%201%20856%20458%20L%20574%20458%20Z%20M%20365%20500%20L%20825%20500%20A%2097.5%2097.5%200%200%201%20825%20695%20L%20270%20695%20L%20270%20630%20L%20825%20630%20A%2032.5%2032.5%200%200%200%20825%20565%20L%20365%20565%20Z%20M%2064%20720%20L%20938%20720%20L%20908%20793%20L%20672%20793%20L%20672%20888%20L%20593%20888%20L%20593%20793%20L%20200%20793%20C%20290%20868%20415%20918%20548%20938%20C%20462%20958%20358%20958%20285%20940%20C%20175%20905%20100%20820%2064%20720%20Z%22/%3E%3C/svg%3E");
  background-size: contain; background-position: center; background-repeat: no-repeat;
  border-radius: 0;
}
.sk-eg-avatar {
  background: transparent url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201000%201000%22%3E%3Cpath%20fill=%22%232E5BFF%22%20fill-rule=%22evenodd%22%20d=%22M%20265%200%20H%20735%20C%20899%200%201000%20101%201000%20265%20V%20735%20C%201000%20899%20899%201000%20735%201000%20H%20265%20C%20101%201000%200%20899%200%20735%20V%20265%20C%200%20101%20101%200%20265%200%20Z%20M%20312%20100%20A%20160%20160%200%201%200%20312.01%20100%20Z%20M%20574%2050%20A%20282%20408%200%200%201%20856%20458%20L%20574%20458%20Z%20M%20365%20500%20L%20825%20500%20A%2097.5%2097.5%200%200%201%20825%20695%20L%20270%20695%20L%20270%20630%20L%20825%20630%20A%2032.5%2032.5%200%200%200%20825%20565%20L%20365%20565%20Z%20M%2064%20720%20L%20938%20720%20L%20908%20793%20L%20672%20793%20L%20672%20888%20L%20593%20888%20L%20593%20793%20L%20200%20793%20C%20290%20868%20415%20918%20548%20938%20C%20462%20958%20358%20958%20285%20940%20C%20175%20905%20100%20820%2064%20720%20Z%22/%3E%3C/svg%3E") center / contain no-repeat;
  border: none; border-radius: 0;
}
.sk-eg-avatar::after { content: none; }

/* ── 사이클 5 — 결과 탭 바 세그먼트 승격 (2026-08-27 대표님 「상단 메뉴가 눈에 띄지 않음」 ·
   r2 = 같은 날 2차 지시 「여전히 눈에 띄지 않음」 반영: tint 활성 → 행동색 solid 활성 + 트랙 밴드) ──
   사이클 3 밑줄 탭(muted 텍스트 · 잉크 밑줄) → r1 tint 필 → r2 확정: 바 = fill-soft 트랙 밴드 ·
   활성 = 행동색 solid 필 + 흰 텍스트(선택 상태 표시 — CTA 아님 · 정본 §5 「주 채움」 규범과의
   관계는 CI 정합 상신에서 「선택 상태 예외」로 기록 예정) · 비활성 = body 텍스트 · hover = surface.
   sticky·스크롤·오버플로 글리프 메커니즘 무변경(시각만). 구 규칙은 위 블록들에 보존 — cascade 대체. */
.sk-result-tabbar {
  background: var(--yg-fill-soft); border-bottom: 1px solid var(--yg-line);
  padding: 9px 12px; gap: 6px;
}
.sk-result-tabbar-wrap::before { color: var(--yg-body); background: linear-gradient(to right, var(--yg-fill-soft) 45%, transparent); }
.sk-result-tabbar-wrap::after { color: var(--yg-body); background: linear-gradient(to left, var(--yg-fill-soft) 45%, transparent); }
.sk-result-tab {
  border: 0; border-radius: var(--yg-r-pill);
  padding: 9px 15px; font-size: 14.5px; font-weight: 600; color: var(--yg-body);
  background: none;
}
.sk-result-tab:hover { color: var(--yg-ink); background: var(--yg-surface); }
.sk-result-tab.is-active { background: var(--yg-action); color: #FFFFFF; font-weight: 700; }
.sk-result-tab:focus-visible { outline: 2px solid var(--yg-action); outline-offset: 1px; }
/* 결과 최상단 고지 — 첫 화면 .sk-a0__notice 재사용 시 결과 흐름 안 하단 여백 보정 */
.sk-a0__notice--result { margin: 0 0 var(--sk-sp-3); }

/* ── 사이클 5-2 — 변호노트(소년·학폭) 표면 정정 (2026-08-27 대표님 지적 ②⑤) ──
   ① 카드 폭 통일: .sk-eg-richcard 의 40px 좌측 들여쓰기는 쉬운 가이드 「대화 스레드」의
   아바타 컬럼 정렬용인데, 변호노트 탭 패널이 클래스를 재사용하며 따라 들어와 첫 카드와
   폭이 어긋났다 — 노트 패널 안에서만 0 으로 되돌린다(대화 스레드 무변경).
   ② 핀 칸(「먼저 볼 세 가지」 등): flex 늘림(1 1 100px)이 문언보다 넓은 칸을 만들어
   내용 폭에 맞춘다(요약·준비 자료·지금 할 일 공유 .sk-jv-pin 단일 규칙 — 소년·학폭 공용). */
#view-jvnote .sk-eg-richcard, #view-hpnote .sk-eg-richcard { margin-left: 0; }
.sk-jv-pin { flex: 0 1 auto; }
/* 생활기록부 카드 표(--records) — 행이 단일 셀이라 .sk-jv-dispo td:last-child 의
   우측정렬·nowrap(2열 표 전제)이 그대로 걸리면 가로로 흘러넘친다 — 본문 셀 문법으로 복원. */
/* UX8 A-2(2026-08-29 대표님 지적 ⑤) — 학폭 피해측 조치 표도 행이 단일 셀이라 같은 결함
   (우측정렬·nowrap)이 걸렸다. 신규 문법을 만들지 않고 이 규칙에 --single 을 함께 건다. */
.sk-jv-dispo--records td:last-child,
.sk-jv-dispo--single td:last-child { text-align: left; white-space: normal; font-size: var(--sk-fs-notice); color: var(--sk-ink); padding-left: 0; }

/* ── UX8 B-2 「통계 시각화」 A안 — 가로 막대 (2026-08-29 대표님 「안1로 진행」 ·
   목업 yirun-ax docs/sentencing_kit/ux8_mockups/b2_a.html · 412 캡처 captures/b2_412_a.png) ──
   지적 ② = 통계가 줄글 3문장이라 크기 비교가 눈으로 안 되고, 분모가 51,020 → 30,989 로 바뀌는
   지점이 문장 속에 묻혀 있었다. 항목마다 길이를 주고, 기준이 바뀌는 경계를 구분선으로 가른다.
   막대 길이는 데이터의 percent 그대로다(CSS 에서 스케일·보정 0 — 보정하면 그림이 거짓말을 한다). */
.sk-jv-statgrp { margin: 10px 0 0; }
/* 기준(분모)이 바뀌는 경계는 눈에 보여야 한다 — 두 묶음이 붙어 있으면 같은 100%로 읽힌다. */
.sk-jv-statgrp + .sk-jv-statgrp { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--yg-line-soft); }
.sk-jv-statgrp__base { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--yg-body-strong); }
.sk-jv-statrow { margin: 0 0 9px; }
.sk-jv-statrow__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 4px; }
.sk-jv-statrow__label { font-size: var(--sk-fs-body2); color: var(--yg-ink); line-height: 1.4; }
.sk-jv-statrow__val { flex-shrink: 0; font-size: var(--sk-fs-body2); font-weight: 800; color: var(--yg-ink); white-space: nowrap; }
.sk-jv-statrow__track { height: 10px; border-radius: 5px; background: var(--yg-fill-soft); overflow: hidden; }
.sk-jv-statrow__fill { display: block; height: 100%; background: var(--yg-action); border-radius: 5px; }
.sk-jv-statrow__n { font-size: var(--sk-fs-skim); color: var(--yg-muted); margin: 3px 0 0; }
/* 사이클 5-2 r2(2026-08-27 대표님 재지시) — 핀 칸 위아래 슬림(문언 높이에 맞춤 · 구 8px 세로
   패딩이 칸을 문언보다 크게 만들었다) + 핀 헤더는 h2.sk-card__title 로 마크업 통일(app.js). */
.sk-jv-pin { padding: 4px 10px; }

/* ── UX8 B-3 B안 「요지 카드」(2026-08-29 대표님 「b안」 · 목업 yirun-ax
   docs/sentencing_kit/ux8_mockups/b3_b.html · 선정표 b3_pairs.md) ──
   지적 ③ = 결과가 카드 5~7개 평면 나열이라 어디를 먼저 봐야 할지가 없었다. 결과 첫 화면
   맨 위에 「핵심 메시지 1 + 지금 할 일 1」 쌍을 강조면 카드로 얹는다(3계통 공통).
   ⚠ 강조면을 여기서 직접 지정하는 이유 — 기존 .sk-eg-richcard--cta(L1354)는 뒤에 오는
   v2 .sk-card(L1856)가 동일 특이도로 이겨 라이브에서 뜨지 않는다(2026-08-29 실측 ·
   b3_pairs.md §5). .sk-card 와 겹쳐 쓰는 2-클래스 선택자로 잡아 순서에 의존하지 않는다.
   문안은 전건 기존 승인 문자열이고 라벨도 RESULT_TABS[todo] 재사용 — 신규 문안 0. */
.sk-card.sk-eg-keypair { background: var(--sk-action-weak); border: 1px solid var(--sk-line-strong); }
.sk-eg-keypair__msg { margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.45; color: var(--sk-ink); }
.sk-eg-keypair__todo { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--sk-line-strong); }
/* 라벨 배경을 흰색으로 두는 이유 — 카드 자체가 옅은 필이라 같은 색 필을 얹으면 라벨이 사라진다. */
.sk-eg-keypair__label { display: inline-block; margin: 0 0 5px; padding: 2px 9px; border-radius: 999px;
  font-size: var(--sk-fs-skim); font-weight: 800; letter-spacing: 0.02em; color: var(--sk-navy); background: #fff; }
.sk-eg-keypair__title { margin: 0; font-size: var(--sk-fs-body); font-weight: 800; color: var(--sk-ink); }
.sk-eg-keypair__lead { margin: 3px 0 0; font-size: var(--sk-fs-body2); line-height: 1.65; color: var(--sk-body); }

/* UX8 C-1(2026-08-29 대표님 GR-1) — 통계 소제목 바로 아래 한 문장 답 리드.
   제목과 출처 고지 사이에 놓여 「무엇의 열에 여섯인지」를 먼저 말한다. */
.sk-jv-statlead { margin: 0 0 8px; font-size: var(--sk-fs-body); font-weight: 700; line-height: 1.55; color: var(--sk-ink); }

/* UX8 C-2(2026-08-29 대표님 GR-1) — 조치 목록 표제. 표에 이름이 없어 「누구를 위한 목록인지」가
   화면에 없었다. 구조적 라벨(h3)이며 배경색이 이를 대신하지 못한다(코덱스 지적 1·3). */
.sk-jv-dispo-head { margin: 14px 0 8px; font-size: var(--sk-fs-body); font-weight: 800; color: var(--sk-ink); }