/* ── Mintlify-inspired Design System ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Colors */
  --bg:          #ffffff;
  --text:        #0d0d0d;
  --text-2:      #333333;
  --text-3:      #666666;
  --text-4:      #888888;
  --border:      rgba(0,0,0,0.05);
  --border-md:   rgba(0,0,0,0.08);
  --border-dark: rgba(0,0,0,0.12);
  --gray-50:     #fafafa;
  --gray-100:    #f5f5f5;
  --gray-200:    #e5e5e5;
  --accent:      #17a06f;
  --accent-lt:   #d9efe3;
  --accent-dk:   #0a7d57;
  --red:         #d45656;
  --red-lt:      #fde8e8;
  --blue:        #3772cf;
  --blue-lt:     #e8f0fc;
  --amber:       #c37d0d;
  --amber-lt:    #fef3dc;

  /* Radius */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-pill: 9999px;

  /* Shadow */
  --shadow:     rgba(0,0,0,0.03) 0px 2px 4px;
  --shadow-btn: rgba(0,0,0,0.06) 0px 1px 2px;

  /* Layout */
  --top-h:  52px;
  --nav-h:  60px;
  --dsb-w:  220px; /* desktop sidebar width */
  --max-w:  416px; /* modal/toast max-width */

  /* Market code colors (unified across all pages) */
  --mkt-ks: var(--accent-dk);  /* KOSPI = 민트 */
  --mkt-kq: #8b5cf6;            /* KOSDAQ = 보라 */

  /* Surface overlays (used for sticky/translucent bars) — overridden in dark theme */
  --bg-bar:   rgba(255,255,255,0.92);
  --bg-panel: rgba(255,255,255,0.96);
}

/* ── Dark theme (soft / slightly brighter tone, not pure black) ───────────── */
:root[data-theme="dark"] {
  --bg:          #20242b;
  --text:        #d6dade;
  --text-2:      #c9ccd3;
  --text-3:      #9aa1ab;
  --text-4:      #777d88;
  --border:      rgba(255,255,255,0.06);
  --border-md:   rgba(255,255,255,0.10);
  --border-dark: rgba(255,255,255,0.16);
  --gray-50:     #272b33;
  --gray-100:    #2e333c;
  --gray-200:    #3a3f4a;
  --accent:      #1c5743;
  --accent-dk:   #5ccfa0;
  --accent-lt:   rgba(24,226,153,0.10);
  --red-lt:      rgba(212,86,86,0.18);
  --blue-lt:     rgba(55,114,207,0.18);
  --amber-lt:    rgba(195,125,13,0.20);
  --shadow:      rgba(0,0,0,0.25) 0px 2px 6px;
  --shadow-btn:  rgba(0,0,0,0.30) 0px 1px 2px;
  --bg-bar:      rgba(32,36,43,0.88);
  --bg-panel:    rgba(39,43,51,0.96);
  color-scheme: dark;
}

/* Shared semantic tokens (light values — overridden per theme below) */
:root {
  --bg-card:     #f5f6f8;
  --bg-elev:     rgba(255,255,255,0.7);
  --bg-elev-2:   rgba(255,255,255,0.6);
  --text-1:      var(--text);
  --zebra-odd:   #f3f6fb;
  --zebra-hover: #e4ecf7;
  --row-hover:   rgba(0,0,0,0.035);
  --chip-bg:     #f1f5f9;
  --chip-fg:     #64748b;
  --cat-mix-base: #fff;
  --hero-bg:     linear-gradient(160deg, var(--accent-lt) 0%, #ffffff 55%);
  --hero-glow:   radial-gradient(circle, rgba(24,226,153,.15) 0%, transparent 70%);
  --btn-primary-bg: #0d0d0d;
  --btn-primary-fg: #ffffff;
  --on-accent:   #ffffff;
  --cat-bg:       color-mix(in srgb, var(--cat-color, #888) 12%, var(--cat-mix-base));
  --cat-bg-hover: color-mix(in srgb, var(--cat-color, #888) 20%, var(--cat-mix-base));
  --up:          #e53935;
  --dn:          #1e88e5;
  --fin-neg:     #2563eb;
  --nxt-bg:      #fef3c7;
  --nxt-fg:      #92400e;
  --score-hi-bg: #dcfce7;
  --score-hi-fg: #166534;
  --save-bg:     #fff8e1;
  --save-fg:     #f9a825;
  --save-bg-2:   #ffe082;
  --save-fg-2:   #b76d00;
}
:root[data-theme="dark"] {
  --bg-card:     #2a2f38;
  --bg-elev:     rgba(255,255,255,0.04);
  --bg-elev-2:   rgba(255,255,255,0.03);
  --zebra-odd:   #262a32;
  --zebra-hover: #323846;
  --row-hover:   rgba(255,255,255,0.05);
  --chip-bg:     #2e333c;
  --chip-fg:     #9aa1ab;
  --cat-mix-base: #2a2f38;
  --hero-bg:     var(--bg);
  --hero-glow:   none;
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: #dde1e6;
  --on-accent:   #dde1e6;
  --cat-bg:       var(--bg-card);
  --cat-bg-hover: var(--zebra-hover);
  --up:          #ff6868;
  --dn:          #60a5fa;
  --fin-neg:     #7eb3ff;
  --score-hi-bg: rgba(24,226,153,0.08);
  --score-hi-fg: #6db89a;
  --mkt-ks:      #6db89a;
  --mkt-kq:      #a090c7;
  --nxt-bg:      rgba(251,191,36,0.18);
  --nxt-fg:      #fbbf24;
  --save-bg:     rgba(251,191,36,0.18);
  --save-fg:     #fbbf24;
  --save-bg-2:   rgba(251,191,36,0.28);
  --save-fg-2:   #fde047;
}

html, body {
  height: 100%;
  width: 100%;
  background: var(--bg);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: calc(16px * var(--font-scale, 1));
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
/* 사용자 글씨 크기 레벨 — 모든 font-size가 calc(Xpx * var(--font-scale, 1))로 스케일됨
   → 브라우저가 실제 폰트 크기로 정확히 렌더 (zoom/transform 보간 없음, 모든 레벨에서 크리스프) */

/* 글씨 크기 5단계 세그먼트 컨트롤 (설정 페이지) */
.fs-seg { display: flex; gap: 4px; padding: 0; }
.settings-fs-wrap { display: flex; flex-direction: column; gap: 10px; padding: 10px 16px 14px; }
.settings-fs-row { display: flex; flex-direction: column; gap: 6px; }
.settings-fs-label { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.settings-fs-dot { color: var(--accent-dk); font-size: 10px; }
.fs-seg-btn {
  flex: 1; padding: 10px 0; border: 1px solid var(--border-md);
  background: var(--bg); border-radius: var(--r-sm);
  cursor: pointer; font-family: inherit; color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  transition: all .12s; line-height: 1;
}
.fs-seg-btn:hover { border-color: var(--accent); }
.fs-seg-btn.active { background: var(--accent-lt); border-color: var(--accent); color: var(--accent-dk); font-weight: 700; }
.fs-seg-btn > span { font-weight: 600; }
.fs-seg-btn:nth-child(1) > span { font-size: calc(11px * var(--font-scale, 1)); }
.fs-seg-btn:nth-child(2) > span { font-size: calc(12px * var(--font-scale, 1)); }
.fs-seg-btn:nth-child(3) > span { font-size: calc(14px * var(--font-scale, 1)); }
.fs-seg-btn:nth-child(4) > span { font-size: calc(15px * var(--font-scale, 1)); }
.fs-seg-btn:nth-child(5) > span { font-size: calc(17px * var(--font-scale, 1)); }
.fs-seg-btn:nth-child(6) > span { font-size: calc(18px * var(--font-scale, 1)); }
.fs-seg-btn:nth-child(7) > span { font-size: calc(20px * var(--font-scale, 1)); }

/* ── App Shell ────────────────────────────────────────────────────────────── */
#app {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: row;
  background: var(--bg);
}

/* Desktop sidebar — hidden on mobile/tablet */
.desktop-sidebar { display: none; }

/* Main area fills all remaining space */
.main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}

/* ── Desktop Layout (≥ 1024px) ────────────────────────────────────────────── */
@media (min-width: 1024px) {
  #app {
    max-width: 1280px;
    margin: 0 auto;
  }

  /* Show left sidebar */
  .desktop-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--dsb-w);
    min-height: 100dvh;
    border-right: none;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
    flex-shrink: 0;
  }
  /* Vertical divider starts only below the logo (= top-bar height) */
  .desktop-sidebar::after {
    content: '';
    position: absolute;
    right: 0;
    top: var(--top-h);
    bottom: 0;
    width: 1px;
    background: var(--border);
    pointer-events: none;
  }

  /* Hide mobile nav + hamburger */
  .bottom-nav   { display: none !important; }
  #btn-hamburger { display: none !important; }

  /* Top bar spans only main area */
  .top-bar {
    position: sticky;
    top: 0;
  }

  /* Desktop: hide center logo (sidebar already shows the brand), push search to right */
  .top-logo { display: none; }
  #btn-search-icon { margin-left: auto; }

  /* Main content padding adjustment */
  #main { padding-bottom: 32px; }

  /* Card grid: 3 cols on desktop */
  .card-grid { grid-template-columns: repeat(3, 1fr); }

  /* Wider hero */
  .hero { padding: 40px 32px 14px; }
  .hero-title { font-size: calc(36px * var(--font-scale, 1)); letter-spacing: -0.8px; }

  /* Wider forms */
  .screen-form, .analytics-picker-wrap { max-width: 640px; }
  .metric-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Desktop Sidebar Nav ─────────────────────────────────────────────────── */
.desktop-sidebar {
  background: var(--bg);
  padding: 0;
}
.dsb-logo {
  font-size: calc(18px * var(--font-scale, 1)); font-weight: 600; letter-spacing: -0.4px;
  height: var(--top-h);
  display: flex; align-items: center;
  padding: 0 20px;
  color: var(--text);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.dsb-nav {
  padding: 12px;
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
}
.dsb-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  border: none; background: none; border-radius: var(--r-sm);
  font-size: calc(14px * var(--font-scale, 1)); font-weight: 500;
  color: var(--text-2); cursor: pointer; text-align: left;
  font-family: inherit; transition: background .12s, color .12s;
}
.dsb-item svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.dsb-item:hover  { background: var(--gray-50); color: var(--text); }
.dsb-item.active { background: var(--accent-lt); color: var(--accent-dk); font-weight: 600; }
.dsb-item.active svg { fill: var(--accent-dk); }
.dsb-footer {
  padding: 16px 20px;
  font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4); line-height: 1.5;
  border-top: 1px solid var(--border);
}

/* ── Side Menu (mobile/tablet overlay) ───────────────────────────────────── */
.side-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.side-overlay.open { opacity: 1; pointer-events: all; }

.side-panel {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  background: var(--bg);
  z-index: 201;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
}
.side-panel.open { transform: translateX(0); }

.side-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.side-logo {
  font-size: calc(18px * var(--font-scale, 1)); font-weight: 600;
  letter-spacing: -0.4px; color: var(--text);
}
.side-close {
  width: 32px; height: 32px;
  border: none; background: var(--gray-100);
  border-radius: var(--r-sm);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.side-close svg { width: 18px; height: 18px; fill: var(--text-3); }

.side-nav {
  padding: 12px 12px;
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
}
.side-nav button {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: none; background: none;
  border-radius: var(--r-sm);
  font-size: calc(15px * var(--font-scale, 1)); font-weight: 500;
  color: var(--text-2);
  cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
}
.side-nav button svg  { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.side-nav button span { font-size: calc(14px * var(--font-scale, 1)); }
.side-nav button:hover,
.side-nav button.active { background: var(--gray-50); color: var(--text); }
.side-nav button.active { font-weight: 600; }

.side-footer {
  padding: 16px 20px;
  font-size: calc(12px * var(--font-scale, 1)); color: var(--text-4);
  border-top: 1px solid var(--border);
  letter-spacing: 0.3px;
}

/* ── Top Bar ──────────────────────────────────────────────────────────────── */
.top-bar {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--top-h);
  background: var(--bg-bar);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  z-index: 100;
  flex-shrink: 0;
  transition: transform .3s ease;
}
.top-bar.hidden { transform: translateY(-100%); }

.top-logo {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: calc(17px * var(--font-scale, 1)); font-weight: 600;
  letter-spacing: -0.4px; color: var(--text);
  pointer-events: none;
}

.top-btn {
  width: 38px; height: 38px;
  border: none; background: none;
  cursor: pointer; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text); transition: background .12s;
}
.top-btn:hover { background: var(--gray-100); }
.top-btn svg { width: 22px; height: 22px; fill: currentColor; }

/* 사용자 프로필 버튼 (top-bar 우측) */
.user-badge {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gray-100); color: var(--text-3);
  border: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.user-badge:hover { background: var(--gray-200); color: var(--text-2); }

/* 테마 토글 버튼 (top-bar 우측, 설정 아이콘 왼쪽) */
.theme-toggle {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gray-100); color: var(--text-3);
  border: none; cursor: pointer; padding: 0; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.theme-toggle:hover { background: var(--gray-200); color: var(--text-2); }
.theme-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.theme-toggle .tt-moon { display: none; }
.theme-toggle .tt-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .tt-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .tt-moon { display: block; }
.theme-toggle + .user-badge { margin-left: 4px; }

/* 알림 벨 버튼 (top-bar 우측, theme-toggle와 user-badge 사이) */
.bell-btn {
  position: relative;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gray-100); color: var(--text-3);
  border: none; cursor: pointer; padding: 0; margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.bell-btn:hover { background: var(--gray-200); color: var(--text-2); }
.bell-btn svg { width: 18px; height: 18px; fill: currentColor; }
.bell-badge {
  position: absolute; top: -2px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.bell-btn + .user-badge { margin-left: 4px; }
.sq-item {
  display: grid; grid-template-columns: 22px 1fr auto auto auto;
  gap: 8px; align-items: center; padding: 6px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
}
.sq-handle { cursor: grab; color: var(--text-4); user-select: none; text-align: center; font-size: 14px; }
.sq-name { padding: 6px 8px; border: 1px solid transparent; background: transparent; border-radius: 6px; font-size: calc(13px * var(--font-scale, 1)); font-weight: 600; min-width: 0; }
.sq-name:hover { border-color: var(--border); background: var(--bg-card); }
.sq-name:focus { outline: none; border-color: var(--accent); background: var(--bg-card); }
.sq-notify-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-3); cursor: pointer; }
.sq-notify-toggle input { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent); }

