:root {
  --bg: #050507;
  --bg-elevated: #15181f;
  --bg-row: #0c0e13;
  --bg-row-hover: #1a1d25;
  --border: #1f2230;
  --border-strong: #2c3040;
  --text: #ebebef;
  --text-dim: #7a7e8a;
  --text-mute: #4a4d57;
  --accent: #4dd6e8;
  --accent-strong: #6fe3f2;
  --gold: #e0a948;
  --gold-soft: #b58832;
  --silver: #c5cdd8;
  --bronze: #c08454;
  --win: #4dd6e8;
  --loss: #e85a5c;
  --neutral: #1e2028;
  --gutter: max(40px, calc((100vw - 960px) / 2));
  --table-pad: 36px;
}

[data-theme="light"] {
  --bg: #faf8f3;
  --bg-elevated: #fdfcf8;
  --bg-row: #fefdfb;
  --bg-row-hover: #f5efe5;
  --border: #d8cfc4;
  --border-strong: #a0948a;
  --text: #0a0c12;
  --text-dim: #2a2f3c;
  --text-mute: #5a5248;
  --accent: #066170;
  --accent-strong: #044e5a;
  --gold: #b8830d;
  --gold-soft: #8a6309;
  --silver: #3e475a;
  --bronze: #7a3e1a;
  --win: #066170;
  --loss: #9c1010;
  --neutral: #ece7dd;
}

/* 라이트 모드 — 1/2/3등 ordinal text-shadow 제거 (빛 번짐이 글자 흐리게 함) */
[data-theme="light"] .rank-gold .rank-num,
[data-theme="light"] .rank-gold .rank-suffix,
[data-theme="light"] .rank-silver .rank-num,
[data-theme="light"] .rank-silver .rank-suffix,
[data-theme="light"] .rank-bronze .rank-num,
[data-theme="light"] .rank-bronze .rank-suffix {
  text-shadow: none;
}

/* 라이트 모드 — 3등 rank-num 별도 색 (다크용 #d99088 → 진한 적갈) */
[data-theme="light"] .rank-bronze .rank-num,
[data-theme="light"] .rank-bronze .rank-suffix {
  color: #7a3e1a;
}

/* 라이트 모드 — col-record / col-rating font-weight 강화 (monospace 가 라이트에서 더 얇아 보임) */
[data-theme="light"] .col-record {
  color: var(--text);
  font-weight: 600;
}
[data-theme="light"] .rec-w {
  color: var(--text);
  font-weight: 700;
}
[data-theme="light"] .rec-d,
[data-theme="light"] .rec-sep {
  color: var(--text-mute);
  font-weight: 600;
}
[data-theme="light"] .rec-l {
  color: var(--text-dim);
  font-weight: 600;
}
[data-theme="light"] .col-rating {
  font-weight: 800;
}

/* 라이트 모드 — WIN% bar 채우기: burgundy accent 대신 teal 유지 (시맨틱 의미 보존) */
[data-theme="light"] .winrate-bar-fill {
  background: #066170;
  box-shadow: 0 0 4px rgba(6, 97, 112, 0.40);
  filter: none;
}
[data-theme="light"] .winrate-bar-fill.wr-elite {
  background: var(--gold);
  box-shadow: 0 0 6px rgba(184, 131, 13, 0.50);
}
[data-theme="light"] .winrate-bar-fill.wr-strong {
  background: #066170;
  box-shadow: 0 0 5px rgba(6, 97, 112, 0.45);
}

/* 라이트 모드 — rating delta up chip: 시맨틱 teal 유지 (양수 변동 = 긍정색) */
[data-theme="light"] .rating-delta-up {
  color: #066170;
  background: rgba(6, 97, 112, 0.10);
  border-color: rgba(6, 97, 112, 0.35);
}

/* 라이트 모드 — variant badge glow: teal 액센트 매칭 */
[data-theme="light"] .variant-badge {
  filter: drop-shadow(0 0 3px rgba(6, 97, 112, 0.30));
}

/* 라이트 모드 — MMR text-shadow 제거 + 글자 더 또렷 */
[data-theme="light"] .rank-gold .col-rating,
[data-theme="light"] .rank-silver .col-rating,
[data-theme="light"] .rank-bronze .col-rating,
[data-theme="light"] .col-rating {
  text-shadow: none;
}

/* 라이트 모드 — recent-mark glow 제거 (라이트에선 번짐 X 깔끔) */
[data-theme="light"] .recent-win,
[data-theme="light"] .recent-loss,
[data-theme="light"] .delta-up,
[data-theme="light"] .delta-down,
[data-theme="light"] .dot-win,
[data-theme="light"] .dot-loss {
  text-shadow: none;
  box-shadow: none;
}

/* 라이트 모드 — rank-gold/silver/bronze delta chip 가독성 (배경 어두운 rgba(0,0,0,0.45) → 흰 배경에 안 어울림) */
[data-theme="light"] .rank-gold .rank-delta,
[data-theme="light"] .rank-silver .rank-delta,
[data-theme="light"] .rank-bronze .rank-delta {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border);
}
[data-theme="light"] .rank-gold .delta-up,
[data-theme="light"] .rank-silver .delta-up,
[data-theme="light"] .rank-bronze .delta-up {
  background: rgba(8, 117, 134, 0.12);
  border-color: rgba(8, 117, 134, 0.45);
}
[data-theme="light"] .rank-gold .delta-down,
[data-theme="light"] .rank-silver .delta-down,
[data-theme="light"] .rank-bronze .delta-down {
  background: rgba(183, 28, 28, 0.10);
  border-color: rgba(183, 28, 28, 0.45);
}

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

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

html, body {
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px var(--gutter) 14px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg);
}

.site-header-left {
  display: flex;
  align-items: baseline;
  gap: 18px;
  min-width: 0;
}

.site-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.site-search-label {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-mute);
  text-transform: uppercase;
}

.site-search-input {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  padding: 6px 10px;
  width: 180px;
  outline: none;
  transition: border-color 0.15s ease-out;
}

.site-search-input::placeholder {
  color: var(--text-mute);
}

.site-search-input:focus,
.site-search-input:focus-visible {
  border-color: var(--accent);
}

.site-search-button {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
  transition: color 0.15s ease-out, border-color 0.15s ease-out;
}

.site-search-button:hover,
.site-search-button:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.theme-toggle {
  margin-left: 10px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
  transition: color 0.15s ease-out, border-color 0.15s ease-out;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.site-dates {
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-dates-label {
  color: var(--text-mute);
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.site-dates select {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11.5px;
  padding: 5px 10px;
  cursor: pointer;
  transition: border-color 0.15s ease-out, color 0.15s ease-out;
}

.site-dates select:hover,
.site-dates select:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

[data-theme="light"] .site-dates select option {
  background: var(--bg-elevated);
  color: var(--text);
}

.theme-toggle-icon { display: block; }
.theme-toggle-icon-moon { color: var(--accent); }
.theme-toggle-icon-sun { display: none; color: var(--gold); }
[data-theme="light"] .theme-toggle-icon-moon { display: none; }
[data-theme="light"] .theme-toggle-icon-sun { display: block; }

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

.brand-mark {
  width: 7px;
  height: 7px;
  background: var(--accent);
}

.brand-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 7px;
  color: var(--text);
}

.brand-sub {
  color: var(--text-mute);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.snapshot-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px var(--gutter);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.meta-left, .meta-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.meta-label {
  color: var(--text-mute);
  font-size: 10px;
  letter-spacing: 2.5px;
  font-weight: 700;
}

.meta-value {
  color: var(--accent);
  font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
  font-size: 13px;
  font-weight: 500;
}

.meta-right select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 4px 9px;
  border-radius: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  cursor: pointer;
}

.meta-right select:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.meta-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 1px;
}

.meta-tier-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.06));
}

.meta-range {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.6px;
}

.stats-panel {
  padding: 14px 28px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 22px;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.stats-label {
  color: var(--text-mute);
  font-size: 10px;
  letter-spacing: 2.5px;
  font-weight: 700;
  padding-top: 8px;
  min-width: 80px;
}

.stats-rows {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.stats-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  transition: border-color 0.12s;
  color: inherit;
  text-decoration: none;
}

.stats-row:hover,
.stats-row:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.stats-row:hover .stats-tier-name,
.stats-row:focus-visible .stats-tier-name {
  color: var(--accent);
}

.stats-row-empty:hover {
  border-color: var(--border-strong);
}

.stats-row-empty:hover .stats-tier-name {
  color: var(--text);
}

.stats-row-empty {
  opacity: 0.42;
}

.stats-tier {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: auto auto;
  column-gap: 7px;
  row-gap: 1px;
  align-items: center;
  min-height: 32px;
}

.stats-tier-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  grid-row: 1 / span 2;
}

.stats-tier-name {
  font-size: 11.5px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  grid-column: 2;
  grid-row: 1;
}

.stats-tier-range {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 9.5px;
  color: var(--text-mute);
  letter-spacing: 0.4px;
  grid-column: 2;
  grid-row: 2;
  white-space: nowrap;
}

