/* NSTKEN — Premium Static Frontend (Light/Dark) */
:root {
  --bg: #f8fafc;
  --bg-soft: #ffffffcc;
  --text: #0f172a;
  --muted: #64748b;
  --card: #ffffffaa;
  --border: rgba(0, 0, 0, .08);
  --primary: #0ea5e9;
  --accent: #6366f1;
  --success: #16a34a;
  --danger: #ef4444;

  /* surfaces */
  --surface: rgba(0, 0, 0, .04);
  --surface-strong: rgba(0, 0, 0, .06);
}

:root[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-soft: #0a0a0acc;
  --text: #f3f4f6;
  --muted: #d1d5db;
  /* ← 밝게 조정 */
  --card: rgba(18, 18, 18, .72);
  --border: rgba(255, 255, 255, .16);
  /* ← 대비 강화 */
  --primary: #38bdf8;
  --accent: #8b5cf6;
  --success: #22c55e;
  --danger: #f43f5e;

  /* dark surfaces */
  --surface: rgba(255, 255, 255, .06);
  --surface-strong: rgba(255, 255, 255, .1);
}

* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, 'Apple SD Gothic Neo', 'Noto Sans KR', Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 60%, rgba(99, 102, 241, .05) 100%);
  min-height: 100vh;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit;
  cursor: pointer
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
}

.btn {
  border-radius: 16px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  /* ← 다크 대비 확보 */
}

.btn.primary {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color: #fff;
  border: none
}

.btn.ghost {
  background: var(--surface)
}

.btn.block {
  width: 100%
}

.btn.success {
  background: var(--success);
  color: #fff;
  border: none
}

.btn.danger {
  background: var(--danger);
  color: #fff;
  border: none
}

/* 버튼 활성 스타일(종목/토글 등에서 또렷하게) */
.btn.active {
  background: var(--text);
  color: var(--bg);
  border-color: transparent;
}

/* Header/Nav */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-soft);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border)
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 12px
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px
}

.logo {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: inset 0 2px 8px rgba(255, 255, 255, .25)
}

.menu {
  display: flex;
  align-items: center;
  gap: 6px
}

.menu a,
.menu button.navlink {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  white-space: nowrap
}

.menu a.active,
.menu button.navlink.active {
  background: var(--text);
  color: var(--bg);
  border-color: transparent
}

.menu a:hover,
.menu button.navlink:hover {
  background: var(--surface-strong)
}

.controls {
  display: flex;
  align-items: center;
  gap: 8px
}

.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface)
}

.hamburger {
  display: none
}

@media (max-width: 900px) {
  .menu.desktop {
    display: none
  }

  .hamburger {
    display: block
  }
}

/* Drawer (모바일: 오른쪽 부착) */
.drawer {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999
}

.drawer.open {
  display: block
}

.drawer .scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35)
}

.drawer .panel {
  position: absolute;
  inset: 0 0 0 auto;
  /* ← 오른쪽 정착 */
  width: 84%;
  max-width: 320px;
  background: var(--bg-soft);
  border-left: 1px solid var(--border);
  /* ← 오른쪽 패널이므로 left border */
  padding: 16px;
  overflow: auto;
  backdrop-filter: blur(12px)
}

.drawer .menu a {
  display: block;
  padding: 14px 12px;
  border-radius: 12px;
  word-break: keep-all;
  color: var(--text)
}

.drawer .menu a.active {
  background: var(--text);
  color: var(--bg)
}

/* Layout helpers */
.section {
  margin: 24px 0
}

.grid {
  display: grid;
  gap: 16px
}

.grid.cols-2 {
  grid-template-columns: repeat(2, 1fr)
}

.grid.cols-3 {
  grid-template-columns: repeat(3, 1fr)
}

@media (max-width: 900px) {

  .grid.cols-2,
  .grid.cols-3 {
    grid-template-columns: 1fr
  }
}

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr
  }
}

