/* ============================================================
   UPROOTY — DESIGN SYSTEM v1
   tokens → grounds → base → components
   ============================================================ */

:root{
  /* ---- primitives ---- */
  --hydro-400:#2CE111; --hydro-500:#1FB524; --hydro-600:#178C2B;
  --hydro-700:#145A32; --hydro-800:#0F3B25; --hydro-900:#0A2418;
  --glacier-400:#5A99AC; --glacier-500:#3B7A8E; --glacier-100:#DCEAEF;
  --basalt-0:#FFFFFF; --basalt-50:#F4F6F2; --basalt-100:#E9ECE6;
  --basalt-200:#D6DAD2; --basalt-300:#B6BCB2; --basalt-400:#8E958A;
  --basalt-500:#6B7268; --basalt-600:#4E554C; --basalt-900:#161A16;
  --basalt-950:#0A0C0A;

  /* ---- status: colour lives on the dot, never on the label ---- */
  --status-verified:#5C9E63; --status-active:#C2A24E;
  --status-proposed:#9AA096; --status-unconfirmed:#B5705A;

  /* ---- type ---- */
  --font-kr:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-display:"Archivo",var(--font-kr),sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* ---- form ---- */
  --radius-sm:4px; --radius-md:8px;
  --shadow-overlay:0 12px 40px rgba(10,12,10,.24);
  --ease:cubic-bezier(.22,.61,.36,1);
  --max:1200px;
  --pad-section:120px;
}

/* ============================================================
   GROUNDS — every component reads its colours from here
   ============================================================ */
[data-ground="abyss"]{
  --bg:var(--basalt-950); --text:#FFFFFF; --text-muted:rgba(255,255,255,.72);
  --accent:var(--hydro-400); --border:rgba(255,255,255,.16); --surface:var(--basalt-900);
  --btn-fill:var(--hydro-400); --btn-label:var(--hydro-900);
  --field-bg:rgba(255,255,255,.05); --field-border:rgba(255,255,255,.22);
  --dot-verified:#86C98D; --dot-active:#D9BE73; --dot-proposed:#8E958A; --dot-unconfirmed:#D08B72;
}
[data-ground="paper"]{
  --bg:var(--basalt-0); --text:var(--basalt-900); --text-muted:var(--basalt-600);
  --accent:var(--hydro-700); --border:var(--basalt-200); --surface:var(--basalt-50);
  --btn-fill:var(--hydro-700); --btn-label:#FFFFFF;
  --field-bg:var(--basalt-0); --field-border:var(--basalt-200);
  --dot-verified:var(--status-verified); --dot-active:var(--status-active);
  --dot-proposed:var(--status-proposed); --dot-unconfirmed:var(--status-unconfirmed);
}
[data-ground="mist"]{
  --bg:var(--basalt-50); --text:var(--basalt-900); --text-muted:var(--basalt-600);
  --accent:var(--hydro-700); --border:var(--basalt-200); --surface:var(--basalt-0);
  --btn-fill:var(--hydro-700); --btn-label:#FFFFFF;
  --field-bg:var(--basalt-0); --field-border:var(--basalt-200);
  --dot-verified:var(--status-verified); --dot-active:var(--status-active);
  --dot-proposed:var(--status-proposed); --dot-unconfirmed:var(--status-unconfirmed);
}
[data-ground="moss"]{
  --bg:var(--hydro-700); --text:#FFFFFF; --text-muted:rgba(255,255,255,.78);
  --accent:var(--hydro-400); --border:rgba(255,255,255,.24); --surface:rgba(255,255,255,.08);
  --btn-fill:#FFFFFF; --btn-label:var(--hydro-700);
  --field-bg:rgba(255,255,255,.08); --field-border:rgba(255,255,255,.3);
  --dot-verified:#86C98D; --dot-active:#D9BE73; --dot-proposed:#C4CBC0; --dot-unconfirmed:#D08B72;
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--basalt-0); color:var(--basalt-900);
  font-family:var(--font-kr); font-size:16px; line-height:1.8; font-weight:400;
  word-break:keep-all; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--hydro-400); outline-offset:3px; border-radius:2px;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

section{background:var(--bg); color:var(--text); padding:var(--pad-section) 0;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 40px;}

