/* ========= 텍스토피아 — 디자인 토큰 (웹기획 06 정본) ========= */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');
@import url('https://hangeul.pstatic.net/hangeul_static/css/maru-buri.css');

:root{
  --bg:#F7F1E3; --surface:#FFFDF8; --ink:#3A3730; --ink-soft:#6E6759;
  --primary:#28456E; --accent:#C96F8F; --stitch:#8A6D4A; --danger:#B4452E;
  --glow:transparent;
  --dur-fast:.2s; --dur-med:.4s; --dur-slow:.8s;
  --ease:cubic-bezier(.22,1,.36,1);
  --radius-card:10px; --radius-btn:24px;
  --shadow-card:0 2px 12px rgba(58,55,48,.08);
  --font-display:'Gowun Batang','MaruBuri',serif;
  --font-ui:'Pretendard',-apple-system,sans-serif;
  --font-serif:'Gowun Batang','MaruBuri','Noto Serif KR',serif;
}
[data-theme='dark']{
  --bg:#14172A; --surface:#1E2238; --ink:#EDE6D6; --ink-soft:#A9A290;
  --primary:#8FB0E0; --accent:#E8A7BF; --stitch:#7A6F5A; --glow:#E8B26B;
  --danger:#E58B74; --shadow-card:0 2px 16px rgba(0,0,0,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:15px;line-height:1.6;transition:background var(--dur-med) var(--ease),color var(--dur-med) var(--ease)}
/* 원단 노이즈 텍스처 */
body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme='dark'] body::before{opacity:.02}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
h1,h2,h3{font-family:var(--font-display);line-height:1.35;word-break:keep-all}

/* ---------- 스티치 링크 ---------- */
.stitch-link{position:relative;padding-bottom:2px;background-image:linear-gradient(90deg,var(--stitch) 60%,transparent 60%);background-size:8px 2px;background-repeat:repeat-x;background-position:0 100%}
.stitch-link:hover{background-image:linear-gradient(90deg,var(--accent) 60%,transparent 60%);animation:stitchIn var(--dur-med) var(--ease)}
@keyframes stitchIn{from{background-size:0 2px}to{background-size:8px 2px}}

/* ---------- 단추 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 28px;
  border-radius:var(--radius-btn);border:none;background:var(--accent);color:#fff;
  font-family:var(--font-ui);font-size:16px;font-weight:700;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);text-decoration:none}
.btn:hover{box-shadow:0 4px 16px rgba(201,111,143,.35)}
.btn:hover .btn-hole{animation:sew .3s var(--ease)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn-hole{width:16px;height:16px;border:1.6px solid rgba(255,255,255,.9);border-radius:50%;position:relative;flex:none}
.btn-hole::before,.btn-hole::after{content:'';position:absolute;width:2.5px;height:2.5px;background:#fff;border-radius:50%}
.btn-hole::before{top:3px;left:3px;box-shadow:5px 0 0 #fff}
.btn-hole::after{bottom:3px;left:3px;box-shadow:5px 0 0 #fff}
@keyframes sew{0%{transform:rotate(0)}50%{transform:rotate(22deg) scale(1.15)}100%{transform:rotate(0)}}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px dashed var(--stitch);height:44px;font-weight:600}
.btn--ghost:hover{border-style:solid;box-shadow:none}
.btn--sm{height:38px;padding:0 18px;font-size:14px}

/* ---------- 원단 카드 ---------- */
.card{background:var(--surface);border:1.5px solid var(--stitch);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);padding:22px;position:relative;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.card::before,.card::after{content:'';position:absolute;left:10px;right:10px;height:0;
  border-top:1px dashed color-mix(in srgb,var(--stitch) 45%,transparent)}
.card::before{top:7px}.card::after{bottom:7px}
a.card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(58,55,48,.14)}
.card h3{font-size:17px;margin-bottom:8px;font-family:var(--font-ui);font-weight:700}
.card p{color:var(--ink-soft);font-size:14px}

