/* ============================================================
   도야 전자책 정본 — 노랑 버전 (YELLOW EDITION)  v1.0
   원본 실측: 「3줄의 글로 수익을 만드는 스레드 운영법」(한빛미디어, 이동영)
   278쪽 전수 판독 + 픽셀 실측으로 내지 디자인을 이식했다.
   토큰·치수를 바꾸기 전에 AUTHORING.md 를 읽을 것.
   ============================================================ */

@font-face{
  font-family:"Pretendard"; font-weight:45 920; font-style:normal; font-display:block;
  src:url("fonts/PretendardVariable.woff2") format("woff2-variations");
}

/* ── 토큰 ────────────────────────────────────────────────── */
:root{
  /* 지면 — 스캔 실측 (§AUTHORING 3) */
  --trim-w: 145mm;
  --trim-h: 223mm;
  --m-top:   19.0mm;   /* 굵은 선 윗머리 = 53.9pt */
  --m-bot:   15.0mm;
  --m-gutter:30.3mm;   /* 제본쪽 = 86pt */
  --m-outer: 17.0mm;   /* 바깥쪽 = 48pt */
  --col:     97.0mm;   /* 판면 폭 = 275pt. 여백 둘과 합이 판형폭이어야 한다 */
  --foot-y: 205.9mm;   /* 러닝풋 베이스라인 */
  --h3-indent: 4mm;    /* 주황 H3 는 본문보다 1em 들여 앉는다 (실측 10~12.8pt) */
  --sec-drop:67.4mm;   /* SECTION 머리 전체 높이 — 첫 본문은 항상 여기서 시작한다 */
  --fm-drop: 88.8mm;   /* 앞붙이(프롤로그 등) 머리 높이 — 더 크게 비운다 */

  /* 색 — 스캔 실측 (§AUTHORING 4) */
  --paper:  #FFFFFF;
  --desk:   #E6E6E2;
  --ink:    #111111;
  --ink-2:  #2B2B2B;
  --mute:   #9A9A9A;
  --line:   #6E6E6E;   /* 얇은 선 — 잉크 적분상 #CCC 가 아니라 62%K 다(실측 n=9) */
  --bd:     #D9D9D9;
  --hl:     #F8DE4A;   /* 형광펜 — H2 전용 (30개 평균) */
  --gold:   #FED75E;   /* CHAPTER 표지 */
  --accent: #E07808;   /* 주황 — H3·Tip·원어·번호 */
  --accent-2:#F0A038;  /* 연한 주황 — 목차 하위 쪽번호 */
  --anno:   #3391DB;   /* 파랑 — 그림 위 주석 전용. 글자색으로 쓰지 말 것 */

  /* 활자 — 원본 줄폭을 실제 폰트 메트릭으로 역산한 값 (§AUTHORING 5) */
  --body-size: 10pt;    --body-lh:  20.4pt;   /* 2.04배 — 이 책의 성격을 만드는 값이다 */
  --tip-size:  9pt;     --tip-lh:   16.1pt;
  --list-size: 8.9pt;   --list-lh:  18.2pt;
  --card-size: 8pt;     --card-lh:  14pt;

  --sans:"Pretendard","Pretendard Variable","Noto Sans KR","Malgun Gothic",sans-serif;
  --serif:"Noto Serif KR","Nanum Myeongjo","Batang","바탕",serif;
}

/* ── 지면 ────────────────────────────────────────────────── */
*{ box-sizing:border-box }
html,body{ margin:0; background:var(--desk) }
body{ font-family:var(--serif); color:var(--ink); -webkit-font-smoothing:antialiased }
.book{ padding:10mm 0 14mm; display:flex; flex-direction:column; align-items:center; gap:6mm }

