/**
 * 마켓빅시 (BIGSEE) — keyword analysis UI (select-shop index)
 */
:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-display: "Space Grotesk", "Pretendard Variable", Pretendard, -apple-system, "Noto Sans KR",
    sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --bg: #07080c;
  --paper: #ffffff;
  --paper-2: #e7e9ec;
  --card: var(--color-white);
  --line: rgba(13, 15, 20, 0.12);
  --line-soft: rgba(13, 15, 20, 0.07);
  --text: #12141a;
  --ink: #0c0e13;
  --muted: #4b515c;
  --muted-2: #72787f;
  /* 브랜드 시그니처(메타 로고 오렌지) — 결과 패널 CTA·킥커·포커스에만 쓰이는 ‘고급 스티치’ */
  --brand: #ff7a18;
  --primary: #e56f12;
  --primary-hover: #c85f0c;
  --primary-soft: rgba(255, 122, 24, 0.1);
  --dark: #0c0e13;
  --signal: #72787f;
  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.1);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.12);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.1);
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-chip: 6px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 0 rgba(13, 15, 20, 0.04);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-back: cubic-bezier(0.34, 1.2, 0.64, 1);
  /* 플랫폼 전환 — 짧게·정교하게 (체감 ~340ms) */
  --ease-luxe: cubic-bezier(0.25, 0.1, 0.25, 1);
  --platform-switch-ms: 340ms;
  --platform-press-ms: 100ms;
  --control-h: 32px;
  --control-gap-x: 8px;
  --control-gap-y: 8px;

  /* --- Hero dark-theme primitives -----------------------------------------
     The platform-switch hero introduced a whole second (dark) palette as raw
     rgba()/hex literals scattered through the file. These are primitives
     (named by value, not by role) so nothing here changes what renders --
     just gives every literal a name and one place to find it. Folding
     near-duplicates (e.g. --color-hero-tint-a50 vs --color-black-a50) into
     fewer semantic tokens is a follow-up, visual-judgment pass. */
  --color-white: #fff;
  --color-naver: #03c75a;
  --color-white-a04: rgba(255, 255, 255, 0.04);
  --color-white-a05: rgba(255, 255, 255, 0.05);
  --color-white-a06: rgba(255, 255, 255, 0.06);
  --color-white-a07: rgba(255, 255, 255, 0.07);
  --color-white-a08: rgba(255, 255, 255, 0.08);
  --color-white-a10: rgba(255, 255, 255, 0.1);
  --color-white-a12: rgba(255, 255, 255, 0.12);
  --color-white-a14: rgba(255, 255, 255, 0.14);
  --color-white-a16: rgba(255, 255, 255, 0.16);
  --color-white-a18: rgba(255, 255, 255, 0.18);
  --color-white-a22: rgba(255, 255, 255, 0.22);
  --color-white-a25: rgba(255, 255, 255, 0.25);
  --color-white-a28: rgba(255, 255, 255, 0.28);
  --color-white-a35: rgba(255, 255, 255, 0.35);
  --color-white-a40: rgba(255, 255, 255, 0.4);
  --color-white-a42: rgba(255, 255, 255, 0.42);
  --color-white-a45: rgba(255, 255, 255, 0.45);
  --color-white-a50: rgba(255, 255, 255, 0.5);
  --color-white-a55: rgba(255, 255, 255, 0.55);
  --color-white-a58: rgba(255, 255, 255, 0.58);
  --color-white-a65: rgba(255, 255, 255, 0.65);
  --color-white-a68: rgba(255, 255, 255, 0.68);
  --color-white-a72: rgba(255, 255, 255, 0.72);
  --color-white-a78: rgba(255, 255, 255, 0.78);
  --color-white-a80: rgba(255, 255, 255, 0.8);
  --color-white-a90: rgba(255, 255, 255, 0.9);
  --color-white-a92: rgba(255, 255, 255, 0.92);
  --color-white-a94: rgba(255, 255, 255, 0.94);
  --color-black-a18: rgba(0, 0, 0, 0.18);
  --color-black-a30: rgba(0, 0, 0, 0.3);
  --color-black-a35: rgba(0, 0, 0, 0.35);
  --color-black-a38: rgba(0, 0, 0, 0.38);
  --color-black-a40: rgba(0, 0, 0, 0.4);
  --color-black-a50: rgba(0, 0, 0, 0.5);
  --color-shadow-a28: rgba(9, 12, 20, 0.28);
  --color-shadow-a34: rgba(9, 12, 20, 0.34);
  --color-hero-tint-a22: rgba(6, 8, 12, 0.22);
  --color-hero-tint-a50: rgba(6, 8, 12, 0.5);
  --color-hero-tint-a55: rgba(6, 8, 12, 0.55);
  --color-hero-tint-a72: rgba(6, 8, 12, 0.72);
  --color-hero-tint-a94: rgba(6, 8, 12, 0.94);
  /* --------------------------------------------------------------------- */
}

/* Registering --hero-accent as a <color> lets every consumer (drop-shadow, box-shadow,
   color-mix backgrounds) cross-fade smoothly when the platform switch writes a new value,
   instead of the color snapping instantly while the banner/opacity keep animating. */
@property --hero-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #03c75a;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* 스크롤바 숨김 — 스크롤은 유지 · 기록 드로어 열릴 때 레이아웃 흔들림 방지 */
html,
body,
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent;
}
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.is-muted { color: var(--muted-2); }

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  opacity: 0;
}

.app.app--ready {
  opacity: 1;
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .app,
  .app.app--ready {
    opacity: 1;
    transition: none;
  }
}

.topbar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  background: transparent;
  border-bottom: 1px solid var(--color-white-a08);
}
.topbar__center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}
.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  text-decoration: none;
  min-width: 0;
}
.admin-mode {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--color-white-a12);
  backdrop-filter: blur(10px);
}
.admin-mode__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-white-a70);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.admin-mode__btn.is-active {
  background: var(--brand, #eb6834);
  color: #111;
}
.guest-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: var(--radius-lg, 14px);
  border: 1px solid var(--line);
  background: var(--card);
}
.guest-banner[hidden],
.topbar__center[hidden] {
  display: none !important;
}
.guest-banner__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand, #eb6834);
}
.guest-banner__title {
  margin: 4px 0 0;
  font-size: 0.92rem;
  font-weight: 650;
}
.guest-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.guest-banner__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  font-size: 0.82rem;
  line-height: 1;
  font-weight: 650;
  color: var(--muted-2);
  text-decoration: none;
  white-space: nowrap;
}
.account-intent-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 14px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--radius-lg, 14px);
  border: 1px solid var(--line);
  border-left: 3px solid #ff6b6b;
  background: var(--card);
  transition: padding 0.35s ease, box-shadow 0.35s ease;
}
.account-intent-banner[hidden] {
  display: none !important;
}
.account-intent-banner[data-platform="youtube"] {
  border-left-color: #ff6b6b;
}
.account-intent-banner[data-platform="google"] {
  border-left-color: #4285f4;
}
.account-intent-banner[data-platform="instagram"] {
  border-left-color: #e1306c;
}
.account-intent-banner.is-spotlight {
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(12, 14, 19, 0.06);
}
.account-intent-banner__copy {
  flex: 1 1 220px;
  min-width: 0;
}
.account-intent-banner__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff6b6b;
}
.account-intent-banner[data-platform="google"] .account-intent-banner__kicker {
  color: #4285f4;
}
.account-intent-banner[data-platform="instagram"] .account-intent-banner__kicker {
  color: #e1306c;
}
.account-intent-banner__title {
  margin: 2px 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.account-intent-banner.is-spotlight .account-intent-banner__title {
  font-size: 1.02rem;
}
.account-intent-banner__lead {
  margin: 6px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}
.account-intent-banner__lead[hidden] {
  display: none !important;
}
.account-intent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.chart-tooltip {
  position: fixed;
  z-index: 80;
  min-width: 120px;
  max-width: calc(100vw - 24px);
  padding: 8px 10px;
  border-radius: 10px;
  background: #12151c;
  color: #f4f6fa;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.chart-tooltip strong {
  display: block;
  font-size: 0.8rem;
}
.chart-tooltip span {
  display: block;
  opacity: 0.7;
  margin-top: 2px;
}
.chart-tooltip em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-weight: 700;
  color: #ffb089;
}
.trend-hit { cursor: crosshair; }
.brand-mark__logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px var(--color-white-a14);
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  color: #f5f7fa;
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark__en {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-white-a50);
}
.topbar__brand:hover .brand-mark { color: var(--color-white); }
.topbar__brand:focus-visible {
  outline: 2px solid rgba(255, 122, 24, 0.85);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.topbar__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.account-status {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* 등급 · 남은횟수 — 뱃지 대신 한 줄 메타 텍스트 */
.account-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-white-a70);
  white-space: nowrap;
}
.account-meta__sep {
  width: 1px;
  height: 12px;
  background: var(--color-white-a16);
  flex: 0 0 auto;
}
.account-meta__tier {
  color: var(--color-white-a72);
}
.account-meta__tier[data-tier="member"] { color: #9bc7ef; }
.account-meta__tier[data-tier="pro"] { color: #7dcfab; }
.account-meta__tier[data-tier="premium"] { color: #d4b67a; }
.account-meta__tier[data-tier="subscriber"] { color: #7dcfab; }
.account-meta__tier[data-tier="admin"] { color: #ff9a5c; }
.account-meta__quota {
  color: var(--color-white-a78);
  font-variant-numeric: tabular-nums;
}
.account-meta__quota[data-state="empty"] { color: #ff9a9a; }
.account-meta__quota[data-state="ok"] { color: var(--color-white-a86); }
.account-meta__token {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: inherit;
  color: #e8c27a;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}
.account-meta__token:hover {
  text-decoration-color: color-mix(in srgb, #f0d48a 55%, transparent);
}
.account-meta__token:focus-visible {
  outline: 2px solid color-mix(in srgb, #f0d48a 70%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}
.account-meta__token[data-state="empty"] { color: var(--color-white-a45); }
.account-meta__token[data-state="ok"] { color: #f0d48a; }

/* 계정 — 이메일 한 줄 */
.account-slot {
  --account-accent: #ff7a18;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(100%, 260px);
  min-width: 0;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--color-white-a92);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}
.account-slot:hover {
  border-color: var(--color-white-a12);
  background: var(--color-white-a06);
}
.account-slot:active { background: var(--color-white-a08); }
.account-slot:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--account-accent) 80%, var(--color-white));
  outline-offset: 3px;
}
.account-slot__title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 550;
  letter-spacing: -0.015em;
  color: var(--color-white-a90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
  line-height: 1.2;
}
.account-slot__chev {
  width: 5px;
  height: 5px;
  margin-left: 1px;
  border-right: 1.5px solid var(--color-white-a40);
  border-bottom: 1.5px solid var(--color-white-a40);
  transform: rotate(-45deg);
  flex: 0 0 auto;
  opacity: 0.7;
}
.account-slot:hover .account-slot__chev { border-color: var(--color-white-a75); }
.account-slot--in .account-slot__title {
  text-transform: none;
  font-weight: 500;
  color: var(--color-white-a88);
}

.sync-chip {
  display: inline-flex; align-items: center; padding: 4px 9px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--color-white-a08);
  color: var(--color-white-a72);
  border: 1px solid var(--color-white-a16);
}
.sync-chip--live {
  background: color-mix(in srgb, var(--hero-accent, #2563eb) 18%, transparent);
  color: var(--color-white);
  border-color: transparent;
}
.sync-chip--wait { background: rgba(245, 158, 11, 0.2); color: #ffd89a; border-color: transparent; }
.sync-chip--local { background: var(--color-white-a08); color: var(--color-white-a65); }

.search-hero {
  --hero-accent: var(--color-naver);
  transition: --hero-accent 700ms var(--ease);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #07080c;
  border-bottom: 1px solid var(--color-white-a08);
  padding: 0 0 clamp(22px, 3vw, 32px);
  color: #f3f5f8;
  touch-action: pan-y;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}
.hero-media__layer {
  /* 공통 슬롯 + 플랫폼별 --hero-mark-scale로 체감 크기 보정
     (Google은 세로비 커서 섹션을 뚫고, Instagram은 캔버스 여백으로 작아 보임) */
  --hero-mark-w: clamp(320px, 58vw, 600px);
  --hero-mark-h: clamp(84px, 14.5vw, 140px);
  --hero-mark-scale: 1;
  position: absolute;
  left: 50%;
  top: 40%;
  width: var(--hero-mark-w);
  height: var(--hero-mark-h);
  max-width: min(600px, 90vw);
  display: block;
  object-fit: contain;
  object-position: center center;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 6px)) scale(calc(var(--hero-mark-scale) * 0.992));
  transition:
    opacity var(--platform-switch-ms) var(--ease-luxe),
    transform var(--platform-switch-ms) var(--ease-luxe);
  backface-visibility: hidden;
  filter:
    drop-shadow(0 0 20px color-mix(in srgb, var(--hero-accent) 28%, transparent))
    drop-shadow(0 2px 12px var(--color-black-a50));
}
.hero-media__layer.is-active {
  opacity: 0.92;
  transform: translate(-50%, -50%) scale(var(--hero-mark-scale));
  z-index: 1;
}
/* YouTube/Instagram 워드마크는 어두운 잉크 → 다크 히어로에서 밝기만 보정 */
.hero-media__layer[data-platform="youtube"] {
  --hero-mark-scale: 1.06;
  filter:
    brightness(2.05)
    drop-shadow(0 0 18px color-mix(in srgb, var(--hero-accent) 30%, transparent))
    drop-shadow(0 2px 12px var(--color-black-a50));
}
/* Google: 다른 워드마크 체감 크기에 맞춤 */
.hero-media__layer[data-platform="google"] {
  --hero-mark-scale: 1.12;
  top: 41%;
  opacity: 0;
  filter:
    drop-shadow(0 0 18px color-mix(in srgb, var(--hero-accent) 26%, transparent))
    drop-shadow(0 2px 12px var(--color-black-a50));
}
.hero-media__layer[data-platform="google"].is-active {
  opacity: 0.92;
}
/* Instagram: 워드마크 주변 여백 ~30% + 저대비 → 키우고 밝게 */
.hero-media__layer[data-platform="instagram"] {
  --hero-mark-scale: 1.48;
  top: 41%;
  filter:
    brightness(5.2)
    contrast(1.08)
    drop-shadow(0 0 20px color-mix(in srgb, var(--hero-accent) 32%, transparent))
    drop-shadow(0 2px 12px var(--color-black-a50));
}
.hero-media__layer[data-platform="instagram"].is-active {
  opacity: 0.95;
}
/* X: 투명 SVG 워드마크(검정 플레이트 제거) */
.hero-media__layer[data-platform="x"] {
  --hero-mark-scale: 1.2;
  top: 41%;
  filter:
    drop-shadow(0 0 18px color-mix(in srgb, var(--hero-accent) 28%, transparent))
    drop-shadow(0 2px 12px var(--color-black-a50));
}
.hero-media__layer[data-platform="x"].is-active {
  opacity: 0.96;
}
.hero-media__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 48% 36% at 50% 34%, var(--color-white-a07), transparent 70%),
    linear-gradient(180deg, var(--color-hero-tint-a55) 0%, var(--color-hero-tint-a72) 40%, var(--color-hero-tint-a94) 100%),
    linear-gradient(90deg, var(--color-hero-tint-a50) 0%, var(--color-hero-tint-a22) 50%, var(--color-hero-tint-a50) 100%);
}
.hero-media__accent {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse 46% 34% at 50% 30%, color-mix(in srgb, var(--hero-accent) 16%, transparent), transparent 72%),
    linear-gradient(120deg, color-mix(in srgb, var(--hero-accent) 8%, transparent), transparent 45%);
  opacity: 0.9;
  mix-blend-mode: screen;
  transition: opacity var(--platform-switch-ms) var(--ease-luxe);
}
.search-hero__watermark { display: none; }
.search-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 36px) 22px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* swipe drag-follow: JS sets transition:none + inline translateX while dragging,
     then clears the inline transition so this spring-back plays on release */
  transition: transform 260ms var(--ease-out-back);
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .search-hero__inner { transition: none; }
}
.search-hero__cover {
  margin-bottom: 22px;
  animation: hero-rise 0.7s var(--ease) 0.06s both;
  min-width: 0;
  transition:
    opacity var(--platform-switch-ms) var(--ease-luxe),
    transform var(--platform-switch-ms) var(--ease-luxe);
}
.search-hero.is-platform-changing .search-hero__cover {
  opacity: 0.42;
  transform: translateY(5px);
}
.search-hero.is-platform-changing .hero-media__accent {
  opacity: 0.45;
}
.search-hero__eyebrow {
  display: block;
  margin: 0 0 10px;
  padding-bottom: 0;
  border-bottom: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--hero-accent, var(--brand)) 55%, var(--color-white-a72));
  transition:
    color var(--platform-switch-ms) var(--ease-luxe),
    border-color var(--platform-switch-ms) var(--ease-luxe),
    opacity var(--platform-switch-ms) var(--ease-luxe);
}
.search-hero.is-platform-changing .search-hero__eyebrow {
  opacity: 0.72;
}
.search-hero__audience {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 0 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--hero-accent, var(--brand)) 28%, transparent);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: color-mix(in srgb, var(--hero-accent, var(--brand)) 42%, #fff);
}
.search-hero__headline {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.05rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: #f7f8fb;
  text-shadow: 0 1px 18px var(--color-black-a35);
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.search-hero__lead {
  margin: 0;
  max-width: 32em;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(236, 239, 244, 0.78);
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.search-hero__about {
  white-space: nowrap;
  color: color-mix(in srgb, var(--hero-accent, var(--brand)) 70%, var(--color-white));
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.search-hero__about:hover {
  color: var(--color-white);
}

.lookbook {
  --lookbook-rows: 5;
  --lookbook-row-h: 4.05rem;
  list-style: none;
  margin: 8px 0 28px;
  padding: 0;
  border-top: 1px solid var(--color-white-a14);
  /* 플랫폼 전환해도 높이 고정 (네이버 5 · 구글/인스타도 5칸) */
  min-height: calc(var(--lookbook-rows) * var(--lookbook-row-h));
  animation: hero-rise 0.75s var(--ease) 0.08s both;
}
.lookbook.is-swapping .lookbook__title,
.lookbook.is-swapping .lookbook__hint {
  opacity: 0.28;
  transform: translateY(4px);
}
.lookbook__title,
.lookbook__hint {
  transition:
    opacity 0.28s var(--ease-luxe),
    transform 0.28s var(--ease-luxe),
    color 0.28s var(--ease-luxe);
}
.lookbook__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  grid-template-rows: auto minmax(1.15em, auto);
  column-gap: 14px;
  row-gap: 2px;
  min-height: var(--lookbook-row-h);
  align-content: center;
  padding: 10px 4px 10px 12px;
  border-bottom: 1px solid var(--color-white-a10);
  cursor: default;
  transition: background 0.22s var(--ease-luxe);
}
.lookbook__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--hero-accent);
  opacity: 0;
  transition: opacity 0.22s var(--ease-luxe), background var(--platform-switch-ms) var(--ease-luxe);
}
.lookbook__item:hover::before,
.lookbook__item:focus-visible::before,
.lookbook__item.is-active::before {
  opacity: 0.85;
}
.lookbook__item:hover,
.lookbook__item:focus-visible,
.lookbook__item.is-active {
  background: var(--color-white-a06);
  outline: none;
}
.lookbook__idx {
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--color-white-a42);
  transition: color 0.25s ease;
}
.lookbook__item.is-active .lookbook__idx,
.lookbook__item:hover .lookbook__idx,
.lookbook__item:focus-visible .lookbook__idx {
  color: color-mix(in srgb, var(--hero-accent) 70%, var(--color-white));
}
.lookbook__title {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-white-a92);
}
.lookbook__hint {
  grid-column: 2;
  min-height: 1.15em;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-white-a55);
  /* 자리는 항상 잡고, 활성/호버 때만 또렷해짐 → 높이 출렁임 방지 */
  opacity: 0.38;
  transition: opacity 0.22s ease, color 0.22s ease;
}
.lookbook__item.is-active .lookbook__hint,
.lookbook__item:hover .lookbook__hint,
.lookbook__item:focus-visible .lookbook__hint {
  opacity: 1;
}

