/* ============================================================
   전자책 정본 — 블루 에디션 (BLUE EDITION)  v1.0
   ebook.css 다음에 로드한다. 지면 구조는 그대로 두고 «색 문법 · 글꼴 · 제목» 만 갈아끼운다.

   섞은 두 정본
     · 지면 구조(145×223, 홀짝 미러, 문턱 지면, 러닝풋)  ← 전자책 노랑 정본
     · 색 문법(파랑=사실 / 초록=해석 / 노랑=주의) · A2Z · 인용·표·칩  ← 도야 화이트&블루 A4 리포트 정본
       (원본 smartstore-seo-guide.pages.dev)

   자리를 바꾼 것 네 가지 — 이게 이 판을 «둘 중 하나»가 아니게 만든다
     1. 제목에서 형광펜을 뗐다. 제목은 파란 눈썹 + 먹 글자가 맡는다.
     2. 뗀 노랑은 «인용한 원문» 으로 이사했다(.src). 가이드가 노랑을 쓰던 자리다.
     3. CHAPTER 표지: 골드 전면 → 흰 지면 + 파란 5mm 바 + 거대 숫자.  PART: 먹 → 딥 네이비.
     4. 본문 행송 2.04 → 1.90. 책의 숨은 남기되 정보서의 밀도를 얻는다.
   ============================================================ */

@font-face{font-family:"A2Z";font-weight:400;font-style:normal;font-display:block;
  src:url("fonts/A2Z-4Regular.woff2") format("woff2")}
@font-face{font-family:"A2Z";font-weight:600;font-style:normal;font-display:block;
  src:url("fonts/A2Z-6SemiBold.woff2") format("woff2")}
@font-face{font-family:"A2Z";font-weight:700;font-style:normal;font-display:block;
  src:url("fonts/A2Z-7Bold.woff2") format("woff2")}
@font-face{font-family:"A2Z";font-weight:800 900;font-style:normal;font-display:block;
  src:url("fonts/A2Z-9Black.woff2") format("woff2")}

:root{
  /* 지면 — 노랑 정본과 같다. 판형은 건드리지 않는다 */
  --desk:  #E9EDF2;          /* 지면 밖 바탕도 파란 정본 것으로 */
  --ink:   #1C2331;          /* 순검정 대신 남색기 있는 먹 */
  --ink-2: #3A414D;
  --mute:  #5F6672;
  --line:  #C7CDD6;
  --bd:    #E4E7EC;

  /* 색 문법 — 파랑이 주역이다 */
  --accent:   #2563EB;       /* 파랑 = 사실·강조. 노랑 정본의 주황 자리를 그대로 물려받는다 */
  --accent-2: #7FA0E8;       /* 옅은 파랑 = 목차 하위 쪽번호 */
  --blue-d:   #1E4CBA;
  --blue-l:   #F4F7FD;
  --blue-bd:  #DAE4F6;
  --navy:     #16264A;       /* PART 표지 */

  --hl:      #F8CC44;        /* 형광펜 — 이제 «인용한 원문» 에만 (가이드 실측값) */
  --grn:     #137A5B;  --grn-d:#0E5C45;  --grn-l:#F4FAF7;  --grn-bd:#C2E0D3;
  --yel-dk:  #8A6A12;  --yel-pale:#FFFDF6;  --yel-bd:#E8D79B;  --yel-cell:#FCF8E8;
  --tint:    #F7F8FA;
  --anno:    #2563EB;        /* 그림 주석도 주역 파랑으로 통일 */

  /* 활자 — 제목은 A2Z, 본문은 명조 그대로 */
  --sans:"A2Z","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
  --body-lh: 19pt;           /* 2.04 → 1.90 */
  --sec-drop: 40mm;          /* 절 머리 공백을 줄여 정보 밀도를 얻는다 */
  --fm-drop:  52mm;
}

