/* 2026-09-05: 밝은 배경 위의 골드를 읽히는 값으로 바꿨다. 브랜드 골드(#D7BC97)는
   검은 배경용이라 크림 위에서 1.75:1 이다 — 종이에 옅게 인쇄한 것처럼 뜬다.
   어두운 배경(잉크·에스프레소) 위는 그대로 둔다. 거기서는 11.3:1 로 훌륭하다. */
/* TOP 통합매뉴얼 — 챕터 본문 스코프 CSS (.mn)
   templates/book_shell.html <style> 에서 원본을 추출·스코프한 뒤,
   2026-09-06 사람이 JFP 공통 토큰(--jfp-*, guide.css :root)으로 재작성했다.
   원본의 네이비/블루그레이 톤을 버리고 가이드북(.gb) 어휘 —
   다크 헤더 + 골드 세리프 + 크림 본문 — 에 맞췄다.
   알약(999px)·10~12px 둥근 모서리는 전부 --jfp-r(2px) 로 통일했고,
   카드는 왼쪽 2px 골드 세로선(.gb .box 어휘)으로 바꿨다.
   build_guide.py 로 다시 추출하면 이 수정이 통째로 날아간다. */
.mn{
  /* 짧은 이름은 남기되 값은 전부 공통 토큰을 가리킨다.
     이름을 지우면 아래 규칙이 통째로 깨지므로 값만 바꾼다. */
  --navy:var(--jfp-ink); --navy2:var(--jfp-navy);
  /* .mn 의 --gold 는 **종이 위 글자**로만 쓰인다(.gold · .principle strong ·
     .hint · .count · .navfoot span). --jfp-gold-deep 은 크림 위 3.37:1 이라
     밝은 면용 값으로 간다. 어두운 머리 · 표 머리는 --jfp-gold 그대로다. */
  --gold:var(--jfp-golda-on-light); --gold-soft:var(--jfp-paper-2);
  /* 종이 위 액센트(세로선 · 진행 막대 · 포커스 링). */
  --gold-a-lt:var(--jfp-golda-on-light);
  --ink:var(--jfp-text); --mut:var(--jfp-text-2);
  --line:var(--jfp-line); --paper:var(--jfp-paper);
  --red:var(--jfp-warn); --red-soft:var(--jfp-warn-bg);
}
.mn *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
@media (prefers-reduced-motion: reduce){
  .mn *,.mn *::before,.mn *::after{transition:none!important;animation:none!important;}
}
.mn{font-family:var(--jfp-sans);
         background:var(--paper); color:var(--ink); font-size:var(--jfp-fs-body); line-height:1.75;}

/* 챕터 머리 — 가이드북 파트 표지와 같은 잉크→네이비 그라데이션 */
.mn article.chapter .hero{background:linear-gradient(160deg, var(--jfp-ink), var(--jfp-navy));
         color:var(--jfp-ivory); padding:46px 24px 38px;}
.mn article.chapter .hero .in{max-width:760px; margin:0 auto;}
.mn article.chapter h1{font-family:var(--jfp-serif-ko); font-size:var(--jfp-fs-h1); font-weight:500;
         letter-spacing:-.034em; margin:12px 0 8px; line-height:1.34; color:var(--jfp-ivory);}
/* ⚠ 2026-09-15 2차: --jfp-text-2(#57514A)를 쓰고 있었다. 그 값은 이름 그대로
     **「종이 위 보조」**다 — 그런데 이 줄이 서는 곳은 바로 위의 **잉크→네이비
     그라데이션 머리**다. 네이비 위에서 **2.61:1**, 챕터 머리의 설명 한 줄이
     거의 안 읽혔다. 어두운 면 위 보조 글자는 --jfp-dim 이다(네이비 위 6.81:1).
     ★ 같은 사고를 오늘 계산기에서도 찾았다(밝은 면용 이름을 어두운 채움에 얹기).
       고치러 온 사람에게: 이 머리는 **어두운 면**이다. on-light · on-tint 로
       끝나는 이름을 여기에 쓰지 마라. */
.mn article.chapter .sub{color:var(--jfp-dim); font-size:var(--jfp-fs-sm); max-width:560px;}
/* ⚠ 같은 사고 — 이 알약도 **어두운 머리 안에** 있다(바탕은 옅은 골드 헤어라인이라
     머리 그라데이션이 그대로 비친다). --jfp-golda-on-tint(#82652F)는 눌린 크림용
     값이라 여기서 **3.02:1** 이었다. 어두운 면 위 골드는 브랜드 골드 그대로다
     (위 :root 주석 — 「어두운 면은 위 골드 그대로 간다」). 9.02:1 로 돌아온다. */
