/* ─────────────────────────────────────────────
   common.css · 주식인포 다크 네이비 + 형광 민트 테마
   ───────────────────────────────────────────── */

/* ===== CSS 변수 ===== */
:root {
  --bg:     #0d1421;
  --bg2:    #111c2d;
  --bg3:    #162035;
  --card:   #1a2332;
  --border: #243044;
  --accent: #00d4aa;
  --accent2:#4d9eff;
  --up:     #ff4d4d;
  --down:   #4d9eff;
  --text:   #ffffff;
  --text2:  #94a3b8;
  --text3:  #64748b;
}

/* ===== 기본 ===== */
html { overflow-x: hidden; max-width: 100vw; }
body { background: var(--bg) !important; color: var(--text) !important; overflow-x: hidden; max-width: 100vw; }

/* ===== NAV (상단 공통) ===== */
nav:not(.bottom-nav) {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  min-height: 54px !important;
  height: 54px !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

.logo {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  letter-spacing: -0.5px !important;
  white-space: nowrap !important;
}
.logo span { color: #ffffff !important; }

/* 탭 메뉴 */
.nav-tabs {
  display: flex !important;
  align-items: center !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  flex: 1 !important;
  margin-left: 20px !important;
  height: 54px !important;
  gap: 0 !important;
}
.nav-tabs::-webkit-scrollbar { display: none !important; }

.ntab {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  height: 54px !important;
  font-size: 14px !important;
  color: var(--text2) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  border-bottom: 2px solid transparent !important;
  box-sizing: border-box !important;
  transition: color 0.2s, border-color 0.2s !important;
}
.ntab:hover { color: var(--text) !important; border-bottom-color: transparent !important; }
.ntab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  font-weight: 500 !important;
}

.hamburger {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  background: none !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 24px !important;
  cursor: pointer !important;
  padding: 6px 4px !important;
  line-height: 1 !important;
  transition: opacity 0.2s !important;
}
.hamburger:hover { opacity: 0.7 !important; }

/* 기존 직접 링크 자식 숨기기 */
nav:not(.bottom-nav) > a:not(.logo) { display: none !important; }
nav:not(.bottom-nav) .nav-links { display: none !important; }
nav:not(.bottom-nav) .nav-right  { display: none !important; }
nav:not(.bottom-nav) .search-bar { display: none !important; }

/* ===== SIDE MENU ===== */
.side-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
}
.side-menu.open { display: block; }
.side-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.side-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 76%;
  max-width: 290px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.side-menu.open .side-panel { transform: translateX(0); }