.platform-picker {
  margin: 0 0 26px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--color-white-a12);
  animation: hero-rise 0.65s var(--ease) both;
}
.platform-picker__head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.platform-picker__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-white-a45);
}
.platform-dock {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 12px 8px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, var(--color-white-a22), var(--color-white-a08) 42%, var(--color-white-a05));
  border: 1px solid var(--color-white-a28);
  box-shadow:
    0 1px 0 var(--color-white-a35) inset,
    0 -1px 0 var(--color-black-a18) inset,
    0 18px 40px var(--color-black-a38);
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  overflow: hidden;
}
.platform-switch {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  justify-items: center;
  column-gap: clamp(6px, 1.4vw, 12px);
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
.platform-switch__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 48px;
  margin: 0;
  padding: 2px 0 0;
  border: 0;
  background: transparent;
  color: var(--color-white-a92);
  cursor: pointer;
  font: inherit;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color var(--platform-press-ms) ease, transform var(--platform-press-ms) ease;
}
.platform-switch__icon {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 7.6px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #1c1e24;
  box-shadow:
    0 0.5px 0 var(--color-white-a35) inset,
    0 4px 10px var(--color-black-a35);
  transition:
    transform var(--platform-press-ms) var(--ease-luxe),
    box-shadow 0.2s var(--ease-luxe),
    filter var(--platform-press-ms) var(--ease-luxe);
  contain: layout paint;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari 라운드 클립 계단 완화 */
}
.platform-switch__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--color-white-a28), var(--color-white-a04) 36%, transparent 52%);
  pointer-events: none;
}
.platform-switch__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  image-rendering: auto;
}
.platform-switch__btn[data-platform="youtube"] .platform-switch__icon {
  background: #111;
}
/* Google app 아이콘 콘텐츠가 살짝 우측 — 중앙으로 */
.platform-switch__btn[data-platform="google"] .platform-switch__icon img {
  object-position: 46% 50%;
  transform: scale(1.06);
}
/* Instagram 글리프가 타일 안에서 작게 읽힘 → 살짝 확대 */
.platform-switch__btn[data-platform="instagram"] .platform-switch__icon img {
  transform: scale(1.16);
}
.platform-switch__btn[data-platform="x"] .platform-switch__icon {
  background: #000;
}
.platform-switch__btn[data-platform="x"] .platform-switch__icon img {
  transform: scale(1.08);
}


/* Naver raster is jagged when cover-cropped; use solid green + white N like the real app */
.platform-switch__btn[data-platform="naver"] .platform-switch__icon {
  background: var(--color-naver);
}
.platform-switch__btn[data-platform="naver"] .platform-switch__icon img {
  display: none;
}
.platform-switch__btn[data-platform="naver"] .platform-switch__icon::before {
  content: "N";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  font-family: Arial Black, "Arial Bold", Helvetica, sans-serif;
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--color-white);
  pointer-events: none;
}
.platform-switch__btn[data-platform="naver"] .platform-switch__icon::after {
  background: linear-gradient(180deg, var(--color-white-a28), transparent 48%);
}
.platform-switch__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 100%;
  min-height: 1.7rem;
}
.platform-switch__btn:hover {
  color: var(--color-white);
}
.platform-switch__btn:hover .platform-switch__icon {
  transform: translateY(-1px) scale(1.02);
}
.platform-switch__btn:active .platform-switch__icon {
  transition:
    transform var(--platform-press-ms) var(--ease-luxe),
    filter var(--platform-press-ms) var(--ease-luxe);
  transform: scale(0.97);
  filter: brightness(0.96);
}
.platform-switch__btn:focus-visible {
  outline: none;
}
.platform-switch__btn:focus-visible .platform-switch__icon {
  box-shadow:
    0 0 0 2px #07080c,
    0 0 0 3.5px color-mix(in srgb, var(--hero-accent) 75%, var(--color-white)),
    0 0.5px 0 var(--color-white-a40) inset,
    0 4px 12px var(--color-black-a40);
}
.platform-switch__btn.is-active {
  color: var(--color-white);
}
.platform-switch__btn.is-active .platform-switch__icon {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--hero-accent) 78%, var(--color-white)),
    0 1px 0 var(--color-white-a45) inset,
    0 6px 14px var(--color-black-a40);
}
.platform-switch__btn[data-status="soon"]:not(.is-active) {
  color: var(--color-white-a68);
}
.platform-switch__btn[data-status="soon"]:not(.is-active) .platform-switch__icon {
  filter: saturate(0.94) brightness(0.98);
}
.platform-switch__name {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--color-white-a94);
  text-shadow: 0 1px 2px var(--color-black-a35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.platform-switch__state {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.46rem;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--color-white-a58);
  text-shadow: 0 1px 2px var(--color-black-a30);
}
.platform-switch__btn.is-active .platform-switch__state {
  color: color-mix(in srgb, var(--hero-accent) 70%, var(--color-white));
}
.platform-switch__btn[data-status="soon"] .platform-switch__state {
  color: var(--color-white-a50);
}
.platform-switch__btn[data-status="soon"].is-active .platform-switch__state {
  color: var(--color-white-a80);
}
.search-glow:has(.search-bar.is-soon),
.search-bar.is-soon {
  opacity: 0.55;
  pointer-events: none;
}
.search-glow:has(.search-bar.is-soon) .search-glow__stars::before,
.search-glow:has(.search-bar.is-soon) .search-glow__stars::after {
  animation-play-state: paused;
}

.lookbook__item.is-soon {
  opacity: 0.55;
}
.lookbook__item.is-soon .lookbook__title::after {
  content: " SOON";
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--color-white-a40);
  margin-left: 6px;
  vertical-align: middle;
}

/* 플랫폼 독: 해당 플랫폼 섹션만 표시 */
.main[data-platform="naver"] .page-section[data-platform="youtube"],
.main[data-platform="naver"] .page-section[data-platform="google"],
.main[data-platform="naver"] .page-section[data-platform="instagram"],
.main[data-platform="naver"] .page-section[data-platform="soon"],
.main[data-platform="youtube"] .page-section[data-platform="naver"],
.main[data-platform="youtube"] .page-section[data-platform="google"],
.main[data-platform="youtube"] .page-section[data-platform="instagram"],
.main[data-platform="youtube"] .page-section[data-platform="soon"],
.main[data-platform="google"] .page-section[data-platform="naver"],
.main[data-platform="google"] .page-section[data-platform="youtube"],
.main[data-platform="google"] .page-section[data-platform="instagram"],
.main[data-platform="google"] .page-section[data-platform="soon"],
.main[data-platform="instagram"] .page-section[data-platform="naver"],
.main[data-platform="instagram"] .page-section[data-platform="youtube"],
.main[data-platform="instagram"] .page-section[data-platform="google"],
.main[data-platform="instagram"] .page-section[data-platform="soon"],
.main[data-platform="x"] .page-section[data-platform="naver"],
.main[data-platform="x"] .page-section[data-platform="youtube"],
.main[data-platform="x"] .page-section[data-platform="google"],
.main[data-platform="x"] .page-section[data-platform="instagram"] {
  display: none;
}

.main[data-platform="x"] .page-section[data-platform="soon"] {
  display: block;
}


/* —— Platform panels —— */
/* 검색창 = 우주 창 — 테두리 광원 없이, 움직이는 별빛으로 인식 */
.search-glow {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-xs);
  animation: hero-rise 0.8s var(--ease) 0.14s both;
  width: 100%;
  min-width: 0;
  isolation: isolate;
}

.search-glow__stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.search-glow__stars::before,
.search-glow__stars::after {
  content: "";
  position: absolute;
  width: 160%;
  height: 180%;
  left: -30%;
  top: -40%;
  will-change: transform, opacity;
}
.search-glow__stars::before {
  opacity: 0.9;
  background-image:
    radial-gradient(1.2px 1.2px at 6% 22%, var(--color-white-a90), transparent),
    radial-gradient(1px 1px at 12% 68%, var(--color-white-a45), transparent),
    radial-gradient(1.6px 1.6px at 19% 14%, var(--color-white), transparent),
    radial-gradient(1px 1px at 27% 52%, var(--color-white-a35), transparent),
    radial-gradient(1.3px 1.3px at 35% 34%, var(--color-white-a72), transparent),
    radial-gradient(1px 1px at 43% 76%, var(--color-white-a40), transparent),
    radial-gradient(1.7px 1.7px at 52% 18%, var(--color-white), transparent),
    radial-gradient(1px 1px at 60% 60%, var(--color-white-a50), transparent),
    radial-gradient(1.4px 1.4px at 68% 38%, var(--color-white-a80), transparent),
    radial-gradient(1px 1px at 76% 82%, var(--color-white-a28), transparent),
    radial-gradient(1.5px 1.5px at 84% 12%, var(--color-white-a90), transparent),
    radial-gradient(1px 1px at 91% 48%, var(--color-white-a45), transparent),
    radial-gradient(1.2px 1.2px at 97% 70%, var(--color-white-a65), transparent),
    radial-gradient(1px 1px at 8% 40%, var(--color-white-a30), transparent),
    radial-gradient(1.1px 1.1px at 48% 88%, var(--color-white-a55), transparent),
    radial-gradient(1px 1px at 72% 8%, var(--color-white-a40), transparent);
  animation:
    search-star-drift-a 22s linear infinite,
    search-star-twinkle 3.6s ease-in-out infinite;
}
.search-glow__stars::after {
  opacity: 0.75;
  background-image:
    radial-gradient(1px 1px at 4% 44%, var(--color-white-a50), transparent),
    radial-gradient(1.3px 1.3px at 14% 10%, var(--color-white-a80), transparent),
    radial-gradient(0.9px 0.9px at 22% 78%, var(--color-white-a40), transparent),
    radial-gradient(1.4px 1.4px at 31% 28%, var(--color-white-a90), transparent),
    radial-gradient(1px 1px at 40% 62%, var(--color-white-a35), transparent),
    radial-gradient(1.2px 1.2px at 49% 8%, var(--color-white-a68), transparent),
    radial-gradient(1px 1px at 57% 86%, var(--color-white-a45), transparent),
    radial-gradient(1.5px 1.5px at 66% 32%, var(--color-white), transparent),
    radial-gradient(1px 1px at 75% 58%, var(--color-white-a50), transparent),
    radial-gradient(1.1px 1.1px at 83% 20%, var(--color-white-a72), transparent),
    radial-gradient(0.9px 0.9px at 90% 74%, var(--color-white-a35), transparent),
    radial-gradient(1.3px 1.3px at 96% 42%, var(--color-white-a80), transparent),
    radial-gradient(1px 1px at 18% 50%, var(--color-white-a28), transparent),
    radial-gradient(1.2px 1.2px at 55% 46%, var(--color-white-a55), transparent);
  animation:
    search-star-drift-b 16s linear infinite,
    search-star-twinkle 2.8s ease-in-out 0.7s infinite reverse;
}
.search-glow:focus-within .search-glow__stars::before {
  animation-duration: 14s, 2.4s;
}
.search-glow:focus-within .search-glow__stars::after {
  animation-duration: 10s, 1.8s;
}
@keyframes search-star-drift-a {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(12%, 8%, 0); }
}
@keyframes search-star-drift-b {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-14%, -6%, 0); }
}
@keyframes search-star-twinkle {
  0%, 100% { opacity: 0.45; }
  35% { opacity: 1; }
  65% { opacity: 0.35; }
}

