/* ITDA Studio V2 — Connected Worlds (로컬 프로토타입)
   색 75 / 20 / 5 = 무채색 바탕 / 작품 이미지 / 민트 포인트 */
/* 글꼴 두 파일: 영문·숫자·기호는 먼저(미리 받기), 한글은 따로 — 큰 ITDA·제목이 한글 파일을 기다리지 않게 */
@font-face {
  font-family: 'PretendardV2';
  src: url('../assets/fonts/pretendard-v2-latin.woff2') format('woff2-variations'), url('../assets/fonts/pretendard-v2-latin.woff2') format('woff2');
  font-weight: 400 750;
  font-display: swap;
  unicode-range: U+0000-10FF, U+1200-2FFF, U+3040-312F, U+3190-ABFF, U+D7A4-FEFF, U+FFF0-FFFF;
}
@font-face {
  font-family: 'PretendardV2';
  src: url('../assets/fonts/pretendard-v2-ko.woff2') format('woff2-variations'), url('../assets/fonts/pretendard-v2-ko.woff2') format('woff2');
  font-weight: 400 750;
  font-display: swap;
  unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+AC00-D7A3, U+FF00-FFEF;
}

:root {
  color-scheme: dark;
  --bg: #0C1114; --bg2: #151C20; --bgl: #F1F2ED;
  --tx: #F5F6F2; --tx2: #A5B0B3; --txl: #171C1F; --txl2: #4B5559;
  --mint: #B6F2D9; --mint-h: #D5FFED; --err: #FF9C8A;
  --bd: rgba(255, 255, 255, .14); --bdl: rgba(20, 28, 32, .16);
  --line: rgba(245, 246, 242, .34);
  --m: 64px; --gut: 24px; --hd: 80px; --sec: 160px; --proj: 112px;
  --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .2s; --t-norm: .45s; --t-slow: .8s;
  --f: 'PretendardV2', Pretendard, Inter, system-ui, -apple-system, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --h1: clamp(46px, 7.23vw, 112px);
  --h2: clamp(38px, 4.72vw, 76px);
  --word: clamp(90px, 14.6vw, 220px);
}
@media (max-width: 1023px) { :root { --m: 32px; --sec: 112px; --proj: 96px; --h1: clamp(46px, 9.6vw, 84px); --h2: clamp(38px, 6.4vw, 56px); --word: clamp(90px, 17vw, 160px) } }
@media (max-width: 767px)  { :root { --m: 20px; --gut: 12px; --hd: 64px; --sec: 88px; --proj: 72px; --h1: 46px; --h2: 38px; --word: clamp(90px, 24.6vw, 96px) } }

*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important } /* hidden 속성은 언제나 숨김(개별 display 규칙보다 우선) */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hd); background: var(--bg) }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth } }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 17px/1.65 var(--f); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip }
img { display: block; max-width: 100%; height: auto }
main { position: relative; display: block }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0 }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 2px }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 12px 18px; background: var(--mint); color: var(--txl); font-size: 14px; border-radius: 4px }
.skip:focus { top: 12px }
.wrap { width: 100%; max-width: 1600px; margin-inline: auto; padding-left: max(var(--m), env(safe-area-inset-left, 0px)); padding-right: max(var(--m), env(safe-area-inset-right, 0px)) }
.label { display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2) }
.label span { color: var(--tx) }
.sec-h2 { font-size: var(--h2); line-height: 1.04; letter-spacing: -.055em; font-weight: 560 }
.dim { color: var(--tx2) }
.m-br { display: none }

/* ───────── 연결 점(노드)과 선 ───────── */
.nd { position: absolute; z-index: 4; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--tx); box-shadow: 0 0 0 3px var(--bg); pointer-events: none }
.nd--on { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--mint); box-shadow: none }
.links, .bridge { position: absolute; left: 0; top: 0; width: 100%; overflow: visible; pointer-events: none; fill: none }
.links { height: 100%; z-index: 0 }
.links path, .bridge path { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0 }
.bridge path { stroke: var(--mint); stroke-opacity: .8; stroke-width: 1.25 }
.bridge { z-index: 2; height: 0 }
.bridge path { stroke-dashoffset: 1 }
.bridge circle { fill: var(--mint); opacity: 0; transition: opacity .2s }
.bridge.is-on circle { opacity: 1 }

/* ───────── 헤더 ───────── */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; height: calc(var(--hd) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); transition: background-color .35s, border-color .35s, backdrop-filter .35s; border-bottom: 1px solid transparent }
.hd.is-solid { background: rgba(12, 17, 20, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--bd) }
.hd-in { height: 100%; display: flex; align-items: center; gap: 40px }
.logo { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap }
.logo b { font-weight: 700 }
.logo-t span { margin-left: .5em; color: var(--tx2) }
.hd-nav { display: flex; gap: 36px; margin-left: auto }
.hd-nav a, .menu-btn, .menu-close { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase }
.hd-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease) }
.hd-nav a:hover::after, .hd-nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left }
.menu-btn { gap: 12px; padding: 0 18px; border: 1px solid var(--bd); border-radius: 999px; transition: border-color .3s, background-color .3s, translate .4s var(--ease) }
.menu-btn:hover { border-color: rgba(255, 255, 255, .5) }
.hd-cta { display: inline-flex; align-items: center; min-height: 44px; margin-right: -26px; padding: 0 18px; border-radius: 999px; background: var(--mint); color: var(--txl); font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; transition: background-color .3s }
.hd-cta:hover { background: var(--mint-h) }
.menu-btn-i { display: grid; gap: 5px; width: 18px }
.menu-btn-i i { display: block; height: 1.5px; background: currentColor; transition: transform .45s var(--ease) }
.menu-btn-i i:last-child { width: 11px; justify-self: end }
.menu-btn:hover .menu-btn-i i:last-child { transform: scaleX(1.64); transform-origin: right }

/* ───────── 히어로 ───────── */
.hero { position: relative; overflow: hidden; overflow: clip }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: var(--gut); min-height: max(820px, 100svh); padding-top: clamp(130px, calc(var(--hd) + 5.2vw), 196px); padding-bottom: 40px }
.hero-copy { grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 3 }
.eyebrow { display: flex; align-items: center; gap: 14px; height: 16px; margin-bottom: 50px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2) }
.eyebrow .nd { position: relative; margin: 0; flex: none }
.hero-h1 { font-size: var(--h1); line-height: .98; letter-spacing: -.065em; font-weight: 560; margin-left: -.05em }
.ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em }
.ln-i { display: block; transition: transform 1s var(--ease) calc(var(--d, 0s) + .05s) }
.ln + .ln .ln-i { transition-delay: calc(var(--d, 0s) + .13s) }
.js [data-reveal]:not(.is-in) .ln-i { transform: translateY(108%) }
.hero-sub { margin-top: 36px; font-size: 17px; line-height: 1.65; color: var(--tx2); word-break: keep-all }
.micro { margin-top: 28px; font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2) }
.micro i { font-style: normal; opacity: .45; margin: 0 .55em }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 36px }
.btn-p { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--mint); color: var(--txl); font: 600 15px/1.2 var(--f); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: background-color .3s, translate .4s var(--ease) }
.btn-p i { font-style: normal; transition: transform .35s var(--ease) }
.btn-p:hover { background: var(--mint-h) }
.btn-p:hover i { transform: translateX(3px) }
.btn-s { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--tx); border-bottom: 1px solid var(--bd); transition: border-color .3s }
.btn-s i { font-style: normal; color: var(--mint) }
.btn-s:hover { border-bottom-color: var(--tx) }

