/* greenMRV — shared tokens, base, layout motifs, header, mega menu, buttons, sections, footer.
   Layout: 12-column hairline grid on a limestone canvas; night-forest bands carry the cinematic and data moments.
   Palette sampled from the supplied logo (2026-10-11): dots #6FA640 #58912F #286C17 #004223 · cloud #538D2E · "MRV" #014524. */
:root{
  --leaf:#6FA640; --sprout:#58912F; --forest:#286C17; --brand:#014524;
  --night:#0A2A1E; --night-2:#0F3626; --night-3:#174633;
  --paper:#F3F4EF; --paper-2:#E5EADF; --card:#FFFFFF;
  /* --ink-3 was #86938B until 2026-10-25: 2.6–3.2:1 on paper/paper-2/card failed WCAG AA for its small text; #59665E is 4.9–6:1 */
  --ink:#0C1A13; --ink-2:#43514A; --ink-3:#59665E; --rule:#D4DBCF; --rule-2:#BAC4B6;
  --on-night:#EAF2EC; --on-night-2:#A2BBAE;
  --signal:#BFEA62; --heat:#E8692B; --water:#8CC7E8; --mist:#D7E9C3;
  --font-sans:"Pretendard Variable",Pretendard,"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","Pretendard Variable",Pretendard,ui-monospace,Menlo,Consolas,monospace;
  --margin:clamp(16px,3.2vw,48px); --gap:clamp(16px,2vw,28px); --maxw:1440px; --r-s:4px; --r-m:10px;
  --fs-hero:clamp(40px,6.2vw,92px); --fs-d:clamp(32px,4.5vw,66px); --fs-h2:clamp(26px,3.1vw,44px); --fs-h3:clamp(20px,1.7vw,26px);
  --fs-lead:clamp(17px,1.25vw,20px);
  --ease-out:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.7 var(--font-sans);word-break:keep-all;overflow-wrap:break-word;overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss06"}
a{color:inherit}
img,svg,canvas,video{max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:650;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--margin)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r-s);text-decoration:none;font-weight:600}
.skip-link:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}
.eyebrow{font:500 12px/1.2 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--forest);display:inline-flex;gap:.6em;align-items:center}
.eyebrow::before{content:"";width:8px;height:8px;border:1.5px solid currentColor;transform:rotate(45deg)}
.dark .eyebrow,.eyebrow.is-signal{color:var(--signal)}
.mono{font-family:var(--font-mono)}

/* Buttons */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:var(--h);padding:0 22px;border-radius:var(--r-s);
  background:var(--brand);color:#fff;font:600 15px/1 var(--font-sans);text-decoration:none;border:1.5px solid var(--brand);white-space:nowrap;cursor:pointer;
  transition:transform .2s var(--ease-out),background-color .2s,color .2s,border-color .2s}
.btn:hover{background:var(--forest);border-color:var(--forest);transform:translateY(-1px)}
.btn--line{background:transparent;color:currentColor;border-color:currentColor}
.btn--line:hover{background:rgba(127,127,127,.1);border-color:currentColor}
.btn--signal{background:var(--signal);border-color:var(--signal);color:var(--night)}
.btn--signal:hover{background:#D3F38A;border-color:#D3F38A}
.btn--ghost-light{background:transparent;color:var(--on-night);border-color:rgba(234,242,236,.5)}
.btn--ghost-light:hover{background:rgba(234,242,236,.1);border-color:var(--on-night)}
.btn--sm{--h:40px;padding:0 15px;font-size:14px}
.arrow-link{display:inline-flex;gap:.4em;align-items:center;font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}

/* Hairline-grid motif */
.cross{position:absolute;width:20px;height:20px;transform:translate(-50%,-50%);pointer-events:none;color:var(--sprout)}
.cross::before,.cross::after{content:"";position:absolute;background:currentColor}
.cross::before{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%)}
.cross::after{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%)}
.topo-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.tag{display:inline-flex;font:500 12px/1 var(--font-sans);padding:5px 8px;border:1px solid var(--sprout);border-radius:3px;color:var(--ink)}

/* ---------- Header: glass over dark heroes, solid elsewhere ---------- */
.site-header{position:fixed;z-index:60;top:calc(env(safe-area-inset-top,0px) + 12px);left:var(--margin);right:var(--margin);height:64px;
  display:flex;align-items:center;gap:20px;padding:0 10px 0 18px;border-radius:var(--r-s);border:1px solid transparent;
  transition:background-color .35s,color .35s,border-color .35s}