.eyebrow{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 20px;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; letter-spacing:-.01em;}
h2{font-size:clamp(26px,3.4vw,38px); line-height:1.45; font-weight:700;}
h3{font-size:clamp(19px,2vw,22px); line-height:1.5; font-weight:600;}
.lede{font-size:17px; line-height:1.85; color:var(--text-muted); max-width:62ch; margin:18px 0 0;}
.en{font-family:var(--font-display); font-weight:400; letter-spacing:-.025em;}
.shead{max-width:70ch;}
.mono{font-family:var(--font-mono);}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:9px; line-height:1;
  font-size:14px; font-weight:600; padding:15px 28px; font-family:var(--font-kr);
  border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer;
  background:var(--btn-fill); color:var(--btn-label);
  transition:opacity .16s var(--ease);
}
.btn:hover{opacity:.86;}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--border);}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent); opacity:1;}
.link{
  display:inline-flex; align-items:center; gap:8px; font-size:14px;
  color:var(--accent); border-bottom:1px solid currentColor; padding-bottom:3px;
}

/* ---- status: dot carries the colour ---- */
.status{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted);}
.dot{width:8px; height:8px; border-radius:50%; flex:none;}
.dot--verified{background:var(--dot-verified);}
.dot--active{background:var(--dot-active);}
.dot--proposed{background:var(--dot-proposed);}
.dot--unconfirmed{background:var(--dot-unconfirmed);}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:60; height:80px; display:flex; align-items:center;
  transition:height .24s var(--ease), background .24s var(--ease), border-color .24s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  height:64px; background:rgba(10,12,10,.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom-color:rgba(255,255,255,.14);
}
.hdr .wrap{display:flex; align-items:center; justify-content:space-between; width:100%;}
/* Wordmark is a white PNG on transparent — it only ever sits on a dark ground. */
.brand{display:inline-flex; align-items:center;}
.brand img{height:26px; width:auto;}
.foot__brand .brand img{height:30px;}
.nav{display:flex; align-items:center; gap:34px;}
.nav a{font-size:14px; font-weight:500; color:rgba(255,255,255,.82);}
.nav a:hover,.nav a[aria-current="page"]{color:var(--hydro-400);}
.nav .btn{padding:11px 20px; font-size:13px; background:var(--hydro-400); color:var(--hydro-900);}
.nav-toggle{display:none; background:none; border:0; color:#fff; padding:8px; cursor:pointer;}
.lang{display:inline-flex; align-items:center; gap:2px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;}
.lang a{padding:6px 7px; color:rgba(255,255,255,.5);}
.lang a:hover{color:#fff;}
.lang a[aria-current="true"]{color:var(--hydro-400);}
.lang i{font-style:normal; color:rgba(255,255,255,.25);}
.nav-panel .lang{margin-top:16px;}
.nav-panel .lang a{border-bottom:0; padding:6px 7px; display:inline-block; font-size:12px;}

.nav-panel{
  display:none; position:fixed; inset:64px 0 auto 0; z-index:59;
  background:rgba(10,12,10,.98); padding:24px 40px 32px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.nav-panel.is-open{display:block;}
.nav-panel a{display:block; padding:13px 0; color:#fff; font-size:16px; border-bottom:1px solid rgba(255,255,255,.1);}

/* ============================================================
   HOME HERO (video)
   ============================================================ */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; padding:0;}
.hero__media{position:absolute; inset:0; z-index:0; background:var(--basalt-950);}
/* Our own footage, so it needs none of the cropping and state-gating a
   third-party embed did — object-fit:cover is the whole job. pointer-events
   stays off so the background can never take a tap or show native controls. */
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}
/* Kept light so the footage stays visible — legibility comes from the text-shadow. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(10,12,10,.48) 0%, rgba(10,12,10,.28) 42%, rgba(10,12,10,.04) 74%, rgba(10,12,10,.10) 100%),
    linear-gradient(180deg, rgba(10,12,10,.38) 0%, rgba(10,12,10,.04) 32%, rgba(10,12,10,.12) 62%, rgba(10,12,10,.72) 100%);
}
.hero .wrap{
  position:relative; z-index:2; padding-top:140px; padding-bottom:64px; width:100%;
  text-shadow:0 1px 2px rgba(6,8,6,.45), 0 2px 18px rgba(6,8,6,.55);
}
.hero .btn{text-shadow:none;}
/* Green-on-green is the one weak pairing over this footage. */
.hero .eyebrow{text-shadow:0 1px 3px rgba(6,8,6,.9), 0 0 16px rgba(6,8,6,.75);}
.hero h1{font-size:clamp(34px,5.4vw,64px); line-height:1.28; font-weight:700; color:#fff; margin:0 0 24px; max-width:16ch;}
/* Latin runs far narrower per character than Hangul, so the same ch measure
   breaks English headlines mid-phrase. Widen the measure for the EN pages. */
html[lang="en"] .hero h1{max-width:24ch;}
html[lang="en"] .phero h1{max-width:26ch;}
.hero .lede{color:rgba(255,255,255,.78); max-width:56ch;}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px;}

/* ---- stat strip ---- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0 40px; margin-top:76px;}
.stat{border-top:1px solid var(--border); padding-top:18px;}
.stat__val{
  font-family:var(--font-display); font-weight:400; font-size:clamp(38px,4.6vw,60px);
  line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums;
  color:var(--text); display:flex; align-items:baseline; gap:9px;
}
.stat__val--accent{color:var(--accent);}
.stat__unit{font-family:var(--font-mono); font-size:15px; font-weight:500; letter-spacing:0; color:var(--text-muted);}
.stat__lab{font-size:13.5px; line-height:1.6; color:var(--text-muted); margin:12px 0 0;}
.stat__src{font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); opacity:.75; margin:7px 0 0; display:flex; align-items:center; gap:6px;}

/* ============================================================
   PAGE HERO (sub-pages, no video)
   ============================================================ */
.phero{padding:200px 0 96px;}
.phero h1{font-size:clamp(32px,4.6vw,52px); line-height:1.32; font-weight:700; max-width:18ch;}
.phero .lede{max-width:64ch;}

/* ============================================================
   RECORD CELL — replaces the floating card
   rule-topped, no fill, no shadow; the ref slot carries the source
   ============================================================ */
.recgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:0 44px; margin-top:64px;}
.recgrid--2{grid-template-columns:repeat(2,1fr);}
.recgrid--4{grid-template-columns:repeat(4,1fr); gap:0 32px;}
.rec{border-top:1px solid var(--border); padding:18px 0 0; display:block; transition:border-color .16s var(--ease);}
.rec:hover{border-top-color:var(--accent);}
.rec__top{display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:14px;}
.rec__ttl{font-size:20px; font-weight:600; line-height:1.5; letter-spacing:-.01em;}
.rec__ref{font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); white-space:nowrap; flex:none; opacity:.8;}
.rec p{font-size:14.5px; line-height:1.85; color:var(--text-muted); margin:0;}
.rec__more{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--accent); margin-top:16px;}

