/* ── CatchWave 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.16);
  --border-grid: rgba(0,0,0,0.05);  /* 격자선(.sd-metrics) 전용 — 카드/버튼 외곽선과 분리 */
  --gray-50:     #fafafa;
  --gray-100:    #f5f5f5;
  --gray-200:    #e5e5e5;
  --accent:      #7c3aed;
  --accent-lt:   #ede9fe;
  --accent-dk:   #5b21b6;
  --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:    #3772cf;           /* KOSPI = 파란색 */
  --mkt-kq:    #7c3aed;           /* KOSDAQ = 보라(violet) */
  --mkt-ks-lt: #e0ebf8;           /* KOSPI hover/tag background */
  --mkt-kq-lt: #ede9fe;           /* KOSDAQ hover/tag background */

  /* 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:        #b4b8be;
  --text-2:      #a4a8af;
  --text-3:      #8a909a;
  --text-4:      #6a7080;
  --border:      rgba(255,255,255,0.04);
  --border-md:   rgba(255,255,255,0.07);
  --border-dark: rgba(255,255,255,0.12);
  --border-grid: rgba(255,255,255,0.05);
  --gray-50:     #272b33;
  --gray-100:    #2e333c;
  --gray-200:    #3a3f4a;
  --accent:      #3a2a66;
  --accent-dk:   #b9a0ff;
  --accent-lt:   rgba(167,139,250,0.12);
  --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:   rgba(60,90,140,0.10);  /* 차가운 회색 — 흰 배경 위 ≈ #ebeef4 */
  --zebra-hover: rgba(167,139,250,0.14);
  --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(167,139,250,.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:     #1e88e5;
  --nxt-bg:      #fef3c7;
  --nxt-fg:      #92400e;
  --score-hi-bg: #dcfce7;
  --score-hi-fg: #166534;
  --save-bg:     #ffe9a8;
  --save-fg:     #b87a08;
  --save-bg-2:   #ffd54f;
  --save-fg-2:   #b76d00;
  /* ── Pill 버튼/인풋 통일 템플릿 — 모든 페이지 공통 (.news-tab, .market-news-tab, .sd-news-tab, .news-search-input) ── */
  --pill-h:      28px;   /* 데스크톱 버튼/인풋 높이 */
  --pill-px:     8px;    /* 데스크톱 버튼/인풋 내부 좌우 여백 */
  --pill-gap:    6px;    /* 데스크톱 버튼 간 간격 */
  --page-pad-x:  16px;   /* 데스크톱 페이지 외곽 좌우 여백 */
}
@media (max-width: 1023px) {
  :root { --pill-h: 28px; --pill-px: 8px; --pill-gap: 4px; --page-pad-x: 8px; }   /* 모바일: 버튼 28/8px, 페이지 좌우 8px */
}
: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:   rgba(180,210,255,0.10);  /* 다크 차가운 회색 — 푸른빛 도는 한 톤 밝은 회색 */
  --zebra-hover: rgba(167,139,250,0.16);
  --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: #cbcfd5;
  --on-accent:   #cbcfd5;
  --cat-bg:       var(--bg-card);
  --cat-bg-hover: var(--zebra-hover);
  --up:          #ff6868;
  --dn:          #60a5fa;
  --fin-neg:     #60a5fa;
  --score-hi-bg: rgba(167,139,250,0.08);
  --score-hi-fg: #b9a0ff;
  --mkt-ks:      #7aa8e8;             /* KOSPI 파란색 (다크 톤) */
  --mkt-kq:      #a78bfa;             /* KOSDAQ 보라 (다크 톤) */
  --mkt-ks-lt:   rgba(55,114,207,0.22);
  --mkt-kq-lt:   rgba(167,139,250,0.18);
  --nxt-bg:      rgba(251,191,36,0.18);
  --nxt-fg:      #fbbf24;
  --save-bg:     rgba(251,191,36,0.35);
  --save-fg:     #fde68a;
  --save-bg-2:   rgba(251,191,36,0.5);
  --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: round(calc(18px * var(--font-scale, 1)), 1px);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
/* 사용자 글씨 크기 레벨 — 모든 font-size가 round(calc(Xpx * var(--font-scale, 1)), 1px)로 스케일됨
   → 정수 픽셀로 스냅되어 sub-pixel blur 없이 모든 레벨에서 크리스프하게 렌더 */

/* 글씨 크기 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: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.settings-fs-dot { color: var(--accent-dk); font-size: round(calc(12px * var(--font-scale, 1)), 1px); }
.fs-seg-btn {
  flex: 1; height: 32px; box-sizing: border-box; padding: 0; border: 1px solid var(--border-dark);
  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; }

/* 테마 모드 선택 */
.theme-mode-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border-dark); border-radius: var(--r-sm);
  cursor: pointer; transition: background .12s, border-color .12s;
  background: var(--bg);
}
.theme-mode-row:hover { border-color: var(--accent); }
.theme-mode-row.on { background: var(--accent-lt); border-color: var(--accent); }
.theme-mode-row input[type="radio"] { accent-color: var(--accent); flex-shrink: 0; width:16px; height:16px; cursor: pointer; }
.theme-mode-info { flex: 1; min-width: 0; }
.theme-mode-title { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600; color: var(--text); }
.theme-mode-sub   { font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-3); margin-top: 2px; }
.theme-sched-row { display: flex; gap: 10px; padding: 4px 4px 2px; flex-wrap: wrap; }
.theme-sched-row label { display: flex; align-items: center; gap: 6px; font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-2); flex: 1; min-width: 140px; }
.theme-sched-row input[type="time"] {
  padding: 6px 8px; border: 1px solid var(--border-dark); border-radius: var(--r-sm);
  background: var(--bg); color: var(--text); font-family: inherit;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); flex: 1;
}
.theme-sched-row input[type="time"]:focus { outline: none; border-color: var(--accent); }
.fs-seg-btn > span { font-weight: 600; }
.fs-seg-btn:nth-child(1) > span { font-size: 10px; }
.fs-seg-btn:nth-child(2) > span { font-size: 12px; }
.fs-seg-btn:nth-child(3) > span { font-size: 14px; }
.fs-seg-btn:nth-child(4) > span { font-size: 16px; }
.fs-seg-btn:nth-child(5) > span { font-size: 18px; }
.fs-seg-btn:nth-child(6) > span { font-size: 20px; }
.fs-seg-btn:nth-child(7) > span { font-size: 22px; }

/* ── 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: hidden;
    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-dark);
    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: round(calc(36px * var(--font-scale, 1)), 1px); letter-spacing: -0.8px; }
  .hero-news-more { margin-right: -16px; }

  /* 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: round(calc(20px * var(--font-scale, 1)), 1px); 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-dark);
}
.dsb-nav {
  padding: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 2px;
  /* 스크롤바 반투명 — 기본은 거의 안 보이고, hover/scroll 시 살짝 표시 */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .25s;
}
.dsb-nav:hover { scrollbar-color: rgba(128,128,128,0.25) transparent; }
.dsb-nav::-webkit-scrollbar { width: 6px; }
.dsb-nav::-webkit-scrollbar-track { background: transparent; }
.dsb-nav::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background .25s;
}
.dsb-nav:hover::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.25); }
.dsb-nav::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,0.4); }
.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: round(calc(18px * var(--font-scale, 1)), 1px); font-weight: 500;
  color: var(--text-2); cursor: pointer; text-align: left;
  font-family: inherit; transition: background .12s, color .12s;
}
.dsb-item svg { width: 20px; height: 20px; 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: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4); line-height: 1.5;
  border-top: 1px solid var(--border-dark);
}

/* ── 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: 205px;
  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-dark);
}
.side-panel.open { transform: translateX(0); }

.side-header {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--top-h);
  padding: 0 20px;
  border-bottom: 1px solid var(--border-dark);
  flex-shrink: 0;
}
.side-logo {
  font-size: round(calc(20px * var(--font-scale, 1)), 1px); 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: 8px 10px;
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
  -webkit-overflow-scrolling: touch;
}
.side-nav button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 7px 12px;
  border: none; background: none;
  border-radius: var(--r-sm);
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 500;
  color: var(--text);
  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: round(calc(16px * var(--font-scale, 1)), 1px); }
.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: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4);
  border-top: 1px solid var(--border-dark);
  letter-spacing: 0.3px;
}

/* 사이드바 하단 — 글씨 크기 위젯 (이 기기 적용) */
.side-fs {
  padding: 12px 14px 16px;
  border-top: 1px solid var(--border-dark);
  flex-shrink: 0;
}
.side-fs-title {
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  color: var(--text-3); font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}
.side-fs-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}
.side-fs-btn {
  height: 32px;
  min-width: 0;          /* 좁은 공간에서 콘텐츠가 컬럼을 못 줄이지 않도록 */
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  padding: 0 4px;
  font-family: inherit;
  transition: background .12s, border-color .12s, color .12s;
  overflow: hidden;
}
.side-fs-btn:hover { background: var(--gray-50); border-color: var(--border-md, var(--border-dark)); }
.side-fs-btn.active { background: var(--accent-lt); border-color: var(--accent); color: var(--accent-dk); font-weight: 700; }
.side-fs-btn span { line-height: 1; }
/* 5 단계 글자 크기 — 작게 / 조금작게 / 보통 / 크게 / 아주크게 */
.side-fs-btn:nth-child(1) span { font-size: 11px; }
.side-fs-btn:nth-child(2) span { font-size: 13px; }
.side-fs-btn:nth-child(3) span { font-size: 15px; }
.side-fs-btn:nth-child(4) span { font-size: 17px; }
.side-fs-btn:nth-child(5) span { font-size: 19px; }

/* ── 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-dark);
  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%); }
/* 데스크톱: 탑바 좌우 padding 16px (base 8px override — base가 뒤에 있으므로 여기서 다시 설정) */
@media (min-width: 1024px) {
  .top-bar { padding: 0 16px; }
}

.top-logo {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: round(calc(22px * var(--font-scale, 1)), 1px); font-weight: 600;
  letter-spacing: -0.4px; color: var(--text);
  pointer-events: none;
}
/* 다크 모드 — CatchWave 로고 이미지 숨기고 글씨로 대체 (사이드바에만 적용) */
:root[data-theme="dark"] .dsb-logo img,
:root[data-theme="dark"] .side-logo img {
  display: none;
}
:root[data-theme="dark"] .dsb-logo::after,
:root[data-theme="dark"] .side-logo::after {
  content: 'CatchWave';
  font-size: 24px; font-weight: 700; letter-spacing: -0.6px;
  color: var(--text); line-height: 1;
}

.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: 32px; height: 32px; 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: 32px; height: 32px; 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;
}
.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: 6px; }

/* 화면 방향 토글 버튼 (테마 버튼 왼쪽) — 모바일 전용 */
.orient-toggle {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gray-100); color: var(--text-3);
  border: none; cursor: pointer; padding: 0;
  margin-left: auto; margin-right: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.orient-toggle:hover { background: var(--gray-200); color: var(--text-2); }
.orient-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.orient-toggle .ot-landscape { display: none; }
.orient-toggle .ot-portrait  { display: block; }
:root[data-orient="landscape"] .orient-toggle .ot-portrait  { display: none; }
:root[data-orient="landscape"] .orient-toggle .ot-landscape { display: block; }
/* 기본(모든 화면): theme-toggle이 우측 정렬 담당.
   top-bar는 justify-content: space-between 이라 margin-left:auto가 없으면 아이콘 3개가
   양 끝 + 중앙으로 흩어져서 큰 간격이 생긴다. */
.theme-toggle { margin-left: auto; }
/* 데스크탑/태블릿: 화면 방향 토글 숨김 (모바일 전용) */
@media (min-width: 769px) {
  .orient-toggle { display: none; }
}
/* 모바일에서만 orient-toggle이 보이며, 그때는 orient-toggle이 우측 정렬 담당 →
   theme-toggle은 바로 옆에 붙음. (display:none 상태의 형제 셀렉터가 매칭되어
   태블릿 폭에서 큰 간격을 만드는 버그가 있었으므로 모바일 미디어 안에 가둠) */
@media (max-width: 768px) {
  .theme-toggle { margin-left: 0; }
}

/* 알림 벨 배지 (bottom-nav 알림 버튼) */
.bell-badge {
  position: absolute; top: -4px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--red); color: #fff;
  font-size: round(calc(12px * var(--font-scale, 1)), 1px); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.bell-badge[hidden] { display: none; }