.nxt-badge {
  display: inline-block; padding: 1px 5px; margin-left: 3px;
  background: var(--nxt-bg); color: var(--nxt-fg); border-radius: 4px;
  font-size: calc(9px * var(--font-scale, 1)); font-weight: 700;
  vertical-align: middle; letter-spacing: 0.5px;
}
.user-badge svg { width: 18px; height: 18px; fill: currentColor; }

/* 인증 모달 */
.auth-modal { width: 100%; max-width: 360px; }
.auth-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
}
.auth-tab {
  flex: 1; padding: 14px 0; border: none; background: none;
  font-size: calc(15px * var(--font-scale, 1)); font-weight: 600; color: var(--text-3);
  cursor: pointer; font-family: inherit;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .12s;
}
.auth-tab.active { color: var(--accent-dk); border-bottom-color: var(--accent); }
.auth-body {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px;
}
.auth-body .form-input { font-size: calc(14px * var(--font-scale, 1)); }

/* 관심키워드 칩 (클릭으로 필터) */
.kw-chip {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--accent-lt); color: var(--accent-dk);
  font-size: calc(12px * var(--font-scale, 1)); font-weight: 600;
  cursor: pointer; transition: background .12s, transform .08s;
  user-select: none;
}
.kw-chip:hover { background: var(--accent-lt); }
.kw-chip:active { transform: scale(0.96); }
.kw-chip.on { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px rgba(24,226,153,0.25); }
.kw-match { font-size: calc(10px * var(--font-scale, 1)); color: var(--accent-dk); font-weight: 600; }

/* 키워드 관리 모달 */
.kwm-gbar { display:flex; align-items:center; gap:6px; padding:10px 16px 6px; border-bottom:1px solid var(--border); }
.kwm-gtabs { display:flex; gap:4px; flex:1; overflow-x:auto; }
.kwm-gtab {
  padding:5px 10px; border:1px solid var(--border-md); background:var(--bg);
  border-radius:var(--r-pill); font-size:calc(12px * var(--font-scale, 1));
  color:var(--text-3); cursor:pointer; font-family:inherit; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px;
}
.kwm-gtab.on { background:var(--accent-lt); color:var(--accent-dk); border-color:var(--accent); font-weight:600; }
.kwm-gtab .kwm-cnt { background:rgba(0,0,0,0.08); padding:1px 6px; border-radius:9999px; font-size:calc(10px * var(--font-scale, 1)); }
.kwm-gtab.on .kwm-cnt { background:var(--bg-elev); color:var(--accent-dk); }

/* 그룹 관리 모달 */
.grpm-list { display:flex; flex-direction:column; gap:4px; max-height:50dvh; overflow-y:auto; }
.grpm-row { display:flex; align-items:center; gap:6px; padding:0; }
.grpm-name {
  flex:1 1 0; min-width:0;
  padding:4px 8px; border:1px solid var(--border-md); border-radius:6px;
  font-size:calc(12px * var(--font-scale, 1)); font-family:inherit; background:var(--gray-50);
  height:28px; box-sizing:border-box;
}
.grpm-name:focus { outline:none; border-color:var(--accent); background:var(--bg); }
.grpm-cnt {
  flex-shrink:0;
  font-size:calc(10px * var(--font-scale, 1)); color:var(--text-4); min-width:28px; text-align:right;
}
.grpm-del {
  flex-shrink:0;
  width:28px; height:28px; border-radius:6px; border:none; background:rgba(220,38,38,0.08);
  color:var(--red); cursor:pointer; font-size:calc(12px * var(--font-scale, 1)); line-height:1;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.grpm-del:disabled { opacity:0.3; cursor:not-allowed; }
.grpm-del:not(:disabled):hover { background:rgba(220,38,38,0.18); }
.grpm-add-btn {
  flex-shrink:0; width:auto; min-width:56px;
  padding:0 12px; height:28px; border-radius:var(--r-pill); border:none;
  background:var(--text); color: var(--on-accent); font-weight:500; cursor:pointer;
  font-size:calc(12px * var(--font-scale, 1)); font-family:inherit;
  box-shadow:var(--shadow-btn);
}
.grpm-add-btn:hover { opacity:0.85; }
.kwm-list { padding:4px 16px 10px; max-height:50dvh; overflow-y:auto; }
.kwm-row {
  display:flex; align-items:center; gap:6px; padding:4px 0;
  border-bottom:1px solid var(--border); min-height:28px;
}
.kwm-row:last-child { border-bottom:none; }
.kwm-kw { flex:1; font-size:calc(12px * var(--font-scale, 1)); font-weight:500; }
.kwm-move {
  padding:2px 6px; height:24px; border:1px solid var(--border-md); border-radius:6px;
  background:var(--bg); font-size:calc(10px * var(--font-scale, 1)); font-family:inherit;
}
.kwm-del {
  width:24px; height:24px; border-radius:50%; border:none; background:rgba(220,38,38,0.08);
  color:var(--red); cursor:pointer; font-size:calc(11px * var(--font-scale, 1)); line-height:1;
  padding:0; display:inline-flex; align-items:center; justify-content:center;
}
.kwm-del:hover { background:rgba(220,38,38,0.18); }
.kwm-add-row {
  display:flex; align-items:center; gap:6px; padding:8px 16px 4px;
  border-bottom:1px solid var(--border);
}

/* ── Bottom Nav ───────────────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  height: var(--nav-h);
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  display: flex; z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  border: none; background: none;
  cursor: pointer; font-family: inherit;
  color: var(--text-4); font-size: calc(10px * var(--font-scale, 1)); font-weight: 500;
  letter-spacing: 0.2px; transition: color .12s;
}
.nav-item svg { width: 22px; height: 22px; fill: currentColor; }
.nav-item.active { color: var(--text); }
.nav-item.active svg { fill: var(--accent); }

/* ── Main Content ─────────────────────────────────────────────────────────── */
#main {
  flex: 1;
  padding-bottom: calc(var(--nav-h) + 16px);
  min-height: 0;
}

/* Tablet: 3-col card grid */
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: 32px 24px 12px; }
  .hero-title { font-size: calc(32px * var(--font-scale, 1)); letter-spacing: -0.7px; }
}

/* ── Hero Section ─────────────────────────────────────────────────────────── */
.hero {
  background: var(--hero-bg);
  padding: 28px 20px 0;
  position: relative; overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: var(--hero-glow);
  pointer-events: none;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-lt);
  color: var(--accent-dk);
  font-size: calc(11px * var(--font-scale, 1)); font-weight: 600;
  letter-spacing: 0.65px; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
  margin-bottom: 12px;
}
.hero-title {
  font-size: calc(28px * var(--font-scale, 1)); font-weight: 600;
  line-height: 1.2; letter-spacing: -0.6px;
  color: var(--text); margin-bottom: 8px;
}
.hero-sub {
  font-size: calc(14px * var(--font-scale, 1)); color: var(--text-3);
  line-height: 1.6; margin-bottom: 18px;
}
.hero-stats {
  display: flex; gap: 20px;
}
.hero-stat { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-4); }
.hero-stat strong {
  display: block; font-size: calc(18px * var(--font-scale, 1)); font-weight: 600;
  letter-spacing: -0.3px; color: var(--text); margin-bottom: 1px;
}
/* New hero design */
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.hero-date { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-3); margin-bottom: 4px; font-weight: 500; }
.hero-greeting { font-size: calc(22px * var(--font-scale, 1)); font-weight: 700; letter-spacing: -0.5px; color: var(--text-1); margin: 0; }
.hero-market-badge {
  font-size: calc(11px * var(--font-scale, 1)); font-weight: 600; padding: 4px 10px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0;
}
.hero-tagline {
  font-size: calc(13px * var(--font-scale, 1)); color: var(--text-2); line-height: 1.5;
  padding: 10px 12px; background: var(--bg-elev-2);
  border-radius: 10px; backdrop-filter: blur(4px);
}
.hero-tagline-detail { display: block; margin-top: 4px; font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4); font-variant-numeric: tabular-nums; }
.hero-news {
  background: var(--bg-elev); border-radius: 12px; backdrop-filter: blur(4px);
  padding: 6px 0 4px; position: relative;
}
.hero-news-list { list-style: none; margin: 0; padding: 0; }
.hero-news-item {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 14px; cursor: pointer; transition: background .12s;
  border-top: 1px solid var(--border); line-height: 1.4;
}
.hero-news-item:first-child { border-top: none; }
.hero-news-item:hover { background: var(--row-hover); }
.hero-news-title {
  flex: 1; font-size: calc(13px * var(--font-scale, 1)); color: var(--text-2); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.2px;
}
.hero-news-time { font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.hero-news-more { display: flex; justify-content: flex-end; padding: 2px 12px 2px; border-top: 1px solid var(--border); }
.hero-news-more-btn {
  font-size: calc(11px * var(--font-scale, 1)); color: var(--accent-dk); font-weight: 600; background: none; border: none;
  cursor: pointer; font-family: inherit; padding: 4px 6px; border-radius: 6px; transition: background .12s;
}
.hero-news-more-btn:hover { background: var(--accent-lt); }
.hero-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--text);
  color: var(--on-accent); font-size: calc(14px * var(--font-scale, 1)); font-weight: 500;
  padding: 9px 20px; border-radius: var(--r-pill);
  border: none; cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: opacity .15s;
  font-family: inherit;
}
.hero-cta:active { opacity: .85; }

/* Setup prompt card */
.setup-card {
  margin: 20px 16px;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex; gap: 14px; align-items: flex-start;
}
.setup-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--accent-lt);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(20px * var(--font-scale, 1));
}
.setup-text { flex: 1; }
.setup-title { font-size: calc(14px * var(--font-scale, 1)); font-weight: 600; margin-bottom: 4px; }
.setup-desc  { font-size: calc(13px * var(--font-scale, 1)); color: var(--text-3); line-height: 1.5; }
.setup-btn {
  display: inline-block; margin-top: 10px;
  background: var(--text);
  color: var(--on-accent); font-size: calc(13px * var(--font-scale, 1)); font-weight: 500;
  padding: 7px 16px; border-radius: var(--r-pill);
  border: none; cursor: pointer; font-family: inherit;
  box-shadow: var(--shadow-btn); transition: opacity .15s;
}
.setup-btn:active { opacity: .85; }

/* ── Section ──────────────────────────────────────────────────────────────── */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 12px;
}
.section-title {
  font-size: calc(13px * var(--font-scale, 1)); font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-4);
}
.section-link {
  font-size: calc(13px * var(--font-scale, 1)); font-weight: 500;
  color: var(--accent-dk); background: none; border: none;
  cursor: pointer;
}