/* ---- layout helpers ---- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start;}
.split--media{grid-template-columns:1.05fr .95fr;}
.rowend{display:flex; justify-content:space-between; align-items:flex-end; gap:48px; flex-wrap:wrap;}

/* ============================================================
   VIDEO FACADE + LIGHTBOX
   ============================================================ */
.watch{
  position:relative; border:1px solid var(--border); border-radius:var(--radius-md);
  overflow:hidden; aspect-ratio:16/9; width:100%; cursor:pointer;
  background:var(--basalt-950); display:block; padding:0;
}
.watch img{width:100%; height:100%; object-fit:cover; opacity:.72; transition:opacity .3s var(--ease), transform .5s var(--ease);}
.watch:hover img{opacity:.88; transform:scale(1.02);}
.watch__play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; color:#fff;}
.watch__ring{
  width:74px; height:74px; border-radius:50%; border:1px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.watch:hover .watch__ring{background:var(--hydro-400); border-color:var(--hydro-400);}
.watch:hover .watch__ring svg{fill:var(--hydro-900);}
.watch__lab{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;}
.watch--empty{display:flex; align-items:center; justify-content:center; cursor:default; border-style:dashed;}
.watch--empty p{font-size:13.5px; color:var(--text-muted); text-align:center; max-width:40ch; margin:0; padding:24px;}

.lb{position:fixed; inset:0; z-index:200; background:rgba(6,8,6,.94); display:none; align-items:center; justify-content:center; padding:32px;}
.lb.is-open{display:flex;}
/* Width is capped so the derived 16:9 height can never exceed the space left
   after the padding and the close button — clamping height instead would
   break the ratio and squash the player. */
.lb__inner{
  position:relative;
  aspect-ratio:16/9;
  width:min(1100px, 100%, calc((100svh - 130px) * 16 / 9));
}
/* The slot the iframe is injected into needs its own size, otherwise the
   iframe's height:100% resolves against auto and falls back to the 150px
   default iframe height. */
.lb__inner > div{width:100%; height:100%;}
.lb__inner iframe{width:100%; height:100%; border:0; border-radius:var(--radius-md); display:block;}
.lb__close{position:absolute; top:-46px; right:0; background:none; border:0; color:#fff; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; cursor:pointer; padding:8px;}

/* ============================================================
   NUMBERED PROCESS
   ============================================================ */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0 44px; row-gap:48px; margin-top:64px;}
.step{border-top:1px solid var(--border); padding-top:18px;}
.step__n{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--accent); display:block; margin-bottom:12px;}
.step h3{font-size:18px; line-height:1.55; margin-bottom:10px;}
.step p{font-size:14px; line-height:1.8; color:var(--text-muted); margin:0;}

