/* 추천 검색어 + 인기 검색어. 사이트 색은 --kw-accent 등으로 덮어쓴다(없으면 기본값). 밑줄 없음, 360px 넘침 없음. */
:root {
  --kw-accent: #1f5fbf;
  --kw-ink: #1d2330;
  --kw-sub: #5b6474;
  --kw-bg: #fff;
  --kw-soft: #f1f4f9;
  --kw-line: #dfe3ea;
  --kw-up: #c2410c;
  --kw-down: #3b5ba9;
  --kw-radius: 8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kw-scheme-auto {
    --kw-ink: #e8ebf0; --kw-sub: #aab2bf; --kw-bg: #1c2027; --kw-soft: #252b34; --kw-line: #333a45;
  }
}

/* ---- 추천 검색어 상자 ---- */
.kw-suggest {
  position: absolute; left: 0; top: 0; z-index: 1000; box-sizing: border-box;
  background: var(--kw-bg); border: 1px solid var(--kw-line); border-radius: var(--kw-radius);
  box-shadow: 0 6px 18px rgba(20, 28, 40, .12); padding: 4px 0; max-height: min(60vh, 420px); overflow-y: auto;
  text-align: left; font-size: 15px; line-height: 1.4;
}
.kw-suggest[hidden] { display: none; }
.kw-opt {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  color: var(--kw-ink); text-decoration: none; cursor: pointer;
}
.kw-opt:hover, .kw-opt.is-on { background: var(--kw-soft); text-decoration: none; }
.kw-opt .kw-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-hit { color: var(--kw-accent); font-weight: 700; }
.kw-opt .kw-k { flex: 0 0 auto; font-size: 12px; color: var(--kw-sub); background: var(--kw-soft); border-radius: 4px; padding: 2px 6px; }
.kw-opt.is-on .kw-k, .kw-opt:hover .kw-k { background: var(--kw-bg); }

/* ---- 인기 검색어 ---- */
.kw-pop { position: relative; font-size: 14px; line-height: 1.4; color: var(--kw-ink); box-sizing: border-box; }
.kw-pop *, .kw-pop *::before, .kw-pop *::after { box-sizing: border-box; }
.kw-pop a, .kw-pop a:hover { text-decoration: none; }
.kw-bar {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px;
  background: var(--kw-bg); border: 1px solid var(--kw-line); border-radius: var(--kw-radius);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.kw-bar:hover, .kw-bar:focus-visible { border-color: var(--kw-accent); }
.kw-bar:focus-visible, .kw-x:focus-visible, .kw-item:focus-visible, .kw-pager button:focus-visible { outline: 2px solid var(--kw-accent); outline-offset: 2px; }
.kw-bar-h { flex: 0 0 auto; font-weight: 700; color: var(--kw-accent); font-size: 13px; }
.kw-roll { flex: 1 1 auto; min-width: 0; height: 22px; overflow: hidden; }
.kw-roll-in { display: block; transition: transform .35s ease; }
@media (prefers-reduced-motion: reduce) { .kw-roll-in { transition: none; } }
.kw-roll-row { display: flex; align-items: center; gap: 8px; height: 22px; white-space: nowrap; }
.kw-roll-row .kw-t, .kw-item .kw-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-caret { flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--kw-sub); border-bottom: 2px solid var(--kw-sub); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.kw-pop.is-open .kw-caret { transform: rotate(-135deg) translate(-2px, -2px); }
.kw-n { flex: 0 0 18px; text-align: center; font-weight: 700; color: var(--kw-ink); font-size: 13px; }
.kw-n.kw-top { color: var(--kw-accent); }
.kw-d { flex: 0 0 auto; font-size: 11px; font-weight: 600; min-width: 28px; text-align: right; }
.kw-up { color: var(--kw-up); }
.kw-down { color: var(--kw-down); }
.kw-same { color: var(--kw-sub); }
.kw-new { color: var(--kw-up); font-size: 10px; letter-spacing: .02em; }

.kw-panel {
  position: absolute; left: 0; right: 0; top: 0; z-index: 70;
  background: var(--kw-bg); border: 1px solid var(--kw-accent); border-radius: var(--kw-radius);
  box-shadow: 0 8px 22px rgba(20, 28, 40, .14); padding: 10px 6px 8px;
}
.kw-panel[hidden] { display: none; }
.kw-panel-h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 0 8px 8px; border-bottom: 1px solid var(--kw-line); }
.kw-panel-h strong { flex: 1 1 auto; font-size: 14px; color: var(--kw-accent); white-space: nowrap; }
.kw-at { order: 3; flex: 1 0 100%; font-size: 12px; color: var(--kw-sub); white-space: nowrap; }
.kw-x { flex: 0 0 auto; min-height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--kw-soft); color: var(--kw-sub); font: inherit; font-size: 12px; cursor: pointer; }
.kw-list { list-style: none; margin: 4px 0 0; padding: 0; }
.kw-item { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; border-radius: 6px; color: var(--kw-ink); }
.kw-item:hover { background: var(--kw-soft); }
.kw-pager { display: flex; gap: 6px; padding: 8px 8px 0; border-top: 1px solid var(--kw-line); margin-top: 4px; }
.kw-pager button { flex: 1 1 0; min-height: 34px; border: 1px solid var(--kw-line); border-radius: 6px; background: var(--kw-bg); color: var(--kw-sub); font: inherit; font-size: 12px; cursor: pointer; }
.kw-pager button.is-on { border-color: var(--kw-accent); color: var(--kw-accent); font-weight: 700; }

/* 오른쪽 광고 레일 맨 위 */
.kw-in-rail { margin: 0 0 12px; width: 100%; }
/* 휴대폰: 머리말 아래 한 줄 띠 */
.kw-band-wrap { padding: 8px 16px; max-width: 100%; box-sizing: border-box; }
.kw-band-wrap[hidden] { display: none; }
@media (hover: none) { .kw-item { min-height: 44px; } }