.sq-item {
  display: grid; grid-template-columns: 22px 1fr auto auto auto;
  gap: 8px; align-items: center; padding: 6px;
  border: 1px solid var(--border-dark); border-radius: 8px; background: var(--bg);
}
.sq-handle { cursor: grab; color: var(--text-4); user-select: none; text-align: center; font-size: round(calc(16px * var(--font-scale, 1)), 1px); }
.sq-name { padding: 6px 8px; border: 1px solid transparent; background: transparent; border-radius: 6px; font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600; min-width: 0; }
.sq-name:hover { border-color: var(--border-dark); 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: round(calc(14px * var(--font-scale, 1)), 1px); 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: round(calc(10px * var(--font-scale, 1)), 1px); font-weight: 700;
  vertical-align: middle; letter-spacing: 0.5px;
}
/* NXT에서 실제 거래되는 종목의 현재가만 밝은 노란 톤으로 표시 (NXT 미거래 종목은 기존 색상) */
.wl-price.is-nxt-price { color: #d97706; font-weight: 600; }
[data-theme="dark"] .wl-price.is-nxt-price { color: #fbbf24; }
/* ── 사이드바 구분선 ──────────────────────────────────────────────────── */
.side-nav-divider {
  margin: 8px 4px;
  border: none;
  border-top: 1px solid var(--border-dark);
  height: 0;
}

/* 관리자 전용 메뉴 — 기본 숨김, body.is-admin일 때만 노출
   .side-nav button / .dsb-item 의 display:flex 보다 우선하도록 더 구체적으로 작성 */
.side-nav .menu-admin-only,
.dsb-nav .menu-admin-only,
hr.menu-admin-only { display: none; }
body.is-admin .side-nav .menu-admin-only,
body.is-admin .dsb-nav .menu-admin-only { display: flex; }
body.is-admin hr.menu-admin-only { display: block; }

/* ── 커뮤니티 페이지 ──────────────────────────────────────────────────── */
.comm-item {
  background: var(--bg-card); border: 1px solid var(--border-dark);
  border-radius: var(--r-sm); margin: 6px 8px; padding: 10px 12px;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.comm-item:hover { border-color: var(--accent); }
.comm-item.open { border-color: var(--accent); }
.comm-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.comm-title {
  flex: 1; font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  font-weight: 500; color: var(--text-1); line-height: 1.5;
}
.comm-meta {
  flex-shrink: 0; font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  color: var(--text-4); white-space: nowrap;
}
.comm-row-right {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.comm-save-btn {
  flex-shrink: 0; border: none; background: none; cursor: pointer;
  padding: 0 2px; font-size: round(calc(18px * var(--font-scale, 1)), 1px);
  color: var(--text-4); line-height: 1;
}
.comm-save-btn.on { color: #f59e0b; }
.comm-save-btn:hover { color: var(--accent); }
.comm-row-meta {
  margin-top: 4px; font-size: round(calc(11px * var(--font-scale, 1)), 1px);
  color: var(--text-4);
}
.comm-summary {
  margin-top: 6px; font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  color: var(--text-3); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.comm-compact { padding: 6px 12px; }
.comm-compact .comm-title {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.comm-body {
  margin-top: 10px; padding: 10px 0 4px;
  border-top: 1px solid var(--border-dark);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  line-height: 1.65; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word; cursor: text;
}
.comm-orig-link {
  display: inline-block; padding: 5px 10px;
  background: var(--accent-lt); color: var(--accent-dk);
  border-radius: var(--r-sm); text-decoration: none; font-size: round(calc(12px * var(--font-scale, 1)), 1px);
}
.comm-orig-link:hover { background: var(--accent); color: #fff; }
.comm-copy-link {
  display: inline-block; padding: 5px 10px; margin-left: 6px;
  background: var(--bg); color: var(--accent-dk);
  border: 1px solid var(--accent); border-radius: var(--r-sm);
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  font-family: inherit; cursor: pointer;
}
.comm-copy-link:hover { background: var(--accent-lt); }
.comm-copy-link.copied { background: var(--accent); color: #fff; border-color: var(--accent); }
/* 커뮤니티/뉴스 리스트 zebra — 홀수 줄(1,3,5...) 연한 회색 / 짝수 줄 흰색(=bg) */
#comm-list .news-item:nth-of-type(odd),
#news-list .news-item:nth-of-type(odd) { background: var(--zebra-odd); }
#comm-list .news-item:nth-of-type(even),
#news-list .news-item:nth-of-type(even) { background: var(--bg); }
/* 리스트 컨테이너에 외곽 테두리만 적용 — 행간 구분선 없음, 4면 동일 색상 */
#news-list, #comm-list {
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  overflow: hidden;
}
[data-theme="dark"] #comm-list .news-item:nth-of-type(odd),
[data-theme="dark"] #news-list .news-item:nth-of-type(odd) { background: var(--zebra-odd); }
/* 본문 영역은 항상 흰색(=bg)으로 — 행 zebra 색상이 비쳐 짙어지는 현상 방지 */
#comm-list .news-content.open,
#news-list .news-content.open,
#favnews-body .news-content.open { background: var(--bg); }
/* 닫힌 상태: 메타(출처) 행 숨김 — 펼치면 표시 (커뮤니티만) */
#comm-list .news-item .news-meta { display: none; }
#comm-list .news-item.is-open .news-meta { display: flex; }
#comm-list .news-item .news-item-header,
#news-list .news-item .news-item-header { padding-left: 7px; padding-right: 7px; }
#comm-list .news-item .news-content.open,
#news-list .news-item .news-content.open { padding-left: 8px; padding-right: 8px; }
.comm-more-wrap { padding: 14px 0 24px; display: block; }
#news-list + .comm-more-wrap { padding-left: 16px; padding-right: 16px; }
/* 모바일: 뉴스 페이지 더보기 버튼 좌우 8px */
@media (max-width: 1023px) {
  #news-list + .comm-more-wrap { padding-left: 8px; padding-right: 8px; }
}
.comm-more-btn {
  width: 100%; height: 36px; padding: 0 14px;
  background: rgba(167,139,250,0.10); border: 1px solid var(--border-dark);
  border-radius: 9999px; cursor: pointer;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); color: var(--text-2);
  line-height: 1; box-sizing: border-box;
  transition: border-color .12s, color .12s, background .12s;
}
.comm-more-btn:hover:not(:disabled) { background: rgba(167,139,250,0.14); border-color: var(--accent, #7c3aed); color: var(--accent-dk, #5b21b6); }
.comm-more-btn:focus { outline: none; }
.comm-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.comm-more-btn:active:not(:disabled) { background: rgba(167,139,250,0.22); }
.comm-more-btn:disabled { opacity: 0.6; cursor: default; }

/* ── 패턴학습 페이지 ──────────────────────────────────────────────────── */
.pat-top { padding: 14px var(--page-pad-x) 4px; }
/* 옵션 카운트 (드롭다운 우측 숫자) */
.pat-opt-count { color: var(--text-4); font-size: round(calc(12px * var(--font-scale, 1)), 1px); margin-left: 8px; font-variant-numeric: tabular-nums; }
.pat-toptabs {
  display: flex; gap: 8px; margin-bottom: 4px;
  justify-content: flex-start;
}
.pat-toptab {
  height: 28px; padding: 0 14px;
  background: var(--bg-card); border: 1px solid var(--border-dark);
  border-radius: var(--r-sm); cursor: pointer;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); font-weight: 600;
  color: var(--text-3);
  display: inline-flex; align-items: center;
  transition: border-color .15s, background .15s, color .15s;
}
.pat-toptab:hover { border-color: var(--accent); }
.pat-toptab.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.pat-sectiontabs { padding: 6px 16px 4px; overflow-x: auto; }
.pat-section-count {
  display: inline-block; margin-left: 6px;
  min-width: 18px; padding: 0 5px; height: 18px; line-height: 18px;
  border-radius: 9px; text-align: center;
  font-size: round(calc(11px * var(--font-scale, 1)), 1px); font-weight: 700;
  background: rgba(0,0,0,0.08); color: var(--text-3);
  vertical-align: middle;
}
.news-tab.active .pat-section-count {
  background: rgba(255,255,255,0.28); color: #fff;
}
[data-theme="dark"] .pat-section-count { background: rgba(255,255,255,0.10); }
.pat-typechips   { padding: 0 16px 8px; }
.pat-section-body { padding: 8px 16px 16px; }
.pat-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.pat-card {
  background: var(--bg-card); border: 1px solid var(--border-dark);
  border-radius: var(--r-md); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.pat-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.pat-card-hdr {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: 12px 14px 6px;
}
.pat-card-hdr .pat-tag { align-self: flex-start; margin-top: 2px; }
.pat-card-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pat-name { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 700; }
.pat-en   { font-size: round(calc(13px * var(--font-scale, 1)), 1px); color: var(--accent-dk); font-weight: 600; letter-spacing: 0.2px; font-style: italic; }
[data-theme="dark"] .pat-en { color: #c4b5fd; }
.pat-row-reason  { color: var(--text-2); }
.pat-row-reason .pat-variant-hd {
  display: inline-block; margin-top: 8px; font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  color: var(--text-3); font-weight: 700; letter-spacing: 0.3px;
}
.pat-row-reason .pat-variant-list { margin: 4px 0 0; padding-left: 18px; }
.pat-row-reason .pat-variant-list li { margin-top: 4px; line-height: 1.5; }
.pat-row-reason .pat-variant-list li b { color: var(--text); font-weight: 600; }
.pat-row-watch   { color: var(--accent-dk); font-weight: 500; }
.pat-search-wrap { padding: 6px 16px 8px; }
.pat-search-box  { position: relative; display: block; }
.pat-search-input {
  width: 100%; height: 34px; padding: 0 36px 0 12px;
  border: 1px solid var(--border-dark); border-radius: var(--r-sm);
  background: var(--bg-card); color: var(--text-1);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  box-sizing: border-box;
}
.pat-search-input:focus { outline: none; border-color: var(--accent); }
.pat-search-clear {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0; border: none;
  background: var(--gray-100); color: var(--text-3);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.pat-search-clear:hover { background: var(--text-3); color: #fff; }
.pat-search-hits { padding: 4px 16px 8px; color: var(--text-3); font-size: round(calc(12px * var(--font-scale, 1)), 1px); }
.pat-tag {
  font-size: round(calc(11px * var(--font-scale, 1)), 1px); font-weight: 700;
  padding: 2px 8px; border-radius: 999px; flex-shrink: 0; letter-spacing: 0.3px;
}
.pat-tag-bull { background: rgba(220,38,38,0.12); color: #dc2626; }
.pat-tag-bear { background: rgba(37,99,235,0.12); color: #2563eb; }
.pat-tag-neut { background: var(--gray-100); color: var(--text-3); }
.pat-tag-info { background: var(--accent-lt); color: var(--accent-dk); }
[data-theme="dark"] .pat-tag-bull { background: rgba(255,104,104,0.18); color: #ff8a8a; }
[data-theme="dark"] .pat-tag-bear { background: rgba(96,165,250,0.18); color: #93c5fd; }
.pat-card-svg { padding: 0 14px; background: var(--bg-card); }
.pat-card-svg .cd-svg { width: 100%; height: auto; max-height: 160px; }
.pat-card-body { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.pat-row { display: flex; gap: 8px; align-items: flex-start; }
.pat-row-lbl {
  flex-shrink: 0; width: 40px; font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  color: var(--text-4); font-weight: 700; padding-top: 2px; letter-spacing: 0.5px;
}
.pat-row-val { flex: 1; font-size: round(calc(15px * var(--font-scale, 1)), 1px); line-height: 1.55; }
.pat-row-signal { color: var(--accent-dk); font-weight: 500; }
.pat-row-caution { color: #b45309; }
[data-theme="dark"] .pat-row-caution { color: #fbbf24; }

/* 캔들 SVG */
/* 캔들 색상 — 한국식: 양봉 빨강, 음봉 파랑 */
.cd-svg .cd-up         { fill: var(--up, #e53935); stroke: var(--up, #e53935); }
.cd-svg .cd-down       { fill: #2563eb; stroke: #2563eb; }
[data-theme="dark"] .cd-svg .cd-down { fill: #60a5fa; stroke: #60a5fa; }
.cd-svg .cd-body       { stroke-width: 0.5; }
.cd-svg .cd-wick       { stroke-width: 1; fill: none; }
.cd-svg .cd-body-line  { stroke-width: 1.5; fill: none; }
.cd-svg .cd-vol        { opacity: 0.55; stroke-width: 0; }
.cd-svg .cd-vol-up     { fill: var(--up, #e53935); }
.cd-svg .cd-vol-dn     { fill: #2563eb; }
[data-theme="dark"] .cd-svg .cd-vol-dn { fill: #60a5fa; }
.cd-svg .cd-axlbl      { font-size: 9px; fill: var(--text-4); }
.cd-svg .cd-trend      { stroke-width: 1.2; stroke-dasharray: 3 2; opacity: 0.5; }
.cd-svg .cd-trend-up   { stroke: #2563eb; }
.cd-svg .cd-trend-down { stroke: var(--up, #e53935); }
.cd-svg .cd-mark       { font-size: 10px; font-weight: 700; }
.cd-svg .cd-mark-up    { fill: var(--up, #e53935); }
.cd-svg .cd-mark-down  { fill: #2563eb; }

/* 자동 검출 결과 */
.pat-matches {
  margin: 12px var(--page-pad-x) 16px; padding: 12px;
  background: var(--accent-lt); border-radius: var(--r-md);
  border: 1px solid var(--accent);
}
@media (max-width: 1023px) {
  .pat-matches { padding: 8px; }   /* 모바일: 카드 내부 여백 8px */
  .pat-match { padding: 8px; }     /* 자동매칭 내부 카드 여백 8px */
}
.pat-matches-title {
  font-size: round(calc(15px * var(--font-scale, 1)), 1px); font-weight: 700;
  color: var(--accent-dk); margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pat-matches-ts {
  font-size: round(calc(11px * var(--font-scale, 1)), 1px); color: var(--text-4);
  font-weight: 500; margin-left: 6px;
}
.pat-refresh {
  background: var(--bg-card); border: 1px solid var(--border-dark);
  border-radius: var(--r-sm); padding: 6px 8px; cursor: pointer;
  color: var(--accent-dk); display: inline-flex; align-items: center;
  transition: border-color .15s, transform .15s;
  flex-shrink: 0;
}
.pat-refresh:hover { border-color: var(--accent); }
.pat-refresh:active { transform: scale(0.92); }
.pat-refresh.spinning svg { animation: pat-spin 0.7s linear infinite; }
@keyframes pat-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.pat-matches-count {
  font-size: round(calc(12px * var(--font-scale, 1)), 1px); font-weight: 600;
  background: var(--accent); color: #fff; padding: 1px 8px; border-radius: 999px; margin-left: 6px;
}
.pat-matches-empty {
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); color: var(--text-3); padding: 6px 0;
}
.pat-matches-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.pat-match {
  background: var(--bg-card); border: 1px solid var(--border-dark);
  border-radius: var(--r-sm); padding: 10px 12px; cursor: pointer;
  transition: border-color .15s;
}
.pat-match:hover { border-color: var(--accent); }
.pat-match-hdr {
  display: flex; align-items: flex-start; gap: 6px; margin-bottom: 4px; flex-wrap: wrap;
}
.pat-match-hdr .pat-tag { margin-left: auto; align-self: flex-start; }
.pat-match-name { font-weight: 700; font-size: round(calc(14px * var(--font-scale, 1)), 1px); }
.pat-match-code { font-size: round(calc(11px * var(--font-scale, 1)), 1px); color: var(--text-4); font-family: monospace; }
.pat-match-body {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px;
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
}
.pat-match-patterns {
  flex: 1; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 4px 6px;
}
.pat-match-sep { color: var(--text-4); margin: 0 2px; }
.pat-match-pattern {
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.pat-match-pattern.pat-sig-bull { color: #dc2626; }
.pat-match-pattern.pat-sig-bear { color: #2563eb; }
.pat-match-pattern.pat-sig-info { color: var(--accent-dk); }
[data-theme="dark"] .pat-match-pattern.pat-sig-bull { color: #ff8a8a; }
[data-theme="dark"] .pat-match-pattern.pat-sig-bear { color: #93c5fd; }
[data-theme="dark"] .pat-match-pattern.pat-sig-info { color: #c4b5fd; }
.pat-match-pattern:hover { opacity: 0.75; }
.pat-modal-wrap { position: relative; padding: 8px; }
.pat-modal-close {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 28px; height: 28px; padding: 0; border: none;
  background: var(--gray-100); color: var(--text-3);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.pat-modal-close:hover { background: var(--text-3); color: #fff; }
.pat-modal-wrap .pat-card { border: none; }
.pat-match-date    { color: var(--text-4); }

/* 시장경보 자동 알림 토글 (알림 설정 탭 상단 배너) */
.market-alert-toggle {
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--page-pad-x); margin: 12px var(--page-pad-x);
  background: var(--bg-card); border: 1px solid var(--border-dark);
  border-radius: var(--r-md); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.market-alert-toggle:hover { background: var(--gray-50); }
.market-alert-toggle.on { border-color: var(--accent); }
.market-alert-toggle .ma-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-lt); color: var(--accent-dk);
  border-radius: var(--r-sm); font-size: round(calc(20px * var(--font-scale, 1)), 1px);
}
.market-alert-toggle.off .ma-icon { background: var(--gray-100); color: var(--text-4); }
.market-alert-toggle .ma-info { flex: 1; min-width: 0; }
.market-alert-toggle .ma-label {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600;
}
.market-alert-toggle .ma-sub {
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); color: var(--text-4);
  margin-top: 2px; line-height: 1.4;
}
.market-alert-toggle .ma-switch {
  width: 44px; height: 24px; border-radius: 12px;
  background: var(--gray-300); position: relative; flex-shrink: 0;
  transition: background .15s;
}
.market-alert-toggle.on .ma-switch { background: var(--accent); }
.market-alert-toggle .ma-knob {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: left .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.market-alert-toggle.on .ma-knob { left: 22px; }
/* 인라인 작은 아이콘 — 데스크톱은 숨김(왼쪽 큰 아이콘 사용), 모바일에서만 label 오른쪽에 작게 표시 */
.market-alert-toggle .ma-icon-inline { display: none; }
@media (max-width: 1023px) {
  .market-alert-toggle .ma-icon { display: none; }
  .market-alert-toggle .ma-icon-inline {
    display: inline-block; margin-left: 6px;
    font-size: round(calc(14px * var(--font-scale, 1)), 1px);
    color: var(--accent-dk); vertical-align: middle;
  }
  .market-alert-toggle.off .ma-icon-inline { color: var(--text-4); }
}

/* 시장경보 배지 — 종목명 옆에 단계별 색상으로 표시 */
.alert-badge {
  display: inline-block; padding: 0 4px; margin-left: 4px;
  border-radius: 3px; font-size: round(calc(10px * var(--font-scale, 1)), 1px);
  font-weight: 700; vertical-align: middle; letter-spacing: 0.3px;
  line-height: 1.5;
}
.alert-badge.alert-caution { background: #fef3c7; color: #92400e; }
.alert-badge.alert-warning { background: #fed7aa; color: #9a3412; }
.alert-badge.alert-risk    { background: #fecaca; color: #991b1b; }
[data-theme="dark"] .alert-badge.alert-caution { background: #78350f; color: #fde68a; }
[data-theme="dark"] .alert-badge.alert-warning { background: #7c2d12; color: #fed7aa; }
[data-theme="dark"] .alert-badge.alert-risk    { background: #7f1d1d; color: #fecaca; }
.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-dark);
}
.auth-tab {
  flex: 1; padding: 14px 0; border: none; background: none;
  font-size: round(calc(18px * var(--font-scale, 1)), 1px); 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: round(calc(16px * var(--font-scale, 1)), 1px); }

/* 관심키워드 칩 (클릭으로 필터) */
.kw-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; box-sizing: border-box;
  padding: 0 12px; border-radius: var(--r-pill);
  background: var(--accent-lt); color: var(--accent-dk);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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(167,139,250,0.25); }
.kw-match { font-size: round(calc(12px * var(--font-scale, 1)), 1px); 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-dark); }
.kwm-gtabs { display:flex; gap:4px; flex:1; overflow-x:auto; }
.kwm-gtab {
  height:32px; box-sizing:border-box; padding:0 10px; border:1px solid var(--border-dark); background:var(--bg);
  border-radius:var(--r-pill); font-size:round(calc(14px * var(--font-scale, 1)), 1px);
  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:round(calc(12px * var(--font-scale, 1)), 1px); }
.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-dark); border-radius:6px;
  font-size:round(calc(14px * var(--font-scale, 1)), 1px); font-family:inherit; background:var(--gray-50);
  height:32px; box-sizing:border-box;
}
.grpm-name:focus { outline:none; border-color:var(--accent); background:var(--bg); }
.grpm-cnt {
  flex-shrink:0;
  font-size:round(calc(12px * var(--font-scale, 1)), 1px); color:var(--text-4); min-width:28px; text-align:right;
}
.grpm-del {
  flex-shrink:0;
  width:28px; height:32px; border-radius:6px; border:none; background:rgba(220,38,38,0.08);
  color:var(--red); cursor:pointer; font-size:round(calc(14px * var(--font-scale, 1)), 1px); 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:32px; border-radius:var(--r-pill); border:none;
  background:var(--text); color: var(--on-accent); font-weight:500; cursor:pointer;
  font-size:round(calc(14px * var(--font-scale, 1)), 1px); 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-dark); min-height:32px;
}
.kwm-row:last-child { border-bottom:none; }
.kwm-kw { flex:1; font-size:round(calc(14px * var(--font-scale, 1)), 1px); font-weight:500; }
.kwm-move {
  padding:2px 6px; height:24px; border:1px solid var(--border-dark); border-radius:6px;
  background:var(--bg); font-size:round(calc(12px * var(--font-scale, 1)), 1px); 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:round(calc(14px * var(--font-scale, 1)), 1px); 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-dark);
}

/* ── Bottom Nav ───────────────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  height: var(--nav-h);
  /* PTR(풀투리프레시) 깜빡임 방지: 반투명+blur 대신 불투명 배경 사용 — 매 프레임 backdrop 재계산 비용 제거 */
  background: var(--bg);
  border-top: 1px solid var(--border-dark);
  display: flex; z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
  /* 별도 컴포지팅 레이어로 분리 + paint 격리로 overscroll 시 repaint 최소화 */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  contain: layout paint;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.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: round(calc(12px * var(--font-scale, 1)), 1px); font-weight: 500;
  letter-spacing: 0.2px; transition: color .12s;
}
.nav-item svg { width: 22px; height: 22px; fill: currentColor; }
.nav-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.nav-item.active { color: var(--text); }
.nav-item.active svg { fill: var(--accent); }
/* 다크 모드 — 하단바 글씨 톤 일관성 (active/inactive 모두 동일한 밝은 텍스트, 활성은 아이콘 색으로만 구분) */
[data-theme="dark"] .nav-item { color: var(--text-2); }
[data-theme="dark"] .nav-item.active { color: var(--text-2); }
[data-theme="dark"] .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: round(calc(32px * var(--font-scale, 1)), 1px); letter-spacing: -0.7px; }
  .hero-news-more { margin-right: -8px; }
}

/* ── Hero Section ─────────────────────────────────────────────────────────── */
.hero {
  background: transparent;   /* 그라데이션은 #main 의 가상요소가 담당 — 시황 섹션까지 자연스럽게 연결 */
  padding: 28px 20px 0;
  position: relative;
}
/* 홈 페이지의 그라데이션 — 히어로 영역에서 시작해 주요뉴스 영역까지 부드럽게 fade out */
#main:has(.hero) { position: relative; }
#main:has(.hero)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 720px;
  background: var(--hero-bg);
  pointer-events: none;
  z-index: 0;
}
#main:has(.hero) > * { position: relative; z-index: 1; }
.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: round(calc(14px * var(--font-scale, 1)), 1px); 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: round(calc(28px * var(--font-scale, 1)), 1px); font-weight: 600;
  line-height: 1.2; letter-spacing: -0.6px;
  color: var(--text); margin-bottom: 8px;
}
.hero-sub {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); color: var(--text-3);
  line-height: 1.6; margin-bottom: 18px;
}
.hero-stats {
  display: flex; gap: 20px;
}
.hero-stat { font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4); }
.hero-stat strong {
  display: block; font-size: round(calc(20px * var(--font-scale, 1)), 1px); 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: round(calc(16px * var(--font-scale, 1)), 1px); color: var(--text-3); margin-bottom: 4px; font-weight: 500; }
.hero-greeting { font-size: round(calc(22px * var(--font-scale, 1)), 1px); font-weight: 700; letter-spacing: -0.5px; color: var(--text-1); margin: 0; }
.hero-market-badge {
  height: 32px; box-sizing: border-box; display: inline-flex; align-items: center;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 600; padding: 0 10px;
  background: var(--bg-elev); border: 1px solid var(--border-dark);
  border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0;
}
.hero-tagline {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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: round(calc(14px * var(--font-scale, 1)), 1px); 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; border: 1px solid var(--border-dark); border-radius: 8px; overflow: hidden; }
.hero-news-item {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 14px; cursor: pointer; transition: background .12s;
  line-height: 1.5;
}
.hero-news-list .hero-news-item:nth-child(odd) { background: var(--zebra-odd); }
.hero-news-item:hover { background: var(--row-hover); }
.hero-news-title {
  flex: 1; font-size: calc(var(--news-title-fs, 16px) * var(--font-scale, 1)) !important; color: var(--text-2); font-weight: 500;
  line-height: var(--news-line-height, 1.7) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.2px;
}
.hero-news-time { font-size: round(calc(12px * var(--font-scale, 1)), 1px); color: var(--text-4); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.hero-news-more { display: flex; justify-content: flex-end; padding: 2px 0 2px; margin-right: -4px; }
.hero-news-more-btn {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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: round(calc(16px * var(--font-scale, 1)), 1px); 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-dark);
  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: round(calc(22px * var(--font-scale, 1)), 1px);
}
.setup-text { flex: 1; }
.setup-title { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600; margin-bottom: 4px; }
.setup-desc  { font-size: round(calc(16px * var(--font-scale, 1)), 1px); color: var(--text-3); line-height: 1.5; }
.setup-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; box-sizing: border-box; margin-top: 10px;
  background: var(--text);
  color: var(--on-accent); font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 500;
  padding: 0 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: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-4);
}
.section-link {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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;
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; box-sizing: border-box;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 500;
  border: 1px solid var(--border-dark);
  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-dark);
  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-dark); }
.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: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; flex-shrink: 0;
}

.stock-card-name {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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: round(calc(14px * var(--font-scale, 1)), 1px); 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: round(calc(12px * var(--font-scale, 1)), 1px); 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-dark); background: var(--bg);
  color: var(--text-4); font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  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: round(calc(40px * var(--font-scale, 1)), 1px); margin-bottom: 14px; }
.empty-title { font-size: round(calc(18px * var(--font-scale, 1)), 1px); font-weight: 600; margin-bottom: 6px; }
.empty-desc  { font-size: round(calc(16px * var(--font-scale, 1)), 1px); color: var(--text-3); line-height: 1.6; }
.empty-btn {
  margin-top: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; box-sizing: border-box;
  background: var(--text); color: var(--on-accent);
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 500;
  padding: 0 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-dark);
  border-radius: var(--r-pill);
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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-dark);
  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: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.search-item-info { flex: 1; min-width: 0; }
.search-item-name { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 500; }
.search-item-meta {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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-dark);
  background: var(--bg); color: var(--text);
  font-size: round(calc(20px * var(--font-scale, 1)), 1px); 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: round(calc(16px * var(--font-scale, 1)), 1px); }

/* ── Segment Control ─────────────────────────────────────────────────────── */
.seg-ctrl {
  display: inline-flex;
  background: var(--gray-100);
  border-radius: var(--r-pill);
  padding: 2px;
  gap: 2px;
}
.seg-btn {
  height: var(--pill-h); box-sizing: border-box; line-height: 1;
  padding: 0 var(--pill-px);
  border: 1px solid var(--border-dark); background: var(--bg);
  border-radius: var(--r-pill);
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 500;
  color: var(--text); 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(--accent);
  color: var(--on-accent); font-weight: 600;
  border-color: var(--accent);
  box-shadow: none;
}

/* ── 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: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 600;
  color: var(--text-4); letter-spacing: 0.5px; text-transform: uppercase;
  flex: 1;
}
.watchlist-count {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4);
  background: var(--bg);
  padding: 1px 8px; border-radius: var(--r-pill);
}

.mo-section { margin: 4px 16px 0; }
/* 모바일 — 홈 페이지 좌우 여백 8px (데스크탑은 16px 유지) */
@media (max-width: 600px) {
  .hero { padding-left: 8px; padding-right: 8px; }
  .mo-section { margin-left: 8px; margin-right: 8px; }
}
/* 환율 (#market-overview 마지막) → 주요뉴스 사이 간격 — 섹션간 표준 24px */
#market-overview + .mo-section { margin-top: 24px; }
/* 시황 뉴스 카드 — 탭 (시황 / 해외증시 / 환율) — 차트 기간선택 버튼과 동일 스타일 */
.market-news-tabs { display: inline-flex; gap: var(--pill-gap); }
.market-news-tab {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--pill-h); padding: 0 var(--pill-px); line-height: 1;
  border: 1px solid var(--border-dark); background: transparent;
  color: var(--text-3);
  border-radius: var(--r-pill);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  font-weight: 500; font-family: inherit;
  cursor: pointer; white-space: nowrap; box-sizing: border-box; flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.market-news-tab:hover { background: var(--gray-50); color: var(--text-1); }
.market-news-tab.active {
  background: rgba(167,139,250,0.12);
  border-color: var(--accent, #7c3aed);
  color: var(--accent-dk, #5b21b6);
}
#market-news-section { margin-bottom: 24px; }
#market-news-section .mo-section-title { text-transform: none; letter-spacing: 0; }
#market-news-body {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
}
#market-news-body .hero-news-list { background: transparent; }

/* 홈 주요뉴스 — 제목만 좌우 스크롤(행별 + JS로 동기화), 날짜 우측 고정, 본문은 정상폭 */
.home-news-item { display: block; padding: 0 !important; }
.home-news-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  cursor: pointer; line-height: 1.5;
}
/* 제목 영역만 좌우 스크롤 — 스크롤바는 숨김 */
.home-news-title-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
  display: flex;
  align-items: center;
}
.home-news-title-scroll::-webkit-scrollbar { display: none; }
.home-news-title-scroll .hero-news-title {
  display: inline-block;
  white-space: nowrap;
  font-size: calc(var(--news-title-fs, 16px) * var(--font-scale, 1)) !important;
  line-height: var(--news-line-height, 1.7) !important;
  color: var(--text-2);
  font-weight: 500;
}
.home-news-row .hero-news-time {
  flex-shrink: 0;
  padding-left: 3px;
}
/* sticky right 가 불투명하게 보이도록 행/항목 배경을 명시 (zebra 와 동기화 — var 사용) */
#market-news-body .hero-news-item { background: var(--bg); }
#market-news-body .hero-news-item:nth-child(odd) { background: var(--zebra-odd); }
#market-news-body .hero-news-item:hover { background: var(--row-hover); }
#market-news-body .hero-news-item:nth-child(odd):hover { background: var(--row-hover); }
.home-news-content {
  display: grid; grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .25s ease;
  background: var(--bg);
}
.home-news-content > * { min-height: 0; overflow: hidden; }
.home-news-content.open { grid-template-rows: 1fr; }
.home-news-body { padding: 4px 8px 14px; }
@media (min-width: 1024px) {
  .home-news-body { padding: 4px 16px 14px; }
}
/* 데스크탑: 뉴스/커뮤니티 리스트 안의 본문은 제목과 같은 x 위치에서 시작 — 좌우 추가 인덴트 제거 */
@media (min-width: 1024px) {
  #news-list .home-news-body,
  #comm-list .home-news-body {
    padding-left: 0;
    padding-right: 0;
  }
  #news-list .news-content-body,
  #comm-list .news-content-body {
    padding-left: 8px;
    padding-right: 8px;
  }
}
/* 본문 카드는 모든 컨텍스트(홈/뉴스/커뮤니티)에서 동일 레이아웃 — home-news-body padding 안쪽에 위치 (negative margin 사용 X) */
.home-news-img { max-width: 100%; height: auto; border-radius: 6px; margin-bottom: 10px; display: block; }
.home-news-text { font-size: round(calc(15px * var(--font-scale, 1)), 1px); line-height: 1.65; color: var(--text-1); }
.home-news-text p { margin: 0 0 10px; }
/* 모바일 — 본문 여백 / 들여쓰기 축소 */
@media (max-width: 600px) {
  .home-news-body { padding: 4px 8px 8px; }
  .home-news-text p { margin: 0 0 5px; }
}
.home-news-actions { margin-top: 8px; }
.home-news-actions a { font-size: round(calc(13px * var(--font-scale, 1)), 1px); color: var(--accent-dk, #5b21b6); text-decoration: none; }
.home-news-actions a:hover { text-decoration: underline; }
/* 주식시세는 시황뉴스 다음에 오므로 추가 spacing 보장 */
#market-news-section + .mo-section { margin-top: 0; }
.mo-section-title { font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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)); } }

/* 관심종목 페이지의 시황 그리드 — 칩과 카드 사이 */
/* KOSPI / KOSDAQ 박스 영역 — 상/하/좌/우 모두 var(--page-pad-x)
   데스크톱 16px, 모바일 8px (매매동향 페이지 flow-idx-nav 와 동일 형식) */
.screen-mo-wrap { padding: var(--page-pad-x); }
.screen-mo-wrap .mo-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-width: 560px;   /* 한 줄 표시 필요폭 ~470px × ~1.2 */
  margin: 0;          /* 왼쪽 정렬 (가운데 정렬 X) */
}
/* 2행 레이아웃: 1행 = 라벨(좌) + 지수(우), 2행 = 등락 */
.screen-mo-wrap .mo-item {
  flex-direction: row; flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 12px; row-gap: 2px;
}
.screen-mo-wrap .mo-item .mo-label { flex: 0 0 auto; }
.screen-mo-wrap .mo-item .mo-price { flex: 0 0 auto; text-align: right; white-space: nowrap; margin: 0; }
.screen-mo-wrap .mo-item .mo-chg { flex-basis: 100%; margin: 0; white-space: nowrap; text-align: right; display: flex; justify-content: flex-end; gap: 6px; }
.mo-item {
  border: 1px solid var(--border-dark); 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: round(calc(16px * var(--font-scale, 1)), 1px); color: var(--text-4); font-weight: 500; }
.mo-price { font-size: round(calc(18px * var(--font-scale, 1)), 1px); font-weight: 600; font-variant-numeric: tabular-nums; }
.mo-chg { font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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); }

/* 모바일 — 홈 시황/환율 카드 그리드 → 4컬럼 테이블 (이름 / 값 / 등락 / 등락%)
   .mo-item 과 .mo-chg 모두 display:contents 로 풀어서 모든 셀을 .mo-grid 그리드의 직접 자식으로 승격
   → 모든 행이 동일한 컬럼 트랙을 공유 → 컬럼 너비 = 가장 긴 콘텐츠 (모든 행 수직 정렬 일치) */
@media (max-width: 1023px) {
  #market-overview .mo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content max-content max-content;
    gap: 0;
    border: 1px solid var(--border-dark); border-radius: 8px; overflow: hidden;
    background: var(--bg);
  }
  #market-overview .mo-grid > .mo-item,
  #market-overview .mo-grid > .mo-item > .mo-chg { display: contents; }
  /* 각 셀 — padding + border + 가운데 정렬
     이름 컬럼 오른쪽 padding 축소, 나머지 컬럼들에 왼쪽 padding 추가 (스페이스 1칸 분)
     세로 padding 10px 로 행간 확장 */
  #market-overview .mo-grid > .mo-item > .mo-label,
  #market-overview .mo-grid > .mo-item > .mo-price,
  #market-overview .mo-grid > .mo-item > .mo-chg > .mo-chg-val,
  #market-overview .mo-grid > .mo-item > .mo-chg > .mo-chg-rate {
    padding: 6px 6px; border: 0;
    border-bottom: 1px solid var(--border-dark);
    align-self: center; cursor: pointer;
    background: transparent;
  }
  #market-overview .mo-grid > .mo-item > .mo-label { padding: 6px 2px 6px 10px; }
  #market-overview .mo-grid > .mo-item > .mo-price { padding: 6px 6px 6px 14px; }
  #market-overview .mo-grid > .mo-item > .mo-chg > .mo-chg-val { padding: 6px 6px 6px 14px; }
  #market-overview .mo-grid > .mo-item > .mo-chg > .mo-chg-rate { padding: 6px 10px 6px 14px; }
  /* 섹션 간 여백 — 해외시황 / 국내시황 / 환율 사이 분리 */
  #market-overview .mo-section + .mo-section { margin-top: 24px; }
  /* 마지막 행 border 제거 */
  #market-overview .mo-grid > .mo-item:last-child > .mo-label,
  #market-overview .mo-grid > .mo-item:last-child > .mo-price,
  #market-overview .mo-grid > .mo-item:last-child > .mo-chg > .mo-chg-val,
  #market-overview .mo-grid > .mo-item:last-child > .mo-chg > .mo-chg-rate { border-bottom: 0; }
  /* 호버만 유지 — zebra 줄무늬 제거 */
  #market-overview .mo-grid > .mo-item:hover > .mo-label,
  #market-overview .mo-grid > .mo-item:hover > .mo-price,
  #market-overview .mo-grid > .mo-item:hover > .mo-chg > .mo-chg-val,
  #market-overview .mo-grid > .mo-item:hover > .mo-chg > .mo-chg-rate { background: var(--zebra-hover); }
  /* 정렬 + 폰트 — 컬럼별 (이름 16px, 값 16px 진하게, 등락 14px) */
  #market-overview .mo-grid .mo-label { text-align: left; font-size: round(calc(16px * var(--font-scale, 1)), 1px); color: var(--text-1); font-weight: 500; white-space: nowrap; }
  #market-overview .mo-grid .mo-price { text-align: right; font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 700; }
  #market-overview .mo-grid .mo-chg-val,
  #market-overview .mo-grid .mo-chg-rate { text-align: right; font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600; }
}

.wl-group {
  border: 1px solid var(--border-dark); border-radius: 8px; overflow: hidden; margin-bottom: 16px;
  /* 그룹 박스는 화면(부모) 폭 고정 — 가로 스크롤 안 됨 */
  width: 100%; box-sizing: border-box;
}
.mo-section .wl-group { margin: 0 0 16px; }
.wl-group-hdr {
  display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 30px;
  background: color-mix(in srgb, var(--cat-color, transparent) 10%, var(--bg-card));
  cursor: pointer; transition: background .1s;
  width: 100%; box-sizing: border-box;
}
.wl-group-hdr:hover { background: color-mix(in srgb, var(--cat-color, transparent) 18%, var(--bg-card)); }
/* 카테고리명 왼쪽 점 — 클릭 시 색상 팔레트 팝업 */
.wl-dot-btn {
  width: 10px !important; height: 10px !important;
  border: 1px solid rgba(0,0,0,0.18);
  cursor: pointer; padding: 0;
  transition: transform .08s, box-shadow .12s;
}
.wl-dot-btn:hover { box-shadow: 0 0 0 2px rgba(0,0,0,0.1); transform: scale(1.15); }
.wl-dot-btn:active { transform: scale(0.92); }
/* 색상 팔레트 팝업 — 8열 × 4행 (32색) */
.cat-color-popup {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
  padding: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.cat-color-sw {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
  transition: transform .08s, border-color .12s;
}
.cat-color-sw.active { border-color: var(--text-1); }
.cat-color-sw:hover { transform: scale(1.12); }
.wl-group-name { font-size: round(calc(18px * var(--font-scale, 1)), 1px); font-weight: 700; flex: 1; }
.wl-group-add {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent, #fff);
  border: none; padding: 0; margin-left: 2px;
  font-size: 18px; line-height: 1; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: filter .12s, transform .08s;
  flex-shrink: 0;
}
.wl-group-add:hover { filter: brightness(1.08); }
.wl-group-add:active { transform: scale(0.94); }
/* 각 그룹의 행 영역만 가로 스크롤 — 테이블 외곽(border, header)은 화면 폭 고정 */
.wl-rows-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* 기본: 스크롤바 숨김 (Firefox/IE) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* wl-group 간 간격 — 데스크탑/모바일 모두 16px 통일 */
/* 기본: webkit 스크롤바도 숨김 */
.wl-rows-scroll::-webkit-scrollbar { height: 6px; background: transparent; }
.wl-rows-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background .2s; }
/* 스크롤 중일 때만 thumb 표시 (JS 가 .is-scrolling 클래스 토글) */
.wl-rows-scroll.is-scrolling { scrollbar-width: thin; }
.wl-rows-scroll.is-scrolling::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.45); }
/* legacy */
.wl-master-scroll { display: contents; }
/* Flex 레이아웃 — 종목명만 sticky + max-width 로 스크롤 시 동적 축소 (JS 가 --wl-name-mw 갱신)
   숫자 컬럼들은 자연 콘텐츠 폭으로 표시 (잘리지 않음). 행 전체 폭이 컨테이너보다 넓으면 스크롤 */
.wl-rows-table {
  display: block;
  width: max-content;     /* 콘텐츠 폭에 맞게 늘어남 — 컨테이너보다 넓으면 가로 스크롤 */
  min-width: 100%;        /* 콘텐츠가 좁아도 적어도 컨테이너 폭 */
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
}
.wl-row {
  display: flex;
  align-items: center;
  cursor: pointer; transition: background .1s;
  white-space: nowrap; line-height: 1.4;
  background: var(--bg);
  border-top: 1px solid var(--border-dark);
  /* 행이 콘텐츠 폭(셀들의 합)만큼 늘어나야 master-scroll 이 가로 스크롤 활성화 */
  width: max-content;
  min-width: 100%;
}
.wl-row.wl-row-alt { background: var(--zebra-odd); }
.wl-row:hover { background: var(--row-hover); }
.wl-row.wl-row-alt:hover { background: var(--row-hover); }
/* 숫자 셀들 — 콘텐츠 폭으로 자연스럽게 표시 (잘리지 않음). 우측 정렬 + 최소 여백 보장 */
.wl-row > * {
  padding: 5px 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: flex-end;
  box-sizing: border-box;   /* offsetWidth(=padding 포함) 으로 측정한 var 값과 width 일치 */
}
@media (max-width: 600px) { .wl-row > * { padding: 5px 6px; } }
/* 종목명 외부 박스: 고정폭(baseW) sticky-left. 내부 inner 만 스크롤에 따라 축소 — row width 불변 = 스크롤 bounce 없음 */
.wl-name {
  position: sticky; left: 0; z-index: 2;
  width: var(--wl-name-w, max-content);   /* baseW = 모든 그룹 중 가장 긴 종목명 폭, 고정 */
  background: transparent;
  flex: 0 0 auto;
  padding: 0;
  /* row > * 의 justify-content: flex-end 를 override — inner 는 왼쪽 정렬 (축소 시 오른쪽이 비어 다음 셀이 보임) */
  display: flex !important;
  align-items: stretch;
  justify-content: flex-start !important;
}
.wl-name-inner {
  display: flex; align-items: center;
  width: var(--wl-name-inner-w, 100%);
  max-width: 100%;
  min-width: 44px;
  background: #ffffff;
  border-right: 1px solid var(--border-dark);
  padding: 5px 6px;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}
/* sticky 종목명 컬럼 — 행 zebra/hover와 동일 톤. 투명도 컬러를 사용하므로
   linear-gradient 위에 var(--bg)를 깔아 불투명 유지 (sticky 뒷 셀이 비치지 않게) */
.wl-row.wl-row-alt .wl-name-inner { background: linear-gradient(var(--zebra-odd), var(--zebra-odd)), var(--bg); }
.wl-row:hover .wl-name-inner,
.wl-row.wl-row-alt:hover .wl-name-inner { background: linear-gradient(var(--row-hover), var(--row-hover)), var(--bg); }
[data-theme="dark"] .wl-name-inner { background: var(--bg); }
[data-theme="dark"] .wl-row.wl-row-alt .wl-name-inner { background: linear-gradient(var(--zebra-odd), var(--zebra-odd)), var(--bg); }
[data-theme="dark"] .wl-row:hover .wl-name-inner { background: linear-gradient(var(--row-hover), var(--row-hover)), var(--bg); }
/* sticky 종목명의 배경은 불투명이어야 다른 셀이 뒤로 비치지 않음 */
/* .wl-name 자체는 transparent (위에서 정의) — 배경은 .wl-name-inner 가 담당 */
.wl-code { font-size: round(calc(10px * var(--font-scale, 1)), 1px); 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(--mkt-ks-lt); }
.wl-code-kq:hover, .wl-code-kq:active { background: var(--mkt-kq-lt); }
/* 각 컬럼은 JS 가 측정한 max 폭으로 통일 → 모든 그룹 세로선 일치. flex 로 우측 정렬 */
.wl-price   { font-weight: 500;     width: var(--wl-price-w,   max-content); }
.wl-chg-amt {                       width: var(--wl-chg-amt-w, max-content); }
.wl-chg-amt.up { color: var(--up); }
.wl-chg-amt.dn { color: var(--dn); }
.wl-chg     { font-weight: 500;     width: var(--wl-chg-w,     max-content); }
.wl-chg.up { color: var(--up); }
.wl-chg.dn { color: var(--dn); }
.wl-vol     { color: var(--text-1); width: var(--wl-vol-w,     max-content); }
.wl-val     { color: var(--text-3); width: var(--wl-val-w,     max-content); }
.wl-per     { color: var(--text-1); width: var(--wl-per-w,     max-content); }
.wl-per.dn  { color: var(--dn); }
.wl-op      { color: var(--text-1); width: var(--wl-op-w,      max-content); }
.wl-op.dn   { color: var(--dn); }

/* ── 관심종목 뉴스 페이지 ──────────────────────────────────────────── */
.favnews-top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: var(--bg);
  flex-wrap: wrap;
}
.favnews-top .favnews-status { font-size: round(calc(13px * var(--font-scale, 1)), 1px); color: var(--text-3); white-space: nowrap; }
/* 리프레시 버튼 — 칩 세로높이(--pill-h) 와 동일 가로세로 원형 (모바일 24×24 / 데스크톱 28×28) */
.favnews-refresh-icon {
  width: var(--pill-h); height: var(--pill-h); padding: 0; border-radius: 50%;
  border: 1px solid var(--border-dark); background: var(--bg); color: var(--text-3);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s, border-color .15s; flex-shrink: 0;
  box-sizing: border-box;
}
.favnews-refresh-icon svg { width: 14px; height: 14px; }
.favnews-refresh-icon:hover { background: var(--accent-lt); color: var(--accent-dk); border-color: var(--accent); }
.favnews-refresh-icon.is-refreshing { color: #c4b5fd; border-color: #c4b5fd; }
.favnews-refresh-icon.is-refreshing svg { animation: favnews-spin 0.9s linear infinite; }
.favnews-progress {
  font-size: round(calc(11px * var(--font-scale, 1)), 1px);
  color: #7c3aed; font-variant-numeric: tabular-nums; white-space: nowrap;
}
@keyframes favnews-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* 뒤로가기 버튼 — pill 템플릿 따름 (모바일 24px / 데스크톱 28px), 칩 행 안에서 다른 칩들과 가로 수평정렬
   favnews / overseas_sectors / fx_more / index / fx 페이지 등 칩 행 상단에 들어가는 모든 sd-back-btn */
.news-tabs .sd-back-btn,
.favnews-top .sd-back-btn {
  width: var(--pill-h); height: var(--pill-h); border-radius: var(--r-pill);
  padding: 0; flex-shrink: 0;
  align-self: center;   /* 기본 .sd-back-btn 의 align-self: flex-start 를 덮어써 다른 칩들과 수평 정렬 */
  display: inline-flex; align-items: center; justify-content: center;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
}
.news-tabs .sd-back-btn svg,
.favnews-top .sd-back-btn svg { width: 14px; height: 14px; }
.favnews-toolbar {
  display: flex; align-items: center; gap: 8px; flex: 1; justify-content: space-between;
}
.favnews-status {
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); color: var(--text-3);
}
.favnews-filters { padding: 8px 16px; display: flex; flex-direction: column; gap: 8px; }
.favnews-search-wrap { position: relative; }
.favnews-search-input {
  width: 100%; height: 32px; padding: 0 32px 0 12px;
  border: 1px solid var(--border-dark); border-radius: var(--r-sm);
  background: var(--bg-card); color: var(--text-1);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); box-sizing: border-box;
}
.favnews-search-input:focus { outline: none; border-color: var(--accent); }
.favnews-search-clear {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0; border: none;
  background: var(--gray-100); color: var(--text-3);
  border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1;
}
.favnews-group { margin-bottom: 12px; }
.favnews-stock-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 16px 3px;
  background: var(--accent-lt);
  font-weight: 700;
  border-top: 1px solid var(--border-dark);
  border-top-left-radius: 12px; border-top-right-radius: 12px;
}
/* 관심종목 뉴스 — 커스텀 카테고리 드롭다운 */
.favnews-cat-dd { position: relative; flex-shrink: 0; }
/* 카테고리 선택 칩 — pill 템플릿 (모바일 24px / 데스크톱 28px) */
.favnews-cat-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--pill-h); padding: 0 var(--pill-px); box-sizing: border-box;
  border: 1px solid var(--border-dark); border-radius: var(--r-pill);
  background: var(--bg); color: var(--text-1);
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-family: inherit;
  font-weight: 500; cursor: pointer; outline: none; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.favnews-cat-trigger:hover { background: var(--bg-card); }
.favnews-cat-trigger[aria-expanded="true"] { border-color: var(--accent); }
.favnews-cat-trigger svg { color: var(--text-3); }
.favnews-cat-menu {
  position: fixed;   /* fixed 로 → 부모의 overflow:hidden 에 잘리지 않음 (JS 가 top/left 계산) */
  z-index: 100;
  min-width: 140px; max-height: 320px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border-dark);
  border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  padding: 4px; display: flex; flex-direction: column; gap: 0;
}
.favnews-cat-menu[hidden] { display: none !important; }
.favnews-cat-opt {
  display: block; width: 100%; text-align: left;
  padding: 3px 10px; border: none; border-radius: 6px; background: none;
  color: var(--text-1); font-family: inherit;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  line-height: 1.3; cursor: pointer; white-space: nowrap;
  transition: background .1s;
}
.favnews-cat-opt:hover { background: var(--gray-50); }
.favnews-cat-opt.active { background: var(--accent-lt); color: var(--accent-dk); font-weight: 600; }
/* 모바일: 종목 헤더 셀 좌우 8px (종목명 좌측 / 더보기 버튼 우측) */
@media (max-width: 1023px) {
  .favnews-stock-hdr { padding-left: 8px; padding-right: 8px; }
}
.favnews-stock-name {
  flex: 1; font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  color: var(--accent-dk);
}
.favnews-stock-count {
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  color: var(--accent-dk); opacity: 0.7;
}
.favnews-stock-actions { display: inline-flex; align-items: center; gap: 5px; }
/* 차트/토론/최신 버튼 — 홈-주요뉴스(.market-news-tab) 과 동일 사이즈/글씨 (pill 템플릿) */
.favnews-stock-more {
  height: var(--pill-h); padding: 0 var(--pill-px);
  background: var(--bg-card); border: 1px solid var(--accent);
  border-radius: var(--r-pill); cursor: pointer;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 500;
  color: var(--accent-dk); line-height: 1;
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
}
.favnews-stock-more:disabled { opacity: 0.5; cursor: default; }
.favnews-stock-chart {
  height: var(--pill-h); padding: 0 var(--pill-px);
  background: var(--bg-card); border: 1px solid var(--accent);
  border-radius: var(--r-pill); cursor: pointer;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 500;
  color: var(--accent-dk); line-height: 1;
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
}
.favnews-stock-chart:hover { background: var(--accent-lt); }
.favnews-stock-hdr .favnews-stock-name { cursor: pointer; }
.favnews-stock-empty {
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  color: var(--text-4); font-weight: 400;
}
/* 토론 패널 (네이버 종목토론방 인라인) */
.favnews-discussion { padding: 8px 0; background: var(--bg); }
.favnews-stock-chart.on { background: var(--accent); color: #fff; }
.discussion-list { display: flex; flex-direction: column; }
.discussion-item { padding: 5px 10px; border-bottom: 1px solid var(--border-dark); cursor: pointer; }
.discussion-item:hover { background: var(--accent-lt); }
.discussion-row { display: flex; gap: 8px; align-items: baseline; }
.discussion-title { flex: 1; font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-1); word-break: break-word; }
.discussion-date { font-size: round(calc(12px * var(--font-scale, 1)), 1px); color: var(--text-4); white-space: nowrap; }
.discussion-meta { display: none; gap: 10px; font-size: round(calc(11px * var(--font-scale, 1)), 1px); color: var(--text-3); margin-top: 2px; }
.discussion-item.is-open .discussion-meta { display: flex; }
.discussion-empty { padding: 14px 10px; text-align: center; color: var(--text-3); font-size: round(calc(13px * var(--font-scale, 1)), 1px); }
.discussion-body { margin-top: 8px; padding: 10px; background: rgba(130,150,175,0.08); border-radius: 8px; }
.discussion-content { font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-1); line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
.discussion-cmt-section { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-dark); }
.discussion-cmt-title { font-size: round(calc(12px * var(--font-scale, 1)), 1px); color: var(--text-3); font-weight: 600; margin: 0 0 6px; }
.discussion-cmt { padding: 6px 4px; }
.discussion-cmt:nth-of-type(odd)  { background: rgba(130,150,175,0.06); }
.discussion-cmt-meta { display: flex; gap: 8px; font-size: round(calc(11px * var(--font-scale, 1)), 1px); color: var(--text-3); margin-bottom: 2px; }
.discussion-cmt-nick { font-weight: 600; color: var(--text-2); }
.discussion-cmt-date { margin-left: auto; }
.discussion-cmt-body { font-size: round(calc(13px * var(--font-scale, 1)), 1px); color: #1e3a8a; line-height: 1.5; word-break: break-word; }
[data-theme="dark"] .discussion-cmt-body { color: #b0c5ec; }
/* favnews 내 뉴스 아이템에도 zebra 적용 + 좌우 여백 */
#favnews-body .news-item:nth-of-type(odd) { background: var(--bg); }
#favnews-body .news-item:nth-of-type(even) { background: #eef1f5; }
/* 각 종목 그룹별로 마지막 행에만 하단 라운드 적용 */
#favnews-body .favnews-group [id^="favnews-stock-list-"] .news-item:last-of-type {
  border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; overflow: hidden;
  border-bottom: 1px solid var(--border-dark);
}
[data-theme="dark"] #favnews-body .news-item:nth-of-type(even) { background: #2c313b; }
#favnews-body .news-item .news-item-header { padding-left: 16px; padding-right: 16px; }
#favnews-body .news-item .news-content.open { padding-left: 16px; padding-right: 16px; }
/* 모바일: 테이블 제목 좌우 8px 추가 / 본문 카드는 home-news-body 의 8px padding 만 적용 */
@media (max-width: 1023px) {
  #favnews-body .news-item .news-item-header { padding-left: 8px !important; padding-right: 8px !important; }
  #favnews-body .news-item .news-content.open { padding-left: 0 !important; padding-right: 0 !important; }
  /* home-news-body 가 #favnews-body 컨테이너 8px padding 을 상쇄하고 자체 8px 만 적용되도록 음수 마진 */
  #favnews-body .news-item .home-news-body { margin-left: -8px; margin-right: -8px; }
}
/* 데스크톱: home-news-body 가 #favnews-body 16px padding 을 상쇄해 자체 16px padding 만 적용 (홈 주요뉴스와 동일) */
@media (min-width: 1024px) {
  #favnews-body .news-item .news-content.open { padding-left: 0; padding-right: 0; }
  #favnews-body .news-item .home-news-body { margin-left: -16px; margin-right: -16px; }
}
/* 닫힌 상태: 출처(news-meta) 숨김 — 펼치면 표시 */
#favnews-body .news-item .news-meta { display: none; }
#favnews-body .news-item.is-open .news-meta { display: flex; }

/* 좁은 화면에서 행이 넘칠 때 폰트 한 단계 축소 (JS가 main에 wl-compact 부여) */
.wl-compact .wl-row     { font-size: round(calc(14px * var(--font-scale, 1)), 1px); gap: 4px; padding: 0 10px; }
.wl-compact .wl-name    { font-size: round(calc(16px * var(--font-scale, 1)), 1px); }
.wl-compact .wl-code    { font-size: round(calc(11px * var(--font-scale, 1)), 1px); }
.wl-compact .wl-price   { font-size: round(calc(14px * var(--font-scale, 1)), 1px); min-width: 64px; }
.wl-compact .wl-chg-amt { font-size: round(calc(14px * var(--font-scale, 1)), 1px); min-width: 44px; }
.wl-compact .wl-chg     { font-size: round(calc(14px * var(--font-scale, 1)), 1px); min-width: 48px; }
.wl-compact .wl-vol     { font-size: round(calc(14px * var(--font-scale, 1)), 1px); min-width: 40px; }
.wl-compact .wl-val     { font-size: round(calc(13px * var(--font-scale, 1)), 1px); min-width: 60px; }
.wl-compact .wl-per     { font-size: round(calc(14px * var(--font-scale, 1)), 1px); min-width: 44px; }
.wl-compact .wl-op      { font-size: round(calc(13px * var(--font-scale, 1)), 1px); min-width: 56px; }
.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-dark); background: var(--gray-50);
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); 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-dark); 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(167,139,250, 0.08); }
.wl-news-title { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 500; color: var(--text-1); line-height: 1.35; }
.wl-news-meta { font-size: round(calc(12px * var(--font-scale, 1)), 1px); color: var(--text-4); }
.wl-news-empty { text-align: center; color: var(--text-4); font-size: round(calc(12px * var(--font-scale, 1)), 1px); padding: 6px; }
.cat-mgmt-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; border-bottom: 1px solid var(--border-dark); 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: round(calc(16px * var(--font-scale, 1)), 1px);
  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-dark); }
.cat-edit-row:last-child { border-bottom: none; }
.wl-del-btn {
  width: 28px; height: 32px; border-radius: 6px; border: 1px solid var(--border-dark);
  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: round(calc(18px * var(--font-scale, 1)), 1px); flex-shrink: 0; margin-top: 1px; }
.screen-info-text { font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-2); line-height: 1.6; }
.form-group  { margin-bottom: 20px; }
.form-label  { display: block; font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600; margin-bottom: 8px; color: var(--text); }
.form-hint   { font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4); margin-top: 5px; line-height: 1.5; }
.form-input, .form-select {
  width: 100%; height: 32px; box-sizing: border-box; line-height: 1;
  padding: 0 10px;
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md); font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  background: var(--gray-50); color: var(--text);
  outline: none; font-family: inherit; appearance: none;
  transition: border-color .15s, background .15s;
}

