:root{
  --blue-50:#eef4ff;--blue-100:#dbe6ff;--blue-200:#b9ceff;--blue-400:#5a83fb;--blue-500:#2f6bf0;--blue-600:#1f56d6;
  --gray-0:#fff;--gray-50:#f7f8fa;--gray-100:#eef0f3;--gray-200:#e1e4ea;--gray-300:#cdd2db;--gray-400:#aab1bd;
  --gray-500:#868e9c;--gray-600:#5f6675;--gray-700:#434956;--gray-800:#2a2e38;--gray-900:#16181d;--gray-950:#0c0d11;
  --green-500:#1aab6b;--green-50:#e8f8f0;--amber-500:#f59e0b;--amber-50:#fef6e7;--red-500:#e5484d;--red-50:#fdeced;
  --purple-500:#7c5cfc;--purple-50:#f1edff;
  --bg-base:var(--gray-50);--bg-surface:var(--gray-0);--bg-surface-alt:var(--gray-50);--bg-pressed:var(--gray-100);
  --text-strong:var(--gray-900);--text-default:var(--gray-800);--text-subtle:var(--gray-600);--text-disabled:var(--gray-400);--text-on-brand:#fff;
  --border-subtle:var(--gray-200);--border-default:var(--gray-300);
  --brand:var(--blue-500);--brand-pressed:var(--blue-600);--brand-weak:var(--blue-50);
  --success:var(--green-500);--success-weak:var(--green-50);--warning:var(--amber-500);--warning-weak:var(--amber-50);
  --danger:var(--red-500);--danger-weak:var(--red-50);--campaign:var(--purple-500);--campaign-weak:var(--purple-50);
  --font-sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px;
  --shadow-card:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.04);
  --shadow-pop:0 8px 24px rgba(16,24,40,.12);--shadow-fab:0 6px 16px rgba(47,107,240,.32);
}
:root[data-theme="dark"]{
  --bg-base:var(--gray-950);--bg-surface:#15171c;--bg-surface-alt:#1c1f26;--bg-pressed:#23262e;
  --text-strong:#f2f4f8;--text-default:#dfe3ea;--text-subtle:#9aa3b2;--text-disabled:#5f6675;
  --border-subtle:#262a33;--border-default:#333845;
  --brand:#4c83ff;--brand-weak:#18233f;
  --success-weak:#11261d;--warning-weak:#2a2110;--danger-weak:#2c1416;--campaign-weak:#1e1838;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);background:var(--bg-base);color:var(--text-default);-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.layout{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--bg-surface);border-right:1px solid var(--border-subtle);padding:20px 16px}
.sidebar .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--text-strong);padding:0 8px 8px}
.sidebar .brand .dot{width:26px;height:26px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:15px}
.sidebar .toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px 14px;margin-bottom:6px;border-bottom:1px solid var(--border-subtle)}
.sidebar .home{font-size:12.5px;font-weight:700;color:var(--text-subtle)}
.langtoggle{display:inline-flex;border:1px solid var(--border-default);border-radius:999px;overflow:hidden}
.langtoggle a{padding:3px 11px;font-size:12px;font-weight:800;color:var(--text-subtle)}
.langtoggle a:hover{text-decoration:none}
.langtoggle a.on{background:var(--brand);color:#fff}
.toolbar .right{display:inline-flex;align-items:center;gap:8px}
.themebtn{width:30px;height:24px;border:1px solid var(--border-default);border-radius:999px;background:var(--bg-surface);cursor:pointer;font-size:12px;line-height:1;display:inline-grid;place-items:center;padding:0}
.sidebar .grp{margin-top:16px}
.sidebar .grp>p{margin:0 0 6px;padding:0 8px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-disabled)}
.sidebar a.navlink{display:block;padding:7px 10px;border-radius:var(--radius-md);font-size:14px;color:var(--text-subtle);font-weight:600}
.sidebar a.navlink:hover{background:var(--bg-surface-alt);color:var(--text-strong);text-decoration:none}
.sidebar a.navlink.active{background:var(--brand-weak);color:var(--brand)}
.content{padding:48px 56px 96px;max-width:1080px}
.content h1{font-size:34px;font-weight:800;color:var(--text-strong);margin:0 0 8px;letter-spacing:-.01em}
.content .lede{font-size:17px;color:var(--text-subtle);margin:0 0 8px}
.content h2{font-size:22px;font-weight:800;color:var(--text-strong);margin:40px 0 12px;padding-top:8px}
.content h3{font-size:16px;font-weight:800;color:var(--text-strong);margin:24px 0 8px}
.content p{margin:10px 0}
.content ul,.content ol{margin:10px 0;padding-left:22px}
.content li{margin:5px 0}
.content code{background:var(--bg-surface-alt);border:1px solid var(--border-subtle);border-radius:6px;padding:1px 6px;font-size:.88em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.content pre code{background:none;border:none;border-radius:0;padding:0;font-size:inherit;color:inherit}
.crumbs{font-size:13px;color:var(--text-disabled);font-weight:700;margin-bottom:14px}
.flow{background:var(--gray-900);color:#e7ebf3;border-radius:var(--radius-lg);padding:18px 20px;font-family:ui-monospace,Menlo,monospace;font-size:13px;line-height:1.9;overflow-x:auto;white-space:pre}
.callout{display:flex;gap:12px;background:var(--brand-weak);border:1px solid var(--blue-100);border-radius:var(--radius-md);padding:14px 16px;margin:18px 0;font-size:14.5px;color:var(--text-default)}
.callout .ico{flex:none;font-size:18px;line-height:1.4}
.callout.tip{background:var(--success-weak);border-color:#bfe9d2}
.callout.warn{background:var(--warning-weak);border-color:#f6dca0}
.pagenav{display:flex;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--border-subtle)}
.pagenav a{font-weight:700}

.preview{margin:18px 0 24px}
.preview>.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--brand);background:var(--brand-weak);border-radius:var(--radius-full);padding:4px 12px;margin-bottom:10px}
.device{max-width:392px;background:var(--bg-base);border:1px solid var(--border-default);border-radius:28px;box-shadow:var(--shadow-pop);overflow:hidden}
.device-notch{height:26px;display:flex;align-items:center;justify-content:center}
.device-notch::after{content:"";width:96px;height:6px;border-radius:6px;background:var(--gray-300)}
.device-header{display:flex;align-items:center;justify-content:space-between;padding:6px 18px 8px}
.device-header h4{font-size:22px;font-weight:800;color:var(--text-strong);margin:0}
.device-body{padding:4px 16px 18px}
.device-tabbar{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--border-subtle);background:var(--bg-surface)}
.device-tabbar span{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 10px;font-size:10px;font-weight:700;color:var(--text-subtle)}
.device-tabbar span.on{color:var(--brand)}
.device-tabbar .t-ico{font-size:17px}
i[data-lucide]{display:inline-flex;align-items:center;justify-content:center;line-height:0;vertical-align:-.15em;font-size:inherit}
svg.licon{width:1em;height:1em;display:block;flex:none}
.themebtn{font-size:15px}
.preview>.tag i[data-lucide]{font-size:13px}
.tile .ti i[data-lucide]{font-size:inherit}