.stats-bar {
  height: 7px;
  background: var(--neutral);
  position: relative;
  overflow: hidden;
}

.stats-bar-fill {
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(77, 214, 232, 0.4);
  transition: width 0.2s ease-out;
}

/* 티어별 색상 매핑 (db.py:TIERS 순서) — 솔라레 / 영광 / 여명 / 불꽃 / 노을 / 숙련 */
.stats-row-tier-0 .stats-bar-fill { background: var(--gold); box-shadow: 0 0 6px rgba(224, 169, 72, 0.45); }
.stats-row-tier-1 .stats-bar-fill { background: var(--silver); box-shadow: 0 0 6px rgba(197, 205, 216, 0.35); }
.stats-row-tier-2 .stats-bar-fill { background: var(--accent); box-shadow: 0 0 6px rgba(77, 214, 232, 0.4); }
.stats-row-tier-3 .stats-bar-fill { background: #d97a4d; box-shadow: 0 0 6px rgba(217, 122, 77, 0.4); }
.stats-row-tier-4 .stats-bar-fill { background: var(--bronze); box-shadow: 0 0 6px rgba(192, 132, 84, 0.4); }
.stats-row-tier-5 .stats-bar-fill { background: var(--text-dim); box-shadow: 0 0 6px rgba(122, 126, 138, 0.3); }

.stats-row-empty .stats-bar-fill {
  background: var(--text-mute) !important;
  box-shadow: none !important;
}

.stats-count {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-align: right;
  letter-spacing: 0.5px;
}

.stats-count-suffix {
  font-size: 9px;
  color: var(--text-mute);
  margin-left: 2px;
  font-weight: 400;
  letter-spacing: 0;
}

.stats-row-empty .stats-count {
  color: var(--text-mute);
}

.class-dist-panel {
  padding-top: 0;
}

.class-dist-chips {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  padding-top: 4px;
}

.class-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px 4px 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: 11px;
  line-height: 1;
  transition: border-color 0.12s, color 0.12s;
}

.class-chip:hover,
.class-chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.class-chip-null {
  opacity: 0.5;
  cursor: default;
}

.class-chip-empty {
  opacity: 0.35;
  cursor: default;
  filter: grayscale(0.6);
}

.class-chip-empty .class-chip-icon { filter: grayscale(1) brightness(0.7); }
.class-chip-empty .class-chip-count { color: var(--text-mute); }

.class-chip-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  mix-blend-mode: screen;
  filter: brightness(1.15) contrast(1.05);
}

/* 라이트 모드 class-chip-icon 도 동일하게 다크 처리 (chip 배경은 그대로 light, icon 만 다크). */
[data-theme="light"] .class-chip-icon {
  mix-blend-mode: multiply;
  filter: brightness(0.15) contrast(2.2);
}

.class-chip-icon-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-mute);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  mix-blend-mode: normal;
  filter: none;
}

.class-chip-name {
  font-weight: 500;
  letter-spacing: 0.2px;
}

.class-chip-count {
  font-family: "JetBrains Mono", "Consolas", monospace;
  color: var(--accent);
  font-weight: 600;
  font-size: 11px;
  margin-left: 2px;
}

.class-chip-null .class-chip-count {
  color: var(--text-mute);
}

.family-hero {
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 22px var(--gutter);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-strong);
}

.family-hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.family-hero-portrait {
  width: 330px;
  height: 110px;
  object-fit: cover;
  object-position: center 28%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  display: block;
  -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 75%, transparent 100%);
  filter: brightness(1.02) contrast(1.02) saturate(1.04);
}

.family-hero-portrait-class {
  background: transparent;
  border-color: var(--border);
}

.family-hero-portrait-empty {
  width: 330px;
  height: 110px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 2px;
  display: block;
  opacity: 0.45;
  -webkit-mask-image: none;
          mask-image: none;
  filter: none;
}

.family-hero-tier {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  text-decoration: none;
  transition: filter 0.12s;
}

.family-hero-tier:hover,
.family-hero-tier:focus-visible {
  filter: drop-shadow(0 0 8px rgba(77, 214, 232, 0.5));
  outline: none;
}

[data-theme="light"] .family-hero-tier:hover,
[data-theme="light"] .family-hero-tier:focus-visible {
  filter: drop-shadow(0 0 8px rgba(6, 97, 112, 0.5));
}

.family-hero-tier-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.06));
}

.family-hero-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.family-hero-title-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.family-hero-name {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
  line-height: 1.1;
  margin: 0;
}

.family-hero-back {
  margin-left: auto;
}

.family-hero-percentile {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1;
  cursor: help;
}

.family-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 24px;
}

.family-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.family-hero-stat-label {
  color: var(--text-mute);
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
}

.family-hero-stat-value {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.family-hero-stat-accent { color: var(--accent); }
.family-hero-stat-gold { color: var(--gold); }
.family-hero-stat-class {
  font-size: 16px;
  letter-spacing: 0.2px;
}

.family-hero-stat-variant {
  color: var(--accent);
  margin-right: 2px;
  font-size: 12px;
  font-weight: 500;
}

.family-hero-stat-sub {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.4px;
}

.family-hero-sparkline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--accent);
}

.family-hero-sparkline-label {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
  color: var(--text-mute);
  white-space: nowrap;
}

.family-hero-sparkline-wrap {
  flex: 1;
  min-width: 0;
  max-width: 240px;
  display: block;
  line-height: 0;
}

.family-hero-sparkline-meta {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.sparkline {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  color: var(--accent);
}

.sparkline-line {
  filter: drop-shadow(0 0 2px rgba(77, 214, 232, 0.45));
}

[data-theme="light"] .sparkline-line {
  filter: drop-shadow(0 0 2px rgba(6, 97, 112, 0.4));
}

.sparkline-dot {
  fill: var(--accent);
}

.sparkline-dot-max {
  fill: var(--gold);
}

.sparkline-dot-min {
  fill: var(--text-mute);
}

.expand-spark {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px dashed var(--border);
  color: var(--accent);
}

.expand-spark-label {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 1.6px;
  font-weight: 700;
  color: var(--text-mute);
  white-space: nowrap;
}

.expand-spark-wrap {
  flex: 1;
  min-width: 0;
  max-width: 200px;
  height: 32px;
  display: block;
  line-height: 0;
}

.expand-spark-meta {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.4px;
  white-space: nowrap;
}

/* ---------- expand panel mini timeline (v0.1.45) ---------- */
.expand-mini-chart {
  padding: 10px 14px 12px;
  border-top: 1px dashed var(--border);
}

.expand-mini-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 6px;
}

.expand-mini-label {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 1.6px;
  font-weight: 700;
  color: var(--text-mute);
}

.expand-mini-legend {
  margin-left: auto;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  color: var(--text-dim);
}

.expand-mini-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.expand-mini-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.expand-mini-svg {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
}

.expand-mini-axis-mmr {
  fill: var(--accent);
  font-size: 9px;
}

.expand-mini-axis-rank {
  fill: var(--gold);
  font-size: 9px;
}

.expand-mini-dot-mmr,
.expand-mini-dot-rank {
  stroke: var(--bg);
  stroke-width: 0.5;
}

.expand-mini-axis-date {
  fill: var(--text-mute);
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 8.5px;
  letter-spacing: 0.3px;
}

.expand-mini-deltas {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
}
.expand-mini-delta-chip {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.expand-mini-delta-rank-up,
.expand-mini-delta-mmr-up { color: var(--accent); background: rgba(77, 214, 232, 0.12); border-color: rgba(77, 214, 232, 0.30); }
.expand-mini-delta-rank-down,
.expand-mini-delta-mmr-down { color: var(--loss); background: rgba(232, 90, 92, 0.12); border-color: rgba(232, 90, 92, 0.30); }
.expand-mini-delta-rank-same,
.expand-mini-delta-mmr-zero { color: var(--text-mute); background: rgba(255, 255, 255, 0.04); border-color: var(--border); opacity: 0.75; font-style: italic; }
.expand-mini-delta-new {
  color: #0b0d11;
  background: var(--gold);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  box-shadow: 0 0 6px rgba(217, 163, 86, 0.40);
}

[data-theme="light"] .expand-mini-delta-rank-up,
[data-theme="light"] .expand-mini-delta-mmr-up {
  background: rgba(14, 139, 160, 0.12);
  border-color: rgba(14, 139, 160, 0.40);
}
[data-theme="light"] .expand-mini-delta-rank-down,
[data-theme="light"] .expand-mini-delta-mmr-down {
  background: rgba(201, 42, 42, 0.10);
  border-color: rgba(201, 42, 42, 0.35);
}
[data-theme="light"] .expand-mini-delta-rank-same,
[data-theme="light"] .expand-mini-delta-mmr-zero {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--border-strong);
}

.expand-value-winrate { color: var(--accent); }
.expand-value-unit {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
  margin-left: 2px;
}

