/* ============================================================
   전자책 정본 — 노트 에디션 (NOTE EDITION)  v1.0
   ebook.css 다음에 로드한다. 지면 구조는 그대로 두고 «종이·필기 체계»로 갈아입는다.

   출처: 유튜브 「단권화 방법부터 구조 정리까지」(2026-09-07 판독).
   영상이 화면에 직접 그려 보인 범례(9:33)와 대본이 말로 밝힌 규칙을 그대로 옮겼다.

   ── 영상이 그림으로 보여준 형광펜 4단 위계 (색은 화이트밸런스 보정 실측) ──
        진한 노랑  →  큰 주제
        노랑       →  중심 내용
        초록       →  부가 설명
        연두       →  강조
   ── 대본이 말로 밝힌 규칙 ──
        · 펜 최소 3종 + 형광펜        · 큰 제목은 노트 맨 위, 검정 마커
        · 나눌 것은 기호로 분리하고 앞에 한 칸 띄어 «세로 열»을 만든다
        · 실생활 사례 = 파란 색연필    · 중요·수정·부가 설명 = 빨강
        · 문단 형식을 피하고 긴 것을 짧게   · 오답은 포스트잇에 따로 적어 붙인다
        · 형광펜을 과하게 쓰면 «낙서»가 된다 (영상이 자기 초기 노트를 실패담으로 든다)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Nanum+Pen+Script&display=swap");

:root{
  /* 지면 — 판형은 그대로. 윗여백만 19→20mm 로 올려 «본문이 모눈 위에 앉게» 한다 */
  --m-top: 20mm;
  --desk:  #D9D6CE;
  --paper: #FBF9F9;          /* 중성 흰색. 크림·아이보리가 아니다(8프레임 실측) */
  --ink:   #1A1A1A;
  --ink-2: #2E2E2E;
  --mute:  #8C8C8C;
  --line:  #B9B9B9;
  --bd:    #CFCBC0;

  /* 모눈 */
  --grid:      rgba(0,0,0,.079);   /* 종이보다 7.9% 만 어둡다. 푸른기 없음 */
  --grid-step: 5mm;

  /* 형광펜 4단 — 이 순서가 위계다 */
  --hl-1: #ECD40D;           /* 큰 주제   (범례 칩 #EFC243) */
  --hl-2: #FCFF43;           /* 중심 내용 (범례 칩 #F8F260) */
  --hl-3: #AEE171;           /* 부가 설명 (범례 칩 #B8E17C) */
  --hl-4: #E6FF5F;           /* 강조      (범례 칩 #FAFFA4) */

  /* 펜 3종 */
  --pen-red:  #C94E70;       /* 로즈크림슨. 소방차 빨강이 아니다(H≈344°) */
  --pen-blue: #38304F;       /* 다크 인디고(H≈256°). 괄호 안 부속 라벨 전용 */
  --pen-ink:  #1A1A1A;       /* 검정 마커 */

  --postit:   #F7ADBA;       /* 분홍·살몬. 이 노트에 다른 색 포스트잇은 없다 */
  --postit-2: #F660AE;       /* 진한 마젠타 카드 */

  --accent:   var(--pen-red);
  --accent-2: #E5899B;
  --hl:       var(--hl-2);
  --anno:     var(--pen-blue);

  --hand:  "Gaegu","Nanum Pen Script",cursive;
  --sans:  "Pretendard","Pretendard Variable","Noto Sans KR","Malgun Gothic",sans-serif;
  --serif: var(--sans);       /* 노트는 명조를 쓰지 않는다 */

  --body-size: 10pt;
  --body-lh:  19.84pt;        /* = 7mm ≈ 모눈 1.4칸. 격자는 «안내선»이지 «괘선»이 아니다 */
  --tip-size: 9pt;     --tip-lh: 19.84pt;
  --list-size:9.4pt;   --list-lh:19.84pt;
  --card-size:9pt;     --card-lh:19.84pt;
}