.search-bar {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0;
  align-items: stretch;
  color: var(--color-white-a92);
  background:
    radial-gradient(ellipse 70% 140% at 8% 50%, color-mix(in srgb, var(--hero-accent, var(--color-naver)) 14%, transparent), transparent 58%),
    radial-gradient(ellipse 90% 80% at 50% 120%, var(--color-white-a04), transparent 60%),
    linear-gradient(180deg, rgba(12, 16, 24, 0.92) 0%, rgba(7, 10, 16, 0.94) 55%, rgba(5, 7, 12, 0.96) 100%);
  border: 1px solid var(--color-white-a14);
  border-radius: var(--radius-xs);
  padding: 0;
  box-shadow:
    inset 0 1px 0 var(--color-white-a08),
    inset 0 -20px 40px var(--color-black-a30),
    0 10px 28px var(--color-black-a40);
  overflow: hidden;
  transition: box-shadow 0.25s ease, opacity 0.25s ease, border-color 0.25s ease, background 0.35s var(--ease);
}
.search-bar > :not(.search-glow__stars) {
  position: relative;
  z-index: 1;
}
.search-bar:focus-within {
  border-color: color-mix(in srgb, var(--hero-accent, var(--color-naver)) 45%, var(--color-white-a22));
  box-shadow:
    inset 0 1px 0 var(--color-white-a12),
    inset 0 -24px 48px color-mix(in srgb, var(--hero-accent, var(--color-naver)) 12%, transparent),
    0 12px 32px var(--color-black-a50);
}
.search-bar__label {
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-right: 1px solid var(--color-white-a10);
  background: linear-gradient(180deg, var(--color-white-a06), var(--color-white-a04));
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-white-a50);
  white-space: nowrap;
}
.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  font: inherit;
  font-size: 1.02rem;
  padding: 14px 14px;
  background: transparent;
  min-width: 0;
  letter-spacing: -0.01em;
  color: var(--color-white-a94);
  caret-color: var(--hero-accent, var(--color-naver));
}
.search-bar input::placeholder {
  color: var(--color-white-a35);
}
.search-bar .btn-primary {
  background: color-mix(in srgb, var(--hero-accent, var(--color-naver)) 22%, #0a0e16);
  color: var(--color-white);
  border-left: 1px solid var(--color-white-a10);
  box-shadow: inset 0 1px 0 var(--color-white-a10);
  transition: background 0.22s ease, transform 0.22s var(--ease-out-back), box-shadow 0.22s ease;
}
.search-bar .btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--hero-accent, var(--color-naver)) 72%, #0a0e16);
  box-shadow:
    inset 0 1px 0 var(--color-white-a18),
    0 0 18px color-mix(in srgb, var(--hero-accent, var(--color-naver)) 40%, transparent);
}
/* 우하단 스크롤 FAB — 화살표 + 주황 링(스크롤 진행) */
.scroll-fab {
  --fab-accent: var(--hero-accent, #ff7a18);
  --scroll-p: 0;
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 45;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--color-white);
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
  transition: transform 0.28s var(--ease), opacity 0.22s ease;
  animation: scroll-fab-in 0.55s var(--ease) 0.35s both;
}
.scroll-fab__core {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid var(--color-white-a18);
  background:
    linear-gradient(165deg, color-mix(in srgb, #2e3444 72%, transparent), color-mix(in srgb, #10131a 92%, transparent));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 var(--color-white-a16),
    0 10px 26px var(--color-black-a40);
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
  z-index: 0;
}
.scroll-fab__progress {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  transform: rotate(-90deg);
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.scroll-fab__track,
.scroll-fab__fill {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.scroll-fab__track {
  stroke: color-mix(in srgb, #fff 12%, transparent);
}
.scroll-fab__fill {
  stroke: url(#scrollFabGrad);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--brand) 55%, transparent));
}
.scroll-fab[data-scroll-complete="1"] .scroll-fab__fill {
  filter:
    drop-shadow(0 0 4px color-mix(in srgb, var(--brand) 70%, transparent))
    drop-shadow(0 0 10px color-mix(in srgb, var(--brand) 28%, transparent));
}
.scroll-fab[data-scroll-complete="1"] .scroll-fab__core {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--color-white-a18));
  box-shadow:
    inset 0 1px 0 var(--color-white-a18),
    0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent),
    0 12px 28px var(--color-black-a40);
}
.scroll-fab__icon {
  position: relative;
  z-index: 2;
  width: 14px;
  height: 14px;
  margin: 0;
  border-right: 2.5px solid var(--color-white-a90);
  border-bottom: 2.5px solid var(--color-white-a90);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.38s var(--ease), border-color 0.22s ease;
}
.scroll-fab__label {
  display: none;
}
.scroll-fab[data-mode="up"] .scroll-fab__icon {
  transform: translateY(2px) rotate(225deg);
}
.scroll-fab:hover {
  transform: translateY(-2px);
}
.scroll-fab:hover .scroll-fab__core {
  border-color: var(--color-white-a40);
  background:
    linear-gradient(165deg, color-mix(in srgb, #3a4254 78%, transparent), color-mix(in srgb, #161a24 92%, transparent));
  box-shadow:
    inset 0 1px 0 var(--color-white-a22),
    0 14px 32px var(--color-black-a50);
}
.scroll-fab:hover .scroll-fab__fill {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand) 65%, transparent));
}
.scroll-fab:hover .scroll-fab__icon {
  border-color: var(--color-white);
}
.scroll-fab:active { transform: translateY(0) scale(0.97); }
.scroll-fab:focus-visible {
  outline: 1.5px solid color-mix(in srgb, var(--brand) 60%, var(--color-white));
  outline-offset: 5px;
}
@keyframes scroll-fab-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-fab { animation: none; }
}

.platform-row {
  display: none;
}
.platform-row__label,
.platform-list,
.platform-chip,
.platform-chip__dot,
.platform-chip.is-live {
  display: none;
}
.kw-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 2px 4px 2px 10px;
  max-width: 100%;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.kw-chip:hover { border-color: color-mix(in srgb, var(--primary) 30%, transparent); background: var(--primary-soft); }
.kw-chip__label {
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 650;
  cursor: pointer;
  padding: 3px 2px;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kw-chip__label:hover { color: var(--primary-hover); }
.kw-chip__x {
  border: none;
  background: transparent;
  color: var(--muted-2);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.kw-chip__x:hover {
  color: var(--text);
  background: var(--paper-2);
}
.search-hero .kw-chip {
  border-color: var(--color-white-a18);
  background: var(--color-white-a06);
}
.search-hero .kw-chip:hover {
  border-color: color-mix(in srgb, var(--hero-accent) 45%, var(--color-white-a25));
  background: var(--color-white-a12);
}
.search-hero .kw-chip__label { color: var(--color-white-a78); }
.search-hero .kw-chip__label:hover { color: var(--color-white); }
.search-hero .kw-chip__x { color: var(--color-white-a45); }
.search-hero .kw-chip__x:hover {
  color: var(--color-white);
  background: var(--color-white-a12);
}
/* 하위 호환 — 예전 recent-chip 단독 스타일 */
.recent-chip {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: var(--radius-sm); padding: 5px 10px; font: inherit; font-size: 0.76rem;
  font-weight: 650; cursor: pointer;
}
.recent-chip:hover { border-color: color-mix(in srgb, var(--primary) 30%, transparent); color: var(--text); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: var(--radius-sm); font: inherit; font-weight: 700; cursor: pointer;
}
/* .btn의 display:inline-flex가 브라우저 기본 [hidden]{display:none}보다 우선 적용돼
   hidden=true여도 계속 보이던 문제 — 연결/해제 등 상태 버튼 동시 노출 회귀의 원인 */
.btn[hidden] { display: none !important; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm {
  min-height: var(--control-h);
  padding: 0 11px;
  font-size: 0.78rem;
  line-height: 1;
}
.btn-ghost { background: var(--paper-2); color: var(--muted); }
.btn-ghost:hover:not(:disabled) { background: #dfe1e4; color: var(--text); }
.btn-primary {
  background: var(--dark);
  color: var(--color-white);
  padding: 0 20px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border-radius: 0;
  transition: background 0.22s ease, transform 0.22s var(--ease-out-back);
}
.btn-primary:hover:not(:disabled) { background: var(--primary); }
.search-bar .btn-primary { min-height: 100%; }

/* Focus-visible audit: the hero (lookbook, platform-switch, space-launcher, search-bar)
   already had bespoke accent-ring focus states. These light-theme controls had none —
   they were falling through to each browser's own default outline, which is inconsistent
   in color/offset across browsers and doesn't read as "part of" the site. One shared ring. */
.btn:focus-visible,
.chip-btn:focus-visible,
.seg__btn:focus-visible,
.suggest-chip:focus-visible,
.filter-input:focus-visible,
.link-btn:focus-visible,
.kw-chip__label:focus-visible,
.kw-chip__x:focus-visible,
.kw-link:focus-visible,
.kw-add:focus-visible,
.cloud-word:focus-visible,
.journey__step:focus-visible,
.next-card:focus-visible,
.result-gate__link:focus-visible,
.guest-banner__link:focus-visible,
.search-hero__about:focus-visible,
.history-rail__clear:focus-visible,
.history-item__open:focus-visible,
.history-item__export:focus-visible,
.history-item__x:focus-visible,
.history-html-sample__upgrade:focus-visible,
.data-table th[data-sort]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.pricing-topbar__nav a:focus-visible,
.site-footer__nav a:focus-visible,
.legal-main a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 70%, #fff);
  outline-offset: 3px;
}
/* .admin-mode__btn lives on the dark topbar pill, not a light-theme surface —
   var(--primary) blue would have poor contrast there, so it gets its own ring. */
.admin-mode__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .search-hero__cover,
  .platform-picker,
  .lookbook,
  .search-glow,
  .search-bar,
  .scroll-fab { animation: none; }
  .lookbook__hint { transition: none; }
  .hero-media__layer,
  .hero-media__layer.is-active {
    transition: none !important;
    /* keep centering + per-platform --hero-mark-scale */
    transform: translate(-50%, -50%) scale(var(--hero-mark-scale, 1)) !important;
  }
  .hero-media__accent,
  .search-hero__cover,
  .search-hero__eyebrow,
  .lookbook__title,
  .lookbook__hint {
    transition: none !important;
    filter: none !important;
    transform: none !important;
  }
  .search-hero.is-platform-changing .search-hero__cover {
    opacity: 1;
    transform: none;
  }
  .search-hero,
  .search-hero__inner {
    transition: none;
  }
  .platform-switch__btn,
  .platform-switch__icon {
    transition: none !important;
  }
  .platform-switch__btn:hover,
  .platform-switch__btn:active,
  .platform-switch__btn:hover .platform-switch__icon,
  .platform-switch__btn:active .platform-switch__icon,
  .platform-switch__btn.is-active .platform-switch__icon {
    transform: none;
  }
  .search-glow__stars::before,
  .search-glow__stars::after {
    animation: none;
    opacity: 0.7;
    transform: none;
  }
  .scroll-fab:hover,
  .scroll-fab:active {
    transform: none;
  }
  /* Result-panel entrance animations (panel-in / space-launcher-in) had no
     reduced-motion coverage at all — found during the a11y audit. */
  .page-section,
  .next-journey,
  .info-card--cloud,
  .analyze-overlay__card,
  .panel.is-active {
    animation: none;
  }
  .space-launcher {
    /* space-launcher-in's "from" keyframe (opacity:0, translateY(14px) scale(0.96)) is
       also this element's static base style, outside the animation — animation:none
       alone would leave it permanently invisible, not just non-animated. */
    animation: none;
    opacity: 1;
    transform: none;
  }
  .space-launcher:hover {
    transform: none;
  }
}

.tabs {
  display: none;
}

.page-section {
  margin: 0 0 40px;
  padding: 28px 24px 26px;
  background: var(--color-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 64px;
  animation: panel-in 0.28s var(--ease-luxe) both;
}
.page-section__head {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.page-section__kicker {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}
.page-section__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.panel-toolbar--flush {
  margin-top: -4px;
  justify-content: flex-end;
}

.alert-banner {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid #f0c9a0;
  background: linear-gradient(180deg, #fff8f0, var(--color-white));
  color: #7a4a22;
}
.alert-banner--info {
  border-color: #c5d4e8;
  background: linear-gradient(180deg, #f5f8fc, var(--color-white));
  color: #3a4a5c;
}
.alert-banner--info .alert-banner__hint { color: #5a6a7c; }
.alert-banner.hidden { display: none !important; }
.alert-banner__item { margin: 0 0 8px; font-size: 0.86rem; line-height: 1.5; }
.alert-banner__item:last-child { margin-bottom: 0; }
.alert-banner__detail { font-weight: 650; color: #9a5a30; }
.alert-banner__hint { display: inline-block; margin-top: 4px; font-size: 0.78rem; color: var(--muted); }

.main {
  flex: 1;
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 24px 20px 72px;
}

/* --- History cart (topbar) + drawer ------------------------------------- */
.workspace {
  display: block;
  width: 100%;
  flex: 1;
}
.history-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  margin: 0;
  padding: 0 10px 0 9px;
  border: 1px solid var(--color-white-a12);
  border-radius: 10px;
  background: var(--color-white-a06);
  color: var(--color-white-a92);
  cursor: pointer;
  flex: 0 0 auto;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.history-cart:hover {
  background: var(--color-white-a10);
  border-color: var(--color-white-a18);
}
.history-cart:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 80%, var(--color-white));
  outline-offset: 3px;
}
.history-cart[hidden] {
  display: none !important;
}
.history-cart__icon {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.95;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8.25' stroke='%23000' stroke-width='1.9'/%3E%3Cpath d='M12 7.75V12l3 1.75' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.6 9.2 3 12h3.2' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8.25' stroke='%23000' stroke-width='1.9'/%3E%3Cpath d='M12 7.75V12l3 1.75' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.6 9.2 3 12h3.2' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.history-cart__text {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.history-cart__count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transform-origin: center;
}
.history-cart__count[hidden] {
  display: none !important;
}
.history-cart__saved {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(255, 122, 24, 0.35);
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}
.history-cart__saved[hidden] {
  display: none !important;
}
.history-cart.is-saved-pulse {
  border-color: color-mix(in srgb, var(--brand) 70%, var(--color-white-a18));
  background: color-mix(in srgb, var(--brand) 28%, var(--color-white-a06));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent),
    0 10px 28px rgba(255, 122, 24, 0.28);
  animation: history-cart-bounce 0.7s var(--ease);
}
.history-cart.is-saved-pulse .history-cart__count {
  animation: history-count-pop 0.7s var(--ease);
}
.history-cart.is-saved-pulse .history-cart__saved {
  display: block !important;
  animation: history-saved-fly 1.35s var(--ease) forwards;
}
@keyframes history-cart-bounce {
  0% { transform: scale(1); }
  28% { transform: scale(1.14); }
  55% { transform: scale(0.96); }
  100% { transform: scale(1); }
}
@keyframes history-count-pop {
  0% { transform: scale(0.6); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes history-saved-fly {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.9); }
  18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
  70% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .history-cart.is-saved-pulse,
  .history-cart.is-saved-pulse .history-cart__count,
  .history-cart.is-saved-pulse .history-cart__saved {
    animation: none;
  }
  .history-cart.is-saved-pulse {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  }
  .history-cart.is-saved-pulse .history-cart__saved {
    opacity: 0;
    transform: translateX(-50%) translateY(0);
  }
  .lookbook.is-swapping .lookbook__title,
  .lookbook.is-swapping .lookbook__hint {
    opacity: 1;
    transform: none;
  }
  .scroll-fab__icon {
    transition: none;
  }
}
@media (max-width: 560px) {
  .history-cart {
    width: 40px;
    padding: 0;
  }
  .history-cart__text {
    display: none;
  }
}
.history-rail__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}
.history-rail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.history-rail__eyebrow {
  margin: 0 0 2px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--brand);
}
.history-rail__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.history-rail__clear {
  flex: 0 0 auto;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-2);
  font-size: 0.72rem;
  cursor: pointer;
}
.history-rail__clear:hover {
  color: var(--danger);
  background: var(--danger-soft);
}
.history-rail__hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted-2);
}
.history-rail__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: auto;
  min-height: 0;
  flex: 1;
  padding-right: 2px;
}
.history-rail__empty {
  margin: auto 0;
  padding: 28px 8px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted-2);
  line-height: 1.45;
}
.history-rail__empty[hidden],
.history-rail__clear[hidden] {
  display: none !important;
}
.history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "open x"
    "exports exports";
  gap: 0;
  align-items: start;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: hidden;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.history-item.is-just-saved {
  animation: history-saved-glow 520ms var(--ease-luxe) both;
}
@keyframes history-saved-glow {
  0% {
    background: color-mix(in srgb, var(--brand) 10%, var(--paper));
    border-color: color-mix(in srgb, var(--brand) 28%, var(--line-soft));
  }
  100% {
    background: var(--paper);
    border-color: var(--line-soft);
  }
}
.history-item__open {
  grid-area: open;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "badge kw"
    "badge meta";
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 10px 10px 9px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.history-item__badge {
  grid-area: badge;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1.2;
  background: var(--paper-2, #eef0f4);
  color: var(--muted);
}
.history-item__badge--naver {
  background: color-mix(in srgb, #03c75a 16%, var(--paper));
  color: #028a40;
}
.history-item__badge--youtube {
  background: color-mix(in srgb, #ff0033 14%, var(--paper));
  color: #c40028;
}
.history-item__badge--google {
  background: color-mix(in srgb, #4285f4 16%, var(--paper));
  color: #1a73e8;
}
.history-item__kw {
  grid-area: kw;
  margin: 0;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-item__meta {
  grid-area: meta;
  margin: 0;
  font-size: 0.7rem;
  color: var(--muted-2);
}
.history-item:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  box-shadow: var(--shadow-sm);
}
.history-item.is-active {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  background: color-mix(in srgb, var(--brand) 6%, var(--paper));
}
.history-item__exports {
  grid-area: exports;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 10px 10px;
  border-top: 1px solid var(--line-soft);
  margin-top: 0;
  padding-top: 8px;
}
.history-item__export {
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink-2, var(--ink));
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.history-item__export:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  color: var(--brand);
}
.history-item__export--locked {
  border-style: dashed;
  color: var(--muted-2, var(--ink-2, var(--ink)));
  opacity: 0.85;
}
.history-item__export--locked:hover {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line-soft));
  color: var(--brand);
  opacity: 1;
}
.history-html-sample {
  margin: 0 0 12px;
  padding: 12px 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--brand) 35%, var(--line));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--brand) 6%, var(--color-white));
}
.history-html-sample__kicker {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--brand);
}
.history-html-sample__lead {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}
.history-html-sample__lead b {
  color: var(--ink);
}
.history-html-sample__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.history-html-sample__upgrade {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
}
.history-html-sample__upgrade:hover {
  text-decoration: underline;
}
.history-item__export--ai-result {
  border-color: color-mix(in srgb, #c9a227 45%, var(--line-soft));
  color: #8a6d12;
  background: color-mix(in srgb, #c9a227 10%, var(--paper));
}
.history-item__export--ai-result:hover {
  border-color: #c9a227;
  color: #6e560c;
}
@media (max-width: 560px) {
  .history-item__exports {
    gap: 6px;
  }
  .history-item__export {
    flex: 1 1 calc(50% - 3px);
    min-height: 32px;
    white-space: normal;
    text-align: center;
  }
}
.history-item__x {
  grid-area: x;
  align-self: center;
  width: 28px;
  height: 28px;
  margin: 0 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-2);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.history-item__x:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

/* drawer overlay — main width stays full; slide + fade (not display toggle) */
.history-rail[hidden],
.history-rail__backdrop[hidden] {
  display: none !important;
}
.history-rail:not([hidden]) {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  width: min(340px, calc(100vw - 40px));
  padding: 18px 14px max(18px, env(safe-area-inset-bottom));
  border-left: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, var(--paper)), var(--paper) 40%);
  box-shadow: -20px 0 48px rgba(13, 15, 20, 0.22);
  transform: translate3d(104%, 0, 0);
  transition: transform 0.48s var(--ease);
  will-change: transform;
}
body.history-open .history-rail:not([hidden]) {
  transform: translate3d(0, 0, 0);
}
.history-rail__backdrop:not([hidden]) {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 65;
  background: color-mix(in srgb, #05060a 48%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
body.history-open .history-rail__backdrop:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}
body.history-open {
  overflow: hidden;
  /* 스크롤바 없음 → gutter 보정 불필요. 열림 시 본문만 잠금 */
  overscroll-behavior: none;
  touch-action: none;
}
@media (prefers-reduced-motion: reduce) {
  .history-rail:not([hidden]),
  .history-rail__backdrop:not([hidden]) {
    transition: none;
  }
}

.empty-state {
  position: relative;
  text-align: center;
  padding: 40px 20px 36px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.page-section .empty-state {
  padding: 36px 12px 28px;
}
.empty-state::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 48px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
}
.empty-state__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.28rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.35;
}
.empty-state__sub {
  margin: 10px auto 0;
  max-width: 28em;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}

