/* ==========================================================================
   알파포유 안내 — 웹 쪽 짜임
   색·글자·모서리는 전부 tokens.css 의 변수에서 온다 (deck.py 에서 뽑아낸 것).
   ⛔ 이 파일에 색 값을 직접 적지 않는다. 적으면 PPTX 와 따로 늙는다.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* ⛔ `hidden` 속성은 **언제나** 숨긴다.
   브라우저의 기본 규칙 `[hidden] { display: none }` 은 이 파일의 어떤 `display`
   보다도 약하다. 그래서 `display: flex` 를 적어 둔 것에 `el.hidden = true` 를
   걸면 **아무 일도 일어나지 않는다.** 2026-10-02 에 두 군데서 겪었다 —
   상황별 안내에서 「경우 2 입니다」라고 하면서 네 경우를 다 보여 주었고,
   아래쪽 페이지바의 「이전·다음」이 첫 쪽·마지막 쪽에서도 남아 있었다.
   ⇒ 자리마다 고치지 않고 여기서 한 번에 막는다. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-top);
  color: var(--text);
  font-family: "Apple SD Gothic Neo", "Apple SD 산돌고딕 Neo", "Noto Sans KR",
               "맑은 고딕", "Malgun Gothic", system-ui, sans-serif;
  line-height: 1.6;
  word-break: keep-all;          /* 한글은 단어 중간에서 끊지 않는다 */
  overflow-wrap: anywhere;
}

/* ⭐ **글이 서는 자리** — 이 둘이 쪽의 왼쪽 끝을 정한다 (사용자 2026-10-03):
   *"맨 위의 메뉴가 본문의 맨 왼쪽과 정렬이 되면 좋겠다."*
   ⛔ 760px·16px 을 여기저기 손으로 적지 않는다. 윗 막대·본문·아래 노트가 **같은
     이름을 본다** — 폭을 바꾸면 셋이 함께 움직인다.
   글이 시작되는 x = (창폭 - --page-w) / 2 + --page-pad */
:root {
  --page-w: 760px;
  --page-pad: 16px;
  /* 창이 좁아 760px 이 다 안 들어갈 때의 가장자리 여백.
     ⭐ 본문의 안 여백과 **같은 값**으로 둔다 — 그래야 넓은 창에서든 폰에서든
       윗 막대·본문·아래 노트의 왼쪽 끝이 늘 한 줄에 선다. */
  --page-edge: var(--page-pad);
  /* 글의 왼쪽 끝까지의 거리 — 셋이 이 값을 쓴다 */
  --page-inset: max(var(--page-edge),
                    calc(50% - var(--page-w) / 2 + var(--page-pad)));
}

.doc {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 24px var(--page-pad) 40px;
}

/* --------------------------------------------------------------------------
   윗쪽 접근바 · 아랫쪽 페이지바 — 가운데만 스크롤된다
   (사용자 2026-10-02 — 알파포유 앱·노션과 닮은 짜임)
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  min-height: 52px;
  /* ⭐ 막대의 **바탕과 아래 금은 폭을 가로지르되**, 안의 것들은 본문의 왼쪽 끝에서
     시작한다 (사용자 2026-10-03). 창이 좁아지면 `--page-inset` 이 저절로 12px 로
     내려앉아 지금까지와 같아진다. */
  padding: 0 var(--page-inset);
  padding-top: env(safe-area-inset-top);
  background: var(--bg-top);
  border-bottom: 1px solid var(--panel-line);
}