/* ── 투자기법 페이지 — 원형 배지 + 흑백 SVG 아이콘 */
.it-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gray-100); color: var(--text-2);
  flex-shrink: 0;
}
.it-badge svg { width: 14px; height: 14px; fill: currentColor; }
[data-theme="dark"] .it-badge { background: var(--gray-100); }
.it-badge.it-badge-pos { background: rgba(34, 162, 90, 0.12); color: var(--up); }
.it-badge.it-badge-neg { background: rgba(230, 80, 80, 0.12); color: var(--dn); }
.it-badge.it-badge-warn { background: rgba(245, 158, 11, 0.15); color: #b45309; }
[data-theme="dark"] .it-badge.it-badge-warn { color: #fbbf24; }
.it-ex-card {
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--border-dark); border-radius: 8px;
  background: var(--bg);
}
.it-ex-name { font-weight: 700; color: var(--text-1); margin-bottom: 3px; font-size: round(calc(14px * var(--font-scale, 1)), 1px); }
.it-ex-desc { color: var(--text-2); font-size: round(calc(13.5px * var(--font-scale, 1)), 1px); line-height: 1.6; }
.it-easy {
  padding: 12px 14px; margin-bottom: 18px;
  background: var(--accent-lt); border-left: 3px solid var(--accent);
  border-radius: 6px; color: var(--text-1);
  font-size: round(calc(14.5px * var(--font-scale, 1)), 1px); line-height: 1.7;
}

/* ── 커스텀 드롭다운 — 모바일에서 native <select> 의 풀스크린 피커 회피 ── */
.custom-dd { position: relative; }
.custom-dd-btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; cursor: pointer; text-align: left;
}
.custom-dd-btn .custom-dd-arrow {
  width: 14px; height: 14px; fill: var(--text-3); flex-shrink: 0;
  transition: transform .15s;
}
.custom-dd.open .custom-dd-arrow { transform: rotate(180deg); }
.custom-dd-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg); border: 1px solid var(--border-dark);
  border-radius: var(--r-md); box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  z-index: 20; max-height: 240px; overflow-y: auto;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
}
.custom-dd-item {
  padding: 8px 12px; cursor: pointer; color: var(--text);
  transition: background .1s;
}
.custom-dd-item:hover { background: var(--gray-50); }
.custom-dd-item.active { background: var(--accent-lt); color: var(--accent-dk); font-weight: 600; }
/* textarea 는 다중 행 */
textarea.form-input { height: auto; min-height: 60px; padding: 8px 10px; line-height: 1.4; }
.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-dark);
  cursor: pointer; transition: background .1s;
}
.screen-result-item:active { background: var(--gray-50); }
.screen-rank {
  width: 28px; height: 32px; border-radius: var(--r-pill);
  background: var(--accent-lt); color: var(--accent-dk);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.screen-name { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 500; }
.screen-meta { font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4); margin-top: 2px; }
.screen-income-val { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600; color: var(--accent-dk); text-align: right; }
.screen-income-sub { font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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 {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--border-dark);
  border-radius: var(--r-pill);
  background: var(--bg); color: var(--text-3);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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: round(calc(16px * var(--font-scale, 1)), 1px);
}
.fin-table th {
  padding: 5px 12px;
  text-align: right; white-space: nowrap;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600;
  color: var(--text-3);
  border-bottom: 1px solid var(--border-dark);
  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); font-size: round(calc(16px * var(--font-scale, 1)), 1px); }
.fin-section-row td {
  padding: 6px 12px 2px;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-1); background: var(--bg);
  text-align: left !important;
}
.fin-row-highlight td { background: rgba(167,139,250, 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: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600; color: var(--text-1);
  position: sticky; left: 0; background: var(--bg); z-index: 2;
  border-bottom: 1px solid var(--border-dark);
  box-shadow: 2px 0 4px rgba(0,0,0,0.04);
}
/* sticky 좌측 항목 라벨은 가로 스크롤 시 내용이 비쳐 보이지 않도록 항상 불투명 배경 유지.
   highlight 행에서도 반투명 그린/블루 대신 불투명 연한 톤으로 덮어씀 */
.fin-table .fin-row-label { background: var(--bg) !important; }
.fin-row-highlight .fin-row-label { background: #f6f3fe !important; }
.fin-row-highlight.fin-row-loss .fin-row-label { background: #f0f5fb !important; }
[data-theme="dark"] .fin-row-highlight .fin-row-label { background: #272036 !important; }
[data-theme="dark"] .fin-row-highlight.fin-row-loss .fin-row-label { background: #1d2430 !important; }
.fin-table td {
  padding: 5px 12px; text-align: right;
  border-bottom: 1px solid var(--border-dark);
  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 8px 4px;
  font-size: round(calc(12px * var(--font-scale, 1)), 1px); color: var(--text-4); text-align: right;
}
.fin-naver-link {
  padding: 0 8px 0;
  font-size: round(calc(12px * var(--font-scale, 1)), 1px); text-align: right;
}
/* 종목뉴스 푸터 "네이버에서 보기"와 동일한 스타일 — 배지 없이 그린 텍스트만 */
.fin-naver-badge {
  display: inline-block;
  color: #03C75A;
  font-weight: 600;
  text-decoration: none; white-space: nowrap;
  background: none; border: none; padding: 0; height: auto; border-radius: 0;
}
.fin-naver-badge:hover { text-decoration: underline; }
.chart-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 12px;
  border-top: 1px solid var(--border-dark);
  margin-top: 4px;
}
.chart-section-title {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-4);
}
.chart-type-ctrl {
  display: flex; gap: 6px;
}
.chart-type-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; box-sizing: border-box;
  padding: 0 12px;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); 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;
  flex-shrink: 0; white-space: nowrap;
}
.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: round(calc(14px * var(--font-scale, 1)), 1px); 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: round(calc(18px * var(--font-scale, 1)), 1px); font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.analytics-corp-name { font-size: round(calc(20px * var(--font-scale, 1)), 1px); font-weight: 600; letter-spacing: -0.3px; }
.analytics-corp-code { font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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: round(calc(14px * var(--font-scale, 1)), 1px); 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: round(calc(14px * var(--font-scale, 1)), 1px); 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-dark);
  border-radius: var(--r-md); padding: 14px 16px;
  box-shadow: var(--shadow);
}
.metric-label { font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
.metric-val   { font-size: round(calc(20px * var(--font-scale, 1)), 1px); 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-dark);
  border-radius: var(--r-md); padding: 16px;
  margin: 10px 16px 0;
  box-shadow: var(--shadow);
}
.chart-title { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 700; color: var(--text-1); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; }
.chart-wrap  { position: relative; height: 170px; }

/* ── Analytics Detail (sd-*) ────────────────────────────────────────────── */
.sd-header { padding: 14px 16px 0; display: flex; align-items: stretch; gap: 10px; }

/* 일일 리포트 페이지 */
.mr-content { display: flex; flex-direction: column; gap: 12px; padding: 12px var(--page-pad-x) 20px; }
@media (max-width: 1023px) {
  /* 모바일: 알림 메일링 탭 내부의 spacing 축소 */
  #alerts-pane .mr-content { padding-top: 0; padding-bottom: 12px; gap: 8px; }
  /* mc-status (mr-card 와 테스트/저장 버튼 사이 status 라인) 비어있을 땐 공간 차지 안 함 */
  #mc-status:empty { min-height: 0 !important; display: none; }
}
#mr-profile-pane > .mr-content { padding-left: 0; padding-right: 0; padding-top: 0; }
.mr-card {
  border: 1px solid var(--border-dark); border-radius: var(--r-md);
  background: var(--bg); padding: 12px;
}
@media (max-width: 1023px) {
  .mr-card { padding: 8px; }   /* 모바일: 카드 내부 여백 8px */
}
.mr-card-title {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 700; color: var(--accent-dk);
  margin-bottom: 10px; letter-spacing: 0.2px;
}
.mr-enable-row {
  display: flex; align-items: center; gap: 8px;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600;
}
.mr-time-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 6px;
}
.mr-time-label {
  display: flex; align-items: center; gap: 6px;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); flex: 1;
}
.mr-time-input {
  width: 130px; height: 32px; padding: 0 8px;
  border: 1px solid var(--border-dark); border-radius: 6px;
  font-family: inherit; box-sizing: border-box;
  background: var(--bg); color: var(--text);
}
.mr-extra-del {
  width: 24px; height: 24px; border: none; border-radius: 50%;
  background: transparent; color: var(--text-4);
  font-size: round(calc(18px * var(--font-scale, 1)), 1px); line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.mr-extra-del:hover { background: rgba(220,38,38,0.1); color: var(--red); }

/* (.mo-sectors-btn 스타일은 .hero-news-more-btn 으로 통합됨) */

/* 해외 섹터별 종목 페이지 */
.ovs-sec {
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
}
.ovs-sec-title {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  font-weight: 600; color: var(--text);
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 4px;
}
.ovs-tbl {
  width: 100%; border-collapse: collapse;
}
.ovs-tbl tr { border-bottom: 1px solid var(--gray-100); }
.ovs-tbl tr:last-child { border-bottom: none; }

/* 종목 카드 (2-line div 레이아웃) */
.ovs-list { display: flex; flex-direction: column; }
.ovs-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background .12s;
}
.ovs-row:last-child { border-bottom: none; }
.ovs-row:hover { background: var(--gray-50); }
.ovs-row:active { background: var(--gray-100); }
.ovs-row.ovs-err {
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  color: var(--text-4);
  cursor: default;
}
.ovs-line-1, .ovs-line-2 {
  display: flex; align-items: baseline; gap: 8px;
}
.ovs-line-2 { margin-top: 2px; }
.ovs-name {
  flex: 0 0 auto;   /* shrink/grow 안 함 — 자연 폭 유지 */
  font-size: round(calc(18px * var(--font-scale, 1)), 1px);
  font-weight: 600;
  white-space: nowrap; overflow: visible; text-overflow: clip;
}
/* 종목명이 길어 줄을 넘기면 가로 스크롤 (이름 가리지 않음) */
.ovs-row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ovs-row::-webkit-scrollbar { height: 4px; }
.ovs-line-1, .ovs-line-2 { flex-wrap: nowrap; min-width: max-content; }
.ovs-price {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  font-weight: 600;
  white-space: nowrap;
}
.ovs-volume {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  color: var(--text-3);
  white-space: nowrap;
  margin-left: 8px;
}
.ovs-mcap {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  color: var(--text-3);
  white-space: nowrap;
  margin-left: 8px;
}
.ovs-src-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: round(calc(11px * var(--font-scale, 1)), 1px);
  font-weight: 500;
  background: var(--gray-100);
  color: var(--text-3);
  vertical-align: middle;
}

/* 환율 페이지 — 계산기 버튼 */
.ovs-calc-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--accent);
  background: var(--accent-lt);
  color: var(--accent-dk);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  font-weight: 600;
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.ovs-calc-btn:hover { background: var(--accent); color: var(--on-accent, #fff); }

/* 환율 계산기 모달 */
.fxc-modal { padding: 0; max-width: 420px; margin: 0 auto; }
.fxc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border-light);
}
.fxc-title { font-weight: 700; font-size: round(calc(16px * var(--font-scale, 1)), 1px); }
.fxc-close {
  min-width: 64px; height: 36px;
  padding: 0 16px;
  border: 1px solid var(--border-md);
  background: var(--bg-card);
  color: var(--text);
  font-size: round(calc(22px * var(--font-scale, 1)), 1px);
  font-weight: 700;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
}
.fxc-close:hover { background: var(--gray-100); }
.fxc-body { padding: 14px 16px 16px; }
.fxc-source-row { display: flex; gap: 6px; margin-bottom: 10px; }
.fxc-cur-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid var(--border-md);
  background: var(--bg-card);
  color: var(--text-3);
  font-size: round(calc(15px * var(--font-scale, 1)), 1px);
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
}
.fxc-cur-btn.active { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); }
.fxc-cur-select {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border-md);
  background: var(--bg-card);
  color: var(--text-3);
  font-size: round(calc(15px * var(--font-scale, 1)), 1px);
  font-weight: 600;
  border-radius: 8px;
  font-family: inherit;
  cursor: pointer;
}
.fxc-cur-select.active { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); }
.fxc-cur-select:focus { outline: none; border-color: var(--accent); }
.fxc-display {
  font-size: round(calc(28px * var(--font-scale, 1)), 1px);
  font-weight: 700;
  text-align: right;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-md);
  border-radius: 8px;
  margin-bottom: 10px;
  min-height: 44px;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.fxc-keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.fxc-key {
  height: 48px;
  border: 1px solid var(--border-md);
  background: var(--bg);
  color: var(--text);
  font-size: round(calc(18px * var(--font-scale, 1)), 1px);
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
}
.fxc-key:hover { background: var(--bg-card); }
.fxc-key:active { background: var(--gray-100); }
.fxc-key-fn { background: var(--bg-card); color: var(--accent-dk); }
.fxc-results {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 280px; overflow-y: auto;
  border-top: 1px solid var(--border-light);
  padding-top: 8px;
}
.fxc-result {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--gray-100);
}
.fxc-result:last-child { border-bottom: none; }
.fxc-result-flag { font-size: round(calc(18px * var(--font-scale, 1)), 1px); }
.fxc-result-label { flex: 1; font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-2); }
.fxc-result-val {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 종목 추가 모달 — 인풋/버튼 28px, 글씨 16px, 레이블 18px */
.addstk-label {
  font-size: round(calc(18px * var(--font-scale, 1)), 1px) !important;
}
.addstk-input {
  height: 32px !important;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px) !important;
  line-height: 1 !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
}
/* 커스텀 카테고리 드롭다운 — native select 의 다크모드 미적용 회피 */
.addstk-dd { position: relative; }
.addstk-dd-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.addstk-dd-arrow { color: var(--text-3); font-size: round(calc(14px * var(--font-scale, 1)), 1px); margin-left: 8px; }
.addstk-dd-menu {
  display: none;
  position: absolute;
  left: 0; right: 0;
  background: var(--bg);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  padding: 4px;
  max-height: 280px; overflow-y: auto;
  z-index: 50;
}
.addstk-dd-menu.open { display: block; }
.addstk-dd-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  font-weight: 500;
  color: var(--text);
  text-align: left;
}
.addstk-dd-item:hover { background: var(--gray-100); }
.addstk-dd-item.active { background: var(--accent-lt); color: var(--accent-dk); font-weight: 600; }
.addstk-dd-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.addstk-dd-count {
  color: var(--text-4);
  font-weight: 400;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
}

