:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --type-caption: 10px;
  --type-label: 11px;
  --type-body-sm: 12px;
  --type-body: 13px;
  --type-card-title: 13px;
  --type-card-name: 11px;
  --type-card-meta: 10px;
  --type-heading-sm: 16px;
  --type-heading-md: 20px;
  --type-heading-lg: 21px;
  --type-score-md: 21px;
  --type-score-lg: 28px;
  --type-score-xl: 30px;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --tracking-tight: -0.015em;
  font-variant-numeric: tabular-nums;
}

body {
  font-family: var(--font-sans);
  font-synthesis: none;
  text-rendering: auto;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

/* Core hierarchy */
.app-header h1,
.modal-header h2 {
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
}

.section-heading h2 {
  font-size: var(--type-heading-lg);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
}

.field > span,
.calculate-row output,
.preset-guide,
.preset-status,
.picker-summary,
.owned-summary span,
.timeline-head-note {
  font-weight: var(--weight-bold);
}

.field select,
.search-field input,
.language-picker select {
  font-weight: var(--weight-semibold);
}

.primary-button,
.owned-transfer-button,
.text-button,
.member-separate-toggle {
  font-weight: var(--weight-extrabold);
}

/* One semantic type scale for preset, picker, owned-list, and result cards. */
.card-copy-character {
  min-width: 0;
  font-size: var(--type-card-title) !important;
  font-weight: var(--weight-bold) !important;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.card-copy-name {
  font-size: var(--type-card-name) !important;
  font-weight: var(--weight-medium) !important;
  line-height: 1.35;
  letter-spacing: 0;
}

.card-copy-meta,
.card-copy-rarity {
  font-size: var(--type-card-meta) !important;
  line-height: 1.35;
}

.card-copy-meta {
  font-weight: var(--weight-semibold) !important;
}

.card-copy-rarity {
  font-weight: var(--weight-bold) !important;
}

.slot-role,
.owned-check,
.used-chip,
.result-card-role,
.result-card-attribute {
  font-size: var(--type-caption);
  font-weight: var(--weight-extrabold);
}

/* Keep leader and normal member metadata rows at the same 16px visual height. */
.result-card-meta {
  min-height: 16px;
  align-items: center;
}

.result-card-role.is-leader {
  height: 16px;
  min-height: 16px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  line-height: 1;
}

/* Summary/result hierarchy */
.result-top-number {
  font-size: var(--type-body-sm);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.04em;
}

.result-summary-score span {
  font-size: var(--type-label);
  font-weight: var(--weight-bold);
}

.result-summary-score small,
.result-metric span,
.card-detail-stat small,
.card-detail-skill-meta span,
.diagnostic-timeline-scale > div {
  font-size: var(--type-caption);
  font-weight: var(--weight-bold);
}

.result-summary-score strong {
  font-size: var(--type-score-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.rank-lockup strong {
  font-size: var(--type-score-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.song-projection > div strong {
  font-size: var(--type-score-md);
  font-weight: var(--weight-bold);
}

.result-summary-members strong,
.calculation-card header span,
.calculation-card header strong,
.result-metric strong {
  font-weight: var(--weight-bold);
}

/* Detail/diagnostic labels remain readable without any 9px text. */
.diagnostic-table th,
.diagnostic-member-trigger strong,
.diagnostic-member-meta,
.diagnostic-leader-badge,
.diag-interval,
.diag-ok,
.diag-off,
.diagnostic-timeline-columns,
.diagnostic-timeline-row strong,
.diagnostic-timeline-row > span,
.card-detail-rarity,
.card-detail-skill header span,
.card-detail-skill-meta span,
.owned-card-settings span {
  font-weight: var(--weight-bold);
}

.special-skill-order li span,
.song-projection-accuracy {
  font-size: var(--type-body-sm);
}

@media (max-width: 600px) {
  .result-summary-score strong { font-size: 22px; }
  .rank-lockup strong { font-size: 25px; }

  /* Card hierarchy intentionally stays identical on mobile. */
  .card-copy-character { font-size: var(--type-card-title) !important; }
  .card-copy-name { font-size: var(--type-card-name) !important; }
  .card-copy-meta,
  .card-copy-rarity { font-size: var(--type-card-meta) !important; }
}