/* 서체는 랜딩의 subset 서체를 그대로 쓴다. 277조각을 unicode-range 로 골라 받으므로
   조각 하나만 가리키면 한글 대부분이 대체 서체로 떨어진다 — 원본 CSS를 상대경로로
   바꾼 사본이 common/pretendard.css 다. 서체 파일 자체는 복사하지 않는다. */
@import url("pretendard.css");

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-body); line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-text); }

/* 바깥은 랜딩 폭, 글 장은 읽기 폭. 표지만 폭을 다 쓰고 본문은 한 줄이 길어지지 않는다. */
.wrap { max-width: var(--w-landing); margin: 0 auto; padding: var(--s8) var(--s5) var(--s9); }
.sec, .end { max-width: var(--w-read); margin-left: auto; margin-right: auto; }
.lead { font-size: var(--fs-h3); color: var(--read); line-height: 1.7; }

/* 묶음 하나. 번호 꼬리표 → 제목 → 왜 필요한가 → 기능 → 화면. 이 차례를 바꾸지 않는다. */
.sec { margin: var(--s9) 0 0; }
/* 꼬리표. mono 는 숫자를 위한 자리다 — 한글을 얹으면 서체가 없어 굴림으로
   떨어진다. 한글이 든 꼬리표(들어가며 따위)는 .word 를 달아 본 서체로 돌린다. */
.sec-num {
  display: block; font-family: var(--mono); font-size: var(--fs-chip);
  letter-spacing: .08em; color: var(--faint); margin-bottom: var(--s3);
}
.sec-num.word { font-family: inherit; font-weight: 700; letter-spacing: .12em; }
/* 번호 꼬리표는 «보이지 않게»만 한다. 같은 번호가 오른쪽 위에 크게 앉아 있어 눈에는
   두 번이지만, 지우면 읽어 주는 기계가 이 장이 몇 번째인지 알 길이 없다 —
   큰 번호는 장식이라 aria-hidden 이고, 이 꼬리표가 deco.js 에게 번호를 알려 주는
   한 곳이기도 하다. 글자가 든 꼬리표(들어가며·조직으로·맺으며)는 그대로 보인다. */
.page > p.sec-num:not(.word) {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* 제목 앞 짧은 띠. 흰 판에서 장이 시작하는 자리를 눈에 박아 준다.
   두 가지를 지킨다 —
   ① 바탕이 아니라 테두리로 그린다(크롬은 배경 그래픽을 기본으로 인쇄하지 않는다)
   ② 블록이 아니라 인라인으로 제목 «안»에 넣는다. 장 머리에 블록으로 두면
      종이에서 다음 장의 띠 조각이 앞 장 바닥에 찍힌다(실제로 겪었다).
   표지는 짜임이 다르니 뺀다. */
.sheet:not(.cover) h2::before {
  content: ""; display: inline-block; width: 34px;
  border-top: 3px solid var(--accent);
  vertical-align: middle; margin-right: var(--s4);
}
.sec h2 { margin: 0 0 var(--s5); font-size: var(--fs-h2); line-height: 1.35; }
/* 제목 아래 설명은 제목 «글자»와 왼쪽을 맞춘다 — 제목 앞 띠(34px)와 그 틈(16px)만큼
   들여 쓴다. 판 왼쪽 끝에 붙이면 제목과 설명이 서로 다른 줄에서 시작해 어긋나 보인다. */
.sec h2 + p { padding-left: calc(34px + var(--s4)); }
.sec p { color: var(--read); margin: 0 0 var(--s5); }
.sec strong { color: var(--ink); }

.feat { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.feat li {
  border-top: 1px solid var(--line); padding: var(--s4) 0;
  display: grid; grid-template-columns: 1fr; gap: var(--s1);
}
.feat li:last-child { border-bottom: 1px solid var(--line); }
.feat b { font-size: var(--fs-title); }
.feat span { color: var(--mute); font-size: var(--fs-sub); }

.shot { margin: var(--s6) 0; }
.shot img { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
/* 한 자리에 화면 여럿을 겹쳐 세우는 판(.deck). 판의 키는 aspect-ratio 로만 잡는다 —
   부모 키에 기대면 종이에서 풀리지 않는다(10 장 영상 때 15쪽이 17쪽이 되었다). */
.shot .deck { position: relative; }
.shot .deck img { position: absolute; height: auto; box-shadow: 0 2px 12px rgba(20, 22, 26, .14); }
/* 리포트가 «여럿»이라는 것을 보이는 자리. 한 장만 걸면 리포트 하나로 읽힌다.
   뒤엣것이 오른쪽 위로 비켜 서서 귀퉁이만 보이고, 맨 앞 한 장이 읽힌다.
   카드 폭 79%, 한 칸 비킴이 가로 7%·세로 6%(판 폭 기준)라 판의 비율이 1.437 이다. */
.shot.stack .deck { aspect-ratio: 1.437; }
.shot.stack .deck img { width: 79%; }
.shot.stack .deck img:nth-child(1) { left: 21%; top: 0; }
.shot.stack .deck img:nth-child(2) { left: 14%; top: 8.62%; }
.shot.stack .deck img:nth-child(3) { left: 7%; top: 17.24%; }
.shot.stack .deck img:nth-child(4) { left: 0; top: 25.86%; }
/* PC 화면 앞에 휴대폰 화면을 세운다. 휴대폰이 PC 의 오른쪽 아래 귀퉁이를 덮는다. */
.shot.pair .deck { aspect-ratio: 1.613; }
.shot.pair .deck img { width: 82%; left: 0; top: 0; }
.shot.pair .deck img.phone { width: 28%; left: auto; top: auto; right: 0; bottom: 0; }
/* 밑말도 한글이라 mono 를 씌우면 굴림이 된다. 크기와 색으로만 물러나게 한다. */
.shot-cap {
  margin: var(--s3) 0 0;
  font-size: var(--fs-chip);
  color: var(--faint);
  text-align: center;
}

.end { margin: var(--s9) 0 0; padding-top: var(--s7); border-top: 1px solid var(--line-strong); }
.btn {
  display: inline-block; padding: var(--s3) var(--s5);
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  font-size: var(--fs-label); font-weight: 700; color: var(--ink); text-decoration: none;
}
.btn:hover { border-color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 640px) {
  .wrap { padding: var(--s7) var(--s4) var(--s8); }
  :root { --fs-h2: 1.6rem; --fs-display: 2rem; }
}

/* 위는 글 전폭, 아래는 두 칸 — 왼쪽이 기능 목록, 오른쪽이 그림.
   긴 제목이 앞에 서도 아래가 비어 보이지 않고 그림이 절반을 쓴다. */
.split, .trio { margin: var(--s6) 0 0; }
.split .art img, .trio .art img { width: 100%; }

/* 제품 화면이 판단의 주인공인 장. 화면을 먼저 크게 보여 주고 기능 설명은 아래의
   얇은 요약 띠로 물린다. DOM 순서가 좌우 교차 리듬을 따르더라도 화면이 먼저 온다. */
.split.shot-focus { display: flex; flex-direction: column; gap: var(--s4); }
.split.shot-focus .art.shot { order: 0; }
.split.shot-focus .feat { order: 1; margin: 0; }
.split.shot-focus .feat b { font-size: calc(var(--fs-title) - 1px); }
.split.shot-focus .feat span { font-size: calc(var(--fs-sub) - 1px); }

/* 묻고 답하는 칸. 기능을 늘어놓는 대신 사는 쪽이 실제로 묻는 것을 먼저 적는다.
   바탕을 깔지 않고 테두리로 그린다 — 크롬은 배경 그래픽을 기본으로 인쇄하지 않아
   회색 상자를 깔면 종이에서 물음과 답의 경계가 사라진다. */
.asks { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s4); }
.asks li {
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s4) var(--s5);
}
/* 두 물음은 주제가 다르다 — 하나는 «여는 쪽»(보호), 하나는 «담는 쪽»(등록)이다.
   같은 물음표를 둘에 붙이면 한 틀을 두 번 찍은 것으로 읽힌다. 물음마다 제 주제를
   이름표로 달아 갈라 세운다. 이름표도 테두리로 그려 종이에 남긴다.
   두 이름표는 굵기가 같다 — 한쪽을 옅게 하면 덜 중요한 물음으로 읽힌다. */
.asks b {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s3);
  align-items: baseline; font-size: var(--fs-title); color: var(--ink);
}
.asks b i {
  font-style: normal; font-size: .74em; font-weight: 700; letter-spacing: .04em;
  padding: .1em .7em; border: 1px solid var(--accent); border-radius: var(--r-pill);
  color: var(--accent-text); white-space: nowrap;
}
.asks span { display: block; margin-top: var(--s2); color: var(--mute); font-size: var(--fs-sub); }

/* 한 장 안의 작은 갈래를 여는 제목. 절 제목의 짧은 띠는 여기 붙이지 않는다 —
   띠는 «장이 시작하는 자리»를 짚는 것이라, 장 가운데서 또 그으면 장이 둘로 보인다. */
.sub { margin: var(--s6) 0 var(--s4); font-size: var(--fs-h3); }

/* ─── 맺음 장. 고객이 읽고 나가는 자리다. ───
   판을 가운데로 모으고, 이 편이 한 일을 한 그림으로 되짚는다. 장식은 이 시리즈가
   이미 가진 것만 쓴다 — 가운데 정렬·마름모·짧은 띠·mono 서명. 새 색은 들이지 않는다. */
