/* 릴코노미 와디즈 자료실 — 책자 리더 공통 스타일 (build.mjs가 생성하는 4종이 공유) */
/* v0.4 키치(크림 페이퍼백) 톤. 메인 reelconomy-y2k 팔레트와 통일. */
:root{
  --bg:#fff8e4; --card:#fffdf2; --border:#17130f;
  --fg:#17130f; --muted:#746d62; --accent:#f47f72; --accent2:#5fd2c3;
  --dim:#3a352c; --paper:#fffaf0; --panel:#fffdf2;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg);
  font-family:'Noto Sans KR','Apple SD Gothic Neo',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;overflow:hidden;
  -webkit-user-select:text;user-select:text;}
.num{font-family:'Space Grotesk','Noto Sans KR',sans-serif;}

/* ===== App shell ===== */
#app{position:fixed;inset:0;display:flex;flex-direction:column;}

/* Top bar */
#topbar{height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;border-bottom:1px solid var(--border);background:rgba(11,13,16,.85);
  backdrop-filter:blur(10px);z-index:30;}
#topbar .t-title{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%;}
#topbar .t-title b{color:var(--fg);font-weight:600;}
.tb-btn{font-size:12.5px;color:var(--muted);background:transparent;border:1px solid var(--border);
  border-radius:8px;padding:6px 11px;cursor:pointer;transition:.18s;white-space:nowrap;}
.tb-btn:hover{color:var(--accent);border-color:var(--accent);}
.tb-right{display:flex;align-items:center;gap:8px;}
.fs-ctrl{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.fs-ctrl button{background:transparent;border:none;color:var(--muted);font-size:12px;cursor:pointer;
  padding:6px 11px;font-family:'Space Grotesk','Noto Sans KR',sans-serif;transition:.15s;}
.fs-ctrl button:hover{color:var(--accent);background:rgba(38,198,218,.08);}
.fs-ctrl button + button{border-left:1px solid var(--border);}
#toast{position:fixed;left:50%;bottom:70px;transform:translateX(-50%) translateY(12px);z-index:60;
  background:#15181e;border:1px solid var(--border);color:var(--fg);font-size:12.5px;
  padding:9px 16px;border-radius:99px;box-shadow:0 12px 30px -12px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;white-space:nowrap;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast b{color:var(--accent);}
@media(max-width:560px){.t-title{max-width:34%;} .fs-ctrl button{padding:6px 8px;}}

/* Deck = horizontal snap container */
#deck{flex:1 1 auto;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;}
#deck::-webkit-scrollbar{display:none;}
#deck{scrollbar-width:none;}
.spread{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;position:relative;}
.page{flex:1 1 0;min-width:0;height:100%;overflow:hidden;position:relative;}
.page.overscan{overflow-y:auto;-webkit-overflow-scrolling:touch;} /* 예외: 한 블록이 한 페이지보다 클 때만 스크롤 허용 */
.page + .page{border-left:1px solid #14161b;}
.page-blank{flex:1 1 0;min-width:0;height:100%;background:var(--bg);} /* 홀수 마지막 펼침면 빈 페이지 */
/* 책등(가운데 접힘) 그림자 — 두쪽일 때만 */
.spread.two::after{content:'';position:absolute;top:0;bottom:0;left:50%;width:46px;transform:translateX(-50%);
  pointer-events:none;z-index:6;
  background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.32) 42%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.32) 58%,rgba(0,0,0,0));}