.pg{
  position:relative; width:var(--trim-w); height:var(--trim-h);
  background:var(--paper); overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.10), 0 8px 24px -8px rgba(0,0,0,.22);
  break-after:page;
}
.pg > .frame{
  position:absolute; top:var(--m-top); width:var(--col);
  height:calc(var(--trim-h) - var(--m-top) - var(--m-bot));
}
.pg[data-side="r"] > .frame{ left:var(--m-gutter) }   /* 홀수·오른쪽 면 — 왼쪽이 제본 */
.pg[data-side="l"] > .frame{ left:var(--m-outer)  }   /* 짝수·왼쪽 면 — 오른쪽이 제본 */

/* 러닝풋 */
.pg > .foot{
  position:absolute; top:var(--foot-y); width:var(--col);
  font-family:var(--sans); font-size:6pt; line-height:1;
  display:flex; align-items:baseline; gap:2.2mm; white-space:nowrap;
}
.pg[data-side="r"] > .foot{ left:var(--m-gutter); justify-content:flex-end }
.pg[data-side="l"] > .foot{ left:var(--m-outer) }
.foot b{ font-weight:700; color:var(--ink) }
.foot .t{ font-weight:500; color:var(--ink-2) }
.foot .n{ font-weight:600; color:var(--mute);   /* 라벨과 같은 광학 크기 — 실측 4.81 vs 4.84pt */
  letter-spacing:.02em; font-variant-numeric:tabular-nums }
.pg[data-side="l"] > .foot .n{ order:-1; margin-right:1.4mm }

/* ── 본문 ────────────────────────────────────────────────── */
.p{
  margin:0; font-size:var(--body-size); line-height:var(--body-lh);
  text-align:justify; word-break:keep-all; overflow-wrap:break-word;
  text-indent:1em;
}
.p.lead{ text-indent:0 }                   /* 지면 첫 문단·제목 다음 첫 문단은 들여쓰지 않는다 */
.h2 + .p, .sec-title + .p, .fm-ttl + .p{ text-indent:0 }
/* ⚠ H3 는 여기 없다 — 주황 소제목 다음 문단은 들여쓰기를 유지한다(실측 p90·120·129·224·240) */

/* 원어 병기 — 한글 바로 뒤에 붙는 작은 주황 로마자 */
.gloss{
  font-family:var(--sans); font-size:.64em; font-weight:500;
  color:var(--accent); letter-spacing:0; overflow-wrap:break-word;
}
/* 인용 — 양쪽으로 물린 명조. 선도 채움도 없다 */
.quote{
  margin:calc(var(--body-lh)*1.2) 0; padding:0 1.7em;
  font-size:var(--body-size); line-height:var(--body-lh);
  text-indent:0; word-break:keep-all;
}
/* 한 문장 단독 단락 (비트 라인) */
.beat{ margin:calc(var(--body-lh)*.8) 0 0; font-size:var(--body-size);
  line-height:var(--body-lh); text-indent:0; word-break:keep-all }

/* ── 제목 ────────────────────────────────────────────────── */
/* SECTION 머리 — 높이 고정. 제목이 두 줄이 돼도 본문 시작점은 안 움직인다 */
.sec{ height:var(--sec-drop) }
.sec-rule{ height:.71mm; background:var(--ink) }
.sec-label{
  display:flex; align-items:center; gap:1.6mm; height:9.9mm;
  font-family:var(--sans); font-weight:700; font-size:9.4pt; letter-spacing:.01em;
}
.sec-mark{ width:4.1mm; height:4.1mm; flex:none; display:block }
.sec-hair{ height:.18mm; background:var(--line) }
.sec-title{
  margin:4.4mm 0 0; font-family:var(--sans); font-weight:800;
  font-size:16pt; line-height:1.34; letter-spacing:-.025em; word-break:keep-all;
}