.family-timeline {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.family-timeline-strip {
  display: flex;
  overflow-x: auto;
  scrollbar-color: var(--border-strong) transparent;
  padding: 0 var(--gutter);
}

.family-timeline-strip::-webkit-scrollbar {
  height: 6px;
}

.family-timeline-strip::-webkit-scrollbar-thumb {
  background: var(--border-strong);
}

.family-timeline-card {
  flex: 0 0 auto;
  min-width: 160px;
  padding: 14px 18px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.family-timeline-card:first-child {
  padding-left: 0;
}

.family-timeline-card:last-child {
  border-right: none;
  padding-right: 0;
}

.family-timeline-date {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 1.4px;
  font-weight: 600;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.family-timeline-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.family-timeline-label {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 9.5px;
  color: var(--text-mute);
  letter-spacing: 1.4px;
  font-weight: 600;
  min-width: 32px;
}

.family-timeline-value {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.family-timeline-mmr {
  color: var(--gold);
}

.family-timeline-winrate {
  font-size: 13px;
  color: var(--text);
}

.family-timeline-delta {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-left: 2px;
  color: var(--text-mute);
  white-space: nowrap;
}

.family-timeline-recent {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 3px;
}

.class-hero {
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 22px var(--gutter);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-strong);
}

.class-hero-left {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.class-hero-icon {
  width: 160px;
  height: 160px;
  object-fit: contain;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  display: block;
  filter: brightness(1.12) contrast(1.04);
}

.class-hero-portrait {
  width: 330px;
  height: 110px;
  object-fit: cover;
  object-position: center 28%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  display: block;
  -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 75%, transparent 100%);
  filter: brightness(1.02) contrast(1.02) saturate(1.04);
}

.class-hero-icon-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px dashed var(--border);
  color: var(--text-mute);
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.class-hero-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.class-hero-title-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.class-hero-name {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
  line-height: 1.1;
  margin: 0;
}

.class-hero-count {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--text-mute);
}

.class-hero-back {
  margin-left: auto;
}

.class-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 24px;
}

.class-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.class-hero-stat-label {
  color: var(--text-mute);
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
}

.class-hero-stat-value {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.class-hero-stat-accent { color: var(--accent); }
.class-hero-stat-gold { color: var(--gold); }
.class-hero-stat-mute { color: var(--text-mute); }

.class-hero-variants {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.class-hero-variants-label {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
  color: var(--text-mute);
  white-space: nowrap;
}

.class-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding: 12px var(--gutter) 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.class-stats-group {
  display: flex;
  align-items: center;
  gap: 22px;
}

.class-variant-group {
  gap: 12px;
}

.class-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 56px;
}

.class-stat-label {
  color: var(--text-mute);
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 9.5px;
  letter-spacing: 1.6px;
  font-weight: 600;
}

.class-stat-value {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--text);
  line-height: 1;
}

.class-stat-value-accent {
  color: var(--accent);
}

.class-stat-value-gold {
  color: var(--gold);
}

.class-stat-value-mute {
  color: var(--text-mute);
}

.class-stat-sub {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-mute);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.4px;
}

.class-variant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.class-variant-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.4px;
}

.class-variant-name {
  color: var(--text);
  font-weight: 500;
}

.class-variant-count {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-weight: 600;
  color: var(--text-mute);
}

.class-variant-succession .class-variant-name {
  color: var(--accent);
}
.class-variant-succession .class-variant-count {
  color: var(--accent);
}
.class-variant-succession {
  border-color: rgba(77, 214, 232, 0.35);
}

[data-theme="light"] .class-variant-succession {
  border-color: rgba(6, 97, 112, 0.35);
}

.class-variant-awakening .class-variant-name {
  color: #d96b6b;
}
.class-variant-awakening .class-variant-count {
  color: #d96b6b;
}
.class-variant-awakening {
  border-color: rgba(217, 107, 107, 0.35);
}

.class-variant-ascension .class-variant-name {
  color: var(--text);
}
.class-variant-ascension .class-variant-count {
  color: var(--text);
}

.tier-hero {
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 22px var(--gutter);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-strong);
}

.tier-hero-left {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tier-hero-icon {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 8px rgba(77, 214, 232, 0.18));
}

.tier-hero-icon-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px dashed var(--border);
  color: var(--text-mute);
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 36px;
  font-weight: 700;
}

.tier-hero-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.tier-hero-title-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.tier-hero-name {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
  line-height: 1.1;
  margin: 0;
}

.tier-hero-range {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 13px;
  letter-spacing: 0.8px;
  color: var(--gold);
}

.tier-hero-count {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--text-mute);
}

.tier-hero-back {
  margin-left: auto;
}

.tier-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 24px;
}

.tier-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tier-hero-stat-label {
  color: var(--text-mute);
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
}

.tier-hero-stat-value {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tier-hero-stat-accent { color: var(--accent); }
.tier-hero-stat-gold { color: var(--gold); }
.tier-hero-stat-mute { color: var(--text-mute); }

.tier-hero-classes {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.tier-hero-classes-label {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
  color: var(--text-mute);
  white-space: nowrap;
}

.tier-hero-class-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tier-hero-class-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 5px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.4px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease;
}

.tier-hero-class-chip:hover {
  border-color: rgba(77, 214, 232, 0.45);
  color: var(--accent);
}

[data-theme="light"] .tier-hero-class-chip:hover {
  border-color: rgba(6, 97, 112, 0.45);
}

.tier-hero-class-chip-null {
  color: var(--text-mute);
}

.tier-hero-class-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.tier-hero-class-name {
  font-weight: 500;
}

.tier-hero-class-count {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-weight: 600;
  color: var(--text-mute);
}

.rank-header, .rank-row {
  display: grid;
  grid-template-columns: 50px 110px 95px 56px 1fr 28px 110px 150px 175px 18px;
  align-items: center;
  gap: 10px;
  padding: 1px var(--table-pad);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  overflow: hidden;
}

/* col-classsym — portrait 우측 클래스 심볼 + variant badge (1~100등 모두, 게임 인게임 UI 패턴). */
.col-classsym {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.class-symbol-mini {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.85;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
  flex-shrink: 0;
}

.variant-badge-mini {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
  flex-shrink: 0;
}

/* 라이트 모드 symbol/badge 자체를 다크 처리 — mix-blend-mode 변경 + brightness 어둡게.
 * dark panel 배경 추가 X (사용자 v0.2.33: 심볼 이미지 자체만 다크). */
[data-theme="light"] .class-symbol-mini,
[data-theme="light"] .variant-badge-mini {
  mix-blend-mode: multiply;
  filter: brightness(0.15) contrast(2.2);
}

.rank-gold .class-symbol-mini,
.rank-silver .class-symbol-mini,
.rank-bronze .class-symbol-mini {
  width: 28px;
  height: 28px;
  opacity: 1;
}

.rank-gold .variant-badge-mini,
.rank-silver .variant-badge-mini,
.rank-bronze .variant-badge-mini {
  width: 24px;
  height: 24px;
  opacity: 1;
}

/* 1/2/3등 class-label 안의 variant-badge 는 col-classsym 에 중복 표시되므로 숨김 (시각 노이즈 제거) */
.rank-gold .col-name .class-label .variant-badge,
.rank-silver .col-name .class-label .variant-badge,
.rank-bronze .col-name .class-label .variant-badge {
  display: none;
}

.col-tier {
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-tier-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: filter 0.12s, transform 0.08s;
}

.col-tier-link:hover,
.col-tier-link:focus-visible {
  filter: drop-shadow(0 0 6px rgba(77, 214, 232, 0.5));
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.col-tier-link:focus:not(:focus-visible) {
  outline: none;
}

.col-tier img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

.rank-gold .col-tier img,
.rank-silver .col-tier img,
.rank-bronze .col-tier img {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.08));
}

.col-portrait {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.col-portrait {
  position: relative;
  height: 30px;
  overflow: hidden;
}

.portrait-img {
  width: 90px;
  height: 30px;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  border-radius: 2px;
  filter: brightness(1.02) contrast(1.03);
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
}

.portrait-slot {
  width: 90px;
  height: 30px;
  background: transparent;
  border: 1px dashed var(--border);
  opacity: 0.35;
}

.rank-gold .col-portrait,
.rank-silver .col-portrait,
.rank-bronze .col-portrait {
  height: 72px;
  /* portrait 가 좌측 col-rank 영역으로 침범 — col-portrait grid 95px 그대로 + transform -80 좌측 ordinal 위 overlay.
   * grid 자체는 4+등과 동일 (175 폐기) → 다음 column (col-classsym 등) 위치 4+등 정렬 통일. */
  position: relative;
  z-index: 1;
  transform: translateX(-80px);
  overflow: visible;
}

.rank-gold .portrait-img,
.rank-silver .portrait-img,
.rank-bronze .portrait-img {
  width: 175px;
  height: 72px;
  object-position: center 22%;
  /* visible 영역: -80 ~ +95 (총 175). 좌측 5% fade in / 우측 75% fade out */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 75%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 75%, transparent 100%);
  filter: brightness(1.05) contrast(1.04) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

/* ordinal 글자가 portrait 좌측 face 위에 그려지도록 z-index 우선 */
.rank-row.rank-gold .col-rank,
.rank-row.rank-silver .col-rank,
.rank-row.rank-bronze .col-rank {
  z-index: 3;
}

[data-theme="light"] .rank-gold .portrait-img,
[data-theme="light"] .rank-silver .portrait-img,
[data-theme="light"] .rank-bronze .portrait-img {
  filter: brightness(1.02) contrast(1.04) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.18));
}

