/* ============================================================
   themes/startup ─ 기업형(IT·AI) · 다크 고정
   시안 startup_home_sian part1+2 이식. data-theme = accent(--primary)만 교체.
   ============================================================ */
:root {
  --bg:#0A0A0C; --surface:#111114; --surface-2:#17171B; --surface-3:#1D1D22;
  --text:#F5F5F4; --text-body:#C4C1BC; --text-muted:#8A857E; --text-dim:#5F5B54;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --ok:#34D399; --ok-soft:rgba(52,211,153,.1); --bad:#FB7185;
  --radius:20px; --radius-sm:12px;
  --primary:#C2570F; --primary-soft:rgba(194,87,15,.12); --accent-text:#E8843F;
}
/* accent 6종 (다크 배경 고정, 강조색만 교체) */
[data-theme="clay"]  { --primary:#C2570F; --primary-soft:rgba(194,87,15,.14); --accent-text:#E8843F; }
[data-theme="blue"]  { --primary:#2563EB; --primary-soft:rgba(37,99,235,.16); --accent-text:#60A5FA; }
[data-theme="sage"]  { --primary:#059669; --primary-soft:rgba(5,150,105,.16); --accent-text:#34D399; }
[data-theme="beige"] { --primary:#D97706; --primary-soft:rgba(217,119,6,.16); --accent-text:#FBBF24; }
[data-theme="white"] { --primary:#64748B; --primary-soft:rgba(100,116,139,.18); --accent-text:#94A3B8; }
[data-theme="dark"]  { --primary:#818CF8; --primary-soft:rgba(129,140,248,.18); --accent-text:#A5B4FC; }

* , *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Pretendard','Plus Jakarta Sans','맑은 고딕',system-ui,sans-serif; background:var(--bg); color:var(--text); font-size:15px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
.mono { font-family:'JetBrains Mono',ui-monospace,monospace; }
.wrap { max-width:1200px; margin:0 auto; padding:0 20px; }

/* 헤더 */
.site-head { background:color-mix(in srgb,var(--bg) 85%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.site-head .inner { display:flex; align-items:center; gap:22px; padding:16px 0; }
.brand { display:flex; align-items:center; gap:12px; }
.brand .logo { width:44px; height:44px; border-radius:12px; background:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:22px; }
.brand .name { font-size:18px; font-weight:800; line-height:1.15; color:var(--text); }
.brand .name b { color:var(--primary); }
.brand .sub { font-size:11px; color:var(--text-muted); }
.nav { display:flex; gap:20px; margin-left:8px; flex-wrap:wrap; }
.nav a { font-size:14px; font-weight:600; color:var(--text-body); padding:6px 0; position:relative; }
.nav a:hover { color:var(--accent-text); }
.nav a.on { color:var(--accent-text); font-weight:700; }
.nav a.on::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--primary); border-radius:2px; }
.head-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.search { position:relative; display:flex; align-items:center; }
.search input { width:210px; font-size:13px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:9px 14px 9px 34px; font-family:inherit; color:var(--text); outline:none; }
.search input:focus { border-color:var(--line-2); }
.search button { position:absolute; left:11px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:13px; padding:0; }
.theme-picker { position:relative; }
.theme-picker select { appearance:none; -webkit-appearance:none; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:9px 34px 9px 30px; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; outline:none; font-family:inherit; }
.theme-picker::before { content:'🎨'; position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:13px; pointer-events:none; }
.theme-picker::after { content:'▾'; position:absolute; right:13px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--text-muted); pointer-events:none; }
.badge-theme { font-size:12px; font-weight:600; color:var(--accent-text); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.badge-theme .dot { width:7px; height:7px; border-radius:50%; background:var(--primary); }
.nav-mobile-toggle { display:none; background:none; border:none; font-size:22px; color:var(--accent-text); cursor:pointer; }

/* 레이아웃 */
.layout { display:grid; grid-template-columns:1fr 340px; gap:28px; padding:28px 0 40px; align-items:start; }
.layout > main { min-width:0; display:flex; flex-direction:column; gap:26px; }
.eye { font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--primary); text-transform:uppercase; }

/* 업종 시뮬레이터 */
.simbar { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
.simbar .lbl { font-size:10px; font-weight:800; letter-spacing:.08em; color:var(--accent-text); text-transform:uppercase; display:flex; align-items:center; gap:5px; margin-bottom:4px; }
.simbar .desc { font-size:13px; font-weight:700; color:var(--text); }
.simbar .picks { display:flex; flex-wrap:wrap; gap:8px; }
.simbar .pick { font-size:12px; font-weight:800; padding:8px 14px; border-radius:12px; background:var(--surface-3); border:1px solid var(--line); color:var(--text-body); cursor:pointer; }
.simbar .pick.on { background:#fff; color:#0A0A0C; border-color:#fff; }

/* 전략 네비 */
.strat-nav { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding-bottom:2px; overflow-x:auto; }
.strat-nav .tabs { display:flex; gap:22px; white-space:nowrap; }
.strat-nav .tabs a { font-size:12.5px; font-weight:800; color:var(--text-muted); padding-bottom:12px; position:relative; }
.strat-nav .tabs a:hover { color:var(--text-body); }
.strat-nav .tabs a.on { color:var(--accent-text); }
.strat-nav .tabs a.on::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--primary); border-radius:2px; }
.strat-nav .live { display:flex; align-items:center; gap:7px; font-size:10px; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--line); padding:5px 12px; border-radius:999px; white-space:nowrap; }
.strat-nav .live .d { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 var(--ok); animation:pulse 1.8s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5);} 70%{box-shadow:0 0 0 6px rgba(52,211,153,0);} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0);} }

