/* ===== v50-11 폰트 교체: 영문 TWK Lausanne / 한글 ABC Favorit Hangul (자체 호스팅 woff2) =====
   ⟳ 롤백: 이 @font-face 블록 + :root의 새 --font-body 줄을 주석 → 옛 --font-body 줄 활성 → index.html:27 Pretendard <link> 주석 해제. (원본 백업: zz.old/prefont/) */
@font-face{font-family:'TWK Lausanne';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/TWK%20Lausanne%20Family/TWKLausanne-400.woff2') format('woff2')}
@font-face{font-family:'TWK Lausanne';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/TWK%20Lausanne%20Family/TWKLausanne-500.woff2') format('woff2')}
@font-face{font-family:'TWK Lausanne';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/TWK%20Lausanne%20Family/TWKLausanne-600.woff2') format('woff2')}
@font-face{font-family:'TWK Lausanne';font-style:normal;font-weight:650;font-display:swap;src:url('../fonts/TWK%20Lausanne%20Family/TWKLausanne-650.woff2') format('woff2')}
@font-face{font-family:'TWK Lausanne';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/TWK%20Lausanne%20Family/TWKLausanne-700.woff2') format('woff2')}
@font-face{font-family:'TWK Lausanne';font-style:normal;font-weight:750;font-display:swap;src:url('../fonts/TWK%20Lausanne%20Family/TWKLausanne-750.woff2') format('woff2')}
@font-face{font-family:'TWK Lausanne';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/TWK%20Lausanne%20Family/TWKLausanne-500Italic.woff2') format('woff2')}
@font-face{font-family:'ABC Favorit Hangul';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ABC%20Favorit%20Hangul/ABCFavoritHangul-Regular.woff2') format('woff2')}
@font-face{font-family:'ABC Favorit Hangul';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ABC%20Favorit%20Hangul/ABCFavoritHangul-Medium.woff2') format('woff2')}
@font-face{font-family:'ABC Favorit Hangul';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ABC%20Favorit%20Hangul/ABCFavoritHangul-Bold.woff2') format('woff2')}
:root{
  --ink:#161614;
  --ink-soft:#4c4b47;
  --paper:#EDEBE6;
  --paper-deep:#E2DFD8;
  --line:rgba(22,22,20,.16);
  --green:#2C5C40;
  --cream:#F3EADB;
  --white:#FBFAF7;
  /* --font-body:'Pretendard Variable',Pretendard,-apple-system,sans-serif;   ← v50-11 롤백용 옛 값(활성화 시 아래 줄 주석) */
  --font-body:'TWK Lausanne','ABC Favorit Hangul',-apple-system,sans-serif;   /* v50-11: 라틴=Lausanne, 한글=Favorit Hangul */
  --pad:clamp(20px,4.5vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
/* v49: 시스템 스크롤바 제거 — 커스텀 동그라미(scrollbar.js)로 대체. 스크롤바가 0폭이라
   모달 overflow:hidden 잠금 시 콘텐츠가 밀리는(오른쪽 점프) 버그도 함께 사라짐. */
html{scrollbar-width:none;-ms-overflow-style:none;overflow-x:clip}   /* v50-19: 뷰포트 레벨 가로 스크롤 완전차단. body clip만으론 애니(케이스 스트립·팝업 파티클) 잔여가 새 맨아래서 가로 스크롤됐음. clip은 hidden과 달리 스크롤 컨테이너를 안 만들어 ScrollTrigger 윈도우 스크롤러·핀에 무영향(스모크 stick.top==0·필름 통과 확인). 세로 스크롤 정상. [원복: overflow-x:clip 제거] */
body{overflow-x:clip}   /* v50-13: 모바일 가로 스크롤 차단(캡슐 캔버스·오브젝트 아이콘이 뷰포트 밖 넘침). html이 아니라 body에 걸어 ScrollTrigger 핀 스크롤러(html/window)는 안 건드림 */
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body{
  font-family:var(--font-body);
  background:transparent;
  color:var(--ink);
  line-height:1.6;
  letter-spacing:-0.012em;
  /* v50-19: 중복 overflow-x:hidden 제거 — 위 line30 body{overflow-x:clip}(v50-13)를 덮어써 실제론 hidden으로 동작(=스크롤 컨테이너 생성 → 맨 아래서 잔여 가로 스크롤). clip은 순수 클립이라 가로 스크롤 원천 차단. [원복: overflow-x:hidden 복원] */
}
::selection{background:var(--ink);color:var(--paper)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}

.bg-layer{position:fixed;inset:0;z-index:-1;background:#EDEBE6}
/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  transition:color .35s;
}
.nav-logo{width:64px;color:var(--navc,#161614)}
.nav{--navc:#161614}
.nav.nav-light{--navc:#FBFAF7}
.nav-logo svg{display:block;width:100%;height:auto}
.nav-actions{display:flex;gap:10px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:0;   /* v49: 알약형 → 각진 네모(문의 모달·본사 문법 통일, 사용자) */
  font-size:14px;font-weight:600;letter-spacing:-0.01em;
  transition:transform .2s,background .2s,color .2s,border-color .2s;
}
.btn:active{transform:scale(.97)}
.btn-ghost{border:1px solid var(--navc);color:var(--navc);transition:color .35s,border-color .35s}
.btn-ghost:hover{opacity:.75}
.btn-solid{background:var(--navc);color:var(--navb,#FBFAF7);transition:background .35s,color .35s}
.nav.nav-light{--navb:#161614}
.btn-solid:hover{opacity:.85}
@media(max-width:640px){ .btn{padding:9px 16px;font-size:13px} }   /* v50-13: .btn-ghost(브로슈어) 숨김 해제 — 모바일에도 노출(사용자 요청) */

/* ---------- section chrome ---------- */
.sec-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:22px;
  font-size:13px;font-weight:600;letter-spacing:.02em;
}
.sec-head .idx{font-style:italic;font-weight:500;color:var(--ink-soft)}
.sec{padding:0 var(--pad)}
.sec-inner{max-width:1280px;margin:0 auto;position:relative}
h2.headline{
  font-size:clamp(28px,4.2vw,54px);
  font-weight:650;line-height:1.24;letter-spacing:-0.035em;
  margin:clamp(28px,4vw,52px) 0 clamp(36px,5vw,72px);
  white-space:pre-line;
}
h2.headline em{font-style:normal;font-weight:750}

/* ---------- hero ---------- */
.hero{
  position:relative;height:100svh;min-height:560px;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
}
.fall-canvas{position:fixed;top:0;left:0;width:100vw;height:100svh;z-index:5;pointer-events:none}
.hero-logo{
  position:relative;z-index:1;
  width:min(72vw,76svh);color:var(--ink); /* v49: 900px 캡 제거 — 뷰포트 비례(와이드=높이 기준, 좁으면 폭 기준). 공R=로고폭 파생이라 함께 비례 */
}
.hero-logo .shake{animation:heroIn 1.2s cubic-bezier(.2,.8,.2,1) both .15s}
/* 패럴럭스(--py)·눌림(--press)·기울기(--rot) 를 변수로 분리 합성 — 트윈 충돌 방지 */
[data-para], .hero-logo, .step .ph, .joy{
  transform:translateY(calc(var(--py,0px) + var(--press,0px))) rotate(var(--rot,0deg)) !important;
}
.hero-logo svg{width:100%;height:auto;display:block}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero-meta{
  position:absolute;z-index:3;left:var(--pad);right:var(--pad);
  display:flex;justify-content:space-between;
  font-size:13px;font-weight:600;color:var(--ink-soft);
  pointer-events:none;
}
.hero-meta.top{top:76px}
.hero-meta.bottom{bottom:26px;align-items:flex-end}
.luck-counter{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.luck-counter b{color:var(--ink)}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;letter-spacing:.1em}
.scroll-cue::after{content:"";width:1px;height:34px;background:var(--ink-soft);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1)}}

/* ---------- 빈 공간 장애물 (회사 아이콘 = 충돌체) ---------- */
.gapzone{position:relative;height:84svh;max-width:1280px;margin:0 auto;pointer-events:none}
/* v50-24: 컨택트 바로 위 gapzone(웃는얼굴 아이콘~컨택트 사이 빈공간)만 모바일서 반으로(84→42svh) — 사용자: 그 빈 공간이 너무 큼. 다른 gapzone은 불변. [원복: 이 줄 삭제] */
@media(max-width:640px){ .gz-contact{height:42svh} }
.obstacle{position:absolute;pointer-events:none}
.obstacle svg{display:block;width:100%;height:auto}
/* v50-16: 모바일 장식 아이콘(.obstacle) ~70% 축소 — 폰서 인라인 clamp 최소 220px가 화면폭 56%로 과대. 폭만 축소(svg width:100%라 비례 축소·transform 물리(--press/--rot) 무관·콜라이더는 rect 기반이라 자동 추종). !important로 인라인 width 오버라이드. [원복: 이 줄 삭제] */
@media(max-width:640px){ .obstacle{width:clamp(154px,22.4vw,336px)!important} }
/* ---------- JOY : 컨트롤러 카드 ---------- */
.joy-wrap{position:relative;z-index:4} /* 볼 캔버스(5) 아래 — 볼·접촉그림자가 카드 위에 그려지도록 */
.joy{position:relative;margin:clamp(240px,calc(6vw + 200px),290px) auto 0;
  visibility:hidden; /* JS 초기화 전 첫 페인트 노출 방지 */
  --jscol:#A5DB61;
  width:min(100%,1040px);aspect-ratio:2.1/1;
  border-radius:clamp(16px,2.4vw,30px);
  background:url(../img/joy_bg.webp) center/cover no-repeat;
  overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y;
  box-shadow:0 26px 64px rgba(20,20,16,.12), 0 5px 16px rgba(20,20,16,.06);
  will-change:transform}
.joy-inner{position:absolute;inset:0}
.joy-btn{position:absolute;top:50%;transform:translateY(-50%);
  width:47%;aspect-ratio:1;pointer-events:none}
.joy-dpad{left:1.5%}
.joy-grab{right:4.5%}
/* 히트존: 에셋 투명 여백 제외, 버튼 형상 부근만 반응 */
.jhit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64%;height:64%;border-radius:50%;pointer-events:auto;cursor:pointer;touch-action:none}
.joy-grab .jhit{width:58%;height:46%}
.jst{position:absolute;inset:0;opacity:0;pointer-events:none}
.joy-btn[data-s="def"] .jst[data-s="def"],.joy-btn[data-s="up"] .jst[data-s="up"],
.joy-btn[data-s="down"] .jst[data-s="down"],.joy-btn[data-s="left"] .jst[data-s="left"],
.joy-btn[data-s="right"] .jst[data-s="right"],.joy-btn[data-s="press"] .jst[data-s="press"]{opacity:1}
.jst img,.jst .jm{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-user-drag:none}
.jst .jm{background:var(--jscol);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.jst .j-sh{mix-blend-mode:multiply}
.jst .j-lt{mix-blend-mode:screen}
.joy-mark{position:absolute;right:4.5%;bottom:6.5%;width:16%;pointer-events:none}
.joy-part{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:7}
@media(max-width:640px){
  .joy{width:100%}
}
/* ---------- statement ---------- */
.statement{padding-top:clamp(60px,7vw,110px);padding-bottom:clamp(80px,10vw,170px);position:relative}
/* v49: 전용 대형 h2(76px·들여쓰기) 폐기 → 다른 섹션과 동일한 h2.headline 문법으로 통일(사용자 요청).
   밸류 = feat-grid 문법 통일 — 오버라이드는 §feature sections 뒤(캐스케이드) */
.float{position:absolute;z-index:1}
.float .shake{border-radius:3px;box-shadow:0 24px 60px rgba(22,22,20,.18);overflow:hidden}
.float img{display:block;width:100%}
.shake{will-change:transform}
.float.f1{right:2%;top:0;width:clamp(120px,15vw,225px)}
.float.f2{right:22%;bottom:-4%;width:clamp(90px,11vw,165px)}
@media(max-width:860px){
  .value-list{max-width:none}
  .float.f1{width:100px;right:0;top:2%}
  .float.f2{display:none}
}

/* ---------- film : fullscreen -> wall screen + floor reflection ---------- */
.film{position:relative;z-index:6;height:260svh;background:#0B0B0A} /* v36: 여정 27% 단축 */
.film-stick{position:sticky;top:0;height:100svh;overflow:hidden}
/* 하단 경계 봉인 (v35): 룸 스케일 애니메이션과 무관하게 스틱 하단을 섹션 배경색(#0B0B0A)으로
   완전 불투명하게 마감 — 아래 검은 배경과의 단차 라인 제거. 알파는 하단에 몰아 반사 손실 최소화.
   z-index 2: 룸(0)·영상(film-center, 0) 위, 캡션(3) 아래. */
.film-stick::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:14svh;z-index:2;pointer-events:none;
  opacity:var(--sealA, 0); /* v36: 진행 90~100%에서 타임라인이 0->1 (REDUCED는 JS에서 1 고정) */
  background:linear-gradient(to bottom,
    rgba(11,11,10,0) 0%, rgba(11,11,10,.5) 60%, rgba(11,11,10,1) 100%);
}
.film-room{
  position:absolute;inset:0;opacity:0;
  transform-origin:50% 60%;will-change:transform,opacity;
  background:url('../img/film_room_bg.webp') center/cover no-repeat;
}
.film-room::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(11,11,10,0) 80%, rgba(11,11,10,.5) 93%, rgba(11,11,10,.94) 100%),
    radial-gradient(100% 80% at 50% 44%, rgba(0,0,0,0) 52%, rgba(0,0,0,.28) 100%),
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,0) 30%);
}
.film-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.film-scale{
  position:relative;
  width:min(47vw,780px);aspect-ratio:16/9;
  will-change:transform; /* 합성 레이어 고정 */
}
.film-screen{
  position:absolute;inset:0;overflow:hidden;
  background:#101010;
}
.film-bezel{
  /* v37: 폭 70% 축소(-2.49/-1.4 -> -1.74/-0.98) + 유광 프레임 — 상단 광원 그라디언트와
     안쪽 모서리 하이라이트로 빛 반사 느낌 */
  position:absolute;inset:-1.74% -0.98%;border-radius:4px;opacity:0;
  background:linear-gradient(145deg,#2a2a2a 0%,#0a0a0a 28%,#050505 62%,#161616 100%);
  z-index:-1;
  box-shadow:0 34px 80px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(255,255,255,.03);
}
.film-brandbar{
  position:absolute;left:0;right:0;top:-13%;opacity:0;
  text-align:center;color:rgba(255,255,255,.42);
  font-size:clamp(9px,0.9vw,13px);letter-spacing:.42em;font-weight:700;
}
/* FILM PLACEHOLDER — 영상 교체 시 .film-ph 를 <video>로 (반사쪽도 동일하게) */
.film-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;color:#e8e8e2;
  background:#131312;
}
.film-ph .ph-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;filter:saturate(.8) brightness(.85);
}
.film-ph .ring,.film-ph span{position:relative;z-index:1;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.film-ph .ring{
  width:clamp(44px,5vw,74px);height:clamp(44px,5vw,74px);
  border:1px solid rgba(255,255,255,.55);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.film-ph .ring::after{content:"";border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #e8e8e2;margin-left:4px}
.film-ph span{font-size:clamp(9px,0.85vw,12px);letter-spacing:.18em;font-weight:600;white-space:nowrap}
.film-reflect{
  /* 좌우 12% 블리드: 블러가 요소 경계에서 잘리지 않도록 스크린보다 넓게 */
  position:absolute;top:calc(100% + var(--rgap, 12px));left:-12%;right:-12%;height:92%;
  opacity:0;overflow:hidden;pointer-events:none;
  filter:blur(9px) brightness(.92) saturate(1); /* v36: 반사 강화 */
  -webkit-mask-image:linear-gradient(to bottom, transparent, rgba(0,0,0,.78) 5%, rgba(0,0,0,.28) 44%, transparent 76%),
                     linear-gradient(to right, transparent, #000 13%, #000 87%, transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom, transparent, rgba(0,0,0,.78) 5%, rgba(0,0,0,.28) 44%, transparent 76%),
                     linear-gradient(to right, transparent, #000 13%, #000 87%, transparent);
          mask-composite:intersect;
}
.film-reflect canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.film-reflect .film-ph{transform:scaleY(-1);top:auto;bottom:0;height:128%}
.film-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* v43 검정 플래시 완화: 스케일/리사이즈 중 하드웨어 디코드 영상의 레이어 재래스터 순단 시
     .film-screen 배경(#101010)이 비치는 문제 — 영상 자체 합성 레이어 고정으로 재할당 빈도 축소 */
  transform:translateZ(0);backface-visibility:hidden;will-change:transform}
.film-caption{
  position:absolute;left:0;right:0;bottom:5.5%;z-index:3;
  text-align:center;color:var(--paper);opacity:0;transform:translateY(24px);
  padding:0 var(--pad);text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.film-caption h3{font-size:clamp(22px,3vw,38px);font-weight:650;letter-spacing:-0.03em;line-height:1.3}
.film-caption p{margin-top:10px;font-size:15px;color:#c9c9c2}
@media(max-width:720px){ .film-scale{width:84vw} }

/* ---------- feature sections ---------- */
.block{padding-top:clamp(80px,9vw,140px);padding-bottom:clamp(90px,10vw,160px)}
/* 섹션 사이 여백: 배경색이 전이되는 빈 구간 */
.statement,#film,.tech-sec,.ux,.mgmt,.custom-sec,.case,.contact{margin-top:clamp(50px,10svh,120px)} /* gapzone이 간격 담당 */
.feat-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--line);
}
.feat{
  padding:clamp(28px,3.5vw,48px) clamp(0px,2.5vw,40px) clamp(28px,3.5vw,48px) 0;
  border-bottom:1px solid var(--line);
}
.feat:nth-child(odd){border-right:1px solid var(--line)}
.feat:nth-child(even){padding-left:clamp(20px,2.5vw,40px)}
.feat h3{font-size:clamp(18px,1.8vw,23px);font-weight:700;letter-spacing:-0.025em;margin-bottom:10px}
.feat p{font-size:15px;color:var(--ink-soft);max-width:46ch}
@media(max-width:720px){
  .feat-grid{grid-template-columns:1fr}
  .feat:nth-child(odd){border-right:none}
  .feat:nth-child(even){padding-left:0}
}
/* v49: 브랜드 스토리 밸류 — feat-grid 문법(Technology와 동일 헤어라인)로 좌측 1컬럼 스택.
   우측은 QR 플립(540px). 본체 규칙 뒤에 둬야 캐스케이드에서 이김. */
.value-list{grid-template-columns:1fr;max-width:560px;position:relative;z-index:2}
.value-list .feat{border-right:none;padding-left:0;padding-right:0}
.value-list .feat:last-child{border-bottom:none}   /* v50-8: 마지막(프리미엄 가챠) 밑선은 세션 전폭 rule로 대체 */
.statement .value-rule{border-top:1px solid var(--line);position:relative;z-index:2}   /* v50-8: 프리미엄 가챠 밑 라인 — sec-inner 전폭(=세션 우단)까지. rv 페이드는 유지 */

/* ---------- ux ---------- */

.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.step:nth-child(2){margin-top:clamp(24px,3.5vw,56px)}
.step .ph{aspect-ratio:4/3;overflow:hidden;background:var(--paper-deep);border-radius:4px}
/* 호버 줌: 이미지별 포커스(--zox/--zoy = 핸드폰 중심)로 확대. origin이 [0,100]%·scale≥1이라 빈공간 불가.
   값은 assets/ux_zoom.json → ux-zoom.js가 주입. H 디버그 패널로 튜닝. */
.step .ph img{width:100%;height:100%;object-fit:cover;
  transform-origin:var(--zox,50%) var(--zoy,50%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.step:hover .ph img{transform:scale(var(--zs,1.06))}
/* UX 줌 튜닝 모드(H): 프레임 아웃라인 + 조정 중 이미지엔 호버 없이 실시간 줌 표시 */
body.ux-tune .step .ph{outline:2px dashed rgba(58,109,240,.75);outline-offset:2px;cursor:grab}
body.ux-tune .step .ph img.ux-live{transform:scale(var(--zs,1.06))}

/* ============ 문의 모달 (v49) — 색은 아래 5개 변수로 일괄 조정(럭키그랩 톤, 추후 변경 용이) ============ */
.inq-overlay{
  /* v49.2: 아이엠파인 본사 Project Inquiries 모달 문법 이식(사용자 승인 B안) —
     핑크 통짜 카드(#D985B6 실측) + 검정 잉크 + 흰 밑줄 + 필드 앞 →/↓ 글리프 + 보더 박스 X */
  --inq-card:#D985B6; --inq-ink:#141412; --inq-soft:rgba(20,20,18,.58);
  --inq-accent:#FBFAF7; --inq-line:rgba(255,255,255,.9); --inq-dim:rgba(42,42,44,.78);
  --inq-neon:#D8FF3A;   /* 제출 검증 실패 하이라이트(야광) */
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--inq-dim); opacity:0; transition:opacity .25s ease;
  /* v49: backdrop-filter 블러 제거 — 뒤 WebGL 공이 매 프레임 변해 전체화면 블러 재계산=저사양 비용↑.
     반투명 딤만 유지(합성 비용 ~0). 블러 필요 시 배경 애니 정지 후 적용이 정석. */
}
.inq-overlay[hidden]{display:none}
.inq-overlay.inq-open{opacity:1}
.inq-card{
  position:relative; width:min(528px,100%); max-height:88svh; overflow-y:auto;   /* v49.3: 가로 +20%(사용자) */
  scrollbar-width:none;
  background:var(--inq-card); color:var(--inq-ink); border-radius:0;   /* 레퍼런스: 각진 카드 */
  padding:clamp(26px,4vw,40px); box-shadow:0 30px 80px rgba(0,0,0,.4);
  transform:translateY(14px) scale(.985); transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.inq-open .inq-card{transform:none}
/* X = 맨몸 대형 얇은 스트로크(레퍼런스 실사이트 — 보더 박스 없음, 사용자 확인) */
.inq-close{position:absolute; top:18px; right:18px; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:0; background:none;
  color:var(--inq-ink); cursor:pointer; opacity:.9; transition:opacity .15s}
.inq-close svg{width:30px; height:30px}
.inq-close:hover{opacity:1}
/* 필드 앞 →/↓ 글리프 */
.inq-ico{position:absolute; left:1px; top:50%; transform:translateY(-50%);
  font-size:16px; line-height:1; color:#fff; pointer-events:none; transition:color .15s}
.inq-ico.ta{top:12px; transform:none}
.inq-lead{font-size:clamp(17px,2.4vw,20px); font-weight:600; line-height:1.45; letter-spacing:-.02em;
  margin:2px 60px 26px 0}
.inq-form{display:flex; flex-direction:column; gap:15px}
.inq-form[hidden]{display:none}   /* .inq-form의 display:flex가 UA [hidden]을 이겨서 안 숨는 것 방지 */
.inq-row{display:flex; flex-direction:column; position:relative}
.inq-row input, .inq-row select, .inq-row textarea{
  width:100%; border:0; border-bottom:1px solid var(--inq-line); background:transparent;
  color:var(--inq-ink); font:inherit; font-size:15px; padding:9px 2px 9px 26px; outline:none;   /* 좌 26px = 앞 →/↓ 글리프 자리 */
  transition:border-color .2s;
}
/* 상태 체계(사용자 스펙): 초기=흰(플레이스홀더·밑줄·화살표) → 값이 생기면 검정 → 제출 검증 실패=야광 */
.inq-row input::placeholder, .inq-row textarea::placeholder{color:#fff}
.inq-row input, .inq-row select, .inq-row textarea{caret-color:var(--inq-ink)}
.inq-row:has(input:not(:placeholder-shown)) .inq-ico,
.inq-row:has(textarea:not(:placeholder-shown)) .inq-ico,
.inq-sel.filled .inq-ico{color:var(--inq-ink)}
.inq-row input:not(:placeholder-shown), .inq-row textarea:not(:placeholder-shown),
.inq-sel.filled select{border-bottom-color:var(--inq-ink)}
.inq-sel select{color:#fff}
.inq-sel.filled select{color:var(--inq-ink)}
.inq-row.inq-err input, .inq-row.inq-err select, .inq-row.inq-err textarea{border-bottom-color:var(--inq-neon) !important}
.inq-row.inq-err .inq-ico{color:var(--inq-neon) !important}
.inq-row.inq-err input::placeholder{color:var(--inq-neon)}
.inq-agree.inq-err span{color:var(--inq-neon)}
.inq-agree.inq-err .inq-policy-link{color:var(--inq-neon)}
.inq-row textarea{resize:vertical; min-height:78px; line-height:1.5; scrollbar-width:none}
.inq-row textarea::-webkit-scrollbar, .inq-card::-webkit-scrollbar{width:0;height:0;display:none}
.inq-sel select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:24px;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.inq-sel select option{color:#161614}
/* 파일 첨부 행 — 다른 필드와 동일 상태 체계: 초기 흰 → 첨부 시 파일명 검정 + 취소 X 등장 */
.inq-file{flex-direction:row; align-items:center; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--inq-line); padding-bottom:4px; margin-top:4px}
.inq-fileleft{display:inline-flex; align-items:center; gap:10px}
.inq-filebtn{display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:15px; padding:6px 2px; color:#fff; transition:color .15s}
.inq-filebtn .fico{font-size:17px; line-height:1}
.inq-filemax{font-size:12px; color:rgba(255,255,255,.75); white-space:nowrap}
.inq-file.has-file{border-bottom-color:var(--inq-ink)}
.inq-file.has-file .inq-filebtn{color:var(--inq-ink)}
.inq-file.has-file .ftxt{font-weight:600}
.inq-file.has-file .inq-filemax{color:var(--inq-soft)}
.inq-filecancel{display:flex; align-items:center; justify-content:center; width:22px; height:22px;
  border:0; background:none; color:var(--inq-ink); cursor:pointer; opacity:.85}
.inq-filecancel:hover{opacity:1}
.inq-filecancel[hidden]{display:none}
.inq-file.err{border-bottom-color:var(--inq-neon)}
.inq-file.err .inq-filebtn{color:var(--inq-neon)}
.inq-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:12px; flex-wrap:wrap}
.inq-agree{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--inq-soft); cursor:pointer; line-height:1.4}
.inq-agree input{appearance:none; -webkit-appearance:none; width:17px; height:17px; margin-top:1px;
  border:1px solid var(--inq-ink); border-radius:0; background:transparent; cursor:pointer; flex:none}
.inq-agree input:checked{background:var(--inq-ink)}   /* 체크 = 검은 사각형 가득(레퍼런스) */
.inq-policy-link{border:0; background:none; padding:0; font:inherit; font-size:inherit; color:var(--inq-ink);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer}
.inq-send{border:0; background:none; padding:8px 2px; font:inherit; font-size:16px; font-weight:700;
  color:var(--inq-ink); cursor:pointer; text-decoration:underline; text-underline-offset:4px; white-space:nowrap}
.inq-send:hover{color:var(--inq-accent)}
.inq-done{display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center;
  padding:48px 10px; font-size:17px; font-weight:600; line-height:1.5}
.inq-done[hidden]{display:none}
/* 개인정보처리방침 서브 패널 */
.inq-policy{position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(16,16,14,.5)}
.inq-policy[hidden]{display:none}
/* 정책 카드 = 다크 차콜 + 자주 보더 + 흰 텍스트(레퍼런스 이미지) */
/* v49.4(사용자): 핑크 보더 제거 · 타이틀/Confirm은 고정 레이어(스크롤은 중앙 내용만) · 세로 1/3 축소 */
.inq-policy-card{width:min(400px,92%); max-height:47svh; background:#48484b;
  display:flex; flex-direction:column; overflow:hidden;
  color:#FBFAF7; border:0; border-radius:0; padding:clamp(26px,4vw,42px); box-shadow:0 24px 60px rgba(0,0,0,.5)}
.inq-policy-card h3{font-size:clamp(24px,3vw,30px); font-weight:500; margin-bottom:26px}
.inq-policy-body{font-size:13px; color:rgba(251,250,247,.85); line-height:1.75; display:flex; flex-direction:column; gap:12px;
  flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; padding-right:10px}
.inq-policy-body::-webkit-scrollbar{width:0;height:0;display:none}
.inq-policy-body b{color:#FBFAF7}
.inq-hr{border:0; border-top:1px solid rgba(251,250,247,.25); margin:8px 0}
.inq-policy-confirm{margin-top:24px; margin-left:auto; display:block; border:0; background:none; padding:6px 2px;
  font:inherit; font-weight:600; color:#FBFAF7; text-decoration:underline; text-underline-offset:4px; cursor:pointer}
.inq-policy-confirm:hover{color:var(--inq-neon)}
/* 정책 팝업 스크롤 구슬 — 페이지 우측 커스텀 스크롤(cscroll)과 동일 문법의 작은 원 */
.inq-dot{position:absolute; width:10px; height:10px; border-radius:50%; background:#fff;
  mix-blend-mode:difference;   /* 페이지 우측 커스텀 스크롤과 동일 문법 — 어떤 배경에서도 보임 */
  z-index:6; cursor:grab; touch-action:none; display:none}
.inq-dot:active{cursor:grabbing}
@media(max-width:520px){ .inq-card{max-height:92svh} .inq-foot{gap:12px} }

/* ============ v49 브랜드 스토리 QR 스플릿플랩 v3 (랩 확정본 이식 — qrflip.js가 카드 생성) ============
   7×5 세로긴 카드: 위장(투명) → 물결 물질화(슬롯·광택·이음새) → 다회 촤라라라(겹침 발사, WAAPI)
   → 감쇠 다중 바운스 → 호버/탭 토글. 성능: 플랩 풀링·조기 회수·라이트 중간낙하·contain.
   ⚠ 본편 위장은 '투명'(랩은 라임) — 배경색 전환 중에도 보드가 절대 안 비침. */
/* [캡슐 테스트] 플립과 동일 박스에 캡슐 캔버스 */
/* [캡슐] 인터랙션 무대 = 우하단 랜드스케이프 박스(흩뿌림 담김). 탭 활성(touch-action으로 세로 스크롤은 유지) */
/* ⚠박스는 유리 투과 백드롭 때문에 불투명 → 텍스트를 덮으면 가림. 헤드라인 아래·좌측 텍스트 오른쪽만 차지하게 제한.
   pointer-events:none → 스크롤/탭 통과(탭은 capsule3d가 window 레이캐스트). 카메라를 이 박스에 맞춰 캡슐 크기 유지. */
/* 우측을 뷰포트 오른쪽 끝까지(섹션 여백 밖으로 풀블리드) — 좌측 끝은 그대로라 캡슐 위치 불변 */
/* 좌: 텍스트 섹션 왼쪽 단(sec-inner 좌단, left:0)까지 / 우: 뷰포트 오른쪽 끝까지.
   ⚠canvas는 replaced element라 width:auto면 좌우(left/right)가 아니라 내재 버퍼폭을 씀 → 폭 고정 버그.
   반드시 명시 width: sec-inner 좌단(=(vw-1280)/2)부터 뷰포트 우단(vw)까지 = vw - (vw-1280)/2 = 50vw + 640px. */
.qr-capsule{position:absolute;bottom:0;left:0;width:calc(50vw + 640px);z-index:1;
  height:710px;display:block;pointer-events:none}
/* v50-15: 모바일 = 풀블리드 캔버스. 좌우 화면끝(width:100vw + 상쇄마진, 섹션 20px 패딩 무시) + 상단 화면위(margin-top:-28svh로 캔버스 top≈0까지 끌어올림).
   height:80svh = 빈영역 52svh + 끌어올린 28svh → 음수마진 상쇄로 flow공간은 52svh 유지(feat 위치 불변). 캡슐 렌더 위치·크기는 capsule3d FRAME(camR/laY/tgt)로 이 큰 캔버스에 맞춰 재중앙. pointer-events:none이라 제목·버튼 뒤 지나가도 클릭 통과. */
@media(max-width:860px){ .qr-capsule{position:static;width:100vw;height:80svh;margin:-28svh 0 0 calc(50% - 50vw)} }
#qr-flip-off{display:none}   /* v50-14: 캡슐로 대체된 비활성 빈 div. 모바일서 aspect-ratio:1(273px)+margin(44px)=317px 빈 박스가 헤드라인·캡슐 사이 공간 차지 → 완전 숨김(롤백 시 이 줄 삭제) */
/* 이 섹션 한정: 라벨·헤드라인을 캔버스 위로 올려 백드롭에 안 가리게(피처 value-list는 이미 z2) */
.statement .sec-head,.statement .headline{position:relative;z-index:2}
/* H패널 '캔버스영역 빨간선' 토글용 — 켤 때만 클래스 부착(csShowArea) */
.qr-capsule.show-area{outline:2px solid #ff3366;outline-offset:-2px}
.qr-flip{position:absolute;bottom:0;z-index:1;
  /* v49: 브랜드 스토리 그리드 정렬 — 오른쪽 1280 콘텐츠 엣지 플러시.
     밸류가 좌측 1컬럼 스택(560px)이 되어 우측 확보 → 540px(밸류와 최소 148px 간격, 50svh 캡). */
  right:0;
  width:min(540px,42vw,50svh);aspect-ratio:1;
  display:grid;background-repeat:no-repeat}
.qr-flip .cell{position:relative}
.qr-flip .slot{position:absolute;inset:0;border-radius:3px;opacity:0;
  background:rgba(14,14,12,var(--slotA,.9));
  box-shadow:inset 0 1px 4px rgba(0,0,0,.55), inset 0 -1px 2px rgba(255,255,255,.06)}
.qr-flip .fc{position:absolute;inset:1.5px;border-radius:2.5px;perspective:340px;cursor:pointer;contain:layout style}
.qr-flip .fh{position:absolute;left:0;width:100%;height:50%;border-radius:inherit;transition:box-shadow .3s ease}   /* 모서리 라인이 물질화와 함께 스르륵(팝 방지) */
.qr-flip .fc.mat .fh{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.16)}
.qr-flip .ft{top:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.qr-flip .fb{bottom:0;border-top-left-radius:0;border-top-right-radius:0}
.qr-flip .seam{position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;z-index:1300;opacity:0;pointer-events:none;
  /* z1300 = 플랩(상승 ~600/착지 ~1211)보다 위 — 힌지 모서리가 소각도 바운스에서 시임을 1px씩
     덮었다 벗기며 검은 선이 깜빡이던 것 + 회수 순간 선 복귀 팝 제거(실물도 분할선은 항상 보임) */
  background:rgba(10,10,8,.55);box-shadow:0 1px 0 rgba(255,255,255,.20)}
.qr-flip .gls{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;border-radius:inherit}
.qr-flip .shd{position:absolute;left:0;bottom:0;width:100%;height:50%;z-index:2;opacity:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(14,14,12,.55),rgba(14,14,12,.10))}
.qr-flip .tsd{position:absolute;inset:0;opacity:0;background:linear-gradient(to bottom,rgba(10,10,8,.75),rgba(10,10,8,.4))}
.qr-flip .flap{position:absolute;left:0;top:0;width:100%;height:50%;z-index:5;visibility:hidden;
  transform-origin:50% 100%;transform-style:preserve-3d;pointer-events:none}
.qr-flip .ffc,.qr-flip .fkc{position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:2.5px 2.5px 0 0}
.qr-flip .fkc{transform:rotateX(180deg);border-radius:0 0 2.5px 2.5px}
.qr-flip .fsh{position:absolute;inset:0;pointer-events:none;background-size:100% 200%;background-repeat:no-repeat}
/* 회전 글린트 — 회전 중 빛을 받는 순간의 광(opacity만 키잉, 검은 면 입체감용).
   v49.1: 좁은 밴드(선처럼 보임, 사용자 지적) → 면 전체를 부드럽게 씻는 넓은 워시로 */
.qr-flip .fgl{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(168deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.38) 38%, rgba(255,255,255,.30) 58%, rgba(255,255,255,.10) 82%, rgba(255,255,255,0) 100%)}
.qr-flip .ffg{position:absolute;inset:0;opacity:0;background:linear-gradient(to bottom,rgba(10,10,8,.9),rgba(10,10,8,.55))}
.qr-flip .ksd{position:absolute;inset:0;opacity:0;background:linear-gradient(to top,rgba(10,10,8,.85),rgba(10,10,8,.5))}
/* 힌지 플러그 — 분할선 양끝의 금속 핀(참고: 공항 플립보드 축 장치). 시임과 같은 z1300(플랩 위),
   3px 셀 간격으로 살짝 돌출. 위장 땐 opacity 0 → 물질화 때 시임과 함께 페이드인 */
.qr-flip .pin{position:absolute;top:50%;transform:translateY(-50%);width:5px;height:14px;z-index:1300;opacity:0;pointer-events:none;
  border-radius:2.5px;
  /* v49: 블랙 장치 톤(실버→검정) — 상단 가는 하이라이트만 남겨 금속 빛 암시 */
  background:linear-gradient(to bottom,#3a3936 0%,#211f1d 34%,#161513 55%,#2c2b28 82%,#141311 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.45), inset 0 0.5px 0 rgba(255,255,255,.35)}
.qr-flip .pinL{left:-1.5px}
.qr-flip .pinR{right:-1.5px}
.qr-flip .fedge{position:absolute;left:0;right:0;top:0;height:1.2px;opacity:0;
  transform-origin:50% 0;transform:rotateX(90deg);
  background:linear-gradient(to right,rgba(250,249,244,.6),rgba(255,255,255,.92) 20%,rgba(255,255,255,.92) 80%,rgba(250,249,244,.6))}
@media(max-width:860px){ .qr-flip{position:relative;right:auto;bottom:auto;margin:44px auto 0;width:min(70vw,320px)} }

/* ============ v49 커스텀 스크롤바 — 우측 작은 동그라미(위치 표시 + 드래그 스크롤) ============
   배경색이 구간마다(라임/검정/흰/그린/핑크) 바뀌므로 배경 밝기 판정으로 2색 전환(밝은 배경=검정 점·어두운 배경=흰 점, scrollbar.js paintColor).
   z=1500(모달 z2000 아래 → 모달 열리면 딤 뒤로 가려짐).
   ⚠ v49 mix-blend-mode:difference는 .cscroll-thumb의 fixed+transform+will-change가 만든 격리 스택 컨텍스트 탓에
     ::after가 페이지 아닌 부모(투명)와만 블렌딩돼 반전 실패(흰 배경서 흰색) → v50-10 2색 방식으로 교체. */
/* v49: top 대신 transform(--sy) 이동 = 합성 전용(스크롤마다 리플로 없음).
   스케일 연출은 ::after(원)로 분리 — 이동 transform과 전환이 안 섞이게. */
.cscroll-thumb{
  position:fixed; right:9px; top:14px; width:10px; height:10px;
  z-index:1500; cursor:grab; touch-action:none;
  transform:translateY(var(--sy,0px)); will-change:transform;
}
.cscroll-thumb::after{content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--dot-col,#111); transition:background-color .25s ease, transform .18s ease}   /* v50-10: 배경 밝기 따라 #111(밝은 배경)/#fff(어두운 배경) — scrollbar.js paintColor. (mix-blend은 격리로 반전 실패라 교체) */
.cscroll-thumb:hover::after{transform:scale(1.35)}
.cscroll-thumb.drag{cursor:grabbing}
.cscroll-thumb.drag::after{transform:scale(1.5)}
@media(pointer:coarse){ .cscroll-thumb{display:none} }   /* 모바일=네이티브 터치 스크롤 */
@media(prefers-reduced-motion:reduce){ .cscroll-thumb::after{transition:none} }
.step h3{margin-top:18px;font-size:clamp(18px,1.9vw,24px);font-weight:700;letter-spacing:-0.02em}
/* v49: 스텝 번호 이탤릭 span 제거 — 다른 콘텐츠 섹션(밸류·feat)과 동일하게 볼드 제목만(사용자 통일) */
.step p{margin-top:6px;font-size:14.5px;color:var(--ink-soft)}
.anticheat{
  margin-top:clamp(32px,4vw,52px);padding:20px 24px;
  border:1px solid var(--line);border-radius:6px;
  font-size:13.5px;color:var(--ink-soft);max-width:720px;
}
.anticheat b{color:var(--ink);display:block;margin-bottom:4px;font-size:13px;letter-spacing:.05em}
@media(max-width:720px){.step-grid{grid-template-columns:1fr}.step:nth-child(2){margin-top:0}}

/* ---------- management ---------- */
.mgmt{color:var(--cream)}
.mgmt .sec-head{border-top-color:rgba(243,234,219,.25)}
.mgmt .sec-head .idx{color:rgba(243,234,219,.6)}
.mgmt .feat-grid{border-top-color:rgba(243,234,219,.25)}
.mgmt .feat{border-bottom-color:rgba(243,234,219,.25)}
.mgmt .feat:nth-child(odd){border-right-color:rgba(243,234,219,.25)}
.mgmt .feat p{color:rgba(243,234,219,.72)}

/* 다크 배경 위 섹션 (Technology) */
.inv{color:var(--paper)}
.inv .sec-head{border-top-color:rgba(251,250,247,.25)}
.inv .sec-head .idx{color:rgba(251,250,247,.55)}
.inv .feat-grid{border-top-color:rgba(251,250,247,.25)}
.inv .feat{border-bottom-color:rgba(251,250,247,.25)}
.inv .feat:nth-child(odd){border-right-color:rgba(251,250,247,.25)}
.inv .feat p{color:rgba(251,250,247,.68)}
/* ---------- customizing ---------- */
.custom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,36px);align-items:start} /* v50-3: 기본 stretch면 figure가 이미지보다 세로로 늘어나(콜라이더=figure가 이미지보다 큼·회전중심 어긋남) → start로 figure=이미지 높이 고정 */
.custom-grid figure:nth-child(2){margin-top:clamp(30px,5vw,80px)}
.custom-grid figure:nth-child(3){margin-top:clamp(14px,2.4vw,38px)}
.custom-grid figure img{border-radius:4px}
.custom-grid figure{transition:opacity .8s cubic-bezier(.2,.8,.2,1)} /* v50-5: .rv의 transform 트랜지션(.8s)이 line89의 물리 transform(--press 눌림·--rot 기울기)을 뭉개 이미지가 콜라이더보다 느리게 반응하던 버그 → transition을 opacity만 남겨 물리 반응 즉시화(콜라이더와 동기). 리빌 슬라이드는 line89 !important가 이미 덮어써 원래 없어 손실 없음, 페이드는 유지. */
.custom-list{margin-top:clamp(46px,6vw,80px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}
.custom-list h3{font-size:clamp(17px,1.7vw,21px);font-weight:700;letter-spacing:-0.02em;margin-bottom:8px}
.custom-list p{font-size:14.5px;color:var(--ink-soft)}
@media(max-width:720px){
  .custom-grid{grid-template-columns:1fr;max-width:420px}
  .custom-grid figure:nth-child(2),.custom-grid figure:nth-child(3){margin-top:0}
  .custom-list{grid-template-columns:1fr;gap:28px}
}

/* ---------- case (collage) ---------- */
/* v41: .case overflow:hidden 제거 — sticky 핀을 죽이던 원인. 클리핑은 .case-stick이 담당 */
.case-stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column}
.case-head-inner{
  padding-top:clamp(40px,7svh,90px);
  /* v42: v41 좌측 앵커(6vw) 해제 — 다른 섹션과 동일한 중앙 컨테이너(.sec-inner 1280px) 복귀.
     스트립은 계속 풀블리드(6vw 시작) — 헤딩만 컨테이너 정렬.
     ⚠ width:100% 필수 — 부모(.case-stick)가 flex column이라 가로 auto 마진이 stretch를 끄고
     콘텐츠 폭으로 수축(721px 중앙 배치)하던 것을 명시 폭으로 복원. */
  width:100%;
}
.case-strip{position:relative;flex:1;min-height:0}
/* v39: 아이템은 JS가 --gx/--gy로 배치. 눌림·기울기 변수는 합성 유지, --gs는 폭발 팽창용 */
.case-strip .c{
  position:absolute;left:0;top:0;height:calc(48svh * var(--chf,1));overflow:hidden;border-radius:4px;
  background:var(--paper-deep);will-change:transform;
  transform:translate3d(var(--gx,0px), calc(var(--gy,0px) + var(--press,0px)), 0)
            rotate(var(--rot,0deg)) scale(var(--gs,1)) !important;
}
.case-strip .c.r34{aspect-ratio:3/4}
.case-strip .c.r43{aspect-ratio:4/3}
.case-strip .c.r169{aspect-ratio:16/9}
.case-strip .c .shake{position:absolute;inset:0}
.case-strip img{width:100%;height:100%;object-fit:cover;display:block}
.case-strip .c .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:2}
@media(max-width:760px){
  .case-strip .c{height:calc(36svh * var(--chf,1))}
}
/* ---------- contact ---------- */
.contact{
  /* v47: z-index 6->1 = fall-canvas(5) 아래로 -> 낙하 공이 contact 위에 그려짐(텍스트 회피 자동).
     라이트 통일 -> 흰 배경/어두운 글씨 정적(과거 검정→흰 스크럽 타임라인 제거). */
  position:relative;z-index:1;background:#FFFFFF;color:#161614;
  min-height:100svh;display:flex;flex-direction:column;overflow:hidden;
}
.contact-inner{
  position:relative;z-index:2;
  padding:clamp(90px,12vw,160px) var(--pad) 0;
  max-width:1280px;margin:0 auto;width:100%;
}
.contact .found{
  font-size:13px;font-weight:600;letter-spacing:.05em;color:#70706a;
  margin-bottom:22px;font-variant-numeric:tabular-nums;
}
.contact .found b{color:#161614}
.contact h2{
  font-size:clamp(32px,5vw,66px);font-weight:650;
  letter-spacing:-0.04em;line-height:1.22;margin-bottom:clamp(30px,4vw,48px);
}
.contact-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}
.btn-xl{padding:16px 34px;font-size:16px}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{background:#fff}
.btn-outline{border:1px solid rgba(251,250,247,.35);color:var(--paper)}
.btn-outline:hover{border-color:var(--paper)}
.contact-info{
  display:flex;gap:clamp(28px,5vw,80px);flex-wrap:wrap;
  padding-top:26px;border-top:1px solid rgba(22,22,20,.14);
  font-size:14px;color:#70706a;
}
.contact-info b{display:block;color:#161614;font-size:15px;margin-bottom:2px;font-weight:600}
.contact-box-stage{
  /* v45: 흐름(in-flow) 배치. box.top=stage.top(개구부), box.floorDoc=stage.bottom(바닥).
     v46: 타이틀~박스 갭(~700px)은 앞의 .box-scroll-cue 높이가 담당(margin 대신). */
  position:relative;z-index:1;flex:0 0 auto;
  height:min(74svh,820px);
  margin-top:0;
  pointer-events:none;
}
/* v46: 스크롤 인디케이터 겸 타이틀~박스 갭. 이 높이가 곧 박스가 얼마나 아래에 있는지(=~700px).
   갭 중앙에 'Scroll' + 얇은 라인. 스크롤 내리며 페이드아웃(main.js). */
.box-scroll-cue{
  min-height:700px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  position:relative;z-index:2;pointer-events:none;
}
/* v50-23: 모바일 = 타이틀↔박스 700px 갭이 거의 한 뷰포트라 집게·공더미 씬이 한참 아래서 나옴(사용자). 갭 축소 → 박스 씬 sooner. 순수 레이아웃이라 box 물리·핸드오프·집게(page% 트리거)는 measureBox 재계산으로 자동 적응. [원복: 이 줄 삭제] */
.box-scroll-cue span{
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;
  color:rgba(22,22,20,.45);
}
.box-scroll-cue i{
  display:block;width:1px;height:46px;
  background:linear-gradient(rgba(22,22,20,.5), rgba(22,22,20,0));
}
/* v50-24: 모바일 box-scroll-cue = 120px→7svh(현재의 반)·비율기반(폰 크기 달라도 같은 %; DPR 차이는 px·svh 무관). 단 인디케이터 콘텐츠(줄46+텍스트=81px)가 7svh(59px)보다 커서 바닥을 잡으므로, 줄·간격도 축소해 콘텐츠<7svh → 비율값이 실제 바인딩. ⚠기본 .box-scroll-cue i 규칙 '뒤'에 둬야 override됨(소스순서). [원복: 이 @media 삭제] */
/* v50-26 진단: 모바일 box-scroll-cue 축소를 잠시 원복(데스크톱과 동일 700px) — "우수수"가 이 박스-위치 변경 때문인지 격리. 우수수 사라지면 원인 확정 후 다른 방식 모색. [이 주석 자리에 원래 @media 15svh 있었음] */
/* 캔버스는 body 직속 fixed. 평소 숨김 -> contact 구간에서만 표시(JS가 .box-active 토글).
   v45: 검정 페이드(.contact-box-fade) 제거 — 낙하하는 공을 가려서 뺌.
        벽 높이는 contact-box.js의 WALL_HEAD로 개구부 근처에 유지되므로 페이드 없이도 상단이 화면을 안 덮음. */
#contact-box-gl{
  position:fixed;inset:0;z-index:6;width:100%;height:100%;pointer-events:none;
  opacity:0;transition:opacity .3s;
}
body.box-active #contact-box-gl{ opacity:1; }
.footer{
  /* v46: body 직속(section 밖)으로 이동 + z7 -> 박스 캔버스(z6) 위에 그려져 공 위에 크레딧.
     라이트 테마 — 박스 등장 시점엔 배경이 이미 흰색이라 footer는 항상 흰 배경 위 -> 검정 텍스트. */
  position:relative;z-index:7;
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:22px var(--pad);
  font-size:12.5px;color:#161614;
}
.footer a{border-bottom:1px solid transparent;transition:border-color .2s}
.footer a:hover{border-color:rgba(22,22,20,.5)}
.footer .f-logo{width:52px;color:#8a8a83}
.footer .f-logo svg{width:100%;height:auto;display:block}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .scroll-cue::after{animation:none}
  .hero-logo{animation:none}
}

/* ---------- 텍스트 볼 회피 ---------- */
span.wv{display:inline-block}

/* ============ 박스 개발용 오버레이 (H키 토글, 평소 hidden — 클라이언트엔 안 보임) ============
   lab/contact3d.html 컨트롤 패널 이식. 전부 #box-dev 스코프라 본편 스타일에 누출 없음. */
#box-dev[hidden]{display:none}
#box-dev .panel{
  position:fixed;top:16px;left:16px;z-index:120;width:266px;
  background:rgba(20,20,18,.86);backdrop-filter:blur(10px);
  border:1px solid rgba(251,250,247,.14);border-radius:14px;
  padding:16px 16px 14px;color:var(--paper);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  max-height:calc(100svh - 32px);overflow-y:auto;
}
#box-dev .panel h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin-bottom:12px;font-weight:600}
#box-dev .grp{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(251,250,247,.08)}
#box-dev .grp:last-of-type{border-bottom:none}
#box-dev .row{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;gap:10px}
#box-dev label{opacity:.8;white-space:nowrap}
#box-dev input[type=range]{flex:1;height:3px;accent-color:#DD6FC4;cursor:pointer}
/* v50-14: 폰(?debug)에서 손가락 조작 — range 히트영역·행간·패널폭 확대 */
@media(max-width:860px){ #box-dev .panel{width:min(300px,88vw)} #box-dev input[type=range]{height:24px} #box-dev .row{margin-bottom:12px} }
#box-dev input[type=color]{width:28px;height:22px;border:none;border-radius:4px;background:none;cursor:pointer;padding:0}
#box-dev .val{min-width:34px;text-align:right;opacity:.6;font-variant-numeric:tabular-nums}
#box-dev .chk{display:flex;align-items:center;gap:6px;opacity:.8;cursor:pointer}
#box-dev .btns{display:flex;gap:8px;margin-top:12px}
#box-dev .btns button{flex:1;padding:9px;border-radius:8px;border:1px solid rgba(251,250,247,.2);background:rgba(251,250,247,.06);color:var(--paper);cursor:pointer;font-family:inherit;font-size:11px}
#box-dev .btns button:hover{background:rgba(251,250,247,.14)}
#box-dev .btns button.primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}
#box-dev .hint{opacity:.4;font-size:10px;margin-top:8px;line-height:1.4}
#box-dev .panel.collapsed .body{display:none}
#box-dev .toggle{position:absolute;top:14px;right:14px;cursor:pointer;opacity:.5;font-size:14px;line-height:1}
#box-dev .lab-ui{position:fixed;top:16px;right:16px;z-index:120;display:flex;gap:8px;font-size:12px}
#box-dev .lab-ui button{padding:8px 14px;border-radius:999px;border:1px solid rgba(251,250,247,.3);background:rgba(22,22,20,.6);color:var(--paper);cursor:pointer;backdrop-filter:blur(6px);font-family:inherit}
#box-dev #box-hud{position:fixed;top:56px;right:16px;z-index:120;background:rgba(20,20,18,.82);backdrop-filter:blur(10px);border:1px solid rgba(251,250,247,.14);border-radius:10px;padding:10px 12px;color:var(--paper);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.7;min-width:118px}
#box-dev #box-hud div{display:flex;justify-content:space-between;gap:12px}
#box-dev #box-hud span{opacity:.5}
#box-dev #box-hud b{font-variant-numeric:tabular-nums}
#box-dev .dev-hintbar{position:fixed;left:16px;bottom:14px;z-index:120;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--paper);opacity:.4;letter-spacing:.04em}