.topbar .brand,
.topbar .here {
  font-size: var(--t-caption);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .here { flex: 1 1 auto; min-width: 0; color: var(--sub); }
.topbar .brand { flex: 1 1 auto; }

/* 한 줄짜리 윗 막대 — {집 아이콘} {큰 그룹명} {그 그룹의 메뉴} (사용자 2026-10-03)
   ⛔ 전에는 두 줄이었다(접근바 + 탭). 폰에서 두 줄은 본문이 시작되기도 전에 화면을
   너무 많이 먹는다. 아이콘과 그룹명은 자리를 지키고, **메뉴만 옆으로 밀린다.** */
/* ⭐ 2026-10-05 — 그림 옆에 **이름표**가 선다 (사용자: *"홈페이지 아이콘에 안내를
   연결해 보라"*). 그림만으로는 눌러 보기 전에 어디로 가는지 알 수 없었다.
   ⛔ 폭을 고정하지 않는다 — 글자가 들어가므로 `width` 를 빼고 좌우 여백으로 잡는다. */
.topbar .homebtn {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 11px;
  border: 1px solid var(--panel-line); border-radius: 9px;
  background: var(--panel);
  color: var(--accent);
  text-decoration: none;
}
.topbar .homebtn .t {
  font-size: var(--t-caption); font-weight: 700; white-space: nowrap;
}
.topbar .homebtn:hover { background: var(--chip-bg); }
.topbar .homebtn:active { transform: translateY(1px); }
.topbar .homebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ⛔ 이 이름을 `.group` 으로 지었다가 겪었다 — 안내 자료 쪽이 이미 `.group` 을 쓰고
   있고 거기에는 `::before` 로 강조 막대가 붙어 있어, **그 막대가 윗 막대로 따라
   들어왔다.** 겹치는 값은 덮어쓰지만 `::before` 는 덮이지 않는다.
   ⇒ 한 파일에 모든 쪽의 모양이 들어 있으므로 이름은 **그 자리를 가리키게** 짓는다. */
.topbar .scope {
  flex: none;
  max-width: 42vw;
  font-size: var(--t-caption); font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ⛔ 자리가 좁으면 **큰 그룹명을 치운다** (사용자 2026-10-03).
   폰에서 그 이름이 메뉴가 쓸 자리를 100px 가까이 먹는다. 그 글은 바로 아래 제목에
   이미 있고 메뉴에서 지금 쪽이 밑줄로 드러나므로 잃는 것이 없다.

   ⭐ `@media` 가 아니라 `@container` 를 쓴다 — **막대 자신의 폭**을 재어 판단한다.
     까닭 둘. (1) 정작 모자라는 것은 창이 아니라 «이 막대 안의 자리»다.
     (2) `@media` 는 창을 줄여야만 확인되는데 이 환경에서는 창이 줄지 않아
         **「된다」를 눈으로 확인할 수 없었다.** 확인할 수 없는 규칙은 두지 않는다.
   ⭐ `:has(.tabs)` — **메뉴가 옆에 있을 때만** 치운다. 안내 찾기처럼 메뉴가
     없는 쪽에서 이름까지 치우면 집 아이콘 하나만 남아 여기가 어디인지 알 수 없다. */
.topbar { container-type: inline-size; container-name: topbar; }

@container topbar (max-width: 560px) {
  .topbar:has(.tabs) .scope { display: none; }
  .topbar:has(.tabs) .tabs { border-left: 0; padding-left: 0; margin-left: 0; }
}

/* 메뉴 — 윗 막대 «안»으로 들어왔으므로 스스로 붙어 있지 않는다 */
.topbar .tabs {
  position: static;
  flex: 1 1 auto; min-width: 0;
  align-self: stretch;
  padding: 0; border-bottom: 0;
  /* 그룹명과 메뉴 사이에 얇은 금 하나 — 둘이 붙어 보이지 않게 */
  border-left: 1px solid var(--panel-line);
  padding-left: 10px; margin-left: 2px;
}

/* 집 아이콘 오른쪽의 «이 갈래 메뉴» — 자료 쪽의 「목록」이 여기 온다.
   사용자 지시 (2026-10-03): *"윗쪽에는 해당 파트의 메뉴가 홈 아이콘 오른쪽에
   있을 수 있도록 허용하라."* */
.topbar .partmenu {
  flex: none;
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 10px;
  border: 1px solid var(--panel-line); border-radius: 8px;
  background: var(--panel); color: var(--accent);
  font-size: var(--t-caption); font-weight: 700; text-decoration: none;
}
.topbar .partmenu:hover { background: var(--chip-bg); }
/* 아주 좁으면 메뉴 글자는 치운다 — 집 아이콘과 제목이 먼저다 */
@container topbar (max-width: 420px) {
  .topbar .partmenu { display: none; }
}

.topbar .back,
.topbar .toc-open {
  flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 36px; padding: 0 10px;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--accent);
  font: inherit; font-size: var(--t-caption); font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.topbar .back:active,
.topbar .toc-open:active { background: var(--chip-bg); }

/* --- 아랫쪽 페이지바 --- */
.pagebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  background: var(--bg-top);
  border-top: 1px solid var(--panel-line);
}
/* 본문이 페이지바에 가리지 않게 자리를 비워 둔다 */
body:has(.pagebar) .doc { padding-bottom: 96px; }

.pagebar a {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 44px; padding: 4px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
}
.pagebar a:active { background: var(--chip-bg); }
.pagebar .prev { align-items: flex-start; text-align: left; }
.pagebar .next { align-items: flex-end; text-align: right; grid-column: 3; }
.pagebar .home {
  grid-column: 2;
  align-items: center;
  border: 1px solid var(--panel-line);
  background: var(--panel);
  color: var(--accent);
  font-size: var(--t-caption); font-weight: 700;
  justify-content: center;
}
.pagebar .lbl { font-size: 11px; color: var(--muted); line-height: 1.2; }
.pagebar .ttl {
  font-size: var(--t-caption); font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 차례 시트 --- */
.toc-sheet {
  width: min(560px, calc(100% - 24px));
  max-height: 72vh;
  margin: auto;
  padding: 0;
  border: 1px solid var(--panel-line);
  border-radius: var(--corner);
  background: var(--bg-top);
  color: var(--text);
  overflow: hidden;
}
.toc-sheet::backdrop { background: rgba(0, 0, 0, 0.5); }
.toc-sheet .sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--panel-line);
  font-size: var(--t-card-lead);
}
.toc-sheet .sheet-close {
  min-width: 36px; min-height: 36px;
  border: 0; background: none; color: var(--sub);
  font-size: 17px; cursor: pointer;
}
.toc-sheet nav { display: block; max-height: 60vh; overflow-y: auto; padding: 6px; }
.toc-sheet nav a {
  display: block;
  padding: 11px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: var(--t-toc-item);
  line-height: 1.35;
}
.toc-sheet nav a:hover,
.toc-sheet nav a:active { background: var(--chip-bg); color: var(--accent); }

/* --------------------------------------------------------------------------
   소개 갈래 — 지금 www(노션) 의 탭 여섯과 아래쪽 회사 정보를 그대로 둔다
   ⛔ 구조는 건드리지 않는다 (사용자 2026-09-15 확정). 옮기기만 한다.
   -------------------------------------------------------------------------- */
.tabs {
  display: flex; align-items: stretch; gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs a {
  flex: none;
  display: flex; align-items: center;
  padding: 0 10px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: var(--t-caption);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.tabs a:hover { color: var(--sub); }
.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }

/* --- 소개 쪽의 글 --- */
.intro h1 {
  margin: 4px 0 20px;
  font-size: var(--t-cover-title);
  line-height: var(--lh-cover-title);
  letter-spacing: -0.015em;
  font-weight: 800;
}
.intro h2 {
  margin: 30px 0 10px;
  font-size: var(--t-page-title);
  line-height: var(--lh-page-title);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.intro h3 {
  margin: 22px 0 8px;
  font-size: var(--t-card-head);
  line-height: 1.35;
  font-weight: 700;
  color: var(--accent);
}
.intro p {
  margin: 0 0 14px;
  font-size: var(--t-panel-body);
  line-height: var(--lh-panel-body);
  color: var(--text);
}
.intro blockquote {
  margin: 0 0 22px;
  padding: 16px var(--card-pad);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--corner);
}
.intro blockquote p { margin: 0 0 6px; }
.intro blockquote p:first-child { font-weight: 700; color: var(--accent); }
.intro blockquote p:last-child { margin: 0; color: var(--muted); font-size: var(--t-caption); }

.intro ul.plain {
  margin: 0 0 16px; padding: 0; list-style: none;
  font-size: var(--t-panel-check);
  line-height: var(--lh-panel-check);
  color: var(--sub);
}
.intro ul.plain li { padding-left: 16px; position: relative; }
.intro ul.plain li + li { margin-top: 7px; }
.intro ul.plain li::before {
  content: ""; position: absolute; left: 3px; top: 0.66em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent2);
}

/* 기타질문 — 위쪽 「질문 리스트」. 누르면 그 물음의 상자가 열린다.
   ⛔ 긁어 왔을 때 이 차례는 링크를 잃고 «죽은 글자»가 되어 있었다. */
.intro .qtoc {
  margin: 0 0 26px; padding: 16px var(--card-pad) 14px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--corner);
  scroll-margin-top: 66px;
}
.intro .qtoc-head {
  margin: 0 0 12px;
  font-size: var(--t-card-head); line-height: 1.35; font-weight: 700;
}
.intro .qtoc-head span {
  display: block; margin-top: 3px;
  font-size: var(--t-caption); font-weight: 400; color: var(--muted);
}
.intro .qtoc ol {
  margin: 0; padding-left: 1.45em;
  font-size: var(--t-panel-check); line-height: var(--lh-panel-check);
}
.intro .qtoc li + li { margin-top: 7px; }
.intro .qtoc li::marker { color: var(--accent2); font-weight: 700; }
.intro .qtoc a { color: var(--text); text-decoration: none; }
.intro .qtoc a:hover { color: var(--accent); text-decoration: underline; }