/* ── Category Chips ───────────────────────────────────────────────────────── */
.chip-row {
  display: flex; gap: 8px;
  padding: 4px 20px 12px;
  overflow-x: auto; scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  font-size: calc(13px * var(--font-scale, 1)); font-weight: 500;
  border: 1px solid var(--border-md);
  background: var(--bg);
  color: var(--text-2);
  cursor: pointer; white-space: nowrap;
  transition: all .15s; box-shadow: var(--shadow-btn);
}
.chip:hover { border-color: var(--border-dark); }
.chip.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--on-accent);
  box-shadow: none;
}

/* ── Stock Card Grid ──────────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 4px 16px 8px;
}

.stock-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--shadow);
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.stock-card:hover { border-color: var(--border-md); }
.stock-card:active { box-shadow: none; }

.stock-card-avatar {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--accent-lt);
  color: var(--accent-dk);
  font-size: calc(14px * var(--font-scale, 1)); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; flex-shrink: 0;
}

.stock-card-name {
  font-size: calc(13px * var(--font-scale, 1)); font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.3; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stock-card-code {
  font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4);
  font-family: 'Geist Mono', 'Courier New', monospace;
  letter-spacing: 0.4px; text-transform: uppercase;
  margin-bottom: 10px;
}
.stock-card-badge {
  display: inline-flex;
  font-size: calc(10px * var(--font-scale, 1)); font-weight: 600;
  padding: 2px 8px; border-radius: var(--r-pill);
  letter-spacing: 0.3px;
}
.badge-Y { background: var(--amber-lt); color: var(--amber); }
.badge-K { background: var(--blue-lt);  color: var(--blue); }
.badge-E { background: var(--gray-100); color: var(--text-3); }

.stock-card-cat-dot {
  position: absolute; top: 12px; right: 12px;
  width: 7px; height: 7px; border-radius: 50%;
}
.stock-card-del {
  position: absolute; bottom: 10px; right: 10px;
  width: 24px; height: 24px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-md); background: var(--bg);
  color: var(--text-4); font-size: calc(14px * var(--font-scale, 1));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity .15s;
}
.stock-card:hover .stock-card-del { opacity: 1; }
.stock-card-del:hover { background: var(--red-lt); border-color: var(--red); color: var(--red); }

/* ── Empty State ──────────────────────────────────────────────────────────── */
.empty-state {
  padding: 56px 24px; text-align: center;
}
.empty-icon { font-size: calc(40px * var(--font-scale, 1)); margin-bottom: 14px; }
.empty-title { font-size: calc(15px * var(--font-scale, 1)); font-weight: 600; margin-bottom: 6px; }
.empty-desc  { font-size: calc(13px * var(--font-scale, 1)); color: var(--text-3); line-height: 1.6; }
.empty-btn {
  margin-top: 16px;
  display: inline-block;
  background: var(--text); color: var(--on-accent);
  font-size: calc(13px * var(--font-scale, 1)); font-weight: 500;
  padding: 9px 22px; border-radius: var(--r-pill);
  border: none; cursor: pointer; font-family: inherit;
  box-shadow: var(--shadow-btn);
}

/* ── Search ───────────────────────────────────────────────────────────────── */
.search-wrap { padding: 16px 16px 8px; }
.search-field {
  position: relative;
}
.search-field svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; fill: var(--text-4); pointer-events: none;
}
.search-input {
  width: 100%;
  padding: 11px 16px 11px 42px;
  border: 1px solid var(--border-md);
  border-radius: var(--r-pill);
  font-size: calc(14px * var(--font-scale, 1)); font-weight: 400;
  background: var(--gray-50); color: var(--text);
  outline: none; font-family: inherit;
  transition: border-color .15s, background .15s;
}
.search-input:focus {
  border-color: var(--accent);
  background: var(--bg);
  outline: 1px solid var(--accent);
}
.search-input::placeholder { color: var(--text-4); }

.search-list { padding: 0 0 8px; }
.search-item {
  display: flex; align-items: center;
  padding: 13px 20px; gap: 12px;
  border-bottom: 1px solid var(--border);
  transition: background .1s; cursor: pointer;
}
.search-item:active { background: var(--gray-50); }
.search-item-ava {
  width: 36px; height: 36px; border-radius: var(--r-sm); flex-shrink: 0;
  background: var(--accent-lt); color: var(--accent-dk);
  font-size: calc(13px * var(--font-scale, 1)); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.search-item-info { flex: 1; min-width: 0; }
.search-item-name { font-size: calc(14px * var(--font-scale, 1)); font-weight: 500; }
.search-item-meta {
  font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4); margin-top: 2px;
  font-family: 'Geist Mono','Courier New',monospace;
  letter-spacing: 0.3px; text-transform: uppercase;
}
.search-item-btn {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-md);
  background: var(--bg); color: var(--text);
  font-size: calc(18px * var(--font-scale, 1)); line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .15s; box-shadow: var(--shadow-btn);
}
.search-item-btn:hover  { border-color: var(--accent); color: var(--accent-dk); }
.search-item-btn:active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.search-item-btn.added { background: var(--accent-lt); border-color: var(--accent); color: var(--accent-dk); font-size: calc(13px * var(--font-scale, 1)); }

/* ── Segment Control ─────────────────────────────────────────────────────── */
.seg-ctrl {
  display: inline-flex;
  background: var(--gray-100);
  border-radius: var(--r-pill);
  padding: 2px;
  gap: 2px;
}
.seg-btn {
  height: 28px; box-sizing: border-box; line-height: 1;
  padding: 0 16px;
  border: none; background: transparent;
  border-radius: var(--r-pill);
  font-size: calc(12px * var(--font-scale, 1)); font-weight: 500;
  color: var(--text-3); cursor: pointer;
  font-family: inherit; transition: all .15s;
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
}
.seg-btn.active {
  background: var(--bg);
  color: var(--text); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ── Watchlist (관심종목) ─────────────────────────────────────────────────── */
.watchlist-group { margin-bottom: 4px; }
.watchlist-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 20px 8px;
}
.watchlist-group-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.watchlist-group-name {
  font-size: calc(12px * var(--font-scale, 1)); font-weight: 600;
  color: var(--text-4); letter-spacing: 0.5px; text-transform: uppercase;
  flex: 1;
}
.watchlist-count {
  font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4);
  background: var(--gray-100);
  padding: 1px 8px; border-radius: var(--r-pill);
}

.mo-section { margin: 4px 16px 0; }
/* 주식시세 (#market-overview 다음에 오는 mo-section)는 환율과 더 떨어지도록 */
#market-overview + .mo-section { margin-top: 28px; }
.mo-section-title { font-size: calc(11px * var(--font-scale, 1)); font-weight: 600; color: var(--text-4); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.mo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 960px) { .mo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mo-item {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  background: var(--bg); display: flex; flex-direction: column; gap: 2px;
  cursor: pointer; transition: all .12s;
  min-width: 0; overflow: hidden;
}
.mo-price { white-space: nowrap; }
.mo-item:hover { border-color: var(--accent); background: var(--bg-card); }
.mo-label { font-size: calc(10px * var(--font-scale, 1)); color: var(--text-4); font-weight: 500; }
.mo-price { font-size: calc(13px * var(--font-scale, 1)); font-weight: 600; font-variant-numeric: tabular-nums; }
.mo-chg { font-size: calc(11px * var(--font-scale, 1)); font-weight: 600; font-variant-numeric: tabular-nums;
  display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 0; align-items: baseline; }
.mo-chg .mo-chg-val, .mo-chg .mo-chg-rate { white-space: nowrap; }
.mo-chg.up { color: var(--up); }
.mo-chg.dn { color: var(--dn); }

.wl-group { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: 8px; }
.mo-section .wl-group { margin: 0 0 8px; }
.wl-group-hdr {
  display: flex; align-items: center; gap: 8px; padding: 5px 12px;
  background: var(--cat-bg);
  cursor: pointer; transition: background .1s;
}
.wl-group-hdr:hover { background: var(--cat-bg-hover); }
.wl-group-name { font-size: calc(13px * var(--font-scale, 1)); font-weight: 600; flex: 1; }
.wl-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-top: 1px solid var(--border);
  cursor: pointer; transition: background .1s; font-size: calc(12px * var(--font-scale, 1)); white-space: nowrap; overflow: hidden; line-height: 1.4;
}
.wl-row:hover { background: var(--gray-50); }
.wl-name { font-weight: 600; margin-right: 0; }
.wl-code { font-size: calc(10px * var(--font-scale, 1)); cursor: help; transition: all .12s; padding: 1px 4px; border-radius: 4px; margin-left: -2px; }
.wl-code-ks { color: var(--mkt-ks); }
.wl-code-kq { color: var(--mkt-kq); }
.wl-code-ks:hover, .wl-code-ks:active { background: var(--accent-lt); }
.wl-code-kq:hover, .wl-code-kq:active { background: #ede7f6; }
.wl-price { margin-left: auto; font-weight: 500; min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.wl-chg-amt { font-size: calc(11px * var(--font-scale, 1)); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.wl-chg-amt.up { color: var(--up); }
.wl-chg-amt.dn { color: var(--dn); }
.wl-chg { font-weight: 600; font-size: calc(11px * var(--font-scale, 1)); min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.wl-chg.up { color: var(--up); }
.wl-chg.dn { color: var(--dn); }
.wl-vol { color: var(--text-4); font-size: calc(10px * var(--font-scale, 1)); min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.wl-detail-row {
  display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 4px 8px; padding: 4px 12px 8px;
  border-top: 1px dashed var(--border); background: var(--gray-50);
  font-size: calc(9px * var(--font-scale, 1)); color: var(--text-4);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wl-detail-row .wl-det-item { flex: 0 0 auto; }
.wl-det-item { display: inline-flex; align-items: baseline; gap: 4px; }
.wl-det-lbl { color: var(--text-4); }
.wl-det-val { color: var(--text-1); font-weight: 500; }
.wl-det-val.up { color: var(--up); }
.wl-det-val.dn { color: var(--dn); }
.wl-news-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 12px 10px;
  border-top: 1px dashed var(--border); background: var(--gray-50);
}
.wl-news-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 6px; border-radius: 4px; text-decoration: none;
  transition: background .12s;
}
.wl-news-item:hover { background: rgba(46, 204, 135, 0.08); }
.wl-news-title { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-1); line-height: 1.35; }
.wl-news-meta { font-size: calc(10px * var(--font-scale, 1)); color: var(--text-4); }
.wl-news-empty { text-align: center; color: var(--text-4); font-size: calc(10px * var(--font-scale, 1)); padding: 6px; }
.cat-mgmt-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); transition: background .12s; }
.cat-mgmt-row:last-child { border-bottom: none; }
.cat-mgmt-row.dragging { background: var(--accent-lt); opacity: 0.85; }
.cat-drag {
  cursor: grab; padding: 0 6px; color: var(--text-4); font-size: calc(14px * var(--font-scale, 1));
  letter-spacing: -2px; user-select: none; touch-action: none;
  display: inline-flex; align-items: center; height: 32px;
}
.cat-drag:active { cursor: grabbing; color: var(--accent-dk); }
.cat-edit-row { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.cat-edit-row:last-child { border-bottom: none; }
.wl-del-btn {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
  background: none; color: var(--text-4); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.wl-del-btn:hover { background: var(--red-lt); color: var(--up); border-color: var(--red); }

/* ── Screening ────────────────────────────────────────────────────────────── */
.screen-form { padding: 20px; }

.screen-info-box {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--amber-lt);
  border: 1px solid rgba(195,125,13,0.15);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.screen-info-icon { font-size: calc(15px * var(--font-scale, 1)); flex-shrink: 0; margin-top: 1px; }
.screen-info-text { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-2); line-height: 1.6; }
.form-group  { margin-bottom: 20px; }
.form-label  { display: block; font-size: calc(13px * var(--font-scale, 1)); font-weight: 600; margin-bottom: 8px; color: var(--text); }
.form-hint   { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-4); margin-top: 5px; line-height: 1.5; }
.form-input, .form-select {
  width: 100%; padding: 11px 16px;
  border: 1px solid var(--border-md);
  border-radius: var(--r-md); font-size: calc(14px * var(--font-scale, 1));
  background: var(--gray-50); color: var(--text);
  outline: none; font-family: inherit; appearance: none;
  transition: border-color .15s, background .15s;
}
.form-input:focus, .form-select:focus {
  border-color: var(--accent); background: var(--bg);
  outline: 1px solid var(--accent);
}

.screen-result-item {
  display: flex; align-items: center;
  padding: 14px 20px; gap: 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .1s;
}
.screen-result-item:active { background: var(--gray-50); }
.screen-rank {
  width: 28px; height: 28px; border-radius: var(--r-pill);
  background: var(--accent-lt); color: var(--accent-dk);
  font-size: calc(12px * var(--font-scale, 1)); font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.screen-name { font-size: calc(14px * var(--font-scale, 1)); font-weight: 500; }
.screen-meta { font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4); margin-top: 2px; }
.screen-income-val { font-size: calc(14px * var(--font-scale, 1)); font-weight: 600; color: var(--accent-dk); text-align: right; }
.screen-income-sub { font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4); text-align: right; margin-top: 1px; }