/* ── 지면 ────────────────────────────────────────────────── */
.pg{ box-shadow:0 1px 2px rgba(16,24,40,.1), 0 10px 28px -8px rgba(16,24,40,.2) }
body{ color:var(--ink-2) }
.p,.quote,.beat{ color:var(--ink-2) }

/* 러닝풋 — 위에 실선 한 줄을 얹는다 (가이드의 .pfoot 어법) */
.pg > .foot::before{
  content:""; position:absolute; left:0; right:0; top:-2.6mm;
  height:.18mm; background:var(--bd);
}
.pg > .foot{ position:absolute }
.foot b{ color:var(--accent) }               /* 장 라벨이 파랑 */
.foot .n{ color:var(--mute) }

/* ── SECTION 머리 — 순서를 뒤집는다 ──────────────────────
   노랑 정본: 굵은선 → 라벨 → 얇은선 → 제목
   블루 에디션: 파란 눈썹 라벨 → 제목 → 굵은선   (가이드의 .ph 어법)   */
.sec-rule{ display:none }
.sec-label{
  height:auto; padding-bottom:2.4mm; gap:1.4mm;
  font-family:var(--sans); font-weight:800; font-size:8.4pt;
  letter-spacing:.18em; color:var(--accent);
}
.sec-mark{ width:3.4mm; height:3.4mm; color:var(--accent) }
.sec-hair{ display:none }
.sec-title{
  margin:0; font-family:var(--sans); font-weight:800; color:var(--ink);
  font-size:17pt; line-height:1.24; letter-spacing:-.035em;
}
.sec::after{ content:""; display:block; margin-top:3.4mm; height:.62mm; background:var(--ink) }

/* 앞붙이 머리표도 같은 어법으로 */
.fm-rule{ display:none }
.fm-lbl{
  height:auto; padding-bottom:2.4mm;
  font-family:var(--sans); font-weight:800; font-size:8.4pt;
  letter-spacing:.18em; color:var(--accent);
}
.fm-hair{ display:none }
.fm-ttl{ margin:0; font-family:var(--sans); font-weight:800; color:var(--ink);
  font-size:17pt; line-height:1.3; letter-spacing:-.035em }
.fm::after{ content:""; display:block; margin-top:3.4mm; height:.62mm; background:var(--ink) }

/* ── 제목 — 형광펜을 떼고 파란 사각 불릿을 단다 ─────────── */
.h2{
  margin-top:30pt; font-family:var(--sans); font-weight:800; color:var(--ink);
  font-size:11pt; line-height:1.45; letter-spacing:-.025em;
  display:flex; align-items:baseline; gap:2.2mm;
}
.h2 > span{ background:none }                 /* 형광펜 제거 */
.h2::before{
  content:""; flex:none; width:2.1mm; height:2.1mm; border-radius:.4mm;
  background:var(--accent); transform:translateY(-.35mm);
}
.h2 + *{ margin-top:6pt }
.h3{
  margin-top:22pt; padding-left:4.3mm; font-family:var(--sans); font-weight:700;
  color:var(--blue-d); font-size:9.8pt; letter-spacing:-.02em;
}
.h3 + *{ margin-top:3pt }
.cn{ color:var(--accent) }

/* ── 노랑의 새 자리 : 인용한 원문 ────────────────────────
   가이드가 노랑을 쓰던 방식 그대로 — 남의 문서에서 그대로 옮겨온 문장에만 칠한다.  */
.src{
  background-image:linear-gradient(var(--hl),var(--hl));
  background-repeat:no-repeat; background-size:100% .62em; background-position:0 .52em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  font-weight:600; color:var(--ink);
}
/* 원어 병기는 파랑으로 */
.gloss{ color:var(--accent); font-family:var(--sans); font-weight:600 }

