:root, [data-theme=light] {
  --ink: #1c2733; --ink-2: #4b5966; --ink-3: #75828e;
  --line: #dde3e8; --line-2: #eef1f4;
  --surface: #ffffff; --paper: #f6f7f8; --sea: #e9eff3; --page: #ffffff;
  --navy: #0f4c47; --accent: #0f766e; --btn: #0f766e; --radius: 8px; --glass: rgba(255,255,255,.92);
  --brand: #0d5953; --gold: #e3a52a; --hero1: #0a4a45; --hero2: #0f6f66; --hero3: #1c917f;
  --c-mon: #1c2733; --c-fc: #2f5d8a; --c-fd: #6b2fa0; --c-end: #1f6fd6; --c-fdt: #6b2fa0;
}
[data-theme=dark] {
  --ink: #e9eff6; --ink-2: #b4c0cd; --ink-3: #8393a5;
  --line: #27364c; --line-2: #1b2839;
  --surface: #101a29; --paper: #17243a; --sea: #0b1320; --page: #0b1320;
  --navy: #eef4fa; --accent: #6fd6c3; --btn: #11867b; --glass: rgba(13,21,33,.84);
  --brand: #8fe3d3; --gold: #f2c14e; --hero1: #062e2b; --hero2: #0a4a45; --hero3: #11685d;
  --c-mon: #f2f6fb; --c-fc: #7cc0ff; --c-fd: #a877f0; --c-end: #3f9bff; --c-fdt: #c8a6ff;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 16px/1.6 "Pretendard Variable", Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif; word-break: keep-all; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--navy); line-height: 1.3; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
.wrap { max-width: 1560px; margin: 0 auto; padding: 0 28px; }

.site-head { border-bottom: 1px solid var(--line); background: var(--surface); }
.site-head { position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 6px rgba(15, 40, 38, .06); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: clamp(14px, 2vw, 28px); min-height: 108px; flex-wrap: nowrap; }
.brand { color: var(--brand); display: flex; align-items: center; gap: clamp(10px, 1.3vw, 18px); line-height: 1.2; padding: 10px 0; }
.brand:hover { text-decoration: none; }
.brand { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.brand img { width: clamp(54px, 6.2vw, 90px); height: clamp(54px, 6.2vw, 90px); object-fit: contain; flex: none; }
[data-theme=dark] .brand img, [data-theme=dark] img.maplogo { content: url(../images/logo_dark.png); }
.brand b { display: block; font-size: clamp(17px, 2.1vw, 30px); font-weight: 800; letter-spacing: -0.025em; color: var(--brand); }
.brand span { display: block; font-size: clamp(11.5px, 1.15vw, 16.5px); font-weight: 500; color: var(--ink-3); margin-top: 6px; letter-spacing: .005em; }
.site-nav { display: flex; gap: clamp(10px, 1.5vw, 26px); align-items: center; flex-wrap: nowrap; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.theme button { padding: 4px 11px; font-size: 13px; }
.site-nav a { color: var(--ink-2); font-size: clamp(13.5px, 1.18vw, 17px); font-weight: 600; padding: 8px 0 6px; white-space: nowrap; border-bottom: 3px solid transparent; }
.site-nav a:hover { color: var(--navy); text-decoration: none; }
.site-nav a[aria-current] { color: var(--brand); font-weight: 700; border-bottom-color: var(--gold); }
.site-nav a:hover { color: var(--brand); }

.sample { background: var(--surface); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); padding: 5px 0; }

/* map stage fills the first screen */
.stage { --h: max(700px, min(calc(100vh - 116px), 860px)); display: grid; grid-template-columns: calc((var(--h) - 58px) * .876) 360px minmax(0, 1fr); height: var(--h); max-width: 1560px; margin: 0 auto; border-bottom: 1px solid var(--line); }
.charts { min-width: 0; overflow-y: auto; padding: 14px 18px 8px; border-left: 1px solid var(--line); }
.charts section.block { padding: 0 0 18px; }
.charts h2 { font-size: 18px; }
.charts section.block > .sub { font-size: 13px; margin-bottom: 12px; }
.charts .sp-grid, .charts .sp-grid.n1, .charts .sp-grid.n2, .charts .sp-grid.n3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.mapdate { background: var(--glass); padding: 2px 10px; border-radius: var(--radius); }
.maplogo { position: absolute; right: 6px; top: 6px; width: 104px; height: 104px; object-fit: contain; z-index: 2; pointer-events: none; filter: drop-shadow(0 0 2px rgba(255,255,255,.9)); }
.stage-map { position: relative; background: var(--sea); min-width: 0; display: flex; flex-direction: column; }
.mapwrap { position: relative; flex: 1; min-height: 0; display: flex; }
.mapbox { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.mapkey { position: absolute; right: 6px; top: 116px; width: 72px; background: var(--glass); border: 1px solid var(--line); padding: 6px 6px 2px; border-radius: var(--radius); z-index: 2; }

.mapbox canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.mapdate { position: absolute; left: 10px; top: 8px; font-size: 21px; font-weight: 700; color: var(--navy); letter-spacing: -0.015em; pointer-events: none; z-index: 2; pointer-events: none; }
.maptools { display: flex; flex: none; }
.colorbar { pointer-events: none; }
.cb-title { font-size: 11.5px; color: var(--ink-2); font-weight: 600; margin-bottom: 2px; }
.cb-v { display: flex; gap: 5px; height: 214px; padding: 5px 0 8px; }
.cb-bar { width: 15px; flex: none; display: flex; flex-direction: column; overflow: hidden; border-radius: 3px; }
.cb-bar i { flex: 1; display: block; }
.cb-ticks { position: relative; flex: 1; font-size: 10.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-ticks span { position: absolute; left: 0; transform: translateY(-50%); }
.dkey { font-size: 11.5px; color: var(--ink-2); display: flex; flex-direction: column; gap: 2px; margin-bottom: 7px; }
.dkey label { display: inline-flex; gap: 5px; align-items: center; font-weight: 500; }
.dkey input { accent-color: var(--navy); margin: 0; }

.timebar { display: flex; align-items: center; gap: 12px; background: var(--surface); border-top: 1px solid var(--line); padding: 8px 12px; }
.theme button, .maptools button { white-space: nowrap; }
.timebar input[type=range] { flex: 1; min-width: 0; margin: 0; accent-color: var(--navy); }
.slide { flex: 1; min-width: 0; position: relative; }
.slide input[type=range] { width: 100%; display: block; }
.sticks { position: relative; height: 16px; font-size: 12px; color: var(--ink-3); }
.sticks span { position: absolute; top: 1px; transform: translateX(-50%); }
.btn { font: inherit; font-size: 15px; color: #fff; background: var(--btn); border: 0; border-radius: 50%; width: 42px; height: 42px; padding: 0; cursor: pointer; flex: none; }
.btn:hover { border-color: var(--ink-3); }
.btn[aria-pressed=true] { background: #1b4f9c; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); }
.seg button { font: inherit; font-size: 14px; color: var(--ink-2); background: var(--surface); border: 0; border-left: 1px solid var(--line); padding: 6px 12px; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed=true] { background: var(--btn); color: #fff; }
select { font: inherit; font-size: 14px; color: var(--ink); padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

.side { padding: 20px 22px 10px; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.rankbox { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--line); margin-top: 4px; }
.rankbox thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; border-bottom: 1px solid var(--line); }
.hint { font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }
#regions td:nth-child(2) { white-space: nowrap; }
td.rk { width: 34px; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; padding-right: 8px; }
td.rk .bd { margin: 0; }
#regions tr:first-child { background: var(--paper); font-weight: 600; }
.side p.sum { font-size: 17.5px; line-height: 1.5; color: var(--ink); margin: 8px 0 4px; }
.side .asof { font-size: 13px; color: var(--ink-3); margin: 0 0 14px; }
.side h2 { font-size: 15px; color: var(--ink-2); font-weight: 500; margin: 0; }
.pickrow { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; }
.ctl { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--ink-2); margin: 10px 0; }
.limit { font-size: 13px; color: #a23b12; margin: 4px 0 6px; }
.limit:empty { margin: 4px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: 13.5px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 15px; padding: 3px 9px 3px 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.chip span { color: var(--ink-3); }
.bd { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 11.5px; font-weight: 700; margin-right: 6px; vertical-align: -3px; line-height: 1; }
.chip .bd { margin-right: 0; }
.bd.off { background: transparent; }

table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th { text-align: left; font-weight: 500; color: var(--ink-3); font-size: 12.5px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
td { padding: 2px 6px; height: 28px; border-bottom: 1px solid var(--line-2); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.lv { font-weight: 600; width: 46px; white-space: nowrap; font-size: 13.5px; }
.dc { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; border: 1px solid #000; }
td.dv { position: relative; width: 76px; padding: 0; }
td.dv::before { content: ""; position: absolute; left: 50%; top: 5px; bottom: 5px; width: 1px; background: var(--line); }
td.dv span { position: absolute; top: 9px; bottom: 9px; display: block; border-radius: 1px; }
tr.pick { cursor: pointer; }
tr.pick:hover { background: var(--paper); }

section.block { padding: 36px 0 8px; }
section.block > h2 { margin-bottom: 3px; }
section.block > .sub { color: var(--ink-2); font-size: 14.5px; margin: 0 0 18px; }
.sp-grid { display: grid; gap: 24px 32px; }
.sp-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp header { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.sp header span { font-size: 13.5px; color: var(--ink-3); margin-left: 8px; }
.chart { width: 100%; min-width: 0; }
.chart svg { display: block; overflow: visible; }
.chart text { font: 12.5px "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif; fill: var(--ink-3); }
.chart .grid { stroke: var(--line-2); stroke-width: 1; }
.chart text.thl { fill: var(--ink-2); font-size: 11.5px; font-weight: 600; }
.chart text.thc { fill: var(--navy); font-size: 12.5px; font-weight: 600; }
.fdinfo { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.fdinfo b { color: var(--c-fdt); }
.fdinfo.none { color: var(--ink-3); }
.fdtag { margin-left: 6px; font-size: 11.5px; font-weight: 700; color: var(--c-fdt); }
.chart text.fdn { fill: var(--c-fdt); font-size: 12px; font-weight: 700; }
.key { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin-top: 10px; }
.key i { display: inline-block; width: 16px; height: 3px; margin-right: 6px; vertical-align: 3px; }
.key i.pt { width: 9px; height: 9px; border-radius: 50%; background: var(--c-fd); vertical-align: 0; }
.key i.box { height: 11px; vertical-align: -1px; }

.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 2px; }
.thumb { font: inherit; padding: 0 0 5px; background: var(--paper); border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; text-align: center; font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.thumb[aria-pressed=true] { border-color: var(--btn); color: var(--navy); font-weight: 700; }
.thumb .tmap { position: relative; height: 78px; }
.thumb .tmap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.thumb small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; }

.tip { position: fixed; z-index: 20; pointer-events: none; background: #05090f; border: 1px solid var(--line); color: #fff; font-size: 13px; line-height: 1.45; padding: 7px 10px; border-radius: var(--radius); max-width: 260px; display: none; }
.lead { padding: 34px 0 22px; }
.lead p { margin: 10px 0 0; font-size: 18px; color: var(--ink-2); max-width: 780px; }
.prose { max-width: 780px; padding-bottom: 56px; }
.prose h2 { margin: 38px 0 10px; }
.prose p, .prose li { color: var(--ink); }
.prose td { padding: 7px 8px; }
.note { font-size: 14.5px; color: var(--ink-2); max-width: 880px; }
.site-foot { margin-top: 40px; background: #0a2f2c; color: #b9d3cf; font-size: 13.5px; padding: 36px 0 22px; }
.site-foot p { margin: 4px 0; }

@media (max-width: 1240px) {
  .stage { grid-template-columns: calc((var(--h) - 58px) * .876) minmax(0, 1fr); height: auto; grid-template-rows: var(--h) auto; }
  .charts { grid-column: 1 / -1; overflow: visible; border-left: 0; border-top: 1px solid var(--line); }
  .charts .sp-grid.n2, .charts .sp-grid.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .wrap { padding: 0 16px; }
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; }
  .charts .sp-grid.n2, .charts .sp-grid.n3 { grid-template-columns: minmax(0, 1fr); }
  .maplogo { width: 76px; height: 76px; }
  .dkey { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; }
  .mapkey .cb-title { font-size: 13px; }
  .mapwrap { display: block; flex: none; }
  .mapbox { height: calc(118vw + 96px); max-height: 86vh; min-height: 480px; }
  .mapkey { position: static; width: auto; max-width: none; border: 0; background: var(--surface); padding: 10px 14px 4px; border-top: 1px solid var(--line); border-radius: 0; }
  .cb-v { height: auto; display: block; padding: 0 0 18px; }
  .cb-bar { width: auto; height: 13px; flex-direction: row-reverse; }
  .cb-ticks { height: 14px; }
  .cb-ticks span { top: 2px !important; left: var(--p); transform: translateX(-50%); }
  .cb-ticks span:nth-child(even) { display: none; }
  .side { border-left: 0; padding: 16px; }
  .rankbox { max-height: 420px; }
  .mapdate { font-size: 19px; left: 12px; top: 10px; }
  .maptools { right: 8px; top: 8px; }
  .timebar { padding: 8px 14px; }
  .sp-grid.n2, .sp-grid.n3 { grid-template-columns: minmax(0, 1fr); }
}
.zchart { position: relative; }
.zc { position: absolute; right: 32px; top: -30px; display: flex; gap: 2px; }
.zc button { font: inherit; font-size: 12px; line-height: 1; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 4px 7px; cursor: pointer; }
.zc button:disabled { opacity: .4; cursor: default; }
.chart .brush { fill: var(--btn); opacity: .15; }
.zchart svg { touch-action: pan-y; cursor: crosshair; user-select: none; }

/* six-model lines under the ensemble mean */
.mleg{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:12px;color:var(--muted,#667);margin:0 0 4px 44px}
.mleg span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.mleg i{display:inline-block;width:16px;height:2px;border-radius:1px}
.mleg i.bold{height:4px}
.tipm{font-size:12px}

/* center pages (about, research, news), 2026-11-06 */
.kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.sec { padding: 26px 0 6px; border-top: 1px solid var(--line); margin-top: 18px; }
.sec h2 { margin-bottom: 14px; }
.sec p { max-width: 820px; }
.sec .intro { color: var(--ink-2); margin: -4px 0 16px; }
.sec.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.facts div { padding: 14px 16px; border-left: 1px solid var(--line); }
.facts div:first-child { border-left: 0; }
.facts dt { font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.facts dd { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.45; }
.facts dd span { font-weight: 400; font-size: 13.5px; color: var(--ink-2); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 12px 4px; color: var(--ink); }
.timeline li::before { content: ""; position: absolute; left: -25px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--navy); }
.timeline b { display: inline-block; min-width: 108px; color: var(--navy); }
.goal { font-size: 19px; font-weight: 600; color: var(--navy); margin: 0 0 16px; }
.aims { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.aims li { background: var(--paper); border-radius: var(--radius); padding: 14px 16px; color: var(--ink-2); font-size: 14.5px; }
.aims b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.teams article { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--surface); }
.teams .role { margin: 0 0 4px; font-size: 13px; color: var(--accent); font-weight: 600; }
.teams h3 { margin-bottom: 8px; }
.teams ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14.5px; }
.tablewrap { overflow-x: auto; }
.roadmap { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 760px; }
.roadmap th, .roadmap td { border: 1px solid var(--line); padding: 10px 12px; vertical-align: top; text-align: left; }
.roadmap thead th { background: var(--paper); color: var(--navy); }
.roadmap thead th span { font-weight: 400; font-size: 13px; color: var(--ink-2); }
.roadmap tbody th { width: 150px; color: var(--navy); background: var(--paper); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; padding-bottom: 12px; }
.gallery figure { margin: 0; }
.gallery a { display: block; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .2s; }
.gallery a:hover img { transform: scale(1.02); }
.gallery figcaption { font-size: 14px; color: var(--ink-2); margin-top: 6px; line-height: 1.4; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.toc a { font-size: 14.5px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 18px; padding: 5px 13px; background: var(--surface); }
.toc a:hover { color: var(--navy); border-color: var(--ink-3); text-decoration: none; }
.news-year h2 span { font-size: 14px; font-weight: 500; color: var(--ink-3); margin-left: 10px; }
.news { list-style: none; margin: 0; padding: 0; }
.news li { display: grid; grid-template-columns: 70px 130px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.news time { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 14px; }
.news .src { color: var(--ink-2); font-size: 14px; }
.news a { color: var(--ink); }
.news a:hover { color: var(--accent); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); }
.lightbox::backdrop { background: rgba(5, 9, 15, .78); }
.lightbox img { display: block; max-width: 100%; max-height: 84vh; border-radius: var(--radius); background: #fff; }
.lightbox p { color: #fff; margin: 8px 2px 0; font-size: 15px; }
.lightbox button { position: absolute; right: 6px; top: 2px; font-size: 30px; line-height: 1; color: #fff; background: rgba(0,0,0,.35); border: 0; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; }
@media (max-width: 1100px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div { border-left: 0; border-top: 1px solid var(--line); }
  .facts div:nth-child(-n+2) { border-top: 0; }
  .aims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teams, .sec.two { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .site-nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; gap: 18px; scrollbar-width: none; }
  .site-nav a { white-space: nowrap; }
  .facts, .aims { grid-template-columns: minmax(0, 1fr); }
  .facts div:nth-child(2) { border-top: 1px solid var(--line); }
  .news li { grid-template-columns: 56px minmax(0, 1fr); }
  .news .src { grid-column: 2; }
  .news a { grid-column: 1 / -1; }
}

/* hero band under the header (all pages), 2026-11-06 */
.hero { background: linear-gradient(100deg, var(--hero1) 0%, var(--hero2) 55%, var(--hero3) 100%); color: #fff; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -6%; top: -60%; width: 46%; height: 220%; background: radial-gradient(closest-side, rgba(255,255,255,.10), rgba(255,255,255,0)); pointer-events: none; }
.hero .wrap { padding-top: 26px; padding-bottom: 28px; position: relative; z-index: 1; }
.hero-k { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.hero-t { margin: 0; font-size: 28px; line-height: 1.45; font-weight: 700; letter-spacing: -0.02em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.12); }
.seg button[aria-pressed=true] { background: var(--btn); }
.sec h2 { position: relative; padding-left: 14px; }
.sec h2::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 2px; background: var(--gold); }
.facts { box-shadow: 0 1px 3px rgba(15,40,38,.05); }
.teams article { border-top: 3px solid var(--accent); }
.aims li { border-left: 3px solid var(--gold); }
@media (max-width: 1240px) { .hero-t { font-size: 23px; } .site-head .wrap { min-height: 88px; } }
@media (max-width: 640px) {
  .site-head { position: static; }
  .site-head .wrap { min-height: 0; gap: 6px; flex-wrap: wrap; }
  .brand { gap: 12px; } .brand b { font-size: 18px; } .brand span { font-size: 12.5px; margin-top: 3px; } .brand img { width: 54px; height: 54px; }
  .hero .wrap { padding-top: 16px; padding-bottom: 18px; } .hero-k { font-size: 12px; } .hero-t { font-size: 18px; } .hero-t br { display: none; }
}

/* design variation, 2026-11-06 d: cracked-soil texture in the hero, key figures, dark footer */
.hero { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='180' viewBox='0 0 260 180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='1.4'%3E%3Cpath d='M0 40 L38 52 L70 30 L112 44 L150 20 L196 38 L230 22 L260 34'/%3E%3Cpath d='M38 52 L44 98 L20 130 L0 138'/%3E%3Cpath d='M44 98 L92 108 L112 44'/%3E%3Cpath d='M92 108 L120 150 L104 180'/%3E%3Cpath d='M120 150 L170 132 L196 38'/%3E%3Cpath d='M170 132 L214 156 L260 140'/%3E%3Cpath d='M214 156 L230 22'/%3E%3Cpath d='M150 20 L140 0'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(100deg, var(--hero1) 0%, var(--hero2) 55%, var(--hero3) 100%); background-size: 260px 180px, auto; }
.hero .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.hero-main { min-width: 0; }
.hero-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, auto); gap: 0; flex: none; }
.hero-facts li { padding: 4px 22px; border-left: 1px solid rgba(255,255,255,.22); text-align: left; }
.hero-facts li:first-child { border-left: 0; }
.hero-facts b { display: block; font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-facts span { display: block; font-size: 13px; color: rgba(255,255,255,.78); margin-top: 4px; white-space: nowrap; }
.hero-facts li:nth-child(2) b { color: var(--gold); }
.lead h1 { font-size: 32px; }
.gallery a { box-shadow: 0 1px 2px rgba(15,40,38,.06); transition: box-shadow .2s, transform .2s; }
.gallery a:hover { box-shadow: 0 8px 22px rgba(15,40,38,.14); transform: translateY(-2px); }
.teams article, .facts { transition: box-shadow .2s; }
.teams article:hover { box-shadow: 0 8px 22px rgba(15,40,38,.10); }
.news li:hover { background: var(--paper); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.12); }
.foot-brand { display: flex; gap: 14px; align-items: center; }
.foot-brand img { width: 64px; height: 64px; content: none; }
.foot-brand b { display: block; color: #fff; font-size: 17px; }
.foot-brand span { display: block; color: #8fb5ae; font-size: 13px; margin-top: 3px; }
.foot-col h4 { margin: 0 0 10px; color: var(--gold); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.foot-col a { display: block; color: #d6e8e5; padding: 2px 0; }
.foot-col a:hover { color: #fff; }
.foot-col p { margin: 0; color: #b9d3cf; line-height: 1.7; }
.foot-legal { padding-top: 16px; font-size: 12.5px; color: #86a8a2; }
.foot-legal p { margin: 3px 0; }
.site-foot a { color: #d6e8e5; }
@media (max-width: 1240px) { .hero-facts li { padding: 4px 14px; } .hero-facts b { font-size: 24px; } }
@media (max-width: 1000px) { .hero .wrap { flex-direction: column; align-items: flex-start; gap: 18px; } .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .hero-facts { grid-template-columns: repeat(2, auto); row-gap: 10px; } .hero-facts li:nth-child(3) { border-left: 0; } .hero-facts b { font-size: 21px; } .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* footer: centre info and contact, larger type (2026-11-06 e) */
.site-foot { font-size: 15.5px; padding: 44px 0 26px; }
.foot-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr) minmax(0, .7fr) minmax(0, 1.6fr) minmax(0, 1.1fr); gap: 34px; }
.foot-brand img { width: 76px; height: 76px; }
.foot-brand b { font-size: 20px; }
.foot-brand span { font-size: 14.5px; }
.foot-col h4 { font-size: 14px; margin-bottom: 12px; }
.foot-col a { font-size: 15.5px; padding: 3px 0; }
.foot-col p { font-size: 15px; line-height: 1.8; }
.foot-col p a { display: inline; font-weight: 600; color: #fff; word-break: break-all; }
.foot-legal { font-size: 14px; padding-top: 18px; }
@media (max-width: 1240px) { .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-note { grid-column: 1 / -1; } }

/* hero: update schedule on the right (2026-11-06 f) */
.hero-upd { margin: 0; display: grid; gap: 10px; flex: none; min-width: 330px; }
.hero-upd div { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 10px 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; }
.hero-upd dt { font-size: 14px; font-weight: 700; color: var(--gold); letter-spacing: .02em; }
.hero-upd dd { margin: 0; }
.hero-upd b { display: block; font-size: 19px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.hero-upd span { display: block; font-size: 13.5px; color: rgba(255,255,255,.8); margin-top: 2px; }
.hero-upd i { font-style: normal; color: #fff; font-weight: 600; }
@media (max-width: 1000px) { .hero-upd { min-width: 0; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hero-upd { grid-template-columns: minmax(0, 1fr); } .hero-upd b { font-size: 17px; } }

/* publications (research page), 2026-11-06 g */
.pubf { margin: 0 0 18px; }
.pubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.pub { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); transition: box-shadow .2s; }
.pub:hover { box-shadow: 0 8px 22px rgba(15,40,38,.10); }
.pub-cover { display: block; align-self: start; }
.pub-cover img, .cover-gen { display: block; width: 104px; height: 138px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.cover-gen { background: linear-gradient(160deg, var(--pc) 0%, color-mix(in srgb, var(--pc) 70%, #000) 100%); color: #fff; padding: 10px 9px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; position: relative; }
.cover-gen span { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; line-height: 1.2; }
.cover-gen b { font-size: 13px; line-height: 1.22; font-weight: 800; }
.cover-gen i { margin-top: auto; font-style: normal; font-size: 12px; opacity: .85; border-top: 1px solid rgba(255,255,255,.35); padding-top: 4px; }
.pub-meta { margin: 0 0 4px; font-size: 13px; color: var(--ink-3); }
.pub-meta .st { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--accent); border: 1px solid currentColor; border-radius: 10px; padding: 0 7px; margin-right: 7px; }
.pub h3 { font-size: 15.5px; line-height: 1.4; margin: 0 0 6px; color: var(--ink); }
.pub-au { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.pub-vol { margin: 2px 0 4px; font-size: 13px; color: var(--ink-3); }
.pub .doi { font-size: 13px; font-weight: 600; word-break: break-all; }
@media (max-width: 640px) { .pubs { grid-template-columns: minmax(0, 1fr); } .pub { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; } .pub-cover img, .cover-gen { width: 78px; height: 104px; } .cover-gen b { font-size: 11px; } }

/* fluid text width (user 2026-11-06: one line on a wide screen, wrap only when narrow) */
.lead p, .sec p, .prose, .note, .goal { max-width: none; }
.hero-t br { display: none; }
.stats { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.stats li { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; }
.stats b { display: block; font-size: 32px; font-weight: 800; color: var(--brand); letter-spacing: -0.02em; line-height: 1.1; }
.stats small { font-size: 15px; font-weight: 600; margin-left: 2px; }
.stats span { display: block; margin-top: 6px; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding: 0 0 10px 20px; color: var(--ink); line-height: 1.6; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); }
@media (max-width: 1240px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats b { font-size: 26px; } }

/* ===== 2026-11-06 i: product-site look (glass header, large type, soft cards, motion) ===== */
:root, [data-theme=light] { --page2: #f5f5f7; --card-r: 20px; --shadow1: 0 1px 2px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.06); --shadow2: 0 2px 4px rgba(0,0,0,.05), 0 18px 48px rgba(0,0,0,.12); }
[data-theme=dark] { --page2: #0a0f17; --shadow1: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.35); --shadow2: 0 2px 4px rgba(0,0,0,.35), 0 18px 48px rgba(0,0,0,.5); }
body { -webkit-font-smoothing: antialiased; }
body:has(main.wrap) { background: var(--page2); }
.site-head { background: color-mix(in srgb, var(--surface) 78%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: none; }
.site-nav a { border-bottom: 0; padding: 7px 14px; border-radius: 999px; transition: background .25s, color .25s; }
.site-nav { gap: clamp(2px, .5vw, 8px); }
.site-nav a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.site-nav a[aria-current] { background: var(--brand); color: #fff; }
[data-theme=dark] .site-nav a[aria-current] { color: #062e2b; }
.seg { border-radius: 999px; }
/* hero: slowly moving light over the gradient, text rises in */
.hero { background-size: 260px 180px, 220% 220%; animation: heroflow 18s ease-in-out infinite alternate; }
@keyframes heroflow { from { background-position: 0 0, 0% 50%; } to { background-position: 130px 90px, 100% 50%; } }
.hero::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(40% 50% at 20% 30%, rgba(227,165,42,.22), transparent 60%), radial-gradient(35% 45% at 80% 70%, rgba(143,227,211,.22), transparent 60%); animation: glow 14s ease-in-out infinite alternate; pointer-events: none; }
@keyframes glow { from { transform: translate3d(-4%, -2%, 0) rotate(0deg); } to { transform: translate3d(4%, 3%, 0) rotate(8deg); } }
.hero .wrap { padding-top: clamp(26px, 3.4vw, 48px); padding-bottom: clamp(28px, 3.6vw, 52px); }
.hero-t { font-size: clamp(20px, 2.35vw, 36px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.32; }
.hero-k, .hero-t, .hero-upd div { opacity: 0; transform: translateY(14px); animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-t { animation-delay: .12s; } .hero-upd div:nth-child(1) { animation-delay: .28s; } .hero-upd div:nth-child(2) { animation-delay: .4s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.hero-upd div { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 16px; background: rgba(255,255,255,.10); transition: background .3s, transform .3s; }
.hero-upd div:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
/* content pages: big headline, card sections */
.lead { padding: clamp(40px, 5vw, 72px) 0 clamp(18px, 2vw, 28px); }
.lead h1 { font-size: clamp(34px, 4.2vw, 56px); font-weight: 800; letter-spacing: -0.04em; }
.lead p { font-size: clamp(17px, 1.35vw, 21px); color: var(--ink-2); }
.kicker { font-size: 13px; letter-spacing: .22em; }
.sec { border-top: 0; margin-top: 22px; padding: clamp(22px, 2.6vw, 36px); background: var(--surface); border-radius: var(--card-r); box-shadow: var(--shadow1); }
.sec h2 { font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -0.025em; padding-left: 0; }
.sec h2::before { display: none; }
.sec.two { background: transparent; box-shadow: none; padding: 0; gap: 22px; }
.sec.two > div { background: var(--surface); border-radius: var(--card-r); box-shadow: var(--shadow1); padding: clamp(22px, 2.6vw, 36px); }
.facts, .teams article, .aims li, .stats li, .pub, .roadmap { border-radius: 16px; }
.facts { border: 0; background: var(--paper); box-shadow: none; }
.facts div { border-left-color: color-mix(in srgb, var(--line) 60%, transparent); }
.teams article { border: 0; border-top: 0; background: var(--paper); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.teams article:hover, .pub:hover, .stats li:hover { transform: translateY(-4px); box-shadow: var(--shadow2); }
.stats li { border: 0; border-top: 0; background: var(--paper); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.stats b { font-size: clamp(30px, 2.8vw, 44px); background: linear-gradient(120deg, var(--brand), var(--accent) 60%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aims li { border-left: 0; background: var(--paper); }
.pub { border: 0; background: var(--paper); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.gallery a { border: 0; border-radius: 14px; }
.toc a { border: 0; background: var(--surface); box-shadow: var(--shadow1); padding: 8px 16px; transition: transform .25s, box-shadow .25s; }
.toc a:hover { transform: translateY(-2px); box-shadow: var(--shadow2); }
.news { margin-top: 4px; }
.news li { border-bottom-color: color-mix(in srgb, var(--line) 55%, transparent); padding: 12px 8px; border-radius: 10px; transition: background .2s; }
/* scroll reveal (motion.js adds .rv / .in) */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
/* monitoring pages: rounded floating controls */
.mapkey, .maptools .seg, .chip, select, .btn { border-radius: 14px; }
.mapkey { box-shadow: var(--shadow1); border: 0; }
.site-foot { background: linear-gradient(180deg, #0b3532, #071f1d); }
@media (prefers-reduced-motion: reduce) { .hero, .hero::before { animation: none; } .hero-k, .hero-t, .hero-upd div { animation: none; opacity: 1; transform: none; } .rv { opacity: 1; transform: none; transition: none; } }
@media (max-width: 640px) { .sec { padding: 18px; border-radius: 16px; } .site-nav a { padding: 6px 10px; } }

/* ===== 2026-11-06 j: gcea.or.kr-style photo hero under a transparent header ===== */
:root { --hh: 108px; }
@media (max-width: 1240px) { :root { --hh: 88px; } }
.site-head { transition: background .35s, box-shadow .35s, border-color .35s; }
.site-head:not(.solid) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: rgba(255,255,255,.18); }
.site-head:not(.solid) .brand b, .site-head:not(.solid) .site-nav a { color: #fff; }
.site-head:not(.solid) .brand span { color: rgba(255,255,255,.78); }
.site-head:not(.solid) .brand img { content: url(../images/logo_dark.png); }
.site-head:not(.solid) .site-nav a:hover { background: rgba(255,255,255,.14); }
.site-head:not(.solid) .site-nav a[aria-current] { background: #fff; color: var(--hero1); }
.site-head:not(.solid) .seg { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.site-head:not(.solid) .seg button { background: transparent; color: #fff; border-left-color: rgba(255,255,255,.3); }
.site-head:not(.solid) .seg button[aria-pressed=true] { background: #fff; color: var(--hero1); }
.hero { margin-top: calc(-1 * var(--hh)); padding-top: var(--hh); animation: none;
  background: linear-gradient(180deg, rgba(4,18,28,.74) 0%, rgba(4,18,28,.36) 46%, rgba(4,18,28,.80) 100%), url(../images/hero.jpg) center 62% / cover no-repeat; }
.hero::before { inset: 0; background: radial-gradient(60% 80% at 85% 20%, rgba(227,165,42,.20), transparent 60%); animation: glow 16s ease-in-out infinite alternate; }
.hero::after { display: none; }
.hero .wrap { display: block; padding-top: clamp(34px, 4.2vw, 70px); padding-bottom: clamp(30px, 3.6vw, 56px); }
.hero-k { color: var(--gold); margin-bottom: 14px; }
.hero-en { margin: 0 0 16px; font-size: clamp(30px, 4.4vw, 70px); line-height: 1.02; font-weight: 900; letter-spacing: -0.035em; color: #fff; text-transform: uppercase; max-width: 15em;
  opacity: 0; transform: translateY(18px); animation: rise 1s cubic-bezier(.2,.7,.2,1) .05s forwards; }
.hero-t { font-size: clamp(16px, 1.45vw, 22px); font-weight: 600; color: rgba(255,255,255,.92); animation-delay: .2s; }
.hero-live { margin-top: clamp(22px, 3vw, 44px); padding-top: clamp(16px, 2vw, 26px); border-top: 1px solid rgba(255,255,255,.22); opacity: 0; transform: translateY(16px); animation: rise 1s cubic-bezier(.2,.7,.2,1) .35s forwards; }
.hero-lt { margin: 0 0 12px; color: #fff; font-size: 17px; font-weight: 700; }
.hero-lt span { margin-left: 12px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.7); }
.hero-live ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero-live li { padding: 2px clamp(12px, 2vw, 34px); border-left: 1px solid rgba(255,255,255,.22); }
.hero-live li:first-child { padding-left: 0; border-left: 0; }
.hero-live span { display: block; font-size: 13.5px; color: rgba(255,255,255,.78); }
.hero-live b { display: block; margin: 4px 0 2px; font-size: clamp(26px, 3vw, 46px); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hero-live .c1 b { color: #5cc8ff; } .hero-live .c2 b { color: #ff8a4c; } .hero-live .c3 b { color: #5fe0a8; } .hero-live .c4 b { color: #ffd166; }
.hero-live i { font-style: normal; font-size: 13px; color: rgba(255,255,255,.72); } .hero-live em { font-style: normal; color: #fff; font-weight: 700; }
/* map pages: a shorter photo band so the map stays in view */
body[data-ds] .hero-en { font-size: clamp(24px, 2.6vw, 42px); margin-bottom: 8px; }
body[data-ds] .hero .wrap { padding-top: clamp(20px, 2.2vw, 34px); padding-bottom: clamp(18px, 2vw, 30px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 40px; align-items: end; }
body[data-ds] .hero-live { margin-top: 0; padding-top: 0; border-top: 0; }
body[data-ds] .hero-live ul { grid-template-columns: repeat(4, auto); }
body[data-ds] .hero-live b { font-size: clamp(22px, 2vw, 32px); }
body[data-ds] .hero-lt { display: none; }
/* section titles centred (content pages), deep band for the papers */
main.wrap > .sec > h2, main.wrap > .sec > .intro { text-align: center; }
main.wrap > .sec > h2 { font-size: clamp(26px, 2.4vw, 38px); margin-bottom: 8px; }
main.wrap > .sec > .intro { margin: 0 auto 22px; color: var(--ink-2); }
.pubf { display: flex; width: max-content; margin: 0 auto 22px; }
#papers { background: linear-gradient(135deg, #0a1a4a 0%, #0b2a6e 55%, #0f4c8a 100%); color: #fff; }
#papers > h2, #papers > .intro { color: #fff; } #papers > .intro { opacity: .8; }
#papers .pub { background: rgba(255,255,255,.07); } #papers .pub h3 { color: #fff; } #papers .pub-au, #papers .pub-vol, #papers .pub-meta { color: rgba(255,255,255,.72); }
#papers .pub .doi { color: #8fd3ff; } #papers .pub-meta .st { color: #ffd166; }
#papers .seg { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); } #papers .seg button { background: transparent; color: #fff; border-left-color: rgba(255,255,255,.25); }
#papers .seg button[aria-pressed=true] { background: #fff; color: #0b2a6e; }
@media (max-width: 1000px) { body[data-ds] .hero .wrap { grid-template-columns: minmax(0, 1fr); } .hero-live ul, body[data-ds] .hero-live ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; } .hero-live li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 640px) { :root { --hh: 0px; } .hero { margin-top: 0; padding-top: 0; } .site-head:not(.solid) { background: var(--hero1); } .hero-lt span { display: block; margin: 4px 0 0; } .pubf { width: auto; } }

/* 2026-11-06 k: English title and Korean sentence on one line each (sized to the window), wrap only on phones */
.hero-en, body[data-ds] .hero-en { max-width: none; white-space: nowrap; font-size: min(calc((min(100vw, 1560px) - 56px) / 29), 64px); }
.hero-t { white-space: nowrap; font-size: min(calc((min(100vw, 1560px) - 56px) / 52), 22px); }
body[data-ds] .hero-en { font-size: min(calc((min(100vw, 1560px) - 56px) / 29), 44px); }
body[data-ds] .hero .wrap { display: block; }
body[data-ds] .hero-live { margin-top: 14px; }
body[data-ds] .hero-live ul { grid-template-columns: repeat(4, auto); justify-content: start; }
@media (max-width: 760px) {
  .hero-en, body[data-ds] .hero-en { white-space: normal; font-size: 26px; }
  .hero-t { white-space: normal; font-size: 16px; }
}

/* ===== 2026-11-06 l: drought palette (night-blue + scorched amber) replaces teal; cracked-earth hero and page backdrop ===== */
:root, [data-theme=light] {
  --navy: #0b1f3a; --accent: #b4561a; --btn: #0f3d7a; --brand: #0b2a5a; --gold: #f0a23b;
  --hero1: #081a33; --hero2: #10305f; --hero3: #7a3a12; --page2: #f4efe7; --paper: #faf6f0; --sea: #eef0f3;
  --c-fc: #0f3d7a;
}
[data-theme=dark] {
  --accent: #f3a55a; --btn: #2a6fd1; --brand: #ffd28a; --gold: #f6b24e;
  --hero1: #050d1c; --hero2: #0b1f3a; --hero3: #5a2a0c; --page2: #0a0f17; --paper: #121c2c;
}
/* hero: scorched cracked earth, slow push-in, heat glow drifting */
.hero { background: #081a33; isolation: isolate; }
.hero::after { content: ""; display: block; position: absolute; inset: 0; width: auto; height: auto; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,14,32,.88) 0%, rgba(8,22,46,.55) 42%, rgba(60,24,4,.62) 100%), url(../images/hero_cracks.jpg) center 55% / cover no-repeat;
  transform-origin: 60% 60%; animation: kenburns 38s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
.hero::before { z-index: 0; inset: 0; width: auto; height: auto; background: radial-gradient(45% 70% at 82% 30%, rgba(255,140,40,.28), transparent 62%), radial-gradient(40% 60% at 12% 85%, rgba(255,190,90,.16), transparent 60%); }
.hero .wrap { z-index: 1; }
.hero-live .c1 b { color: #7cc8ff; } .hero-live .c2 b { color: #ff9a52; } .hero-live .c3 b { color: #ffd166; } .hero-live .c4 b { color: #fff2d6; }
/* the same ground under the content: faint cracked-earth texture fixed behind every page */
body { background: linear-gradient(rgba(244,239,231,.94), rgba(244,239,231,.94)), url(../images/cracks.jpg) center / cover fixed; }
[data-theme=dark] body { background: linear-gradient(rgba(8,12,20,.93), rgba(8,12,20,.93)), url(../images/cracks.jpg) center / cover fixed; }
body:has(main.wrap) { background: linear-gradient(rgba(244,239,231,.94), rgba(244,239,231,.94)), url(../images/cracks.jpg) center / cover fixed; }
[data-theme=dark] body:has(main.wrap) { background: linear-gradient(rgba(8,12,20,.93), rgba(8,12,20,.93)), url(../images/cracks.jpg) center / cover fixed; }
.stage { background: var(--surface); }
.sec, .sec.two > div { background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.stats b { background: linear-gradient(120deg, var(--brand), #c0601d 70%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-nav a[aria-current] { background: var(--brand); }
[data-theme=dark] .site-nav a[aria-current] { color: #0b1f3a; }
.site-head:not(.solid) .site-nav a[aria-current], .site-head:not(.solid) .seg button[aria-pressed=true] { color: #0b2a5a; }
.ticks li::before { background: var(--gold); }
.teams .role, .kicker { color: var(--accent); }
#papers { background: linear-gradient(135deg, #081a33 0%, #0f2c58 55%, #5a2a0c 100%); }
.site-foot { background: linear-gradient(180deg, #0b1f3a 0%, #060f1e 100%); color: #c4cedd; }
.foot-brand span { color: #9fb0c8; } .foot-col p, .foot-legal { color: #a9b6c8; } .foot-col a { color: #e3e9f2; }

/* 2026-11-06 m: live summary on the photo right above the map; the map card rises into the photo (no hard edge) */
.hero-status { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 26px; align-items: center; margin-top: clamp(16px, 1.8vw, 26px);
  padding: 14px 22px; border-radius: 18px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); opacity: 0; transform: translateY(14px); animation: rise 1s cubic-bezier(.2,.7,.2,1) .5s forwards; }
.hero-status h1 { margin: 0; color: #fff; font-size: clamp(20px, 1.6vw, 26px); font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.hero-status .hs-title { padding-right: 26px; border-right: 1px solid rgba(255,255,255,.25); }
.hero-status .sum { margin: 0; color: #fff; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; }
.hero-status .asof { margin: 2px 0 0; color: rgba(255,255,255,.72); font-size: 13.5px; }
body.has-status .hero .wrap { padding-bottom: calc(clamp(18px, 2vw, 30px) + 34px); }
body.has-status .hero::after { background: linear-gradient(180deg, rgba(6,14,32,.88) 0%, rgba(8,22,46,.55) 40%, rgba(40,18,6,.70) 100%), url(../images/hero_cracks.jpg) center 55% / cover no-repeat; }
body.has-status .stage { position: relative; z-index: 2; margin-top: -34px; border-radius: 26px 26px 0 0; overflow: hidden; box-shadow: 0 -10px 40px rgba(4,10,24,.28); border-bottom: 0; }
body.has-status .side { padding-top: 18px; }
@media (max-width: 1000px) {
  .hero-status { grid-template-columns: minmax(0, 1fr); }
  .hero-status .hs-title { padding-right: 0; border-right: 0; }
}
@media (max-width: 640px) { body.has-status .stage { margin-top: -18px; border-radius: 18px 18px 0 0; } body.has-status .hero .wrap { padding-bottom: 36px; } }

/* compact photo band on every map page (the forecast page has no data-ds) */
body.has-status .hero-en { font-size: min(calc((min(100vw, 1560px) - 56px) / 29), 44px); margin-bottom: 8px; }
body.has-status .hero .wrap { padding-top: clamp(20px, 2.2vw, 34px); display: block; }
body.has-status .hero-live { margin-top: 14px; padding-top: 0; border-top: 0; }
body.has-status .hero-live ul { grid-template-columns: repeat(4, auto); justify-content: start; }
body.has-status .hero-live b { font-size: clamp(22px, 2vw, 32px); }
body.has-status .hero-lt { display: none; }
@media (max-width: 1000px) { body.has-status .hero-live ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { body.has-status .hero-en { font-size: 26px; } }

/* 2026-11-06 o: no seam between photo and page - the photo fades into the page ground behind the map card; the card gets a warm hairline */
body.has-status .hero { background: transparent; }
body.has-status .hero::after { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 120px), transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 120px), transparent 100%); }
body.has-status .hero::before { -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
body.has-status .hero .wrap { padding-bottom: calc(clamp(18px, 2vw, 30px) + 70px); }
body.has-status .stage { margin-top: -70px; border: 1px solid rgba(240,162,59,.45); border-bottom: 0;
  box-shadow: 0 0 0 6px rgba(255,255,255,.10), 0 -18px 50px rgba(30,14,4,.22), 0 24px 60px rgba(4,10,24,.10); }
[data-theme=dark] body.has-status .stage { border-color: rgba(246,178,78,.35); box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 -18px 50px rgba(0,0,0,.5); }
@media (max-width: 640px) { body.has-status .stage { margin-top: -40px; } body.has-status .hero .wrap { padding-bottom: 56px; } }

/* ===== 2026-11-06 p: page colours (실시간 = 하늘, 전망 = 주황, 과거 = 보라) and prominent controls ===== */
body.pg-now { --pg: #3fb0ff; --pg-d: #0d6fb8; --pg-soft: rgba(63,176,255,.12); }
body.pg-fc { --pg: #ff8a3d; --pg-d: #c4560f; --pg-soft: rgba(255,138,61,.13); }
body.pg-hist { --pg: #b48cff; --pg-d: #6b3fc4; --pg-soft: rgba(180,140,255,.14); }
body[class*=pg-] .hero-k { color: var(--pg); }
body[class*=pg-] .hero-status { border-color: color-mix(in srgb, var(--pg) 55%, transparent); box-shadow: inset 4px 0 0 var(--pg); }
body[class*=pg-] .hero-status h1::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--pg); margin-right: 10px; vertical-align: middle; box-shadow: 0 0 0 4px color-mix(in srgb, var(--pg) 30%, transparent); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--pg) 0%, transparent); } }
body[class*=pg-] .hero-live li { border-left-color: rgba(255,255,255,.2); }
body.pg-now .hero-live .c1 b, body.pg-fc .hero-live .c1 b { color: var(--pg); }
body.pg-now .hero-live .c2 b { color: #fff; } body.pg-now .hero-live .c3 b { color: #ffb15c; } body.pg-now .hero-live .c4 b { color: #d4a8ff; }
body.pg-fc .hero-live .c2 b, body.pg-fc .hero-live .c3 b { color: #ffd166; } body.pg-fc .hero-live .c4 b { color: #d4a8ff; }
body[class*=pg-] .stage { border-color: color-mix(in srgb, var(--pg) 55%, transparent); }
body[class*=pg-] .site-head:not(.solid) .site-nav a[aria-current] { background: var(--pg); color: #061226; }
/* history: how-to */
.hist-how { list-style: none; counter-reset: h; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hist-how li { counter-increment: h; position: relative; padding: 12px 14px 12px 46px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.82); font-size: 13.5px; line-height: 1.5; }
.hist-how li::before { content: counter(h); position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--pg); color: #1a0b3a; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.hist-how b { display: block; color: #fff; font-size: 15px; margin-bottom: 2px; }
.hist-cases { margin: 12px 0 0; color: rgba(255,255,255,.78); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hist-cases a { color: #fff; padding: 4px 12px; border-radius: 999px; background: rgba(180,140,255,.22); border: 1px solid rgba(180,140,255,.5); font-weight: 600; }
.hist-cases a:hover { background: var(--pg); color: #1a0b3a; text-decoration: none; }
/* controls: one highlighted panel at the top of the side column */
.side .ctl { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 2px 0 14px; padding: 14px; border-radius: 16px;
  background: var(--pg-soft, var(--paper)); border: 1.5px solid color-mix(in srgb, var(--pg, var(--accent)) 45%, transparent); }
.ctl-item { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0; }
.ctl-k { font-size: 13.5px; font-weight: 800; color: var(--pg-d, var(--accent)); letter-spacing: .02em; }
select.big { width: 100%; font-size: 15.5px; font-weight: 700; color: var(--ink); padding: 9px 36px 9px 14px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--pg, var(--accent)) 60%, transparent);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23556' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  -webkit-appearance: none; appearance: none; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
select.big:hover, select.big:focus { border-color: var(--pg, var(--accent)); outline: none; box-shadow: 0 0 0 4px var(--pg-soft, rgba(0,0,0,.05)); }
.seg.big { display: flex; width: 100%; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--pg, var(--accent)) 60%, transparent); background: var(--surface); padding: 3px; gap: 3px; }
.seg.big button { flex: 1; border: 0; border-radius: 9px; font-size: 14.5px; font-weight: 700; padding: 8px 6px; color: var(--ink-2); background: transparent; transition: background .2s, color .2s; }
.seg.big button small { font-weight: 500; font-size: 11.5px; opacity: .75; margin-left: 3px; }
.seg.big button[aria-pressed=true] { background: var(--pg-d, var(--brand)); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.seg.big button:hover:not([aria-pressed=true]) { background: var(--pg-soft, var(--paper)); color: var(--ink); }
[data-theme=dark] .seg.big button[aria-pressed=true] { background: var(--pg); color: #061226; }
@media (max-width: 1000px) { .hist-how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hist-how { grid-template-columns: minmax(0, 1fr); } }
.hero-live .hist-how li, .hero-live .hist-how li:first-child { padding: 12px 14px 12px 46px; border: 1px solid rgba(255,255,255,.16); border-left: 1px solid rgba(255,255,255,.16); }
.hero-live .hist-how b { font-size: 15.5px; font-weight: 800; margin: 0 0 3px; color: #fff; letter-spacing: -0.01em; line-height: 1.35; }
.hero-live .hist-how li { display: block; }
body.pg-hist .hero-live .hero-lt { display: block; }
body.pg-hist .hero-live .hist-how b { font-size: 16px; }

/* night mode: restore the dark values that the later light-palette block (:root) overrode */
html[data-theme=dark] { --navy: #eef4fa; --sea: #0b1320; --c-fc: #7cc0ff; --ink: #e9eff6; --ink-2: #b4c0cd; --ink-3: #8393a5; --line: #27364c; --line-2: #1b2839; --surface: #101a29; }
html[data-theme=dark] .ctl-k { color: var(--pg, var(--accent)); }
html[data-theme=dark] .side .ctl { background: color-mix(in srgb, var(--pg, var(--accent)) 10%, var(--surface)); }
html[data-theme=dark] select.big { background-color: #0b1422; color: var(--ink); }

/* ===== 2026-11-06 r: each page its own photo, tint and title ===== */
.hero[data-bg]::after { background-position: center 55%; background-size: cover; background-repeat: no-repeat; }
.hero[data-bg=now]::after { background-image: linear-gradient(180deg, rgba(4,16,34,.86) 0%, rgba(8,30,60,.50) 42%, rgba(30,16,6,.70) 100%), url(../images/hero_cracks.jpg); }
.hero[data-bg=fc]::after { background-image: linear-gradient(180deg, rgba(20,8,2,.78) 0%, rgba(60,24,4,.35) 45%, rgba(24,10,4,.78) 100%), url(../images/hero_fc.jpg); background-position: center 70%; }
.hero[data-bg=hist]::after { background-image: linear-gradient(180deg, rgba(16,8,34,.84) 0%, rgba(40,20,70,.45) 45%, rgba(16,8,30,.80) 100%), url(../images/hero_hist.jpg); filter: saturate(.75); }
.hero[data-bg=method]::after { background-image: linear-gradient(180deg, rgba(8,14,22,.86) 0%, rgba(20,30,40,.55) 45%, rgba(8,14,22,.82) 100%), url(../images/hero_method.jpg); filter: grayscale(.3); }
.hero[data-bg=research]::after { background-image: linear-gradient(180deg, rgba(4,12,40,.82) 0%, rgba(10,30,80,.40) 45%, rgba(6,14,40,.82) 100%), url(../images/hero_research.jpg); background-position: center 60%; }
.hero[data-bg=news]::after { background-image: linear-gradient(180deg, rgba(30,14,2,.82) 0%, rgba(80,40,6,.38) 45%, rgba(30,14,2,.82) 100%), url(../images/hero_news.jpg); }
.hero[data-bg=about]::after { background-image: linear-gradient(180deg, rgba(4,20,24,.84) 0%, rgba(10,50,50,.40) 45%, rgba(6,20,22,.82) 100%), url(../images/hero_about.jpg); }
.hero[data-bg=fc] .hero-k { color: #ff9a52; } .hero[data-bg=hist] .hero-k { color: #c9a6ff; } .hero[data-bg=now] .hero-k { color: #6cc4ff; }
.hero[data-bg=method] .hero-k { color: #9fd8c8; } .hero[data-bg=research] .hero-k { color: #8fb8ff; } .hero[data-bg=news] .hero-k { color: #ffcf6e; } .hero[data-bg=about] .hero-k { color: #f0a23b; }
/* titles: shorter titles may be larger, still one line */
.hero-en { text-transform: none; letter-spacing: -0.04em; }
.hero[data-bg]:not([data-bg=about]) .hero-en { font-size: min(calc((min(100vw, 1560px) - 56px) / 14), 64px); }
body.has-status .hero[data-bg] .hero-en { font-size: min(calc((min(100vw, 1560px) - 56px) / 16), 46px); }
.hero[data-bg=about] .hero-en { text-transform: uppercase; }
/* content pages: the live figures stay on about only */
.hero[data-bg=method] .hero-live, .hero[data-bg=research] .hero-live, .hero[data-bg=news] .hero-live { display: none; }
.hero[data-bg=method] .wrap, .hero[data-bg=research] .wrap, .hero[data-bg=news] .wrap { padding-bottom: clamp(36px, 4vw, 64px); }
@media (max-width: 760px) { .hero[data-bg] .hero-en, body.has-status .hero[data-bg] .hero-en { font-size: 28px; } }

/* map pages carry body.has-status, whose rule is more specific - repeat the photos there */
body.has-status .hero[data-bg=now]::after { background-image: linear-gradient(180deg, rgba(4,16,34,.86) 0%, rgba(8,30,60,.50) 42%, rgba(30,16,6,.70) 100%), url(../images/hero_cracks.jpg); }
body.has-status .hero[data-bg=fc]::after { background-image: linear-gradient(180deg, rgba(20,8,2,.78) 0%, rgba(60,24,4,.35) 45%, rgba(24,10,4,.78) 100%), url(../images/hero_fc.jpg); background-position: center 70%; }
body.has-status .hero[data-bg=hist]::after { background-image: linear-gradient(180deg, rgba(16,8,34,.84) 0%, rgba(40,20,70,.45) 45%, rgba(16,8,30,.80) 100%), url(../images/hero_hist.jpg); filter: saturate(.75); }
body.has-status .hero[data-bg=method]::after { background-image: linear-gradient(180deg, rgba(8,14,22,.86) 0%, rgba(20,30,40,.55) 45%, rgba(8,14,22,.82) 100%), url(../images/hero_method.jpg); filter: grayscale(.3); }
body.has-status .hero[data-bg=research]::after { background-image: linear-gradient(180deg, rgba(4,12,40,.82) 0%, rgba(10,30,80,.40) 45%, rgba(6,14,40,.82) 100%), url(../images/hero_research.jpg); background-position: center 60%; }
body.has-status .hero[data-bg=news]::after { background-image: linear-gradient(180deg, rgba(30,14,2,.82) 0%, rgba(80,40,6,.38) 45%, rgba(30,14,2,.82) 100%), url(../images/hero_news.jpg); }
body.has-status .hero[data-bg=about]::after { background-image: linear-gradient(180deg, rgba(4,20,24,.84) 0%, rgba(10,50,50,.40) 45%, rgba(6,20,22,.82) 100%), url(../images/hero_about.jpg); }

/* the photo band already names the page */
main.wrap > .lead .kicker, main.wrap > .lead h1 { display: none; }
main.wrap > .lead { padding: clamp(22px, 2.4vw, 34px) 0 6px; }

/* loading state of the map pages */
.maploading { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center;
  background: linear-gradient(100deg, var(--sea) 30%, color-mix(in srgb, var(--sea) 60%, #fff) 50%, var(--sea) 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; transition: opacity .45s; }
.maploading.out { opacity: 0; pointer-events: none; }
.maploading p { margin: 6px 0 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.maploading span { font-size: 13px; color: var(--ink-3); }
.ml-ring { width: 54px; height: 54px; border-radius: 50%; border: 5px solid color-mix(in srgb, var(--pg, var(--accent)) 22%, transparent); border-top-color: var(--pg, var(--accent)); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -300% 0; } }
.skel { position: relative; min-height: 180px; }
.skel::after { content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 14px, var(--surface) 14px 30px), linear-gradient(100deg, var(--line-2) 30%, var(--surface) 50%, var(--line-2) 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .maploading, .skel::after, .ml-ring { animation-duration: 3s; } }
.maploading { align-content: start; padding-top: min(24vh, 220px); }

/* ===== 2026-11-06 v: modern data-dashboard look, search, help, mobile ===== */
/* hero: deep slate with the photo only as a faint texture, fine grid, coloured glow of the page */
.hero[data-bg]::after, body.has-status .hero[data-bg]::after { filter: grayscale(.55) contrast(1.05) brightness(.9); opacity: .32; animation: kenburns 60s ease-in-out infinite alternate; }
.hero, body.has-status .hero { background: radial-gradient(70% 120% at 85% 0%, color-mix(in srgb, var(--pg, #3fb0ff) 26%, transparent), transparent 60%), linear-gradient(160deg, #070d1a 0%, #0b1526 55%, #0d1a2e 100%); }
.hero::before, body.has-status .hero::before { background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); animation: none; }
.hero[data-bg=about] { --pg: #f0a23b; } .hero[data-bg=method] { --pg: #5fd3b3; } .hero[data-bg=research] { --pg: #7aa8ff; } .hero[data-bg=news] { --pg: #ffcf6e; }
.hero-en { font-weight: 800; letter-spacing: -0.045em; background: linear-gradient(90deg, #fff 0%, #fff 55%, color-mix(in srgb, var(--pg, #fff) 70%, #fff) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-k { font-size: 12.5px; letter-spacing: .2em; }
.hero-t { color: rgba(226,234,245,.86); font-weight: 500; }
.hero-live li { border-left-color: rgba(255,255,255,.1); }
.hero-live b { font-weight: 700; }
.hero-status { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; }
body[class*=pg-] .hero-status { box-shadow: inset 3px 0 0 var(--pg); }
/* header: quiet, no saturated pills */
.site-nav a, .site-head:not(.solid) .site-nav a { border-radius: 10px; font-weight: 600; }
.site-nav a[aria-current], body[class*=pg-] .site-nav a[aria-current], .site-head:not(.solid) .site-nav a[aria-current], body[class*=pg-] .site-head:not(.solid) .site-nav a[aria-current] {
  background: transparent; color: inherit; box-shadow: inset 0 -2px 0 var(--pg, var(--gold)); border-radius: 0; }
.site-head:not(.solid) .site-nav a[aria-current] { color: #fff; }
.site-head.solid .site-nav a[aria-current] { color: var(--ink); }
.site-head:not(.solid) .seg button[aria-pressed=true] { background: rgba(255,255,255,.9); }
/* page ground: calm neutral instead of soil texture */
body, body:has(main.wrap) { background: #eef1f5; }
[data-theme=dark] body, [data-theme=dark] body:has(main.wrap) { background: #070d1a; }
body.has-status .stage { border: 1px solid rgba(15,30,60,.08); box-shadow: 0 -12px 40px rgba(3,8,20,.35), 0 20px 50px rgba(15,30,60,.08); }
.sec, .sec.two > div { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(15,30,60,.06); }
.stats b { background: none; color: var(--brand); -webkit-background-clip: border-box; background-clip: border-box; }
/* controls: neutral surface, page colour only on the active state */
.side .ctl { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,30,60,.04); }
select.big, .seg.big { border: 1px solid var(--line); }
.seg.big button[aria-pressed=true] { background: color-mix(in srgb, var(--pg, var(--brand)) 16%, var(--surface)); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--pg, var(--brand)); }
[data-theme=dark] .seg.big button[aria-pressed=true] { background: color-mix(in srgb, var(--pg) 22%, var(--surface)); color: #fff; }
/* search */
.search { position: relative; margin: 0 0 12px; }
.search-k { display: block; font-size: 14px; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.search-in { display: flex; gap: 6px; }
.search input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 14px 10px 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23778' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") no-repeat 13px center; color: var(--ink); }
.search input:focus { outline: none; border-color: var(--pg, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pg, var(--accent)) 18%, transparent); }
.search .geo { width: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 20px; cursor: pointer; }
.search .geo:hover { color: var(--pg-d, var(--accent)); border-color: var(--pg, var(--accent)); }
.sugg { position: absolute; z-index: 15; left: 0; right: 50px; top: 76px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(10,20,40,.18); }
.sugg li { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14.5px; }
.sugg li:hover, .sugg li.on { background: color-mix(in srgb, var(--pg, var(--accent)) 14%, transparent); }
.sugg li.none { color: var(--ink-3); cursor: default; }
.verdict { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.verdict p { margin: 0; } .verdict .vd-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 16px; }
.verdict .lv { font-size: 12.5px; font-weight: 800; padding: 2px 10px; border-radius: 999px; }
.verdict .ok .lv { background: #dff3e4; color: #1d6b35; } .verdict .watch .lv { background: #fff1c7; color: #7a5a00; } .verdict .dry .lv { background: #ffe0d2; color: #a33b0b; }
.verdict .fdw { color: #8a3fd0; }
td .ok { font-size: 12.5px; color: var(--ink-3); }
.fdinfo em { font-style: normal; font-weight: 700; color: #8a3fd0; }
/* help marks */
.hq { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 5px; border-radius: 50%; border: 0; padding: 0; vertical-align: 1px; cursor: pointer;
  font: 800 11px/1 Pretendard, sans-serif; color: #fff; background: color-mix(in srgb, var(--pg, var(--accent)) 80%, #000); opacity: .85; }
.hq:hover { opacity: 1; }
.helppop { position: absolute; z-index: 40; width: 320px; padding: 14px 16px; border-radius: 14px; background: #0e1a2c; color: #e8eef7; box-shadow: 0 16px 40px rgba(0,0,0,.3); font-size: 13.5px; line-height: 1.6; }
.helppop b { display: block; margin-bottom: 4px; color: #fff; font-size: 14.5px; } .helppop p { margin: 0; }
/* mobile: controls + search first, map tall enough, charts below, no page-wide sideways scroll */
@media (max-width: 1000px) {
  body.has-status .stage { display: flex; flex-direction: column; margin-top: -30px; }
  .stage .side { order: -1; border-left: 0; }
  .stage .stage-map { order: 0; }
  .stage .charts { order: 1; }
  .mapbox { height: min(130vw, 76vh); min-height: 420px; }
  .rankbox { max-height: 300px; }
  .hero-status { padding: 12px 14px; }
  .hero-status .sum { font-size: 15px; }
}
@media (max-width: 640px) {
  .hero .wrap, body.has-status .hero .wrap { padding-top: 18px; padding-bottom: 46px; }
  .hero-k { font-size: 11px; letter-spacing: .14em; }
  .hero-live ul, body.has-status .hero-live ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 0; }
  .hero-live li, .hero-live li:first-child { padding: 0 10px; } .hero-live li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero-live b, body.has-status .hero-live b { font-size: 22px; }
  .helppop { width: calc(100vw - 24px); }
  .site-head { position: sticky; }
}
body[class*=pg-] .site-head:not(.solid) .site-nav a[aria-current] { color: #fff; }
body[class*=pg-] .site-head.solid .site-nav a[aria-current] { color: var(--ink); }
.fdtag { font-size: 11px; }

/* sentence case everywhere: no forced capitals */
.hero-en, .hero[data-bg=about] .hero-en, .hero-k, .kicker, .foot-col h4 { text-transform: none; }
.hero-k { letter-spacing: .06em; font-size: 14px; }

/* stage map legend */
.stagekey { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 5px; }
.stagekey li { display: grid; grid-template-columns: 14px auto; column-gap: 6px; align-items: center; font-size: 12px; color: var(--ink-2); }
.stagekey i { width: 14px; height: 14px; border-radius: 4px; grid-row: span 2; border: 1px solid rgba(0,0,0,.12); }
.stagekey b { font-size: 12.5px; color: var(--ink); } .stagekey em { font-style: normal; font-weight: 700; color: var(--ink); grid-column: 2; font-size: 12px; }
.stagekey small { display: none; }
.stagenote { margin: 6px 0 2px; font-size: 10.5px; color: var(--ink-3); }
.mapkey:has(.stagekey) { width: 84px; }
@media (max-width: 1000px) { .stagekey { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stagekey small { display: block; grid-column: 2; font-size: 10.5px; } .mapkey:has(.stagekey) { width: auto; } }
#modes.seg.big button { padding: 8px 2px; font-size: 13.5px; }

/* fire page */
.hero[data-bg=fire] { --pg: #ff6a3d; }
.hero[data-bg=fire]::after, body.has-status .hero[data-bg=fire]::after { background-image: linear-gradient(180deg, rgba(40,8,2,.85) 0%, rgba(90,24,4,.45) 50%, rgba(30,6,2,.85) 100%), url(../images/hero_cracks.jpg); }
.hero[data-bg=fire] .hero-k { color: #ff8a5c; }
.hero[data-bg=fire] .hero-live { display: none; }
.fgrid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; align-items: start; }
.fgrid figure { margin: 0; } .fgrid img { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.fgrid figcaption { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.fhead { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); margin: 0 0 6px; }
.frank { list-style: none; margin: 0; padding: 0; }
.frank li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 48px 74px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 14.5px; }
.frank .fs { font-weight: 700; } .frank b { text-align: right; font-variant-numeric: tabular-nums; } .frank em { font-style: normal; font-size: 13px; color: var(--ink-2); }
.fbar { height: 10px; border-radius: 5px; background: var(--line-2); overflow: hidden; } .fbar i { display: block; height: 100%; border-radius: 5px; }
.fkey { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; }
.fkey li { display: flex; align-items: center; gap: 7px; font-size: 14px; } .fkey i { width: 22px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.1); }
@media (max-width: 900px) { .fgrid { grid-template-columns: minmax(0, 1fr); } .fgrid figure { max-width: 380px; margin: 0 auto; } }

/* method page diagrams */
svg.dg { width: 100%; height: auto; display: block; margin: 8px 0 4px; font-family: Pretendard, "Noto Sans KR", sans-serif; }
.dg .b { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.dg .c1 { fill: color-mix(in srgb, #3fb0ff 12%, var(--surface)); stroke: #3fb0ff; } .dg .c2 { fill: color-mix(in srgb, #5fd3b3 14%, var(--surface)); stroke: #2fa98a; }
.dg .c3 { fill: color-mix(in srgb, #7aa8ff 14%, var(--surface)); stroke: #4a78d8; } .dg .c4 { fill: color-mix(in srgb, #b48cff 14%, var(--surface)); stroke: #8a5fe0; }
.dg .c5 { fill: color-mix(in srgb, #ff8a3d 13%, var(--surface)); stroke: #e0702a; }
.dg text { text-anchor: middle; fill: var(--ink); } .dg .t { font-weight: 800; } .dg .s { font-size: 13.5px; fill: var(--ink-2); } .dg .big { font-size: 34px; fill: var(--ink-3); }
.dg .ar { stroke: var(--ink-3); stroke-width: 2.2; fill: none; } .dg .ah { fill: var(--ink-3); } .dg .dash { stroke-dasharray: 6 5; opacity: .7; }
.dg .tk.e { fill: #3fb0ff; opacity: .8; } .dg .tk.d { fill: #ff8a3d; opacity: .8; }
.dg .ly { stroke: var(--surface); stroke-width: 2; } .dg .l0 { fill: #c9a26b; } .dg .l1 { fill: #9c7444; } .dg .l2 { fill: #6e4f2c; }
.dg .ly + text { fill: #fff; font-weight: 700; }
.dg .gl { stroke: var(--ink-3); stroke-dasharray: 4 4; } .dg .ln { fill: none; stroke: var(--ink); stroke-width: 2.4; } .dg .dot { fill: var(--ink); }
.dg .fdzone { fill: #8a3fd0; opacity: .12; } .dg .fan { fill: none; stroke: #ff8a3d; stroke-width: 1.2; opacity: .45; }
.refs { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); line-height: 1.7; }

/* wildfire outlook under the drought outlook */
.firefc { margin-top: 28px; padding: clamp(28px, 3vw, 44px) 0; background: linear-gradient(180deg, color-mix(in srgb, #ff6a3d 7%, var(--page2, #eef1f5)), var(--page2, #eef1f5)); border-top: 1px solid var(--line); }
.firefc .fc-head h2 { font-size: clamp(24px, 2.2vw, 34px); margin: 2px 0 8px; } .firefc .kicker { color: #e0582a; }
.firefc .sum { font-size: 17px; margin: 0 0 6px; } .firefc .note { margin: 0 0 16px; }
.fire-stage { display: grid; grid-template-columns: minmax(0, 1fr) 420px; background: var(--surface); border-radius: 22px; overflow: hidden; border: 1px solid color-mix(in srgb, #ff6a3d 40%, transparent); box-shadow: 0 10px 40px rgba(60,20,5,.10); }
.fire-map { position: relative; display: flex; height: min(78vh, 760px); min-height: 520px; }
.fire-map .mapkey { top: 100px; }
.fire-side { padding: 18px 20px; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; max-height: min(78vh, 760px); }
.fire-side .ctl { --pg: #ff6a3d; --pg-d: #c4430f; --pg-soft: rgba(255,106,61,.12); }
.fire-side .frank { overflow-y: auto; flex: 1; min-height: 0; padding: 0; margin: 0; list-style: none; }
.fire-side .frank li { grid-template-columns: 26px 92px minmax(0, 1fr) 44px 66px; }
.frank .rk { color: var(--ink-3); font-size: 12.5px; text-align: right; }
.forig { margin-top: 10px; font-size: 14px; } .forig img { width: 100%; margin-top: 8px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
@media (max-width: 1000px) { .fire-stage { grid-template-columns: minmax(0, 1fr); } .fire-side { border-left: 0; border-top: 1px solid var(--line); max-height: none; } .fire-side .frank { max-height: 420px; } .fire-map { height: min(120vw, 72vh); min-height: 420px; } }
#fview.seg.big button { white-space: nowrap; min-width: 92px; }
.fire-side .ctl-item { grid-template-columns: 46px minmax(0, 1fr); }

/* ===== 2026-11-07 mobile pass ===== */
@media (max-width: 760px) {
  /* header: brand on one line, menu wraps into two short rows, theme switch stays visible */
  .site-head .wrap { flex-direction: column; align-items: stretch; gap: 4px; padding-bottom: 6px; }
  .brand { white-space: normal; } .brand b { font-size: 17px; line-height: 1.25; } .brand span { font-size: 11.5px; }
  .site-nav { flex-wrap: wrap !important; overflow: visible !important; width: 100%; gap: 2px 4px !important; justify-content: flex-start; }
  .site-nav a { font-size: 14px !important; padding: 6px 8px !important; }
  .site-nav .seg.theme { margin-left: auto; }
  .site-nav .seg.theme button { padding: 4px 10px; font-size: 13px; }
  /* hero */
  .hero-en, body.has-status .hero[data-bg] .hero-en, .hero[data-bg] .hero-en { font-size: 26px !important; line-height: 1.15; white-space: normal !important; }
  .hero-t { font-size: 15px !important; white-space: normal !important; }
  .hero-live i { font-size: 12px; }
  .hero-status h1 { font-size: 19px; }
  /* map pages */
  .mapdate { font-size: 17px; }
  .maplogo { width: 60px !important; height: 60px !important; }
  .side .ctl { padding: 10px; } .ctl-item { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
  #modes.seg.big button { font-size: 12.5px; padding: 8px 1px; }
  .seg.big button small { display: block; margin: 0; }
  .thumbs { gap: 6px; } .thumb { font-size: 12px; }
  .zc { right: 4px; }
  .key { font-size: 12.5px; gap: 6px 12px; }
  .fdinfo { font-size: 13px; }
  .rankbox td, .rankbox th { font-size: 13.5px; }
  /* fire outlook */
  .fire-map { flex-direction: column; height: auto; min-height: 0; }
  .fire-map .mapbox { flex: none; height: min(118vw, 70vh); min-height: 400px; }
  .fire-map .mapkey { position: static; width: auto; max-width: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface); padding: 10px 14px 4px; }
  .fire-map .cb-v { height: auto; display: block; padding: 0 0 18px; }
  .fire-map .cb-bar { width: auto; height: 13px; flex-direction: row-reverse; }
  .fire-map .cb-ticks { height: 14px; } .fire-map .cb-ticks span { top: 2px !important; left: var(--p); transform: translateX(-50%); }
  .fire-side { padding: 14px; } .fire-side .frank li { grid-template-columns: 22px 84px minmax(0, 1fr) 40px 58px; gap: 6px; font-size: 13.5px; }
  .firefc .sum { font-size: 15.5px; }
  /* content pages */
  .sec { padding: 18px 14px; }
  main.wrap > .sec > h2 { font-size: 22px; }
  .sec .intro { text-align: left !important; font-size: 14.5px; }
  .dgwrap { overflow-x: auto; margin: 0 -14px; padding: 0 14px; -webkit-overflow-scrolling: touch; }
  .dgwrap svg.dg { min-width: 760px; }
  .dgwrap::after { content: "← 옆으로 밀어서 보기 →"; display: block; text-align: center; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
  .stats li { padding: 12px; } .stats span { font-size: 12.5px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gallery figcaption { font-size: 12.5px; }
  .pub { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px; } .pub-cover img, .cover-gen { width: 64px; height: 86px; } .cover-gen b { font-size: 9.5px; } .cover-gen span { font-size: 8px; }
  .pub h3 { font-size: 14px; }
  .pubf { flex-wrap: wrap; } .pubf button { flex: 1 1 45%; }
  .timeline b { display: block; min-width: 0; }
  .foot-grid { gap: 20px; }
}
@media (max-width: 760px) { .ctl-item { grid-template-columns: 58px minmax(0, 1fr); } .ctl-k { white-space: nowrap; font-size: 13px; } .ctl-k .hq { width: 15px; height: 15px; margin-left: 3px; } .firefc .kicker { letter-spacing: .08em; } }
@media (max-width: 760px) { .hero-live .hist-how li, .hero-live .hist-how li:nth-child(odd), .hero-live .hist-how li:first-child { padding: 12px 14px 12px 46px; border: 1px solid rgba(255,255,255,.16); } }
.cover-gen b { overflow-wrap: anywhere; hyphens: auto; }

/* ===== 2026-11-09: day theme is light top to bottom (header, hero, footer); the map stage is part of the page, not a floating card ===== */
html:not([data-theme=dark]) .site-head, html:not([data-theme=dark]) .site-head:not(.solid) { background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(15,30,60,.03); }
html:not([data-theme=dark]) .site-head:not(.solid) .brand b { color: var(--brand); }
html:not([data-theme=dark]) .site-head:not(.solid) .brand span { color: var(--ink-3); }
html:not([data-theme=dark]) .site-head:not(.solid) .brand img { content: normal; }
html:not([data-theme=dark]) .site-head:not(.solid) .site-nav a { color: var(--ink-2); }
html:not([data-theme=dark]) .site-head:not(.solid) .site-nav a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); }
html:not([data-theme=dark]) .site-head .site-nav a[aria-current] { color: var(--ink); }
html:not([data-theme=dark]) .site-head:not(.solid) .seg { background: var(--surface); border-color: var(--line); }
html:not([data-theme=dark]) .site-head:not(.solid) .seg button { color: var(--ink-2); border-left-color: var(--line); }
html:not([data-theme=dark]) .site-head:not(.solid) .seg button[aria-pressed=true] { background: var(--ink); color: #fff; }

html:not([data-theme=dark]) .hero, html:not([data-theme=dark]) body.has-status .hero {
  background: radial-gradient(60% 120% at 88% 0%, color-mix(in srgb, var(--pg, #3fb0ff) 12%, transparent), transparent 62%), linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%); color: var(--ink); }
html:not([data-theme=dark]) .hero[data-bg]::after, html:not([data-theme=dark]) body.has-status .hero[data-bg]::after { opacity: .06; filter: grayscale(1); }
html:not([data-theme=dark]) .hero::before, html:not([data-theme=dark]) body.has-status .hero::before { background-image: linear-gradient(rgba(15,30,60,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15,30,60,.045) 1px, transparent 1px); }
html:not([data-theme=dark]) .hero-en { background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 55%, color-mix(in srgb, var(--pg, #1f6fd1) 70%, #0b1526) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
html:not([data-theme=dark]) .hero .hero-k, html:not([data-theme=dark]) body[class*=pg-] .hero-k { color: color-mix(in srgb, var(--pg, #1f6fd1) 70%, #0b1526); }
html:not([data-theme=dark]) .hero-t { color: var(--ink-2); text-shadow: none; }
html:not([data-theme=dark]) .hero-live { border-top-color: var(--line); }
html:not([data-theme=dark]) .hero-lt { color: var(--ink); }
html:not([data-theme=dark]) .hero-lt span, html:not([data-theme=dark]) .hero-live span, html:not([data-theme=dark]) .hero-live i { color: var(--ink-3); }
html:not([data-theme=dark]) .hero-live em { color: var(--ink); }
html:not([data-theme=dark]) .hero-live li, html:not([data-theme=dark]) body[class*=pg-] .hero-live li { border-left-color: var(--line); }
html:not([data-theme=dark]) .hero-live b { color: var(--ink); }
html:not([data-theme=dark]) .hero-live .c1 b, html:not([data-theme=dark]) body[class*=pg-] .hero-live .c1 b { color: color-mix(in srgb, var(--pg, #1f6fd1) 72%, #0b1526); }
html:not([data-theme=dark]) body.pg-now .hero-live .c2 b { color: var(--ink); }
html:not([data-theme=dark]) body.pg-now .hero-live .c3 b, html:not([data-theme=dark]) body.pg-fc .hero-live .c2 b, html:not([data-theme=dark]) body.pg-fc .hero-live .c3 b { color: #c0640a; }
html:not([data-theme=dark]) body[class*=pg-] .hero-live .c4 b { color: #6b3fc4; }
html:not([data-theme=dark]) .hero-status, html:not([data-theme=dark]) body[class*=pg-] .hero-status { background: var(--surface); border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
html:not([data-theme=dark]) .hero-status h1, html:not([data-theme=dark]) .hero-status .sum { color: var(--ink); }
html:not([data-theme=dark]) .hero-status .asof { color: var(--ink-3); }
html:not([data-theme=dark]) .hero-status .hs-title { border-right-color: var(--line); }
html:not([data-theme=dark]) .hero-upd div { background: var(--surface); border-color: var(--line); }
html:not([data-theme=dark]) .hero-upd b, html:not([data-theme=dark]) .hero-upd i { color: var(--ink); }
html:not([data-theme=dark]) .hero-upd span { color: var(--ink-3); }
html:not([data-theme=dark]) .hero-live .hist-how li { border-color: var(--line); background: var(--surface); }
html:not([data-theme=dark]) .hero-live .hist-how b { color: var(--ink); }
html:not([data-theme=dark]) .hero a { color: var(--accent); }

html:not([data-theme=dark]) .site-foot { background: #f4f6f9; color: var(--ink-2); border-top: 1px solid var(--line); }
html:not([data-theme=dark]) .foot-grid { border-bottom-color: var(--line); }
html:not([data-theme=dark]) .foot-brand img { content: url(../images/logo.png); }
html:not([data-theme=dark]) .foot-brand b { color: var(--ink); }
html:not([data-theme=dark]) .foot-brand span, html:not([data-theme=dark]) .foot-col p, html:not([data-theme=dark]) .foot-legal { color: var(--ink-3); }
html:not([data-theme=dark]) .foot-col h4 { color: #9a6a10; }
html:not([data-theme=dark]) .site-foot a, html:not([data-theme=dark]) .foot-col a { color: var(--ink-2); }
html:not([data-theme=dark]) .site-foot a:hover, html:not([data-theme=dark]) .foot-col a:hover { color: var(--brand); }
html:not([data-theme=dark]) .foot-col p a { color: var(--ink); }

/* map stage: no lift, no rounded card edge, no shadow - it continues the page under the summary */
body.has-status .hero .wrap { padding-bottom: clamp(22px, 2.6vw, 38px); }
body.has-status .hero::after { -webkit-mask-image: none; mask-image: none; }
body.has-status .stage, body[class*=pg-].has-status .stage, [data-theme=dark] body.has-status .stage { margin-top: 0; border-radius: 0; box-shadow: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { body.has-status .stage, [data-theme=dark] body.has-status .stage { margin-top: 0; } body.has-status .hero .wrap { padding-bottom: 22px; } }
.fire-stage { box-shadow: none; border-color: var(--line); }
html:not([data-theme=dark]) .site-head .site-nav a[aria-current] { color: var(--ink) !important; }
html:not([data-theme=dark]) #papers { background: var(--surface); color: var(--ink); }
html:not([data-theme=dark]) #papers > h2, html:not([data-theme=dark]) #papers > .intro { color: var(--ink); }
html:not([data-theme=dark]) #papers .pub { background: #f6f8fb; border: 1px solid var(--line); }
html:not([data-theme=dark]) #papers .pub h3 { color: var(--ink); }
html:not([data-theme=dark]) #papers .pub-au, html:not([data-theme=dark]) #papers .pub-vol, html:not([data-theme=dark]) #papers .pub-meta { color: var(--ink-3); }
html:not([data-theme=dark]) #papers .pub .doi { color: #1a62c4; } html:not([data-theme=dark]) #papers .pub-meta .st { color: #b06a00; }
html:not([data-theme=dark]) #papers .seg { background: var(--surface); border-color: var(--line); }
html:not([data-theme=dark]) #papers .seg button { color: var(--ink-2); border-left-color: var(--line); }
html:not([data-theme=dark]) #papers .seg button[aria-pressed=true] { background: var(--ink); color: #fff; }
/* 761-1279 px: the brand and the menu no longer fit on one line - the menu takes its own row under the brand */
@media (min-width: 761px) and (max-width: 1279px) {
  :root { --hh: 122px; }
  .site-head .wrap { flex-wrap: wrap; row-gap: 0; min-height: 0; }
  .brand { padding: 8px 0 2px; }
  .brand img { width: 52px; height: 52px; }
  .site-nav { flex: 1 1 100%; width: 100%; padding: 2px 0 6px; overflow-x: auto; }
  .site-nav .seg.theme { margin-left: auto; flex: none; }
}
/* the hero sentence stays on one line only when it fits; long ones (전망 페이지) wrap instead of running off the edge */
.hero-t { white-space: normal; text-wrap: balance; font-size: clamp(15px, 1.35vw, 21px); max-width: 100%; }

/* ===== 2026-11-09 b: map pages - the title and live figures float in a small window; the map starts right under the menu ===== */
body.hud-on .hero { display: none; }
body.hud-on .stage { border-top: 0; }
.hud { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: min(440px, calc(100vw - 32px)); max-height: min(72vh, 640px); display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--surface) 95%, transparent); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 48px rgba(10,20,40,.22); color: var(--ink); transition: opacity .25s, transform .25s; }
[data-theme=dark] .hud { box-shadow: 0 18px 48px rgba(0,0,0,.55); }
.hud.away { opacity: 0; transform: translateY(12px); pointer-events: none; }
.hud-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px 16px; cursor: grab; touch-action: none; user-select: none; border-bottom: 1px solid var(--line); }
.hud.drag { transition: none; } .hud.drag .hud-bar { cursor: grabbing; }
.hud-name { min-width: 0; flex: 1; }
.hud .hero-k { margin: 0 0 3px; font-size: 11.5px; letter-spacing: .06em; opacity: 1; transform: none; animation: none; }
.hud .hero-en, body[data-ds] .hud .hero-en, .hud .hero[data-bg] .hero-en { margin: 0; font-size: 21px; line-height: 1.2; white-space: normal; max-width: none; opacity: 1; transform: none; animation: none; }
.hud-tog { flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 8px; padding: 5px 11px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.hud-tog:hover { color: var(--ink); border-color: var(--ink-3); }
.hud-body { overflow-y: auto; padding: 12px 16px 14px; overscroll-behavior: contain; }
.hud .hero-main { min-width: 0; }
.hud .hero-t { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); white-space: normal; opacity: 1; transform: none; animation: none; }
.hud .hero-live { margin: 0; padding: 0; border: 0; opacity: 1; transform: none; animation: none; }
.hud .hero-live ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
.hud .hero-live li, .hud .hero-live li:first-child { padding: 0 0 0 12px; border-left: 1px solid var(--line); }
.hud .hero-live li:nth-child(odd) { padding-left: 0; border-left: 0; }
.hud .hero-live b { font-size: 24px; margin: 2px 0 1px; }
.hud .hero-live span, .hud .hero-live i { font-size: 12px; }
.hud .hero-status { display: block; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; opacity: 1; transform: none; animation: none;
  background: color-mix(in srgb, var(--pg, var(--accent)) 8%, transparent) !important; border: 1px solid color-mix(in srgb, var(--pg, var(--accent)) 35%, transparent) !important; box-shadow: none !important; }
.hud .hero-status .hs-title { border: 0; padding: 0 0 4px; }
.hud .hero-status h1 { font-size: 15px; white-space: normal; }
.hud .hero-status .sum { font-size: 13.5px; line-height: 1.55; }
.hud .hero-status .asof { font-size: 12px; }
.hud .hero-lt { font-size: 14px; margin-bottom: 8px; }
.hud .hist-how { gap: 8px; } .hud .hero-live .hist-how li, .hud .hero-live .hist-how li:first-child { padding: 10px 12px 10px 40px; border: 1px solid var(--line); }
.hud .hist-cases { font-size: 12.5px; }
.hud.min { width: auto; max-width: calc(100vw - 32px); }
.hud.min .hud-body { display: none; } .hud.min .hud-bar { border-bottom: 0; } .hud.min .hero-k { display: none; } .hud.min .hero-en { font-size: 16px; }
@media (max-width: 760px) { .hud { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: 62vh; } .hud.min { left: auto; } .hud .hero-en { font-size: 18px; } .hud-bar { cursor: default; } }
@media print { .hud { display: none; } }
/* day theme: the history how-to steps and case links were still white on white */
html:not([data-theme=dark]) .hist-how li { color: var(--ink-2); background: var(--surface); border-color: var(--line); }
html:not([data-theme=dark]) .hist-how b { color: var(--ink); }
html:not([data-theme=dark]) .hist-how li::before { color: #fff; background: var(--pg-d, #6b3fc4); }
html:not([data-theme=dark]) .hist-cases { color: var(--ink-3); }
html:not([data-theme=dark]) .hist-cases a { color: var(--pg-d, #6b3fc4); background: color-mix(in srgb, var(--pg, #b48cff) 12%, transparent); border-color: color-mix(in srgb, var(--pg, #b48cff) 45%, transparent); }
html:not([data-theme=dark]) .hist-cases a:hover { background: var(--pg-d, #6b3fc4); color: #fff; }
.hud .hist-how { grid-template-columns: minmax(0, 1fr); }
/* floating window: keep its own sizes against the older page-specific hero rules */
.hud { width: min(390px, calc(100vw - 32px)); }
body .hud .hero-live ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 12px; }
body .hud .hero-en { font-size: 20px !important; letter-spacing: -0.03em; }
body .hud.min .hero-en { font-size: 16px !important; }
body .hud .hero-live b { font-size: 22px !important; white-space: nowrap; }
body .hud .hero-live i { display: block; line-height: 1.4; }
@media (max-width: 760px) { body .hud .hero-en { font-size: 17px !important; } }