:root{
  --bg:#f5f6f9;--surface:#fff;--surface-2:#f8f9fb;--line:#eaecf1;--line-strong:#dfe2e9;
  --ink:#181b22;--muted:#697086;--faint:#9aa1b1;--primary:#4f46e5;--primary-2:#6366f1;--primary-ink:#4338ca;--primary-soft:#eef1ff;
  --grad:linear-gradient(135deg,#1e293b 0%,#4338ca 55%,#6366f1 100%);
  --ok:#10b981;--gold:#e0912f;--shadow:0 1px 2px rgba(16,20,40,.04),0 8px 24px rgba(16,20,40,.06);--shadow-lg:0 12px 40px rgba(16,20,40,.12);
}
html[data-theme="dark"]{--bg:#0e1014;--surface:#171a21;--surface-2:#1e222b;--line:#262a33;--line-strong:#333844;--ink:#e8eaef;--muted:#a2a9b8;--faint:#6f7686;--primary-soft:#20233a;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);--shadow-lg:0 12px 40px rgba(0,0,0,.55);color-scheme:dark}
*{box-sizing:border-box}html{overflow-x:hidden}
body.blog-body{margin:0;background:var(--bg);color:var(--ink);font-family:'Pretendard Variable',Pretendard,-apple-system,'Segoe UI','Malgun Gothic',sans-serif;font-size:16px;line-height:1.75;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
img,svg,figure,table{max-width:100%}
a{color:var(--primary-ink)}

/* 상단바 */
.blog-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border-bottom:1px solid var(--line);padding:11px 18px}
.blog-home{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);text-decoration:none;font-size:15px}
.blog-back{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:600}
.blog-back:hover{color:var(--primary-ink)}

/* 포스트 */
.post{max-width:760px;margin:0 auto;padding:22px 18px 60px}
.post-thumb{position:relative;border-radius:18px;padding:40px 28px;color:#fff;box-shadow:var(--shadow);overflow:hidden;text-align:center}
.post-thumb .post-emoji{font-size:44px;display:block;margin-bottom:8px}
.post-thumb h1{margin:0;font-size:26px;font-weight:800;line-height:1.35;text-shadow:0 2px 8px rgba(0,0,0,.25)}
.post-meta{display:flex;gap:8px;color:var(--faint);font-size:13px;margin:16px 2px 12px}
.aff-disclosure{font-size:12px;color:var(--faint);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;line-height:1.6}

/* 제휴 스트립 */
.aff-strip{margin:16px 0;border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--surface)}
.aff-strip.mid{background:var(--primary-soft);border-color:#d7dcff}
.aff-strip-t{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:10px}
.aff-strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.aff-btn{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line);text-decoration:none;transition:all .13s}
.aff-btn:hover{border-color:var(--primary);box-shadow:0 6px 16px rgba(79,70,229,.14);transform:translateY(-2px)}
.aff-btn b{font-size:13.5px;color:var(--ink);line-height:1.3}
.aff-btn span{font-size:11.5px;color:var(--primary);font-weight:800}

/* 목차 */
.post-toc{margin:20px 0;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.post-toc b{font-size:14px}
.post-toc ol{margin:8px 0 0;padding-left:20px}
.post-toc li{margin:5px 0}
.post-toc a{color:var(--muted);text-decoration:none}
.post-toc a:hover{color:var(--primary-ink);text-decoration:underline}

.post-intro{font-size:17px;color:var(--ink);margin:18px 0}
.post h2{font-size:21px;font-weight:800;margin:34px 0 12px;padding-top:8px;scroll-margin-top:64px}
.post p{margin:12px 0}
.post-quote{margin:22px 0;padding:16px 20px;border-left:4px solid var(--primary);background:var(--surface-2);border-radius:0 12px 12px 0;font-size:17px;font-style:italic;color:var(--ink)}
.post-quote cite{display:block;margin-top:8px;font-style:normal;font-size:13px;color:var(--faint)}

/* 콜아웃 */
.callout{margin:18px 0;border-radius:13px;padding:14px 16px;border:1px solid var(--line)}
.callout b{display:block;margin-bottom:6px;font-size:14px}
.callout.tip{background:#fff8ea;border-color:#f3ddab}
.callout.check{background:#eefaf3;border-color:#bfe8d3}
.callout.summary{background:var(--primary-soft);border-color:#d7dcff}
.callout ul{margin:4px 0;padding-left:20px}
.callout li{margin:4px 0}
html[data-theme="dark"] .callout.tip{background:#26200f;border-color:#4a3d1e}
html[data-theme="dark"] .callout.check{background:#0f2419;border-color:#1f4a35}

/* 표 */
.post-table-wrap{overflow-x:auto;margin:18px 0;border-radius:12px;border:1px solid var(--line)}
.post-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface)}
.post-table th,.post-table td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left}
.post-table thead th{background:var(--surface-2);font-weight:800;color:var(--muted);white-space:nowrap}
.post-table tbody tr:last-child td{border-bottom:none}

/* 차트 */
.chart-fig{margin:20px 0}
.chart-title{font-size:14px;font-weight:800;margin-bottom:12px}
.bchart{display:flex;flex-direction:column;gap:9px}
.bchart-row{display:flex;align-items:center;gap:11px;font-size:13px}
.bl{width:110px;flex:none;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bwrap{flex:1;height:14px;background:var(--surface-2);border-radius:7px;overflow:hidden}
.bwrap i{display:block;height:100%;background:var(--grad);border-radius:7px}
.bv{flex:none;width:66px;text-align:right;color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;font-size:12.5px}

/* 이미지(피규어) */
.post-fig{margin:22px 0}
.post-fig .fig-vis{height:180px;border-radius:15px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.post-fig .fig-emoji{font-size:60px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.post-fig figcaption{margin-top:9px;text-align:center;font-size:13px;color:var(--faint)}

/* FAQ */
.post .faq details{border:1px solid var(--line);border-radius:11px;margin:9px 0;background:var(--surface-2);overflow:hidden}
.post .faq summary{cursor:pointer;padding:13px 15px;font-weight:700;list-style:none;position:relative;padding-right:36px}
.post .faq summary::-webkit-details-marker{display:none}
.post .faq summary::after{content:"+";position:absolute;right:15px;top:11px;font-size:18px;color:var(--faint)}
.post .faq details[open] summary::after{content:"−"}
.post .faq p{margin:0;padding:0 15px 14px;color:var(--muted);font-size:14.5px}

/* 하단 CTA */
.post-cta{margin:34px 0 0;background:var(--grad);color:#fff;border-radius:16px;padding:24px;text-align:center}
.post-cta b{font-size:18px;display:block}
.post-cta p{margin:8px 0 16px;color:rgba(255,255,255,.92)}
.post-cta-btn{display:inline-block;background:#fff;color:var(--primary-ink);font-weight:800;padding:12px 22px;border-radius:11px;text-decoration:none}

/* 블로그 인덱스 */
.blog-index{max-width:920px;margin:0 auto;padding:26px 18px 60px}
.blog-index h1{font-size:26px;margin:0}
.blog-sub{color:var(--muted);margin:8px 0 18px}
.blang-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.blang{border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);font-weight:700;font-size:13.5px;padding:8px 14px;border-radius:20px;cursor:pointer;font-family:inherit}
.blang.on{background:var(--primary);border-color:var(--primary);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;box-shadow:var(--shadow);transition:transform .13s,box-shadow .13s}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.pcard-th{height:120px;display:flex;align-items:center;justify-content:center}
.pcard-th span{font-size:42px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
.pcard-b{padding:15px 16px;display:flex;flex-direction:column;gap:6px}
.pcard-cat{font-size:11px;font-weight:800;color:var(--primary-ink);background:var(--primary-soft);align-self:flex-start;padding:2px 9px;border-radius:20px}
.pcard-t{font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.4}
.pcard-d{font-size:13px;color:var(--muted);line-height:1.6}
.pcard-date{font-size:11.5px;color:var(--faint);margin-top:2px}
.blog-empty{text-align:center;color:var(--muted);padding:40px 0}

.blog-foot{max-width:920px;margin:0 auto;padding:22px 18px 40px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;text-align:center}
.blog-foot a{color:var(--primary-ink);text-decoration:none;margin:0 3px}
.blog-foot p{margin:8px 0 0;color:var(--faint)}

@media (max-width:820px){
  body.blog-body{font-size:15.5px}
  .pgrid{grid-template-columns:1fr}
  .aff-strip-grid{grid-template-columns:1fr}
  .post-thumb h1{font-size:22px}
  .post h2{font-size:19px}
  .bl{width:84px}
}