.rank-gold .portrait-slot,
.rank-silver .portrait-slot,
.rank-bronze .portrait-slot {
  width: 160px;
  height: 70px;
}

.col-classsym {
  display: flex;
  align-items: center;
  justify-content: center;
}

.classsym-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: filter 0.12s;
}

.classsym-link:hover,
.classsym-link:focus-visible {
  filter: drop-shadow(0 0 6px rgba(77, 214, 232, 0.55));
  outline: none;
}

.classsym-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  mix-blend-mode: screen;
  filter: brightness(1.2) contrast(1.05);
}

.rank-gold .classsym-img,
.rank-silver .classsym-img,
.rank-bronze .classsym-img {
  width: 44px;
  height: 44px;
}

.col-search {
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--text-mute);
  border: 1px solid var(--border);
  border-radius: 50%;
  text-decoration: none;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.search-icon-link:hover,
.search-icon-link:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(77, 214, 232, 0.06);
  outline: none;
}

.search-icon {
  width: 14px;
  height: 14px;
  display: block;
}

.rank-gold .search-icon-link,
.rank-silver .search-icon-link,
.rank-bronze .search-icon-link {
  width: 30px;
  height: 30px;
}

.rank-gold .search-icon,
.rank-silver .search-icon,
.rank-bronze .search-icon {
  width: 16px;
  height: 16px;
}

.col-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  font-size: 9px;
  user-select: none;
  overflow: visible;
}

.expand-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.expand-chevron-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--text-mute);
  transition: color 0.12s;
  font-size: 13px;
}

.expand-chevron-label:hover {
  color: var(--accent);
}

.expand-toggle:focus-visible ~ .rank-row .expand-chevron-label {
  color: var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.expand-chevron {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.rank-wrap {
  display: block;
}

.expand-toggle:checked ~ .rank-row .expand-chevron {
  transform: rotate(180deg);
}

.expand-toggle:checked ~ .rank-row .expand-chevron-label {
  color: var(--accent);
}

.expand-panel {
  max-height: 0;
  overflow: hidden;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 var(--table-pad);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.expand-toggle:checked ~ .expand-panel {
  max-height: 320px;
  padding-top: 16px;
  padding-bottom: 18px;
}

.expand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 28px;
  align-items: start;
}

.expand-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.expand-label {
  color: var(--text-mute);
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 9.5px;
  letter-spacing: 1.8px;
  font-weight: 600;
}

.expand-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.2px;
  line-height: 1.15;
}

.expand-value-mute {
  color: var(--text-mute);
  font-size: 14px;
}

.expand-sub {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.4px;
}

.expand-record-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.4px;
}

.expand-record-w { color: var(--text); }
.expand-record-d { color: var(--text-mute); }
.expand-record-l { color: var(--text-dim); }
.expand-record-sep { color: var(--text-mute); font-weight: 400; }

.expand-recent-cell .expand-dots {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 22px;
}

.dot.dot-big {
  width: 14px;
  height: 14px;
}

.dot.dot-big.dot-win {
  box-shadow: 0 0 7px rgba(77, 214, 232, 0.55);
}

.dot.dot-big.dot-loss {
  box-shadow: 0 0 6px rgba(232, 90, 92, 0.45);
}

.expand-placeholder {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.expand-placeholder-label {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold-soft);
  border: 1px solid var(--gold-soft);
  padding: 2px 7px;
}

.expand-placeholder-text {
  font-size: 11.5px;
  color: var(--text-mute);
  letter-spacing: 0.3px;
}

.rank-header {
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text-mute);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.rank-header .col-winrate,
.rank-header .col-record {
  text-align: center;
}

.rank-header .col-rating {
  text-align: right;
}

.ranking {
  display: flex;
  flex-direction: column;
}

.rank-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  background: var(--bg-row);
}

.rank-row:hover {
  background: var(--bg-row-hover);
}

/* 모든 row 통일 hover — translateX + inset accent border (사용자 v0.2.20 요청: 1/2/3등도 4+등과 동일) */
.rank-row:hover {
  transform: translateX(2px);
  box-shadow: inset 3px 0 0 var(--accent);
}

.rank-pending {
  background: rgba(230, 185, 40, 0.07);
}

[data-theme="light"] .rank-pending {
  background: rgba(200, 155, 10, 0.10);
}

.rank-pending-mark {
  font-size: 9px;
  color: #b8920a;
  font-weight: 700;
  letter-spacing: 0.2px;
  vertical-align: middle;
  margin-left: 3px;
  opacity: 0.85;
}

[data-theme="light"] .rank-pending-mark {
  color: #8a6300;
}

.rank-row.rank-gold,
.rank-row.rank-silver,
.rank-row.rank-bronze {
  padding-top: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-strong);
  min-height: 88px;
  /* 1/2/3등 grid 를 4+등과 완전 동일 (사용자 v0.2.14 요청: col-classsym/family/winrate/MMR 등 모든 column 위치 4+등과 정렬).
   * portrait 는 transform 으로 좌측 침범하여 col-rank 영역에서 ordinal 위 overlay 유지. */
}

.rank-row.rank-gold {
  background: linear-gradient(90deg,
    rgba(195, 140, 48, 0.62) 0%,
    rgba(170, 118, 42, 0.44) 30%,
    rgba(100, 70, 28, 0.28) 65%,
    rgba(40, 30, 22, 0.28) 100%);
}

.rank-row.rank-silver {
  background: linear-gradient(90deg,
    rgba(58, 82, 110, 0.55) 0%,
    rgba(48, 70, 95, 0.40) 35%,
    rgba(35, 50, 70, 0.28) 70%,
    rgba(28, 38, 52, 0.30) 100%);
}

.rank-row.rank-bronze {
  background: linear-gradient(90deg,
    rgba(150, 90, 50, 0.45) 0%,
    rgba(130, 75, 42, 0.30) 35%,
    rgba(82, 56, 32, 0.20) 70%,
    rgba(40, 28, 20, 0.28) 100%);
}

[data-theme="light"] .rank-row.rank-gold {
  background: linear-gradient(90deg,
    rgba(217, 163, 86, 0.58) 0%,
    rgba(217, 163, 86, 0.36) 40%,
    rgba(217, 163, 86, 0.16) 70%,
    rgba(250, 248, 243, 0.85) 100%);
}

[data-theme="light"] .rank-row.rank-silver {
  background: linear-gradient(90deg,
    rgba(100, 120, 155, 0.35) 0%,
    rgba(130, 148, 175, 0.22) 40%,
    rgba(160, 175, 200, 0.12) 70%,
    rgba(250, 248, 243, 0.85) 100%);
}

[data-theme="light"] .rank-row.rank-bronze {
  background: linear-gradient(90deg,
    rgba(160, 43, 59, 0.22) 0%,
    rgba(192, 132, 84, 0.22) 25%,
    rgba(192, 132, 84, 0.10) 65%,
    rgba(250, 248, 243, 0.85) 100%);
}

.col-rank {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: "JetBrains Mono", "Consolas", monospace;
}

.rank-num {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

.rank-suffix {
  font-size: 11px;
  color: var(--text-mute);
}

.rank-gold .col-rank,
.rank-silver .col-rank,
.rank-bronze .col-rank {
  font-family: "Pretendard", "Georgia", "Times New Roman", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.rank-gold .rank-num {
  color: var(--gold);
  font-size: 64px;
  font-weight: 700;
  line-height: 0.85;
  opacity: 0.95;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75), 0 0 6px rgba(0, 0, 0, 0.85), 0 2px 12px rgba(224, 169, 72, 0.5);
  letter-spacing: -2px;
}
.rank-gold .rank-suffix {
  color: var(--gold);
  font-size: 18px;
  font-weight: 600;
  margin-left: 2px;
  opacity: 0.95;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(224, 169, 72, 0.35);
}

.rank-silver .rank-num {
  color: var(--silver);
  font-size: 58px;
  font-weight: 700;
  line-height: 0.85;
  opacity: 0.95;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75), 0 0 6px rgba(0, 0, 0, 0.85), 0 2px 12px rgba(197, 205, 216, 0.4);
  letter-spacing: -2px;
}
.rank-silver .rank-suffix {
  color: var(--silver);
  font-size: 16px;
  font-weight: 600;
  margin-left: 2px;
  opacity: 0.95;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(197, 205, 216, 0.3);
}