.kw-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 22px;
}
.kw-head__title { margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.kw-head__sub { margin: 8px 0 0; font-size: 0.86rem; color: var(--muted-2); line-height: 1.5; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.metric-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric--span { grid-column: 1 / -1; }
.ad-signal-grid {
  margin-top: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.period-bar {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.period-bar__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.period-bar__note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted-2);
  line-height: 1.45;
}

.metric {
  background: var(--color-white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 18px 16px 16px; box-shadow: var(--shadow-sm);
}
.metric--accent {
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, var(--color-white)), var(--color-white));
}
.metric__label { margin: 0; font-size: 0.74rem; font-weight: 750; color: var(--muted-2); letter-spacing: 0.03em; }
.metric__value {
  margin: 10px 0 0; font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.12;
}
.metric__value--sm { font-size: 1.25rem; }
.metric__hint { margin: 6px 0 0; font-size: 0.72rem; color: var(--muted-2); }

.split-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;
  align-items: start;
}

/* 비교군 모달 등 — 플랫폼 kicker */
.yt-intent-modal__kicker {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff6b6b;
}
.yt-intent-modal__kicker--google {
  color: #4285f4;
}
.yt-intent-modal__kicker--instagram {
  color: #e1306c;
}
.yt-intent-modal__kicker--naver {
  color: #03c75a;
}
.confirm-modal__actions--stack {
  flex-direction: column;
  align-items: stretch;
}
.confirm-modal__actions--stack .btn {
  width: 100%;
  min-width: 0;
}
.confirm-modal__actions--compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}
.confirm-modal__actions--compare.is-solo {
  grid-template-columns: 1fr;
}
.confirm-modal__actions--compare .btn {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  font-size: 0.95rem;
  font-weight: 700;
}

/* YouTube — 미리보기 맵 + 썸네일 카드 그리드 */
.yt-map {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.yt-map__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 100%;
  padding: 12px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease-out-back);
}
.yt-map__card:hover {
  border-color: color-mix(in srgb, #ff0033 35%, var(--line));
  box-shadow: 0 6px 18px rgba(13, 15, 20, 0.08);
  transform: translateY(-1px);
}
.yt-map__card:focus-visible {
  outline: 2px solid #ff0033;
  outline-offset: 2px;
}
.yt-map__card.is-soon {
  opacity: 0.62;
}
.yt-map__idx {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--muted-2);
}
.yt-map__title {
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}
.yt-map__title em {
  font-style: normal;
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: #ff0033;
  vertical-align: middle;
}
.yt-map__hint {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted-2);
}
.yt-block { margin: 0 0 32px; }
.yt-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 12px;
}
.yt-block__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.yt-block__sub {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted-2);
}

/* YouTube · Google — 네이버처럼 블록마다 호흡 있게 */
#secYoutube .yt-block,
#secGoogle .yt-block {
  margin: 0 0 20px;
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 72px;
}
#secYoutube #youtubeBody:not(.hidden),
#secGoogle #googleBody:not(.hidden) {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#secYoutube #youtubeBody > .metric-grid,
#secGoogle #googleBody > .metric-grid,
#secGoogle #googleBody > .google-draft-row,
#secGoogle #googleBody > .chip-row,
#secYoutube #youtubeBody > .kw-head__sub,
#secGoogle #googleBody > .kw-head__sub {
  margin-bottom: 16px;
}
#secYoutube .yt-map,
#secGoogle .yt-map,
#secInstagram .yt-map {
  margin-bottom: 22px;
}

#secInstagram .yt-map__card:hover {
  border-color: color-mix(in srgb, #e1306c 40%, var(--line));
}
#secInstagram .yt-map__card:focus-visible {
  outline-color: #e1306c;
}
#secInstagram .ig-media-card__media {
  aspect-ratio: 1 / 1;
  background: linear-gradient(145deg, #1a1220, #2a1830 55%, #12141a);
}
#secInstagram .ig-media-card__badge {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(10, 10, 14, 0.72);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#secInstagram .ig-media-card:hover {
  border-color: color-mix(in srgb, #e1306c 35%, var(--line));
}
#secInstagram .yt-video-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.need-strip {
  margin: 0 0 14px;
  padding: 14px 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}