/* ---------- GNB / 하단 바 ---------- */
.gnb{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 20px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px dashed color-mix(in srgb,var(--stitch) 40%,transparent);transition:height var(--dur-fast)}
.logo{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--ink);display:flex;align-items:center;gap:6px}
.logo .dot{width:10px;height:10px;border:1.6px solid var(--accent);border-radius:50%;display:inline-block;position:relative;top:1px}
.gnb-menu{display:none;gap:26px;align-items:center}
.gnb-menu a{color:var(--ink);font-weight:600;font-size:15px}
.gnb-right{display:flex;gap:10px;align-items:center}
.theme-toggle{width:40px;height:40px;border-radius:50%;border:none;background:transparent;cursor:pointer;font-size:18px;color:var(--ink)}
.theme-toggle:hover{background:var(--surface)}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;height:calc(60px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(10px);border-top:1px dashed color-mix(in srgb,var(--stitch) 45%,transparent);transition:transform var(--dur-med) var(--ease)}
.bottom-nav.hide{transform:translateY(110%)}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:var(--ink-soft);font-weight:600}
.bottom-nav a.active{color:var(--primary)}
.bottom-nav a.cta{color:#fff}
.bottom-nav a.cta span.pill{background:var(--accent);border-radius:18px;padding:7px 16px;font-size:12.5px;font-weight:700}
.bottom-nav .ico{font-size:17px}
@media(min-width:768px){.gnb{height:72px;padding:0 40px}.gnb-menu{display:flex}.bottom-nav{display:none}}

/* ---------- 히어로 스크롤텔링 ---------- */
.hero{position:relative;height:400vh}
.hero-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.act{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;opacity:0;transition:opacity .5s var(--ease)}
.act.on{opacity:1}
.act1{background:linear-gradient(180deg,#101322 0%,#1a1e33 100%)}
.act1 .alley{position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 50% 68%,rgba(232,178,107,.22),transparent 68%),linear-gradient(180deg,rgba(18,20,38,.62),rgba(18,20,38,.40) 55%,rgba(18,20,38,.66)),url(img/hero-alley.webp) center/cover;background-blend-mode:screen,normal,normal}
.big-type{font-family:var(--font-display);font-weight:800;color:#EDE6D6;font-size:clamp(38px,9vw,84px);line-height:1.25;letter-spacing:-.01em}
.act2{background:#181c30}
.thread-svg{position:absolute;inset:0;width:100%;height:100%}
.act2 .big-type .alive{color:#8FB0E0;position:relative}
.act3{background:#181c30}
.tear{position:absolute;inset:0;background:#F7F1E3;clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%);transition:clip-path .1s linear}
.act3 .tear-label{position:relative;z-index:2;font-family:var(--font-display);font-size:clamp(17px,3.5vw,26px);color:#5C4033;font-weight:700;opacity:0;transition:opacity .4s}
.act3.torn .tear-label{opacity:1}
.act4{background:var(--bg)}
.act4 .map-wrap{width:min(560px,86vw);margin-bottom:22px;filter:drop-shadow(0 10px 30px rgba(58,55,48,.18));animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.act4 h1{font-size:clamp(26px,5.4vw,44px);color:var(--ink);margin-bottom:10px}
.act4 .sub{color:var(--ink-soft);font-size:clamp(14px,2.6vw,17px);margin-bottom:26px;line-height:1.75}
.hero-progress{position:fixed;top:0;left:0;height:3px;background:var(--primary);width:0;z-index:60;transition:width .1s linear}
.hero-skip{position:fixed;left:16px;bottom:76px;z-index:55;font-size:13px;color:var(--ink-soft);background:color-mix(in srgb,var(--surface) 85%,transparent);border:1px dashed var(--stitch);border-radius:16px;padding:7px 14px;cursor:pointer;backdrop-filter:blur(6px)}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#A9A290;font-size:12.5px;letter-spacing:.14em;animation:hint 2s ease-in-out infinite}
@keyframes hint{0%,100%{opacity:.4;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,6px)}}
@media(prefers-reduced-motion:reduce){
  .hero{height:auto}.hero-stage{position:static;height:auto;min-height:100vh}
  .act{position:static;opacity:1!important;min-height:60vh}
  .act1,.act2,.act3{display:none}
  *{animation:none!important;transition:none!important}
}

/* ---------- 홈 섹션 ---------- */
.section{max-width:1100px;margin:0 auto;padding:72px 20px}
.section h2{font-size:clamp(22px,4vw,28px);margin-bottom:8px}
.section .sec-sub{color:var(--ink-soft);margin-bottom:30px;font-size:14.5px}
.grid3{display:grid;gap:16px}
@media(min-width:768px){.grid3{grid-template-columns:repeat(3,1fr)}}
.book-card .cover{aspect-ratio:2/3;border-radius:8px;margin-bottom:14px;display:flex;flex-direction:column;justify-content:space-between;padding:18px;color:#F7F1E3;font-family:var(--font-display);position:relative;overflow:hidden;transition:transform var(--dur-fast) var(--ease)}
.book-card:hover .cover{transform:scale(1.02)}
.cover .vol{font-size:12px;opacity:.85;letter-spacing:.2em}
.cover .bt{font-size:20px;font-weight:800;line-height:1.4}
.cover-1{background:linear-gradient(180deg,rgba(26,44,72,.30),rgba(26,44,72,0) 26%,rgba(26,44,72,0) 60%,rgba(26,44,72,.55)),url(img/cover-vol1.webp?v=7) center/cover,#1a2c48}
.cover-2{background:linear-gradient(180deg,rgba(61,49,83,.30),rgba(61,49,83,0) 26%,rgba(61,49,83,0) 60%,rgba(61,49,83,.55)),url(img/cover-vol2.webp?v=7) center/cover,#3d3153}
.cover-3{background:linear-gradient(180deg,rgba(110,51,72,.30),rgba(110,51,72,0) 26%,rgba(110,51,72,0) 60%,rgba(110,51,72,.55)),url(img/cover-vol3.webp?v=7) center/cover,#6e3348}
.cover::after{content:'';position:absolute;inset:10px;border:1px dashed rgba(247,241,227,.35);border-radius:5px;pointer-events:none}
.quote-carousel{position:relative;overflow:hidden}
.quote-track{display:flex;transition:transform var(--dur-med) var(--ease)}
.quote-card{flex:0 0 100%;padding:34px 26px;text-align:center}
.quote-card blockquote{font-family:var(--font-display);font-size:clamp(17px,3.4vw,22px);line-height:1.75;margin-bottom:14px}
.quote-card cite{color:var(--ink-soft);font-size:13px;font-style:normal}
.q-dots{display:flex;gap:8px;justify-content:center;margin-top:8px}
.q-dots button{width:8px;height:8px;border-radius:50%;border:1.4px solid var(--stitch);background:transparent;cursor:pointer;padding:0}
.q-dots button.on{background:var(--stitch)}
.newsletter{display:flex;gap:10px;max-width:460px;flex-wrap:wrap}
.newsletter input{flex:1;min-width:220px;height:48px;border:1.5px solid var(--stitch);border-radius:8px;background:var(--surface);color:var(--ink);padding:0 16px;font-family:var(--font-ui);font-size:15px}
.newsletter input:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
.form-msg{width:100%;font-size:13px;margin-top:4px;color:var(--ink-soft)}
.form-msg.err{color:var(--danger)}
.form-msg.ok{color:var(--primary);font-weight:600}
footer{border-top:2px dashed color-mix(in srgb,var(--stitch) 55%,transparent);margin-top:40px;padding:36px 20px calc(90px + env(safe-area-inset-bottom));text-align:center;color:var(--ink-soft);font-size:12.5px;line-height:2}
@media(min-width:768px){footer{padding-bottom:36px}}

/* ---------- 세계관 지도 ---------- */
.world-layout{max-width:1100px;margin:0 auto;padding:96px 20px 60px;display:grid;gap:22px}
@media(min-width:900px){.world-layout{grid-template-columns:1.5fr 1fr;align-items:start}}
.map-box{background:var(--surface);border:1.5px solid var(--stitch);border-radius:14px;padding:14px}
.map-box svg{width:100%;height:auto;display:block}
.region{cursor:pointer;transition:filter var(--dur-fast)}
.region:hover,.region:focus{filter:brightness(1.07)}
.region:focus{outline:none}
.region.sel path,.region.sel ellipse,.region.sel rect{stroke-width:3.5}
.panel{position:sticky;top:88px}
.panel .card{min-height:300px}
.panel h3{font-family:var(--font-display);font-size:20px;margin-bottom:6px}
.panel .tagline{color:var(--ink-soft);font-size:14px;margin-bottom:14px;line-height:1.7}
.panel .meta{font-size:13.5px;line-height:2}
.panel .meta b{color:var(--primary)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.chip{border:1px solid var(--stitch);border-radius:14px;padding:4px 12px;font-size:12.5px;color:var(--ink-soft)}
.dict{max-width:1100px;margin:0 auto;padding:0 20px 80px}
.acc{border-bottom:1px dashed var(--stitch)}
.acc summary{cursor:pointer;padding:16px 4px;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.acc summary::after{content:'+';color:var(--stitch);font-size:18px;transition:transform var(--dur-fast)}
.acc[open] summary::after{transform:rotate(45deg)}
.acc div{padding:0 4px 16px;color:var(--ink-soft);font-size:14px;line-height:1.8}
.char-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:1100px;margin:0 auto;padding:0 20px 60px}
@media(min-width:768px){.char-grid{grid-template-columns:repeat(4,1fr)}}
.char-card{aspect-ratio:3/4;perspective:800px;cursor:pointer;background:none;border:none;padding:0;font-family:var(--font-ui)}
.char-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--dur-med) var(--ease)}
.char-card.flip .char-inner{transform:rotateY(180deg)}
.char-face{position:absolute;inset:0;backface-visibility:hidden;border:1.5px solid var(--stitch);border-radius:10px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px;text-align:center}
.char-back{transform:rotateY(180deg);justify-content:center}
.char-sil{width:64%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--primary) 30%,var(--surface)),color-mix(in srgb,var(--primary) 55%,var(--surface)))}
.char-face b{font-size:15px}.char-face small{color:var(--ink-soft);font-size:12px;line-height:1.6}

/* ---------- 뷰어 ---------- */
body.viewer-mode{background:var(--bg)}
body.viewer-mode[data-reading='sepia']{--bg:#F2E8D5;--surface:#F8F1E2;--ink:#43392C}
.v-progress{position:fixed;top:0;left:0;height:3px;background:var(--primary);width:0;z-index:70}
.v-top{position:fixed;top:0;left:0;right:0;z-index:65;display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 14px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px dashed color-mix(in srgb,var(--stitch) 40%,transparent);
  transform:translateY(-110%);transition:transform var(--dur-fast) var(--ease)}
.v-top.show{transform:translateY(0)}
.v-top .pos{font-size:12.5px;color:var(--ink-soft)}
.v-top button,.v-top a{background:none;border:none;font-size:15px;color:var(--ink);cursor:pointer;padding:8px;font-family:var(--font-ui)}
.v-body{max-width:680px;margin:0 auto;padding:80px 22px 60px;font-family:var(--font-serif);font-size:var(--reader-size,17px);line-height:1.85}
.v-body h1{font-size:1.5em;margin-bottom:2.2em;text-align:center;padding-top:1em}
.v-body p{margin-bottom:1.2em}
.v-body .voice{color:var(--primary);letter-spacing:.05em}
.v-body .sfx{font-style:italic;font-size:1.05em}
.v-settings{position:fixed;bottom:0;left:0;right:0;z-index:66;background:var(--surface);border-top:1.5px solid var(--stitch);border-radius:16px 16px 0 0;
  padding:20px 22px calc(20px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform var(--dur-med) var(--ease)}
.v-settings.show{transform:translateY(0)}
.v-settings .row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:14px}
.v-settings .opts{display:flex;gap:8px}
.v-settings .opts button{border:1.4px solid var(--stitch);background:transparent;color:var(--ink);border-radius:8px;padding:7px 14px;cursor:pointer;font-size:13.5px;font-family:var(--font-ui)}
.v-settings .opts button.on{background:var(--primary);color:var(--bg);border-color:var(--primary)}
.v-end{max-width:680px;margin:0 auto;padding:30px 22px 100px;text-align:center}
.knot{width:90px;height:40px;margin:0 auto 8px}
.v-end h2{font-family:var(--font-display);font-size:24px;margin:6px 0 4px}
.v-end .t{color:var(--ink-soft);font-size:14px;margin-bottom:30px}
.teaser{background:var(--surface);border:1.5px solid var(--stitch);border-radius:10px;padding:24px;margin-bottom:26px;text-align:left;font-family:var(--font-serif);line-height:1.85;position:relative;overflow:hidden}
.teaser .fade{position:absolute;left:0;right:0;bottom:0;height:86px;background:linear-gradient(transparent,var(--surface))}
.teaser .lead{font-size:12.5px;color:var(--accent);font-weight:700;font-family:var(--font-ui);letter-spacing:.12em;margin-bottom:12px}

/* ---------- 스토어·결제 ---------- */
.narrow{max-width:640px;margin:0 auto;padding:100px 20px 80px}
.narrow h1{font-size:26px;margin-bottom:6px}
.narrow .sub{color:var(--ink-soft);font-size:14px;margin-bottom:28px}
.steps{display:flex;gap:6px;align-items:center;justify-content:center;margin-bottom:30px;font-size:12.5px;color:var(--ink-soft)}
.steps .st{display:flex;align-items:center;gap:6px}
.steps .knot-dot{width:10px;height:10px;border-radius:50%;border:1.6px solid var(--stitch)}
.steps .st.on .knot-dot{background:var(--primary);border-color:var(--primary)}
.steps .st.on{color:var(--primary);font-weight:700}
.steps .dash{width:26px;border-top:1.6px dashed var(--stitch)}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.field input{width:100%;height:48px;border:1.5px solid var(--stitch);border-radius:8px;background:var(--surface);color:var(--ink);padding:0 14px;font-size:15px;font-family:var(--font-ui)}
.field input:focus{outline:2px solid var(--primary);outline-offset:1px}
.field .hint{font-size:12.5px;color:var(--danger);margin-top:5px;display:none}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;margin-bottom:12px;color:var(--ink-soft);cursor:pointer}
.check input{width:18px;height:18px;margin-top:1px;accent-color:var(--primary)}
.price-line{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px dashed var(--stitch);font-size:14.5px}
.price-line.total{font-weight:800;font-size:17px;border-bottom:none}
.demo-note{background:color-mix(in srgb,var(--accent) 12%,var(--surface));border:1px dashed var(--accent);border-radius:8px;padding:10px 14px;font-size:12.5px;color:var(--ink-soft);margin-bottom:20px}
.store-grid{display:grid;gap:16px}
@media(min-width:768px){.store-grid{grid-template-columns:repeat(3,1fr)}}
.hero-card{border:2px solid var(--accent)}
.badge{display:inline-block;background:var(--primary);color:var(--bg);font-size:11.5px;font-weight:700;border-radius:12px;padding:3px 10px;margin-bottom:10px}
.badge--accent{background:var(--accent);color:#fff}

/* 404 */
.err-wrap{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.err-wrap h1{font-size:26px;margin:18px 0 8px}
.err-wrap p{color:var(--ink-soft);margin-bottom:26px}
.loose{width:150px;height:80px}

.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur-med) var(--ease),transform var(--dur-med) var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- 햄버거 & 드로어 ---------- */
.menu-btn{width:42px;height:42px;border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:8px}
.menu-btn:hover{background:var(--surface)}
.menu-btn i{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
.menu-btn i:nth-child(2){background-image:linear-gradient(90deg,var(--stitch) 60%,transparent 60%);background-size:6px 2px;background-color:transparent}
.drawer-ovl{position:fixed;inset:0;background:rgba(20,23,42,.45);opacity:0;pointer-events:none;transition:opacity .25s var(--ease);z-index:80}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);background:var(--surface);z-index:81;transform:translateX(105%);transition:transform .3s var(--ease);padding:20px 22px calc(24px + env(safe-area-inset-bottom));overflow:auto;border-left:1.5px dashed var(--stitch)}
body.drawer-open .drawer{transform:none}
body.drawer-open .drawer-ovl{opacity:1;pointer-events:auto}
.d-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.d-head b{font-family:var(--font-display);font-size:18px}
.d-close{border:none;background:none;font-size:22px;color:var(--ink-soft);cursor:pointer;padding:6px}
.d-link{display:block;padding:14px 4px;font-size:15.5px;font-weight:600;color:var(--ink);border-bottom:1px dashed color-mix(in srgb,var(--stitch) 40%,transparent)}
.d-link small{color:var(--ink-soft);font-weight:400;font-size:12px;margin-left:8px}
.d-link.hot{color:var(--accent)}
.d-badge{display:inline-block;background:var(--accent);color:#fff;font-size:10px;font-weight:700;border-radius:8px;padding:2px 7px;margin-left:8px;vertical-align:2px}
.d-theme{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;font-size:14px;color:var(--ink-soft)}
.d-legal{padding-top:14px;font-size:12px;color:var(--ink-soft);line-height:2}
@media(max-width:767px){.gnb .theme-toggle{display:none}}

/* ---------- 컴팩트 푸터 ---------- */
.ft-grid{max-width:1100px;margin:0 auto;text-align:left;display:grid;gap:16px;grid-template-columns:1fr 1fr;font-size:12.5px;line-height:2}
.ft-grid b{color:var(--ink)}
.ft-brand{grid-column:1/-1;line-height:1.8}
.ft-brand b{font-family:var(--font-display);font-size:15px}
.ft-biz{grid-column:1/-1;color:var(--ink-soft);font-size:11px;line-height:1.9;border-top:1px dashed color-mix(in srgb,var(--stitch) 40%,transparent);padding-top:12px}
.ft-bottom{max-width:1100px;margin:18px auto 0;padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--stitch) 40%,transparent);font-size:11px;color:var(--ink-soft);text-align:center}
@media(min-width:768px){.ft-grid{grid-template-columns:2fr 1fr 1fr;font-size:13px}.ft-brand{grid-column:auto}}

body{word-break:keep-all}

/* 이미지 적용 v6 */
.char-photo{width:64%;aspect-ratio:1;border-radius:50%;object-fit:cover;border:2px solid color-mix(in srgb,var(--primary) 30%,var(--surface));box-shadow:0 3px 10px rgba(58,55,48,.14)}
.world-hero{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 12px 34px rgba(58,55,48,.20);margin:6px 0 22px}
.err-art{display:block;width:min(420px,80%);height:auto;margin:0 auto 18px;border-radius:16px;box-shadow:0 10px 30px rgba(58,55,48,.18)}