/* H2 — 형광펜. 실측: 막대 8.28pt, 글자 위에서 4.14pt 내려 시작해 밑선 아래 2.5pt 까지 */
.h2{
  margin:41.6pt 0 0;   /* 앞 본문 베이스라인 → 막대 윗머리 54.7pt (실측 n=30) */ font-family:var(--sans); font-weight:800;
  font-size:10.5pt; line-height:1.5; letter-spacing:-.015em; word-break:keep-all;
}
.h2 > span{
  background-image:linear-gradient(var(--hl),var(--hl));
  background-repeat:no-repeat;
  background-size:100% .777em;   /* 8.16pt */
  background-position:0 .534em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
/* H3 — 주황 글자. 형광펜 없음 */
.h3{
  margin:32pt 0 0; padding-left:var(--h3-indent);
  font-family:var(--sans); font-weight:700; color:var(--accent);
  font-size:10pt; line-height:1.5; letter-spacing:-.015em; word-break:keep-all;
}
/* H3 아래에 딸린 목록은 본문이 아니라 H3 기둥에 맞춘다 (실측 p230) */
.at-h3{ padding-left:var(--h3-indent) }
/* 원문자 번호 — 제목 앞이나 안에 들어간다 (①②③) */
.cn{ font-weight:800; margin-right:.15em }

.h2 + *{ margin-top:13pt }
.h3 + *{ margin-top:4pt }
.sec + .h2, .sec + .h3, .fm + .h2, .fm + .h3{ margin-top:0 }
.frame > :first-child{ margin-top:0 }

/* ── Tip ─────────────────────────────────────────────────── */
.tip{
  margin:calc(var(--body-lh)*.9) 0 0; font-family:var(--sans); font-weight:500;
  font-size:var(--tip-size); line-height:var(--tip-lh);
  text-align:justify; word-break:keep-all; color:var(--ink-2);
}
.tip .pill{
  display:inline-block; background:var(--accent); color:#fff;
  font-weight:700; font-size:5.6pt; line-height:1;
  width:4.2mm; height:2.93mm; padding:0; display:inline-grid; place-items:center; border-radius:.42mm;
  margin-right:1.6mm; transform:translateY(-.4mm); letter-spacing:.01em;
}

/* ── 목록 ────────────────────────────────────────────────── */
.blist,.steps,.legend,.compare,.dlist{
  margin:calc(var(--body-lh)*.9) 0 0; padding:0; list-style:none;
  font-family:var(--sans); font-weight:500; color:var(--ink-2);
  font-size:var(--list-size); line-height:var(--list-lh);
}
.blist > li,.steps > li,.legend > li,.compare > li,.dlist > li{
  position:relative; text-align:justify; word-break:keep-all;
}
.blist > li + li,.steps > li + li,.legend > li + li,.dlist > li + li{ margin-top:calc(var(--list-lh)*.85) }
.blist b,.steps b,.legend b,.compare b{ font-weight:700; color:var(--ink) }

.blist > li{ padding-left:4.2mm }
.blist > li::before{ content:"•"; position:absolute; left:.6mm; top:0; color:var(--ink); font-weight:700 }

.dlist{ counter-reset:dl }                    /* 검정 원판에 흰 숫자 (실측 p68) */
.dlist > li{ counter-increment:dl; padding-left:6.4mm }
.dlist > li::before{
  content:counter(dl); position:absolute; left:0; top:.5mm;
  width:4.1mm; height:4.1mm; border-radius:50%; background:var(--ink); color:#fff;
  font-size:6.4pt; font-weight:700; display:grid; place-items:center; line-height:1;
}
.steps{ counter-reset:st }
.steps > li{ counter-increment:st; padding-left:7.2mm }
.steps > li::before{
  content:counter(st,decimal-leading-zero); position:absolute; left:0; top:.4mm;
  font-weight:800; font-size:8.4pt; color:var(--accent); font-variant-numeric:tabular-nums;
}
/* 그림 위 번호 마커와 짝을 이루는 범례 */
.legend{ counter-reset:lg }
.legend > li{ counter-increment:lg; padding-left:5.6mm }
.legend > li::before{
  content:counter(lg); position:absolute; left:0; top:.55mm;
  width:3.7mm; height:3.7mm; border-radius:50%; background:var(--anno); color:#fff;
  font-size:6pt; font-weight:700; display:grid; place-items:center; line-height:1;
}
/* 좋은 예 / 나쁜 예 비교 — 이모지가 마커다 */
.compare > li{ padding-left:5.4mm }
.compare > li + li{ margin-top:calc(var(--list-lh)*.45) }
.compare > li + li.gap{ margin-top:calc(var(--list-lh)*1.1) }
.compare > li::before{ content:attr(data-mk); position:absolute; left:0; top:0 }
.exlabel{
  margin:calc(var(--body-lh)*.9) 0 0; font-family:var(--sans); font-weight:700;
  font-size:9pt; color:var(--ink); display:flex; align-items:center; gap:1.4mm;
}
.exlabel + .compare{ margin-top:calc(var(--list-lh)*.5) }

/* ── 회색 박스 (테두리만 · 채움 없음) ───────────────────── */
.box{
  margin:calc(var(--body-lh)*.9) 0 0; border:.26mm solid var(--bd); border-radius:3.2mm;
  padding:5.4mm 6.2mm 5.8mm; font-family:var(--sans);
}
.box .bt{ margin:0 0 3.2mm; font-weight:700; color:var(--accent);
  font-size:8.7pt; line-height:1.45; word-break:keep-all }
.box p,.note-bd p{
  margin:0; font-weight:500; color:var(--ink-2);
  font-size:var(--card-size); line-height:var(--card-lh);
  text-align:justify; word-break:keep-all;
}
.box p + p,.note-bd p + p{ margin-top:calc(var(--card-lh)*.72) }

/* ── NOTE 카드 (SNS 게시물을 흉내낸 카드) ───────────────── */
.note{
  margin:calc(var(--body-lh)*.9) 0 0; border:.26mm solid var(--bd); border-radius:1.62mm;   /* 4.6pt (원호 피팅 실측) */
  padding:3.8mm 4.94mm 4.94mm 3.18mm; font-family:var(--sans);
}
.note-hd{ display:flex; align-items:center; gap:2mm }
.note-av{
  position:relative; width:10.2mm; height:10.2mm; flex:none; border-radius:50%;
  background:#E9E9E9 center/cover no-repeat; box-shadow:inset 0 0 0 .22mm #E0E0E0;
}
.note-av > img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block }
.note-av::after{
  content:"+"; position:absolute; right:-.5mm; bottom:-.5mm; width:3.1mm; height:3.1mm;
  border-radius:50%; background:var(--ink); color:#fff; font-size:5pt; font-weight:700;
  display:grid; place-items:center; line-height:1; box-shadow:0 0 0 .5mm var(--paper);
}
.note-chev{ color:var(--ink); font-size:8pt; font-weight:600; line-height:1; margin-left:-.4mm }
.note-emoji{ font-size:8.8pt; line-height:1 }
.note-ttl{ font-weight:700; font-size:9pt; letter-spacing:-.01em; color:var(--ink) }
.note-acts{ margin-left:auto; display:flex; gap:3.1mm; color:#B9B9B9 }
.note-acts svg{ width:3.6mm; height:3.6mm; display:block; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.note-div{ height:.18mm; background:var(--bd); margin:2.6mm 0 0 12.5mm }
.note-bd{ margin-left:12.5mm;   /* 카드 테두리에서 44.5pt (실측) */  padding-top:3.8mm }
.note-h{
  margin:0 0 3.4mm; display:inline-block; font-weight:700; font-size:8.7pt;
  line-height:1.45; color:var(--ink);
  border-bottom:.42mm solid var(--ink); padding-bottom:1.1mm; word-break:keep-all;
}
/* 카드 안 중첩 게시물 미리보기 */
.post{
  margin:0 0 3.4mm; border:.22mm solid var(--bd); border-radius:.35mm;   /* 사실상 각지다 (실측 0~1pt) */ padding:2.8mm 3.2mm;
  font-size:var(--card-size); line-height:1.75; color:var(--ink); font-weight:600;
}
.post .metrics{ display:flex; gap:4.2mm; margin-top:2.2mm; color:var(--ink-2);
  font-weight:500; font-size:6.8pt; align-items:center }
.post .metrics span{ display:inline-flex; align-items:center; gap:1.1mm }
.post .metrics svg{ width:3.1mm; height:3.1mm; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
/* 자료 카드 — QR + URL 알약 */
.qr{ margin:3.4mm 0 0; text-align:center }
.qr img,.qr .ph{ width:22mm; height:22mm; display:inline-block }
.urlpill{ margin-top:2.6mm; display:flex; align-items:center; gap:1.4mm;
  font-size:7pt; font-weight:500; color:var(--ink-2) }
.urlpill i{ font-style:normal; background:var(--ink); color:#fff; font-weight:700;
  font-size:5.6pt; padding:.8mm 1.2mm .7mm; border-radius:.5mm; letter-spacing:.02em }

/* ── 그림 ────────────────────────────────────────────────── */
.fig{ margin:calc(var(--body-lh)*.9) 0 0; position:relative }
.fig > .frameimg{ display:block; border:.22mm solid var(--bd); border-radius:1.2mm;
  overflow:hidden; background:#FBFBFB }
.fig.dashed > .frameimg{ border-style:dashed; border-color:#CFCFCF }
.fig.bare > .frameimg{ border:0; background:none }
.fig img{ width:100%; display:block }
.fig figcaption{ margin-top:2.2mm; font-family:var(--sans); font-size:6.6pt;
  color:var(--mute); text-align:center; word-break:keep-all }
.fig .ph{ aspect-ratio:16/9; display:grid; place-items:center; color:#BDBDBD;
  font-family:var(--sans); font-size:7pt; letter-spacing:.04em }
/* 그림 위 주석 — 파랑은 여기서만 쓴다 */
.anno{ position:absolute; border:.4mm solid var(--anno); border-radius:1mm }
.anno.round{ border-radius:50% }   /* 주석 모양은 대상 모양을 따라간다 */
.anno-n{ position:absolute; width:3.7mm; height:3.7mm; border-radius:50%;
  background:var(--anno); color:#fff; font-family:var(--sans); font-weight:700;
  font-size:6pt; display:grid; place-items:center; line-height:1 }

/* ── PART 표지 (검정 전면) ──────────────────────────────── */
.pg.part{ background:#111 }
.part-in{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; padding-top:25.4mm; color:#fff; text-align:center }
.part-lbl{ font-family:var(--sans); font-weight:800; font-size:14pt; letter-spacing:.06em;
  padding-bottom:2.2mm; border-bottom:1.45mm solid #fff }   /* 4.11pt — 이 책에서 가장 굵은 선 */
.part-ttl{ margin-top:43.8mm; font-family:var(--sans); font-weight:800;
  font-size:43.5pt; line-height:1.33; letter-spacing:-.035em; word-break:keep-all }

/* ── CHAPTER 표지 (골드 전면) ──────────────────────────── */
.pg.chap{ background:var(--gold) }
.chap-in{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; padding-top:34mm; color:var(--ink); text-align:center }
.chap-lbl{ font-family:var(--sans); font-weight:800; font-size:14pt; letter-spacing:.06em;
  padding-bottom:2.2mm; border-bottom:.62mm solid var(--ink) }
.chap-ttl{ margin-top:44.4mm; font-family:var(--sans); font-weight:800;
  font-size:37.5pt; line-height:1.24; letter-spacing:-.035em; word-break:keep-all }
.chap-sub{ margin-top:6.1mm; font-family:var(--sans); font-weight:800;
  font-size:21pt; letter-spacing:-.03em; word-break:keep-all }

/* APPENDIX 표지 — CHAPTER 와 같은 배치인데 바탕이 희고 부제가 없다 (실측 p267) */
.pg.appx{ background:var(--paper) }
.pg.appx .chap-lbl{ font-size:11pt }
.pg.appx .chap-ttl{ font-size:30pt }

/* ── 전면 심볼 판 (숨 고르는 지면) ─────────────────────── */
.pg.plate{ background:#150B05; display:grid; place-items:center }
.pg.plate svg{ width:50mm; height:50mm; color:#fff }   /* #mk 은 currentColor 를 쓴다 */

/* ── 앞붙이 머리표 (프롤로그 · 목차 · 이 책의 구성 · 에필로그) ── */
.fm{ margin:0 0 12.6mm }
.fm-rule{ height:.71mm; background:var(--ink) }
.fm-lbl{ display:flex; align-items:center; height:9.9mm;
  font-family:var(--sans); font-weight:700; font-size:8.7pt; letter-spacing:-.01em }
.fm-hair{ height:.18mm; background:var(--line) }
.fm-ttl{ margin:4.4mm 0 0; font-family:var(--sans); font-weight:800;
  font-size:16pt; line-height:1.42; letter-spacing:-.025em; word-break:keep-all }
.fm.drop{ margin-bottom:0; height:var(--fm-drop) }   /* 프롤로그처럼 크게 비우는 판 */

/* 약표지 · 속표지 */
.pg.title-pg{ display:grid; place-items:center; text-align:center }
.title-over{ font-family:var(--sans); font-weight:700; font-size:11pt; letter-spacing:-.02em }
.title-main{ margin-top:3mm; font-family:var(--sans); font-weight:800;
  font-size:34pt; line-height:1.22; letter-spacing:-.035em }

/* ── 목차 ────────────────────────────────────────────────── */
.toc-stub{ margin:0 0 16mm 28.4mm; font-family:var(--sans); font-weight:500; font-size:8.4pt;
  line-height:2.1; letter-spacing:-.01em }
.toc-stub .pn{ margin-left:1.6mm; color:var(--accent-2); font-weight:600; font-variant-numeric:tabular-nums }
.toc{ display:grid; grid-template-columns:22mm 1fr; gap:0 6.4mm }
.toc-part{ font-family:var(--sans); font-weight:800; font-size:9.6pt; line-height:1.45;
  letter-spacing:-.02em; word-break:keep-all }
.toc-part .n{ display:block; width:fit-content; margin-bottom:2.6mm; letter-spacing:.02em;
  border-bottom:.53mm solid var(--ink); padding-bottom:1.1mm }
.toc-body{ min-width:0 }
.toc-chap{ border-top:.28mm solid var(--ink); border-bottom:.18mm solid var(--line);
  padding:2mm 0; margin-bottom:2mm }
.toc-chap b{ display:block; font-family:var(--sans); font-weight:800; font-size:8.4pt; letter-spacing:.02em }
.toc-chap span{ display:block; margin-top:.8mm; font-family:var(--sans); font-weight:700;
  font-size:8.4pt; letter-spacing:-.015em; word-break:keep-all }
.toc-sec{ margin-top:5.6mm; font-family:var(--sans); font-weight:800; font-size:8.4pt;
  letter-spacing:-.01em; word-break:keep-all; line-height:1.5 }
.toc-sec .sec-mark{ width:3.2mm; height:3.2mm; display:inline-block; vertical-align:-.55mm; margin-right:1.4mm }
.toc-sec .pn{ margin-left:.8mm; color:var(--accent); font-weight:800; font-variant-numeric:tabular-nums }
.toc-i{ margin-top:1.9mm; display:flex; align-items:flex-start; gap:1.6mm;
  font-family:var(--sans); font-weight:500; font-size:7.8pt; letter-spacing:-.01em;
  word-break:keep-all; line-height:1.45 }
.toc-i > .toc-badge{ margin-top:.35mm }
.toc-i .pn{ color:var(--accent-2); font-weight:600; font-variant-numeric:tabular-nums }
.toc-badge{ flex:none; background:var(--ink); color:#fff; font-weight:700; font-size:5.8pt;
  padding:.85mm 1.5mm .75mm; border-radius:.5mm; letter-spacing:.01em }
.toc-badge.out{ background:none; color:var(--ink); box-shadow:inset 0 0 0 .2mm var(--ink) }

/* ── 인쇄 ────────────────────────────────────────────────── */
@page{ size:145mm 223mm; margin:0 }
@media print{
  html,body{ background:#fff }
  .book{ padding:0; gap:0 }
  .pg{ box-shadow:none; margin:0 }
  .screen-only{ display:none !important }
}