/* ============================================================
   6단계 UI 디자인 v1.0 — 목업(05_ui_design/화면목업.html) `.scr` 토큰을 제품 스코프로 옮긴 것.
   🔴 적색 계열 색값 0건(§C-2) · 다크 오버라이드 없음(§C-7) · 인라인 style 0회(§D-2 규칙 10).
   ============================================================ */
:root{
  color-scheme:light;
  --bg:#FAFAF9; --surface:#FFFFFF; --surface-2:#F4F3F0;
  --ink:#1C1B19; --ink-2:#3B3934; --muted:#5C584F; --faint:#6D6960;
  --line:#E4E2DD; --line-2:#EFEDE9; --line-input:#8A8579;
  --primary:#2E4257; --primary-ink:#FFFFFF; --accent:#7A6338;
  --ok-bg:#E7F1E9; --ok-fg:#2A5B37;
  --tk-bg:#FBF2DE; --tk-fg:#75540F;
  --na-bg:#F1F0EC; --na-fg:#545048;
  --out-bg:#E6EEF7; --out-fg:#1D4C77;
  --ok-line:#CFE2D3; --tk-line:#EFDFB8;

  /* CI (2026-09-06 결정 = 6단계 §C v1.1). 값은 로고·홈페이지 캡처에서 **실측**한 것이다.
     🔴 이 둘은 **브랜드 색**이지 상태색이 아니다 — 헤더 · 주 버튼 · 화면 제목 세로선 · PDF 표지에만
        쓰고 `.badge`·`.chip`·마일스톤·「경과」 자리에는 한 번도 쓰지 않는다. 「빨강 금지」는
        상태·경고 자리를 뜻하지 브랜드 색을 뜻하지 않는다(테마 결정 문서 「빨강 금지와의 관계」).
     🔴 상태색 토큰(--ok-* · --tk-* · --na-* · --out-*)은 **한 줄도 바꾸지 않았다.** 브랜드가
        상태 의미를 물들이면 초록·황동·파랑이 뜻하는 바가 흐려진다. */
  --brand:#8A3030; --brand-deep:#6E2626;
  /* 🔴 틸 위에 흰 글자를 얹지 않는다 — 2.69:1 로 AA(4.5) 도 큰 글자(3.0) 도 미달이다.
     쓸 수 있는 자리는 ①옅은 배경 `--brand-2-tint` 에 검정 글자(16.64:1) ②2px 이상 테두리
     ③아이콘 셋뿐이다. 원 CI 홈페이지 하단 띠(흰 글자 on 틸)를 따라 하지 않는 이유다.
     🔴 이 파일은 로그인 전에도 누구나 받는 공개 자산이다 — 주석에도 단체명을 쓰지 않는다(6단계 §E-1). */
  --brand-2:#2AAFAA; --brand-2-tint:#E3F4F3;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif;
  font-size:16px; line-height:1.65;
}
button,input,select,textarea,summary{color:inherit;font:inherit}
a{color:var(--primary)}

/* 폭 — §D-4 「400% 확대에서 가로 스크롤 없음」. 본문 폭에 고정 픽셀을 쓰지 않는다 */
.shell{max-width:1040px;margin:0 auto}
.pad{padding:16px}
/* 🔴 본문 크기 단계(§C-4) — 파트너 화면 16px · 위원 화면 14.5px.
   `.pad` 가 파트너(휴대폰 기본) 화면이고 `.pad--w` 가 위원·관리자 화면이다. */
.pad--w{padding:18px 20px;font-size:14.5px;line-height:1.55}
@media (max-width:640px){ .pad--w{padding:14px} }

/* CI 머리 — 로고 한 줄. 🔴 레이아웃이 **로그인 뒤에만** 그린다(뷰 조건 분기).
   로고는 글자보다 강한 신호라 공개면(S-01 · S-03 · OAuth 착지)에는 넣지 않는다(1단계 Q13-1). */
.cihd{background:var(--surface);border-bottom:1px solid var(--line);padding:10px 16px;display:flex;align-items:center}
.cimark{height:28px;width:auto;display:block}

/* 화면 머리 · 탭
   🔴 v1.1 — 머리 바를 짙은 남색에서 흰 배경 · 검정 글자로 바꿨다. CI 결정의 「화면 제목 =
      검정 글자 + 왼쪽 브랜드 세로선」이 남색 바 위에서는 성립하지 않는다(브랜드 #8A3030 위
      남색 #2E4257 은 1.4:1 이라 세로선이 보이지 않는다). 세로선 자체는 아래 `body.ci` 안에 있다. */