/* 페이지 넘김(정착) 애니메이션 */
.spread.turn .page-inner{animation:pageIn .42s cubic-bezier(.2,.7,.2,1);}
@keyframes pageIn{from{opacity:.3;transform:translateY(10px)} to{opacity:1;transform:none}}
/* 엔드페이퍼(표지 왼쪽 장식 페이지) */
.endpaper{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 70% 50%,rgba(38,198,218,.06),transparent 60%),linear-gradient(135deg,#0c0e12,#090b0e);}
.endpaper .ep-mark{text-align:center;}
.endpaper .ep-logo{font-size:30px;color:var(--accent);opacity:.5;letter-spacing:.04em;font-weight:700;}
.endpaper .ep-sub{margin-top:12px;font-size:11px;letter-spacing:.34em;color:#2c303b;font-weight:700;}
.page::-webkit-scrollbar{width:8px;}
.page::-webkit-scrollbar-thumb{background:#23262f;border-radius:8px;}
.page-inner{max-width:720px;margin:0 auto;padding:40px 28px 40px;}
@media(max-width:600px){.page-inner{padding:28px 20px 28px;}}
/* 오프스크린 측정 호스트 (페이지네이션 계산용) */
#measure{position:absolute;left:-99999px;top:0;visibility:hidden;pointer-events:none;contain:layout style;}
#measure .page{height:auto;overflow:visible;display:block;flex:none;border:0;} /* 레이아웃 영향 제거, .page[data-pagestart] 선택자(드롭캡)만 살림 */
#measure .page-inner{margin:0;} /* 패딩은 실제 .page-inner 그대로 두고 통째로 높이 측정 */
.prose blockquote,.prose table,.prose figure,.prose pre{break-inside:avoid;}

/* Desktop side click-zones */
.edge{position:fixed;top:52px;bottom:54px;width:84px;z-index:25;display:none;
  align-items:center;cursor:pointer;border:none;background:transparent;color:var(--muted);transition:.2s;}
.edge:hover{color:var(--accent);background:linear-gradient(var(--dir),rgba(38,198,218,.10),transparent);}
.edge.left{left:0;justify-content:flex-start;padding-left:18px;--dir:90deg;}
.edge.right{right:0;justify-content:flex-end;padding-right:18px;--dir:270deg;}
.edge svg{width:30px;height:30px;}
.edge:disabled{opacity:0;pointer-events:none;}
@media(hover:hover) and (min-width:760px){.edge{display:flex;}}

/* Bottom progress bar */
#botbar{height:54px;flex:0 0 54px;display:flex;align-items:center;gap:14px;
  padding:0 16px;border-top:1px solid var(--border);background:rgba(11,13,16,.9);
  backdrop-filter:blur(10px);z-index:30;}
#progress-track{flex:1 1 auto;height:4px;background:#1b1e26;border-radius:99px;overflow:hidden;}
#progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:99px;transition:width .35s cubic-bezier(.4,0,.2,1);}
#counter{font-size:12px;color:var(--muted);white-space:nowrap;letter-spacing:.02em;}
#counter b{color:var(--fg);font-weight:600;}
.nav-mini{display:flex;gap:8px;}
.nav-mini button{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);
  background:var(--card);color:var(--fg);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:.18s;}
.nav-mini button:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.nav-mini button:disabled{opacity:.35;cursor:default;}
@media(min-width:760px){.nav-mini{display:none;}}

/* ===== Cover ===== */
.cover .page-inner{max-width:560px;min-height:100%;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding-top:24px;}
.cover-card{position:relative;width:100%;border:1px solid var(--border);border-radius:22px;
  padding:54px 34px 40px;background:
    radial-gradient(120% 80% at 50% -10%,rgba(38,198,218,.16),transparent 60%),
    linear-gradient(180deg,#15171d,#0e1014);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(38,198,218,.06) inset;overflow:hidden;}
.cover-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));opacity:.9;}
.cover-ghost{position:absolute;right:6px;bottom:-26px;font-size:200px;line-height:1;font-weight:700;
  color:rgba(255,255,255,.035);pointer-events:none;}
.cover-kicker{font-size:11px;letter-spacing:.28em;color:var(--accent);font-weight:600;margin-bottom:22px;}
.cover-badge{display:inline-block;font-size:11px;color:var(--muted);border:1px solid var(--border);
  border-radius:99px;padding:5px 12px;margin-bottom:26px;}
.cover h1{font-size:34px;line-height:1.28;font-weight:900;margin:0 0 16px;letter-spacing:-.02em;}
.cover h1 .hl{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.cover .sub{font-size:14.5px;color:var(--muted);line-height:1.7;margin:0 auto 30px;max-width:380px;}
.cover .rule{width:46px;height:3px;background:var(--accent);border-radius:9px;margin:0 auto 26px;opacity:.8;}
.cover .author{font-size:13px;color:var(--dim);margin-bottom:4px;}
.cover .brand{font-size:11.5px;color:var(--muted);letter-spacing:.04em;}
.cover-cta{margin-top:34px;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#04181c;font-weight:700;
  font-size:15px;border:none;border-radius:13px;padding:14px 30px;cursor:pointer;transition:.2s;
  box-shadow:0 12px 30px -10px rgba(38,198,218,.6);}
.cover-cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(38,198,218,.7);}
.cover .swipe-hint{margin-top:18px;font-size:11.5px;color:var(--muted);opacity:.8;}

/* ===== Chapter header ===== */
.ch-head{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--border);}
.ch-head .ch-kicker{font-size:11.5px;letter-spacing:.16em;color:var(--accent);font-weight:600;margin-bottom:8px;}
.ch-head .ch-name{font-size:23px;font-weight:800;line-height:1.32;letter-spacing:-.01em;}

