From b21dbd8cba02695600e6a4e4721a5d901acffcd9 Mon Sep 17 00:00:00 2001 From: 207studio Date: Mon, 2 Nov 2026 15:42:28 +0900 Subject: [PATCH 01/11] =?UTF-8?q?home:=20walk=20=E2=80=94=20pinned=20step-?= =?UTF-8?q?by-step=20tour=20over=20the=203=20+=202=20grid?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - The poster grid, Mimi and tape stay as they were. Each poster gets a note: what it is, who it is for, three points from its product page, a link (EN, KO). - Wide, tall screens: the stage pins for five steps. The lit poster lifts with a gold edge, the others dim by brightness, and its note fills the free cell. Mimi walks on the spot between steps and leans toward the lit column. - Narrower screens keep every note under its poster and light one step at a time. Phones get a small sticky Mimi chip naming the step. - Steps come from IntersectionObserver sentinels. Focus lights its step and, when pinned, scrolls to it. Reduced motion or no script: static grid, all notes. - The 3D wall walk and its rail are gone; "That's five of ten." follows the pin. Co-Authored-By: Claude Opus 5.5 --- assets/home.css | 155 +++++++--------- assets/home.js | 421 ++++++++++---------------------------------- assets/home.min.css | 2 +- assets/home.min.js | 2 +- index.html | 65 ++++--- ko/index.html | 65 ++++--- 6 files changed, 247 insertions(+), 463 deletions(-) diff --git a/assets/home.css b/assets/home.css index 3ae1709..8655f09 100644 --- a/assets/home.css +++ b/assets/home.css @@ -1732,15 +1732,13 @@ html { touch-action: manipulation; } } /* Walk with Mimi. - Static (no JS, or reduced motion): heading, Mimi standing, the five products as a list. - Live (.is-live): a sticky 100svh scene. Mimi takes over from the hero Mimi at the same - figure height, body centre and feet, and walks on the spot. Behind her a wall recedes in - CSS 3D (one rotateY plane under the stage's perspective); five paper posters are pasted - on that plane, so they share its vanishing point. Walking slides them along the wall: - one arrives from the near edge, she stops beside it, then walks on while it slides away. - Wide screens: the posters hang on the wall to her left. Phones: above her head, with the - stop list on the floor below her when there is room. - Only transform and opacity change per frame; geometry is measured on resize. */ + Static (no JS, or reduced motion): heading, Mimi standing, the five posters in a grid, + each with its note underneath (what it is, who it is for, three points, a link). + Live (.js, motion allowed): the same grid. On wide, tall screens the stage pins for five + steps; the lit poster lifts, the rest dim, and the note fills the free cell after poster 05. + Narrower screens keep every note under its poster and light one step at a time; phones + get a small sticky Mimi. Steps come from IntersectionObserver; only transform, opacity + and filter change. */ .walk { position: relative; padding-block: clamp(64px, 9vw, 128px) 0; } .walk-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; } .walk-note { max-width: 46ch; margin: var(--space-4) 0 0; color: var(--muted); font-size: 17px; line-height: 1.5; text-wrap: pretty; } @@ -1748,10 +1746,11 @@ html { touch-action: manipulation; } .walk-scroller { position: relative; } .walk-stage { position: relative; width: min(1240px, calc(100% - 96px)); margin: var(--space-8) auto 0; display: grid; grid-template-columns: minmax(150px, 240px) 1fr; gap: var(--space-6); align-items: start; } .walk-track { grid-column: 2; grid-row: 1; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); } -.walker { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 104px; } +.stop { display: flex; flex-direction: column; gap: var(--space-3); } +.walker { grid-column: 1; grid-row: 1; position: sticky; top: 104px; } .walker-still { display: block; width: 100%; height: auto; } -.walk-wall, .walker-layer, .walker-floor, .walk-rail { display: none; } -.walk-end { grid-column: 2; padding: var(--space-5) 0 0; } +.walker-layer, .walker-say { display: none; } +.walk-end { width: min(1240px, calc(100% - 96px)); margin: 0 auto; padding: var(--space-5) 0 0 calc(240px + var(--space-6)); } .walk-end-t { margin: 0; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; } .walk-end-p { margin: var(--space-2) 0 var(--space-3); color: var(--muted); } @@ -1772,50 +1771,21 @@ html { touch-action: manipulation; } .poster-name { font-family: var(--font-display); font-size: clamp(1.45rem, 2.5vw, 2.3rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; } .poster-desc { max-width: 44ch; color: var(--ink-soft); line-height: 1.45; text-wrap: pretty; } .poster-go { color: var(--accent); font-weight: 600; } - -/* Live scene */ -.walk.is-live .walk-stage { position: sticky; top: 0; display: block; width: 100%; height: 100vh; height: 100svh; margin: 0; overflow: hidden; overflow: clip; contain: layout paint; } -.walk.is-live .walk-stage::before { position: absolute; left: calc(var(--mx) + var(--mw) * 0.5); bottom: calc(var(--mb) - 22svh); width: calc(var(--mh) * 2.1); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--paper-light) 0%, rgba(251, 251, 250, 0.6) 55%, rgba(251, 251, 250, 0) 100%); content: ""; transform: translateX(-50%); pointer-events: none; } - -/* The wall and the poster track are the same plane: both are turned by rotateY about their - left edge (set by the script), seen through the stage's perspective. Seams are one - repeating stripe that slides along the plane. */ -.walk.is-live .walk-wall, .walk.is-live .walk-track { position: absolute; top: 0; left: 0; display: block; width: 0; height: 0; margin: 0; padding: 0; transform-origin: 0 0; pointer-events: none; } -.walk.is-live .walk-wall { z-index: 0; } -.walk.is-live .walk-track { z-index: 1; } -.walk.is-live .wall-face { position: absolute; background: linear-gradient(180deg, rgba(232, 231, 226, 0.35), rgba(232, 231, 226, 0.85) 70%, rgba(226, 224, 218, 0.95)); } -.walk.is-live .wall-ledge { position: absolute; background: rgba(45, 36, 26, 0.16); } -.walk.is-live .wall-seams { position: absolute; display: block; background: linear-gradient(90deg, rgba(45, 36, 26, 0.12) 0 1px, transparent 1px) 0 0 / 200px 100% repeat-x; will-change: transform; } - -.walk.is-live .stop { position: absolute; top: 0; left: 0; width: 520px; opacity: 0; pointer-events: none; transform-origin: 0 0; will-change: transform, opacity; } -.walk.is-live .stop.is-on { pointer-events: auto; } -.walk.is-live .poster { height: auto; gap: 16px; padding: 34px 40px 30px; background: linear-gradient(180deg, #f8f6ef, #f1eee5); } -.walk.is-live .poster-head { gap: 10px; } -.walk.is-live .poster-name { font-size: clamp(2.2rem, 3.9vw, 3.6rem); } -.walk.is-live .poster-desc { max-width: 30ch; font-size: clamp(19px, 1.6vw, 23px); } -.walk.is-live .poster-go { font-size: 17px; } -.walk.is-live .stop.is-here .poster::after, .walk.is-live .stop.is-here .poster::before { opacity: 1; } - -.walk.is-live .walker { position: absolute; top: auto; left: var(--mx); bottom: var(--mb); z-index: 3; width: var(--mw); height: var(--mh); opacity: 0; pointer-events: none; } -.walk.is-live .walker-layer { position: absolute; inset: 0; display: block; overflow: hidden; } -.walk.is-live .walker-layer img { display: block; width: auto; height: 100%; max-width: none; will-change: transform; } -.walk.is-live .walker-still { display: none; } -.walk.is-live .walker-floor { position: absolute; left: 12%; bottom: -2.2%; z-index: -1; display: block; width: 72%; height: 5.5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(45, 36, 26, 0.26), rgba(45, 36, 26, 0.1) 60%, rgba(45, 36, 26, 0)); transform-origin: 50% 50%; } -.walk.is-live .walk-rail { position: absolute; top: 0; left: 0; z-index: 2; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; } -.walk.is-live .walk-rail li { position: relative; flex: 1; min-width: 0; padding-top: 12px; } -.walk.is-live .walk-rail li::before, .walk.is-live .rail-fill { position: absolute; top: 0; left: 0; width: 100%; height: 2px; border-radius: 2px; content: ""; } -.walk.is-live .walk-rail li::before { background: var(--line); } -.walk.is-live .rail-fill { background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; } -.walk.is-live .rail-name { display: block; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; transition: color 0.3s var(--ease); } -.walk.is-live .walk-rail li.is-here .rail-name { color: var(--ink); } - -.walk.is-live .walk-end { position: absolute; top: 0; left: 0; z-index: 2; width: 420px; padding: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; } -.walk.is-live .walk-end.is-on { pointer-events: auto; } -.walk.is-live .walk-end-t { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: -0.035em; } -.walk.is-live .walk-end-p { margin: var(--space-3) 0 var(--space-4); font-size: 17px; } - -/* Fallbacks before the script measures the hero (it then sets --mx and --mh in px). */ -.walk.is-live .walk-stage { --mh: min(580px, calc(100svh - 300px)); --mw: calc(var(--mh) * 0.535); --mx: calc(87% - var(--mw) * 0.5); --mb: 24px; } +.stop .poster { height: auto; flex: none; } + +/* Notes: night glass with cream type, a gold rule for the points. */ +.note { padding: 16px 18px 16px; border: 1px solid rgba(233, 196, 106, 0.28); border-radius: 4px; background: rgba(20, 26, 69, 0.72); color: var(--ink); font-size: 15px; line-height: 1.45; } +.note-h { display: none; margin: 0 0 8px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; } +.note-h .poster-n { margin-right: 10px; color: var(--gold); } +.note-what { margin: 0; font-weight: 600; text-wrap: pretty; } +.note-for { margin: 8px 0 0; color: var(--muted); font-size: 14px; text-wrap: pretty; } +.note-k { margin-right: 6px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } +.note-pts { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: 14px; text-wrap: pretty; } +.note-pts li { position: relative; padding-left: 16px; } +.note-pts li::before { position: absolute; top: 0.62em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); content: ""; } +.note-go { display: inline-block; margin-top: 12px; color: var(--gold); font-weight: 600; text-decoration: none; } +.note-go:hover { text-decoration: underline; } +.note-go:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; } @media (max-width: 700px) { .walk-head h2 { font-size: clamp(2rem, 9vw, 2.6rem); } @@ -1823,28 +1793,46 @@ html { touch-action: manipulation; } .walk-stage { width: calc(100% - 40px); margin-top: var(--space-6); grid-template-columns: 1fr; } .walk-track { grid-column: 1; grid-row: 2; } .walker { position: static; grid-row: 1; width: 42%; max-width: 170px; } - .walk-end { grid-column: 1; } + .walk-end { width: calc(100% - 40px); padding-left: 0; } .poster { padding: 18px 18px 16px; } - .walk.is-live .walk-stage { --mh: 320px; --mx: calc(96% - var(--mw)); --mb: 20px; } - .walk.is-live .poster { display: flex; align-items: stretch; gap: 6px; padding: 14px 16px 12px; } - .walk.is-live .poster::before { top: -6px; width: 48px; height: 12px; margin-left: -24px; } - .walk.is-live .poster-head, .walk.is-live .poster-body { gap: 2px; } - .walk.is-live .poster-tag { font-size: 12px; } - .walk.is-live .poster-name { font-size: 1.3rem; } - .walk.is-live .poster-desc { font-size: 15px; line-height: 1.4; } - .walk.is-live .poster-go { font-size: 14px; } - .walk.is-live.is-tight .poster { padding: 10px 14px 9px; } - .walk.is-live.is-tight .poster-name { font-size: 1.15rem; } - .walk.is-live.is-tight .poster-desc { font-size: 14px; line-height: 1.35; } - .walk.is-live.is-tight .poster-go { font-size: 13px; } - .walk.is-live .rail-name { display: none; } - .walk.is-live .walk-rail li { padding-top: 0; height: 10px; } - .walk.is-live .walk-end-p { font-size: 15px; } - /* Tall phones: the stop list fills the floor below her. */ - .walk.is-live.is-list .walk-rail { flex-direction: column; gap: 10px; } - .walk.is-live.is-list .walk-rail li { flex: none; height: auto; padding: 0 0 9px; } - .walk.is-live.is-list .walk-rail li::before, .walk.is-live.is-list .rail-fill { top: auto; bottom: 0; } - .walk.is-live.is-list .rail-name { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } +} + +/* Live: one step lit at a time. Others dim by brightness, so their ink keeps its contrast. */ +@media (prefers-reduced-motion: no-preference) { + .js .walk .poster { transition: transform 0.45s var(--ease), filter 0.45s var(--ease), box-shadow 0.45s var(--ease); } + .js .walk .stop:not(.is-on) .poster { filter: brightness(0.62) saturate(0.7); } + .js .walk .stop:not(.is-on) .poster:hover { filter: brightness(0.85) saturate(0.9); } + .js .walk .stop.is-on .poster { box-shadow: 0 0 0 2px rgba(233, 196, 106, 0.85), 0 0 36px rgba(233, 196, 106, 0.22), 0 18px 40px rgba(4, 6, 20, 0.55); transform: translateY(-6px); } + .js .walk .stop.is-on .poster::after, .js .walk .stop.is-on .poster::before { opacity: 1; } + .js .walk .note { transition: border-color 0.45s var(--ease); } + .js .walk .stop.is-on .note { border-color: rgba(233, 196, 106, 0.7); } + + /* Mimi walks on the spot between steps (the script steps the strip) and leans toward + the lit column. */ + .js .walker-still { display: none; } + .js .walker-layer { position: relative; display: block; width: auto; height: min(552px, calc(100svh - 170px)); aspect-ratio: 162 / 420; margin-inline: auto; overflow: hidden; transform: translateX(var(--lean, 0px)); transition: transform 0.6s var(--ease); } + .js .walker-layer { background: url("/assets/mimi-walk-front.webp") 90.9091% 0 / 1200% 100% no-repeat; } +} + +/* Pinned: wide and tall enough for the 3 + 2 grid and a note in the free cell. */ +@media (prefers-reduced-motion: no-preference) and (min-width: 1180px) and (min-height: 700px) { + .js .walk-scroller { height: calc(100vh + 5 * 64vh); height: calc(100svh + 5 * 64svh); } + .js .walk-stage { position: sticky; top: 0; height: 100vh; height: 100svh; margin-top: 0; padding-top: 112px; box-sizing: border-box; align-content: start; } + .js .walker { position: relative; top: auto; } + .js .walk-track { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; } + .js .walk .stop { display: block; } + .js .walk .stop .poster { height: 100%; } + .js .walk .note { position: absolute; top: calc(50% + var(--space-4) / 2); left: calc((100% - 2 * var(--space-4)) * 2 / 3 + 2 * var(--space-4)); width: calc((100% - 2 * var(--space-4)) / 3); box-sizing: border-box; padding: 18px 20px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s; } + .js .walk .stop.is-on .note { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } + .js .walk .note-h { display: block; } +} + +/* Phones: Mimi shrinks to a sticky chip that names the lit step. */ +@media (prefers-reduced-motion: no-preference) and (max-width: 700px) { + .js .walker { position: sticky; top: 76px; z-index: 3; display: flex; align-items: center; gap: 10px; width: auto; max-width: none; justify-self: stretch; padding: 4px 16px 4px 4px; box-shadow: 0 10px 24px rgba(4, 6, 20, 0.6); border: 1px solid rgba(233, 196, 106, 0.3); border-radius: 999px; background: var(--night); } + .js .walker-still { display: block; order: -1; width: 44px; height: 44px; border-radius: 50%; background: var(--paper-light); object-fit: cover; object-position: 50% 4%; } + .js .walker-layer { display: none; } + .js .walker-say { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; } } /* r7: night sky. The page is the X header's painted night: deep navy and violet, cream @@ -1939,19 +1927,6 @@ html:lang(ko) .hero-sub { letter-spacing: 0.24em; } /* Walk: a violet wall with faint gold seams; cream posters keep their dark ink. */ .poster { --ink-soft: #3b3654; --muted: #5b5672; --accent: #7a5a12; color: #1b1838; } .poster:focus-visible { outline-color: var(--gold); } -.walk-paint { display: none; } -.walk.is-live .walk-paint { position: absolute; inset: 0; z-index: -1; display: block; pointer-events: none; } -.walk.is-live .walk-paint img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; } -.walk.is-live .walk-stage { background: var(--night); } -.walk.is-live .walk-stage::before { background: radial-gradient(closest-side, rgba(233, 196, 106, 0.16) 0%, rgba(233, 196, 106, 0.06) 55%, rgba(233, 196, 106, 0) 100%); } -.walk.is-live .wall-face { background: linear-gradient(180deg, rgba(20, 26, 69, 0.08), rgba(20, 26, 69, 0.34) 70%, rgba(13, 19, 51, 0.6)); } -.walk.is-live .wall-ledge { background: rgba(233, 196, 106, 0.4); } -.walk.is-live .wall-seams { background: linear-gradient(90deg, rgba(233, 196, 106, 0.2) 0 1px, transparent 1px) 0 0 / 200px 100% repeat-x; } -.walk.is-live .poster { background: radial-gradient(120% 90% at 20% 10%, rgba(255, 252, 240, 0.9), rgba(255, 252, 240, 0) 60%), linear-gradient(175deg, #f6eed8, #ece2c6); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 18px 40px rgba(4, 6, 20, 0.55); } -.walk.is-live .poster::after { background: linear-gradient(175deg, #fbf5e2, #f3e9cf); } -.walk.is-live .poster::before { background: rgba(233, 196, 106, 0.5); } -.walk.is-live .walker-floor { background: radial-gradient(closest-side, rgba(4, 6, 20, 0.6), rgba(4, 6, 20, 0.25) 60%, rgba(4, 6, 20, 0)); } -.walk.is-live .rail-fill { background: var(--gold); } @media (max-width: 700px) { .dock .brand-word { display: inline; font-size: 12px; letter-spacing: 0.13em; } diff --git a/assets/home.js b/assets/home.js index 4d9f260..08e559a 100644 --- a/assets/home.js +++ b/assets/home.js @@ -130,347 +130,110 @@ } })(); -/* Walk with Mimi. Scroll drives one timeline, measured in "stops" (t from 0 to TOTAL). - Stop i owns [b, b + 1) with b = INTRO + i: - ..b+0.40 she walks; poster i comes along the wall from the far end - b+0.40..b+0.92 she stands beside it; the poster is lit - b+0.92.. she walks on; the poster slides on toward her and fades before it reaches her - Mimi takes over from the hero Mimi: same figure height, same body centre, same feet, and - she only shows once her whole figure is inside the frame. She never moves after that and - is never mirrored. - The wall is one CSS 3D plane (rotateY) seen through the stage's perspective, so the wall, - its seams and the posters pasted on it share one vanishing point. On wide screens the - wall runs to her left and the featured poster hangs there at her height; on phones it - runs above her head and the stop list sits on the floor below her. - Walk frames advance 24 per stop of wall travel everywhere (12 for the half-stop intro), - so her steps keep pace with the wall, and every arrival lands on the standing frame. - Smoothing: the drawn time eases toward the scroll time, like a short scrub. */ +/* Walk with Mimi. The grid stays put; scroll lights one poster at a time. + Steps come from five invisible sentinels and one IntersectionObserver watching the line + across the middle of the viewport. Pinned (wide and tall, set in CSS): the sentinels split + the scroller's extra height into five. Otherwise they split the poster list. Reduced + motion keeps the static grid with every note showing. */ (function () { - "use strict"; var section = document.querySelector("[data-walk]"); - if (!section || !window.requestAnimationFrame) return; - if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; - + if (!section || !("IntersectionObserver" in window)) return; + var reduce = window.matchMedia("(prefers-reduced-motion: reduce)"); + var pinned = window.matchMedia("(prefers-reduced-motion: no-preference) and (min-width: 1180px) and (min-height: 700px)"); var scroller = section.querySelector("[data-walk-scroller]"); var stage = section.querySelector("[data-walk-stage]"); - var walker = section.querySelector("[data-walker]"); - var walkImg = section.querySelector("[data-walk-strip]"); - var floor = section.querySelector("[data-walk-floor]"); - var end = section.querySelector("[data-walk-end]"); - var wall = section.querySelector("[data-wall]"); - var face = section.querySelector("[data-wall-face]"); - var ledge = section.querySelector("[data-wall-ledge]"); - var seams = section.querySelector("[data-seam]"); var track = section.querySelector("[data-walk-track]"); var stops = [].slice.call(section.querySelectorAll("[data-stop]")); - var fills = [].slice.call(section.querySelectorAll("[data-rail-fill]")); - var railItems = fills.map(function (f) { return f.parentNode; }); - var rail = railItems.length ? railItems[0].parentNode : null; - var heroImg = document.querySelector("[data-mimi]"); - var n = stops.length; - - var INTRO = 0.25, ARRIVE = 0.40, LEFT = 0.92; - var LIT_A = 0.44, LIT_B = 0.88; - var WALK_GAP = (1 - LEFT) + ARRIVE; // 0.48 - var END_AT = INTRO + n, STAND = END_AT + ARRIVE, TOTAL = STAND + 0.35; - var SEG_SVH = 96; - // Sprite geometry (12 cells of 162 x 420; hero image 431 x 990), from the alpha channel. - var CELL_W = 162, CELL_H = 420, FRAMES = 12; - var HAND_FRAME = 10, HAND_BOX = [7, 3, 159, 405]; // both feet planted: hand-off and stops - var HERO_BOX = [8, 6, 420, 982], MIN_X = 2, MIN_Y = -2; // widest / tallest walk frame (feet pinned) - var FOOT = [417, 415, 412, 408, 405, 409, 411, 414, 411, 408, 405, 409]; // lowest row per cell - var INTRO_SPAN = 0.5; // the intro walk covers half a stop - var K = 0.86, TILT = 20 * Math.PI / 180; // far edge of the featured poster vs near edge - var GAP = 10; - - var vw = 0, vh = 0, mh = 1, mobile = false, range = 1, top0 = 0, mb = 0, footGap = 0, fadeIn = 1; - var L = 0, oy = 0, P = 1000, cs = 1, sn = 0, pwp = 0, step = 0, seamGap = 1, limit = 0, railTop = 0; - var heights = []; - var cur = -1, target = 0, last = 0, running = false, ready = false; - var memo = [], drawn = {}; - - section.classList.add("is-live"); - scroller.style.height = (TOTAL * SEG_SVH + 100) + "vh"; - scroller.style.height = (TOTAL * SEG_SVH + 100) + "svh"; - - function clamp(x) { return x < 0 ? 0 : x > 1 ? 1 : x; } - function easeOut(x) { return 1 - Math.pow(1 - x, 3); } - function easeInOut(x) { return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; } - function px(v) { return Math.round(v) + "px"; } - function opac(v) { return v < 0.002 ? "0" : v > 0.998 ? "1" : v.toFixed(3); } - function put(el, key, prop, val) { - var m = memo[key] || (memo[key] = {}); - if (m[prop] !== val) { m[prop] = val; el.style[prop] = val; } - } - function box(el, x, y, w, h) { - el.style.left = px(x); el.style.top = px(y); el.style.width = px(w); el.style.height = px(h); - } - - // The hero Mimi image in page pixels, ignoring her pointer-follow nudge (a translate). - function heroBox() { - if (!heroImg || !heroImg.offsetHeight) return null; - var x = 0, y = 0; - for (var el = heroImg; el; el = el.offsetParent) { x += el.offsetLeft; y += el.offsetTop; } - return { x: x, y: y, w: heroImg.offsetWidth, h: heroImg.offsetHeight }; - } - - // Plane x (0 = near edge of the featured poster) to screen x; perspective-origin x is L. - function scale(xp) { return P / (P + xp * sn); } - function proj(xp) { return L + xp * cs * scale(xp); } - function unproj(sx) { return P * (L - sx) / ((sx - L) * sn - cs * P); } - - function layout() { - var i, ph = 0; - vw = stage.clientWidth; vh = stage.clientHeight; - mobile = vw <= 700; - var dock = mobile ? 76 : 92; - var side = mobile ? 12 : Math.round(Math.max(24, vw * 0.033)); - ["--mh", "--mw", "--mx", "--mb"].forEach(function (p) { stage.style.removeProperty(p); }); - - // Mimi: the hero's figure, feet and body centre, carried over exactly. - var hb = heroBox(), H, ml, wt; - if (hb) { - var figH = hb.h * (HERO_BOX[3] + 1 - HERO_BOX[1]) / 990; - H = figH * CELL_H / (HAND_BOX[3] + 1 - HAND_BOX[1]); - var foot = hb.y + hb.h * (HERO_BOX[3] + 1) / 990; - wt = foot - H * (HAND_BOX[3] + 1) / CELL_H; - var heroCx = hb.x + hb.w * (HERO_BOX[0] + HERO_BOX[2] + 1) / 2 / 431; - var boxCx = hb.x + hb.w / 2; - var mw0 = H * CELL_W / CELL_H; - var bodyOff = ((HAND_BOX[0] + HAND_BOX[2] + 1) / 2 - CELL_W / 2) * mw0 / CELL_W; - // Split the difference between the box centre and the body centre (both stay within 2px). - ml = boxCx - mw0 / 2 + ((heroCx - boxCx) - bodyOff) / 2; - } else { - H = walker.offsetHeight || 320; wt = vh - 24 - H; ml = walker.offsetLeft; - } - var mw = H * CELL_W / CELL_H; - mh = H; - // The cell runs a few px below her feet; that transparent strip may hang below the stage. - mb = vh - wt - H; - stage.style.setProperty("--mh", H.toFixed(2) + "px"); - stage.style.setProperty("--mw", mw.toFixed(2) + "px"); - stage.style.setProperty("--mx", ml.toFixed(2) + "px"); - stage.style.setProperty("--mb", mb.toFixed(2) + "px"); - section.classList.toggle("is-above", mobile); - // She fades in over the scroll between "whole figure in frame" and the pin, never later. - footGap = Math.max(0, vh - wt - H * (HAND_BOX[3] + 1) / CELL_H); - fadeIn = Math.max(1, Math.min(Math.max(60, vh * 0.12), footGap)); - - var figL = ml + MIN_X * mw / CELL_W, headY = wt + MIN_Y * H / CELL_H, feetY = wt + H; - // Stop list: a thin rail at her feet on wide screens; on tall phones a list on the floor. - var listRoom = vh - feetY - 24; - var asList = mobile && listRoom >= 200; - section.classList.toggle("is-list", asList); - railTop = mobile ? (asList ? feetY + 30 : feetY - 6) : feetY - 26; - - // The featured poster at its stop, on screen: [xl, xr]. Wide screens: on the wall to her - // left, centred between the dock and the rail. Phones: across the top, above her head. - var xl, xr; - if (!mobile) { - xr = figL - Math.max(24, H * 0.06); - xl = Math.max(side, xr - 640); - limit = figL - 2; - } else { - xl = side; xr = vw - side; limit = Infinity; - } - // Perspective: heights fall off linearly toward the vanishing point vx, so the far edge - // of the featured poster is K times its near edge. TILT sets how much it is foreshortened. - var vx = (xr - K * xl) / (1 - K); - cs = Math.cos(TILT); sn = Math.sin(TILT); - L = xl; P = (vx - xl) * Math.tan(TILT); - pwp = (xr - xl) / (K * cs); - step = pwp * 1.12; - seamGap = step / 2; - - section.classList.remove("is-tight"); - // Nearer the left edge the wall is closer, so a poster there is taller (sNear times). - var sNear = Math.max(1, scale(unproj(side))); - for (i = 0; i < n; i++) stops[i].style.width = px(pwp); - for (var pass = 0; pass < 2; pass++) { - ph = 0; heights = []; - for (i = 0; i < n; i++) { heights[i] = stops[i].offsetHeight; ph = Math.max(ph, heights[i]); } - if (!mobile) oy = Math.max(dock + 12 + ph / 2, Math.min((dock + railTop) / 2, railTop - 14 - ph / 2 * sNear)); - else oy = headY - GAP; - if (!mobile || oy - ph >= dock + 6 || pass) break; - section.classList.add("is-tight"); // short band above her head + var strip = section.querySelector("[data-walk-strip]"); + var sayN = section.querySelector("[data-walk-n]"); + var sayName = section.querySelector("[data-walk-name]"); + var names = stops.map(function (s) { return s.querySelector(".poster-name").textContent; }); + var FRAMES = 12, STAND = 10, LEAN = 14; + var active = 0, io = null, sentinels = [], timer = 0; + + function frame(f) { if (strip) strip.style.backgroundPositionX = (f * 100 / (FRAMES - 1)).toFixed(4) + "%"; } + function walk() { + var n = 0; + clearInterval(timer); + timer = setInterval(function () { + n += 1; + frame(n >= FRAMES ? STAND : (STAND + n) % FRAMES); + if (n >= FRAMES) clearInterval(timer); + }, 45); + } + + function set(i) { + if (i === active) return; + stops[active].classList.remove("is-on"); + stops[i].classList.add("is-on"); + active = i; + if (sayN) sayN.textContent = "0" + (i + 1); + if (sayName) sayName.textContent = names[i]; + var cols = pinned.matches ? 3 : 1; + section.style.setProperty("--lean", (i % cols) * LEAN + "px"); + if (!reduce.matches) walk(); + } + + function build() { + if (io) io.disconnect(); + sentinels.forEach(function (s) { s.remove(); }); + sentinels = []; + if (reduce.matches) return; + var host = pinned.matches ? scroller : stage; + for (var i = 0; i < stops.length; i++) { + var s = document.createElement("span"); + s.setAttribute("aria-hidden", "true"); + s.style.cssText = "position:absolute;left:0;width:1px;pointer-events:none;visibility:hidden"; + s.dataset.i = i; + host.appendChild(s); + sentinels.push(s); } - var half = mobile ? 1 : 0.5; - stage.style.perspective = Math.round(P) + "px"; - stage.style.perspectiveOrigin = px(L) + " " + px(oy); - var plane = "rotateY(" + TILT.toFixed(5) + "rad)"; - [wall, track].forEach(function (el) { el.style.left = px(L); el.style.transform = plane; }); - for (i = 0; i < n; i++) stops[i].style.top = px(oy - heights[i] * half); - - // Wall: from past the near (left) edge to past the right edge. Its top clears the - // posters; its foot meets the floor just behind her feet. - var x0 = unproj(-40), x1 = Math.max(unproj(vw + 40), pwp * 2); - var sM = scale(unproj(ml + mw / 2)); - var yB = oy + (wt + H * 0.95 - oy) / sM; - var yT = oy - Math.max(ph * half + 48, (oy - Math.max(0, wt - H * 0.1)) / scale(unproj(vw))); - box(face, x0, yT, x1 - x0, yB - yT); - box(ledge, x0, yB - 1, x1 - x0, 3); - box(seams, x0 - seamGap, yT, x1 - x0 + seamGap * 2, yB - yT); - seams.style.backgroundSize = seamGap.toFixed(2) + "px 100%"; - - if (!mobile) { - end.style.width = px(Math.max(240, Math.min(460, xr - side))); end.style.left = px(side); - end.style.top = px(Math.max(dock + 10, oy - end.offsetHeight / 2)); + place(); + io = new IntersectionObserver(function (entries) { + entries.forEach(function (e) { if (e.isIntersecting) set(+e.target.dataset.i); }); + }, { rootMargin: "-50% 0px -50% 0px" }); + sentinels.forEach(function (s) { io.observe(s); }); + } + + // Pinned: the stage sticks while the middle line runs from half a screen into the + // scroller to half a screen before its end; that run is split in five. + function place() { + var n = stops.length; + if (pinned.matches) { + var half = stage.offsetHeight / 2, seg = (scroller.offsetHeight - stage.offsetHeight) / n; + sentinels.forEach(function (s, i) { s.style.top = half + i * seg + "px"; s.style.height = seg + "px"; }); } else { - end.style.width = px(vw - side * 2); end.style.left = px(side); - end.style.top = px(Math.max(dock + 6, oy - end.offsetHeight)); + // Not pinned: each row of posters owns the scroll from its top to the next row's top, + // shared equally by the posters in it, so steps follow the cards in reading order. + var rows = [], end = track.offsetTop + track.offsetHeight; + stops.forEach(function (st, i) { + var last = rows[rows.length - 1]; + if (last && Math.abs(last.top - st.offsetTop) < 4) last.ids.push(i); + else rows.push({ top: st.offsetTop, ids: [i] }); + }); + rows.forEach(function (r, k) { + var h = ((rows[k + 1] ? rows[k + 1].top : end) - r.top) / r.ids.length; + r.ids.forEach(function (i, j) { sentinels[i].style.top = r.top + j * h + "px"; sentinels[i].style.height = h + "px"; }); + }); } - if (rail) { - rail.style.left = side + "px"; - rail.style.width = Math.round(asList ? vw - side * 2 : mobile ? ml - side - 12 : Math.min(520, ml - side - 40)) + "px"; - rail.style.top = Math.round(railTop) + "px"; - } - - range = Math.max(1, scroller.offsetHeight - vh); - top0 = scroller.getBoundingClientRect().top + window.pageYOffset; - memo = []; drawn = {}; } - function scrollTime() { - var p = clamp((window.pageYOffset - top0) / range); - return p * TOTAL; - } - - // Where the walk is, in stops: -1 at the start, i while paused at stop i, n at the end. - // Each walk eases in and out. - function along(t) { - var w0 = INTRO + ARRIVE; - if (t <= 0) return -1; - if (t < w0) return -1 + easeInOut(t / w0); - for (var i = 0; i < n; i++) { - var b = INTRO + i; - if (t < b + LEFT) return i; - var e = b + 1 + ARRIVE; - if (t < e) return i + easeInOut((t - b - LEFT) / (e - b - LEFT)); - } - return n; - } - - // Walk frame for time t: the standing frame at the stops and at the end, otherwise the - // cycle, 24 frames per stop of wall travel. - function frame(t) { - if (t >= STAND || t <= 0) return HAND_FRAME; - var a = along(t); - if (a === Math.round(a)) return HAND_FRAME; - var f = (HAND_FRAME + Math.floor((a < 0 ? a * INTRO_SPAN : a) * 24 + 1e-6)) % FRAMES; - return f < 0 ? f + FRAMES : f; - } - - function drawMimi(t) { - var f = ready ? frame(t) : HAND_FRAME; - // Keep the lowest foot on the floor: each cell's figure ends at a slightly different row. - var dy = (HAND_BOX[3] - FOOT[f]) * mh / CELL_H; - put(walkImg, "wi", "transform", "translate3d(" + (-f * 100 / FRAMES).toFixed(4) + "%," + dy.toFixed(1) + "px,0)"); - // Contact shadow breathes with the stride: tighter on a passing step, wider at full stride. - var stride = f === HAND_FRAME ? 0.5 : Math.abs(Math.cos((f - HAND_FRAME) / 6 * Math.PI)); - put(floor, "fl", "transform", "scaleX(" + (0.92 + stride * 0.1).toFixed(3) + ")"); - } - - // She appears only once her whole figure is in the frame (the stage is still sliding up - // into view until it pins), and fades in from there. - function drawEntry() { - var a = window.pageYOffset - (top0 - footGap); - put(walker, "wo", "opacity", opac(clamp(a / fadeIn))); - } - - function drawWall(a) { - var s = ((a * step) % seamGap + seamGap) % seamGap; - put(seams, "sm", "transform", "translate3d(" + s.toFixed(1) + "px,0,0)"); - } - - function drawStops(t, a) { - var lastOp = 1; - for (var i = 0; i < n; i++) { - var u = t - (INTRO + i), el = stops[i], key = "s" + i; - var xp = (a - i) * step, op = 1, nearX = unproj(-40), farX = unproj(vw + 40); - var right = xp + pwp > nearX ? proj(xp + pwp) : -1e4; - if (right < -4 || xp > farX || proj(xp) > vw + 4) op = 0; - // Wide screens: once it starts to slide away toward her it fades, and it is gone - // before it could reach her. - else if (!mobile && xp > 0) op = clamp((limit - right) / Math.max(1, limit - proj(pwp))); - if (op === 0) xp = Math.min(Math.max(xp, nearX - pwp * 1.5), farX); - put(el, key + "t", "transform", "translate3d(" + xp.toFixed(1) + "px,0,0)"); - put(el, key + "o", "opacity", opac(op)); - if (i === n - 1 && a > n - 1) lastOp = op; - var on = op > 0.5, lit = u >= LIT_A && u < LIT_B; - if (drawn[key + "on"] !== on) { drawn[key + "on"] = on; el.classList.toggle("is-on", on); } - if (drawn[key + "lit"] !== lit) { - drawn[key + "lit"] = lit; - el.classList.toggle("is-here", lit); - if (railItems[i]) railItems[i].classList.toggle("is-here", lit); - } - if (fills[i]) put(fills[i], key + "f", "transform", "scaleX(" + clamp((u - (LEFT - 1)) / WALK_GAP).toFixed(3) + ")"); + // Keyboard: focus lights its step; pinned, the page scrolls to that step so the two agree. + track.addEventListener("focusin", function (e) { + var stop = e.target.closest("[data-stop]"); + if (!stop) return; + var i = stops.indexOf(stop); + if (pinned.matches && i !== active) { + var seg = (scroller.offsetHeight - stage.offsetHeight) / stops.length; + var top = scroller.getBoundingClientRect().top + window.pageYOffset; + window.scrollTo(0, Math.round(top + i * seg + seg / 2)); } - var v = t - END_AT; - // The closing block takes over as the last poster fades, so the wall is never bare. - var k = Math.max(easeOut(clamp((v - 0.1) / 0.3)), clamp(1 - lastOp * 2)); - put(end, "et", "transform", "translate3d(0," + ((1 - k) * (mobile ? -24 : 24)).toFixed(1) + "px,0)"); - put(end, "eo", "opacity", opac(k)); - if (drawn.end !== k > 0.5) { drawn.end = k > 0.5; end.classList.toggle("is-on", drawn.end); } - } - - // The intro covers half a stop, so the first poster is already half on the wall when she - // sets off (the wall is never bare); her steps are scaled to match in frame(). - function draw(t) { var a = along(t); if (a < 0) a *= INTRO_SPAN; drawWall(a); drawStops(t, a); drawMimi(t); } - - function tick(now) { - var dt = Math.min(0.05, (now - last) / 1000 || 0.016); - last = now; - var d = target - cur; - if (Math.abs(d) > 1.5) cur = target - (d > 0 ? 0.6 : -0.6); // long jumps: skip ahead, then ease - else cur += d * (1 - Math.exp(-dt / 0.09)); - if (Math.abs(target - cur) < 0.0005) cur = target; - draw(cur); - if (cur !== target) requestAnimationFrame(tick); else running = false; - } - - function kick() { - target = scrollTime(); - drawEntry(); - if (cur < 0) { cur = target; draw(cur); return; } - if (!running) { running = true; last = performance.now(); requestAnimationFrame(tick); } - } - - var resizeTimer = 0; - function onResize() { - clearTimeout(resizeTimer); - resizeTimer = setTimeout(function () { layout(); cur = target = scrollTime(); drawEntry(); draw(cur); }, 120); - } - - // Keyboard: focusing a poster scrolls to the moment Mimi stands beside it. - section.addEventListener("focusin", function (event) { - var i = stops.indexOf(event.target.closest && event.target.closest("[data-stop]")); - var t = i >= 0 ? INTRO + i + 0.66 : end.contains(event.target) ? TOTAL : -1; - if (t < 0) return; - var y = top0 + t / TOTAL * range; - // overflow:hidden still lets focus scroll the stage sideways; undo that. - stage.scrollLeft = 0; stage.scrollTop = 0; - if (Math.abs(window.pageYOffset - y) > 2) window.scrollTo({ top: y, behavior: "instant" }); - cur = target = t; drawEntry(); draw(cur); + set(i); }); - layout(); - kick(); - window.addEventListener("scroll", kick, { passive: true }); - window.addEventListener("resize", onResize); - window.addEventListener("load", onResize, { once: true }); - if (document.fonts && document.fonts.ready) document.fonts.ready.then(onResize); - - var imgs = [walkImg]; - function decoded(img) { return img.decode ? img.decode().catch(function () {}) : Promise.resolve(); } - if ("IntersectionObserver" in window) { - var io = new IntersectionObserver(function (entries) { - if (!entries[0].isIntersecting) return; - io.disconnect(); - imgs.forEach(function (img) { img.loading = "eager"; }); - Promise.all(imgs.map(decoded)).then(function () { ready = true; memo = []; drawn = {}; drawEntry(); draw(cur); }); - }, { rootMargin: "100% 0px" }); - io.observe(section); - } else { - ready = true; - } + build(); + var onMode = function () { build(); }; + if (pinned.addEventListener) { pinned.addEventListener("change", onMode); reduce.addEventListener("change", onMode); } + var rt = 0; + window.addEventListener("resize", function () { clearTimeout(rt); rt = setTimeout(place, 150); }); })(); diff --git a/assets/home.min.css b/assets/home.min.css index b2266e4..c169d27 100644 --- a/assets/home.min.css +++ b/assets/home.min.css @@ -1 +1 @@ -@font-face{font-family:DM Sans;src:url(/assets/fonts/dm-sans-500-latin.woff2) format("woff2");font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:DM Sans;src:url(/assets/fonts/dm-sans-700-latin.woff2) format("woff2");font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Gabarito;src:url(/assets/fonts/gabarito-latin.woff2) format("woff2");font-style:normal;font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Instrument Sans;src:url(/assets/fonts/instrument-sans-latin.woff2) format("woff2");font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--paper: #f4f4f2;--paper-light: #fbfbfa;--paper-deep: #e8e8e5;--paper-shadow: #dcdcd8;--ink: #171717;--ink-soft: #333331;--muted: #5c5c58;--line: rgba(23, 23, 23, .13);--line-strong: rgba(23, 23, 23, .3);--accent: #2c5a45;--accent-ink: #1f4433;--butter: #e9b949;--sage: #a8bda0;--coral: #cd7c5c;--blush: #e6aaa5;--sky: #a9c3cb;--font-display: "Gabarito", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;--font-body: "Instrument Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--space-9: 96px;--space-10: 128px;--radius-s: 10px;--radius-m: 18px;--radius-l: 28px;--radius-pill: 999px;--ease: cubic-bezier(.23, 1, .32, 1);color-scheme:light}*,*:before,*:after{box-sizing:border-box}html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;font-synthesis:none;-webkit-font-smoothing:antialiased}::selection{background:#cfe0d6;color:var(--ink)}img,picture,canvas{display:block;max-width:100%}a{color:inherit;text-underline-offset:4px}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:4px}h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}.skip{position:fixed;top:-100px;left:20px;z-index:100;padding:14px 18px;border-radius:0 0 var(--radius-s) var(--radius-s);background:var(--ink);color:var(--paper);text-decoration:none}.skip:focus{top:0}.dock{position:fixed;top:var(--space-4);left:50%;z-index:50;display:flex;width:min(1240px,calc(100% - 32px));height:64px;align-items:center;justify-content:space-between;gap:var(--space-5);padding:0 var(--space-3) 0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--paper);transform:translate(-50%);transition:box-shadow .25s var(--ease),background-color .25s var(--ease)}.brand{display:inline-flex;flex-shrink:0;align-items:center;gap:10px;color:inherit;text-decoration:none}.brand-num{padding:4px 6px 5px;border:1.5px solid currentColor;border-radius:7px;font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.06em;line-height:1}.brand-word{font-size:11px;font-weight:600;letter-spacing:0;line-height:1}.dock-nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);margin-left:auto;font-size:14px;font-weight:500}.dock-nav a{padding:10px 2px;text-decoration:none}.dock-nav a:hover{text-decoration:underline;text-decoration-thickness:1px}.dock-actions{display:flex;flex-shrink:0;align-items:center;gap:var(--space-2)}.x-link,.lang-link{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius-pill);font-size:12px;font-weight:600;line-height:1;text-decoration:none;transition:background-color .2s var(--ease),border-color .2s var(--ease)}.lang-link{min-width:48px}.x-link:hover,.lang-link:hover{border-color:var(--ink);background:var(--paper-deep)}.hero{padding-top:104px;padding-bottom:36px}.hero-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);margin-bottom:clamp(20px,2.4vw,34px)}.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:0;line-height:1.5}.kicker-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--accent)}.latest{display:inline-flex;align-items:center;gap:10px;padding:7px 12px 7px 7px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--paper-light);font-size:12px;line-height:1;text-decoration:none;transition:background-color .2s var(--ease),transform .2s var(--ease)}.latest:hover{background:var(--paper-light);transform:translateY(-1px)}.latest-label{padding:5px 9px;border-radius:var(--radius-pill);background:var(--ink);color:var(--paper);font-size:10px;font-weight:600;letter-spacing:0}.latest-name{font-weight:600}.latest time{color:var(--muted);font-variant-numeric:tabular-nums}.latest-arrow{font-size:14px}.hero-stage{position:relative;display:flex;min-height:clamp(540px,calc(100svh - 320px),640px);flex-direction:column;align-items:flex-start;isolation:isolate;cursor:grab;touch-action:pan-y pinch-zoom}.hero-stage.is-dragging{cursor:grabbing}.hero-stage:before{position:absolute;top:-2%;right:-3%;z-index:0;width:min(60vw,760px);aspect-ratio:1;border-radius:50%;display:none;content:"";pointer-events:none}.hero-stage:after{position:absolute;top:8%;right:2.5%;z-index:0;width:min(46vw,580px);aspect-ratio:1;border:1px solid var(--line);border-radius:50%;content:"";pointer-events:none}.wordmark{position:relative;z-index:1;margin:0;padding-top:3px;font-family:var(--font-display);font-weight:800;letter-spacing:-.065em;line-height:.78;text-transform:uppercase;pointer-events:none;-webkit-user-select:none;user-select:none}.wm-207{display:block;font-size:clamp(176px,23.2vw,324px)}.wm-studio{display:block;margin-top:-.015em;padding-left:.055em;font-size:clamp(86px,13.4vw,184px);letter-spacing:-.055em;white-space:nowrap}.wm-dot{color:inherit}.hero-foot{position:relative;z-index:3;display:flex;width:min(100%,500px);flex-direction:column;gap:18px;margin-top:auto;padding-bottom:7px}.intro{max-width:42ch;color:var(--ink-soft);font-size:clamp(16px,1.24vw,18px);line-height:1.55;letter-spacing:-.005em}.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}.hero-note{color:var(--muted);font-size:11px;letter-spacing:.02em}.stage-mark,.stage-hint{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:9px;font-weight:600;letter-spacing:0;line-height:1.4;pointer-events:none;-webkit-user-select:none;user-select:none}.stage-mark{top:6px;right:2px}.stage-mark b{color:var(--ink);font-weight:600;letter-spacing:.02em}.stage-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}.stage-hint{right:2px;bottom:10px}.btn{display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:10px;padding:0 22px;border:1px solid transparent;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1;text-decoration:none;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--ink);color:var(--paper)}.btn-primary:hover{background:#000}.btn-ghost{border-color:var(--line-strong);background:transparent;color:var(--ink)}.btn-ghost:hover{border-color:var(--ink);background:var(--paper-light)}.btn-arrow{font-size:16px;font-weight:400;line-height:1}.mimi{position:absolute;right:13%;bottom:0;z-index:1;height:100%;aspect-ratio:431 / 990;pointer-events:none;translate:var(--mimi-x, 0) var(--mimi-y, 0);transition:translate .25s var(--ease)}.mimi img{display:block;width:100%;height:auto}.mimi:after{position:absolute;bottom:-1%;left:18%;z-index:-1;width:70%;height:4.5%;border-radius:50%;background:radial-gradient(closest-side,#2d241a38,#2d241a00);content:""}@keyframes mimi-float{0%,to{transform:translateY(-1.2%)}50%{transform:translateY(-2.6%)}}@keyframes mimi-shadow{0%,to{opacity:1;transform:scaleX(1)}50%{opacity:.75;transform:scaleX(.92)}}.scene{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}.scene-poster{position:absolute;inset:0;z-index:2;background-image:url(/assets/clay-scene-poster.webp);background-position:center;background-repeat:no-repeat;background-size:100% 100%;opacity:1;pointer-events:none;transition:opacity .25s var(--ease),visibility .25s}@media(min-width:701px)and (max-width:1196px){.scene-poster{background-image:url(/assets/clay-scene-poster-medium.webp)}}@media(max-width:700px){.scene-poster{background-image:url(/assets/clay-scene-poster-mobile.webp)}}.hero-stage.is-live .scene-poster{visibility:hidden;opacity:0}#clay-scene{position:absolute;inset:0;z-index:1;width:100%;height:100%;color:transparent;font-size:0;line-height:0;touch-action:pan-y pinch-zoom}.facts-strip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(28px,3.5vw,44px);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}.fact{display:flex;min-width:0;flex-direction:column;gap:4px;padding:var(--space-5) var(--space-4) var(--space-5) 0}.fact+.fact{padding-left:var(--space-5);border-left:1px solid var(--line)}.fact strong{font-family:var(--font-display);font-size:clamp(32px,3.2vw,46px);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}.fact span{color:var(--muted);font-size:10px;font-weight:600;letter-spacing:0;line-height:1.4}.section{padding-block:clamp(80px,9vw,128px)}.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-4);color:var(--muted);font-size:10px;font-weight:600;letter-spacing:0;line-height:1.5}.eyebrow-index{color:var(--ink);font-variant-numeric:tabular-nums}.section-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:clamp(28px,5vw,72px);margin-bottom:clamp(40px,5vw,64px)}.section-head h2{font-family:var(--font-display);font-size:clamp(44px,5.2vw,76px);font-weight:700;letter-spacing:-.05em;line-height:.95}.section-note{max-width:38ch;padding-bottom:6px;color:var(--muted);font-size:15px;line-height:1.6}.category+.category{margin-top:clamp(52px,6vw,84px)}.cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-5);margin-bottom:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--ink)}.cat-head h3{display:flex;align-items:baseline;gap:var(--space-3);font-family:var(--font-display);font-size:clamp(26px,2.6vw,36px);font-weight:600;letter-spacing:-.025em;line-height:1.05}.count{color:var(--muted);font-size:.58em;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums}.cat-head p{margin-top:6px;color:var(--muted);font-size:14px}.cat-note{flex:0 0 auto;padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--muted);font-size:10px;font-weight:600;letter-spacing:0;line-height:1}.cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-5)}.card{display:flex;grid-column:span 4;min-width:0;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--paper-light);color:inherit;text-decoration:none;transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}.card-wide{grid-column:span 6}.card:hover{border-color:var(--line-strong);box-shadow:0 14px 30px #1d1b1712;transform:translateY(-4px)}.card-media{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-bottom:1px solid var(--line);background:var(--paper-deep)}.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .25s var(--ease)}.card:hover .card-media img{transform:scale(1.035)}.card-badge{position:absolute;top:var(--space-3);left:var(--space-3);z-index:2;padding:6px 10px;border-radius:var(--radius-pill);background:var(--butter);color:var(--ink);font-size:9px;font-weight:700;letter-spacing:0;line-height:1}.card-body{display:flex;flex:1;flex-direction:column;padding:var(--space-4) var(--space-4) var(--space-5)}.card-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3);color:var(--muted);font-size:10px;font-weight:600;letter-spacing:0;line-height:1.4}.card-meta time{flex:0 0 auto;font-variant-numeric:tabular-nums}.card h4{margin-bottom:var(--space-2);font-family:var(--font-display);font-size:clamp(21px,1.8vw,26px);font-weight:600;letter-spacing:-.025em;line-height:1.1;overflow-wrap:break-word}.card-wide h4{font-size:clamp(24px,2.2vw,32px)}.card p{margin-bottom:var(--space-5);color:var(--muted);font-size:14px;line-height:1.5}.card-go{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--line);font-size:11px;font-weight:600;letter-spacing:0}.workshop{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--line);color:var(--muted);font-size:13px}.workshop strong{color:var(--ink-soft);font-weight:600}.text-link{flex:0 0 auto;color:var(--ink);font-size:12px;font-weight:600;letter-spacing:0;text-decoration:none}.text-link:hover{text-decoration:underline;text-underline-offset:4px}.studio{padding-block:clamp(80px,9vw,128px);background:var(--ink);color:var(--paper)}.studio .eyebrow{color:var(--paper-shadow)}.studio .eyebrow-index{color:var(--paper)}.studio-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px)}.studio h2{max-width:12ch;font-family:var(--font-display);font-size:clamp(42px,4.9vw,72px);font-weight:700;letter-spacing:-.05em;line-height:.97}.studio .soft{color:#b9b1a2}.studio-copy{padding-top:4px}.studio-lead{max-width:30ch;margin-bottom:var(--space-5);color:var(--paper);font-size:clamp(20px,1.9vw,26px);line-height:1.45;letter-spacing:-.015em}.studio-copy>p:not(.studio-lead){max-width:52ch;color:#c8c1b3;font-size:15px;line-height:1.7}.studio-stamp{display:inline-flex;align-items:center;gap:var(--space-3);margin-top:var(--space-7);padding:var(--space-3) var(--space-4);border:1px dashed rgba(242,237,227,.35);border-radius:var(--radius-pill);transform:rotate(-3deg)}.stamp-207{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.05em;line-height:1}.stamp-meta{color:#b9b1a2;font-size:9px;font-weight:600;letter-spacing:0;line-height:1.45}.facts{margin-top:var(--space-6);border-top:1px solid rgba(242,237,227,.2)}.facts>div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--space-4);padding:13px 0;border-bottom:1px solid rgba(242,237,227,.2)}.facts dt{color:#b9b1a2;font-size:10px;font-weight:600;letter-spacing:0;line-height:1.5}.facts dd{color:var(--paper);font-size:14px;line-height:1.5}.quote{max-width:860px;margin-top:clamp(52px,7vw,88px);padding-top:var(--space-5);border-top:1px solid rgba(242,237,227,.2)}.quote p{margin-bottom:var(--space-4);font-family:var(--font-display);font-size:clamp(24px,2.8vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.2}.quote cite{color:#b9b1a2;font-size:11px;font-style:normal;font-weight:600;letter-spacing:0}.also{padding-block:clamp(56px,7vw,92px);border-block:1px solid var(--line);background:var(--paper-deep)}.also-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,56px)}.also-mark{display:grid;width:88px;height:88px;place-items:center;border-radius:24px;background:var(--paper-deep);box-shadow:5px 6px #1d1b171f;color:var(--ink);font-family:var(--font-display);font-size:44px;font-weight:800;line-height:1;transform:rotate(-4deg)}.also-copy .eyebrow{margin-bottom:var(--space-2)}.also h2{margin-bottom:var(--space-2);font-family:var(--font-display);font-size:clamp(32px,3.4vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1}.also-copy>p:last-child{max-width:56ch;color:var(--muted);font-size:14px;line-height:1.6}.contact{padding-block:clamp(72px,9vw,120px)}.contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:clamp(32px,6vw,80px)}.contact h2{max-width:13ch;font-family:var(--font-display);font-size:clamp(38px,4.8vw,66px);font-weight:700;letter-spacing:-.05em;line-height:.98}.contact-copy p{max-width:34ch;margin-bottom:var(--space-4);color:var(--muted);font-size:14px}.email{display:inline-block;max-width:100%;padding-bottom:4px;border-bottom:1px solid var(--line-strong);font-family:var(--font-display);font-size:clamp(23px,3vw,40px);font-weight:600;letter-spacing:-.035em;line-height:1.15;overflow-wrap:anywhere;text-decoration:none;transition:border-color .2s var(--ease),color .2s var(--ease)}.email:hover{border-color:var(--accent);color:var(--accent-ink)}.footer{padding-top:var(--space-7);border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-6);padding-bottom:clamp(40px,6vw,72px)}.footer-brand p{max-width:26ch;margin-top:var(--space-4);color:var(--muted);font-size:13px;line-height:1.6}.footer-col h2{margin-bottom:var(--space-2);color:var(--muted);font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:0;line-height:1.5}.footer-col a{display:block;width:fit-content;padding:4px 0;font-size:13px;line-height:1.5;text-decoration:none}.footer-col a:hover{text-decoration:underline;text-underline-offset:4px}.footer-word{display:block;width:min(100%,760px);height:auto;margin-top:var(--space-4);user-select:none}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0 var(--space-6);border-top:1px solid var(--line);color:var(--muted);font-size:11px;letter-spacing:.03em}.footer-bottom a{text-decoration:none}.footer-bottom a:hover{text-decoration:underline}html:lang(ko) body{word-break:keep-all}html:lang(ko) .wm-207,html:lang(ko) .wm-studio{font-family:Gabarito,Apple SD Gothic Neo,Malgun Gothic,sans-serif}html:lang(ko) .section-head h2,html:lang(ko) .studio h2,html:lang(ko) .contact h2{letter-spacing:-.06em;line-height:1.08}html:lang(ko) .card h4,html:lang(ko) .also h2,html:lang(ko) .quote p{letter-spacing:-.03em}html:lang(ko) .kicker,html:lang(ko) .latest-label,html:lang(ko) .card-meta,html:lang(ko) .cat-note,html:lang(ko) .fact span,html:lang(ko) .eyebrow{letter-spacing:.04em}@keyframes reveal-in{0%{translate:0 24px}to{translate:0 0}}@supports (animation-timeline: view()){.reveal{animation:reveal-in .7s var(--ease) both;animation-timeline:view();animation-range:entry 2% entry 24%}}@media(max-width:1080px){.wrap{width:calc(100% - 64px)}.card{grid-column:span 6}.cards .card:nth-child(n+3){grid-column:span 4}.cards-classroom .card{grid-column:span 6}}@media(max-width:900px){.hero{padding-top:104px}.hero-stage{min-height:600px}.section-head,.studio-grid,.contact-grid{grid-template-columns:1fr;gap:var(--space-6)}.section-note{max-width:52ch;padding-bottom:0}.studio h2{max-width:15ch}.studio-copy{max-width:62ch}.also-inner{grid-template-columns:auto minmax(0,1fr)}.also-inner>.btn{grid-column:2;justify-self:start}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.footer-brand{grid-column:1 / -1}}@media(max-width:860px){.cards .card,.cards .card:nth-child(n+3),.cards-classroom .card{grid-column:span 6}}@media(max-width:700px){.dock{top:10px;width:calc(100% - 24px);height:56px;gap:var(--space-2);padding:0 var(--space-2) 0 var(--space-3)}.brand-num{font-size:17px}.brand-word{display:none}.dock-nav{gap:14px;font-size:12px}.dock-nav .nav-opt{display:none}.x-link,.lang-link{min-width:36px;height:36px}.lang-link{min-width:42px}.wrap{width:calc(100% - 40px)}.hero{padding-top:78px;padding-bottom:var(--space-5)}.hero-top{align-items:flex-start;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}.kicker{font-size:9px;letter-spacing:.08em}.latest{gap:8px;font-size:11px}.latest time{display:none}.hero-stage{min-height:600px}.mimi{top:78px;right:4%;bottom:auto;height:320px}.hero-stage:before{top:-4%;right:-5vw;width:110vw}.hero-stage:after{top:6%;right:-4vw;width:90vw}.wm-207{font-size:clamp(112px,30vw,132px)}.wm-studio{font-size:clamp(54px,15.2vw,68px)}.wordmark{padding-top:0}.hero-foot{width:100%;gap:14px;padding-bottom:4px}.intro{font-size:15.5px;line-height:1.5}.hero-actions{gap:var(--space-2)}.btn{min-height:48px;padding:0 16px;font-size:13px}.hero-note{font-size:10.5px}.stage-mark{top:2px;right:0;font-size:8px;letter-spacing:.08em}.stage-hint{display:none}.facts-strip{grid-template-columns:1fr 1fr;margin-top:var(--space-6)}.fact{padding:var(--space-4) var(--space-3) var(--space-4) 0}.fact+.fact{padding-left:var(--space-3)}.fact:nth-child(3){padding-left:0;border-left:0;border-top:1px solid var(--line)}.fact:nth-child(4){border-top:1px solid var(--line)}.fact strong{font-size:32px}.fact span{font-size:9px}.section{padding-block:var(--space-8)}.section-head h2{font-size:clamp(38px,11vw,52px)}.section-note{font-size:14px}.cat-head{align-items:flex-start;flex-direction:column;gap:var(--space-3)}.cat-head h3{font-size:26px}.cat-note{align-self:flex-start}.cards{grid-template-columns:1fr;gap:var(--space-4)}.cards .card,.cards .card-wide,.cards .card:nth-child(n+3),.cards-classroom .card{grid-column:1 / -1}.card h4,.card-wide h4{font-size:23px}.card-body{padding:var(--space-4)}.workshop{align-items:flex-start;flex-direction:column;gap:var(--space-3);font-size:12px}.studio{padding-block:var(--space-8)}.studio h2{font-size:clamp(36px,10.5vw,50px)}.studio-lead{font-size:20px}.studio-stamp{margin-top:var(--space-5)}.facts>div{grid-template-columns:96px minmax(0,1fr);gap:var(--space-3)}.quote{margin-top:var(--space-7)}.also{padding-block:var(--space-7)}.also-inner{grid-template-columns:1fr;gap:var(--space-4)}.also-mark{width:64px;height:64px;border-radius:18px;font-size:32px}.also-inner>.btn{grid-column:auto}.contact{padding-block:var(--space-8)}.contact h2{font-size:clamp(32px,9.5vw,44px)}.email{font-size:clamp(21px,6.2vw,28px)}.footer{padding-top:var(--space-6)}.footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-5);padding-bottom:var(--space-7)}.footer-brand{grid-column:1 / -1}.footer-brand .brand-word{display:inline}.footer-word{width:100%;margin-top:var(--space-3)}.footer-bottom{align-items:flex-start;flex-direction:column;gap:var(--space-2);padding-bottom:var(--space-5)}}@media(max-width:380px){.wm-207{font-size:108px}.wm-studio{font-size:52px}.btn{padding-inline:13px;font-size:12px}.dock-nav{gap:10px}}:lang(ko) body,:lang(ko) p,:lang(ko) h1,:lang(ko) h2,:lang(ko) h3,:lang(ko) h4{word-break:keep-all}h1,h2,h3{text-wrap:balance}p,dd,.row-desc{text-wrap:pretty}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}.brand,.email,.dock-nav a,.x-link,.lang-link,.footer-col a,.footer-bottom a,.text-link,.latest,.btn{min-height:44px}.email,.dock-nav a,.footer-col a,.footer-bottom a,.text-link{display:inline-flex;align-items:center}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}html{touch-action:manipulation}.dock-nav a,.footer-col a{min-width:44px;justify-content:center}.vh{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.count{font-variant-numeric:tabular-nums}.feature{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--space-6);align-items:end;margin-bottom:var(--space-6);color:inherit;text-decoration:none}.feature .card-media{border-radius:var(--radius-m);overflow:hidden;background:var(--paper-deep)}.feature .card-media img{display:block;width:100%;height:auto}.feature-meta{display:flex;gap:var(--space-3);margin:0 0 var(--space-3);color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}.feature-meta span{color:var(--accent);font-weight:600}.feature-body p:last-child{margin:0;font-size:clamp(20px,2vw,26px);line-height:1.3;letter-spacing:-.015em}.rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-strong)}.rows li{border-bottom:1px solid var(--line)}.row{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto 1.5rem;gap:var(--space-5);align-items:baseline;min-height:56px;padding:var(--space-4) 0;color:inherit;text-decoration:none}.row-name{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.01em}.row-desc{color:var(--muted)}.row time{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}.row-go{color:var(--muted);text-align:right}@media(hover:hover){.row:hover .row-name,.row:hover .row-go{color:var(--accent)}}@media(max-width:700px){.feature{grid-template-columns:1fr;gap:var(--space-4)}.row{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-4)}.row-name{grid-column:1}.row time{grid-column:2;grid-row:1}.row-desc{grid-column:1 / -1;font-size:15px}.row-go{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.card:hover,.latest:hover,.btn:hover,.card:hover .card-media img{transform:none}}.walk{position:relative;padding-block:clamp(64px,9vw,128px) 0}.walk-head h2{margin:0;font-family:var(--font-display);font-size:clamp(2.25rem,5vw,4rem);font-weight:700;line-height:.98;letter-spacing:-.035em;text-wrap:balance}.walk-note{max-width:46ch;margin:var(--space-4) 0 0;color:var(--muted);font-size:17px;line-height:1.5;text-wrap:pretty}.walk-scroller{position:relative}.walk-stage{position:relative;width:min(1240px,calc(100% - 96px));margin:var(--space-8) auto 0;display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:var(--space-6);align-items:start}.walk-track{grid-column:2;grid-row:1;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-4)}.walker{grid-column:1;grid-row:1 / span 2;position:sticky;top:104px}.walker-still{display:block;width:100%;height:auto}.walk-wall,.walker-layer,.walker-floor,.walk-rail{display:none}.walk-end{grid-column:2;padding:var(--space-5) 0 0}.walk-end-t{margin:0;font-family:var(--font-display);font-size:1.4rem;font-weight:700;letter-spacing:-.02em}.walk-end-p{margin:var(--space-2) 0 var(--space-3);color:var(--muted)}.poster{position:relative;display:flex;flex-direction:column;gap:var(--space-3);height:100%;padding:22px 24px 20px;border:1px solid rgba(45,36,26,.12);border-radius:2px;background:linear-gradient(180deg,#fdfcf8,#f8f6f0);color:inherit;text-decoration:none;isolation:isolate}.poster:before{position:absolute;top:-7px;left:50%;width:64px;height:15px;margin-left:-32px;border-radius:1px;background:#d6cbb28c;content:"";transform:rotate(-1.5deg)}.poster:before{opacity:.75;transition:opacity .4s var(--ease)}.poster:after{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#fffffd;opacity:0;content:"";pointer-events:none;transition:opacity .4s var(--ease)}.poster:hover:after,.poster:focus-visible:after{opacity:1}.poster:hover:before,.poster:focus-visible:before{opacity:1}.poster:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.poster-head,.poster-body{display:flex;flex-direction:column;gap:6px;min-width:0}.poster-tag{display:flex;align-items:baseline;gap:10px;color:var(--muted);font-size:13px;font-weight:500}.poster-n{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}.poster-name{font-family:var(--font-display);font-size:clamp(1.45rem,2.5vw,2.3rem);font-weight:700;line-height:1.04;letter-spacing:-.03em;text-wrap:balance}.poster-desc{max-width:44ch;color:var(--ink-soft);line-height:1.45;text-wrap:pretty}.poster-go{color:var(--accent);font-weight:600}.walk.is-live .walk-stage{position:sticky;top:0;display:block;width:100%;height:100vh;height:100svh;margin:0;overflow:hidden;overflow:clip;contain:layout paint}.walk.is-live .walk-stage:before{position:absolute;left:calc(var(--mx) + var(--mw) * .5);bottom:calc(var(--mb) - 22svh);width:calc(var(--mh) * 2.1);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--paper-light) 0%,rgba(251,251,250,.6) 55%,rgba(251,251,250,0) 100%);content:"";transform:translate(-50%);pointer-events:none}.walk.is-live .walk-wall,.walk.is-live .walk-track{position:absolute;top:0;left:0;display:block;width:0;height:0;margin:0;padding:0;transform-origin:0 0;pointer-events:none}.walk.is-live .walk-wall{z-index:0}.walk.is-live .walk-track{z-index:1}.walk.is-live .wall-face{position:absolute;background:linear-gradient(180deg,#e8e7e259,#e8e7e2d9 70%,#e2e0daf2)}.walk.is-live .wall-ledge{position:absolute;background:#2d241a29}.walk.is-live .wall-seams{position:absolute;display:block;background:linear-gradient(90deg,rgba(45,36,26,.12) 0 1px,transparent 1px) 0 0 / 200px 100% repeat-x;will-change:transform}.walk.is-live .stop{position:absolute;top:0;left:0;width:520px;opacity:0;pointer-events:none;transform-origin:0 0;will-change:transform,opacity}.walk.is-live .stop.is-on{pointer-events:auto}.walk.is-live .poster{height:auto;gap:16px;padding:34px 40px 30px;background:linear-gradient(180deg,#f8f6ef,#f1eee5)}.walk.is-live .poster-head{gap:10px}.walk.is-live .poster-name{font-size:clamp(2.2rem,3.9vw,3.6rem)}.walk.is-live .poster-desc{max-width:30ch;font-size:clamp(19px,1.6vw,23px)}.walk.is-live .poster-go{font-size:17px}.walk.is-live .stop.is-here .poster:after,.walk.is-live .stop.is-here .poster:before{opacity:1}.walk.is-live .walker{position:absolute;top:auto;left:var(--mx);bottom:var(--mb);z-index:3;width:var(--mw);height:var(--mh);opacity:0;pointer-events:none}.walk.is-live .walker-layer{position:absolute;inset:0;display:block;overflow:hidden}.walk.is-live .walker-layer img{display:block;width:auto;height:100%;max-width:none;will-change:transform}.walk.is-live .walker-still{display:none}.walk.is-live .walker-floor{position:absolute;left:12%;bottom:-2.2%;z-index:-1;display:block;width:72%;height:5.5%;border-radius:50%;background:radial-gradient(closest-side,#2d241a42,#2d241a1a 60%,#2d241a00);transform-origin:50% 50%}.walk.is-live .walk-rail{position:absolute;top:0;left:0;z-index:2;display:flex;gap:6px;margin:0;padding:0;list-style:none}.walk.is-live .walk-rail li{position:relative;flex:1;min-width:0;padding-top:12px}.walk.is-live .walk-rail li:before,.walk.is-live .rail-fill{position:absolute;top:0;left:0;width:100%;height:2px;border-radius:2px;content:""}.walk.is-live .walk-rail li:before{background:var(--line)}.walk.is-live .rail-fill{background:var(--ink);transform:scaleX(0);transform-origin:0 50%}.walk.is-live .rail-name{display:block;overflow:hidden;color:var(--muted);font-size:12px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;transition:color .3s var(--ease)}.walk.is-live .walk-rail li.is-here .rail-name{color:var(--ink)}.walk.is-live .walk-end{position:absolute;top:0;left:0;z-index:2;width:420px;padding:0;opacity:0;pointer-events:none;will-change:transform,opacity}.walk.is-live .walk-end.is-on{pointer-events:auto}.walk.is-live .walk-end-t{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1;letter-spacing:-.035em}.walk.is-live .walk-end-p{margin:var(--space-3) 0 var(--space-4);font-size:17px}.walk.is-live .walk-stage{--mh: min(580px, calc(100svh - 300px) );--mw: calc(var(--mh) * .535);--mx: calc(87% - var(--mw) * .5);--mb: 24px}@media(max-width:700px){.walk-head h2{font-size:clamp(2rem,9vw,2.6rem)}.walk-note{font-size:16px}.walk-stage{width:calc(100% - 40px);margin-top:var(--space-6);grid-template-columns:1fr}.walk-track{grid-column:1;grid-row:2}.walker{position:static;grid-row:1;width:42%;max-width:170px}.walk-end{grid-column:1}.poster{padding:18px 18px 16px}.walk.is-live .walk-stage{--mh: 320px;--mx: calc(96% - var(--mw));--mb: 20px}.walk.is-live .poster{display:flex;align-items:stretch;gap:6px;padding:14px 16px 12px}.walk.is-live .poster:before{top:-6px;width:48px;height:12px;margin-left:-24px}.walk.is-live .poster-head,.walk.is-live .poster-body{gap:2px}.walk.is-live .poster-tag{font-size:12px}.walk.is-live .poster-name{font-size:1.3rem}.walk.is-live .poster-desc{font-size:15px;line-height:1.4}.walk.is-live .poster-go{font-size:14px}.walk.is-live.is-tight .poster{padding:10px 14px 9px}.walk.is-live.is-tight .poster-name{font-size:1.15rem}.walk.is-live.is-tight .poster-desc{font-size:14px;line-height:1.35}.walk.is-live.is-tight .poster-go{font-size:13px}.walk.is-live .rail-name{display:none}.walk.is-live .walk-rail li{padding-top:0;height:10px}.walk.is-live .walk-end-p{font-size:15px}.walk.is-live.is-list .walk-rail{flex-direction:column;gap:10px}.walk.is-live.is-list .walk-rail li{flex:none;height:auto;padding:0 0 9px}.walk.is-live.is-list .walk-rail li:before,.walk.is-live.is-list .rail-fill{top:auto;bottom:0}.walk.is-live.is-list .rail-name{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em}}:root{--night: #0d1333;--night-2: #141a45;--violet: #1b1747;--gold: #e9c46a;--paper: var(--night);--paper-light: #182052;--paper-deep: #19204d;--paper-shadow: #0a0f29;--ink: #f4ecd8;--ink-soft: #e4dccb;--muted: #b9b4cc;--line: rgba(244, 236, 216, .16);--line-strong: rgba(244, 236, 216, .34);--accent: var(--gold);--accent-ink: #f3d68f;--font-display: "DM Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;--star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e9c46a' d='M12 1c.4 5.6 2.6 8 11 11-8.4 3-10.6 5.4-11 11-.4-5.6-2.6-8-11-11 8.4-3 10.6-5.4 11-11z'/%3E%3C/svg%3E");color-scheme:dark}body{background:radial-gradient(1.5px 1.5px at 12% 18%,rgba(233,196,106,.7),transparent 60%),radial-gradient(1px 1px at 68% 42%,rgba(244,236,216,.55),transparent 60%),radial-gradient(1.5px 1.5px at 38% 76%,rgba(233,196,106,.55),transparent 60%),radial-gradient(1px 1px at 88% 88%,rgba(244,236,216,.45),transparent 60%),var(--night);background-size:520px 680px,520px 680px,520px 680px,520px 680px,auto}::selection{background:#e9c46a66;color:#fff}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.brand{gap:9px}.brand-star{width:18px;height:18px;flex:none;fill:var(--gold)}.brand-word{font-family:DM Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:.18em;line-height:1;text-transform:uppercase;color:var(--ink)}.dock{background:var(--night);border-color:#f4ecd829}.footer-brand .brand-star{width:22px;height:22px}.footer-brand .brand-word{font-size:17px}.kicker-dot{width:11px;height:11px;border-radius:0;background:var(--star) center / contain no-repeat}.eyebrow:before{display:inline-block;width:.95em;height:.95em;margin-right:.55em;vertical-align:-.1em;background:var(--star) center / contain no-repeat;content:""}.hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip}.hero-paint{position:absolute;inset:0;z-index:-2}.hero-paint img{width:100%;height:100%;object-fit:cover;object-position:72% 100%}.hero:after{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0a0e28d6,#0a0e289e 34%,#0a0e2800 60%),linear-gradient(0deg,var(--night) 0%,rgba(13,19,51,0) 16%);content:"";pointer-events:none}.hero-stage{cursor:auto}.hero-stage:before,.hero-stage:after{display:none}.mimi{visibility:hidden}.wordmark{display:flex;flex-wrap:nowrap;gap:0 .5em;margin-top:clamp(24px,6vh,72px);padding-top:0;font-family:DM Sans,sans-serif;font-weight:700;letter-spacing:.14em;line-height:1;color:var(--ink);text-shadow:0 2px 24px rgba(8,10,32,.45);white-space:nowrap}.wm-207,.wm-studio,html:lang(ko) .wm-207,html:lang(ko) .wm-studio{display:inline;margin:0;padding:0;font-family:DM Sans,sans-serif;font-size:clamp(56px,7.2vw,112px);letter-spacing:inherit}.hero-sub{margin-top:clamp(14px,1.6vw,22px);padding-left:.2em;color:#efd9a0;font-family:DM Sans,sans-serif;font-size:clamp(13px,1.25vw,18px);font-weight:500;letter-spacing:.34em;text-transform:uppercase}html:lang(ko) .hero-sub{letter-spacing:.24em}.intro{color:var(--ink-soft)}.hero-note{color:#cfc8dc}.latest{background:#10163cd1}.latest:hover{background:#182052eb}.btn-primary,.btn-primary:hover{color:#121a44}.btn-ghost{background:#0d13338c}.btn-ghost:hover{background:#f4ecd81a}.studio,.contact{position:relative;isolation:isolate}.studio{background:var(--violet);color:var(--ink)}.sec-paint{position:absolute;inset:0;z-index:-2;overflow:hidden}.sec-paint img{width:100%;height:100%;object-fit:cover;object-position:85% 50%}.studio:before,.contact:before{position:absolute;inset:0;z-index:-1;content:"";pointer-events:none}.studio:before{background:linear-gradient(180deg,var(--night) 0%,rgba(20,18,58,.88) 14%,rgba(20,18,58,.86) 86%,var(--night) 100%)}.contact{padding-block:var(--space-9);scroll-margin-top:104px}.contact h2,.contact .email{scroll-margin-top:112px}.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.footer-col a{justify-content:flex-start;min-width:0}.contact:before{background:linear-gradient(180deg,var(--night) 0%,rgba(12,16,46,.84) 18%,rgba(12,16,46,.8) 82%,var(--night) 100%)}.paint-roof img{object-position:80% 60%}.studio-stamp{border-color:#e9c46a80}.stamp-207{color:var(--gold)}.quote p,.studio-lead,.facts dd,.studio .eyebrow{color:var(--ink)}.studio .eyebrow-index{color:var(--muted)}.studio .soft{color:#cdc4e2}.also{background:var(--night-2)}.also-mark{background:var(--paper-light);color:var(--gold);box-shadow:5px 6px #00000059}.card-badge{color:#121a44}.footer-word{opacity:.1}.poster{--ink-soft: #3b3654;--muted: #5b5672;--accent: #7a5a12;color:#1b1838}.poster:focus-visible{outline-color:var(--gold)}.walk-paint{display:none}.walk.is-live .walk-paint{position:absolute;inset:0;z-index:-1;display:block;pointer-events:none}.walk.is-live .walk-paint img{width:100%;height:100%;object-fit:cover;object-position:30% 40%}.walk.is-live .walk-stage{background:var(--night)}.walk.is-live .walk-stage:before{background:radial-gradient(closest-side,#e9c46a29,#e9c46a0f 55%,#e9c46a00)}.walk.is-live .wall-face{background:linear-gradient(180deg,#141a4514,#141a4557 70%,#0d133399)}.walk.is-live .wall-ledge{background:#e9c46a66}.walk.is-live .wall-seams{background:linear-gradient(90deg,rgba(233,196,106,.2) 0 1px,transparent 1px) 0 0 / 200px 100% repeat-x}.walk.is-live .poster{background:radial-gradient(120% 90% at 20% 10%,#fffcf0e6,#fffcf000 60%),linear-gradient(175deg,#f6eed8,#ece2c6);box-shadow:0 1px #ffffff80 inset,0 18px 40px #0406148c}.walk.is-live .poster:after{background:linear-gradient(175deg,#fbf5e2,#f3e9cf)}.walk.is-live .poster:before{background:#e9c46a80}.walk.is-live .walker-floor{background:radial-gradient(closest-side,#04061499,#04061440 60%,#04061400)}.walk.is-live .rail-fill{background:var(--gold)}@media(max-width:700px){.dock .brand-word{display:inline;font-size:12px;letter-spacing:.13em}.brand-star{width:16px;height:16px}.hero-paint{bottom:auto;height:640px}.hero-paint img{object-position:80% 100%}.hero:after{background:linear-gradient(180deg,rgba(10,14,40,.88) 0%,rgba(10,14,40,.6) 30%,rgba(10,14,40,0) 46%,rgba(13,19,51,0) 74%,var(--night) 640px)}.wordmark{margin-top:10px}.wm-207,.wm-studio,html:lang(ko) .wm-207,html:lang(ko) .wm-studio{font-size:clamp(36px,10.6vw,64px)}.hero-sub{font-size:12px;letter-spacing:.28em}.sec-paint img{object-position:78% 50%}.contact{padding-block:var(--space-8)}} +@font-face{font-family:DM Sans;src:url(/assets/fonts/dm-sans-500-latin.woff2) format("woff2");font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:DM Sans;src:url(/assets/fonts/dm-sans-700-latin.woff2) format("woff2");font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Gabarito;src:url(/assets/fonts/gabarito-latin.woff2) format("woff2");font-style:normal;font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Instrument Sans;src:url(/assets/fonts/instrument-sans-latin.woff2) format("woff2");font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--paper: #f4f4f2;--paper-light: #fbfbfa;--paper-deep: #e8e8e5;--paper-shadow: #dcdcd8;--ink: #171717;--ink-soft: #333331;--muted: #5c5c58;--line: rgba(23, 23, 23, .13);--line-strong: rgba(23, 23, 23, .3);--accent: #2c5a45;--accent-ink: #1f4433;--butter: #e9b949;--sage: #a8bda0;--coral: #cd7c5c;--blush: #e6aaa5;--sky: #a9c3cb;--font-display: "Gabarito", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;--font-body: "Instrument Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--space-9: 96px;--space-10: 128px;--radius-s: 10px;--radius-m: 18px;--radius-l: 28px;--radius-pill: 999px;--ease: cubic-bezier(.23, 1, .32, 1);color-scheme:light}*,*:before,*:after{box-sizing:border-box}html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;font-synthesis:none;-webkit-font-smoothing:antialiased}::selection{background:#cfe0d6;color:var(--ink)}img,picture,canvas{display:block;max-width:100%}a{color:inherit;text-underline-offset:4px}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:4px}h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}.skip{position:fixed;top:-100px;left:20px;z-index:100;padding:14px 18px;border-radius:0 0 var(--radius-s) var(--radius-s);background:var(--ink);color:var(--paper);text-decoration:none}.skip:focus{top:0}.dock{position:fixed;top:var(--space-4);left:50%;z-index:50;display:flex;width:min(1240px,calc(100% - 32px));height:64px;align-items:center;justify-content:space-between;gap:var(--space-5);padding:0 var(--space-3) 0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--paper);transform:translate(-50%);transition:box-shadow .25s var(--ease),background-color .25s var(--ease)}.brand{display:inline-flex;flex-shrink:0;align-items:center;gap:10px;color:inherit;text-decoration:none}.brand-num{padding:4px 6px 5px;border:1.5px solid currentColor;border-radius:7px;font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.06em;line-height:1}.brand-word{font-size:11px;font-weight:600;letter-spacing:0;line-height:1}.dock-nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);margin-left:auto;font-size:14px;font-weight:500}.dock-nav a{padding:10px 2px;text-decoration:none}.dock-nav a:hover{text-decoration:underline;text-decoration-thickness:1px}.dock-actions{display:flex;flex-shrink:0;align-items:center;gap:var(--space-2)}.x-link,.lang-link{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius-pill);font-size:12px;font-weight:600;line-height:1;text-decoration:none;transition:background-color .2s var(--ease),border-color .2s var(--ease)}.lang-link{min-width:48px}.x-link:hover,.lang-link:hover{border-color:var(--ink);background:var(--paper-deep)}.hero{padding-top:104px;padding-bottom:36px}.hero-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);margin-bottom:clamp(20px,2.4vw,34px)}.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:0;line-height:1.5}.kicker-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--accent)}.latest{display:inline-flex;align-items:center;gap:10px;padding:7px 12px 7px 7px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--paper-light);font-size:12px;line-height:1;text-decoration:none;transition:background-color .2s var(--ease),transform .2s var(--ease)}.latest:hover{background:var(--paper-light);transform:translateY(-1px)}.latest-label{padding:5px 9px;border-radius:var(--radius-pill);background:var(--ink);color:var(--paper);font-size:10px;font-weight:600;letter-spacing:0}.latest-name{font-weight:600}.latest time{color:var(--muted);font-variant-numeric:tabular-nums}.latest-arrow{font-size:14px}.hero-stage{position:relative;display:flex;min-height:clamp(540px,calc(100svh - 320px),640px);flex-direction:column;align-items:flex-start;isolation:isolate;cursor:grab;touch-action:pan-y pinch-zoom}.hero-stage.is-dragging{cursor:grabbing}.hero-stage:before{position:absolute;top:-2%;right:-3%;z-index:0;width:min(60vw,760px);aspect-ratio:1;border-radius:50%;display:none;content:"";pointer-events:none}.hero-stage:after{position:absolute;top:8%;right:2.5%;z-index:0;width:min(46vw,580px);aspect-ratio:1;border:1px solid var(--line);border-radius:50%;content:"";pointer-events:none}.wordmark{position:relative;z-index:1;margin:0;padding-top:3px;font-family:var(--font-display);font-weight:800;letter-spacing:-.065em;line-height:.78;text-transform:uppercase;pointer-events:none;-webkit-user-select:none;user-select:none}.wm-207{display:block;font-size:clamp(176px,23.2vw,324px)}.wm-studio{display:block;margin-top:-.015em;padding-left:.055em;font-size:clamp(86px,13.4vw,184px);letter-spacing:-.055em;white-space:nowrap}.wm-dot{color:inherit}.hero-foot{position:relative;z-index:3;display:flex;width:min(100%,500px);flex-direction:column;gap:18px;margin-top:auto;padding-bottom:7px}.intro{max-width:42ch;color:var(--ink-soft);font-size:clamp(16px,1.24vw,18px);line-height:1.55;letter-spacing:-.005em}.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}.hero-note{color:var(--muted);font-size:11px;letter-spacing:.02em}.stage-mark,.stage-hint{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:9px;font-weight:600;letter-spacing:0;line-height:1.4;pointer-events:none;-webkit-user-select:none;user-select:none}.stage-mark{top:6px;right:2px}.stage-mark b{color:var(--ink);font-weight:600;letter-spacing:.02em}.stage-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}.stage-hint{right:2px;bottom:10px}.btn{display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:10px;padding:0 22px;border:1px solid transparent;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1;text-decoration:none;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--ink);color:var(--paper)}.btn-primary:hover{background:#000}.btn-ghost{border-color:var(--line-strong);background:transparent;color:var(--ink)}.btn-ghost:hover{border-color:var(--ink);background:var(--paper-light)}.btn-arrow{font-size:16px;font-weight:400;line-height:1}.mimi{position:absolute;right:13%;bottom:0;z-index:1;height:100%;aspect-ratio:431 / 990;pointer-events:none;translate:var(--mimi-x, 0) var(--mimi-y, 0);transition:translate .25s var(--ease)}.mimi img{display:block;width:100%;height:auto}.mimi:after{position:absolute;bottom:-1%;left:18%;z-index:-1;width:70%;height:4.5%;border-radius:50%;background:radial-gradient(closest-side,#2d241a38,#2d241a00);content:""}@keyframes mimi-float{0%,to{transform:translateY(-1.2%)}50%{transform:translateY(-2.6%)}}@keyframes mimi-shadow{0%,to{opacity:1;transform:scaleX(1)}50%{opacity:.75;transform:scaleX(.92)}}.scene{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}.scene-poster{position:absolute;inset:0;z-index:2;background-image:url(/assets/clay-scene-poster.webp);background-position:center;background-repeat:no-repeat;background-size:100% 100%;opacity:1;pointer-events:none;transition:opacity .25s var(--ease),visibility .25s}@media(min-width:701px)and (max-width:1196px){.scene-poster{background-image:url(/assets/clay-scene-poster-medium.webp)}}@media(max-width:700px){.scene-poster{background-image:url(/assets/clay-scene-poster-mobile.webp)}}.hero-stage.is-live .scene-poster{visibility:hidden;opacity:0}#clay-scene{position:absolute;inset:0;z-index:1;width:100%;height:100%;color:transparent;font-size:0;line-height:0;touch-action:pan-y pinch-zoom}.facts-strip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(28px,3.5vw,44px);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}.fact{display:flex;min-width:0;flex-direction:column;gap:4px;padding:var(--space-5) var(--space-4) var(--space-5) 0}.fact+.fact{padding-left:var(--space-5);border-left:1px solid var(--line)}.fact strong{font-family:var(--font-display);font-size:clamp(32px,3.2vw,46px);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}.fact span{color:var(--muted);font-size:10px;font-weight:600;letter-spacing:0;line-height:1.4}.section{padding-block:clamp(80px,9vw,128px)}.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-4);color:var(--muted);font-size:10px;font-weight:600;letter-spacing:0;line-height:1.5}.eyebrow-index{color:var(--ink);font-variant-numeric:tabular-nums}.section-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:clamp(28px,5vw,72px);margin-bottom:clamp(40px,5vw,64px)}.section-head h2{font-family:var(--font-display);font-size:clamp(44px,5.2vw,76px);font-weight:700;letter-spacing:-.05em;line-height:.95}.section-note{max-width:38ch;padding-bottom:6px;color:var(--muted);font-size:15px;line-height:1.6}.category+.category{margin-top:clamp(52px,6vw,84px)}.cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-5);margin-bottom:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--ink)}.cat-head h3{display:flex;align-items:baseline;gap:var(--space-3);font-family:var(--font-display);font-size:clamp(26px,2.6vw,36px);font-weight:600;letter-spacing:-.025em;line-height:1.05}.count{color:var(--muted);font-size:.58em;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums}.cat-head p{margin-top:6px;color:var(--muted);font-size:14px}.cat-note{flex:0 0 auto;padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--muted);font-size:10px;font-weight:600;letter-spacing:0;line-height:1}.cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-5)}.card{display:flex;grid-column:span 4;min-width:0;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--paper-light);color:inherit;text-decoration:none;transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}.card-wide{grid-column:span 6}.card:hover{border-color:var(--line-strong);box-shadow:0 14px 30px #1d1b1712;transform:translateY(-4px)}.card-media{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-bottom:1px solid var(--line);background:var(--paper-deep)}.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .25s var(--ease)}.card:hover .card-media img{transform:scale(1.035)}.card-badge{position:absolute;top:var(--space-3);left:var(--space-3);z-index:2;padding:6px 10px;border-radius:var(--radius-pill);background:var(--butter);color:var(--ink);font-size:9px;font-weight:700;letter-spacing:0;line-height:1}.card-body{display:flex;flex:1;flex-direction:column;padding:var(--space-4) var(--space-4) var(--space-5)}.card-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3);color:var(--muted);font-size:10px;font-weight:600;letter-spacing:0;line-height:1.4}.card-meta time{flex:0 0 auto;font-variant-numeric:tabular-nums}.card h4{margin-bottom:var(--space-2);font-family:var(--font-display);font-size:clamp(21px,1.8vw,26px);font-weight:600;letter-spacing:-.025em;line-height:1.1;overflow-wrap:break-word}.card-wide h4{font-size:clamp(24px,2.2vw,32px)}.card p{margin-bottom:var(--space-5);color:var(--muted);font-size:14px;line-height:1.5}.card-go{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--line);font-size:11px;font-weight:600;letter-spacing:0}.workshop{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--line);color:var(--muted);font-size:13px}.workshop strong{color:var(--ink-soft);font-weight:600}.text-link{flex:0 0 auto;color:var(--ink);font-size:12px;font-weight:600;letter-spacing:0;text-decoration:none}.text-link:hover{text-decoration:underline;text-underline-offset:4px}.studio{padding-block:clamp(80px,9vw,128px);background:var(--ink);color:var(--paper)}.studio .eyebrow{color:var(--paper-shadow)}.studio .eyebrow-index{color:var(--paper)}.studio-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px)}.studio h2{max-width:12ch;font-family:var(--font-display);font-size:clamp(42px,4.9vw,72px);font-weight:700;letter-spacing:-.05em;line-height:.97}.studio .soft{color:#b9b1a2}.studio-copy{padding-top:4px}.studio-lead{max-width:30ch;margin-bottom:var(--space-5);color:var(--paper);font-size:clamp(20px,1.9vw,26px);line-height:1.45;letter-spacing:-.015em}.studio-copy>p:not(.studio-lead){max-width:52ch;color:#c8c1b3;font-size:15px;line-height:1.7}.studio-stamp{display:inline-flex;align-items:center;gap:var(--space-3);margin-top:var(--space-7);padding:var(--space-3) var(--space-4);border:1px dashed rgba(242,237,227,.35);border-radius:var(--radius-pill);transform:rotate(-3deg)}.stamp-207{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.05em;line-height:1}.stamp-meta{color:#b9b1a2;font-size:9px;font-weight:600;letter-spacing:0;line-height:1.45}.facts{margin-top:var(--space-6);border-top:1px solid rgba(242,237,227,.2)}.facts>div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--space-4);padding:13px 0;border-bottom:1px solid rgba(242,237,227,.2)}.facts dt{color:#b9b1a2;font-size:10px;font-weight:600;letter-spacing:0;line-height:1.5}.facts dd{color:var(--paper);font-size:14px;line-height:1.5}.quote{max-width:860px;margin-top:clamp(52px,7vw,88px);padding-top:var(--space-5);border-top:1px solid rgba(242,237,227,.2)}.quote p{margin-bottom:var(--space-4);font-family:var(--font-display);font-size:clamp(24px,2.8vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.2}.quote cite{color:#b9b1a2;font-size:11px;font-style:normal;font-weight:600;letter-spacing:0}.also{padding-block:clamp(56px,7vw,92px);border-block:1px solid var(--line);background:var(--paper-deep)}.also-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,56px)}.also-mark{display:grid;width:88px;height:88px;place-items:center;border-radius:24px;background:var(--paper-deep);box-shadow:5px 6px #1d1b171f;color:var(--ink);font-family:var(--font-display);font-size:44px;font-weight:800;line-height:1;transform:rotate(-4deg)}.also-copy .eyebrow{margin-bottom:var(--space-2)}.also h2{margin-bottom:var(--space-2);font-family:var(--font-display);font-size:clamp(32px,3.4vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1}.also-copy>p:last-child{max-width:56ch;color:var(--muted);font-size:14px;line-height:1.6}.contact{padding-block:clamp(72px,9vw,120px)}.contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:clamp(32px,6vw,80px)}.contact h2{max-width:13ch;font-family:var(--font-display);font-size:clamp(38px,4.8vw,66px);font-weight:700;letter-spacing:-.05em;line-height:.98}.contact-copy p{max-width:34ch;margin-bottom:var(--space-4);color:var(--muted);font-size:14px}.email{display:inline-block;max-width:100%;padding-bottom:4px;border-bottom:1px solid var(--line-strong);font-family:var(--font-display);font-size:clamp(23px,3vw,40px);font-weight:600;letter-spacing:-.035em;line-height:1.15;overflow-wrap:anywhere;text-decoration:none;transition:border-color .2s var(--ease),color .2s var(--ease)}.email:hover{border-color:var(--accent);color:var(--accent-ink)}.footer{padding-top:var(--space-7);border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-6);padding-bottom:clamp(40px,6vw,72px)}.footer-brand p{max-width:26ch;margin-top:var(--space-4);color:var(--muted);font-size:13px;line-height:1.6}.footer-col h2{margin-bottom:var(--space-2);color:var(--muted);font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:0;line-height:1.5}.footer-col a{display:block;width:fit-content;padding:4px 0;font-size:13px;line-height:1.5;text-decoration:none}.footer-col a:hover{text-decoration:underline;text-underline-offset:4px}.footer-word{display:block;width:min(100%,760px);height:auto;margin-top:var(--space-4);user-select:none}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0 var(--space-6);border-top:1px solid var(--line);color:var(--muted);font-size:11px;letter-spacing:.03em}.footer-bottom a{text-decoration:none}.footer-bottom a:hover{text-decoration:underline}html:lang(ko) body{word-break:keep-all}html:lang(ko) .wm-207,html:lang(ko) .wm-studio{font-family:Gabarito,Apple SD Gothic Neo,Malgun Gothic,sans-serif}html:lang(ko) .section-head h2,html:lang(ko) .studio h2,html:lang(ko) .contact h2{letter-spacing:-.06em;line-height:1.08}html:lang(ko) .card h4,html:lang(ko) .also h2,html:lang(ko) .quote p{letter-spacing:-.03em}html:lang(ko) .kicker,html:lang(ko) .latest-label,html:lang(ko) .card-meta,html:lang(ko) .cat-note,html:lang(ko) .fact span,html:lang(ko) .eyebrow{letter-spacing:.04em}@keyframes reveal-in{0%{translate:0 24px}to{translate:0 0}}@supports (animation-timeline: view()){.reveal{animation:reveal-in .7s var(--ease) both;animation-timeline:view();animation-range:entry 2% entry 24%}}@media(max-width:1080px){.wrap{width:calc(100% - 64px)}.card{grid-column:span 6}.cards .card:nth-child(n+3){grid-column:span 4}.cards-classroom .card{grid-column:span 6}}@media(max-width:900px){.hero{padding-top:104px}.hero-stage{min-height:600px}.section-head,.studio-grid,.contact-grid{grid-template-columns:1fr;gap:var(--space-6)}.section-note{max-width:52ch;padding-bottom:0}.studio h2{max-width:15ch}.studio-copy{max-width:62ch}.also-inner{grid-template-columns:auto minmax(0,1fr)}.also-inner>.btn{grid-column:2;justify-self:start}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.footer-brand{grid-column:1 / -1}}@media(max-width:860px){.cards .card,.cards .card:nth-child(n+3),.cards-classroom .card{grid-column:span 6}}@media(max-width:700px){.dock{top:10px;width:calc(100% - 24px);height:56px;gap:var(--space-2);padding:0 var(--space-2) 0 var(--space-3)}.brand-num{font-size:17px}.brand-word{display:none}.dock-nav{gap:14px;font-size:12px}.dock-nav .nav-opt{display:none}.x-link,.lang-link{min-width:36px;height:36px}.lang-link{min-width:42px}.wrap{width:calc(100% - 40px)}.hero{padding-top:78px;padding-bottom:var(--space-5)}.hero-top{align-items:flex-start;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}.kicker{font-size:9px;letter-spacing:.08em}.latest{gap:8px;font-size:11px}.latest time{display:none}.hero-stage{min-height:600px}.mimi{top:78px;right:4%;bottom:auto;height:320px}.hero-stage:before{top:-4%;right:-5vw;width:110vw}.hero-stage:after{top:6%;right:-4vw;width:90vw}.wm-207{font-size:clamp(112px,30vw,132px)}.wm-studio{font-size:clamp(54px,15.2vw,68px)}.wordmark{padding-top:0}.hero-foot{width:100%;gap:14px;padding-bottom:4px}.intro{font-size:15.5px;line-height:1.5}.hero-actions{gap:var(--space-2)}.btn{min-height:48px;padding:0 16px;font-size:13px}.hero-note{font-size:10.5px}.stage-mark{top:2px;right:0;font-size:8px;letter-spacing:.08em}.stage-hint{display:none}.facts-strip{grid-template-columns:1fr 1fr;margin-top:var(--space-6)}.fact{padding:var(--space-4) var(--space-3) var(--space-4) 0}.fact+.fact{padding-left:var(--space-3)}.fact:nth-child(3){padding-left:0;border-left:0;border-top:1px solid var(--line)}.fact:nth-child(4){border-top:1px solid var(--line)}.fact strong{font-size:32px}.fact span{font-size:9px}.section{padding-block:var(--space-8)}.section-head h2{font-size:clamp(38px,11vw,52px)}.section-note{font-size:14px}.cat-head{align-items:flex-start;flex-direction:column;gap:var(--space-3)}.cat-head h3{font-size:26px}.cat-note{align-self:flex-start}.cards{grid-template-columns:1fr;gap:var(--space-4)}.cards .card,.cards .card-wide,.cards .card:nth-child(n+3),.cards-classroom .card{grid-column:1 / -1}.card h4,.card-wide h4{font-size:23px}.card-body{padding:var(--space-4)}.workshop{align-items:flex-start;flex-direction:column;gap:var(--space-3);font-size:12px}.studio{padding-block:var(--space-8)}.studio h2{font-size:clamp(36px,10.5vw,50px)}.studio-lead{font-size:20px}.studio-stamp{margin-top:var(--space-5)}.facts>div{grid-template-columns:96px minmax(0,1fr);gap:var(--space-3)}.quote{margin-top:var(--space-7)}.also{padding-block:var(--space-7)}.also-inner{grid-template-columns:1fr;gap:var(--space-4)}.also-mark{width:64px;height:64px;border-radius:18px;font-size:32px}.also-inner>.btn{grid-column:auto}.contact{padding-block:var(--space-8)}.contact h2{font-size:clamp(32px,9.5vw,44px)}.email{font-size:clamp(21px,6.2vw,28px)}.footer{padding-top:var(--space-6)}.footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-5);padding-bottom:var(--space-7)}.footer-brand{grid-column:1 / -1}.footer-brand .brand-word{display:inline}.footer-word{width:100%;margin-top:var(--space-3)}.footer-bottom{align-items:flex-start;flex-direction:column;gap:var(--space-2);padding-bottom:var(--space-5)}}@media(max-width:380px){.wm-207{font-size:108px}.wm-studio{font-size:52px}.btn{padding-inline:13px;font-size:12px}.dock-nav{gap:10px}}:lang(ko) body,:lang(ko) p,:lang(ko) h1,:lang(ko) h2,:lang(ko) h3,:lang(ko) h4{word-break:keep-all}h1,h2,h3{text-wrap:balance}p,dd,.row-desc{text-wrap:pretty}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}.brand,.email,.dock-nav a,.x-link,.lang-link,.footer-col a,.footer-bottom a,.text-link,.latest,.btn{min-height:44px}.email,.dock-nav a,.footer-col a,.footer-bottom a,.text-link{display:inline-flex;align-items:center}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}html{touch-action:manipulation}.dock-nav a,.footer-col a{min-width:44px;justify-content:center}.vh{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.count{font-variant-numeric:tabular-nums}.feature{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--space-6);align-items:end;margin-bottom:var(--space-6);color:inherit;text-decoration:none}.feature .card-media{border-radius:var(--radius-m);overflow:hidden;background:var(--paper-deep)}.feature .card-media img{display:block;width:100%;height:auto}.feature-meta{display:flex;gap:var(--space-3);margin:0 0 var(--space-3);color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}.feature-meta span{color:var(--accent);font-weight:600}.feature-body p:last-child{margin:0;font-size:clamp(20px,2vw,26px);line-height:1.3;letter-spacing:-.015em}.rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-strong)}.rows li{border-bottom:1px solid var(--line)}.row{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto 1.5rem;gap:var(--space-5);align-items:baseline;min-height:56px;padding:var(--space-4) 0;color:inherit;text-decoration:none}.row-name{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.01em}.row-desc{color:var(--muted)}.row time{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}.row-go{color:var(--muted);text-align:right}@media(hover:hover){.row:hover .row-name,.row:hover .row-go{color:var(--accent)}}@media(max-width:700px){.feature{grid-template-columns:1fr;gap:var(--space-4)}.row{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-4)}.row-name{grid-column:1}.row time{grid-column:2;grid-row:1}.row-desc{grid-column:1 / -1;font-size:15px}.row-go{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.card:hover,.latest:hover,.btn:hover,.card:hover .card-media img{transform:none}}.walk{position:relative;padding-block:clamp(64px,9vw,128px) 0}.walk-head h2{margin:0;font-family:var(--font-display);font-size:clamp(2.25rem,5vw,4rem);font-weight:700;line-height:.98;letter-spacing:-.035em;text-wrap:balance}.walk-note{max-width:46ch;margin:var(--space-4) 0 0;color:var(--muted);font-size:17px;line-height:1.5;text-wrap:pretty}.walk-scroller{position:relative}.walk-stage{position:relative;width:min(1240px,calc(100% - 96px));margin:var(--space-8) auto 0;display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:var(--space-6);align-items:start}.walk-track{grid-column:2;grid-row:1;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-4)}.stop{display:flex;flex-direction:column;gap:var(--space-3)}.walker{grid-column:1;grid-row:1;position:sticky;top:104px}.walker-still{display:block;width:100%;height:auto}.walker-layer,.walker-say{display:none}.walk-end{width:min(1240px,calc(100% - 96px));margin:0 auto;padding:var(--space-5) 0 0 calc(240px + var(--space-6))}.walk-end-t{margin:0;font-family:var(--font-display);font-size:1.4rem;font-weight:700;letter-spacing:-.02em}.walk-end-p{margin:var(--space-2) 0 var(--space-3);color:var(--muted)}.poster{position:relative;display:flex;flex-direction:column;gap:var(--space-3);height:100%;padding:22px 24px 20px;border:1px solid rgba(45,36,26,.12);border-radius:2px;background:linear-gradient(180deg,#fdfcf8,#f8f6f0);color:inherit;text-decoration:none;isolation:isolate}.poster:before{position:absolute;top:-7px;left:50%;width:64px;height:15px;margin-left:-32px;border-radius:1px;background:#d6cbb28c;content:"";transform:rotate(-1.5deg)}.poster:before{opacity:.75;transition:opacity .4s var(--ease)}.poster:after{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#fffffd;opacity:0;content:"";pointer-events:none;transition:opacity .4s var(--ease)}.poster:hover:after,.poster:focus-visible:after{opacity:1}.poster:hover:before,.poster:focus-visible:before{opacity:1}.poster:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.poster-head,.poster-body{display:flex;flex-direction:column;gap:6px;min-width:0}.poster-tag{display:flex;align-items:baseline;gap:10px;color:var(--muted);font-size:13px;font-weight:500}.poster-n{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}.poster-name{font-family:var(--font-display);font-size:clamp(1.45rem,2.5vw,2.3rem);font-weight:700;line-height:1.04;letter-spacing:-.03em;text-wrap:balance}.poster-desc{max-width:44ch;color:var(--ink-soft);line-height:1.45;text-wrap:pretty}.poster-go{color:var(--accent);font-weight:600}.stop .poster{height:auto;flex:none}.note{padding:16px 18px;border:1px solid rgba(233,196,106,.28);border-radius:4px;background:#141a45b8;color:var(--ink);font-size:15px;line-height:1.45}.note-h{display:none;margin:0 0 8px;font-family:var(--font-display);font-size:1.15rem;font-weight:700;letter-spacing:-.02em}.note-h .poster-n{margin-right:10px;color:var(--gold)}.note-what{margin:0;font-weight:600;text-wrap:pretty}.note-for{margin:8px 0 0;color:var(--muted);font-size:14px;text-wrap:pretty}.note-k{margin-right:6px;color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.note-pts{display:grid;gap:6px;margin:12px 0 0;padding:0;list-style:none;color:var(--ink-soft);font-size:14px;text-wrap:pretty}.note-pts li{position:relative;padding-left:16px}.note-pts li:before{position:absolute;top:.62em;left:0;width:6px;height:6px;border-radius:50%;background:var(--gold);content:""}.note-go{display:inline-block;margin-top:12px;color:var(--gold);font-weight:600;text-decoration:none}.note-go:hover{text-decoration:underline}.note-go:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}@media(max-width:700px){.walk-head h2{font-size:clamp(2rem,9vw,2.6rem)}.walk-note{font-size:16px}.walk-stage{width:calc(100% - 40px);margin-top:var(--space-6);grid-template-columns:1fr}.walk-track{grid-column:1;grid-row:2}.walker{position:static;grid-row:1;width:42%;max-width:170px}.walk-end{width:calc(100% - 40px);padding-left:0}.poster{padding:18px 18px 16px}}@media(prefers-reduced-motion:no-preference){.js .walk .poster{transition:transform .45s var(--ease),filter .45s var(--ease),box-shadow .45s var(--ease)}.js .walk .stop:not(.is-on) .poster{filter:brightness(.62) saturate(.7)}.js .walk .stop:not(.is-on) .poster:hover{filter:brightness(.85) saturate(.9)}.js .walk .stop.is-on .poster{box-shadow:0 0 0 2px #e9c46ad9,0 0 36px #e9c46a38,0 18px 40px #0406148c;transform:translateY(-6px)}.js .walk .stop.is-on .poster:after,.js .walk .stop.is-on .poster:before{opacity:1}.js .walk .note{transition:border-color .45s var(--ease)}.js .walk .stop.is-on .note{border-color:#e9c46ab3}.js .walker-still{display:none}.js .walker-layer{position:relative;display:block;width:auto;height:min(552px,calc(100svh - 170px));aspect-ratio:162 / 420;margin-inline:auto;overflow:hidden;transform:translate(var(--lean, 0px));transition:transform .6s var(--ease)}.js .walker-layer{background:url(/assets/mimi-walk-front.webp) 90.9091% 0 / 1200% 100% no-repeat}}@media(prefers-reduced-motion:no-preference)and (min-width:1180px)and (min-height:700px){.js .walk-scroller{height:420vh;height:420svh}.js .walk-stage{position:sticky;top:0;height:100vh;height:100svh;margin-top:0;padding-top:112px;box-sizing:border-box;align-content:start}.js .walker{position:relative;top:auto}.js .walk-track{position:relative;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr}.js .walk .stop{display:block}.js .walk .stop .poster{height:100%}.js .walk .note{position:absolute;top:calc(50% + var(--space-4) / 2);left:calc((100% - 2 * var(--space-4)) * 2 / 3 + 2 * var(--space-4));width:calc((100% - 2 * var(--space-4)) / 3);box-sizing:border-box;padding:18px 20px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s linear .4s}.js .walk .stop.is-on .note{opacity:1;visibility:visible;transform:none;transition-delay:0s}.js .walk .note-h{display:block}}@media(prefers-reduced-motion:no-preference)and (max-width:700px){.js .walker{position:sticky;top:76px;z-index:3;display:flex;align-items:center;gap:10px;width:auto;max-width:none;justify-self:stretch;padding:4px 16px 4px 4px;box-shadow:0 10px 24px #04061499;border:1px solid rgba(233,196,106,.3);border-radius:999px;background:var(--night)}.js .walker-still{display:block;order:-1;width:44px;height:44px;border-radius:50%;background:var(--paper-light);object-fit:cover;object-position:50% 4%}.js .walker-layer{display:none}.js .walker-say{display:flex;align-items:baseline;gap:8px;margin:0;color:var(--ink);font-size:15px;font-weight:600}}:root{--night: #0d1333;--night-2: #141a45;--violet: #1b1747;--gold: #e9c46a;--paper: var(--night);--paper-light: #182052;--paper-deep: #19204d;--paper-shadow: #0a0f29;--ink: #f4ecd8;--ink-soft: #e4dccb;--muted: #b9b4cc;--line: rgba(244, 236, 216, .16);--line-strong: rgba(244, 236, 216, .34);--accent: var(--gold);--accent-ink: #f3d68f;--font-display: "DM Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;--star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e9c46a' d='M12 1c.4 5.6 2.6 8 11 11-8.4 3-10.6 5.4-11 11-.4-5.6-2.6-8-11-11 8.4-3 10.6-5.4 11-11z'/%3E%3C/svg%3E");color-scheme:dark}body{background:radial-gradient(1.5px 1.5px at 12% 18%,rgba(233,196,106,.7),transparent 60%),radial-gradient(1px 1px at 68% 42%,rgba(244,236,216,.55),transparent 60%),radial-gradient(1.5px 1.5px at 38% 76%,rgba(233,196,106,.55),transparent 60%),radial-gradient(1px 1px at 88% 88%,rgba(244,236,216,.45),transparent 60%),var(--night);background-size:520px 680px,520px 680px,520px 680px,520px 680px,auto}::selection{background:#e9c46a66;color:#fff}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.brand{gap:9px}.brand-star{width:18px;height:18px;flex:none;fill:var(--gold)}.brand-word{font-family:DM Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:.18em;line-height:1;text-transform:uppercase;color:var(--ink)}.dock{background:var(--night);border-color:#f4ecd829}.footer-brand .brand-star{width:22px;height:22px}.footer-brand .brand-word{font-size:17px}.kicker-dot{width:11px;height:11px;border-radius:0;background:var(--star) center / contain no-repeat}.eyebrow:before{display:inline-block;width:.95em;height:.95em;margin-right:.55em;vertical-align:-.1em;background:var(--star) center / contain no-repeat;content:""}.hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip}.hero-paint{position:absolute;inset:0;z-index:-2}.hero-paint img{width:100%;height:100%;object-fit:cover;object-position:72% 100%}.hero:after{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0a0e28d6,#0a0e289e 34%,#0a0e2800 60%),linear-gradient(0deg,var(--night) 0%,rgba(13,19,51,0) 16%);content:"";pointer-events:none}.hero-stage{cursor:auto}.hero-stage:before,.hero-stage:after{display:none}.mimi{visibility:hidden}.wordmark{display:flex;flex-wrap:nowrap;gap:0 .5em;margin-top:clamp(24px,6vh,72px);padding-top:0;font-family:DM Sans,sans-serif;font-weight:700;letter-spacing:.14em;line-height:1;color:var(--ink);text-shadow:0 2px 24px rgba(8,10,32,.45);white-space:nowrap}.wm-207,.wm-studio,html:lang(ko) .wm-207,html:lang(ko) .wm-studio{display:inline;margin:0;padding:0;font-family:DM Sans,sans-serif;font-size:clamp(56px,7.2vw,112px);letter-spacing:inherit}.hero-sub{margin-top:clamp(14px,1.6vw,22px);padding-left:.2em;color:#efd9a0;font-family:DM Sans,sans-serif;font-size:clamp(13px,1.25vw,18px);font-weight:500;letter-spacing:.34em;text-transform:uppercase}html:lang(ko) .hero-sub{letter-spacing:.24em}.intro{color:var(--ink-soft)}.hero-note{color:#cfc8dc}.latest{background:#10163cd1}.latest:hover{background:#182052eb}.btn-primary,.btn-primary:hover{color:#121a44}.btn-ghost{background:#0d13338c}.btn-ghost:hover{background:#f4ecd81a}.studio,.contact{position:relative;isolation:isolate}.studio{background:var(--violet);color:var(--ink)}.sec-paint{position:absolute;inset:0;z-index:-2;overflow:hidden}.sec-paint img{width:100%;height:100%;object-fit:cover;object-position:85% 50%}.studio:before,.contact:before{position:absolute;inset:0;z-index:-1;content:"";pointer-events:none}.studio:before{background:linear-gradient(180deg,var(--night) 0%,rgba(20,18,58,.88) 14%,rgba(20,18,58,.86) 86%,var(--night) 100%)}.contact{padding-block:var(--space-9);scroll-margin-top:104px}.contact h2,.contact .email{scroll-margin-top:112px}.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.footer-col a{justify-content:flex-start;min-width:0}.contact:before{background:linear-gradient(180deg,var(--night) 0%,rgba(12,16,46,.84) 18%,rgba(12,16,46,.8) 82%,var(--night) 100%)}.paint-roof img{object-position:80% 60%}.studio-stamp{border-color:#e9c46a80}.stamp-207{color:var(--gold)}.quote p,.studio-lead,.facts dd,.studio .eyebrow{color:var(--ink)}.studio .eyebrow-index{color:var(--muted)}.studio .soft{color:#cdc4e2}.also{background:var(--night-2)}.also-mark{background:var(--paper-light);color:var(--gold);box-shadow:5px 6px #00000059}.card-badge{color:#121a44}.footer-word{opacity:.1}.poster{--ink-soft: #3b3654;--muted: #5b5672;--accent: #7a5a12;color:#1b1838}.poster:focus-visible{outline-color:var(--gold)}@media(max-width:700px){.dock .brand-word{display:inline;font-size:12px;letter-spacing:.13em}.brand-star{width:16px;height:16px}.hero-paint{bottom:auto;height:640px}.hero-paint img{object-position:80% 100%}.hero:after{background:linear-gradient(180deg,rgba(10,14,40,.88) 0%,rgba(10,14,40,.6) 30%,rgba(10,14,40,0) 46%,rgba(13,19,51,0) 74%,var(--night) 640px)}.wordmark{margin-top:10px}.wm-207,.wm-studio,html:lang(ko) .wm-207,html:lang(ko) .wm-studio{font-size:clamp(36px,10.6vw,64px)}.hero-sub{font-size:12px;letter-spacing:.28em}.sec-paint img{object-position:78% 50%}.contact{padding-block:var(--space-8)}} diff --git a/assets/home.min.js b/assets/home.min.js index beef3e8..981310f 100644 --- a/assets/home.min.js +++ b/assets/home.min.js @@ -1 +1 @@ -(function(){"use strict";var i=document.querySelector("[data-scene]");if(!i)return;var w=window.matchMedia("(prefers-reduced-motion: reduce)"),m=document.querySelector("[data-scene-hint]"),R=document.documentElement.lang==="ko",M=!1,F=!1,o=null,q=null,J=!1;function ie(){m&&(m.textContent=w.matches?R?"\uC815\uC801 \uC7A5\uBA74 \xB7 \uBAA8\uC158 \uC904\uC784":"Static scene \xB7 reduced motion":R?"\uB04C\uC5B4\uC11C \uBC00\uC5B4 \uBCF4\uC138\uC694 \xB7 \uB193\uC73C\uBA74 \uB3CC\uC544\uC640\uC694":"Drag the pieces \xB7 they settle back")}ie();function X(n,d,p,A,Me){n.dispatchEvent(new PointerEvent(d,{bubbles:!0,cancelable:!0,pointerId:p.pointerId,pointerType:p.pointerType,clientX:A,clientY:Me,buttons:1}))}function Q(){if(!(M||F||w.matches)){F=!0;var n=document.createElement("script");n.src="/assets/scene.min.js",n.async=!0,n.onload=function(){if(F=!1,typeof window.initClayScene=="function"&&(M=!0,window.initClayScene(),!(J||!o||!q))){var d=document.getElementById("clay-scene");d&&(X(d,"pointerdown",o.event,o.x,o.y),X(d,"pointermove",q.event,q.x,q.y))}},n.onerror=function(){F=!1,o=null},document.head.appendChild(n)}}function g(){M||F||w.matches||("requestIdleCallback"in window?window.requestIdleCallback(Q,{timeout:1400}):window.setTimeout(Q,450))}function Z(n){M||w.matches||n.target.closest&&n.target.closest("a, button, input, textarea, select, label")||(o={id:n.pointerId,x:n.clientX,y:n.clientY,event:n},q={x:n.clientX,y:n.clientY,event:n},J=!1)}function C(n){if(!(M||w.matches||!o||n.pointerId!==o.id)){q={x:n.clientX,y:n.clientY,event:n};var d=n.clientX-o.x,p=n.clientY-o.y;Math.sqrt(d*d+p*p)<8||Q()}}function O(){M||!o||(J=!0)}w.addEventListener&&w.addEventListener("change",function(n){ie(),n.matches||g()}),i.addEventListener("pointerdown",Z),window.addEventListener("pointermove",C,{passive:!0}),window.addEventListener("pointerup",O),window.addEventListener("pointercancel",O);var L=document.querySelector("[data-mimi]");L&&window.matchMedia("(pointer: fine)").matches&&window.addEventListener("pointermove",function(n){if(!w.matches){var d=n.clientX/window.innerWidth-.5,p=n.clientY/window.innerHeight-.5;L.style.setProperty("--mimi-x",(d*14).toFixed(1)+"px"),L.style.setProperty("--mimi-y",(p*8).toFixed(1)+"px")}},{passive:!0}),document.readyState==="complete"?g():window.addEventListener("load",g,{once:!0})})(),(function(){"use strict";var i=document.querySelector("[data-walk]");if(!i||!window.requestAnimationFrame||window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;var w=i.querySelector("[data-walk-scroller]"),m=i.querySelector("[data-walk-stage]"),R=i.querySelector("[data-walker]"),M=i.querySelector("[data-walk-strip]"),F=i.querySelector("[data-walk-floor]"),o=i.querySelector("[data-walk-end]"),q=i.querySelector("[data-wall]"),J=i.querySelector("[data-wall-face]"),ie=i.querySelector("[data-wall-ledge]"),X=i.querySelector("[data-seam]"),Q=i.querySelector("[data-walk-track]"),g=[].slice.call(i.querySelectorAll("[data-stop]")),Z=[].slice.call(i.querySelectorAll("[data-rail-fill]")),C=Z.map(function(e){return e.parentNode}),O=C.length?C[0].parentNode:null,L=document.querySelector("[data-mimi]"),n=g.length,d=.25,p=.4,A=.92,Me=.44,tt=.88,rt=1-A+p,Re=d+n,Xe=Re+p,$=Xe+.35,Ce=96,ee=162,P=420,Le=12,B=10,k=[7,3,159,405],te=[8,6,420,982],at=2,nt=-2,it=[417,415,412,408,405,409,411,414,411,408,405,409],Be=.5,Ee=.86,oe=20*Math.PI/180,ot=10,x=0,H=0,De=1,h=!1,Se=1,se=0,We=0,Ie=0,Ge=1,D=0,y=0,W=1e3,le=1,qe=0,T=0,ce=0,Y=1,de=0,fe=0,ue=[],f=-1,E=0,Te=0,be=!1,Fe=!1,ve=[],S={};i.classList.add("is-live"),w.style.height=$*Ce+100+"vh",w.style.height=$*Ce+100+"svh";function G(e){return e<0?0:e>1?1:e}function st(e){return 1-Math.pow(1-e,3)}function ze(e){return e<.5?4*e*e*e:1-Math.pow(-2*e+2,3)/2}function u(e){return Math.round(e)+"px"}function Oe(e){return e<.002?"0":e>.998?"1":e.toFixed(3)}function I(e,t,r,a){var s=ve[t]||(ve[t]={});s[r]!==a&&(s[r]=a,e.style[r]=a)}function Ae(e,t,r,a,s){e.style.left=u(t),e.style.top=u(r),e.style.width=u(a),e.style.height=u(s)}function lt(){if(!L||!L.offsetHeight)return null;for(var e=0,t=0,r=L;r;r=r.offsetParent)e+=r.offsetLeft,t+=r.offsetTop;return{x:e,y:t,w:L.offsetWidth,h:L.offsetHeight}}function me(e){return W/(W+e*qe)}function Pe(e){return D+e*le*me(e)}function _(e){return W*(D-e)/((e-D)*qe-le*W)}function je(){var e,t=0;x=m.clientWidth,H=m.clientHeight,h=x<=700;var r=h?76:92,a=h?12:Math.round(Math.max(24,x*.033));["--mh","--mw","--mx","--mb"].forEach(function(xe){m.style.removeProperty(xe)});var s=lt(),l,v,c;if(s){var b=s.h*(te[3]+1-te[1])/990;l=b*P/(k[3]+1-k[1]);var we=s.y+s.h*(te[3]+1)/990;c=we-l*(k[3]+1)/P;var pe=s.x+s.w*(te[0]+te[2]+1)/2/431,ae=s.x+s.w/2,z=l*ee/P,j=((k[0]+k[2]+1)/2-ee/2)*z/ee;v=ae-z/2+(pe-ae-j)/2}else l=R.offsetHeight||320,c=H-24-l,v=R.offsetLeft;var ne=l*ee/P;De=l,We=H-c-l,m.style.setProperty("--mh",l.toFixed(2)+"px"),m.style.setProperty("--mw",ne.toFixed(2)+"px"),m.style.setProperty("--mx",v.toFixed(2)+"px"),m.style.setProperty("--mb",We.toFixed(2)+"px"),i.classList.toggle("is-above",h),Ie=Math.max(0,H-c-l*(k[3]+1)/P),Ge=Math.max(1,Math.min(Math.max(60,H*.12),Ie));var N=v+at*ne/ee,mt=c+nt*l/P,ye=c+l,ht=H-ye-24,He=h&&ht>=200;i.classList.toggle("is-list",He),fe=h?He?ye+30:ye-6:ye-26;var K,V;h?(K=a,V=x-a,de=1/0):(V=N-Math.max(24,l*.06),K=Math.max(a,V-640),de=N-2);var wt=(V-Ee*K)/(1-Ee);le=Math.cos(oe),qe=Math.sin(oe),D=K,W=(wt-K)*Math.tan(oe),T=(V-K)/(Ee*le),ce=T*1.12,Y=ce/2,i.classList.remove("is-tight");var pt=Math.max(1,me(_(a)));for(e=0;e=r+6||Ye)break;i.classList.add("is-tight")}var et=h?1:.5;m.style.perspective=Math.round(W)+"px",m.style.perspectiveOrigin=u(D)+" "+u(y);var yt="rotateY("+oe.toFixed(5)+"rad)";for([q,Q].forEach(function(xe){xe.style.left=u(D),xe.style.transform=yt}),e=0;e=Xe||e<=0)return B;var t=Ve(e);if(t===Math.round(t))return B;var r=(B+Math.floor((t<0?t*Be:t)*24+1e-6))%Le;return r<0?r+Le:r}function dt(e){var t=Fe?ct(e):B,r=(k[3]-it[t])*De/P;I(M,"wi","transform","translate3d("+(-t*100/Le).toFixed(4)+"%,"+r.toFixed(1)+"px,0)");var a=t===B?.5:Math.abs(Math.cos((t-B)/6*Math.PI));I(F,"fl","transform","scaleX("+(.92+a*.1).toFixed(3)+")")}function he(){var e=window.pageYOffset-(se-Ie);I(R,"wo","opacity",Oe(G(e/Ge)))}function ft(e){var t=(e*ce%Y+Y)%Y;I(X,"sm","transform","translate3d("+t.toFixed(1)+"px,0,0)")}function ut(e,t){for(var r=1,a=0;awe?Pe(c+T):-1e4;ae<-4||c>pe||Pe(c)>x+4?b=0:!h&&c>0&&(b=G((de-ae)/Math.max(1,de-Pe(T)))),b===0&&(c=Math.min(Math.max(c,we-T*1.5),pe)),I(l,v+"t","transform","translate3d("+c.toFixed(1)+"px,0,0)"),I(l,v+"o","opacity",Oe(b)),a===n-1&&t>n-1&&(r=b);var z=b>.5,j=s>=Me&&s.5&&(S.end=N>.5,o.classList.toggle("is-on",S.end))}function re(e){var t=Ve(e);t<0&&(t*=Be),ft(t),ut(e,t),dt(e)}function Ue(e){var t=Math.min(.05,(e-Te)/1e3||.016);Te=e;var r=E-f;Math.abs(r)>1.5?f=E-(r>0?.6:-.6):f+=r*(1-Math.exp(-t/.09)),Math.abs(E-f)<5e-4&&(f=E),re(f),f!==E?requestAnimationFrame(Ue):be=!1}function Je(){if(E=Ke(),he(),f<0){f=E,re(f);return}be||(be=!0,Te=performance.now(),requestAnimationFrame(Ue))}var Qe=0;function ke(){clearTimeout(Qe),Qe=setTimeout(function(){je(),f=E=Ke(),he(),re(f)},120)}i.addEventListener("focusin",function(e){var t=g.indexOf(e.target.closest&&e.target.closest("[data-stop]")),r=t>=0?d+t+.66:o.contains(e.target)?$:-1;if(!(r<0)){var a=se+r/$*Se;m.scrollLeft=0,m.scrollTop=0,Math.abs(window.pageYOffset-a)>2&&window.scrollTo({top:a,behavior:"instant"}),f=E=r,he(),re(f)}}),je(),Je(),window.addEventListener("scroll",Je,{passive:!0}),window.addEventListener("resize",ke),window.addEventListener("load",ke,{once:!0}),document.fonts&&document.fonts.ready&&document.fonts.ready.then(ke);var Ze=[M];function vt(e){return e.decode?e.decode().catch(function(){}):Promise.resolve()}if("IntersectionObserver"in window){var $e=new IntersectionObserver(function(e){e[0].isIntersecting&&($e.disconnect(),Ze.forEach(function(t){t.loading="eager"}),Promise.all(Ze.map(vt)).then(function(){Fe=!0,ve=[],S={},he(),re(f)}))},{rootMargin:"100% 0px"});$e.observe(i)}else Fe=!0})(); +(function(){"use strict";var r=document.querySelector("[data-scene]");if(!r)return;var a=window.matchMedia("(prefers-reduced-motion: reduce)"),f=document.querySelector("[data-scene-hint]"),w=document.documentElement.lang==="ko",s=!1,p=!1,n=null,h=null,x=!1;function q(){f&&(f.textContent=a.matches?w?"\uC815\uC801 \uC7A5\uBA74 \xB7 \uBAA8\uC158 \uC904\uC784":"Static scene \xB7 reduced motion":w?"\uB04C\uC5B4\uC11C \uBC00\uC5B4 \uBCF4\uC138\uC694 \xB7 \uB193\uC73C\uBA74 \uB3CC\uC544\uC640\uC694":"Drag the pieces \xB7 they settle back")}q();function k(e,o,v,I,M){e.dispatchEvent(new PointerEvent(o,{bubbles:!0,cancelable:!0,pointerId:v.pointerId,pointerType:v.pointerType,clientX:I,clientY:M,buttons:1}))}function m(){if(!(s||p||a.matches)){p=!0;var e=document.createElement("script");e.src="/assets/scene.min.js",e.async=!0,e.onload=function(){if(p=!1,typeof window.initClayScene=="function"&&(s=!0,window.initClayScene(),!(x||!n||!h))){var o=document.getElementById("clay-scene");o&&(k(o,"pointerdown",n.event,n.x,n.y),k(o,"pointermove",h.event,h.x,h.y))}},e.onerror=function(){p=!1,n=null},document.head.appendChild(e)}}function E(){s||p||a.matches||("requestIdleCallback"in window?window.requestIdleCallback(m,{timeout:1400}):window.setTimeout(m,450))}function C(e){s||a.matches||e.target.closest&&e.target.closest("a, button, input, textarea, select, label")||(n={id:e.pointerId,x:e.clientX,y:e.clientY,event:e},h={x:e.clientX,y:e.clientY,event:e},x=!1)}function b(e){if(!(s||a.matches||!n||e.pointerId!==n.id)){h={x:e.clientX,y:e.clientY,event:e};var o=e.clientX-n.x,v=e.clientY-n.y;Math.sqrt(o*o+v*v)<8||m()}}function y(){s||!n||(x=!0)}a.addEventListener&&a.addEventListener("change",function(e){q(),e.matches||E()}),r.addEventListener("pointerdown",C),window.addEventListener("pointermove",b,{passive:!0}),window.addEventListener("pointerup",y),window.addEventListener("pointercancel",y);var d=document.querySelector("[data-mimi]");d&&window.matchMedia("(pointer: fine)").matches&&window.addEventListener("pointermove",function(e){if(!a.matches){var o=e.clientX/window.innerWidth-.5,v=e.clientY/window.innerHeight-.5;d.style.setProperty("--mimi-x",(o*14).toFixed(1)+"px"),d.style.setProperty("--mimi-y",(v*8).toFixed(1)+"px")}},{passive:!0}),document.readyState==="complete"?E():window.addEventListener("load",E,{once:!0})})(),(function(){var r=document.querySelector("[data-walk]");if(!r||!("IntersectionObserver"in window))return;var a=window.matchMedia("(prefers-reduced-motion: reduce)"),f=window.matchMedia("(prefers-reduced-motion: no-preference) and (min-width: 1180px) and (min-height: 700px)"),w=r.querySelector("[data-walk-scroller]"),s=r.querySelector("[data-walk-stage]"),p=r.querySelector("[data-walk-track]"),n=[].slice.call(r.querySelectorAll("[data-stop]")),h=r.querySelector("[data-walk-strip]"),x=r.querySelector("[data-walk-n]"),q=r.querySelector("[data-walk-name]"),k=n.map(function(t){return t.querySelector(".poster-name").textContent}),m=12,E=10,C=14,b=0,y=null,d=[],e=0;function o(t){h&&(h.style.backgroundPositionX=(t*100/(m-1)).toFixed(4)+"%")}function v(){var t=0;clearInterval(e),e=setInterval(function(){t+=1,o(t>=m?E:(E+t)%m),t>=m&&clearInterval(e)},45)}function I(t){if(t!==b){n[b].classList.remove("is-on"),n[t].classList.add("is-on"),b=t,x&&(x.textContent="0"+(t+1)),q&&(q.textContent=k[t]);var l=f.matches?3:1;r.style.setProperty("--lean",t%l*C+"px"),a.matches||v()}}function M(){if(y&&y.disconnect(),d.forEach(function(i){i.remove()}),d=[],!a.matches){for(var t=f.matches?w:s,l=0;l