/* FORM STUDIO — 폼스튜디오 (순수 흑백 · 서체 1종 · 웨이트 400 단일 · 4열 관통 그리드)
   사용: <link rel="stylesheet" href="tokens.css"> 후 var(--fs-*) 참조.
   값의 정본은 tokens.json — GENERATED 구역은 손으로 고치지 않는다. */

/* >>> GENERATED by tools/ds-tokens.py — 손으로 고치지 마세요. 값은 tokens.json <<< */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300&display=swap");
@font-face { font-family:"Halenoir"; font-weight:400; src:url("fonts/HalenoirExpanded-Regular.otf") format('opentype'); font-display:swap; }
@font-face { font-family:"Halenoir"; font-weight:500; src:url("fonts/HalenoirExpanded-Medium.otf") format('opentype'); font-display:swap; }
@font-face { font-family:"Halenoir"; font-weight:600; src:url("fonts/HalenoirExpanded-DemiBold.otf") format('opentype'); font-display:swap; }
@font-face { font-family:"Pretendard"; font-weight:400; src:url("fonts/Pretendard-Regular.otf") format('opentype'); font-display:swap; }
@font-face { font-family:"Pretendard"; font-weight:600; src:url("fonts/Pretendard-SemiBold.otf") format('opentype'); font-display:swap; }

:root {
  /* palette — color + colorDerived + colorState (웹 화이트리스트의 정본) */
  --fs-paper: #FFFFFF;
  --fs-ink: #000000;
  --fs-grid: #E8E8E8;
  --fs-grid-ink: #00000026;
  --fs-grid-paper: #FFFFFF26;
  --fs-tint: #0000001A;

  /* type family */
  --fs-font-en: 'Halenoir', sans-serif;
  --fs-font-kr: 'Pretendard', sans-serif;
  --fs-font-serif: 'Newsreader', serif;

  /* type scale (web) */
  --fs-text-wordmark: 28vw;
  --fs-text-wordmark-fluid: clamp(32px, 28cqi, 640px);
  --fs-text-display-xl: 400px;
  --fs-text-display: 200px;
  --fs-text-body: 30px;
  --fs-text-serif: 33px;
  --fs-text-label: 12px;
  --fs-text-hero: clamp(96px, 19vw, 448px);
  --fs-text-disp: clamp(56px, 11vw, 200px);
  --fs-text-lead: clamp(21px, 2.0vw, 33px);
  --fs-text-row: clamp(14px, 1.12vw, 18px);
  --fs-text-micro: clamp(10.5px, .8vw, 12.5px);

  /* spacing */
  --fs-side: 20px;
  --fs-space-u1: 4px;
  --fs-space-u2: 5px;
  --fs-space-u3: 10px;
  --fs-space-u4: 15px;
  --fs-space-u5: 40px;
  --fs-space-u6: 80px;
  --fs-space-section-sm: 60px;
  --fs-space-section-md: 120px;
  --fs-space-section-top: 175px;
  --fs-space-section-hero: 240px;
  --fs-space-g1: 10px;
  --fs-space-g2: 15px;
  --fs-space-g3: clamp(24px,2.5vw,40px);
  --fs-space-g4: clamp(40px,5vw,80px);
  --fs-space-gutter: clamp(14px, 1.25vw, 20px);

  /* radius */
  --fs-radius: 0;
  --fs-radius-mask: 40px;
  --fs-radius-pin: 50%;

  /* line-height */
  --fs-lh-display: .8em;
  --fs-lh-body: 1.1em;
  --fs-lh-label: 1.12em;
  --fs-lh-serif: 1.15em;
  --fs-lh-label-wide: 1.25em;
  --fs-lh-base: 1.2em;

  /* paragraph spacing */
  --fs-para-display: 40px;
  --fs-para-body: 30px;
  --fs-para-serif: 20px;
  --fs-para-label: 12px;

  /* etc */
  --fs-ls-tight: -.02em;
  --fs-ls-lead: .01em;
  --fs-ls-micro: .02em;
  --fs-ls-body: .01em;
  --fs-ls-label: .02em;
  --fs-ls-serif: 0;
  --fs-grid-cols: 4;
  --fs-grid-step: 25.01%;
  --fs-grid-alpha: .15;
  --fs-ease: cubic-bezier(.22,1,.36,1);
  --fs-dur-hover: .6s;
  --fs-dur-nav: 420ms;
  --fs-dur-cursor: 500ms;
  --fs-cursor-size: 28px;
  --fs-cursor-scale-min: .2;
  --fs-cursor-scale-max: 1.4;
  --fs-cursor-velocity-k: .025;
  --fs-nav-h: 48px;
  --fs-nav-top: 15px;
  --fs-capsule-h: 41px;
  --fs-capsule-pad: 12px;
  --fs-capsule-line: 1px;
  --fs-capsule-mask: 51%;
  --fs-capsule-cap: 18%;
  --fs-hint-w: 108px;
  --fs-hint-arrow: 40px;
  --fs-hint-gap: 10px;
  --fs-hint-scale-sm: .32;
  --fs-glass-blur: 6px;
  --fs-glass-bright: 1.5;
  --fs-ratio-card: 1.5;
  --fs-scene-word-travel: 37vw;
  --fs-scene-media-min: 80vw;
  --fs-scene-media-mid: 90vw;
  --fs-scene-aperture-min: 100px;
  --fs-scene-aperture-max: 150vmax;
  --fs-scene-h-ratio: .46;
  --fs-z-guide: 0;
  --fs-z-nav: 9;
  --fs-z-cursor: 10;
}