/* value chain — horizontal rail */
.chain{display:grid; grid-template-columns:repeat(6,1fr); gap:0; margin-top:56px; border-top:1px solid var(--border);}
.chain li{list-style:none; padding:20px 20px 24px 0; position:relative;}
.chain li + li{padding-left:20px; border-left:1px solid var(--border);}
.chain .n{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; color:var(--accent); display:block; margin-bottom:10px;}
.chain h4{font-size:15px; font-weight:600; line-height:1.5; margin-bottom:8px;}
.chain p{font-size:13px; line-height:1.7; color:var(--text-muted); margin:0;}

/* ============================================================
   DATA BLOCKS
   ============================================================ */
.calc{border:1px solid var(--border); border-radius:var(--radius-md); padding:28px 30px; margin-top:32px; background:var(--surface);}
.calc__lab{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin:0 0 14px;}
.calc__f{font-family:var(--font-mono); font-size:14px; line-height:1.9; color:var(--text); margin:0 0 10px; overflow-x:auto;}
.calc__f--em{color:var(--accent);}
.note{border-left:2px solid var(--border); padding:4px 0 4px 16px; margin-top:24px; font-size:13px; line-height:1.75; color:var(--text-muted); max-width:70ch;}

.compare{display:grid; gap:18px; margin-top:36px; max-width:620px;}
.compare__row{display:grid; grid-template-columns:1fr auto; gap:10px 20px; align-items:center;}
.compare__lab{font-size:14px; color:var(--text-muted);}
.compare__val{font-family:var(--font-mono); font-size:15px; font-variant-numeric:tabular-nums;}
.compare__bar{grid-column:1/-1; height:10px; background:var(--surface); border:1px solid var(--border); border-radius:2px; overflow:hidden;}
.compare__bar i{display:block; height:100%; background:var(--basalt-400);}
.compare__bar i.is-us{background:var(--accent);}

/* market ladder */
.ladder{display:grid; gap:2px; margin-top:32px; max-width:640px;}
.ladder li{
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px;
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 18px; font-size:14.5px;
}
.ladder .n{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; color:var(--text-muted); width:52px; flex:none;}

/* ============================================================
   SDG / PARTNERS / STORY
   ============================================================ */
.sdg{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:40px; padding:0;}
.sdg li{list-style:none; border-top:1px solid var(--border); padding-top:14px; font-size:13.5px; line-height:1.5;}
.sdg .n{font-family:var(--font-mono); font-size:11px; color:var(--accent); display:block; margin-bottom:6px;}

/* Cell borders rather than a 1px grid gap over a coloured background: an
   incomplete last row then leaves empty space, not a stray filled box. */
.plogos{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin:48px 0 0; padding:0;
  border-top:1px solid var(--border); border-left:1px solid var(--border);
}
.plogos li{
  list-style:none; min-height:104px; display:flex; align-items:center;
  justify-content:center; text-align:center; padding:18px 20px;
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  font-size:13.5px; font-weight:500; line-height:1.45; color:var(--text-muted);
}
/* Real logos and text placeholders sit in the same grid, so both are desaturated
   to one weight — colour returns on hover. Without this the two or three logos
   we have would shout over the names we don't. */