.exhibit { grid-column: 7 / 13; grid-row: 1 / 3; position: relative; z-index: 2; align-self: start; justify-self: end; width: 100%; max-width: clamp(630px, 43.75vw, 760px); aspect-ratio: 630 / 560; margin-top: -24px; transform-origin: 50% 50%; will-change: transform }
.fr { position: absolute; display: block; border-radius: 6px; will-change: transform }
.fr-in { position: relative; display: block; overflow: hidden; border-radius: 6px; background: var(--bg2); box-shadow: 0 0 0 1px var(--bd) }
.fr-in img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .6s var(--ease), filter .45s }
.fr-itda { left: 0; top: 5.4%; width: 46%; z-index: 1 }
.fr-itda .fr-in { aspect-ratio: 290 / 190 }
.fr-veyra { left: 41.3%; top: 0; width: 54%; z-index: 2 }
.fr-veyra .fr-in { aspect-ratio: 340 / 230 }
.fr-moveup { left: 23.8%; top: 35%; width: 76.2%; z-index: 3 }
.fr-moveup .fr-in { aspect-ratio: 480 / 310 }
.fr-itda img { filter: brightness(.84) }
.fr-veyra img { filter: brightness(.92) }
.fr:hover img, .fr:focus-visible img { filter: none; transform: scale(1.03) }
.fr-tag { position: absolute; left: 0; top: calc(100% + 12px); display: flex; gap: .7em; font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); white-space: nowrap; transition: color .3s }
.fr-tag b { color: var(--tx); font-weight: 600 }
.fr-tag em { font-style: normal; padding-left: .7em; border-left: 1px solid var(--bd) }
.fr-tag em { letter-spacing: .02em }
.fr-tag--2 { flex-direction: column; gap: 7px }
.fr-tag--2 span b { margin-right: .7em }
.fr-tag--2 em { padding-left: 0; border-left: 0 }
.fr-veyra img { object-position: 0 0 }
.fr-veyra .fr-tag { top: auto; bottom: calc(100% + 12px) }
.fr:hover .fr-tag { color: var(--tx) }
[data-node="itda-in"] { left: 0; top: 40% }
[data-node="itda-out"] { left: 44%; top: 100% }
[data-node="moveup-l"] { left: 0; top: 60% }
[data-node="moveup-out"] { left: 92.6%; top: 100% }

.hero-word { grid-column: 1 / 9; grid-row: 3; align-self: end; position: relative; z-index: 1; font-size: var(--word); line-height: .8; font-weight: 720; letter-spacing: -.06em; margin: 0 0 -.02em -.06em; white-space: nowrap; pointer-events: none; user-select: none }
.explore { grid-column: 9 / 13; grid-row: 3; justify-self: end; align-self: end; position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 16px; min-height: 44px; font-size: 13px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px }
.explore-arrow { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--bd); border-radius: 50%; font-size: 16px; letter-spacing: 0; transition: background-color .35s, color .35s, border-color .35s }
.explore-arrow .nd { left: 50%; top: 0 }
.explore:hover .explore-arrow { background: var(--mint); border-color: var(--mint); color: var(--txl) }