@media (max-width:1199px) and (min-width:810px) {
  :root {
    --fs-text-display-xl: 280px;
    --fs-text-display: 140px;
    --fs-text-body: 24px;
    --fs-text-serif: 21px;
  }
}

@media (max-width:809px) {
  :root {
    --fs-text-display-xl: 200px;
    --fs-text-display: 65px;
    --fs-text-body: 24px;
    --fs-text-serif: 21px;
  }
}
/* <<< END GENERATED >>> */


/* ─────────────────────────────────────────────────────────────
   사이트 레인 컴포넌트 (formstudio.site 실측 구조)
   값은 전부 위 GENERATED 구역의 var(--fs-*) 를 소비한다. hex 직접 타이핑 금지.
   교안(deck) 레인은 이 클래스들을 쓰지 않는다 — 타입 토큰이 다르다.
   ───────────────────────────────────────────────────────────── */

/* 면 — 라이트가 기본, .fs-dark 로 뒤집는다. 뒤집히면 그리드선도 같이 뒤집힌다. */
.fs-page      { background: var(--fs-paper); color: var(--fs-ink);
                font-family: var(--fs-font-en); font-weight: 400; }
.fs-dark      { background: var(--fs-ink); color: var(--fs-paper); }

/* 4열 관통 가이드 — 요소가 아니라 배경 그라디언트다(사이트 실측 메커니즘).
   25.01% 인 이유: 25% 면 반올림으로 5번째 선이 생긴다. */
.fs-guide     { background-image: linear-gradient(90deg, var(--fs-grid-ink) 1px, transparent 1px);
                background-size: var(--fs-grid-step) 100%; background-repeat: repeat; }
.fs-dark .fs-guide,
.fs-guide.fs-on-dark
              { background-image: linear-gradient(90deg, var(--fs-grid-paper) 1px, transparent 1px); }

/* 4열 그리드 — 풀블리드 fluid. 태블릿 2열, 모바일 1열로 접힌다. */
.fs-grid4     { display: grid; grid-template-columns: repeat(4, minmax(1px, 1fr)); gap: 0; }
@media (max-width: 1199px) { .fs-grid4 { grid-template-columns: repeat(2, minmax(1px, 1fr)); } }
@media (max-width: 809px)  { .fs-grid4 { grid-template-columns: repeat(1, minmax(1px, 1fr)); } }

/* 타입 */
.fs-wordmark  { font-size: var(--fs-text-wordmark); line-height: var(--fs-lh-display);
                letter-spacing: var(--fs-ls-tight); text-transform: uppercase; }