.need-strip.is-settling {
  animation: luxe-settle 280ms var(--ease-luxe) both;
}
@keyframes luxe-settle {
  from {
    opacity: 0.28;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .need-strip.is-settling,
  .checkout-modal:not([hidden]) .checkout-modal__panel,
  .confirm-modal:not([hidden]) .confirm-modal__panel,
  .ai-report-modal:not([hidden]) .ai-report-modal__panel,
  .result-gate[data-gate="teaser"] .result-gate__card,
  .history-item.is-just-saved {
    animation: none !important;
  }
}
.need-strip__head {
  margin: 0 0 12px;
}
.need-strip__kicker {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--muted-2);
  font-weight: 700;
}
.need-strip__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.need-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.need-card {
  min-width: 0;
  padding: 12px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-white) 92%, #fce7f3);
}
.need-card--sample {
  opacity: 0.88;
}
.need-card__kicker {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}
.need-card__title {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 780;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.need-card__body {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}
.need-strip--naver {
  border-color: color-mix(in srgb, #03c75a 24%, var(--line));
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, #03c75a 10%, transparent), transparent 55%),
    var(--color-white);
}
.need-strip--naver .need-strip__kicker {
  color: #07883f;
}
.need-strip--naver .need-card {
  background: color-mix(in srgb, var(--color-white) 94%, #e7f8ee);
}
.need-strip--youtube {
  border-color: color-mix(in srgb, #ff0033 24%, var(--line));
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, #ff0033 10%, transparent), transparent 55%),
    var(--color-white);
}
.need-strip--youtube .need-strip__kicker {
  color: #c40028;
}
.need-strip--youtube .need-card {
  background: color-mix(in srgb, var(--color-white) 94%, #ffe5ea);
}
.need-strip--google {
  border-color: color-mix(in srgb, #4285f4 24%, var(--line));
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, #4285f4 10%, transparent), transparent 55%),
    var(--color-white);
}
.need-strip--google .need-strip__kicker {
  color: #1a73e8;
}
.need-strip--google .need-card {
  background: color-mix(in srgb, var(--color-white) 94%, #e8f0fe);
}
.need-strip--instagram {
  border-color: color-mix(in srgb, #e1306c 22%, var(--line));
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, #e1306c 10%, transparent), transparent 55%),
    var(--color-white);
}
.need-strip--instagram .need-strip__kicker {
  color: #c13584;
}
.need-strip--instagram .need-card {
  background: color-mix(in srgb, var(--color-white) 92%, #fce7f3);
}
.need-bars--youtube .naver-related-bar:hover,
.need-bars--youtube .naver-related-bar:focus-visible {
  border-color: color-mix(in srgb, #ff0033 48%, var(--line));
}
.need-bars--youtube .naver-related-bar__track {
  background: color-mix(in srgb, #ff0033 10%, var(--line));
}
.need-bars--youtube .naver-related-bar__track > span {
  background: #ff0033;
}
.need-bars--google .naver-related-bar:hover,
.need-bars--google .naver-related-bar:focus-visible {
  border-color: color-mix(in srgb, #4285f4 48%, var(--line));
}
.need-bars--google .naver-related-bar__track {
  background: color-mix(in srgb, #4285f4 10%, var(--line));
}
.need-bars--google .naver-related-bar__track > span {
  background: #4285f4;
}
.need-bars--instagram .naver-related-bar:hover,
.need-bars--instagram .naver-related-bar:focus-visible {
  border-color: color-mix(in srgb, #e1306c 48%, var(--line));
}
.need-bars--instagram .naver-related-bar__track {
  background: color-mix(in srgb, #e1306c 10%, var(--line));
}
.need-bars--instagram .naver-related-bar__track > span {
  background: linear-gradient(90deg, #f77737, #e1306c 55%, #833ab4);
}
.naver-related-bars {
  display: grid;
  grid-template-columns: minmax(112px, 0.7fr) repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.naver-related-bars__label {
  margin: 0;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.35;
  color: var(--muted-2);
}
.naver-related-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 7px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.naver-related-bar:hover,
.naver-related-bar:focus-visible {
  border-color: color-mix(in srgb, #03c75a 48%, var(--line));
}
.naver-related-bar__name {
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.naver-related-bar strong {
  font-family: var(--font-mono);
  font-size: 0.62rem;
}
.naver-related-bar__track {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, #03c75a 10%, var(--line));
}
.naver-related-bar__track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #03c75a;
}
.ig-format-bars {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}
.ig-format-bar__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.78rem;
  font-weight: 650;
}
.ig-format-bar__meta b {
  font-variant-numeric: tabular-nums;
  color: #c13584;
}
.ig-format-bar__track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #e1306c 10%, var(--line));
  overflow: hidden;
}
.ig-format-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f77737, #e1306c 55%, #833ab4);
}
.ig-tags-note {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  font-size: 0.72rem;
}

@media (max-width: 900px) {
  .need-strip__grid {
    grid-template-columns: 1fr;
  }
  .naver-related-bars {
    grid-template-columns: 1fr;
  }
  .naver-related-bars__label {
    margin-bottom: 2px;
  }
}
#secYoutube .yt-mychannel,
#secGoogle .google-ads-link {
  margin-top: 28px;
}
#secGoogle .google-ads-link {
  background: color-mix(in srgb, #4285f4 5%, var(--color-white));
  border-color: color-mix(in srgb, #4285f4 22%, var(--line));
}
.yt-mychannel {
  margin: 22px 0 0;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #ff0033 4%, var(--color-white));
}
.yt-mychannel--preview,
#secYoutube .yt-mychannel.yt-mychannel--preview,
#secGoogle .google-ads-link.yt-mychannel--preview,
#secInstagram .yt-mychannel.yt-mychannel--preview {
  border-style: dashed;
  border-color: color-mix(in srgb, #92640c 42%, var(--line));
  background: color-mix(in srgb, #fdf1dd 58%, var(--color-white));
}
.yt-mychannel__preview-notice {
  margin: 0 0 12px;
  padding: 8px 10px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: #92640c;
  background: color-mix(in srgb, #fdf1dd 82%, var(--color-white));
  border: 1px solid color-mix(in srgb, #92640c 28%, var(--line));
  border-radius: var(--radius-md, 8px);
}
.yt-mychannel__preview-notice[hidden],
.yt-mychannel__preview-notice.hidden {
  display: none !important;
}
.yt-mychannel__copy {
  margin: 0 0 12px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted);
}
.yt-mychannel__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.yt-mychannel__linked {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.yt-mychannel__thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--line);
}
.yt-mychannel__name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.yt-mychannel__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.yt-mychannel__sub {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--muted-2);
}

/* YouTube — 조사 전 미리보기 (결과 골격) */
.yt-preview {
  margin: 0 0 8px;
  padding: 18px 16px 16px;
  border: 1px dashed color-mix(in srgb, #ff0033 28%, var(--line));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, #ff0033 5%, var(--color-white)), var(--color-white));
}
.yt-preview__head { margin: 0 0 16px; max-width: 40rem; }
.yt-preview__kicker {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: #ff0033;
}
.yt-preview__title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
.yt-preview__lead {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}
.yt-preview__metrics { margin-bottom: 18px; }
.metric--ghost {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--muted-2) 22%, var(--line));
  background: color-mix(in srgb, var(--paper-2) 38%, var(--color-white));
  box-shadow: none;
  opacity: 0.78;
}
.metric--ghost .metric__value {
  color: var(--muted-2);
  letter-spacing: 0.08em;
}
.metric--ghost .metric__label,
.metric--ghost .metric__hint {
  color: color-mix(in srgb, var(--muted-2) 82%, var(--color-white));
}
.yt-preview__badge {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  color: #ff0033;
  vertical-align: middle;
}
.yt-preview__block { margin-bottom: 18px; }
.yt-video-card--ghost,
.yt-channel-card--ghost {
  pointer-events: none;
  opacity: 0.88;
}
.yt-video-card--ghost .yt-video-card__media {
  background:
    linear-gradient(120deg, #1a1c22 0%, #2c303a 40%, #1a1c22 80%);
  background-size: 200% 100%;
  animation: yt-ghost-shine 2.4s ease-in-out infinite;
}
.yt-video-card--ghost:hover,
.yt-channel-card--ghost:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}
.yt-preview__cta-hint {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted);
}
.yt-preview__cta-hint strong {
  color: #ff0033;
  font-weight: 750;
}
@keyframes yt-ghost-shine {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .yt-video-card--ghost .yt-video-card__media { animation: none; }
}

/* Naver 조회 전 미리보기 — .yt-preview와 같은 톤, Naver 그린으로만 리컬러 (섹션 01 empty-state 안) */
.naver-preview {
  margin: 18px 0 4px;
  padding: 16px 14px 14px;
  border: 1px dashed color-mix(in srgb, #03c75a 28%, var(--line));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, #03c75a 5%, var(--color-white)), var(--color-white));
  text-align: left;
}
.naver-preview__metrics { margin-bottom: 12px; }
.naver-preview__note {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}
.naver-preview__cta-hint {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted);
}
.naver-preview__cta-hint strong {
  color: #0b8c40;
  font-weight: 750;
}

/* Google 조회 전 미리보기 — .naver-preview와 같은 톤, Google 블루(#4285f4)로만 리컬러 */
.google-preview {
  margin: 18px 0 4px;
  padding: 16px 14px 14px;
  border: 1px dashed color-mix(in srgb, #4285f4 28%, var(--line));
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, #4285f4 5%, var(--color-white)), var(--color-white));
  text-align: left;
}
.google-preview__metrics { margin-bottom: 12px; }
.google-preview__variants {
  margin-bottom: 16px;
}
.google-preview__block {
  margin-top: 18px;
}
.google-preview__seg {
  margin-bottom: 10px;
}
.google-preview__seg .seg__btn {
  cursor: default;
}
.google-preview__chart {
  min-height: 180px;
}
.google-preview__chart-ghost {
  min-height: 180px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(66, 133, 244, 0.08), transparent 70%),
    linear-gradient(90deg, transparent 0%, transparent 8%, rgba(66, 133, 244, 0.14) 8%, rgba(66, 133, 244, 0.14) 9%, transparent 9%, transparent 100%),
    linear-gradient(0deg, rgba(19, 25, 38, 0.05) 1px, transparent 1px);
  background-size: auto, 12.5% 100%, 100% 25%;
  background-position: center, left top, left top;
}
.google-preview__table-wrap {
  max-height: none;
}
.google-preview__table tbody tr {
  background: color-mix(in srgb, var(--paper-2) 24%, var(--color-white));
}
.google-preview__table td {
  color: var(--muted);
}
.google-preview__themes .google-theme-card {
  background: color-mix(in srgb, var(--paper-2) 32%, var(--color-white));
}
.google-preview__forecast-controls .google-seed__input[readonly] {
  color: var(--muted);
  cursor: default;
}
.google-preview__note {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}
.google-preview__cta-hint {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted);
}
.google-preview__cta-hint strong {
  color: #1a56c4;
  font-weight: 750;
}
.google-preview__cta-note {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0.9;
}

.yt-grid-empty { margin: 0; padding: 24px 12px; text-align: center; }
.yt-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.yt-video-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease-out-back), border-color 0.2s ease, box-shadow 0.2s ease;
}
.yt-video-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, #ff0033 30%, var(--line));
  box-shadow: 0 10px 24px rgba(13, 15, 20, 0.1);
}
.yt-video-card:focus-visible {
  outline: 2px solid #ff0033;
  outline-offset: 2px;
}
.yt-video-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #12141a;
  overflow: hidden;
}
.yt-video-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yt-video-card__thumb--empty {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1c1e24, #2a2e38);
}
.yt-video-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.92);
  transform: translate(-30%, -50%);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  opacity: 0.9;
}
.yt-video-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 11px 12px;
  min-width: 0;
}
.yt-video-card__title {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yt-video-card__channel {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yt-video-card__stats {
  font-size: 0.68rem;
  color: var(--muted-2);
  line-height: 1.35;
}
.yt-video-card__stats b {
  color: var(--text);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.yt-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.yt-channel-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, transform 0.2s var(--ease-out-back);
}
.yt-channel-card:hover {
  border-color: color-mix(in srgb, #ff0033 30%, var(--line));
  transform: translateY(-1px);
}
.yt-channel-card:focus-visible {
  outline: 2px solid #ff0033;
  outline-offset: 2px;
}
.yt-channel-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #e7e9ec;
}
.yt-channel-card__avatar--empty {
  display: block;
  background: linear-gradient(145deg, #dde1e6, #c9ced6);
}
.yt-channel-card__title {
  display: block;
  font-size: 0.86rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yt-channel-card__stats {
  display: block;
  margin-top: 3px;
  font-size: 0.7rem;
  color: var(--muted-2);
  line-height: 1.35;
}
.intent-kv { margin-top: 14px; }
.intent-tip {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.45;
}
.info-card {
  background: var(--color-white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: var(--shadow-sm); margin-bottom: 12px;
}
.info-card--insight { border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.info-card--muted { background: var(--line-soft); box-shadow: none; }
.info-card__title { margin: 0 0 10px; font-size: 0.92rem; font-weight: 800; }
.info-card__head-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px;
}
.info-card__head-row .info-card__title { margin: 0; }

.sat-main { margin: 0; font-size: 1.35rem; font-weight: 800; }
.sat-main b { margin-right: 8px; }
.sat-row { margin: 8px 0 0; font-size: 0.84rem; color: var(--muted); }
.sat-note { margin: 10px 0 0; font-size: 0.74rem; color: var(--muted-2); line-height: 1.45; }
.tone-good { color: #0d9268; font-weight: 750; font-size: 0.84rem; }
.tone-mid { color: #b7791e; font-weight: 750; font-size: 0.84rem; }
.tone-warn, .tone-bad { color: var(--danger); font-weight: 750; font-size: 0.84rem; }
.tone-muted { color: var(--muted-2); }

.kv { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.kv > div { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; }
.kv dt { color: var(--muted-2); font-weight: 650; }
.kv dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; }

.insight-text { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text); }
.insight-note { margin: 10px 0 0; font-size: 0.74rem; color: var(--muted-2); }

.link-btn {
  border: none; background: transparent; color: var(--primary-hover); font: inherit;
  font-size: 0.78rem; font-weight: 700; cursor: pointer;
}

.chart-stage { position: relative; min-height: 280px; padding: 0 2px 4px; overflow: hidden; }
.chart-stage--sm { min-height: 200px; }
.trend-svg { width: 100%; max-width: 100%; height: 100%; min-height: inherit; display: block; overflow: hidden; touch-action: pan-y; }
/* 차트 툴팁이 마우스 전용이라, 키보드 사용자는 최소한 aria-label(요약)까지는 Tab으로 닿게 함 */
.trend-svg:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.trend-grid { stroke: var(--line-soft); stroke-width: 1; }
.trend-axis { fill: var(--muted-2); font-size: 11px; font-family: var(--font-sans); }
.trend-axis--x { font-size: 10px; }
.trend-line { stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.trend-dot { pointer-events: none; }

.chart-zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.chart-zoom__btn {
  appearance: none;
  border: 0;
  background: transparent;
  min-width: 28px;
  min-height: 28px;
  padding: 0 6px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
}
.chart-zoom__btn:hover {
  color: var(--text);
  background: var(--line-soft);
}
.chart-zoom__btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.persona-load-note { margin-top: 8px; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 10px;
  align-items: center;
}
.legend[hidden],
.legend.hidden {
  display: none !important;
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
}
.legend__item b { color: var(--text); font-weight: 700; }
.legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--series, var(--primary));
  flex: 0 0 auto;
}

.panel-toolbar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.panel-toolbar__actions { display: flex; flex-wrap: wrap; gap: var(--control-gap-y) var(--control-gap-x); align-items: center; }
.panel-title { margin: 0; font-size: 1.1rem; font-weight: 800; }
.panel-sub { margin: 4px 0 0; font-size: 0.78rem; color: var(--muted-2); }
.buyer-insight,
.data-guide {
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-left: none;
  border-top: 1px solid color-mix(in srgb, var(--line-soft) 80%, transparent);
  background: transparent;
  color: var(--muted-2);
  font-size: 0.76rem;
  line-height: 1.55;
  border-radius: 0;
}
.buyer-insight {
  padding: 10px 12px;
  border-left: 3px solid color-mix(in srgb, var(--brand) 75%, #eb6834);
  border-top: none;
  background: color-mix(in srgb, var(--brand) 7%, var(--paper));
  color: var(--ink-2, var(--ink));
  font-size: 0.78rem;
  line-height: 1.45;
  border-radius: 0 8px 8px 0;
}
.buyer-insight strong,
.data-guide__label {
  font-weight: 750;
  color: var(--brand);
}
.data-guide__row {
  margin: 0;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 6px 8px;
  align-items: start;
}
.data-guide__row + .data-guide__row {
  margin-top: 4px;
  padding-top: 0;
  border-top: none;
}
/* 활용 행은 한 톤 더 조용히 — 리포트 주석처럼 */
.data-guide__row:nth-child(3) {
  margin-top: 6px;
  opacity: 0.78;
}
.data-guide__row b {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.yt-block > .buyer-insight,
.yt-block > .data-guide,
.chart-card > .data-guide,
.info-card > .data-guide {
  margin: 0 0 10px;
}
.chart-card > .data-guide,
.info-card > .data-guide {
  font-size: 0.68rem;
  padding-top: 6px;
}
.page-section__head > .data-guide {
  margin-top: 10px;
  max-width: 48rem;
}
.count-pill {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--line-soft); font-size: 0.75rem; font-weight: 750; color: var(--muted); margin-left: 6px;
}
.filter-input {
  min-height: var(--control-h);
  border: 1px solid var(--line); border-radius: var(--radius-full); padding: 0 12px;
  font: inherit; font-size: 0.8rem; min-width: 140px; background: var(--color-white);
}

.seg {
  display: inline-flex; align-items: center; min-height: var(--control-h); padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--color-white);
}
.seg__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: calc(var(--control-h) - 6px); border: none; background: transparent; padding: 0 10px; font: inherit; font-size: 0.74rem;
  line-height: 1; font-weight: 650; color: var(--muted); border-radius: var(--radius-full); cursor: pointer; white-space: nowrap;
  box-sizing: border-box;
}
.seg__btn.is-active { background: var(--dark); color: var(--color-white); }
.seg__btn:disabled,
.seg__btn[aria-disabled="true"] {
  cursor: default;
  opacity: 1;
}
.seg__btn.is-active:disabled,
.seg__btn.is-active[aria-disabled="true"] {
  background: var(--dark);
  color: var(--color-white);
}

.device-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--control-gap-y) var(--control-gap-x); margin-bottom: 12px; }
.chip-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h);
  border: 1px solid var(--line); background: var(--color-white); color: var(--muted); border-radius: var(--radius-full);
  padding: 0 11px; font: inherit; font-size: 0.76rem; line-height: 1; font-weight: 650; cursor: pointer; white-space: nowrap;
}
.chip-btn.is-active { background: var(--dark); border-color: var(--dark); color: var(--color-white); }
.chip-btn__tag {
  margin-right: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.72;
}
.chip-btn.is-active .chip-btn__tag { opacity: 0.9; }
#shoppingSeeds { margin-bottom: 4px; }

.chart-card {
  background: var(--color-white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px 16px; box-shadow: var(--shadow-sm); margin-bottom: 10px;
}
.chart-card__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.chart-card__sub { margin: 0; font-size: 0.78rem; color: var(--muted-2); }
.footnote { margin: 0 0 8px; font-size: 0.74rem; color: var(--muted-2); }

.compare-seed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-white) 14%, transparent);
  background: color-mix(in srgb, var(--color-white) 6%, transparent);
}
.compare-seed__label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white-a56, rgba(255, 255, 255, 0.56));
}
.compare-seed__value {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.3;
  color: #f5f7fa;
  word-break: break-word;
}
.compare-add--modal {
  margin: 0 0 14px;
  padding: 18px 18px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #03c75a 32%, transparent);
  background: color-mix(in srgb, #0f1410 55%, #14241a);
  text-align: left;
}
.compare-add__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.compare-add__label {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-white-a88, #e8ecef);
}
.compare-add__count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: #7ddea8;
  white-space: nowrap;
}
.compare-add__row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 10px;
}
.compare-add__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  font-size: 1.05rem;
  border-radius: 12px;
  padding: 0 16px;
}
.compare-add__btn {
  flex: 0 0 auto;
  min-width: 88px;
  min-height: 52px;
  padding: 0 18px;
  font-weight: 700;
}
.compare-add__hint {
  margin: 0 0 12px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-white-a56, rgba(255, 255, 255, 0.56));
}
.compare-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 72px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, #03c75a 28%, transparent);
  background: color-mix(in srgb, #000 18%, transparent);
  align-content: flex-start;
}
.compare-chips .is-muted {
  color: var(--color-white-a48, rgba(255, 255, 255, 0.48));
  font-size: 0.86rem;
  line-height: 1.45;
  padding: 4px 2px;
}
.compare-add .kw-chip {
  background: color-mix(in srgb, var(--color-white) 10%, transparent);
  border: 1px solid color-mix(in srgb, #03c75a 35%, transparent);
  color: #f3f5f8;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 0.92rem;
}
.compare-add .kw-chip__label,
.compare-add .kw-chip__x {
  color: inherit;
}
.compare-confirm-summary {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #d7ecdf;
  background: color-mix(in srgb, #03c75a 12%, transparent);
  border: 1px solid color-mix(in srgb, #03c75a 22%, transparent);
}
/* 기본 panel(360)보다 특이도 높게 — cascade로 좁아지지 않게 */
.confirm-modal__panel.confirm-modal__panel--compare {
  width: min(800px, calc(100vw - 40px));
  max-width: none;
  max-height: min(92vh, 860px);
  overflow: auto;
  padding: 28px 32px 22px;
  text-align: left;
  border-top: 3px solid #03c75a;
}
.confirm-modal__panel--compare .confirm-modal__title {
  font-size: 1.32rem;
  margin-bottom: 8px;
}
.confirm-modal__panel--compare .confirm-modal__desc {
  margin-bottom: 16px;
  font-size: 0.92rem;
  line-height: 1.55;
}
.pulse-deck__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
}
.pulse-deck__head--bare {
  padding: 0;
  border: 0;
}
.pulse-deck__kw {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.2;
}
.pulse-deck__tag {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #f97316;
}
.pulse-deck__sub {
  margin: 0 0 14px;
  font-size: 0.78rem;
  color: var(--muted);
}
.pulse-board {
  display: none;
}
.chart-stage--pulse {
  margin: 0 0 12px;
  min-height: 280px;
}
.pulse-status {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pulse-status__item {
  --pulse-accent: #888;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-size: 0.72rem;
  color: var(--muted);
}
.pulse-status__item.is-live {
  border-color: color-mix(in srgb, var(--pulse-accent) 35%, var(--line));
  color: var(--ink);
}
.pulse-status__item.is-miss,
.pulse-status__item.is-soon {
  opacity: 0.78;
}
.pulse-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pulse-accent);
  flex: 0 0 auto;
}
.pulse-status__item b {
  font-weight: 700;
}
.chart-tooltip.is-compare {
  display: grid;
  gap: 4px;
  min-width: 140px;
  padding: 10px 12px;
}
.chart-tooltip.is-compare .tip-period {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 2px;
}
.chart-tooltip.is-compare .tip-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  font-size: 0.78rem;
}
.chart-tooltip.is-compare .tip-row i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.chart-tooltip.is-compare .tip-row em {
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pulse-plat {
  --pulse-accent: #f97316;
  margin: 0;
  padding: 14px 14px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: inset 3px 0 0 var(--pulse-accent);
}
.pulse-plat.is-soon,
.pulse-plat.is-empty {
  opacity: 0.85;
}
.pulse-plat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  margin: 0 0 8px;
}
.pulse-plat__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pulse-accent);
  flex: 0 0 auto;
}
.pulse-plat__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 780;
  letter-spacing: -0.02em;
}
.pulse-plat__note {
  margin: 0 0 0 auto;
  font-size: 0.72rem;
  color: var(--muted);
}
.pulse-plat .chart-stage {
  margin: 0;
}

