/* ==========================================================================
   알파포유 안내 — 웹 쪽 짜임
   색·글자·모서리는 전부 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: 7px;
  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 .ico {
  display: block; width: 22px; height: 22px;
  border-radius: 6px;
}
.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); }

/* --- 이 자료를 PDF 로 내려받기 (2026-10-24 · 사용자 지시) ---
   ⭐ 「차례」의 **왼쪽**에 선다. 테·둥글기·색을 그대로 물려받아 한 벌로 읽히게 한다.
   ⛔ 색 값을 적지 않는다 — 변수로만 (`webkit/README.md` 의 장치 (1)).
   ⛔ 36x36 아래로 줄이지 않는다. 손가락으로 누르는 가장 작은 자리다. */
.topbar .pdf-get {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  margin-right: 6px;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--accent);
  cursor: pointer;
}
.topbar .pdf-get .ico { display: block; }
.topbar .pdf-get:hover { background: var(--chip-bg); }
.topbar .pdf-get:active { background: var(--chip-bg); transform: translateY(1px); }
.topbar .pdf-get:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- 내려받기 전 확인 창 ---
   ⭐ 차례 시트(`.toc-sheet`)와 **같은 짜임**이다 — `<dialog>` 하나, 같은 테두리와
     바탕. 그래야 이 사이트에서 뜨는 창이 늘 같은 것으로 보인다.
   ⭐ Esc 는 `<dialog>` 가 거저 준다. 바깥 누름·「아니요」·✕ 는 `nav.js` 가 잇는다. */
.pdf-ask {
  width: min(460px, calc(100% - 24px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--panel-line);
  border-radius: var(--corner);
  background: var(--bg-top);
  color: var(--text);
  overflow: hidden;
}
.pdf-ask::backdrop { background: rgba(0, 0, 0, 0.5); }
.pdf-ask .sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--panel-line);
  font-size: var(--t-card-lead);
}
.pdf-ask .sheet-close {
  flex: none;
  min-width: 36px; min-height: 36px;
  border: 0; background: none; color: var(--sub);
  font-size: 17px; cursor: pointer;
}
.pdf-ask .ask-body { padding: 14px; }
/* 무엇을 받는가 — 자료 이름과 크기·갱신일. ⛔ 쪽 수는 넣지 않는다 (2026-10-03). */
.pdf-ask .ask-what {
  margin: 0;
  color: var(--text);
  font-size: var(--t-toc-item);
  line-height: 1.35;
}
.pdf-ask .ask-meta {
  margin: 4px 0 0;
  color: var(--sub);
  font-size: var(--t-caption);
}
.pdf-ask .ask-note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--panel-line);
  color: var(--sub);
  font-size: var(--t-caption);
  line-height: 1.6;
}
.pdf-ask .ask-btns {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 0 14px 14px;
}
.pdf-ask .ask-btns > * {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 16px;
  border-radius: 8px;
  font: inherit; font-size: var(--t-caption); font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.pdf-ask .ask-no {
  border: 1px solid var(--panel-line);
  background: var(--panel);
  color: var(--sub);
}
/* 「내려받기」는 링크다 — 단추가 아니라 **그 파일로 가는 길**이어야
   `download` 속성이 이름을 정하고, 자바스크립트가 막혀도 받을 수 있다.
   ⛔ 바탕을 강조색으로 채우고 글자를 흰색으로 두지 **않았다.** 흰색은 변수에 없어
     `#fff` 를 적어야 하는데, 그 순간 「색은 `deck.THEMES` 에서만 온다」는 장치가
     무너진다 (`webkit/README.md`). ⇒ 있는 변수만으로 세기를 가른다 —
     테두리를 강조색으로 올리고 바탕은 칩 바탕, 글자는 강조색. */
.pdf-ask .ask-yes {
  border: 1px solid var(--accent);
  background: var(--chip-bg);
  color: var(--accent);
}
.pdf-ask .ask-no:active,
.pdf-ask .ask-yes:active { transform: translateY(1px); }

/* --- 아랫쪽 페이지바 --- */
.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;
}
/* ⭐⭐ 윗 막대 탭 — **폭에 따라 이름과 여백이 바뀐다** (사용자 2026-10-07)
   *"「이용약관」 또는 「서비스 이용약관」 … 의 표현을 폰의 폭에 따라서 적절하게
     바꾸는 것이 가능한지 확인하라. … 폭이 좁은 폰과 폭이 넓은 폰에 대한 처리를
     다르게 하라."*

   ⭐ 긴 이름과 짧은 이름을 **쪽에 둘 다** 넣고 여기서 하나만 보인다.
     ⛔ 자바스크립트를 쓰지 않는다 — 꺼져도 맞는 이름이 보인다.
     ⛔ 글자 크기는 건드리지 않는다. 바뀌는 것은 **이름과 탭 사이 여백**뿐이다.

   ⭐ 2026-10-07 — **가운데 단**을 하나 더 두었다 (사용자 제안 — *"둘 사이에
     「이용약관 · 개인정보 처리방침」을 하나 더 두면 어떤가"*). 둘 다 줄이기 전에
     **덜 중요한 쪽만** 줄인다. 「처리방침」 홀로는 «무엇의» 처리방침인지 서지 않으므로
     「개인정보」를 남기고, 「이용약관」은 홀로도 뜻이 서므로 「서비스」를 뺀다.

   실측 — 막대가 필요로 하는 폭 (집 아이콘 「{◉ 알파포유}」 98px 포함)
     넓은 창  소개·둘러보기·서비스 이용약관·개인정보 처리방침
                여백 10 → 469    여백 5 → 429
     가운데   소개·둘러보기·이용약관·개인정보 처리방침
                여백 10 → 432    여백 5 → 392
     좁은 폰  소개·둘러보기·이용약관·처리방침
                여백 10 → 383    여백 4 → 335    여백 2 → 319

   ⛔ **둘 다 긴 이름은 430px 급까지만 든다.** 393px(아이폰 15·16)에는 여백을 3px 까지
     줄여도 413px 이라 들어가지 않는다. ⭐ 그래서 **가운데 단이 가장 흔한 폰 폭을 덮는다.**

     ≥ 470px   넓은 창 · 여백 10   (469)  태블릿 · 데스크톱 · 넓은 창
     430~469   넓은 창 · 여백 5    (429)  아이폰 Pro Max(430) · 플러스(428)
     392~429   가운데 · 여백 5     (392)  아이폰 16 Pro(402) · 15·16(393)
     335~391   좁은 폰 · 여백 4    (335)  아이폰 SE·미니(375) · 갤럭시 S(360)
     ≤ 334     좁은 폰 · 여백 2    (319)  아주 좁은 폰(320)                 */