/* 접었다 펴는 상자 — 노션의 토글 자리.
   ⛔ 여는 일은 `<details>` 가 한다. CSS 는 모양만 맡는다 — 자바스크립트가 꺼져도
   눌러 열리고, 종이로 찍을 때는 `@media print` 가 모두 펴 둔다. */
.intro .foldbar { display: flex; gap: 8px; margin: 0 0 10px; }
.intro .foldbar button {
  padding: 6px 12px;
  font: inherit; font-size: var(--t-caption); font-weight: 700;
  color: var(--sub); background: var(--panel);
  border: 1px solid var(--panel-line); border-radius: 999px;
  cursor: pointer;
}
.intro .foldbar button:hover { color: var(--accent); border-color: var(--accent); }

.intro .fold {
  margin: 0 0 8px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--corner);
  scroll-margin-top: 66px;
}
.intro .fold > summary {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px var(--card-pad);
  font-size: var(--t-card-head); line-height: 1.4; font-weight: 700;
  color: var(--text); cursor: pointer;
  list-style: none;                 /* 기본 삼각형을 치우고 우리 표식을 쓴다 */
}
.intro .fold > summary::-webkit-details-marker { display: none; }
.intro .fold > summary::before {
  content: "▸"; flex: 0 0 auto;
  color: var(--accent); font-weight: 400;
  transition: transform 0.15s ease;
}
.intro .fold[open] > summary::before { transform: rotate(90deg); }
.intro .fold[open] > summary { color: var(--accent); }
.intro .fold > summary:hover { background: var(--chip-bg); border-radius: var(--corner); }
.intro .foldbody { padding: 0 var(--card-pad) 4px; }
.intro .foldbody > p:last-child { margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) {
  .intro .fold > summary::before { transition: none; }
}
/* ⛔ 종이로 찍을 때 접힌 글이 사라지면 안 된다 — 모두 펴서 찍는다 */
@media print {
  .intro .foldbar { display: none; }
  .intro .fold { border: 0; background: none; break-inside: avoid; }
  .intro .fold > summary { padding-left: 0; }
  .intro .fold > summary::before { content: ""; }
  .intro .foldbody { padding-left: 0; display: block !important; }
}

/* 약관 쪽 — 정본(DB) 을 그대로 보여 준다.
   .legaltitle  정본이 스스로 밝히는 문서명 (탭 이름과 다를 수 있다)
   .legalmeta   어느 판인지 — version · 등록일 · 글자 수
   .lawitems    층 있는 번호 항목. 번호는 «글»이므로 CSS 로 세지 않는다 —
                정본의 번호를 그대로 찍고, 들여쓰기만 data-depth 로 준다.
                ⛔ list-style 로 다시 세면 정본과 번호가 어긋난다. */
.intro .legaltitle {
  margin: -12px 0 4px;
  font-size: var(--t-card-head); font-weight: 700;
  line-height: 1.35; color: var(--text);
}
.intro .legalmeta {
  margin: 0 0 24px; padding-bottom: 14px;
  border-bottom: 1px solid var(--panel-line);
  font-size: var(--t-caption); line-height: 1.5; color: var(--muted);
}
.intro .legalmeta .src { display: block; margin-top: 3px; }

.intro ul.lawitems {
  margin: 0 0 16px; padding: 0; list-style: none;
  font-size: var(--t-panel-body);
  line-height: var(--lh-panel-body);
  color: var(--text);
}
.intro ul.lawitems li {
  display: flex; gap: 8px;
  margin-left: calc(var(--law-depth, 0) * 20px);
}
.intro ul.lawitems li + li { margin-top: 8px; }
.intro ul.lawitems li[data-depth="1"] { --law-depth: 1; }
.intro ul.lawitems li[data-depth="2"] { --law-depth: 2; }
.intro ul.lawitems li[data-depth="3"] { --law-depth: 3; }
.intro ul.lawitems li[data-depth="4"] { --law-depth: 4; }
.intro ul.lawitems .mk {
  flex: 0 0 auto; min-width: 1.5em;
  color: var(--accent2); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.intro ul.lawitems li[data-depth="0"] > .mk { color: var(--accent); }

/* --------------------------------------------------------------------------
   노션 블록에서 온 것들 (`build_notion.py` → `blocks.html.j2`)
   ⛔ 번호·글머리는 CSS 가 센다. 약관(`.lawitems`)과 다른 점이다 — 약관은 정본의
   번호가 «글»이라 CSS 로 다시 세면 어긋나고, 여기는 노션이 목록으로 적어 둔 것이다.
   -------------------------------------------------------------------------- */
.intro a { color: var(--accent); text-decoration: none; }
/* ⛔ 밑줄은 **글 속의 링크에만** 긋는다. 한때 `.intro a:hover` 로 넓게 걸었더니
   상황 갈래의 **카드에도 밑줄이 그어졌다** — 대문에는 `.intro` 가 없어 거기만
   달랐고, 사용자가 둘을 나란히 보고 알렸다 (2026-10-03).
   ⇒ 카드는 상자 전체가 누르는 자리라 밑줄이 필요 없다. 아래 「카드꼴 링크」 규칙이
     한 번 더 못을 박는다. */
.intro p a:hover, .intro li a:hover { text-decoration: underline; }
.intro p a, .intro li a { text-decoration: underline; text-underline-offset: 2px; }
/* ⭐ 카드 **머리 속의 링크** (2026-10-05). 머리가 다른 갈래를 가리키는 자리가 있다 —
   「그 뒤 — 개인지갑으로 시작 와 같습니다」. 머리 글자색과 링크색이 둘 다 `--accent`
   라 밑줄이 없으면 **링크인 줄 알 수 없다** (찍어 놓고 눈으로 보고서 알았다).
   ⛔ 「카드꼴 링크」(`a.tocitem` 등 — 상자 전체가 누르는 자리)와 헷갈리지 않는다.
     여기는 **머리 글 가운데 한 토막만** 링크다. */
.intro .card h3 a { text-decoration: underline; text-underline-offset: 3px; }
.intro .card.alert h3 a { color: inherit; }

.intro ul.nlist, .intro ol.nlist {
  margin: 0 0 16px; padding-left: 1.5em;
  font-size: var(--t-panel-body);
  line-height: var(--lh-panel-body);
}
.intro ul.nlist { list-style: disc; }
.intro ol.nlist { list-style: decimal; }
.intro .nlist li { margin: 0 0 7px; }
.intro .nlist li::marker { color: var(--accent2); }
.intro .nlist .nlist { margin: 7px 0 0; }
.intro .nlist p { margin: 6px 0; }

.intro .ncallout {
  display: block;
  margin: 0 0 20px; padding: 14px var(--card-pad) 2px;
  background: var(--chip-bg);
  border: 1px solid var(--panel-line);
  border-left: 3px solid var(--accent2);
  border-radius: var(--corner);
}
.intro .ncallout > :last-child { margin-bottom: 14px; }

.intro .nquote {
  margin: 0 0 18px; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--panel-line);
  color: var(--sub);
}
.intro .nquote p { margin: 0; }