/* 관심종목 통합 관리 모달 — 탭 / 행 */
.mw-tabs {
  display: flex;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-light);
  gap: 4px;
}
.mw-tab {
  flex: 1;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: round(calc(15px * var(--font-scale, 1)), 1px);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.mw-tab.active {
  color: var(--accent-dk);
  border-bottom-color: var(--accent);
}
.mw-edit-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;   /* 기존 8px → 6px (~20% 축소) */
}
/* 종목 검색창 X 버튼 */
.addstk-search-wrap { position: relative; }
.addstk-search-wrap .addstk-search { padding-right: 32px !important; }
.addstk-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border: none; border-radius: 50%;
  background: var(--gray-100);
  color: var(--text-3);
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.addstk-clear:hover { background: var(--gray-200); color: var(--text); }
/* 종목 검색 결과 — 선택된 행 강조 */
#as-results .as-row.selected {
  background: var(--accent-lt);
}
#as-results .as-row.selected .as-name {
  color: var(--accent-dk);
  font-weight: 700;
}
/* 다른 카테고리에 이미 등록되어 있음을 알리는 인라인 라벨 — 카테고리별로 분리된 배지 + × 제거 버튼 */
.as-existing-info {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  color: var(--text-2);
  background: var(--gray-200);
  padding: 1px 4px 1px 8px; border-radius: var(--r-pill, 10px);
  vertical-align: baseline;
  white-space: nowrap;
  line-height: 1.4;
}
.as-existing-x {
  border: none; background: transparent;
  color: var(--text-3);
  cursor: pointer;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  font-weight: 500; line-height: 1;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  padding: 0;
}
.as-existing-x:hover { background: var(--gray-100); color: #e53935; }
/* 종목 검색 결과 — + 추가 버튼 (원형) */
.as-add-btn {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--accent-dk);
  font-size: round(calc(18px * var(--font-scale, 1)), 1px);
  font-weight: 600; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.as-add-btn:hover { background: var(--accent-lt); }
.addstk-btn {
  height: 32px !important;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px) !important;
  line-height: 1 !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
}
.addstk-actions {
  display: flex !important;
  gap: 8px !important;
}
.addstk-actions .addstk-btn {
  flex: 1 !important;
  width: auto !important;
  margin: 0 !important;
}
.ovs-symbol {
  flex: 1; min-width: 0;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  color: var(--text-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ovs-change {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  font-weight: 600;
  white-space: nowrap;
}
.ovs-value {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  color: var(--text-3);
  white-space: nowrap;
  margin-left: 8px;
}

/* 해외 섹터 페이지 — 헤더 (큰 뒤로가기 + 국가/정렬 2행) */
.ovs-header {
  display: flex; align-items: stretch; gap: 8px;
  padding: 10px 12px 6px;
}
.ovs-back {
  width: 44px; min-height: 76px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
}
.ovs-header-rows {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ovs-country-tabs, .ovs-sort-tabs {
  display: flex; gap: 4px;
  overflow-x: auto;
}
.ovs-country-tabs { padding: 0; }
.ovs-sort-tabs {
  padding: 0;
}
.ovs-country-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid var(--border-md);
  background: var(--bg-card);
  color: var(--text-3);
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  font-weight: 600;
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.ovs-country-btn:hover { color: var(--text); }
.ovs-country-btn.active {
  background: var(--accent);
  color: var(--on-accent, #fff);
  border-color: var(--accent);
}
.ovs-sort-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--border-md);
  background: var(--bg-card);
  color: var(--text-3);
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  font-weight: 600;
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.ovs-sort-btn:hover { color: var(--text); }
.ovs-sort-btn.active {
  background: var(--accent);
  color: var(--on-accent, #fff);
  border-color: var(--accent);
}
.ovs-sort-btn.ovs-action-btn {
  background: var(--bg);
  color: var(--accent-dk);
  border-color: var(--accent);
}
.ovs-sort-btn.ovs-action-btn:hover {
  background: var(--accent-lt);
  color: var(--accent-dk);
}

/* 검색 페이지 — 해외주식 탭. 좌우 패딩은 상단 헤더(국내주식/해외주식/조건검색)와 동일한 16px */
.osc-page { padding: 8px 16px 24px; }
.osc-row-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.osc-country-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }
.osc-cat-mgmt-btn { margin-left: auto; flex-shrink: 0; }
.osc-search-line { margin-top: 12px; position: relative; }
/* 검색 기록 드롭다운 — 검색창 아래에 떠 있음 */
.osc-history {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  z-index: 10;
  max-height: 320px;
  overflow-y: auto;
}
.osc-history-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px;
  font-size: round(calc(11px * var(--font-scale, 1)), 1px);
  color: var(--text-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.osc-history-clear {
  border: none; background: none;
  color: var(--text-3); cursor: pointer; font-family: inherit;
  font-size: round(calc(11px * var(--font-scale, 1)), 1px);
  padding: 2px 6px;
}
.osc-history-clear:hover { color: var(--red); }
.osc-history-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.osc-history-row:last-child { border-bottom: none; }
.osc-history-row:hover { background: var(--accent-lt); }
.osc-hist-icon { color: var(--text-4); font-size: 12px; }
.osc-hist-q { flex: 1; color: var(--text); font-size: round(calc(14px * var(--font-scale, 1)), 1px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osc-hist-time { font-size: round(calc(11px * var(--font-scale, 1)), 1px); color: var(--text-4); white-space: nowrap; }
.osc-hist-del {
  border: none; background: none;
  color: var(--text-4); cursor: pointer; font-family: inherit;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.osc-hist-del:hover { background: var(--gray-100); color: var(--red); }
.osc-results-area { margin-top: 10px; }
/* 종목 카드 리스트 */
.osc-cards { display: flex; flex-direction: column; gap: 12px; }
.osc-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  transition: border-color .12s, box-shadow .12s;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
}
.osc-card:hover { border-color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.osc-card:active { transform: translateY(1px); }
.osc-card-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.osc-card-name {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  min-width: 0;
}
.osc-card-symbol {
  font-size: round(calc(17px * var(--font-scale, 1)), 1px); font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}
.osc-card-fullname {
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  color: var(--text-2);
}
.osc-card-meta {
  font-size: round(calc(11px * var(--font-scale, 1)), 1px);
  color: var(--text-4);
}
.osc-actions { display: flex; gap: 6px; flex-shrink: 0; }
.osc-add-btn, .osc-detail-btn { height: 32px; padding: 0 14px; }
.osc-empty { text-align: center; color: var(--text-4); padding: 14px; }

/* 등록 카테고리 선택 시트 */
.osc-pick-cat {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: round(calc(15px * var(--font-scale, 1)), 1px);
  text-align: left;
  transition: background .12s, border-color .12s;
}
.osc-pick-cat:hover { background: var(--accent-lt); border-color: var(--accent); }
.osc-pick-name { font-weight: 600; color: var(--text); }
.osc-pick-count { font-size: round(calc(12px * var(--font-scale, 1)), 1px); color: var(--text-4); }

/* 상세 모달 — 헤더에 등록 버튼 우측 정렬 */
.osc-detail-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.osc-detail-name { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1 1 auto; }
.osc-detail-sym {
  color: var(--text-4); font-weight: 500;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  margin-left: 4px;
}
.osc-detail-add {
  flex-shrink: 0;
  height: 32px;
}

.osc-detail-hdr {
  display: flex; align-items: baseline; gap: 14px;
  padding: 4px 4px 8px;
  flex-wrap: wrap;
}
.osc-detail-px {
  font-size: round(calc(28px * var(--font-scale, 1)), 1px);
  font-weight: 800; color: var(--text);
}
.osc-detail-cur { font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4); font-weight: 500; margin-left: 4px; }
.osc-detail-chg {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 700;
}
.osc-detail-chg.up { color: var(--up); }
.osc-detail-chg.dn { color: var(--dn); }
.osc-detail-meta {
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  color: var(--text-4);
  margin-bottom: 12px;
}
.osc-section-title {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 700;
  color: var(--text-1);
  margin: 14px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
/* 상세 모달 — 다년 추이 테이블 (수익성) */
.osc-trend-tbl {
  width: 100%; border-collapse: collapse;
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.osc-trend-tbl th, .osc-trend-tbl td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}
.osc-trend-tbl tr:last-child th, .osc-trend-tbl tr:last-child td { border-bottom: none; }
.osc-trend-tbl th { color: var(--text-3); font-weight: 600; background: var(--bg); }
.osc-trend-tbl th.lbl, .osc-trend-tbl td.lbl {
  text-align: left;
  font-weight: 700;
  color: var(--text-2);
  background: var(--bg);
  border-right: 1px solid var(--border);
}
.osc-trend-tbl td { font-weight: 700; color: var(--text); }

/* 상세 모달 — 항목:값 테이블 */
.osc-kv-tbl {
  width: 100%; border-collapse: collapse;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.osc-kv-tbl tr { border-bottom: 1px solid var(--border); }
.osc-kv-tbl tr:last-child { border-bottom: none; }
.osc-kv-tbl th {
  text-align: left;
  font-weight: 500;
  color: var(--text-3);
  padding: 8px 12px;
  width: 45%;
  background: var(--bg);
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.osc-kv-tbl td {
  padding: 8px 12px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* 음수 — 파란색 (한국 시장 컨벤션) */
.num-neg { color: var(--blue, #1e88e5); }
.osc-table-wrap { overflow-x: auto; }
.osc-fin-tbl {
  width: 100%; border-collapse: collapse;
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
}
.osc-fin-tbl th, .osc-fin-tbl td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}
.osc-fin-tbl th:first-child, .osc-fin-tbl td:first-child { text-align: left; }
.osc-fin-tbl th { color: var(--text-3); font-weight: 600; background: var(--bg-card); }
.osc-margin { font-size: 10px; color: var(--accent-dk); margin-left: 4px; }

/* 카테고리 관리 모달 — 관심종목 스타일 재사용 + 종목 리스트 */
.osc-cat-stocks {
  margin: -2px 0 8px 0;
  padding: 6px 10px;
  background: var(--bg-card);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.osc-cat-stock-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
}

/* 해외 카테고리 관리 — 행 + 드래그 핸들 + 종목 리스트 */
.ovs-mng-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 8px;
  user-select: none;
}
.ovs-mng-row.dragging { opacity: 0.6; box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.ovs-mng-row .cat-drag {
  cursor: grab; padding: 0 4px;
  color: var(--text-4);
  font-size: 16px; line-height: 1;
  touch-action: none;
}
.ovs-mng-row .cat-drag:active { cursor: grabbing; }
.ovs-mng-name { flex: 1; min-width: 0; height: 32px; }
.ovs-mng-count {
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  color: var(--text-4);
  white-space: nowrap;
}
.ovs-mng-stocks-list {
  margin: -4px 0 0 36px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.ovs-mng-stock-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 4px;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
}
.ovs-mng-stock-info { color: var(--text-2); }

/* 해외 카테고리 관리 — 추가/수정/삭제 3탭 모달 */
.ovs-add-result-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  cursor: default;
}
.ovs-add-result-row:last-child { border-bottom: none; }
.ovs-add-result-row:hover { background: var(--bg-card); }
.ovs-add-result-row > div { min-width: 0; flex: 1; }
.ovs-add-result-row > button { flex-shrink: 0; }

.ovs-edit-cat {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.ovs-edit-cat.dragging { opacity: 0.6; box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.ovs-edit-hdr { display: flex; align-items: center; gap: 6px; }
.ovs-edit-hdr .cat-drag { cursor: grab; padding: 0 4px; color: var(--text-4); font-size: 16px; touch-action: none; }
.ovs-edit-hdr .cat-drag:active { cursor: grabbing; }
.ovs-edit-name { flex: 1; height: 32px; }
.ovs-edit-stocks {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg);
  border-radius: 6px;
  padding: 6px 8px;
  margin-left: 24px;
}
.ovs-edit-stock {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 4px;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
}
.ovs-edit-x {
  border: none; background: none;
  color: var(--text-4); cursor: pointer;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.ovs-edit-x:hover { background: var(--gray-100); color: var(--red); }

.ovs-del-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 8px;
}

/* 사용자 카테고리 표식 + 관리 버튼 */
.ovs-custom-tag {
  display: inline-block;
  font-size: round(calc(10px * var(--font-scale, 1)), 1px); font-weight: 600;
  padding: 1px 6px; margin-left: 6px;
  background: var(--accent-lt); color: var(--accent-dk);
  border-radius: 4px;
  vertical-align: middle;
}
.ovs-cat-edit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--bg);
  color: var(--text-3); cursor: pointer;
  margin-left: 4px;
  font-size: 12px;
}
.ovs-cat-edit:hover { background: var(--bg-card); color: var(--accent-dk); }

/* 종목 검색 결과 행 */
.ovs-sr-row {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.ovs-sr-row:last-child { border-bottom: none; }
.ovs-sr-row:hover { background: var(--accent-lt); }

/* 카테고리 관리 모달 */
.ovs-mng-cat {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; background: var(--bg-card);
  display: flex; flex-direction: column; gap: 8px;
}
.ovs-mng-hdr { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ovs-mng-stocks { display: flex; flex-direction: column; gap: 4px; }
.ovs-mng-stock {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px;
  background: var(--bg);
  border-radius: 6px;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
}

/* 키워드셋 (발송시각 슬롯 내부 그룹) */
.mr-keyset {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--bg-card);
}

/* 기본 체크박스 색상 — 민트 (특정 영역에서 accent-color로 개별 override 가능) */
input[type="checkbox"] { accent-color: #7c3aed; }

.mr-tab-btn { height: 32px; }
.mr-tab-btn.active {
  background: var(--accent) !important; color: var(--on-accent) !important;
  border-color: var(--accent) !important;
}
.mr-tab-row { display: flex; gap: 4px; margin-bottom: 10px; }

/* 메일링 프로필 sub-tabs (주식1/주식2/키워드 뉴스) */
/* mr-profile-tabs / mr-profile-tab 은 pill 템플릿(.news-tabs/.news-tab)을 그대로 사용.
   여기선 컨테이너 margin 만 0 으로 (설정 탭 1행과 동일한 spacing) — 그 외 스타일은 template 따름 */
.mr-profile-tabs { margin: 0; padding: 0; }
.mr-profile-tab { /* flex/height/border 등 .news-tab 템플릿이 처리 — 별도 override 없음 */ }

.mr-section-list { display: flex; flex-direction: column; gap: 2px; }
.mr-section-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 8px; border: 1px dashed transparent; border-radius: 6px;
  background: transparent; cursor: grab;
  transition: border-color .12s, background .12s;
  min-width: 0;   /* 부모(.mr-card) 폭 안에 갇히도록 */
}
.mr-section-row > * { min-width: 0; }   /* flex children — flex:1 영역이 콘텐츠로 부풀지 않게 */
.mr-section-row:hover { background: var(--bg-card); }
.mr-section-row.dragging { opacity: 0.5; cursor: grabbing; }
.mr-section-row.drag-over { border-color: var(--accent); background: var(--accent-lt); border-style: solid; }
.mr-drag-handle {
  color: var(--text-4); font-size: round(calc(18px * var(--font-scale, 1)), 1px); padding: 0 2px;
  cursor: grab; user-select: none; line-height: 1;
}
.mr-sub-row { display: flex; align-items: center; gap: 6px; font-size: round(calc(16px * var(--font-scale, 1)), 1px); padding-left: 22px; }
.mr-always { color: var(--text-4); font-size: round(calc(12px * var(--font-scale, 1)), 1px); }

/* 관심종목 카테고리 선택 UI */
.mr-fav-cats {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 6px 0 2px 22px;
}
.mr-fav-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 8px; border-radius: 10px;
  background: var(--accent-lt); color: var(--accent-dk);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 600;
  line-height: 1.4;
}
.mr-fav-chip.mr-fav-all { padding: 2px 4px 2px 8px; color: var(--text-3); background: var(--bg-card); }
.mr-fav-chip.mr-fav-all .mr-fav-chip-x { color: var(--text-3); }
.mr-fav-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.mr-fav-chip-x {
  width: 14px; height: 14px; border: 0; border-radius: 50%;
  background: transparent; color: var(--accent-dk);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.mr-fav-chip-x:hover { background: rgba(0,0,0,0.08); color: var(--red); }
.mr-fav-add-btn {
  padding: 2px 8px; border-radius: 10px;
  border: 1px dashed var(--border-dark); background: transparent;
  color: var(--text-3); font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 500;
  cursor: pointer;
}
.mr-fav-add-btn:hover { border-color: var(--accent); color: var(--accent-dk); }
.mr-fav-popup {
  position: absolute; z-index: 200; min-width: 140px;
  background: var(--bg); border: 1px solid var(--border-dark); border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  padding: 4px; max-height: 200px; overflow-y: auto;
}
.mr-fav-popup-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; font-size: round(calc(16px * var(--font-scale, 1)), 1px); cursor: pointer;
  border-radius: 4px;
}
.mr-fav-popup-item:hover { background: var(--bg-card); }

/* 메일링 — 관심키워드 매칭 뉴스 탭별 키워드 리스트 */
.mr-kw-list {
  margin: 8px 0 2px 22px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-card);
  min-width: 0;   /* flex/grid item 안에서 콘텐츠 폭 제약 받지 않게 — 자식이 부모 넘지 않도록 */
  max-width: 100%; box-sizing: border-box;
}
@media (max-width: 1023px) {
  .mr-kw-list { margin-left: 0; padding: 8px; }   /* 모바일: 좌측 들여쓰기 제거, 카드 폭 가득 */
}
.mr-kw-add-row { min-width: 0; }
.mr-kw-add-input { min-width: 0; }   /* flex:1 인풋이 부모 넘지 않도록 */
.mr-kw-chips { min-width: 0; }
.mr-kw-tab-label {
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  color: var(--text-3); font-weight: 600;
  letter-spacing: 0.2px;
}
.mr-kw-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  min-height: 22px;
}
.mr-kw-empty {
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  color: var(--text-4); font-style: italic;
}
.mr-kw-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 4px 2px 8px; border-radius: 10px;
  background: var(--accent-lt); color: var(--accent-dk);
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); font-weight: 600;
  line-height: 1.4;
}
.mr-kw-chip-x {
  width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: transparent; color: var(--accent-dk);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.mr-kw-chip-x:hover { background: rgba(0,0,0,0.08); color: var(--red); }
.mr-kw-add-row {
  display: flex; gap: 6px; align-items: center;
}
.mr-kw-add-input {
  flex: 1; height: 32px; padding: 0 10px;
  border: 1px solid var(--border-md); border-radius: 6px;
  font-family: inherit; font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  background: var(--bg); color: var(--text);
  box-sizing: border-box;
}
.mr-kw-add-input:focus { outline: none; border-color: var(--accent); }
.mr-kw-add-btn {
  height: 32px; padding: 0 12px; border-radius: 6px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); font-weight: 600;
  cursor: pointer;
}
.mr-kw-add-btn:hover { background: var(--accent-dk); border-color: var(--accent-dk); }

/* 일반 페이지 상단 뒤로가기 + 탭/타이틀 레이아웃 */
.alerts-top-wrap, .mr-header {
  display: flex; align-items: stretch; gap: 10px; padding: 10px 16px 0;
}
.mr-header { padding-bottom: 4px; }
.alerts-top-inner { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.alerts-top-inner .alerts-tabs { margin: 0; }
.alerts-top-wrap .sd-back-btn,
.mr-header .sd-back-btn {
  width: 26px; min-width: 26px; padding: 0;
  border-radius: 10px; border: 1px solid var(--border-dark);
  background: var(--bg); color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  align-self: stretch;
}
/* mr-header 는 컨텐츠가 단일 버튼이라 align-items:stretch 만으론 높이 안 나옴 → 최소 높이 지정 */
.mr-header .sd-back-btn { min-height: 32px; height: 60px; }
.alerts-top-wrap .sd-back-btn:hover,
.mr-header .sd-back-btn:hover {
  background: var(--accent-lt); color: var(--accent-dk); border-color: var(--accent);
}
.alerts-top-wrap .sd-back-btn svg,
.mr-header .sd-back-btn svg { width: 14px; height: 14px; }
.sd-back-btn {
  width: 38px; height: 64px; align-self: flex-start; border-radius: 12px; border: 1px solid var(--border-dark);
  background: var(--bg); color: var(--text-3); font-size: round(calc(22px * var(--font-scale, 1)), 1px);
  cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.sd-back-btn:hover { background: var(--accent-lt); color: var(--accent-dk); border-color: var(--accent); }

.sd-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: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 700;
  cursor: pointer; flex-shrink: 0; transition: all .15s; letter-spacing: 0.5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sd-live-btn.on { background: #dcfce7; color: #166534; }
.sd-live-btn:not(.on) { background: var(--chip-bg); color: var(--chip-fg); }

.sd-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;
}
.sd-fav-btn svg { width: 14px; height: 14px; fill: currentColor; }
.sd-fav-btn:hover { background: var(--nxt-bg); color: var(--nxt-fg); }
.sd-fav-btn.on { background: var(--nxt-bg); color: var(--nxt-fg); }
.sd-fav-btn.on:hover { background: #fde68a; }

.sd-share-btn {
  height: 30px; width: 30px; min-width: 0; padding: 0; box-sizing: border-box;
  border-radius: 999px; border: 1px solid var(--border-dark);
  background: var(--bg); color: var(--text);
  cursor: pointer; flex-shrink: 0; transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sd-share-btn svg { width: 17px; height: 17px; }
.sd-share-btn:hover { background: var(--gray-100); color: var(--text); border-color: var(--border-dark); }
.sd-share-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.sd-share-btn.on:hover { background: var(--accent-dk); color: #fff; border-color: var(--accent-dk); }
/* 종목 이전/다음 순환 버튼 — 우측 2x2 도구(64px) + 뒤로가기 버튼과 동일 높이 */
.sd-cycle-btn {
  width: 32px; height: 64px; padding: 0; border-radius: 12px;
  border: 1px solid var(--border-dark); background: var(--bg); color: var(--text-3);
  cursor: pointer; flex-shrink: 0; transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: stretch;
}
.sd-cycle-btn:hover { background: var(--accent-lt); color: var(--accent-dk); border-color: var(--accent); }
.sd-cycle-btn:active { transform: scale(0.96); }
/* 우측 도구 4개 — 2x2 그리드 (메모/점수 위, 공유/PDF 아래). 총 높이 = 30 + 4 + 30 = 64px */
.sd-tools-grid {
  margin-left: auto;
  display: grid; grid-template-columns: repeat(2, 30px); grid-template-rows: 30px 30px; gap: 4px;
  flex-shrink: 0; align-items: center; justify-items: center;
  align-self: stretch;
}
.sd-tools-grid > * { margin: 0 !important; }
/* 종목명 + 가격을 한 블록으로 묶어서 다음 버튼이 둘 중 긴 행에 맞춰 오른쪽으로 붙도록 */
.sd-name-price-block {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; align-self: center;
  /* width:auto → 내용물 중 더 긴 행 너비를 따라감 */
}
.sd-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; min-height: 32px; line-height: 1; padding-top: 4px; }
.sd-header-v2 .sd-name-row { padding-top: 6px; }
.sd-header-top { align-items: stretch; }

/* ── v2 (재배치 헤더): 모바일은 2행, 데스크탑은 1행 ── */
.sd-header-v2 { padding: 8px 8px 0; display: flex; flex-direction: column; }
.sd-header-v2 .sd-header-top { display: flex; align-items: center; column-gap: 6px; row-gap: 0; flex-wrap: wrap; }
.sd-header-v2 .sd-cycle-label {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px; height: 32px; align-self: center;
  color: var(--text-3); font-weight: 600;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
}
.sd-header-v2 .sd-tools-grid {
  margin-left: auto;
  /* 모바일: edit + score 두 개만 1행에 (32×32) */
  grid-template-columns: repeat(2, 32px);
  grid-template-rows: 32px;
  align-self: center;
  gap: 6px;
}
/* 모바일 — 2행 오른쪽 끝의 share + PDF 버튼 그룹 (종목명 행과 같은 Y 레벨) */
.sd-header-v2 .sd-tools-bot {
  order: 100; margin-left: auto; align-self: flex-start;
  display: inline-flex; gap: 6px;
}
/* wrap-break: 명시적 줄바꿈 — 모든 화면 사이즈에서 동일하게 2행 레이아웃 강제. */
.sd-header-v2 .sd-wrap-break { flex-basis: 100%; height: 0; order: 50; }
/* row-gap을 0으로 두고 row2의 item에 직접 margin-top 6px를 줘서 정확히 6px 간격 보장 */
.sd-header-v2 .sd-name-price-block,
.sd-header-v2 .sd-tools-bot { margin-top: 6px; }
.sd-header-v2 .sd-name-price-block {
  /* 두 번째 줄로 wrap (wrap-break로 강제됨), 좌측 정렬
     flex: 1로 남은 공간을 채워 .sd-tools-bot이 같은 row 오른쪽 끝에 위치하게 함 */
  flex: 1 1 60%; order: 99; align-items: flex-start; align-self: flex-start;
  margin-top: 0; padding-left: 0;
}
/* 데스크톱: 헤더 좌우 padding 16px (모바일은 8px 유지) */
@media (min-width: 1024px) {
  .sd-header-v2 { padding: 8px 16px 0; }
}
.sd-header-v2 .sd-name-row,
.sd-header-v2 .sd-price-row { justify-content: flex-start; }
/* 모바일 — 상단 버튼들 32×32 (탑바 다크모드/설정과 동일 사이즈), 모두 가운데 정렬 */
.sd-header-v2 .sd-back-btn { width: 32px; height: 32px; align-self: center; }
.sd-header-v2 .sd-back-btn svg { width: 16px; height: 16px; }
.sd-header-v2 .sd-cycle-btn { width: 32px; height: 32px; align-self: center; }
.sd-header-v2 .sd-cycle-btn svg { width: 16px; height: 16px; }
.sd-header-v2 .sd-share-btn { width: 32px; height: 32px; }
.sd-header-v2 .sd-fav-btn { width: 32px; height: 32px; }
/* 모바일 — 본문 카드/테이블 좌우 마진 8px로 통일 */
@media (max-width: 1023px) {
  .sd-metrics,
  .sd-card,
  .sd-section-memo { margin-left: 8px !important; margin-right: 8px !important; }
  /* 카드 내부 좌우 패딩도 8px로 통일 (인라인 스타일 override) */
  .sd-card-title { padding-left: 8px !important; padding-right: 8px !important; }
  .sd-card > div[style*="padding"],
  .sd-card #sd-overview,
  .sd-card #sd-disclosures,
  .sd-card #sd-frgn,
  .sd-card #fin-table-area { padding-left: 8px !important; padding-right: 8px !important; }
  .sd-card #sd-disclosures > ul > li > a { padding-left: 8px !important; padding-right: 8px !important; }
  .sd-card .sd-chart-toolbar { padding-left: 8px !important; padding-right: 8px !important; }
  .sd-card .sd-chart-tabs { padding-left: 8px !important; padding-right: 8px !important; }
}
/* 모바일과 데스크탑 동일 레이아웃 사용 — 데스크탑 별도 override 없음 */

/* 카드별 섹션 메모 — 리치 에디터 (카드 하위 여백) */
.sd-section-memo { margin: 12px 16px 16px; padding: 0; }
.sdm-frame {
  border: 1px solid var(--border-dark); border-radius: var(--r-md);
  background: var(--bg); overflow: hidden;
}
.sdm-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 2px;
}
.sdm-head .sdm-title {
  flex: 1; font-weight: 700; color: var(--text);
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
}
.sdm-head .mm-saved { flex: 0 0 auto; margin-left: 0; }
.sdm-head .mm-clear-btn { float: none; flex-shrink: 0; }
.sd-section-memo .sdm-frame .mm-toolbar { border-radius: 0; border-left: 0; border-right: 0; }
.sd-section-memo .sdm-editor {
  min-height: 4em; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
}
/* 편집 모드 OFF: 툴바 · 헤더(제목/저장/삭제) 숨기고 내용만 표시 */
.sd-section-memo.view-only .sdm-head,
.sd-section-memo.view-only .sdm-frame .mm-toolbar { display: none; }
.sd-section-memo.view-only .sdm-frame {
  border: 1px solid var(--border-dark);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.sd-section-memo.view-only .sdm-editor {
  border: 0; padding: 10px 12px; background: transparent; min-height: 0;
}
.sd-section-memo.view-only .sdm-editor:empty::before { content: ''; }
/* favchart 페이지 — 차트 전용 */
.fc-header {
  padding: 10px 12px 8px; border-bottom: 1px solid var(--border-dark); background: var(--bg);
  display: flex; align-items: stretch; gap: 10px;
}
.fc-header .sd-back-btn { height: auto; align-self: stretch; }
.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: round(calc(22px * var(--font-scale, 1)), 1px); 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-dark); 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: round(calc(26px * var(--font-scale, 1)), 1px); font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.fc-cur-price small { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 400; color: var(--text-3); margin-left: 2px; }
.fc-pos-bottom {
  padding: 8px 16px 10px; text-align: right;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-3);
  font-variant-numeric: tabular-nums; font-weight: 600;
  border-top: 1px solid var(--border-dark);
}
.sd-code { font-size: round(calc(16px * var(--font-scale, 1)), 1px); color: var(--text-4); font-family: monospace; }
.sd-code.wl-code-ks { color: var(--mkt-ks); cursor: help; background: none !important; padding: 0 !important; }
.sd-code.wl-code-kq { color: var(--mkt-kq); cursor: help; background: none !important; padding: 0 !important; }
.sd-header-right { flex: 1; min-width: 0; }
.sd-header-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sd-name { font-size: round(calc(20px * var(--font-scale, 1)), 1px); font-weight: 700; letter-spacing: -0.3px; }
.sd-code { font-size: round(calc(12px * var(--font-scale, 1)), 1px); color: var(--text-4); font-family: monospace; }
.sd-price-row { display: flex; flex-direction: column; gap: 0; margin-top: -4px; }
/* 차트 전용 페이지(favchart) — 가격과 등락을 한 줄에 표시 */
.sd-price-row-inline { flex-direction: row !important; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sd-price-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sd-price-nxt .sd-cur-price { font-size: round(calc(18px * var(--font-scale, 1)), 1px); color: var(--text-2); }
.sd-price-tag { font-size: round(calc(12px * var(--font-scale, 1)), 1px); font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--chip-bg); color: var(--chip-fg); letter-spacing: 0.3px; }
.sd-price-tag-nxt { background: rgba(251,191,36,0.18); color: #b45309; }
:root[data-theme="dark"] .sd-price-tag-nxt { color: #fbbf24; }
.sd-nxt-vol { font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-3); font-variant-numeric: tabular-nums; }
.sd-cur-price { font-size: round(calc(22px * var(--font-scale, 1)), 1px); font-weight: 700; letter-spacing: -0.5px; }
.sd-cur-price small { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 400; color: var(--text-3); }
.sd-chg { font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 600; }
.sd-chg.up { color: var(--up); }
.sd-chg.dn { color: var(--dn); }
.spinner-sm { width: 20px; height: 20px; border: 2px solid var(--border-dark); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; }

.sd-metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; margin: 6px 16px 0;
  border: 1px solid var(--border-grid); border-radius: var(--r-md);
  overflow: hidden; background: var(--border-grid);
}
.sd-m {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 12px; background: var(--bg); font-size: round(calc(14px * var(--font-scale, 1)), 1px);
}
/* 지그재그(체크보드) 패턴 — 2열 그리드에서 각 행의 좌/우 셀이 서로 반대 색
   1행 좌(1), 2행 우(4), 3행 좌(5), 4행 우(8) ... = nth-child(4n+1), (4n) → 기본 (var(--bg) 흰색)
   1행 우(2), 2행 좌(3), 3행 우(6), 4행 좌(7) ... = nth-child(4n+2), (4n+3) → zebra
   sd-m-hi/sd-m-mint 클래스는 사용 안 함 — nth-child 만으로 자동 적용 */
.sd-metrics > .sd-m:nth-child(4n+2),
.sd-metrics > .sd-m:nth-child(4n+3) { background: var(--zebra-odd); }
.sd-ml { color: var(--text-1); font-weight: 500; }
.sd-mv { font-weight: 600; color: var(--text-1); text-align: right; }

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

.sd-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;
}
.sd-chart-divider-line {
  width: 40px; height: 3px; border-radius: 2px; background: var(--border-dark);
  transition: background .15s; opacity: 0.5;
}
.sd-chart-divider:hover .sd-chart-divider-line,
.sd-chart-divider:active .sd-chart-divider-line { background: var(--accent); opacity: 1; }
/* 차트 상단/하단 테두리로 마무리 (오른쪽 가격레이블 영역 60px 제외) */
.sd-card #sd-price-chart { position: relative; }
.sd-card #sd-price-chart::before {
  content: ''; position: absolute; top: 0; left: 0; right: 60px; height: 1px;
  background: var(--border-dark); z-index: 4; pointer-events: none;
}
.sd-card #sd-vol-chart { position: relative; }
.sd-card #sd-vol-chart::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 60px; height: 1px;
  background: var(--border-dark); z-index: 4; pointer-events: none;
}
/* 전체화면 모드에서는 테두리 제거 */
.sd-chart-wrap.fullscreen #sd-price-chart::before,
.sd-chart-wrap.fullscreen #sd-vol-chart::after { display: none !important; }
.sd-card {
  margin: 12px 16px 0;
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
  background: var(--bg);
  overflow: hidden;
}
.sd-card.sd-card-summary { margin-top: 2em; }

/* 지수 상세 — 투자자별/프로그램/등락종목 요약 카드 */
.idx-sum-card { margin-top: 16px; margin-bottom: 16px; }
.idx-sum-card .sd-card-title { padding: 12px 14px 8px; font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.idx-sum-card .idx-sum-unit { color: var(--text-4); font-size: 12px; font-weight: 400; }
.idx-sum-grid { display: flex; flex-direction: column; padding: 0 8px 12px; }
.idx-sum-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border-top: 1px solid var(--border);
}
.idx-sum-row:first-child { border-top: 0; }
.idx-sum-lbl { color: var(--text-3); font-size: 16px; font-weight: 500; padding-left: 4px; }
.idx-sum-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.idx-sum-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.idx-sum-sub { color: var(--text-4); font-size: 14px; }
.idx-sum-val { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.idx-sum-val.up { color: var(--up); }
.idx-sum-val.dn { color: var(--dn); }
.idx-sum-val small { color: var(--text-4); font-weight: 500; font-size: 12px; margin-left: 2px; }

/* 매매동향 — 상단 코스피/코스닥 네비 카드 */
/* 매매동향 KOSPI/KOSDAQ 카드 — 관심종목 .screen-mo-wrap 과 완전히 동일한 레이아웃 */
.flow-idx-nav { padding: var(--page-pad-x); }
.flow-idx-nav:empty { display: none; }
.flow-idx-nav {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  max-width: 560px; margin: 0;
}
.flow-idx-nav .mo-item {
  flex-direction: row; flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 12px; row-gap: 2px;
}
.flow-idx-nav .mo-item .mo-label { flex: 0 0 auto; }
.flow-idx-nav .mo-item .mo-price { flex: 0 0 auto; text-align: right; white-space: nowrap; margin: 0; }
.flow-idx-nav .mo-item .mo-chg { flex-basis: 100%; margin: 0; white-space: nowrap; text-align: right; display: flex; justify-content: flex-end; gap: 6px; }
.flow-idx-rate { color: var(--text-3); margin-left: 4px; }
.flow-idx-chg.up .flow-idx-rate, .flow-idx-chg.dn .flow-idx-rate { color: inherit; opacity: .85; }

/* 매매동향 테이블 — 현재가 / 등락률 색상 */
.q-table .q-num .up { color: var(--up); }
.q-table .q-num .dn { color: var(--dn); }
/* 종목요약 카드 — toolbar/editor를 카드 내부 행으로 (이중 외곽선 제거) */
.sd-card-summary > .mm-toolbar {
  border: 0; border-top: 1px solid var(--border-dark); border-bottom: 1px solid var(--border-dark);
  border-radius: 0; padding-left: 16px; padding-right: 16px;
}
.sd-card-summary > .mm-editor {
  border: 0; border-radius: 0; padding: 10px 16px; min-height: 7.5em;
}
.sd-card-summary > .mm-editor:focus { border: 0; }
.sd-card .sd-chart-toolbar { padding: 10px 12px 4px; }
.sd-card #sd-chart-wrap { padding: 0 2px; }
.sd-card #sd-candle-chart, .sd-card #sd-price-chart, .sd-card #sd-vol-chart { padding-right: 0 !important; }
.sd-card .analytics-toolbar { padding: 10px 12px 0; margin: 0; }
.sd-card #fin-table-area { padding: 8px 0 12px; }
.sd-card .chart-section-header { padding: 10px 12px 4px; }
.sd-card #fin-chart-area { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.sd-card #fin-chart-area .chart-card {
  border: 1px solid var(--border-dark); border-radius: 8px; box-shadow: none;
  margin: 0; padding: 10px 12px; background: var(--bg);
}

/* Card title + sub-card pattern */
.sd-card-title {
  padding: 10px 14px 4px; font-size: round(calc(18px * var(--font-scale, 1)), 1px); font-weight: 700; color: var(--text-1);
  letter-spacing: -0.2px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  white-space: nowrap;  /* 제목 텍스트 줄바꿈 방지 */
}
/* 외국인·기관 요약처럼 우측 요약이 길어서 한 줄에 못 들어갈 때 — 줄바꿈 + 제목 아래쪽 좌측 정렬 */
.sd-card-title:has(.sd-frgn-sum-wrap) { flex-wrap: wrap; }
.sd-card-title .sd-frgn-sum-wrap { justify-content: flex-start; }
/* 카드 제목 오른쪽의 칩 그룹(연간/분기/5년/10년/전체 등)은 공간이 부족하면 가로 스크롤.
   제목은 항상 한 줄에 유지되도록 칩 그룹이 줄어들게 허용 */
.sd-card-title > div {
  min-width: 0;
  overflow-x: auto;
  flex-shrink: 1;
  scrollbar-width: none;
}
.sd-card-title > div::-webkit-scrollbar { display: none; }
.sd-card-title > div > * { flex-shrink: 0; }
.sd-subcard {
  margin: 10px; border: 1px solid var(--border-dark); border-radius: 8px;
  background: var(--bg); overflow: hidden;
}
.sd-subcard-toolbar {
  padding: 8px 10px; border-bottom: 1px solid var(--border-dark);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sd-subcard #fin-table-area { padding: 6px 0 8px; }
.sd-chart-tabs { display: flex; align-items: center; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid var(--border-dark); margin-bottom: 2px; }
.sd-chart-tabs .sd-fs-btn { margin-left: auto; margin-bottom: 4px; }
.sd-ct-tab {
  padding: 8px 14px; border: none; background: none; cursor: pointer;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 500; color: var(--text-3); font-family: inherit;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .12s;
}
.sd-ct-tab.active { color: var(--accent-dk); border-bottom-color: var(--accent); font-weight: 600; }
.sd-ct-tab:hover:not(.active) { color: var(--text-2); }
.sd-chart-toolbar { padding: 8px 8px 4px; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.sd-chart-periods {
  display: flex; gap: 6px; flex: 1; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sd-chart-periods::-webkit-scrollbar { display: none; }
.sd-cp-btn {
  width: 44px; height: 26px; padding: 0; border-radius: var(--r-pill);
  border: 1px solid var(--border-dark); background: none;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); 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;
}
.sd-cp-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.sd-cp-btn:hover:not(.active) { background: var(--bg-card); }

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

.sd-chart-wrap { position: relative; }
.sd-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;
}
.sd-fs-header {
  display: none; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--border-dark);
}
.sd-chart-wrap.fullscreen .sd-fs-header { display: flex; }
.sd-chart-wrap.fullscreen #sd-candle-chart { flex: 1; }
#sd-fs-title { font-weight: 600; font-size: round(calc(18px * var(--font-scale, 1)), 1px); white-space: nowrap; }
.sd-fs-periods { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.sd-fs-close {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-dark);
  background: none; color: var(--text-1); font-size: round(calc(18px * var(--font-scale, 1)), 1px); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .12s;
}
.sd-fs-close:hover { background: var(--bg-card); }

/* ── Settings ─────────────────────────────────────────────────────────────── */
.settings-group {
  margin: 16px 16px 0;
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
  overflow: hidden; background: var(--bg);
  box-shadow: var(--shadow);
}
.settings-group-title {
  padding: 12px 16px 8px;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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-dark);
  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: round(calc(20px * var(--font-scale, 1)), 1px);
}
.settings-info { flex: 1; min-width: 0; }
.settings-label { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 500; }
.settings-sub   { font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4); margin-top: 1px; }
.settings-arrow { color: var(--text-4); font-size: round(calc(20px * var(--font-scale, 1)), 1px); }

.pill-badge {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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-dark);
}
.cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cat-name { flex: 1; font-size: round(calc(16px * var(--font-scale, 1)), 1px); }
.cat-btn {
  width: 28px; height: 32px; border-radius: var(--r-sm);
  border: 1px solid var(--border-dark); background: var(--bg);
  cursor: pointer; font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  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-dark);
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
}
.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: round(calc(18px * var(--font-scale, 1)), 1px); 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-dark); 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: 32px; box-sizing: border-box; line-height: 1;
  padding: 0 12px; font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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);
}
/* 풀하이트 모달 — 모바일은 세로 80dvh 고정, 데스크탑은 가변 70~95dvh */
.modal-box.modal-full-height {
  height: auto;
  min-height: 70dvh;
  max-height: 95dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .modal-box.modal-full-height {
    height: 80dvh;
    min-height: 80dvh;
    max-height: 80dvh;
  }
}
.modal-box.modal-full-height > #modal-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-box.modal-full-height .modal-body {
  flex: 1;
  min-height: 0;
}
.modal-box.modal-full-height .modal-actions {
  flex-shrink: 0;
}
/* 바텀시트 손잡이 — 가운데 정렬 모달에는 불필요 */
.modal-handle { display: none; }
.modal-title {
  font-size: round(calc(20px * var(--font-scale, 1)), 1px); font-weight: 600; letter-spacing: -0.3px;
  padding: 16px 20px; border-bottom: 1px solid var(--border-dark);
}
.modal-body    { padding: 16px 20px; }
.modal-actions {
  padding: 12px 20px 16px; display: flex; gap: 8px;
  position: sticky; bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--border-dark);
  z-index: 1;
}
.modal-actions .btn { flex: 1; min-width: 0; }