.fs-display-xl{ font-size: var(--fs-text-display-xl); line-height: var(--fs-lh-display);
                letter-spacing: var(--fs-ls-tight); text-transform: uppercase; }
.fs-display   { font-size: var(--fs-text-display); line-height: var(--fs-lh-display);
                letter-spacing: var(--fs-ls-tight); text-transform: uppercase; }
.fs-body      { font-size: var(--fs-text-body); line-height: var(--fs-lh-body);
                letter-spacing: var(--fs-ls-body); text-transform: uppercase; }
.fs-label     { font-size: var(--fs-text-label); line-height: var(--fs-lh-label);
                letter-spacing: var(--fs-ls-label); text-transform: uppercase; }
.fs-serif     { font-family: var(--fs-font-serif); font-weight: 300;
                font-size: var(--fs-text-serif); line-height: var(--fs-lh-serif);
                letter-spacing: var(--fs-ls-serif); text-transform: none; }
.fs-ko        { font-family: var(--fs-font-kr); text-transform: none; letter-spacing: -.01em; }

/* 괄호 라벨 — 박스도 밑줄도 없이 괄호 하나로 '라벨이다'를 표시한다. */
.fs-bracket::before { content: "( "; }
.fs-bracket::after  { content: " )"; }

/* 괄호 라벨 4개가 곧 내비게이션 — 그리드 컬럼 시작점에 앉는다. */
.fs-colnav    { display: grid; grid-template-columns: repeat(4, minmax(1px, 1fr));
                padding: var(--fs-side); }
.fs-colnav a  { color: inherit; text-decoration: none; }

/* 미디어 프레임 — 사이트에서 40px 라운드를 쓰는 유일한 곳. */
.fs-frame     { border-radius: var(--fs-radius-mask); overflow: hidden; display: block; }
.fs-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-pin       { border-radius: var(--fs-radius-pin); width: 28px; height: 28px;
                background: var(--fs-paper); }

/* 밑면 색을 뚫는 마크 — 페이지당 2~3개만. */
.fs-blend     { mix-blend-mode: difference; color: var(--fs-paper); }

/* 좌 제목 / 우 메타 — 가운데를 비우는 것이 핵심. */
.fs-meta      { display: flex; justify-content: space-between; align-items: baseline;
                gap: var(--fs-space-u5); }

/* 인라인 하이라이트 — 테두리 대신 쓰는 유일한 면. */
.fs-tint      { background: var(--fs-tint); padding: .1em .2em; }

/* 가로 구분선 — 박스 테두리는 만들지 않는다. */
.fs-rule      { height: 1px; background: var(--fs-grid-ink); width: 100%; }
.fs-dark .fs-rule { background: var(--fs-grid-paper); }

/* 섹션 리듬 */
.fs-sec       { padding: var(--fs-space-u6) var(--fs-side) 0; }
.fs-sec-hero  { padding: var(--fs-space-section-top) var(--fs-side) var(--fs-space-u5); }
.fs-sec-tall  { padding: var(--fs-space-section-hero) var(--fs-side) var(--fs-space-section-md); }


/* ═════════════════════════════════════════════════════════════
   v2.1 · 인터랙션 레인 (formstudio.site 1363×936 호버·스크롤 실측)
   부품은 4개뿐이다 — 커서 · 괄호 내비 · 캡슐 · 호버 힌트.
   씬은 4개뿐이다 — showcase · gallery · stack · aperture.
   런타임은 fs-motion.js 가 --fs-p(진행률 0~1)와 상태 클래스만 넣고,
   보이는 계산은 전부 여기 CSS 에 있다.
   ═════════════════════════════════════════════════════════════ */

/* ── 1. 커서 — 기본 커서를 숨기고 28px 원 하나로 대체.
      크기는 호버가 아니라 **이동 속도**에 반응한다(fs-motion.js). ── */