.intro .ncode {
  margin: 0 0 16px; padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--corner);
  font-size: var(--t-caption);
  overflow-x: auto;
}

.intro hr {
  margin: 26px 0; border: 0;
  border-top: 1px solid var(--panel-line);
}

/* 그림은 안내 자료와 **같은 격자**(`.shots`)를 쓴다 — 모양을 새로 만들지 않는다.
   다만 여기서는 **높이를 자른다.**
   ⛔ 까닭 — 이 쪽들의 그림은 거의 모두 «폰 화면»이고 단계마다 한 장씩 홀로 선다.
     자르지 않으면 한 장이 한 화면을 가득 채워, 「신규회원 가입」 하나가 스물한
     화면이 된다. 글은 그 사이에서 사라진다.
   ⭐ 자른 것은 **윗부분을 남긴다** — 폰 화면은 위가 본론이다. 누르면 `viewer.js` 가
     전체를 띄우므로 잘린 아래도 한 번에 볼 수 있다. */
.intro .shots { margin: 0 0 20px; justify-content: flex-start; }
.intro .shots .shot { position: relative; }
.intro .shots .shot img {
  max-height: 340px;
  object-fit: cover;
  object-position: top center;
}
/* 잘렸다는 것을 보이게 — 아래쪽을 살짝 어둡게 하고 「눌러 보기」를 띄운다 */
.intro .shots .shot::after {
  content: "눌러서 전체 보기";
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 0 7px;
  font-size: var(--t-caption); font-weight: 700;
  color: var(--accent);
  background: linear-gradient(to top, var(--bg-top) 38%, transparent);
  border-radius: 0 0 calc(var(--corner) * 0.7) calc(var(--corner) * 0.7);
  pointer-events: none;
}
@media print {
  .intro .shots .shot img { max-height: none; object-fit: contain; }
  .intro .shots .shot::after { content: none; }
}

/* --------------------------------------------------------------------------
   상황별 안내 (`situkit.py` · `steps.html.j2` · `steps.js`)
   — **한 번에 한 단계만** 묻고, 다 고르면 그 경우 한 장이 나온다 (사용자 2026-10-03)
   ⛔ `steps.js` 가 없어도 **모든 단계와 모든 경우가 보인다.** 좁히는 것은 편의일 뿐
     내용을 숨기는 장치가 아니다 — 그래서 여기에는 «숨기는 규칙»이 없다. 숨기는 일은
     전부 `hidden` 바탕속성이 하고, 그것을 붙이는 것은 자바스크립트다.
   -------------------------------------------------------------------------- */
.situation .lead {
  margin: -8px 0 24px;
  font-size: var(--t-page-lead); line-height: 1.5; color: var(--sub);
}

.steps { margin: 0 0 24px; }

.steps .step {
  margin: 0 0 14px; padding: 16px var(--card-pad) 14px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--corner);
}
.steps .step legend {
  display: flex; align-items: baseline; gap: 9px;
  padding: 0; font-size: var(--t-card-head); font-weight: 700; color: var(--text);
}
/* 「1 / 2」 — 몇 번째 단계인지. ⭐ 이 표시가 있으므로 물음에서 「첫번째 질문 ·」 을
   떼어 냈다 (`build_situation.py`). 같은 말을 두 자리에 두지 않는다. */
