:root{--paper:#f8f7f4;--ink:#242522;--muted:#777b70;--line:#d5d6cc;--accent:#a46a49;--green:#30372b;font-family:Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;min-height:44px}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #92613f;outline-offset:4px}button:disabled{opacity:.45;cursor:default}p,h1,h2{margin:0}[hidden]{display:none!important}.site-header{height:86px;margin:0 4.4%;display:flex;align-items:center;border-bottom:1px solid #ccccc6;gap:20px}.wordmark{font-size:25px;font-weight:900;letter-spacing:-1.4px;display:flex;align-items:center;gap:18px}.wordmark span{font-weight:400;letter-spacing:0;font-size:12px;border-left:1px solid #aaa;padding-left:18px}.edition{margin:auto;font-size:9px;letter-spacing:1.4px}.edition i{font-style:normal;margin-left:16px;color:#898981;font-size:8px}.plain-link{font-size:11px;min-height:44px;display:flex;align-items:center;white-space:nowrap}main{max-width:1500px;padding:0 4.4%;margin:auto}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:36px 0 26px}.eyebrow{font-size:9px;letter-spacing:1.7px;color:var(--muted);margin-bottom:14px}.intro h1{font-size:clamp(32px,3.7vw,54px);font-weight:600;line-height:1.1;letter-spacing:-2.2px;word-break:keep-all}.intro h1 span{color:var(--accent)}.intro>p{font-size:12px;line-height:1.9;color:var(--muted);word-break:keep-all;padding-bottom:2px}.mobile-only{display:none}.viewbar{display:flex;justify-content:space-between;gap:16px;align-items:center;border-block:1px solid var(--line)}.modes{display:flex;gap:26px}.modes button{font-size:11px;color:#83877b;position:relative;padding:0 4px;min-height:50px;white-space:nowrap}.modes button span{font-size:15px;margin-right:6px;vertical-align:-1px}.modes button[aria-pressed=true]{color:var(--ink);font-weight:600}.modes button[aria-pressed=true]:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--ink)}.edition-note{font-size:9px;letter-spacing:1.2px;color:#8b8e83}.edition-note i{margin:0 12px;font-style:normal;color:#b0b4a5}
.gallery{position:relative;height:660px;overflow:hidden;overflow:clip;isolation:isolate;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;perspective:1200px;outline-offset:-3px}.gallery.dragging{cursor:grabbing}.cards{position:absolute;inset:0}.city-card{position:absolute;left:50%;top:50%;width:242px;height:332px;margin:-166px 0 0 -121px;padding:0;text-align:left;will-change:transform;transform-origin:center center;touch-action:pan-y;transition:filter .15s;outline-offset:5px;user-select:none;-webkit-user-select:none;contain:layout style}.city-card .card-frame{width:100%;height:100%;display:block;position:relative;overflow:hidden;background:white;border:1px solid #dbddd4;box-shadow:0 12px 23px #313e2318;transform-origin:center bottom;border-radius:3px}.city-card img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none;background:white}.city-card .card-top{position:absolute;left:12px;right:12px;top:11px;display:flex;justify-content:space-between;align-items:center;gap:6px;color:#73796b;font-size:9px;letter-spacing:.8px}.card-number{font-family:Georgia,serif;font-size:11px}.ai-tag{font-size:9px;letter-spacing:0;background:#ffffffec;padding:4px 6px;line-height:1.3;color:#424a38;border:1px solid #dce0d4;border-radius:2px}.card-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#ffffffef;border-top:1px solid #edf0e7;padding:12px 13px}.card-bottom b{font-size:10px;letter-spacing:1px;font-weight:600}.card-bottom span{font-size:10px;color:#707969}.card-cta{position:absolute;bottom:43px;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap;color:var(--green);padding:6px 10px;background:#f1f4e9eb;border-radius:20px;opacity:0}.city-card[aria-current=true] .card-frame{border-color:#7d886d;box-shadow:0 24px 38px #27351632}.city-card[aria-current=true] .card-cta{opacity:1}.gallery:is([data-mode=float],[data-mode=orbit]) .city-card .card-frame{animation:float-y 5.6s ease-in-out infinite;animation-delay:var(--delay,0s)}.gallery.dragging .card-frame,.gallery.paused .card-frame{animation-play-state:paused!important}@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px) rotate(.7deg)}}
.space-lines{position:absolute;inset:0;pointer-events:none;overflow:hidden}.space-lines:before{content:'';position:absolute;inset:40px 8% 20px;background:radial-gradient(ellipse at 50% 57%,#e4e6dc88,transparent 65%)}.space-lines i{position:absolute;left:14%;right:14%;height:170px;bottom:40px;border:1px solid #d9decf;border-radius:50%;transform:rotate(-4deg);opacity:.65}.space-lines i:nth-child(2){left:23%;right:23%;bottom:17px;height:135px;transform:rotate(5deg);opacity:.35}.space-lines>span{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:8px;letter-spacing:3.4px;color:#adb3a1;white-space:nowrap}.gallery[data-mode=coverflow] .space-lines i{opacity:.22;transform:scaleY(.25)}.gallery[data-mode=float] .space-lines i{transform:rotate(-13deg)}.side-mark{position:absolute;top:40%;left:8px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:7px;letter-spacing:1.9px;color:#9ca58d;pointer-events:none}.gesture-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:0 8px 9px;gap:12px}.gesture{display:flex;align-items:center;gap:10px;font-size:10px;color:#78806d}.gesture>span:first-child{font-size:20px;color:#606b53}.auto{font-size:10px;color:#6d7662;display:flex;gap:8px;align-items:center;padding:0 7px}.auto[aria-pressed=true]{color:var(--green);font-weight:700}.selection{position:relative;display:grid;grid-template-columns:44px minmax(180px,1fr) 44px auto;gap:26px;align-items:center;max-width:870px;margin:26px auto 20px}.arrow{width:44px;height:44px;border:1px solid #c8cdbd;border-radius:50%;font-size:17px;color:#515f43}.arrow:hover{background:#e9ede1}.selected-copy{text-align:center}.selected-copy p{font-size:9px;letter-spacing:1.2px;color:#7d876c}.selected-copy h2{font-size:28px;letter-spacing:-.6px;font-weight:500;margin:7px 0 6px}.selected-copy>span{font-size:9px;letter-spacing:1.4px;color:#929983}.enter{display:flex;align-items:center;justify-content:space-between;gap:35px;min-height:49px;background:var(--green);color:#fafbf6;padding:0 20px;font-size:12px;margin-left:14px}.enter:hover{background:#49543c}.enter span{font-size:18px}.country-nav{display:flex;justify-content:center;gap:24px;margin:24px auto 0;flex-wrap:wrap}.country-nav button{display:flex;align-items:center;gap:7px;font-size:10px;color:#929a88;padding:0 6px}.country-nav button i{display:block;width:4px;height:4px;border:1px solid #a7b09d;border-radius:50%}.country-nav button[aria-pressed=true]{color:#374c25;font-weight:600}.country-nav button[aria-pressed=true] i{background:#596c45;border-color:#596c45}.motion-note{text-align:center;font-size:10px;color:#959d8c;line-height:1.8;margin:6px 0 0;word-break:keep-all}footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:32px;padding:23px 0 30px;border-top:1px solid var(--line);font-size:9px;color:#92958a;line-height:1.8}.footer-brand{font-size:14px;font-weight:800;letter-spacing:-.5px;color:#787e6d}footer>a{min-height:44px;display:flex;align-items:center;white-space:nowrap}.skip{position:fixed;z-index:30;top:-100px;left:20px;background:white;padding:14px;font-size:12px}.skip:focus{top:10px}.load-error{position:absolute;inset:20%;background:#f8f7f4ee;border:1px solid var(--line);padding:30px;text-align:center;display:grid;place-content:center;gap:12px;font-size:13px;line-height:1.8;z-index:100}.load-error button{border:1px solid #6b785d}.card-broken{display:grid;place-content:center;position:absolute;inset:0;background:#e8ecdf;color:#657255;font-size:12px;text-align:center;line-height:1.8}
@media(min-width:1650px){.gallery{height:710px}.city-card{width:264px;height:360px;margin:-180px 0 0 -132px}}
@media(max-width:1050px){.edition{display:none}.plain-link{margin-left:auto}.gallery{height:630px}.city-card{width:218px;height:304px;margin:-152px 0 0 -109px}.intro h1{font-size:39px}.selection{gap:20px}.intro>p{font-size:11px}}
@media(max-width:700px){.site-header{height:60px;margin:0 18px;gap:10px}.wordmark{font-size:19px;letter-spacing:-1.1px}.wordmark span{display:none}.plain-link{font-size:10px}.intro{padding:25px 0 18px;display:block}.intro h1{font-size:29px;letter-spacing:-1.2px;line-height:1.15}.intro .eyebrow{font-size:7px;letter-spacing:1.35px;margin-bottom:10px}.intro>p{font-size:10px;line-height:1.7;margin-top:10px}.intro>p br{display:none}main{padding:0 18px}.viewbar{justify-content:center}.modes{width:100%;justify-content:space-between;gap:8px}.modes button{font-size:10px;min-height:46px;padding-inline:2px}.modes button span{margin-right:4px;font-size:14px}.edition-note{display:none}.gallery{height:510px;margin:0 -18px}.city-card{width:168px;height:234px;margin:-117px 0 0 -84px}.city-card .card-top{left:8px;right:8px;top:8px;font-size:7px}.card-number{font-size:9px}.ai-tag{font-size:8px;padding:3px 4px}.card-bottom{padding:9px 9px;gap:5px}.card-bottom b{font-size:8px;letter-spacing:.7px}.card-bottom span{font-size:8px}.card-cta{font-size:8px;bottom:35px;padding:4px 7px}.space-lines i{left:-15%;right:-15%;height:116px;bottom:29px}.space-lines i:nth-child(2){left:8%;right:8%;height:100px;bottom:11px}.space-lines>span{font-size:6px;letter-spacing:2px;bottom:7px}.side-mark{left:8px;font-size:6px;color:#a1ab93}.gesture-row{padding:0 0 4px}.gesture{font-size:9px;gap:6px}.gesture>span:first-child{font-size:18px}.auto{font-size:9px;padding:0 1px}.selection{grid-template-columns:44px 1fr 44px;gap:12px;margin:19px 0 4px}.selected-copy h2{font-size:25px;margin:5px 0}.selected-copy p{font-size:8px}.selected-copy>span{font-size:8px}.enter{grid-column:1/-1;margin:4px 0 0;min-height:49px;padding:0 17px;font-size:12px}.country-nav{gap:6px;margin:8px -2px 0;justify-content:space-between;flex-wrap:nowrap}.country-nav button{font-size:9px;padding-inline:2px;gap:4px;min-height:44px}.country-nav button i{width:3px;height:3px}.motion-note{font-size:9px;margin-top:2px}.motion-note br{display:none}footer{margin-top:24px;flex-wrap:wrap;gap:8px;padding-bottom:calc(20px + env(safe-area-inset-bottom));font-size:9px}footer>p{width:100%;order:3}footer>a{margin-left:auto}.footer-brand{font-size:13px}.load-error{inset:20% 10%;font-size:12px}}
@media(max-width:360px){.intro h1{font-size:26px}.intro>p{font-size:9px}.gallery{height:490px}.city-card{width:156px;height:218px;margin:-109px 0 0 -78px}.gesture{font-size:8px}.country-nav button{font-size:8px}.selection{gap:8px}.plain-link{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.city-card{will-change:auto}}

.city-card .city-model{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;background:#fff;transition:opacity .15s}.city-card.model-ready .city-model{opacity:1}.model-fallback{position:absolute;top:38px;left:12px;font-size:8px;color:#6b7560;background:#ffffffee;padding:3px 5px;border-radius:3px}.model-playback-notice{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;color:#68755b;font-size:11px;padding:8px}.model-playback-notice button{border:1px solid #bac5ad;border-radius:6px;padding:0 14px;background:#eff3e9;min-height:44px}

/* Glass panels: white source backgrounds blend with the existing scene. */
.city-card .card-frame{border:1px solid #ffffffbb;border-radius:12px;background:linear-gradient(140deg,#ffffff70,#edf3ee29 46%,#ffffff45);box-shadow:0 16px 28px #33413018,inset 1px 1px 0 #fffffff2,inset -1px -1px 0 #879b8e50}
.city-card .card-frame:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(var(--glass-angle,112deg),rgba(255,255,255,var(--glass-light,.25)),transparent 26%,transparent 78%,#ffffff24);box-shadow:inset 0 0 0 1px #ffffff30}
.city-card[aria-current=true] .card-frame{border-color:#ffffffed;box-shadow:0 27px 40px #273b272a,0 2px 5px #65776118,inset 1px 1px 0 #fff,inset -1px -1px 0 #82958a66}
.city-card img,.city-card .city-model{background:transparent;mix-blend-mode:multiply}
.city-card.model-ready img{visibility:hidden}
.city-card .card-bottom{background:#ffffff25;border-top:1px solid #ffffff8c}
.city-card .ai-tag{background:#ffffff85;border-color:#ffffffab}
.city-card .card-cta{background:#f4f8efad;border:1px solid #ffffff90}


.city-card{--city-glass:#91a995}
.city-card[data-index="1"]{--city-glass:#b6a2aa}
.city-card[data-index="2"]{--city-glass:#9badba}
.city-card[data-index="3"]{--city-glass:#c3b898}
.city-card[data-index="4"]{--city-glass:#ada58f}
.city-card .card-frame:before{content:'';position:absolute;left:0;top:8%;bottom:8%;width:2px;background:var(--city-glass);opacity:var(--glass-light,.2);pointer-events:none;box-shadow:1px 0 6px var(--city-glass)}

.card-shadows{position:absolute;inset:0;pointer-events:none;z-index:0}
.city-shadow{position:absolute;left:50%;top:50%;width:240px;height:34px;margin:-17px 0 0 -120px;border-radius:50%;background:radial-gradient(ellipse,rgba(37,52,40,.32) 0%,rgba(55,70,53,.15) 30%,rgba(78,93,72,.04) 55%,transparent 72%);will-change:transform,opacity}
@media(max-width:700px){.city-shadow{width:176px;height:26px;margin:-13px 0 0 -88px}}
@media(prefers-reduced-motion:reduce){.city-shadow{will-change:auto}}

.city-card img,.city-card .city-model{filter:blur(var(--model-blur,0px))}

/* Keep the model clear; one quiet caption and one glass edge. */
.city-card .card-frame{border:1px solid #ffffff80;box-shadow:0 16px 28px #33413012;border-radius:10px}
.city-card[aria-current=true] .card-frame{border-color:#ffffffb3;box-shadow:0 22px 34px #273b271a}
.city-card .card-frame:after{box-shadow:none;background:linear-gradient(var(--glass-angle,112deg),#ffffff16,transparent 20%,transparent 88%,#ffffff0d)}
.city-card .card-frame:before{display:none}
.city-card .card-bottom{justify-content:center;gap:8px;padding:9px 8px;background:transparent;border:0;line-height:1.2}
.city-card .card-bottom b{font-size:8px;font-weight:500;letter-spacing:1.1px;color:#70786b}
.city-card .card-bottom .ai-tag{font-size:6px;line-height:1.2;font-weight:400;letter-spacing:.1px;border:0;border-left:1px solid #929c8650;background:none;border-radius:0;padding:0 0 0 8px;color:#89917e}
.city-card:focus-visible{outline:none}
.city-card:focus-visible .card-frame{outline:2px solid #7f8e70;outline-offset:3px}
@media(max-width:700px){.city-card .card-bottom{padding:7px 5px;gap:6px}.city-card .card-bottom b{font-size:7px;letter-spacing:.7px}.city-card .card-bottom .ai-tag{font-size:6px;padding-left:6px}}

.city-card .card-frame:before{display:block;left:auto;right:10px;top:10px;bottom:auto;width:12px;height:12px;opacity:0;box-shadow:none;background:linear-gradient(90deg,transparent,#fff,transparent) center/100% 1px no-repeat,linear-gradient(0deg,transparent,#fff,transparent) center/1px 100% no-repeat;filter:drop-shadow(0 0 2px #b9d2ca);transform:scale(.65) rotate(12deg);pointer-events:none}
.city-card[aria-current=true] .card-frame:before{animation:glass-glint 6.8s ease-in-out infinite}
.gallery.paused .card-frame:before,.gallery.dragging .card-frame:before{animation-play-state:paused!important}
@keyframes glass-glint{0%,20%,100%{opacity:0;transform:scale(.65) rotate(12deg)}8%{opacity:.72;transform:scale(1) rotate(12deg)}}
@media(prefers-reduced-motion:reduce){.city-card[aria-current=true] .card-frame:before{opacity:.24}}

/* Clip the decoder's outer pixel before angled/blurred compositing. */
.city-card .city-model{inset:0 auto 0 50%;width:auto;height:100%;aspect-ratio:9/16;transform:translateX(-50%);clip-path:inset(1px)}
.space-lines i,.space-lines>span{display:none}

/* One surface: the pane follows the film instead of framing a second rectangle. */
.city-card{width:186.75px;margin-left:-93.375px}
.city-card .card-frame,.city-card[aria-current=true] .card-frame{background:transparent;border:1px solid #dce2d670;box-shadow:0 14px 25px #33413012}
.city-card .card-frame:after{display:none}
.city-card img,.city-card .city-model{mix-blend-mode:normal}
.city-card .city-model{inset:0;width:100%;height:100%;transform:none;clip-path:inset(1px);object-fit:contain}
@media(min-width:1650px){.city-card{width:202.5px;margin-left:-101.25px}}
@media(max-width:1050px){.city-card{width:171px;margin-left:-85.5px}}
@media(max-width:700px){.city-card{width:131.625px;margin-left:-65.8125px}}
@media(max-width:360px){.city-card{width:122.625px;margin-left:-61.3125px}}

/* Packed H.264 stays in the decoder; only the reconstructed transparent canvas is shown. */
.city-card .city-model,.city-card.model-ready .city-model{opacity:0;visibility:visible;pointer-events:none}
.city-card .city-render{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;opacity:0;filter:blur(var(--model-blur,0px));clip-path:inset(1px)}
.city-card.model-ready .city-render{opacity:1}
.city-card img{background:transparent}

/* London's full-length silhouette needs breathing room above the caption. */
.city-card[data-index="3"] img,.city-card[data-index="3"] .city-render{transform:scale(.94);transform-origin:50% 0}

/* ── 운영 홈에 얹을 때 ─────────────────────────────────────
   우리 .scene 은 display:flex + align-items:center 라, 폭을 스스로 정하지 않는
   자식은 0 으로 줄어든다. 갤러리가 그렇게 사라졌다 (폭 0 · overflow:clip).
   2026-09-07 대표 아이폰 화면에서 발견. */
.scene.spatial{ display:block; }
.scene.spatial .viewbar,
.scene.spatial .gallery,
.scene.spatial .gesture-row,
.scene.spatial .selection,
.scene.spatial .country-nav,
.scene.spatial .motion-note,
.scene.spatial .model-playback-notice{ width:100%; max-width:none; }
.scene.spatial .cards{ width:100%; }

/* 첫 화면이 되었으므로 제목을 준다 (2026-09-07 대표 「회전을 메인으로」) */
.scene.spatial .spatial-intro{ text-align:left; margin:0 0 26px; }
.scene.spatial .spatial-intro .eyebrow{
  font-family:var(--sans,'Archivo',sans-serif);font-size:10px;font-weight:800;
  letter-spacing:.22em;color:var(--ink-3,#8a8a86);margin:0 0 12px;
}
.scene.spatial .spatial-intro h1{
  margin:0 0 14px;font-weight:800;line-height:1.12;letter-spacing:-.03em;
  font-size:clamp(28px,6.4vw,52px);text-wrap:balance;
}
.scene.spatial .spatial-intro .dot{ color:var(--amber,#c8963e); }
.scene.spatial .spatial-lede{
  margin:0;font-size:clamp(13px,3.2vw,15px);line-height:1.85;color:var(--ink-2,#4a4a47);
}
@media (max-width:640px){ .scene.spatial{ padding-top:64px } }

/* 메인 영상을 결제로 가는 자리(내 사진으로 → 룩북 만들기)에 작게 둔다.
   히어로는 이제 회전 갤러리가 맡는다. (2026-09-07 대표 지시) */
.mini-turn{ position:relative; display:inline-block; vertical-align:middle;
  width:clamp(96px,22vw,132px); aspect-ratio:9/16; margin:0 14px 0 0;
  border-radius:6px; overflow:hidden; background:rgba(0,0,0,.04); }
.mini-turn .mini-video{ width:100%; height:100%; object-fit:cover; display:block; }
.mini-turn .ai-tag{ top:auto; bottom:4px; left:4px; right:auto;
  max-width:calc(100% - 8px); white-space:normal; line-height:1.2; text-align:left;
  font-size:6.5px; letter-spacing:.04em; padding:2px 4px; }
.cta-row{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; justify-content:center; }
@media (max-width:640px){ .mini-turn{ margin:0 auto 10px; display:block } }

/* 히어로에서 옮겨온 제목 — 「미리본다」 강조를 원래 결 그대로 (2026-09-07) */
.scene.spatial .spatial-intro h1 em{ font-style:normal; color:var(--ink-3,#9a9a96); }

/* 「취향이 머무는, 다섯 도시」 — 제목 아래 한 줄로 작게 (2026-09-07 대표 지시) */
.scene.spatial .spatial-sub{
  margin:-4px 0 12px; font-size:clamp(13px,3.1vw,16px); font-weight:600;
  letter-spacing:-.01em; color:var(--ink-2,#4a4a47);
}

/* 슬로건 한 줄 「입기 전, 돌려봐」 (2026-09-15 대표 「가로로」) — <br> 을 빼고, 폰 폭에서도 한 줄에 들어가게 글자 크기를 화면폭에 맞춘다.
   nowrap 은 안 쓴다(영어·독일어 번역은 두 줄로 접혀야 한다). */
.scene.spatial .spatial-intro h1{ font-size:clamp(26px,8.6vw,52px); text-wrap:balance; }
/* 「룩북 판매, 지금 바로 신청하세요」 — 제목 아래 한 줄이 문의 폼(#inquiry)으로 가는 링크 (2026-09-15 대표) */
.scene.spatial .spatial-sub a{ color:inherit; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--amber,#c8963e); }
/* 「착용해보기」를 「룩북 판매, 지금 바로 신청하세요」 바로 아래로 옮김 (2026-09-15 대표 「위치변경」) — 아래 lead 에서는 뺐다 */
.scene.spatial .spatial-cta{ margin:2px 0 16px; }
@media (max-width:640px){ .scene.spatial .spatial-cta .lb-btn{ padding:13px 16px; font-size:11.5px; white-space:nowrap; } }