/* ── Analytics Toolbar ───────────────────────────────────────────────────── */
.analytics-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px 12px;
}
.period-ctrl {
  display: flex; gap: 4px; flex-shrink: 0;
}
.period-btn {
  padding: 6px 12px;
  border: 1px solid var(--border-md);
  border-radius: var(--r-pill);
  background: var(--bg); color: var(--text-3);
  font-size: calc(12px * var(--font-scale, 1)); font-weight: 500;
  cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.period-btn:hover { border-color: var(--border-dark); color: var(--text); }
.period-btn.active {
  background: var(--text); border-color: var(--text);
  color: var(--on-accent);
}

/* ── Financial Table ─────────────────────────────────────────────────────── */
.fin-table-wrap {
  overflow-x: auto;
  padding: 0 0 4px;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar subtle styling */
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}
.fin-table-wrap::-webkit-scrollbar { height: 4px; }
.fin-table-wrap::-webkit-scrollbar-track { background: transparent; }
.fin-table-wrap::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }
.fin-table {
  width: 100%; border-collapse: collapse;
  min-width: 360px; font-size: calc(12px * var(--font-scale, 1));
}
.fin-table th {
  padding: 5px 12px;
  text-align: right; white-space: nowrap;
  font-size: calc(11px * var(--font-scale, 1)); font-weight: 600;
  color: var(--text-3);
  border-bottom: 1px solid var(--border-md);
  background: var(--gray-50);
}
.fin-th-label { text-align: left !important; position: sticky; left: 0; background: var(--gray-50); z-index: 1; min-width: 88px; box-shadow: 2px 0 4px rgba(0,0,0,0.04); }
.fin-section-row td {
  padding: 6px 12px 2px;
  font-size: calc(10px * var(--font-scale, 1)); font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-4); background: var(--bg);
  text-align: left !important;
}
.fin-row-highlight td { background: rgba(24, 226, 153, 0.04) !important; }
.fin-row-highlight.fin-row-loss td { background: rgba(30, 136, 229, 0.04) !important; }
.fin-row-label {
  padding: 5px 12px; white-space: nowrap;
  font-size: calc(12px * var(--font-scale, 1)); color: var(--text-2);
  position: sticky; left: 0; background: var(--bg); z-index: 1;
  border-bottom: 1px solid var(--border);
  box-shadow: 2px 0 4px rgba(0,0,0,0.04);
}
.fin-table td {
  padding: 5px 12px; text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.fin-table tr:last-child td { border-bottom: none; }
.fin-pos { color: var(--accent-dk); font-weight: 500; }
.fin-neg { color: var(--red); font-weight: 500; }
.fin-mono-neg { color: var(--fin-neg); font-weight: 500; }
.fin-nil { color: var(--text-4); }
.fin-unit-note {
  padding: 6px 12px 10px;
  font-size: calc(10px * var(--font-scale, 1)); color: var(--text-4); text-align: right;
}
.chart-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 12px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.chart-section-title {
  font-size: calc(13px * var(--font-scale, 1)); font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-4);
}
.chart-type-ctrl {
  display: flex; gap: 4px;
}
.chart-type-btn {
  padding: 4px 10px;
  font-size: calc(12px * var(--font-scale, 1)); font-weight: 500; font-family: inherit;
  border: 1px solid var(--border-dark);
  border-radius: var(--r-pill);
  background: none; color: var(--text-3);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.chart-type-btn:hover { background: var(--gray-50); color: var(--text); }
.chart-type-btn.active {
  background: var(--accent); color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}

/* ── Analytics ────────────────────────────────────────────────────────────── */
.analytics-picker-wrap { padding: 16px 16px 8px; }
.analytics-label { font-size: calc(12px * var(--font-scale, 1)); font-weight: 500; color: var(--text-4); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }

.analytics-corp-header {
  padding: 20px 20px 0;
  display: flex; align-items: center; gap: 12px;
}
.analytics-corp-ava {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--accent-lt); color: var(--accent-dk);
  font-size: calc(16px * var(--font-scale, 1)); font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.analytics-corp-name { font-size: calc(18px * var(--font-scale, 1)); font-weight: 600; letter-spacing: -0.3px; }
.analytics-corp-code { font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4); margin-top: 2px; font-family: monospace; text-transform: uppercase; letter-spacing: 0.5px; }

.badge-positive {
  display: inline-flex; align-items: center;
  background: var(--accent-lt); color: var(--accent-dk);
  font-size: calc(11px * var(--font-scale, 1)); font-weight: 600;
  padding: 2px 9px; border-radius: var(--r-pill); margin-top: 6px;
}
.badge-negative {
  display: inline-flex; align-items: center;
  background: var(--red-lt); color: var(--red);
  font-size: calc(11px * var(--font-scale, 1)); font-weight: 600;
  padding: 2px 9px; border-radius: var(--r-pill); margin-top: 6px;
}

.metric-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; padding: 16px 16px 0;
}
.metric-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px;
  box-shadow: var(--shadow);
}
.metric-label { font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
.metric-val   { font-size: calc(17px * var(--font-scale, 1)); font-weight: 600; letter-spacing: -0.3px; }
.v-green { color: var(--accent-dk); }
.v-red   { color: var(--red); }
.v-blue  { color: var(--blue); }
.v-text  { color: var(--text); }

.chart-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px;
  margin: 10px 16px 0;
  box-shadow: var(--shadow);
}
.chart-title { font-size: calc(11px * var(--font-scale, 1)); font-weight: 600; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; }
.chart-wrap  { position: relative; height: 170px; }

/* ── Analytics Detail (ad-*) ────────────────────────────────────────────── */
.ad-header { padding: 14px 16px 0; display: flex; align-items: stretch; gap: 10px; }
.ad-back-btn {
  width: 38px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-3); font-size: calc(20px * var(--font-scale, 1));
  cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.ad-back-btn:hover { background: var(--accent-lt); color: var(--accent-dk); border-color: var(--accent); }