h1 {
  font-size: clamp(24px, 3.2vw, 40px);
  margin: 0;
  line-height: 1.15
}

.muted {
  color: var(--muted);
  font-size: 14px
}

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px
}

.table th,
.table td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left
}

.table th {
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .02em
}

.text-right {
  text-align: right
}

.badge {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  color: var(--text)
}

.badge.long {
  background: rgba(34, 197, 94, .12);
  color: #22c55e;
  border-color: rgba(34, 197, 94, .35)
}

.badge.short {
  background: rgba(244, 63, 94, .12);
  color: #f43f5e;
  border-color: rgba(244, 63, 94, .35)
}

/* Forms */
.input,
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text)
}

.range {
  width: 100%
}

.label {
  color: var(--muted);
  font-size: 13px
}

/* Footer */
.footer {
  border-top: 1px solid var(--border);
  margin-top: 24px
}

.footer-inner {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  font-size: 12px;
  color: var(--muted)
}

.footer-links a {
  margin-left: 12px
}

/* Chart — 고정 높이 + 모바일 최적화 */
.chart {
  height: 600px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border)
}

@media (max-width: 900px) {
  .chart {
    height: 480px;
  }
}

/* Drawer: 오른쪽 부착 유지 */
.drawer {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999
}

.drawer.open {
  display: block
}

.drawer .scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35)
}

.drawer .panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: 84%;
  max-width: 360px;
  background: var(--bg-soft);
  border-left: 1px solid var(--border);
  padding: 16px;
  overflow: auto;
  backdrop-filter: blur(12px)
}

/* === 가로형 칩 메뉴 (wrap) === */
.drawer .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.drawer .menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
  transition: background .15s, transform .15s;
}

.drawer .menu a:hover {
  background: var(--surface-strong);
  transform: translateY(-1px);
}

.drawer .menu a.active {
  background: var(--text);
  color: var(--bg);
  border-color: transparent;
}


/* 컨테이너 폭 소폭 확대 (초와이드에서 좌우 여백 개선) */
.container {
  max-width: 1440px;
}

/* 기존 1280 → 1440 */

/* 거래소 그리드 */
.exchange-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  /* 차트는 유동, 주문패널은 고정폭 */
  gap: 16px;
  align-items: start;
}

@media (max-width: 1200px) {
  .exchange-grid {
    grid-template-columns: 1fr;
  }
}

/* 카드 포지셔닝 */
.chart-card {
  grid-column: 1 / 2;
}

.order-card {
  grid-column: 2 / 3;
  position: sticky;
  top: 76px;
}

/* 헤더 높이에 맞게 고정 */

/* 하단 영역 두 칼럼 */
.exchange-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 1200px) {
  .exchange-lower {
    grid-template-columns: 1fr;
  }
}

/* 종목 칩 버튼 가독성 향상 */
.symbols-bar .btn {
  background: var(--surface);
}

.symbols-bar .btn.active {
  background: var(--text);
  color: var(--bg);
}

/* ===== Global page width & centering ===== */
:root {
  /* 컨텐츠 최대폭 변수화 (초와이드에서 좌우 균형) */
  --page-max: 1280px;
  --page-pad: clamp(12px, 2vw, 24px);
}

/* 모든 페이지 컨테이너를 확실히 가운데 정렬 */
.container {
  max-width: var(--page-max);
  margin-inline: auto;
  /* ← 좌우 자동 여백으로 중앙 */
  padding-inline: var(--page-pad);
}

/* 초와이드(>1600px)에서 컨텐츠 폭을 조금 키워서 '왼쪽 몰림' 체감 감소 */
@media (min-width: 1600px) {
  :root {
    --page-max: 1400px;
  }

  /* 필요 시 1440~1600까지 올려도 OK */
}

