:root {
  color-scheme: dark;
  --ink: #f6f1df;
  --muted: #b8c4ba;
  --deep: #071f1c;
  --deep-2: #0c2b26;
  --teal: #73d2b2;
  --gold: #f0c768;
  --line: rgba(232, 241, 223, .16);
  --panel: rgba(17, 48, 41, .78);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--deep); }
body { margin: 0; overflow-x: hidden; background: var(--deep); color: var(--ink); font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; z-index: 200; left: 16px; top: -80px; padding: 12px 16px; border-radius: 10px; background: #fff; color: #10241f; font-weight: 800; }
.skip-link:focus { top: 12px; }

.site-head { position: fixed; z-index: 100; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 28px; min-height: 72px; padding: 12px clamp(20px, 5vw, 76px); border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(5, 24, 21, .78); backdrop-filter: blur(18px) saturate(1.2); }
.site-head.is-scrolled { box-shadow: 0 14px 40px rgba(0,0,0,.24); }
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand span { display: grid; place-items: center; width: 38px; aspect-ratio: 1; border: 1px solid rgba(240,199,104,.56); border-radius: 14px 14px 10px; background: linear-gradient(150deg, #c8a750, #436f5f); box-shadow: inset 0 0 0 4px rgba(8,35,29,.36); font: 800 1.05rem Georgia, serif; }
.brand b { font-size: .73rem; letter-spacing: .14em; }
.site-head nav { display: flex; gap: 24px; }
.site-head nav a { color: #d7dfd6; font-size: .76rem; font-weight: 700; }
.head-cta { padding: 10px 14px; border: 1px solid rgba(240,199,104,.5); border-radius: 999px; color: #f8dc94; font-size: .72rem; font-weight: 800; }

.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; padding: 150px clamp(24px, 7vw, 110px) 100px; }
.hero-image, .hero-shade { position: absolute; inset: 0; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; animation: hero-drift 12s ease-out both; }
@keyframes hero-drift { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero-shade { background: linear-gradient(90deg, rgba(3,18,16,.94) 0%, rgba(3,18,16,.75) 38%, rgba(3,18,16,.18) 72%), linear-gradient(0deg, #071f1c 0%, transparent 30%, rgba(4,16,15,.25) 100%); }
.hero-copy { position: relative; z-index: 2; width: min(770px, 67vw); padding-bottom: 40px; }
.eyebrow, .section-kicker { margin: 0 0 18px; color: var(--gold); font-size: .68rem; font-weight: 900; letter-spacing: .16em; }
.hero h1 { margin: 0; font: 700 clamp(3.2rem, 7vw, 7.3rem)/.98 "Batang", Georgia, serif; letter-spacing: -.075em; text-wrap: balance; text-shadow: 0 12px 38px rgba(0,0,0,.42); }
.hero h1 em { color: #f4d47d; font-style: normal; }
.hero-lead { max-width: 670px; margin: 30px 0 0; color: rgba(247,244,225,.84); font-size: clamp(.95rem, 1.3vw, 1.16rem); line-height: 1.8; word-break: keep-all; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px; border-radius: 999px; font-size: .8rem; font-weight: 900; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(135deg, #f4d47d, #d9a947); color: #12271f; box-shadow: 0 12px 34px rgba(215,167,67,.22); }
.button-ghost { border: 1px solid rgba(255,255,255,.25); background: rgba(7,31,27,.43); backdrop-filter: blur(8px); }
.hero-caption { position: absolute; z-index: 2; right: clamp(24px, 5vw, 80px); bottom: 72px; display: grid; gap: 6px; width: min(330px, 27vw); padding: 16px 18px; border-left: 1px solid rgba(240,199,104,.72); background: linear-gradient(90deg, rgba(6,27,23,.66), transparent); }
.hero-caption span { color: var(--gold); font-size: .64rem; font-weight: 900; letter-spacing: .1em; }
.hero-caption b { font: 700 .9rem/1.55 "Batang", Georgia, serif; }

.metrics { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); width: min(1180px, calc(100% - 40px)); margin: -38px auto 0; border: 1px solid var(--line); border-radius: 22px; background: rgba(13,45,38,.94); box-shadow: 0 26px 80px rgba(0,0,0,.3); }
.metrics div { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 24px 12px; }
.metrics div + div { border-left: 1px solid var(--line); }
.metrics strong { color: #f8d77e; font: 700 clamp(1.7rem, 3vw, 2.6rem)/1 Georgia, serif; }
.metrics span { color: var(--muted); font-size: .71rem; font-weight: 700; }

.section-pad { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 140px 0; }
.brief { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 9vw, 130px); align-items: start; }
.brief h2, .section-head h2, .evidence h2, .final-cta h2 { margin: 0; font: 700 clamp(2.2rem, 4.6vw, 4.7rem)/1.13 "Batang", Georgia, serif; letter-spacing: -.06em; text-wrap: balance; }
.brief-copy { display: grid; gap: 20px; padding-top: 34px; }
.brief-copy p, .section-head > p, .year-copy > p, .learning article p, .evidence-intro > p, .final-cta > p { margin: 0; color: var(--muted); line-height: 1.85; word-break: keep-all; }
.brief-copy p:first-child { color: #e8eee5; font-size: 1.08rem; }

.story-section { padding-top: 60px; }
.section-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: end; margin-bottom: 74px; }
.section-head > p { padding-bottom: 8px; }
.year-trail { display: grid; gap: 120px; margin: 0; padding: 0; list-style: none; }
.year-block { position: relative; display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(35px, 6vw, 88px); align-items: center; }
.year-block.reverse { grid-template-columns: 1.22fr .78fr; }
.year-block.reverse .year-copy { order: 2; }
.year-block::before { content: ""; position: absolute; left: -25px; top: 0; bottom: -120px; width: 1px; background: linear-gradient(var(--gold), rgba(240,199,104,.06)); }
.year-block:last-child::before { bottom: 0; }
.year-number { display: block; margin-bottom: 26px; color: rgba(240,199,104,.23); font: 700 5rem/1 Georgia, serif; letter-spacing: -.07em; }
.year-label { margin: 0 0 12px; color: var(--gold); font-size: .7rem; font-weight: 900; letter-spacing: .12em; }
.year-copy h3 { margin: 0 0 22px; font: 700 clamp(1.8rem, 3.3vw, 3.15rem)/1.22 "Batang", Georgia, serif; letter-spacing: -.05em; word-break: keep-all; }
.text-link { display: inline-block; margin-top: 24px; color: #f3d17a; border-bottom: 1px solid rgba(243,209,122,.35); padding-bottom: 4px; font-size: .78rem; font-weight: 900; }
.year-visual { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: #0e2e27; box-shadow: 0 36px 90px rgba(0,0,0,.28); }
.year-visual img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .7s ease; }
.year-visual:hover img { transform: scale(1.025); }
.year-visual figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: rgba(5,25,22,.74); color: #e8eee5; font-size: .68rem; backdrop-filter: blur(12px); }
.year-visual figcaption span { color: var(--gold); font-weight: 900; white-space: nowrap; }

.year-one { grid-template-columns: .55fr 1.45fr; }
.g1-gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 220px); gap: 10px; }
.moment { position: relative; overflow: hidden; min-height: 0; border: 1px solid var(--line); border-radius: 20px; }
.moment img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease, filter .4s ease; }
.moment:hover img { transform: scale(1.035); filter: saturate(1.1); }
.moment::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(3,19,16,.9)); }
.moment span { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; display: grid; gap: 4px; }
.moment small { color: #f4d277; font-size: .61rem; font-weight: 900; letter-spacing: .1em; }
.moment b { font: 700 .88rem/1.4 "Batang", Georgia, serif; }
.moment-letter { background: radial-gradient(circle at 72% 25%, rgba(244,210,119,.3), transparent 24%), linear-gradient(145deg, #173f36, #09241f); }
.moment-letter::before { content: "✉"; position: absolute; left: 50%; top: 42%; color: rgba(244,210,119,.78); font: 700 4.8rem/1 Georgia, serif; transform: translate(-50%, -50%); }
.moment-letter::after { inset: 0; background: linear-gradient(transparent 28%, rgba(3,19,16,.92)); }

.learning { width: 100%; max-width: none; padding-left: max(24px, calc((100vw - 1240px) / 2)); padding-right: max(24px, calc((100vw - 1240px) / 2)); background: linear-gradient(135deg, #102f29, #09241f); }
.learning .section-head { max-width: 1240px; margin-left: auto; margin-right: auto; }
.learning-grid { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1240px; margin: 0 auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.learning article { min-height: 300px; padding: 38px 34px; }
.learning article + article { border-left: 1px solid var(--line); }
.learning article > span { color: var(--gold); font: 700 1.1rem Georgia, serif; }
.learning article h3 { margin: 70px 0 17px; font: 700 1.4rem/1.42 "Batang", Georgia, serif; }
.learning article p { font-size: .85rem; }

.evidence-card { display: grid; grid-template-columns: .82fr 1.18fr; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(145deg, rgba(17,52,44,.92), rgba(9,35,30,.97)); box-shadow: 0 35px 100px rgba(0,0,0,.25); }
.evidence-intro { padding: clamp(35px, 6vw, 74px); }
.evidence-intro > p { margin-top: 28px; }
.evidence-list { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-left: 1px solid var(--line); }
.evidence-list div { display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; padding: 28px; border-bottom: 1px solid var(--line); }
.evidence-list div:nth-child(odd) { border-right: 1px solid var(--line); }
.evidence-list dt { color: var(--muted); font-size: .72rem; }
.evidence-list dd { margin: 0; color: #f7d37a; font: 700 clamp(1.3rem, 2.1vw, 2rem)/1.2 Georgia, "Batang", serif; }
.evidence-list .pending dd { color: #dce5dc; font: 700 .9rem/1.5 "Malgun Gothic", sans-serif; }

.final-cta { padding-top: 70px; padding-bottom: 160px; text-align: center; }
.final-cta > p { max-width: 680px; margin: 24px auto 0; }
.final-cta .hero-actions { justify-content: center; }

footer { display: flex; align-items: center; gap: 22px; padding: 34px clamp(24px, 5vw, 80px); border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; }
footer b { color: var(--ink); letter-spacing: .12em; }
footer p { margin: 0 auto 0 0; }
footer a { color: var(--gold); font-weight: 800; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,.76,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
:focus-visible { outline: 3px solid #ffe18a; outline-offset: 4px; }

@media (max-width: 960px) {
  .site-head nav { display: none; }
  .hero-copy { width: min(720px, 88vw); }
  .hero-caption { display: none; }
  .brief, .section-head, .year-block, .year-block.reverse, .year-one, .evidence-card { grid-template-columns: 1fr; }
  .year-block.reverse .year-copy { order: 0; }
  .g1-gallery { grid-template-rows: repeat(2, 240px); }
  .evidence-list { border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 680px) {
  .site-head { min-height: 62px; padding: 9px 14px; }
  .brand b { display: none; }
  .head-cta { padding: 9px 11px; font-size: .66rem; }
  .hero { min-height: 820px; padding: 120px 20px 70px; align-items: center; }
  .hero-image img { object-position: 63% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(3,18,16,.96) 0%, rgba(3,18,16,.76) 58%, rgba(3,18,16,.25) 100%); }
  .hero-copy { width: 100%; padding-top: 270px; padding-bottom: 0; }
  .hero h1 { font-size: clamp(2.75rem, 14vw, 4.2rem); }
  .hero-lead { font-size: .9rem; line-height: 1.7; }
  .hero-actions { flex-direction: column; }
  .button { width: 100%; }
  .metrics { grid-template-columns: 1fr 1fr; margin-top: -20px; }
  .metrics div { padding: 20px 8px; }
  .metrics div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .metrics div:nth-child(4) { border-top: 1px solid var(--line); }
  .metrics strong { font-size: 1.65rem; }
  .metrics span { font-size: .62rem; }
  .section-pad { width: calc(100% - 34px); padding: 92px 0; }
  .brief { gap: 20px; }
  .section-head { gap: 20px; margin-bottom: 50px; }
  .year-trail { gap: 82px; }
  .year-block::before { display: none; }
  .year-number { margin-bottom: 16px; font-size: 3.6rem; }
  .g1-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 190px); }
  .year-visual { border-radius: 18px; }
  .year-visual figcaption { position: static; border: 0; border-radius: 0; font-size: .62rem; }
  .learning { width: 100%; padding-left: 17px; padding-right: 17px; }
  .learning-grid { grid-template-columns: 1fr; }
  .learning article { min-height: 0; padding: 30px 8px; }
  .learning article + article { border-top: 1px solid var(--line); border-left: 0; }
  .learning article h3 { margin-top: 30px; }
  .evidence-intro { padding: 32px 22px; }
  .evidence-list { grid-template-columns: 1fr; }
  .evidence-list div { min-height: 110px; padding: 21px 22px; }
  .evidence-list div:nth-child(odd) { border-right: 0; }
  footer { align-items: flex-start; flex-wrap: wrap; }
}

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