.ad-live-btn {
  height: 24px; min-width: 40px; padding: 0 10px; box-sizing: border-box;
  border-radius: 999px; border: none;
  background: #dcfce7; color: #166534; font-size: calc(11px * var(--font-scale, 1)); font-weight: 700;
  cursor: pointer; flex-shrink: 0; transition: all .15s; letter-spacing: 0.5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ad-live-btn.on { background: #dcfce7; color: #166534; }
.ad-live-btn:not(.on) { background: var(--chip-bg); color: var(--chip-fg); }

.ad-fav-btn {
  height: 24px; width: 24px; min-width: 0; padding: 0; box-sizing: border-box;
  border-radius: 999px; border: none;
  background: var(--chip-bg); color: var(--chip-fg);
  cursor: pointer; flex-shrink: 0; transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.ad-fav-btn svg { width: 14px; height: 14px; fill: currentColor; }
.ad-fav-btn:hover { background: var(--nxt-bg); color: var(--nxt-fg); }
.ad-fav-btn.on { background: var(--nxt-bg); color: var(--nxt-fg); }
.ad-fav-btn.on:hover { background: #fde68a; }

.ad-share-btn {
  height: 24px; width: 24px; min-width: 0; padding: 0; box-sizing: border-box;
  border-radius: 999px; border: none;
  background: var(--chip-bg); color: var(--chip-fg);
  cursor: pointer; flex-shrink: 0; transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.ad-share-btn:hover { background: #e0e7ff; color: #4338ca; }
/* favchart 페이지 — 차트 전용 */
.fc-header {
  padding: 10px 12px 8px; border-bottom: 1px solid var(--border); background: var(--bg);
  display: flex; align-items: stretch; gap: 10px;
}
.fc-center { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.fc-name { font-size: calc(20px * var(--font-scale, 1)); font-weight: 700; letter-spacing: -0.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.fc-arrow-tall {
  width: 38px; padding: 0; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-3);
  cursor: pointer; flex-shrink: 0; transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.fc-arrow-tall:hover { background: var(--accent-lt); color: var(--accent-dk); border-color: var(--accent); }
.fc-arrow-tall:active { transform: scale(0.96); }
.fc-price-row { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
.fc-cur-price { font-size: calc(26px * var(--font-scale, 1)); font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.fc-cur-price small { font-size: calc(14px * var(--font-scale, 1)); font-weight: 400; color: var(--text-3); margin-left: 2px; }
.fc-pos-bottom {
  padding: 8px 16px 10px; text-align: right;
  font-size: calc(12px * var(--font-scale, 1)); color: var(--text-3);
  font-variant-numeric: tabular-nums; font-weight: 600;
  border-top: 1px solid var(--border);
}
.ad-code { font-size: calc(13px * var(--font-scale, 1)); color: var(--text-4); font-family: monospace; }
.ad-code.wl-code-ks { color: var(--mkt-ks); cursor: help; background: none !important; padding: 0 !important; }
.ad-code.wl-code-kq { color: var(--mkt-kq); cursor: help; background: none !important; padding: 0 !important; }
.ad-header-right { flex: 1; min-width: 0; }
.ad-header-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ad-name { font-size: calc(20px * var(--font-scale, 1)); font-weight: 700; letter-spacing: -0.3px; }
.ad-code { font-size: calc(13px * var(--font-scale, 1)); color: var(--text-4); font-family: monospace; }
.ad-price-row { display: flex; flex-direction: column; gap: 0; margin-top: -4px; }
.ad-price-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ad-price-nxt .ad-cur-price { font-size: calc(22px * var(--font-scale, 1)); color: var(--text-2); }
.ad-price-tag { font-size: calc(10px * var(--font-scale, 1)); font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--chip-bg); color: var(--chip-fg); letter-spacing: 0.3px; }
.ad-price-tag-nxt { background: rgba(251,191,36,0.18); color: #b45309; }
:root[data-theme="dark"] .ad-price-tag-nxt { color: #fbbf24; }
.ad-nxt-vol { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-3); font-variant-numeric: tabular-nums; }
.ad-cur-price { font-size: calc(26px * var(--font-scale, 1)); font-weight: 700; letter-spacing: -0.5px; }
.ad-cur-price small { font-size: calc(14px * var(--font-scale, 1)); font-weight: 400; color: var(--text-3); }
.ad-chg { font-size: calc(14px * var(--font-scale, 1)); font-weight: 600; }
.ad-chg.up { color: var(--up); }
.ad-chg.dn { color: var(--dn); }
.spinner-sm { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; }

.ad-metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; margin: 12px 16px 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; background: var(--border);
}
.ad-m {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 12px; background: var(--bg); font-size: calc(12px * var(--font-scale, 1));
}
.ad-m.ad-m-hi { background: var(--zebra-odd); }
.ad-ml { color: var(--text-4); }
.ad-mv { font-weight: 600; color: var(--text-1); text-align: right; }

.ad-ohlcv {
  position: absolute; top: 6px; left: 6px; z-index: 10;
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: calc(11px * var(--font-scale, 1)); color: var(--text-3);
  pointer-events: none; line-height: 1.6;
}
.ad-ohlcv b { font-weight: 600; color: var(--text-1); }
.ad-ohlcv b.up { color: var(--up); }
.ad-ohlcv b.dn { color: var(--dn); }
.ad-ohlcv-date { font-weight: 600; color: var(--text-2); margin-right: 2px; }

.ad-chart-divider {
  height: 6px; cursor: row-resize; display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; position: relative;
  background: transparent; margin-top: -3px; margin-bottom: -3px; z-index: 5;
}
.ad-chart-divider-line {
  width: 40px; height: 3px; border-radius: 2px; background: var(--border-dark);
  transition: background .15s; opacity: 0.5;
}
.ad-chart-divider:hover .ad-chart-divider-line,
.ad-chart-divider:active .ad-chart-divider-line { background: var(--accent); opacity: 1; }
/* 차트 상단/하단 테두리로 마무리 (오른쪽 가격레이블 영역 60px 제외) */
.ad-card #ad-price-chart { position: relative; }
.ad-card #ad-price-chart::before {
  content: ''; position: absolute; top: 0; left: 0; right: 60px; height: 1px;
  background: var(--border); z-index: 4; pointer-events: none;
}
.ad-card #ad-vol-chart { position: relative; }
.ad-card #ad-vol-chart::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 60px; height: 1px;
  background: var(--border); z-index: 4; pointer-events: none;
}
/* 전체화면 모드에서는 테두리 제거 */
.ad-chart-wrap.fullscreen #ad-price-chart::before,
.ad-chart-wrap.fullscreen #ad-vol-chart::after { display: none !important; }
.ad-card {
  margin: 12px 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  overflow: hidden;
}
.ad-card .ad-chart-toolbar { padding: 10px 12px 4px; }
.ad-card #ad-chart-wrap { padding: 0; }
.ad-card #ad-candle-chart, .ad-card #ad-price-chart, .ad-card #ad-vol-chart { padding-right: 0 !important; }
.ad-card .analytics-toolbar { padding: 10px 12px 0; margin: 0; }
.ad-card #fin-table-area { padding: 8px 0 12px; }
.ad-card .chart-section-header { padding: 10px 12px 4px; }
.ad-card #fin-chart-area { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.ad-card #fin-chart-area .chart-card {
  border: 1px solid var(--border); border-radius: 8px; box-shadow: none;
  margin: 0; padding: 10px 12px; background: var(--bg);
}

/* Card title + sub-card pattern */
.ad-card-title {
  padding: 10px 14px 4px; font-size: calc(13px * var(--font-scale, 1)); font-weight: 600; color: var(--text-1);
  letter-spacing: -0.2px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ad-subcard {
  margin: 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); overflow: hidden;
}
.ad-subcard-toolbar {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ad-subcard #fin-table-area { padding: 6px 0 8px; }
.ad-chart-tabs { display: flex; align-items: center; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.ad-chart-tabs .ad-fs-btn { margin-left: auto; margin-bottom: 4px; }
.ad-ct-tab {
  padding: 8px 14px; border: none; background: none; cursor: pointer;
  font-size: calc(13px * var(--font-scale, 1)); font-weight: 500; color: var(--text-3); font-family: inherit;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .12s;
}
.ad-ct-tab.active { color: var(--accent-dk); border-bottom-color: var(--accent); font-weight: 600; }
.ad-ct-tab:hover:not(.active) { color: var(--text-2); }
.ad-chart-toolbar { padding: 12px 16px 4px; overflow-x: auto; display: flex; align-items: center; gap: 8px; }
.ad-chart-periods { display: flex; gap: 4px; flex: 1; }
.ad-cp-btn {
  width: 56px; height: 26px; padding: 0; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: none;
  font-size: calc(11px * var(--font-scale, 1)); font-weight: 500; color: var(--text-3);
  cursor: pointer; white-space: nowrap; transition: all .12s;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* 1년~10년 사이 더 넓은 간격 */
.ad-cp-btn:nth-child(3) { margin-right: 12px; }
.ad-cp-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ad-cp-btn:hover:not(.active) { background: var(--bg-card); }

.ad-fs-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
  background: none; color: var(--text-3); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.ad-fs-btn:hover { background: var(--bg-card); color: var(--text-1); }

.ad-chart-wrap { position: relative; }
.ad-chart-wrap.fullscreen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: var(--bg); display: flex; flex-direction: column;
  padding: 0;
}
.ad-fs-header {
  display: none; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.ad-chart-wrap.fullscreen .ad-fs-header { display: flex; }
.ad-chart-wrap.fullscreen #ad-candle-chart { flex: 1; }
#ad-fs-title { font-weight: 600; font-size: calc(15px * var(--font-scale, 1)); white-space: nowrap; }
.ad-fs-periods { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.ad-fs-close {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
  background: none; color: var(--text-1); font-size: calc(16px * var(--font-scale, 1)); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .12s;
}
.ad-fs-close:hover { background: var(--bg-card); }

/* ── Settings ─────────────────────────────────────────────────────────────── */
.settings-group {
  margin: 16px 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden; background: var(--bg);
  box-shadow: var(--shadow);
}
.settings-group-title {
  padding: 12px 16px 8px;
  font-size: calc(11px * var(--font-scale, 1)); font-weight: 600;
  color: var(--text-4); text-transform: uppercase; letter-spacing: 0.65px;
}
.settings-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  cursor: pointer; transition: background .1s;
}
.settings-row:hover { background: var(--gray-50); }
.settings-row:first-of-type { border-top: none; }
.settings-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: calc(17px * var(--font-scale, 1));
}
.settings-info { flex: 1; min-width: 0; }
.settings-label { font-size: calc(14px * var(--font-scale, 1)); font-weight: 500; }
.settings-sub   { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-4); margin-top: 1px; }
.settings-arrow { color: var(--text-4); font-size: calc(18px * var(--font-scale, 1)); }

.pill-badge {
  font-size: calc(11px * var(--font-scale, 1)); font-weight: 600; padding: 3px 10px;
  border-radius: var(--r-pill);
}
.pill-ok { background: var(--accent-lt); color: var(--accent-dk); }
.pill-no { background: var(--red-lt);    color: var(--red); }

/* Category row in settings */
.cat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--border);
}
.cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cat-name { flex: 1; font-size: calc(14px * var(--font-scale, 1)); }
.cat-btn {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--border-md); background: var(--bg);
  cursor: pointer; font-size: calc(14px * var(--font-scale, 1));
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); transition: all .12s;
}
.cat-btn:hover { background: var(--gray-100); }

/* ── Info Row ─────────────────────────────────────────────────────────────── */
.info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--border);
  font-size: calc(13px * var(--font-scale, 1));
}
.info-label { color: var(--text-3); }
.info-val   { font-weight: 500; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: block; width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-pill);
  font-size: calc(15px * var(--font-scale, 1)); font-weight: 500;
  font-family: inherit; cursor: pointer;
  border: none; text-align: center;
  transition: opacity .15s; box-shadow: var(--shadow-btn);
}
.btn:active { opacity: .8; }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-accent  { background: var(--accent); color: var(--text); }
.btn-ghost   { background: var(--bg); color: var(--text); border: 1px solid var(--border-md); box-shadow: var(--shadow-btn); }
.btn-danger  { background: var(--bg); color: var(--red); border: 1px solid var(--red-lt); box-shadow: none; }
.btn-sm {
  height: 36px; box-sizing: border-box; line-height: 1;
  padding: 0 14px; font-size: calc(13px * var(--font-scale, 1)); font-weight: 500;
  width: auto; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: none;
}
.btn-loading { opacity: .5; pointer-events: none; }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-box {
  background: var(--bg);
  border-radius: 16px;
  width: 100%; max-width: var(--max-w);
  max-height: calc(100dvh - 32px); overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.18);
}
/* 바텀시트 손잡이 — 가운데 정렬 모달에는 불필요 */
.modal-handle { display: none; }
.modal-title {
  font-size: calc(17px * var(--font-scale, 1)); font-weight: 600; letter-spacing: -0.3px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-body    { padding: 16px 20px; }
.modal-actions {
  padding: 12px 20px 16px; display: flex; flex-direction: column; gap: 10px;
  position: sticky; bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  z-index: 1;
}

/* inputs in modal */
.modal .form-group { margin-bottom: 16px; }
.apikey-wrap { position: relative; }
.apikey-show {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  border: none; background: none; font-size: calc(12px * var(--font-scale, 1));
  color: var(--text-4); cursor: pointer; padding: 4px;
  font-family: inherit;
}

/* ── Color Swatches ───────────────────────────────────────────────────────── */
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; transition: transform .15s;
}
.swatch.on { border-color: var(--text); transform: scale(1.15); }

/* ── Loading ──────────────────────────────────────────────────────────────── */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
  margin: 48px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(var(--nav-h) + 14px);
  left: 50%; transform: translateX(-50%) translateY(10px);
  background: var(--text); color: var(--on-accent);
  padding: 10px 18px; border-radius: var(--r-pill);
  font-size: calc(13px * var(--font-scale, 1)); font-weight: 500;
  opacity: 0; transition: opacity .22s, transform .22s;
  z-index: 400; pointer-events: none;
  white-space: nowrap;
  max-width: calc(var(--max-w) - 40px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── No Data ──────────────────────────────────────────────────────────────── */
.no-data {
  padding: 40px 20px; text-align: center;
  font-size: calc(13px * var(--font-scale, 1)); color: var(--text-4); line-height: 1.6;
}

/* ── Divider ──────────────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); margin: 0; }

/* ── Stocks (전체종목) ────────────────────────────────────────────────────── */
.stk-page { display: flex; flex-direction: column; height: 100%; }

.stk-search-row { padding: 12px 16px; }
.stk-search-wrap { position: relative; }
.stk-search {
  width: 100%; height: 36px; padding: 0 36px 0 14px;
  box-sizing: border-box; line-height: 1;
  font-size: calc(13px * var(--font-scale, 1));
  border: 1px solid var(--border-dark); border-radius: var(--r-pill);
  background: var(--bg-card); color: var(--text);
  outline: none;
}
.stk-search:focus { border-color: var(--accent); }
.stk-search:not(:placeholder-shown) { background: rgba(24, 226, 153, 0.08); border-color: var(--accent); }
.stk-search::-webkit-search-cancel-button,
.stk-search::-webkit-search-decoration,
.stk-search::-ms-clear,
.stk-search::-ms-reveal { display: none; -webkit-appearance: none; }
.stk-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: var(--border); color: var(--text-3); font-size: calc(11px * var(--font-scale, 1));
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.stk-search-clear:hover { background: var(--text-3); color: var(--on-accent); }

.stk-tabs {
  display: flex; gap: 6px; padding: 10px 16px;
}
.stk-tab {
  height: 36px; box-sizing: border-box; line-height: 1;
  padding: 0 14px; border-radius: var(--r-pill);
  font-size: calc(13px * var(--font-scale, 1)); font-weight: 500;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-3); cursor: pointer;
  white-space: nowrap; flex-shrink: 0; transition: all .12s;
  display: inline-flex; align-items: center; justify-content: center;
}
.stk-tab.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.stk-list { display: flex; flex-direction: column; }
.stk-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
}
.stk-item:hover { background: var(--bg-card); }
.stk-item-info { flex: 1; min-width: 0; }
.stk-item-row1 {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 3px; flex-wrap: wrap;
}
.stk-name { font-size: calc(14px * var(--font-scale, 1)); font-weight: 600; color: var(--text-1); }
.stk-mkt-tag {
  font-size: calc(10px * var(--font-scale, 1)); font-weight: 700; padding: 1px 5px; border-radius: 4px;
  background: var(--accent-lt); color: var(--accent-dk); flex-shrink: 0;
}
.stk-mkt-tag.kq { background: #ede7f6; color: #6a1b9a; }
.stk-code { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-4); }
.stk-item-row2 { font-size: calc(11px * var(--font-scale, 1)); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 30px; }
.stk-chg { font-size: calc(11px * var(--font-scale, 1)); font-weight: 600; margin-left: 2px; }
.stk-chg.up { color: var(--up); }
.stk-chg.dn { color: var(--dn); }

.stk-fav-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: none; color: var(--border-dark); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: color .15s, background .15s;
}
.stk-fav-btn:hover { background: var(--bg-card); color: var(--accent); }
.stk-fav-btn.on { color: #f5a623; }
.stk-fav-btn svg { width: 18px; height: 18px; fill: currentColor; }

.stk-pagination {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stk-pg-btn {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--border); background: none;
  color: var(--text-3); font-size: calc(13px * var(--font-scale, 1)); cursor: pointer;
  transition: background .12s;
}
.stk-pg-btn:hover { background: var(--bg-card); }
.stk-pg-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.stk-pg-info { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-4); margin-left: 6px; }

/* ── Quant (거래상위) ──────────────────────────────────────────────────── */
.q-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; margin: 0 8px; }
.q-table { width: 100%; border-collapse: collapse; font-size: calc(12px * var(--font-scale, 1)); }
.q-table th {
  background: var(--bg-card); padding: 8px 10px; text-align: right;
  font-weight: 600; color: var(--text-3); border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none; white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.q-table th:hover { background: var(--accent-lt); color: var(--accent-dk); }
.q-table th.q-name { text-align: left; }
.q-table td { padding: 4px 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; line-height: 1.4; }
.q-table td.q-num { text-align: right; white-space: nowrap; }
.q-table td.q-name { font-weight: 600; white-space: nowrap; }
.q-table td.q-name .q-code { font-size: calc(10px * var(--font-scale, 1)); color: var(--text-4); margin-left: 6px; font-weight: 400; font-family: monospace; }
.q-table tbody tr { cursor: pointer; transition: background .1s; }
.q-table tbody tr:nth-child(odd) { background: var(--zebra-odd); }
.q-table tbody tr:hover { background: var(--zebra-hover); }
.q-table td.up { color: var(--up); }
.q-table td.dn { color: var(--dn); }

/* ── News ─────────────────────────────────────────────────────────────────── */
.news-tabs { display: flex; gap: 6px; padding: 0 16px 8px; overflow-x: auto; scrollbar-width: none; }
.news-tabs::-webkit-scrollbar { display: none; }
.news-tab {
  height: 36px; box-sizing: border-box; line-height: 1;
  padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--bg); font-size: calc(13px * var(--font-scale, 1)); font-weight: 500; color: var(--text-3);
  cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all .12s;
  display: inline-flex; align-items: center; justify-content: center;
}
.news-tab.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.news-tab:hover:not(.active) { background: var(--bg-card); }

