/* ============================================================
   LLM wiki + GraphRAG 강의 가이드북 — 공유 디자인 시스템 (페이지넘김판)
   성우하이텍 custom-whiteboard-tofu 톤 (손그림 + 화이트보드 + 두부 캐릭터)
   원본 graphrag-search-lecture-tofu.html 의 좌우 페이지넘김 UX 복원 + 멀티파트/접기TOC
   2026-06-08 · Karpathy
   ============================================================ */

:root{
  --cream:#FAFAF5; --navy:#1E3A5F; --beige:#F5E6CC; --sky:#A8C8E8;
  --green:#27AE60; --charcoal:#333; --red:#E74C3C; --soft:#8A8A82; --amber:#E8A838;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; font-size:17.5px;}  /* R4 재경님 "폰트 크게크게" — root 비례 확대(전 rem +9%) */
body{
  background:var(--cream); color:var(--charcoal);
  font-family:'Gowun Dodum', 'Apple SD Gothic Neo', sans-serif; line-height:1.9; font-size:1.16rem;  /* R4 재경님 "본문 설명 폰트 더 크게" */
  margin:0; padding:0;
  background-image:radial-gradient(circle, rgba(168,200,232,.10) 1px, transparent 1px);
  background-size:22px 22px;
}
code{background:#fff; color:var(--navy); padding:1px 7px; border-radius:6px; font-size:.86em; border:1px solid #e6e0cc; font-family:ui-monospace,Menlo,monospace; word-break:break-word;}
b{color:var(--navy);} .mut{color:var(--soft);}
.amber{color:var(--amber); font-weight:bold;} .green{color:var(--green); font-weight:bold;} .red{color:var(--red); font-weight:bold;}
/* 초록 포인트 강조 — 핵심 키워드에만(포인트만, 과장 ❌). 형광펜 느낌 밑색 + 굵게 */
.gh{background:linear-gradient(transparent 58%, rgba(39,174,96,.34) 0); padding:0 .07em; border-radius:4px; font-weight:bold;}
p{margin:13px 0;}
a{color:#3f6f9f;}

/* ===== 상단바 ===== */
.topbar{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px; background:rgba(250,250,245,.93); backdrop-filter:blur(6px); border-bottom:1px dashed #d9cfaa; padding:10px 20px;}
.menu-btn{display:none; background:#fff; border:2px solid var(--sky); color:var(--navy); font-size:1.2rem; border-radius:10px; padding:2px 12px; cursor:pointer; line-height:1.4;}
.brand{font-family:'Nanum Pen Script',cursive; color:var(--navy); font-size:1.8rem; white-space:nowrap; text-decoration:none;}
.brand .tofu{font-size:1.2rem;}
.partpill{font-family:'Nanum Pen Script',cursive; font-size:1.15rem; color:#fff; background:var(--navy); border-radius:14px; padding:1px 14px; white-space:nowrap;}
.progress{flex:1; height:9px; background:var(--beige); border-radius:9px; overflow:hidden; border:1px solid #e6e0cc;}
.progress-fill{height:100%; width:6%; background:linear-gradient(90deg,var(--sky),var(--green)); transition:width .4s ease;}
.counter{font-family:'Nanum Pen Script',cursive; color:var(--navy); font-size:1.25rem; white-space:nowrap; min-width:58px; text-align:right;}

/* ===== 레이아웃 ===== */
.book{display:flex; max-width:1260px; margin:0 auto; gap:28px; padding:0 20px;}
.toc{flex:0 0 340px; position:sticky; top:70px; align-self:flex-start; max-height:calc(100vh - 92px); overflow:auto; background:#fff; border:2px solid var(--beige); border-radius:18px; padding:14px 14px; box-shadow:3px 4px 0 rgba(30,58,95,.06); margin-top:22px;}
.toc-title{font-family:'Nanum Pen Script',cursive; color:var(--navy); font-size:2.21rem; font-weight:bold; padding:2px 10px 8px; border-bottom:1px dashed #e6e0cc; margin-bottom:6px; display:flex; justify-content:space-between; align-items:baseline;}
.toc-title .xpand{font-family:'Gowun Dodum',sans-serif; font-size:.72rem; color:var(--soft); cursor:pointer; border:1px solid #e6e0cc; border-radius:8px; padding:2px 7px; background:var(--cream);}
/* 접기/펼치기 — <details> 기반 */
.toc details{margin:1px 0; border-radius:10px;}
.toc details > summary{cursor:pointer; font-family:'Nanum Pen Script',cursive; color:var(--navy); font-size:1.53rem; font-weight:bold; padding:6px 10px; list-style:none; border-radius:10px; transition:.15s;}
.toc details > summary::-webkit-details-marker{display:none;}
.toc details > summary::before{content:'▸'; color:var(--amber); margin-right:7px; font-size:.95em; display:inline-block;}
.toc details[open] > summary::before{content:'▾';}
.toc details > summary:hover{background:var(--cream);}
.toc ol{list-style:none; margin:2px 0 8px; padding:0 0 0 6px; counter-reset:toc;}
.toc li{margin:1px 0;}
.toc a{display:block; cursor:pointer; color:var(--charcoal); font-size:1.2rem; font-weight:bold; padding:6px 10px 6px 34px; border-radius:10px; position:relative; transition:.15s; text-decoration:none; line-height:1.35;}
.toc a::before{counter-increment:toc; content:counter(toc); position:absolute; left:6px; top:50%; transform:translateY(-50%); font-family:'Nanum Pen Script',cursive; color:var(--amber); font-size:1.37rem; font-weight:bold; width:24px; text-align:center;}
.toc a:hover{background:var(--cream);}
.toc a.active{background:var(--beige); color:var(--navy); font-weight:bold; box-shadow:inset 3px 0 0 var(--sky);}

.content{flex:1; min-width:0; max-width:820px; padding-top:8px; padding-bottom:24px;}

/* ===== 페이지넘김: 한 섹션(=페이지)씩 표시 ===== */
.sec{display:none; padding:8px 0 6px;}
.sec.active{display:block; animation:fade .3s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* ===== 페이지 넘김 버튼 ===== */
/* R4 재경님 "이전/다음 버튼 훨씬 잘 보이게" — 다음=남색 꽉찬, 이전=굵은 테두리, 크게 */
.pagenav{display:flex; justify-content:space-between; gap:14px; margin:46px 0 22px; border-top:2px dashed #d9cfaa; padding-top:26px;}
.pagenav button{font-family:'Gowun Dodum',sans-serif; font-size:1.16rem; font-weight:bold; border-radius:16px; padding:16px 26px; cursor:pointer; transition:.15s; max-width:48%; text-align:left; box-shadow:3px 4px 0 rgba(30,58,95,.18);}
.pagenav button .lab{display:block; font-size:.84rem; font-weight:normal; margin-bottom:3px; opacity:.9;}
.pagenav .prev{background:#fff; border:2.5px solid var(--navy); color:var(--navy);}
.pagenav .prev .lab{color:var(--soft);}
.pagenav .next{background:var(--navy); border:2.5px solid var(--navy); color:#fff; text-align:right; box-shadow:3px 5px 0 rgba(30,58,95,.34);}
.pagenav .next .lab{color:#cfe0f0;}
.pagenav button:hover:not(:disabled){transform:translateY(-2px);}
.pagenav .prev:hover:not(:disabled){background:var(--beige);}
.pagenav .next:hover:not(:disabled){background:#16314f;}
.pagenav button:disabled{opacity:.3; cursor:default; box-shadow:none;}

/* ===== 타이포 ===== */
h1{font-family:'Nanum Pen Script', cursive; color:var(--navy); font-size:3.4rem; margin:6px 0 6px; letter-spacing:1px; line-height:1.08;}
h1 .hl{color:var(--green);}
h2{font-family:'Nanum Pen Script', cursive; color:var(--navy); font-size:2.45rem; margin:4px 0 6px; letter-spacing:.5px; line-height:1.12;}
/* R4 cohesion(허사비스): subhead = Gowun Batang 세리프 — 손글씨↔돋움 위계 가교 + 작은화면 가독성 */
.subhead{font-family:'Gowun Batang',serif; font-weight:700; color:var(--navy); font-size:1.42rem; margin:32px 0 8px; display:flex; align-items:center; gap:9px; line-height:1.35;}
.subhead .ic{font-size:1.35rem;}
h3{font-family:'Gowun Batang',serif; font-weight:700; color:var(--navy); font-size:1.32rem; margin:32px 0 8px;}
.sub{color:var(--soft); font-size:1.05rem; margin:0 0 4px;}
.lead{color:var(--soft); margin:2px 0 16px; font-size:1.04rem;}
.chapter-tag{display:inline-block; font-family:'Nanum Pen Script',cursive; color:var(--amber); font-size:1.5rem; background:var(--beige); padding:0 16px; border-radius:20px; margin-bottom:4px;}
.tldr{background:var(--beige); border:2px solid var(--navy); border-radius:14px; padding:11px 18px; margin:8px 0 18px; font-size:1rem;}
.tldr b{color:var(--navy);}

/* ===== 표지 ===== */
.cover{text-align:center; padding:24px 0 0;}
.cover h1{font-size:4rem;}
.cover .big-tofu{font-size:3rem; display:block; margin-bottom:4px;}
.learn{text-align:left; background:#fff; border:2px solid var(--beige); border-radius:18px; padding:18px 24px; margin:24px auto 0; max-width:680px; box-shadow:2px 3px 0 rgba(30,58,95,.06);}
.learn ul{margin:8px 0 0; padding-left:4px; list-style:none;}
.learn li{padding:5px 0 5px 28px; position:relative;}
.learn li::before{content:"✓"; position:absolute; left:2px; color:var(--green); font-weight:bold;}
.hook{font-size:1.2rem; color:var(--navy); margin:18px 0 8px; padding:16px 22px; background:#fff; border-left:6px solid var(--amber); border-radius:0 16px 16px 0; box-shadow:2px 3px 0 rgba(30,58,95,.07); text-align:left;}
.stats{display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 8px;}
.stat-chip{flex:1 1 120px; background:#fff; border:2px solid var(--sky); border-radius:16px; padding:14px 12px; text-align:center; box-shadow:2px 3px 0 rgba(30,58,95,.07);}
.stat-chip .num{font-family:'Nanum Pen Script',cursive; color:var(--navy); font-size:2.2rem; line-height:1; display:block;}
.stat-chip .lab{color:var(--soft); font-size:.8rem; margin-top:5px; display:block;}
.start-btn{display:inline-block; margin:22px 8px 6px; font-family:'Nanum Pen Script',cursive; font-size:1.8rem; color:#fff; background:var(--navy); border:none; border-radius:18px; padding:8px 40px; cursor:pointer; box-shadow:3px 4px 0 rgba(30,58,95,.25); transition:.15s; text-decoration:none;}
.start-btn:hover{transform:translateY(-2px); background:#16314f;}
.start-btn.ghost{background:#fff; color:var(--navy); border:2px solid var(--sky); box-shadow:2px 3px 0 rgba(30,58,95,.1);}

/* ===== 파트 카드 ===== */
.partgrid{display:grid; grid-template-columns:1fr; gap:18px; margin:28px 0 8px;}
.partcard{display:block; text-decoration:none; background:#fff; border:2px solid var(--beige); border-radius:20px; padding:22px 26px; box-shadow:3px 4px 0 rgba(30,58,95,.07); transition:.15s; cursor:pointer;}
.partcard:hover{transform:translateY(-2px); border-color:var(--sky); box-shadow:4px 6px 0 rgba(30,58,95,.13);}
.partcard .pn{font-family:'Nanum Pen Script',cursive; color:var(--amber); font-size:1.5rem;}
.partcard h3{margin:2px 0 6px; font-size:1.9rem;}
.partcard p{margin:0; color:var(--charcoal); font-size:1.07rem;}
.partcard .toflist{margin:10px 0 0; padding:0; list-style:none; color:var(--soft); font-size:.9rem; display:flex; flex-wrap:wrap; gap:4px 14px;}
.partcard .toflist li{position:relative; padding-left:14px;}
.partcard .toflist li::before{content:'·'; position:absolute; left:3px; color:var(--amber);}

/* ===== 콜아웃 ===== */
.analogy{background:#ffffff; border-left:5px solid var(--sky); border-radius:0 16px 16px 0; padding:13px 18px; margin:18px 0; font-size:1.1rem;}
.analogy b{color:#3f6f9f;}
.formula{background:var(--navy); color:#fff; border-radius:14px; padding:16px 22px; margin:18px 0; text-align:center; font-family:ui-monospace,Menlo,monospace; font-size:1.04rem; line-height:1.85; box-shadow:3px 4px 0 rgba(30,58,95,.2); overflow-x:auto;}
.formula .where{display:block; font-family:'Gowun Dodum',sans-serif; color:#cfe0f0; font-size:.85rem; margin-top:10px; line-height:1.6;}
.formula .big{font-size:1.18rem; color:#fff;}
.steps{counter-reset:st; list-style:none; padding:0; margin:14px 0;}
.steps li{counter-increment:st; position:relative; padding:9px 0 9px 46px; border-top:1px dashed #e6e0cc;}
.steps li:first-child{border-top:none;}
.steps li::before{content:counter(st); position:absolute; left:0; top:9px; width:32px; height:32px; background:var(--beige); color:var(--navy); border-radius:50%; font-family:'Nanum Pen Script',cursive; font-size:1.35rem; display:flex; align-items:center; justify-content:center;}
.pitfall{background:#FFF6F4; border:2px solid #f3c9c2; border-radius:16px; padding:13px 18px; margin:18px 0; font-size:1.07rem;}
.pitfall b{color:var(--red);}
.worked{background:#ffffff; border:2px solid var(--sky); border-radius:16px; padding:16px 20px; margin:18px 0; box-shadow:3px 4px 0 rgba(30,58,95,.07);}
.worked .wt{font-family:'Nanum Pen Script',cursive; color:var(--navy); font-size:1.5rem; margin-bottom:6px;}
.worked .calc{font-family:ui-monospace,Menlo,monospace; font-size:.96rem; background:#fff; border:1px dashed var(--sky); border-radius:8px; padding:9px 13px; margin:9px 0; color:var(--navy); overflow-x:auto; line-height:1.7; white-space:pre-wrap;}
.note{background:#fff; border:2px dashed var(--sky); border-radius:16px; padding:14px 18px; margin:18px 0; font-size:1.07rem;}
.note.warn{border-color:var(--amber); background:#FFFDF6;} .note.warn b{color:var(--amber);}
.note.good{border-color:var(--green); background:#F6FFF9;}

/* ===== 표 ===== */
.tbl-wrap{overflow-x:auto; border:2px solid var(--sky); border-radius:16px; margin:14px 0; box-shadow:3px 4px 0 rgba(30,58,95,.07);}
table{border-collapse:collapse; width:100%; font-size:1rem; min-width:460px; background:#fff;}
th,td{padding:9px 13px; text-align:left; border-bottom:1px dashed #e6e0cc; vertical-align:top;}
th{font-family:'Nanum Pen Script',cursive; font-size:1.15rem; color:var(--navy); background:var(--beige); letter-spacing:.3px;}
tr:last-child td{border-bottom:none;}
td code{font-size:.86em;}
.row-hi td{background:rgba(39,174,96,.1);} .row-hi td b{color:var(--green);}
.row-bad td{background:rgba(231,76,60,.07);}
.num-c{text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap;}

/* ===== 사례 카드 ===== */
.case{background:#fff; border:2px solid var(--beige); border-radius:18px; padding:0; margin:18px 0; overflow:hidden; box-shadow:2px 3px 0 rgba(30,58,95,.07);}
.case-head{background:var(--beige); padding:12px 20px; display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.case-q{font-family:'Nanum Pen Script',cursive; color:var(--navy); font-size:1.45rem; line-height:1.1;}
.qchip{font-family:ui-monospace,Menlo,monospace; font-size:.8rem; background:#fff; border:1px solid var(--navy); color:var(--navy); padding:2px 9px; border-radius:8px;}
.badge{font-size:.76rem; font-weight:bold; padding:2px 10px; border-radius:20px; color:#fff;}
.badge.hit{background:var(--green);} .badge.miss{background:var(--red);} .badge.warn{background:var(--amber);} .badge.key{background:var(--navy);}
.case-body{padding:14px 20px;}
.case-row{display:grid; grid-template-columns:96px 1fr; gap:12px; padding:7px 0; border-top:1px dashed #eee;}
.case-row:first-child{border-top:none;}
.case-row .k{font-size:.9rem; font-weight:bold; color:var(--soft); padding-top:2px;}
.case-row .v{font-size:1.08rem;}
.verdict{background:var(--cream); border-radius:0 0 16px 16px; padding:11px 20px; border-top:2px dashed var(--sky); font-size:.98rem;}
.verdict b{color:var(--green);}

/* ===== 흐름도 ===== */
.flow{display:flex; flex-wrap:wrap; align-items:stretch; gap:6px; margin:18px 0; justify-content:center;}
.fstep{background:#fff; border:2px solid var(--sky); border-radius:14px; padding:10px 12px; text-align:center; flex:1 1 110px; min-width:100px; box-shadow:2px 3px 0 rgba(30,58,95,.06);}
.fstep b{display:block; color:var(--navy); font-size:1.06rem;}
.fstep span{font-size:.84rem; color:var(--soft);}
.fstep.hl{background:var(--beige); border-color:var(--amber);}
.farrow{align-self:center; color:var(--amber); font-size:1.5rem; font-weight:bold; flex:0 0 auto;}

.perks{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0;}
.perk{background:var(--beige); border:2px solid #E6D2A8; border-radius:16px; padding:18px 20px; box-shadow:3px 4px 0 rgba(30,58,95,.08);}
.perk h3{margin:0 0 6px; font-size:1.5rem;}
.perk p{margin:0; font-size:1.04rem;}
.takeaways{counter-reset:tk; display:flex; flex-direction:column; gap:12px; margin:18px 0;}
.tk{display:grid; grid-template-columns:46px 1fr; gap:14px; align-items:start; background:#fff; border:2px solid var(--beige); border-radius:16px; padding:16px 20px;}
.tk::before{counter-increment:tk; content:counter(tk); font-family:'Nanum Pen Script',cursive; color:var(--amber); font-size:2.2rem; line-height:1;}
.tk p{margin:0; font-size:1.1rem; line-height:1.62;}
.kbd{font-family:ui-monospace,Menlo,monospace; font-size:.82em; background:#fff; border:1px solid var(--navy); border-bottom-width:2px; border-radius:6px; padding:1px 7px; color:var(--navy);}

/* ===== 이미지 figure ===== */
.figure{margin:20px 0; text-align:center;}
.figure img{max-width:100%; height:auto; border:2px solid var(--beige); border-radius:16px; background:#fff; box-shadow:3px 4px 0 rgba(30,58,95,.08);}
.figure figcaption{font-family:'Nanum Pen Script',cursive; color:var(--soft); font-size:1.1rem; margin-top:7px;}
.figure.ph{background:#fff; border:2px dashed var(--sky); border-radius:16px; padding:34px 16px; color:var(--soft); font-size:.95rem;}
.figure.ph .tofu{font-size:2rem; display:block; margin-bottom:6px;}

/* ===== 메타 강조 배너 ===== */
.meta-made{background:linear-gradient(180deg,#fff, #ffffff); border:2px solid var(--navy); border-radius:18px; padding:18px 24px; margin:24px 0; box-shadow:3px 4px 0 rgba(30,58,95,.12);}
.meta-made .mt{font-family:'Nanum Pen Script',cursive; color:var(--navy); font-size:1.7rem; display:flex; align-items:center; gap:8px;}
.meta-made p{margin:6px 0 0; font-size:1.08rem;}

.foot{text-align:center; color:var(--soft); margin-top:30px; font-size:.9rem; border-top:1px dashed #d9cfaa; padding-top:18px; line-height:1.7;}
.foot b{color:var(--navy);} .foot .tofu{font-size:1.3rem;}
.scrim{display:none; position:fixed; inset:0; background:rgba(30,58,95,.28); z-index:55;}

@media(max-width:860px){
  .menu-btn{display:block;}
  .book{display:block; padding:0 16px;}
  .content{max-width:none;}
  .toc{position:fixed; left:0; top:0; bottom:0; width:286px; margin:0; border-radius:0 18px 18px 0; transform:translateX(-104%); transition:transform .3s ease; z-index:60; max-height:none;}
  .toc.open{transform:none;}
  .scrim.open{display:block;}
  h1,.cover h1{font-size:2.9rem;} h2{font-size:2.05rem;} .subhead{font-size:1.55rem;}
  .perks{grid-template-columns:1fr;}
  .case-row{grid-template-columns:1fr; gap:3px;} .case-row .k{padding-top:0;}
}

/* ===== 모바일(폰) 정밀 — 손석희 CSS 리뷰 반영 (2026-06-08 R3) ===== */
@media(max-width:600px){
  body{font-size:1.08rem;}
  .book{padding:0 12px;}
  /* 상단바 압축 — 360px 과밀 해소 */
  .topbar{gap:6px; padding:8px 10px;}
  .menu-btn{font-size:.95rem; padding:2px 8px;}
  .brand{font-size:1.3rem; max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .partpill{display:none;}
  .progress{height:7px; min-width:40px;}
  .counter{font-size:1rem; min-width:44px;}
  /* 타이포 — 작은 화면 가독 */
  h1,.cover h1{font-size:2.35rem;} h2{font-size:1.72rem;}
  .subhead{font-size:1.32rem; flex-wrap:wrap; margin-top:22px;}
  .chapter-tag{font-size:1.3rem;}
  .lead,.sub{font-size:1rem;}
  /* 박스 여백 — 본문 폭 확보 */
  .hook,.note,.analogy,.worked,.pitfall,.meta-made,.case-body,.tldr{padding-left:15px; padding-right:15px;}
  .steps li{padding-left:42px;}
  .perk{padding:15px 16px;}
  /* 페이지넘김 버튼 */
  .pagenav{gap:8px; margin-top:30px;}
  .pagenav button{font-size:1.05rem; padding:13px 14px; max-width:49%;}
  /* 표 — 화면폭에 맞춰 축소(가로 잘림 해소). keep-all 로 한국어 단어 안 끊기게 */
  table{min-width:0; font-size:.85rem;}
  th,td{padding:7px 9px; word-break:keep-all;}
  td code,th code{font-size:.78em;}
  /* 흐름도 — 세로 스택 + 화살표 ↓ 회전. 단 +/= 기호 flow(keep-arrows)는 가로 유지 */
  .flow{flex-direction:column; align-items:stretch; gap:8px;}
  .flow .fstep{flex:0 1 auto; width:100%; min-width:0;}
  .flow .farrow{align-self:center; transform:rotate(90deg); line-height:1; margin:-3px 0;}
  .flow.keep-arrows{flex-direction:row; flex-wrap:wrap;}
  .flow.keep-arrows .farrow{transform:none;}
}

/* 문서 전환 탭 — 가이드북 ↔ 봇 운영 가이드 상호 내비 (2026-06-12) */
.doc-tabs{display:flex; gap:8px; align-items:center; margin-left:4px; flex-shrink:0;}
.doc-tab{font-family:'Nanum Pen Script',cursive; font-size:1.25rem; line-height:1; text-decoration:none; padding:7px 16px; border-radius:16px; white-space:nowrap; transition:transform .12s ease;}
.doc-tab.active{background:var(--navy); color:#fff; border:2px solid var(--navy); pointer-events:none;}
.doc-tab:not(.active){border:2px solid var(--amber); color:var(--charcoal); background:#FFF4DC; box-shadow:2px 2px 0 var(--amber);}
.doc-tab:not(.active):hover{transform:translateY(-2px); background:var(--beige);}
.doc-tab .tab-ico{margin-right:4px;}
@media (max-width:860px){ .doc-tabs{margin-left:0;} .doc-tab{font-size:1.02rem; padding:5px 10px;} }