.end .page { text-align: center; align-items: center; }

/* ─── 맺음 판을 우상향으로 가로지르는 도로 ───
   차 그림 «안»이 아니라 판 전체의 바탕이다. 제목도 그림도 맺음말도 그 위에 얹힌다.
   ① 노면과 차선을 .page 의 앞뒤 자리에 하나씩 눕히고 함께 기울인다. 두 겹을 따로
      기울이면 각도가 어긋나는 날이 온다 — 각도는 한 곳(--road-tilt)에만 적는다.
   ② 판 밖으로 넉넉히 빼고 .end 에서 잘라낸다. 도로는 «끝나는» 것이 아니라 판에
      «잘리는» 것이라야 가로지른 것으로 읽힌다.
   ③ 글보다 뒤에 앉힌다(z-index 0). .page 의 자식들은 이미 1 을 쓰고 있고,
      가상 자리는 자식 선택자에 걸리지 않아 0 으로 남는다.
   ④ 색은 새로 들이지 않는다. 노면은 종이빛과 선빛 사이, 차선은 옅은 테두리색이다. */
.end { overflow: hidden; }
.end .page { position: relative; --road-tilt: -8deg; }
.end .page::before, .end .page::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -16%; width: 132%; top: 50%;
  transform: rotate(var(--road-tilt)); transform-origin: 50% 50%;
}
.end .page::before {
  height: 76px; margin-top: -38px; background: #f4f3ee;
}
.end .page::after {
  height: 0; border-top: 3px dashed #dedcd5;
}
/* 줄바꿈은 글 안의 <br> 이 쥔다. 46em 이면 앞줄이 한 번 더 접혀 세 줄이 되므로
   폭을 넓혀 둔다 — 좁은 화면에서는 어차피 접히고, 끊는 자리만 지켜진다. */
.end .last { max-width: 58em; font-size: var(--fs-title); }
/* 마무리 인사. 위아래 얇은 선 사이에 앉혀 마지막 숨을 준다. */
.end .thanks {
  position: relative; margin: var(--s6) 0 var(--s5); padding-top: var(--s5);
  border-top: 1px solid var(--line); color: var(--mute); font-size: var(--fs-sub);
}
/* 선 한가운데 걸치는 마름모. 여는 장의 답 판과 한 벌이다 — 바탕이 아니라 테두리로
   그려 종이에서도 남는다. */
.end .thanks::before {
  content: ""; position: absolute; top: -5px; left: 50%;
  width: 0; height: 0; margin-left: -5px;
  border: 5px solid var(--accent); transform: rotate(45deg);
  background: var(--surface);
}
.end .sign {
  margin: var(--s5) 0 0; font-family: var(--mono);
  font-size: var(--fs-chip); letter-spacing: .08em; color: var(--faint);
}
/* mono 에는 한글 서체가 없어 굴림으로 떨어진다. 꼬리표에서 쓰던 .word 를 그대로
   달아 한글만 본 서체로 돌린다 — 손잡이를 새로 만들지 않는다. */
.end .sign .word { font-family: inherit; letter-spacing: .04em; }

/* 제 칸을 다 쓰지 않는 그림. 목록이 먼저 읽히고 그림이 뒤를 받는 자리에 쓴다. */
.narrow img { margin: 0 auto; }

/* 장 안에 눕는 띠 그림. .whole 과 달리 남는 높이를 먹지 않는다 — 이미 채워진
   장에 덧붙는 자리라, 자기 키만 쓰고 물러난다. */
.band { margin: 0 0 var(--s4); }
.band img { width: 100%; }

/* 한 판을 한 장의 그림이 말하는 장. 글은 앞머리 두 줄과 밑말 한 줄뿐이다. */
.whole { margin: var(--s6) 0; }
.whole img { width: 100%; }

/* 밑말. 원본 소개서가 세로 띠로 짚어 둔 자리다. 바탕이 아니라 왼쪽 선으로 긋는다.
   본문보다 한 치수 작다 — 짚어 두는 말이지 읽히려고 앞에 서는 말이 아니다. */
/* 글 안에서 다른 장으로 건너뛰는 자리. 밑줄만으로는 «누르면 간다»가 잘 보이지
   않아 화살표를 붙인다. 종이에서는 누를 수 없으므로 화살표 대신 갈 곳의 번호를
   적는다 — 인쇄본을 든 사람도 어디를 펴야 하는지 알아야 한다. */