.bar{background:var(--surface);color:var(--ink);padding:11px 16px;display:flex;
  justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.bar b{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.bar span,.bar a{font-size:12.5px;color:var(--primary);text-decoration:underline}
.bar form{margin:0}
.bar .barbtn{background:transparent;border:0;padding:0;font-size:12.5px;
  color:var(--primary);text-decoration:underline;cursor:pointer;min-height:44px}
.tabs{display:flex;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
/* 🔴 링크가 아직 없는 탭(파트너ⓑ 교육자료)도 자리를 지킨다 — 탭 구성은 §E-3 이 확정했다 */
.tabs a,.tabs span{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;color:var(--muted);text-decoration:none;padding:0 4px;text-align:center}
.tabs a.on{color:var(--primary);font-weight:600;box-shadow:inset 0 -2px 0 var(--primary)}
/* 🔴 아직 서지 않은 탭은 **색 말고도** 구분 수단을 준다 — 종전에는 활성 탭과 색·굵기·크기가
   모두 같아 눌러도 아무 일이 없었다(§C-6 「배지 안에 반드시 문자가 있다」와 같은 태도). */
.tabs .soon{flex-direction:column;gap:0;line-height:1.25;color:var(--faint)}
.tabs .soon .soonmark{font-size:11px;color:var(--faint)}

/* 섹션 머리 */
.sec{display:flex;align-items:center;gap:10px;margin:20px 0 10px}
.sec:first-child{margin-top:0}
.sec h2,.sec h3,.sec h4{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--muted)}
.sec::after{content:"";flex:1;height:1px;background:var(--line)}

/* 카드 — 카드 안에 카드를 넣지 않는다(§D-1) */
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.card:last-child{margin-bottom:0}
.card h5{margin:0 0 6px;font-size:16px;font-weight:600;line-height:1.4}
.card p{margin:0 0 6px}
.card p:last-child{margin-bottom:0}
.sub{font-size:12.5px;color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;font-size:12px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

/* 배지(상태 4종) · 칩(메타) — §D-2 규칙 1·2 */
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:500;line-height:1.5;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.b-ok{background:var(--ok-bg);color:var(--ok-fg)}
.b-tk{background:var(--tk-bg);color:var(--tk-fg)}
.b-na{background:var(--na-bg);color:var(--na-fg)}
.b-out{background:var(--out-bg);color:var(--out-fg)}
.chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-input);color:var(--ink-2);
  border-radius:999px;padding:2px 9px;font-size:12.5px;line-height:1.5;background:transparent;white-space:nowrap}

/* 집계 줄 — 막대·그래프·추세선 없음(§D-1 CountRow) */
.cnt{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-2)}
.cnt:last-child{border-bottom:0}
.cnt .k{font-size:13.5px;color:var(--muted)}
.cnt .v{font-variant-numeric:tabular-nums;font-size:14.5px;font-weight:600}
.big{font-size:24px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.kpi{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:640px){ .kpi{grid-template-columns:repeat(2,1fr);gap:12px} }

/* 빈 상태 · 배너 — 닫기 버튼 없음(§D-1 Banner) */
.empty{border:1px dashed var(--line-input);border-radius:10px;padding:16px;color:var(--muted);font-size:14.5px;text-align:center}
.banner{border-radius:8px;padding:11px 13px;font-size:13.5px;margin-bottom:12px;border:1px solid var(--line)}
.bn-info{background:var(--surface-2);border-color:var(--line)}
.bn-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-fg)}
.bn-tk{background:var(--tk-bg);border-color:var(--tk-line);color:var(--tk-fg)}
.banner b{display:block;margin-bottom:2px}