.tabs .t-mid,
.tabs .t-short { display: none; }

@media (max-width: 469px) { .tabs a { padding: 0 5px; } }

@media (max-width: 429px) {                    /* 가운데 — 약관에서 「서비스」만 뺀다 */
  .tabs .t-long { display: none; }
  .tabs .t-mid { display: inline; }
}

@media (max-width: 391px) {                    /* 좁은 폰 — 둘 다 줄인다 */
  .tabs a { padding: 0 4px; }
  .tabs .t-mid { display: none; }
  .tabs .t-short { display: inline; }
}

@media (max-width: 334px) { .tabs a { padding: 0 2px; } }

.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;
}

/* ⭐⭐ [2026-10-11 · 사용자 지시] 찾는 칸에 **보이는 이름표**를 달았다 —
   *"입력 박스의 왼쪽에 … 넣어서 입력창임을 알 수 있도록 하라."*
   ⛔ 종전에는 `.tocsearch` 가 «기준 상자»였고 `✕` 단추가 그것을 잡았다. 이름표가
     형제로 들어오면서 그 기준이 **이름표까지 품게** 되어 단추가 오른쪽으로 밀린다.
     ⇒ 기준을 안쪽 `.tocsearch-box` 로 옮겼다. 바깥은 **줄 세우기**만 한다. */
/* ⭐⭐ [2026-10-11 · 사용자 지시] 접어 두는 쪽(`/where/`)에서 자리표로 들어오면
   `toc.js` 가 **이 상자**를 화면 머리에 올린다. 윗 막대(52px)에 제목이 가리지
   않게 여백을 둔다 — 쪽 안의 다른 자리들과 **같은 값**이다(66·68px). */
.tocpage[data-fold] { scroll-margin-top: 68px; }

.tocsearch {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px;
}
/* ⛔ 줄이지 않는다 — 좁은 화면에서 「찾을 / 말」로 꺾이면 줄 높이가 흔들린다. */
.tocsearch-label {
  flex: 0 0 auto; white-space: nowrap;
  font-size: var(--t-panel-body); font-weight: 700; color: var(--sub);
}
/* ⛔ `min-width: 0` 이 있어야 좁은 화면에서 칸이 **줄어든다.** flex 항목의 기본
      최소 너비는 «내용 너비»라, 없으면 칸이 화면 밖으로 삐져나간다. */