/* ───────── 작업 ───────── */
.works { position: relative; z-index: 1; padding-top: var(--sec) }
.works-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut) }
.works-head .label { grid-column: 1 / -1; margin-bottom: 28px }
.works-head .sec-h2 { grid-column: 1 / 8; grid-row: 2 }
.works-ko { display: block; margin-top: 22px; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.35; letter-spacing: -.035em; font-weight: 500; color: var(--tx2); word-break: keep-all }
.works-intro { grid-column: 8 / 13; grid-row: 2; align-self: end; padding-bottom: 4px }
.works-desc { max-width: 30em; font-size: 16px; line-height: 1.75; color: var(--tx); word-break: keep-all }
.works-note { max-width: 32em; margin-top: 18px; font-size: 13px; line-height: 1.6; color: var(--tx2); word-break: keep-all }
.work { position: relative; margin-top: var(--proj) }
.work--wide { max-width: 1312px }
.work--flip { margin-left: auto }
.work-media { position: relative; display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 16 / 10; background: var(--bg2); transition: opacity .65s var(--ease) var(--d, 0s), transform .65s var(--ease) var(--d, 0s), translate .45s var(--ease) }
.wm-stack { position: absolute; inset: 0; display: block; scale: var(--ps, 1); transform-origin: 50% 0 } /* 스크롤 때 위쪽 고정 확대→제자리: 캡처 맨 윗줄(로고·메뉴)이 잘리지 않게 */
.js-par .work-media.is-near .wm-stack { will-change: scale }
.wf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform var(--t-norm) var(--ease) }
.wf-x { clip-path: inset(0 0 0 100%); transition: clip-path .55s var(--ease-io), transform var(--t-norm) var(--ease) }
.wf-x.is-on { clip-path: inset(0 0 0 0); transition: clip-path var(--t-slow) var(--ease-io), transform var(--t-norm) var(--ease) }
.wm-phone { position: absolute; z-index: 2; right: 4.5%; bottom: 8%; width: 14.5%; padding: .55%; border-radius: 11% / 5.1%; background: var(--bg); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 26px 60px -14px rgba(0, 0, 0, .7); translate: 0 var(--ph, 0px); transition: transform .6s var(--ease) }
.wm-phone img { width: 100%; height: auto; border-radius: 9% / 4.2% }
#w-advisory .wm-phone { top: 12%; bottom: auto; right: 5%; width: 13.5% }
#w-itda .wm-phone { right: 5%; width: 17% }
#w-gyeol .wm-phone { right: 6%; width: 20% }
.wm-prog { position: absolute; z-index: 3; left: 20px; bottom: 20px; display: flex; gap: 6px; width: 132px; opacity: 0; transition: opacity .3s }
.wm-prog i { position: relative; flex: 1; height: 2px; background: rgba(245, 246, 242, .32); overflow: hidden }
.wm-prog i::after { content: ''; position: absolute; inset: 0; background: var(--mint); transform: scaleX(0); transform-origin: left }
.wm-prog i.is-done::after { transform: scaleX(1) }
.wm-prog i.is-cur::after { transform: scaleX(1); transition: transform var(--seq, 1.6s) linear }
.work-media.is-seq .wm-prog { opacity: 1 }
.work-media::before { content: ''; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 1px; background: var(--mint); opacity: .8; transform-origin: left; transition: transform 1.2s var(--ease) calc(var(--d, 0s) + .25s) }
.js .work-media:not(.is-in)::before { transform: scaleX(0) }
#w-moveup .work-media::before { display: none }
.work-view { position: absolute; z-index: 3; left: 20px; top: 20px; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; background: rgba(12, 17, 20, .76); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; opacity: 0; translate: 0 8px; transition: opacity .35s, translate .45s var(--ease) }
.work-view i { font-style: normal; color: var(--mint) }
@media (hover: hover) {
  .work-media:hover { translate: 0 -8px }
  #w-moveup .work-media:hover { translate: none }
  .work-media:hover .wf { transform: scale(1.025) }
  .work-media:hover .wm-phone { transform: translateY(-10px) }
  .has-cur .work-media:hover .work-view { opacity: 0 }
  .work-media:hover .work-view { opacity: 1; translate: 0 0 }
}
.work-media:focus-visible .work-view { opacity: 1; translate: 0 0 }
.work-meta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; padding-top: 26px; transition: opacity .65s var(--ease) var(--d, 0s), transform .65s var(--ease) var(--d, 0s) }
.work-no { position: relative; grid-column: 1 / 2; justify-self: start; margin-top: 6px; padding-left: 16px; font-size: 12px; line-height: 1.2; letter-spacing: .12em; color: var(--tx2); font-variant-numeric: tabular-nums }
.work-no::before { content: ''; position: absolute; left: -3px; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--mint) }
.work-title { grid-column: 2 / 7; font-size: 48px; line-height: 1.08; letter-spacing: -.045em; font-weight: 560 }
.work-desc { grid-column: 7 / 10; padding-top: 4px; font-size: 15px; line-height: 1.6; color: var(--tx2); word-break: keep-all }
.work-tags { grid-column: 10 / 13; display: grid; gap: 6px; padding-top: 6px }
.work-tags div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--bd); font-size: 12px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase }
.work-tags dt { color: var(--tx2) }
.work-tags dd { text-align: right }
.work-style { grid-column: 2 / 7; margin-top: 16px }
.ws-en { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 13px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; font-weight: 500 }
.ws-en span { color: var(--mint) }
.ws-ko { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--tx2); word-break: keep-all }
.work-act { grid-column: 2 / 7; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 24px }
.cta { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px; border: 1px solid var(--mint); border-radius: 999px; color: var(--mint); font-size: 14px; line-height: 1.2; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; transition: background-color .3s, color .3s, translate .4s var(--ease) }
.cta i { font-style: normal; transition: transform .35s var(--ease) }
.cta:hover, .cta:focus-visible { background: var(--mint); color: var(--txl) }
.cta:hover i, .cta:focus-visible i { transform: translateX(3px) }
@media (min-width: 1024px) {
  .work--wide .work-title { grid-row: 1 } .work--wide .work-style { grid-row: 2 } .work--wide .work-act { grid-row: 3 }
  .work--wide .work-desc, .work--wide .work-tags { grid-row: 1 / span 3 }
  .work--flip { width: calc(min(1312px, 100%) * 11 / 12 - var(--gut) / 12) }
  .work--flip .work-meta { grid-template-columns: repeat(11, minmax(0, 1fr)) }
  .work--flip .work-title, .work--flip .work-style, .work--flip .work-act { grid-column: 2 / 6 }
  .work--flip .work-desc { grid-column: 6 / 9 }
  .work--flip .work-tags { grid-column: 9 / 12 }
}
.work-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--tx); border-bottom: 1px solid transparent }
.work-link i { font-style: normal; color: var(--mint); transition: transform .35s var(--ease) }
.work-link:hover { border-bottom-color: currentColor }
.work-link:hover i { transform: translate(2px, -2px) }

.work-pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start }
.work-pair .work--half:first-child { grid-column: 1 / 8 }
.work-pair .work--drop { grid-column: 8 / 13; margin-top: calc(var(--proj) + 168px) }
.work--half .work-meta { grid-template-columns: 52px minmax(0, 1fr); row-gap: 0 }
.work--half .work-no { grid-column: 1 }
.work--half .work-title, .work--half .work-style, .work--half .work-desc, .work--half .work-tags, .work--half .work-act { grid-column: 2 }
.work--half .work-style { margin-top: 12px }
.work--half .work-desc { padding-top: 14px; max-width: 34em }
.work--half .work-tags { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 16px }
.work--half .work-tags div { border: 0; padding: 0; justify-content: flex-start; gap: 8px }
.work--half .work-act { margin-top: 18px }

/* ───────── 제작 방식 안내 ───────── */
.bespoke { padding-top: var(--sec) }
.bespoke-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut) }
.bespoke-in { display: contents }
.bespoke-grid::before { content: ''; position: absolute; left: max(var(--m), env(safe-area-inset-left, 0px)); right: max(var(--m), env(safe-area-inset-right, 0px)); top: 0; height: 1px; background: var(--bd); transform-origin: left; transition: transform 1.2s var(--ease) .1s }
.js .bespoke-grid:not(.is-in)::before { transform: scaleX(0) }
.bespoke-h { grid-column: 1 / 8; padding-top: 48px }
.bespoke-p { grid-column: 8 / 13; align-self: end; max-width: 27em; font-size: 18px; line-height: 1.75; color: var(--tx2); word-break: keep-all }

/* ───────── 스튜디오 (밝은 면) ───────── */
.studio { margin-top: var(--sec); padding-block: var(--sec); background: var(--bgl); color: var(--txl) }
.js-par .studio { clip-path: inset(0 var(--cx, 0px) round var(--cr, 0px)) }
.studio-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut) }
.studio .label { grid-column: 1 / -1; margin-bottom: 28px; color: var(--txl2) }
.studio .sec-h2 { grid-column: 1 / 9 }
.studio-body { grid-column: 7 / 12; margin-top: 56px; font-size: 19px; line-height: 1.65; color: var(--txl2); word-break: keep-all }
.caps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gut); margin-top: 112px; padding: 0; list-style: none; counter-reset: cap }
.caps li { position: relative; padding-top: 28px; counter-increment: cap }
.caps li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--txl); opacity: .22; transform-origin: left; transition: transform 1s var(--ease) calc(var(--d, 0s) + .1s) }
.cap-t { position: relative; padding-left: 30px; font-size: 26px; line-height: 1.2; letter-spacing: -.035em; font-weight: 560 }
.cap-t::before { content: '0' counter(cap); position: absolute; left: 0; top: .85em; font-size: 11px; letter-spacing: .12em; line-height: 1; color: var(--txl2); font-weight: 500 }
.cap-t span { color: var(--txl2); font-weight: 400 }
.cap-d { margin-top: 16px; padding-left: 30px; max-width: 26em; font-size: 15px; line-height: 1.65; color: var(--txl2); word-break: keep-all }