/* ===== Home hero centering on ultra-wide ===== */
@media (min-width: 1400px) {
  .hero {
    grid-template-columns: 1fr 1fr 1fr;
    /* 3열 */
  }

  .hero>.card:nth-child(1) {
    grid-column: 1 / 2;
  }

  /* 좌측 타이틀 */
  .hero>.card:nth-child(2) {
    grid-column: 2 / 4;
  }

  /* 차트가 2~3열 차지 → 중앙으로 */
}

/* 옵션: 주문패널 폭 약간 확대해서 오른쪽 공간 채우기 */
@media (min-width: 1400px) {
  .exchange-grid {
    grid-template-columns: minmax(0, 1fr) 480px;
    /* 기존 420px → 480px */
  }
}



/* === Global page width — 더 넓게 쓰기 === */
:root {
  --page-max: 1440px;
  /* 기본 1440 */
  --page-pad: clamp(12px, 2vw, 28px);
}

.container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* 1536px 이상에서 한 단계 확대 */
@media (min-width: 1536px) {
  :root {
    --page-max: 1600px;
  }
}

/* 1920px 이상(초와이드)에서 더 확대 */
@media (min-width: 1920px) {
  :root {
    --page-max: 1760px;
  }
}

/* Home hero — 넓은 화면에서 차트 비중 확대 */
@media (min-width: 1400px) {
  .hero {
    grid-template-columns: 1.2fr 1.8fr;
    /* 좌:타이틀 40% / 우:차트 60% */
  }
}

@media (min-width: 1920px) {
  .hero {
    grid-template-columns: 1.1fr 1.9fr;
    /* 초와이드에서 차트 비중 더 ↑ */
  }
}

/* Exchange 상단 2열: 차트(유동) + 주문패널(고정폭) */
.exchange-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  /* 기존 420 → 480 */
  gap: 16px;
  align-items: start;
}

@media (min-width: 1600px) {
  .exchange-grid {
    grid-template-columns: minmax(0, 1fr) 560px;
  }
}

@media (min-width: 1920px) {
  .exchange-grid {
    grid-template-columns: minmax(0, 1fr) 640px;
  }
}

/* 주문패널 sticky 유지(헤더 높이에 맞춤) */
.order-card {
  position: sticky;
  top: 76px;
}

/* 차트 높이도 화면 커질수록 ↑ */
.chart {
  height: 600px;
}

@media (min-width: 1600px) {
  .chart {
    height: 720px;
  }
}

@media (min-width: 1920px) {
  .chart {
    height: 820px;
  }
}

/* 카드 그리드 자동 맞춤 (한 줄에 더 많이 배치) */
.grid.auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

/* --- Select (심볼 드롭다운) --- */
.select {
  position: relative
}

.select-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.select-toggle[aria-expanded="true"] {
  background: var(--surface-strong)
}

.select-toggle svg {
  opacity: .7
}

.select-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 240px;
  max-height: 320px;
  overflow: auto;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
  padding: 8px;
  display: none;
  backdrop-filter: blur(10px);
}

.select.open .select-menu {
  display: block
}

.select-item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
}

.select-item:hover {
  background: var(--surface-strong)
}

.select-item.active {
  background: var(--text);
  color: var(--bg);
  border-color: transparent;
}


/* === Full-bleed helper: 컨테이너 밖으로 화면 꽉 채우기 === */
.full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* === 풀배경 히어로 (0.jpg) — 상단 와이드 배너 === */
.hero-bleed {
  /* full-bleed + 높이 */
  min-height: clamp(360px, 54vh, 640px);
  display: grid;
  align-items: center;
  isolation: isolate;
  /* overlay 겹침 보장 */
}

.hero-bleed__bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/img/0.jpg');
  /* 요청하신 0.jpg */
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
  z-index: -2;
}

.hero-bleed__overlay {
  position: absolute;
  inset: 0;
  /* 좌측 콘텐츠 가독성 강조 + 상단/하단 페이드 */
  background:
    radial-gradient(60% 60% at 20% 45%, rgba(0, 0, 0, .55), transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .08) 30%, rgba(0, 0, 0, .25)),
    linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 55%);
  z-index: -1;
  opacity: .9;
}