/* ── 인용 박스 — 파란 왼쪽선 + 파란 알약 라벨 (가이드 이식) ── */
.srcbox{
  margin:calc(var(--body-lh)*.85) 0 0; border-left:.85mm solid var(--accent);
  background:var(--blue-l); border-radius:0 2mm 2mm 0; padding:3.4mm 4mm 3.6mm;
  font-family:var(--sans);
}
.srcbox .lbl{
  display:inline-block; background:var(--accent); color:#fff; font-weight:800;
  font-size:6.6pt; letter-spacing:.02em; padding:1mm 2mm .85mm; border-radius:1mm;
  margin-bottom:2.4mm;
}
.srcbox p{ margin:0; font-size:8.4pt; line-height:1.62; color:var(--ink); word-break:keep-all }
.srcbox p + p{ margin-top:1.8mm }
.srcbox cite{ display:block; margin-top:2.2mm; font-style:normal; font-size:7.2pt; color:var(--mute) }

/* ── 초록 = 해석 / 노랑 = 주의  (가이드 이식) ───────────── */
.easy,.warnbox{
  margin:calc(var(--body-lh)*.85) 0 0; padding:3mm 3.8mm; border-radius:0 2mm 2mm 0;
  font-family:var(--sans); font-size:8.6pt; line-height:1.6; word-break:keep-all;
}
.easy{ border-left:.85mm solid var(--grn); background:var(--grn-l); color:var(--grn-d) }
.warnbox{ border-left:.85mm solid var(--yel-dk); background:var(--yel-pale); color:var(--yel-dk);
  border-top:.2mm solid var(--yel-bd); border-right:.2mm solid var(--yel-bd); border-bottom:.2mm solid var(--yel-bd) }
.easy b,.warnbox b{ font-weight:800 }

/* ── 이 판의 단 하나의 숫자 (가이드의 .formula) ──────────── */
.figure1{
  margin:calc(var(--body-lh)*.85) 0 0; text-align:center; padding:4mm 4mm 3.4mm;
  border:.42mm solid var(--accent); border-radius:2mm; background:var(--blue-l);
}
.figure1 .f{ font-family:var(--sans); font-size:26pt; font-weight:800; color:var(--accent);
  letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums }
.figure1 .n{ font-family:var(--sans); font-size:7.6pt; color:var(--mute); margin-top:1.8mm }

/* ── 표 (가이드 이식) ────────────────────────────────────── */
.dtable{ margin:calc(var(--body-lh)*.85) 0 0; width:100%; border-collapse:collapse;
  font-family:var(--sans); font-size:7.8pt; line-height:1.5 }
.dtable th{ background:var(--blue-l); color:var(--ink); font-weight:800; text-align:left;
  padding:2.2mm 2.4mm; border-bottom:.42mm solid var(--ink) }
.dtable td{ padding:2.2mm 2.4mm; border-bottom:.18mm solid var(--bd); vertical-align:top;
  color:var(--ink-2); word-break:keep-all }
.dtable tbody tr:last-child td{ border-bottom:0 }
.dtable td:first-child{ color:var(--accent); font-weight:800; white-space:nowrap;
  font-variant-numeric:tabular-nums }
.dtable b{ color:var(--ink); font-weight:800 }