.table-wrap {
  background: var(--color-white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: auto; box-shadow: var(--shadow-sm); max-height: min(62vh, 640px);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.data-table th, .data-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; white-space: nowrap;
}
.data-table th {
  position: sticky; top: 0; background: #fafbfc; font-size: 0.72rem; font-weight: 750;
  color: var(--muted-2); cursor: pointer; z-index: 1;
}
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.data-table td { font-variant-numeric: tabular-nums; }
.data-table th.num { text-align: right; }
.kw-link {
  border: none; background: transparent; color: var(--text); font: inherit; font-weight: 700;
  cursor: pointer; padding: 0;
}
.kw-link:hover { color: var(--primary-hover); text-decoration: underline; }
.kw-add {
  margin-left: 6px; border: 1px solid var(--line); background: var(--color-white); border-radius: var(--radius-chip);
  width: 22px; height: 22px; cursor: pointer; color: var(--muted); font-weight: 700;
}
.kw-add:hover { border-color: var(--primary); color: var(--primary-hover); }

.intent-badge {
  margin: 0; display: inline-flex; padding: 8px 12px; border-radius: var(--radius-full);
  background: var(--primary-soft); color: var(--primary-hover); font-weight: 800; font-size: 0.9rem;
}
.limit-list { margin: 0; padding-left: 18px; color: var(--muted); font-size: 0.84rem; line-height: 1.55; }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
  transform: translateX(-50%);
  /* analyze-overlay(50)·게이트 카드보다 위 — 한도/조사 안내가 블러·오버레이에 가리지 않게 */
  z-index: 90;
  max-width: min(92vw, 440px);
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: var(--dark);
  color: var(--color-white);
  font-size: 0.84rem;
  font-weight: 650;
  box-shadow: 0 8px 24px rgba(15, 27, 51, 0.2);
}
.toast--warn {
  background: #2a1a12;
  box-shadow: 0 8px 24px rgba(120, 48, 12, 0.28);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
}
@media (max-width: 560px) {
  .toast {
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 58px));
  }
}

.space-launcher-stack {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.space-launcher {
  --space-launcher-accent: #3cb34a;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px 11px 15px;
  color: #f4f6f8;
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid var(--color-white-a10);
  background:
    linear-gradient(180deg, var(--color-white-a06), transparent 42%),
    rgba(16, 19, 26, 0.92);
  box-shadow:
    0 1px 0 var(--color-white-a06) inset,
    0 10px 28px var(--color-shadow-a28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  isolation: isolate;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition:
    opacity 0.28s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease;
  animation: space-launcher-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
.space-launcher-stack .space-launcher:nth-child(2) { animation-delay: 0.34s; }
.space-launcher::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: var(--space-launcher-accent);
  opacity: 0.72;
  transition: opacity 0.22s ease, top 0.22s ease, bottom 0.22s ease;
}
@keyframes space-launcher-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.space-launcher:hover {
  transform: translateY(-2px) scale(1);
  border-color: rgba(60, 179, 74, 0.38);
  box-shadow:
    0 1px 0 var(--color-white-a08) inset,
    0 14px 32px var(--color-shadow-a34);
}
.space-launcher:hover::before { opacity: 1; top: 8px; bottom: 8px; }
.space-launcher:focus-visible {
  outline: 2px solid var(--space-launcher-accent);
  outline-offset: 3px;
}
.space-launcher__body { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; min-width: 0; }
.space-launcher__eyebrow {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 246, 248, 0.48);
}
.space-launcher__title {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(244, 246, 248, 0.92);
}
.space-launcher__title b { font-weight: 750; color: #67c872; }
.space-launcher__arrow {
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(103, 200, 114, 0.85);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.22s ease;
}
.space-launcher:hover .space-launcher__arrow { transform: translateX(3px); color: var(--primary); }

/* Journey / overlay — brand styles live in hero block above */
/* search-hero는 일반 흐름 — sticky+높이축소(is-compact)는 스크롤 피드백 루프로 떨림 유발 */
.scope-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 0 10px;
  border-radius: var(--radius-chip);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1;
  background: #f0f2f6;
  color: var(--muted);
  white-space: nowrap;
}
.scope-pill--ok {
  background: var(--primary-soft);
  color: var(--primary-hover);
}
.scope-pill--lock {
  background: #f0f2f6;
  color: var(--muted-2);
}
.scope-line {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted);
}
.shopping-status {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}
.shopping-status:not(.hidden) {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2, #f3f2ee);
}
.page-section__period {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--control-gap-y) var(--control-gap-x);
  min-width: 0;
}
.page-section__period-label {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  text-transform: uppercase;
  flex-shrink: 0;
}
.page-section__period-note {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--muted);
}

.trust-meta {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
}
.source-block .trust-meta,
.info-card .trust-meta {
  background: #f4f5f7;
  border-color: var(--line);
}
.trust-meta__row {
  display: grid;
  grid-template-columns: 4.8rem minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--muted, #5c6578);
}
.trust-meta__row + .trust-meta__row {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.trust-meta__row b {
  font-weight: 700;
  color: var(--text, #1a1f2c);
}
.trust-banner {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.5;
}
.trust-banner--info {
  border: 1px solid rgba(70, 110, 180, 0.28);
  background: rgba(70, 110, 180, 0.08);
  color: #2a3d5c;
}
.trust-banner--warn {
  border: 1px solid rgba(180, 130, 40, 0.35);
  background: rgba(180, 130, 40, 0.1);
  color: #5c4818;
}

.page-section__period--inline {
  margin-top: 8px;
  padding-top: 0;
  border-top: none;
}

.journey {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.journey__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  background: var(--color-white);
  cursor: pointer;
  color: var(--muted-2);
  font-size: 0.76rem;
  font-weight: 700;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.journey__step:hover { border-color: #c8d0de; color: var(--muted); }
.journey__num {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--line-soft); color: var(--muted);
  font-size: 0.7rem; font-weight: 800;
}
.journey__step.is-current {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  background: var(--primary-soft);
  color: var(--primary-hover);
}
.journey__step.is-current .journey__num {
  background: var(--primary); color: var(--color-white);
}
.journey__step.is-done {
  border-color: color-mix(in srgb, var(--primary) 24%, transparent);
  color: var(--text);
}
.journey__step.is-done .journey__num {
  background: #dbe6fb; color: var(--primary-hover);
}

.src-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-chip);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
  vertical-align: middle;
}
.src-badge--ad { background: #eaf0fc; color: #3a558f; }
.src-badge--lab { background: #eaf6f2; color: #0f766e; }
.src-badge--api { background: #f1f2f4; color: #52585f; }
.src-badge--preview { background: #fdf1dd; color: #92640c; }

/* 출처 legend: 배지·설명이 같은 높이선 */
.source-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.source-legend__item {
  display: inline-grid;
  grid-auto-flow: column;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
  height: 24px;
  min-width: 0;
}
.source-legend .src-badge {
  height: 24px;
  min-height: 24px;
}
.src-legend__txt {
  display: block;
  margin: 0;
  height: 24px;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 24px;
  color: var(--muted);
  white-space: nowrap;
}
.view-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--control-gap-y) var(--control-gap-x);
  margin-top: 12px;
  min-width: 0;
}
.page-section__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.page-section__title-row .page-section__title { margin: 0; }

.source-block {
  margin: 0 0 18px;
  padding: 16px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fafbfc;
}
.page-section .need-strip + .source-block {
  margin-top: 4px;
}
.page-section .source-block + .source-block {
  margin-top: 2px;
}
.source-block.is-filtered-out,
.info-card.is-filtered-out { display: none !important; }
.source-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 12px;
}
.source-block__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}
.source-block__meta {
  margin: 0;
  flex: 1 1 100%;
  font-size: 0.76rem;
  color: var(--muted-2);
}
.ad-signal-wrap { margin-top: 10px; }
.kv--signal {
  padding: 12px;
  background: var(--color-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.sat-card {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.sat-card__label {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--muted-2);
  letter-spacing: 0.04em;
}
.suggest-chips {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 18px;
}
.suggest-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--color-white);
  border-radius: var(--radius-full);
  padding: 9px 14px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: transform 0.2s var(--ease), border-color 0.2s ease, color 0.2s ease;
}
.suggest-chip:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  color: var(--primary-hover);
}
.suggest-chip:active {
  transform: translateY(0) scale(0.98);
}

.kw-head__actions { display: flex; flex-wrap: wrap; gap: 6px; }

.next-journey {
  margin: 8px 0 4px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent 50%),
    var(--color-white);
  border: 1px solid var(--line);
  animation: panel-in 0.45s var(--ease) both;
}
.next-journey__label {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.next-journey__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.next-card {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.2s ease, transform 0.22s var(--ease), box-shadow 0.22s ease;
}
.next-card:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.next-card__kicker {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--muted-2);
  letter-spacing: 0.08em;
}
.next-card__title {
  display: block;
  margin-top: 4px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
}
.next-card__desc {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  color: var(--muted);
}

.info-card--cloud { animation: panel-in 0.4s var(--ease) both; }
.word-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  min-height: 72px;
  padding: 4px 0 2px;
}
.cloud-word {
  border: none;
  background: transparent;
  color: var(--dark);
  font: inherit;
  font-weight: 750;
  font-size: calc(var(--w, 1) * 1rem);
  line-height: 1.15;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s var(--ease);
}
.cloud-word:hover {
  opacity: 1;
  color: var(--primary-hover);
  transform: scale(1.04);
}

.age-bars { display: flex; flex-direction: column; gap: 10px; }
.age-bar {
  display: grid;
  grid-template-columns: 72px 1fr 36px;
  gap: 10px;
  align-items: center;
}
.age-bar__label { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.age-bar__track {
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--line-soft);
  overflow: hidden;
}
.age-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #93c5fd, var(--primary));
  transition: width 0.55s var(--ease);
}
.age-bar__val {
  font-size: 0.78rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--muted);
}
.age-bars--wide .age-bar {
  grid-template-columns: minmax(72px, 1.4fr) 1fr 52px;
}
.age-bars--wide .age-bar__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.age-bar--ghost { opacity: 0.55; }
.age-bar--ghost .age-bar__fill { background: linear-gradient(90deg, var(--line-soft), var(--muted-2)); }

/* YouTube 조회 전 미리보기 — 게시 추이 차트 고스트 (.google-preview__chart-ghost와 같은 패턴, 레드로만 리컬러) */
.yt-preview__chart-ghost {
  min-height: 160px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 0, 51, 0.08), transparent 70%),
    linear-gradient(90deg, transparent 0%, transparent 8%, rgba(255, 0, 51, 0.14) 8%, rgba(255, 0, 51, 0.14) 9%, transparent 9%, transparent 100%),
    linear-gradient(0deg, rgba(19, 25, 38, 0.05) 1px, transparent 1px);
  background-size: auto, 12.5% 100%, 100% 25%;
  background-position: center, left top, left top;
}

.soon-ghost-chart {
  margin-top: 28px;
  opacity: 0.92;
}
.soon-ghost-chart__stage {
  border: 1px dashed rgba(12, 14, 19, 0.12);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(42, 120, 214, 0.04), transparent);
}
.soon-ghost-chart__svg {
  min-height: 180px;
}

.analyze-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 8, 12, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.analyze-overlay[hidden] { display: none !important; }
.analyze-overlay__card {
  width: min(100%, 360px);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255, 122, 24, 0.14), transparent 55%),
    linear-gradient(180deg, #141820, #0c0e14);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 32px 28px 26px;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: panel-in 0.35s var(--ease) both;
  display: grid;
  place-items: center;
  text-align: center;
}
.analyze-overlay__card .auth-ring-loader-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
body.is-analyzing { overflow: hidden; }

/* --- Teaser gate ----------------------------------------------------------
   한도 소진 시: 목업/실결과 엿보기 없이 오버레이 CTA만.
   내용 영역은 숨기고 최소 높이만 확보. */
.result-gate {
  position: relative;
}
.result-gate__content {
  transition: opacity 0.2s var(--ease);
}
.result-gate[data-gate="teaser"] {
  min-height: min(52vh, 380px);
}
.result-gate[data-gate="teaser"] .result-gate__content {
  max-height: min(52vh, 380px);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  filter: none;
  mask-image: none;
  -webkit-mask-image: none;
}
.result-gate__overlay {
  display: none;
}
.result-gate[data-gate="teaser"] .result-gate__overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 24px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--card) 88%, transparent) 0%,
    color-mix(in srgb, var(--card) 88%, transparent) 100%
  );
}
.result-gate__card {
  width: min(100%, 420px);
  padding: 24px 22px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px var(--color-shadow-a28);
  text-align: center;
  animation: luxe-settle 260ms var(--ease-luxe) both;
}
.result-gate__kicker {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}
.result-gate__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.result-gate__desc {
  margin: 0 0 18px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}
.result-gate__cta {
  width: 100%;
  padding: 12px;
  font-size: 0.92rem;
}
.result-gate__link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--muted-2);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.result-gate__link:hover { color: var(--primary-hover); }