/* 버튼 · 폼 — 파괴적 동작도 보조 버튼 형태(§D-1 Button) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;
  background:var(--primary);color:var(--primary-ink);border:1px solid var(--primary);border-radius:8px;
  font-size:16px;font-weight:600;text-decoration:none;cursor:pointer}
.btn2{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-input);border-radius:8px;
  font-size:14.5px;text-decoration:none;cursor:pointer}
.btn--full{width:100%}
.btn--sm{min-height:34px;padding:0 10px;font-size:13.5px}
.lnk{color:var(--primary);text-decoration:underline;font-size:14.5px;background:transparent;border:0;padding:0;cursor:pointer}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-bottom:4px}
.fld input,.fld textarea,.fld select{width:100%;min-height:44px;padding:9px 11px;background:var(--surface);
  border:1px solid var(--line-input);border-radius:8px;font-size:16px}
.fld textarea{min-height:76px;line-height:1.55;resize:vertical}
.fld--inline{margin:0;flex:1;min-width:170px}
.hint{font-size:12.5px;color:var(--muted);margin:4px 0 0}
.err{font-size:13.5px;color:var(--ink);margin:4px 0 0}   /* 오류는 검정 문장 — 색·아이콘으로 알리지 않는다(§D-4) */
.cbx{min-height:auto;width:auto}
form.inline{display:inline}

/* ============================================================
   CI 적용 스코프 — 🔴 브랜드 색은 `<body class="ci">` 안에서만 산다.
   레이아웃이 **로그인한 세션에만** 그 클래스를 붙이므로, 기본값은 중립(회색·남색)이다.
   공개면에서 CI 를 빼는 방식을 「빼기」가 아니라 「기본 거부 + 로그인 뒤 켜기」로 둔 이유:
   앞으로 공개 화면이 하나 더 생겨도 아무 일도 하지 않으면 CI 가 새지 않는다. 반대로 짜면
   새 화면마다 예외를 기억해야 하고, 잊은 화면은 조용히 단체를 드러낸다(1단계 Q13-1).
   ============================================================ */
/* 주 버튼 — 흰 글자 on --brand = 8.25:1 (AA · AAA). 눌림 · 호버는 --brand-deep(10.67:1) */
body.ci .btn{background:var(--brand);border-color:var(--brand)}
body.ci .btn:hover,body.ci .btn:active{background:var(--brand-deep);border-color:var(--brand-deep)}
/* 보조 버튼 — 흰 배경에 브랜드 테두리 · 글자(8.25:1) */
body.ci .btn2{color:var(--brand);border-color:var(--brand)}
/* 화면 제목 왼쪽 세로선 3px — 글자는 검정 그대로다 */
body.ci .bar b{border-left:3px solid var(--brand);padding-left:10px}
/* 활성 탭 밑줄 2px. 🔴 색만으로 활성을 말하지 않는다 — 굵기(600)가 그대로 남아 있다(§D-4) */
body.ci .tabs a.on{box-shadow:inset 0 -2px 0 var(--brand)}

/* TODO(파트너ⓑ · 내보내기 PDF 표지): 5단계 B-3 20 번 라우트가 서면 표지에 아래를 적용한다.
   지금은 내보내기 경로가 없어 **주석으로만** 남긴다 — 쓰지 않는 규칙을 미리 CSS 로 깔면
   어느 화면에 적용되는지 아무도 모르는 죽은 선언이 된다.
     · 상단: `ci-mark.png` (마크+워드마크, 높이 28~32px — 384×106 래스터라 그 이상은 흐려진다)
     · 제목: 검정
     · 하단 띠: 배경 --brand · 흰 글자로 「열람자 · 생성 일시 · 식별자」(8.25:1)
     · 🔴 파일명 · PDF 메타(제목 · 작성자)는 5단계 §C-6 대로 **중립 유지** — 표지에 로고가
       들어가도 파일 이름과 메타는 단체를 말하지 않는다. 표지는 파트너가 자기 코디에게 주는
       문서라 공식성이 도움이 되지만, 파일은 그 사람 손을 떠나 어디로든 간다.
     · 🔴 위원 메모는 표지에도 본문에도 없다(3단계 §E-7). */

/* 포커스 · 건너뛰기 — outline:none 을 어디에도 쓰지 않는다(§D-4) */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* 🔴 §C-3 함정 3 의 뒤집기(`.bar :focus-visible{outline-color:var(--primary-ink)}`)를 **지웠다.**
   그 한 줄은 짙은 남색 바를 전제로 흰 링을 그리던 것인데, v1.1 에서 바가 흰 배경이 되어
   그대로 두면 링이 배경과 같은 흰색(1.00)이 되어 「로그아웃」·「돌아가기」가 전 화면에서
   포커스 표시를 잃는다. 이제 기본 링(--primary, 흰 바탕 대비 9.4:1)이 그대로 맞는다. */