.fs-cursor-on, .fs-cursor-on * { cursor: none; }   /* JS 가 조건 충족 시에만 붙인다 */
.fs-cursor    { position: fixed; top: 0; left: 0;
                width: var(--fs-cursor-size); height: var(--fs-cursor-size);
                margin: calc(var(--fs-cursor-size) / -2) 0 0 calc(var(--fs-cursor-size) / -2);
                border-radius: var(--fs-radius-pin);
                background: var(--fs-paper); mix-blend-mode: difference;
                pointer-events: none; z-index: var(--fs-z-cursor);
                opacity: 0;
                transform: translate3d(var(--fs-cx, -100px), var(--fs-cy, -100px), 0)
                           scale(var(--fs-cs, .2));
                transition: opacity var(--fs-dur-cursor) var(--fs-ease); }
.fs-cursor.is-live { opacity: 1; }
/* 링크·카드 위에서는 서서히 사라진다 — 힌트가 그 역할을 넘겨받기 때문 */
.fs-cursor.is-muted { opacity: 0; }

/* ── 1-b. 관통 가이드의 고정형 — 섹션마다 다시 그리는 것이 아니라 화면에 한 장 깔린다.
      그래서 스크롤해도 페이지 전체가 하나의 편집 시스템 안에 있는 것으로 읽힌다.
      difference 로 깔면 면이 뒤집힐 때 선이 **저절로** 뒤집힌다(섹션마다 클래스를 바꾸지 않는다).
      margin-left:-1px 은 첫 선을 화면 밖으로 밀어 좌측 끝에 선이 겹치지 않게 한다. ── */
.fs-guide-fixed { position: fixed; inset: 0; margin-left: -1px;
                pointer-events: none; z-index: var(--fs-z-guide);
                mix-blend-mode: difference;
                background-image: linear-gradient(90deg, var(--fs-grid-paper) 1px, transparent 1px);
                background-size: var(--fs-grid-step) 100%; background-repeat: repeat; }

/* ── 2. 상단 고정 내비 — ( F ) 가 호버에서 ( FORM ) 으로 가로 전개된다.
      글자를 교체하는 것이 아니라 **나머지 글자의 폭과 투명도를 함께 편다**.
      difference 라서 흰 면에선 검게, 검은 면에선 희게 자동 반전한다. ── */
.fs-topnav    { position: fixed; inset: 0 0 auto 0; height: var(--fs-nav-h);
                display: grid; grid-template-columns: repeat(4, minmax(1px, 1fr));
                padding: var(--fs-nav-top) 0 0;
                z-index: var(--fs-z-nav);
                mix-blend-mode: difference; color: var(--fs-paper); }
.fs-topnav a  { color: inherit; text-decoration: none; padding-left: var(--fs-side);
                justify-self: start; white-space: nowrap; }
.fs-navlink::before { content: "("; }
.fs-navlink::after  { content: ")"; }
.fs-nav-rest  { display: inline-grid; grid-template-columns: 0fr; opacity: 0;
                vertical-align: bottom;
                transition: grid-template-columns var(--fs-dur-nav) var(--fs-ease),
                            opacity var(--fs-dur-nav) var(--fs-ease); }
.fs-nav-rest > span { overflow: hidden; min-width: 0; }
.fs-navlink:hover .fs-nav-rest,
.fs-navlink:focus-visible .fs-nav-rest { grid-template-columns: 1fr; opacity: 1; }
.fs-navlink:focus-visible { outline: none; }
/* 모바일 2열 변형 — 4열이 접히면 내비도 같이 접힌다.
   높이를 48px 로 묶어 두면 두 번째 줄이 잘리므로 여기서만 auto 로 푼다. */
@media (max-width: 809px) {
  .fs-topnav  { grid-template-columns: repeat(2, minmax(1px, 1fr));
                height: auto; row-gap: var(--fs-space-u3);
                padding-bottom: var(--fs-nav-top); }
}

/* ── 3. 캡슐 링크 — 아웃라인을 좌·우 두 조각의 마스크 폭으로 그린다.
      기본 18% 면 양 끝만 남아 괄호처럼 보이고, 호버에서 51% 까지 자라
      가운데서 만나며 타원이 닫힌다. 마스크는 아웃라인 레이어에만 건다
      (요소 전체에 걸면 텍스트까지 잘린다). ── */