.go { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.go::after { content: " →"; font-weight: 700; text-decoration: none; }

.aside {
  color: var(--mute); font-size: var(--fs-sub);
  border-left: 3px solid var(--accent); padding-left: var(--s4);
}

/* ─── 장을 닫는 한 줄 ─────────────────────────────────────────────────────
   표준이 「그래서 무엇」이라 부르는 자리다(5240standard, FROM_DECK).
   기능을 늘어놓기만 하면 늘어놓은 것으로 읽힌다 — 장마다 한 줄로 닫는다.

   «한 줄»이 원칙이다. 넘치면 줄을 늘리지 말고 메시지를 줄인다 — 두 줄이 되는
   순간 그 장에 메시지가 둘이라는 뜻이고, 그러면 장을 가르는 편이 맞다.
   다만 줄바꿈을 막지는 않는다. 좁은 화면에서까지 한 줄을 고집하면 잘려 사라진다.

   윗선은 굵게 긋는다 — 본문과 이 줄 사이가 «닫는 자리»임이 보여야 한다.

   2026-09-18 현재 두 편 모두 이 줄을 쓰지 않는다(hro 09-16 · tna 09-18, 둘 다
   사용자 지시로 걷었다). 규칙은 남겨 두되 되들어오는 것은 자가 막는다. */
.sowhat {
  margin: var(--s5) 0 0; padding-top: var(--s3);
  border-top: 2px solid var(--accent);
  font-weight: 700; line-height: 1.4; color: var(--ink);
}

/* 수치를 쓴 장에 근거를 적는다(표준 R7). 읽히려고 앞에 서는 말이 아니라
   «댈 수 있는 것»이라, 본문에서 두 치수 물러나 옅게 앉는다.
   2026-09-18 사용자 지시로 자리를 판의 «우측 하단»으로 내렸다 — 본문 끝에
   붙어 서면 읽는 말처럼 보인다. 흐르는 글(좁은 화면)에는 내릴 바닥이 없어
   오른쪽으로만 붙고, 판 규칙 아래에서 바닥으로 내려간다. */
.src { margin: var(--s2) 0 0; font-size: var(--fs-chip); color: var(--faint); text-align: right; }


/* 여는 장. 위가 물음과 답, 아래가 생애주기 그림이다 — 표지가 좌우였으니
   여기는 위아래로 간다. 그림은 폭을 다 쓴다. */
.life { margin: var(--s6) 0; }
.life img { width: 100%; }

/* 물음에 대한 답. 이 장은 답 하나를 박으러 있는 장이라 판 가운데에 세운다.
   장식은 위아래 얇은 선과 윗선에 앉은 작은 마름모뿐이다 — 바탕을 깔면 흑백
   인쇄에서 회색 덩어리가 된다(형광펜을 종이에서 밑줄로 바꾼 것과 같은 까닭).
   두 줄의 색을 갈라 앞줄이 답의 뼈대(입사부터 퇴사까지)임을 보인다. */
.answer {
  position: relative; margin: var(--s7) 0; padding: var(--s6) var(--s5); text-align: center;
  /* 강조색을 옅게 푼 파스텔. 색을 새로 들이지 않고 이 사이트의 남색에서 끌어낸다. */
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, #fff);
  border-radius: var(--r-card);
}
/* 판 윗변 한가운데 걸치는 마름모. 바탕색이 아니라 «테두리»로 그린다 —
   크롬은 배경 그래픽을 기본으로 인쇄하지 않아서, 바탕으로 그리면 종이에서
   사라진다. 테두리는 그 설정과 무관하게 찍힌다. */
.answer::before {
  content: ""; position: absolute; top: -5px; left: 50%;
  width: 0; height: 0; margin-left: -5px;
  border: 5px solid var(--accent); transform: rotate(45deg);
}
.answer p {
  margin: 0; color: var(--ink); font-weight: 700;
  font-size: var(--fs-h2); line-height: 1.4;
}
.answer .a-hi { color: var(--accent-text); }

/* 매체에 따라 하나만 나오는 자리. 동영상은 종이에 찍히지 않으므로, 화면용 동영상과
   종이용 갈무리를 «따로» 두고 여기서 하나만 켠다. 둘 다 같은 자리·같은 크기다. */
.only-print { display: none; }
.media { margin: var(--s5) 0 var(--s4); }
.media .shot { margin: 0; }
/* 세로 영상은 폭이 아니라 «높이»가 판을 넘는다. 좁은 화면에서 화면 높이의
   일흔 남짓으로 묶어 두면 한 번에 다 보인다.
   «> *» 로 쓰지 않는다 — display 를 박는 순간 자리값이 .only-print 의
   display:none 을 이겨, 종이용 갈무리가 화면에도 떠서 장을 밀어낸다. */
.media.tall > .only-screen { display: block; margin: 0 auto; max-width: 100%; max-height: 70vh; }

/* 아직 못 찍은 화면. 빈 자리로 두지 않고 무엇이 올지 적어 둔다 — 빠뜨린 것이
   아니라 채우는 중이라는 뜻이다. 다 찍으면 이 상자는 사라진다. */
.shot.todo {
  border: 1px dashed var(--line-strong); border-radius: var(--r-card);
  padding: var(--s7) var(--s5); text-align: center; background: transparent;
}
.shot.todo b { display: block; font-size: var(--fs-title); color: var(--mute); }
.shot.todo span { display: block; margin-top: var(--s2); font-size: var(--fs-sub); color: var(--faint); }

/* 목차. 아직 없는 편은 .soon 으로 눌러 둔다 — 링크가 아니라 예고다. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4); margin: var(--s7) 0 0; }
.card {
  display: block; padding: var(--s5); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
}
.card:hover { border-color: var(--ink); }
.card b { display: block; font-size: var(--fs-title); color: var(--ink); }
.card span { display: block; margin-top: var(--s2); font-size: var(--fs-sub); color: var(--mute); }
.card.soon { background: transparent; border-style: dashed; pointer-events: none; }
.card.soon b, .card.soon span { color: var(--faint); }

/* ─── 판 양옆의 손잡이. 화면에만 산다. ───
   머리띠를 없앤 자리다. 위를 비우면 판이 그만큼 커진다. 왼쪽은 돌아가는 길,
   오른쪽은 인쇄와 넘기기다. */
.side { position: fixed; top: 50%; transform: translateY(-50%); z-index: 20; }

/* 손잡이의 자와 자리. nav.js 가 판을 재어 --sheet-x(판의 왼쪽 끝)와
   --sheet-fs(판의 글자)를 준다. 손잡이는 그 둘에 매인다 — 화면 끝에 못 박아 두면
   좁은 화면에서는 판에 들러붙고 넓은 화면에서는 판과 무관한 자리에 뜬다.
   길이를 판 글자로 적어 두었으므로 판이 커지면 띠도 같은 비율로 큰다. */
.side {
  /* 손잡이는 판을 따라 크되 읽을 만한 데서 멈춘다. 판 글자를 그대로 따라가면
     2560 에서 25px 이 되어 밴드가 판을 밀어낸다 — 옆에 남는 자리는 판 너비만큼
     늘지 않는다(16:9 에서 판 글자의 열 배 남짓). */
  --hand-fs: clamp(12.5px, calc(var(--sheet-fs, 16px) * .78), 17px);
  --hand-w: calc(var(--hand-fs) * 10.4);            /* 한 줄에 「02 인사팀의 손을 던다」가 선다 */
  --hand-gap: calc(var(--sheet-fs, 16px) * 1.6);  /* 판과의 틈은 판을 따라 넓어진다 */
  --hand-off: max(var(--s4), calc(var(--sheet-x, 200px) - var(--hand-w) - var(--hand-gap)));
  width: var(--hand-w);
  font-size: var(--hand-fs);
}

/* 왼쪽은 이 편의 차례다. 지금 어느 장에 서 있는지가 늘 보이고, 눌러서 건너뛴다.
   차례 자체는 표지에 적힌 것을 nav.js 가 옮겨 세운다. */
.side-rail { left: var(--hand-off); display: flex; flex-direction: column; gap: var(--hand-gap); }
/* 띠는 화면 높이를 넘지 않는다. 장이 서른을 넘는 편(평가·전자결재·디자인…)에서
   띠가 화면보다 길어지면 세로 가운데 맞춤이 「← 다른 모듈」을 화면 위로 밀어낸다.
   돌아가는 길은 늘 보이게 두고, 넘치는 차례만 띠 안에서 넘긴다. */
@media screen and (min-width: 900px) {
  .side-rail { max-height: calc(100dvh - 2 * var(--s4)); }
}
.rail-back { flex: none; font-size: 1em; text-decoration: none; color: var(--mute); }
.rail-back:hover { color: var(--ink); }
.rail {
  list-style: none; margin: 0; padding: 0;
  /* 세로줄은 테두리가 아니라 바탕에 긋는다 — 넘김 상자는 테두리 안쪽에서 자르므로
     테두리 위에 겹쳐 서던 지금 장의 2px 줄이 반쯤 잘린다. */
  background: linear-gradient(var(--line), var(--line)) left / 1px 100% no-repeat;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  font-size: 1em;
  transition: opacity .2s;
}
/* 표지에는 차례가 이미 크게 놓여 있다. 나란히 두면 같은 여섯 줄을 두 번 읽는다.
   돌아가는 길은 남기고 차례만 접는다. */
body.at-cover .rail { opacity: 0; visibility: hidden; }
.rail a {
  display: grid; grid-template-columns: auto 1fr; gap: .5em; align-items: baseline;
  padding: .38em 0 .38em .7em;
  border-left: 2px solid transparent;
  color: var(--faint); text-decoration: none;
  font-size: inherit; line-height: 1.35;
}
.rail a b { font-family: var(--mono); font-weight: 400; }
.rail a:hover { color: var(--ink); }
/* 지금 장. 색과 굵기와 왼쪽 줄, 셋이 함께 짚는다 — 색 하나로는 눈에 안 든다. */
.rail a[aria-current] { color: var(--ink); font-weight: 700; border-left-color: var(--accent); }
.rail a[aria-current] b { color: var(--accent-text); }

/* 큰 꼭지의 이름. 절이 아니라 «묶음»이라 번호가 없고, 번호 자리만큼 왼쪽으로
   나와 선다 — 들여쓰기 차이 하나로 위아래가 갈린다. 누르면 그 꼭지를 여는 장으로
   간다. 위의 선은 꼭지와 꼭지 사이를 가르는 것이라 첫 꼭지에는 두지 않는다. */
.rail-head + li a { padding-top: .2em; }
.rail-head a {
  display: block; padding: .9em 0 .3em .7em;
  border-left: 2px solid transparent; border-top: 1px solid var(--line);
  color: var(--mute); text-decoration: none;
  font-size: .92em; font-weight: 700; letter-spacing: .06em; line-height: 1.3;
}
.rail-head:first-child a { border-top: none; padding-top: 0; }
.rail-head a:hover { color: var(--ink); }

/* 오른쪽도 같은 자를 쓴다. 한쪽만 판에 매어 두면 두 손잡이가 서로 어긋나 보인다. */
.side-tools { right: var(--hand-off); display: flex; flex-direction: column; gap: .8em; align-items: stretch; }
.side-btn, .pager {
  padding: .62em 1.1em;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,.06);
  font-family: inherit; font-size: 1em; font-weight: 700; color: var(--ink);
  cursor: pointer; white-space: nowrap;
}
.side-btn:hover, .pager:hover { border-color: var(--ink); }
/* 갈 곳이 없는 단추. 감추지 않고 물러나 있는다 — 사라지면 옆 단추 자리가 흔들린다. */
.pager:disabled { color: var(--faint); border-color: var(--line); box-shadow: none; cursor: default; }
.pager:disabled:hover { border-color: var(--line); }

/* 장마다 붙는 「이 장만」. 평소에는 물러나 있다가 그 장에 다가가면 드러난다. */
.sheet { position: relative; }
.sheet-print {
  position: absolute; top: 0; right: 0;
  padding: var(--s1) var(--s3); border: 1px solid var(--line);
  border-radius: var(--r-badge); background: var(--surface);
  font-family: inherit; font-size: var(--fs-chip); color: var(--faint);
  cursor: pointer; opacity: 0; transition: opacity .15s;
}
.sheet:hover .sheet-print, .sheet-print:focus-visible { opacity: 1; }
.sheet-print:hover { color: var(--ink); border-color: var(--line-strong); }

/* ─── 표지. 왼쪽 그림, 오른쪽 설득 문구와 차례. ───
   그림이 먼저 눈에 들어오고 글이 뒤를 받는다. 좁은 화면에서는 위아래로 눕는다.
   그림은 편마다 그 모듈이 안고 있는 것을 한 장으로 보여 주는 자리다. */
/* 두 칸은 안쪽 겹(.page)이 나눈다. 겉(.sheet)까지 나누면 격자 안의 격자가 되어
   그림이 네 조각 중 한 칸으로 쪼그라든다. */