.side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.side-header span {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.side-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text2);
  padding: 4px 6px;
  line-height: 1;
  transition: color 0.15s;
}
.side-close:hover { color: var(--text); }
.side-links { padding: 4px 0; }
.side-links a {
  display: block;
  padding: 14px 20px;
  color: var(--text2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid rgba(36,48,68,0.6);
  transition: background 0.12s, color 0.12s;
}
.side-links a:last-child { border-bottom: none; }
.side-links a:hover { background: rgba(0,212,170,0.07); color: var(--accent); }

/* ===== UP / DOWN ===== */
.up   { color: var(--up)   !important; }
.down { color: var(--down) !important; }

/* ===== HERO / PAGE HEADER ===== */
.hero         { background: var(--bg2) !important; border-bottom: 1px solid var(--border) !important; }
.page-header  { background: var(--bg2) !important; border-bottom: 1px solid var(--border) !important; }
.hero h1 em, .page-header h1 em { color: var(--accent) !important; }

/* ===== TABLES ===== */
tbody td { color: var(--text) !important; }
.stock-name, .sname, .etf-name { color: var(--text) !important; font-weight: 500 !important; }
.stock-code, .scode, .etf-code { color: var(--text3) !important; }

/* ===== SECTION/CARD TITLE ===== */
.section-title::before { background: var(--accent) !important; }
.card-title::before    { background: var(--accent) !important; }

/* ===== BADGE ===== */
.badge { background: var(--accent) !important; color: var(--bg) !important; }

/* ===== FEATURED IMG ===== */
.featured-img {
  background: linear-gradient(135deg, #162035 0%, #243044 100%) !important;
  color: var(--text3) !important;
}

/* ===== BADGE 색상들 ===== */
.badge-hot     { background: rgba(255,77,77,0.12)   !important; color: var(--up)    !important; border-color: rgba(255,77,77,0.28)   !important; }
.badge-up      { background: rgba(255,77,77,0.10)   !important; color: var(--up)    !important; border-color: rgba(255,77,77,0.24)   !important; }
.badge-foreign { background: rgba(77,158,255,0.12)  !important; color: var(--down)  !important; border-color: rgba(77,158,255,0.28)  !important; }
.badge-main    { background: rgba(124,58,237,0.10)  !important; color: #a78bfa      !important; border-color: rgba(124,58,237,0.25)  !important; }
.badge-qrt     { background: rgba(0,212,170,0.10)   !important; color: var(--accent)!important; border-color: rgba(0,212,170,0.25)   !important; }
.badge-major   { background: rgba(255,77,77,0.10)   !important; color: var(--up)    !important; border-color: rgba(255,77,77,0.24)   !important; }
.badge-div     { background: rgba(0,212,170,0.10)   !important; color: var(--accent)!important; border-color: rgba(0,212,170,0.25)   !important; }
.badge-own     { background: rgba(245,158,11,0.10)  !important; color: #fbbf24      !important; border-color: rgba(245,158,11,0.25)  !important; }
.badge-other   { background: rgba(100,116,139,0.10) !important; color: var(--text2) !important; border-color: rgba(100,116,139,0.25) !important; }

/* 뉴스 카테고리 */
.cat-market  { background: rgba(77,158,255,0.10)  !important; color: var(--down)  !important; border-color: rgba(77,158,255,0.25) !important; }
.cat-company { background: rgba(0,212,170,0.10)   !important; color: var(--accent)!important; border-color: rgba(0,212,170,0.25)  !important; }
.cat-global  { background: rgba(124,58,237,0.10)  !important; color: #a78bfa      !important; border-color: rgba(124,58,237,0.25) !important; }
.cat-economy { background: rgba(245,158,11,0.10)  !important; color: #fbbf24      !important; border-color: rgba(245,158,11,0.25) !important; }
.cat-tech    { background: rgba(255,77,77,0.10)   !important; color: var(--up)    !important; border-color: rgba(255,77,77,0.25)  !important; }

/* 시장 배지 */
.market-badge        { background: var(--accent)                !important; color: var(--bg)   !important; }
.market-badge.kospi  { background: rgba(77,158,255,0.12)        !important; color: var(--down) !important; }
.market-badge.kosdaq { background: rgba(255,77,77,0.12)         !important; color: var(--up)   !important; }

/* 테마주 배지 */
.hot-badge { background: var(--up)     !important; color: #ffffff   !important; }
.new-badge { background: var(--accent) !important; color: var(--bg) !important; }

/* 종목 비교 */
.a-color { color: var(--up)    !important; }
.b-color { color: var(--down)  !important; }
.winner  { color: var(--up)    !important; }
.loser   { color: var(--text3) !important; }

/* 계산기 */
.result-val            { color: var(--accent)  !important; }
.result-big .value     { color: var(--up)       !important; }
.goal-result           { background: rgba(0,212,170,0.07) !important; border-color: var(--accent) !important; }
.goal-result strong    { color: var(--accent) !important; }

/* 용어 사전 */
.term-abbr { color: var(--accent) !important; background: rgba(0,212,170,0.08) !important; border-color: rgba(0,212,170,0.2)  !important; }
.formula   { color: var(--accent) !important; background: rgba(0,212,170,0.06) !important; border-color: rgba(0,212,170,0.15) !important; }
.good      { background: rgba(255,77,77,0.06)  !important; border-color: rgba(255,77,77,0.2)  !important; }
.bad       { background: rgba(77,158,255,0.06) !important; border-color: rgba(77,158,255,0.2) !important; }
.good-label { color: var(--up)   !important; }
.bad-label  { color: var(--down) !important; }

/* 증권사 */
.best-badge { background: var(--accent) !important; color: var(--bg) !important; }
.fee-val    { color: var(--up) !important; }
.cta-btn.secondary { background: transparent !important; border-color: var(--accent) !important; color: var(--accent) !important; }

/* 통계 */
.stat-num { color: var(--accent) !important; }

/* 뉴스/공시 */
.news-press   { color: var(--down) !important; }
.dart-company { color: var(--down) !important; }

/* 주식 상세 */
.code-badge { background: var(--card) !important; border-color: var(--border) !important; color: var(--text2) !important; }

/* 푸터 */
footer { background: var(--bg2) !important; border-top: 1px solid var(--border) !important; }

/* ─────────────────────────────
   하단 탭바 (모바일 전용)
   ───────────────────────────── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  z-index: 300;
  flex-direction: row;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.35);
}
.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-decoration: none;
  color: var(--text3);
  font-size: 11px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
  padding: 8px 2px 6px;
  transition: color 0.15s;
  min-width: 0;
  line-height: 1;
}
.bn-item.active { color: var(--accent); }
.bn-item:hover  { color: var(--accent); }
.bottom-nav .bn-item { display: flex !important; }
.bn-logo {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  letter-spacing: -0.5px !important;
  flex: 1.2 !important;
}
.bn-logo:hover { color: var(--accent) !important; opacity: 0.8; }
.bn-ham { font-size: 20px !important; }

/* ─────────────────────────────
   더보기 슬라이드 패널 (more-menu)
   ───────────────────────────── */
.more-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 400;
}
.more-menu.open { display: block; }
.more-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.more-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 78%;
  max-width: 300px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
}
.more-menu.open .more-panel { transform: translateX(0); }
.more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.more-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.more-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text2);
  padding: 4px 6px;
  line-height: 1;
  transition: color 0.15s;
}
.more-close:hover { color: var(--text); }
.more-links { padding: 4px 0; }
.more-links a {
  display: block;
  padding: 14px 20px;
  color: var(--text2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid rgba(36,48,68,0.6);
  transition: background 0.12s, color 0.12s;
}
.more-links a:last-child { border-bottom: none; }
.more-links a:hover { background: rgba(0,212,170,0.07); color: var(--accent); }

/* ─────────────────────────────
   모바일 반응형
   ───────────────────────────── */
@media (max-width: 768px) {
  body { padding-bottom: 62px; }
  .bottom-nav { display: flex; }

  nav:not(.bottom-nav) {
    padding: 0 14px !important;
    min-height: 50px !important;
    height: 50px !important;
  }
  .nav-tabs {
    height: 50px !important;
    margin-left: 12px !important;
  }
  .ntab {
    padding: 0 10px !important;
    height: 50px !important;
    font-size: 13px !important;
  }
  .logo { font-size: 16px !important; }
  .hamburger { font-size: 22px !important; }
}

@media (max-width: 480px) {
  nav:not(.bottom-nav) {
    padding: 0 10px !important;
    min-height: 46px !important;
    height: 46px !important;
  }
  .nav-tabs {
    height: 46px !important;
    margin-left: 8px !important;
  }
  .ntab {
    padding: 0 8px !important;
    height: 46px !important;
    font-size: 12px !important;
  }
}