/* 3472 DESIGN — 비우고, 사진이 말하게. 한 화면에 한 문장 */
:root{
  --fg:#1d1d1f; --muted:#86868b; --soft:#f5f5f7; --line:#e8e8ed;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
  --gut:max(22px,env(safe-area-inset-left,0px));
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:#fff;color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.6;letter-spacing:-.012em;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}

/* nav — 거의 보이지 않게 */
.nav{position:fixed;inset:0 0 auto;z-index:30;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);color:#fff;transition:background .5s var(--ease),color .5s var(--ease)}
.nav.solid{background:rgba(255,255,255,.8);backdrop-filter:saturate(1.8) blur(22px);-webkit-backdrop-filter:saturate(1.8) blur(22px);color:var(--fg)}
.nav.dark{color:#fff;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.logo{font-weight:700;font-size:19px;letter-spacing:-.045em;display:flex;align-items:baseline;gap:8px}
.logo span{font-weight:400;font-size:9.5px;letter-spacing:.42em;opacity:.7}
.nav nav{display:flex;gap:26px;align-items:center;font-size:14px}
.nav nav a{opacity:.85;transition:opacity .3s}
.nav nav a:hover{opacity:1}
@media (max-width:640px){.nav nav a.hide-m{display:none}}

/* hero — 사진이 천천히 바뀐다 */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000;color:#fff}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 2.2s var(--ease)}
.hero .slide.on{opacity:1}
.hero .slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 9s linear}
.hero .slide.on img{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 34%,rgba(0,0,0,.5),rgba(0,0,0,0) 72%),linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.08) 45%,rgba(0,0,0,.1) 65%,rgba(0,0,0,.5));pointer-events:none}
.hero .copy{position:absolute;z-index:2;left:0;right:0;top:20vh;text-shadow:0 2px 30px rgba(0,0,0,.35);text-align:center;padding:0 var(--gut)}
.hero h1{font-size:clamp(40px,7.4vw,92px);font-weight:600;letter-spacing:-.055em;line-height:1.06}
.hero .copy p{margin-bottom:18px;font-size:clamp(15px,1.4vw,18px);opacity:.92;font-weight:500;letter-spacing:.02em}
.hero .cta{position:absolute;z-index:2;left:0;right:0;bottom:9vh;display:flex;justify-content:center;padding:0 var(--gut)}
.hero .name{position:absolute;z-index:2;right:var(--gut);bottom:calc(9vh + 14px);font-size:12px;opacity:.6;letter-spacing:.04em}
@media (max-width:640px){.hero .name{display:none}}