.steps .step legend .no {
  flex: none;
  padding: 2px 8px;
  background: var(--chip-bg); border-radius: 999px;
  font-size: var(--t-caption); font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.steps .step p {
  margin: 8px 0 0;
  font-size: var(--t-panel-check); line-height: var(--lh-panel-check); color: var(--sub);
}
.steps .opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.steps .opts button {
  flex: 1 1 220px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 14px;
  font: inherit; text-align: left;
  color: var(--text); background: var(--bg-top);
  border: 1px solid var(--panel-line); border-radius: var(--corner);
  cursor: pointer;
}
.steps .opts button .t { font-size: var(--t-panel-body); font-weight: 700; }
.steps .opts button .h {
  font-size: var(--t-caption); line-height: 1.45; color: var(--muted);
}
.steps .opts button:hover { border-color: var(--accent); }
.steps .opts button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.steps .opts button.on { border-color: var(--accent); background: var(--chip-bg); }
.steps .opts button.on .t { color: var(--accent); }

/* 이미 답한 단계는 **접어 둔다** — 답만 남기고 설명과 안 고른 갈래는 치운다.
   ⭐ 지우지 않고 접는 까닭 — 답을 **다시 누르면 그 단계가 펴지고** 뒤의 답이 풀린다.
     고치려고 처음부터 다시 할 일이 없다. */
.steps .step.done { padding: 10px var(--card-pad); background: var(--bg-top); }
.steps .step.done p { display: none; }
.steps .step.done .opts { margin-top: 8px; }
.steps .step.done .opts button:not(.on) { display: none; }
.steps .step.done .opts button.on { flex: 0 1 auto; padding: 7px 12px; }
.steps .step.done .opts button.on .h { display: none; }

/* 다 고른 뒤 — 「개인지갑 · 쓰고 계심 — 회원님의 경우입니다.」 */
.steps .outlead {
  margin: 0 0 10px; padding: 11px 14px;
  background: var(--chip-bg); border-radius: var(--corner);
  font-size: var(--t-panel-check); font-weight: 700; color: var(--accent);
}

/* 결과 카드 — 눌러서 그 쪽으로 간다 */
.steps .case {
  display: block; margin: 0 0 10px; padding: 15px var(--card-pad);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-left: 5px solid var(--accent);
  border-radius: var(--corner);
  color: var(--text); text-decoration: none;
}
.steps .case:hover { background: var(--chip-bg); }
.steps .case:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.steps .case h3 {
  margin: 0; font-size: var(--t-card-head); font-weight: 800; color: var(--accent);
}
.steps .case .how {
  margin: 5px 0 0; font-size: var(--t-panel-body); line-height: 1.5; color: var(--text);
}
.steps .case .note {
  margin: 6px 0 0; font-size: var(--t-caption); line-height: 1.5; color: var(--muted);
}
.steps .case .go {
  display: inline-block; margin: 11px 0 0;
  font-size: var(--t-panel-check); font-weight: 700; color: var(--accent);
}

.steps .restart {
  display: inline-block; padding: 9px 14px;
  font: inherit; font-size: var(--t-caption); font-weight: 700;
  color: var(--sub); background: var(--bg-top);
  border: 1px solid var(--panel-line); border-radius: var(--corner);
  cursor: pointer;
}
.steps .restart:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------------------
   안내 찾기 (`build_toc.py`) — 책의 차례처럼 묶고, 맨 위에서 찾는다
   ⛔ 찾는 동안에는 묶음이 사라지고 **찾은 카드만** 나란히 선다 (사용자 2026-10-03).
     DOM 을 두 벌 만들지 않는다 — `display: contents` 로 상자만 없앤다.
   -------------------------------------------------------------------------- */
.sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.tocsearch { position: relative; margin: 0 0 10px; }
.tocsearch input {
  width: 100%; padding: 13px 40px 13px 15px;
  font: inherit; font-size: var(--t-panel-body);
  color: var(--text); background: var(--panel);
  border: 1px solid var(--panel-line); border-radius: var(--corner);
  -webkit-appearance: none; appearance: none;
}
.tocsearch input::placeholder { color: var(--muted); }
.tocsearch input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.tocsearch input::-webkit-search-cancel-button { display: none; }
.tocsearch [data-clear] {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: none; color: var(--muted);
  font: inherit; cursor: pointer;
}
.tocsearch [data-clear]:hover { color: var(--accent); background: var(--chip-bg); }
.tochit {
  margin: 0 0 14px;
  font-size: var(--t-caption); font-weight: 700; color: var(--accent);
}
.tocnone {
  margin: 20px 0; padding: 18px var(--card-pad);
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: var(--corner);
  font-size: var(--t-panel-body); color: var(--sub); text-align: center;
}

.tocbranch { margin: 26px 0 0; }
.tocbranch > h2 {
  margin: 0 0 4px;
  font-size: var(--t-page-title); line-height: var(--lh-page-title);
  font-weight: 800; letter-spacing: -0.01em;
}
.tocbranch > .lead {
  margin: 0 0 12px;
  font-size: var(--t-caption); line-height: 1.5; color: var(--muted);
}

.tocgroup { margin: 0 0 6px; }
.tocgroup > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  background: var(--panel);
  border: 1px solid var(--panel-line); border-radius: var(--corner);
  font-size: var(--t-panel-body); font-weight: 700; color: var(--text);
  cursor: pointer; list-style: none;
}
.tocgroup > summary::-webkit-details-marker { display: none; }
.tocgroup > summary::before {
  content: "▸"; color: var(--accent); font-weight: 400;
  transition: transform 0.15s ease;
}
.tocgroup[open] > summary::before { transform: rotate(90deg); }
.tocgroup[open] > summary { color: var(--accent); }
.tocgroup > summary:hover { background: var(--chip-bg); }

.tocitems { display: grid; gap: 6px; margin: 6px 0 14px; padding-left: 14px; }
.tocitem {
  display: block; padding: 11px 14px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-left: 3px solid var(--accent2);
  border-radius: var(--corner);
  color: var(--text); text-decoration: none;
}
.tocitem:hover { background: var(--chip-bg); border-left-color: var(--accent); }
.tocitem .t { display: block; font-size: var(--t-panel-body); font-weight: 700; }
.tocitem .s {
  display: block; margin-top: 2px;
  font-size: var(--t-caption); line-height: 1.4; color: var(--muted);
}

/* 찾는 동안 — 갈래도 묶음도 사라지고 카드만 남는다 */
.tocpage.searching .toctree { display: grid; gap: 6px; }
.tocpage.searching .tocbranch,
.tocpage.searching .tocgroup,
.tocpage.searching .tocitems { display: contents; }
.tocpage.searching .tocbranch > h2,
.tocpage.searching .tocbranch > .lead,
.tocpage.searching .tocgroup > summary { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tocgroup > summary::before { transition: none; }
}
@media print {
  .tocsearch, .tochit { display: none; }
  .tocgroup > summary::before { content: ""; }
}

/* 자료 관리를 위한 기록 — 쪽에 보이는 **유일한 날짜**다 (사용자 2026-10-03).
   ⛔ 만든 과정(촬영일 · 스크린샷 장수 · 쪽 수 · 무엇을 가렸는지)은 쪽에 쓰지 않는다.
     우리가 어떻게 만드는지를 드러내는 말이고, 회원에게는 쓸모가 없다.

   ⭐ **흐린 회색으로 본문 오른쪽 아래** (사용자 2026-10-03). 읽을 글이 아니라
     찾아보는 기록이므로 눈이 걸리지 않게 둔다.
   ⛔ 폭을 가로지르던 윗금을 **뺐다.** 금은 「여기서 한 단락이 끝난다」고 말하는데,
     이 줄은 단락이 아니라 **구석에 접어 둔 쪽지**다. 금을 그으면 흐리게 해 둔 뜻이
     도로 사라진다.
   ⭐ 색은 `--muted` 에 투명도를 얹어 만든다 — 밝은 쪽과 어두운 쪽 어디서나 «그
     바탕보다 한 겹 흐린» 회색이 된다. ⛔ `tokens.css` 는 `deck.py` 에서 자동으로
     나오므로 여기에 쓰자고 새 색을 더하지 않는다. */
.docdate {
  /* ⛔ 윗 여백을 `margin` 으로 주지 않는다. margin 은 **앞 요소의 아래 여백과 겹쳐**
     (margin collapsing) 둘 가운데 큰 쪽만 남는다 — 그래서 앞에 무엇이 오느냐에 따라
     쪽마다 자리가 달라졌다. 대문은 45px, 「처음으로」는 23px 였고 사용자가 그것을
     보고 알렸다 (2026-10-03). `padding` 은 겹치지 않는다. */
  margin: 0;
  padding: 34px 0 0;
  text-align: right;
  font-size: var(--t-caption); color: var(--muted);
  opacity: 0.62;
}
/* 앞 요소의 아래 여백도 지운다 — 그 둘을 함께 해야 **어느 쪽에서나 34px** 이 된다. */
.doc > *:has(+ .docdate) { margin-bottom: 0; }