:root[data-theme="light"] .hero-bleed__overlay {
  background:
    radial-gradient(60% 60% at 20% 45%, rgba(0, 0, 0, .28), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .0) 30%, rgba(0, 0, 0, .10)),
    linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 55%);
  opacity: .75;
}

/* 히어로 내부 레이아웃(가이드 여백) */
.hero-bleed__inner {
  width: min(1280px, 92vw);
  margin-inline: auto;
  padding: clamp(16px, 3vw, 28px);
  color: #fff;
}

:root[data-theme="light"] .hero-bleed__inner {
  color: #f9fafb;
}

/* 타이틀/서브카피 */
.hero-title {
  font-size: clamp(34px, 6.2vw, 64px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -.01em;
  margin: 0;
}

.hero-sub {
  margin-top: 12px;
  font-size: clamp(14px, 1.7vw, 18px);
  opacity: .95;
}

/* CTA 버튼 */
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px
}

/* 유리(Glass) 칩 — 신뢰/혁신/투명 */
.glass-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px
}

.glass-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}

.glass-chip .desc {
  font-weight: 500;
  opacity: .85;
}

/* 라이트 모드 보정 */
:root[data-theme="light"] .glass-chip {
  border-color: rgba(0, 0, 0, .12);
  background: rgba(255, 255, 255, .65);
  color: #0f172a;
}

/* 섹션 간 여백 보정(히어로가 풀-블리드이므로 아래 섹션을 살짝 끌어올림) */
.section-tight {
  margin-top: 14px;
}

/* === 모바일에서 헤더의 로그인/회원가입 숨기기(햄버거로 이동) === */
@media (max-width: 900px) {
  .controls .auth-only {
    display: none !important;
  }

  /* 로그인/회원가입 버튼 */
}

/* === Drawer: 가로로 길고 한 줄씩(필 버튼) === */
.drawer .panel {
  /* 이미 적용되어 있던 스타일 유지 + 살짝 강화 */
  background: var(--bg-soft);
  backdrop-filter: blur(12px);
  padding: 16px;
  border-left: 1px solid var(--border);
}

.drawer .menu {
  display: flex;
  flex-direction: column;
  /* 세로로 한 줄씩 */
  gap: 12px;
  margin-top: 12px;
}

.drawer .menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 999px;
  /* 필 형태 */
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  transition: transform .12s ease, background .12s ease;
}

.drawer .menu a:hover {
  background: var(--surface-strong);
  transform: translateY(-1px);
}

.drawer .menu a.active {
  background: var(--text);
  color: var(--bg);
  border-color: transparent;
}

/* Drawer 상단 브랜드와 메뉴 간 경계 살짝 */
.drawer .menu-divider {
  height: 1px;
  width: 100%;
  background: var(--border);
  margin: 6px 0;
}

/* === Modal Light Mode Contrast HOTFIX (force opaque) === */

/* 1) 스크림: 진하게 + 블러 금지 */
.modal .scrim {
  background: rgba(0, 0, 0, .64) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2) 패널: 완전 불투명 + 투명도/블러/필터 전부 금지 */
.theme-light .modal .panel,
.modal[aria-hidden="false"] .panel {
  background: #ffffff !important;
  /* 라이트는 무조건 흰색 불투명 */
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
  opacity: 1 !important;
  /* 혹시 상위에서 opacity 걸려있으면 무력화 */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* 3) 라이트 토큰이 rgba로 되어있을 가능성 차단 */
.theme-light {
  --surface: #ffffff !important;
  --surface-strong: #f8fafc !important;
  --border: #e5e7eb !important;
  --text: #0f172a !important;
  --muted: #475569 !important;
}

/* 4) NOTE/입력 박스도 투명도 제거(희미함 방지) */
.theme-light .modal .note,
.theme-light .modal .input {
  background: var(--surface-strong) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}





