:root {
  --primary: #1ed760; --on-primary: #000000;
  --ink: #ffffff; --body: #d4d4d4; --mute: #9a9a9a;
  --hairline: #303030; --hairline-strong: #4a4a4a;
  --canvas: #121212; --canvas-elevated: #1c1c1c;
  --canvas-elevated-press: #191919; --canvas-elevated-highlight: #2c2c2c;
  --primary-soft: rgba(30,215,96,.18); --primary-line: #1ed760;
  --primary-dim: rgba(30,215,96,.55); --primary-band-border: rgba(30,215,96,.35);
  --canvas-tinted: #ffffff1a; --canvas-tinted-highlight: #ffffff24; --canvas-tinted-press: #ffffff36;
  --error: #f3727f; --warning: #ffa42b; --announcement: #539df5;
  --r-xs: 2px; --r-sm: 4px; --r-card: 8px; --r-lg: 12px; --r-button: 9999px;
  --s-xxs: 4px; --s-xs: 8px; --s-sm: 12px; --s-md: 16px; --s-lg: 20px; --s-xl: 24px; --s-2xl: 32px; --s-3xl: 40px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", "Malgun Gothic", sans-serif;
}
* { box-sizing:border-box; }
html { color-scheme:dark; }
body { margin:0; background:var(--canvas); color:var(--ink); font:400 14px/20px var(--font); overflow-wrap:anywhere; }
a { color:var(--body); text-decoration:none; }
a:hover { color:var(--ink); }
.site-header { height:56px; margin:auto; padding:var(--s-xs) var(--s-md); display:flex; justify-content:space-between; align-items:center; gap:var(--s-xs); border-bottom:1px solid var(--hairline); background:var(--canvas); }
.wordmark { color:var(--ink); font-size:18px; font-weight:700; line-height:24px; min-width:0; }
.wordmark span { display:block; font-size:12px; font-weight:400; line-height:16px; color:var(--body); }
.header-note { color:var(--body); font-size:12px; line-height:16px; flex-shrink:0; }
main { margin:auto; padding:var(--s-xl) var(--s-md); }
p { margin:var(--s-xs) 0; color:var(--body); }
strong { font-weight:400; }
h2 { margin:0; font-size:18px; font-weight:700; line-height:24px; color:var(--ink); }
.eyebrow { margin:0 0 var(--s-xs); font-size:12px; line-height:16px; color:var(--body); }
.small,.chart-message { font-size:14px; line-height:20px; color:var(--body); }
.card { background:var(--canvas-elevated); border:0; border-radius:var(--r-card); padding:var(--s-md) var(--s-lg); min-width:0; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-sm); }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--s-sm); margin-bottom:var(--s-md); flex-wrap:wrap; }
.section-heading>div { min-width:0; }
.tag { color:var(--body); font-size:12px; line-height:16px; border-radius:var(--r-button); }
.badge-card h2 { font-size:32px; font-weight:700; line-height:36px; letter-spacing:-.5px; margin:var(--s-xs) 0 var(--s-md); }
.badge-card.favorable h2 { color:var(--primary); }
.badge-card.neutral h2 { color:var(--ink); }
.badge-card.wait h2 { color:var(--warning); }
.badge-card.unknown h2 { color:var(--mute); }
.percentiles,.badge-rule { font-size:12px; line-height:16px; color:var(--body); }
.badge-rule { margin-top:var(--s-lg); color:var(--ink); }
.rates-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-xs); }
.rates-grid p { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-xs); margin:0; padding:var(--s-xs) 0; border-bottom:1px solid var(--hairline); min-width:0; }
.rates-grid p:last-child { border-bottom:0; }
.rates-grid strong { font-size:16px; font-weight:700; line-height:24px; color:var(--ink); }
.primary-rate small { font-size:14px; font-weight:400; }
.payout-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-md); }
.amount { margin:0 0 var(--s-xxs); }
.amount strong,.krw-amount strong,#net-krw { font-size:24px; font-weight:700; line-height:28px; letter-spacing:-.3px; color:var(--ink); }
.amount span { color:var(--body); font-size:14px; }
.converted { border-top:1px solid var(--hairline); padding-top:var(--s-sm); }
.ratio-grid { display:grid; gap:var(--s-xs); border-top:1px solid var(--hairline); margin-top:var(--s-lg); padding-top:var(--s-xs); }
.ratio-item { min-width:0; }
.ratio-item>p { display:flex; align-items:center; gap:var(--s-xs); margin:0; }
.ratio-item strong { margin-left:auto; font-size:16px; font-weight:700; line-height:24px; color:var(--ink); }
button { font:700 14px/20px var(--font); cursor:pointer; min-width:40px; min-height:40px; border-radius:var(--r-button); }
.info-button { width:40px; height:40px; padding:6px; border:0; background:transparent; color:var(--body); flex-shrink:0; }
.info-button span { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--r-button); background:var(--canvas-tinted); }
.info-button:hover span { background:var(--canvas-tinted-highlight); }
.info-button[aria-expanded=true] span { background:var(--ink); color:var(--canvas); }
.info-box { padding:var(--s-md); border-radius:var(--r-card); background:var(--canvas-elevated-highlight); color:var(--body); font-size:12px; line-height:16px; margin:var(--s-xs) 0; }
.chart-guide { color:var(--ink); }
.chart-container { position:relative; height:220px; margin-top:var(--s-lg); min-width:0; }
.chart-container canvas { max-width:100%; }
.periods { display:flex; flex-wrap:wrap; gap:var(--s-xs); }
.periods button,.reset { border:1px solid var(--body); padding:var(--s-xs) var(--s-md); color:var(--ink); background:transparent; }
.periods button:hover,.reset:hover { background:var(--canvas-tinted); }
.periods button[aria-pressed=true] { background:var(--primary); color:var(--on-primary); border-color:transparent; }
[hidden] { display:none !important; }
.chart-reference>summary { cursor:pointer; min-height:40px; padding:var(--s-xs) 0; color:var(--body); background:transparent; font-weight:700; border-radius:var(--r-button); }
.chart-reference>summary:hover { color:var(--ink); }
.details-content { margin-top:var(--s-md); min-width:0; }
.input-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-md); margin:var(--s-xl) 0; }
label { font-size:14px; font-weight:700; min-width:0; color:var(--body); }
input { display:block; width:100%; min-width:0; height:40px; margin-top:var(--s-xs); padding:0 var(--s-md); border:1px solid var(--hairline-strong); border-radius:var(--r-button); font:400 14px/20px var(--font); background:var(--canvas-elevated-highlight); color:var(--ink); }
input::placeholder { color:var(--mute); opacity:1; font-size:12px; }
input:focus-visible { border-color:var(--ink); }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.calculator-results { background:var(--canvas-elevated-highlight); border-radius:var(--r-card); padding:var(--s-md); display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-sm); }
#breakeven { font-size:16px; font-weight:700; line-height:24px; }
.warning { padding:var(--s-sm) var(--s-md); border-left:3px solid var(--warning); border-radius:var(--r-sm); background:var(--canvas-elevated-highlight); color:var(--ink); font-size:14px; line-height:20px; }
.status { margin-top:var(--s-sm); color:var(--mute); font-size:12px; line-height:16px; }
.status p { color:inherit; margin:var(--s-xxs) 0; }
.status .warning { color:var(--ink); }
.status p:not(.warning)+p:not(.warning)::before { content:"· "; }
.decomposition { border-top:1px solid var(--hairline); margin-top:var(--s-xl); padding-top:var(--s-xl); }
.decomposition h3 { margin:0; font-size:18px; font-weight:700; line-height:24px; }
#decomposition-sentence { color:var(--ink); }
.decomposition strong { font-weight:700; color:var(--ink); }
.decomposition-caption { font-size:12px; line-height:16px; color:var(--body); }
.factor-row { display:grid; grid-template-columns:auto minmax(0,1fr) 54px; gap:var(--s-sm); align-items:center; margin:var(--s-sm) 0; color:var(--body); }
.factor-track { height:8px; background:var(--hairline-strong); border-radius:var(--r-button); overflow:hidden; }
.factor-fill { height:100%; width:0; background:var(--primary); border-radius:var(--r-button); }
.factor-row output { text-align:right; font-variant-numeric:tabular-nums; }
/* Mobile default: one column and 220px charts. */
@media (min-width:600px) {
  .site-header,main { max-width:720px; }
  .site-header { height:64px; padding-right:var(--s-lg); padding-left:var(--s-lg); }
  main { padding-right:var(--s-lg); padding-left:var(--s-lg); }
  h2 { font-size:24px; line-height:28px; letter-spacing:-.3px; }
  .dashboard-grid { gap:var(--s-md); }
  .status { margin-top:var(--s-md); }
  .rates-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-md); }
  .rates-grid p { flex-direction:column; border-bottom:0; }
  .input-grid,.calculator-results { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1000px) {
  .site-header,main { max-width:1080px; padding-right:var(--s-xl); padding-left:var(--s-xl); }
  .dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"badge payout" "rates payout" "chart chart" "calculator calculator" "reference reference"; }
  .badge-card { grid-area:badge; }
  .rates-card { grid-area:rates; }
  .payout-card { grid-area:payout; }
  .chart-primary { grid-area:chart; }
  .calculator { grid-area:calculator; }
  .chart-reference { grid-area:reference; }
  .input-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .chart-container { height:320px; }
}