/* 🔴 건너뛰기 링크는 첫 포커스 대상인데(§D-4) 머리 바 위에 같은 색으로 겹쳐 링도 경계도
   보이지 않았다. 배경·글자를 뒤집어 겹침과 대비를 함께 푼다. */
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--primary);
  border:1px solid var(--primary);padding:10px 14px;border-radius:0 0 8px 0;font-size:14.5px;
  text-decoration:underline;z-index:5}
.skip:focus{left:0}

/* 🔴 §D-4 「400% 확대에서 가로 스크롤 없음」 — 공백 없는 긴 문자열(이메일 · URL)이 375px 에서
   페이지를 가로로 넓힌다. 실측: 초대 확인 447px · 메모 목록 695px.
   초대 화면은 미관이 아니라 판단의 문제다 — 어느 계정에 연결되는지 못 본 채 「연결하기」를 누른다. */
.kv > span,.card p,.pvbox p,.mono,.list li,.copy,.empty{overflow-wrap:anywhere}
@media (max-width:480px){
  .kv{flex-direction:column;gap:2px}
  .kv .k{width:auto}
}

/* 표 — 900px 미만에서 카드로 접힌다(§D-1 DataTable). 가로 스크롤로 대신하지 않는다 */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl caption{text-align:left;font-size:12.5px;color:var(--muted);padding-bottom:8px}
.tbl th{text-align:left;font-size:12.5px;font-weight:500;color:var(--muted);padding:0 12px 8px 0;border-bottom:1px solid var(--line-input)}
.tbl td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line-2);vertical-align:top;line-height:1.5;min-height:44px}
.tbl tbody tr:hover td{background:var(--surface-2)}
@media (max-width:899px){
  .tbl thead{position:absolute;left:-9999px}
  .tbl tr{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;
    padding:12px 14px;margin-bottom:12px}
  .tbl td{display:flex;gap:10px;justify-content:space-between;border-bottom:1px solid var(--line-2);padding:7px 0}
  .tbl td:last-child{border-bottom:0}
  .tbl td::before{content:attr(data-label);color:var(--muted);font-size:12.5px;flex:none}
  .tbl td.lead::before{content:none}
  .tbl td.lead{border-bottom:1px solid var(--line-2);font-weight:600}
}