/* ───────── 문의 ───────── */
.contact { padding-block: var(--sec) calc(var(--sec) * .75) }
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut) }
.contact .label { grid-column: 1 / -1; margin-bottom: 28px }
.contact-h { grid-column: 1 / 11; font-size: var(--h1); line-height: .98; letter-spacing: -.065em; font-weight: 560; margin-left: -.05em }
.contact-sub { grid-column: 1 / 7; margin-top: 32px; font-size: 17px; color: var(--tx2) }
.contact:focus { outline: none }
#contact { scroll-margin-top: calc(var(--hd) * -1) } /* 문의 구역은 화면 맨 위에 맞춰 도착(위 밝은 면이 머리말 밑에 비치지 않게) */
.pick { grid-column: 1 / 8; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; margin-top: 44px; padding: 22px 24px; border: 1px solid rgba(182, 242, 217, .38); border-radius: 8px; background: rgba(182, 242, 217, .05) }
.pick[hidden] { display: none }
.pick-l { font-size: 12px; line-height: 1.2; letter-spacing: .12em; color: var(--mint) }
.pick-v { font-size: 22px; line-height: 1.35; letter-spacing: -.02em; font-weight: 540; word-break: keep-all }
.pick-v span { color: var(--tx2); font-weight: 450 }
.pick-v span::before { content: '·'; margin: 0 .45em; color: var(--tx2) }
.pick-n { font-size: 13px; line-height: 1.6; color: var(--tx2); word-break: keep-all }
.pick-x { grid-column: 2; grid-row: 1 / 4; align-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--bd); border-radius: 999px; font-size: 13px; color: var(--tx2); transition: color .3s, border-color .3s }
.pick-x:hover { color: var(--tx); border-color: rgba(255, 255, 255, .5) }
.contact-act { position: relative; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: 88px; padding-top: 32px }
.contact-act::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--mint); opacity: .8; transform-origin: left; transition: transform 1.2s var(--ease) calc(var(--d, 0s) + .2s) }
.contact-act::after { content: ''; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--mint) }
.js .contact-side:not(.is-in) .contact-act::before { transform: scaleX(0) }
.mail { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; font-size: clamp(30px, 3.9vw, 60px); line-height: 1.1; letter-spacing: -.04em; font-weight: 540 }
.mail-t { background: linear-gradient(var(--mint), var(--mint)) 0 100% / 0 2px no-repeat; transition: background-size .55s var(--ease); padding-bottom: 4px }
.mail i { font-style: normal; font-size: .6em; color: var(--mint); transition: transform .4s var(--ease) }
.mail:hover .mail-t, .mail:focus-visible .mail-t { background-size: 100% 2px }
.mail:hover i { transform: translate(4px, -4px) }
.contact-alt { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; font-size: 14px }
.copy, .tel { display: inline-flex; align-items: center; min-height: 44px; letter-spacing: .02em; color: var(--tx2); border-bottom: 1px solid transparent; transition: color .3s }
.copy { text-decoration: underline; text-decoration-color: var(--bd); text-underline-offset: 5px }
.copy:hover, .tel:hover { color: var(--tx) }
.copy-status { position: absolute; left: 0; top: 100%; white-space: nowrap; font-size: 13px; color: var(--mint) }

