@font-face {
  font-family: "Pretendard Variable";
  src: url("assets/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono Variable";
  src: url("assets/fonts/JetBrainsMono-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #06090d;
  --surface: rgba(14, 20, 27, .88);
  --surface-solid: #0d141b;
  --surface-2: #111a22;
  --line: rgba(137, 165, 184, .16);
  --line-bright: rgba(124, 174, 198, .30);
  --text: #eef3f5;
  --muted: #84939d;
  --faint: #52616a;
  --cyan: #70cbd5;
  --teal: #55b8ab;
  --yellow: #d7b85b;
  --orange: #e7823e;
  --red: #ef554c;
  --red-soft: rgba(239, 85, 76, .14);
  --mono: "JetBrains Mono Variable", "JetBrains Mono", monospace;
  --sans: "Pretendard Variable", Pretendard, sans-serif;
  --radius: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.5; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% -5%, rgba(70, 162, 180, .12), transparent 28%), radial-gradient(circle at 83% 20%, rgba(239, 85, 76, .055), transparent 26%), linear-gradient(180deg, transparent, rgba(0, 0, 0, .24)); z-index: -1; }
.ambient-grid { position: fixed; inset: 0; pointer-events: none; opacity: .23; z-index: -1; background-image: linear-gradient(rgba(116, 156, 177, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 156, 177, .05) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent 75%); }
button, select { font: inherit; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.app-shell { width: min(1600px, 100%); margin: 0 auto; padding: 0 28px 28px; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-bright); position: relative; }
.topbar::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 156px; height: 1px; background: var(--cyan); box-shadow: 0 0 12px rgba(112, 203, 213, .55); }
.brand { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; border: 1px solid rgba(112, 203, 213, .35); display: grid; place-content: center; gap: 3px; background: rgba(112, 203, 213, .05); box-shadow: inset 0 0 18px rgba(112, 203, 213, .04); }
.brand-mark i { display: block; width: 20px; height: 3px; background: var(--cyan); transform-origin: left; }
.brand-mark i:nth-child(1) { width: 12px; }
.brand-mark i:nth-child(2) { width: 20px; }
.brand-mark i:nth-child(3) { width: 16px; }
.brand strong { display: block; font: 600 17px/1.1 var(--mono); letter-spacing: .08em; }
.brand strong em { color: var(--muted); font-style: normal; font-weight: 500; }
.brand small { display: block; margin-top: 6px; color: var(--faint); font: 500 9px var(--mono); letter-spacing: .18em; }
.topbar-status { display: flex; align-items: center; gap: 23px; }
.system-status { color: #7dbcb6; font: 500 10px var(--mono); letter-spacing: .11em; }
.status-dot { display: inline-block; width: 7px; height: 7px; background: var(--teal); border-radius: 50%; margin-right: 8px; box-shadow: 0 0 0 4px rgba(85, 184, 171, .09), 0 0 12px rgba(85, 184, 171, .45); animation: statusPulse 2.8s ease-in-out infinite; }
.utc-block { min-width: 86px; border-left: 1px solid var(--line); padding-left: 18px; }
.utc-block small { color: var(--faint); font: 500 9px var(--mono); margin-right: 7px; }
.utc-block strong { color: #bdc8cd; font: 500 12px var(--mono); }
.language-control { position: relative; }
.language-control::after { content: "⌄"; position: absolute; right: 11px; top: 8px; color: var(--muted); pointer-events: none; }
.language-control select { appearance: none; min-width: 112px; border: 1px solid var(--line-bright); border-radius: 2px; background: #0a1117; color: #c8d0d4; padding: 8px 30px 8px 11px; font: 500 11px var(--mono); outline: none; cursor: pointer; }
.language-control select:focus { border-color: var(--cyan); }

main { padding: 27px 0 0; }
.panel { position: relative; background: linear-gradient(145deg, rgba(15, 23, 31, .95), rgba(9, 14, 19, .92)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.panel::before { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 1px; background: var(--cyan); opacity: .75; }
.panel::after { content: ""; position: absolute; top: 0; right: 0; width: 7px; height: 7px; border-top: 1px solid var(--line-bright); border-right: 1px solid var(--line-bright); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.panel-heading h1, .panel-heading h2 { margin: 5px 0 0; font-size: 18px; line-height: 1.2; letter-spacing: -.025em; }
.eyebrow { display: block; color: #66818e; font: 600 9px var(--mono); letter-spacing: .18em; }
.classification { border: 1px solid var(--line); color: #657985; padding: 5px 7px; font: 500 8px var(--mono); letter-spacing: .10em; }
.hero-grid { display: grid; grid-template-columns: minmax(340px, .72fr) minmax(540px, 1.28fr); gap: 14px; }
.gauge-panel, .trend-panel { min-height: 416px; padding: 24px 25px 19px; }

.gauge-wrap { width: min(390px, 100%); height: 236px; margin: 5px auto 0; position: relative; }
.risk-gauge { width: 100%; height: 100%; overflow: visible; }
.gauge-track, .gauge-value-arc { fill: none; stroke-width: 12; stroke-linecap: butt; }
.gauge-track { stroke: #18242c; stroke-dasharray: 1.5 1; }
.gauge-value-arc { stroke: url(#gaugeGradient); stroke-dasharray: 0 100; filter: url(#gaugeGlow); transition: stroke-dasharray 1.1s cubic-bezier(.22,.8,.25,1); }
.gauge-ticks text { fill: #596973; font: 500 9px var(--mono); text-anchor: middle; }
.gauge-marker { fill: #ffaf68; stroke: #111920; stroke-width: 3; filter: drop-shadow(0 0 8px rgba(255,143,68,.95)); transition: cx 1.1s cubic-bezier(.22,.8,.25,1), cy 1.1s cubic-bezier(.22,.8,.25,1); }
.gauge-score { position: absolute; left: 50%; top: 53%; bottom: auto; z-index: 2; transform: translateX(-50%); min-width: 190px; text-align: center; }
.gauge-score strong { font: 500 52px/.9 var(--mono); letter-spacing: -.07em; }
.gauge-score span { color: var(--faint); margin-left: 5px; font: 500 12px var(--mono); }
.gauge-score small { position: absolute; top: 62px; left: 50%; right: auto; transform: translateX(-50%); display: block; width: max-content; margin: 0; color: var(--orange); background: #10171d; border: 1px solid rgba(231,130,62,.35); padding: 3px 9px; font: 600 9px var(--mono); letter-spacing: .14em; }
.gauge-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; }
.change-chip { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; }
.change-chip span { grid-row: 1; color: var(--red); font-size: 10px; }
.change-chip strong { color: #e16c57; font: 600 14px var(--mono); }
.change-chip small { grid-column: 1 / 3; color: var(--faint); font: 500 8px var(--mono); letter-spacing: .08em; margin-top: 3px; }
.change-chip.negative span, .change-chip.negative strong { color: var(--teal); }
.updated-at { text-align: right; }
.updated-at small { display: block; color: var(--faint); font: 500 8px var(--mono); letter-spacing: .08em; }
.updated-at strong { display: block; color: #909da4; margin-top: 5px; font: 500 10px var(--mono); }

.trend-heading { align-items: center; }
.range-tabs { display: flex; border: 1px solid var(--line); background: #080e13; }
.range-tabs button { border: 0; border-right: 1px solid var(--line); background: transparent; color: #667883; padding: 7px 12px; font: 500 9px var(--mono); cursor: pointer; }
.range-tabs button:last-child { border-right: 0; }
.range-tabs button.active { color: var(--text); background: #17242d; box-shadow: inset 0 -1px var(--cyan); }
.trend-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 23px 0 10px; }
.trend-stats > div { border-left: 1px solid var(--line); padding-left: 12px; }
.trend-stats > div:first-child { border-left: 0; padding-left: 0; }
.trend-stats small { display: block; color: var(--faint); font: 500 8px var(--mono); letter-spacing: .06em; }
.trend-stats strong { display: block; margin-top: 4px; color: #aebbc1; font: 500 13px var(--mono); }
.trend-stats .trend-direction strong { color: var(--red); }
.chart-wrap { height: 246px; position: relative; border-top: 1px solid rgba(137,165,184,.1); background-image: linear-gradient(rgba(137,165,184,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(137,165,184,.045) 1px, transparent 1px); background-size: 100% 49px, 92px 100%; }
#trendChart { width: 100%; height: 100%; display: block; }
.chart-tooltip { position: absolute; display: none; min-width: 96px; pointer-events: none; transform: translate(-50%, calc(-100% - 13px)); border: 1px solid rgba(112,203,213,.35); background: rgba(5,10,14,.94); color: var(--text); padding: 7px 9px; font: 500 9px/1.55 var(--mono); box-shadow: 0 8px 20px rgba(0,0,0,.3); z-index: 4; }
.chart-tooltip strong { color: var(--cyan); font-size: 12px; }
.chart-axis { display: flex; justify-content: space-between; color: #46565f; font: 500 8px var(--mono); margin-top: 2px; }

.section-block { margin-top: 32px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 13px; }
.section-heading > div { display: flex; align-items: center; gap: 13px; }
.section-index { color: #40525c; font: 500 11px var(--mono); border-right: 1px solid var(--line); padding-right: 13px; }
.section-heading h2 { font-size: 17px; margin: 3px 0 0; }
.section-heading p { color: var(--faint); font-size: 11px; margin: 0; }
.regions-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.region-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(155deg, rgba(16,24,32,.92), rgba(8,13,18,.86)); padding: 16px 15px 13px; position: relative; overflow: hidden; transition: border-color .2s, transform .2s, background .2s; }
.region-card:hover, .region-card.focused { border-color: rgba(112,203,213,.38); transform: translateY(-2px); background: linear-gradient(155deg, rgba(20,31,40,.96), rgba(9,15,20,.9)); }
.region-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, var(--risk-color), transparent 65%); opacity: .65; }
.region-card header { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 42px; }
.region-icon { width: 32px; height: 32px; border: 1px solid color-mix(in srgb, var(--risk-color), transparent 60%); background: color-mix(in srgb, var(--risk-color), transparent 91%); position: relative; }
.region-icon::before, .region-icon::after { content: ""; position: absolute; background: var(--risk-color); opacity: .72; }
.region-icon::before { width: 13px; height: 1px; top: 11px; left: 8px; box-shadow: 0 6px var(--risk-color); }
.region-icon::after { width: 1px; height: 13px; top: 8px; left: 14px; box-shadow: 6px 0 color-mix(in srgb, var(--risk-color), transparent 55%); }
.region-code { display: block; color: #4d606b; font: 500 7px var(--mono); letter-spacing: .12em; }
.region-name { margin: 2px 0 0; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.region-direction { color: var(--risk-color); font-size: 10px; }
.region-score-row { display: flex; align-items: baseline; margin-top: 17px; }
.region-score { font: 500 28px/1 var(--mono); letter-spacing: -.04em; }
.region-score-row > span { color: var(--faint); font: 500 8px var(--mono); margin-left: 3px; }
.region-level { margin-left: auto; color: var(--risk-color); font: 600 7px var(--mono); letter-spacing: .08em; font-style: normal; }
.risk-bar { height: 2px; background: #202a30; margin-top: 12px; }
.risk-bar i { display: block; width: 0; height: 100%; background: var(--risk-color); box-shadow: 0 0 8px color-mix(in srgb, var(--risk-color), transparent 35%); transition: width 1s ease; }
.sparkline { width: 100%; height: 38px; margin: 11px 0 4px; overflow: visible; }
.spark-line { fill: none; stroke: var(--risk-color); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark-area { fill: color-mix(in srgb, var(--risk-color), transparent 90%); stroke: none; }
.region-card footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; border-top: 1px solid rgba(137,165,184,.09); padding-top: 9px; }
.region-driver { color: #5b6c76; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.region-change { color: var(--risk-color); font: 500 8px var(--mono); }

.intelligence-grid { display: grid; grid-template-columns: minmax(620px, 1.5fr) minmax(315px, .7fr); gap: 14px; margin-top: 32px; }
.map-panel, .signals-panel { min-height: 487px; padding: 22px 23px; }
.map-legend { display: flex; gap: 15px; }
.map-legend span { display: flex; align-items: center; gap: 6px; }
.map-legend i { width: 5px; height: 5px; border-radius: 50%; }
.map-legend i.low { background: var(--yellow); }.map-legend i.high { background: var(--orange); }.map-legend i.critical { background: var(--red); }
.map-legend b { color: #60727c; font: 500 8px var(--mono); }
.map-stage { position: relative; height: 395px; margin-top: 18px; border: 1px solid rgba(137,165,184,.09); overflow: hidden; background: radial-gradient(circle at 62% 45%, rgba(77,121,138,.08), transparent 34%), #080d12; }
.map-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8,13,18,.65), transparent 12%, transparent 88%, rgba(8,13,18,.65)), linear-gradient(rgba(8,13,18,.6), transparent 15%, transparent 86%, rgba(8,13,18,.78)); }
.map-coordinates { position: absolute; inset: 0; background-image: radial-gradient(circle at 50% 43%, rgba(54,92,109,.11), transparent 47%); }
.world-map { display: block; width: 100%; height: calc(100% - 43px); object-fit: fill; opacity: .92; filter: saturate(.82) contrast(1.05); }
.map-theater-lines { position: absolute; z-index: 2; pointer-events: none; }
.map-theater-lines i { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 1px; transform: rotate(var(--r)); transform-origin: left; background: linear-gradient(90deg, transparent, rgba(110,157,175,.36), transparent); border-top: 1px dashed rgba(110,157,175,.22); }
.hotspots { position: absolute; z-index: 3; pointer-events: none; }
.hotspot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%); z-index: 3; border: 0; background: transparent; cursor: pointer; padding: 0; }
.hotspot-dot { display: block; width: 9px; height: 9px; border: 2px solid #081015; border-radius: 50%; background: var(--risk-color); box-shadow: 0 0 0 1px var(--risk-color), 0 0 13px var(--risk-color); }
.hotspot-dot::before { content: ""; position: absolute; inset: -5px; border: 1px solid var(--risk-color); border-radius: 50%; opacity: .28; }
.hotspot-label { position: absolute; left: 15px; top: -14px; display: block; width: max-content; max-width: 130px; background: rgba(7,12,16,.88); border-left: 1px solid var(--risk-color); padding: 3px 6px; color: #9ba9af; font: 500 8px var(--mono); letter-spacing: .05em; }
.hotspot:nth-child(even) .hotspot-label { left: auto; right: 15px; }
.hotspot:hover .hotspot-label, .hotspot:focus-visible .hotspot-label { color: #fff; border-color: #fff; }
.hotspot, .global-map-signal { pointer-events: auto; }
.hotspot--nato-russia .hotspot-label { left: auto; right: 15px; top: -30px; }
.hotspot--ukraine .hotspot-label { left: 15px; right: auto; top: -3px; }
.hotspot--middle-east .hotspot-label { left: 15px; right: auto; top: 1px; }
.hotspot--korea .hotspot-label { left: auto; right: 15px; top: -30px; }
.hotspot--taiwan .hotspot-label { left: 15px; right: auto; top: 1px; }
.global-map-signal { position: absolute; left: 2.2%; bottom: 4%; display: grid; grid-template-columns: auto auto auto; gap: 7px; align-items: center; color: #9daeb5; background: rgba(7,12,16,.9); border: 1px solid color-mix(in srgb, var(--risk-color), transparent 45%); border-left: 3px solid var(--risk-color); padding: 7px 9px; cursor: pointer; font-family: var(--sans); }
.global-map-signal span { color: var(--risk-color); font: 700 8px var(--mono); letter-spacing: .12em; }
.global-map-signal strong { font-size: 10px; }
.global-map-signal b { color: #e1e7e9; font: 700 10px var(--mono); }
.map-caption { position: absolute; left: 0; right: 0; bottom: 0; height: 43px; display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; padding: 0 13px; background: rgba(8,14,19,.88); border-top: 1px solid var(--line); z-index: 4; }
.scan-pulse { width: 6px; height: 6px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 8px var(--teal); }
.map-caption strong { color: #799099; font: 500 8px var(--mono); }
.map-caption small { justify-self: end; color: #465760; font: 500 7px var(--mono); }

.live-badge { color: #75a79e; border: 1px solid rgba(85,184,171,.22); padding: 4px 7px; font: 600 8px var(--mono); letter-spacing: .1em; }
.live-badge i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--teal); margin-right: 5px; box-shadow: 0 0 6px var(--teal); }
.signal-list { margin-top: 19px; display: grid; }
.signal-item { display: grid; grid-template-columns: 31px 1fr auto; gap: 10px; align-items: center; min-height: 66px; border-bottom: 1px solid rgba(137,165,184,.1); }
.signal-rank { width: 26px; height: 26px; border: 1px solid color-mix(in srgb, var(--risk-color), transparent 65%); color: var(--risk-color); display: grid; place-items: center; font: 500 8px var(--mono); }
.signal-item h3 { margin: 0; font-size: 10px; font-weight: 600; }
.signal-item p { margin: 4px 0 0; color: #556670; font-size: 8px; line-height: 1.45; }
.signal-state { color: var(--risk-color); font: 600 7px var(--mono); letter-spacing: .08em; }

.events-panel { margin-top: 14px; padding: 22px 23px 14px; }
.text-button { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #0b1218; color: #748690; padding: 7px 10px; font: 500 8px var(--mono); cursor: pointer; }
.text-button:hover { border-color: var(--line-bright); color: #bac4c9; }
.text-button i { font-style: normal; font-size: 12px; }
.text-button.loading i { animation: spin .8s linear infinite; }
.events-head, .event-item { display: grid; grid-template-columns: 90px 150px minmax(240px, 1fr) 84px; gap: 15px; align-items: center; }
.events-head { margin-top: 18px; padding: 8px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #4a5c66; font: 500 8px var(--mono); letter-spacing: .09em; }
.event-item { min-height: 67px; padding: 9px 12px; border-bottom: 1px solid rgba(137,165,184,.09); transition: background .18s; }
.event-item:hover { background: rgba(112,203,213,.025); }
.event-time { color: #687983; font: 500 9px var(--mono); }
.event-region { color: #a4b0b5; font-size: 9px; }
.event-region i { display: inline-block; width: 5px; height: 5px; background: var(--risk-color); margin-right: 8px; box-shadow: 0 0 6px color-mix(in srgb, var(--risk-color), transparent 40%); }
.event-copy strong { display: block; font-size: 10px; font-weight: 600; }
.event-copy small { display: block; margin-top: 4px; color: #53636d; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.impact-badge { justify-self: start; color: var(--risk-color); background: color-mix(in srgb, var(--risk-color), transparent 91%); border: 1px solid color-mix(in srgb, var(--risk-color), transparent 70%); padding: 4px 7px; font: 600 7px var(--mono); letter-spacing: .06em; }
.source-note { display: flex; align-items: center; gap: 9px; color: #52636d; padding: 13px 3px 0; }
.source-note > span { width: 14px; height: 14px; border: 1px solid #43545d; border-radius: 50%; display: grid; place-items: center; font: 500 8px var(--mono); }
.source-note p { margin: 0; font-size: 8px; }

.platform-about { margin-top: 14px; padding: 18px 23px; border: 1px solid var(--line); background: var(--panel); display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.platform-about h2 { margin: 5px 0 0; color: var(--text); font-size: 16px; line-height: 1.35; }
.platform-about p { margin: 0; color: var(--muted); max-width: 920px; font-size: 12px; line-height: 1.7; }

footer { height: 88px; margin-top: 29px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #44545d; }
footer > div strong { display: block; font: 600 9px var(--mono); letter-spacing: .09em; }
footer > div span { display: block; margin-top: 4px; font: 500 7px var(--mono); }
footer p { font-size: 8px; }
footer > span { justify-self: end; font: 500 8px var(--mono); }
.noscript { position: fixed; inset: auto 20px 20px; background: #2a1111; color: white; padding: 15px; z-index: 99; }

@keyframes statusPulse { 50% { opacity: .45; box-shadow: 0 0 0 7px rgba(85,184,171,0); } }
@keyframes mapPulse { from { transform: scale(.65); opacity: .55; } to { transform: scale(1.8); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .regions-grid { grid-template-columns: repeat(3, 1fr); }
  .intelligence-grid { grid-template-columns: 1fr; }
  .signals-panel { min-height: auto; }
  .signal-list { grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
}

@media (max-width: 850px) {
  .app-shell { padding: 0 16px 20px; }
  .topbar { height: auto; min-height: 86px; padding: 14px 0; }
  .system-status { display: none; }
  .utc-block { border-left: 0; padding-left: 0; }
  .hero-grid { grid-template-columns: 1fr; }
  .gauge-panel, .trend-panel { min-height: auto; }
  .section-heading p { display: none; }
  .intelligence-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .app-shell { padding: 0 11px 16px; }
  .brand strong { font-size: 13px; }
  .brand strong em { display: block; margin-top: 4px; font-size: 8px; }
  .brand small, .utc-block { display: none; }
  .brand-mark { width: 36px; height: 36px; }
  .language-control select { min-width: 101px; }
  main { padding-top: 12px; }
  .gauge-panel, .trend-panel, .map-panel, .signals-panel, .events-panel { padding: 18px 15px 14px; }
  .gauge-panel { min-height: 390px; }
  .gauge-wrap { height: 225px; }
  .gauge-score strong { font-size: 46px; }
  .trend-heading { align-items: flex-start; }
  .range-tabs button { padding: 6px 9px; }
  .trend-stats { margin-top: 18px; }
  .chart-wrap { height: 210px; }
  .section-block, .intelligence-grid { margin-top: 23px; }
  .regions-grid { grid-template-columns: repeat(2, 1fr); }
  .region-card { padding: 14px 12px 12px; }
  .region-card header { grid-template-columns: 24px 1fr auto; gap: 6px; }
  .region-icon { width: 24px; height: 24px; }
  .region-icon::before { left: 6px; }.region-icon::after { left: 11px; }
  .map-legend { display: none; }
  .map-stage { height: 320px; }
  .hotspot-label { font-size: 7px; max-width: 94px; }
  .map-caption small { display: none; }
  .signal-list { grid-template-columns: 1fr; }
  .events-head { display: none; }
  .events-list { margin-top: 15px; border-top: 1px solid var(--line); }
  .event-item { grid-template-columns: 57px 1fr auto; gap: 8px; align-items: start; padding: 12px 3px; }
  .event-region { grid-column: 2; grid-row: 1; }
  .event-time { grid-column: 1; grid-row: 1 / 3; padding-top: 1px; }
  .event-copy { grid-column: 2 / 4; grid-row: 2; }
  .event-copy small { white-space: normal; }
  .impact-badge { grid-column: 3; grid-row: 1; }
  .text-button span { display: none; }
  .platform-about { grid-template-columns: 1fr; gap: 9px; padding: 16px 15px; }
  .platform-about p { font-size: 11px; }
  footer { grid-template-columns: 1fr auto; }
  footer p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Readability pass: Korean-first typography, stronger contrast and larger UI copy. */
:root {
  --muted: #a6b3b9;
  --faint: #75868f;
  --sans: "Pretendard Variable", Pretendard, sans-serif;
}

body {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.brand small,
.system-status,
.language-control select,
.gauge-score small,
.change-chip small,
.updated-at small,
.trend-stats small,
.region-level,
.map-legend b,
.hotspot-label,
.map-caption strong,
.map-caption small,
.signal-state,
.text-button,
.events-head,
.event-region,
.impact-badge {
  font-family: var(--sans);
}

.brand small { color: #9baab1; font-size: 10px; font-weight: 600; letter-spacing: .11em; }
.system-status { color: #94cbc5; font-size: 11px; font-weight: 600; letter-spacing: .05em; }
.language-control select { min-width: 120px; color: #e2e8ea; padding: 9px 31px 9px 12px; font-size: 13px; font-weight: 600; }

.panel-heading h1,
.panel-heading h2 { margin-top: 6px; font-size: 21px; font-weight: 700; line-height: 1.3; }
.eyebrow { color: #91a8b3; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.classification { color: #8c9ca4; padding: 6px 8px; font-size: 9px; font-weight: 600; }

.gauge-ticks text { fill: #82939c; font-size: 10px; font-weight: 600; }
.gauge-score small { color: #f19a5d; padding: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.change-chip strong { color: #ef806c; font-size: 16px; font-weight: 700; }
.change-chip small,
.updated-at small { color: #9aa8af; font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.updated-at strong { color: #c2ccd0; font-size: 11px; font-weight: 600; }

.range-tabs button { color: #91a0a8; padding: 8px 13px; font-size: 10px; font-weight: 700; }
.trend-stats small { color: #9aa8af; font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.trend-stats strong { color: #d0d8db; margin-top: 5px; font-size: 14px; font-weight: 600; }
.chart-axis { color: #7d8e97; margin-top: 4px; font-size: 10px; font-weight: 600; }

.section-heading h2 { margin-top: 4px; font-size: 20px; font-weight: 700; }
.section-heading p { color: #92a1a8; font-size: 13px; font-weight: 500; }
.region-code { color: #92a5af; font-size: 10px; font-weight: 650; letter-spacing: .08em; }
.region-name { margin-top: 3px; font-size: 16px; font-weight: 750; line-height: 1.3; letter-spacing: -.02em; }
.region-score { font-size: 31px; font-weight: 600; }
.region-score-row > span { color: #8999a1; font-size: 9px; font-weight: 600; }
.region-level { font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.region-driver { color: #91a0a8; font-size: 11px; font-weight: 600; }
.region-change { font-size: 10px; font-weight: 700; }

.map-legend b { color: #8d9ca4; font-size: 10px; font-weight: 600; }
.hotspot-label { top: -16px; max-width: 150px; color: #d0d8db; background: rgba(7,12,16,.94); border-left-width: 2px; padding: 4px 7px; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.map-caption strong { color: #a8b7bd; font-size: 11px; font-weight: 600; }
.map-caption small { color: #7f8f97; font-size: 10px; font-weight: 500; }

.live-badge { color: #8ed0c5; padding: 5px 8px; font-size: 9px; font-weight: 700; }
.signal-item { grid-template-columns: 34px 1fr auto; gap: 11px; min-height: 72px; }
.signal-rank { font-size: 9px; font-weight: 600; }
.signal-item h3 { font-size: 13px; font-weight: 700; }
.signal-item p { color: #8a9aa2; margin-top: 5px; font-size: 11px; font-weight: 500; line-height: 1.5; }
.signal-state { font-size: 10px; font-weight: 700; letter-spacing: .01em; }

.text-button { color: #a6b2b8; padding: 8px 11px; font-size: 11px; font-weight: 600; }
.events-head { color: #8999a1; padding-block: 10px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.event-item { min-height: 74px; }
.event-time { color: #99a8af; font-size: 10px; font-weight: 600; }
.event-region { color: #c7d0d3; font-size: 12px; font-weight: 600; }
.event-copy strong { font-size: 13px; font-weight: 700; }
.event-copy small { color: #8a99a1; margin-top: 5px; font-size: 11px; font-weight: 500; }
.impact-badge { padding: 5px 8px; font-size: 10px; font-weight: 700; letter-spacing: .01em; }
.source-note { color: #7d8d95; }
.source-note p { color: #7d8d95; font-size: 10px; font-weight: 500; }

footer { color: #63747d; }
footer > div strong { font-size: 10px; font-weight: 700; }
footer > div span { font-size: 9px; font-weight: 600; }
footer p,
footer > span { font-size: 10px; font-weight: 600; }

@media (max-width: 620px) {
  body { font-size: 14px; }
  .brand strong { font-size: 14px; }
  .brand strong em { font-size: 9px; }
  .panel-heading h1,
  .panel-heading h2 { font-size: 20px; }
  .region-name { font-size: 14px; }
  .region-driver { font-size: 10px; }
  .hotspot-label { max-width: 112px; font-size: 9px; }
  .event-copy strong { font-size: 12px; }
  .event-copy small { font-size: 10px; line-height: 1.55; }
}