/* Capped on both axes so a 12:1 wordmark and a 5:1 signature end up at a
   similar optical weight instead of one filling the cell edge to edge. */
/* min-width:0 lets the grid track shrink below the logo's intrinsic width —
   without it a 160px cap plus cell padding pins each column at 200px, and two
   of those overflow any phone. min() keeps the optical cap on wider screens. */
.plogos li{min-width:0;}
.plogos img{
  max-width:min(160px,100%); max-height:40px; width:auto; height:auto;
  filter:grayscale(1); opacity:.58;
  transition:filter .2s var(--ease), opacity .2s var(--ease);
}
/* A square emblem reads smaller than a wordmark at the same height. */
.plogos img[data-square]{max-height:58px;}
/* An emblem with no wordmark in it needs the name spelled out beside it,
   otherwise nobody can tell which body it belongs to. */
.plogos .pair{flex-direction:row; gap:12px;}
.plogos .pair img{max-height:44px; flex:0 1 auto;}
.plogos .pair span{text-align:left; font-size:12.5px; line-height:1.4; min-width:0; overflow-wrap:break-word;}
/* A ministry whose full legal name runs to three lines needs the emblem above
   the text rather than beside it, or the label has ~145px to wrap into. */
.plogos .pair--long{flex-direction:column; gap:8px;}
.plogos .pair--long img{max-height:38px;}
.plogos .pair--long span{text-align:center; font-size:11px; line-height:1.35;}
.plogos li:hover img{filter:none; opacity:1;}

.story{display:grid; grid-template-columns:repeat(3,1fr); gap:0 44px; row-gap:52px; margin-top:56px;}
.story article{border-top:1px solid var(--border); padding-top:18px;}
.story__meta{display:flex; align-items:center; gap:14px; margin-bottom:14px; font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted);}
.story h3{font-size:18px; line-height:1.55; margin-bottom:10px;}
.story p{font-size:14px; line-height:1.8; color:var(--text-muted); margin:0;}

.filters{display:flex; gap:26px; margin-top:44px; border-bottom:1px solid var(--border); padding-bottom:0;}
.filters button{
  background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
  font-family:var(--font-kr); font-size:14px; font-weight:500; color:var(--text-muted);
  padding:0 0 14px; margin-bottom:-1px;
}
.filters button[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent);}

.pager{display:flex; gap:8px; justify-content:center; margin-top:64px;}
.pager button{
  background:none; border:1px solid var(--border); border-radius:var(--radius-sm);
  width:38px; height:38px; cursor:pointer; font-family:var(--font-mono); font-size:13px; color:var(--text-muted);
}
.pager button[aria-current="true"]{border-color:var(--accent); color:var(--accent);}

/* ============================================================
   ACCORDION (FAQ)
   ============================================================ */
.acc{margin-top:40px; border-top:1px solid var(--border);}
.acc__item{border-bottom:1px solid var(--border);}
.acc__btn{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:24px 0; font-family:var(--font-kr); font-size:16px; font-weight:500;
  color:var(--text); line-height:1.6;
}
.acc__btn:hover{color:var(--accent);}
.acc__sign{font-family:var(--font-mono); font-size:18px; color:var(--accent); flex:none; transition:transform .24s var(--ease);}
.acc__btn[aria-expanded="true"] .acc__sign{transform:rotate(45deg);}
.acc__panel{display:none; padding:0 0 26px; max-width:72ch;}
.acc__panel.is-open{display:block;}
.acc__panel p{font-size:14.5px; line-height:1.9; color:var(--text-muted); margin:0;}

/* ============================================================
   FORM
   ============================================================ */