/* 문의: 왼쪽 = 안내·메일 직접 문의(보조), 오른쪽 = 상담 접수 폼 */
.contact-side { grid-column: 1 / 6; align-self: start; margin-top: 56px; min-width: 0 }
.contact-side .contact-sub { margin-top: 0 }
.contact-side .contact-act { display: grid; justify-items: start; gap: 4px; margin-top: 44px; padding-top: 28px }
.contact-alt-l { font-size: 12px; line-height: 1.2; letter-spacing: .12em; color: var(--tx2) }
.contact-side .mail { font-size: clamp(24px, 2.2vw, 32px); gap: 12px }
.contact-side .contact-alt { gap: 4px 24px }
.inq-nojs { grid-column: 7 / 13; margin-top: 56px; font-size: 15px; color: var(--tx2); word-break: keep-all }
.js .inq-nojs { display: none }
html:not(.js) .lead-cta { display: none }
.inq { display: grid; gap: 22px; align-content: start; min-width: 0 }
.inq-help { margin-top: 0; font-size: 13px; line-height: 1.5; color: var(--tx2); word-break: keep-all }
.inq-help b, .f-l b { color: var(--mint); font-weight: 600 }
.inq-errs { padding: 16px 18px; border: 1px solid var(--err); border-radius: 8px; background: rgba(255, 156, 138, .07); font-size: 14px; line-height: 1.5 }
.inq-errs > p { font-weight: 560; color: var(--err) }
.inq-errs ul { margin: 6px 0 0; padding-left: 18px }
.inq-errs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--tx); text-decoration: underline; text-underline-offset: 3px }
.f, .f-set { display: grid; gap: 8px; min-width: 0 }
.f-set { margin: 0; padding: 0; border: 0 }
.f-set .f { gap: 6px }
.f-l { padding: 0; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--tx) }
.f-l--sub { font-size: 12.5px; font-weight: 450; color: var(--tx2) }
.f-opt { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--tx2) }
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start }
.f-i { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; background: var(--bg2); color: var(--tx); font: 400 16px/1.4 var(--f); letter-spacing: -.005em; -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s, background-color .2s }
.f-i:hover { border-color: rgba(255, 255, 255, .32) }
.f-i:focus { outline: none; border-color: var(--mint); background-color: #182126; box-shadow: 0 0 0 3px rgba(182, 242, 217, .2) }
.f-i[aria-invalid="true"] { border-color: var(--err) }
.f-i[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(255, 156, 138, .22) }
.f-ta { min-height: 168px; padding: 14px 16px; line-height: 1.6; resize: vertical }
.f-sel { padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A5B0B3' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px }
.f-sel option { background: var(--bg2); color: var(--tx) }
.f-hint { font-size: 12.5px; line-height: 1.5; color: var(--tx2); word-break: keep-all }
.f-err { display: none; font-size: 13px; line-height: 1.45; color: var(--err); word-break: keep-all }
.f-err:not(:empty) { display: flex; align-items: flex-start; gap: 7px }
.f-err:not(:empty)::before { content: '!'; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--err); color: var(--txl); font-size: 11px; font-weight: 700 }
.f-style { display: flex; align-items: center; gap: 10px }
.f-style .f-sel { flex: 1; min-width: 0 }
.f-style .pick-x { grid-column: auto; grid-row: auto; flex: none; min-height: 52px; margin: 0 }
.f-i.is-picked { animation: v2-pick 1s var(--ease) }
@keyframes v2-pick { from { border-color: var(--mint); box-shadow: 0 0 0 0 rgba(182, 242, 217, .55) } to { box-shadow: 0 0 0 12px rgba(182, 242, 217, 0) } }
.f-check { display: flex; align-items: center; gap: 12px; min-height: 44px }
.f-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--mint); cursor: pointer }
.f-check input[aria-invalid="true"] { outline: 2px solid var(--err); outline-offset: 2px }
.f-check label { padding-block: 10px; font-size: 15px; line-height: 1.4; cursor: pointer; word-break: keep-all }
.f-check label b { font-weight: 600; color: var(--mint) }
.f-notice { margin-left: 34px; font-size: 13px; line-height: 1.6; color: var(--tx2) }
.f-notice summary { display: inline-flex; align-items: center; min-height: 44px; list-style: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
.f-notice summary::-webkit-details-marker { display: none }
.f-notice[open] summary { color: var(--tx) }
.f-notice dl { display: grid; gap: 8px; margin: 2px 0 6px; padding: 14px 16px; border: 1px solid var(--bd); border-radius: 6px; background: rgba(255, 255, 255, .02) }
.f-notice dl div { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 10px }
.f-notice dd { color: var(--tx); word-break: keep-all }
.f-notice a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--tx); text-decoration: underline; text-underline-offset: 3px }
.f-notice a i { font-style: normal; color: var(--mint) }
.f--agree .f-err { margin-left: 34px }
.inq-foot { display: grid; justify-items: start; gap: 12px; margin-top: 4px }
.inq-submit { min-height: 56px; padding: 0 30px; font-size: 16px }
.inq-submit:disabled { cursor: progress; opacity: .88 }
.inq-spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(23, 28, 31, .25); border-top-color: var(--txl); border-radius: 50%; animation: v2-spin .7s linear infinite }
@keyframes v2-spin { to { transform: rotate(360deg) } }
.inq[data-state="submitting"] .inq-spin { display: block }
.inq[data-state="submitting"] .inq-submit i { display: none }
.inq-mode { font-size: 12.5px; line-height: 1.5; color: var(--tx2); word-break: keep-all }
.inq[data-state="done"] > :not(.inq-result) { display: none }
.inq-result { display: grid; gap: 8px; padding: 24px; border: 1px solid rgba(182, 242, 217, .45); border-radius: 8px; background: rgba(182, 242, 217, .06) }
.inq-result:focus { outline: none }
.inq-result-t { display: flex; align-items: center; gap: 10px; font-size: 18px; line-height: 1.4; font-weight: 560; word-break: keep-all }
.inq-result-t::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mint) }
.inq-result-d { font-size: 14px; line-height: 1.6; color: var(--tx2); word-break: keep-all }
.inq-result-d b { color: var(--tx); font-weight: 600 }
.inq-result-a { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 10px }
.inq-edit { min-height: 44px; font-size: 14px; color: var(--tx2); text-decoration: underline; text-underline-offset: 4px }
.inq-edit:hover { color: var(--tx) }

/* ───────── 하단 사업자 정보 ───────── */
.ft { border-top: 1px solid var(--bd); padding-block: 56px 40px; font-size: 13px; line-height: 1.6; color: var(--tx2) }
.ft-brand { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx); margin-bottom: 28px }
.ft-brand span { color: var(--tx2); letter-spacing: .02em; text-transform: none }
.ft-biz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px var(--gut) }
.ft-biz div { display: grid; gap: 2px; align-content: start }
.ft-biz dt { font-size: 12px; color: rgba(165, 176, 179, .85) }
.ft-biz dd { color: var(--tx); word-break: keep-all }
.ft-biz a { display: inline-block; padding-block: 12px; margin-block: -12px; margin-left: 6px; text-decoration: underline; text-underline-offset: 3px; color: var(--tx2) }
.ft-biz a:hover { color: var(--tx) }
.ft-biz dd > a[href^="tel"] { margin-left: 0; color: var(--tx); text-decoration: none }
.ft-low { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--bd) }
.ft-low a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--tx); text-decoration: underline; text-underline-offset: 3px }

/* ───────── 전체 화면 메뉴 ───────── */
.menu { position: fixed; inset: 0; z-index: 100; overflow-y: auto; background: var(--bgl); color: var(--txl); clip-path: inset(0 0 100% 0); transition: clip-path .3s cubic-bezier(.55, 0, .7, .2) }
.menu.is-open { clip-path: inset(0 0 0 0); transition: clip-path .45s var(--ease) }
.menu-in { display: flex; flex-direction: column; min-height: 100%; padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: var(--hd); flex: none }
.menu-top .logo-t span { color: var(--txl2) }
.menu-close { gap: 12px; padding: 0 18px; border: 1px solid var(--bdl); border-radius: 999px }
.menu-close-i { position: relative; width: 14px; height: 14px }
.menu-close-i::before, .menu-close-i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transform: rotate(45deg) }
.menu-close-i::after { transform: rotate(-45deg) }
.menu nav { flex: 1; display: flex; align-items: center }
.menu-list { width: 100%; padding: 80px 0; list-style: none }
.menu-list li { border-bottom: 1px solid var(--bdl); overflow: hidden }
.menu-list li:first-child { border-top: 1px solid var(--bdl) }
.menu-list a { display: flex; align-items: baseline; gap: 28px; min-height: 44px; padding: 10px 0; font-size: 72px; line-height: 1.12; letter-spacing: -.05em; font-weight: 560; transform: translateY(60%); opacity: 0; transition: transform .3s var(--ease), opacity .2s }
.menu.is-open .menu-list a { transform: none; opacity: 1; transition: transform .6s var(--ease), opacity .45s var(--ease); transition-delay: calc(150ms + var(--i) * 70ms) }
.menu-list li:nth-child(1) a { --i: 0 } .menu-list li:nth-child(2) a { --i: 1 } .menu-list li:nth-child(3) a { --i: 2 }
.mn { width: 40px; flex: none; font-size: 12px; letter-spacing: .12em; color: var(--txl2); font-weight: 500; transform: translateY(-1.6em) }
.mt { transition: transform .45s var(--ease) }
.menu-list a:hover .mt, .menu-list a:focus-visible .mt { transform: translateX(16px) }
.menu-list a:focus-visible { outline-color: var(--txl) }
.menu-foot { display: flex; flex-wrap: wrap; gap: 4px 32px; font-size: 14px; color: var(--txl2) }
.menu-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--txl) }
.menu-foot span { display: inline-flex; align-items: center; min-height: 44px }
.menu :focus-visible { outline-color: var(--txl) }
html.menu-lock { overflow: hidden }

