/* stay vio 홈페이지 v3 시안 — 인테리어 디자인 스튜디오 (2026-10-21)
   색은 브랜드기본 그대로. 영문 제목 세리프(Cormorant Garamond)는 시안 검토용 */
:root{
  --deep:#0E211C; --green:#17453A; --green-h:#1E5545;
  --ink:#1C201D; --ink-2:#4A504B; --paper:#F4F3EF; --paper-2:#EAE8E1;
  --sand:#B9AD9B; --line:#DAD7CE;
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --pad:clamp(20px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;word-break:keep-all;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.en{font-family:var(--serif);font-weight:400;letter-spacing:.01em}
.cap{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}

/* ── 머리 ───────────────────────── */
.hd{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad);transition:background .4s,color .4s,padding .4s}
.hd .logo{width:132px;height:18px;position:relative}
.hd .logo img{position:absolute;inset:0;object-fit:contain;object-position:left;transition:opacity .4s}
.hd .logo .dark{opacity:0}
.hd nav{display:flex;gap:34px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#fff}
.hd nav a{opacity:.86}.hd nav a:hover{opacity:1}
.hd.solid{background:rgba(244,243,239,.92);backdrop-filter:blur(10px);padding-block:16px}
.hd.solid nav{color:var(--ink)}
.hd.solid .logo .light{opacity:0}.hd.solid .logo .dark{opacity:1}
.hd .menu{display:none;background:none;border:0;color:inherit;font:inherit;font-size:11px;letter-spacing:.24em;text-transform:uppercase}

/* ── ① 첫 화면: 바깥 → 창 → 안 ─────── */
.door{height:340vh;position:relative;background:var(--deep)}
.door .stage{position:sticky;top:0;height:100vh;overflow:hidden}
.door .out,.door .in{position:absolute;inset:0}
.door .out img{transform:scale(calc(1 + var(--p,0) * .35));transform-origin:50% 55%}
.door .out::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,33,28,.35),rgba(14,33,28,.05) 40%,rgba(14,33,28,.45))}
.door .in{clip-path:inset(var(--ct,50%) var(--cs,50%) var(--ct,50%) var(--cs,50%) round var(--cr,200px))}
.door .in img{transform:scale(calc(1.18 - var(--q,0) * .18));filter:blur(calc(var(--b,0) * 1px)) brightness(calc(1 - var(--b,0) * .05))}
.door .slogan{position:absolute;left:var(--pad);right:var(--pad);bottom:12vh;color:#fff;opacity:calc(1 - var(--p,0) * 4)}
.door .slogan h1{font-weight:500;font-size:clamp(28px,4.4vw,64px);line-height:1.3;letter-spacing:-.02em}
.door .slogan .en{display:block;font-size:clamp(17px,1.7vw,24px);margin-top:14px;font-style:italic;opacity:.85}
.door .hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);color:#fff;font-size:10px;letter-spacing:.3em;opacity:calc(.8 - var(--p,0) * 6)}
.door .why{position:absolute;inset:0;display:grid;place-items:center;padding:0 var(--pad);color:#fff;text-align:center;opacity:var(--w,0);transform:translateY(calc((1 - var(--w,0)) * 30px))}
.door .why .cap{color:rgba(255,255,255,.75)}
.door .why h2{font-weight:500;font-size:clamp(24px,3.2vw,44px);line-height:1.45;margin:18px 0 22px;letter-spacing:-.015em}
.door .why p{max-width:560px;margin:0 auto;font-size:clamp(15px,1.15vw,17px);opacity:.88}

/* ── 공통 구획 ───────────────────── */
.sec{padding:clamp(88px,12vw,160px) var(--pad)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(36px,5vw,64px);border-bottom:1px solid var(--line);padding-bottom:18px}
.sec-head h2{font-size:clamp(34px,4.6vw,68px);line-height:1;font-family:var(--serif);font-weight:400}
.sec-head h2 small{display:block;font-family:var(--sans);font-size:14px;letter-spacing:0;margin-top:14px;color:var(--ink-2)}
.more{font-size:12px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap}

/* ── ② 대표 작업: 고정 + 가로 흐름 ─── */
.feat{position:relative}
.feat .pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.feat .meta{padding:0 var(--pad);display:flex;gap:24px;align-items:baseline;margin-bottom:24px}
.feat .meta .no{font-family:var(--serif);font-size:20px;color:var(--sand)}
.feat .meta h3{font-size:clamp(22px,2.4vw,34px);font-weight:500;letter-spacing:-.015em}
.feat .meta p{color:var(--ink-2);font-size:14px}
.feat .meta a{margin-left:auto}
.feat .track{display:flex;gap:18px;padding-left:var(--pad);will-change:transform;transform:translateX(var(--x,0px))}
.feat .track figure{flex:0 0 auto;height:min(64vh,640px);overflow:hidden;background:var(--paper-2)}
.feat .track figure.w{aspect-ratio:3/2}.feat .track figure.t{aspect-ratio:4/5}
.feat .track figure img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.feat .track figure:hover img{transform:scale(1.03)}
.feat .track .end{flex:0 0 38vw;display:flex;align-items:center;padding:0 4vw}
.feat .track .end a{font-family:var(--serif);font-size:clamp(26px,2.6vw,40px);line-height:1.2}
.feat .track .end a span{display:block;font-family:var(--sans);font-size:13px;letter-spacing:.2em;margin-top:12px;color:var(--ink-2)}

/* ── ③ 세 분야 ───────────────────── */
.fields{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:auto auto;gap:18px}
.field{position:relative;overflow:hidden;min-height:300px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:30px}
.field>picture{position:absolute;inset:0}
.field>picture::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(14,33,28,.7))}
.field>*:not(picture){position:relative}
.field.stay{grid-row:span 2;min-height:640px}
.field .en{font-size:clamp(34px,3.4vw,52px);line-height:1}
.field h3{font-size:18px;font-weight:500;margin:10px 0 6px}
.field p{font-size:14px;opacity:.86;max-width:420px}
.field .tag{position:absolute;top:26px;left:30px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;border:1px solid rgba(255,255,255,.6);padding:4px 10px}
.field.space{background:var(--green)}
.field.space .tag{border-color:rgba(255,255,255,.4)}

