/* 불경 웹 — 다크·골드 디자인 시스템 (전 페이지 공유) */
:root{
  --bg:#0d0b07; --bg-2:#14100a; --card:#1b160e;
  --text:#f3ead6; --text-2:#b6a988; --muted:#8a7f66;
  --line:rgba(212,175,102,.16); --line-2:rgba(212,175,102,.10);
  --accent:#d4af66; --accent-2:#f0d493; --accent-soft:rgba(212,175,102,.10);
  --ink:#221b10;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 50px rgba(0,0,0,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --maxw:1160px; --readw:1160px;
  --font:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:radial-gradient(1000px 600px at 50% -200px,rgba(200,135,62,.12),transparent 60%),var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:-0.01em;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(13,11,7,.72);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line)}
.nav .in{max-width:none;margin:0;padding:12px 22px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:9px}
.brand img{width:30px;height:30px;object-fit:contain}
.brand b{font-size:17px;font-weight:750;letter-spacing:-0.02em}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:8px 12px;font-size:14.5px;font-weight:550;color:var(--text-2);border-radius:8px;transition:color .15s,background .15s}
.nav-links a:hover{color:var(--text);background:var(--bg-2)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:7px;font-weight:650;font-size:15px;padding:11px 18px;border-radius:11px;cursor:pointer;transition:transform .12s ease,background .15s,border-color .15s;border:1px solid transparent;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(145deg,var(--accent-2),var(--accent));color:#241a08}
.btn-primary:hover{filter:brightness(1.05)}
.btn-dark{background:linear-gradient(145deg,var(--accent-2),var(--accent));color:#241a08}
.btn-dark:hover{filter:brightness(1.05)}
.btn-outline{background:rgba(212,175,102,.05);color:var(--text);border-color:var(--line)}
.btn-outline:hover{border-color:var(--accent);background:rgba(212,175,102,.1)}
.btn-sm{font-size:14px;padding:9px 15px;border-radius:9px}
.btn-lg{font-size:16px;padding:14px 24px;border-radius:12px}
.btn img{width:18px;height:18px;border-radius:5px}

/* Section */
.section{padding:clamp(64px,9vw,104px) 0}
.eyebrow{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:none}
.h2{font-size:clamp(26px,3.6vw,36px);font-weight:750;letter-spacing:-0.03em;line-height:1.2}
.lead{color:var(--text-2);font-size:clamp(16px,2vw,18px);max-width:560px}

/* Cards */
.card{background:linear-gradient(180deg,var(--card),rgba(20,16,10,.4));border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:border-color .16s,transform .16s}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-2);font-size:18px;margin-bottom:18px}
.card h3{font-size:18px;font-weight:700;letter-spacing:-0.02em;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--text-2);line-height:1.6}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 4px;font-size:16.5px;font-weight:650;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-weight:400;font-size:22px;transition:transform .2s}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 4px 22px;font-size:15px;color:var(--text-2);line-height:1.72}

/* Footer */
.footer{border-top:1px solid var(--line);padding:40px 24px;text-align:center;color:var(--muted);font-size:13.5px}
.footer a{color:var(--muted);margin:0 4px}
.footer a:hover{color:var(--accent)}

/* Store badges */
.stores{display:flex;gap:12px;flex-wrap:wrap}
.store-badge{transition:opacity .15s,transform .12s}
.store-badge:hover{transform:translateY(-2px)}
.store-badge img{height:52px}