.mn .howto{margin-top:18px; display:inline-flex; align-items:center; gap:10px;
           background:var(--jfp-hair);
           border:var(--jfp-bw) solid var(--jfp-hair-2); border-radius:var(--jfp-r);
           padding:7px 15px; font-size:var(--jfp-fs-sm); color:var(--jfp-gold); font-weight:500;}

/* 절 바로가기 띠 */
.mn .chips{position:sticky; top:48px; z-index:40; background:var(--jfp-paper-toc);
           border-bottom:var(--jfp-bw) solid var(--line); padding:10px 16px; display:flex; gap:8px; overflow-x:auto;}
.mn .chips a{flex:0 0 auto; text-decoration:none; color:var(--mut); font-size:var(--jfp-fs-sm); font-weight:500;
             border:var(--jfp-bw) solid var(--line); border-radius:var(--jfp-r); padding:6px 14px; background:var(--jfp-white);}
.mn .chips a:active,.mn .chips a:focus-visible{border-color:var(--jfp-golda-on-light); color:var(--jfp-text); outline:none;}
.mn article.chapter section[id]{scroll-margin-top:110px;}
.mn article.chapter .body{max-width:760px; margin:0 auto; padding:10px 20px 60px;}

/* 제목 위계 — 가이드북과 같은 축(.gb h3.sec / .gb h4.sub) */
.mn h2{font-family:var(--jfp-serif-ko); font-size:var(--jfp-fs-h2); font-weight:500; color:var(--jfp-text);
       margin:28px 0 14px; letter-spacing:-.03em; display:flex; align-items:center; gap:10px;}
.mn h2::before{content:""; width:var(--jfp-bw-2); height:22px; background:var(--gold-a-lt); border-radius:var(--jfp-r);}
.mn h3{font-family:var(--jfp-sans); font-size:var(--jfp-fs-h3); font-weight:600; color:var(--jfp-text); margin:20px 0 8px;}
.mn p{margin-bottom:12px;}
.mn .gold{color:var(--jfp-golda-on-light); font-weight:600;}
.mn .note{color:var(--mut); font-size:var(--jfp-fs-sm);}
.mn ul.plain{margin:8px 0 14px 20px;}
.mn ul.plain li{margin-bottom:7px;}

/* 표 — 머리는 에스프레소 바탕 + 골드 글자 (.gb table.tbl th 와 같은 어휘) */
.mn table{width:100%; border-collapse:collapse; margin:14px 0; font-size:var(--jfp-fs-sm); background:var(--jfp-white);}
.mn th{background:var(--jfp-espresso); color:var(--jfp-gold); padding:9px 12px; text-align:left; font-weight:500;}
.mn td{border:var(--jfp-bw) solid var(--line); padding:9px 12px; vertical-align:top;}
.mn td.label{background:var(--jfp-paper-2); font-weight:600; width:104px;}

/* 카드류 — 전부 왼쪽 2px 세로선 + 헤어라인. 그림자는 쓰지 않는다(브랜드 무드). */
/* 눌린 크림(--jfp-paper-2) 바탕을 가진 자리는 골드를 한 눈금 더 어둡게.
   .gb 쪽과 같은 이유 · 같은 값이다(guide.css --jfp-golda-on-tint 주석 참조). */
.mn .principle,
.mn details.rp .a,
.mn td.label{--gold:var(--jfp-golda-on-tint); --gold-a-lt:var(--jfp-golda-on-tint)}
.mn .principle{background:var(--gold-soft); border:var(--jfp-bw) solid var(--line);
       border-left:var(--jfp-bw-2) solid var(--gold-a-lt); border-radius:var(--jfp-r); padding:16px 20px; margin:14px 0;}
.mn .principle strong{color:var(--jfp-golda-on-tint);}
.mn .ban{background:var(--red-soft); border:var(--jfp-bw) solid var(--line);
       border-left:var(--jfp-bw-2) solid var(--red); border-radius:var(--jfp-r); padding:14px 18px; margin:14px 0;
       font-size:var(--jfp-fs-sm);}
.mn .ban .tag{font-weight:700; color:var(--red);}
.mn .fail td:first-child{font-weight:600; width:30%; background:var(--red-soft);}

.mn details.rp{border:var(--jfp-bw) solid var(--line); border-left:var(--jfp-bw-2) solid var(--gold-a-lt);
       border-radius:var(--jfp-r); background:var(--jfp-white); margin:12px 0; overflow:hidden;}
.mn details.rp summary{list-style:none; cursor:pointer; padding:16px 18px; display:flex; gap:12px; align-items:flex-start;}
.mn details.rp summary::-webkit-details-marker{display:none;}
.mn details.rp summary .who{flex:0 0 auto; font-family:var(--jfp-serif); font-size:var(--jfp-fs-label);
       letter-spacing:.2em; font-weight:600; color:var(--jfp-gold); background:var(--jfp-espresso);
       border-radius:var(--jfp-r); padding:4px 8px; margin-top:2px;}