/* ===== Prose ===== */
.prose{line-height:1.95;font-size:var(--prose-fs,16.5px);letter-spacing:-.01em;color:var(--dim);}
.prose h2{font-size:1.42rem;font-weight:700;margin:2.4rem 0 .9rem;line-height:1.35;color:var(--fg);
  padding-top:1.4rem;border-top:1px solid var(--border);letter-spacing:-.015em;}
.prose h2:first-child{border-top:none;padding-top:0;margin-top:0;}
.prose h2::before{content:'◆';color:var(--accent);font-size:.66em;margin-right:.5em;vertical-align:.18em;}
/* 챕터 본문 소제목(### = h3)을 섹션 헤더로 강조 */
.prose h3{font-size:1.2rem;font-weight:700;margin:2rem 0 .7rem;line-height:1.36;color:var(--fg);
  padding-top:1.2rem;border-top:1px solid var(--border);letter-spacing:-.01em;}
.prose h3:first-child{border-top:none;padding-top:0;margin-top:0;}
.prose h3::before{content:'◆';color:var(--accent);font-size:.6em;margin-right:.5em;vertical-align:.2em;}
.prose h4{font-size:1.04rem;font-weight:600;margin:1.3rem 0 .45rem;color:var(--fg);}
.prose p{margin:1rem 0;color:var(--dim);}
.prose strong{color:var(--fg);font-weight:600;background:linear-gradient(transparent 60%,rgba(38,198,218,.20) 60%);padding:0 .1em;}
.prose em{color:var(--dim);font-style:italic;}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.prose ul,.prose ol{margin:.9rem 0;padding-left:1.6rem;color:var(--dim);}
.prose li{margin:.45rem 0;}
.prose li::marker{color:var(--accent);}
.prose blockquote{border-left:4px solid var(--accent);padding:.9rem 1.2rem;margin:1.4rem 0;
  color:#cfd3e0;background:linear-gradient(90deg,rgba(38,198,218,.08),rgba(38,198,218,0));
  border-radius:0 10px 10px 0;font-size:1rem;}
.prose blockquote p{margin:.3rem 0;}
.prose hr{border:none;border-top:1px solid var(--border);margin:2.2rem 0;position:relative;}
.prose hr::after{content:'· · ·';position:absolute;top:-.65em;left:50%;transform:translateX(-50%);
  background:var(--bg);padding:0 .8em;color:var(--muted);letter-spacing:.4em;font-size:.9em;}
.prose table{width:100%;border-collapse:collapse;margin:1.3rem 0;font-size:.92rem;
  border-radius:8px;overflow:hidden;border:1px solid var(--border);}
.prose th,.prose td{border-bottom:1px solid var(--border);padding:.65rem .85rem;text-align:left;}
.prose th{background:var(--card);color:var(--fg);font-weight:600;}
.prose tr:last-child td{border-bottom:none;}
/* 코드블록(프롬프트) */
.prose code{background:#1e2028;color:#7DE3F0;padding:.15rem .45rem;border-radius:5px;font-size:.9em;
  font-family:'JetBrains Mono','SF Mono',Menlo,monospace;}
.prose pre{background:#0e1014;border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.3rem;
  overflow-x:auto;margin:1.2rem 0;font-size:.86rem;line-height:1.65;}
.prose pre code{background:transparent;color:#d6d9e2;padding:0;font-size:inherit;white-space:pre-wrap;word-break:break-word;}
/* 첫 단락 드롭캡 — 챕터의 '첫 페이지'가 문단으로 시작할 때만 (연속 페이지엔 미적용) */
.page[data-pagestart] .prose > p:first-child::first-letter{font-size:2.3em;float:left;line-height:.9;
  padding:.1em .14em 0 0;color:var(--accent);font-weight:700;}

.ch-end{margin-top:42px;padding-top:18px;border-top:1px dashed var(--border);
  display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12.5px;}
.ch-end button{background:transparent;border:1px solid var(--border);border-radius:8px;
  padding:8px 14px;color:var(--accent);cursor:pointer;font-size:12.5px;transition:.18s;}
.ch-end button:hover{border-color:var(--accent);}

/* ===== TOC drawer (여닫는 사이드 패널) ===== */
#drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:45;}
#drawer-overlay.open{opacity:1;pointer-events:auto;}
#drawer{position:fixed;top:0;bottom:0;left:0;width:308px;max-width:84vw;z-index:46;
  background:#0f1115;border-right:1px solid var(--border);
  transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:0 0 60px rgba(0,0,0,.65);}
#drawer.open{transform:translateX(0);}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:18px 16px 14px;border-bottom:1px solid var(--border);}
.drawer-head .dh-title{font-size:12px;letter-spacing:.2em;color:var(--accent);font-weight:600;}
.drawer-head .dh-sub{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4;}
#drawer-close{background:transparent;border:none;color:var(--muted);font-size:16px;cursor:pointer;
  padding:4px 9px;border-radius:8px;flex:0 0 auto;}