@media (prefers-reduced-motion: reduce) {
  .result-gate__content { transition: none; }
  .result-gate__card { animation: none; }
  .suggest-chip:hover,
  .suggest-chip:active { transform: none; }
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel.is-active {
  animation: panel-in 0.35s var(--ease) both;
}

@media (max-width: 900px) {
  .metric-grid, .metric-grid--2, .metric-grid--3, .split-cards { grid-template-columns: 1fr 1fr; }
  .yt-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-status { gap: 10px; }
  .account-meta { font-size: 0.72rem; gap: 6px; }
  .account-meta__token { font-size: 0.7rem; }
  .account-slot { padding: 6px 8px; }
  .account-slot__title { max-width: 9.5rem; font-size: 0.74rem; }
  .next-journey__row { grid-template-columns: 1fr; }
}
/* 어드민 미리보기 바(.topbar__center)는 position:absolute라 900~1024px 사이에서
   등급·쿼터·토큰 칩(.account-status)과 겹침 — 아래 560px 대응과 같은 grid로 미리 전환해
   겹치지 않고 자기 줄을 갖게 함. 550px 이하는 다음 블록이 이어서 더 좁힘. */
@media (max-width: 1024px) {
  .topbar {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .topbar__brand { flex: 1 1 auto; min-width: 0; }
  .topbar__right { flex: 0 0 auto; }
  .topbar__center {
    position: static;
    transform: none;
    order: 3;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
@media (max-width: 560px) {
  .lookbook {
    --lookbook-row-h: 3.15rem;
    margin-bottom: 16px;
  }
  .lookbook__hint {
    opacity: 0.72;
  }
  .chart-stage,
  #secGoogle .chart-frame {
    min-height: 220px;
  }
  .chart-stage--sm {
    min-height: 190px;
  }
  .trend-axis--x {
    font-size: 11px;
  }
  .chart-zoom {
    top: 4px;
    right: 4px;
  }
  .metric-grid, .metric-grid--2, .metric-grid--3, .split-cards { grid-template-columns: 1fr; }
  .yt-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yt-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest-banner {
    align-items: stretch;
    padding: 12px;
  }
  .guest-banner__actions {
    width: 100%;
    margin-left: 0;
  }
  .guest-banner__actions .btn {
    flex: 1 1 auto;
  }
  .account-intent-banner {
    align-items: stretch;
    padding: 12px;
  }
  .account-intent-banner__actions {
    width: 100%;
    margin-left: 0;
  }
  .account-intent-banner__actions .btn {
    flex: 1 1 auto;
  }
  .source-legend {
    gap: 10px 12px;
  }
  .source-legend__item {
    flex: 1 1 auto;
  }
  .src-legend__txt {
    white-space: normal;
  }
  .page-section__period-label {
    flex-basis: 100%;
    min-height: auto;
  }
  .seg {
    max-width: 100%;
    overflow-x: auto;
  }
  .chip-btn,
  .scope-pill {
    min-height: 30px;
  }
  .panel-toolbar__actions,
  .google-forecast-controls {
    width: 100%;
  }
  .panel-toolbar__actions .filter-input {
    flex: 1 1 100%;
  }
  .confirm-modal {
    padding: 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .confirm-modal__panel.confirm-modal__panel--compare {
    width: min(100%, calc(100vw - 20px));
    padding: 22px 16px 16px;
  }
  .compare-seed__value {
    font-size: 1.08rem;
  }
  .compare-add__btn {
    min-width: 100%;
  }
  .confirm-modal__actions {
    flex-wrap: wrap;
  }
  .confirm-modal__actions .btn {
    flex: 1 1 100%;
  }
  .confirm-modal__actions--compare {
    grid-template-columns: 1fr;
  }
  .compare-add__row {
    flex-wrap: wrap;
  }
  .compare-add__input {
    flex: 1 1 100%;
  }
  .compare-add__row .btn {
    flex: 1 1 100%;
    min-height: 44px;
  }
  .ai-report-modal__panel {
    width: min(100%, calc(100vw - 20px));
    max-height: min(92vh, 780px);
    max-height: min(92svh, 780px);
    padding: 18px 16px 14px;
  }
  .ai-report-modal__body {
    max-height: min(56vh, 520px);
    max-height: min(56svh, 520px);
    padding: 12px;
    font-size: 0.88rem;
  }
  .result-gate[data-gate="teaser"] {
    min-height: min(52vh, 340px);
    min-height: min(52svh, 340px);
  }
  .result-gate[data-gate="teaser"] .result-gate__content {
    max-height: min(52vh, 340px);
    max-height: min(52svh, 340px);
  }
  .result-gate__overlay {
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .result-gate__card { padding: 20px 18px; }
  .search-hero__inner {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    max-width: 100%;
    justify-content: flex-start;
    padding-top: 24px;
  }
  .topbar {
    padding-inline: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand right"
      "center center";
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
  }
  .topbar__brand {
    grid-area: brand;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .topbar__right {
    grid-area: right;
    min-width: 0;
    justify-self: end;
  }
  /* 어드민 미리보기만 둘째 줄 — 계정/등급은 브랜드 우측 유지 */
  .topbar__center {
    grid-area: center;
    position: static;
    transform: none;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .admin-mode__btn {
    font-size: 0.64rem;
    padding: 6px 8px;
  }
  .brand-mark__en { display: none; }
  .account-status {
    gap: 8px;
  }
  /* 등급·쿼터·토큰 텍스트가 계정 이메일 축약 이후에도 여전히 넓어서 "마켓빅시"가
     글자 단위로 줄바꿈됨 — 가장 좁은 화면에서는 브랜드를 지키고 이 클러스터부터 숨김 */
  @media (max-width: 400px) {
    .account-meta { display: none; }
  }
  /* 로그인 시 이메일 숨김 — 툴바 높이·줄바꿈 방지 (aria-label에 이메일 유지) */
  .account-slot--in .account-slot__title {
    font-size: 0;
    max-width: none;
    overflow: visible;
  }
  .account-slot--in .account-slot__title::before {
    content: "계정";
    font-size: 0.74rem;
    font-weight: 550;
    letter-spacing: -0.015em;
    color: var(--color-white-a90);
  }
  .account-slot--in {
    padding: 6px 8px;
    max-width: none;
  }
  .platform-dock {
    padding: 8px 10px 7px;
    border-radius: 18px;
  }
  .platform-switch {
    column-gap: clamp(2px, 1.8vw, 8px);
    max-width: 100%;
  }
  .platform-switch__btn {
    width: clamp(34px, 14.5vw, 42px);
  }
  .platform-switch__icon {
    width: 30px;
    height: 30px;
    border-radius: 7.2px;
  }
  .platform-switch__name {
    font-size: 0.56rem;
  }
  .platform-switch__meta {
    min-height: 1.6rem;
  }
  .search-hero__headline {
    font-size: clamp(1.72rem, 7.5vw, 2rem);
    line-height: 1.28;
  }
  /* LIVE의 두 줄 제목과 짧은 SOON 제목이 같은 슬롯을 써 전환 시 히어로가 뛰지 않게 한다. */
  .search-hero__cover { min-height: 182px; }
  .search-hero__lead br { display: none; }
  .search-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }
  .search-bar__label {
    grid-column: 1 / -1;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-white-a10);
    padding: 8px 12px;
    justify-content: flex-start;
  }
  .search-bar input { width: 100%; min-width: 0; }
  .search-bar .btn-primary {
    width: auto;
    white-space: nowrap;
    min-height: 48px;
    padding: 0 16px;
  }
  .scroll-fab {
    width: 50px;
    height: 50px;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }
  .kv { grid-template-columns: 1fr; }
  .main { padding: 12px 14px 32px; }
  .space-launcher-stack { right: 12px; bottom: 12px; gap: 6px; }
  .space-launcher { gap: 10px; padding: 10px 12px 10px 13px; }
  .space-launcher__title { font-size: 0.82rem; }
  .journey { gap: 6px; }
  .journey__label { display: none; }
  .age-bar { grid-template-columns: 52px 1fr 28px; }
  .site-footer__biz { grid-template-columns: 1fr; }
  .pricing-topbar { padding-inline: 16px; }
  .pricing-main { padding-inline: clamp(16px, 4vw, 28px); }
}

/* --- Site footer (사업자 정보) ------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 2;
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: #0b0d12;
  color: var(--color-white-a72);
}
.site-footer__inner {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 28px 20px 32px;
}
.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.site-footer__brand img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-white-a12), 0 0 16px rgba(255, 122, 24, 0.25);
}
.site-footer__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--color-white-a94);
  letter-spacing: -0.02em;
}
.site-footer__name span {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--color-white-a45);
  vertical-align: middle;
}
.site-footer__tag {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--color-white-a45);
}
.site-footer__nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.site-footer__nav a {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-white-a65);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.site-footer__nav a:hover,
.site-footer__nav a[aria-current="page"] {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
}
.site-footer__biz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--color-white-a08);
  border-bottom: 1px solid var(--color-white-a08);
  font-size: 0.74rem;
  line-height: 1.45;
}
.site-footer__biz > div {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}
.site-footer__biz-wide { grid-column: 1 / -1; }
.site-footer__biz dt {
  margin: 0;
  color: var(--color-white-a40);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}
.site-footer__biz dd {
  margin: 0;
  color: var(--color-white-a78);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.site-footer__biz a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-white-a22);
}
.site-footer__biz a:hover { color: var(--brand); border-color: var(--brand); }
.site-footer__copy {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-white-a08);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.4vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-white-a45);
}
.site-footer__copy-year {
  margin-right: 0.55em;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-white-a28);
}
.site-footer__copy b {
  font-weight: 650;
  color: color-mix(in srgb, var(--brand) 55%, var(--color-white-a72));
}

/* --- Pricing page ------------------------------------------------------- */
.pricing-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 40% at 50% -10%, rgba(255, 122, 24, 0.14), transparent 55%),
    #07080c;
  color: #f3f5f8;
}
.pricing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--color-white-a08);
}
.pricing-topbar__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
  max-width: min(720px, 100%);
}
.pricing-topbar__nav a {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-white-a65);
  white-space: nowrap;
  word-break: keep-all;
}
.pricing-topbar__nav a[aria-current="page"],
.pricing-topbar__nav a:hover {
  color: var(--brand);
}
.pricing-main {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 3vw, 36px) 56px;
  flex: 1;
}
.pricing-hero {
  word-break: keep-all;
  overflow-wrap: break-word;
}
.pricing-hero__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: color-mix(in srgb, var(--brand) 75%, var(--color-white-a55));
}
.pricing-hero__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 4.8vw, 3.15rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.28;
  color: var(--color-white);
  max-width: none;
  word-break: keep-all;
}
.pricing-hero__lead {
  margin: 0 0 20px;
  max-width: 52em;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-white-a78);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.pricing-hero__lead strong { color: var(--color-white-a94); font-weight: 700; }
.pricing-hero__proof {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 42em;
}
.pricing-hero__proof li {
  position: relative;
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--color-white-a72);
  font-size: 0.92rem;
  line-height: 1.6;
  word-break: keep-all;
}
.pricing-hero__proof li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 80%, white);
}
.pricing-hero__proof strong {
  color: var(--color-white-a92);
  font-weight: 700;
}
.pricing-hero__density {
  margin: 0 0 36px;
  max-width: 40em;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-white-a55, rgba(255,255,255,0.55));
}
.pricing-hero__density strong { color: var(--color-white-a72); font-weight: 700; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.pricing-grid--3 {
  grid-template-columns: repeat(3, minmax(280px, 1fr));
}
.pricing-grid--ladder {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1080px) {
  .pricing-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-grid--3 .pricing-card--pro { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .pricing-grid,
  .pricing-grid--3,
  .pricing-grid--ladder { grid-template-columns: 1fr; }
  .pricing-grid--3 .pricing-card--pro { grid-column: auto; }
  .pricing-topbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 16px;
    padding: 12px 16px;
  }
  .pricing-topbar__nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 12px;
    width: 100%;
    max-width: none;
  }
  .pricing-topbar__nav a {
    font-size: 0.64rem;
  }
  .pricing-hero__title {
    font-size: clamp(1.85rem, 7.2vw, 2.45rem);
    line-height: 1.28;
  }
  .pricing-hero__lead,
  .pricing-hero__density,
  .pricing-hero__proof li {
    font-size: 0.95rem;
  }
  .pricing-hero__lead { max-width: none; }
  .pricing-hero__proof { max-width: none; }
  .pricing-card {
    padding: 22px 18px 20px;
  }
  .pricing-main {
    padding-top: 28px;
  }
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px 26px 24px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--color-white-a14));
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 55%),
    linear-gradient(180deg, #141821, #0c0e14 70%);
  box-shadow:
    inset 0 1px 0 var(--color-white-a10),
    0 18px 40px var(--color-black-a40);
  overflow: visible;
}
.pricing-card--pro {
  border-color: color-mix(in srgb, var(--brand) 48%, var(--color-white-a18));
  box-shadow:
    inset 0 1px 0 var(--color-white-a12),
    0 22px 48px rgba(235, 104, 52, 0.12),
    0 18px 40px var(--color-black-a40);
}
.pricing-card--premium {
  border-color: color-mix(in srgb, #c9a46a 55%, var(--color-white-a18));
  box-shadow:
    inset 0 1px 0 var(--color-white-a12),
    0 22px 48px rgba(201, 164, 106, 0.14),
    0 18px 40px var(--color-black-a40);
}
.pricing-card--premium::before {
  background: linear-gradient(90deg, transparent, #c9a46a, transparent);
}
.pricing-card--premium .pricing-card__kicker {
  color: #d4b67a;
}
.pricing-card::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
}
.pricing-card__kicker {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--brand);
}
.pricing-card__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--color-white);
}
.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
}
.pricing-card--free {
  border-color: var(--color-white-a16);
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, var(--color-white-a08), transparent 55%),
    linear-gradient(180deg, #12151c, #0c0e14 70%);
}
.pricing-card--free .pricing-card__kicker {
  color: var(--color-white-a55);
}
.pricing-card__amount {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--color-white);
  line-height: 1;
}
.pricing-card__amount--sm {
  font-size: clamp(2rem, 4.5vw, 2.6rem);
}
.pricing-card__amount--sm:not(:has(+ .pricing-card__unit)) {
  letter-spacing: -0.03em;
}
.pricing-pack {
  margin: 12px 0 32px;
}
.pricing-pack__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
  gap: 20px 28px;
  align-items: center;
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid var(--color-white-a14);
  background:
    radial-gradient(ellipse 65% 90% at 100% 0%, rgba(235, 104, 52, 0.16), transparent 58%),
    linear-gradient(180deg, #171b24, #10131a 80%);
}
.pricing-pack__kicker {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: #ff8d38;
}
.pricing-pack__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-white);
}
.pricing-pack__lead {
  margin: 0;
  max-width: 36em;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-white-a88);
}
.pricing-pack__buy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  padding: 14px 14px 12px;
  border-radius: 12px;
  border: 1px solid var(--color-white-a12);
  background: rgba(0, 0, 0, 0.28);
}
.pricing-pack__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.pricing-pack__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-left: auto;
}
.pricing-pack__amount {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--color-white);
  line-height: 1;
}
.pricing-pack__unit {
  font-size: 0.8rem;
  color: var(--color-white-a60);
}
.pricing-pack__qty-label {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--color-white-a90);
}
.pricing-pack__qty-hint {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-white-a50);
}
.pricing-pack__pack-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(235, 104, 52, 0.45);
  background: rgba(235, 104, 52, 0.18);
  color: #ffc4a0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pricing-pack__cta {
  width: auto;
  min-width: 104px;
  margin: 0;
  padding: 0 16px;
  min-height: 40px;
  font-size: 0.88rem;
}
.token-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--color-white-a22);
  border-radius: var(--radius-full);
  background: var(--color-white-a08);
  overflow: hidden;
}
.token-qty__btn {
  min-width: 38px;
  min-height: 38px;
  border: none;
  background: transparent;
  color: var(--color-white);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 650;
  cursor: pointer;
  line-height: 1;
}
.token-qty__btn:hover {
  background: var(--color-white-a10);
}
.token-qty__input {
  width: 48px;
  min-height: 38px;
  border: none;
  border-left: 1px solid var(--color-white-a16);
  border-right: 1px solid var(--color-white-a16);
  background: transparent;
  color: var(--color-white);
  text-align: center;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: default;
  -moz-appearance: textfield;
}
.token-qty__input::-webkit-outer-spin-button,
.token-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
@keyframes pack-pulse {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.06); filter: brightness(1.25); }
  100% { transform: scale(1); filter: brightness(1); }
}
.is-pack-pulse {
  animation: pack-pulse 0.55s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .is-pack-pulse {
    animation: none;
  }
}
.pricing-pack__price.is-pack-pulse .pricing-pack__amount,
.token-buy__price.is-pack-pulse {
  color: #ffd2b0;
}
@media (max-width: 860px) {
  .pricing-pack__inner {
    grid-template-columns: 1fr;
  }
  .pricing-pack__price {
    margin-left: 0;
  }
  .pricing-pack__controls {
    width: 100%;
  }
  .pricing-pack__cta {
    margin-left: auto;
  }
}
.pricing-blur-demo {
  position: relative;
  margin: 0 0 14px;
  min-height: 72px;
  border-radius: 10px;
  border: 1px solid var(--color-white-a10);
  overflow: hidden;
  background: #161a22;
}
.pricing-blur-demo__plain {
  padding: 18px 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-white-a40);
  filter: blur(5px);
  user-select: none;
}
.pricing-blur-demo__veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #0a0c12 35%, transparent);
  backdrop-filter: blur(1px);
}
.pricing-blur-demo__veil span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, #0a0c12 70%, transparent);
}
.pricing-roadmap {
  margin-top: 28px;
  padding: 20px 0 0;
  border-top: 1px solid var(--color-white-a10);
}
.pricing-roadmap__list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pricing-roadmap__list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-white-a12);
  background: var(--color-white-a04);
  font-size: 0.82rem;
  color: var(--color-white-a85);
}
.pricing-roadmap__list li span {
  font-family: var(--font-display);
  font-weight: 650;
}
.pricing-roadmap__list li b {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.pricing-roadmap__list li.is-live {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--color-white-a12));
}
.pricing-roadmap__list li.is-live b { color: var(--brand); }
.pricing-roadmap__list li.is-soon b { color: var(--color-white-a45); }
.pricing-roadmap__note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-white-a50);
}
.pricing-card__unit {
  font-size: 0.95rem;
  color: var(--color-white-a55);
}
.pricing-card__note {
  margin: 0 0 22px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-white-a45);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.pricing-card__list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 12px;
  flex: 1;
}
.pricing-card__list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-white-a85);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.pricing-card__list b { color: var(--color-white); font-weight: 700; }
.pricing-card__mark {
  width: 8px;
  height: 8px;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand) 55%, transparent);
}
.pricing-card__quota {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 18px;
}
.pricing-quota {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 8px 7px;
  border-radius: 8px;
  border: 1px solid var(--color-white-a10);
  background: var(--color-white-a04);
}
.pricing-quota__label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white-a55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pricing-quota__value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.pricing-quota__value span {
  margin-left: 1px;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--color-white-a45);
}
.pricing-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: auto;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #1a0e05;
  font-weight: 750;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: background 0.2s ease, transform 0.2s var(--ease-out-back);
}
.pricing-card__cta:hover {
  background: #ff8d38;
  transform: translateY(-1px);
}
.pricing-card__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.pricing-card__footnote {
  margin: 12px 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--color-white-a45);
  text-align: center;
}
.pricing-card__legal {
  margin: 14px 0 0;
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--color-white-a50);
  text-align: left;
}
.pricing-card__legal b { color: var(--color-white-a78); font-weight: 650; }
.pricing-card__legal a {
  color: color-mix(in srgb, var(--brand) 82%, #fff);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pricing-card__legal a:hover { color: var(--brand); }
button.pricing-card__cta {
  width: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.pricing-card__quota--3,
.pricing-card--pro .pricing-card__quota,
.pricing-card--premium .pricing-card__quota {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pricing-card__note b { color: var(--color-white-a72); font-weight: 650; }

/* --- Logout confirm modal ----------------------------------------------- */
body.confirm-open { overflow: hidden; }
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
}
.confirm-modal[hidden] { display: none !important; }
.confirm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #05060a 68%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.confirm-modal__panel {
  position: relative;
  width: min(360px, 100%);
  padding: 22px 20px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #161a22, #0c0e14 80%);
  box-shadow: 0 24px 48px var(--color-black-a40);
  color: #f3f5f8;
  text-align: center;
}
.confirm-modal:not([hidden]) .confirm-modal__panel {
  animation: luxe-settle 260ms var(--ease-luxe) both;
}
.confirm-modal__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: 0;
}
.confirm-modal__desc {
  margin: 0 0 18px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-white-a72);
}
.confirm-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.confirm-modal__actions .btn {
  min-height: 36px;
  min-width: 7.5rem;
}
.confirm-modal__actions .btn-ghost {
  background: color-mix(in srgb, var(--color-white) 8%, transparent);
  color: var(--color-white-a72);
  border: 1px solid var(--color-white-a14);
}
.confirm-modal__actions .btn-ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-white) 14%, transparent);
  color: #f3f5f8;
}