.fs-capsule   { position: relative; display: inline-flex; align-items: center;
                height: var(--fs-capsule-h); padding: 0 var(--fs-capsule-pad);
                background: none; color: inherit; text-decoration: none;
                font-size: var(--fs-text-body); line-height: 1;
                letter-spacing: var(--fs-ls-body); text-transform: uppercase;
                --fs-cap: var(--fs-capsule-cap); }
.fs-capsule::before {
                content: ""; position: absolute; inset: 0; pointer-events: none;
                border: var(--fs-capsule-line) solid currentColor;
                border-radius: var(--fs-radius-mask);
                -webkit-mask-image: linear-gradient(var(--fs-ink), var(--fs-ink)), linear-gradient(var(--fs-ink), var(--fs-ink));
                        mask-image: linear-gradient(var(--fs-ink), var(--fs-ink)), linear-gradient(var(--fs-ink), var(--fs-ink));
                -webkit-mask-position: left center, right center;
                        mask-position: left center, right center;
                -webkit-mask-repeat: no-repeat, no-repeat;
                        mask-repeat: no-repeat, no-repeat;
                -webkit-mask-size: var(--fs-cap) 100%, var(--fs-cap) 100%;
                        mask-size: var(--fs-cap) 100%, var(--fs-cap) 100%;
                transition: -webkit-mask-size var(--fs-dur-hover) var(--fs-ease),
                                    mask-size var(--fs-dur-hover) var(--fs-ease); }
.fs-capsule:hover, .fs-capsule:focus-visible { --fs-cap: var(--fs-capsule-mask); outline: none; }

/* ── 3-b. 이미지 자리를 대신하는 면 — 실제 산출물에서는 사진·영상으로 교체한다.
      **불투명해야 한다**: difference 블렌드와 backdrop-filter 는 둘 다 밑면을 읽어서
      계산하므로, 반투명 tint 만 깔면 밑면이 사실상 투명이라
      흰 글자는 흰 채로 남고 글래스 힌트는 아무것도 들어올리지 못한다.
      회색을 새로 만들지 않고 페이퍼 면 + 잉크 알파 2단으로만 쌓는다. ── */
.fs-surface   { background:
                repeating-linear-gradient(45deg, var(--fs-grid-ink) 0 1px, transparent 1px 14px),
                linear-gradient(var(--fs-tint), var(--fs-tint)),
                var(--fs-paper); }

/* ── 4. 호버 힌트 — [ VIEW ] + [ ↘ ]. 배경칠도 테두리도 없이
      backdrop-filter 로 밑면을 흐리게 들어올린다.
      **이미지는 확대하지도 어둡게 하지도 않는다** — 작품이 주인공이다. ── */
.fs-hint      { position: absolute; left: 50%; top: 50%;
                display: flex; align-items: center; gap: var(--fs-hint-gap);
                pointer-events: none; opacity: 0;
                transform: translate(-50%, -50%) scale(0);
                transition: transform var(--fs-dur-hover) var(--fs-ease),
                            opacity var(--fs-dur-hover) var(--fs-ease); }
.fs-hint-cap  { display: grid; place-items: center;
                width: var(--fs-hint-w); height: var(--fs-capsule-h);
                border-radius: var(--fs-radius-mask);
                font-size: var(--fs-text-body); line-height: 1;
                letter-spacing: var(--fs-ls-body); text-transform: uppercase;
                -webkit-backdrop-filter: blur(var(--fs-glass-blur)) brightness(var(--fs-glass-bright));
                        backdrop-filter: blur(var(--fs-glass-blur)) brightness(var(--fs-glass-bright)); }
.fs-hint-arrow{ display: grid; place-items: center;
                width: var(--fs-hint-arrow); height: var(--fs-hint-arrow);
                border-radius: var(--fs-radius-pin);
                font-size: var(--fs-text-body); line-height: 1;
                -webkit-backdrop-filter: blur(var(--fs-glass-blur)) brightness(var(--fs-glass-bright));
                        backdrop-filter: blur(var(--fs-glass-blur)) brightness(var(--fs-glass-bright)); }