/* ⭐ **아래 경계선 바로 위에 붙인다** (사용자 2026-10-03):
     *"오른쪽 아래는 맞는데, 위치가 그 아래에 있는 경계선의 오른쪽 아래이면 좋겠다."*
   본문과 노트 사이에 48px(본문 아래 여백 40 + 노트 위 여백 8)이 벌어져 있어, 그 줄이
   본문의 꼬리가 아니라 **허공에 뜬 한 줄**로 보였다. 이제 경계선에 붙여 「본문은 여기서
   끝난다」는 표시가 되게 한다.

   ⛔ 자료 쪽의 `body:has(.pagebar) .doc` 96px 도 함께 덮는다. 그 여백은 떠 있는
     페이지바에 본문이 가리지 않게 두었던 것인데, **지금은 그 아래에 노트가 있고**
     노트가 스스로 96px 을 비워 둔다 (`body:has(.pagebar) .sitefoot`). 본문이 또
     비우면 빈 화면 한 뼘이 생길 뿐이다.
   ⛔ 고정된 음수 여백으로 끌어내리지 않는다 — 자료 쪽과 다른 쪽의 아래 여백이 서로
     달라(40px · 96px) 한 값으로 맞출 수 없다. 여백 자체를 그 줄이 대신하게 한다. */
.doc:has(.docdate),
body:has(.pagebar) .doc:has(.docdate) { padding-bottom: 14px; }
/* 노트 쪽의 `margin-top: 0` 은 `.sitefoot` 선언 자리에서 함께 본다 — 여기에 또 쓰면
   뒤에 오는 그 선언에 덮인다 (같은 꼴이면 **나중 것이 이긴다**). */

.intro .applinks {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 18px 0 0;
}
.intro .applinks span {
  padding: 9px 14px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  font-size: var(--t-caption); font-weight: 600; color: var(--muted);
}

/* 웹앱 안내 — 앱스토어가 아니라 브라우저로 쓴다 */
.webapp {
  margin: 22px 0 0;
  padding: 18px var(--card-pad);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-left: 3px solid var(--accent2);
  border-radius: var(--corner);
}
.webapp h3 {
  margin: 0 0 8px;
  font-size: var(--t-card-head);
  line-height: 1.3;
  font-weight: 700;
}
.webapp > p { margin: 0 0 12px; font-size: var(--t-card-lead); color: var(--sub); }
.webapp .url {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  background: var(--chip-bg);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  color: var(--accent);
  font-size: var(--t-panel-body); font-weight: 700;
  text-decoration: none;
  word-break: break-all;
}
.webapp .url:hover { background: var(--panel); }
.webapp .note {
  margin: 16px 0 8px;
  font-size: var(--t-panel-label); font-weight: 700;
  letter-spacing: 0.02em; color: var(--accent2);
}
.webapp dl { margin: 0; font-size: var(--t-card-lead); line-height: var(--lh-card-lead); }
.webapp dt {
  margin-top: 8px;
  font-size: var(--t-panel-alert); font-weight: 700; color: var(--amber);
}
.webapp dd { margin: 2px 0 0; color: var(--sub); }

.intro .sublinks { display: grid; gap: 8px; }
.intro .sublinks a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px var(--card-pad);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--corner);
  color: var(--text);
  font-size: var(--t-card-head); font-weight: 700;
  text-decoration: none;
}
.intro .sublinks a:hover { background: var(--chip-bg); }
.intro .sublinks a span { color: var(--accent); font-weight: 400; font-size: 1.2em; }

.intro .card.alert .go { margin-top: 10px; }
.intro .card.alert .go a {
  color: var(--amber); font-weight: 700; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* --- 아래쪽 회사 정보 --- */
.sitefoot {
  /* ⛔ 위 여백 0 — 작성·갱신 줄이 **이 경계선에 붙어야** 한다 (사용자 2026-10-03).
     8px 가 있으면 그 줄과 금 사이가 떠 보인다. 짝이 되는 규칙은 `.docdate` 자리에. */
  margin-top: 0;
  padding: 20px 16px calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--footer-line);
  background: var(--panel);
}
/* ⛔ 자료 쪽에는 아랫쪽 페이지바가 **떠 있다**. 노트가 그 밑으로 들어가 마지막 줄이
   잘렸다 (2026-10-03 에 눈으로 보았다). 본문은 `body:has(.pagebar) .doc` 로 자리를
   비워 두고 있었는데, 노트는 `.doc` 밖이라 그 규칙이 닿지 않았다. */
body:has(.pagebar) .sitefoot {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
/* ⛔ 16px 어긋나 있었다. `.sitefoot` 의 안 여백 16px 위에 760px 상자를 가운데
   두니, 글이 본문보다 16px 왼쪽에서 시작했다 (2026-10-03 재어 확인).
   ⇒ 안 여백을 빼고 남는 폭으로 맞춘다 — 본문과 같은 자리가 된다. */
.sitefoot p {
  max-width: calc(var(--page-w) - var(--page-pad) * 2); margin: 0 auto;
  font-size: var(--t-caption);
  line-height: 1.7;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   표지
   -------------------------------------------------------------------------- */
.cover { padding-bottom: 26px; }

.cover .kicker {
  margin: 0 0 10px;
  font-size: var(--t-cover-kicker);
  line-height: var(--lh-cover-kicker);
  color: var(--accent);
  font-weight: 600;
}

.cover h1 {
  margin: 0 0 14px;
  font-size: var(--t-cover-title);
  line-height: var(--lh-cover-title);
  letter-spacing: -0.015em;
  font-weight: 800;
}

.cover .sub {
  margin: 0 0 16px;
  font-size: var(--t-cover-sub);
  line-height: var(--lh-cover-sub);
  color: var(--sub);
}

.cover .meta {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-cover-meta);
  line-height: var(--lh-cover-meta);
  color: var(--muted);
}
.cover .meta li + li { margin-top: 4px; }

/* 범례 — 빨강은 누르는 곳, 파랑은 확인하는 곳 */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 18px 0 0;
  padding: 12px var(--card-pad);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--corner);
  font-size: var(--t-caption);
  color: var(--sub);
}
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i {
  width: 14px; height: 14px; border-radius: 3px; flex: none;
  border: 2px solid currentColor;
}
.legend .click { color: var(--red); }
.legend .check { color: var(--blue); }

/* --------------------------------------------------------------------------
   진행 순서 (목차)
   -------------------------------------------------------------------------- */