.form{margin-top:40px; display:grid; gap:26px; max-width:640px;}
.field label,.field legend{
  display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; padding:0;
}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{
  width:100%; background:var(--field-bg); color:var(--text);
  border:1px solid var(--field-border); border-radius:var(--radius-sm);
  padding:13px 15px; font-family:var(--font-kr); font-size:15px; line-height:1.6;
}
.field textarea{min-height:132px; resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--text-muted); opacity:.6;}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent);}
.field fieldset{border:0; margin:0; padding:0;}
.radios{display:flex; flex-wrap:wrap; gap:10px;}
.radios label{
  display:inline-flex; align-items:center; gap:8px; margin:0; cursor:pointer;
  border:1px solid var(--field-border); border-radius:var(--radius-sm);
  padding:10px 16px; font-family:var(--font-kr); font-size:14px;
  letter-spacing:0; text-transform:none; color:var(--text);
}
.radios input{accent-color:var(--accent); margin:0;}
.radios label:has(input:checked){border-color:var(--accent); color:var(--accent);}
/* The "자세히 보기" trigger sits OUTSIDE the <label>: anything inside a label
   activates its control, so keeping it in would toggle the consent checkbox. */
.consent{display:flex; align-items:flex-start; flex-wrap:wrap; gap:4px 10px; font-size:13.5px; color:var(--text-muted); line-height:1.7;}
.consent__check{display:flex; align-items:flex-start; gap:10px; margin:0; cursor:pointer;}
.consent input{accent-color:var(--accent); margin-top:5px; flex:none;}
.consent__more{
  background:none; border:0; padding:0; cursor:pointer; font-family:var(--font-kr);
  font-size:13.5px; line-height:1.7; color:var(--accent); border-bottom:1px solid currentColor;
}

/* ============================================================
   MODAL (privacy notice)
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:210; background:rgba(6,8,6,.94);
  display:none; align-items:center; justify-content:center; padding:32px 24px;
}
.modal.is-open{display:flex;}
/* data-ground="paper" on the panel: long legal copy reads better on a light
   field, and the ground tokens give it a coherent palette for free. */
.modal__panel{
  background:var(--bg); color:var(--text);
  width:min(680px,100%); max-height:min(80svh,720px);
  border-radius:var(--radius-md); box-shadow:var(--shadow-overlay);
  display:flex; flex-direction:column; overflow:hidden;
}
.modal__head{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 30px 20px; border-bottom:1px solid var(--border); flex:none;
}
.modal__head h2{font-size:20px; line-height:1.4; font-weight:700;}
.modal__close{
  background:none; border:0; cursor:pointer; padding:8px; margin:-8px -8px -8px 0;
  color:var(--text-muted); font-family:var(--font-mono); font-size:12px; letter-spacing:.1em;
}
.modal__close:hover{color:var(--accent);}
.modal__body{padding:26px 30px 32px; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.modal__body p{font-size:14px; line-height:1.85; color:var(--text-muted); max-width:none; margin:0 0 18px;}
.modal__body h3{font-size:15px; font-weight:600; margin:26px 0 10px;}
.modal__body h3:first-child{margin-top:0;}
.modal__tw{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-sm); margin:0 0 18px;}
.modal__tw table{border-collapse:collapse; width:100%; min-width:420px; font-size:13.5px;}
.modal__tw th,.modal__tw td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top; line-height:1.7;}
.modal__tw thead th{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted); background:var(--surface); font-weight:600; white-space:nowrap;
}
.modal__tw tbody tr:last-child td{border-bottom:0;}
.modal__note{
  border-left:2px solid var(--accent); background:var(--surface);
  padding:14px 18px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:13.5px; line-height:1.8; color:var(--text);
}
.form__note{font-size:13px; color:var(--text-muted); margin:0;}

.contacts{display:grid; gap:32px; margin-top:44px;}
.contacts h4{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px;}
.contacts p{margin:0; font-size:15px; line-height:1.9;}
.contacts a:hover{color:var(--accent);}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--border); margin-top:96px; padding-top:52px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;}
.foot h4{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin:0 0 16px; font-weight:600;}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.foot a,.foot li{font-size:14px; color:var(--text-muted);}
.foot a:hover{color:var(--accent);}
.foot__brand p{font-size:14px; color:var(--text-muted); max-width:34ch; margin:14px 0 0;}
.legal{
  border-top:1px solid var(--border); margin-top:52px; padding-top:24px;
  display:flex; flex-direction:column; gap:14px;
  font-family:var(--font-mono); font-size:11px; color:var(--text-muted);
}
/* Business registration details: an inline list separated by hairline dividers
   rather than typed-in bullets, so it wraps cleanly at any width. */