/* === Light Theme: make tokens opaque (fix modal readability) === */
:root:not([data-theme="dark"]),
:root[data-theme="light"] {
  --bg: #f8fafc;
  --bg-soft: #ffffff;
  /* ← cc 제거: 완전 불투명 */
  --text: #0f172a;
  --muted: #475569;
  /* 좀 더 선명한 보조 텍스트 */
  --card: #ffffff;
  /* ← aa 제거 */
  --border: #e5e7eb;
  /* ← rgba → hex */
  --surface: #ffffff;
  /* ← rgba(0,0,0,.04) 금지 */
  --surface-strong: #f8fafc;
  /* ← rgba(0,0,0,.06) 금지 */
  --primary: #0ea5e9;
  --accent: #6366f1;
  --success: #16a34a;
  --danger: #ef4444;
}


/* === Modal Contrast Lock (Light/Dark 공통) === */
.modal .scrim {
  background: rgba(0, 0, 0, .64) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 패널은 유리효과 금지 + 완전 불투명 */
.modal .panel {
  background: #ffffff !important;
  /* 라이트 기본 */
  color: #0f172a !important;
  border: 1px solid #e5e7eb !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

:root[data-theme="dark"] .modal .panel {
  background: #0b0f1a !important;
  /* 다크일 때 패널 네이비톤 */
  color: #e5e7eb !important;
  border: 1px solid #1f2937 !important;
}

/* 모달 내부 박스/입력도 반투명 금지 */
.modal .note,
.modal .input {
  background: var(--surface-strong) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* 포커스/가시성 */
.modal .btn:focus-visible,
.modal .input:focus-visible,
.modal .icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}






/* HARD STOP: 페이지 전체 가로 스크롤 금지 */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}


/* 차트는 박스 내부에서만 가로 스크롤 */
.chart-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

#tv-container {
  min-width: 680px;
}

/* 640~720px 사이로 조절 가능 */
@media (max-width:360px) {
  #tv-container {
    min-width: 620px;
  }

  /* 초소형 폰 */
}


/* 포지션 표 내부 스크롤 + 숫자 줄바꿈 방지 */
.pos-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

#pos-table {
  min-width: 680px;
}

/* 필요시 640~720px로 조정 */
#pos-table td,
#pos-table th {
  white-space: nowrap;
}

#pos-table td.text-right {
  font-variant-numeric: tabular-nums;
}


/* 100vw 요소가 스크롤바 두께만큼 넘치는 현상 방지 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

#tv-container,
#tv-container * {
  max-width: 100%;
}







/* === Dark mode: form controls & option popup hard-dark === */

/* 브라우저 기본 컨트롤도 다크 팔레트 사용 */
:root[data-theme="dark"] {
  color-scheme: dark;
}

/* 컨트롤 배경/테두리 강제 */
:root[data-theme="dark"] select,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .btn.ghost {
  background-color: #0f1218 !important;
  /* 다크 패널 톤 */
  color: #e5e7eb !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

/* 옵션 리스트/옵트그룹도 어둡게 (크롬/엣지/파폭) */
:root[data-theme="dark"] option,
:root[data-theme="dark"] optgroup {
  background-color: #0f1218 !important;
  color: #e5e7eb !important;
}

/* Safari/WebKit에서 선택 팝업 트랙이 번쩍이는 것 억제 */
:root[data-theme="dark"] select::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] select::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .30);
  border-radius: 999px;
}

/* 페이지/카드 배경 투명 번쩍 방지 */
html,
body {
  background: var(--bg) !important;
}

.card,
.table-wrap {
  background: var(--card) !important;
}

/* iOS/모바일 overscroll 흰색 번쩍 방지 */
body {
  overscroll-behavior: none;
}

/* (안전망) 테이블 줄무늬가 라이트로 깔리는 테마 무력화 */
.table,
.table tr,
.table td,
.table th {
  background: transparent !important;
}