/* ── ④ 주거 작업 격자 ─────────────── */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card figure{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.card figure img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.card:hover figure img{transform:scale(1.04)}
.card h4{font-size:16px;font-weight:500;margin-top:14px}
.card p{font-size:13px;color:var(--ink-2)}

/* ── ⑤ 운영을 아는 디자인 ─────────── */
.know{background:var(--deep);color:var(--paper)}
.know .inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.know h2{font-size:clamp(28px,3.2vw,46px);font-weight:500;line-height:1.4;letter-spacing:-.015em}
.know h2 .en{display:block;font-size:.62em;color:var(--sand);font-style:italic;margin-bottom:16px}
.know ul{list-style:none;border-top:1px solid rgba(244,243,239,.18)}
.know li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:22px 0;border-bottom:1px solid rgba(244,243,239,.18)}
.know li b{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--sand)}
.know li strong{display:block;font-weight:500;font-size:17px}
.know li span{font-size:14px;opacity:.72}

/* ── ⑥ 일하는 순서 ───────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.step{padding:28px 26px 0 0;position:relative}
.step svg{width:64px;height:64px;stroke:var(--green);fill:none;stroke-width:1.2;margin-bottom:22px}
.step .n{font-family:var(--serif);font-size:15px;color:var(--sand)}
.step h4{font-size:20px;font-weight:500;margin:4px 0 8px}
.step p{font-size:14px;color:var(--ink-2)}

/* ── ⑦ 문의 ──────────────────────── */
.ask{text-align:center;background:var(--paper-2)}
.ask h2{font-size:clamp(30px,4.6vw,66px);font-weight:500;line-height:1.3;letter-spacing:-.025em}
.ask p{color:var(--ink-2);margin:20px 0 40px}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--green);color:#fff;padding:18px 34px;font-size:15px;transition:background .3s}
.btn:hover{background:var(--green-h)}
.ask .tel{display:block;margin-top:22px;font-size:14px;color:var(--ink-2)}