.site-header.is-glass{color:var(--on-night);background:linear-gradient(180deg,rgba(6,24,17,.66),rgba(6,24,17,.28));border-color:rgba(234,242,236,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-header.is-solid{color:var(--ink);background:rgba(243,244,239,.94);border-color:var(--rule);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.brand{display:inline-flex;align-items:center;flex:none;text-decoration:none}
.site-header .brand img{height:34px;width:auto}
.site-header .brand-white{display:none}
.site-header.is-glass .brand-white{display:block}
.site-header.is-glass .brand-color{display:none}
.gnb{display:flex;align-items:center;gap:4px;margin-left:16px}
.gnb > a,.gnb-btn{font:500 15px/1 var(--font-sans);color:inherit;text-decoration:none;background:none;border:0;padding:11px 13px;border-radius:var(--r-s);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.gnb > a:hover,.gnb-btn:hover{background:rgba(127,127,127,.13)}
.gnb-btn svg{width:10px;height:10px;transition:transform .2s}
.gnb-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.hdr-cta{margin-left:auto;display:flex;gap:8px;align-items:center}
.site-header.is-glass .hdr-cta .btn:not(.btn--line){background:var(--signal);border-color:var(--signal);color:var(--night)}
.hamburger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;color:inherit;cursor:pointer;border-radius:var(--r-s)}
.hamburger span{display:block;width:20px;height:1.5px;background:currentColor;margin:5px auto}
.mega{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-s);
  display:grid;grid-template-columns:1.25fr 1fr 1fr 1.1fr;box-shadow:0 24px 50px -24px rgba(10,42,30,.4)}
.mega > div{padding:22px 22px 24px;border-right:1px solid var(--rule)}
.mega > div:last-child{border-right:0;background:var(--paper)}
.mega h4{font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.mega a.mi{display:block;text-decoration:none;padding:9px 10px;margin:0 -10px;border-radius:var(--r-s)}
.mega a.mi:hover{background:var(--paper-2)}
.mega a.mi b{display:block;font-weight:600;font-size:15px;line-height:1.35}
.mega a.mi span{display:block;font-size:13px;line-height:1.45;color:var(--ink-2);margin-top:2px}
.mega .feat{display:block;text-decoration:none}
.mega .feat canvas{width:100%;height:108px;display:block;border-radius:var(--r-s);background:var(--night)}
.mega .feat span{display:block;margin-top:12px;font:500 11px/1 var(--font-mono);color:var(--forest);letter-spacing:.06em}
.mega .feat b{display:block;margin-top:6px;font-size:15px;line-height:1.4}
.mnav{position:fixed;inset:0;z-index:70;background:var(--paper);color:var(--ink);padding:calc(env(safe-area-inset-top,0px) + 92px) var(--margin) 32px;overflow:auto}
.mnav h4{font:500 11px/1 var(--font-mono);letter-spacing:.08em;color:var(--ink-3);margin:22px 0 8px;text-transform:uppercase}
.mnav a{display:block;padding:13px 0;font-size:19px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--rule)}
.mnav .btn{margin-top:24px;width:100%;color:#fff}
@media (max-width:1020px){.gnb,.hdr-cta{display:none}.hamburger{display:block}}

/* ---------- Generic sections ---------- */
section{position:relative}
.sec{padding-block:clamp(80px,10vw,160px)}
.dark{background:var(--night);color:var(--on-night)}
/* words not yet scrubbed in: lighter than --ink-3 so the reveal still reads, and ≥3:1 for this large text (paper 3.3, night 3.1) */
.scrub .w{color:#7C8880}
.dark .scrub .w{color:#587868}
.scrub .w.on{color:inherit}
.reveal{will-change:transform,opacity}

/* Cards (posts) */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.post{display:flex;flex-direction:column;border-radius:var(--r-m);overflow:hidden;background:var(--paper-2);text-decoration:none;min-height:440px;transition:transform .35s var(--ease-out),box-shadow .35s}
.post:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(10,42,30,.5)}
.post .thumb{position:relative;aspect-ratio:1/1;max-width:100%;background:var(--night);overflow:hidden}
.post .thumb canvas,.post .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.post:hover .thumb canvas,.post:hover .thumb img{transform:scale(1.04)}
/* 「발행 예정」 card: same layout, no link, no hover lift */
.post.is-soon{cursor:default}
.post.is-soon:hover{transform:none;box-shadow:none}
.post.is-soon:hover .thumb canvas,.post.is-soon:hover .thumb img{transform:none}
.post.is-soon .thumb{filter:saturate(.45) brightness(.9)}
.post.is-soon .tag{background:transparent;border:1px dashed currentColor}
.post.is-draft{outline:1.5px dashed var(--sprout);outline-offset:-1.5px}
.post.is-draft .tag{background:var(--signal);border-color:var(--signal)}
.post .thumb.is-light{background:var(--mist)}
.post .thumb.is-light .k{color:var(--brand)}
.post .thumb .k{position:absolute;left:16px;top:16px;font:500 11px/1 var(--font-mono);letter-spacing:.08em;color:var(--signal);z-index:2}
/* cover image (front matter `cover`): a scrim keeps the label legible; coverAi adds 「AI 생성 일러스트」 */
.post .thumb.has-img::before{content:"";position:absolute;inset:0 0 auto;height:42%;z-index:1;background:linear-gradient(rgba(4,18,12,.5),rgba(4,18,12,0));pointer-events:none}
.post .thumb .ai{position:absolute;z-index:2;left:12px;bottom:12px;font:500 10.5px/1 var(--font-mono);padding:5px 7px;border-radius:3px;background:rgba(4,18,12,.66);color:#fff}
.post .body{display:flex;flex-direction:column;gap:14px;padding:18px 18px 16px;flex:1}
.post h3{font-size:19px;line-height:1.42;letter-spacing:-.015em;font-weight:600}
.post .meta{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;font:400 12px/1 var(--font-mono);color:var(--ink-2)}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards{grid-template-columns:1fr}.post{min-height:0}}

/* Newsletter */
.news{border-top:1px solid var(--rule)}
.news .row{display:grid;grid-template-columns:6fr 6fr;gap:clamp(24px,5vw,80px);align-items:center;padding-block:clamp(56px,7vw,96px)}
.news h2{font-size:var(--fs-h2);letter-spacing:-.025em;line-height:1.25;margin-top:14px}
.news p{margin-top:12px;color:var(--ink-2)}
.news-form{display:grid;grid-template-columns:1fr auto;gap:10px}
.news-form input[type=email]{height:48px;border:1.5px solid var(--ink);border-radius:var(--r-s);background:#fff;padding:0 14px;font:inherit;min-width:0}
.consent{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--ink-2);cursor:pointer}
.consent input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--brand)}
.consent b{color:var(--ink)}
.news .ok{grid-column:1/-1;font-size:14px;color:var(--forest);font-weight:600}
@media (max-width:860px){.news .row{grid-template-columns:1fr}.news-form{grid-template-columns:1fr}}

/* Footer */
.site-footer{background:var(--night);color:var(--on-night)}
.site-footer .top{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,80px);padding-block:clamp(64px,8vw,110px)}
.site-footer .brand img{height:44px;width:auto}
.site-footer .tagline{font-size:clamp(24px,2.4vw,34px);line-height:1.3;letter-spacing:-.025em;font-weight:650;margin:30px 0 28px}
.site-footer .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.site-footer h4{font:500 12px/1 var(--font-mono);letter-spacing:.08em;color:var(--signal);margin-bottom:18px;text-transform:uppercase}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.site-footer a{text-decoration:none;font-weight:500;font-size:15px}
.site-footer a:hover{text-decoration:underline}
.site-footer .legal{border-top:1px solid rgba(234,242,236,.12);padding-block:24px 40px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12.5px;color:var(--on-night-2);line-height:1.7}
.site-footer .legal nav{display:flex;gap:16px;flex-wrap:wrap}
.site-footer .legal a{font-size:12.5px;color:var(--on-night)}
@media (max-width:860px){.site-footer .top{grid-template-columns:1fr}.site-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

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

/* language switch (EN · KO, scripts/lib/i18n.mjs): header bar and mobile menu. On narrow screens the bar keeps the
   switch next to the menu button and drops only the consultation button. Inactive option: 72% of the text colour
   (6.7:1 on paper). */
.lang-switch{display:inline-flex;align-items:center;gap:0;font:500 12px/1 var(--font-mono);letter-spacing:.05em}
.lang-switch__opt{color:inherit;text-decoration:none;padding:9px 6px;border-radius:var(--r-s);opacity:.72}
.lang-switch__opt:hover{opacity:1;background:rgba(127,127,127,.13)}
.lang-switch__opt[aria-current="true"]{opacity:1;font-weight:600}
.lang-switch__sep{opacity:.45;padding:0 1px}
.hdr-cta .lang-switch{margin-right:6px}
.mnav .lang-switch{display:flex;margin-top:20px;font-size:14px}
.mnav .lang-switch__opt{display:inline-block;padding:10px 12px;font-size:14px;font-weight:500;border-bottom:0}
.mnav .lang-switch__opt[aria-current="true"]{font-weight:600}
@media (max-width:1020px){.hdr-cta{display:flex}.hdr-cta .btn{display:none}.hdr-cta .lang-switch{margin-right:0}.hamburger{margin-left:4px}}
/* the open mobile menu (z-index 70) used to cover the header, hiding the menu button that closes it and the language
   switch; lift the header above the menu while it is open (2026-10-26) */
body:has(#mnav:not([hidden])) .site-header{z-index:75}
/* English policy pages: the Korean text prevails (build.mjs adds the note under the summary) */
.lang-note{margin:14px 0 0;max-width:64ch;font-size:14px;line-height:1.6;color:var(--ink-2);padding:10px 14px;border-left:3px solid var(--sprout);background:rgba(255,255,255,.55);border-radius:0 var(--r-s) var(--r-s) 0}
.lang-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}