.legal__biz{display:flex; flex-wrap:wrap; gap:6px 14px;}
.legal__biz span{display:inline-flex; align-items:center;}
.legal__biz span + span::before{
  content:""; width:1px; height:10px; background:var(--border);
  margin-right:14px; flex:none;
}
.legal__copy{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; opacity:.8;}

/* ============================================================
   REVEAL
   ============================================================ */
.rv{opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.rv.is-in{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important;}
  .rv{opacity:1; transform:none;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  :root{--pad-section:88px;}
  .split{grid-template-columns:1fr; gap:44px;}
  .recgrid,.recgrid--4,.story,.steps{grid-template-columns:repeat(2,1fr); gap:0 32px; row-gap:40px;}
  .sdg,.plogos{grid-template-columns:repeat(3,1fr);}
  .chain{grid-template-columns:repeat(2,1fr);}
  .chain li + li{border-left:0;}
  .chain li{border-top:1px solid var(--border); padding-left:0 !important;}
  .foot{grid-template-columns:1fr 1fr; gap:36px;}
  .phero{padding:160px 0 72px;}
}
@media (max-width:720px){
  :root{--pad-section:64px;}
  .wrap{padding:0 24px;}
  .nav{display:none;}
  .nav-toggle{display:block;}
  .stats,.recgrid,.recgrid--2,.recgrid--4,.story,.steps,.chain{grid-template-columns:1fr; row-gap:36px;}
  .stats{row-gap:28px; margin-top:52px;}
  .sdg,.plogos{grid-template-columns:repeat(2,1fr);}
  .foot{grid-template-columns:1fr;}
  .phero{padding:132px 0 56px;}
  .filters{gap:18px; overflow-x:auto;}
}

/* Honeypot — reachable by bots that fill every field, never by a person. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none;}
.form__note.is-ok{color:var(--accent);}
.form__note.is-bad{color:var(--status-unconfirmed);}


/* ---- methodology, stacked ------------------------------------------------
   Sitting in half a split, the four terms read better as one column of rows
   than as a 2x2 of cards: the symbol column lines up, so BE / EG / EF / ER
   scan vertically the way the equation does. Hairlines come from a 1px grid
   gap over a border-coloured backdrop, so rows share edges without doubling.  */
.meth__eq{
  display:flex; align-items:center; justify-content:center;
  margin:0 0 10px; padding:clamp(20px,3vw,30px) 20px;
  border-radius:var(--radius-md); background:var(--basalt-950); color:#fff;
  font-family:var(--font-display); font-size:clamp(24px,2.8vw,36px);
  font-weight:500; letter-spacing:-.02em;
}
.meth__eq em{font-style:normal; color:var(--hydro-400);}
.meth__eq sub{font-size:.5em; vertical-align:-.15em; opacity:.8;}
.meth__flow{
  font-family:var(--font-mono); font-size:9.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  text-align:center; margin:0 0 20px;
}
.meth__seq,.meth__subs{
  list-style:none; margin:0; padding:0; display:grid; gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:var(--radius-md); overflow:hidden;
}
.meth__subs{margin-top:14px;}
.meth__row{display:flex; gap:16px; padding:15px 18px; background:var(--surface);}
.meth__row--out{background:var(--basalt-950);}
.meth__row--out .meth__lab{color:rgba(255,255,255,.55);}
.meth__row--out .meth__ttl{color:var(--hydro-400);}
.meth__row--out .meth__d{color:rgba(255,255,255,.72);}
.meth__row--out .meth__sym{color:#fff;}
.meth__sym{
  flex:none; width:56px; padding-top:2px;
  font-family:var(--font-display); font-style:italic;
  font-size:17px; font-weight:500; color:var(--text);
}
.meth__sym sub{font-size:.6em; vertical-align:-.15em; opacity:.75;}
.meth__lab{
  display:block; font-family:var(--font-mono); font-size:9px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);
  margin-bottom:3px;
}
.meth__ttl{display:block; font-size:14.5px; font-weight:600; color:var(--accent); margin-bottom:4px;}
.meth__d{display:block; font-size:12.5px; line-height:1.6; color:var(--text-muted);}
.meth__note{
  font-family:var(--font-mono); font-size:10px; line-height:1.6;
  color:var(--text-muted); margin:16px 0 0; opacity:.8;
}
@media (max-width:520px){
  .meth__row{flex-direction:column; gap:6px;}
  .meth__sym{width:auto;}
}