#drawer-close:hover{color:var(--fg);background:rgba(255,255,255,.06);}
#drawer-list{flex:1 1 auto;overflow-y:auto;padding:8px 0;}
#drawer-list::-webkit-scrollbar{width:7px;}
#drawer-list::-webkit-scrollbar-thumb{background:#23262f;border-radius:8px;}
.dl-item{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:none;border-left:3px solid transparent;padding:11px 16px;
  color:var(--dim);transition:.16s;}
.dl-item:hover{background:rgba(38,198,218,.06);color:var(--fg);}
.dl-item.active{background:rgba(38,198,218,.11);border-left-color:var(--accent);color:var(--fg);}
.dl-item .dl-dot{width:6px;height:6px;border-radius:50%;background:#3a3f4b;flex:0 0 auto;
  margin-top:8px;transition:.16s;}
.dl-item:hover .dl-dot{background:var(--muted);}
.dl-item.active .dl-dot{background:var(--accent);box-shadow:0 0 8px rgba(38,198,218,.7);}
.dl-item.dl-cover .dl-dot{background:transparent;border:1px solid var(--muted);width:7px;height:7px;}
.dl-item.dl-cover.active .dl-dot{background:var(--accent);border-color:var(--accent);}
.dl-item .dl-label{font-size:14px;line-height:1.45;}
.dl-foot{flex:0 0 auto;padding:13px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);}
.tb-btn.is-open{color:var(--accent);border-color:var(--accent);background:rgba(38,198,218,.08);}

/* ===== 인쇄·PDF 저장 차단 (외부 유출 방지) ===== */
@media print{ html,body{display:none !important;visibility:hidden !important;} }
.print-block{display:none;position:fixed;inset:0;z-index:9999;background:var(--bg);color:var(--fg);
  align-items:center;justify-content:center;text-align:center;padding:2rem;}
.print-block .msg{font-size:1.1rem;font-weight:600;}
.print-block .sub2{font-size:.9rem;color:var(--muted);margin-top:.5rem;}
@media print{ .print-block{display:flex !important;visibility:visible !important;} }

/* ============================================================
   키치 톤 오버라이드 (다크 → 크림 페이퍼백, 색·배경만 교체)
   prose 내부 요소는 보더 폭/패딩 미변경 → 페이지네이션 측정 영향 없음.
   ============================================================ */
#topbar{ background:rgba(255,250,240,.92); }
#botbar{ background:rgba(255,250,240,.92); }
#toast{ background:#fffdf2; box-shadow:4px 4px 0 var(--border); }
#toast b{ color:var(--accent); }
.page + .page{ border-left-color:rgba(23,19,15,.14); }
.spread.two::after{ background:linear-gradient(90deg,transparent,rgba(23,19,15,.10) 50%,transparent); }
.endpaper{ background:radial-gradient(120% 90% at 70% 50%,rgba(95,210,195,.14),transparent 60%),var(--paper); }
.endpaper .ep-logo{ opacity:.7; }
.endpaper .ep-sub{ color:#b9b1a3; }
.page::-webkit-scrollbar-thumb,#drawer-list::-webkit-scrollbar-thumb{ background:#e0d6c0; }
#progress-track{ background:#efe7d4; }
/* 표지 카드 → 패널 + 두꺼운 잉크 보더 + 하드 섀도우 */
.cover-card{ background:var(--panel); border:2px solid var(--border);
  box-shadow:7px 7px 0 var(--border),none; }
.cover-card::before{ opacity:1; }
.cover-ghost{ color:rgba(23,19,15,.05); }
.cover-cta{ background:var(--accent); color:#fffdf2; border:2px solid var(--border);
  border-bottom-width:5px; box-shadow:none; }
.cover-cta:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--border); }
/* 본문 강조: 코랄 형광펜 + 잉크 텍스트 */
.prose strong{ background:linear-gradient(transparent 60%, rgba(244,127,114,.30) 60%); color:var(--fg); }
.prose blockquote{ color:var(--fg);
  background:linear-gradient(90deg,rgba(95,210,195,.16),rgba(95,210,195,0)); }
/* 인라인 코드 → 크림 칩 / 코드블록은 잉크 유지(가독 대비) */
.prose code{ background:rgba(23,19,15,.06); color:#b3402f; }
.prose pre{ background:#17130f; border-color:var(--border); }
.prose pre code{ color:#efe7d4; }
/* TOC 서랍 → 페이퍼 */
#drawer{ background:var(--paper); }
.dl-item:hover{ background:rgba(244,127,114,.08); }
.dl-item.active{ background:rgba(244,127,114,.12); }