/* ── 지면 : 모눈 + 스프링 제본 ───────────────────────────── */
.pg{
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(to right,  var(--grid) 0 1px, transparent 1px var(--grid-step)),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px var(--grid-step));
  background-position:0 0;
  box-shadow:0 1px 2px rgba(60,50,30,.12), 0 10px 26px -10px rgba(60,50,30,.35);
}
/* 스프링 — 제본쪽 가장자리. data-side 를 따라 좌우가 바뀐다 */
.pg[data-side]::before{
  content:""; position:absolute; top:0; bottom:0; width:11mm;
  background-image:radial-gradient(ellipse 3.1mm 1.5mm at 50% 50%, #A9A9AE 0 42%, transparent 44%);
  background-size:100% 9mm; background-repeat:repeat-y;
  opacity:.75; pointer-events:none;
}
.pg[data-side="r"]::before{ left:0 }
.pg[data-side="l"]::before{ right:0 }
/* 스프링 안쪽에 종이 접힘 그림자 */
.pg[data-side]::after{
  content:""; position:absolute; top:0; bottom:0; width:16mm; pointer-events:none;
}
.pg[data-side="r"]::after{ left:11mm; background:linear-gradient(to right, rgba(90,80,60,.10), transparent) }
.pg[data-side="l"]::after{ right:11mm; background:linear-gradient(to left,  rgba(90,80,60,.10), transparent) }

.pg > .frame, .pg > .foot{ position:absolute; z-index:2 }
body{ color:var(--ink-2) }

/* 러닝풋 — 손글씨로 */
.foot{ font-family:var(--hand) !important; font-size:8.5pt !important }
.foot .n{ font-size:8.5pt !important; color:var(--mute) }
.foot b{ color:var(--pen-red) }

/* ── 본문 ────────────────────────────────────────────────── */
.p{ font-family:var(--sans); text-align:left; text-indent:0 }
.p + .p{ margin-top:var(--body-lh) }
.quote{ font-family:var(--hand); font-size:12pt; line-height:14.17pt; color:var(--ink);
  padding:0 0 0 2em; border-left:.5mm solid var(--pen-red); margin:14.17pt 0 }
.beat{ font-family:var(--hand); font-size:12.5pt; line-height:14.17pt; color:var(--pen-red) }

/* ── 큰 제목 : 노트 맨 위, 검정 마커 ────────────────────── */
.sec-rule, .sec-hair, .fm-rule, .fm-hair{ display:none }
.sec{ height:auto; margin-bottom:14.17pt }
.sec-label{
  height:auto; padding-bottom:1mm; gap:1.4mm;
  font-family:var(--hand); font-weight:700; font-size:11pt; letter-spacing:0; color:var(--pen-red);
}
.sec-mark{ width:3.6mm; height:3.6mm; color:var(--pen-red) }
.sec-title, .fm-ttl{
  margin:0; font-family:var(--hand); font-weight:700; color:var(--pen-ink);
  font-size:22pt; line-height:1.15; letter-spacing:-.01em;
  display:inline-block; padding-bottom:1.2mm;
  border-bottom:.7mm solid var(--pen-ink);      /* 마커 밑줄 */
}
.fm{ margin-bottom:14.17pt; height:auto }
.fm-lbl{ height:auto; padding-bottom:1mm; font-family:var(--hand); font-size:11pt; color:var(--pen-red) }
.fm.drop{ height:auto }

/* ── 형광펜 4단 위계 ─────────────────────────────────────
   .hl1 큰 주제 / .hl2 중심 내용 / .hl3 부가 설명 / .hl4 강조

   ⭐ 막대는 글자 «전체» 를 덮는다(영상 164프레임 판독: 막대÷글자 높이 중앙값 0.96).
      아래 절반만 칠하는 게 아니다 — 첫 판에서 틀렸던 곳이다.

   ⚠ 두 값은 본문 글꼴의 메트릭에서 나온 것이라 **글꼴을 바꾸면 다시 재야 한다.**
      --hl-pos  = (fontBoundingBoxAscent − actualBoundingBoxAscent)  … 잉크 윗머리까지 거리
      --hl-size = (actualBoundingBoxAscent + actualBoundingBoxDescent) … 잉크 전체 높이
      canvas.measureText 로 재는 법은 AUTHORING §8. 사이트의 글꼴 선택기는 이 두 변수만 갱신한다.  */
:root{ --hl-size:.96em; --hl-pos:.12em }
.hl1,.hl2,.hl3,.hl4{
  background-repeat:no-repeat; background-size:100% var(--hl-size); background-position:0 var(--hl-pos);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding:0 .12em;
}
.hl1{ background-image:linear-gradient(var(--hl-1),var(--hl-1)) }
.hl2{ background-image:linear-gradient(var(--hl-2),var(--hl-2)) }
.hl3{ background-image:linear-gradient(var(--hl-3),var(--hl-3)) }
.hl4{ background-image:linear-gradient(var(--hl-4),var(--hl-4)) }

/* H2 = 큰 주제(진한 노랑) · H3 = 중심 내용(노랑) */
.h2{
  margin-top:calc(var(--body-lh)*2); font-family:var(--sans); font-weight:800; color:var(--ink);
  font-size:11pt; line-height:14.17pt; letter-spacing:-.02em; display:block;
}
.h2::before{ content:none }
.h2 > span{
  background-image:linear-gradient(var(--hl-1),var(--hl-1));
  background-repeat:no-repeat; background-size:100% var(--hl-size); background-position:0 var(--hl-pos);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:0 .14em;
}
.h3{
  margin-top:var(--body-lh); padding-left:0; font-family:var(--sans); font-weight:700;
  color:var(--ink); font-size:9.6pt; line-height:14.17pt; letter-spacing:-.02em;
}
.h3 > span{
  background-image:linear-gradient(var(--hl-2),var(--hl-2));
  background-repeat:no-repeat; background-size:100% var(--hl-size); background-position:0 var(--hl-pos); padding:0 .14em;
}
.h2 + *, .h3 + *{ margin-top:0 }
.cn{ color:var(--pen-red); font-family:var(--hand); font-size:1.15em }

/* ── 펜 3종 ──────────────────────────────────────────────── */
/* Gaegu 는 베이스라인이 낮아 고딕과 섞이면 처진다 — 살짝 올려 앉힌다(실측) */
.red  { color:var(--pen-red);  font-family:var(--hand); font-size:1.22em; line-height:1; position:relative; top:-.07em }
.blue { color:var(--pen-blue); font-family:var(--hand); font-size:1.22em; line-height:1; position:relative; top:-.07em }
span.blue.sample::before{ content:"ex. "; font-weight:700 }
b, strong{ color:var(--ink) }

/* 빨강 물결 밑줄 — 강조 */
.wave{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='5'><path d='M0 3.4 Q3 .6 6 3.4 T12 3.4' fill='none' stroke='%23D94A63' stroke-width='1.1'/></svg>");
  background-repeat:repeat-x; background-position:0 100%; background-size:auto 1.6mm;
  padding-bottom:1.7mm;
}
/* 빨강 동그라미 */
.circ{
  border:.42mm solid var(--pen-red); border-radius:48% 52% 47% 53%/56% 44% 58% 42%;
  padding:.02em .34em .1em; color:var(--ink);
}
/* 별표 · 화살표 · ○ ✗ */
.star::before{ content:"★"; color:var(--pen-red); margin-right:.22em; font-size:1.05em }
.arw::before{ content:"→"; color:var(--pen-red); margin:0 .28em; font-weight:700 }
.ok ::after{ content:"" }
.ok::after{ content:"○"; color:var(--pen-red); margin-left:.2em; font-weight:700 }
.no::after{ content:"✕"; color:var(--pen-red); margin-left:.2em; font-weight:700 }
/* ⚠ .cf 와 .sample 은 반드시 <span> 에 쓴다. <li> 에 붙이면 목록 기호와 ::before 자리를 다퉈
   기호가 이기고 «cf)»·«ex.» 가 사라진다(실측). */
span.cf::before{ content:"cf) "; color:var(--pen-blue); font-family:var(--hand); font-size:1.15em }

/* ── 기호 위계 : 세로 열을 만든다 ────────────────────────
   1단 •   2단 -   3단 ①②③ .  기호 뒤 한 칸을 띄워 열을 맞춘다.  */
.nt{ margin:0; padding:0; list-style:none; font-family:var(--sans);
  font-size:var(--list-size); line-height:var(--list-lh); color:var(--ink-2) }
.nt > li{ position:relative; padding-left:4.6mm }
.nt > li::before{ content:"•"; position:absolute; left:.7mm; top:0; color:var(--ink); font-weight:700 }
.nt .nt{ margin-top:0; margin-left:1.2mm }
.nt .nt > li{ padding-left:4.2mm }
.nt .nt > li::before{ content:"–"; color:var(--mute); font-weight:400 }
.nt .nt .nt{ counter-reset:cn }
.nt .nt .nt > li{ counter-increment:cn; padding-left:5.4mm }
.nt .nt .nt > li::before{
  content:counter(cn); left:0; top:.15mm;
  width:3.4mm; height:3.4mm; border:.28mm solid var(--ink); border-radius:50%;
  font-size:6pt; font-weight:700; display:grid; place-items:center; line-height:1;
}
/* 하위를 묶는 세로 대괄호 — 영상이 «세로 열» 이라 부른 것 */
.brace{ position:relative; padding-left:4mm; margin-left:2.4mm }
.brace::before{
  content:""; position:absolute; left:0; top:.9mm; bottom:.9mm; width:2mm;
  border:.32mm solid var(--ink); border-right:0; border-radius:1mm 0 0 1mm;
}


/* ── 5단 번호 사다리 ─────────────────────────────────────
   실제 노트의 위계는 «번호 모양 + 한 칸 들여쓰기»로만 만든다.
   글자 크기·색·굵기로 급을 나누지 않는다(f020·f023 실측).
        Ⅷ.   →   1.   →   ①   →   1.   →   (1)
   위 3단은 번호를 사각 박스에 넣고, 1단에는 전폭 가로줄을 하나 긋는다.
   ⚠ 세로 정렬선은 «그은 선»이 아니다 — 번호의 x좌표가 맞아서 열로 보이는 것이다.  */
@counter-style ncircle{ system:fixed 1;
  symbols:"①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩"; suffix:" " }

.lad{ margin:0; padding:0; list-style:none; counter-reset:l1;
  font-family:var(--sans); font-size:var(--list-size); line-height:var(--list-lh); color:var(--ink-2) }
.lad > li{ counter-increment:l1; position:relative; padding-left:7.4mm; margin-top:var(--list-lh) }
.lad > li:first-child{ margin-top:0 }
.lad > li::before{
  content:counter(l1,upper-roman) "."; position:absolute; left:0; top:.35mm;
  font-weight:700; color:var(--ink);
  border:.3mm solid var(--ink); border-radius:.6mm; padding:.2mm 1mm; font-size:.85em; line-height:1.25;
}
/* 1단 제목 아래 전폭 가로줄 */
.lad > li > .t{ display:block; font-weight:700; color:var(--ink);
  border-bottom:.35mm solid var(--ink); padding-bottom:1mm; margin-bottom:1mm }

.lad .lad{ counter-reset:l2; margin-top:0 }
.lad .lad > li{ counter-increment:l2; padding-left:6.6mm; margin-top:0 }
.lad .lad > li::before{ content:counter(l2) "."; }

.lad .lad .lad{ counter-reset:l3 }
.lad .lad .lad > li{ counter-increment:l3; padding-left:6.2mm }
.lad .lad .lad > li::before{ content:counter(l3,ncircle); border:0; padding:0; font-size:1em }

.lad .lad .lad .lad{ counter-reset:l4 }
.lad .lad .lad .lad > li{ counter-increment:l4; padding-left:5.4mm }
.lad .lad .lad .lad > li::before{ content:counter(l4) "."; border:0; padding:0 }

.lad .lad .lad .lad .lad{ counter-reset:l5 }
.lad .lad .lad .lad .lad > li{ counter-increment:l5; padding-left:6.6mm }
.lad .lad .lad .lad .lad > li::before{ content:"(" counter(l5) ")"; border:0; padding:0 }

/* ── 정의문 : 번호 + [용어](형광) + : + 설명 ─────────────
   이 노트에 문단 서술은 한 줄도 없다. 전부 이 골격의 한두 줄짜리 항목이다.  */
.def > .k{ font-weight:700; color:var(--ink) }
.def > .k::after{ content:" : "; font-weight:400; color:var(--ink-2) }
.def .src{ color:var(--pen-red); font-size:.94em }   /* 연도·출처는 용어 뒤 괄호에 */

/* ── 속 빈 굵은 화살표 «⇨» = 따라서·그러므로 ────────────
   ⚠ .thus 도 .cf·.sample 과 같다 — <li> 에 붙이면 목록 번호가 ::before 를 이겨 화살표가 사라진다.
      ::before 를 쓰는 이 판의 클래스(.cf .sample .thus .star .arw)는 전부 <span> 전용이다. */
span.thus::before{ content:"⇨"; color:var(--ink); font-weight:700; margin-right:.34em; font-size:1.1em }

/* ── 형광펜 물결 — 막대와 같은 형광펜의 «좁은 면». 굵기 비 3:1 ── */
.hw1,.hw2,.hw3,.hw4{ background-repeat:repeat-x; background-position:0 100%;
  background-size:auto .9mm; padding-bottom:1.1mm }
.hw1{ background-image:linear-gradient(var(--hl-1),var(--hl-1)) }
.hw2{ background-image:linear-gradient(var(--hl-2),var(--hl-2)) }
.hw3{ background-image:linear-gradient(var(--hl-3),var(--hl-3)) }
.hw4{ background-image:linear-gradient(var(--hl-4),var(--hl-4)) }

/* ── 붙인 그림은 테두리를 치지 않는다(실측: 전부 테두리 없이 직접 붙임) ── */
.fig > .frameimg{ border:0; border-radius:0; background:none }
.fig figcaption{ font-family:var(--hand); font-size:11pt; color:var(--ink) }

/* ── 박스 친 용어 ────────────────────────────────────────── */
.termbox{ border:.32mm solid var(--ink); border-radius:.8mm; padding:.05em .38em .12em; font-weight:700 }

/* ── 포스트잇 : 오답·따로 적을 것 ───────────────────────── */
.postit{
  margin:19.84pt 0 0; background:var(--postit); padding:3.6mm 4mm 4mm;
  font-family:var(--hand); font-size:13pt; line-height:1.42; color:#1A1A1A;   /* 분홍 위엔 검정 펜 */
  box-shadow:1.2mm 1.2mm 0 rgba(150,90,105,.20); transform:rotate(-.5deg);
  border-radius:0 0 1.5mm 1.5mm;
}
.postit.hot{ background:var(--postit-2); color:#fff; box-shadow:1.2mm 1.2mm 0 rgba(150,30,90,.22);
  transform:rotate(.6deg) }
.postit .t{ display:block; font-weight:700; margin-bottom:1.4mm; text-decoration:underline }

/* ── 이 판에서 쓰지 않는 것 ─────────────────────────────── */
.tip .pill{ background:var(--pen-red); font-family:var(--sans) }
.tip{ font-family:var(--sans) }
.box{ border-color:var(--bd); border-radius:1mm; background:rgba(255,255,255,.55) }
.box .bt{ color:var(--pen-red); font-family:var(--hand); font-size:12pt }
.note{ border-color:var(--bd); border-radius:1mm; background:rgba(255,255,255,.55) }
.note-ttl{ font-family:var(--hand); font-size:12pt }
.note-h{ border-bottom-color:var(--pen-red) }

/* ── 문턱 지면 ───────────────────────────────────────────── */
.pg.part{ background:#2B2A26; background-image:none }
.part-lbl{ font-family:var(--hand); font-weight:700; font-size:15pt; letter-spacing:0;
  border-bottom-color:var(--hl-1) }
.part-ttl{ font-family:var(--hand); font-weight:700; font-size:40pt; letter-spacing:0; line-height:1.2 }

.pg.chap{ background-color:var(--hl-2); background-image:none }
.chap-lbl{ font-family:var(--hand); font-weight:700; font-size:15pt; letter-spacing:0;
  border-bottom-color:var(--pen-ink) }
.chap-ttl{ font-family:var(--hand); font-weight:700; font-size:36pt; letter-spacing:0; line-height:1.2 }
.chap-sub{ font-family:var(--hand); font-weight:400; font-size:15pt; color:#4A4A2A }

.pg.plate{ background:#2B2A26; background-image:none }
.pg.plate svg{ color:var(--hl-1) }

.pg.title-pg{ background-color:var(--paper) }
.title-over{ font-family:var(--hand); font-size:13pt; color:var(--pen-red); letter-spacing:0 }
.title-main{ font-family:var(--hand); font-weight:700; font-size:34pt; color:var(--pen-ink); letter-spacing:0 }

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

/* ── 앞표지 — 모눈 위에 라벨 스티커를 붙인 «공책 겉장» ──
   ⚠ ebook.css 의 `.pg.cover{background:...}` 단축속성이 모눈 이미지까지 지운다 → 여기서 되살린다 */
.pg.cover{
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(to right,  var(--grid) 0 1px, transparent 1px var(--grid-step)),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px var(--grid-step));
}
.cover-in{ padding-top:40mm }
.cv-kick{ font-family:var(--hand); font-size:12pt; color:var(--pen-red); letter-spacing:0 }
.cv-ttl{ font-family:var(--hand); font-weight:700; color:var(--pen-ink); font-size:30pt;
  letter-spacing:0; line-height:1.24 }
.cv-sub{ font-family:var(--hand); font-size:13pt; color:var(--ink-2) }
.cv-by{ font-family:var(--hand); font-size:12pt }
/* 겉장 라벨 — 실물 공책에 붙이는 이름표 */
.cv-band{ background:#fff; border:.4mm solid var(--ink); border-radius:1mm;
  margin:0 var(--m-outer) 16mm; padding:5mm 6mm 6mm }
.cv-band .l{ font-family:var(--hand); font-size:14pt; color:var(--ink) }
.cv-band .s{ font-family:var(--hand); font-size:12pt; color:var(--ink-2); margin-top:2mm }