/* 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: round(calc(14px * var(--font-scale, 1)), 1px);
  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: #1e293b; color: #fff;
  padding: 10px 18px; border-radius: var(--r-pill);
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
:root[data-theme="dark"] .toast { background: #f1f5f9; color: #1e293b; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

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

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

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

.stk-search-row { padding: 12px 16px; }
.stk-search-wrap { position: relative; }
.stk-search {
  width: 100%; height: 32px; padding: 0 30px 0 12px;
  box-sizing: border-box; line-height: 1;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  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(167,139,250, 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-dark); color: var(--text-3); font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  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: 32px; box-sizing: border-box; line-height: 1;
  padding: 0 12px; border-radius: var(--r-pill);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 500;
  border: 1px solid var(--border-dark); 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;
  border: 1px solid var(--border-dark); border-radius: 8px;
  background: var(--bg); overflow: hidden;
  margin: 0 var(--page-pad-x);
}
.stk-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-dark);
  cursor: pointer; transition: background .1s;
  justify-content: flex-start; line-height: 1.4;
}
.stk-list > .stk-item:last-child { border-bottom: 0; }
.stk-list > .stk-item:nth-child(even) { background: var(--zebra-odd); }
.stk-item:hover { background: var(--zebra-hover) !important; }
@media (max-width: 1023px) {
  .stk-item { padding: 6px 8px; }
}
.stk-item-info { flex: 1; min-width: 0; text-align: left; }
.stk-item-row1 {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 3px; flex-wrap: wrap; justify-content: flex-start;
}
.stk-name { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600; color: var(--text-1); cursor: help; }
.stk-name.stk-name-ks { color: var(--mkt-ks); }
.stk-name.stk-name-kq { color: var(--mkt-kq); }
.stk-price { font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 600; color: var(--text-1); }
.stk-mkt-tag {
  font-size: round(calc(12px * var(--font-scale, 1)), 1px); font-weight: 700; padding: 1px 5px; border-radius: 4px;
  background: var(--mkt-ks-lt); color: var(--mkt-ks); flex-shrink: 0;
}
.stk-mkt-tag.kq { background: var(--mkt-kq-lt); color: var(--mkt-kq); }
.stk-code { font-size: round(calc(12px * var(--font-scale, 1)), 1px); color: var(--text-4); }
.stk-item-row2 { font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 0; text-align: left; }
.stk-chg { font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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; }
/* q-table 안의 즐겨찾기 버튼 — 작게 */
.q-table .stk-fav-btn { width: 24px; height: 24px; margin: 0 auto; }
.q-table .stk-fav-btn svg { width: 14px; height: 14px; }
.q-table .q-fav { width: 32px; text-align: center; }
/* 등락 셀 안의 % 표기 — 작게 */
.q-table .q-rate { font-size: round(calc(12px * var(--font-scale, 1)), 1px); margin-left: 2px; }

.stk-pagination {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 12px 16px;
  margin: 0 var(--page-pad-x);
}
.stk-pg-btn {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--border-dark); background: none;
  color: var(--text-3); font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4); margin-left: 6px; }

/* ── Quant (거래상위) ──────────────────────────────────────────────────── */
.q-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-dark); border-radius: 8px; margin: 0 8px;
}
/* 매매동향 테이블 — 종목명 컬럼 sticky-left (left:0) + scrollLeft 만큼 축소
   스크롤 시 # 컬럼이 자연스럽게 좌측으로 사라지고 종목명이 그 위치로 이동.
   배경 불투명 + z-index 로 다른 컬럼 값들이 종목명 뒤로 보이지 않게 처리 */
.flow-tbl-wrap .q-table th.flow-name-cell,
.flow-tbl-wrap .q-table td.flow-name-cell {
  position: sticky; left: 0;
  z-index: 5;
  padding-left: 8px !important; padding-right: 8px !important;
  background-color: var(--bg) !important;
}
/* zebra/hover 는 반투명 → --bg 와 합성해서 완전 불투명하게 처리 */
.flow-tbl-wrap .q-table tbody tr:nth-child(even) td.flow-name-cell {
  background: linear-gradient(var(--zebra-odd), var(--zebra-odd)), var(--bg) !important;
}
.flow-tbl-wrap .q-table tbody tr:hover td.flow-name-cell {
  background: linear-gradient(var(--zebra-hover), var(--zebra-hover)), var(--bg) !important;
}
.flow-tbl-wrap .q-table thead th.flow-name-cell {
  background: linear-gradient(var(--zebra-odd), var(--zebra-odd)), var(--bg) !important;
  z-index: 6;
}
.flow-tbl-wrap .flow-name-inner {
  display: inline-block;
  width: var(--flow-name-w, 140px);
  max-width: var(--flow-name-w, 140px);
  overflow: hidden; text-overflow: clip; white-space: nowrap;
  vertical-align: middle;
}
/* 명시적 right border 로 종목명 컬럼과 그 우측 컬럼 사이 구분선 확보 */
.flow-tbl-wrap .q-table th.flow-name-cell,
.flow-tbl-wrap .q-table td.flow-name-cell { border-right: 1px solid var(--border); }
/* 모바일 — 종목테이블 좌우 여백 8px (#quant-list padding 8px만 적용, wrap margin 0)
   border 와 border-radius 는 유지 (위/아래 라운드 코너 살림) */
@media (max-width: 1023px) {
  .q-table-wrap { margin: 0; }
}
/* 종목명 컬럼 sticky — 좁은 화면에서 가로 스크롤 시 종목명 항상 보임
   외부 td 와 inner 가 동일 폭(--q-name-inner-w)으로 함께 축소 → 컬럼 우측 세로라인이 왼쪽으로 이동,
   다른 컬럼들이 그 공간으로 슬라이드 (사용자 요청)
   sticky-left + 불투명 배경으로 셀 겹침 방지 */
.q-table th.q-name,
.q-table td.q-name {
  position: sticky; left: 0; z-index: 2;
  width: var(--q-name-inner-w, var(--q-name-w, 110px));
  min-width: 48px;   /* 최소 약 2자 보이도록 (16px Korean × 2 + 8px padding × 2) */
  max-width: var(--q-name-inner-w, var(--q-name-w, 110px));
  padding: 0 !important;   /* padding 은 inner 가 담당 */
  box-shadow: 1px 0 0 var(--border-dark);
  background: var(--bg);
}
.q-table thead th.q-name {
  background: linear-gradient(var(--zebra-odd), var(--zebra-odd)), var(--bg);
  z-index: 3;
}
/* zebra/hover 도 base bg 위에 stack — 반투명 var(--zebra-*) 만으로는 sticky 시 뒷 셀이 비침 */
.q-table tbody tr:nth-child(even) td.q-name {
  background: linear-gradient(var(--zebra-odd), var(--zebra-odd)), var(--bg);
}
.q-table tbody tr:hover td.q-name {
  background: linear-gradient(var(--zebra-hover), var(--zebra-hover)), var(--bg);
}
/* 내부 inner — 외부 td 폭 전체를 사용. td 자체가 줄어들면서 텍스트도 잘림 (ellipsis "..." 없이 그냥 절단) */
.q-name-inner {
  display: block; box-sizing: border-box;
  width: 100%; max-width: 100%;
  padding: 4px 8px;
  overflow: hidden; white-space: nowrap;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 500;
}
/* 헤더 종목명 — inner 없이 width 만 일치, 라벨 짧으니 padding 만 적용 */
.q-table thead th.q-name { padding: 4px !important; }
.q-table { width: 100%; border-collapse: collapse; font-size: round(calc(14px * var(--font-scale, 1)), 1px); }
.q-table th {
  background: linear-gradient(var(--zebra-odd), var(--zebra-odd)), var(--bg);
  padding: 4px 4px; text-align: right;
  font-weight: 600; color: var(--text-3); border-bottom: 1px solid var(--border-dark);
  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-dark); font-variant-numeric: tabular-nums; line-height: 1.4; }
.q-table td.q-num { font-size: round(calc(16px * var(--font-scale, 1)), 1px); text-align: right; white-space: nowrap; }
.q-table td.q-name { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 500; white-space: nowrap; }
.q-table td.q-name .q-code { font-size: round(calc(12px * var(--font-scale, 1)), 1px); color: var(--text-4); margin-left: 6px; font-weight: 400; font-family: monospace; }
.q-table td.q-name .q-code.q-code-ks { color: var(--mkt-ks); }
.q-table td.q-name .q-code.q-code-kq { color: var(--mkt-kq); }
.q-table tbody tr { cursor: pointer; transition: background .1s; }
.q-table tbody tr:nth-child(even) { 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; flex-wrap: wrap; gap: var(--pill-gap); padding: 0 16px 8px; }
/* pill 버튼 행 공통 — 같은 변수 사용 (인라인 gap 없이 CSS만으로 통일) */
.news-search-row, .sd-news-tabs, .wl-sort-row, #news-subtabs.news-tabs { gap: var(--pill-gap); }
/* 키워드 입력 — wrap에 input + 우측 X 버튼 */
/* 키워드 입력 wrap — input 단독으로 부모 flex item이 되도록 inline-flex 유지, 높이는 input이 결정 */
.news-search-wrap { position: relative; display: inline-flex; align-items: center; height: var(--pill-h); }
/* 뉴스 페이지 2행(키워드 입력 행) 안의 wrap 은 flex grow → 남는 가로공간 자동으로 채움 (기본 160px ~ 최대 240px = 1.5×) */
.news-search-row .news-search-wrap {
  flex: 1 1 160px;
  min-width: 160px;
  max-width: 240px;
}
/* 모바일: 검색입력창 더 좁게 → 정렬 버튼들이 한 줄에 들어가도록 (스크롤 없이) */
@media (max-width: 1023px) {
  .news-search-row .news-search-wrap {
    flex: 1 1 80px;
    min-width: 80px;
    max-width: 200px;
  }
}
/* 키워드 입력 — .news-tab 와 동일 box model (height/border/box-sizing/line-height 일치) */
.news-search-input {
  height: var(--pill-h); box-sizing: border-box; line-height: 1;
  width: 100%;
  padding: 0 calc(var(--pill-px) + 16px) 0 var(--pill-px);   /* 우측 X 버튼 자리 16px 확보 */
  border: 1px solid var(--border-dark); border-radius: var(--r-pill);
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  font-weight: 500; color: var(--text);
  background: var(--bg); font-family: inherit; outline: none;
  text-align: left; margin: 0;
  -webkit-appearance: none; appearance: none;   /* iOS Safari 기본 렌더링 제거 */
}
/* 키워드 입력 행은 좌우 스크롤 (1,2 열 모두 가로 스크롤, wrap 없음) */
.news-search-row {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.news-search-row::-webkit-scrollbar { display: none; }
/* 비어있으면 placeholder 가운데 정렬 (height/padding 은 base 룰 유지 — 덮어쓰기 금지) */
.news-search-input:placeholder-shown { text-align: center; }
/* 클릭/포커스 시 placeholder 즉시 숨김 */
.news-search-input:focus::placeholder { color: transparent; }
.news-search-input:focus::-webkit-input-placeholder { color: transparent; }
.news-search-input:focus::-moz-placeholder { color: transparent; }
.news-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border: none; background: transparent;
  color: var(--text-3); cursor: pointer; padding: 0;
  display: none; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; font-family: inherit;
}
.news-search-clear:hover { color: var(--text); }
/* 입력값 있을 때만 X 버튼 표시 */
.news-search-input:not(:placeholder-shown) ~ .news-search-clear { display: inline-flex; }
/* 통일 버튼 템플릿 — 모든 페이지에 동일 사이즈 적용 (--pill-h, --pill-px 변수 사용)
   데스크톱: height 28px, 좌우 패딩 6px
   모바일  : height 24px, 좌우 패딩 4px
   글씨    : 16px 고정 (스케일 적용)
   간격    : 컨테이너에서 gap 6px */
.news-tab {
  height: var(--pill-h); box-sizing: border-box; line-height: 1;
  padding: 0 var(--pill-px); border-radius: var(--r-pill); border: 1px solid var(--border-dark);
  background: var(--bg); font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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;
}
/* 뉴스 카테고리 칩 줄 — 화면 좁아져도 줄바꿈 없이 1열 + 가로 스크롤 */
.news-tabs.news-chips-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.news-tabs.news-chips-row::-webkit-scrollbar { display: none; }
.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,
.news-tab.nxt-tab.on,
.news-tab.nxt-tab:hover {
  background: #ff6b35; color: #fff; border-color: #ff6b35;
}

.news-tab.clock-tab {
  background: #fff; color: #000; cursor: default;
  border-color: #000;
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
}
.news-tab.clock-tab:hover { background: #fff; }
@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); }

/* 뉴스 페이지 검색·키워드 버튼은 .news-tab 스타일 사용. 키워드 패널 열린 상태(on) 강조 */
.news-tab.kw-pick-btn.on {
  background: var(--accent-lt); border-color: var(--accent); color: var(--accent);
}