.tocsearch-box { position: relative; flex: 1 1 auto; min-width: 0; }
.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` 가 아니라 **`.tocsearch-box`** 다 (위 주석 참조). */
.tocsearch-box [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-box [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); }

/* ⭐ 묶음의 머리말 — 내린 차례 쪽들이 묶음마다 하던 한 마디를 받는 자리.
   ⛔ 줄 간격을 항목보다 좁게 둔다. 머리말이 항목처럼 보이면 누를 수 있는 줄로
     읽혀 「눌러도 아무 일이 없다」가 된다. */
.toclead {
  margin: 2px 0 0; padding-left: 14px;
  font-size: 0.86rem; line-height: 1.5; color: var(--muted);
}
/* ⛔ 찾을 때는 하이어라키가 사라져 카드만 나란히 선다 — 머리말도 함께 숨는다
   (사용자 2026-10-03 — *"검색하면 하이어라키 없이 해당 카드만"*). */
.tocpage.searching .toclead { display: none; }

.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);
}
/* ⭐ 앱 안내 상자 안의 화면 둘 (2026-10-05) — 한 줄에 좌우로 서고 그 아래에 안내.
   ⛔ 격자 자체는 `.shots` 가 쥔다. 여기서는 **이 상자 안에서만** 다른 것을 적는다 —
     위 여백과, 이름을 한 줄 앞세우는 설명 꼴. */
.webapp .ways { margin-top: 14px; }
/* ⛔ 이 자리는 **자르지 않는다** (사용자 2026-10-05 — *"이미지는 전체가 보이도록
   하라. 현재는 잘린 일부가 보인다."*). 다른 쪽의 폰 화면은 한 장이 한 화면을 먹지
   않도록 윗부분만 남기지만(`.intro .shots`), 여기서는 **화면 하나를 통째로** 보여
   주는 것이 안내다 — 위의 주소창부터 아래의 「홈 화면에 추가」 상자까지. */
.intro .webapp .ways .shot img {
  max-height: none;
  object-fit: contain;
}
/* 자르지 않으므로 「눌러서 전체 보기」 띠도 걷는다 — 이미 전체다. 다만 눌러서 크게
   보는 길은 그대로 있다 (`viewer.js`). */
.intro .webapp .ways .shot::after { content: none; }
.webapp .ways figcaption {
  font-size: var(--t-caption); line-height: var(--lh-card-lead); color: var(--sub);
  text-align: left;
}
.webapp .ways figcaption b {
  display: block; color: var(--accent2); font-weight: 700;
}

.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);
}
/* ⭐ [2026-10-24] 문의 창구 — 전화번호 줄이 있던 자리다 (그 번호는 해지되었다).
   ⛔ 앞 네 줄과 **같은 크기·같은 줄높이**로 둔다. 눈에 띄게 키우면 회사 정보가
     아니라 광고처럼 읽힌다. 누를 수 있다는 것만 색과 밑줄로 말한다.
   ⭐ 위에 한 줄 띄워 「표시사항」과 「문의」를 눈으로 가른다. */
.sitefoot .contact { margin-top: 10px; }
.sitefoot .contact a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* 손가락으로 누르는 자리 — 글줄 높이만으로는 좁다. 세로로만 넓힌다
   (가로로 넓히면 가운데 정렬된 글줄이 왼쪽으로 밀려 보인다). */
.sitefoot .contact a { display: inline-block; padding: 4px 0; }

/* --------------------------------------------------------------------------
   표지
   -------------------------------------------------------------------------- */
.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); }

/* --- 두 줄 카드 — ⭐⭐ [2026-10-18 · 사용자 지시] 길잡이(`/where/`)의 카드 ---
   *"이 모음의 안내 내용의 카드 높이를 지금의 절반으로 줄이고, 라인은 2줄로 해서
     표현하도록 하라."*
   ⇒ 「이럴 때」 두 줄을 빼면 네 줄이 두 줄이 된다 (`_sitcards.html.j2` 의 `slim`).
     여백까지 조이면 높이가 거의 꼭 절반이다 —
       지금   14 + 22 + 6 + 20 + 10 + 40 + 14 ≈ 126px
       두 줄  10 + 22 + 4 + 20 + 10           ≈  66px   (0.52배)
   ⛔ 「이럴 때」는 **잃는 것이 아니다** — `/situation/` 의 제 쪽에 그대로 남는다.
   ⛔ 카드 사이 간격은 그대로 둔다 (`.toc-group + .toc-group`). 카드가 낮아진 만큼
     붙여 놓으면 어느 줄이 어느 카드의 것인지 흐려진다. */
.toc-group.slim { padding: 10px var(--card-pad); }
.toc-group.slim .lead { margin-top: 4px; }

/* --------------------------------------------------------------------------
   본문 한 쪽
   -------------------------------------------------------------------------- */
.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);
}

/* ⭐⭐ [2026-10-24] **글 속의 링크** — `render._namelink` 과 `link_urls` 가 만든다
   (이름·주소가 글 한가운데서 눌리는 자리. 카카오톡 채널·다른 자료의 제목 따위).

   ⛔ 여태 **아무 규칙이 없어** 브라우저 기본 파랑(`#0000ee`)으로 떠 있었다. 차례
     항목과 「N쪽」은 제 규칙이 있어 사이트 강조색인데, 글 속 링크만 남색도 아니고
     보라도 아닌 색이라 **한 쪽에 두 가지 파랑**이 보였다 (2026-10-24 눈으로 보고
     찾았다 — 호박색 알림 상자 안에서 특히 어긋났다).
   ⛔ 색을 적지 않고 **변수로만** 쓴다 (`webkit/README.md` 의 장치 (1)).
   ⭐ 밑줄은 「N쪽」과 같은 두께·같은 띄움으로 맞춘다 — 한 쪽 안의 링크가 모두
     같은 것으로 보여야 한다.
   ⛔ `a:not([class])` 로 잡지 않는다 — 그 그물은 «클래스 없는 차례 링크»까지 걸어
     그쪽 모양을 덮는다 (구체성이 `.toc-group a` 보다 높다). ⇒ 렌더러가 그 링크에만
     `class="inline"` 을 붙이고, 여기서는 **그 이름만** 잡는다. */
a.inline {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 본문 안의 「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;
}