/* 카드 — 힌트를 품는 미디어. 같은 부품을 크기만 바꿔 두 맥락에 쓴다. */
.fs-card      { position: relative; display: block; color: inherit; text-decoration: none;
                --fs-hint-scale: var(--fs-hint-scale-sm); }
.fs-card .fs-frame { position: relative; aspect-ratio: var(--fs-ratio-card);
                display: grid; place-items: center; }
.fs-card:hover .fs-hint,
.fs-card:focus-visible .fs-hint { opacity: 1;
                transform: translate(-50%, -50%) scale(var(--fs-hint-scale)); }
.fs-card:focus-visible { outline: none; }
.fs-blogcard  { --fs-hint-scale: 1; }

/* ── 5. 스크롤 씬 — 래퍼가 스크롤 예산(높이)을 갖고, 안쪽이 화면에 고정된다.
      fs-motion.js 는 --fs-p(0~1)만 쓴다. 보이는 계산은 전부 아래에 있다. ── */
.fs-scene     { position: relative; --fs-p: 0; }
.fs-scene-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.fs-scene[data-scene="showcase"],
.fs-scene[data-scene="aperture"] { height: 200vh; }
.fs-scene[data-scene="stack"]    { height: 400vh; }

/* 5a. showcase — 두 단어가 화면 밖에서 들어와 중앙에서 한 단어로 결합한다.
       미디어는 80vw 에서 시작해 끝에서 화면을 꽉 채운다. y 는 고정, x 만 움직인다. */
.fs-scene[data-scene="showcase"] .fs-scene-pin { display: grid; place-items: center; }
.fs-sc-media  { width: calc(var(--fs-scene-media-min) + var(--fs-p) * 20vw);
                height: calc(56vh + var(--fs-p) * 44vh);
                border-radius: var(--fs-radius-mask);
                display: grid; place-items: center; overflow: hidden; }
/* 두 단어는 처음부터 '결합된 한 줄'로 조판해 두고, 각자 ±37vw 만큼 밀어 두었다가
   진행률에 따라 제자리로 돌아오게 한다 — 끝 상태가 곧 SHOWCASE 다. */
.fs-sc-lockup { position: absolute; left: 50%; top: 50%; translate: -50% -50%;
                display: flex; white-space: nowrap; pointer-events: none; }
.fs-sc-word   { font-weight: 400; }
.fs-sc-word[data-side="l"] { transform: translateX(calc(var(--fs-scene-word-travel) * (var(--fs-p) - 1))); }
.fs-sc-word[data-side="r"] { transform: translateX(calc(var(--fs-scene-word-travel) * (1 - var(--fs-p)))); }

/* 5b. gallery — 세로 스크롤을 가로 이동으로 번역한다.
       카드 세로 위치는 상·중·하 3단으로 엇갈린다 — 한 줄로 반듯하게 놓지 않는다. */
.fs-scene[data-scene="gallery"] .fs-scene-pin { display: flex; align-items: center; }
.fs-gal-track { display: flex; align-items: center; height: 100%;
                gap: var(--fs-space-u5); padding: 0 var(--fs-side);
                will-change: transform;
                transform: translate3d(calc(var(--fs-p) * var(--fs-gal-dist, 0px) * -1), 0, 0); }
.fs-gal-item  { flex: 0 0 auto; width: calc(25vw - var(--fs-space-u5)); }
/* 상·중·하 3단. align-self 로 하면 트랙 높이에 좌우돼 단이 뭉개진다 —
   중앙 기준 고정 오프셋으로 세 단을 못 박는다. */
.fs-gal-item[data-tier="1"] { transform: translateY(-14vh); }
.fs-gal-item[data-tier="2"] { transform: translateY(0); }
.fs-gal-item[data-tier="3"] { transform: translateY(14vh); }