.rank-bronze .rank-num {
  color: #d99088;
  font-size: 58px;
  font-weight: 700;
  line-height: 0.85;
  opacity: 0.95;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75), 0 0 6px rgba(0, 0, 0, 0.85), 0 2px 12px rgba(217, 144, 136, 0.4);
  letter-spacing: -2px;
}
.rank-bronze .rank-suffix {
  color: #d99088;
  font-size: 16px;
  font-weight: 600;
  margin-left: 2px;
  opacity: 0.95;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(217, 144, 136, 0.3);
}

.rank-delta {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-left: 8px;
  color: var(--text-mute);
  white-space: nowrap;
  align-self: center;
  transition: color 0.12s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}

.delta-up {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(77, 214, 232, 0.5);
}

.rank-row:hover .delta-up {
  text-shadow: 0 0 12px rgba(77, 214, 232, 0.75);
}

.delta-down {
  color: var(--loss);
  text-shadow: 0 0 8px rgba(232, 90, 92, 0.45);
}

.rank-row:hover .delta-down {
  text-shadow: 0 0 12px rgba(232, 90, 92, 0.7);
}

.delta-new {
  color: #0b0d11;
  background: var(--gold);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.8px;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 0 8px rgba(217, 163, 86, 0.45);
  transition: box-shadow 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}

.rank-row:hover .delta-new {
  box-shadow: 0 0 14px rgba(217, 163, 86, 0.7);
}

.delta-same {
  color: var(--text-dim);
  opacity: 0.85;
  font-style: italic;
}

.rank-gold .col-rank,
.rank-silver .col-rank,
.rank-bronze .col-rank {
  position: relative;
}