.toc { margin-top: 30px; }

.sec-title {
  margin: 0 0 14px;
  font-size: var(--t-page-title);
  line-height: var(--lh-page-title);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.toc-group {
  padding: 14px var(--card-pad);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--corner);
}
.toc-group + .toc-group { margin-top: 10px; }

.toc-group h3 {
  margin: 0;
  font-size: var(--t-card-head);
  line-height: 1.3;
  font-weight: 700;
}
.toc-group h3 b { color: var(--accent); margin-right: 6px; }

.toc-group .lead {
  margin: 6px 0 0;
  font-size: var(--t-card-lead);
  line-height: var(--lh-card-lead);
  color: var(--sub);
}

.toc-group ol {
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
  font-size: var(--t-toc-item);
  line-height: var(--lh-toc-item);
  color: var(--text);
}
.toc-group li { padding-left: 14px; position: relative; }
.toc-group li::before {
  content: "";
  position: absolute; left: 2px; top: 0.72em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--muted);
}
/* 쪽 안의 차례 항목 — «눌러야 할 것처럼» 보여야 한다.
   색을 본문과 같게 두고 밑줄도 빼면 링크인 줄 모른다 (2026-10-02 사용자 지적). */
.toc-group a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* --- 대문의 자료 카드 — 모양은 위 카드와 «같고», 카드 전체가 링크다 ---
   ⛔ 제목을 강조색으로 바꾸거나 화살표를 붙이지 않는다 (사용자 2026-10-02 — 이전이 낫다).
      달라지는 것은 «눌린다»는 것뿐이고, 그것은 누를 때의 반응으로 알린다. */
a.toc-group {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color .12s ease;
}
a.toc-group:hover { background: var(--chip-bg); }
a.toc-group:active { background: var(--chip-bg); }
a.toc-group:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a.toc-group h3 { color: inherit; }

/* 아직 만들고 있는 갈래 — 눌리지 않는다는 것이 보여야 한다 */
.toc-group.muted { opacity: 0.62; }
.toc-group.muted ol { color: var(--muted); }

/* --------------------------------------------------------------------------
   본문 한 쪽
   -------------------------------------------------------------------------- */
.step {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--footer-line);
  /* 윗쪽 접근바(52px)에 제목이 가리지 않게 */
  scroll-margin-top: 68px;
}

.group {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px;
  font-size: var(--t-chip);
  line-height: var(--lh-chip);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.group::before {
  content: ""; flex: none;
  width: 3px; height: 1.05em; border-radius: 2px;
  background: var(--accent);
}

.step h2 {
  margin: 0 0 18px;
  font-size: var(--t-page-title);
  line-height: var(--lh-page-title);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* --- 사진 --- */
.shots {
  display: grid;
  gap: 12px;
  justify-content: center;
  margin-bottom: 14px;
}
/* 칸 수만 정하고 넘치는 장은 다음 줄로 흘려보낸다 — 몇 장이든 칸 크기가 같다.
   ⛔ 줄마다 칸 수를 달리 두지 않는다. 마지막 줄의 한 장만 크면 그 장만 중요해 보인다. */
.shots[data-cols="1"] { grid-template-columns: minmax(0, 360px); }
.shots[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 360px)); }
.shots[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 300px)); }

/* 좁은 화면에서는 칸이 작아지므로 사이를 좁혀 사진을 조금이라도 키운다 */
@media (max-width: 480px) {
  .shots[data-cols="3"] { gap: 7px; }
}

.shots figure { margin: 0; }

.shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--img-line);
  border-radius: calc(var(--corner) * 0.7);
  background: var(--panel);
}
.shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.shots figcaption {
  margin-top: 7px;
  text-align: center;
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--muted);
}

/* --- 사이드 패널이 아래로 내려온 것 --- */
.panel {
  padding: var(--card-pad);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--corner);
}

.row + .row { margin-top: 15px; }

.row .label {
  margin: 0 0 5px;
  font-size: var(--t-panel-label);
  line-height: var(--lh-panel-label);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent2);
}

.row .body {
  margin: 0;
  font-size: var(--t-panel-body);
  line-height: var(--lh-panel-body);
  color: var(--text);
}

.row .checks {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-panel-check);
  line-height: var(--lh-panel-check);
  color: var(--sub);
}
.row .checks li { padding-left: 15px; position: relative; }
.row .checks li + li { margin-top: 3px; }
.row .checks li::before {
  content: "";
  position: absolute; left: 3px; top: 0.66em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent2);
}

/* 안내·대처는 따뜻한 바탕 카드로 떼어 둔다 (2026-10-01 결정) */
.row.alert {
  padding: 12px var(--card-pad);
  background: var(--alert-bg);
  border: 1px solid var(--alert-line);
  border-radius: calc(var(--corner) * 0.8);
}
.row.alert .label { color: var(--amber); font-size: var(--t-panel-alert); }
.row.alert .body { color: var(--amber-dim); font-size: var(--t-panel-note); }

/* --------------------------------------------------------------------------
   글자 전용 쪽 (스크린샷 없는 자료)
   -------------------------------------------------------------------------- */
.step .lead {
  margin: -6px 0 16px;
  font-size: var(--t-page-lead);
  line-height: var(--lh-page-lead);
  font-weight: 700;
  color: var(--sub);
}

.card {
  padding: var(--card-pad);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--corner);
}
.card + .card { margin-top: 10px; }
.card.alert {
  background: var(--alert-bg);
  border-color: var(--alert-line);
  border-left-color: var(--amber);
}
.card h3 {
  margin: 0 0 7px;
  font-size: var(--t-block-head);
  line-height: var(--lh-block-head);
  font-weight: 700;
}
.card.alert h3 { color: var(--amber); }
.card p {
  margin: 0;
  font-size: var(--t-block-body);
  line-height: var(--lh-block-body);
  color: var(--text);
}
.card p + p { margin-top: 5px; }
.card.alert p { color: var(--amber-dim); }

/* --------------------------------------------------------------------------
   갈림 도식 (tree) — 두 물음을 따라 내려오면 결과 하나에 닿는다
   슬라이드는 가로 사다리, 웹은 «세운 꼴». 뜻은 같고 폰에서 위에서 아래로 읽힌다.
   -------------------------------------------------------------------------- */
.q {
  margin: 0 0 8px;
  font-size: var(--t-panel-label);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--amber);
}
.q2 { margin: 12px 0 8px; }

.branch {
  padding: 14px var(--card-pad);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--corner);
}
.branch + .branch { margin-top: 12px; }