.kw-quick-panel {
  display: none;
  align-items: flex-start; gap: 8px;
  flex-wrap: wrap;
  padding: 6px 16px; border-bottom: 1px solid var(--border-dark);
  background: var(--gray-50);
}
.kw-quick-panel .kwq-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  flex: 1 1 240px;
  min-width: 0;
}
.kw-quick-panel .kwq-gname {
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); color: var(--text-4); font-weight: 600;
  letter-spacing: 0.3px;
}
.kw-quick-panel .kwq-chip {
  padding: 3px 9px !important;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px) !important;
  font-weight: 500;
  line-height: 1.4;
}
.kw-quick-panel .kwq-tail {
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto;
  white-space: nowrap;
}
.kwq-mode-btn {
  min-width: 40px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.kwq-btn {
  background: var(--accent-lt); border: 1px solid var(--accent-lt); color: var(--accent-dk);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 500; cursor: pointer;
  padding: 3px 9px; border-radius: var(--r-pill); transition: all .12s;
  line-height: 1.4; font-family: inherit;
}
/* ── 뉴스 표시 설정 — 슬라이더 대체 스테퍼 (실수 터치 방지) */
.news-stepper {
  display: inline-flex; align-items: stretch; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--bg);
}
.news-stepper-btn {
  width: 32px; height: 28px; padding: 0;
  border: none; background: transparent;
  color: var(--text-2); cursor: pointer;
  font-size: round(calc(18px * var(--font-scale, 1)), 1px); font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, color .12s;
}
.news-stepper-btn:hover:not([disabled]) { background: var(--gray-100); color: var(--text); }
.news-stepper-btn:active:not([disabled]) { background: var(--gray-200); }
.news-stepper-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.news-stepper-val {
  min-width: 52px; padding: 0 8px;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  background: var(--bg-card);
}
.kwq-btn:hover:not(.on):not([disabled]) { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.kwq-btn.on {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.kw-quick-panel .kwq-empty-msg {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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: round(calc(14px * var(--font-scale, 1)), 1px); 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: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--accent); font-weight: 700;
}
.news-item.art-checked .art-check { background: var(--accent); color: var(--on-accent); }

.news-list { margin: 0 var(--page-pad-x); }

/* ── 종목속보 ────────────────────────────────────────────────────────────── */
.brk-item {
  padding: 12px 0; border-bottom: 1px solid var(--border-dark);
}
.brk-item:last-child { border-bottom: none; }
.brk-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  margin-bottom: 6px;
}
.brk-channel {
  background: var(--accent-lt); color: var(--accent-dk);
  padding: 2px 8px; border-radius: var(--r-pill);
  font-weight: 600;
}
.brk-time { color: var(--text-4); font-variant-numeric: tabular-nums; }
.brk-link {
  margin-left: auto; color: var(--accent-dk);
  text-decoration: none; font-weight: 500;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
}
.brk-link:hover { text-decoration: underline; }
.brk-title {
  font-size: round(calc(18px * var(--font-scale, 1)), 1px) !important;
  font-weight: 600; line-height: 1.3; margin-bottom: 4px;
  color: var(--text-2); word-break: break-word;
}
.brk-text {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px) !important;
  color: var(--text-2); line-height: 1.3; white-space: pre-wrap; word-break: break-word;
}
.brk-save {
  background: transparent; border: none; cursor: pointer;
  width: 24px; height: 24px; padding: 0; border-radius: 50%;
  color: var(--text-4); font-size: round(calc(18px * var(--font-scale, 1)), 1px);
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.brk-save:hover { background: var(--accent-lt); }
.brk-save.on { color: var(--amber); }
.brk-cfg-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border-dark);
}
.brk-cfg-row:last-child { border-bottom: none; }
.news-item {
  text-decoration: none; color: inherit;
}
.news-item-header {
  display: flex; gap: 12px; padding: 8px 0;
  cursor: pointer; transition: background .1s;
}
.news-item-compact .news-item-header { padding: 2px 0; gap: 5px; }
/* 홈 주요뉴스와 동일한 grid 레이아웃: 제목(스크롤) + 시간(우측) */
.news-item-compact .news-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
/* 제목 가로 스크롤 컨테이너 — 좌우 스크롤로 잘린 제목 확인 */
.news-item-compact .news-title-scroll {
  flex: 1 1 0; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  display: flex; align-items: center;
}
.news-item-compact .news-title-scroll::-webkit-scrollbar { display: none; }
.news-item-compact .news-title-scroll .news-title {
  display: inline-block;
  font-size: calc(var(--news-title-fs, 16px) * var(--font-scale, 1)) !important;
  font-weight: var(--news-title-weight, 500) !important; color: var(--news-title-color, var(--text-2)) !important; line-height: var(--news-line-height, 1.7) !important;
  margin: 0; white-space: nowrap;
  -webkit-line-clamp: unset; overflow: visible; text-overflow: clip;
}
.news-item-compact .news-title {
  font-size: calc(var(--news-title-fs, 16px) * var(--font-scale, 1)) !important;
  font-weight: var(--news-title-weight, 500) !important; color: var(--news-title-color, var(--text-2)) !important; line-height: var(--news-line-height, 1.7) !important;
  margin: 0; flex: 1 1 auto; min-width: 0;
  display: block; -webkit-line-clamp: unset;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.news-item-compact .news-time {
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  color: var(--text-3); flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.news-meta-compact { min-height: 0; }
.news-meta-compact:has(.news-meta-text:empty):has(.news-meta-tools:empty) { display: none; }
.news-meta-compact .news-meta-text { font-size: round(calc(13px * var(--font-scale, 1)), 1px); }
/* 뉴스/커뮤니티 페이지 — 닫힌/펼침 상태 모두 meta-compact 숨김 (본문 안에 home-news-meta-row 가 별도 존재) */
#news-list .news-item .news-meta-compact,
#comm-list .news-item .news-meta-compact { display: none !important; }
.news-item-header:hover { background: rgba(167,139,250,0.14); }
.news-via-badge {
  font-size: round(calc(11px * var(--font-scale, 1)), 1px);
  color: var(--accent-dk, #af6e0c);
  background: var(--accent-lt, rgba(245,176,20,0.14));
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.news-content {
  display: grid; grid-template-rows: 0fr;
  overflow: hidden; padding: 0; margin-top: 0;
  transition: grid-template-rows .25s ease, padding .25s ease, margin-top .25s ease;
}
.news-content > .nc-inner { min-height: 0; overflow: hidden; }
.news-content.open {
  grid-template-rows: 1fr;
  padding: 0 0 8px;
}
/* 뉴스 본문 상단 이미지 — 처음에는 화면 가로폭 절반(50%), 클릭 시 풀스크린 viewer */
.news-content-img {
  display: block; max-width: 50%; height: auto;
  margin: 0 auto 8px; border-radius: 8px; cursor: zoom-in;
}
@media (max-width: 480px) {
  .news-content-img { max-width: 60%; }
}
/* 커뮤니티 AD / BEST 페이지 — 사진을 가로 폭 그대로 사용 (축소 X) */
[id^="ad-content-"] .news-content-img,
[id^="best-content-"] .news-content-img { max-width: 100%; }

/* 실전투자 목표매도가 step 버튼 (◀▶) */
.mk-step-btn {
  width: 30px; padding: 0; background: var(--bg); border: 1px solid var(--border-dark);
  border-radius: var(--r-sm); color: var(--text-3); cursor: pointer;
  font-size: round(calc(11px * var(--font-scale, 1)), 1px); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.mk-step-btn:hover { background: var(--accent-lt); color: var(--accent-dk); border-color: var(--accent); }
.mk-step-btn:active { transform: scale(0.96); }
.news-img-viewer {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  cursor: zoom-out;
}
.news-img-viewer img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  user-select: none;
  -webkit-user-drag: none;
}
.news-img-viewer-close {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff; border: none;
  font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.news-img-viewer-close:hover { background: rgba(255,255,255,0.25); }
.news-content-body {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  line-height: 1.3;
  color: var(--text-1);
  background: rgba(130, 150, 175, 0.12);
  padding: 14px 14px;
  border-radius: 8px;
  touch-action: manipulation; /* 더블탭 zoom 차단 → JS 더블탭 닫기 신뢰성 확보 (핀치 zoom 은 유지) */
}
.news-content-body p { margin: 0 0 18px; }
.news-content-body p:last-child { margin-bottom: 0; }
/* 모바일 한정 — 본문 카드 상단에 제목 한 번 더 노출 (제목이 잘려서 안 보이는 경우 대비) */
.news-content-mobile-title { display: none; }
@media (max-width: 1023px) {
  .news-content-mobile-title {
    display: block;
    margin-bottom: 12px;
  }
  .news-content-mobile-title .ncmt-date {
    display: block;
    text-align: left;
    font-size: round(calc(12px * var(--font-scale, 1)), 1px);
    font-weight: 400;
    color: var(--text-4);
    margin-bottom: 4px;
    line-height: 1.2;
  }
  .news-content-mobile-title .ncmt-title-text {
    display: block;
    text-align: left;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.35;
  }
}
/* 모바일/태블릿 (데스크탑 미만) — 본문 내부 여백/들여쓰기 절반 */
@media (max-width: 1023px) {
  .news-content-body { padding: 8px 8px; }
  .news-content-body p { margin: 0 0 9px; }
  /* 홈 주요뉴스와 동일하게 — news-content.open 은 0 padding L/R, home-news-body 가 8px L/R 패딩 담당
     → 안쪽 news-content-body 가 -8px L/R margin 으로 home-news-body 외곽까지 확장 */
  #news-list .news-item .news-content.open,
  #comm-list .news-item .news-content.open {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .news-content .home-news-body { padding: 0 8px 8px; }
}
/* .news-content.open 의 상단 padding — 제목 행과 프레스 행 사이 간격 (홈과 동일하게 4px) */
.news-content.open { padding-top: 4px !important; }
.news-content-link { display: inline-block; margin-top: 8px; font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--accent-dk); text-decoration: none; }
/* 종목뉴스 본문 액션 영역 — 아래쪽 "네이버에서 보기" 스타일과 동일 (네이버 그린, 12px, 600) + 위/아래 4px */
.news-content-actions { padding: 4px 0; }
.news-content-actions .news-content-link {
  margin-top: 0;
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  color: #03C75A;
  font-weight: 600;
}
.news-content-link:hover { text-decoration: underline; }
button.news-content-link.news-copy-link {
  background: transparent; border: none; padding: 0; cursor: pointer; font-family: inherit;
}
button.news-content-link.news-copy-link.copied { color: var(--accent); }
.news-content-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: flex-end; }
.news-content-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 1.4em 0;   /* 버튼 위/아래로 공백 한 줄 정도 */
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  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: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600;
  text-decoration: none;
}
.news-openlink-btn:hover { background: var(--accent-dk); text-decoration: none; }
.news-retry-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; box-sizing: border-box;
  padding: 0 18px; border-radius: 18px;
  background: var(--accent); color: var(--on-accent);
  border: none; font-family: inherit;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600;
  cursor: pointer; transition: background .12s;
}
.news-retry-btn:hover { background: var(--accent-dk); }
.news-retry-btn--alt {
  background: var(--gray-100); color: var(--text-2); text-decoration: none;
}
.news-retry-btn--alt:hover { background: var(--accent-lt); color: var(--accent-dk); text-decoration: none; }
.news-video-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 12px 0; padding: 12px 14px; border-radius: 10px;
  background: var(--accent-lt); border: 1px solid var(--accent);
}
.news-video-notice__label {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  color: var(--accent-dk); font-weight: 600;
}
.news-video-notice__btn {
  display: inline-block; padding: 6px 14px; border-radius: 16px;
  background: var(--accent); color: var(--on-accent) !important;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); font-weight: 600;
  text-decoration: none;
}
.news-video-notice__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: round(calc(12px * var(--font-scale, 1)), 1px); font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .12s; line-height: 1;
}
.news-fs-btn:hover { background: var(--accent); color: var(--on-accent); }
/* A−/A+ 버튼 — 글씨 크기로 작/크게 표시 */
.news-fs-btn.fs-sm { font-size: round(calc(12px * var(--font-scale, 1)), 1px); }
.news-fs-btn.fs-lg { font-size: round(calc(14px * var(--font-scale, 1)), 1px); }
.news-save-btn {
  width: auto !important; padding: 0 10px; border-radius: var(--r-pill) !important;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px) !important;
  background: var(--gray-200); color: var(--text-2);
}
.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: round(calc(12px * var(--font-scale, 1)), 1px); color: var(--text-4);
  min-width: 0; padding: 0; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; line-height: 1; font-variant-numeric: tabular-nums;
}
/* 글씨크기 툴바 — A / 16px / A 가 빈공간 없이 붙도록 + ★ 다음만 4px gap */
.news-meta-tools:has(.news-fs-display) { gap: 0; }
.news-meta-tools:has(.news-fs-display) .news-save-btn { margin-right: 4px; }
.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(var(--news-title-fs, 16px) * var(--font-scale, 1)) !important; font-weight: var(--news-title-weight, 500) !important; color: var(--news-title-color, var(--text-1)) !important; line-height: var(--news-line-height, 1.7) !important; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-news-title {
  color: var(--news-title-color, var(--text-2)) !important;
  font-weight: var(--news-title-weight, 500) !important;
}
/* 뉴스 표시 설정 — 색상 팔레트 swatch */
.news-color-sw {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer; padding: 0;
  transition: transform .08s, box-shadow .12s;
}
.news-color-sw:hover { transform: scale(1.1); }
.news-color-sw.active { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--bg); }
.news-summary { font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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: round(calc(12px * var(--font-scale, 1)), 1px); 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 ────────────────────────────────────────────────────────────────── */
/* 테마 페이지 외곽 컨테이너 — 페이지 좌우 여백 변수(--page-pad-x) 사용 (데스크톱 16, 모바일 8) */
#theme-seg-wrap { padding: 12px var(--page-pad-x) 0; }
#theme-content  { padding: 12px var(--page-pad-x); }
.tm-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-dark); border-radius: 8px;
  background: var(--bg); overflow: hidden;
}
.tm-item {
  padding: 6px 12px; border-bottom: 1px solid var(--border-dark); cursor: pointer;
  transition: background .1s; line-height: 1.4;
  /* 패딩 좌우는 모바일에서 0 (외곽 #theme-content padding 8px 만 적용 → 글씨 시작 8px) */
}
.tm-list > .tm-item:last-child { border-bottom: 0; }
.tm-list > .tm-item:nth-child(even) { background: var(--zebra-odd); }
.tm-item:hover { background: var(--zebra-hover) !important; }
@media (max-width: 1023px) {
  .tm-item { padding: 6px 8px; }   /* 모바일: 테이블 내부 글씨 좌우 패딩 8px */
  /* tm-detail: tm-item 의 8px 패딩 안에서 추가 4px 들여쓰기 (내부 테이블 시작점) */
  .tm-detail { margin-left: -8px; margin-right: -8px; padding-left: 4px; padding-right: 4px; }
  /* 내부 테이블 셀들 — 좌우 패딩 4px (텍스트 시작) */
  .tm-news-item,
  .tm-stk,
  .tm-sec-hdr { padding-left: 4px; padding-right: 4px; }
}
.tm-row1 { display: flex; align-items: center; gap: 8px; }
.tm-name { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-rate { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 700; flex-shrink: 0; }
.tm-rate.up { color: var(--up); }
.tm-rate.dn { color: var(--dn); }
.tm-row2 { font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4); margin-top: 2px; }
.tm-date-badge { font-size: round(calc(12px * var(--font-scale, 1)), 1px); background: var(--bg-card); border: 1px solid var(--border-dark); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; color: var(--text-3); }
/* 확장 영역은 항상 흰 배경 — 부모 .tm-item zebra 가 보이지 않게 */
.tm-detail { background: var(--bg); margin: 6px -12px -6px; padding: 6px 12px; border-top: 1px solid var(--border-dark); }
.tm-detail:empty { display: none; }
.tm-stocks { margin-top: 8px; border: 1px solid var(--border-dark); border-radius: 8px; overflow: hidden; background: var(--bg); }
/* 모바일: 가로폭 부족하면 좌우 스크롤 (각 행의 컬럼이 잘리지 않도록) */
@media (max-width: 768px) {
  .tm-stocks { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tm-stk { flex-wrap: nowrap !important; min-width: max-content; }
  .tm-stk-reason { display: none; }
}
.tm-stk {
  display: flex; align-items: center; gap: 8px; padding: 3px 10px;
  border-bottom: 1px solid var(--border-dark); font-size: round(calc(14px * var(--font-scale, 1)), 1px); cursor: pointer; flex-wrap: wrap; line-height: 1.4;
}
.tm-stk:last-child { border-bottom: none; }
.tm-stk:hover { background: var(--bg-card); }
/* 종목발굴 팁 — 검색 페이지 좌측 버튼 + 모달 */
.screener-tips-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--accent);
  background: var(--accent-lt); color: var(--accent-dk);
  border-radius: var(--r-pill, 9999px);
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .12s, transform .08s;
}
.screener-tips-btn:hover { background: var(--accent); color: #fff; }
.screener-tips-btn:active { transform: translateY(1px); }
.screener-tips-btn svg { flex-shrink: 0; }

.tips-modal { padding: 0; max-height: 85vh; display: flex; flex-direction: column; }
.tips-modal-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tips-modal-title { font-size: round(calc(18px * var(--font-scale, 1)), 1px); font-weight: 700; color: var(--text); }
.tips-modal-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--gray-100); color: var(--text-3);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.tips-modal-close:hover { background: var(--gray-200, var(--gray-100)); color: var(--text); }
.tips-modal-body {
  padding: 14px 18px 24px;
  overflow-y: auto;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  line-height: 1.6; color: var(--text-2);
}
/* tips 페이지 — 모달이 아닌 페이지로 표시될 때 (page-pad-x 변수 사용) */
.tips-page .tips-modal-body { padding: 14px var(--page-pad-x) 24px; }
.tips-intro {
  background: var(--accent-lt);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  color: var(--text-2);
  margin-bottom: 16px;
}
.tips-sec {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.tips-sec:last-child { border-bottom: none; }
.tips-sec-hdr {
  font-size: round(calc(15px * var(--font-scale, 1)), 1px); font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.tips-sec-icon { font-size: round(calc(17px * var(--font-scale, 1)), 1px); }
.tips-list {
  list-style: none;
  margin: 0; padding: 0;
}
.tips-list li {
  position: relative;
  padding: 4px 0 4px 16px;
  color: var(--text-2);
}
.tips-list li::before {
  content: '·';
  position: absolute; left: 4px; top: 4px;
  color: var(--accent); font-weight: 700;
}
.tips-list li b { color: var(--text); font-weight: 700; }

/* 팁 메트릭 — 접을 수 있는 details */
.tips-sec-intro {
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  color: var(--text-3); line-height: 1.5;
  margin-bottom: 10px;
  padding: 0 4px;
}
.tip-metric {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--bg);
}
.tip-metric[open] {
  border-color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.tip-metric-title {
  cursor: pointer;
  padding: 10px 14px;
  font-size: round(calc(15px * var(--font-scale, 1)), 1px); font-weight: 700;
  color: var(--text);
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  user-select: none;
}
.tip-metric-title::-webkit-details-marker { display: none; }
.tip-metric-title::before {
  content: '▶';
  font-size: 10px; color: var(--text-4);
  transition: transform .15s;
}
.tip-metric[open] .tip-metric-title::before {
  transform: rotate(90deg);
  color: var(--accent);
}
.tip-metric-body {
  padding: 0 14px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.tip-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  line-height: 1.55;
  color: var(--text-2);
}
.tip-lbl {
  font-weight: 600; color: var(--text-3);
  white-space: nowrap;
}
.tip-val { color: var(--text-1); }
.tip-val b { color: var(--text); font-weight: 700; }
@media (max-width: 480px) {
  .tip-row { grid-template-columns: 1fr; gap: 2px; }
  .tip-lbl { font-size: round(calc(12px * var(--font-scale, 1)), 1px); }
}

.tm-stk-name { font-weight: 600; min-width: 80px; }
.tm-stk-name.tm-stk-name-ks { color: var(--mkt-ks); }
.tm-stk-name.tm-stk-name-kq { color: var(--mkt-kq); }
.wl-name.wl-name-ks { color: var(--mkt-ks); }
.wl-name.wl-name-kq { color: var(--mkt-kq); }
.q-table td.q-name.q-name-ks { color: var(--mkt-ks); }
.q-table td.q-name.q-name-kq { color: var(--mkt-kq); }
.tm-stk-price { color: var(--text-3); font-variant-numeric: tabular-nums; }
.tm-stk-vol { color: var(--text-4); font-size: round(calc(13px * var(--font-scale, 1)), 1px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.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: round(calc(14px * var(--font-scale, 1)), 1px); }
.tm-stk-chg-amt.up { color: var(--up); }
.tm-stk-chg-amt.dn { color: var(--dn); }
.tm-stk-reason { width: 100%; font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4); margin-top: 2px; }
.tm-news-section { margin: 8px 0; border: 1px solid var(--border-dark); border-radius: 8px; overflow: hidden; }
.tm-stocks-section { margin: 14px 0 12px; border: 1px solid var(--border-dark); 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: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 600; color: var(--text-4);
  padding: 6px 10px; background: var(--bg-card); border-bottom: 1px solid var(--border-dark);
}
.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: round(calc(14px * var(--font-scale, 1)), 1px);
  font-weight: 600; cursor: pointer; padding: 0; font-family: inherit;
}
.tm-sec-more:hover { text-decoration: underline; }
.tm-news-title { font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 500; color: var(--text-4); padding: 6px 10px; background: var(--bg-card); border-bottom: 1px solid var(--border-dark); }
.tm-news-item { display: block; padding: 6px 10px; border-bottom: 1px solid var(--border-dark); 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: round(calc(16px * var(--font-scale, 1)), 1px); color: var(--text-1); line-height: 1.4; font-weight: 500; }
.tm-news-meta { font-size: round(calc(12px * var(--font-scale, 1)), 1px); color: var(--text-4); margin-top: 2px; display: block; }
.tm-news-more {
  padding: 8px 10px; font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--accent-dk); cursor: pointer;
  text-align: center; border-top: 1px solid var(--border-dark); 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: round(calc(12px * var(--font-scale, 1)), 1px); 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); }
:root[data-theme="dark"] .tm-stk-news-btn {
  background: rgba(30,136,229,0.18); color: #82b1ff; border-color: rgba(130,177,255,0.35);
}
:root[data-theme="dark"] .tm-stk-news-btn:hover {
  background: rgba(30,136,229,0.32); border-color: #82b1ff;
}

/* 다크모드 — 뉴스 썸네일 밝기 다운 (눈부심 방지) */
:root[data-theme="dark"] .news-thumb {
  filter: brightness(0.55) contrast(0.95);
  transition: filter .15s;
}
:root[data-theme="dark"] .news-thumb:hover {
  filter: brightness(0.85) contrast(1);
}
.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-dark);
  padding: 14px 16px; background: var(--bg-card);
}
.sc-stat { flex: 1; text-align: center; }
.sc-stat strong { display: block; font-size: round(calc(18px * var(--font-scale, 1)), 1px); font-weight: 700; color: var(--text); }
.sc-stat span { font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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-dark);
}
.sc-collect-btn {
  padding: 9px 18px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-3); margin-bottom: 6px; }
.sc-progress-bar { height: 6px; background: var(--border-dark); 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-dark); border-radius: var(--r-md); padding: 16px;
}
.sc-filter-title { font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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; }
}
/* 1열 row 레이아웃 — 한 줄에 한 항목 (왼쪽 라벨, 오른쪽 입력) */
.sc-filter-list { display: flex; flex-direction: column; gap: 8px; }
.sc-filter-row {
  display: grid; grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 12px; align-items: center;
}
.sc-filter-row .sc-filter-label {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 600;
  color: var(--text-1); margin: 0; line-height: 1.3;
}
.sc-filter-row .sc-filter-input { min-width: 0; }
@media (max-width: 480px) {
  .sc-filter-row { grid-template-columns: minmax(120px, 160px) 1fr; gap: 8px; }
  .sc-filter-row .sc-filter-label { font-size: round(calc(13px * var(--font-scale, 1)), 1px); }
}
.sc-filter-divider {
  border: none; border-top: 1px solid var(--border-dark);
  margin: 12px 0;
}
.sc-adv-details {
  border-top: 1px dashed var(--border);
  padding-top: 10px;
  margin-bottom: 12px;
}
.sc-adv-summary {
  cursor: pointer;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 600;
  color: var(--accent-dk);
  padding: 6px 4px;
  user-select: none;
  list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.sc-adv-summary::-webkit-details-marker { display: none; }
.sc-adv-summary::before {
  content: '▶'; font-size: 10px; color: var(--text-4);
  transition: transform .15s;
}
.sc-adv-details[open] .sc-adv-summary::before { transform: rotate(90deg); color: var(--accent); }
.sc-hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gray-100); color: var(--text-4);
  font-size: 10px; cursor: help;
  margin-left: 4px;
}

/* 종목 DB 관리 — 백필 버튼 행에 마지막 수집 일자 인라인 표시 */
.db-action-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.db-action-row > .btn { flex: 1 1 auto; min-width: 0; }
.ts-badge {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
  font-size: round(calc(11px * var(--font-scale, 1)), 1px);
  font-weight: 500;
  color: var(--text-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.ts-badge.ts-none { color: var(--text-4); background: var(--gray-100); }
.ts-badge.ts-running { color: var(--accent-dk); background: var(--accent-lt); border-color: var(--accent); }

/* 예약 알림 */
.sched-notice {
  background: var(--accent-lt);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  color: var(--accent-dk);
  line-height: 1.5;
}
.sched-notice b { color: var(--text); }

/* 종목 상세 — 네이버 토론방 링크 (종목 뉴스 카드 타이틀 우측) */
.sd-naver-board-link {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px;
  margin-left: auto;
  border: 1px solid #03C75A;
  background: rgba(3,199,90,0.08);
  color: #03C75A;
  border-radius: 9999px;
  font-size: round(calc(12px * var(--font-scale, 1)), 1px); font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, transform .08s;
}
.sd-naver-board-link:hover { background: rgba(3,199,90,0.18); }
.sd-naver-board-link:active { transform: translateY(1px); }

/* 종목 상세 — 배당 추이 카드 */
.div-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px 14px 10px;
}
@media (max-width: 520px) {
  .div-summary { grid-template-columns: repeat(2, 1fr); }
}
.div-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}
.div-stat-lbl {
  font-size: round(calc(11px * var(--font-scale, 1)), 1px);
  color: var(--text-4);
  margin-bottom: 4px;
}
.div-stat-val {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
  font-weight: 700; color: var(--text);
}
.div-table-wrap {
  padding: 0 14px 12px;
  overflow-x: auto;
}
.div-table {
  width: 100%; border-collapse: collapse;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
}
.div-table th, .div-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.div-table th {
  font-weight: 600; color: var(--text-3);
  background: var(--bg-card);
}
.div-table td.num, .div-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.div-table tr:hover { background: var(--bg-card); }
.div-qcell { font-size: round(calc(12px * var(--font-scale, 1)), 1px); color: var(--text-3); }
.div-q {
  display: inline-block;
  margin-right: 4px; padding: 1px 5px;
  background: var(--accent-lt); color: var(--accent-dk);
  border-radius: 4px;
}
.sc-filter-item label { display: block; font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 600; color: var(--text-1); 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%; height: 32px; padding: 0 10px; line-height: 1;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  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: 32px; padding: 0 12px; box-sizing: border-box; line-height: 1;
  border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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: round(calc(18px * var(--font-scale, 1)), 1px); font-weight: 700; }
.sc-result-sub { font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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: 32px; padding: 0 10px; box-sizing: border-box; line-height: 1;
  border: 1px solid var(--border-dark); border-radius: 8px;
  background: var(--bg); color: var(--text-1);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-family: inherit;
  outline: none; transition: border-color .12s;
}
.sc-result-filter:focus { border-color: var(--accent); }
.sc-result-limit {
  flex-shrink: 0; height: 32px; padding: 0 8px; box-sizing: border-box; line-height: 1;
  border: 1px solid var(--border-dark); border-radius: 8px;
  background: var(--bg); color: var(--text-1);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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: round(calc(14px * var(--font-scale, 1)), 1px);
  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); }