.card{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:16px}
.muted{color:var(--text-subtle)}
.ttl{font-weight:800;color:var(--text-strong)}
.badge{display:inline-block;font-size:11px;font-weight:800;border-radius:var(--radius-full);padding:2px 8px}
.b-brand{background:var(--brand-weak);color:var(--brand)}
.b-campaign{background:var(--campaign-weak);color:var(--campaign)}
.b-warning{background:var(--warning-weak);color:var(--warning)}
.b-success{background:var(--success-weak);color:var(--success)}
.b-danger{background:var(--danger-weak);color:var(--danger)}
.b-muted{background:var(--bg-surface-alt);color:var(--text-subtle)}
.actioncard{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;display:flex;margin-bottom:10px}
.actioncard .bar{width:4px;flex:none}
.actioncard.t-default .bar{background:var(--border-default)}
.actioncard.t-hot .bar{background:var(--brand)}
.actioncard.t-risk .bar{background:var(--danger)}
.actioncard .body{flex:1;min-width:0;padding:14px}
.actioncard .head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.actioncard .subj{font-size:12px;color:var(--text-subtle)}
.actioncard .at{font-weight:800;color:var(--text-strong);font-size:15px;line-height:1.35}
.actioncard .reason{margin:5px 0 0;font-size:13px;color:var(--text-subtle)}
.actioncard .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn{height:36px;padding:0 16px;border-radius:var(--radius-md);border:none;background:var(--brand);color:var(--text-on-brand);font-weight:700;font-size:13px;display:inline-flex;align-items:center;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid var(--border-default);color:var(--text-default)}
.btn.block{width:100%;justify-content:center;height:44px}
.avatar{width:40px;height:40px;flex:none;border-radius:var(--radius-full);background:var(--brand-weak);color:var(--brand);font-weight:700;font-size:17px;display:inline-flex;align-items:center;justify-content:center}
.input{height:44px;border-radius:var(--radius-md);border:1px solid var(--border-default);padding:0 14px;font-size:15px;background:var(--bg-surface);color:var(--text-default);display:flex;align-items:center;width:100%}
.input.ph{color:var(--text-disabled)}
.chiprow{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin:10px 0}
.chip{flex:none;height:34px;padding:0 14px;border-radius:var(--radius-full);border:1px solid var(--border-default);background:transparent;color:var(--text-subtle);font-weight:700;font-size:13px;display:inline-flex;align-items:center;white-space:nowrap}
.chip.on{border-color:var(--brand);background:var(--brand-weak);color:var(--brand)}
.metrics{display:grid;gap:8px}
.metrics.c3{grid-template-columns:repeat(3,1fr)}
.metrics.c2{grid-template-columns:1fr 1fr}
.metric{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:12px 10px;text-align:center}
.metric .v{font-size:22px;font-weight:800;color:var(--text-strong);line-height:1.1;margin-top:4px}
.metric .v.brand{color:var(--brand)}
.metric .v.risk{color:var(--danger)}
.metric .l{font-size:11px;color:var(--text-subtle);margin-top:2px}
.row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--border-subtle)}
.row .nm{font-weight:600;color:var(--text-strong);font-size:16px}
.row .sub{font-size:13px;color:var(--text-subtle)}
.row .lp{font-size:12px;color:var(--brand);font-weight:600}
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bar-row .bl{width:54px;font-size:13px;color:var(--text-subtle)}
.bar-track{flex:1;height:16px;background:var(--bg-surface-alt);border-radius:var(--radius-sm);overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--brand)}
.bar-row .bn{width:32px;text-align:right;font-weight:700;color:var(--text-strong)}
.sec-h{font-size:14px;font-weight:800;color:var(--text-subtle);margin:14px 0 8px}
.kv{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid var(--border-subtle)}
.kv:first-of-type{border-top:none}
.guide-strip{background:var(--bg-surface-alt);border:1px dashed var(--border-default);color:var(--text-subtle);border-radius:var(--radius-md);padding:10px 12px;font-size:13px;margin:10px 0}
.progress{height:8px;background:var(--bg-surface);border-radius:var(--radius-full);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--brand)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{background:var(--bg-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:12px 6px;text-align:center;font-size:11px;font-weight:700;color:var(--text-default)}
.tile .ti{font-size:20px;display:block;margin-bottom:4px}
.fakefab{display:inline-flex;align-items:center;gap:5px;height:48px;padding:0 18px;border-radius:var(--radius-full);background:var(--brand);color:#fff;font-weight:800;font-size:15px;box-shadow:var(--shadow-fab);float:right;margin-top:8px}
.seg{display:flex;background:var(--bg-surface-alt);border-radius:var(--radius-md);padding:3px;gap:3px;margin-bottom:12px}
.seg span{flex:1;text-align:center;padding:8px;border-radius:9px;font-size:13px;font-weight:700;color:var(--text-subtle)}
.seg span.on{background:var(--bg-surface);color:var(--text-strong);box-shadow:var(--shadow-card)}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;color:var(--text-subtle);margin-bottom:6px}
.toggle{width:40px;height:24px;border-radius:999px;background:var(--brand);position:relative;flex:none}
.toggle::after{content:"";position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff}
.toggle.off{background:var(--gray-300)}
.toggle.off::after{right:auto;left:3px}

.searchbtn{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 16px);margin:0 8px 4px;padding:8px 10px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface-alt);color:var(--text-subtle);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.searchbtn:hover{background:var(--bg-pressed)}
.searchbtn kbd{font:inherit;font-size:11px;font-weight:800;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;padding:1px 6px;color:var(--text-subtle)}
.sm-overlay{position:fixed;inset:0;background:rgba(16,24,40,.45);display:none;align-items:flex-start;justify-content:center;z-index:500;padding:14vh 16px 16px}
.sm-overlay.open{display:flex}
.sm-box{width:100%;max-width:620px;background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.sm-inp{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-subtle)}
.sm-inp span{font-size:18px;color:var(--text-subtle)}
.sm-inp input{flex:1;border:none;outline:none;font-size:16px;background:transparent;color:var(--text-strong);font-family:inherit}
.sm-results{overflow-y:auto;padding:8px}
.sm-item{display:block;padding:10px 12px;border-radius:var(--radius-md);cursor:pointer}
.sm-item:hover,.sm-item.active{background:var(--brand-weak)}
.sm-item .st{font-weight:800;color:var(--text-strong);font-size:14px}
.sm-item .sc{font-size:12px;color:var(--text-disabled);font-weight:700;margin-top:1px}
.sm-item .sx{font-size:12.5px;color:var(--text-subtle);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-item mark{background:var(--warning-weak);color:var(--text-strong);border-radius:3px;padding:0 1px}
.sm-empty{padding:24px;text-align:center;color:var(--text-disabled);font-size:14px}
.sm-foot{display:flex;gap:14px;padding:8px 14px;border-top:1px solid var(--border-subtle);font-size:11px;color:var(--text-disabled);font-weight:700}
.sm-foot kbd{font:inherit;background:var(--bg-surface-alt);border:1px solid var(--border-default);border-radius:4px;padding:0 5px}

@media(max-width:880px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid var(--border-subtle)}
  .content{padding:32px 22px 80px}
}