.mn details.rp summary .q{font-weight:600;}
.mn details.rp summary .hint{display:block; margin-top:6px; font-size:var(--jfp-fs-sm); color:var(--jfp-golda-on-tint); font-weight:500;}
.mn details.rp[open] summary .hint{display:none;}
.mn details.rp .a{border-top:var(--jfp-bw) dashed var(--line); padding:16px 18px; background:var(--jfp-paper-2);}
.mn details.rp .a .tag{font-family:var(--jfp-serif); font-size:var(--jfp-fs-label); letter-spacing:.2em;
       font-weight:600; color:var(--jfp-golda-on-tint);}
.mn details.rp .a p{margin:8px 0;}
.mn details.rp[open]{border-color:var(--jfp-gline); border-left-color:var(--gold-a-lt);}

.mn .cklist{border:var(--jfp-bw) solid var(--line); border-left:var(--jfp-bw-2) solid var(--gold-a-lt);
       border-radius:var(--jfp-r); background:var(--jfp-white); padding:18px; margin:14px 0;}
.mn .cklist .head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.mn .cklist .head b{color:var(--jfp-text);}
.mn .cklist .count{font-size:var(--jfp-fs-sm); font-weight:600; color:var(--jfp-golda-on-light);}
.mn .cklist .bar{height:6px; border-radius:var(--jfp-r); background:var(--jfp-paper-3); overflow:hidden; margin-bottom:14px;}
.mn .cklist .bar i{display:block; height:100%; width:0; background:var(--gold-a-lt); transition:width .25s ease;}
.mn .cklist label{display:flex; gap:12px; align-items:flex-start; padding:10px 4px;
       border-bottom:var(--jfp-bw) solid var(--jfp-line-2); cursor:pointer; font-size:var(--jfp-fs-sm);}
.mn .cklist label:last-child{border-bottom:none;}
.mn .cklist input{appearance:none; -webkit-appearance:none; flex:0 0 auto; width:22px; height:22px;
       border:var(--jfp-bw) solid var(--jfp-text-3); background:var(--jfp-white); border-radius:var(--jfp-r);
       margin-top:2px; position:relative; cursor:pointer;}
.mn .cklist input:checked{background:var(--jfp-espresso); border-color:var(--jfp-espresso);}
.mn .cklist input:checked::after{content:"✓"; color:var(--jfp-golda-on-light); font-weight:600; position:absolute; inset:0;
       display:flex; align-items:center; justify-content:center; font-size:var(--jfp-fs-sm);}
.mn .cklist input:focus-visible{outline:2px solid var(--gold-a-lt); outline-offset:2px;}
.mn .cklist input:checked + span{color:var(--mut); text-decoration:line-through; text-decoration-color:var(--jfp-gline);}

.mn .quiz{border:var(--jfp-bw) solid var(--line); border-left:var(--jfp-bw-2) solid var(--gold-a-lt);
       border-radius:var(--jfp-r); background:var(--jfp-white); margin:12px 0; padding:16px 18px;}
.mn .quiz .qq{font-weight:600; margin-bottom:10px;}
.mn .quiz .btns{display:flex; gap:8px;}
.mn .quiz button{flex:1; font:inherit; font-weight:600; font-size:var(--jfp-fs-sm); padding:10px;
       border-radius:var(--jfp-r); border:var(--jfp-bw) solid var(--line); background:var(--jfp-white); color:var(--jfp-text); cursor:pointer;}
.mn .quiz button:focus-visible{outline:2px solid var(--gold-a-lt); outline-offset:2px;}
.mn .quiz.done button{pointer-events:none; opacity:.55;}
.mn .quiz.done button.pick{opacity:1;}
.mn .quiz.done button.correct{border-color:var(--jfp-calm); background:var(--jfp-calm-bg); color:var(--jfp-calm);}
.mn .quiz.done button.wrong.pick{border-color:var(--red); background:var(--red-soft); color:var(--red);}
.mn .quiz .exp{display:none; margin-top:12px; font-size:var(--jfp-fs-sm); color:var(--mut);
       border-top:var(--jfp-bw) dashed var(--line); padding-top:10px;}
.mn .quiz.done .exp{display:block;}

.mn .navfoot{display:flex; justify-content:space-between; gap:12px; margin-top:44px; padding-top:18px;
       border-top:var(--jfp-bw-2) solid var(--jfp-espresso);}
.mn .navfoot a{text-decoration:none; font-weight:600; color:var(--jfp-text); font-size:var(--jfp-fs-sm); max-width:46%;}
.mn .navfoot a span{display:block; font-family:var(--jfp-serif); font-size:var(--jfp-fs-label);
       letter-spacing:.2em; color:var(--jfp-golda-on-light); font-weight:600;}
.mn .legal{margin-top:26px; font-size:var(--jfp-fs-sm); color:var(--mut);}