/* 분석점수 배지 — sd-share-btn 모양 그대로(원형 30x30) + 점수 색상만 */
.sd-score-badge.sd-share-btn.sc-score-badge {
  width: 30px; height: 30px; padding: 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); font-weight: 700;
  border: 1px solid var(--border-dark);
}
.sd-score-badge.sd-share-btn:hover { filter: brightness(.97); transform: none; }
.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: round(calc(14px * var(--font-scale, 1)), 1px);
  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: round(calc(14px * var(--font-scale, 1)), 1px); }
.sc-chart-btn {
  background: transparent; border: 1px solid var(--border-dark); border-radius: 6px;
  padding: 4px 8px; font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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; margin: 0 16px;
  border: 1px solid var(--border-dark); border-radius: 8px;
  background: var(--bg); -webkit-overflow-scrolling: touch;
}
/* 종목명(첫번째) 컬럼 sticky — 가로 스크롤 시 항상 보임 */
.sc-table thead th:first-child,
.sc-table tbody td:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--bg);
  box-shadow: 1px 0 0 var(--border-dark);
}
.sc-table thead th:first-child { background: var(--bg-card); z-index: 3; }
.sc-table tbody .sc-row:nth-child(even) td:first-child { background: var(--zebra-odd); }
.sc-table tbody .sc-row:hover td:first-child { background: var(--zebra-hover); }
.sc-table {
  width: 100%; border-collapse: collapse;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); min-width: 600px;
}
.sc-table thead th {
  text-align: right; padding: 8px 10px;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4); font-weight: 600;
  border-bottom: 1px solid var(--border-dark);
  white-space: nowrap; line-height: 1.25;
  background: var(--bg-card);
}
.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(even) { background: var(--zebra-odd); }
.sc-table tbody .sc-row:hover { background: var(--zebra-hover); }
.sc-table tbody tr:last-child td { border-bottom: 0; }
.sc-table tbody td {
  padding: 2px 10px; border-bottom: 1px solid var(--border-dark);
  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: 500; font-size: round(calc(18px * var(--font-scale, 1)), 1px); white-space: nowrap; cursor: help; }
.sc-row-name.ks { color: var(--mkt-ks); }
.sc-row-name.kq { color: var(--mkt-kq); }
.sc-row-sector {
  display: inline;
  margin-left: 6px;
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  font-weight: 400;
  color: var(--text-4);
}
.sc-row-sector::before { content: '· '; opacity: 0.6; }
.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: 280px; padding-right: 6px; }
.sc-table tbody td.sc-col-stock_name .sc-row-name { white-space: normal; line-height: 1.3; }
.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 var(--page-pad-x); }   /* 모바일 8px / 데스크톱 16px */
@media (max-width: 1023px) {
  .mock-page { padding-left: 8px !important; padding-right: 8px !important; }
}
.mock-toolbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; }
.mock-title { font-size: round(calc(20px * var(--font-scale, 1)), 1px); 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-dark); border-radius: 10px; padding: 10px 12px; }
.mk-sum-label { font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4); margin-bottom: 4px; }
.mk-sum-val { font-size: round(calc(18px * var(--font-scale, 1)), 1px); 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;
  border: 1px solid var(--border-dark); border-radius: 8px;   /* 테이블 위/아래 라운드 + 외곽선 */
}
.mk-table { width: 100%; border-collapse: collapse; font-size: round(calc(14px * var(--font-scale, 1)), 1px); min-width: 900px; }
/* 모바일: 첫 컬럼 글씨가 테이블 내부 8px 들여쓰기 (= 화면 8px + 테이블 8px = 16px 위치) */
@media (max-width: 1023px) {
  .mk-table thead th:first-child,
  .mk-table tbody td:first-child { padding-left: 8px; }
  .mk-table thead th:last-child,
  .mk-table tbody td:last-child { padding-right: 8px; }
}
.mk-table thead th { text-align: right; padding: 8px 10px; background: var(--bg-card); border-bottom: 1px solid var(--border-dark); 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-dark); 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-table .num.mk-mint { color: var(--accent-dk); font-weight: 600; }
.mk-table .num.mk-pink { color: #db2777; font-weight: 600; }
.mk-fee { color: var(--text-4); font-size: round(calc(14px * var(--font-scale, 1)), 1px); }
.mk-btn-edit, .mk-btn-del, .mk-btn-sell { background: transparent; border: 1px solid var(--border-dark); border-radius: 6px; padding: 3px 6px; cursor: pointer; font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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: round(calc(16px * var(--font-scale, 1)), 1px); 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-btn-clone-circle {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--accent); background: var(--accent-lt); color: var(--accent-dk);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin-right: 4px; transition: background .12s;
}
.mk-btn-clone-circle:hover { background: var(--accent); color: var(--on-accent); }
.mk-btn-clone-circle svg { width: 12px; height: 12px; fill: currentColor; }
.mk-col-act { white-space: nowrap; }
.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: round(calc(14px * var(--font-scale, 1)), 1px); white-space: nowrap; }
.mock-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border-dark); padding-bottom: 0; }
.mock-tab { background: transparent; border: none; padding: 8px 14px; cursor: pointer; font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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-dark); border-radius: var(--r-pill);
  overflow: hidden; height: 32px; 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: round(calc(16px * var(--font-scale, 1)), 1px); 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-dark); border-radius: 6px; margin-bottom: 4px; cursor: pointer; font-size: round(calc(16px * var(--font-scale, 1)), 1px); }
.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-dark); border-radius: 16px; padding: 28px; width: 100%; max-width: 320px; text-align: center; }
.mock-lock-icon { font-size: round(calc(44px * var(--font-scale, 1)), 1px); margin-bottom: 8px; }
.mock-lock-title { font-size: round(calc(20px * var(--font-scale, 1)), 1px); font-weight: 700; margin-bottom: 4px; }
.mock-lock-sub { font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4); margin-bottom: 16px; }
.mock-pin-input { width: 100%; text-align: center; font-size: round(calc(22px * var(--font-scale, 1)), 1px); letter-spacing: 8px; padding: 10px; border: 1px solid var(--border-dark); 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: round(calc(14px * var(--font-scale, 1)), 1px); 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: round(calc(14px * var(--font-scale, 1)), 1px); 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; }

/* 외국인·기관 순매매 거래량 + 종목 뉴스 테이블 */
.sd-fr-wrap { overflow-x: auto; padding: 0 8px; }
/* 모바일: #sd-frgn 의 8px padding 만 적용 — 내부 .sd-fr-wrap 중복 padding 제거 */
@media (max-width: 1023px) {
  .sd-fr-wrap { padding: 0; }
}

/* 종목 분석 페이지 가로 스크롤바 — 오버플로우 있을 때만 반투명 상시 표시 (macOS/iOS 자동숨김 방지) */
.sd-fr-wrap,
.fin-table-wrap,
.q-table-wrap,
.sc-table-wrap,
.mock-table-wrap {
  scrollbar-width: auto;
  scrollbar-color: rgba(0,0,0,0.22) rgba(0,0,0,0.05);
}
.sd-fr-wrap::-webkit-scrollbar,
.fin-table-wrap::-webkit-scrollbar,
.q-table-wrap::-webkit-scrollbar,
.sc-table-wrap::-webkit-scrollbar,
.mock-table-wrap::-webkit-scrollbar {
  /* -webkit-appearance:none → macOS 오버레이 스크롤바 비활성화(상시 표시) */
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: transparent;
}
.sd-fr-wrap::-webkit-scrollbar-track,
.fin-table-wrap::-webkit-scrollbar-track,
.q-table-wrap::-webkit-scrollbar-track,
.sc-table-wrap::-webkit-scrollbar-track,
.mock-table-wrap::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
}
.sd-fr-wrap::-webkit-scrollbar-thumb,
.fin-table-wrap::-webkit-scrollbar-thumb,
.q-table-wrap::-webkit-scrollbar-thumb,
.sc-table-wrap::-webkit-scrollbar-thumb,
.mock-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.22);
  border-radius: 4px;
}
.sd-fr-wrap::-webkit-scrollbar-thumb:hover,
.fin-table-wrap::-webkit-scrollbar-thumb:hover,
.q-table-wrap::-webkit-scrollbar-thumb:hover,
.sc-table-wrap::-webkit-scrollbar-thumb:hover,
.mock-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.35);
}
.sd-chart-toolbar:hover::-webkit-scrollbar-thumb,
.sd-fs-periods:hover::-webkit-scrollbar-thumb,
.sd-fr-wrap:hover::-webkit-scrollbar-thumb,
.fin-table-wrap:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.28); }
.sd-fr-tbl {
  width: 100%; border-collapse: collapse;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  font-variant-numeric: tabular-nums;
}
.sd-fr-tbl thead th {
  padding: 5px 6px; background: var(--gray-50); color: var(--text-3);
  font-weight: 600; border-bottom: 1px solid var(--border-dark);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); white-space: nowrap;
}
.sd-fr-tbl tbody td {
  padding: 5px 6px; border-bottom: 1px solid var(--border-dark);
  color: var(--text-1); white-space: nowrap;
}
.sd-fr-tbl td.num { text-align: right; }
.sd-fr-tbl td.sd-fr-d { color: var(--text-3); text-align: center; }
/* 기관·외국인 순매매량 컬럼 강조 (외국인·기관 표 한정) */
#sd-frgn .sd-fr-tbl tbody td:nth-child(6),
#sd-frgn .sd-fr-tbl tbody td:nth-child(7) { font-weight: 700; }
/* 기관(6열)·외국인(7~9열) 가운데 정렬 + 기관과 외국인 사이 옅은 세로선 */
#sd-frgn .sd-fr-tbl td:nth-child(6),
#sd-frgn .sd-fr-tbl td:nth-child(7),
#sd-frgn .sd-fr-tbl td:nth-child(8),
#sd-frgn .sd-fr-tbl td:nth-child(9) { text-align: center; }
#sd-frgn .sd-fr-tbl thead th { text-align: center; }
#sd-frgn .sd-fr-tbl td:nth-child(6),
#sd-frgn .sd-fr-tbl thead tr:first-child th:nth-child(6),
#sd-frgn .sd-fr-tbl thead tr:nth-child(2) th:nth-child(1) { border-right: 1px solid var(--border-dark); }
.sd-fr-tbl td.up { color: var(--up); }
.sd-fr-tbl td.dn { color: var(--dn); }
/* 외국인·기관 헤더 우측 합계 표시 */
.sd-frgn-sum-wrap {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  font-weight: 500; font-variant-numeric: tabular-nums;
}
.sd-frgn-sum-item { display: inline-flex; gap: 6px; align-items: center; color: var(--text-3); }
.sd-frgn-sum-item b { font-weight: 600; color: var(--text-2); }
.sd-frgn-sum-item .up { color: var(--up); font-weight: 700; }
.sd-frgn-sum-item .dn { color: var(--dn); font-weight: 700; }
.sd-fr-tbl tbody tr:hover { background: var(--gray-50); }
.sd-more-wrap { display: flex; justify-content: center; padding: 12px 0; }
.sd-more-btn {
  padding: 8px 40px; border-radius: var(--r-pill, 20px);
  border: 1px solid var(--border-dark); background: none;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-2); font-weight: 500;
  cursor: pointer; font-family: inherit; transition: all .12s;
}
.sd-more-btn:hover { background: var(--gray-50); color: var(--text-1); }
.sd-more-btn:disabled { opacity: .5; cursor: default; }

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

/* 종목 뉴스 카드 — 파이낸스 / 일반 / 종목토론 탭 버튼 */
.sd-news-tabs { flex: 0 0 auto; align-self: center; }
.sd-news-tab {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--pill-h); padding: 0 var(--pill-px); line-height: 1;
  border: 1px solid var(--border-dark); background: transparent;
  color: var(--text-3);
  border-radius: var(--r-pill);
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 500; font-family: inherit;
  cursor: pointer; white-space: nowrap; box-sizing: border-box; flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
  vertical-align: middle;
}
.sd-news-tab:hover { background: var(--gray-50); color: var(--text-1); }
.sd-news-tab.active {
  background: rgba(167,139,250,0.12);
  border-color: var(--accent, #7c3aed);
  color: var(--accent-dk, #5b21b6);
}

/* 종목 뉴스 카드 컨테이너 — 좌우 여백/배경 통일 */
.sd-news-host { padding: 0; }

/* 일반 뉴스 — 제목 매칭 실패 시 fallback 안내 배너 */
.sd-general-fallback-notice {
  padding: 6px 14px;
  background: rgba(167,139,250,0.06);
  border-bottom: 1px solid var(--border-dark);
  color: var(--text-3);
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
}

/* 종목 뉴스 통합 테이블 — 파이낸스 / 일반 / 종목토론 공통 레이아웃 */
.sd-newstbl-wrap {
  width: 100%;
}
.sd-newstbl {
  padding: 0 16px;     /* 데스크톱 좌우 여백 */
}
.sd-newstbl-head,
.sd-newstbl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
}
.sd-newstbl-head {
  padding: 3px 7px;
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  font-weight: 600;
  color: var(--text-3);
  background: var(--gray-50);
  border-bottom: 1px solid var(--border-dark);
}
/* 헤더 — 제목/날짜 컬럼 가운데 정렬 (본문 행은 좌/우 정렬) */
.sd-newstbl-head .sd-ntc-t,
.sd-newstbl-head .sd-ntc-d { justify-content: center; text-align: center; }
.sd-newstbl-row {
  cursor: pointer;
  line-height: 1.5;
  transition: background .12s;
}
/* 지브라 스트라이프 + hover (홈 주요뉴스 동일 색상) */
.sd-newstbl-item { background: #ffffff; }
.sd-newstbl-item:nth-child(odd) { background: #f8f6ff; }
.sd-newstbl-item:hover { background: #ece6fd; }
[data-theme="dark"] .sd-newstbl-item { background: var(--bg); }
[data-theme="dark"] .sd-newstbl-item:nth-child(odd) { background: var(--gray-50); }
[data-theme="dark"] .sd-newstbl-item:hover { background: var(--gray-100); }
/* 제목만 좌우 스크롤 — 스크롤바 숨김 (홈 주요뉴스와 동일 패턴) */
.sd-ntc-t-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
  display: flex;
  align-items: center;
}
.sd-ntc-t-scroll::-webkit-scrollbar { display: none; }
.sd-ntc-t-scroll .news-title {
  display: inline-block;
  white-space: nowrap;
  font-weight: 500;
  margin: 0;            /* 글로벌 .news-title { margin-bottom: 4px } override — 가운데 정렬 깨짐 방지 */
  line-height: 1.5;     /* 행과 일치시켜 정확히 가운데 정렬 */
}
.sd-ntc-d {
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: 3px;
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  color: var(--text-4);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* press(작성) 행 — 펼침 시에만 노출, press 좌측 / 툴바 우측 끝 */
.sd-news-press-row { display: none; }
.sd-newstbl-item:has(.news-content.open) .sd-news-press-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 0 8px 8px;          /* 상0 / 우0 / 하8 / 좌8 — 홈 주요뉴스 meta-row 와 동일한 8px 간격 */
  line-height: 1;                /* 모든 항목 가로 평행 정렬 보장 */
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
  color: var(--text-3);
  background: var(--bg);
}
.sd-news-press-row .sd-news-press { display: inline-flex; align-items: center; line-height: 1; }
.sd-news-press-row .news-meta-tools-slot {
  display: inline-flex; gap: 4px; align-items: center; padding: 0; line-height: 1;
}
/* 펼친 본문 영역에서 zebra 민트색이 비치지 않도록 흰색 배경 명시 */
.sd-newstbl-item .news-content { background: var(--bg); }
/* 종목뉴스 본문 카드 — 좌우 패딩 8px */
.sd-newstbl-item .news-content-body { padding-left: 8px; padding-right: 8px; }
/* 저장 버튼 — 별 아이콘만 원형 배지로, A−/A+ 와 동일한 24×24 사이즈 */
.news-save-btn.news-save-icon {
  width: 24px !important; height: 24px !important; padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px) !important;
  line-height: 1;
}
/* 모바일 좌우 여백 8px (press row는 우측 padding 0으로 A+ 끝까지) */
@media (max-width: 1023px) {
  .sd-newstbl { padding: 0 8px; }
}
.sd-newstbl-empty {
  padding: 24px 8px; text-align: center;
  color: var(--text-3);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
}

/* 더보기 행 — 좌측 빈공간 / 중앙 더보기 / 우측 네이버 링크 */
.sd-newstbl-more {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 8px 10px 14px;
  gap: 8px;
}
.sd-newstbl-more .sd-more-btn { justify-self: center; }
.sd-newstbl-more .sd-more-naver {
  justify-self: end;
  /* 종목뉴스 푸터 — 배지/배경/테두리 제거, 글씨색만 유지 */
  background: none !important;
  border: none !important;
  padding: 0 !important;
  height: auto;
  border-radius: 0 !important;
}
.sd-newstbl-more .sd-more-naver:hover { background: none !important; text-decoration: underline; }
.sd-newstbl-item .news-content { padding: 0; }
.sd-news-ext-mark {
  display: inline-block;
  color: var(--text-4);
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  margin-right: 2px;
}

/* meta-tools 슬롯 — 펼침 시 우상단 툴바로 노출, 비펼침 시 숨김 */
.news-meta-tools-slot { display: none; }
.sd-newstbl-item:has(.news-content.open) .news-meta-tools-slot {
  display: flex; gap: 6px; padding: 6px 4px 0;
  justify-content: flex-end;
}

/* 종목토론 — 펼침 본문 / 댓글 */
.sd-disc-postmeta {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 4px 0 10px;
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  color: var(--text-3);
  border-bottom: 1px dashed var(--border-dark);
  margin-bottom: 8px;
}
.sd-disc-vote.up { color: var(--red); }
.sd-disc-vote.dn { color: var(--blue, #1d4ed8); }
.sd-disc-content {
  font-size: round(calc(15px * var(--font-scale, 1)), 1px);
  line-height: 1.65;
  color: var(--text-1);
  white-space: normal; word-break: break-word;
  padding: 4px 0;
}
.sd-disc-empty { color: var(--text-3); font-size: round(calc(13px * var(--font-scale, 1)), 1px); padding: 6px 0; }

.sd-cmt-section { margin-top: 14px; border-top: 1px solid var(--border-dark); padding-top: 10px; }
.sd-cmt-hdr {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 700;
  color: var(--text-1); margin-bottom: 8px;
}
.sd-cmt-hdr #sd-cmt-count- { color: var(--accent-dk, #5b21b6); }
.sd-cmt-list { display: flex; flex-direction: column; gap: 6px; }
.sd-cmt-item {
  padding: 8px 10px;
  background: var(--gray-50);
  border-radius: 6px;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px);
}
.sd-cmt-item.is-best { background: rgba(167,139,250,0.08); border-left: 3px solid var(--accent-dk, #5b21b6); }
.sd-cmt-item.is-reply { margin-left: 18px; background: var(--bg-card, #fff); border: 1px solid var(--border-dark); }
.sd-cmt-head {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 4px;
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
  color: var(--text-3);
}
.sd-cmt-user { color: var(--text-2); font-weight: 600; }
.sd-cmt-time { color: var(--text-4); }
.sd-cmt-best {
  background: var(--accent-dk, #5b21b6); color: #fff;
  padding: 1px 6px; border-radius: 3px;
  font-size: round(calc(10px * var(--font-scale, 1)), 1px); font-weight: 700;
}
.sd-cmt-body {
  color: var(--text-1);
  line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.sd-cmt-meta {
  display: flex; gap: 10px; align-items: center;
  margin-top: 4px;
  font-size: round(calc(11px * var(--font-scale, 1)), 1px);
  color: var(--text-3);
}
.sd-cmt-vote.up { color: var(--red); }
.sd-cmt-vote.dn { color: var(--blue, #1d4ed8); }
.sd-cmt-replies { color: var(--text-3); }
.sd-cmt-empty {
  padding: 14px 0; text-align: center;
  color: var(--text-3); font-size: round(calc(13px * var(--font-scale, 1)), 1px);
}

/* ── PDF 인쇄 (종목 분석 페이지) ───────────────────────────────────────── */
@media print {
  .desktop-sidebar, .bottom-nav, .top-bar, .side-menu, .sd-back-btn,
  .sd-share-btn, .sd-live-btn, .sd-fav-btn, .sd-fs-btn, #sd-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; }
  .sd-chart-wrap.fullscreen { position: static !important; z-index: auto !important; }
  .sd-card, .sd-header { box-shadow: none !important; break-inside: avoid; }
  @page { margin: 14mm 10mm; }
}

/* ── 종목 메모 에디터 ─────────────────────────────────────────────────── */
.mm-clear-btn {
  float: right; background: var(--red-lt); border: 1px solid var(--red-lt); color: var(--red);
  padding: 2px 10px; border-radius: 6px; font-size: round(calc(14px * var(--font-scale, 1)), 1px); cursor: pointer; font-family: inherit;
}
.mm-clear-btn:hover { background: color-mix(in srgb, var(--red) 18%, transparent); border-color: color-mix(in srgb, var(--red) 18%, transparent); }
.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-dark); 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: round(calc(16px * var(--font-scale, 1)), 1px);
  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-dark); margin: 0 3px; }
.mm-toolbar .mm-size { padding: 0 2px; font-size: round(calc(14px * var(--font-scale, 1)), 1px); 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-dark); 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: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4); padding: 0 4px; }
.mm-editor {
  min-height: 7.5em; padding: 10px 12px; border: 1px solid var(--border-dark); border-radius: 0 0 8px 8px;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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: round(calc(14px * var(--font-scale, 1)), 1px); 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-dark); padding-left: 10px; color: var(--text-3); margin: 6px 0; }

/* 이미지 선택 시 툴바 안에 표시되는 컨트롤 */
.mm-img-controls { align-items: center; gap: 4px; flex-shrink: 0; }
.mm-img-controls .mm-img-width {
  height: 26px; padding: 0 4px; font-size: round(calc(14px * var(--font-scale, 1)), 1px); min-width: 56px;
  border: 1px solid var(--border-dark); border-radius: 4px; background: var(--bg); color: var(--text-1);
}
.mm-img-color-btn { padding: 0 4px !important; }
.mm-img-color-dot {
  width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.25); display: inline-block;
}
.mm-img-del-btn { color: var(--red) !important; font-size: round(calc(16px * var(--font-scale, 1)), 1px); }
.mm-img-del-btn:hover { background: var(--red-lt) !important; }

/* ── 알림 페이지 (Alerts) ──────────────────────────────────────── */
.alerts-tabs {
  display: flex; gap: 0; margin: 12px 16px 0;
  border-bottom: 1px solid var(--border-dark);
}
.alerts-tab {
  flex: 1; padding: 10px 12px;
  background: transparent; border: none;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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-dark);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.alerts-permission-banner .apb-msg {
  flex: 1; font-size: round(calc(16px * var(--font-scale, 1)), 1px); line-height: 1.5;
}
.alert-target-card {
  margin: 10px var(--page-pad-x); padding: 12px;
  background: var(--bg); border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
}
@media (max-width: 1023px) {
  .alert-target-card { padding: 8px; }   /* 모바일: 내부 여백도 8px */
}
.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: round(calc(16px * var(--font-scale, 1)), 1px); 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: 32px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid var(--border-dark); color: var(--text-3);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
}
.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: round(calc(14px * var(--font-scale, 1)), 1px); 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-dark);
}
.alerts-search-wrap { flex: 1; min-width: 160px; }
.alerts-search-input {
  width: 100%; height: 32px; padding: 0 10px; box-sizing: border-box; line-height: 1;
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  border-radius: var(--r-pill);
}
.alerts-hist-list { padding: 0 var(--page-pad-x); }
.alert-hist-row {
  position: relative; margin: 8px 0; border-radius: var(--r-md); overflow: hidden;
}
.alert-hist-swipe-action {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding-right: 24px;
  background: var(--red); color: #fff;
  font-size: round(calc(15px * var(--font-scale, 1)), 1px); font-weight: 600;
  text-align: right; justify-content: flex-end;
}
.alert-hist-item {
  padding: 12px 14px; margin: 0; position: relative;
  border: 1px solid var(--border-dark); border-radius: var(--r-md);
  background: var(--bg); cursor: pointer;
  display: flex; align-items: stretch; gap: 10px;
  touch-action: pan-y;
  will-change: transform;
}
.alert-hist-item.unread { border-left: 3px solid var(--accent); background: var(--accent-lt); }
/* 다크모드 — unread 배경을 불투명 톤으로 (뒤의 빨간 swipe-action이 비치지 않도록) */
:root[data-theme="dark"] .alert-hist-item { background: var(--bg-card); }
:root[data-theme="dark"] .alert-hist-item.unread { background: #241e33; }
.alert-hist-item:hover { background: var(--gray-50); }
:root[data-theme="dark"] .alert-hist-item:hover { background: #2a2f38; }
:root[data-theme="dark"] .alert-hist-item.unread:hover { background: #2e2742; }
.alert-hist-body { flex: 1; min-width: 0; }
.alert-hist-title {
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); font-weight: 600; color: var(--text);
  margin-bottom: 2px;
}
.alert-hist-item.unread .alert-hist-title { font-weight: 700; }
.alert-hist-msg {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-2); line-height: 1.5;
}
.alert-hist-time {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-4); margin-top: 4px;
}
.alert-hist-del {
  background: transparent; border: none; color: var(--text-4);
  width: 36px; min-height: 100%; align-self: stretch;
  border-radius: var(--r-sm); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: round(calc(18px * var(--font-scale, 1)), 1px); 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: round(calc(16px * var(--font-scale, 1)), 1px);
}
.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: round(calc(12px * var(--font-scale, 1)), 1px); font-weight: 700;
  margin-right: 6px; text-transform: uppercase; letter-spacing: 0.3px;
}

/* ── Alerts list group header (관심그룹 / 개별종목) ─────────────────────── */
.alerts-group-header {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 700;
  color: var(--text-2); padding: 10px var(--page-pad-x) 2px; letter-spacing: 0.3px;
  text-transform: uppercase;
}
.alerts-group-header:not(:first-child) { margin-top: 6px; }

/* ── Alert rule editor (multi-type / scope) ─────────────────────────────── */
.are-section {
  border: 1px solid var(--border-dark); border-radius: var(--r-md);
  padding: 10px 12px; background: var(--bg);
}
.are-section-title {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 700;
  color: var(--text-2); margin-bottom: 8px;
}
.are-subsection-title {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 700;
  color: var(--text-2); margin-bottom: 6px;
}
.are-fav-addrow {
  display: flex; gap: 6px; align-items: center;
}
.are-fav-select {
  flex: 1; height: 32px; padding: 0 8px; box-sizing: border-box;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px);
}
.are-fav-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.are-fav-chips:empty { margin-top: 0; }
.are-fav-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: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 600;
  line-height: 1.3;
}
.are-fav-chip .asc-x {
  width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-3);
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.are-fav-chip .asc-x:hover { background: rgba(0,0,0,0.08); color: var(--red); }
.are-radio {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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: round(calc(16px * var(--font-scale, 1)), 1px);
  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-dark); 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-dark);
  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: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 600;
  line-height: 1.3;
}
.are-stock-chip .asc-code { color: var(--text-3); font-weight: 500; font-size: round(calc(14px * var(--font-scale, 1)), 1px); }
.are-stock-chip .asc-x {
  width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-3);
  font-size: round(calc(16px * var(--font-scale, 1)), 1px); 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: round(calc(16px * var(--font-scale, 1)), 1px);
  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: round(calc(16px * var(--font-scale, 1)), 1px);
  border-bottom: 1px solid var(--border-dark);
}
.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: round(calc(14px * var(--font-scale, 1)), 1px);
}
.are-ac-empty {
  padding: 10px; font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  color: var(--text-4); text-align: center;
}

