:root {
  /* 다크 모드 기본값 (브랜드 먹색) */
  --ink: #14181F;             /* 페이지 배경 */
  --ink-raised: #1C212A;      /* 카드 표면 */
  --ink-line: rgba(255, 255, 255, 0.07);
  --breaking: #E8412C;        /* 속보/상위 순위 — 모드 무관 고정 */
  --text: #E9ECF1;
  --text-sub: #8A93A3;
  --text-dim: #5E6675;
  --up: #F2554A;
  --down: #4C8DF6;
  --new: #2FBF71;
  --warn: #E0A53A;
  --row-hover: rgba(255, 255, 255, 0.05);
  /* 배경 대비 흑백 버튼 */
  --btn-bg: #FFFFFF;
  --btn-fg: #14181F;
  --seg-on-bg: rgba(255, 255, 255, 0.14);
  --seg-on-fg: #FFFFFF;
  --btn-accent-line: rgba(255, 255, 255, 0.16);
  --page-glow: #1B2028;       /* 새 탭 상단 그라데이션 */
  --font: "Pretendard", -apple-system, "Malgun Gothic", "맑은 고딕", "Segoe UI", sans-serif;
}

/* 라이트 모드 — 브라우저가 밝은 테마일 때 */
@media (prefers-color-scheme: light) {
  :root {
    --ink: #F4F6F8;
    --ink-raised: #FFFFFF;
    --ink-line: rgba(20, 24, 31, 0.10);
    --text: #1B2028;
    --text-sub: #5B6472;
    --text-dim: #8A93A3;
    --up: #D83A2E;
    --down: #2C6FE0;
    --new: #1E9E57;
    --warn: #B9821F;
    --row-hover: rgba(20, 24, 31, 0.05);
    --btn-bg: #14181F;
    --btn-fg: #FFFFFF;
    --seg-on-bg: #14181F;
    --seg-on-fg: #FFFFFF;
    --btn-accent-line: rgba(20, 24, 31, 0.14);
    --page-glow: #FFFFFF;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 11px 0 9px;
  border-radius: 12px;
  background: var(--breaking);
  color: #fff;
  font: 700 13px/1 var(--font);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }

/* ── 순위 목록 (공용 컴포넌트) ── */
.rank-list { list-style: none; }

.rank-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}
.rank-row:hover { background: var(--row-hover); }
.rank-row:focus-visible { outline: 2px solid var(--down); outline-offset: -2px; }

.rank-num {
  font: 700 15px/1 var(--font);
  color: var(--text-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rank-num.top { color: var(--breaking); }

.rank-kw {
  font: 500 15px/1.3 var(--font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-chg {
  font: 700 12px/1 var(--font);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rank-chg.up { color: var(--up); }
.rank-chg.down { color: var(--down); }
.rank-chg.new {
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(47, 191, 113, 0.16);
  color: var(--new);
  font-size: 10px;
}

.notice {
  font: 500 12px/1.4 var(--font);
  color: var(--text-sub);
}
.notice.warn { color: var(--warn); }

.footer-line {
  font: 500 11px/1.4 var(--font);
  color: var(--text-dim);
}