/* ── 칩 무리 (가이드 이식) ───────────────────────────────── */
.chips{ margin:calc(var(--body-lh)*.7) 0 0; display:flex; flex-wrap:wrap; gap:1.6mm }
.chips span{ font-family:var(--sans); font-size:7.4pt; font-weight:600; color:var(--ink-2);
  border:.2mm solid var(--bd); border-radius:1.2mm; padding:1.2mm 2.2mm; background:#fff }
.chips span.on{ border-color:var(--accent); color:var(--accent); background:var(--blue-l) }

/* ── 네 칸 축 카드 (가이드의 축 지도) ───────────────────── */
.axis{ margin:calc(var(--body-lh)*.85) 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:2.2mm }
.axis > div{ border:.2mm solid var(--bd); border-radius:2mm; padding:2.6mm 2.2mm; text-align:center }
.axis h4{ margin:0; font-family:var(--sans); font-size:8.2pt; font-weight:800; color:var(--ink) }
.axis em{ display:block; font-style:normal; margin-top:.8mm; font-family:var(--sans);
  font-size:6.6pt; color:var(--mute); word-break:keep-all }
.axis ul{ margin:2.4mm 0 0; padding:0; list-style:none; border-top:.18mm solid var(--bd); padding-top:2mm }
.axis li{ font-family:var(--sans); font-size:7pt; font-weight:600; color:var(--ink-2);
  background:var(--tint); border-radius:1mm; padding:1.2mm 1.4mm; text-align:left }
.axis li + li{ margin-top:1.2mm }

/* ── 목록·Tip — 알약을 파랑으로 ──────────────────────────── */
.tip .pill{ background:var(--accent) }
.steps > li::before{ color:var(--accent) }
.blist > li::before{ color:var(--accent) }
.legend > li::before{ background:var(--accent) }
.box .bt{ color:var(--accent) }

/* ── NOTE 카드 — 머리띠를 파랗게 ────────────────────────── */
.note{ border-color:var(--bd) }
.note-ttl{ color:var(--ink) }
.note-h{ border-bottom-color:var(--accent) }
.note-av::after{ background:var(--accent) }

/* ── PART 표지 — 딥 네이비 + 파란 굵은 선 ──────────────── */
.pg.part{ background:var(--navy) }
.part-lbl{ font-family:var(--sans); font-weight:800; border-bottom-color:var(--accent) }
.part-ttl{ font-family:var(--sans); font-weight:800; font-size:40pt; letter-spacing:-.045em }

/* ── CHAPTER 표지 — 흰 지면 + 파란 5mm 바 + 거대 숫자 ──── */
.pg.chap{ background:var(--paper) }
.pg.chap::before{ content:""; position:absolute; top:0; left:0; right:0; height:5mm; background:var(--accent) }
.pg.chap::after{                       /* 지면 아래쪽에 옅게 깔리는 큰 숫자 */
  content:attr(data-n); position:absolute; right:8mm; bottom:-14mm;
  font-family:var(--sans); font-weight:800; font-size:150pt; line-height:1;
  color:var(--blue-l); letter-spacing:-.06em; pointer-events:none;
}
.chap-in{ padding-top:44mm; align-items:flex-start; text-align:left;
  padding-left:var(--m-gutter); padding-right:var(--m-outer) }
.chap-lbl{ font-family:var(--sans); font-weight:800; font-size:8.4pt; letter-spacing:.18em;
  color:var(--accent); border-bottom:0; padding-bottom:0 }
.chap-ttl{ margin-top:5mm; font-family:var(--sans); font-weight:800; color:var(--ink);
  font-size:30pt; line-height:1.22; letter-spacing:-.04em }
.chap-sub{ margin-top:4mm; font-family:var(--sans); font-weight:600; color:var(--mute);
  font-size:10.4pt; letter-spacing:-.02em }
.pg.chap .chap-in::after{ content:""; display:block; margin-top:7mm; width:26mm; height:.85mm; background:var(--accent) }

/* 심볼 판도 네이비로 */
.pg.plate{ background:var(--navy) }
.pg.plate svg{ color:var(--accent) }

/* ── 목차 ────────────────────────────────────────────────── */
.toc-part,.toc-chap b,.toc-chap span,.toc-sec,.toc-i,.toc-stub{ font-family:var(--sans) }
.toc-part .n{ border-bottom-color:var(--accent) }
.toc-chap{ border-top-color:var(--ink) }
.toc-badge{ background:var(--accent) }
.toc-badge.out{ color:var(--accent); box-shadow:inset 0 0 0 .2mm var(--accent) }

/* 약표지 */
.title-over{ font-family:var(--sans); color:var(--accent); letter-spacing:.14em; font-size:8.6pt; font-weight:800 }
.title-main{ font-family:var(--sans); color:var(--ink) }
.title-main b{ color:var(--accent); font-weight:800 }
.pg.title-pg::before{ content:""; position:absolute; top:0; left:0; right:0; height:5mm; background:var(--accent) }