/* ── 칩 통일: pill 템플릿 (.news-tab/.news-search-input 와 동일 변수 사용) ───── */
.chip,
.news-tab,
.kw-chip,
.are-type-chip {
  height: var(--pill-h) !important;
  min-height: var(--pill-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;   /* 좁은 공간에서 글씨 줄바꿈 방지 */
}
/* 비활성 칩 — 카테고리 버튼(.btn-ghost)과 동일: 흰 배경 + 회색 테두리 */
.chip,
.news-tab:not(.active):not(.on),
.kw-chip:not(.on),
.are-type-chip:not(.on) {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-dark) !important;
}
/* 활성 칩 — 민트 그린 */
.chip.active,
.news-tab.active,
.news-tab.on,
.kw-chip.on,
.are-type-chip.on {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-color: var(--accent) !important;
}
/* soft 변형 — 활성 칩이 solid mint 대신 연한 민트 배경 + mint 테두리/글자 (홈-주요뉴스 속보 버튼 스타일)
   사용법: 부모 컨테이너에 `.soft` 또는 `.news-tabs.soft` / `.news-search-row.soft` 클래스 추가 */
.news-tabs.soft .news-tab.active,
.news-tabs.soft .news-tab.on,
.news-search-row.soft .news-tab.active,
.news-search-row.soft .news-tab.on,
.soft > .news-tab.active,
.soft > .news-tab.on {
  background: rgba(167,139,250,0.12) !important;
  color: var(--accent-dk, #5b21b6) !important;
  border-color: var(--accent, #7c3aed) !important;
}
/* hover */
.chip:hover,
.news-tab:hover:not(.active):not(.on),
.kw-chip:hover:not(.on),
.are-type-chip:hover:not(.on) {
  filter: brightness(0.96);
}
/* 시계 칩(news-tab.clock-tab) — 연한 민트 배경 + 카테고리 버튼과 동일 테두리 (pill 템플릿 따름) */
.news-tab.clock-tab:not(.active):not(.on),
.news-tab.clock-tab:not(.active):not(.on):hover,
.news-tab.clock-tab.active,
.news-tab.clock-tab.on {
  height: var(--pill-h) !important; box-sizing: border-box !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: var(--accent-lt) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-dark) !important;
}
/* NXT 탭 — 상시 오렌지 배지 (chip / soft 룰보다 우선 — .news-tabs 접두로 specificity 동등 + 소스 순서로 이김) */
.news-tabs .news-tab.nxt-tab,
.news-tabs .news-tab.nxt-tab.on,
.news-tabs .news-tab.nxt-tab.active,
.news-tabs .news-tab.nxt-tab:hover {
  background: #ff6b35 !important;
  color: #fff !important;
  border-color: #ff6b35 !important;
}

/* ────────────────────────────────────────────────────────────────
   모바일 (<=600px) 페이지 좌우 여백 통일: 16px → 8px
   포함: 모든 페이지의 외곽 컨테이너 + 뉴스/커뮤니티/토론/댓글 본문
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* 페이지 컨테이너 좌우 padding/margin 일괄 축소 */
  .search-wrap,
  .news-tabs,
  .pat-top,
  .pat-sectiontabs,
  .pat-typechips,
  .pat-section-body,
  .pat-search-wrap,
  .pat-search-hits,
  .favnews-top,
  .favnews-filters,
  .analytics-picker-wrap,
  .sd-header,
  .osc-page,
  .fxc-body,
  .mr-content,
  .cat-edit-row,
  .kwm-gbar,
  .kwm-list,
  #flow-body,
  #breaking-list,
  #favnews-body {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* #news-list, #comm-list 는 자체 margin: var(--page-pad-x) 으로 외곽 여백 처리 — 내부 padding 없음 */
  /* margin 기반 컨테이너 (.q-table-wrap, .screen-mo-wrap, .mock-table-wrap 는 자체 padding 사용 — 별도 처리) */
  .mo-section,
  .sd-section-memo,
  .sc-table-wrap {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  /* 인라인 스타일로 padding:0 16px 한 외곽 컨테이너들 */
  [style*="padding:0 16px"],
  [style*="padding: 0 16px"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* 뉴스/커뮤니티 헤더만 8px 좌우 — .news-content.open 은 0 으로 두고 안쪽 home-news-body 가 패딩 담당 */
  #news-list .news-item .news-item-header,
  #comm-list .news-item .news-item-header,
  #favnews-body .news-item .news-item-header {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #news-list .news-item .news-content.open,
  #comm-list .news-item .news-content.open,
  #favnews-body .news-item .news-content.open {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 본문 내부 카드 — 패딩/문단 간격 축소 (홈 주요뉴스와 동일) */
  .news-content-body { padding: 8px 7px !important; }
  .news-content-body p { margin: 0 0 9px !important; }
  .news-content-actions { gap: 8px !important; }

  /* 종목토론 본문 + 댓글 영역 */
  .sd-disc-body,
  .sd-disc-content { padding-left: 4px !important; padding-right: 4px !important; }
  .sd-cmt-section { padding-left: 4px !important; padding-right: 4px !important; }
  .sd-cmt-item   { padding: 6px 7px !important; }
  .sd-cmt-item.is-reply { margin-left: 10px !important; }

  /* favnews(관심종목 뉴스) 토론 패널 */
  .discussion-body,
  .discussion-content { padding-left: 4px !important; padding-right: 4px !important; }
  .discussion-item { padding-left: 8px !important; padding-right: 8px !important; }
}

/* 종목 정보가 비어 있을 때 이름 옆에 다는 안내 배지 — 눌러서 설정(종목 DB 관리)으로 이동 */
.data-gap-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--bg-muted, #f1f5f9);
  color: var(--text-muted, #94a3b8);
  border: 1px solid var(--border, #e2e8f0);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
}
.data-gap-badge:hover { background: #fef3c7; color: #b45309; border-color: #fcd34d; }

/* ── 사이드바: 폭 조절 손잡이 + 관심종목 하위목록 ───────────────────────────── */
/* 오른쪽 가장자리 6px. 평소엔 안 보이다가 올리면 가늘게 표시된다. */
.dsb-resizer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 6px; cursor: col-resize; z-index: 30;
  background: transparent; transition: background .12s;
}
.dsb-resizer:hover, .dsb-resizer.dragging { background: var(--brand, #7c3aed); opacity: .5; }
body.dsb-resizing { cursor: col-resize; user-select: none; }
body.dsb-resizing * { cursor: col-resize !important; }

/* 메뉴 한 줄 안에 '관심종목' 버튼 + 펼치기 화살표 */
.dsb-item-row { display: flex; align-items: center; gap: 2px; }
.dsb-item-row .dsb-item { flex: 1; min-width: 0; }
.dsb-sub-toggle {
  flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: var(--r-sm); cursor: pointer; color: var(--text-3, #9aa);
  transition: background .12s, transform .15s;
}
.dsb-sub-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.dsb-sub-toggle:hover { background: var(--bg-2, #f3f4f6); color: var(--text-1); }
.dsb-sub-toggle.open { transform: rotate(180deg); }

/* 하위 목록 — 기본 20개쯤 보이고 나머지는 스크롤 */
.dsb-sub {
  margin: 2px 0 6px 10px; padding-left: 8px;
  border-left: 1px solid var(--border, #e5e7eb);
  max-height: calc(20 * 26px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.dsb-sub-item {
  display: flex; align-items: center; gap: 6px;
  width: 100%; height: 26px; padding: 0 6px;
  border: none; background: none; border-radius: var(--r-sm);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  color: var(--text-2); cursor: pointer; text-align: left; font-family: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dsb-sub-item:hover { background: var(--bg-2, #f3f4f6); color: var(--text-1); }
.dsb-sub-item.active { background: var(--brand-50, #f3f0fe); color: var(--brand-700, #5b21b6); font-weight: 700; }
.dsb-sub-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dsb-sub-item .rt { flex-shrink: 0; font-size: 11px; font-variant-numeric: tabular-nums; }
.dsb-sub-item .rt.up { color: var(--up, #e11d48); }
.dsb-sub-item .rt.dn { color: var(--down, #2563eb); }
/* 카테고리 구분 — 아주 가는 선만 (이름은 표시하지 않는다) */
.dsb-sub-sep { height: 1px; margin: 5px 6px; background: var(--border, #e5e7eb); opacity: .9; }
.dsb-sub-empty { padding: 6px; font-size: 12px; color: var(--text-3, #9aa); }

/* 사이드바 메뉴 간격 축소 — 세로 여백을 기존의 절반 수준으로
   (항목 상하 패딩 10px→5px, 항목 사이 간격 2px→1px, 구분선 여백 8px→4px) */
.dsb-nav { padding: 8px 12px; gap: 1px; }
.dsb-item { padding: 5px 12px; }
.side-nav-divider { margin: 4px 4px; }

/* 종목 상세 — 거래량은 차트와 같은 KRX 기준. 네이버 화면의 KRX+NXT 통합 수치는 괄호로 작게 병기 */
.sd-vol-all { font-size: 0.82em; font-weight: 500; color: var(--text-3, #9aa); margin-left: 2px; }

/* 차트 캔들 정보줄 — 거래량 옆 거래소별 내역(KRX + NXT) */
.sd-ohlcv-split { font-size: 0.85em; font-weight: 500; color: var(--text-3, #9aa); white-space: nowrap; }

/* 사이드바 간격 — 메인 메뉴 항목 패딩 4px, 관심종목 하위 종목 줄높이 20px (사용자 지정값) */
.dsb-item { padding: 4px 12px; }
.dsb-nav { padding: 6px 12px; }
.dsb-sub { margin: 1px 0 5px 10px; max-height: calc(20 * 20px); }   /* 20개까지 보이고 그 아래는 스크롤 */
.dsb-sub-item { height: 20px; }

/* ── 글씨 크기 버튼: '가' 대신 px 숫자 표시 (기기별 단계) ─────────────────── */
/* 숫자는 단계와 무관하게 같은 크기로 — 버튼 폭이 흔들리지 않도록 */
.fs-seg-btn > span.fs-num {
  font-size: 13px; font-weight: 700; letter-spacing: -0.2px;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.fs-seg-btn > span.fs-num > em { font-size: 9px; font-style: normal; font-weight: 600; opacity: .65; }
.side-fs-btn span.fs-num { font-size: 12px; font-weight: 700; letter-spacing: -0.3px; }

/* ── 거래소 뷰 토글(통합 / KRX / NXT) ───────────────────────────────────── */
/*  한 자리에서 라벨만 바뀌는 순환 버튼 — 폭이 흔들리지 않게 최소폭 고정    */
.news-tabs .news-tab.ex-view-tab {
  min-width: 52px; font-weight: 700;
  background: var(--accent-lt) !important;
  color: var(--accent-dk) !important;
  border-color: var(--accent) !important;
}
.news-tabs .news-tab.ex-view-tab.ex-krx {
  background: #1f6feb !important; color: #fff !important; border-color: #1f6feb !important;
}

/* 관심종목 KRX 뷰 — 현재가가 'KRX 기준' 임을 색으로 구분 (NXT = 주황, KRX = 파랑) */
.wl-price.is-krx-price { color: #1f6feb; font-weight: 600; }
[data-theme="dark"] .wl-price.is-krx-price { color: #6ea8fe; }

/* ── 차트 전체화면 헤더 — 종목명 줄 + 그 아래 기간 버튼 줄 ───────────────── */
.sd-chart-wrap.fullscreen .sd-fs-header {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
.sd-fs-titlerow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sd-chart-wrap.fullscreen #sd-fs-title {
  flex: 1; min-width: 0; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd-fs-nav {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-dark);
  background: none; color: var(--text-1); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.sd-fs-nav:hover { background: var(--bg-card); }
.sd-chart-wrap.fullscreen .sd-fs-periods { flex: 0 0 auto; justify-content: center; }

/* 종목상세 지표 셀 — 값 안의 공백('1.50% (2025)', '1,306조 6,433억')에서 줄바꿈되던 것 방지.
   자리가 모자랄 때만 값 쪽을 말줄임 처리한다(라벨은 그대로 유지). */
.sd-m { gap: 8px; }
.sd-ml { white-space: nowrap; flex: 0 0 auto; }
.sd-mv { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── 뉴스 목록 가로 스크롤 — 목록 전체가 '스크롤러 하나' ──────────────────────
   예전 구조: 행마다 자체 스크롤러를 두고 JS 로 서로의 scrollLeft 를 맞췄다.
   손가락이 미는 행만 컴포지터에서 움직이고 나머지는 메인 스레드에서 한 프레임씩
   늦게 따라와 "뚝뚝 끊기고 행들이 어긋나게 따라오는" 느낌이 났다.
   지금은 목록 자체가 스크롤러라 스크롤 중 JS 가 전혀 돌지 않고 모든 행이 한 덩어리로 움직인다.
   · 각 뉴스 항목은 화면 폭 유지 → 펼친 본문 레이아웃 그대로
   · 제목 행만 내용만큼 늘어나 가로 스크롤을 만든다
   · 날짜 칸은 오른쪽에, 펼친 본문은 왼쪽에 sticky 로 고정                      */
/*  JS 가 .nt-xscroll 을 붙이지 못한 경로(관심종목 뉴스 등)에서도 동작하도록
    실제 목록 컨테이너 선택자에도 같은 규칙을 직접 건다. */
.sd-newstbl-body,
#news-list,
#market-news-body .hero-news-list,
#favnews-body .news-list,
.nt-xscroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.sd-newstbl-body::-webkit-scrollbar,
#news-list::-webkit-scrollbar,
#market-news-body .hero-news-list::-webkit-scrollbar,
#favnews-body .news-list::-webkit-scrollbar,
.nt-xscroll::-webkit-scrollbar { display: none; }
.sd-newstbl-body > *,
#news-list > *,
#market-news-body .hero-news-list > *,
#favnews-body .news-list > *,
.nt-xscroll > * { width: 100%; }
.home-news-row,
.sd-newstbl-row {
  width: max-content;
  min-width: 100%;
  background: inherit;
}
/* 제목 칸은 더 이상 자체 스크롤러가 아니다 */
.home-news-title-scroll,
.sd-ntc-t-scroll { overflow: visible; }
/* 날짜·시간 = 오른쪽 고정 컬럼 (스크롤 끝에서는 제 자리와 겹쳐 가려지는 글자 없음) */
.home-news-row .hero-news-time,
.sd-ntc-d {
  position: sticky;
  right: 0;
  background: inherit;
  padding-left: 6px;
}
/* 펼친 본문·언론사 행은 화면 왼쪽에 고정 — 가로로 밀어도 따라 움직이지 않는다 */
.sd-newstbl-body .news-content,
.sd-newstbl-body .sd-news-press-row,
#news-list .news-content,
#market-news-body .home-news-content,
#favnews-body .news-content { position: sticky; left: 0; }
/* 본문이 펼쳐져 있는 동안은 가로 스크롤을 잠근다 —
   읽는 중에 목록이 옆으로 밀리지 않고, 글 넘김 스와이프 제스처와도 부딪히지 않는다 */
.sd-newstbl-body:has(.news-content.open),
#news-list:has(.news-content.open),
#market-news-body .hero-news-list:has(.home-news-content.open),
#favnews-body .news-list:has(.news-content.open),
.nt-xscroll:has(.news-content.open),
.nt-xscroll:has(.home-news-content.open) { overflow-x: hidden; }

/* ── 차트 패턴 검색 / 패턴 알림 설정 ───────────────────────────────────────── */
.pat-search-wrap { padding: 0 var(--page-pad-x) 16px; }
.pat-sec { margin-top: 12px; }
.pat-sec-title {
  font-size: round(calc(14px * var(--font-scale, 1)), 1px); font-weight: 700;
  color: var(--text-2); margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
}
.pat-sel-count { font-size: round(calc(12px * var(--font-scale, 1)), 1px); font-weight: 500; color: var(--accent-dk); }
.pat-pick {
  border: 1px solid var(--border-dark); border-radius: var(--r-md);
  padding: 8px 10px; max-height: 260px; overflow-y: auto; background: var(--bg);
}
.pat-pick-sm { max-height: 190px; }
.pat-pick-group + .pat-pick-group { margin-top: 10px; }
.pat-pick-gname {
  font-size: round(calc(12px * var(--font-scale, 1)), 1px); color: var(--text-4);
  font-weight: 600; margin-bottom: 4px;
}
.pat-pick-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pat-chip {
  border: 1px solid var(--border-dark); background: var(--bg); color: var(--text-2);
  border-radius: 999px; padding: 3px 9px; cursor: pointer; font-family: inherit;
  font-size: round(calc(12px * var(--font-scale, 1)), 1px); line-height: 1.5;
  transition: background .12s, border-color .12s, color .12s;
}
.pat-chip:hover { border-color: var(--accent); }
.pat-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); font-weight: 600; }
.pat-chip-bull.active { background: var(--up); border-color: var(--up); }
.pat-chip-bear.active { background: var(--dn); border-color: var(--dn); }
.pat-f-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.pat-f-label {
  flex: 0 0 118px; font-size: round(calc(14px * var(--font-scale, 1)), 1px); color: var(--text-2);
}
.pat-f-input { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.pat-f-unit { font-size: round(calc(13px * var(--font-scale, 1)), 1px); color: var(--text-3); white-space: nowrap; }
.pat-meta { font-size: round(calc(12px * var(--font-scale, 1)), 1px); color: var(--text-4); white-space: nowrap; }
/* 검색 결과 블록 — 새 검색이 위에 쌓이고 이전 결과는 아래에 남는다 */
.pat-res-block { border-top: 1px solid var(--border-md); }
.pat-res-block:first-child { border-top: 0; }
.pat-res-head {
  margin: 14px 0 6px; font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  font-weight: 700; color: var(--text-2);
  display: flex; align-items: center; gap: 8px;
}
.pat-res-n { flex: 0 0 auto; }
.pat-res-cond {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: var(--accent-dk);
  font-size: round(calc(12px * var(--font-scale, 1)), 1px);
}
.pat-res-at {
  flex: 0 0 auto; color: var(--text-4); font-weight: 600;
  font-size: round(calc(11px * var(--font-scale, 1)), 1px); font-variant-numeric: tabular-nums;
}
.pat-res-x {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--border-dark); background: var(--bg); color: var(--text-4);
  cursor: pointer; font-size: 11px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.pat-res-x:hover { background: var(--gray-100); color: var(--text-2); }
.pat-res-table .pat-res-pat { color: var(--accent-dk); font-weight: 600; white-space: nowrap; }
.pat-chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); color: var(--text-2); }
.pat-chk input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }

/* ── 종목상세 지표 테이블 줄무늬 / 모바일 1열 ─────────────────────────────────
   기존엔 체크보드(좌/우 셀이 서로 반대 색)라 시선이 지그재그로 끊겼다.
   → 행 단위 줄무늬로 변경: 2열에서 한 행 = 2칸이므로 짝수 행 = 3·4, 7·8, 11·12 …   */
.sd-metrics > .sd-m:nth-child(4n+2) { background: var(--bg); }
.sd-metrics > .sd-m:nth-child(4n+3),
.sd-metrics > .sd-m:nth-child(4n+4) { background: var(--zebra-odd); }
.sd-metrics > .sd-m:nth-child(4n+3):hover,
.sd-metrics > .sd-m:nth-child(4n+4):hover { background: var(--zebra-odd); }

/* 모바일 — 2열이 좁아 라벨/값이 붙어 보이므로 한 줄에 한 항목씩 */
@media (max-width: 600px) {
  .sd-metrics { grid-template-columns: 1fr; }
  .sd-metrics > .sd-m:nth-child(odd)  { background: var(--bg); }
  .sd-metrics > .sd-m:nth-child(even) { background: var(--zebra-odd); }
  .sd-metrics > .sd-m { padding: 6px 12px; }
}

/* ── 관심종목 행 높이 약 20% 축소 ─────────────────────────────────────────────
   기존: 상하 padding 5px + line-height 1.4 → 약 32px
   변경: 상하 padding 2px + line-height 1.35 → 약 25px (-21%)
   종목명 셀은 별도 inner 가 패딩을 가지므로 같이 줄여야 높이가 어긋나지 않는다. */
.wl-row { line-height: 1.35; }
.wl-row > * { padding-top: 2px; padding-bottom: 2px; }
.wl-name-inner { padding-top: 2px; padding-bottom: 2px; }
@media (max-width: 600px) {
  .wl-row > * { padding: 2px 6px; }
}

/* ── 사이드바 관심종목 구분선 — 앞쪽에 카테고리명(아주 작게) + 이어지는 가로선 ──
   색상은 관심종목 페이지의 카테고리 헤더 색(--cat-color)을 그대로 쓴다. */
.dsb-sub-sep {
  display: flex; align-items: center; gap: 5px;
  height: auto; background: none; opacity: 1;
  margin: 6px 6px 2px;
}
.dsb-sub-sep:first-child { margin-top: 2px; }
.dsb-sep-name {
  flex: 0 0 auto;
  font-size: 8px; line-height: 1; font-weight: 700; letter-spacing: .2px;
  color: var(--cat-color, var(--text-4, #9aa));
  white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis;
}
.dsb-sep-line {
  /* 선은 기존과 동일하게 회색 1px — 색상은 라벨에만 반영한다 */
  flex: 1 1 auto; height: 1px;
  background: var(--border, #e5e7eb);
  opacity: .9;
}

/* ── 모바일 상단바 정리 ───────────────────────────────────────────────────────
   · 화면방향(모바일뷰) 토글 — 모바일에서는 의미 없음
   · 다크모드 토글 — 모바일은 시스템 디스플레이 설정이 대신한다
   그 자리를 검색 버튼이 차지하고, 하단바에서는 검색을 뺀다(중복 제거). */
@media (max-width: 768px) {
  .top-bar .orient-toggle,
  .top-bar .theme-toggle { display: none !important; }
  #btn-search-icon { display: inline-flex !important; margin-left: auto; }
  .bottom-nav .nav-item[data-page="screener"] { display: none; }
}
@media (min-width: 769px) {
  /* 데스크탑은 좌측 사이드바에 '검색' 메뉴가 있으므로 상단바 아이콘 불필요 */
  #btn-search-icon { display: none !important; }
}

/* ── 모바일 미리보기 패널 (데스크탑 전용) ────────────────────────────────── */
@media (min-width: 769px) {
  /* 데스크탑에서는 이 버튼이 '모바일 미리보기' 역할 — 모바일에서만 숨긴다 */
  /* 우측 정렬 담당은 '하나만' 이어야 한다 — auto 마진이 둘이면 남은 공간을 반씩
     나눠 가져 버튼이 한가운데로 밀린다. 데스크탑에선 이 버튼이 맨 왼쪽이므로
     여기서 공간을 다 밀어내고, 뒤따르는 해·설정 아이콘이 바로 옆에 붙는다. */
  .top-bar .orient-toggle { display: inline-flex !important; margin-left: auto !important; margin-right: 6px; }
  .top-bar .theme-toggle { margin-left: 0; }
}
#mobile-preview {
  position: fixed; right: 16px; bottom: 16px; z-index: 9998;
  /* 드래그로 옮기면 left/top 이 설정되고 right/bottom 은 auto 가 된다 */
  width: var(--mpv-w, 390px);
  background: var(--bg); border: 1px solid var(--border-dark);
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.28);
  overflow: hidden; display: flex; flex-direction: column;
}
.mpv-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; background: var(--gray-50); border-bottom: 1px solid var(--border-dark);
  cursor: grab; user-select: none; touch-action: none;
}
.mpv-bar:active { cursor: grabbing; }
.mpv-bar .mpv-size, .mpv-bar .mpv-btn { cursor: pointer; }
#mobile-preview.is-dragging { box-shadow: 0 18px 54px rgba(0,0,0,.36); }
.mpv-grip { color: var(--text-4); font-size: 13px; line-height: 1; letter-spacing: -1px; }
.mpv-title { flex: 1; font-size: 12px; font-weight: 600; color: var(--text-2); }
.mpv-size {
  font-family: inherit; font-size: 11px; padding: 2px 4px;
  border: 1px solid var(--border-dark); border-radius: 6px;
  background: var(--bg); color: var(--text-2); cursor: pointer;
}
.mpv-btn {
  width: 22px; height: 22px; border: 1px solid var(--border-dark); border-radius: 6px;
  background: var(--bg); color: var(--text-2); cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.mpv-btn:hover { background: var(--gray-100); }
#mpv-frame {
  width: var(--mpv-w, 390px); height: var(--mpv-h, 844px);
  max-height: calc(100dvh - 110px);
  border: 0; display: block; background: var(--bg);
}

/* ── 차트 거래소 토글 (통합 / KRX / NXT) ─────────────────────────────────── */
.sd-ct-ex { display: inline-flex; gap: 3px; margin-left: auto; margin-right: 6px; }
.sd-ct-exbtn {
  border: 1px solid var(--border-dark); background: var(--bg); color: var(--text-3);
  border-radius: 999px; padding: 2px 9px; cursor: pointer; font-family: inherit;
  font-size: round(calc(12px * var(--font-scale, 1)), 1px); line-height: 1.5;
  transition: background .12s, border-color .12s, color .12s;
}
.sd-ct-exbtn:hover { border-color: var(--accent); }
.sd-ct-exbtn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); font-weight: 600; }
.sd-ct-exbtn[data-ex="nxt"].active { background: #d97706; border-color: #d97706; }
.sd-ct-exbtn[data-ex="krx"].active { background: #1f6feb; border-color: #1f6feb; }
/* 지표 테이블의 NXT 가격 — 사이드/관심종목과 같은 주황 계열로 구분 */
.sd-mv.is-nxt-price { color: #d97706; }
[data-theme="dark"] .sd-mv.is-nxt-price { color: #fbbf24; }

/* ── 뉴스 목록: 제브라 이중 적용 / 날짜칸 투명 문제 ─────────────────────────
   원인: --zebra-odd 가 반투명(rgba …,0.10)이라 '항목'에 한 번, 그 위 '행'에
   background: inherit 로 또 한 번 칠해져 색이 진해졌다. 같은 이유로 sticky 날짜칸도
   반투명이라 그 아래를 지나가는 제목 글자가 비쳐 겹쳐 보였다.
   해결: 항목 배경을 불투명 색으로 고정한다. 그러면 inherit 로 몇 번을 칠해도 같은 색이고,
   날짜칸이 완전히 불투명해져 제목이 그 아래로 깔끔하게 지나간다. */
#news-list .news-item:nth-of-type(odd),
#comm-list .news-item:nth-of-type(odd),
.hero-news-list .hero-news-item:nth-child(odd),
#market-news-body .hero-news-item:nth-child(odd),
#favnews-body .news-item:nth-of-type(odd) {
  background: linear-gradient(var(--zebra-odd), var(--zebra-odd)), var(--bg);
}
#news-list .news-item:hover,
#comm-list .news-item:hover,
.hero-news-item:hover,
#market-news-body .hero-news-item:hover,
#market-news-body .hero-news-item:nth-child(odd):hover,
#favnews-body .news-item:hover {
  background: linear-gradient(var(--row-hover), var(--row-hover)), var(--bg);
}
/* 종목상세 뉴스 테이블 — 다크모드 틴트도 불투명 레이어로 통일 */
[data-theme="dark"] .sd-newstbl-item:nth-child(odd) {
  background: linear-gradient(var(--gray-50), var(--gray-50)), var(--bg);
}
[data-theme="dark"] .sd-newstbl-item:hover {
  background: linear-gradient(var(--gray-100), var(--gray-100)), var(--bg);
}

/* ── 묶음 알림(차트 패턴)의 종목 칩 — 눌러서 종목상세로 ───────────────────── */
.alert-hist-stocks { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 2px; }
.alert-stk-chip {
  display: inline-flex; align-items: baseline; gap: 3px;
  border: 1px solid var(--border-dark); background: var(--bg); color: var(--text-2);
  border-radius: 999px; padding: 2px 9px; cursor: pointer; font-family: inherit;
  font-size: round(calc(13px * var(--font-scale, 1)), 1px); line-height: 1.5;
  transition: background .12s, border-color .12s;
}
.alert-stk-chip:hover { background: var(--accent-lt); border-color: var(--accent); }
.alert-stk-chip em { font-style: normal; font-size: round(calc(11px * var(--font-scale, 1)), 1px); color: var(--dn); }
/* 종목검색 — 국내 결과 아래에 이어 붙는 해외 종목 구역 */
.stk-osc-head {
  margin: 16px var(--page-pad-x) 8px; padding-top: 12px;
  border-top: 1px solid var(--border-md);
  font-size: round(calc(14px * var(--font-scale, 1)), 1px);
  font-weight: 700; color: var(--text-2);
}
.stk-osc-head b { color: var(--accent-dk); }
#stk-osc .osc-cards { padding: 0 var(--page-pad-x) 16px; }