/* ───────── 커서 표시 ───────── */
.cur { display: none }
.has-cur .cur { position: fixed; left: 0; top: 0; z-index: 70; display: grid; place-items: center; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: var(--mint); color: var(--txl); pointer-events: none; scale: 0; transition: scale .35s var(--ease); will-change: transform }
.has-cur .cur.is-on { scale: 1 }
.cur-t { max-width: 72px; font-size: 11px; line-height: 1.25; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; text-align: center }
.has-cur [data-cursor] { cursor: none }

/* ───────── 등장(스크롤) ───────── */
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px) }
[data-reveal] { transition: opacity .65s var(--ease) var(--d, 0s), transform .65s var(--ease) var(--d, 0s) }
.js .caps li:not(.is-in)::before { transform: scaleX(0) }

/* ───────── 첫 방문 인트로 (총 1.35초, 글자는 처음부터 보임) ───────── */
@keyframes v2-draw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
@keyframes v2-rise { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes v2-frame { from { opacity: 0; transform: translateY(var(--fy)) scale(var(--fs)) } to { opacity: 1; transform: none } }
@keyframes v2-fade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes v2-pop { from { opacity: 0; transform: scale(.2) } to { opacity: 1; transform: none } }
@keyframes v2-line { from { transform: translateY(108%) } to { transform: none } }
@keyframes v2-wipe { from { clip-path: inset(100% 0 0 0 round 6px) } to { clip-path: inset(-1px round 7px) } }
@keyframes v2-zoom { from { transform: scale(1.16) } to { transform: none } }
.intro .links path { animation: v2-draw .44s var(--ease) both; animation-delay: calc(150ms + var(--i, 0) * 90ms) }
.intro .hero-word { animation: v2-rise .67s var(--ease) .28s both }
.intro .hero-h1 .ln-i { animation: v2-line .8s var(--ease) both }
.intro .hero-h1 .ln + .ln .ln-i { animation-delay: .08s }
.intro .eyebrow span { animation: v2-fade .5s var(--ease) .05s both }
.intro .hero-sub { animation: v2-fade .6s var(--ease) .32s both }
.intro .fr-in, .intro .fr-in img { animation: v2-wipe .7s var(--ease-io) both }
.intro .fr-in img { animation-name: v2-zoom; animation-duration: .75s; animation-timing-function: var(--ease) }
.intro .fr-moveup .fr-in, .intro .fr-moveup .fr-in img { animation-delay: .4s }
.intro .fr-veyra .fr-in, .intro .fr-veyra .fr-in img { animation-delay: .47s }
.intro .fr-itda .fr-in, .intro .fr-itda .fr-in img { animation-delay: .54s }
.intro .nd { animation: v2-pop .4s var(--ease) both; animation-delay: .5s }
.intro [data-node="eyebrow"] { animation-delay: .1s }
.intro [data-node="itda-in"] { animation-delay: .5s }
.intro [data-node="itda-out"], .intro [data-node="moveup-l"] { animation-delay: .62s }
.intro [data-node="moveup-out"], .intro [data-node="explore"] { animation-delay: .8s }
.intro .fr-tag, .intro .explore-t, .intro .micro { animation: v2-fade .5s var(--ease) .85s both }
.intro .hero-act { animation: v2-fade .55s var(--ease) .45s both }
.intro .explore-arrow { animation: v2-fade .48s var(--ease) .87s both }

/* ───────── 태블릿 768~1023 ───────── */
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); padding-top: 132px; min-height: 0; padding-bottom: 36px }
  .hero-copy { grid-column: 1 / -1 }
  .eyebrow { margin-bottom: 36px }
  .exhibit { grid-column: 2 / -1; grid-row: 2; margin-top: 48px; max-width: 560px; justify-self: end }
  .eyebrow .nd, [data-node="itda-in"] { display: none }
  .hero-word { grid-column: 1 / 6; margin-top: 32px }
  .explore { grid-column: 6 / -1 }
  .works-head, .work-meta, .work-pair, .studio-grid, .contact-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) }
  .works-head .sec-h2 { grid-column: 1 / -1 }
  .works-intro { grid-column: 1 / 7; grid-row: 3; margin-top: 36px }
  .work-no { grid-column: 1 / 2 }
  .work-title { grid-column: 2 / 6; font-size: 40px }
  .work-style, .work-act { grid-column: 2 / 6 }
  .work-desc { grid-column: 2 / 6; padding-top: 14px }
  .work-tags { grid-column: 6 / -1; grid-row: 1 / 5 }
  .work--wide .work-title { grid-row: 1 } .work--wide .work-style { grid-row: 2 } .work--wide .work-desc { grid-row: 3 } .work--wide .work-act { grid-row: 4 }
  .work--half .work-tags, .work--half .work-desc, .work--half .work-style, .work--half .work-act { grid-column: 2; grid-row: auto }
  .work-pair .work--half:first-child { grid-column: 1 / -1 }
  .work-pair .work--drop { grid-column: 3 / -1; margin-top: var(--proj) }
  .bespoke-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) }
  .bespoke-h { grid-column: 1 / -1 }
  .bespoke-p { grid-column: 3 / -1; margin-top: 32px }
  .pick { grid-column: 1 / -1 }
  .studio .sec-h2 { grid-column: 1 / -1 }
  .studio-body { grid-column: 3 / -1 }
  .caps { grid-template-columns: 1fr; row-gap: 40px; margin-top: 80px }
  .contact-h { grid-column: 1 / -1 }
  .contact-sub { grid-column: 1 / -1 }
  .ft-biz { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ───────── 모바일 ≤767 (따로 짠 구성) ───────── */
@media (max-width: 767px) {
  body { font-size: 15px; line-height: 1.6 }
  .hd-nav { display: none }
  .hd-in { justify-content: space-between }
  .menu-btn { padding: 0 16px }
  .hero-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 136px; padding-bottom: 24px }
  .eyebrow { margin-bottom: 20px; font-size: 11px }
  .hero-h1 { line-height: 1.03; letter-spacing: -.06em }
  .hero-sub { margin-top: 18px; font-size: 15px; line-height: 1.6 }
  .micro { margin-top: 16px }
  .exhibit { grid-column: 1 / -1; margin-top: 26px; max-width: none; aspect-ratio: 350 / 292 }
  .fr-itda { left: 0; top: 7%; width: 43% }
  .fr-veyra { left: 47%; top: 0; width: 53% }
  .fr-moveup { left: 9%; top: 29%; width: 82% }
  .fr-itda .fr-tag, .fr-veyra .fr-tag { display: none }
  .fr-moveup .fr-tag { top: calc(100% + 8px) }
  [data-node="itda-out"] { left: 24% }
  [data-node="moveup-l"] { top: 52% }
  [data-node="moveup-out"] { left: 92% }
  .hero-word { grid-column: 1 / 4; margin-top: 14px }
  .explore { grid-column: 3 / -1; gap: 10px; font-size: 11px; line-height: 1.25; margin-bottom: 0 }
  .explore-t { text-align: right }
  .m-br { display: inline }
  .works-head, .work-meta, .work-pair, .studio-grid, .contact-grid { grid-template-columns: minmax(0, 1fr) }
  .works-head > *, .studio-grid > *, .contact-grid > * { grid-column: 1 / -1 !important }
  .works-head { padding-right: 40px }
  .sec-h2 { line-height: 1.1; letter-spacing: -.05em }
  .works-ko { margin-top: 14px; font-size: 21px }
  .works-intro { margin-top: 26px; padding-bottom: 0 }
  .works-desc { font-size: 15px }
  .works-note { font-size: 12.5px }
  .work-media { border-radius: 6px }
  .work-meta { padding-top: 18px; grid-template-columns: 44px minmax(0, 1fr) }
  .work-no { grid-column: 1; margin-top: 4px; font-size: 11px }
  .work-title, .work-style, .work-desc, .work-tags, .work-act { grid-column: 2 !important; grid-row: auto !important }
  .work-style { margin-top: 10px }
  .ws-en { font-size: 12px }
  .ws-en span { flex-basis: 100% }
  .ws-ko { font-size: 14px }
  .work-act { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 18px }
  .wm-phone, #w-advisory .wm-phone, #w-itda .wm-phone, #w-gyeol .wm-phone { top: auto; bottom: 8%; right: 4.5%; width: 20% }
  .work-title { font-size: 28px; line-height: 1.12 }
  .work-desc { font-size: 14px; padding-top: 10px }
  .work-desc { grid-row: auto }
  .work-tags { grid-row: auto; display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 12px }
  .work-tags div { border: 0; padding: 0; gap: 6px; font-size: 11px }
  .work-view { display: none }
  .work-pair .work--half:first-child, .work-pair .work--drop { grid-column: 1 / -1; margin-top: var(--proj) }
  .work--half .work-meta { grid-template-columns: 44px minmax(0, 1fr) }
  .bespoke-grid { grid-template-columns: minmax(0, 1fr) }
  .bespoke-h { grid-column: 1 / -1; padding-top: 36px }
  .bespoke-p { grid-column: 1 / -1; margin-top: 22px; font-size: 16px }
  .pick { grid-template-columns: minmax(0, 1fr); margin-top: 32px; padding: 18px }
  .pick-x { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px }
  .pick-v { font-size: 19px }
  .studio-body { margin-top: 28px; font-size: 16px }
  .caps { margin-top: 56px; row-gap: 32px }
  .caps li { padding-top: 22px }
  .cap-t { font-size: 22px }
  .cap-d { padding-left: 30px; font-size: 14px }
  .contact-sub { margin-top: 20px; font-size: 15px }
  .contact-act { margin-top: 56px; flex-direction: column; align-items: flex-start }
  .copy-status { position: static; flex-basis: 100%; min-height: 1.4em }
  .mail { font-size: 30px; gap: 12px }
  .ft-biz { grid-template-columns: minmax(0, 1fr) }
  .ft-biz div { grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px }
  .menu-list { padding: 56px 0 }
  .menu-list a { font-size: 46px; gap: 18px }
  .mn { width: 28px; font-size: 11px; transform: translateY(-1.1em) }
}
@media (max-width: 370px) { .ft-biz div { grid-template-columns: 1fr; gap: 0 } .hero-word { margin-top: 20px } }