.news-tab.nxt-tab.on {
  background: #ff6b35; color: var(--on-accent); border-color: #ff6b35;
}
.news-tab.nxt-tab:hover:not(.on) { background: var(--bg-card); }

.news-tab.clock-tab {
  background: var(--btn-primary-bg); color: var(--btn-primary-fg); cursor: default;
  border-color: var(--btn-primary-bg);
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
}
.news-tab.clock-tab:hover { background: var(--btn-primary-bg); }
@media (max-width: 640px) { .news-tab.clock-tab { display: none; } }

/* 모바일: 종목 코드 숨김 (공간 절약) */
@media (max-width: 640px) {
  .wl-code, .q-table td.q-name .q-code { display: none; }
}

.top-btn.kw-pick-btn.on { background: var(--accent-lt); color: var(--accent); }
.top-btn.kw-pick-btn.on svg { fill: var(--accent); }

.top-btn.news-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gray-50); border: 1px solid var(--border);
  color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s, color .12s;
}
.top-btn.news-icon-btn:hover { background: var(--bg-card); border-color: var(--border-md); color: var(--text-1); }
.top-btn.news-icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.top-btn.news-icon-btn.kw-pick-btn.on {
  background: var(--accent-lt); border-color: var(--accent); color: var(--accent);
}
.top-btn.news-icon-btn.kw-pick-btn.on svg { fill: var(--accent); }

.kw-quick-panel {
  display: none; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 4px 16px; border-bottom: 1px solid var(--border);
  background: var(--gray-50);
}
.kw-quick-panel .kwq-gname {
  font-size: 10px; color: var(--text-4); font-weight: 600;
  letter-spacing: 0.3px;
}
.kw-quick-panel .kwq-chip {
  padding: 2px 7px !important;
  font-size: calc(10px * var(--font-scale, 1)) !important;
  font-weight: 500;
  line-height: 1.4;
}
.kw-quick-panel .kwq-tail {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
}
.kwq-btn {
  background: var(--bg); border: 1px solid var(--border); color: var(--text-3);
  font-size: 9px; font-weight: 500; cursor: pointer;
  padding: 2px 6px; border-radius: var(--r-pill); transition: all .12s;
  line-height: 1.4; font-family: inherit;
}
.kwq-btn:hover:not(.on):not([disabled]) { background: var(--bg-card); color: var(--text-2); }
.kwq-btn.on {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.kw-quick-panel .kwq-empty-msg {
  font-size: 12px; color: var(--text-4);
}
.art-actions {
  display: flex; align-items: center; justify-content: flex-start; gap: 4px;
  flex-wrap: wrap;
}
.art-actions .art-sel-count { margin-right: auto; font-size: 11px; color: var(--text-3); font-weight: 500; }
.kwq-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.news-item.art-sel-mode .news-item-header { cursor: pointer; }
.news-item.art-checked { background: var(--accent-lt); }
.art-check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--accent); background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--accent); font-weight: 700;
}
.news-item.art-checked .art-check { background: var(--accent); color: var(--on-accent); }