.cover .page { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; }
.cover-art img { width: 100%; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.cover-art-cap { margin: var(--s3) 0 0; font-size: var(--fs-chip); color: var(--faint); }
.cover h1 { margin: 0 0 var(--s5); font-size: var(--fs-display); line-height: 1.2; }

/* 차례. 웹에서는 눌러서 바로 간다 — 종이에는 없는 이점이다. */
.toc { display: flex; flex-direction: column; margin: var(--s7) 0 0; border-top: 1px solid var(--line); }
/* 차례는 표지의 주인공이 아니다. 설득 문구(.lead)보다, 본문 글자보다 작게 두어
   눈이 먼저 글로 가게 한다 — 웹에서는 눌러서 건너뛰는 길이면 족하다. */
.toc a {
  display: flex; gap: var(--s4); align-items: baseline;
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: var(--fs-sub);
}
.toc a b { font-family: var(--mono); font-size: var(--fs-chip); color: var(--faint); font-weight: 400; }
.toc a:hover { color: var(--accent-text); }
.toc a:hover b { color: var(--accent-text); }

/* 차례를 눌러 온 장이 머리띠 밑에 깔리지 않게 한다. */
.sheet { scroll-margin-top: var(--s4); }

/* ─── 화면에서도 한 장은 한 장이다. ───
   좁은 화면에서는 흐르는 글로 둔다. 넓은 화면에서는 아래 「판 규칙」이 A4 를 씌운다.
   .sheet 는 크기를 잡는 겉, .page 는 그 안의 글이다. 겹을 나눈 까닭이 있다 —
   컨테이너는 자기 자신을 되물을 수 없어서, .sheet 자신에게 준 값은 판 너비가
   아니라 화면 너비로 풀린다. 그러면 문단과 목록이 서로 다른 자를 쓰게 된다. */
.sheet {
  position: relative;
  margin: 0 auto var(--s5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
.page { position: relative; display: flex; flex-direction: column; padding: var(--s7) var(--s5); }
.page > :first-child { margin-top: 0; }

/* 장식으로 까는 큰 번호. 꼬리표의 번호를 스크립트가 옮겨 온다.
   색으로만 그린다 — 바탕으로 그리면 종이에서 사라진다(크롬 기본값).
   글은 번호 위에 오되, 번호 자신은 뒤에 남는다. */
.sheet-mark {
  position: absolute; top: var(--s5); right: var(--s5); z-index: 0;
  font-family: var(--mono); font-weight: 700; line-height: 1; font-size: 4rem;
  color: color-mix(in srgb, var(--accent) 13%, #fff);
  pointer-events: none; user-select: none;
}
/* 글이 번호 위에 오도록 자리를 준다. 절대 자리에 앉은 것들(장 번호·이 장만
   인쇄 단추·출처)은 건드리지 않는다 — position 을 덮으면 흐름 안으로 끌려 들어와
   격자를 밀어낸다(표지가 262px 넘쳤다). */
.page > :not(.sheet-mark):not(.sheet-print):not(.sheet-count):not(.src) {
  position: relative; z-index: 1;
}

/* 몇 장째인가. 판 안 왼쪽 아래에 조용히 앉는다 — 줄을 따로 잡아먹지 않는다. */
.foot { display: none; }
.sheet-count {
  position: absolute; left: var(--s5); bottom: var(--s4);
  font-family: var(--mono); font-size: var(--fs-chip); color: var(--faint);
}

/* 넘기는 단추는 오른쪽 손잡이 뭉탱이에 들어간다(모양은 .side-btn 과 한 벌).
   판 안에 두면 A4 높이에서 글 한 줄을 잡아먹는다. */

/* 짚어 두는 글귀. 노란 형광펜이 아니라 이 사이트의 색으로 옅게 깐다. */
mark {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink); padding: 0 .15em; border-radius: var(--r-badge);
  /* 줄이 넘어가도 양 끝이 곱게 잘린다 */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

@media (max-width: 760px) {
  .cover .page { grid-template-columns: 1fr; gap: var(--s6); }
}

/* 좁은 화면에서는 손잡이가 판을 덮는다. 위 구석으로 올려붙인다. */
@media (max-width: 899px) {
  /* 좁은 화면에는 판이 없다. 판에 매인 자도 자리도 여기서는 뜻이 없다. */
  .side { top: var(--s3); transform: none; width: auto; }
  .side-rail { left: var(--s4); }
  .rail { display: none; }
  .side-tools { right: var(--s4); flex-direction: row; gap: var(--s3); }
  .side-btn, .pager { padding: var(--s2) var(--s4); font-size: var(--fs-chip); }
}
/* 휴대폰 폭에서는 다섯 단추가 한 줄에 서지 못한다(455px) — 왼쪽으로 화면 밖에 밀려
   나가 「← 다른 모듈」을 덮었다. 휴대폰에서 쓰지 않는 둘(전체 인쇄 = 가로 A4,
   발표 보기 = 큰 화면)을 접고 장 넘기기 셋만 남긴다. 검색은 오른쪽 아래에 따로 선다. */
@media (max-width: 599px) {
  .side-tools { gap: var(--s2); }
  .side-tools > .side-btn:not(.find-open) { display: none; }
  .side-tools .pager { padding: var(--s2) var(--s3); }
}
/* 320 폭(작은 아이폰)에서는 셋도 「← 다른 모듈」에 10px 걸린다. */
@media (max-width: 359px) {
  .side-tools .pager { padding: var(--s2); }
}

/* 화면이 여럿일 때 두 칸으로. 한 장에 담으려면 세로로 늘어놓아서는 안 된다. */
.shots-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s4); margin: var(--s6) 0; }
.shots-2 .shot { margin: 0; }

/* 한 장의 제품 화면이 내용을 맡는 자리. 두 칸짜리 화면 묶음과 달리 판의 폭과
   남은 높이를 한 장에 준다. 원본 비율은 유지하고 작은 화면에서는 화면 높이를 넘지 않는다. */
.single-shot { width: 100%; max-height: min(70dvh, 660px); margin: var(--s6) 0; text-align: center; }
.single-shot img {
  display: block; width: 100%; height: auto; max-height: min(62dvh, 600px);
  margin: 0 auto; object-fit: contain;
}

/* ═══ 판 규칙 — 종이와 넓은 화면이 함께 쓴다 ═══
   길이를 모두 «가로 A4 몇 mm» 로 적고, 그 mm 가 무엇인지만 두 곳에서 달리 준다.
   종이에서는 진짜 1mm, 화면에서는 판 너비의 1/297 이다. 그래서 화면이 커지면
   글자와 여백이 함께 커지고, 화면에 보이는 것과 인쇄된 것이 같은 물건이 된다.
   두 벌로 나누어 적으면 반드시 어긋난다 — 한 벌만 둔다.

   쓸 수 있는 자리는 265 x 182mm(297 x 210 에서 여백 16·14 를 뺀 것).
   아래 값을 키우면 종이에서는 장이 넘치고 화면에서는 판 밖으로 삐져나온다. */
@media print, screen and (min-width: 900px) {
  .page {
    --mm: 1mm;   /* 길이의 자 */
    --tp: 1mm;   /* 글자의 자 — 화면에서는 이것만 키운다 */
    /* 머리 자리의 키. 물결은 이 키의 80~89% 에 걸린다.
       종이에서는 글자가 작아 머리글이 짧고, 대신 본문이 위로 올라온다 — 그래서
       화면과 종이가 서로 다른 키를 쓴다(아래 @media print 에서 다시 준다). */
    --head-h: calc(48 * var(--mm));
    display: flex; flex-direction: column;
    font-size: calc(3.7 * var(--tp)); line-height: 1.55;
  }

  .page .sec-num { font-size: calc(3 * var(--tp)); margin-bottom: calc(4 * var(--mm)); }
  .page h1 { font-size: calc(9.2 * var(--tp)); margin: 0 0 calc(6 * var(--mm)); line-height: 1.2; }
  .page h2 { font-size: calc(5.6 * var(--tp)); margin: 0 0 calc(5 * var(--mm)); }
  .page .lead { font-size: calc(4.2 * var(--tp)); line-height: 1.6; }
  .page p { margin: 0 0 calc(4 * var(--mm)); }

  /* 가로라 폭이 남고 높이가 모자란다. 목록을 두 칸으로 흘려 높이를 접는다. */
  .feat { margin: 0 0 calc(4 * var(--mm)); columns: 2; column-gap: calc(10 * var(--mm)); }
  .feat li { padding: calc(2 * var(--mm)) 0; break-inside: avoid; }
  .feat li:first-child { border-top: none; }
  .feat b { font-size: calc(3.7 * var(--tp)); }
  .feat span { font-size: calc(3.35 * var(--tp)); }

  .page h2::before {
    width: calc(14 * var(--mm)); border-top-width: calc(1.2 * var(--mm));
    margin-right: calc(4 * var(--mm));
  }
  .page .sheet-mark {
    top: calc(4 * var(--mm)); right: calc(7 * var(--mm));
    font-size: calc(30 * var(--mm));
  }
  /* 제목 다음 문단은 번호가 앉은 오른위를 비켜 간다. 화면에서는 줄이 알아서
     짧아 겹치지 않지만 종이에서는 폭을 다 써서 번호 위로 올라탄다.
     :first-of-type 은 꼬리표(p.sec-num)를 집는다 — 제목 다음으로 짚어야 한다. */
  /* ─── 머리 자리. 제목이 앉는 위쪽을 바탕으로 한 번 더 갈라 준다. ───
     ① 아주 옅게. 5~12% 다 — 결이 보이면 글이 진다.
     ② 색은 파스텔 한 벌(tokens.css)에서 꺼내 장마다 돌려 쓴다. 새 색을 들이지 않는다.
     ③ 가르는 자리는 자로 그은 직선이 아니라 «물결»이다. 셋이 모양은 조금씩 다르되
        흔들리는 폭과 높이는 같아서, 넘겨도 같은 손이 그은 것으로 읽힌다.
     ④ 바탕은 물결 «위쪽»만 덮는다(mask). 본문은 늘 흰 바닥에서 시작한다 —
        가장 낮게 내려온 물결이 42.7mm 인데 머리글은 37.2mm 에서 끝난다.
     ⑤ 선은 그림이 아니라 늘 찍히게 해 둔다. 바탕이 빠져도 갈리는 자리는 남는다.
     ⑥ 번호 붙은 묶음에만 깐다. 표지·문·맺음은 제 짜임이 따로 있다. */
  .numbered .page::before {
    content: ""; position: absolute; inset: 0 0 auto 0; z-index: 0;
    height: var(--head-h);
    border-radius: var(--r-card) var(--r-card) 0 0;
    background-color: var(--head-tint, #F6F7FC);
    /* 결만 얹는다. 가르는 자리는 «바탕이 끝나는 물결» 그 자체다 —
       선을 한 줄 더 그으면 물결이 두 겹으로 보인다(사용자 지시로 걷었다). */
    background-image: var(--head-tex);
    background-repeat: no-repeat; background-size: 100% 100%;
    -webkit-mask-image: var(--head-mask); mask-image: var(--head-mask);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  /* 물결 열 벌. 장마다 다르되, 자리만 1/10 씩 밀린 «한 물결»이다 —
     넘기면 물결이 옆으로 흘러가는 것으로 읽힌다. 폭과 잔수는 열 장이 모두 같다.
     고르는 열쇠는 자리가 아니라 «제 번호»다(deco.js 가 sec-NN 을 달아 준다). */
  .sec-01 { --head-mask: url("head-01.svg"); }
  .sec-02 { --head-mask: url("head-02.svg"); }
  .sec-03 { --head-mask: url("head-03.svg"); }
  .sec-04 { --head-mask: url("head-04.svg"); }
  .sec-05 { --head-mask: url("head-05.svg"); }
  .sec-06 { --head-mask: url("head-06.svg"); }
  .sec-07 { --head-mask: url("head-07.svg"); }
  .sec-08 { --head-mask: url("head-08.svg"); }
  .sec-09 { --head-mask: url("head-09.svg"); }
  .sec-10 { --head-mask: url("head-10.svg"); }
  /* 열 벌을 다 쓰면 처음으로 돌아간다. 물결은 «위상만 1/10 씩 민 한 물결»이라
     열한째에서 첫째로 돌아가는 것이 곧 한 바퀴를 돈 것이다 — 새 탈을 더하지 않는다.
     돌려 쓰지 않던 때에는 var() 가 빈 채로 남아 mask 가 통째로 꺼졌고, 그 장들만
     머리 자리가 «자로 자른 직선»이 되었다(둘째 편 11~14 장이 그 자리였다).
     셋째 편은 번호 장이 열일곱이라 이 자리가 반드시 드러난다. */
  .sec-11 { --head-mask: url("head-01.svg"); }
  .sec-12 { --head-mask: url("head-02.svg"); }
  .sec-13 { --head-mask: url("head-03.svg"); }
  .sec-14 { --head-mask: url("head-04.svg"); }
  .sec-15 { --head-mask: url("head-05.svg"); }
  .sec-16 { --head-mask: url("head-06.svg"); }
  .sec-17 { --head-mask: url("head-07.svg"); }
  .sec-18 { --head-mask: url("head-08.svg"); }
  .sec-19 { --head-mask: url("head-09.svg"); }
  .sec-20 { --head-mask: url("head-10.svg"); }

  /* 결 셋 — 흩뿌린 점 · 같은 기울기의 빗금 · 길이가 다른 가로줄. */
  .numbered:nth-of-type(3n+1) { --head-tex: url("tex-a.svg"); }
  .numbered:nth-of-type(3n+2) { --head-tex: url("tex-b.svg"); }
  .numbered:nth-of-type(3n)   { --head-tex: url("tex-c.svg"); }

  /* 색 — 파스텔 다섯을 흰빛으로 더 풀어 돌려 쓴다. */
  .numbered:nth-of-type(5n+1) .page::before { --head-tint: color-mix(in srgb, var(--pastel-1) 55%, #fff); }
  .numbered:nth-of-type(5n+2) .page::before { --head-tint: color-mix(in srgb, var(--pastel-2) 55%, #fff); }
  .numbered:nth-of-type(5n+3) .page::before { --head-tint: color-mix(in srgb, var(--pastel-3) 55%, #fff); }
  .numbered:nth-of-type(5n+4) .page::before { --head-tint: color-mix(in srgb, var(--pastel-4) 55%, #fff); }
  .numbered:nth-of-type(5n)   .page::before { --head-tint: color-mix(in srgb, var(--pastel-5) 55%, #fff); }

  /* 왼쪽은 제목 글자에 맞추고(띠 14mm + 틈 4mm), 오른쪽은 큰 번호를 비켜 간다. */
  .page > h2 + p { padding-left: calc(18 * var(--mm)); }
  .numbered .page > h2 + p { padding-right: calc(44 * var(--mm)); }

  /* 두 칸으로 나눈 아래쪽. 목록이 한 칸에 들어가므로 기능 목록의 두 칸 흘림은
     여기서 되돌린다 — 두 번 나누면 한 칸에 두 줄씩 끼어 읽는 차례가 꼬인다. */
  .page .split {
    /* 글이 조금 넓다. 그림 칸이 너무 넓으면 세로로 자라 판을 넘긴다. */
    display: grid; grid-template-columns: 1.15fr 1fr;
    gap: calc(10 * var(--mm)); align-items: center;
    margin: auto 0;
  }
  .page .split .feat { columns: 1; margin: 0; }
  .page .split.shot-focus {
    display: flex; flex-direction: column; gap: calc(3 * var(--mm));
    margin: auto 0;
  }
  .page .split.shot-focus .art.shot { width: 100%; margin: 0; }
  .page .split.shot-focus .art.shot img {
    width: auto; max-width: 80%; max-height: calc(92 * var(--mm)); margin: 0 auto;
  }
  .page .split.shot-focus .feat {
    columns: auto; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(62 * var(--mm)), 1fr));
    gap: 0 calc(8 * var(--mm)); width: 100%; margin: 0;
  }
  .page .split.shot-focus .feat li {
    padding: calc(2 * var(--mm)) 0 0;
    border-top: 1px solid var(--line); border-bottom: 0;
  }
  .page .split.shot-focus .feat b { font-size: calc(3.7 * var(--tp) - 1px); }
  .page .split.shot-focus .feat span { font-size: calc(3.35 * var(--tp) - 1px); }
  /* 목록이 판을 가로지를 때는 한 줄에 셋을 세운다(사용자 지시 2026-09-18, 11 장).
     흘림(columns: 2)으로 두면 첫 칸에 둘이 몰리고 셋째만 옆에 서 칸 높이가 어긋난다 —
     격자로 못 박는다. 흘림에서는 마지막 하나만 아래 선을 갖는데, 셋이 나란히 서면
     셋 다 닫는 선이 있어야 한 줄로 읽힌다. */
  .page .feat.three {
    columns: auto; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0 calc(10 * var(--mm));
  }
  .page .feat.three li { border-bottom: 1px solid var(--line); }
  #s08 .feat.three li:first-child { border-top: 1px solid var(--line); }
  /* 세 칸으로 나눈 장 — 왼쪽 둘 · 가운데 도식 · 오른쪽 둘.
     가운데 칸은 세로로 긴 그림이라 폭을 못 박는다. */
  .page .trio {
    display: grid; grid-template-columns: 1fr calc(64 * var(--mm)) 1fr;
    gap: calc(8 * var(--mm)); align-items: center;
    margin: auto 0;
  }
  .page .trio .feat { columns: 1; margin: 0; }
  .page .trio .art img { width: 100%; height: auto; }

  .page .sub { font-size: calc(4.4 * var(--tp)); margin: calc(2.5 * var(--mm)) 0 calc(1.5 * var(--mm)); }
  /* 띠는 247mm 를 다 쓰지 않는다. 다 쓰면 키가 57mm 가 되어 장을 넘긴다. */
  .page .band { margin: 0 0 calc(3 * var(--mm)); }
  .page .band img { width: min(100%, calc(172 * var(--mm))); margin: 0 auto; }

  /* 그림 하나가 판의 가운데를 차지한다. 남는 높이는 위아래가 나눠 갖는다. */
  .page .whole { margin: auto 0; }
  .page .whole img { width: 100%; height: auto; }

  /* 물음 칸도 두 칸 안에서는 제 칸을 다 쓴다. 판에서는 상자 둘이 세로 가운데에 선다. */
  .page .asks { margin: 0; gap: calc(6 * var(--mm)); }
  .page .asks li { padding: calc(4 * var(--mm)) calc(5 * var(--mm)); }
  .page .asks b { font-size: calc(3.9 * var(--tp)); gap: calc(3 * var(--mm)); }
  .page .asks span { font-size: calc(3.35 * var(--tp)); }
  .page .aside {
    font-size: calc(3.35 * var(--tp));
    border-left-width: calc(1 * var(--mm)); padding-left: calc(4 * var(--mm));
  }
  /* 치수는 표준이 적어 둔 그대로다 — sowhat 4tp/1.4, 출처 2.4tp.
     닫는 줄은 판 바닥에 붙지 않는다. 쪽 번호와 꼬리말이 그 아래에 앉아 있다. */
  .page .sowhat {
    font-size: calc(4 * var(--tp)); line-height: 1.4;
    margin: calc(4 * var(--mm)) 0 0; padding-top: calc(3 * var(--mm));
    border-top-width: calc(.6 * var(--mm));
  }
  /* 판 안 오른쪽 아래. 왼쪽 아래 쪽 번호(.sheet-count)와 짝이라 같은 자를 쓴다.
     흐름에서 빼는 까닭이 있다 — 판의 두 칸(.split·.trio·.shots-2.two)이 남는
     높이를 위아래 auto 로 나눠 갖고 있어, 출처를 흐름에 둔 채 auto 로 내리면
     auto 가 셋이 되어 본문 덩이까지 함께 올라간다. 빼면 본문은 제자리에 있고
     출처만 내려간다. */
  .page .src {
    position: absolute; right: calc(9 * var(--mm)); bottom: calc(3 * var(--mm)); z-index: 1;
    margin: 0; font-size: calc(2.4 * var(--tp));
  }

  /* 좌우를 뒤집은 장. 넘길 때 앞 장과 리듬이 갈린다. 글 칸이 조금 넓은 것은
     그대로 두고 차례만 바꾼다. */
  .flip .page .split { grid-template-columns: 1fr 1.15fr; }
  /* 그림은 제 칸의 폭을 다 쓴다. 높이로 조이면 SVG 가 제 비율을 못 지킨다. */
  .page .split .art img { width: 100%; height: auto; }
  /* .narrow 만 예외다 — 칸(110mm)을 다 쓰면 그림이 목록보다 크게 말한다.
     제 칸에서 15% 를 걷은 94mm 다. */
  .page .split .art.narrow img { width: min(100%, calc(94 * var(--mm))); }
  /* 두 칸의 한 칸을 «화면 갈무리»가 질 때. .shot 의 44mm 는 한 장에 넷이 설 때의
     자라, 칸 하나에 하나뿐인 여기서는 목록 옆에서 혼자 작아진다. */
  .page .split .art.shot img { max-height: calc(62 * var(--mm)); }
  .page .split .art.shot { margin: 0; }
  /* 겹친 판(.stack · .pair)은 위 두 규칙(폭 100% · 키 62mm)을 카드마다 풀어 준다 —
     그대로 두면 카드마다 칸 폭을 다 써서 겹침이 무너진다. 판 자체는 칸 폭(약 118mm)을
     다 쓴다. 96mm 로 묶어 보니 넓은 칸 한쪽에 작게 앉아 «여러 장»이 읽히지 않았다.
     칸을 다 써도 키는 쌓은 판 82mm · 짝지은 판 73mm 라 판(182mm) 안에 든다. */
  .page .split .art.shot.stack, .page .split .art.shot.pair { width: 100%; }
  .page .split .art.shot.stack .deck img { width: 79%; max-height: none; }
  .page .split .art.shot.pair .deck img { width: 82%; max-height: none; }
  .page .split .art.shot.pair .deck img.phone { width: 28%; }
  /* 두 칸 짜임 안의 «아직 못 찍은» 화면 자리. 키를 주지 않으면 점선 상자가 글 두 줄로
     쪼그라들어 옆 칸의 목록과 높이가 어긋나고, 화면이 올 자리로도 읽히지 않는다.
     화면 넷이 서는 자리(.shots-2.two)에는 이미 같은 규칙이 있다. */
  .page .split .art.shot.todo {
    min-height: calc(50 * var(--mm)); display: grid; align-content: center;
    padding: calc(6 * var(--mm)) calc(4 * var(--mm));
  }

  /* PCOFF·연차촉진처럼 한 화면을 크게 읽는 장. 2열 화면의 56mm 상한보다 넓고
     크되, 제목·설명·캡션과 함께 가로 A4 한 장 안에 남는다. */
  .page .single-shot {
    display: flex; flex: 1; flex-direction: column; justify-content: center;
    min-height: 0; max-height: calc(126 * var(--mm)); margin: auto 0;
  }
  .page .single-shot img {
    width: auto; max-width: 100%; height: auto; max-height: calc(112 * var(--mm));
    margin: 0 auto; object-fit: contain;
  }
  .page .single-shot .shot-cap { flex: none; }

  /* 265mm 폭이면 화면 넷이 한 줄에 선다(66mm 씩). 이 값을 올리면 셋만 서고
     한 줄이 더 생겨 넘친다 — 묶음 06 이 그 자리다. */
  .shots-2 { grid-template-columns: repeat(auto-fit, minmax(calc(56 * var(--mm)), 1fr)); gap: calc(4 * var(--mm)); margin: calc(4 * var(--mm)) 0; }
  .shot { margin: calc(5 * var(--mm)) 0; break-inside: avoid; }
  .shot img { max-height: calc(44 * var(--mm)); width: auto; margin: 0 auto; }
  .shot-cap { font-size: calc(3 * var(--tp)); margin-top: calc(2 * var(--mm)); }
  .shot.todo { padding: calc(6 * var(--mm)) calc(4 * var(--mm)); }
  /* 이 자리는 16:9 한 판이다. 폭을 못 박아 두어야 동영상이 들어와도 장이 안 넘친다.
     크기만 여기서 주고 «보이고 안 보이고»는 건드리지 않는다 — display 를 함께 주면
     매체에 따라 접어 둔 쪽까지 펴져 장이 넘친다(실제로 겪었다). */
  /* 도식을 걷고 나서 이 자리가 장의 주인공이 되었다 — 74mm 로 두면 넓은 판
     한가운데 우표만 하게 앉는다. 밑말까지 걷어 이 장에 남은 글은 제목과 앞머리
     한 문단뿐이다 — 160mm 는 16:9 로 90mm 라, 그 둘을 빼고도 182mm 안에 든다. */
  .page .media { margin: calc(4 * var(--mm)) 0 calc(3 * var(--mm)); }
  .page .media > * {
    width: min(100%, calc(160 * var(--mm))); margin: 0 auto;
    aspect-ratio: 16 / 9;
  }
  .page .media > .only-screen { display: grid; align-content: center; }
  .page .media img, .page .media video { object-fit: contain; height: 100%; }
  /* 세로로 녹화한 것이 들어오는 자리다(«tall»). 위 16:9 상자에 그대로 앉히면
     160mm 폭 한가운데 세로 그림이 우표만 하게 남는다 — 판은 90mm 높이인데
     그림은 그보다 한참 좁기 때문이다. 높이를 다 쓰게 두고 폭이 따라오게 한다.
     기본값을 고치지 않는 까닭 — 이 판은 여덟 편이 함께 쓴다. */
  /* grid + align-content:center 를 쓰면 트랙이 auto 가 되어 아래 height:100% 가
     풀리지 않는다 — 영상이 원본 키 그대로 서서 장을 넘긴다. 가운데 맞춤은
     text-align 으로 한다. */
  .page .media.tall { flex: 1; min-height: 0; text-align: center; }
  .page .media.tall > * {
    aspect-ratio: 568 / 666; width: auto; margin: 0 auto;
    /* 남은 자리를 다 쓰되 원본(666px)보다 키우지 않는다 — 568px 로 녹화한 것을
       늘리면 글씨가 뭉갠다. 자리를 숫자로 박지 않는 까닭은 장마다·폭마다 제목과
       앞머리가 차지하는 키가 달라서다. 박아 두면 어느 폭에서 반드시 넘친다. */
    height: 100%; max-height: min(100%, 666px);
  }
  /* 화면이 지는 장. 두 칸 두 줄로 세워 실제 화면의 모양에 가깝게 자리를 잡는다 —
     지금은 빈 상자지만 여기에 그대로 화면이 들어온다. */
  .page .shots-2.two { grid-template-columns: 1fr 1fr; gap: calc(6 * var(--mm)); margin: auto 0; }
  .page .shots-2.two .shot.todo { min-height: calc(58 * var(--mm)); display: grid; align-content: center; }
  /* 이미 찍은 화면도 같은 키로 선다. 44mm 로 두면 빈 자리 옆에서 혼자 작아진다. */
  .page .shots-2.two .shot img { max-height: calc(56 * var(--mm)); }
  .page .shots-2.two .shot { margin: 0; }

  /* 그림은 1000x320 이라 폭 265mm 를 다 쓰면 85mm 다. 물음·답·받침을 빼고
     남는 높이가 100mm 남짓이라 그대로 들어간다. */
  /* 답은 물음보다 크게 앉는다. 이 장은 답 하나를 박으러 있는 장이다. */
  .page .answer { margin: calc(4 * var(--mm)) 0; padding: calc(6 * var(--mm)) calc(6 * var(--mm)); }
  .page .answer::before {
    top: calc(-1.7 * var(--mm)); margin-left: calc(-1.7 * var(--mm));
    width: 0; height: 0; border-width: calc(1.7 * var(--mm));
  }
  .page .answer p { font-size: calc(6 * var(--tp)); line-height: 1.4; }

  /* 남는 높이를 그림의 위아래가 나눠 갖는다 — 물음과 답은 판 위에, 받침은 판
     아래에 앉고 그림이 가운데를 잡는다. 아래만 비면 장이 기울어 보인다. */
  .page .life { margin: auto 0; }
  /* 문에서 주인공은 답이다. 그림이 판 폭을 다 쓰면 눈이 도식부터 훑는다 —
     폭을 걷어 가운데에 세우면 답이 먼저 읽히고 그림은 받침으로 물러난다. */
  .page .life img { width: 70%; margin: 0 auto; }
  /* 그림 속 글자를 읽어야 하는 문은 판 폭을 다 쓴다(.life.big, 급여 02·04·16 장). */
  .page .life.big img { width: 100%; }

  .cover .page { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: calc(12 * var(--mm)); align-items: center; }
  .cover-art img { max-height: calc(95 * var(--mm)); }
  .toc { margin-top: calc(8 * var(--mm)); }
  .toc a { padding: calc(1.8 * var(--mm)) 0; font-size: calc(3 * var(--tp)); gap: calc(4.5 * var(--mm)); }
  .toc a b { font-size: calc(2.6 * var(--tp)); }

  .end { border-top: none; padding-top: 0; }
  /* 도로도 판과 함께 큰다. 26mm 는 182mm 판에서 한 뼘 남짓이라 바탕으로 물러난다. */
  .end .page::before { height: calc(26 * var(--mm)); margin-top: calc(-13 * var(--mm)); }
  .end .page::after { border-top-width: calc(.8 * var(--mm)); }

  /* 맺음의 그림은 판 폭을 다 쓰지 않는다 — 글과 인사가 앉을 자리를 남긴다. */
  .page .whole img { width: 100%; height: auto; }
  .end .page .whole img { width: min(100%, calc(190 * var(--mm))); margin: 0 auto; }
  .end .page .last { font-size: calc(4 * var(--tp)); margin: 0 0 calc(2 * var(--mm)); }
  .end .page .thanks { margin: calc(5 * var(--mm)) 0 calc(4 * var(--mm)); padding-top: calc(4 * var(--mm)); font-size: calc(3.4 * var(--tp)); }
  .end .page .thanks::before { top: calc(-1.7 * var(--mm)); margin-left: calc(-1.7 * var(--mm)); border-width: calc(1.7 * var(--mm)); }
  .end .page .sign { margin-top: calc(4 * var(--mm)); font-size: calc(2.8 * var(--tp)); }
}

/* ─── 넓은 화면: 판에 A4 를 씌운다 ───
   너비는 «화면 높이에 들어가는 만큼»으로 잡는다. 1600x900 에서 한 판이 통째로
   보이고, 화면이 커지면 판도 함께 커진다. --mm 을 판 너비에 매어 두었으므로
   글자와 여백이 판과 같은 비율로 자란다. */
@media screen and (min-width: 900px) {
  /* 판이 있는 편만 폭을 푼다. 목차에도 풀면 카드가 화면 끝까지 늘어난다. */
  /* 손잡이가 양옆에 서므로 좌우를 넉넉히 비워 둔다. 위는 머리띠가 없어 바짝 붙인다. */
  /* 좌우를 같게 비운다 — 한쪽만 넓히면 판이 가운데를 벗어난다. 왼쪽 띠(148)가
     기준이고 오른쪽 단추는 그보다 좁다. */
  body:has(.sheet) .wrap { max-width: none; padding: var(--s4) 180px var(--s7); }
  .sec, .end { max-width: none; }

  .sheet {
    container-type: inline-size;
    width: min(100%, calc(297 / 210 * (100dvh - 52px)));
    aspect-ratio: 297 / 210;
    margin-bottom: var(--s5);
  }
  .page {
    --mm: 0.3367cqw;              /* 판 너비 = 297mm */
    /* 화면은 종이가 아니다. 글자를 종이 치수에 묶어 두면 작아서 읽히지 않는다.
       글자를 키운 만큼 여백을 줄여 판 안에 그대로 담는다 — 이 둘은 함께 움직인다. */
    --tp: calc(1.34 * var(--mm));
    height: 100%;
    padding: calc(7 * var(--mm)) calc(9 * var(--mm));
  }
  .sheet-count { left: calc(9 * var(--mm)); bottom: calc(3 * var(--mm)); font-size: calc(3 * var(--tp)); }
  .sheet-print { padding: calc(1 * var(--mm)) calc(3 * var(--mm)); font-size: calc(2.8 * var(--tp)); }
}

/* ─── 발표 보기. 판 하나가 화면 하나가 된다. ───
   새 화면을 따로 만들지 않고, 이미 세로로 쌓인 판에 «제 몫의 화면 높이»를 주고
   스냅을 걸었다 — 그래서 인쇄·차례·손잡이가 그대로 살아 있다. */
body.presenting { background: #14161a; }
html.presenting, body.presenting { scroll-snap-type: y mandatory; }
body.presenting .wrap {
  /* 여백이 서로 잡아먹지 않게 흐름을 바꾼다 — 블록끼리는 위아래 여백이 합쳐져
     한 장이 화면 하나를 못 채운다(실제로 겪었다). */
  display: flex; flex-direction: column;
  max-width: none; padding: 0;
}
body.presenting .sheet {
  --w: min(100dvw, calc(297 / 210 * 100dvh));
  --h: calc(var(--w) * 210 / 297);
  width: var(--w); height: var(--h); aspect-ratio: auto;
  margin: calc((100dvh - var(--h)) / 2) auto;
  border: none; border-radius: 0;
  scroll-snap-align: center; scroll-snap-stop: always;
}
body.presenting .side-rail, body.presenting .sheet-print { display: none; }
/* 오른쪽 손잡이는 남긴다 — 발표를 끝내는 길이 거기 있다. 다만 물러나 있는다. */
body.presenting .side-tools { opacity: .25; transition: opacity .2s; }
body.presenting .side-tools:hover { opacity: 1; }

/* 발표 중 왼쪽 여백에 서는 쪽 목록. 판은 가로 A4(1.414:1)라 16:9 화면에서
   양옆이 남는다 — 그 자리를 놀리지 않고 «지금 어디이며 어디로 갈 수 있는지»에 쓴다.
   여백이 132px 아래로 좁아지면 접고 큰 목록(G)만 남긴다. */
.present-rail { display: none; }
body.presenting.rail-room .present-rail {
  --bw: min(100dvw, calc(297 / 210 * 100dvh));
  display: flex; flex-direction: column; gap: 1px;
  position: fixed; top: 50%; left: 0; transform: translateY(-50%);
  width: calc((100dvw - var(--bw)) / 2); max-height: 96dvh;
  padding: 0 var(--s4); overflow: auto; z-index: 40;
}
.present-rail button {
  display: grid; grid-template-columns: auto 1fr; gap: .6em; align-items: baseline;
  padding: .38em .5em; border: none; border-left: 2px solid transparent;
  border-radius: var(--r-badge); background: transparent;
  font-family: inherit; font-size: clamp(10.5px, 1.1dvh, 13px); line-height: 1.3;
  color: rgba(255,255,255,.5); text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.present-rail button span { overflow: hidden; text-overflow: ellipsis; }
.present-rail b { font-family: var(--mono); font-weight: 400; color: rgba(255,255,255,.32); }
.present-rail button:hover { color: #fff; background: rgba(255,255,255,.08); }
.present-rail button[aria-current] {
  color: #fff; font-weight: 700; border-left-color: #8a94e0;
}
.present-rail button[aria-current] b { color: #8a94e0; }

/* 장 고르기. 발표 중에만 열리고, 판 위에 뜬다.
   hidden 은 display 를 정해 주면 진다 — 접힌 자리를 따로 못 박아 둔다(실제로 겪었다). */
.present-jump[hidden] { display: none !important; }
.present-jump {
  position: fixed; inset: 0; z-index: 45;
  display: grid; align-content: center; justify-content: center;
  grid-template-columns: repeat(2, minmax(0, 22em));
  gap: var(--s2) var(--s5); padding: var(--s7);
  /* 뒤 판이 비쳐 보이면 글자가 겹쳐 어느 장인지 못 고른다 — 거의 덮고 살짝 흐린다. */
  background: rgba(18,20,24,.972); backdrop-filter: blur(3px);
}
.present-jump button {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: baseline;
  padding: var(--s3) var(--s4); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-control); background: transparent;
  font-family: inherit; font-size: var(--fs-sub); color: #fff; text-align: left; cursor: pointer;
}
.present-jump button:hover, .present-jump button:focus-visible {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.4); outline: none;
}
.present-jump b { font-family: var(--mono); font-weight: 400; color: #9aa3d8; }

.present-hint {
  position: fixed; left: 50%; bottom: var(--s6); transform: translateX(-50%);
  margin: 0; padding: var(--s2) var(--s5); border-radius: var(--r-pill);
  background: rgba(20,22,26,.82); color: #fff; font-size: var(--fs-label);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  pointer-events: none; z-index: 40;
}
.present-hint.show { opacity: 1; visibility: visible; }

/* ─── 인쇄만의 것 ─── */

@media print {
  @page { size: A4 landscape; margin: 14mm 16mm; }

  /* 종이에서는 글자가 작아 머리글이 18~24mm 에서 끝난다. 머리 자리를 화면 값(48mm)
     그대로 두면 물결이 본문 위로 내려앉는다 — 실제로 06 의 화면 상자를 덮었다.
     ① 머리 자리를 31mm 로 낮추고(물결은 24.8~27.6mm 에 걸린다)
     ② 설명 문단에 최소 키를 주어 본문이 28mm 아래에서만 시작하게 못 박는다.
     둘이 함께여야 «바탕이 본문을 가리지 않는다»가 한 줄도 어긋나지 않는다. */
  .page { --head-h: calc(31 * var(--mm)); }
  .numbered .page > h2 + p { min-height: calc(15 * var(--mm)); }

  /* 세로 영상 자리는 종이와 화면이 다르게 풀린다. 화면의 판은 키가 정해져 있어
     flex 로 «남은 자리»를 줄 수 있지만, 종이는 @page 상자 안으로 흘러 들어가
     부모에 정해진 키가 없다 — height:100% 가 auto 로 떨어져 갈무리가 원본 키로
     서고 장이 둘 늘어난다(15쪽 → 17쪽). 종이에서만 키를 숫자로 박는다. */
  .page .media.tall { flex: none; }
  .page .media.tall > * { height: calc(88 * var(--mm)); max-height: none; }

  /* 인쇄에서는 페이지의 남은 높이를 넘기지 않는다. 캡션을 남겨 둔 채 그림만 비율대로
     줄여 빈 종이가 하나 더 생기는 것을 막는다. */
  .page .single-shot { flex: none; max-height: calc(126 * var(--mm)); }
  .page .single-shot img { max-height: calc(112 * var(--mm)); object-fit: contain; }

  .side, .sheet-print, .sheet-count, .skip,
  .present-hint, .present-jump, .present-rail { display: none !important; }
  /* 종이에서는 동영상 자리를 접고 갈무리를 편다 — 동영상은 종이에 찍히지 않는다. */
  .only-screen { display: none !important; }
  /* 10 은 「이제는 AI 시대」의 절 번호다. 차례(.toc)와 꼬리표가 쓰는 그 번호다. */
  .go::after { content: " (10 장)"; }
  .only-print { display: block; }
  .page .media > .only-print { display: grid; align-content: center; }
  body { background: #fff; }
  .wrap, .sec, .end { max-width: none; padding: 0; }

  /* 화면의 판 꾸밈을 벗기고, 장을 종이 높이만큼 늘려 꼬리말을 아래에 앉힌다.
     182 를 넘기면 빈 장이 딸려 나온다. */
  .sheet {
    break-after: page; break-inside: avoid; margin: 0; padding: 0;
    width: auto; aspect-ratio: auto;
    background: none; border: none; border-radius: 0;
  }
  .page { min-height: 175mm; padding: 0; }
  .sheet:last-child { break-after: auto; }
  .cover .page .foot { grid-column: 1 / -1; margin-top: 0; }
  .toc a { color: #14161a; }
  .btn { display: none; }

  /* 종이의 꼬리말. 왼쪽에 이름과 쪽수, 오른쪽에 권리 문구.
     건네받은 사람이 «누구의 몇 쪽인지»를 종이만 보고 알아야 한다.
     nav.js 가 장마다 하나씩 심는다 — 열네 장에 손으로 적지 않는다. */
  .foot {
    display: flex; align-items: baseline; justify-content: space-between; gap: 6mm;
    margin-top: auto; padding-top: 3mm;
    border-top: 1px solid #ddd; font-size: 8pt; color: #888;
  }
  .foot-left { display: inline-flex; align-items: baseline; gap: 2mm; }
  /* 숫자만 mono 로. 한글에 씌우면 굴림으로 떨어진다. */
  .foot-mark { font-family: var(--mono); font-weight: 700; font-size: 9pt; color: #333D9D; letter-spacing: .06em; }
  .foot-word { font-weight: 700; color: #555; }
  .foot-no { font-family: var(--mono); margin-left: 2mm; }
  .foot-right { text-align: right; }

  /* 종이에서는 판 바닥을 꼬리말이 쓰고, 판에 좌우 여백이 없다(@page 가 준다).
     출처는 꼬리말 위 2mm 남짓에 앉는다 — 꼬리말 키가 3mm(윗틈)+4.4mm(8pt 한 줄)다. */
  .page .src { right: 0; bottom: calc(10 * var(--mm)); }

  /* 형광펜은 종이에서 회색 덩어리로 나온다. 밑줄로 바꾼다. */
  mark { background: none; padding: 0; border-bottom: 1.5pt solid #333D9D; }
}

/* ─── 검색 (search.js) ───
   목차에는 넓은 문을 펼쳐 두고, 편 안에서는 오른쪽 손잡이에 단추 하나를 둔다.
   창은 하나다 — 목차의 칸(한 화면에 다 서도록 짠 것)을 밀어내지 않고 그 위에 뜬다. */
.find-open-wide {
  display: flex; align-items: center; gap: var(--s3); width: 100%; max-width: 30em;
  margin-top: var(--s5); padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,.05);
  font: inherit; font-size: var(--fs-sub); color: var(--mute); text-align: left; cursor: text;
}
.find-open-wide:hover, .find-open-wide:focus-visible { border-color: var(--accent); outline: none; }
.find-open-wide small { display: block; margin-top: 2px; font-size: var(--fs-chip); color: var(--faint); }
.find-open-wide svg, .find-ico {
  flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

dialog.find {
  width: min(720px, calc(100% - 2 * var(--s4))); max-height: min(82dvh, 760px);
  margin: max(var(--s4), 8dvh) auto auto; padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-card);
  background: var(--surface); color: var(--ink); box-shadow: 0 18px 60px rgba(20,22,26,.22);
  font-size: var(--fs-body); overflow: hidden;
}
dialog.find[open] { display: flex; flex-direction: column; }
dialog.find::backdrop { background: rgba(20,22,26,.38); }
.find-bar {
  display: flex; align-items: center; gap: var(--s3); margin: 0;
  padding: var(--s3) var(--s3) var(--s3) var(--s4); border-bottom: 1px solid var(--line);
  color: var(--mute);
}
.find-bar input {
  flex: 1; min-width: 0; padding: var(--s2) 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 1.08rem; color: var(--ink);
}
.find-bar input::-webkit-search-cancel-button { cursor: pointer; }
.find-close {
  flex: none; padding: var(--s1) var(--s3); border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); font: inherit; font-size: var(--fs-chip); color: var(--mute); cursor: pointer;
}
.find-close:hover { border-color: var(--ink); color: var(--ink); }
.find-scope { display: flex; gap: var(--s2); padding: var(--s3) var(--s4) 0; flex-wrap: wrap; }
.find-scope[hidden] { display: none; }
.find-scope button {
  padding: var(--s1) var(--s3); border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); font: inherit; font-size: var(--fs-chip); color: var(--mute); cursor: pointer;
}
.find-scope button[aria-pressed="true"] { border-color: var(--accent); background: var(--pastel-1); color: var(--accent-text); font-weight: 700; }
.find-out { overflow-y: auto; padding: var(--s3) var(--s4) var(--s4); overscroll-behavior: contain; }
.find-note, .find-sum { margin: var(--s2) 0; font-size: var(--fs-label); color: var(--mute); word-break: keep-all; line-height: 1.6; }
.find-mods { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s2) 0 var(--s3); }
.find-label { margin-right: var(--s1); font-size: var(--fs-chip); font-weight: 700; letter-spacing: .06em; color: var(--faint); }
.find-chip {
  display: inline-block; padding: var(--s1) var(--s3); border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--bg); font: inherit; font-size: var(--fs-label); color: var(--ink); text-decoration: none; cursor: pointer;
}
.find-chip:hover, .find-chip:focus-visible { border-color: var(--accent); color: var(--accent-text); outline: none; }
.find-wide { margin-bottom: var(--s2); }
.find-list { list-style: none; margin: 0; padding: 0; }
.find-list li + li { border-top: 1px solid var(--line); }
.find-list a {
  display: block; padding: var(--s3) var(--s2); border-radius: var(--r-badge);
  color: inherit; text-decoration: none;
}
.find-list a:hover, .find-list a:focus-visible { background: var(--bg); outline: none; box-shadow: inset 0 0 0 2px var(--pastel-1); }
.find-list small { display: block; font-size: var(--fs-chip); font-weight: 700; color: var(--accent-text); }
.find-list b { display: block; margin-top: 2px; font-size: var(--fs-title); color: var(--ink); word-break: keep-all; }
.find-list span { display: block; margin-top: var(--s1); font-size: var(--fs-label); line-height: 1.6; color: var(--read); word-break: keep-all; }
.find-list mark, .find-mark { background: #fff2a8; color: inherit; border-radius: 2px; padding: 0 1px; }
/* 다다른 장에서 짚은 말. 6초 뒤 search.js 가 걷기 전에 서서히 옅어진다. */
.find-mark { animation: find-fade 6s ease-in forwards; }
@keyframes find-fade { 0%, 70% { background: #ffe066; } 100% { background: transparent; } }
/* 손잡이의 기능 단추(전체 인쇄·발표 보기). 아이콘을 앞에 세워 장 넘기기와 가른다. */
.tool-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; }
.tool-ico {
  flex: none; width: 1.05em; height: 1.05em;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* 편 안의 검색 단추. 돋보기와 남색으로 장 넘기기 단추들과 갈라 «찾는 단추»로 읽히게 한다. */
.side-tools .find-open {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  border-color: var(--accent); background: var(--pastel-1); color: var(--accent-text);
}
.side-tools .find-open:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.side-tools .find-open .find-ico { width: 1.05em; height: 1.05em; }

/* 좁은 화면의 손잡이 줄은 이미 화면보다 넓다(다섯 단추가 한 줄). 검색을 그 줄에 두면
   맨 앞이라 화면 밖으로 밀려난다 — 오른쪽 아래에 따로 띄운다. */
@media (max-width: 899px) {
  .side-tools .find-open {
    position: fixed; right: var(--s4); bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
    padding: var(--s3) var(--s5); font-size: var(--fs-label);
    border-color: var(--accent); background: var(--accent); color: #fff;
    box-shadow: 0 6px 20px rgba(20,22,26,.22);
  }
}
@media print {
  .find-open-wide, dialog.find { display: none !important; }
  .find-mark { background: none !important; animation: none; }
}