.rank-gold .rank-delta,
.rank-silver .rank-delta,
.rank-bronze .rank-delta {
  position: absolute;
  top: 0;
  left: 56px;
  right: auto;
  margin-left: 0;
  vertical-align: baseline;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
  line-height: 1.1;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.rank-gold .delta-up,
.rank-silver .delta-up,
.rank-bronze .delta-up {
  background: rgba(77, 214, 232, 0.16);
  border-color: rgba(77, 214, 232, 0.5);
  text-shadow: 0 0 8px rgba(77, 214, 232, 0.65);
}

.rank-gold .delta-down,
.rank-silver .delta-down,
.rank-bronze .delta-down {
  background: rgba(232, 90, 92, 0.16);
  border-color: rgba(232, 90, 92, 0.5);
  text-shadow: 0 0 8px rgba(232, 90, 92, 0.6);
}

.rank-gold .delta-same,
.rank-silver .delta-same,
.rank-bronze .delta-same {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.rank-gold .delta-new,
.rank-silver .delta-new,
.rank-bronze .delta-new {
  position: absolute;
  top: 0;
  left: 56px;
  right: auto;
  margin-left: 0;
  vertical-align: baseline;
  font-size: 10px;
  padding: 1px 6px;
  line-height: 1.1;
  background: var(--gold);
  border: 1px solid transparent;
  color: #0b0d11;
  z-index: 5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.class-badge {
  width: 34px;
  height: 34px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  font-family: "JetBrains Mono", monospace;
}

.class-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  mix-blend-mode: screen;
  filter: brightness(1.15) contrast(1.05);
}

.rank-gold .class-icon,
.rank-silver .class-icon,
.rank-bronze .class-icon {
  width: 44px;
  height: 44px;
}

.class-badge-empty {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-mute);
}

.col-name {
  min-width: 0;
}

.col-name .family {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.col-name .family-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.col-name .family-link:hover,
.col-name .family-link:focus-visible {
  border-bottom-color: currentColor;
  outline: none;
}

.rank-gold .col-name .family { font-size: 18px; color: var(--gold); line-height: 1.15; }
.rank-silver .col-name .family { font-size: 17px; color: var(--silver); line-height: 1.15; }
.rank-bronze .col-name .family { font-size: 17px; color: var(--bronze); line-height: 1.15; }

.col-name .class-label {
  font-size: 10px;
  color: var(--text-mute);
  margin-top: 0;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

/* 1/2/3등: family 와 class-label 사이 자연 여백 + class-label 폰트/letter-spacing 살짝 ↑ */
.rank-gold .col-name .class-label,
.rank-silver .col-name .class-label,
.rank-bronze .col-name .class-label {
  font-size: 11px;
  margin-top: 4px;
  letter-spacing: 0.6px;
  line-height: 1.3;
}

/* variant badge + class label 텍스트 사이 자연 spacing */
.rank-gold .col-name .variant-badge,
.rank-silver .col-name .variant-badge,
.rank-bronze .col-name .variant-badge {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

/* 컴팩트 행 (4+등): class-label 숨김 — col-classsym banner + col-classband 가 클래스/variant 표시. row height ↓. */
.rank-row:not(.rank-gold):not(.rank-silver):not(.rank-bronze) .col-name .class-label {
  display: none;
}

.col-name .variant {
  color: var(--accent);
  margin-right: 4px;
  font-weight: 500;
}

.variant-badge {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 5px;
  filter: drop-shadow(0 0 3px rgba(77, 214, 232, 0.35));
}

.rank-gold .variant-badge,
.rank-silver .variant-badge,
.rank-bronze .variant-badge {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
}

.portrait-class-art {
  background: transparent;
}

.class-link {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 0.12s, border-color 0.12s;
}

.class-link:hover,
.class-link:focus-visible {
  color: var(--text);
  border-bottom-color: currentColor;
  outline: none;
}

.back-link {
  color: var(--text-dim);
  text-decoration: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  transition: color 0.12s;
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--accent);
  outline: none;
}

.error-page {
  padding: 96px var(--gutter) 140px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  border-bottom: 1px solid var(--border-strong);
}

.error-status {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.error-status-code {
  font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
  font-size: 116px;
  font-weight: 700;
  letter-spacing: -2px;
  color: var(--accent);
  line-height: 1;
}

.error-status-label {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--text-mute);
  font-weight: 700;
  text-transform: uppercase;
}

.error-message {
  font-size: 16px;
  color: var(--text);
  font-weight: 500;
  margin: 0;
}

.error-detail {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}

.error-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.error-action-primary,
.error-action-secondary {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 9px 14px;
  border: 1px solid var(--border-strong);
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.error-action-primary {
  color: var(--accent);
  border-color: rgba(77, 214, 232, 0.45);
}

.error-action-primary:hover,
.error-action-primary:focus-visible {
  color: var(--accent-strong);
  border-color: var(--accent);
  background: rgba(77, 214, 232, 0.06);
  outline: none;
}

.error-action-secondary {
  color: var(--text-dim);
}

.error-action-secondary:hover,
.error-action-secondary:focus-visible {
  color: var(--text);
  border-color: var(--text-dim);
  outline: none;
}

.col-winrate {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.winrate-value {
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.winrate-bar {
  width: 80px;
  height: 5px;
  background: rgba(77, 214, 232, 0.10);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}

.winrate-bar-fill {
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 4px rgba(77, 214, 232, 0.45);
  transition: background-color 0.15s;
}

.winrate-bar-fill.wr-elite {
  background: var(--gold);
  box-shadow: 0 0 6px rgba(217, 163, 86, 0.55);
}

.winrate-bar-fill.wr-strong {
  background: var(--accent);
  box-shadow: 0 0 5px rgba(77, 214, 232, 0.5);
}

.winrate-bar-fill.wr-weak {
  background: var(--text-mute);
  box-shadow: none;
  opacity: 0.55;
}

.winrate-value.wr-elite-text {
  color: var(--gold);
}

.winrate-value.wr-weak-text {
  color: var(--text-mute);
}

.col-record {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 12px;
  color: var(--text-dim);
  padding-left: 20px;
  padding-right: 20px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.rec-w { color: var(--text); }
.rec-d { color: var(--text-mute); }
.rec-l { color: var(--text-dim); }
.rec-sep { color: var(--text-mute); margin: 0 3px; }

.col-recent {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: flex-start;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 14px;
}

.recent-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-weight: 600;
  line-height: 1;
}

.recent-win {
  color: var(--accent);
  text-shadow: 0 0 6px rgba(77, 214, 232, 0.45);
}

.recent-loss {
  color: #e85a5c;
  text-shadow: 0 0 6px rgba(232, 90, 92, 0.35);
  font-weight: 700;
}

.recent-empty {
  color: var(--text-mute);
}

.recent-sep {
  color: var(--text-mute);
  opacity: 0.5;
  font-weight: 300;
  margin: 0 1px;
}

.rank-gold .col-recent,
.rank-silver .col-recent,
.rank-bronze .col-recent {
  font-size: 16px;
}

.rank-gold .recent-mark,
.rank-silver .recent-mark,
.rank-bronze .recent-mark {
  width: 20px;
  height: 20px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--neutral);
  display: inline-block;
}

.dot-win {
  background: var(--win);
  box-shadow: 0 0 4px rgba(77, 214, 232, 0.5);
}

.dot-loss {
  background: var(--loss);
  box-shadow: 0 0 4px rgba(232, 90, 92, 0.4);
}

.dot-empty {
  background: var(--neutral);
}

.col-rating {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 22px;
  font-weight: 800;
  text-align: right;
  color: var(--gold);
  letter-spacing: 0.5px;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.col-rating-value {
  /* MMR 값 자체 — 부모 폰트/색 inherit */
}

.col-rating-delta {
  min-width: 72px;
  text-align: left;
  flex-shrink: 0;
}

.rank-gold .col-rating-delta,
.rank-silver .col-rating-delta,
.rank-bronze .col-rating-delta {
  min-width: 64px;
}

.rank-gold .col-rating {
  font-size: 32px;
  text-shadow: 0 2px 10px rgba(224, 169, 72, 0.35);
}
.rank-silver .col-rating {
  font-size: 32px;
  text-shadow: 0 2px 10px rgba(224, 169, 72, 0.30);
}
.rank-bronze .col-rating {
  font-size: 32px;
  text-shadow: 0 2px 10px rgba(224, 169, 72, 0.30);
}

.rating-delta {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  vertical-align: middle;
  text-shadow: none;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.rating-delta-up {
  color: var(--accent);
  background: rgba(77, 214, 232, 0.12);
  border-color: rgba(77, 214, 232, 0.30);
}
.rating-delta-down {
  color: var(--loss);
  background: rgba(232, 90, 92, 0.12);
  border-color: rgba(232, 90, 92, 0.30);
}
.rating-delta-zero {
  color: var(--text-mute);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  opacity: 0.75;
  font-style: italic;
}

/* [data-theme="light"] .rating-delta-up 는 line 99-103 에 통합됨 (teal #066170 톤 통일) */
[data-theme="light"] .rating-delta-down {
  background: rgba(201, 42, 42, 0.10);
  border-color: rgba(201, 42, 42, 0.35);
}
[data-theme="light"] .rating-delta-zero {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--border-strong);
}

.rank-gold .rating-delta,
.rank-silver .rating-delta,
.rank-bronze .rating-delta {
  font-size: 12px;
  padding: 3px 6px;
}

.empty {
  padding: 80px var(--gutter);
  text-align: center;
  color: var(--text-dim);
}

.empty-hint {
  margin-top: 10px;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  color: var(--text-mute);
}

.search-results {
  padding-bottom: 24px;
}

.search-results-header,
.search-row {
  display: grid;
  grid-template-columns: 1fr 1fr 130px 90px;
  align-items: center;
  gap: 18px;
  padding: 10px var(--table-pad);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.search-results-header {
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-mute);
  text-transform: uppercase;
}

.search-row {
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: background 0.12s ease-out, color 0.12s ease-out;
}

.search-row:hover,
.search-row:focus-visible {
  background: var(--bg-row-hover);
  color: var(--accent);
  outline: none;
}

.search-col-name {
  font-size: 14px;
  font-weight: 600;
}

.search-col-class {
  color: var(--text-dim);
  font-size: 12.5px;
}

.search-row:hover .search-col-class {
  color: var(--accent-strong);
}

.search-variant {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10.5px;
  color: var(--text-mute);
  margin-right: 4px;
}

.search-class-empty {
  color: var(--text-mute);
}

.search-col-date {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11.5px;
  color: var(--text-mute);
  text-align: right;
}

.search-col-count {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 13px;
  color: var(--gold);
  text-align: right;
}

@media (max-width: 900px) {
  .site-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  .site-search {
    width: 100%;
    justify-content: flex-start;
  }
  .site-search-input {
    flex: 1;
    width: auto;
    min-width: 0;
  }
  .search-results-header,
  .search-row {
    grid-template-columns: 1.2fr 1fr 60px;
    gap: 10px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .search-col-date {
    display: none;
  }
}

.site-footer {
  padding: 22px var(--gutter) 14px;
  border-top: 1px solid var(--border-strong);
  color: var(--text-mute);
  background: var(--bg);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.footer-col-label {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 2.2px;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 9px;
}

.footer-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-list li {
  font-size: 11.5px;
  line-height: 1.55;
}

.footer-list a {
  color: var(--text-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transition: color 0.15s ease-out;
}

.footer-list a:hover,
.footer-list a:focus-visible {
  color: var(--accent);
  outline: none;
}

.footer-count {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  color: var(--text-mute);
}

.footer-list a:hover .footer-count {
  color: var(--accent-strong);
}

.footer-empty {
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding-top: 12px;
  font-size: 10px;
}

.footer-meta-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.footer-meta-cell-trail {
  margin-left: auto;
}

.footer-meta-label {
  font-family: "JetBrains Mono", "Consolas", monospace;
  letter-spacing: 2px;
  color: var(--text-mute);
  text-transform: uppercase;
}

.footer-meta-value {
  font-family: "JetBrains Mono", "Consolas", monospace;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

@media (max-width: 900px) {
  .rank-header, .rank-row {
    grid-template-columns: 44px 44px 50px 1fr 70px 76px;
    gap: 8px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .rank-row.rank-gold,
  .rank-row.rank-silver,
  .rank-row.rank-bronze {
    padding-left: 11px;
    min-height: 80px;
  }
  .rank-header .col-classsym,
  .rank-header .col-search,
  .rank-header .col-record,
  .rank-header .col-recent,
  .rank-header .col-expand,
  .rank-row .col-classsym,
  .rank-row .col-search,
  .rank-row .col-record,
  .rank-row .col-recent,
  .rank-row .col-expand {
    display: none;
  }
  .col-tier img { width: 36px; height: 36px; }
  .rank-gold .col-tier img,
  .rank-silver .col-tier img,
  .rank-bronze .col-tier img { width: 44px; height: 44px; }
  .col-portrait { height: 44px; }
  .portrait-img, .portrait-slot { width: 68px; height: 44px; }
  .rank-gold .col-portrait,
  .rank-silver .col-portrait,
  .rank-bronze .col-portrait { height: 60px; }
  .rank-gold .portrait-img,
  .rank-gold .portrait-slot,
  .rank-silver .portrait-img,
  .rank-silver .portrait-slot,
  .rank-bronze .portrait-img,
  .rank-bronze .portrait-slot { width: 90px; height: 60px; }
  .rank-gold .rank-num { font-size: 46px; }
  .rank-silver .rank-num, .rank-bronze .rank-num { font-size: 40px; }
  .rank-gold .rank-suffix,
  .rank-silver .rank-suffix,
  .rank-bronze .rank-suffix { font-size: 14px; }
  .site-header, .snapshot-meta, .site-footer {
    padding-left: 14px;
    padding-right: 14px;
  }
  .brand-sub { display: none; }
  .stats-panel {
    padding-left: 14px;
    padding-right: 14px;
    flex-direction: column;
    gap: 10px;
  }
  .stats-label {
    padding-top: 0;
    min-width: 0;
  }
  .stats-rows {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .stats-tier-range { display: none; }
  .stats-tier-name { font-size: 10.5px; }
  .stats-tier-icon { width: 22px; height: 22px; }
  .stats-count { font-size: 12px; }
  .class-dist-chips { gap: 5px; padding-top: 0; }
  .class-chip { padding: 4px 7px 4px 4px; font-size: 10.5px; gap: 5px; }
  .class-chip-icon { width: 16px; height: 16px; }
  .class-chip-icon-empty { font-size: 9px; }
  .class-chip-count { font-size: 10px; }
  .expand-panel,
  .expand-toggle:checked ~ .expand-panel {
    display: none;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 22px;
  }
  .footer-meta {
    flex-direction: column;
    gap: 6px;
  }
  .footer-meta-cell-trail {
    margin-left: 0;
  }
  .error-page {
    padding: 56px var(--gutter) 80px;
  }
  .error-status-code {
    font-size: 78px;
  }
  .error-status-label {
    font-size: 13px;
  }
  .error-message {
    font-size: 14px;
  }
  .error-detail {
    font-size: 12px;
  }
  .class-hero {
    padding: 14px;
    flex-direction: column;
    gap: 14px;
  }
  .class-hero-icon,
  .class-hero-icon-empty {
    width: 96px;
    height: 96px;
  }
  .class-hero-icon-empty {
    font-size: 34px;
  }
  .class-hero-name {
    font-size: 22px;
  }
  .class-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }
  .class-hero-stat-value {
    font-size: 18px;
  }
  .class-hero-back {
    margin-left: 0;
    margin-top: 2px;
  }
  .class-hero-variants {
    gap: 10px;
    padding-top: 10px;
  }
  .tier-hero {
    padding: 14px;
    flex-direction: column;
    gap: 14px;
  }
  .tier-hero-icon,
  .tier-hero-icon-empty {
    width: 72px;
    height: 72px;
  }
  .tier-hero-icon-empty {
    font-size: 26px;
  }
  .tier-hero-name {
    font-size: 22px;
  }
  .tier-hero-range {
    font-size: 12px;
  }
  .tier-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }
  .tier-hero-stat-value {
    font-size: 18px;
  }
  .tier-hero-back {
    margin-left: 0;
    margin-top: 2px;
  }
  .tier-hero-classes {
    gap: 10px;
    padding-top: 10px;
  }
  .class-stats {
    padding-left: 14px;
    padding-right: 14px;
    gap: 14px 22px;
  }
  .class-stats-group {
    gap: 14px;
  }
  .class-stat-value {
    font-size: 15px;
  }
  .family-hero {
    padding: 14px;
    flex-direction: column;
    gap: 14px;
  }
  .family-hero-left {
    gap: 12px;
  }
  .family-hero-portrait,
  .family-hero-portrait-empty {
    width: 220px;
    height: 80px;
  }
  .family-hero-tier,
  .family-hero-tier-img {
    width: 64px;
    height: 64px;
  }
  .family-hero-name {
    font-size: 22px;
  }
  .family-hero-percentile {
    font-size: 10px;
    padding: 3px 8px;
    letter-spacing: 0.8px;
  }
  .family-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }
  .family-hero-stat-value {
    font-size: 18px;
  }
  .family-hero-stat-class {
    font-size: 13px;
  }
  .family-hero-back {
    margin-left: 0;
    margin-top: 2px;
  }
  .family-hero-sparkline {
    gap: 10px;
    padding-top: 10px;
  }
  .family-hero-sparkline-wrap {
    max-width: 200px;
  }
  .expand-spark {
    gap: 10px;
    padding: 8px 12px;
  }
  .expand-spark-wrap {
    max-width: 160px;
    height: 28px;
  }
  .family-timeline-strip {
    padding: 0 14px;
  }
  .family-timeline-card {
    min-width: 140px;
    padding: 12px 14px;
    gap: 6px;
  }
  .family-timeline-value {
    font-size: 14px;
  }
  .family-timeline-date {
    font-size: 10.5px;
    letter-spacing: 1px;
  }
  .snapshot-meta {
    padding-left: 14px;
    padding-right: 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── 600px 모바일 — rank-row T6 (Phase D) ── */
@media (max-width: 600px) {
  /* T6.1 — portrait 48px compact + col-winrate hide */
  .rank-header, .rank-row {
    grid-template-columns: 32px 26px 40px 1fr 55px;
    gap: 6px;
  }
  .rank-header .col-winrate,
  .rank-row .col-winrate {
    display: none;
  }
  .col-portrait { height: 36px; }
  .portrait-img, .portrait-slot { width: 48px; height: 36px; }
  .rank-gold .col-portrait,
  .rank-silver .col-portrait,
  .rank-bronze .col-portrait { height: 52px; }
  .rank-gold .portrait-img, .rank-gold .portrait-slot,
  .rank-silver .portrait-img, .rank-silver .portrait-slot,
  .rank-bronze .portrait-img, .rank-bronze .portrait-slot { width: 64px; height: 52px; }
  .rank-row.rank-gold,
  .rank-row.rank-silver,
  .rank-row.rank-bronze { min-height: 70px; }

  /* T6.2 — 1/2/3등 ordinal 축소 */
  .rank-gold .rank-num { font-size: 36px; }
  .rank-silver .rank-num, .rank-bronze .rank-num { font-size: 30px; }
  .rank-gold .rank-suffix,
  .rank-silver .rank-suffix,
  .rank-bronze .rank-suffix { font-size: 12px; }

  /* T6.3 — T1 새 폰트 크기 모바일 축소 */
  .col-rating { font-size: 17px; }
  .rank-gold .col-rating,
  .rank-silver .col-rating,
  .rank-bronze .col-rating { font-size: 24px; }
  .col-name .family { font-size: 13px; }
  .rank-gold .col-name .family { font-size: 15px; }
  .rank-silver .col-name .family,
  .rank-bronze .col-name .family { font-size: 14px; }
}

@media (max-width: 560px) {
  .stats-rows {
    grid-template-columns: repeat(2, 1fr);
  }
  .rank-header, .rank-row {
    grid-template-columns: 36px 36px 44px 1fr 60px;
    gap: 6px;
  }
  .rank-header .col-winrate,
  .rank-row .col-winrate {
    display: none;
  }
  .class-stats-group {
    flex-wrap: wrap;
  }
  .class-stat {
    min-width: 0;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .search-results-header,
  .search-row {
    grid-template-columns: 1fr 60px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .search-col-class {
    display: none;
  }
  .error-status-code {
    font-size: 60px;
  }
}

/* ---------- /trends 페이지 (v0.1.38) ---------- */
.trends-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 22px var(--gutter) 18px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-strong);
}

.trends-hero-title {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 28px;
  letter-spacing: 4px;
  font-weight: 700;
  color: var(--text);
}

.trends-hero-sub {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-dim);
  letter-spacing: 0.4px;
}

.trends-hero-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
}

.trends-hero-meta-label {
  color: var(--text-mute);
  font-weight: 700;
}

.trends-hero-meta-value {
  color: var(--text);
}

.trends-hero-meta-sep {
  color: var(--text-mute);
}

.trends-panel {
  margin: 0 var(--gutter);
  padding: 18px 0 24px;
  border-bottom: 1px solid var(--border);
}

.trends-panel-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 0 4px 12px;
}

.trends-panel-title {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--accent);
}

.trends-panel-hint {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.4px;
}

.trends-chart-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 4px 0;
}

.trends-chart {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.trends-axis {
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.trends-tick {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.trends-axis-label {
  fill: var(--text-mute);
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 0.6px;
}

.trends-line {
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.08));
}

[data-theme="light"] .trends-line {
  filter: none;
}

.trends-dot {
  stroke: var(--bg);
  stroke-width: 0.6;
}

.trends-legend {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 14px;
}

.trends-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.trends-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.trends-legend-name {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  text-decoration: none;
  color: var(--text);
}

.trends-legend-name:hover .trends-legend-family {
  color: var(--accent);
}

.trends-legend-rank {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.4px;
}

.trends-legend-family {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trends-legend-mmr {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.4px;
}

@media (max-width: 720px) {
  .trends-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .trends-hero-title {
    font-size: 22px;
  }
}

.family-chart-panel {
  margin: 0 var(--gutter);
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--border);
}

.family-chart-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 4px 10px;
  flex-wrap: wrap;
}

.family-chart-title {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--accent);
}

.family-chart-hint {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.4px;
}

.family-chart-legend {
  margin-left: auto;
  display: inline-flex;
  gap: 12px;
  align-items: center;
}

.family-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.family-chart-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.family-chart-legend-label {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 1.4px;
  font-weight: 700;
  color: var(--text-mute);
}

.family-chart-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 4px 0;
}

.family-chart {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.family-chart-axis-mmr {
  fill: var(--accent);
}

.family-chart-axis-rank {
  fill: var(--gold);
}

.family-chart-dot-mmr,
.family-chart-dot-rank {
  stroke: var(--bg);
  stroke-width: 0.6;
}

/* SVG presentation attribute override — CSS vars beat SVG attr, no !important needed */
.family-chart-line-mmr { stroke: var(--accent); }
.family-chart-line-rank { stroke: var(--gold); }
.family-chart-dot-mmr { fill: var(--accent); }
.family-chart-dot-rank { fill: var(--gold); }
.class-chart-line-avg { stroke: var(--accent); }
.class-chart-line-fc { stroke: var(--gold); }
.class-chart-dot-avg { fill: var(--accent); }
.class-chart-dot-fc { fill: var(--gold); }
/* legend swatch — inline style removed from templates, CSS vars take over */
.family-chart-swatch-mmr { background: var(--accent); }
.family-chart-swatch-rank { background: var(--gold); }

/* ---------- /dates 일자 인덱스 (v0.1.43) ---------- */
.dates-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 22px var(--gutter) 18px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-strong);
}

.dates-hero-title {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 28px;
  letter-spacing: 4px;
  font-weight: 700;
  color: var(--text);
}

.dates-hero-sub {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-dim);
  letter-spacing: 0.4px;
}

.dates-hero-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
}

.dates-hero-meta-label {
  color: var(--text-mute);
  font-weight: 700;
}

.dates-hero-meta-value {
  color: var(--text);
}

.dates-index {
  padding: 22px var(--gutter) 36px;
}

.dates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.dates-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}