.pill{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 30px;border-radius:999px;font-size:16px;font-weight:600;letter-spacing:-.01em;transition:transform .4s var(--ease),background .3s}
.pill:active{transform:scale(.97)}
.pill.white{background:#fff;color:#000}
.pill.white:hover{background:#e8e8ed}
.pill.black{background:#000;color:#fff}
.pill.black:hover{background:#333}
.pill.glass{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.more{display:inline-flex;gap:6px;align-items:center;font-size:18px;color:#0066cc}
.dark .more,.more.light{color:#2997ff}
.more::after{content:"›";font-size:1.25em;line-height:1;transition:transform .3s var(--ease)}
.more:hover::after{transform:translateX(3px)}

/* statement — 큰 문장 하나 */
.statement{padding:clamp(130px,20vw,240px) var(--gut);text-align:center}
.statement h2{font-size:clamp(34px,5.6vw,72px);font-weight:600;letter-spacing:-.05em;line-height:1.12;text-wrap:balance}
.statement p{max-width:30em;margin:34px auto 0;font-size:clamp(17px,1.7vw,21px);color:var(--muted);line-height:1.6}

/* 3D ↔ 실제 */
.see{background:#000;color:#f5f5f7;padding:clamp(110px,15vw,180px) var(--gut) clamp(90px,12vw,140px);text-align:center}
.see h2{font-size:clamp(34px,5.6vw,72px);font-weight:600;letter-spacing:-.05em;line-height:1.12}
.see>p{margin:22px auto 0;max-width:28em;color:#a1a1a6;font-size:clamp(17px,1.7vw,21px)}
.flip{position:relative;max-width:1180px;margin:64px auto 0;aspect-ratio:3/2;border-radius:28px;overflow:hidden;background:#111}
.flip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.4s var(--ease)}
.flip img.real{opacity:0}
.flip.real img.real{opacity:1}
.switch{display:inline-flex;margin-top:28px;background:#1d1d1f;border-radius:999px;padding:4px}
.switch button{height:40px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:500;color:#a1a1a6;transition:background .4s var(--ease),color .4s}
.switch button[aria-pressed="true"]{background:#f5f5f7;color:#000}
.see small{display:block;margin-top:18px;font-size:13px;color:#6e6e73}

/* full-bleed promise */
.bleed{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;padding:0 var(--gut)}
.bleed img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;z-index:-2;will-change:transform}
.bleed::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.52)}
.bleed h2{font-size:clamp(36px,6vw,80px);font-weight:600;letter-spacing:-.055em;line-height:1.1}
.bleed ul{list-style:none;display:flex;gap:10px 28px;justify-content:center;flex-wrap:wrap;margin-top:34px;font-size:clamp(15px,1.5vw,18px);opacity:.88}
.bleed li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:10px;vertical-align:middle;opacity:.7}

/* works — 크게, 여유 있게 */
.works{padding:clamp(120px,16vw,200px) var(--gut) clamp(100px,12vw,160px)}
.works-head{text-align:center;margin-bottom:clamp(56px,7vw,90px)}
.works-head h2{font-size:clamp(34px,5.6vw,72px);font-weight:600;letter-spacing:-.05em;line-height:1.12}
.tiles{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.tile{display:block}
.tile .ph{aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:var(--soft)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile:hover img{transform:scale(1.04)}
.tile p{margin-top:16px;font-size:19px;font-weight:600;letter-spacing:-.03em}
.tile p span{font-weight:400;color:var(--muted);font-size:15px;margin-left:10px}
@media (max-width:700px){.tiles{grid-template-columns:1fr}}
.center{text-align:center}
.works .center{margin-top:64px}

/* all works page */
.page-head{padding:calc(60px + clamp(70px,10vw,120px)) var(--gut) 0;text-align:center}
.page-head h1{font-size:clamp(38px,6vw,76px);font-weight:600;letter-spacing:-.055em;line-height:1.1}
.page-head p{margin-top:16px;color:var(--muted);font-size:18px}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:44px auto 0;max-width:900px}
.chip{height:40px;padding:0 18px;border-radius:999px;background:var(--soft);font-size:14px;font-weight:500;transition:background .3s,color .3s}
.chip[aria-pressed="true"]{background:var(--fg);color:#fff}
.grid{max-width:1400px;margin:56px auto 0;padding:0 var(--gut) 140px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 22px}
.grid .tile p{font-size:17px}
.grid .tile[hidden]{display:none}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid{grid-template-columns:1fr;gap:36px}}

/* steps — 한 줄 */
.steps{padding:clamp(90px,12vw,140px) var(--gut);background:var(--soft);text-align:center}
.steps h2{font-size:clamp(28px,3.6vw,44px);font-weight:600;letter-spacing:-.045em}
.steps ol{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:12px 0;margin-top:44px;counter-reset:s}
.steps li{counter-increment:s;font-size:clamp(17px,1.8vw,22px);font-weight:600;letter-spacing:-.03em;display:flex;align-items:center}
.steps li::before{content:counter(s);font-size:12px;font-weight:600;color:var(--muted);margin-right:10px}
.steps li+li::after{content:none}
.steps li:not(:last-child)::after{content:"";width:clamp(24px,4vw,56px);height:1px;background:#c7c7cc;margin:0 clamp(12px,1.6vw,22px)}
.steps p{margin-top:36px;font-size:15px;color:var(--muted)}
@media (max-width:700px){.steps ol{flex-direction:column;align-items:center;gap:14px}.steps li:not(:last-child)::after{display:none}}

/* contact */
.contact{background:#000;color:#f5f5f7;text-align:center;padding:clamp(130px,18vw,220px) var(--gut)}
.contact h2{font-size:clamp(34px,5.6vw,72px);font-weight:600;letter-spacing:-.05em;line-height:1.12}
.contact>p{margin:24px auto 0;color:#a1a1a6;font-size:clamp(17px,1.7vw,21px);max-width:28em}
.contact .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:48px}
.contact .need{margin-top:40px;font-size:14px;color:#6e6e73;letter-spacing:.01em}
.contact .links{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:22px;font-size:14px;color:#86868b}
.contact .links a:hover{color:#f5f5f7}
footer{background:#000;color:#6e6e73;font-size:12px;padding:26px var(--gut) calc(26px + env(safe-area-inset-bottom,0px));border-top:1px solid #1d1d1f}
footer div{max-width:1400px;margin:0 auto;display:flex;gap:6px 18px;flex-wrap:wrap}
footer b{color:#d2d2d7;font-weight:600}

/* work page */
.w-hero{position:relative;height:92svh;min-height:520px;overflow:hidden;color:#fff;background:#000}
.w-hero img{width:100%;height:100%;object-fit:cover;animation:settle 2.6s var(--ease) both}
@keyframes settle{from{transform:scale(1.07);opacity:.4}to{transform:none;opacity:1}}
.w-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 35%,rgba(0,0,0,0) 60%,rgba(0,0,0,.5))}
.w-hero .copy{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:9vh}
.w-hero .copy p{font-size:14px;opacity:.8;letter-spacing:.04em}
.w-hero h1{font-size:clamp(40px,6.4vw,84px);font-weight:600;letter-spacing:-.055em;line-height:1.05;margin-top:8px}
.gallery{max-width:1400px;margin:0 auto;padding:clamp(18px,2vw,28px) var(--gut) 0;display:grid;gap:clamp(18px,2vw,28px)}
.gallery .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,28px)}
.gallery img{width:100%;border-radius:22px;background:var(--soft)}
@media (max-width:640px){.gallery .row{grid-template-columns:1fr}.gallery img{border-radius:16px}}
.next{display:block;max-width:1400px;margin:clamp(90px,12vw,150px) auto 0;padding:0 var(--gut)}
.next .ph{position:relative;aspect-ratio:21/9;border-radius:24px;overflow:hidden;color:#fff}
.next img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.next:hover img{transform:scale(1.03)}
.next .ph::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.next .ph div{position:absolute;z-index:1;left:clamp(22px,3vw,44px);bottom:clamp(22px,3vw,40px)}
.next small{font-size:13px;opacity:.8;letter-spacing:.06em}
.next b{display:block;font-size:clamp(26px,3.4vw,44px);font-weight:600;letter-spacing:-.045em;margin-top:4px}
@media (max-width:640px){.next .ph{aspect-ratio:4/3}}
.back{display:block;text-align:center;margin:44px 0 0}

/* 움직임 — 천천히 떠오르기 */
.up{opacity:0;transform:translateY(34px);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease)}
.up.in{opacity:1;transform:none}
.up.d1{transition-delay:.12s}.up.d2{transition-delay:.24s}.up.d3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.up{opacity:1;transform:none;transition:none}.hero .slide img,.w-hero img{transition:none;animation:none;transform:none}.flip img{transition:none}html{scroll-behavior:auto}}