/* ── 발 ──────────────────────────── */
.ft{background:var(--deep);color:rgba(244,243,239,.72);padding:72px var(--pad) 40px;font-size:13px}
.ft .top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:44px;border-bottom:1px solid rgba(244,243,239,.14)}
.ft .slogan{font-size:20px;color:var(--paper);line-height:1.5}
.ft .slogan .en{display:block;font-size:17px;font-style:italic;color:var(--sand)}
.ft h5{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--sand);font-weight:500;margin-bottom:10px}
.ft .cols{display:flex;gap:56px}
.ft .legal{padding-top:26px;line-height:1.9}

/* ── 작업 상세 ───────────────────── */
.ph{height:100vh;position:relative;color:#fff}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,33,28,.3),transparent 40%,rgba(14,33,28,.55))}
.ph picture{position:absolute;inset:0}
.ph .t{position:absolute;left:var(--pad);right:var(--pad);bottom:9vh;z-index:1}
.ph .t h1{font-size:clamp(30px,4.4vw,62px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.ph .t p{margin-top:10px;font-size:15px;opacity:.85}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.facts div{padding:20px 20px 20px 0}
.facts dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.facts dd{font-size:16px;margin-top:4px}
.story{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(30px,6vw,96px);margin-top:clamp(60px,8vw,110px)}
.story h2{font-size:clamp(24px,2.4vw,34px);font-weight:500;line-height:1.45}
.story p+p{margin-top:1.1em}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(60px,8vw,110px)}
.gal figure{overflow:hidden;background:var(--paper-2)}
.gal .full{grid-column:1/-1;aspect-ratio:16/9}
.gal .half{aspect-ratio:4/5}
.gal figcaption{font-size:13px;color:var(--ink-2);padding-top:10px}
.next{display:block;margin-top:clamp(80px,10vw,140px);border-top:1px solid var(--ink);padding-top:28px}
.next .cap{display:block;margin-bottom:10px}
.next b{font-size:clamp(26px,3vw,44px);font-weight:500}
.tbd{color:#9a6b2f}

/* 나타나기 */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}

/* ── 휴대폰 ──────────────────────── */
@media (max-width:859px){
  .hd nav{display:none}.hd .menu{display:block;color:#fff}.hd.solid .menu{color:var(--ink)}
  .hd.open nav{display:flex;flex-direction:column;position:fixed;inset:60px 0 auto 0;background:var(--paper);color:var(--ink);padding:24px var(--pad);gap:20px}
  .door{height:280vh}
  .door .slogan{bottom:14vh}
  .feat{height:auto!important}
  .feat .pin{position:static;height:auto;padding:72px 0}
  .feat .meta{flex-wrap:wrap;gap:6px 14px}.feat .meta a{margin-left:0}
  .feat .track{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory;padding-right:var(--pad);-webkit-overflow-scrolling:touch}
  .feat .track figure{height:56vh;scroll-snap-align:start}
  .feat .track .end{flex-basis:70vw}
  .fields{grid-template-columns:1fr}.field.stay{grid-row:auto;min-height:440px}
  .grid{grid-template-columns:1fr 1fr}
  .know .inner{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:36px}
  .sec-head{flex-direction:column;align-items:flex-start}
  .facts{grid-template-columns:1fr 1fr}
  .story,.gal{grid-template-columns:1fr}
  .ft .cols{flex-direction:column;gap:28px}
}
@media (prefers-reduced-motion:reduce){
  .door{height:auto}.door .stage{position:relative;height:100vh}
  .door .in,.door .why{display:none}
  .rv{opacity:1;transform:none}
}