.news-list { padding: 0 16px; }
.news-item {
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.news-item-header {
  display: flex; gap: 12px; padding: 8px 0;
  cursor: pointer; transition: background .1s;
}
.news-item-header:hover { background: var(--bg-card); }
.news-content {
  display: grid; grid-template-rows: 0fr;
  overflow: hidden; padding: 0; margin-top: 0;
  transition: grid-template-rows .35s ease, padding .35s ease, margin-top .35s ease;
}
.news-content > .nc-inner { min-height: 0; overflow: hidden; }
.news-content.open {
  grid-template-rows: 1fr;
  padding: 0 0 8px; margin-top: -4px;
}
.news-content-img { max-width: 100%; border-radius: 8px; margin-bottom: 8px; }
.news-content-body { font-size: calc(13px * var(--font-scale, 1)); line-height: 1.4; color: var(--text-1); }
.news-content-body p { margin: 0 0 12px; }
.news-content-link { display: inline-block; margin-top: 10px; font-size: calc(12px * var(--font-scale, 1)); color: var(--accent-dk); text-decoration: none; }
.news-content-link:hover { text-decoration: underline; }
.news-content-fallback { padding: 8px 0; font-size: calc(12px * var(--font-scale, 1)); color: var(--text-4); }
.news-content-fallback a { color: var(--accent-dk); }
.news-openlink-btn {
  display: inline-block; padding: 8px 14px; border-radius: 18px;
  background: var(--accent); color: #fff !important;
  font-size: calc(13px * var(--font-scale, 1)); font-weight: 600;
  text-decoration: none;
}
.news-openlink-btn:hover { background: var(--accent-dk); text-decoration: none; }
.news-content-toolbar {
  display: flex; justify-content: flex-end; align-items: center; gap: 4px;
  padding: 0 0 8px;
}
.news-fs-btn {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-lt); color: var(--accent-dk);
  border: none; font-size: calc(10px * var(--font-scale, 1)); font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.news-fs-btn:hover { background: var(--accent); color: var(--on-accent); }
.news-save-btn {
  width: auto !important; padding: 0 10px; border-radius: var(--r-pill) !important;
  font-size: calc(11px * var(--font-scale, 1)) !important;
  background: var(--gray-100); color: var(--text-3);
}
.news-save-btn.on { background: var(--save-bg); color: var(--save-fg); }
.news-save-btn:hover { background: var(--accent-lt); color: var(--accent-dk); }
.news-save-btn.on:hover { background: var(--save-bg-2); color: var(--save-fg-2); }
.news-fs-display { font-size: calc(10px * var(--font-scale, 1)); color: var(--text-4); min-width: 28px; text-align: center; }
.news-thumb { width: 80px; height: 60px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--bg-card); }
.news-thumb-empty { background: var(--bg-card); }
.news-body { flex: 1; min-width: 0; }
.news-title { font-size: calc(14px * var(--font-scale, 1)); font-weight: 600; color: var(--text-1); line-height: 1.35; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-summary { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-3); line-height: 1.4; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-meta {
  font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 24px;
}
.news-meta-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-meta-tools { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.news-meta-tools:empty { display: none; }

/* ── Theme ────────────────────────────────────────────────────────────────── */
.tm-list { display: flex; flex-direction: column; }
.tm-item {
  padding: 4px 8px; border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background .1s; line-height: 1.4;
}
.tm-list > .tm-item:nth-child(odd) { background: var(--zebra-odd); }
.tm-item:hover { background: var(--zebra-hover) !important; }
.tm-row1 { display: flex; align-items: center; gap: 8px; }
.tm-name { font-size: calc(14px * var(--font-scale, 1)); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-rate { font-size: calc(13px * var(--font-scale, 1)); font-weight: 700; flex-shrink: 0; }
.tm-rate.up { color: var(--up); }
.tm-rate.dn { color: var(--dn); }
.tm-row2 { font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4); margin-top: 2px; }
.tm-date-badge { font-size: calc(10px * var(--font-scale, 1)); background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; color: var(--text-3); }
.tm-detail { }
.tm-stocks { margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg); }
.tm-stk {
  display: flex; align-items: center; gap: 8px; padding: 3px 10px;
  border-bottom: 1px solid var(--border); font-size: calc(12px * var(--font-scale, 1)); cursor: pointer; flex-wrap: wrap; line-height: 1.4;
}
.tm-stk:last-child { border-bottom: none; }
.tm-stk:hover { background: var(--bg-card); }
.tm-stk-name { font-weight: 600; min-width: 80px; }
.tm-stk-price { color: var(--text-3); }
.tm-stk-chg { font-weight: 600; }
.tm-stk-chg.up { color: var(--up); }
.tm-stk-chg.dn { color: var(--dn); }
.tm-stk-chg-amt { font-variant-numeric: tabular-nums; font-size: calc(11px * var(--font-scale, 1)); }
.tm-stk-chg-amt.up { color: var(--up); }
.tm-stk-chg-amt.dn { color: var(--dn); }
.tm-stk-reason { width: 100%; font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4); margin-top: 2px; }
.tm-news-section { margin: 8px 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tm-stocks-section { margin: 14px 0 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tm-stocks-section .tm-stocks { border: none; margin-top: 0; }
.tm-sec-hdr {
  display: flex; align-items: center; justify-content: space-between;
  font-size: calc(11px * var(--font-scale, 1)); font-weight: 600; color: var(--text-4);
  padding: 6px 10px; background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.tm-news-section .tm-sec-hdr { background: var(--zebra-hover); }
.tm-stocks-section .tm-sec-hdr { background: var(--zebra-hover); }
.tm-sec-more {
  background: none; border: none; color: var(--accent-dk); font-size: calc(11px * var(--font-scale, 1));
  font-weight: 600; cursor: pointer; padding: 0; font-family: inherit;
}
.tm-sec-more:hover { text-decoration: underline; }
.tm-news-title { font-size: calc(11px * var(--font-scale, 1)); font-weight: 600; color: var(--text-4); padding: 6px 10px; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.tm-news-item { display: block; padding: 6px 10px; border-bottom: 1px solid var(--border); text-decoration: none; transition: background .1s; color: inherit; }
.tm-news-item:last-child { border-bottom: none; }
.tm-news-item:hover { background: var(--bg-card); }
.tm-news-txt { display: block; font-size: calc(13px * var(--font-scale, 1)); color: var(--text-1); line-height: 1.4; font-weight: 500; }
.tm-news-meta { font-size: calc(9px * var(--font-scale, 1)); color: var(--text-4); margin-top: 2px; display: block; }
.tm-news-more {
  padding: 8px 10px; font-size: calc(12px * var(--font-scale, 1)); color: var(--accent-dk); cursor: pointer;
  text-align: center; border-top: 1px solid var(--border); font-weight: 500;
}
.tm-news-more:hover { background: var(--bg-card); }
.tm-stk-news-btn {
  padding: 2px 8px; height: 22px; border-radius: 6px; border: 1px solid rgba(30,136,229,0.3);
  background: #e3f2fd; color: #1565c0; font-size: calc(10px * var(--font-scale, 1)); font-weight: 600;
  cursor: pointer; flex-shrink: 0; transition: all .12s; margin-left: auto;
}
.tm-stk-news-btn:hover { background: #bbdefb; border-color: var(--dn); }
.tm-hist-filter { margin-bottom: 12px; }

/* ── Screener ─────────────────────────────────────────────────────────────── */
.sc-page { padding: 0 0 40px; }

.sc-status-bar {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  padding: 14px 16px; background: var(--bg-card);
}
.sc-stat { flex: 1; text-align: center; }
.sc-stat strong { display: block; font-size: calc(16px * var(--font-scale, 1)); font-weight: 700; color: var(--text); }
.sc-stat span { font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4); margin-top: 2px; display: block; }

.sc-collect-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px; border-bottom: 1px solid var(--border);
}
.sc-collect-btn {
  padding: 9px 18px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: calc(13px * var(--font-scale, 1)); font-weight: 600; border: none; cursor: pointer;
  white-space: nowrap;
}
.sc-collect-btn:disabled { background: var(--border-dark); color: var(--text-4); cursor: default; }

.sc-progress-wrap { flex: 1; }
.sc-progress-label { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-3); margin-bottom: 6px; }
.sc-progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.sc-progress-fill { height: 100%; background: var(--accent); transition: width 0.4s ease; border-radius: 3px; }

.sc-filter-box {
  margin: 6px 16px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px;
}
.sc-filter-title { font-size: calc(14px * var(--font-scale, 1)); font-weight: 600; margin-bottom: 14px; color: var(--text); }
.sc-filter-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px;
}
@media (max-width: 640px) {
  .sc-filter-grid { grid-template-columns: 1fr 1fr; }
}
.sc-filter-item label { display: block; font-size: calc(11px * var(--font-scale, 1)); color: var(--text-3); margin-bottom: 4px; }
.sc-input[type=number]::-webkit-inner-spin-button,
.sc-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sc-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.sc-input, .sc-select {
  width: 100%; padding: 7px 10px; font-size: calc(13px * var(--font-scale, 1));
  border: 1px solid var(--border-dark); border-radius: 8px;
  background: var(--bg); color: var(--text); box-sizing: border-box;
}
.sc-search-btn {
  width: 100%; height: 36px; padding: 0 14px; box-sizing: border-box; line-height: 1;
  border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: calc(13px * var(--font-scale, 1)); font-weight: 600; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}

.sc-result-header {
  padding: 14px 16px 8px;
  display: flex; align-items: baseline; gap: 8px;
}
.sc-result-count { font-size: calc(15px * var(--font-scale, 1)); font-weight: 700; }
.sc-result-sub { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-4); }
/* 결과 툴바 — 종목명/코드 필터 + 표시 개수 */
.sc-result-toolbar {
  padding: 6px 16px 0; display: flex; align-items: center; gap: 8px;
}
.sc-result-filter {
  flex: 1; min-width: 0; height: 36px; padding: 0 12px;
  border: 1px solid var(--border-md); border-radius: 8px;
  background: var(--bg); color: var(--text-1);
  font-size: calc(13px * var(--font-scale, 1)); font-family: inherit;
  outline: none; transition: border-color .12s;
}
.sc-result-filter:focus { border-color: var(--accent); }
.sc-result-limit {
  flex-shrink: 0; height: 36px; padding: 0 10px;
  border: 1px solid var(--border-md); border-radius: 8px;
  background: var(--bg); color: var(--text-1);
  font-size: calc(13px * var(--font-scale, 1)); font-family: inherit;
  cursor: pointer;
}
.sc-result-limit:hover { border-color: var(--accent); }
.sc-col-chart { width: 40px; text-align: center; }
.sc-col-score { width: 56px; text-align: center; }
.sc-score-badge {
  display: inline-block; min-width: 36px; padding: 3px 8px;
  border-radius: 999px; font-weight: 700; font-size: calc(12px * var(--font-scale, 1));
  font-variant-numeric: tabular-nums;
}
.sc-score-hi  { background: var(--score-hi-bg); color: var(--score-hi-fg); }
.sc-score-mid { background: var(--nxt-bg); color: var(--nxt-fg); }
.sc-score-lo  { background: var(--chip-bg); color: var(--chip-fg); }
.sc-score-badge { cursor: help; transition: transform .12s; }
.sc-score-badge:hover { transform: scale(1.08); }
.ad-score-badge { height: 24px; min-width: 40px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.score-tip {
  position: absolute; z-index: 9999;
  background: #1e293b; color: var(--on-accent);
  padding: 10px 14px; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  font-size: calc(12px * var(--font-scale, 1));
  min-width: 260px; max-width: 340px;
  line-height: 1.45;
  pointer-events: none;
}
.sct-header { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.sct-total { font-weight: 700; color: #86efac; }
.sct-row { display: grid; grid-template-columns: 75px 48px 1fr; gap: 6px; padding: 3px 0; align-items: baseline; }
.sct-label { font-weight: 600; color: #cbd5e1; }
.sct-pts { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; padding-right: 4px; }
.sct-pts.full { color: #86efac; }
.sct-pts.partial { color: #fcd34d; }
.sct-pts.zero { color: #94a3b8; }
.sct-note { color: #e2e8f0; font-size: calc(11px * var(--font-scale, 1)); }
.sc-chart-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; font-size: calc(14px * var(--font-scale, 1)); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.sc-chart-btn:hover { background: var(--accent-lt); border-color: var(--accent); }

.sc-table-wrap { overflow-x: auto; padding: 0 12px; }
.sc-table {
  width: 100%; border-collapse: collapse;
  font-size: calc(12px * var(--font-scale, 1)); min-width: 600px;
}
.sc-table thead th {
  text-align: right; padding: 8px 10px;
  font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4); font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap; line-height: 1.25;
}
.sc-table thead th:first-child { text-align: left; }
.sc-table thead th.sc-th-sortable { cursor: pointer; user-select: none; transition: background .12s; }
.sc-table thead th.sc-th-sortable:hover { background: var(--gray-100); }
.sc-table tbody .sc-row { cursor: pointer; transition: background .15s; }
.sc-table tbody .sc-row:nth-child(odd) { background: var(--zebra-odd); }
.sc-table tbody .sc-row:hover { background: var(--zebra-hover); }
.sc-table tbody td {
  padding: 2px 10px; border-bottom: 1px solid var(--border);
  vertical-align: middle; line-height: 1.3;
}
.sc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sc-table .bold { font-weight: 600; color: var(--accent-dk); }
.sc-table .red { color: var(--red); }
.sc-row-name { font-weight: 600; font-size: calc(12px * var(--font-scale, 1)); white-space: nowrap; cursor: help; }
.sc-row-name.ks { color: var(--mkt-ks); }
.sc-row-name.kq { color: var(--mkt-kq); }
.sc-table thead th.sc-col-stock_name { text-align: left; }
.sc-table tbody td.sc-col-stock_name { text-align: left; }

/* 조건검색 결과 테이블 — 컬럼별 폭 조정 (종목명 8자 지원, 영익 컬럼 컴팩트) */
.sc-table .sc-col-stock_name { min-width: 130px; max-width: 160px; padding-right: 6px; }
.sc-table .sc-col-avg_op,
.sc-table .sc-col-min_op { padding-left: 4px; padding-right: 4px; width: 56px; min-width: 56px; }

/* 모의투자 페이지 */
.mock-page { padding: 14px 16px; }
.mock-toolbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; }
.mock-title { font-size: calc(18px * var(--font-scale, 1)); font-weight: 700; }
.mock-actions { display: flex; gap: 6px; }
.mock-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 14px; }
.mk-sum-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.mk-sum-label { font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4); margin-bottom: 4px; }
.mk-sum-val { font-size: calc(16px * var(--font-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-sum-val.up { color: var(--red); }
.mk-sum-val.dn { color: var(--blue); }
.mock-table-wrap { overflow-x: auto; }
.mk-table { width: 100%; border-collapse: collapse; font-size: calc(12px * var(--font-scale, 1)); min-width: 900px; }
.mk-table thead th { text-align: right; padding: 8px 10px; background: var(--bg-card); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-3); white-space: nowrap; }
.mk-table thead th.mk-col-name, .mk-table thead th:last-child { text-align: left; }
.mk-th-sort { cursor: pointer; user-select: none; transition: background .12s; }
.mk-th-sort:hover { background: var(--accent-lt); color: var(--accent-dk); }
.mk-table tbody td { padding: 10px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: middle; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-table tbody td.mk-col-name, .mk-table tbody td.mk-col-act { text-align: left; }
.mk-name { font-weight: 600; cursor: help; white-space: nowrap; }
.mk-name.ks { color: var(--mkt-ks); }
.mk-name.kq { color: var(--mkt-kq); }
.mk-table .num.up { color: var(--red); }
.mk-table .num.dn { color: var(--blue); }
.mk-fee { color: var(--text-4); font-size: calc(11px * var(--font-scale, 1)); }
.mk-btn-edit, .mk-btn-del, .mk-btn-sell { background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; cursor: pointer; font-size: 12px; margin-right: 4px; }
.mk-btn-del-circle {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid #fca5a5; background: #fee2e2; color: #b91c1c;
  cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin-right: 4px; transition: background .12s;
}
.mk-btn-del-circle:hover { background: #fca5a5; color: var(--on-accent); }
.mk-row-click { cursor: pointer; transition: background .12s; }
.mk-row-click:hover { background: var(--bg-card); }
.mk-col-sel { width: 36px; text-align: center; padding: 0 4px; vertical-align: middle; }
.mk-sel, #mk-sel-all {
  width: 16px; height: 16px; cursor: pointer; accent-color: #64748b;
  display: inline-block; vertical-align: middle; margin: 0;
}
.mk-table thead th.mk-col-sel { text-align: center; vertical-align: middle; }
.mk-table tbody td.mk-col-sel { vertical-align: middle; }
.mk-unselected td { opacity: 0.45; }
.mk-unselected td.mk-col-sel, .mk-unselected td.mk-col-act { opacity: 1; }
.mk-btn-edit:hover { background: var(--accent-lt); border-color: var(--accent); }
.mk-btn-sell:hover { background: var(--nxt-bg); border-color: #fbbf24; }
.mk-btn-del:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.mk-date { color: var(--text-4); font-size: calc(11px * var(--font-scale, 1)); white-space: nowrap; }
.mock-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.mock-tab { background: transparent; border: none; padding: 8px 14px; cursor: pointer; font-size: calc(13px * var(--font-scale, 1)); color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mock-tab.active { color: var(--accent-dk); border-bottom-color: var(--accent); font-weight: 700; }
.mock-view-toggle {
  display: inline-flex; border: 1px solid var(--border-md); border-radius: var(--r-pill);
  overflow: hidden; height: 36px; box-sizing: border-box;
  background: var(--bg); box-shadow: var(--shadow-btn);
}
.mock-view-toggle button {
  background: transparent; border: none; padding: 0 14px; cursor: pointer;
  color: var(--text-3); font-size: calc(13px * var(--font-scale, 1)); font-weight: 500;
  font-family: inherit; line-height: 1; display: inline-flex; align-items: center;
  transition: background .15s, color .15s;
}
.mock-view-toggle button.active { background: var(--accent); color: var(--on-accent); }
.mock-view-toggle button:not(.active):hover { background: var(--accent-lt); color: var(--accent-dk); }
.mk-cost-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.mk-search-item { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 4px; cursor: pointer; font-size: calc(13px * var(--font-scale, 1)); }
.mk-search-item:hover { background: var(--bg-card); }
.mk-search-item.on { background: var(--accent-lt); border-color: var(--accent); }

/* 모의투자 잠금 화면 */
.mock-lock { display: flex; justify-content: center; padding: 60px 20px; }
.mock-lock-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 28px; width: 100%; max-width: 320px; text-align: center; }
.mock-lock-icon { font-size: 44px; margin-bottom: 8px; }
.mock-lock-title { font-size: calc(18px * var(--font-scale, 1)); font-weight: 700; margin-bottom: 4px; }
.mock-lock-sub { font-size: calc(12px * var(--font-scale, 1)); color: var(--text-4); margin-bottom: 16px; }
.mock-pin-input { width: 100%; text-align: center; font-size: calc(20px * var(--font-scale, 1)); letter-spacing: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; font-family: monospace; }
.mock-pin-input:focus { outline: none; border-color: var(--accent); }
.mock-pin-err { color: var(--red); font-size: calc(12px * var(--font-scale, 1)); min-height: 18px; margin-bottom: 8px; }

/* Stocks list & quant table — 종목코드도 시장별 색상 */
.stk-code.stk-code-ks, .q-code.q-code-ks { color: var(--mkt-ks); font-weight: 600; cursor: help; }
.stk-code.stk-code-kq, .q-code.q-code-kq { color: var(--mkt-kq); font-weight: 600; cursor: help; }

/* Click tooltip — 종목코드 클릭 시 잠깐 떠오르는 시장명 */
.mkt-tip {
  position: absolute; z-index: 500;
  background: var(--text); color: var(--on-accent);
  font-size: calc(11px * var(--font-scale, 1)); font-weight: 600; letter-spacing: 0.3px;
  padding: 4px 8px; border-radius: 6px;
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  opacity: 0; transform: translateY(2px);
  transition: opacity .15s, transform .15s;
}
.mkt-tip.show { opacity: 1; transform: translateY(0); }
.spacer  { height: 16px; }

/* 외국인·기관 순매매 거래량 + 종목 뉴스 테이블 */
.ad-fr-wrap { overflow-x: auto; padding: 0 8px; }

/* 종목 상세 페이지 가로 스크롤바 — 반투명 통일 */
.ad-chart-toolbar,
.ad-fs-periods,
.ad-fr-wrap,
.fin-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.ad-chart-toolbar::-webkit-scrollbar,
.ad-fs-periods::-webkit-scrollbar,
.ad-fr-wrap::-webkit-scrollbar,
.fin-table-wrap::-webkit-scrollbar { height: 6px; background: transparent; }
.ad-chart-toolbar::-webkit-scrollbar-track,
.ad-fs-periods::-webkit-scrollbar-track,
.ad-fr-wrap::-webkit-scrollbar-track,
.fin-table-wrap::-webkit-scrollbar-track { background: transparent; }
.ad-chart-toolbar::-webkit-scrollbar-thumb,
.ad-fs-periods::-webkit-scrollbar-thumb,
.ad-fr-wrap::-webkit-scrollbar-thumb,
.fin-table-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
.ad-chart-toolbar:hover::-webkit-scrollbar-thumb,
.ad-fs-periods:hover::-webkit-scrollbar-thumb,
.ad-fr-wrap:hover::-webkit-scrollbar-thumb,
.fin-table-wrap:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.28); }
.ad-fr-tbl {
  width: 100%; border-collapse: collapse;
  font-size: calc(12px * var(--font-scale, 1));
  font-variant-numeric: tabular-nums;
}
.ad-fr-tbl thead th {
  padding: 5px 6px; background: var(--gray-50); color: var(--text-3);
  font-weight: 600; border-bottom: 1px solid var(--border-md);
  font-size: calc(11px * var(--font-scale, 1)); white-space: nowrap;
}
.ad-fr-tbl tbody td {
  padding: 5px 6px; border-bottom: 1px solid var(--border);
  color: var(--text-1); white-space: nowrap;
}
.ad-fr-tbl td.num { text-align: right; }
.ad-fr-tbl td.ad-fr-d { color: var(--text-3); text-align: center; }
.ad-fr-tbl td.up { color: var(--up); }
.ad-fr-tbl td.dn { color: var(--dn); }
.ad-fr-tbl tbody tr:hover { background: var(--gray-50); }
.ad-more-wrap { display: flex; justify-content: center; padding: 12px 0; }
.ad-more-btn {
  padding: 8px 20px; border-radius: var(--r-pill, 20px);
  border: 1px solid var(--border-md); background: none;
  font-size: calc(12px * var(--font-scale, 1)); color: var(--text-2); font-weight: 500;
  cursor: pointer; font-family: inherit; transition: all .12s;
}
.ad-more-btn:hover { background: var(--gray-50); color: var(--text-1); }
.ad-more-btn:disabled { opacity: .5; cursor: default; }

/* 뉴스 테이블 — 제목은 왼쪽 정렬, 길어지면 말줄임 */
.ad-news-tbl td.ad-news-t {
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 0; width: 100%;
}
.ad-news-tbl td.ad-news-t a {
  color: var(--text-1); text-decoration: none;
}
.ad-news-tbl td.ad-news-t a:hover { color: var(--accent-dk, #18E299); text-decoration: underline; }
.ad-news-tbl td.ad-news-s { color: var(--text-3); font-size: calc(11px * var(--font-scale, 1)); text-align: center; }
.ad-news-tbl td.ad-news-d { color: var(--text-4); font-size: calc(11px * var(--font-scale, 1)); text-align: center; }
.ad-news-tbl tr.ad-news-rel td { background: var(--gray-50); }
.ad-news-rel-mark { color: var(--text-4); margin-right: 4px; }

/* ── PDF 인쇄 (종목 분석 페이지) ───────────────────────────────────────── */
@media print {
  .desktop-sidebar, .bottom-nav, .top-bar, .side-menu, .ad-back-btn,
  .ad-share-btn, .ad-live-btn, .ad-fav-btn, .ad-fs-btn, #ad-score-slot { display: none !important; }
  body, html, #app, .main-area, #main { background: #fff !important; overflow: visible !important; height: auto !important; }
  .main-area { overflow-x: visible !important; }
  .ad-chart-wrap.fullscreen { position: static !important; z-index: auto !important; }
  .ad-card, .ad-header { box-shadow: none !important; break-inside: avoid; }
  @page { margin: 14mm 10mm; }
}

/* ── 종목 메모 에디터 ─────────────────────────────────────────────────── */
.mm-clear-btn {
  float: right; background: none; border: 1px solid var(--red-lt); color: var(--red);
  padding: 2px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.mm-clear-btn:hover { background: var(--red-lt); }
.mm-toolbar {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: clamp(1px, 1.2vw, 6px);
  padding: 5px clamp(4px, 1.2vw, 8px); border: 1px solid var(--border); border-radius: 8px 8px 0 0;
  background: var(--bg-card); border-bottom: none; overflow-x: auto;
}
.mm-toolbar button, .mm-toolbar select {
  height: 26px; min-width: 22px; padding: 0 3px; border: 1px solid transparent;
  background: none; border-radius: 4px; font-family: inherit; font-size: 13px;
  cursor: pointer; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mm-toolbar button:hover { background: var(--gray-200); }
.mm-toolbar .mm-sep { width: 1px; height: 16px; background: var(--border); margin: 0 3px; }
.mm-toolbar .mm-size { padding: 0 2px; font-size: 12px; min-width: 42px; }
.mm-color-btn { padding: 0 4px !important; }
.mm-color-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.2); display: inline-block;
  box-shadow: 0 0 0 1px #fff inset;
}
.mm-color-pop {
  position: fixed; z-index: 9999;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  display: grid; grid-template-columns: repeat(8, 22px); gap: 4px;
}
.mm-color-cell {
  width: 22px; height: 22px; border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.1); cursor: pointer; padding: 0;
  transition: transform 0.08s;
}
.mm-color-cell:hover { transform: scale(1.15); border-color: var(--accent); }
.mm-saved { margin-left: auto; font-size: 11px; color: var(--text-4); padding: 0 4px; }
.mm-editor {
  min-height: 7.5em; padding: 10px 12px; border: 1px solid var(--border); border-radius: 0 0 8px 8px;
  font-size: 14px; line-height: 1.6; outline: none; background: var(--bg);
  word-break: break-word; overflow-wrap: anywhere;
}
.mm-editor:focus { border-color: var(--accent); }
.mm-editor:empty::before { content: attr(data-placeholder); color: var(--text-4); }
.mm-editor img { max-width: 100%; height: auto; border-radius: 4px; margin: 4px 0; cursor: pointer; }
.mm-editor img.mm-img-sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.mm-img-bar {
  position: fixed; z-index: 9999; display: none; gap: 4px;
  background: #111; border-radius: 6px; padding: 4px 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.mm-img-bar button {
  background: transparent; border: none; color: var(--on-accent);
  font-size: 12px; font-family: inherit; padding: 4px 8px;
  border-radius: 4px; cursor: pointer; height: 24px;
}
.mm-img-bar button:hover { background: rgba(255,255,255,0.15); }
.mm-editor ul, .mm-editor ol { padding-left: 24px; margin: 6px 0; }
.mm-editor blockquote { border-left: 3px solid var(--border); padding-left: 10px; color: var(--text-3); margin: 6px 0; }

/* ── 알림 페이지 (Alerts) ──────────────────────────────────────── */
.alerts-tabs {
  display: flex; gap: 0; margin: 12px 16px 0;
  border-bottom: 1px solid var(--border);
}
.alerts-tab {
  flex: 1; padding: 10px 12px;
  background: transparent; border: none;
  font-size: calc(14px * var(--font-scale, 1)); font-weight: 600;
  color: var(--text-3); cursor: pointer;
  border-bottom: 2px solid transparent;
}
.alerts-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.alerts-tab:hover:not(.active) { color: var(--text); }
.alerts-permission-banner {
  margin: 12px 16px 0; padding: 14px 16px;
  background: var(--amber-lt, var(--accent-lt)); color: var(--text);
  border-radius: var(--r-md); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.alerts-permission-banner .apb-msg {
  flex: 1; font-size: calc(13px * var(--font-scale, 1)); line-height: 1.5;
}
.alert-target-card {
  margin: 10px 16px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.alert-target-card.disabled { opacity: 0.6; }
.alert-target-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.alert-target-title {
  flex: 1; min-width: 0;
  font-size: calc(14px * var(--font-scale, 1)); font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alert-target-actions { display: flex; gap: 6px; flex-shrink: 0; }
.alert-target-actions button {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid var(--border); color: var(--text-3);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.alert-target-actions button:hover { background: var(--gray-100); color: var(--text); }
.alert-target-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.alert-type-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 14px;
  background: var(--accent-lt); color: var(--accent-dk);
  font-size: calc(12px * var(--font-scale, 1)); font-weight: 600;
  line-height: 1.4;
}
.alert-type-chip.off { opacity: 0.5; background: var(--gray-100); color: var(--text-3); }
.alert-type-chip .atc-sub {
  color: var(--text-3); font-weight: 500;
  border-left: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding-left: 6px;
}
.alert-type-chip.off .atc-sub {
  border-left-color: var(--border);
}
.alerts-search-wrap { flex: 1; min-width: 160px; }
.alerts-search-input {
  width: 100%; height: 34px; padding: 4px 10px;
  font-size: calc(13px * var(--font-scale, 1));
}
.alerts-hist-list { padding: 0 16px; }
.alert-hist-item {
  padding: 12px 14px; margin: 8px 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg); cursor: pointer;
  display: flex; align-items: flex-start; gap: 10px;
}
.alert-hist-item.unread { border-left: 3px solid var(--accent); background: var(--accent-lt); }
:root[data-theme="dark"] .alert-hist-item.unread { background: rgba(46, 204, 135, 0.08); }
.alert-hist-item:hover { background: var(--gray-50); }
:root[data-theme="dark"] .alert-hist-item:hover { background: rgba(255,255,255,0.04); }
.alert-hist-body { flex: 1; min-width: 0; }
.alert-hist-title {
  font-size: calc(14px * var(--font-scale, 1)); font-weight: 600; color: var(--text);
  margin-bottom: 2px;
}
.alert-hist-item.unread .alert-hist-title { font-weight: 700; }
.alert-hist-msg {
  font-size: calc(12px * var(--font-scale, 1)); color: var(--text-2); line-height: 1.5;
}
.alert-hist-time {
  font-size: calc(11px * var(--font-scale, 1)); color: var(--text-4); margin-top: 4px;
}
.alert-hist-del {
  background: transparent; border: none; color: var(--text-4);
  width: 28px; height: 28px; border-radius: var(--r-sm); cursor: pointer;
  font-size: 16px; flex-shrink: 0;
}
.alert-hist-del:hover { background: var(--red-lt); color: var(--red); }
.alerts-empty {
  padding: 48px 20px; text-align: center;
  color: var(--text-3); font-size: calc(14px * var(--font-scale, 1));
}
.alerts-top-actions {
  display: flex; gap: 8px; margin: 12px 16px 0; flex-wrap: wrap;
}
.alerts-type-chip {
  display: inline-block; padding: 2px 8px; border-radius: 8px;
  background: var(--accent-lt); color: var(--accent-dk);
  font-size: calc(10px * var(--font-scale, 1)); font-weight: 700;
  margin-right: 6px; text-transform: uppercase; letter-spacing: 0.3px;
}

/* ── Alert rule editor (multi-type / scope) ─────────────────────────────── */
.are-section {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 10px 12px; background: var(--bg);
}
.are-section-title {
  font-size: calc(12px * var(--font-scale, 1)); font-weight: 700;
  color: var(--text-2); margin-bottom: 8px;
}
.are-radio {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: calc(14px * var(--font-scale, 1)); color: var(--text-1); cursor: pointer;
}
.are-radio input { accent-color: var(--accent); }
.are-chip-grid {
  display: grid; row-gap: 2px; column-gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.are-type-check {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0; cursor: pointer;
  font-size: calc(13px * var(--font-scale, 1));
  color: var(--text-1); line-height: 1.3;
  text-align: left;
}
.are-type-check input { accent-color: var(--accent); margin: 0; flex-shrink: 0; }
.are-type-check span { flex: 1; min-width: 0; }
.are-param-card {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 10px 12px; margin-bottom: 8px; background: var(--bg);
}
.are-param-card-body { display: flex; flex-direction: column; gap: 8px; }
.are-ac-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  max-height: 260px; overflow-y: auto; z-index: 10;
  margin-top: 2px;
}
.are-stock-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.are-stock-chips:empty { margin-top: 0; }
.are-stock-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 8px; border-radius: 12px;
  background: var(--accent-lt); color: var(--accent-dk);
  font-size: calc(12px * var(--font-scale, 1)); font-weight: 600;
  line-height: 1.3;
}
.are-stock-chip .asc-code { color: var(--text-3); font-weight: 500; font-size: calc(11px * var(--font-scale, 1)); }
.are-stock-chip .asc-x {
  width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-3);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.are-stock-chip .asc-x:hover { background: rgba(0,0,0,0.08); color: var(--red); }
.are-cat-check-list {
  display: grid; row-gap: 2px; column-gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.are-cat-check {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0; cursor: pointer;
  font-size: calc(13px * var(--font-scale, 1));
  color: var(--text-1); line-height: 1.3;
}
.are-cat-check input { accent-color: var(--accent); margin: 0; flex-shrink: 0; }
.are-cat-check span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.are-ac-row {
  padding: 8px 10px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-size: calc(13px * var(--font-scale, 1));
  border-bottom: 1px solid var(--border);
}
.are-ac-row:last-child { border-bottom: none; }
.are-ac-row:hover { background: var(--gray-50); }
:root[data-theme="dark"] .are-ac-row:hover { background: rgba(255,255,255,0.05); }
.are-ac-row .are-ac-name { flex: 1; color: var(--text-1); }
.are-ac-row .are-ac-code {
  font-family: monospace; color: var(--text-3);
  font-size: calc(11px * var(--font-scale, 1));
}
.are-ac-empty {
  padding: 10px; font-size: calc(12px * var(--font-scale, 1));
  color: var(--text-4); text-align: center;
}