/* --- AI report modal ---------------------------------------------------- */
body.ai-report-open { overflow: hidden; }
.ai-report-modal__panel {
  width: min(720px, calc(100vw - 28px));
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
}
.ai-report-modal:not([hidden]) .ai-report-modal__panel {
  animation: luxe-settle 260ms var(--ease-luxe) both;
}
.ai-report-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ai-report-modal__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: #d4b67a;
}
.ai-report-modal__meta {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--color-white-a55, rgba(255,255,255,0.55));
}
.ai-report-modal__anchor {
  margin: 12px 16px 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--color-white-a14));
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  font-size: 0.76rem;
  color: var(--color-white-a72);
  text-align: left;
}
.ai-report-modal__body {
  overflow: auto;
  flex: 1;
  min-height: 180px;
  max-height: min(58vh, 560px);
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #fff 96%, #0c1b2a);
  color: #15202b;
  border: 1px solid rgba(255,255,255,0.12);
  line-height: 1.65;
  font-size: 0.92rem;
  text-align: left;
}
.ai-report-modal__body h2,
.ai-report-modal__body h3,
.ai-report-modal__body h4 {
  margin: 1em 0 0.4em;
  letter-spacing: 0;
  line-height: 1.3;
}
.ai-report-modal__body h2 { font-size: 1.15rem; }
.ai-report-modal__body h3 { font-size: 1.02rem; }
.ai-report-modal__body h4 { font-size: 0.95rem; }
.ai-report-modal__body p { margin: 0 0 0.75em; }
.ai-report-modal__body ul {
  margin: 0 0 0.9em;
  padding-left: 1.2em;
}
.ai-report-modal__body li { margin: 0.25em 0; }
.ai-report-modal__actions {
  margin-top: 14px;
  flex-wrap: wrap;
}

/* --- Checkout modal (KakaoPay review flow) ------------------------------- */
body.checkout-open { overflow: hidden; }
.checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}
.checkout-modal[hidden] { display: none !important; }
.checkout-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #05060a 72%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.checkout-modal__panel {
  position: relative;
  width: min(440px, 100%);
  max-height: min(90dvh, 720px);
  overflow: auto;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--color-white-a14));
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 122, 24, 0.14), transparent 55%),
    linear-gradient(180deg, #161a22, #0c0e14 72%);
  box-shadow:
    inset 0 1px 0 var(--color-white-a10),
    0 28px 64px var(--color-black-a40);
  color: #f3f5f8;
}
.checkout-modal:not([hidden]) .checkout-modal__panel {
  animation: luxe-settle 260ms var(--ease-luxe) both;
}
.checkout-modal__head {
  position: relative;
  padding: 22px 22px 0;
}
.checkout-modal__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--brand);
}
.checkout-modal__title {
  margin: 0 36px 0 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--color-white);
}
.checkout-modal__close {
  position: absolute;
  top: 16px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: var(--color-white-a06);
  color: var(--color-white-a72);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.checkout-modal__close:hover {
  background: var(--color-white-a10);
  color: var(--color-white);
}
.checkout-modal__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.checkout-modal__body { padding: 18px 22px 22px; }
.checkout-summary {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--color-white-a10);
  background: var(--color-white-a04);
}
.checkout-summary__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.checkout-summary__label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white-a45);
  padding-top: 0.2em;
}
.checkout-summary__value {
  margin: 0;
  text-align: right;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--color-white-a92);
  line-height: 1.4;
}
.checkout-summary__row--price {
  padding-top: 12px;
  border-top: 1px solid var(--color-white-a10);
  align-items: baseline;
}
.checkout-summary__price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-white);
  line-height: 1;
}
.checkout-summary__price span {
  margin-left: 4px;
  font-family: var(--font-body, inherit);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-white-a55);
  letter-spacing: 0;
}
.checkout-modal__digital {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--brand) 40%, var(--color-white-a14));
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--color-white-a85);
  text-align: center;
}
.checkout-modal__terms-note {
  margin: 14px 0 18px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-white-a55);
}
.checkout-modal__terms-note a {
  color: color-mix(in srgb, var(--brand) 82%, #fff);
  text-underline-offset: 2px;
}
.checkout-modal__terms-note a:hover { color: var(--brand); }
.checkout-pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: var(--radius-sm);
  background: #fee500;
  color: #191600;
  font-weight: 750;
  font-size: 1rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.18s var(--ease-out-back);
}
.checkout-pay-btn:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}
.checkout-pay-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.checkout-pay-btn__mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #191600;
  color: #fee500;
  font-size: 0.62rem;
  font-weight: 800;
}
.checkout-modal__hint {
  margin: 10px 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--color-white-a45);
  text-align: center;
}
.checkout-modal__hint a {
  color: var(--color-white-a70);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.checkout-modal__hint a:hover { color: var(--color-white); }

.token-buy__notice {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-white-a12);
  background: var(--color-white-a06);
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--color-white-a72);
  text-align: left;
}
.token-buy__notice b {
  color: var(--color-white-a92);
  font-weight: 650;
}
.token-buy__summary {
  padding: 12px 14px;
}
.token-buy__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.token-buy__price {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-white);
}
.token-buy__price span:last-child {
  margin-left: 4px;
  font-size: 0.78rem;
  font-weight: 550;
  color: var(--color-white-a55);
}
.token-buy__meta {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 0.8rem;
  color: var(--color-white-a78);
}
.token-qty--light {
  border-color: var(--line);
  background: var(--color-white);
}
.token-qty--light .token-qty__btn {
  color: var(--text);
}
.token-qty--light .token-qty__btn:hover {
  background: var(--paper-2);
}
.token-qty--light .token-qty__input {
  color: var(--text);
  border-left-color: var(--line);
  border-right-color: var(--line);
}

.pay-result {
  text-align: left;
}
.pay-result__eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--brand);
}
.pay-result__detail {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: var(--color-white-a55);
  word-break: break-all;
}
.pay-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  align-items: center;
}
.pay-result__actions .pricing-card__cta {
  display: inline-flex;
  width: auto;
  min-width: 140px;
  text-decoration: none;
}
.pay-result__secondary {
  color: var(--color-white-a70);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pay-result__secondary:hover {
  color: var(--color-white);
}

/* --- Intent SEO landings ------------------------------------------------ */
.intent-page__main { width: min(820px, 100%); }
.intent-page__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 18px 0 8px;
}
.intent-page__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #111;
  font-weight: 750;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.intent-page__cta:hover { background: #ff8d38; color: #111; }
.intent-page__cta--ghost {
  background: transparent;
  border: 1px solid var(--color-white-a22);
  color: var(--color-white-a88);
}
.intent-page__cta--ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: transparent;
}
.intent-page__related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 20px;
}
.intent-page__related a {
  font-size: 0.88rem;
}
.intent-page__faq {
  margin-top: 8px;
}

/* --- Legal pages (terms / privacy / refund) ----------------------------- */
.legal-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 40% at 50% -10%, rgba(255, 122, 24, 0.12), transparent 55%),
    #07080c;
  color: #f3f5f8;
}
.legal-main {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) clamp(20px, 3vw, 32px) 56px;
  flex: 1;
}
.legal-main h1 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--color-white);
}
.legal-main__eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brand);
}
.legal-main__lead {
  margin: 0 0 28px;
  padding: 16px 18px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-white-a90);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border-left: 2px solid var(--brand);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.legal-main__meta {
  margin: 0 0 28px;
  font-size: 0.82rem;
  color: var(--color-white-a50);
}
.legal-main h2 {
  margin: 28px 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-white-a92);
}
.legal-main p,
.legal-main li {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-white-a68);
}
.legal-main p { margin: 0 0 12px; }
.legal-main ul,
.legal-main ol {
  margin: 0 0 12px;
  padding-left: 1.2rem;
}
.legal-main li + li { margin-top: 0.45em; }
.legal-main a {
  color: color-mix(in srgb, var(--brand) 82%, #fff);
  text-underline-offset: 2px;
}
.legal-main a:hover { color: var(--brand); }
/* Intent CTA sits inside .legal-main — keep label black on brand fill */
.legal-main a.intent-page__cta {
  color: #111;
  text-decoration: none;
}
.legal-main a.intent-page__cta:hover {
  color: #111;
  background: #ff8d38;
}
.legal-main a.intent-page__cta--ghost {
  color: var(--color-white-a88);
  background: transparent;
}
.legal-main a.intent-page__cta--ghost:hover {
  color: var(--brand);
  background: transparent;
}
.legal-main strong {
  color: var(--color-white-a90);
  font-weight: 650;
}
.legal-biz {
  display: grid;
  gap: 8px;
  margin: 14px 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-white-a10);
  background: var(--color-white-a04);
  font-size: 0.84rem;
}
.legal-biz > div {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 8px;
}
.legal-biz dt {
  margin: 0;
  color: var(--color-white-a40);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}
.legal-biz dd {
  margin: 0;
  color: var(--color-white-a78);
  word-break: keep-all;
}
.legal-table-wrap {
  margin: 12px 0 16px;
  overflow-x: auto;
  border: 1px solid var(--color-white-a10);
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  line-height: 1.45;
}
.legal-table th,
.legal-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-white-a08);
  vertical-align: top;
}
.legal-table th {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--color-white-a45);
  background: var(--color-white-a04);
  font-weight: 500;
}
.legal-table td { color: var(--color-white-a72); }
.legal-table tr:last-child td { border-bottom: none; }

.pricing-aside {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--color-white-a10);
}
.pricing-aside__title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--color-white-a50);
}
.pricing-faq {
  margin: 0;
  display: grid;
  gap: 16px;
}
.pricing-faq dt {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--color-white-a92);
  font-size: 0.92rem;
}
.pricing-faq dd {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-white-a58);
}
.pricing-faq a {
  color: color-mix(in srgb, var(--brand) 82%, #fff);
  text-underline-offset: 2px;
}
.pricing-faq a:hover { color: var(--brand); }

/* This must follow the base footer rules: long business fields need one readable
   column on narrow screens while pricing quota chips remain side by side. */
@media (max-width: 560px) {
  .site-footer__biz {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }
  .site-footer__biz-wide { grid-column: auto; }
  .legal-biz > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* —— Google Ads 캠페인 준비·관리 —— */
.google-draft-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.google-seed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
}
.google-seed__hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}
@media (min-width: 900px) {
  .google-seed {
    grid-template-columns: 1.4fr 1fr 0.7fr 0.9fr;
  }
}
@media (max-width: 560px) {
  .google-seed {
    grid-template-columns: 1fr;
    padding: 12px;
  }
}
.google-seed__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.google-seed__label {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.google-seed__input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  font: inherit;
  background: var(--paper);
  color: var(--text);
}
.google-seed__input:focus {
  outline: 2px solid color-mix(in srgb, #4285f4 45%, transparent);
  outline-offset: 1px;
}
.google-forecast-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--control-gap-y) var(--control-gap-x);
  margin-bottom: 12px;
}
.google-themes {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.google-theme-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.google-theme-card__title {
  margin: 0 0 8px;
  font-size: 14px;
}
.google-theme-card__kws {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.google-variants__label {
  font-size: 12px;
  color: var(--muted);
  margin-right: 8px;
  align-self: center;
}
#googleVariants.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--control-gap-y) var(--control-gap-x);
  align-items: center;
}
#googleRelatedBody tr.is-clickable {
  cursor: pointer;
}
#googleRelatedBody tr.is-clickable:hover {
  background: color-mix(in srgb, #4285f4 8%, transparent);
}
#secGoogle .chart-frame {
  position: relative;
  width: 100%;
  min-height: 240px;
  overflow: hidden;
  margin-top: 8px;
}
@media (max-width: 560px) {
  #secGoogle .chart-frame {
    min-height: 220px;
  }
}

/* 사이트 공지 — 이커머스형 팝업 */
.site-notice {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.site-notice[hidden] {
  display: none !important;
}
.site-notice__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, 0.58);
  backdrop-filter: blur(2px);
}
.site-notice__card {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  padding: 28px 24px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 20, 30, 0.08);
  box-shadow: 0 28px 64px rgba(8, 12, 20, 0.28);
  animation: site-notice-in 220ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
.site-notice__kicker {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--primary);
}
.site-notice__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--ink);
}
.site-notice__body {
  margin: 0 0 22px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
  max-height: min(42vh, 280px);
  overflow: auto;
}
.site-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.site-notice__snooze {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 0;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--muted-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-notice__snooze:hover {
  color: var(--text);
}
.site-notice__ok {
  min-width: 108px;
  margin-left: auto;
}
.site-notice__x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted-2);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.site-notice__x:hover {
  background: rgba(15, 20, 30, 0.06);
  color: var(--text);
}
body.site-notice-open {
  overflow: hidden;
}
@keyframes site-notice-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-notice__card {
    animation: none;
  }
}