.dates-card:hover {
  border-color: var(--accent);
  background: var(--bg-row-hover);
}

.dates-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.dates-card-date {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 13px;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: var(--accent);
}

.dates-card-count {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--text-dim);
}

.dates-card-top {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dates-card-row {
  display: grid;
  grid-template-columns: 28px 32px 1fr auto;
  align-items: center;
  gap: 8px;
}

.dates-card-rank {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--text-mute);
  text-align: right;
}

.dates-card-rank-1 { color: var(--gold); }
.dates-card-rank-2 { color: var(--silver); }
.dates-card-rank-3 { color: var(--bronze); }

.dates-card-portrait {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--neutral);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dates-card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dates-card-portrait-fallback {
  object-fit: contain !important;
  padding: 3px;
  opacity: 0.85;
}

.dates-card-portrait-empty {
  display: block;
  width: 8px;
  height: 1px;
  background: var(--text-mute);
}

.dates-card-family {
  font-size: 12.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dates-card-mmr {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11.5px;
  letter-spacing: 0.4px;
  color: var(--text-dim);
}

/* ─── EXITS banner — 직전 스냅샷 이탈 가문 (rank-delta NEW 의 페어 인디케이터) ─── */
.exits-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  margin: 10px 0 0;
  background: rgba(232, 90, 92, 0.06);
  border-top: 1px solid rgba(232, 90, 92, 0.22);
  border-bottom: 1px solid rgba(232, 90, 92, 0.22);
  flex-wrap: wrap;
}