/* 넓은 화면 1920+ : 1600 폭 가운데, 글자 크기는 clamp 상한 */
@media (min-width: 1700px) { .hero-grid { padding-top: 188px } }

/* 움직임 줄이기: 변형 없이 즉시 완성 화면 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important }
  .js [data-reveal]:not(.is-in) { opacity: 1; transform: none }
  .js .caps li:not(.is-in)::before { transform: none }
  .bridge path { stroke-dashoffset: 0 }
  .js [data-reveal]:not(.is-in) .ln-i, .ln-i { transform: none }
  .wm-stack, .wm-phone { translate: none !important; scale: none !important }
  .studio { clip-path: none !important }
  .has-cur .cur { display: none }
}

/* ───────── CTA·상담 접수 폼: 태블릿·모바일 ───────── */
@media (max-width: 1023px) {
  .contact-side, .lead-cta, .inq-nojs { grid-column: 1 / -1 }
  .lead-cta { margin-top: 48px }
  .contact-side .contact-act { margin-top: 32px }
}
@media (max-width: 767px) {
  .hd-in { gap: 8px }
  .hd-cta { margin: 0 0 0 auto; padding: 0 14px; font-size: 12.5px }
  .hero-act { gap: 8px 22px; margin-top: 22px }
  .hero-act .btn-p { min-height: 48px; padding: 0 20px; font-size: 14px }
  .hero-act .btn-s { font-size: 14px }
  .contact-side { margin-top: 32px }
  .contact-side .mail { font-size: 24px }
  .inq { gap: 20px }
  .lead-cta { margin-top: 40px }
  .f-row { grid-template-columns: minmax(0, 1fr) }
  .f-style { flex-wrap: wrap }
  .f-style .pick-x { min-height: 44px }
  .inq-foot, .inq-submit { width: 100% }
  .inq-submit { justify-content: center }
  .inq-result { padding: 20px 18px }
  .inq-result-a .btn-p { width: 100% }
  .f-notice dl div { grid-template-columns: minmax(0, 1fr); gap: 2px }
}
@media (max-width: 400px) { .menu-btn { gap: 8px; padding: 0 12px } .hd-cta { padding: 0 12px } }

/* ───────── 문의 구역: 양식 열기 (양식 자체는 팝업) ───────── */
.lead-cta { position: relative; grid-column: 7 / 13; align-self: start; display: grid; justify-items: start; gap: 12px; min-width: 0; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--bd) }
.lead-cta-t { font-size: 22px; line-height: 1.3; letter-spacing: -.02em; font-weight: 560 }
.lead-cta-d { max-width: 30em; font-size: 15px; line-height: 1.65; color: var(--tx2); word-break: keep-all }
.lead-cta .btn-p { margin-top: 12px; min-height: 56px; padding: 0 30px; font-size: 16px }
.lead-cta-n { max-width: 34em; font-size: 12.5px; line-height: 1.55; color: var(--tx2); word-break: keep-all }

