:root {
  --paper: #e3d6c7;
  --paper-rgb: 227, 214, 199;
  --ink: #242321;
  --ink-soft: rgba(36, 35, 33, .7);
  --serif-en: "Cormorant Garamond", Georgia, serif;
  --serif-ko: "Noto Serif KR", "Batang", serif;
  --sans: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --page-x: clamp(30px, 3vw, 52px);
  --header-x: clamp(50px, 4.4vw, 78px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; scrollbar-gutter: stable; background: var(--paper); }
html.is-reloading-at-top { scroll-behavior: auto; }
body { margin: 0; overflow-x: clip; color: var(--ink); background-color: var(--paper); background-image: url("./assets/textures/paper-continuous.png"); background-position: center top; background-repeat: repeat; background-size: 1542px 902px; font-family: var(--sans); }
body.menu-open { overflow: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .035; mix-blend-mode: multiply; background: rgba(72,57,40,.08); }
img { display: block; max-width: 100%; }
a { color: inherit; }

.global-header { position: fixed; inset: 0 0 auto; z-index: 200; height: 98px; padding: 0 var(--header-x); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.global-header a, .global-header button { pointer-events: auto; text-decoration: none; }
.brand { display: flex; align-items: center; width: clamp(125px, 9.75vw, 166px); height: 112px; opacity: 0; transform: translateY(-8px); filter: blur(3px); will-change: opacity, transform, filter; }
.brand img { width: 100%; height: 100%; object-fit: contain; }
.menu-mark { width: 30px; height: 30px; padding: 3px 0; display: grid; align-content: center; gap: 6px; border: 0; color: inherit; background: transparent; cursor: pointer; }
.menu-mark span { width: 100%; height: 1px; display: block; background: currentColor; transform-origin: center; transition: transform .48s cubic-bezier(.22,.75,.18,1), opacity .3s ease; }
.menu-mark:hover span:nth-child(1), .menu-mark:focus-visible span:nth-child(1) { transform: translateX(-4px); }
.menu-mark:hover span:nth-child(3), .menu-mark:focus-visible span:nth-child(3) { transform: translateX(4px); }
.menu-mark[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-mark[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.25); }
.menu-mark[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Exhibition index — the paper margin opens and the inked table of contents appears. */
.index-scrim { position: fixed; inset: 0; z-index: 140; opacity: 0; pointer-events: none; background: rgba(47,42,36,.16); backdrop-filter: blur(2px); transition: opacity .55s ease; }
.site-index { position: fixed; top: 0; right: 0; bottom: 0; z-index: 150; width: min(410px, 88vw); padding: clamp(112px, 14vh, 148px) clamp(34px, 4vw, 58px) 42px; display: flex; flex-direction: column; overflow-y: auto; color: var(--ink); background-color: rgba(var(--paper-rgb),.965); background-image: linear-gradient(to left, rgba(255,252,246,.25), transparent 36%), url("./assets/textures/paper-continuous.png"); background-position: center top; background-size: auto, 1542px 902px; border-left: 1px solid rgba(49,43,36,.12); box-shadow: -30px 0 70px rgba(45,38,31,.12); opacity: .45; filter: blur(7px); transform: translate3d(104%,0,0); transition: transform .72s cubic-bezier(.2,.78,.16,1), opacity .55s ease, filter .7s ease; }
.site-index::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .34; background: radial-gradient(ellipse at 92% 10%, rgba(40,38,35,.2), transparent 25%), radial-gradient(ellipse at 16% 88%, rgba(71,69,65,.12), transparent 34%); filter: blur(22px); }
body.menu-open .index-scrim { opacity: 1; pointer-events: auto; }
body.menu-open .site-index { opacity: 1; filter: none; transform: none; }
.index-heading { margin-bottom: clamp(30px, 5vh, 52px); }
.index-heading p, .index-signature { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .25em; }
.index-heading span { display: block; margin-top: 10px; color: rgba(36,35,33,.52); font-family: var(--serif-ko); font-size: 13px; }
.index-nav { display: grid; }
.index-nav a { position: relative; min-height: 60px; padding: 16px 28px 16px 0; display: grid; grid-template-columns: 1fr; align-items: baseline; border-bottom: 1px solid rgba(43,39,34,.105); color: rgba(36,35,33,.52); text-decoration: none; transition: color .35s ease, padding-left .4s ease; }
.index-nav a:first-child { border-top: 1px solid rgba(43,39,34,.105); }
.index-number { font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .12em; }
.index-label { font-family: var(--serif-en); font-size: clamp(20px, 1.7vw, 25px); line-height: 1.15; letter-spacing: -.018em; }
.index-nav a[href="#work-01"] .index-label { font-family: var(--serif-ko); font-size: clamp(17px, 1.35vw, 21px); letter-spacing: -.035em; }
.index-nav i { position: absolute; top: 50%; right: 0; width: 18px; height: 1px; background: currentColor; opacity: 0; transform: scaleX(.25); transform-origin: right; transition: opacity .35s ease, transform .45s ease; }
.index-nav a:hover, .index-nav a:focus-visible, .index-nav a.is-active { padding-left: 7px; color: var(--ink); }
.index-nav a:hover i, .index-nav a:focus-visible i, .index-nav a.is-active i { opacity: .78; transform: scaleX(1); }
.index-signature { margin-top: auto; padding-top: 38px; color: rgba(36,35,33,.45); }

.ink-scroll, .scene { position: relative; width: 100%; background-color: transparent; }
.scene { isolation: isolate; }
.paper-grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .035; background: radial-gradient(ellipse at center, transparent 35%, rgba(82,64,45,.04)); }
.landscape { z-index: 10; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; }
.scene-copy, .work01-stage, .work02-layout, .concept-stage { z-index: 40; }
.eyebrow, .section-index, .project-link, .placeholder-kicker { font-family: var(--sans); font-size: clamp(11px, .8vw, 14px); font-weight: 500; letter-spacing: .22em; }
.project-link { position: relative; display: inline-flex; gap: 12px; margin-top: clamp(44px, 5.6vh, 58px); padding-bottom: 7px; text-decoration: none; }
.project-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s ease; }
.project-link:hover::after, .project-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* IA 01 — Intro */
.scene-intro { height: 148svh; overflow: clip; }
.landscape-intro { position: sticky; top: 0; height: 100svh; background-image: url("./assets/landscape/intro-ink.png"); -webkit-mask-image: linear-gradient(to bottom, #000 0 76%, rgba(0,0,0,.96) 84%, rgba(0,0,0,.58) 93%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0 76%, rgba(0,0,0,.96) 84%, rgba(0,0,0,.58) 93%, transparent 100%); }
.intro-copy { --logo-visual-offset: clamp(13px, 1.05vw, 18px); position: absolute; top: 27.5svh; left: 9.5vw; width: min(560px, 44vw); text-align: center; }
.intro-copy h1, .work-copy h2 { margin: 0; font-weight: 400; color: #292826; }
.intro-copy h1 { width: min(100%, clamp(312px, 23.4vw, 416px)); margin-inline: auto; line-height: 0; }
.intro-logo { width: 100%; height: auto; object-fit: contain; transform: translateX(5%); }
.intro-copy .eyebrow { margin: 30px 0 38px; font-size: clamp(12px, .92vw, 16px); letter-spacing: .28em; }
.intro-copy .lede { margin: 0; font-family: var(--serif-ko); font-size: clamp(14px, 1.02vw, 18px); line-height: 1.95; color: var(--ink-soft); }
.intro-copy .eyebrow, .intro-copy .lede { transform: translateX(calc(var(--logo-visual-offset) * -1)); text-shadow: 0 0 2px rgba(241,233,225,.98), 0 0 7px rgba(241,233,225,.92), 0 0 15px rgba(241,233,225,.74), 0 0 25px rgba(241,233,225,.48); }
.scroll-cue { position: fixed; left: 50%; bottom: clamp(24px, 4.2svh, 44px); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 9px; color: rgba(36,35,33,.76); transform: translate3d(-50%, 0, 0); will-change: opacity, transform, filter; pointer-events: none; }
.scroll-cue span { font-family: var(--sans); font-size: clamp(10px, .72vw, 12px); font-weight: 500; letter-spacing: .18em; text-indent: .18em; }
.scroll-cue img { width: clamp(32px, 2.4vw, 44px); height: auto; opacity: .5; animation: scroll-cue-nudge 2.2s ease-in-out infinite; }
@keyframes scroll-cue-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
html.js .landscape-intro { opacity: .35; filter: blur(7px); transform: scale(1.008); transition: opacity 3.6s ease, filter 4.4s ease, transform 4.4s ease; }
html.js .scene-intro.is-entered .landscape-intro { opacity: 1; filter: none; transform: none; }
html.js .intro-copy { opacity: 0; filter: blur(7px); transform: translateY(12px); transition: opacity 3.75s .7s ease, filter 4.2s .7s ease, transform 3.75s .7s ease; }
html.js .scene-intro.is-entered .intro-copy { opacity: 1; filter: none; transform: none; }

/* Ink-scroll breathing spaces */
.mist-transition { position: relative; z-index: 35; height: 112svh; margin: -34svh 0 -28svh; overflow: visible; pointer-events: none; background: transparent; }
.mist-transition::before, .mist-transition::after { content: ""; position: absolute; inset: -12% -10%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); }
.mist-transition::before { background: radial-gradient(ellipse at 28% 46%, rgba(var(--paper-rgb),.72) 0 17%, rgba(216,204,190,.38) 38%, transparent 69%), radial-gradient(ellipse at 74% 54%, rgba(var(--paper-rgb),.68) 0 19%, rgba(218,205,191,.34) 42%, transparent 72%); filter: blur(26px); }
.mist-transition::after { inset: 3% -14%; opacity: .56; background: radial-gradient(ellipse at 50% 48%, rgba(var(--paper-rgb),.72) 0 14%, rgba(215,203,189,.28) 42%, transparent 72%); filter: blur(42px); }
.mist-transition-water { height: 132svh; margin-top: -40svh; margin-bottom: -38svh; }
.mist-transition-water::before { background: radial-gradient(ellipse at 20% 48%, rgba(var(--paper-rgb),.68) 0 16%, rgba(215,203,189,.32) 40%, transparent 70%), radial-gradient(ellipse at 66% 54%, rgba(var(--paper-rgb),.72) 0 20%, rgba(218,206,192,.3) 45%, transparent 76%), radial-gradient(ellipse at 96% 40%, rgba(var(--paper-rgb),.62), transparent 58%); }
.mist-transition-quiet { height: 138svh; margin-top: -44svh; margin-bottom: -40svh; }
.mist-transition-concept { height: 112svh; margin-top: -38svh; margin-bottom: -34svh; }
.mist-transition-concept::before { background: radial-gradient(ellipse at 30% 48%, rgba(var(--paper-rgb),.7) 0 18%, rgba(216,204,190,.31) 43%, transparent 73%), radial-gradient(ellipse at 82% 53%, rgba(var(--paper-rgb),.68) 0 20%, rgba(218,206,192,.28) 44%, transparent 74%); }

/* IA 02 — Work 01 */
.scene-work-01 { min-height: 326svh; overflow: clip; }
.landscape-slot { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.landscape-valley, .landscape-water { position: sticky; top: 0; height: 100svh; -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.72) 9%, #000 18% 81%, rgba(0,0,0,.64) 92%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.72) 9%, #000 18% 81%, rgba(0,0,0,.64) 92%, transparent 100%); }
.landscape-valley { background-image: url("./assets/landscape/work01-valley-v2.png"); }
.work01-stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 46% 54%; align-items: center; }
.work-copy { position: relative; max-width: 620px; }
.work01-copy { --copy-shift: -3.5svh; margin-left: 12.5vw; transform: translateY(var(--copy-shift)); }
.work-copy h2 { margin-top: clamp(40px, 5.1vh, 52px); font-family: var(--serif-ko); font-size: clamp(32px, 3.2vw, 58px); line-height: 1.2; letter-spacing: -.055em; white-space: nowrap; }
.work-copy > p:not(.section-index) { margin: clamp(24px, 3.2vh, 32px) 0 0; font-family: var(--serif-ko); font-size: clamp(14px, 1vw, 17px); line-height: 1.8; color: var(--ink-soft); }
.work01-copy h2 { margin-top: clamp(30px, 3.8vh, 40px); }
.work01-copy > p:not(.section-index) { margin-top: clamp(18px, 2.2vh, 24px); }
.work01-copy .project-link { margin-top: clamp(34px, 4.2vh, 44px); }
.artwork-viewport { position: relative; justify-self: center; width: min(51.7vw, 68svh, 724px); height: auto; aspect-ratio: 1100 / 1430; margin: 0; overflow: hidden; isolation: isolate; }
.artwork-track { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 18svh; will-change: transform; }
.artwork-frame { position: relative; flex: 0 0 100%; margin: 0; background: transparent; }
.artwork-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.artwork-frame:first-child img { transform: scale(.855); transform-origin: center; }
.artwork-fog, .product-fog { position: absolute; z-index: 3; pointer-events: none; }
.artwork-fog { left: 7%; right: 7%; bottom: -3%; height: 25%; opacity: .88; filter: blur(15px); background: radial-gradient(ellipse at 50% 100%, rgba(var(--paper-rgb),.96) 0 18%, rgba(var(--paper-rgb),.72) 40%, rgba(var(--paper-rgb),.26) 66%, transparent 84%); -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 0 34%, rgba(0,0,0,.72) 54%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 100%, #000 0 34%, rgba(0,0,0,.72) 54%, transparent 80%); }

/* Selected web works */
.scene-work-sskr, .scene-work-02 { min-height: 326svh; overflow: clip; }
.landscape-water { background-image: url("./assets/landscape/work02-water.png"); }
.work02-layout { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 46% 54%; align-items: center; }
.work02-copy { --copy-shift: -3.5svh; margin-left: 11.5vw; transform: translateY(var(--copy-shift)); }
.work02-copy h2 { margin-top: clamp(38px, 4.8vh, 50px); font-family: var(--serif-en); font-size: clamp(54px, 4.2vw, 72px); line-height: .95; letter-spacing: -.045em; }
.product-viewport { position: relative; justify-self: start; width: min(46.8vw, 792px); height: min(86.4svh, 816px); margin: 0 0 0 3vw; overflow: hidden; isolation: isolate; }
.product-track { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 18svh; will-change: transform; }
.product-frame { position: relative; flex: 0 0 100%; margin: 0; overflow: visible; background: transparent; }
.product-frame img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: contain; }
.product-fog { display: none; }
.sskr-viewport { width: min(52vw, 900px); height: min(78svh, 760px); margin-left: 1vw; }
.sskr-viewport .product-frame { overflow: hidden; }

/* IA 04 — Character concept arts: a central procession through a living chochungdo garden. */
.scene-concept { min-height: 650svh; overflow: clip; }
.concept-landscape-slot { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.concept-landscape { position: sticky; top: 0; width: 100%; height: 100svh; background-image: url("./assets/landscape/concept-chochungdo.png"); background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.76) 8%, #000 16% 84%, rgba(0,0,0,.68) 93%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.76) 8%, #000 16% 84%, rgba(0,0,0,.68) 93%, transparent 100%); }
.concept-stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; }
.concept-copy { --copy-shift: 0px; position: absolute; top: clamp(118px, 14svh, 154px); right: clamp(54px, 6.4vw, 110px); z-index: 4; width: min(390px, 28vw); text-align: right; pointer-events: none; will-change: opacity, transform, filter; }
.concept-copy h2 { margin: clamp(24px, 3.2vh, 34px) 0 0; color: #292826; font-family: var(--serif-en); font-size: clamp(48px, 4.4vw, 76px); font-weight: 400; line-height: .82; letter-spacing: -.05em; }
.concept-copy > p:not(.section-index) { margin: clamp(22px, 2.8vh, 30px) 0 0; color: var(--ink-soft); font-family: var(--serif-ko); font-size: clamp(13px, .92vw, 16px); line-height: 1.7; }
.concept-viewport { position: relative; z-index: 3; width: min(71vw, 1160px); height: min(83svh, 830px); overflow: hidden; isolation: isolate; will-change: opacity, transform, filter; }
.concept-track { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 18svh; will-change: transform; }
.concept-frame { position: relative; flex: 0 0 100%; margin: 0; display: grid; place-items: center; background: transparent; }
.concept-frame img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; filter: drop-shadow(0 18px 25px rgba(37,31,25,.11)); }
.concept-frame-portrait img { max-width: min(63vw, 920px); max-height: 70%; }
.concept-frame-sheet img { max-width: min(68vw, 1010px); max-height: 70%; }
.concept-frame-landscape img { width: 100%; }

/* IA 05 — Game design: a pinned title over four softly snapping chapters. */
.scene-design { --design-header-h: clamp(158px, 23svh, 210px); padding: clamp(104px, 14svh, 150px) var(--page-x) clamp(190px, 25svh, 280px); overflow: clip; background: radial-gradient(ellipse at 16% 10%, rgba(67,74,73,.045), transparent 30%), radial-gradient(ellipse at 24% 82%, rgba(57,61,63,.05), transparent 31%); }
.scene-design::before, .scene-design::after { content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: .13; filter: blur(1px); background-repeat: no-repeat; background-size: contain; }
.scene-design::before { display: none; }
.scene-design::after { bottom: 4%; left: -7%; width: 60vw; height: 32vw; background-image: radial-gradient(ellipse at 50% 70%, rgba(39,46,48,.32), transparent 63%); transform: rotate(4deg); }
.design-intro { position: sticky; top: 0; z-index: 45; width: min(1320px, 91vw); height: var(--design-header-h); margin-inline: auto; padding-top: clamp(30px, 4.4svh, 48px); display: grid; align-content: start; pointer-events: none; }
.design-intro::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(var(--paper-rgb),.98) 0 66%, rgba(var(--paper-rgb),.88) 78%, rgba(var(--paper-rgb),0) 100%); }
.design-intro .section-index { transition: opacity .24s ease, transform .28s ease; }
.design-intro.is-design-stuck .section-index { opacity: 0; transform: translateY(-10px); }
.design-intro h2 { margin: clamp(18px, 2.2svh, 25px) 0 0; font-family: var(--serif-en); font-size: clamp(58px, 6.4vw, 108px); font-weight: 400; line-height: .78; letter-spacing: -.055em; white-space: nowrap; }
.design-intro-detail { width: min(1180px, 84vw); min-height: 70svh; margin-inline: auto; display: grid; align-content: center; }
.design-intro-detail > p { margin: 0; color: var(--ink-soft); font-family: var(--serif-ko); font-size: clamp(15px, 1.12vw, 19px); line-height: 1.95; }
.design-sequence { margin-top: clamp(50px, 7svh, 78px); display: flex; align-items: center; gap: clamp(12px, 1.5vw, 25px); color: rgba(36,35,33,.58); font-size: 10px; font-weight: 600; letter-spacing: .2em; }
.design-sequence i { width: clamp(28px, 4vw, 72px); height: 1px; background: currentColor; opacity: .32; }
.design-chapter { position: relative; width: min(1320px, 91vw); min-height: 105svh; margin: clamp(110px, 17svh, 190px) auto 0; padding-top: 1px; scroll-margin-top: calc(var(--design-header-h) + 3svh); scroll-snap-align: start; scroll-snap-stop: normal; }
.design-chapter-copy { position: relative; z-index: 6; width: min(600px, 48vw); }
.design-count { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .23em; }
.design-chapter h3 { margin: 26px 0 0; font-family: var(--serif-en); font-size: clamp(58px, 6vw, 105px); font-weight: 400; line-height: .86; letter-spacing: -.045em; }
.design-lede { margin: 30px 0 0; font-family: var(--serif-ko); font-size: clamp(15px, 1.06vw, 18px); line-height: 1.75; }
.design-body { margin: 20px 0 0; color: var(--ink-soft); font-size: clamp(13px, .88vw, 15px); line-height: 1.9; }
.system-document-pages { position: relative; width: min(1240px, 88vw); margin: clamp(66px, 9svh, 100px) auto 0; padding: clamp(28px, 3.2vw, 48px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 3vw, 46px) clamp(20px, 2.4vw, 36px); border: 1px solid rgba(37,43,44,.18); background: rgba(224,218,208,.3); box-shadow: inset 0 0 90px rgba(37,43,44,.035), 0 30px 80px rgba(37,34,29,.08); }
.system-document-pages::before { content: ""; position: absolute; inset: 0; opacity: .23; pointer-events: none; background-image: linear-gradient(rgba(48,55,57,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(48,55,57,.12) 1px, transparent 1px); background-size: 42px 42px; }
.system-document-board-head { position: relative; z-index: 1; grid-column: 1 / -1; padding-bottom: 15px; display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(37,43,44,.42); color: rgba(36,35,33,.68); font-size: 9px; font-weight: 600; letter-spacing: .17em; }
.system-document-board-head a { color: inherit; text-decoration: none; transition: color .2s ease; }
.system-document-board-head a:hover { color: var(--ink); }
.system-document-page { position: relative; z-index: 1; min-width: 0; margin: 0; }
.system-document-page a { display: block; color: inherit; }
.system-document-page img { display: block; width: 100%; height: auto; border: 1px solid rgba(43,48,49,.2); background: #f2eee5; box-shadow: 0 18px 42px rgba(37,34,29,.12); transition: transform .28s ease, box-shadow .28s ease; }
.system-document-page a:hover img { transform: translateY(-3px); box-shadow: 0 24px 50px rgba(37,34,29,.16); }
.system-document-page figcaption { margin-top: 10px; color: rgba(36,35,33,.58); font-size: 8px; font-weight: 600; letter-spacing: .16em; }
.system-document-source-link { position: relative; z-index: 1; grid-column: 1 / -1; justify-self: end; padding: 12px 0 4px; color: rgba(36,35,33,.76); border-bottom: 1px solid currentColor; font-family: var(--serif-ko); font-size: 13px; text-decoration: none; transition: color .2s ease; }
.system-document-source-link span { display: inline-block; margin-left: 12px; transition: transform .2s ease; }
.system-document-source-link:hover { color: var(--ink); }
.system-document-source-link:hover span { transform: translateX(4px); }
.design-experience .design-chapter-copy, .design-motion .design-chapter-copy { margin-left: auto; text-align: right; }
.ui-workboard { position: relative; width: min(1180px, 88vw); min-height: 950px; margin: clamp(72px, 10svh, 112px) auto 0; border: 1px solid rgba(37,43,44,.18); background: rgba(224,218,208,.34); box-shadow: inset 0 0 90px rgba(37,43,44,.035); }
.ui-workboard::before { content: ""; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(48,55,57,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(48,55,57,.12) 1px, transparent 1px); background-size: 44px 44px; }
.workboard-label { position: absolute; top: 30px; left: 36px; display: grid; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: .18em; }
.workboard-label small { color: rgba(36,35,33,.45); font-size: 8px; }
.ui-screen { position: absolute; z-index: 1; width: 47%; margin: 0; }
.ui-screen figcaption { margin-bottom: 9px; font-size: 8px; font-weight: 600; letter-spacing: .16em; }
.ui-screen-home { top: 100px; left: 4.5%; }
.ui-screen-unit { top: 176px; right: 4%; }
.ui-screen-member { top: 518px; left: 7%; }
.ui-screen-skill { top: 592px; right: 3%; }
.ui-embed { height: 300px; overflow: hidden; display: grid; place-items: center; background: #fff; border: 1px solid rgba(32,37,39,.18); box-shadow: 0 18px 38px rgba(37,34,29,.12); }
.ui-embed img { width: 100%; height: 100%; object-fit: contain; }
.design-skill .design-chapter-copy { width: min(680px, 54vw); }
.skill-sheet-overview { margin-top: clamp(70px, 9svh, 105px); }
.skill-sheet-overview > p { margin: 0 0 18px; display: flex; justify-content: center; gap: clamp(9px, 1.3vw, 22px); color: rgba(36,35,33,.58); font-size: 9px; font-weight: 600; letter-spacing: .13em; }
.skill-sheet-overview > p span { opacity: .35; }
.skill-sheet-overview a { display: block; overflow: hidden; border: 1px solid rgba(37,42,42,.16); box-shadow: 0 24px 70px rgba(37,34,29,.12); }
.skill-sheet-overview img { width: 100%; transition: transform .8s cubic-bezier(.2,.75,.18,1); }
.skill-sheet-overview a:hover img { transform: scale(1.015); }
.skill-cases { margin-top: clamp(70px, 10svh, 120px); display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.skill-case { margin: 0; }
.skill-case > div { margin-bottom: 20px; }
.skill-case span, .motion-meta span { font-size: 8px; font-weight: 600; letter-spacing: .18em; }
.skill-case h4, .motion-meta h4 { margin: 8px 0 0; font-family: var(--serif-en); font-size: clamp(32px, 3vw, 52px); font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.skill-case p, .motion-meta p { margin: 8px 0 0; color: var(--ink-soft); font-size: 11px; letter-spacing: .06em; }
.skill-case > img, .skill-case a { width: 100%; display: block; border: 1px solid rgba(37,42,42,.15); box-shadow: 0 20px 50px rgba(37,34,29,.1); }
.skill-case-remove { margin-top: 12svh; }
.skill-case-remove h4 { font-size: clamp(26px, 2.2vw, 38px); }
.motion-case { margin-top: clamp(80px, 12svh, 140px); display: grid; grid-template-columns: minmax(180px, .28fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 78px); align-items: start; }
.motion-meta { position: sticky; top: 20svh; padding-top: 14px; border-top: 1px solid rgba(36,35,33,.28); }
.storyboard-frame { position: relative; display: block; overflow: hidden; color: #fff; background: #1e2021; box-shadow: 0 28px 80px rgba(27,28,29,.18); }
.storyboard-frame img { width: 100%; transition: transform .8s cubic-bezier(.2,.75,.18,1), filter .6s ease; }
.storyboard-frame > span { position: absolute; right: 18px; bottom: 16px; padding: 9px 12px; color: #fff; background: rgba(22,24,25,.74); backdrop-filter: blur(6px); font-size: 8px; font-weight: 600; letter-spacing: .13em; opacity: .72; transition: opacity .35s ease; }
.storyboard-frame:hover img { transform: scale(1.012); }
.storyboard-frame:hover > span { opacity: 1; }
.motion-towa { grid-template-columns: minmax(180px, .38fr) minmax(360px, .62fr); width: min(980px, 76vw); margin-left: auto; }
.storyboard-portrait { width: min(100%, 640px); justify-self: end; }
.design-reveal { opacity: 1; filter: none; transform: none; }

/* Later IA placeholders remain deliberately quiet until their style frames exist. */
.scene-placeholder { min-height: 118svh; display: grid; place-content: center; padding: var(--page-x); text-align: center; color: rgba(36,35,33,.68); }
.scene-placeholder h2 { margin: 28px 0 0; font-family: var(--serif-en); font-size: clamp(44px, 5.4vw, 82px); font-weight: 400; line-height: 1; letter-spacing: -.04em; }
.placeholder-note { margin: 28px 0 0; font-size: 10px; font-weight: 600; letter-spacing: .25em; color: rgba(36,35,33,.4); }
.scene-about { min-height: 140svh; background: radial-gradient(ellipse at 50% 74%, rgba(71,76,72,.055), transparent 42%), linear-gradient(to bottom, transparent, rgba(56,60,57,.028)); }

@media (max-width: 900px) {
  :root { --page-x: clamp(22px, 6vw, 42px); --mobile-header-h: 76px; --concept-paper-rgb: 232, 211, 171; }
  html { overflow-x: clip; scrollbar-gutter: auto; scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
  .artwork-viewport, .work01-copy, .product-viewport, .work02-copy, .concept-viewport, .concept-copy {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .global-header { height: 76px; padding-inline: var(--page-x); }
  .brand { width: 110px; height: 76px; }
  .scene-intro { height: 125svh; }
  .landscape-intro { width: 100vw; max-width: none; background-position: 61% center; }
  .intro-copy { --logo-visual-offset: 0px; top: 24svh; left: 0; right: 0; width: min(88vw, 520px); margin-inline: auto; }
  .intro-copy h1 { font-size: clamp(58px, 16vw, 80px); }
  .scroll-cue { bottom: 24px; gap: 7px; }
  .mist-transition { height: 74svh; margin: -18svh 0 -14svh; }
  .mist-transition-water { height: 86svh; margin-top: -22svh; margin-bottom: -18svh; }
  .scene-work-01, .scene-work-sskr, .scene-work-02 { min-height: auto; padding: calc(22svh - var(--mobile-header-h)) 0 22svh; overflow: visible; }
  .landscape-slot { position: absolute; inset: calc(22svh - var(--mobile-header-h)) 0 30svh; }
  .landscape-valley, .landscape-water { position: sticky; top: 0; height: var(--mobile-copy-height, 262px); overflow: visible; -webkit-mask-image: none; mask-image: none; background-image: none; }
  .landscape-valley::before, .landscape-water::before, .concept-landscape::before { content: ""; position: absolute; inset: 0 0 auto; width: 100%; height: 130svh; background-position: center top; background-repeat: no-repeat; background-size: auto 130svh; -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.18) 4%, rgba(0,0,0,.72) 10%, #000 16% 86%, rgba(0,0,0,.72) 91%, rgba(0,0,0,.18) 96%, transparent 98% 100%); mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.18) 4%, rgba(0,0,0,.72) 10%, #000 16% 86%, rgba(0,0,0,.72) 91%, rgba(0,0,0,.18) 96%, transparent 98% 100%); }
  .landscape-valley::before { background-image: url("./assets/landscape/mobile/work01-valley-mobile-extended.webp"); }
  .landscape-water::before { background-image: url("./assets/landscape/mobile/work02-water-mobile-extended.webp"); }
  .work01-stage, .work02-layout { position: relative; height: auto; display: block; padding: 0 var(--page-x); }
  .work01-copy, .work02-copy { position: sticky; top: 0; z-index: 55; width: calc(100% + var(--page-x) + var(--page-x)); max-width: none; margin: 0 calc(0px - var(--page-x)) 8svh; padding: var(--mobile-header-h) var(--page-x) 28px; transform: none; background: linear-gradient(to bottom, rgba(var(--paper-rgb),.96) 0 76%, rgba(var(--paper-rgb),0) 100%); }
  .work01-copy::before, .work02-copy::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18svh; pointer-events: none; background: linear-gradient(to bottom, rgba(var(--paper-rgb),0), rgba(var(--paper-rgb),.96)); }
  .work-copy .section-index, .concept-copy .section-index { margin: 0; line-height: 1.2; transition: opacity .2s ease, transform .24s ease; }
  .work-copy.is-mobile-stuck .section-index, .concept-copy.is-mobile-stuck .section-index { opacity: 0; transform: translateY(-14px); }
  .work-copy h2 { margin-top: 20px; white-space: normal; }
  .work-copy > p:not(.section-index) { margin-top: 12px; }
  .work01-copy > p:not(.section-index) { margin-top: 10px; }
  .work-copy .project-link { margin-top: 22px; }
  .work01-copy .project-link { margin-top: 17px; }
  .artwork-viewport { z-index: 30; width: min(94%, 724px); height: auto; margin: 0 auto; overflow: visible; }
  .artwork-track { position: relative; display: grid; gap: 10svh; transform: none !important; }
  .artwork-frame { aspect-ratio: 1100 / 1430; }
  .artwork-fog { display: none; }
  .product-viewport { z-index: 30; width: min(88vw, 620px); height: auto; margin: 0 auto; overflow: visible; }
  .product-track { position: relative; display: grid; gap: 10svh; transform: none !important; }
  .product-frame { aspect-ratio: 1 / 1.08; }
  .sskr-viewport { width: min(92vw, 680px); }
  .sskr-viewport .product-frame { aspect-ratio: 1627 / 1231; }
  .mist-transition-concept { height: 82svh; margin-top: -22svh; margin-bottom: -18svh; }
  .scene-concept { min-height: auto; padding: calc(18svh - var(--mobile-header-h)) 0 22svh; overflow: visible; }
  .concept-landscape-slot { position: absolute; inset: calc(18svh - var(--mobile-header-h)) 0 30svh; }
  .concept-landscape { position: sticky; top: 0; height: var(--mobile-copy-height, 241px); overflow: visible; background-image: none; -webkit-mask-image: none; mask-image: none; }
  .concept-landscape::before { background-image: url("./assets/landscape/mobile/concept-chochungdo-mobile-extended.webp"); }
  .concept-stage { position: relative; height: auto; display: block; padding: 0 var(--page-x); }
  .concept-copy { position: sticky; top: 0; right: auto; z-index: 55; width: calc(100% + var(--page-x) + var(--page-x)); margin: 0 calc(0px - var(--page-x)) 8svh; padding: var(--mobile-header-h) var(--page-x) 28px; text-align: right; transform: none !important; background: linear-gradient(to bottom, rgba(var(--concept-paper-rgb),.97) 0 76%, rgba(var(--concept-paper-rgb),0) 100%); }
  .concept-copy::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18svh; pointer-events: none; background: linear-gradient(to bottom, rgba(var(--concept-paper-rgb),0), rgba(var(--concept-paper-rgb),.97)); }
  .concept-copy h2 { margin-top: 12px; font-size: clamp(48px, 12vw, 70px); }
  .concept-copy > p:not(.section-index) { margin-top: 11px; }
  .concept-viewport { z-index: 30; width: 100%; height: auto; overflow: visible; }
  .concept-track { position: relative; display: grid; gap: 8svh; transform: none !important; }
  .concept-frame { min-height: 124svh; display: block; }
  .concept-frame img, .concept-frame-portrait img, .concept-frame-sheet img, .concept-frame-landscape img { position: sticky; top: 50svh; width: auto; max-width: 100%; max-height: 78svh; margin-inline: auto; object-fit: contain; transform: translateY(-50%); }
  .scene-design { --design-header-h: 150px; padding: 12svh var(--page-x) 24svh; overflow: clip; }
  .design-intro { width: calc(100% + var(--page-x) * 2); height: var(--design-header-h); margin-inline: calc(var(--page-x) * -1); padding: 72px var(--page-x) 22px; align-content: end; }
  .design-intro .section-index { display: none; }
  .design-intro h2 { margin: 0; font-size: clamp(31px, 8.8vw, 43px); line-height: .9; white-space: nowrap; }
  .design-intro-detail { width: 100%; min-height: 68svh; }
  .design-intro-detail > p br { display: none; }
  .design-sequence { gap: 8px; }
  .design-sequence i { flex: 1; min-width: 8px; }
  .design-chapter { width: 100%; min-height: 112svh; margin-top: 18svh; scroll-margin-top: calc(var(--design-header-h) + 2svh); }
  .design-chapter-copy, .design-skill .design-chapter-copy, .design-experience .design-chapter-copy, .design-motion .design-chapter-copy { width: 100%; margin-left: 0; text-align: left; }
  .design-chapter h3 { font-size: clamp(52px, 15vw, 76px); }
  .system-document-pages { width: 100%; margin-top: 8svh; padding: 24px 14px 28px; grid-template-columns: 1fr; gap: 28px; }
  .system-document-board-head { padding-inline: 4px; align-items: flex-start; flex-direction: column; gap: 8px; line-height: 1.55; }
  .system-document-page figcaption { margin-left: 4px; }
  .system-document-source-link { justify-self: start; margin-left: 4px; }
  .ui-workboard { width: 100%; min-height: auto; margin-top: 8svh; padding: 92px 16px 26px; display: grid; gap: 34px; }
  .workboard-label { top: 28px; left: 22px; }
  .ui-screen { position: relative; inset: auto; width: 100%; }
  .ui-embed { height: 230px; }
  .skill-sheet-overview { margin-top: 8svh; width: calc(100% + var(--page-x) * 2); margin-left: calc(var(--page-x) * -1); overflow-x: auto; padding: 0 var(--page-x) 16px; }
  .skill-sheet-overview > p { width: max-content; justify-content: flex-start; }
  .skill-sheet-overview a { width: 820px; max-width: none; }
  .skill-cases { margin-top: 10svh; grid-template-columns: 1fr; gap: 12svh; }
  .skill-case-remove { margin-top: 0; }
  .motion-case, .motion-towa { width: 100%; margin-top: 11svh; display: grid; grid-template-columns: 1fr; gap: 24px; }
  .motion-meta { position: static; }
  .storyboard-frame, .storyboard-portrait { width: calc(100% + var(--page-x) * 2); max-width: none; margin-left: calc(var(--page-x) * -1); }
  .storyboard-frame > span { right: 10px; bottom: 10px; }
}

@media (max-width: 620px) {
  .brand { width: 87.5px; height: 58px; }
  .brand img { opacity: .62; filter: invert(55%) sepia(28%) saturate(570%) hue-rotate(354deg) brightness(86%) contrast(82%); mix-blend-mode: normal; }
  .menu-mark { width: 27px; }
  .intro-copy .eyebrow { margin: 24px 0 30px; }
  .intro-copy .lede { font-size: 14px; }
  .work-copy h2 { font-size: clamp(36px, 10.5vw, 48px); }
  .work02-copy h2 { font-size: clamp(52px, 15vw, 68px); }
  .product-viewport { width: min(92vw, 620px); }
  .site-index { width: min(390px, 92vw); padding-inline: 30px; }
  .index-nav a { min-height: 56px; }
  .index-label { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .landscape-intro, .intro-copy, .artwork-viewport, .work01-copy, .product-viewport, .work02-copy, .concept-viewport, .concept-copy { opacity: 1 !important; filter: none !important; transform: none !important; }
}