/* Article (blog) */
.reading{max-width:var(--readw);margin:0 auto;padding:56px 24px 72px}
.crumb{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.crumb a{color:var(--accent)}
.article h1{font-size:clamp(28px,4.2vw,40px);font-weight:760;line-height:1.22;letter-spacing:-0.035em;margin-bottom:14px}
.article .meta{color:var(--muted);font-size:14px;margin-bottom:36px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.article h2{font-size:23px;font-weight:720;letter-spacing:-0.03em;margin:40px 0 12px;line-height:1.3;color:var(--accent-2)}
.article h3{font-size:18.5px;font-weight:700;margin:28px 0 8px;color:var(--accent)}
.article p{margin:16px 0;font-size:17px;line-height:1.8;color:var(--text-2)}
.article ul,.article ol{margin:16px 0 16px 4px;list-style:none}
.article li{margin:9px 0;padding-left:22px;position:relative;font-size:17px;line-height:1.75;color:var(--text-2)}
.article li::before{content:"";position:absolute;left:2px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.article ol{counter-reset:li}.article ol li::before{content:counter(li);counter-increment:li;background:none;color:var(--accent);font-weight:700;font-size:14px;top:0;left:0}
.article strong{font-weight:700;color:var(--text)}
.article a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article blockquote{margin:24px 0;padding:22px 26px;background:var(--card);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;color:var(--text);font-size:16.5px;line-height:1.8}
.article hr{border:none;border-top:1px solid var(--line);margin:32px 0}
.article code{background:var(--bg-2);padding:2px 7px;border-radius:6px;font-size:.9em}

/* Blog list */
.post-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.post-card{display:block;padding:28px 4px;border-bottom:1px solid var(--line);transition:background .15s}
.post-card:hover{background:var(--bg-2)}
.post-card:hover h2{color:var(--accent-2)}
.post-card .d{font-size:13px;color:var(--muted);font-weight:550}
.post-card h2{font-size:21px;font-weight:720;letter-spacing:-0.03em;margin:7px 0 8px;transition:color .15s}
.post-card p{font-size:15px;color:var(--text-2);line-height:1.6;max-width:640px}

/* Blog search */
.blog-search{margin-top:24px}
.blog-search input{width:100%;font:inherit;font-size:15px;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 16px;transition:border-color .15s}
.blog-search input::placeholder{color:var(--muted)}
.blog-search input:focus{outline:none;border-color:var(--accent)}
.blog-search-empty{margin-top:20px;color:var(--muted);font-size:14.5px}

#postList.post-list:has(+ .pager) .post-card:last-child{border-bottom:none}
.pager{display:flex;align-items:center;justify-content:space-between;margin-top:8px;margin-bottom:56px;padding-top:28px;border-top:1px solid var(--line)}
.pager-info{color:var(--muted);font-size:13.5px;font-weight:600}

/* Page head (list/simple pages) */
.page-head{padding:56px 0 4px}
.page-head .eyebrow{display:block;margin-bottom:10px}
.page-head h1{font-size:clamp(30px,4.4vw,44px);font-weight:760;letter-spacing:-0.035em}

@media(max-width:640px){
  .nav-links a{padding:8px 9px;font-size:14px}
  .section{padding:56px 0}
}

/* Theme toggle */
.theme-toggle{position:relative;width:52px;height:28px;border-radius:999px;border:1px solid var(--line);background:#2b2620;cursor:pointer;padding:0;flex:0 0 auto;transition:background .2s;-webkit-appearance:none;appearance:none}
.theme-toggle::before{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#f3ead6 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2523c8873e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2M12%2020v2M4.9%204.9l1.4%201.4M17.7%2017.7l1.4%201.4M2%2012h2M20%2012h2M4.9%2019.1l1.4-1.4M17.7%206.3l1.4-1.4%22%2F%3E%3C%2Fsvg%3E") center/13px no-repeat;transition:transform .22s ease}
:root[data-theme="light"] .theme-toggle{background:#e6ddc8}
:root[data-theme="light"] .theme-toggle::before{transform:translateX(24px);background:#fff url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%25238a5e18%22%3E%3Cpath%20d%3D%22M21%2012.8A9%209%200%201%201%2011.2%203a7%207%200%200%200%209.8%209.8z%22%2F%3E%3C%2Fsvg%3E") center/13px no-repeat}

/* ── Light mode ── */
:root[data-theme="light"]{
  --bg:#fbf9f3; --bg-2:#f3efe4; --card:#ffffff;
  --text:#221c14; --text-2:#5c5341; --muted:#8a7f66;
  --line:rgba(120,92,32,.16); --line-2:rgba(120,92,32,.10);
  --accent:#a5761f; --accent-2:#8a5e18; --accent-soft:rgba(184,134,47,.12);
  --ink:#efe7d5;
}
:root[data-theme="light"] .nav{background:rgba(251,249,243,.78)}
:root[data-theme="light"] .article p,:root[data-theme="light"] .article li{color:#3b3527}

/* AEO: TL;DR · FAQ · 출처 */
.tldr{background:var(--bg-2);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:16px 20px;margin:0 0 28px}
.tldr b{color:var(--accent);font-size:13px;display:block;margin-bottom:4px;letter-spacing:.02em}
.tldr p{margin:0;font-size:16px;line-height:1.7;color:var(--text)}
.faq-sec{max-width:var(--readw);margin:56px auto 0;padding:0 24px}
.faq-sec>h2{font-size:20px;font-weight:720;letter-spacing:-.02em;margin-bottom:8px;border-top:1px solid var(--line);padding-top:28px}
.faq-sec details{border-bottom:1px solid var(--line)}
.faq-sec summary{cursor:pointer;list-style:none;padding:18px 4px;font-size:16.5px;font-weight:650;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-sec summary::-webkit-details-marker{display:none}
.faq-sec summary::after{content:"+";color:var(--muted);font-weight:400;font-size:22px}
.faq-sec details[open] summary::after{content:"−"}
.faq-sec details p{padding:0 4px 20px;font-size:15px;color:var(--text-2);line-height:1.72}
.source{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.disclaimer{margin-top:28px;font-size:13px;color:var(--muted);line-height:1.6;text-align:center}
.disclaimer a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}