.exits-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}

.exits-label {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--loss);
  text-transform: uppercase;
}

.exits-count {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.4px;
}

.exits-from {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.3px;
}

.exits-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.exits-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 6px;
  border: 1px solid rgba(232, 90, 92, 0.25);
  border-radius: 14px;
  background: rgba(232, 90, 92, 0.05);
  text-decoration: none;
  color: var(--text-dim);
  font-size: 12px;
  transition: border-color 0.15s ease-out, background 0.15s ease-out;
}

.exits-chip:hover {
  border-color: rgba(232, 90, 92, 0.55);
  background: rgba(232, 90, 92, 0.12);
  color: var(--text-bright, #d6dae3);
}

.exits-rank {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--loss);
  letter-spacing: 0.4px;
}

.exits-portrait {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.35);
  filter: grayscale(0.4) brightness(0.85);
}

.exits-portrait-class {
  filter: grayscale(0.6) brightness(0.8);
}

.exits-portrait-empty {
  display: inline-block;
  border: 1px dashed var(--text-mute);
  background: transparent;
}

.exits-family {
  font-weight: 600;
  letter-spacing: 0.2px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exits-mmr {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.3px;
  padding-left: 2px;
  border-left: 1px solid rgba(232, 90, 92, 0.2);
  margin-left: 2px;
  padding-left: 6px;
}

/* page-controls — /class/ /tier/ 일자 필터 + 누적 토글 (v0.1.93) */
.page-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  margin: 12px auto 16px;
  max-width: 1500px;
  background: #0e131a;
  border-top: 1px solid rgba(77, 214, 232, 0.18);
  border-bottom: 1px solid rgba(77, 214, 232, 0.18);
  font-size: 12px;
  color: #c5cdd8;
}
.date-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.date-filter-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #4dd6e8;
  font-size: 11px;
}
.date-filter-select {
  background: #0a0d11;
  color: #e8edf3;
  border: 1px solid rgba(77, 214, 232, 0.3);
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 2px;
  cursor: pointer;
}
.date-filter-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.date-filter-select:focus {
  outline: none;
  border-color: #4dd6e8;
}
.all-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.all-toggle input[type="checkbox"] {
  cursor: pointer;
  accent-color: #d9a356;
}
.page-controls-hint {
  font-size: 11px;
  color: #8a939f;
  letter-spacing: 0.02em;
}

/* ─── MOVERS PANEL — 오늘의 변동 hero (rank up / down / new / exit 4 column) ─── */

.movers-panel {
  max-width: 1500px;
  margin: 16px auto 8px;
  padding: 0 var(--table-pad);
}

.movers-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.movers-col {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.movers-col:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.movers-col-up { border-left: 3px solid var(--accent); }
.movers-col-down { border-left: 3px solid var(--loss); }
.movers-col-new { border-left: 3px solid var(--gold); }
.movers-col-exit { border-left: 3px solid var(--text-mute); }

.movers-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.movers-label {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--text-dim);
  font-weight: 600;
}

.movers-col-up .movers-label { color: var(--accent); }
.movers-col-down .movers-label { color: var(--loss); }
.movers-col-new .movers-label { color: var(--gold); }
.movers-col-exit .movers-label { color: var(--text-mute); }

.movers-count {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  color: var(--text-mute);
}

.movers-list {
  list-style: none;
  margin: 0;
  padding: 0 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.movers-list::-webkit-scrollbar { width: 6px; }
.movers-list::-webkit-scrollbar-track { background: transparent; }
.movers-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
}
.movers-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

.movers-empty {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-mute);
  font-style: italic;
}

.movers-item { margin: 0; padding: 0; }

.movers-link {
  display: grid;
  grid-template-columns: 38px 56px 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 5px 4px;
  border-radius: 2px;
  text-decoration: none;
  color: var(--text);
  font-size: 12px;
  transition: background 0.12s;
  min-width: 0;
}

.movers-link:hover,
.movers-link:focus-visible {
  background: rgba(77, 214, 232, 0.05);
  outline: none;
}

.movers-rank {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  color: var(--text-mute);
  font-weight: 600;
}

.movers-banner {
  width: 56px;
  height: 22px;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 60%, transparent 100%);
  filter: brightness(1.04) contrast(1.04);
}

.movers-banner.movers-icon-fallback {
  width: 22px;
  height: 22px;
  object-fit: contain;
  -webkit-mask-image: none;
          mask-image: none;
  mix-blend-mode: screen;
  opacity: 0.7;
  justify-self: start;
  filter: brightness(1.1) contrast(1.0);
}

.movers-family {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.movers-delta {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.movers-delta-up { color: var(--accent); text-shadow: 0 0 5px rgba(77, 214, 232, 0.4); }
.movers-delta-down { color: var(--loss); text-shadow: 0 0 5px rgba(232, 90, 92, 0.35); }
.movers-delta-zero {
  color: var(--text-mute);
  opacity: 0.7;
  font-style: italic;
}
.movers-delta-new {
  color: #0b0d11;
  background: var(--gold);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0.6px;
  box-shadow: 0 0 6px rgba(217, 163, 86, 0.4);
}
.movers-delta-exit {
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0.6px;
  border: 1px solid var(--border);
}

[data-theme="light"] .movers-delta-new {
  color: #ffffff;
  background: var(--gold-soft);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .movers-delta-exit {
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--border-strong);
}

[data-theme="light"] .movers-link:hover,
[data-theme="light"] .movers-link:focus-visible {
  background: var(--bg-row-hover);
}

[data-theme="light"] .movers-list {
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
[data-theme="light"] .movers-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .movers-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.movers-mmr-diff {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-mute);
  white-space: nowrap;
}

.movers-mmr-up { color: var(--accent); text-shadow: 0 0 5px rgba(77, 214, 232, 0.35); }
.movers-mmr-down { color: var(--loss); text-shadow: 0 0 5px rgba(232, 90, 92, 0.30); }
.movers-mmr-zero {
  color: var(--text-mute);
  opacity: 0.7;
  font-style: italic;
}

@media (max-width: 1100px) {
  .movers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .movers-grid { grid-template-columns: 1fr; }
  .movers-link { grid-template-columns: 32px 44px 1fr auto; }
  .movers-banner { width: 44px; }
  .movers-mmr-diff { display: none; }
}

/* ─── RELOAD BANNER — 새 스냅샷 알림 (polling) ─── */

.reload-banner[hidden] {
  display: none !important;
}

.reload-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 14px;
  background: rgba(217, 163, 86, 0.95);
  color: #0b0d11;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(217, 163, 86, 0.4), 0 1px 0 rgba(0, 0, 0, 0.5);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  animation: reload-banner-in 0.25s ease-out;
}

@keyframes reload-banner-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.reload-banner-icon {
  color: #c2382e;
  font-size: 10px;
  line-height: 1;
  animation: reload-banner-pulse 1.6s ease-in-out infinite;
}

@keyframes reload-banner-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.reload-banner-text {
  font-weight: 600;
}

.reload-banner-action {
  background: #0b0d11;
  color: var(--gold);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-left: 4px;
  transition: background 0.12s;
}

.reload-banner-action:hover,
.reload-banner-action:focus-visible {
  background: rgba(0, 0, 0, 0.7);
  outline: none;
}

.reload-banner-close {
  background: transparent;
  border: 0;
  color: rgba(11, 13, 17, 0.7);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  margin-left: 4px;
}

.reload-banner-close:hover {
  color: #0b0d11;
}

@media (max-width: 600px) {
  .reload-banner {
    top: 8px;
    font-size: 12px;
    padding: 6px 10px;
  }
  .reload-banner-action { font-size: 11px; padding: 3px 8px; }
}

/* 초소형 phone (350px ↓) — chip overflow + hover transform 비활성 */
@media (max-width: 350px) {
  .col-rating-delta { min-width: 60px; font-size: 9px; padding: 1px 4px; }
  .rank-row:not(.rank-gold):not(.rank-silver):not(.rank-bronze):hover {
    transform: none;  /* 좁은 화면에서 가로 shift 시 잘림 위험 */
  }
}

/* 라이트 모드 — rank-row hover delta glow 제거 (다크 cyan/red glow 라이트에서 부자연) */
[data-theme="light"] .rank-row:hover .delta-up,
[data-theme="light"] .rank-row:hover .delta-down {
  text-shadow: none;
}

/* 라이트 모드 — movers-panel delta/mmr text-shadow 제거 */
[data-theme="light"] .movers-delta-up,
[data-theme="light"] .movers-delta-down {
  text-shadow: none;
}
[data-theme="light"] .movers-mmr-up,
[data-theme="light"] .movers-mmr-down {
  text-shadow: none;
}