/* 5c. stack — 배경 워드마크는 고정, 카드가 같은 자리로 올라와 쌓인다. */
.fs-scene[data-scene="stack"] .fs-scene-pin { display: grid; place-items: center; }
.fs-stack-bg  { position: absolute; inset: 0; display: grid; place-items: center;
                pointer-events: none; }
/* 가운데 두 열 — 단순 50% 가 아니라 **거터 안쪽** 50% 다.
   그래야 카드 좌우가 페이지의 다른 20px 정렬축과 같은 선에 선다. */
.fs-stack-slot{ position: relative; width: calc(50% - var(--fs-side) * 2); }
.fs-stack-slot > * { position: absolute; left: 0; right: 0; top: 50%;
                translate: 0 -50%;
                transition: transform var(--fs-dur-hover) var(--fs-ease),
                            opacity var(--fs-dur-hover) var(--fs-ease); }
.fs-stack-slot > .is-below { transform: translateY(100vh); }        /* 아직 안 올라옴 */
.fs-stack-slot > .is-active{ transform: translateY(0); }            /* 자리 차지 */
.fs-stack-slot > .is-past  { transform: translateY(6vh) scale(.96); opacity: .35; }

/* 5d. aperture — 원이 커져 다음 면을 연다. width 가 아니라 scale 로 키운다. */
.fs-scene[data-scene="aperture"] .fs-scene-pin { display: grid; place-items: center;
                background: var(--fs-paper); }
.fs-ap-disc   { width: var(--fs-scene-aperture-min); aspect-ratio: 1;
                border-radius: var(--fs-radius-pin); background: var(--fs-ink);
                transform: scale(calc(1 + var(--fs-p) *
                           (var(--fs-ap-max, 20) - 1)));
                will-change: transform; }
/* 라벨은 원의 **자식이 아니라 형제**다 — 자식으로 넣고 역스케일하면
   작은 크기로 래스터된 글자가 확대돼 뭉개진다(20배 확대는 20배 흐려진다).
   끝에서 사라져 검은 면만 남기고 다음 다크 섹션으로 넘긴다. */
.fs-ap-label  { position: absolute; color: var(--fs-paper);
                opacity: calc(1 - max(0, (var(--fs-p) - .8) * 5)); }

/* ── 6. 접근성 폴백 — 커서를 숨기고 모션을 세게 쓰는 대가를
      키보드·터치·모션 민감 사용자에게 전가하지 않는다. ── */
@media (pointer: coarse) {
  .fs-cursor-on, .fs-cursor-on * { cursor: auto; }
  .fs-cursor  { display: none; }
  .fs-capsule { --fs-cap: var(--fs-capsule-mask); }   /* 호버가 없으니 처음부터 닫아 둔다 */
  .fs-hint    { opacity: 1; transform: translate(-50%, -50%) scale(var(--fs-hint-scale)); }
}
@media (prefers-reduced-motion: reduce) {
  .fs-cursor-on, .fs-cursor-on * { cursor: auto; }
  .fs-cursor  { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important;
                           animation-duration: .01ms !important; }
  /* 씬은 pin 을 풀어 평범한 세로 섹션으로 떨어뜨린다 — 콘텐츠가 사라지면 안 된다 */
  .fs-scene   { height: auto !important; }
  .fs-scene-pin { position: static; height: auto; padding: var(--fs-space-u6) 0; }
  .fs-sc-media  { width: 100%; height: auto; aspect-ratio: var(--fs-ratio-card); }
  .fs-sc-lockup { position: static; translate: none; justify-content: center;
                  margin-top: var(--fs-space-u5); }
  .fs-sc-word   { transform: none !important; }
  .fs-gal-track { transform: none; flex-wrap: wrap; height: auto; }
  .fs-gal-item  { width: calc(50% - var(--fs-space-u5)); transform: none !important; }
  .fs-stack-slot { width: 100%; }
  .fs-stack-slot > * { position: static; translate: none; transform: none !important;
                       opacity: 1 !important; margin-bottom: var(--fs-space-u6); }
  .fs-ap-disc   { transform: none; width: 60vmin; }
  .fs-ap-label  { position: static; opacity: 1; color: inherit; }
}