.branch-head {
  margin: 0;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: var(--t-card-head);
  line-height: 1.3;
}
.branch-head b { color: var(--accent); font-weight: 700; }
.branch-head span { font-size: var(--t-caption); color: var(--muted); font-weight: 400; }

.leaves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 520px) {
  .leaves { grid-template-columns: minmax(0, 1fr); }
}

.leaf {
  display: flex; flex-direction: column; gap: 5px;
  padding: 13px 14px;
  background: var(--bg-top);
  border: 1px solid var(--panel-line);
  border-left: 3px solid var(--accent2);
  border-radius: calc(var(--corner) * 0.85);
  color: inherit;
  text-decoration: none;
  transition: background-color .12s ease;
}
.leaf:hover, .leaf:active { background: var(--chip-bg); }
.leaf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.leaf .ans { font-size: var(--t-caption); color: var(--muted); }
.leaf .nm { font-size: var(--t-card-head); color: var(--accent); line-height: 1.2; }
.leaf .steps {
  font-size: var(--t-card-lead); line-height: var(--lh-card-lead); color: var(--sub);
}
.leaf .steps i {
  display: inline-block; margin-right: 6px;
  font-style: normal; font-weight: 700;
  font-size: var(--t-panel-alert); color: var(--amber);
}
.leaf .go {
  margin-top: 2px;
  font-size: var(--t-card-lead); font-weight: 700; color: var(--accent);
}
.leaf .go i {
  display: inline-block; margin-right: 6px;
  font-style: normal; font-weight: 700;
  font-size: var(--t-panel-alert); color: var(--amber);
}

/* 본문 안의 「N쪽」 — 그 자리로 가는 링크 */
a.pageref {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   마무리
   -------------------------------------------------------------------------- */
.closing { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--footer-line); }

.wrap-row { padding: 14px var(--card-pad); background: var(--panel);
            border: 1px solid var(--panel-line); border-left: 3px solid var(--accent2);
            border-radius: var(--corner); }
.wrap-row + .wrap-row { margin-top: 10px; }
.wrap-row h3 { margin: 0 0 5px; font-size: var(--t-wrap-head);
               line-height: var(--lh-wrap-head); font-weight: 700; }
.wrap-row p { margin: 0; font-size: var(--t-wrap-body);
              line-height: var(--lh-wrap-body); color: var(--sub); }

/* --------------------------------------------------------------------------
   전체화면 보기
   -------------------------------------------------------------------------- */
/* ⛔ 아이폰은 주소창이 들락거려 100% 가 «보이는 높이»와 다르다.
   dvh/dvw 를 쓰고, 모르는 브라우저를 위해 100% 를 먼저 적어 둔다. */
.viewer {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  width: 100dvw; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: #000;
  overflow: hidden;
}
.viewer::backdrop { background: #000; }
.viewer[hidden] { display: none; }

/* ⛔ grid + place-items:center 로 두지 않는다.
   자동 행 높이가 «내용»으로 정해져 img 의 max-height:100% 가 자기 자신을 기준으로
   풀려 버린다 — 그림이 원본 크기(1320x2868)로 커진다 (2026-10-02 실측).
   flex 는 컨테이너 높이가 확정이라 100% 가 제대로 걸린다. */
.viewer-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  touch-action: none;            /* 핀치·끌기를 직접 다룬다 */
}
.viewer-stage img {
  flex: 0 0 auto;
  max-width: 100%; max-height: 100%;
  min-width: 0; min-height: 0;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.viewer-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  color: #fff;
  font-size: 14px;
  pointer-events: none;
}
.viewer-bar .cap { flex: 1 1 auto; min-width: 0; pointer-events: none; }
.viewer-bar .zoom { display: flex; gap: 8px; pointer-events: auto; }

.viewer button {
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 19px; font-weight: 700;
  cursor: pointer;
}
.viewer button:disabled { opacity: 0.38; cursor: default; }

.viewer-close {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px;
  z-index: 2;
}
/* 「3 / 23」 — 확대·축소 단추와 같은 크기로 읽히되, 단추처럼 «눌리는 것»으로는
   보이지 않게 한다. 테두리를 두지 않고 바탕만 옅게 깐다 (사용자 2026-10-02). */
.viewer-count {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px;
  min-height: 44px;
  display: flex; align-items: center;
  padding: 0 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 18px; font-weight: 600;
  font-variant-numeric: tabular-nums;   /* 숫자가 바뀌어도 폭이 흔들리지 않는다 */
  letter-spacing: 0.02em;
  opacity: 0.92;
  pointer-events: none;
}
.viewer-count:empty { display: none; }

/* --------------------------------------------------------------------------
   넓은 화면 — 제목 계열만 한 단 키운다 (본문은 키우지 않는다)
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .doc { padding-top: 40px; }
  .cover h1 { font-size: calc(var(--t-cover-title) * 1.3); }
  .step h2, .sec-title { font-size: calc(var(--t-page-title) * 1.18); }
}

/* --------------------------------------------------------------------------
   인쇄 — 쪽마다 끊고 사진을 작게
   -------------------------------------------------------------------------- */
@media print {
  .doc { max-width: none; padding: 0; }
  .step, .closing { break-before: page; border-top: 0; }
  .shots[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 220px)); }
  .shots[data-n="1"] { grid-template-columns: minmax(0, 220px); }
  .viewer { display: none !important; }
}

/* --------------------------------------------------------------------------
   어두운 화면 — 색만 다크 테마로 갈아끼운다 (짜임은 같다)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

/* --------------------------------------------------------------------------
   카드꼴 링크 — ⛔ **밑줄을 긋지 않는다** (사용자 2026-10-03)
     *"카드에 커서를 대면 밑줄이 보이는 형태인데 다른 카드에서는 그렇지 않다.
       이러한 인터페이스는 특별한 언급이 없는 한 **모든 카드에서 동일하게** 하라."*
   ⭐ 카드는 **상자 전체가 누르는 자리**다. 글에 밑줄을 그으면 그 글만 링크인 것처럼
     보인다. 눌리는 것은 `:hover` 때 바탕색이 바뀌는 것으로 알린다.
   ⛔ 이 규칙을 **파일 맨 끝에** 둔다 — 갈래별 규칙(`.intro a:hover` 같은)보다 뒤에
     있어야 이긴다. 새 카드를 만들면 여기에 이름을 더한다.
   -------------------------------------------------------------------------- */
a.toc-group, a.tocitem, .steps .case, .sublinks a, .cases .case,
a.toc-group:hover, a.tocitem:hover, .steps .case:hover, .sublinks a:hover,
.cases .case:hover {
  text-decoration: none;
}