/* 층 블록 (S-13 · S-20) — 보더 · 층 라벨 칩 · 배경 명도 셋을 함께(§B-0) */
.layer{border:1px solid var(--line);border-radius:8px;padding:11px 13px;margin-bottom:10px}
.layer .lhd{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.layer .lhd b{font-size:13.5px}
.lay-c{background:var(--surface-2);border-left:3px solid var(--line-input)}
.lay-p{background:var(--surface);border-left:3px solid var(--primary)}

/* 분할 (S-13 · S-20) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.split > div{min-width:0}
.split .phd{font-size:12.5px;font-weight:600;color:var(--muted);padding-bottom:7px;margin-bottom:10px;border-bottom:1px solid var(--line-input)}
@media (max-width:1000px){ .split{grid-template-columns:1fr} }

/* 복사칸 — clipboard API 를 쓰지 않는다(§D-1 CopyBox) */
.copy{width:100%;min-height:150px;padding:11px;border:1px solid var(--line-input);border-radius:8px;
  background:var(--surface-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.65;resize:vertical}
.copy--sm{min-height:60px}

/* 미리보기 상자 */
.pvbox{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:14px}
.pvtitle{margin:0 0 6px;font-weight:600;font-size:16px}

/* 목록 · 잡다 */
.kv{display:flex;gap:10px;font-size:13.5px;padding:5px 0}
.kv .k{color:var(--muted);flex:none;width:110px}
.list{margin:0;padding-left:18px}
.list li{margin-bottom:5px}
.list--check{list-style:none;padding-left:0}
.list--check li{margin-bottom:7px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row--wide{gap:14px}
.rowbtw{justify-content:space-between}
.hr{height:1px;background:var(--line);margin:12px 0}
.m0{margin:0}
.mb6{margin:0 0 6px}
.mb8{margin:0 0 8px}
.mb10{margin-bottom:10px}
.mb12{margin:0 0 12px}
.mb14{margin-bottom:14px}
.mt6{margin-top:6px}
.mt8{margin-top:8px}
.mt10{margin:10px 0 0}
.tc{text-align:center}
.flex1{flex:1}
.selfend{align-self:flex-end}
.card--next{border-left:3px solid var(--accent)}
.doc-title{font-size:16px;font-weight:600;line-height:1.4;margin:0 0 6px;letter-spacing:-.01em}
.sp-1{height:8px}.sp-2{height:24px}.sp-3{height:48px}.sp-4{height:96px}

/* ============================================================
   여정 그래프 (05_ui_design/여정_그래프_결정_20260906.md)
   🔴 JS · SVG 라이브러리 · 외부 요청 없음 — 노드는 <li> 이고 엣지는 의사 요소다.
   🔴 상태는 색만으로 구분하지 않는다 — 노드마다 문자 라벨(.jn-s)이 함께 있고, 그 위에
      **선 굵기 · 선 종류**로 한 층을 더 준다(완료 실선 2px · 진행 중 실선 3px · 지금 여기 실선 4px ·
      다음 점선 · 예정 점점선 · 건너뜀 · 취소 · 연기 옅은 점선). 테두리 **색**만으로는 저시력에서
      갈라지지 않는다 — 실측 대비가 틸 2.69:1 · --line-2 1.17:1 로 비텍스트 3:1 에 못 미친다.
   🔴 새 색을 만들지 않았고, **브랜드 색도 쓰지 않는다.** `.jn--<상태>` 는 상태를 뜻하는 자리라
      CI 결정의 「면제는 값이 아니라 역할로 판정한다」에 걸린다(ci_theme_test 의 STATE_SELECTOR 가
      이제 이 자리를 본다). 종전에는 `.jn--current` 가 브랜드 버건디를 상태 자리에 쓰면서
      `body.ci` 스코프 **밖**에 있어, 「기본 거부 + 로그인 뒤 켜기」 백스톱의 유일한 구멍이었다.
      상태색 4계열(초록 · 황동 · 파랑 · 회색)도 한 줄도 건드리지 않는다.
   ============================================================ */
.journey{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:14px}
.jn{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:9px 12px}
.jn-l{display:block;font-size:14.5px;font-weight:600;line-height:1.4}
.jn-s{font-size:12.5px;color:var(--muted)}
/* 🔴 회차 노드는 회차 상세(S-10)로 들어가는 앱 안 유일한 진입점인데 실측 타깃이 123×17px 이었다 —
   앱의 다른 대화 요소가 전부 지키는 44px(§D-4 · WCAG 2.5.8)을 이 자리에서만 놓쳤다. */
.journey .jn-l a{display:block;min-height:44px;padding:12px 0;margin:-12px 0}
/* 엣지 — 세로 체인(기본). 완료 → 완료 · 완료 → 지금 여기는 실선, 그 뒤와 우회는 점선 */
.jn + .jn::before{content:"";position:absolute;left:20px;top:-16px;width:0;height:14px;border-left:2px solid var(--line-input)}
.jn--next::before,.jn--later::before,.jn--skipped::before,.jn--bypass::before,
.jn--canceled::before,.jn--postponed::before{border-left-style:dashed}
/* 🔴 우회 엣지 — 건너뛴 노드 **옆을 실제로 지나가는** 점선이다. 종전에는 `.jn--bypass` 클래스만
   있고 그 선언이 `.jn--next` 와 완전히 같아, 화면 · 인쇄 어디에도 우회선이 나타나지 않았다. */
.jn--skipped::after{content:"";position:absolute;left:-10px;top:-16px;bottom:-16px;
  border-left:2px dashed var(--line-input)}
/* 상태 — 테두리 굵기 · 선 종류 · 문자만으로 읽힌다(인쇄에서 배경 · 색이 사라져도 남는 것들이다) */
.jn--done{border-color:var(--line-input)}
.jn--ongoing{border-color:var(--ink-2);border-width:3px;padding:8px 11px}
.jn--current{border-color:var(--ink-2);border-width:4px;padding:7px 10px;background:var(--surface-2)}
.jn--current .jn-s{color:var(--ink)}
.jn--next{border-color:var(--line-input);border-style:dashed}
.jn--later{border-color:var(--line-2);border-style:dotted}
.jn--later .jn-l,.jn--later .jn-s{color:var(--faint)}
.jn--skipped,.jn--canceled,.jn--postponed{border-style:dashed;border-color:var(--line-2)}
.jn--skipped .jn-l,.jn--canceled .jn-l,.jn--postponed .jn-l{color:var(--muted)}
/* 접힘 — 지나온 단계 묶음. summary 가 그 자리의 라벨이자 타깃이다(44px).
   🔴 `display:flex` 는 기본 삼각 마커를 지운다 — 여는 자리라는 신호가 통째로 사라지므로
   문자로 대신 준다(§C-6 「색 · 아이콘만으로 말하지 않는다」와 같은 태도). */
.jn--fold > details > summary{display:flex;align-items:center;min-height:44px;cursor:pointer;white-space:nowrap}
.jn--fold > details > summary::after{content:"펼치기";margin-left:8px;font-size:12.5px;font-weight:400;color:var(--muted)}
.jn--fold > details[open] > summary::after{content:"접기"}
.jn--fold > details > .journey--fold{margin-top:12px}
/* 2층 — 「개별 회차」 노드 **안쪽에 들여서** 그린다 */
.journey--sub{margin:10px 0 0;padding:0 0 0 14px;gap:12px;border-left:2px solid var(--line-2)}
.journey--sub .jn{padding:7px 10px}
/* 🔴 링크까지 포함시킨다 — `.lnk`(14.5px)가 `.jn-l`(13.5px)을 이겨 종전 선언이 죽어 있었다 */
.journey--sub .jn-l,.journey--sub .jn-l .lnk{font-size:13.5px}
.journey--sub .jn--ongoing{padding:6px 9px}
.journey--sub .jn--current{padding:5px 8px}
/* 데스크톱 — 같은 마크업이 가로 체인이 된다(§ 배치) */
@media (min-width:900px){
  .journey{flex-direction:row;align-items:flex-start;gap:16px}
  .journey > .jn{flex:1;min-width:0}
  /* 🔴 2층이 부모 열(1/6 = 153px 실측) 안에서 짜이면 회차가 세로로 쌓여 가로 체인이 무너진다.
     회차를 품은 노드에 폭을 더 줘 회차들이 아래 **행**으로 펼쳐지게 한다. */
  .journey > .jn--has-sub{flex:3 1 0}
  /* 접힘 노드는 라벨 폭만 차지한다 — flex:1 로 나누면 「지나온 2단/계 · 펼치/기」로 쪼개져 읽힌다(정적 미리보기 실측). */
  .journey > .jn--fold{flex:0 0 auto}
  .jn + .jn::before{left:-16px;top:18px;width:14px;height:0;border-left:0;border-top:2px solid var(--line-input)}
  .jn--next::before,.jn--later::before,.jn--skipped::before,.jn--bypass::before,
  .jn--canceled::before,.jn--postponed::before{border-top-style:dashed}
  .jn--skipped::after{left:-16px;right:-16px;top:-10px;bottom:auto;
    border-left:0;border-top:2px dashed var(--line-input)}
  .journey--sub{flex-wrap:wrap;padding:10px 0 0;border-left:0;border-top:2px solid var(--line-2)}
  .journey--sub .jn{flex:1 1 auto}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
@media print{
  .tabs,.btn,.btn2,.fld,.skip{display:none !important}
  .badge{background:transparent !important;border:1px solid #000;color:#000 !important}
  /* 🔴 층 블록의 좌측 보더와 배경은 인쇄에서 사라진다 — 층 라벨 칩이 유일한 보증이다(§D-6) */
  .chip{border-color:#000 !important;color:#000 !important}
  .layer{border:1px solid #000 !important;background:transparent !important}
  /* 🔴 여정 그래프 — 인쇄는 `border-color` 를 검정으로 통일한다. 그래서 남는 구분 축은 **굵기와
     선 종류**뿐이다: 그 둘을 여기서 명시하지 않으면 완료 · 진행 중 · 지금 여기 · 다음이 전부
     같은 상자가 되어, 파트너가 인쇄해 코디에게 건네는 판에서 「지금 여기」가 사라진다(§D-6). */
  .jn{background:transparent !important;border-color:#000 !important}
  .jn--ongoing{border-width:3px !important}
  .jn--current{border-width:4px !important;background:transparent !important}
  .jn--next,.jn--skipped,.jn--canceled,.jn--postponed{border-style:dashed !important}
  .jn--later{border-style:dotted !important}
  .jn + .jn::before,.jn--skipped::after{border-color:#000 !important}
  .split{grid-template-columns:1fr !important}
}