/* 히어로 */
.hero { position:relative; border-radius:24px; overflow:hidden; background:#0d0d10; border:1px solid var(--line-2); padding:40px; }
.hero .glow { position:absolute; top:-120px; left:-120px; width:360px; height:360px; border-radius:50%; background:var(--primary); opacity:.18; filter:blur(120px); pointer-events:none; }
.hero .grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:26px 26px; pointer-events:none; }
.hero .cols { position:relative; z-index:2; display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:center; }
.hero .eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:var(--surface-2); border:1px solid var(--line-2); color:var(--text-body); padding:5px 12px; border-radius:999px; margin-bottom:18px; }
.hero h1 { font-size:32px; font-weight:900; line-height:1.2; letter-spacing:-.02em; margin-bottom:16px; color:var(--text); }
.hero .lead { font-size:13.5px; color:var(--text-muted); line-height:1.7; margin-bottom:22px; max-width:520px; }
.hero .lead b { color:var(--text); }
.hero .cta-row { display:flex; flex-wrap:wrap; gap:12px; }
.hero .btn-pri { background:var(--primary); color:#fff; border:none; border-radius:12px; padding:14px 22px; font-family:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.hero .btn-sec { background:var(--surface-2); color:var(--text-body); border:1px solid var(--line-2); border-radius:12px; padding:14px 22px; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.deck { background:#08080a; border:1px solid var(--line-2); border-radius:16px; padding:18px; }
.deck .top { display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:14px; }
.deck .top .c { width:9px; height:9px; border-radius:50%; }
.deck .top .c1 { background:#FB7185; } .deck .top .c2 { background:#FBBF24; } .deck .top .c3 { background:#34D399; }
.deck .top .tt { font-size:10px; color:var(--text-dim); margin-left:6px; }
.deck .blk { background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px; }
.deck .blk .k { font-size:9.5px; color:var(--text-dim); font-weight:700; display:block; margin-bottom:4px; }
.deck .blk .quote { font-size:12px; font-weight:700; line-height:1.5; color:var(--text); }
.deck .stat { display:flex; justify-content:space-between; font-size:10.5px; margin-top:5px; }
.deck .stat .on { color:var(--ok); font-weight:700; }
.deck .stat .rev { color:var(--text); font-weight:800; }

/* 문제 발견 */
.prob { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:36px; }
.prob h2 { font-size:22px; font-weight:900; margin:6px 0 8px; color:var(--text); }
.prob .sub { font-size:13px; color:var(--text-muted); line-height:1.7; max-width:640px; margin-bottom:24px; }
.prob .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.prob .pc { background:#08080a; border:1px solid var(--line); border-radius:16px; padding:22px; position:relative; overflow:hidden; }
.prob .pc .num { position:absolute; top:-6px; right:6px; font-size:44px; font-weight:900; color:rgba(255,255,255,.04); }
.prob .pc .ic { width:34px; height:34px; border-radius:10px; background:rgba(251,113,133,.1); border:1px solid rgba(251,113,133,.2); color:var(--bad); display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:16px; }
.prob .pc h4 { font-size:13.5px; font-weight:800; margin-bottom:6px; line-height:1.4; color:var(--text); }
.prob .pc p { font-size:11.5px; color:var(--text-muted); line-height:1.6; }

/* 고유 기전 */
.mech { background:#0d0d10; border:1px solid var(--line-2); border-radius:24px; padding:36px; position:relative; overflow:hidden; }
.mech .glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:320px; height:320px; border-radius:50%; background:#7C3AED; opacity:.06; filter:blur(100px); pointer-events:none; }
.mech .head { text-align:center; max-width:640px; margin:0 auto 28px; position:relative; z-index:2; }
.mech .head h2 { font-size:22px; font-weight:900; margin:6px 0 8px; color:var(--text); }
.mech .head p { font-size:13px; color:var(--text-muted); line-height:1.7; }
.mech .cols { position:relative; z-index:2; display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:stretch; }
.mech .verify { display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; background:var(--surface-2); border:1px solid var(--line-2); color:var(--text-body); padding:6px 12px; border-radius:8px; margin-bottom:14px; }
.mech .desc { font-size:13px; color:var(--text-body); line-height:1.75; margin-bottom:22px; }
.mech .metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mech .m { background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:14px; }
.mech .m .k { font-size:9px; color:var(--text-dim); font-weight:800; text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:5px; }
.mech .m .val { font-size:17px; font-weight:900; display:block; margin-bottom:3px; color:var(--accent-text); }
.mech .m .d { font-size:8.5px; color:var(--text-dim); }
.mech .compare { background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:12px; }
.mech .compare .ct { font-size:10px; color:var(--text-dim); font-weight:700; }
.mech .cbox { border-radius:12px; padding:13px; }
.mech .cbox.bad { background:rgba(251,113,133,.05); border:1px solid rgba(251,113,133,.15); }
.mech .cbox.good { background:var(--ok-soft); border:1px solid rgba(52,211,153,.18); }
.mech .cbox .h { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; margin-bottom:5px; }
.mech .cbox.bad .h { color:var(--bad); } .mech .cbox.good .h { color:var(--ok); }
.mech .cbox .h .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.mech .cbox p { font-size:10.5px; color:var(--text-muted); line-height:1.6; }
.mech .cbox.good p { color:var(--text-body); }

/* 증거 */
.evi .head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.evi .head h2 { font-size:22px; font-weight:900; margin-top:6px; color:var(--text); }
.evi .head .badge { font-size:11px; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--line); padding:6px 12px; border-radius:999px; }
.case { background:#08080a; border:1px solid var(--line-2); border-radius:24px; padding:28px; display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.case .img { width:300px; height:180px; border-radius:16px; overflow:hidden; flex-shrink:0; background:linear-gradient(135deg,var(--surface-3),#0d0d10); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:40px; }
.case .body { flex:1; min-width:240px; }
.case .tag { display:inline-block; font-size:9px; font-weight:800; background:var(--ok-soft); color:var(--ok); border:1px solid rgba(52,211,153,.2); padding:3px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; }
.case h3 { font-size:15px; font-weight:900; line-height:1.4; margin-bottom:10px; color:var(--text); }
.case p { font-size:12px; color:var(--text-muted); line-height:1.7; margin-bottom:12px; }
.case .foot { display:flex; gap:12px; font-size:10px; color:var(--text-dim); flex-wrap:wrap; }
.case .foot .ok { color:var(--ok); }
.tech-h { font-size:12px; font-weight:800; color:var(--text-body); text-transform:uppercase; display:flex; align-items:center; gap:6px; margin:24px 0 14px; }
.techs { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tpost { display:block; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; transition:border-color .2s, transform .2s; }
.tpost:hover { border-color:var(--line-2); transform:translateY(-3px); }
.tpost .top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
.tpost .cat { font-size:8.5px; font-weight:800; background:var(--surface-2); border:1px solid var(--line); color:var(--text-body); padding:2px 8px; border-radius:5px; text-transform:uppercase; }
.tpost .date { font-size:9.5px; color:var(--text-dim); }
.tpost h4 { font-size:13.5px; font-weight:800; margin-bottom:6px; line-height:1.4; color:var(--text); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.tpost p { font-size:11.5px; color:var(--text-muted); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:14px; }
.tpost .meta { display:flex; justify-content:space-between; gap:8px; font-size:9.5px; color:var(--text-dim); padding-top:12px; border-top:1px solid var(--line); }
.list-empty { padding:40px 20px; text-align:center; color:var(--text-muted); font-size:13px; }

/* 권위 */
.auth { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:36px; }
.auth h2 { font-size:22px; font-weight:900; margin:6px 0 8px; color:var(--text); }
.auth .sub { font-size:13px; color:var(--text-muted); line-height:1.7; margin-bottom:22px; max-width:640px; }
.auth .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.auth .a { background:#08080a; border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; gap:11px; }
.auth .a .ck { width:20px; height:20px; border-radius:50%; background:var(--ok-soft); border:1px solid rgba(52,211,153,.25); color:var(--ok); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:11px; }
.auth .a p { font-size:11px; color:var(--text-body); line-height:1.6; }

/* 견적 CTA */
.cta { background:#0d0d10; border:1px solid var(--line-2); border-radius:24px; padding:36px; position:relative; overflow:hidden; }
.cta .glow { position:absolute; top:-40px; right:-40px; width:200px; height:200px; border-radius:50%; background:var(--ok); opacity:.05; filter:blur(80px); }
.cta .head { text-align:center; max-width:560px; margin:0 auto 28px; position:relative; z-index:2; }
.cta .head h2 { font-size:22px; font-weight:900; margin:6px 0 8px; color:var(--text); }
.cta .head p { font-size:13px; color:var(--text-muted); line-height:1.7; }
.cta .cols { position:relative; z-index:2; display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:start; }
.cta label { font-size:12px; font-weight:800; display:block; margin-bottom:10px; color:var(--text); }
.cta .scales { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.cta .sc { background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:13px; cursor:pointer; min-height:76px; display:flex; flex-direction:column; justify-content:space-between; }
.cta .sc.on { background:var(--surface-3); border-color:var(--primary); }
.cta .sc .t { font-size:11px; font-weight:900; color:var(--text); }
.cta .sc .d { font-size:9px; color:var(--text-dim); line-height:1.4; }
.cta .toggle-row { background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.cta .toggle-row .t { font-size:12px; font-weight:800; margin-bottom:3px; color:var(--text); }
.cta .toggle-row .d { font-size:10px; color:var(--text-muted); line-height:1.5; }
.cta .sw { width:46px; height:24px; border-radius:999px; background:var(--surface-3); position:relative; flex-shrink:0; border:1px solid var(--line-2); cursor:pointer; transition:background .2s; }
.cta .sw::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .2s; }
.cta .sw.on { background:var(--ok); }
.cta .sw.on::after { left:24px; }
.cta form { border-top:1px solid var(--line); padding-top:18px; }
.cta .g2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.cta .g2 label { font-size:10.5px; margin-bottom:6px; }
.cta input, .cta textarea { width:100%; background:var(--surface); border:1px solid var(--line-2); border-radius:10px; padding:11px 13px; font-family:inherit; font-size:12px; color:var(--text); }
.cta textarea { resize:none; }
.cta .submit { width:100%; background:var(--primary); color:#fff; border:none; border-radius:12px; padding:14px; font-family:inherit; font-size:13px; font-weight:800; cursor:pointer; margin-top:12px; }
.spec { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; }
.spec .sh { font-size:10px; font-weight:800; letter-spacing:.05em; color:var(--text-muted); text-transform:uppercase; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:12px; }
.spec .r { display:flex; justify-content:space-between; gap:10px; font-size:11px; margin-bottom:8px; }
.spec .r .k { color:var(--text-dim); }
.spec .r .v { font-weight:800; color:var(--text); }
.spec .r .v.amber { color:var(--accent-text); }
.spec .r .v.ok { color:var(--ok); }
.spec .total { border-top:1px solid var(--line); padding-top:14px; margin-top:6px; }
.spec .total .lbl { font-size:10px; color:var(--text-dim); }
.spec .total .price { font-size:24px; font-weight:900; color:var(--text); }
.spec .total .price small { font-size:10px; color:var(--text-dim); font-weight:500; }

/* 사이드바 */
.layout aside { display:flex; flex-direction:column; gap:18px; position:sticky; top:90px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.card.profile { text-align:center; }
.card.profile .ava { width:60px; height:60px; border-radius:50%; margin:0 auto 12px; background:var(--surface-3); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-size:26px; position:relative; }
.card.profile .ava .on { position:absolute; right:2px; bottom:2px; width:12px; height:12px; border-radius:50%; background:var(--ok); border:2px solid var(--surface); }
.card.profile h5 { font-size:15px; font-weight:800; margin-bottom:6px; color:var(--text); }
.card.profile p { font-size:12px; color:var(--text-body); line-height:1.6; margin-bottom:14px; }
.card.profile button { width:100%; background:var(--primary); color:#fff; border:none; border-radius:10px; height:42px; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.card.bene .label, .card.pop .label { font-size:13px; font-weight:800; color:var(--text); margin-bottom:14px; }
.bene-row { display:flex; gap:10px; padding:11px 0; border-top:1px solid var(--line); }
.bene-row:first-of-type { border-top:none; padding-top:0; }
.bene-row .ck { width:18px; height:18px; border-radius:50%; background:var(--ok-soft); border:1px solid rgba(52,211,153,.25); color:var(--ok); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; font-size:10px; }
.bene-row .t { font-size:12.5px; font-weight:800; margin-bottom:3px; color:var(--text); }
.bene-row .v { font-size:11px; color:var(--text-muted); line-height:1.55; }
.pop-item { display:flex; gap:10px; padding:9px 0; border-top:1px solid var(--line); }
.pop-item:first-of-type { border-top:none; padding-top:0; }
.pop-item .rank { width:19px; height:19px; border-radius:6px; background:var(--surface-3); color:var(--text-muted); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pop-item .t { font-size:12px; font-weight:600; line-height:1.4; margin-bottom:2px; color:var(--text-body); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pop-item .t:hover { color:var(--accent-text); }
.pop-item .v { font-size:10px; color:var(--text-muted); }

/* 페이지네이션 */
.pager { display:flex; justify-content:center; gap:8px; margin-top:24px; }
.pager .pg { min-width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:9px; font-size:13px; font-weight:600; color:var(--text-body); background:var(--surface); padding:0 12px; }
.pager .pg:hover { border-color:var(--line-2); color:var(--text); }
.pager .pg.on { background:var(--primary); color:#fff; border-color:var(--primary); }

/* 푸터 */
.site-foot { border-top:1px solid var(--line); padding:32px 0; text-align:center; }
.site-foot .fname { font-size:13px; font-weight:800; color:var(--accent-text); margin-bottom:6px; }
.site-foot .copy { font-size:11.5px; color:var(--text-muted); }
.site-foot .links { margin-top:10px; display:flex; gap:14px; justify-content:center; font-size:11px; color:var(--text-muted); flex-wrap:wrap; }
.site-foot .links a:hover { color:var(--accent-text); }

/* ── 글 상세 (다크) ── */
.post-single { max-width:840px; margin:0 auto; padding:32px 0 48px; }
.post-view { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:36px; }
.pv-head { border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:26px; }
.pv-cat { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--accent-text); margin-bottom:12px; }
.pv-cat-sep { color:var(--text-dim); }
.pv-title { font-size:clamp(23px,4vw,33px); font-weight:900; color:var(--text); line-height:1.3; letter-spacing:-.5px; margin-bottom:12px; }
.pv-meta { font-size:13px; color:var(--text-muted); display:flex; gap:8px; flex-wrap:wrap; }
.pv-meta .dot { opacity:.5; }
.pv-body { font-size:16px; color:var(--text-body); line-height:1.85; word-break:keep-all; }
.pv-body h2 { font-size:24px; font-weight:800; color:var(--text); margin:34px 0 14px; }
.pv-body h3 { font-size:19px; font-weight:800; color:var(--text); margin:26px 0 10px; }
.pv-body p { margin:0 0 18px; }
.pv-body a { color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }
.pv-body img { border-radius:var(--radius-sm); margin:20px 0; }
.pv-body ul, .pv-body ol { margin:0 0 18px 22px; }
.pv-body li { margin-bottom:8px; }
.pv-body blockquote { border-left:4px solid var(--primary); background:var(--surface-2); padding:14px 20px; margin:20px 0; border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--text-muted); }
.pv-body pre { background:#08080a; color:#e2e8f0; padding:18px; border-radius:var(--radius-sm); overflow-x:auto; margin:20px 0; font-size:14px; border:1px solid var(--line); }
.pv-body :not(pre) > code { background:var(--primary-soft); color:var(--accent-text); padding:2px 7px; border-radius:5px; font-size:.9em; }
.pv-body table { width:100%; border-collapse:collapse; margin:20px 0; font-size:14px; }
.pv-body th, .pv-body td { border:1px solid var(--line-2); padding:10px 13px; text-align:left; }
.pv-body th { background:var(--surface-2); color:var(--text); }
.pv-body .img-grid { display:grid; gap:8px; margin:20px 0; }
.pv-body .img-grid img { margin:0; width:100%; height:100%; object-fit:cover; }
.pv-body .img-grid.g2, .pv-body .img-grid.g4 { grid-template-columns:1fr 1fr; }
.pv-body .img-grid.g3 { grid-template-columns:1fr 1fr 1fr; }
.toc { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 22px; margin-bottom:26px; }
.toc-title { font-size:14px; font-weight:800; color:var(--text); margin-bottom:10px; }
.toc-list { list-style:none; }
.toc-item { margin:4px 0; }
.toc-item a { font-size:14px; color:var(--text-muted); }
.toc-item a:hover { color:var(--accent-text); }
.toc-h3 { padding-left:16px; }
.pv-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.pv-tag { font-size:13px; padding:6px 14px; background:var(--surface-2); border:1px solid var(--line); border-radius:50px; color:var(--text-body); }
.pv-tag:hover { border-color:var(--primary); color:var(--accent-text); }
.share-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
.share-label { font-size:13px; font-weight:700; color:var(--text-muted); }
.share-btn { border:1px solid var(--line); background:var(--surface-2); border-radius:50px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; color:var(--text-body); }
.share-btn:hover { border-color:var(--line-2); color:var(--text); }
.pv-foot { margin-top:24px; }
.back-link { font-size:14px; font-weight:700; color:var(--accent-text); }
.post-nav { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; }
.post-nav-item { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px; }
.post-nav-item:hover { border-color:var(--line-2); }
.post-nav-item.next { text-align:right; }
.post-nav-label { font-size:12px; color:var(--accent-text); font-weight:700; margin-bottom:6px; }
.post-nav-title { font-size:15px; font-weight:700; color:var(--text); }
.related-posts { margin-top:34px; }
.related-title { font-size:18px; font-weight:800; color:var(--text); margin-bottom:16px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.related-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.related-thumb { width:100%; aspect-ratio:16/10; object-fit:cover; }
.related-thumb-empty { display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; background:var(--surface-2); font-size:28px; }
.related-body { padding:14px; }
.related-body a { font-size:14px; font-weight:700; color:var(--text); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#read-progress { position:fixed; top:0; left:0; height:3px; width:0; background:var(--primary); z-index:100; transition:width .1s; }
#scroll-top { position:fixed; right:24px; bottom:24px; width:46px; height:46px; border-radius:50%; border:none; background:var(--primary); color:#fff; font-size:20px; cursor:pointer; opacity:0; visibility:hidden; transition:all .25s; z-index:60; }
#scroll-top.visible { opacity:1; visibility:visible; }

/* 404 */
.notfound { max-width:600px; margin:0 auto; text-align:center; padding:100px 24px; }
.notfound h1 { font-size:64px; font-weight:900; color:var(--primary); }
.notfound p { font-size:16px; color:var(--text-muted); margin:14px 0 26px; }
.notfound a { display:inline-block; padding:12px 28px; background:var(--primary); color:#fff; border-radius:50px; font-weight:700; }

/* ── 댓글 (다크) ── */
.comments { margin-top:30px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.cmt-title { font-size:19px; font-weight:800; color:var(--text); margin-bottom:20px; }
.cmt-count { color:var(--accent-text); }
.cmt-form { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; margin-bottom:24px; }
.cmt-form-top { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.cmt-in { width:100%; min-width:0; padding:10px 12px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); color:var(--text); font-size:14px; font-family:inherit; }
.cmt-in:focus { outline:none; border-color:var(--primary); }
.cmt-ta { width:100%; min-height:80px; resize:vertical; padding:11px 13px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); color:var(--text); font-size:14.5px; line-height:1.6; font-family:inherit; }
.cmt-ta:focus { outline:none; border-color:var(--primary); }
.cmt-form-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.cmt-hint { font-size:12px; color:var(--text-muted); }
.cmt-submit { padding:9px 22px; background:var(--primary); color:#fff; border:none; border-radius:50px; font-size:14px; font-weight:700; cursor:pointer; flex-shrink:0; }
.cmt-submit:disabled { opacity:.6; cursor:default; }
.cmt-list { display:flex; flex-direction:column; gap:18px; }
.cmt-empty { text-align:center; color:var(--text-muted); padding:30px 0; font-size:14px; }
.cmt-thread { border-bottom:1px solid var(--line); padding-bottom:18px; }
.cmt-thread:last-child { border-bottom:none; padding-bottom:0; }
.cmt-item { display:flex; gap:12px; }
.cmt-avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:16px; }
.cmt-main { flex:1; min-width:0; }
.cmt-meta { display:flex; align-items:center; gap:9px; margin-bottom:5px; }
.cmt-author { font-weight:700; color:var(--text); font-size:14.5px; }
.cmt-time { font-size:12px; color:var(--text-muted); }
.cmt-text { font-size:14.5px; color:var(--text-body); line-height:1.65; word-break:break-word; }
.cmt-actions { margin-top:7px; display:flex; gap:12px; }
.cmt-actions button { background:none; border:none; padding:0; font-size:12.5px; color:var(--text-muted); cursor:pointer; font-weight:600; }
.cmt-actions button:hover { color:var(--accent-text); }
.cmt-children { margin-top:16px; margin-left:30px; display:flex; flex-direction:column; gap:16px; }
.cmt-item.is-reply .cmt-avatar { width:32px; height:32px; font-size:14px; }

/* ── 반응형 ── */
@media (max-width:900px) {
  .layout { grid-template-columns:1fr; gap:22px; }
  .layout aside { position:static; flex-direction:row; flex-wrap:wrap; }
  .layout aside .card { flex:1; min-width:250px; }
  .nav { display:none; }
  .hero { padding:26px; } .hero .cols { grid-template-columns:1fr; } .hero h1 { font-size:24px; }
  .prob, .mech, .auth, .cta { padding:24px; }
  /* 규칙5: 3열이 전부 1열로 무너져 세로 과다 → 모바일에서도 2열 유지(압축) */
  .prob .cards, .mech .metrics, .auth .grid { grid-template-columns:1fr 1fr; }
  .mech .cols, .cta .cols { grid-template-columns:1fr; }
  .techs { grid-template-columns:1fr 1fr; }
  .case { flex-direction:column; } .case .img { width:100%; }
  .cta .scales { grid-template-columns:1fr; }
  .related-grid { grid-template-columns:1fr 1fr; }
  .post-view { padding:24px; }
}
@media (max-width:600px) {
  .layout aside { flex-direction:column; }
  .simbar { flex-direction:column; align-items:flex-start; }
  .hero h1 { font-size:21px; }
  .related-grid, .post-nav { grid-template-columns:1fr; }
  .cmt-form-top { grid-template-columns:1fr; }
  .comments { padding:18px 16px; } .cmt-children { margin-left:16px; }
}

/* 모바일 가로 스크롤(깨짐) 방지 — 이 폭에선 사이드바 static */
@media (max-width:900px){ html, body { overflow-x:hidden; } }

/* 규칙3: 카드 기본 옅은 그림자 + 다크용 밝은 회색 테두리 */
.tpost, .prob .pc, .mech .m, .auth .a, .card, .case, .spec { box-shadow:0 1px 3px rgba(0,0,0,.28); }
.tpost, .prob .pc, .auth .a { border-color:var(--line-2); }
/* 규칙5: 2열 카드 여백 축소(세로 압축) + 극소형만 1열 */
@media (max-width:600px){
  .prob .pc { padding:16px; } .prob .pc .num { font-size:34px; }
  .mech .m { padding:11px; } .mech .m .val { font-size:15px; }
  .auth .a { padding:12px; } .tpost { padding:16px; }
}
@media (max-width:420px){ .prob .cards, .auth .grid, .techs { grid-template-columns:1fr; } }

/* ── 헤더 모바일: 제목/부제/검색 겹침·삐뚤 방지 ── */
@media (max-width:820px){
  .site-head .inner { gap:12px; }
  .brand .sub { display:none; }          /* 긴 영문 부제 숨김 */
  .brand span br { display:none; }        /* name 아래 빈 줄 제거 */
  .brand .name { font-size:16px; }
  .brand .logo { width:38px; height:38px; font-size:18px; }
  .search input { width:130px; }
  .head-right { gap:8px; }
  .nav-mobile-toggle { display:block; }   /* 햄버거 표시 */
  /* 카테고리 네비를 햄버거 드롭다운으로 */
  .nav { position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; gap:2px;
         background:var(--surface); border-bottom:1px solid var(--line-2); padding:12px 20px; margin:0; z-index:40; }
  .nav.open { display:flex; }
  .nav a { padding:9px 0; }
}
@media (max-width:480px){
  .search { display:none; }               /* 초소형: 검색 숨김(햄버거·색톤만) */
  .brand .name { font-size:15px; }
  .theme-picker select { padding:8px 26px 8px 26px; font-size:12px; }
}