/* 모드별 문구(배포 때는 해당 모드가 아니면 아예 빠짐) */
html[data-inquiry="mail"] [data-mode="server"], html[data-inquiry="server"] [data-mode="mail"] { display: none !important }

/* ───────── 문의 팝업: PC 가운데 상자 · 휴대폰 전체 화면. 열림은 0.28초 옅어짐+8px 올라옴만 ───────── */
html.lead-lock { overflow: hidden }
.lead { position: fixed; inset: 0; width: min(760px, calc(100% - 48px)); max-width: none; height: fit-content; max-height: min(900px, calc(100dvh - 48px)); margin: auto; padding: 0; border: 1px solid var(--bd); border-radius: 12px; background: var(--bg); color: var(--tx); overflow: hidden; overflow: clip; box-shadow: 0 40px 120px -24px rgba(0, 0, 0, .75); opacity: 0; translate: 0 8px; transition: opacity .28s var(--ease), translate .35s var(--ease) }
.lead[open] { display: flex; flex-direction: column }
.lead.is-open { opacity: 1; translate: 0 0 }
.lead::backdrop { background: rgba(6, 9, 11, .74); opacity: 0; transition: opacity .28s var(--ease) }
.lead.is-open::backdrop { opacity: 1 }
.lead-hd { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 26px 32px 22px; border-bottom: 1px solid var(--bd) }
.lead-hd .label { margin-bottom: 10px }
.lead-title { font-size: 30px; line-height: 1.15; letter-spacing: -.035em; font-weight: 560 }
.lead-title:focus { outline: none }
.lead-x { flex: none; position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 18px; border: 1px solid var(--bd); border-radius: 999px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; transition: border-color .3s }
.lead-x:hover { border-color: rgba(255, 255, 255, .5) }
.lead .inq { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 26px 32px calc(32px + env(safe-area-inset-bottom, 0px)); scrollbar-gutter: stable }

/* 프로젝트 유형: 고르기 쉬운 알약 단추(라디오) */
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip { position: relative; display: inline-flex }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer }
.chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: var(--bg2); font-size: 15px; line-height: 1.2; transition: background-color .2s, border-color .2s, color .2s; pointer-events: none }
.chip:hover span { border-color: rgba(255, 255, 255, .34) }
.chip input:checked + span { background: var(--mint); border-color: var(--mint); color: var(--txl); font-weight: 600 }
.chip input:focus-visible + span { outline: 2px solid var(--mint); outline-offset: 3px }
.f-set[aria-invalid="true"] .chip span { border-color: var(--err) }

/* 자동 프로그램용 숨은 칸(사람에게는 안 보이고 읽히지 않음) */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden }

/* 접수 실패 안내(양식은 그대로 두고 다시 보내거나 메일로) */
.inq-fail { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--err); border-radius: 8px; background: rgba(255, 156, 138, .07); font-size: 14px; line-height: 1.55 }
.inq-fail-t { font-weight: 600; color: var(--err) }
.inq-fail-d { color: var(--tx); word-break: keep-all }
.inq-fail-mail { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; justify-self: start; color: var(--tx); text-decoration: underline; text-underline-offset: 3px }
.inq-fail-mail i { font-style: normal; color: var(--mint) }

/* ───────── 방문 분석 동의 막대(측정 ID가 있을 때만) ───────── */
.cookie { position: fixed; z-index: 90; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(760px, calc(100% - 32px)); margin-inline: auto; display: flex; align-items: center; gap: 14px 24px; padding: 14px 16px 14px 22px; border: 1px solid var(--bd); border-radius: 12px; background: rgba(21, 28, 32, .97); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7) }
.cookie-t { flex: 1; font-size: 13.5px; line-height: 1.55; color: var(--tx2); word-break: keep-all }
.cookie-t a { color: var(--tx); text-decoration: underline; text-underline-offset: 3px }
.cookie { flex-wrap: wrap }
.cookie-d { order: 3; flex-basis: 100%; font-size: 12.5px; line-height: 1.55; color: var(--tx2) }
.cookie-d summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
.cookie-d dl { display: grid; gap: 6px; max-height: 38vh; overflow-y: auto; margin: 0 0 6px; padding: 12px 14px; border: 1px solid var(--bd); border-radius: 8px }
.cookie-d dl div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px }
.cookie-d dd { margin: 0; color: var(--tx); word-break: keep-all; overflow-wrap: anywhere }
@media (max-width: 560px) { .cookie-d dl div { grid-template-columns: minmax(0, 1fr); gap: 2px } }
.cookie-a { flex: none; display: flex; gap: 8px }
.cookie-no { min-height: 44px; padding: 0 18px; border: 1px solid var(--bd); border-radius: 999px; font-size: 13.5px; color: var(--tx); transition: border-color .3s }
.cookie-no:hover { border-color: rgba(255, 255, 255, .5) }
.cookie .btn-p { min-height: 44px; padding: 0 22px; font-size: 13.5px }
.ft-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 22px }
.ft-pref { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; font-size: 13px; color: var(--tx2); text-decoration: underline; text-underline-offset: 3px }
.ft-pref:hover { color: var(--tx) }

@media (max-width: 767px) {
  .lead-cta .btn-p { width: 100%; justify-content: center }
  .lead { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; translate: 0 12px }
  .lead-hd { padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 16px }
  .lead-hd .label { margin-bottom: 6px }
  .lead-title { font-size: 24px }
  .lead-x { padding: 0 14px }
  .lead .inq { padding: 22px 20px calc(28px + env(safe-area-inset-bottom, 0px)) }
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .chip span { width: 100%; justify-content: center; padding: 0 12px }
  .cookie { flex-direction: column; align-items: stretch; padding: 16px }
  .cookie-a > * { flex: 1; justify-content: center }
}

/* 메일 대체 경로: 메일 앱이 없을 때 적은 내용·주소 복사 (2026-11-10) */
.inq-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px }
.inq-alt-d { font-size: 13px; line-height: 1.55; color: var(--tx2); word-break: keep-all }
.inq-copy { min-height: 44px; font-size: 14px; color: var(--tx2); text-decoration: underline; text-decoration-color: var(--bd); text-underline-offset: 4px; transition: color .2s }
.inq-copy:hover { color: var(--tx) }
.inq-copy-st { flex-basis: 100%; font-size: 13px; line-height: 1.5; color: var(--mint); word-break: keep-all }
.inq-copy-st:empty { display: none }
.inq-test { padding: 10px 12px; border: 1px dashed var(--bd); border-radius: 6px; font-size: 13px; line-height: 1.55; color: var(--tx2); word-break: keep-all }