/* ETHval design refresh — Simon 2026-10-15 "더욱 세련되고 보기 좋게, 가독성 좋고 시원시원하게, 데이터적 엄밀성을 놓치지 않으면서".
   Presentation only: no numbers, labels, formulas or calculations change. Loaded last so it overrides older layers.
   Sizes stay on the standard scale (12·13·14·16·18·20·24·28·32·36·44·48px) — .qa/font_scale_check.cjs.
   Check: .qa/design_refresh_check.cjs */

/* 1. Reading text: explanations move 12→13/14px with roomier line height; meta/badges stay 12px. */
html body .metric-footer .metric-desc,
html body .ni-card-mech,
html body .method-note,
html body .csx-note,
html body .tpx-table td.tpx-why,
html body .sim-slider-info,
html body .fvb-note,
html body .fbt-note,
html body .fbt-warn,
html body .ni-sc-foot,
html body .mc-sum-meta { font-size: 13px; line-height: 1.6; }
html body .method-desc,
html body .model-item-desc,
html body .category-card-desc,
html body .summary-text,
html body .ai-commentary p,
html body .ev-research-desc { line-height: 1.7; }
html body .ai-commentary p { font-size: 14px; }
html body .metric-footer .metric-desc { margin-top: 6px; color: var(--text-secondary); opacity: 1; }

/* 2. Numbers: crisp figures with consistent digit width (already tabular) and tighter tracking on big values. */
html body .metric-value-large { font-size: 24px; letter-spacing: -0.02em; font-weight: 700; line-height: 1.2; }
html body .metric-card h4 { font-size: 13px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0; }
html body .change { font-weight: 600; }

/* 3. Cards: more breathing room, quiet borders, subtle hover. Corners stay on the site rule (6px) —
   .qa/design_consistency_check.cjs allows only 6px/4px on card-like boxes (10px failed it live, 2026-10-15). */
html body .metric-card { padding: 16px 18px; }
html body .ni-card { padding: 14px 16px; }
html body .metrics-grid { gap: 14px; margin-bottom: 14px; }
html body .metric-card,
html body .ni-card,
html body .method-card { transition: border-color .15s ease, background-color .15s ease; }
html body .metric-card:hover { border-color: var(--text-muted); }
@media (max-width: 768px) {
  html body .metric-card { padding: 14px; }
  html body .metrics-grid { gap: 12px; }
}

/* 5. Floating login button: calm and compact — no pulsing glow competing with the data. */
html body .floating-action-badge {
  animation: none !important;
  background: #6345e0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 20px rgba(20, 16, 40, 0.35);
  padding: 10px 16px;
  gap: 8px;
  max-width: 300px;
}
html body .floating-action-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20, 16, 40, 0.45); }
html body .floating-badge-title { font-size: 14px; text-shadow: none; }
html body .floating-badge-subtitle { font-size: 12px; color: rgba(255, 255, 255, 0.8); }
@media (max-width: 768px) {
  html body .floating-action-badge { right: 12px; bottom: 12px; padding: 8px 14px; }
  html body .floating-badge-subtitle { display: none; }
}

/* 4. Metric card header (>640px): the period tabs (90D/1Y/3Y) were absolutely positioned at the value row,
   so the 24px figures ran under them in narrow cards (live 2026-10-15: up to 35px at 1200 ko, e.g. "14.92M ETH").
   Put the tabs in flow on their own right-aligned row under the value in every card (a fit-dependent position looked
   uneven: some cards beside, some below).
   Phones (<=640px) already use a full-width in-flow tab row. Gate: .qa/metric_value_overlap_check.cjs */
@media (min-width: 641px) {
  html body .metric-card .metric-header { flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; }
  html body .metric-card .metric-header > .metric-info { flex: 1 1 100%; min-width: 0; }
  html body .metric-card .metric-header > .metric-tabs { position: static; flex: none; margin-left: auto; }
  html body .metric-card .metric-value-large { white-space: nowrap; }
}