:root{
  --bg:#f5f6f9;
  --surface:#ffffff;
  --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%);
  --side:#13151c;
  --side-2:#1c1f28;
  --side-line:#282c37;
  --ok:#10b981;
  --ok-soft:#e7f8f1;
  --warn:#f59e0b;
  --warn-soft:#fef4e2;
  --bad:#f43f5e;
  --bad-soft:#fdecef;
  --gold:#e0912f;
  --gold-soft:#fdf3e2;
  --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);
  --r:16px;
}
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;
  --side:#0b0d11;
  --side-2:#171a21;
  --side-line:#282c37;
  --ok-soft:#12241d;--warn-soft:#2a2113;--bad-soft:#2a161b;--gold-soft:#2a2214;
  --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;
}
/* 다크: 하드코딩된 밝은 표면 보정 */
html[data-theme="dark"] form.search,
html[data-theme="dark"] table.key,
html[data-theme="dark"] .mode-btn.active,
html[data-theme="dark"] .rel-chip,
html[data-theme="dark"] .qc,
html[data-theme="dark"] .pt-tile,
html[data-theme="dark"] .tb-btn,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .ac-box,
html[data-theme="dark"] .theme-toggle{background:var(--surface)}
html[data-theme="dark"] table.key thead th,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .ad-ph,
html[data-theme="dark"] .aff-card,
html[data-theme="dark"] .tag-result,
html[data-theme="dark"] .info .tip,
html[data-theme="dark"] .mode-toggle{background:var(--surface-2)}
html[data-theme="dark"] .ratio-split,
html[data-theme="dark"] .gauge span{background:#2b303b}
html[data-theme="dark"] .info p,
html[data-theme="dark"] .feat li,
html[data-theme="dark"] td.td-keyword,
html[data-theme="dark"] .aff-side .aff-title{color:var(--ink)}
html[data-theme="dark"] .footer-about p,
html[data-theme="dark"] .info h3{color:var(--muted)}
html[data-theme="dark"] .info h3{color:#a5b4fc}
html[data-theme="dark"] tr:hover td{background:rgba(99,102,241,.08)}
html[data-theme="dark"] .rk.E{background:#3a4152}
html[data-theme="dark"] .fav-chip{background:#2a2214;border-color:#4a3d1e;color:#e6c47a}
html[data-theme="dark"] .qc,
html[data-theme="dark"] .rel-chip,
html[data-theme="dark"] .tb-btn{color:var(--ink)}
html[data-theme="dark"] .mode-btn.active,
html[data-theme="dark"] .tb-btn.active{color:#a5b4fc}
html[data-theme="dark"] .mode-btn{color:var(--muted)}
html[data-theme="dark"] .rel-chip:hover,
html[data-theme="dark"] .qc:hover{color:#c7d2fe}
html[data-theme="dark"] .human-check{color:var(--muted)}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Segoe UI','Malgun Gothic',sans-serif;
  background:var(--bg);color:var(--ink);display:flex;min-height:100vh;
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;
}
h1,h2,h3{letter-spacing:-.02em}
a{color:inherit}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.hidden{display:none!important}
.na{color:var(--faint)}

/* ===== 사이드바 ===== */
.sidebar{
  width:256px;flex:0 0 256px;background:var(--side);color:#c3c8d4;
  padding:18px 14px 40px;position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;
}
.brand-link{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;margin-bottom:6px;padding:4px}
.brand-logo{width:38px;height:38px;border-radius:11px;box-shadow:0 6px 18px rgba(79,70,229,.4)}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-text strong{font-size:15px;font-weight:800}
.brand-text span{font-size:11px;color:#8a90a0;letter-spacing:0}

.menu{display:flex;flex-direction:column;margin-top:8px}
.menu-group{font-size:10.5px;color:#666d80;text-transform:uppercase;letter-spacing:.8px;font-weight:700;margin:16px 8px 6px}
.menu a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:#cbd0dc;text-decoration:none;font-size:13.5px;font-weight:500;transition:background .15s,color .15s}
.menu a .ic{width:17px;height:17px;color:#8991a3}
.menu a:hover{background:var(--side-2);color:#fff}
.menu a:hover .ic{color:#c7cbff}
.menu a.menu-active{background:var(--grad);color:#fff;font-weight:700;box-shadow:0 6px 16px rgba(67,56,202,.4)}
.menu a.menu-active .ic{color:#fff}
.tag-new{font-size:9px;background:#ef4444;color:#fff;padding:1px 5px;border-radius:8px;font-style:normal;margin-left:auto;font-weight:700}

.side-banner{margin-top:14px;padding:15px;border-radius:14px;background:var(--side-2);border:1px solid var(--side-line)}
.side-banner .badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#c7cbff;font-weight:600}
.side-banner .badge .ic{width:14px;height:14px}
.side-banner strong{display:block;color:#fff;font-size:15px;margin:8px 0 5px;font-weight:800}
.side-banner p{margin:2px 0 12px;font-size:12px;color:#9aa1b3}
.side-banner ul{margin:8px 0 12px;padding:0;list-style:none;font-size:12px;color:#b3b9c9}
.side-banner ul li{display:flex;align-items:center;gap:7px;margin:5px 0}
.side-banner ul li .ic{width:13px;height:13px;color:var(--ok);stroke-width:2.5}
.side-cta{display:inline-block;font-size:12.5px;color:#fff;background:rgba(99,102,241,.18);border:1px solid rgba(129,140,248,.4);padding:8px 13px;border-radius:9px;font-weight:700;cursor:pointer;transition:background .15s}
.side-cta:hover{background:rgba(99,102,241,.32)}

/* ===== 본문 ===== */
.wrap{flex:1;min-width:0;display:flex;justify-content:center}
.content{width:100%;max-width:1000px;padding:28px 30px 70px}

.alert{display:flex;align-items:center;gap:10px;padding:12px 15px;border-radius:12px;margin-bottom:18px;font-size:13px;font-weight:500}
.alert .ic{width:18px;height:18px}
.alert-demo{background:var(--primary-soft);border:1px solid #d7dcff;color:var(--primary-ink)}
.alert-demo span{flex:1}
.alert-x{flex:none;border:none;background:transparent;color:inherit;cursor:pointer;opacity:.6;padding:2px;border-radius:6px;display:flex}
.alert-x:hover{opacity:1;background:rgba(67,56,202,.08)}
.alert-x .ic{width:16px;height:16px}

/* ===== Hero ===== */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow);text-align:center}
.hero-title{margin:0;font-size:26px;font-weight:800}
.hero-sub{margin:8px 0 22px;color:var(--muted);font-size:14.5px}
form.search{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line-strong);border-radius:14px;padding:6px 6px 6px 14px;max-width:680px;margin:0 auto;transition:border .15s,box-shadow .15s}
form.search:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(79,70,229,.13)}
.search-ic{color:var(--faint);display:flex}
.search-ic .ic{width:20px;height:20px}
#keyword{flex:1;border:none;outline:none;font-size:15.5px;padding:9px 4px;background:transparent;font-family:inherit;color:var(--ink)}
#keyword::placeholder{color:#aab0bf}
#searchBtn{border:none;border-radius:10px;background:var(--grad);color:#fff;font-size:15px;font-weight:800;padding:11px 26px;cursor:pointer;white-space:nowrap;transition:filter .15s,transform .06s;font-family:inherit}
#searchBtn:hover{filter:brightness(1.07)}
#searchBtn:active{transform:translateY(1px)}
.search-hint{display:flex;align-items:center;justify-content:space-between;max-width:680px;margin:14px auto 0;gap:12px;flex-wrap:wrap}
.human-check{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;cursor:pointer}
.human-check input{accent-color:var(--primary)}
.mode-toggle{display:inline-flex;background:#eef0f4;border-radius:11px;padding:3px}
.mode-btn{border:none;background:transparent;padding:7px 15px;border-radius:8px;font-size:12.5px;font-weight:700;color:#6b7280;cursor:pointer;transition:all .15s;font-family:inherit}
.mode-btn.active{background:#fff;color:var(--primary-ink);box-shadow:0 2px 6px rgba(0,0,0,.08)}

/* ===== 빠른 검색어(최근·예시) ===== */
.quickchips{display:flex;align-items:center;flex-wrap:wrap;gap:7px;max-width:680px;margin:14px auto 0}
.qc-label{font-size:11.5px;color:var(--faint);font-weight:700;margin-right:2px}
.qc{border:1px solid var(--line-strong);background:#fff;color:#4b5262;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:16px;cursor:pointer;font-family:inherit;transition:all .12s}
.qc:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-ink)}
.qc-clear{border:none;background:transparent;color:var(--faint);font-size:11.5px;cursor:pointer;text-decoration:underline;font-family:inherit}

/* ===== 패널 공통 ===== */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin-top:20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.panel-head h2{margin:0;font-size:16px;font-weight:800}
.panel-actions{display:flex;gap:8px;flex-wrap:wrap}
.tb-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:#fff;color:#3c4250;padding:8px 13px;border-radius:10px;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .12s,border-color .12s;font-family:inherit}
.tb-btn .ic{width:15px;height:15px}
.tb-btn:hover{background:#f5f6f9;border-color:#cfd4de}
.tb-btn.danger{color:var(--bad);border-color:#f6cdd4}
.tb-btn.danger:hover{background:var(--bad-soft)}
.tb-btn.active{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-ink)}
.tb-btn.active .ic{fill:var(--gold);stroke:var(--gold)}
.rel-count,.result-count{color:var(--faint);font-weight:600;font-size:13px}

/* ===== 개요 카드 ===== */
.overview{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow);margin-top:20px}
.ov-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.ov-kw{font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ov-badges{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:800}
.pill .ic{width:13px;height:13px}
.pill-golden{background:var(--gold-soft);color:var(--gold);border:1px solid #f0d3a3}
.pill-golden .ic{fill:var(--gold);stroke:var(--gold)}
.pill-comp.low{background:var(--ok-soft);color:#0d8f68}
.pill-comp.mid{background:var(--warn-soft);color:#c77f0a}
.pill-comp.high{background:var(--bad-soft);color:#d83a54}
.pill-comp.none{background:#eef0f4;color:var(--muted)}
.ov-reason{color:var(--muted);font-size:13px;margin-top:11px;max-width:520px}
.ov-ring{flex:none;text-align:center}
.ov-ring svg{display:block}
.ov-ring text{fill:var(--ink)}
html[data-theme="dark"] .ov-ring circle:first-child{stroke:#2b303b}
.ov-ring .ring-label{font-size:11px;color:var(--muted);margin-top:2px;font-weight:600}

.ov-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:20px}
.stat{background:#f8f9fb;border:1px solid var(--line);border-radius:13px;padding:13px 14px}
.stat .label{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:5px}
.stat .value{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.stat .value small{font-size:12px;color:var(--faint);font-weight:600;margin-left:2px}
.stat.accent{background:var(--primary-soft);border-color:#dde1ff}
.stat.accent .value{color:var(--primary-ink)}

.ov-charts{display:grid;grid-template-columns:1.1fr 1fr 1.4fr;gap:12px;margin-top:14px}
.mini{border:1px solid var(--line);border-radius:13px;padding:13px 15px}
.mini .mini-t{font-size:11.5px;color:var(--muted);font-weight:700;margin-bottom:10px;display:flex;justify-content:space-between}
/* PC/모바일 비율 바 */
.ratio-split{height:12px;border-radius:6px;overflow:hidden;display:flex;background:#eef0f4}
.ratio-split .pc{background:#818cf8}.ratio-split .mo{background:#34d399}
.ratio-legend{display:flex;justify-content:space-between;font-size:11.5px;margin-top:9px;color:var(--muted)}
.ratio-legend b{color:var(--ink)}
.dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle}
.dot.pc{background:#818cf8}.dot.mo{background:#34d399}
/* 경쟁 게이지 */
.gauge{display:flex;gap:5px;height:12px}
.gauge span{flex:1;border-radius:4px;background:#eef0f4}
.gauge.low span:nth-child(1){background:var(--ok)}
.gauge.mid span:nth-child(1),.gauge.mid span:nth-child(2){background:var(--warn)}
.gauge.high span{background:var(--bad)}
.gauge-cap{font-size:11.5px;margin-top:9px;color:var(--muted)}
.gauge-cap b{color:var(--ink)}
/* 트렌드 스파크라인 */
.spark{width:100%;height:44px;display:block}
.spark-cap{font-size:11px;color:var(--faint);margin-top:6px}

/* ===== 결과 테이블 ===== */
.table-scroll{overflow-x:auto;border-radius:12px;border:1px solid var(--line)}
table.key{width:100%;border-collapse:collapse;background:#fff;font-size:13px}
table.key th,table.key td{padding:12px 12px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
table.key tbody tr:last-child td{border-bottom:none}
table.key thead th{background:#fafbfc;color:#59606f;font-weight:700;font-size:12px}
.col-keyword{text-align:left!important}
td.td-keyword{text-align:left;font-weight:700;cursor:pointer}
td.td-keyword:hover{color:var(--primary-ink)}
.kw-cell{display:flex;align-items:center;gap:7px}
.kw-golden{color:var(--gold);flex:none}
.kw-golden .ic{width:15px;height:15px;fill:var(--gold);stroke:var(--gold)}
.col-del{width:36px}
.del-btn{display:inline-flex;cursor:pointer;color:#cbd0da;border-radius:6px;padding:2px}
.del-btn .ic{width:15px;height:15px}
.del-btn:hover{color:var(--bad);background:var(--bad-soft)}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{background:#f0f1f5}
th.sortable.sorted{color:var(--primary-ink)}
.sar{color:#b6bcc8;font-size:10px}
th.sortable.sorted .sar{color:var(--primary-ink)}
.num{font-variant-numeric:tabular-nums}
tr.golden-row{background:linear-gradient(90deg,rgba(224,145,47,.06),transparent 60%)}
tr.golden-row:hover{background:linear-gradient(90deg,rgba(224,145,47,.1),transparent 60%)}
tr:hover td{background:rgba(79,70,229,.03)}
.comp-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:16px;font-size:11.5px;font-weight:800}
.comp-tag::before{content:"";width:7px;height:7px;border-radius:50%}
.comp-tag.low{background:var(--ok-soft);color:#0d8f68}.comp-tag.low::before{background:var(--ok)}
.comp-tag.mid{background:var(--warn-soft);color:#c77f0a}.comp-tag.mid::before{background:var(--warn)}
.comp-tag.high{background:var(--bad-soft);color:#d83a54}.comp-tag.high::before{background:var(--bad)}
.comp-tag.none{background:#eef0f4;color:var(--muted)}.comp-tag.none::before{background:var(--faint)}
.rank-badges{display:inline-flex;gap:4px;flex-wrap:wrap;justify-content:center}
.rk{width:21px;height:21px;line-height:21px;border-radius:6px;color:#fff;font-size:11px;font-weight:800;cursor:default}
.rk.N{background:#22c55e}.rk.T{background:#ff7a00}.rk.D{background:#2563eb}.rk.E{background:#8891a3}
.rk-none{color:var(--faint)}
.empty-row td{color:var(--faint);padding:38px 12px;font-size:13.5px}
tr.new-row{animation:flash 1s ease}
@keyframes flash{from{background:var(--primary-soft)}to{background:transparent}}

/* ===== 관련키워드 ===== */
.rel-box{display:flex;flex-wrap:wrap;gap:8px}
.rel-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line-strong);color:#333a49;padding:7px 12px;border-radius:10px;font-size:13px;cursor:pointer;transition:all .12s;font-weight:500}
.rel-chip:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-ink)}
.rel-chip:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.rel-chip .src{font-size:9px;font-weight:800;color:#fff;background:#22c55e;border-radius:4px;padding:1px 4px}
.rel-chip .src.D{background:#2563eb}.rel-chip .src.G{background:#f59e0b}.rel-chip .src.N{background:#22c55e}

/* ===== 개발자 패널 ===== */
.dev-panel{margin-top:20px;border:1px solid #23262f;border-radius:var(--r);overflow:hidden;background:#12141a}
.dev-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#1a1d25;color:#e5e7eb;font-size:13px;font-weight:700}
.dev-copy{background:var(--grad);border:none;color:#fff;font-weight:800;padding:7px 13px;border-radius:8px;cursor:pointer;font-size:12px;font-family:inherit}
.dev-body{padding:15px}
.dev-note{color:#c9d0dc;font-size:12.5px;background:#181b22;border:1px solid #262a34;border-radius:9px;padding:11px;margin-bottom:11px}
.dev-note code{background:#0d0f14;color:#a5b4fc;padding:2px 6px;border-radius:5px;font-size:11.5px}
#devJson{margin:0;color:#a7f3d0;font-size:12px;white-space:pre-wrap;word-break:break-word;max-height:440px;overflow:auto;font-family:'Consolas','Courier New',monospace;line-height:1.5}

/* ===== 정보 ===== */
.section-title{margin:34px 0 0;font-size:19px;font-weight:800}
.info h3{margin:18px 0 7px;font-size:15px;font-weight:800;color:var(--primary-ink)}
.info h3:first-child{margin-top:0}
.info p{margin:6px 0;color:#3a4150}
.feat{margin:6px 0;padding-left:18px}
.feat li{margin:6px 0;color:#3a4150}
.patch p{margin:5px 0;font-size:12.5px;color:var(--muted)}
.faq{margin-top:4px}
.faq details{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--surface-2);overflow:hidden}
.faq summary{cursor:pointer;padding:12px 14px;font-weight:700;font-size:13.5px;color:var(--ink);list-style:none;position:relative;padding-right:36px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:14px;top:11px;font-size:17px;color:var(--faint);transition:transform .15s}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{color:var(--primary-ink)}
.faq p{margin:0;padding:0 14px 13px;font-size:13px;color:var(--muted);line-height:1.7}
.info .tip{margin:12px 0 2px;padding:13px 15px;background:#f8f9fb;border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:10px;font-size:13px;color:#3a4150;line-height:1.6}
.info .tip b{color:var(--primary-ink)}
.footer{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}
.footer-top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.footer-about{max-width:520px}
.footer-brand{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);font-size:14.5px}
.footer-about p{margin:8px 0 0;color:var(--muted);line-height:1.6}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{color:var(--muted);text-decoration:none;font-size:12.5px}
.footer-links a:hover{color:var(--primary-ink);text-decoration:underline}
.footer-legal{margin:16px 0 0;font-size:11.5px;color:var(--faint);line-height:1.6}
.copy{margin:8px 0 0;color:var(--faint);font-size:12px}

/* ===== 모달 ===== */
.modal{position:fixed;inset:0;background:rgba(20,22,30,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;backdrop-filter:blur(2px)}
.modal-content{background:#fff;border-radius:18px;padding:26px;width:min(440px,92vw);box-shadow:var(--shadow-lg)}
.modal-title{text-align:center;font-size:20px;font-weight:800;margin:0}
.modal-desc{text-align:center;color:var(--muted);font-size:13px;margin:6px 0 18px}
.tag-row{margin:9px 0;font-size:14px;display:flex;align-items:center;gap:9px}
.tag-row code{background:#f3f4f7;padding:2px 7px;border-radius:6px;color:#5b6172;font-size:12px}
.tag-row b{background:var(--primary-soft);color:var(--primary-ink);width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;font-size:12px}
.get-tags{background:var(--grad);color:#fff;font-weight:800;padding:5px 13px;border-radius:8px;cursor:pointer;font-size:12px}
.get-tags:hover{filter:brightness(1.07)}
.tag-result{margin:14px 0 4px;border:1px solid var(--line);background:#f8f9fb;border-radius:10px;padding:11px;min-height:20px;font-size:13px;color:#3a4150;word-break:break-all;display:none}
.tag-result.show{display:block}
.modal-close{margin-top:14px;width:100%;padding:13px;border:none;border-radius:11px;background:#eef0f4;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.modal-close:hover{background:#e4e7ec}

/* ===== 세부키워드 조합기 ===== */
.mix-content{width:min(560px,94vw)}
.mix-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.mix-field{display:flex;flex-direction:column;font-size:12.5px;font-weight:700;color:var(--ink);gap:6px}
.mix-field span{font-weight:500;color:var(--faint);font-size:11px}
.mix-field textarea,#mixOut{width:100%;border:1px solid var(--line-strong);border-radius:10px;padding:10px;font-size:13.5px;font-family:inherit;background:var(--surface);color:var(--ink);resize:vertical;outline:none}
.mix-field textarea:focus,#mixOut:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.13)}
.mix-opts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0 6px;font-size:12.5px;color:var(--muted)}
.mopt{display:flex;align-items:center;gap:6px;cursor:pointer}
.mopt input{accent-color:var(--primary)}
.mix-run{margin-left:auto;border:none;background:var(--grad);color:#fff;font-weight:800;padding:9px 18px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px}
.mix-run:hover{filter:brightness(1.06)}
.mix-result-head{display:flex;align-items:center;justify-content:space-between;margin:10px 0 6px}
#mixCount{font-size:12.5px;font-weight:700;color:var(--muted)}
.mix-actions{display:flex;gap:7px}
#mixOut{margin-top:0}
.mix-stat{font-size:12px;color:var(--muted)}
#morphIn{width:100%;border:1px solid var(--line-strong);border-radius:10px;padding:10px;font-size:13.5px;font-family:inherit;background:var(--surface);color:var(--ink);resize:vertical;outline:none}
#morphIn:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.13)}
.morph-out{max-height:280px;overflow:auto}
.morph-row{display:flex;align-items:center;gap:10px;padding:5px 2px;font-size:13px}
.morph-w{width:110px;flex:none;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.morph-bar{flex:1;height:9px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.morph-bar i{display:block;height:100%;background:var(--grad);border-radius:5px}
.morph-c{flex:none;width:34px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:700}
.muhan-search{margin:2px 0 4px}
.muhan-out{display:flex;flex-wrap:wrap;gap:7px;max-height:300px;overflow:auto;padding-top:4px}
.muhan-chip{background:var(--surface-2);border:1px solid var(--line-strong);color:#3a4150;padding:6px 11px;border-radius:16px;font-size:12.5px;cursor:pointer;transition:all .12s}
.muhan-chip:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-ink)}
html[data-theme="dark"] .muhan-chip{color:var(--ink)}
.hot-out{display:flex;flex-direction:column;gap:5px;max-height:360px;overflow:auto}
.hot-loading{padding:26px 10px;text-align:center;color:var(--faint);font-size:13px;line-height:1.7}
.hot-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;cursor:pointer;font-family:inherit;transition:all .12s}
.hot-item:hover{border-color:var(--primary);background:var(--primary-soft)}
.hot-rank{flex:none;width:24px;height:24px;line-height:24px;text-align:center;border-radius:7px;background:var(--grad);color:#fff;font-size:12px;font-weight:800}
.hot-item:nth-child(n+4) .hot-rank{background:#9aa1b1;background-image:none}
.hot-kw{flex:1;font-weight:700;color:var(--ink);font-size:14px}
.hot-tr{flex:none;font-size:11.5px;color:var(--faint);font-style:normal}
.expose-form{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.expose-form input{width:100%;border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;font-size:13.5px;font-family:inherit;background:var(--surface);color:var(--ink);outline:none;margin-top:4px}
.expose-form input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.13)}
.expose-form .mix-run{margin-left:0;margin-top:4px}
.expose-out{margin-top:6px;max-height:340px;overflow:auto}
.expose-hit{padding:12px 14px;border-radius:10px;font-size:14px;margin-bottom:8px}
.expose-hit.ok{background:var(--ok-soft);color:#0d8f68}
.expose-hit.ok b{color:#0b7a58}
.expose-hit.no{background:var(--surface-2);color:var(--muted)}
.expose-meta{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.expose-meta b{color:var(--ink)}
.expose-list-t{font-size:11.5px;color:var(--faint);font-weight:700;margin-bottom:6px}
.expose-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;text-decoration:none;transition:background .12s}
.expose-row:hover{background:var(--surface-2)}
.expose-row.me{background:var(--ok-soft)}
.expose-rank{flex:none;width:22px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:800}
.expose-title{flex:1;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== 상단바/드로어 ===== */
.topbar{display:none;position:sticky;top:0;z-index:60;align-items:center;gap:12px;background:var(--side);color:#fff;padding:11px 14px}
.topbar-brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:800;font-size:15px}
.burger{width:38px;height:38px;border:none;background:transparent;display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:8px}
.burger span{display:block;height:2.5px;background:#fff;border-radius:2px;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.backdrop.show{opacity:1;pointer-events:auto}

/* ===== 스피너/토스트/툴팁 ===== */
.overlay{position:fixed;inset:0;background:rgba(245,246,249,.62);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:400}
.overlay .spinner{width:46px;height:46px;border:4px solid #dcdfe7;border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;top:24px;transform:translateX(-50%) translateY(-20px);background:#181b22;color:#fff;padding:12px 20px;border-radius:11px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:all .3s;z-index:500;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.rank-tip{position:fixed;background:#181b22;color:#f1f5f9;padding:9px 12px;border-radius:9px;font-size:12px;z-index:600;pointer-events:none;box-shadow:var(--shadow-lg);max-width:280px;line-height:1.5}
.rank-tip b{color:#a5b4fc}

/* ===== 광고 자리 ===== */
.ad-slot{display:block}
.ad-horizontal{margin:20px 0;min-height:0}
.ad-tag{display:inline-block;font-size:9.5px;letter-spacing:.5px;font-weight:700;color:#aab0bf;text-transform:uppercase}
.ad-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px dashed #d6dae2;border-radius:14px;background:#fbfbfd;color:var(--faint);padding:22px 16px;min-height:92px;text-align:center}
.ad-ph .ad-tag{color:#9aa1b1}
.ad-ph-note{font-size:11.5px;color:#aab0bf}
.ad-live{margin:20px 0}
.ad-live .ad-tag{display:block;margin-bottom:4px}
.ad-sidebar{margin-top:16px}
.ad-sidebar .ad-ph{background:rgba(255,255,255,.04);border-color:#333947;color:#8a90a0;border-radius:12px;min-height:120px}
.ad-sidebar .ad-ph .ad-tag,.ad-sidebar .ad-ph-note{color:#8a90a0}

/* ===== 제휴(사이드바) ===== */
.side-sponsored{font-size:10.5px;color:#666d80;text-transform:uppercase;letter-spacing:.8px;font-weight:700;margin:18px 8px 8px}
.affiliate-slot[data-aff="sidebar"]{display:flex;flex-direction:column;gap:10px}
.aff-side{display:block;padding:14px;border-radius:14px;background:var(--side-2);border:1px solid var(--side-line);text-decoration:none;transition:border-color .15s,transform .06s}
.aff-side:hover{border-color:#3a4152;transform:translateY(-1px)}
.aff-side .aff-badge{display:inline-block;font-size:10px;font-weight:800;color:#c7cbff;background:rgba(99,102,241,.16);border:1px solid rgba(129,140,248,.35);padding:2px 7px;border-radius:6px}
.aff-side .aff-title{display:block;color:#fff;font-size:14.5px;font-weight:800;margin:8px 0 4px}
.aff-side .aff-desc{display:block;color:#9aa1b3;font-size:12px}
.aff-side .aff-cta{display:inline-block;color:#c7cbff;font-size:12px;font-weight:700;margin-top:9px}

/* ===== 제휴(본문) ===== */
.affiliate-panel .panel-head{align-items:center}
.aff-tag{font-size:10px;font-weight:800;letter-spacing:.5px;color:#aab0bf;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:6px;padding:2px 7px}
.aff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.aff-card{display:flex;flex-direction:column;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fbfbfd;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .06s}
.aff-card:hover{border-color:var(--primary);box-shadow:0 8px 22px rgba(79,70,229,.1);transform:translateY(-2px)}
.aff-badge{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.4px;color:var(--primary-ink);background:var(--primary-soft);padding:3px 8px;border-radius:7px}
.aff-title{font-size:15px;font-weight:800;color:var(--ink);margin:11px 0 5px}
.aff-desc{font-size:12.5px;color:var(--muted);flex:1}
.aff-cta{font-size:12.5px;font-weight:800;color:var(--primary);margin-top:12px}
.aff-note{margin:14px 0 0;font-size:11.5px;color:var(--faint);line-height:1.5}
.footer-disclosure{margin:10px 0 0;font-size:11.5px;color:var(--faint)}
.footer-disclosure:empty,.aff-note:empty{display:none}

/* ===== 추천 서비스 배너(제휴 바로가기) ===== */
.pt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pt-tile{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .06s}
.pt-tile:hover{border-color:var(--primary);box-shadow:0 10px 24px rgba(16,20,40,.1);transform:translateY(-2px)}
.pt-tile:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.pt-chip{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;letter-spacing:-.5px;box-shadow:0 4px 12px rgba(0,0,0,.14);text-shadow:0 1px 1px rgba(0,0,0,.15)}
.pt-info{display:flex;flex-direction:column;min-width:0;flex:1}
.pt-name{font-size:14.5px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-cat{font-size:10.5px;color:var(--faint);font-weight:700;margin:1px 0 3px}
.pt-desc{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-go{flex:none;font-size:11.5px;font-weight:800;color:var(--faint);transition:color .15s}
.pt-tile:hover .pt-go{color:var(--primary)}

/* ===== 접근성 스킵 링크 ===== */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:900;background:var(--primary);color:#fff;padding:8px 14px;border-radius:8px;font-weight:700;font-size:13px}
.skip-link:focus{left:12px}

/* ===== 다크 모드 토글 ===== */
.theme-toggle{border:1px solid var(--line-strong);background:var(--surface);width:34px;height:34px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);transition:background .15s,border-color .15s;flex:none}
.theme-toggle:hover{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-ink)}
.theme-toggle .ic{width:17px;height:17px}
.theme-toggle .ic-moon{display:none}
html[data-theme="dark"] .theme-toggle .ic-sun{display:none}
html[data-theme="dark"] .theme-toggle .ic-moon{display:inline}
.topbar .theme-toggle{margin-left:auto;background:transparent;border-color:#333947;color:#c3c8d4}
.sidebar-theme{margin-left:auto;background:transparent;border-color:var(--side-line);color:#9aa1b3}
.sidebar-theme:hover{background:var(--side-2);color:#fff}
.brand{display:flex;align-items:center}

/* ===== 검색 자동완성 드롭다운 ===== */
.search-wrap{position:relative;max-width:680px;margin:0 auto}
.ac-box{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;top:100%;z-index:70;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow-lg);max-height:320px;overflow:auto}
.ac-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;cursor:pointer;font-size:14px;color:var(--ink)}
.ac-item .ic{width:15px;height:15px;color:var(--faint)}
.ac-item span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-item .ac-tag{font-size:10.5px;color:var(--faint);font-weight:700;font-style:normal}
.ac-item:hover,.ac-item.on{background:var(--primary-soft)}
.ac-item.on .ic,.ac-item:hover .ic{color:var(--primary)}

/* ===== 관심 키워드 ===== */
.favrow{display:flex;align-items:center;flex-wrap:wrap;gap:7px;max-width:680px;margin:10px auto 0}
.fav-chip{display:inline-flex;align-items:center;gap:6px;background:var(--gold-soft);border:1px solid #f0d3a3;color:#9a6a1a;padding:6px 8px 6px 11px;border-radius:16px;font-size:12.5px;font-weight:600;cursor:pointer}
.fav-chip:hover{background:#fbe8c8}
.fav-x{color:#c69a54;font-weight:800;cursor:pointer;padding:0 2px;border-radius:4px}
.fav-x:hover{color:#b9821f}
.fav-toggle{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);padding:4px 11px;border-radius:16px;font-size:12px;font-weight:800;cursor:pointer;transition:all .12s;font-family:inherit}
.fav-toggle .ic{width:14px;height:14px}
.fav-toggle:hover{border-color:var(--gold);color:var(--gold)}
.fav-toggle.on{background:var(--gold-soft);border-color:#f0d3a3;color:var(--gold)}
.fav-toggle.on .ic{fill:var(--gold);stroke:var(--gold)}

/* ===== 요약 바 ===== */
.summary{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 15px;margin-bottom:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;font-size:13px;color:var(--muted)}
.summary .sm b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.summary .sm-gold b{color:var(--gold)}

/* ===== 반응형 ===== */
@media (max-width:900px){
  .ov-stats{grid-template-columns:repeat(3,1fr)}
  .ov-charts{grid-template-columns:1fr}
  .aff-grid{grid-template-columns:repeat(2,1fr)}
  .pt-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  body{display:block}
  .topbar{display:flex}
  .sidebar{position:fixed;top:0;left:0;height:100vh;width:274px;z-index:50;transform:translateX(-100%);transition:transform .25s ease}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .wrap{display:block}
  .content{padding:16px;max-width:none}
  .hero{padding:22px 18px}
  form.search{flex-wrap:wrap}
  #searchBtn{width:100%;padding:12px}
  .search-hint{flex-direction:column;align-items:flex-start}
  .ov-header{flex-direction:column}
  .ov-stats{grid-template-columns:repeat(2,1fr)}
  table.key{min-width:720px}
  .aff-grid{grid-template-columns:1fr}
  .pt-grid{grid-template-columns:1fr}
  .ad-sidebar{display:none} /* 모바일 드로어(내비게이션) 안에는 광고 미노출: 정책·오클릭 방지 */
}

/* ===== 모션 최소화(접근성) ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ===== 인쇄 ===== */
@media print{
  .sidebar,.topbar,.backdrop,.ad-slot,.affiliate-panel,.affiliate-slot,.side-banner,.quickchips,.favrow,.mode-toggle,.theme-toggle,.panel-actions,.search-hint,.alert-demo,.alert-warning,#devPanel,.overlay,.toast,.rank-tip,.ac-box,.skip-link{display:none!important}
  body{display:block;background:#fff;color:#000}
  .wrap,.content{display:block;max-width:100%;padding:0}
  .panel,.overview,.hero{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  .table-scroll{overflow:visible}
  table.key{min-width:0}
  a{text-decoration:none;color:#000}
}