:root{
  --taupe:#b7b2a4; --taupe-d:#a49d8d; --taupe-l:#cfc9bd;
  --ink:#1b1916; --ink-soft:#26231e; --ivory:#f2eee7; --ivory-d:#e7e1d6;
  --line:rgba(255,255,255,.22); --line-ink:rgba(27,25,22,.18);
  --bronze:#7d7060; --wave:#7fa8b8;
  --sans:"Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --pad:clamp(20px,4vw,80px);
  --maxw:2160px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-anchor:none}
html,body{background:var(--ink);color:var(--ivory);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden;line-height:1.6;letter-spacing:-.01em;word-break:keep-all}
:where(#wrap) img{display:block;max-width:100%}
:where(#wrap) a{color:inherit;text-decoration:none}
::selection{background:var(--taupe);color:var(--ink)}
:focus-visible{outline:2px solid var(--wave);outline-offset:3px}

/* ---------- GNB (대림바스 실제 헤더 — 흰색, 실사이트 동일 · repo 1051a22 이식 · v6 PC-2: 띠배너 PC/모바일 모두 제거) ---------- */
:root{--gnbH:97px;--barH:0px}
/* 좁은 데스크톱 대비(실사이트도 폭 좁아지면 메뉴 축소) */
@media (max-width:1500px){}
/* 좌측 섹션 네비 (블랙컬렉션 /product/black 스와이퍼형과 동일 · 밝은 섹션 대비 위해 difference 블렌드로 항상 가독) */
.progress{position:fixed;left:72px;top:calc(50% + var(--gnbH) / 2);transform:translateY(-50%);z-index:61;display:flex;flex-direction:column;gap:20px;pointer-events:auto;color:#fff;transition:opacity .35s ease}   /* /product/black .pagination 동일: left 72 · gap 20 · 피드백 v4[공통-2]: GNB 제외 영역 세로 중앙 */
body.at-end .progress{opacity:0;pointer-events:none}   /* v5-2 PC-2: 블랙페이지식 — 푸터(CONTACT) 도달 시 좌측 네비 페이드아웃(반반색 mix-blend 제거) */
.progress button{background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:10px;color:inherit;font:inherit;padding:1px 0 1px 14px;opacity:.45;transition:opacity .3s}   /* dot–텍스트 gap 10 · li padding-left 14 (블랙 동일) */
.progress .dot{width:4px;height:4px;border-radius:50%;background:currentColor;flex:0 0 auto;transition:transform .3s}   /* 블랙 dot 4px */
.progress .lb{font-size:14px;letter-spacing:-.14px;font-weight:500;text-transform:uppercase;white-space:nowrap;transition:font-weight .3s}   /* 블랙 텍스트 14px */
.progress button:hover{opacity:.8}
.progress button.on{opacity:1}
.progress button.on .dot{transform:none}   /* 피드백 v4[공통-3]: 블랙페이지와 동일 — 선택 점도 동일 크기(4px) */
.progress button.on .lb{font-weight:700}
.scrollcue{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:61;font-size:10px;letter-spacing:.3em;font-weight:600;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center;gap:8px}   /* 흰색 고정(전 영역) */
.scrollcue i{display:block;width:1px;height:32px;background:linear-gradient(#fff,transparent);animation:cue 2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- scene / reveal ---------- */
.scene{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:center;justify-content:center}   /* v6 MO-3b: svh→dvh — 사파리 하단 주소창 축소로 화면이 늘어나면 스테이지도 같이 늘어남(하단에 다음 섹션·빈 배경 노출 방지) */
.bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-pan{display:none}   /* v6 MO-3: 모바일 전용 히어로 가로 스크롤(스와이프) 컨테이너 + 자동 팬 모션 — 기본 숨김(PC·태블릿은 bg-pc) */
.bg img{position:absolute;inset:-10% -4%;width:108%;height:120%;object-fit:cover;will-change:transform}
.scrim{position:absolute;inset:0;z-index:1}
.eyebrow{font-size:clamp(10px,.85vw,13px);letter-spacing:0;font-weight:600;text-transform:uppercase;display:inline-flex;align-items:center;gap:0}
.display{font-weight:800;line-height:.9;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
.reveal-line{display:block;overflow:hidden;padding-bottom:.04em}
.reveal-line>span{display:block;transform:translateY(110%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.in .reveal-line>span{transform:none}
.fade{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.in .fade{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}.d4{transition-delay:.48s}

/* ---------- HERO ---------- */
/* HERO 배경: 위로 스크롤되지 않고 뷰포트에 '고정' → 하단 섹션(SPACE 박스)이 위로 덮으며 진입 */
#hero{height:100vh}   /* v6 MO-3b: 인플로우 높이 = 최대 뷰포트(iOS 100vh=lvh) — 주소창 축소 시 다음 섹션(SPACE)이 히어로 하단으로 올라오지 않음 */
#hero .stage{position:fixed;inset:0;height:auto;z-index:0;background:var(--ink)}   /* v6 MO-3b: top/bottom 0 고정(높이 지정 제거) → 주소창 축소·확장에 따라 메인 영역이 항상 화면 높이에 맞게 유지 */
#hero .bg{top:var(--gnbH);bottom:var(--barH)}   /* v4: 히어로 이미지를 GNB 아래 영역에 배치 → 이미지 상단이 GNB에 가려지지 않고 전체 노출 · v6 MO-3: 모바일/태블릿은 하단 섹션 바 위까지(이미지 영역 = GNB↔하단바) */
#hero .scrim{background:none;pointer-events:none}   /* 피드백 v4[01-3]: 배경 딤드 처리 삭제 · v6 MO-3: 터치 통과(모바일 히어로 가로 스와이프가 스크림에 막히지 않게) */
.hero-wrap{position:relative;z-index:2;text-align:center;color:#fff;padding:0 var(--pad)}
/* HERO SHOWROOM: 섹션 밖 body-level 고정 오버레이 → 스크롤해도 화면 중앙에 고정, 다음 섹션에서 같은 위치로 이어짐(스태킹 안전) */
.hero-fixed{position:fixed;top:calc(50% + (var(--gnbH) - var(--barH)) / 2);left:0;right:0;transform:translateY(-50%);z-index:62;text-align:center;color:#fff;padding:0 var(--pad);pointer-events:none;will-change:opacity}   /* 피드백 v4[공통-2]: GNB 제외 영역 세로 중앙 · v6 MO-4: 모바일/태블릿은 하단 섹션 바도 제외한 영역의 중앙 */
/* 히어로 SHOWROOM 키네틱 타이포 (레퍼런스: 글자별 스태거 상승 → 스크롤 시 O창 이미지·아웃라인 변환, 제자리 고정) */
.hero-title.kinetic{overflow:visible}
.hero-title .kln{display:inline-flex;overflow:hidden;line-height:1;padding:.06em .02em .14em}
.hero-title .kln>i{display:inline-block;font-style:normal;transform:translateY(118%);transition:transform 1.15s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i) * .055s);-webkit-text-fill-color:#fff;will-change:transform}
.hero-fixed.show .hero-title .kln>i{transform:none}
.hero-title .kln>i.win{background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text}
.hero-wrap .eyebrow{color:#fff;margin-bottom:clamp(28px,5vh,54px);justify-content:center;letter-spacing:.08em;padding:9px 20px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.30);backdrop-filter:blur(12px) saturate(1.25);-webkit-backdrop-filter:blur(12px) saturate(1.25);box-shadow:0 6px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.30)}
.hero-title{font-size:clamp(38px,6vw,104px);letter-spacing:0}   /* v6 PC-1: 이전 시안(v5) 크기 38/6vw/104 복원 — v5-2c 확대분 되돌림. 모바일 크기는 ≤760 별도 지정 · 드롭섀도우 없음 */
/* HERO 이미지: 상단 형광등 패널부터 시작하도록 천장 목재 크롭 + 하단 바닥 최소화 위해 확대(scale 1.45)·세로 50% (피드백: 더 확대/위치조정) */
#hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;transform:none;transform-origin:center}   /* v4: 초광폭 hero_bg(2.31:1) — object-fit:cover가 이 비율에선 항상 높이에 맞춰 스케일 → 상하 항상 fit(무크롭), 좌우만 폭에 따라 노출/크롭. 1440↓·2560·4K(모두 16:9) 상하 fit 보장(뷰포트 비율 ≤2.31 한). 스크롤 확대 제거(확대 시 상하 크롭 방지) */
/* char-title: 스크롤 진입 시 글자 랜덤순서 페이드업 (인트로 애니메이션과 동일) */
.char-title{overflow:hidden;padding-bottom:.08em;white-space:nowrap}
.char-title .ch{display:inline-block;opacity:0;transform:translateY(120%);transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1)}
.char-title.show .ch{opacity:1;transform:none}
.hero-sub{margin-top:20px;font-size:clamp(14px,1.3vw,20px);font-weight:300;color:rgba(255,255,255,.88)}

/* ---------- WIREFRAME ---------- */
#wire{height:360vh}
#wire .stage{background:var(--taupe);color:var(--ink)}
#wire canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.5;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 95%);mask-image:linear-gradient(to bottom,#000 80%,transparent 95%)}   /* 공간 표현 라인 연하게(피드백) + 하단 페이드로 중앙 SCROLL 지시와 라인 겹침 제거(피드백) */
.wire-copy{position:relative;z-index:3;text-align:center;padding:0 var(--pad);max-width:940px}
.wire-copy::before{content:none}
.wire-copy .eyebrow{color:#fff;opacity:.7;margin-bottom:28px;justify-content:center}
.wire-lead{font-size:clamp(20px,2.5vw,40px);font-weight:600;line-height:1.44;letter-spacing:-.02em;color:#fff}
.wire-lead b{font-weight:800}
.br-m{display:none}   /* v5-2 MO-7: 모바일 전용 줄바꿈(기본 숨김, ≤760서 표시) */
.wire-note{margin-top:24px;font-size:clamp(12px,1vw,15px);color:#fff;opacity:.7;font-weight:500}
.wire-word{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;text-align:center;font-size:clamp(38px,6vw,104px);font-weight:800;letter-spacing:0;color:#fff;pointer-events:none;opacity:0;will-change:transform,opacity}
#wireWord{display:none}   /* HERO의 고정 SHOWROOM이 대신 유지되므로 중복 글자 숨김 */

/* ---------- ZONES (pinned stacked clip-reveal) ---------- */
.zones{height:440vh}
.zones .stage{color:#fff;background:var(--ink)}
.zlayer{position:absolute;inset:0;overflow:hidden}
#zl0{z-index:1}
#zl1{z-index:2;clip-path:inset(100% 0 0 0)}
#zl2{z-index:3;clip-path:inset(100% 0 0 0)}
.zbg{position:absolute;inset:0}
.zbg img{width:100%;height:100%;object-fit:cover}
#zl0 .zbg img{object-position:center 74%}
#zl1 .zbg img{object-position:center 42%}
#zl2 .zbg img{object-position:center 55%}
/* 어둡게 깔린 딤 오버레이 삭제 — 배경 사진 그대로, 타이틀 하단만 아주 옅게(가독) */
.zscrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(15,13,11,.48) 0%,rgba(15,13,11,.1) 26%,rgba(15,13,11,0) 46%)}   /* 하단 캡션 가독용 하단 가중 스크림(원안 복원) */
.zscrim.brand{background:linear-gradient(to top,rgba(9,20,27,.5) 0%,rgba(9,20,27,.1) 26%,rgba(9,20,27,0) 46%)}
.zlayer .zwave{position:absolute;inset:0;width:100%;height:100%;z-index:2;opacity:.92;pointer-events:none}
.zinner{position:absolute;z-index:3;left:0;bottom:16vh;width:100%;max-width:var(--maxw);padding:0 clamp(44px,6vw,120px)}   /* ZONES는 하단 캡션 배치(원안) — 세로중앙 미적용. 가로 우측이동(네비 겹침)만 유지 */
.zinner .eyebrow{color:var(--taupe-l);margin-bottom:20px}
#zl0 .zinner .eyebrow,#zl0 .zinner .z-en{color:#bfe0ea}
.z-title{font-size:clamp(34px,5.6vw,110px);line-height:.94;overflow:hidden}
.z-title.sub{font-size:clamp(30px,5.6vw,112px)}
.z-title.zline{white-space:nowrap;font-size:clamp(28px,4.6vw,84px)}
.zw{display:block}
.zw.out{color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.72);text-stroke:1.4px rgba(255,255,255,.72)}
.z-sub{margin-top:18px;font-size:clamp(15px,1.5vw,24px);font-weight:300;max-width:32ch;color:rgba(255,255,255,.9)}
.z-en{margin-top:12px;font-size:clamp(12px,1vw,15px);font-weight:600;letter-spacing:.05em;color:var(--taupe-l)}
.zinner .eyebrow,.zinner .z-sub,.zinner .z-en{opacity:0;transform:translateY(115%);transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1)}
.zlayer.show .eyebrow,.zlayer.show .z-sub,.zlayer.show .z-en{opacity:1;transform:none}
.z-title .ch{display:inline-block;opacity:0;transform:translateY(120%);transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1)}
.zlayer.show .z-title .ch{opacity:1;transform:none}
.zw.out .ch{color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.72);text-stroke:1.4px rgba(255,255,255,.72)}
.z-count{position:absolute;right:clamp(44px,6vw,120px);top:clamp(74px,11vh,140px);z-index:4;font-size:clamp(48px,9vw,132px);font-weight:800;line-height:1;color:rgba(255,255,255,.15);font-variant-numeric:tabular-nums}

/* ---------- GALLERY ---------- */
#gallery{height:625vh;background:var(--ink)}   /* 피드백v8[#3]: 11컷으로 늘어난 트랙(7399→8763px)에 맞춰 세로 구간 확대 — 가로/세로 이동비 1.21 유지(기존과 동일 체감 속도) */
#gallery .stage{flex-direction:column;align-items:flex-start;justify-content:center;padding:var(--gnbH) 0 0}   /* v4: 이미지를 GNB 제외 영역 세로중앙 → 상·하 여백 균등 */
/* 타이틀을 이미지 영역 위에 크게 겹쳐 배치 (이전 시안 방식) */
/* 타이틀을 이미지 상단에 묶는다. 이미지는 GNB 제외 영역의 세로 중앙에 놓이므로
   (중심 = 50% + --gnbH/2) 이미지 상단 = 50% + --gnbH/2 - 이미지높이/2.
   시안은 56px 겹쳐 있었고 고객이 겹침을 지적해 맞닿는 선까지 올렸다가,
   다시 살짝만 겹쳐 달라는 요청으로 16px 내렸다.
   이미지 높이는 .gal-item 의 clamp(300px,50vh,540px) 과 같은 식. */
.gal-head{position:absolute;top:auto;bottom:calc(50% - var(--gnbH) / 2 + clamp(300px,50vh,540px) / 2 - 16px);left:var(--pad);z-index:6;pointer-events:none}
.gal-head .eyebrow{color:rgba(242,238,231,.6);margin-bottom:15px;letter-spacing:.24em}
.gal-head h3{font-size:clamp(30px,4.4vw,72px);font-weight:800;color:#fff;text-transform:uppercase;line-height:.9;text-shadow:0 6px 40px rgba(12,10,8,.5)}   /* v4[02-1]: 폰트 축소 — 좌측 네비 겹침 방지 */
.gal-track{display:flex;gap:clamp(16px,2.2vw,44px);align-items:center;padding:0 12vw;will-change:transform}
.gal-item{position:relative;flex:0 0 auto;width:clamp(280px,42vw,760px);height:clamp(300px,50vh,540px);overflow:hidden;background:#26231e}   /* v4: 썸네일 축소 — 위아래 공간 확보 */
.gal-item img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.gal-item:hover img{transform:scale(1)}
.gal-item .cap{position:absolute;left:20px;bottom:18px;z-index:2;font-size:11px;letter-spacing:.16em;font-weight:600;color:#fff;text-transform:uppercase;mix-blend-mode:difference}
.gal-item.tall{width:clamp(240px,30vw,520px)}
.gal-progress{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(120px,16vh,175px);height:1px;background:rgba(255,255,255,.16);z-index:3}   /* v4: 축소된 이미지 하단에 근접 배치 — 이미지↔프로그레스 간격 축소 */
.gal-progress i{display:block;height:100%;width:0;background:var(--taupe)}

/* ---------- INFO + PLAN ---------- */
#info{background:var(--taupe);color:#fff}
.info-wrap{max-width:780px;margin:0 auto;padding:clamp(210px,27vh,360px) var(--pad);display:flex;flex-direction:column;align-items:center;text-align:center}   /* [M-1]+추가: 상·하 간격 더 시원하게 */
.info-wrap .char-title{font-size:clamp(34px,5vw,88px);font-weight:800;line-height:.94;text-transform:uppercase;margin-bottom:14px}
.info-sub{font-size:clamp(16px,1.5vw,22px);font-weight:500;color:rgba(255,255,255,.78)}   /* v4[03-2]: 텍스트 소폭 확대 */
.info-addr{font-size:clamp(16px,1.5vw,21px);font-weight:500;line-height:1.85}   /* v4[03-2]: 텍스트 소폭 확대 */
.info-addr .sub{display:block;color:rgba(255,255,255,.72);font-size:.96em}
.info-open{margin-top:26px;display:flex;flex-direction:column;gap:8px}
.info-open .k{font-size:13.5px;letter-spacing:.16em;font-weight:600;text-transform:uppercase;color:rgba(255,255,255,.72)}   /* v4[03-2]: 소폭 확대 */
.info-open .v{font-size:clamp(16px,1.4vw,21px);font-weight:600}   /* v4[03-2]: Mon-Sun 시간 텍스트도 확대(빨간박스 포함) */
.plan-box{position:relative;aspect-ratio:596/816;width:100%;max-width:700px;margin:clamp(50px,7vh,92px) auto clamp(44px,6vh,72px)}   /* v4[03-1]: 도면 확대 — 텍스트 선명도 확보 */
.plan-box svg{width:100%;height:100%;overflow:visible}
.plan-box .p-stroke{fill:none;stroke:#fff;stroke-linejoin:miter;stroke-linecap:butt;vector-effect:non-scaling-stroke;opacity:.95;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.6s ease}
.plan-box .p-outer{stroke-width:2}   /* v4: 외곽선만 2px */
.plan-box .p-inner{stroke-width:1}   /* v4: 내벽은 얇게 — 좌표 스냅으로 삐침 제거 */
#info.in .plan-box .p-stroke{stroke-dashoffset:0}
.plan-box .p-room{fill:#fff;opacity:0}
/* 피드백[M-2]: 쇼룸 도면 반짝이는(펄스) 효과 제거 — p-room 애니메이션 삭제 */
.plan-box text{fill:#fff;font-weight:500;letter-spacing:.02em;opacity:0;transition:opacity .6s ease;text-anchor:middle}
#info.in .plan-box text{opacity:.92}
.plan-box .pl2{transition-delay:.45s}.plan-box .pl3{transition-delay:.85s}

/* ---------- CONTACT ---------- */
#contact{background:var(--ivory);color:var(--ink)}
.ct-wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(205px,26vh,350px) var(--pad) clamp(150px,18vh,240px)}   /* 위아래 간격 추가 */
.ct-head{text-align:center;margin-bottom:clamp(56px,8vh,112px)}
.ct-head .eyebrow{color:var(--bronze);justify-content:center;margin-bottom:16px}
.ct-head h2{font-size:clamp(34px,5vw,88px);font-weight:800;text-transform:uppercase;line-height:.94}
.ct-head p{margin-top:12px;font-size:clamp(15px,1.4vw,22px);font-weight:300;color:var(--ink-soft)}
.ct-grid{display:flex;flex-direction:column;gap:clamp(40px,6vh,74px);max-width:620px;margin:0 auto;width:100%}   /* 초기안 폭(620px) */
.ct-map{position:relative;background:var(--ivory-d);border:1px solid var(--line-ink);overflow:hidden;min-height:340px;border-radius:2px}
.ct-map .kakao_map{position:absolute;inset:0;width:100%;height:100%;background:var(--ivory-d)}
/* 실사이트 mu_layout.css 의 *{font-size:14px} 가 v8 내부 상속을 끊는다.
   :where() 로 특이도 0 을 유지해 v8 자체 규칙은 그대로 이기게 두고, 와일드카드만 무력화한다. */
:where(#progress,.scrollcue,#heroFixed,main){font-family:var(--sans);font-size:16px;line-height:1.6;letter-spacing:-.01em;color:var(--ivory)}
:where(#progress,.scrollcue,#heroFixed,main) :where(*){font-size:inherit;line-height:inherit;font-family:inherit;color:inherit;letter-spacing:inherit}
.ct-map .map_label{position:static;bottom:auto;background:var(--ink);color:var(--ivory);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.05em;padding:5px 10px;border-radius:3px;white-space:nowrap;transform:translateY(-34px);box-shadow:0 2px 8px rgba(27,25,22,.25)}
.ct-map .pin b{background:var(--ink);color:var(--ivory);font-size:11px;font-weight:700;letter-spacing:.05em;padding:5px 10px;border-radius:3px;white-space:nowrap}
.ct-map .pin i{width:2px;height:20px;background:var(--ink)}
.ct-map .pin em{width:12px;height:12px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 6px rgba(27,25,22,.14);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 4px rgba(27,25,22,.2)}70%{box-shadow:0 0 0 16px rgba(27,25,22,0)}100%{box-shadow:0 0 0 0 rgba(27,25,22,0)}}
.ct-info{display:flex;flex-direction:column;gap:26px;max-width:620px;margin:0 auto;width:100%}
.ct-info .row{display:grid;grid-template-columns:130px 1fr;gap:clamp(14px,2vw,34px);align-items:start;border-top:1px solid var(--line-ink);padding-top:18px}
.ct-info .k{font-size:16.5px;font-weight:600;color:var(--ink-soft);opacity:.85;line-height:1.5;letter-spacing:0}   /* v4[04-2]: 라벨 텍스트 확대 */
.ct-info .v{font-size:clamp(15px,1.2vw,18px);font-weight:500;line-height:1.55}
.ct-info .v small{display:block;font-size:.9em;font-weight:400;color:var(--ink-soft);opacity:.9;margin-top:5px}
.ct-info .v small.tel{margin-top:9px}
/* 원형 뱃지 (T / F / 7) — SVG 아이콘 제작(확대·스케일에도 글자 완전 중앙 고정) · 7은 7호선 공식색 #747F00 */
/* 뱃지 = HTML 원. SVG <text> 는 기준선 좌표로 놓여 WebKit(사파리)에서 글자가 아래로 치우쳤다.
   inline-flex + align-items:center 는 라인박스 중앙정렬이라 브라우저 구현 차이가 없다.
   다만 라인박스 중앙 != 글자 잉크 중앙이다. Pretendard 는 ascent/descent 가 비대칭이라
   T·F·7 처럼 디센더가 없는 글자는 잉크가 원 중심보다 0.7px 아래에 앉는다.
   padding-bottom 은 내용상자를 그만큼 위로 줄이므로 글자가 그 절반만큼 올라간다.
   0.7px 를 되돌리려면 1.4px 가 필요하다. 확대 측정으로 확인한 값이다.
   여기에 더해, align-items:center 는 원을 텍스트 라인박스 한가운데 놓는데
   한글·숫자의 잉크는 라인박스 한가운데보다 아래에 앉는다(디센더 자리가 남으므로).
   실측: 원 중심이 텍스트 잉크 중심보다 모바일 0.59~0.66px, PC 0.71~0.79px 위.
   transform 으로 원을 0.7px 내려 텍스트 잉크 중심에 맞춘다. 전 구간 공통이다. */
.ct-info .badge{width:19px;height:19px;margin-right:6px;flex:0 0 auto;vertical-align:middle;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(27,25,22,.10);color:var(--ink);font-family:inherit;font-size:11px;font-weight:700;line-height:1;letter-spacing:0;box-sizing:border-box;padding:0 0 1.4px;transform:translateY(0.7px)}
.ct-info small.tel{display:flex;align-items:center;flex-wrap:wrap}   /* v4[04-5]: T·F 뱃지 텍스트와 세로 중앙 정렬 */
.ct-info .v.vflex{display:flex;align-items:center;flex-wrap:wrap}   /* v4[04-5]: 7 뱃지 텍스트와 세로 중앙 정렬 */

.ct-info .badge.n7{background:#747F00;color:#fff}   /* [CT-2] 7호선 공식색 */

/* 전화걸기(tel) 링크 · 주소 탭하여 복사([CT-1] 점선 없이 · 복사 기능 유지) */
.ct-info .v a{color:inherit;text-decoration:none;transition:opacity .2s}
.ct-info .v a:hover{opacity:.7}
.ct-info .v a:active{opacity:.5}
.addr-copy{display:inline;background:none;border:0;padding:0;margin:0;font:inherit;line-height:inherit;color:inherit;cursor:pointer;text-align:left}
.addr-copy:active{opacity:.55}
.copy-toast{position:fixed;left:50%;bottom:calc(var(--barH) + 20px);transform:translateX(-50%) translateY(10px);z-index:120;background:rgba(27,25,22,.94);color:#fff;font-size:13px;font-weight:600;letter-spacing:-.01em;padding:11px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
.copy-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.ct-cta{margin-top:clamp(34px,5vh,56px);display:flex;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--ink);color:var(--ivory);padding:18px 34px;font-size:14px;font-weight:600;letter-spacing:.04em;border-radius:2px;cursor:pointer;transition:background .3s;pointer-events:auto;min-height:44px}
.btn:hover{background:var(--bronze)}   /* v4[04-4]: 호버 시 간격 벌어짐 제거 — 색상 변경만 */
.btn svg{width:20px;height:10px}
.foot-logo img{width:clamp(150px,15vw,200px);height:auto;display:block}
.foot-info{flex:1 1 420px;min-width:280px;font-size:clamp(13px,1vw,15px);font-weight:500;line-height:1.95;color:#c7cbd1}
.foot-info p{margin:0}
.foot-info b{font-weight:700;color:#e6e9ee;margin-right:8px}
.foot-info .bar{margin:0 9px;color:rgba(199,203,209,.32)}
.foot-links{display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:22px;font-size:12.5px;align-items:center}
.foot-links a{color:#9aa0ab;transition:color .2s}
.foot-links a:hover{color:#fff}
.foot-links a.strong{color:#e6e9ee;font-weight:600}
.foot-copy{margin-top:24px;font-size:11.5px;color:#7f8794;letter-spacing:.02em}
@media (max-width:760px){.foot-info .bar{display:none}.foot-info b{display:inline-block;margin-top:6px}}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;align-items:center;justify-content:center;transition:opacity .8s ease,visibility .8s}
#loader.done{opacity:0;visibility:hidden}
#loader svg{width:min(46vw,340px);height:auto;color:var(--taupe)}
#loader .ld-stroke{fill:none;stroke:currentColor;stroke-width:1.2;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:draw 1.8s cubic-bezier(.7,0,.3,1) forwards}
#loader .ld-word{fill:var(--ivory);font-size:15px;font-weight:800;letter-spacing:.3em;text-anchor:middle;opacity:0;animation:fadein .8s .9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}

/* rail safe-area on wide screens (progress rail visible >1180) */
@media (min-width:1181px){
  .zinner{padding-left:clamp(250px,14vw,290px)}   /* 좌측 앵커 네비(right≈215px)와 확실히 분리 — 타이틀·디스크립션 우측 이동(1920 검증, 피드백) */
  .gal-head{left:clamp(44px,4.4vw,96px)}   /* 타이틀 조금 더 왼쪽으로 */
}
body.at-end .scrollcue{opacity:0;transition:opacity .4s}   /* v4[04-3]: 색 변경 없이 흰색 유지한 채 페이드아웃(검정 전환 제거) */
/* ================= RESPONSIVE ================= */
@media (max-width:1180px){   /* 데스크톱 네비 숨김 → 햄버거 전체메뉴 사용 */
  .plan-box{max-width:520px}
  /* 섹션 네비게이션(모바일/태블릿): 우측 컴팩트 도트 레일 */
  /* v5-2b MO-6: 블랙페이지 하단 바 완전 동일(실측) — 72px·#000·14px·자간-.5·gap7·dot4·활성 white/700·비활성 white20%/500 */
  :root{--barH:calc(72px + env(safe-area-inset-bottom,0px))}   /* v6: 하단 섹션 바 높이(홈 인디케이터 safe-area 포함) — 히어로 이미지 영역·SHOWROOM/한글카피/ZONES 세로중앙 계산에서 제외 */
  /* v6 MO-1: 블랙페이지 하단 바(Swiper centeredSlides) 동작 재현 — 활성 항목을 항상 화면 가로 정중앙에(양끝 50% 스페이서 + JS centerBar). 섹션 전환·스크롤 시 무조건 중앙 */
  /* v6 MO-2: 컬러를 GNB·쇼룸 페이지 톤으로 — 흰 바탕(#fff) · 활성 검정 700 · 비활성 검정 30% (블랙페이지의 흰 20% 반전 + 가독 보정) */
  .progress{left:0;right:0;top:auto;bottom:0;transform:none;flex-direction:row;justify-content:flex-start;align-items:center;gap:0;height:var(--barH);padding:0 0 env(safe-area-inset-bottom,0px);background:#fff;color:#000;z-index:70;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;mix-blend-mode:normal;scrollbar-width:none}   /* 피드백v7[#2]: hero↔하단바 사이 회색 라인(상단 1px 그림자) 제거 */
  .progress::-webkit-scrollbar{display:none}
  .progress::before,.progress::after{content:"";flex:0 0 50%;height:1px}   /* 양끝 50% 스페이서 — 첫(SHOWROOM)·마지막(CONTACT) 항목도 정중앙에 올 수 있음 */
  .progress .lb{display:inline;font-size:14px;letter-spacing:-.5px}
  .progress button{flex:0 0 auto;opacity:1;color:rgba(0,0,0,.3);padding:0 16px;gap:7px;white-space:nowrap;align-self:stretch;transition:color .3s}
  .progress button.on{opacity:1;color:#000}
  .progress .dot{width:4px;height:4px}
  .progress button.on .dot{transform:none}
  body.at-end .progress{opacity:1;pointer-events:auto}   /* 모바일 하단 바는 푸터서도 유지(블랙페이지 동일) */
  .scrollcue{bottom:calc(var(--barH) + 22px)}   /* v6: 태블릿(761~1180) SCROLL 지시가 하단 바에 가려지지 않게 바 위로 */
}
@media (max-width:760px){
  :root{--gnbH:61px}
  .hero-title{font-size:clamp(40px,12.4vw,52px)}   /* v6 PC-1 연동: 모바일 SHOWROOM은 예시 이미지 크기(≈50px@402) 유지 — PC 복원과 분리 */
  #hero .bg .bg-pc{display:none}   /* v6-1 MO-3: 모바일은 hero_bg_mo3(2548×2126 → 1918×1600) — 세로 fit(천장~바닥 전체), 가로는 넘침(402×741 기준 폭 888·이동 486px) */
  #hero{height:300vh}   /* 피드백v8[#1]: 가로 팬 속도 완화 — 세로 스크롤 구간 200vh→300vh. 팬 구간(heroH−vh)이 844→1688px로 2배 늘어 같은 가로 이동량(633px)을 절반 속도로 소화 */
  .hero-pan{--heroZoom:1.2;display:block;position:absolute;inset:0;overflow-x:hidden;overflow-y:hidden;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y}   /* 피드백v7[#1]: 세로 스크롤 연동 가로 팬(자동 팬 제거) — 스크롤 구동 전용이라 overflow-x hidden */
  .hero-pan::-webkit-scrollbar{display:none}
  #hero .bg .hero-pan img{position:relative;inset:auto;top:calc((1 - var(--heroZoom)) * 100%);width:auto;max-width:none;height:calc(100% * var(--heroZoom));object-fit:fill;transform:none;display:block;pointer-events:none;-webkit-user-drag:none}   /* v6-5: 소폭 확대(--heroZoom 1.2) + 하단 기준 정렬(천장 윗부분만 잘림) → 조명 패널이 SHOWROOM 위로 올라가 흰 글자와 겹치지 않음 */
  #wire{height:280vh}
  .wire-lead{font-size:clamp(23px,6.4vw,34px);line-height:1.5}   /* v5-2 MO-7/MO-2: 한글 카피 확대 */
  .br-m{display:inline}   /* v5-2 MO-7: 모바일 전용 줄바꿈(3줄) */
  .wire-copy::before{width:180%;height:150%}
  .wire-word{top:50%;font-size:14vw}
  /* ZONES: PC처럼 핀 고정 + 마스킹 클립리빌 유지(모바일 오버라이드 제거), 타이포만 축소 */
  /* v6 MO-5: 존 타이틀·서브카피를 GNB·하단바 제외 영역 세로 중앙 + 가로 중앙 정렬(참고 시안). 배경은 존별 위치/배율 조정으로 텍스트와 피사체 겹침 최소화 */
  .zinner{padding:0 24px;top:var(--gnbH);bottom:var(--barH);transform:none;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}   /* v6-2: 타이틀+디스크립션을 한 그룹으로 GNB↔하단바 영역에 flex 세로중앙 — 그룹 위아래 여백 동일 */
  .zinner .z-sub{margin-left:auto;margin-right:auto}   /* v6-3: 텍스트 그림자 제거 — 텍스트 뒤 별도 딤 없음 */
  .zscrim,.zscrim.brand{background:rgba(15,13,11,.3)}   /* v6-3: 중간 밴드 딤 제거 → 이미지 전체에 균일한 딤(.3)만 */
  .zscrim.brand{background:rgba(9,20,27,.36)}   /* v6-3: 브랜딩존은 흰 세면기 대비 위해 균일 딤 .36 */
  #zl0 .zbg img{object-position:center center;transform:scale(1);transform-origin:center center}   /* v6-2: 브랜딩존 배경 원위치(요청) — 확대·상단 기준 제거, 가독은 딤(.52)으로 */
  #zl1 .zbg img{object-position:40% center;transform:none}   /* v8-2: 모바일 노출 확대 — 1.15배 확대 해제(cover가 이미 높이에 딱 맞아 세로 크롭 0). 가로 노출 26.3%→30.3%로 파티션 한 칸이 더 들어옴 */
  #zl2 .zbg img{object-position:38% center;transform:scale(1.28);transform-origin:38% top}   /* 피드백v8[#2]: 수전이 KITCHEN 타이틀·서브문구와 겹치지 않게 — 가로 크롭(38%)은 v7[#4] 그대로 두고 상단 기준 1.28배로 확대해 수전 헤드를 텍스트 아래로 내림(냉장고·싱크·수전·화분 모두 유지). v8-2 노출확대(52%·확대해제) 시도했으나 수전이 좌측으로 밀려 고객 요청으로 원복 — 수전은 중앙, 텍스트 아래가 기준 */
  .z-count{right:24px;top:clamp(64px,10vh,110px);font-size:clamp(40px,15vw,80px)}
  .z-title{font-size:clamp(32px,8.8vw,60px)}   /* v5-2 MO-2 */
  .z-title.zline{font-size:clamp(32px,8.8vw,60px);white-space:nowrap;letter-spacing:-.01em}   /* v5-2 MO-8: BRANDING ZONE 한 줄 + BATHROOM/KITCHEN과 동일 크기 */
  .z-sub{font-size:clamp(16px,4.8vw,21px);font-weight:600;max-width:26ch}   /* 피드백v7[#3]: 서브문구 볼드(600)+사이즈 UP */
  /* GALLERY: PC처럼 핀 가로 스크롤(드래그업 → 우측 이동), 모바일 사이징 */
  #gallery{height:420vh}   /* 피드백v8[#3]: 11컷 트랙(2897→3483px)에 맞춰 확대 — 가로/세로 이동비 1.14 유지 */
  #gallery .stage{--galH:clamp(240px,50dvh,460px);--galGap:28px;--galHeadH:calc(1.92 * clamp(30px,8.4vw,52px));padding:calc(var(--gnbH) + var(--galHeadH) + var(--galGap)) 0 calc(var(--barH) + var(--galGap) + 1px)}   /* v6-4: 타이틀·이미지·프로그레스를 한 그룹(간격 28px)으로 GNB↔하단바 영역 세로중앙 — 이미지 블록 위치는 상하 패딩으로 보정(타이틀 높이 = 2줄×.96×폰트) */
  .gal-track{padding:0 11vw}
  .gal-item{width:78vw;height:var(--galH)}   /* v6 MO-6: 56svh → 50dvh(상한 460) */
  .gal-item.tall{width:64vw}
  .gal-head{top:auto;bottom:calc((100% - var(--gnbH) - var(--galHeadH) + var(--barH) + 1px + var(--galH)) / 2 + var(--galGap));right:24px}   /* v6-4: 타이틀 하단 = 이미지 상단 − 28px (GNB 여백은 화면 높이에 따라 47~91px, v6 MO-6의 40px 이상 유지) */
  .gal-head h3{font-size:clamp(30px,8.4vw,52px);line-height:.96}
  .gal-progress{bottom:calc((100% - var(--gnbH) - var(--galHeadH) + var(--barH) + 1px - var(--galH)) / 2 - var(--galGap))}   /* v6-4: 프로그레스 = 이미지 하단 + 28px */
  .info-wrap{padding:calc(var(--gnbH) + 44px) 24px 84px}   /* v5-2 MO-4 연동 */
  .plan-box text,#info.in .plan-box text{font-weight:700;opacity:1}   /* v6 MO-7-1: 도면 내 문구 볼드(500→700)·불투명 — 크기는 buildPlan에서 모바일 16→21 */
  .info-open .k{letter-spacing:.05em}   /* v6 MO-7-2: OPEN & CLOSE 자간 .16em→.05em(벌어짐 완화) */
  .ct-wrap{padding:calc(var(--gnbH) + 44px) 24px 96px}   /* 하단 바(60) 여유 확보 */
  .ct-map{min-height:280px}
  .ct-info .row{grid-template-columns:1fr;gap:5px}
  .ct-info .k{font-size:17px;font-weight:700;color:var(--ink);opacity:1}   /* v5-2 MO-12: 명칭 강조(두께·색) */
  .ct-info .v{font-size:15px;font-weight:400;color:var(--ink-soft)}   /* v5-2 MO-12: 세부 약하게(위계 대비) */
  .ct-info .v.vflex,.ct-info small.tel{display:flex;align-items:center;flex-wrap:wrap}   /* 피드백v7[#5]: 아이콘–텍스트 세로 중앙정렬(inline vertical-align 편차 제거) · flex-wrap로 단독 줄바꿈 방지 유지 */
  /* 뱃지 세로위치 보정은 화면 크기와 무관하므로 기본 규칙(.ct-info .badge)에 있다.
     여기 있던 -0.5px / -1px 는 SVG 뱃지 시절의 보정이라 삭제했다. */
  .br-nm{display:none}   /* v5-2 MO-11: '대림 바스&키친 직영 쇼룸' 한 줄 */
  .foot{flex-direction:column;gap:8px}
  .scrollcue{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal-line>span,.fade{transition:none;transform:none;opacity:1}
  .hero-title .kln>i{transition:none;transform:none}
  .plan-box .p-stroke{transition:none;stroke-dashoffset:0}
  .plan-box text{transition:none;opacity:.85}
  #loader .ld-stroke{animation:none;stroke-dashoffset:0}
  #loader .ld-word{animation:none;opacity:1}
  .scrollcue i,.ct-map .pin em{animation:none}
  .wire-word{opacity:.4}
  .z-title .ch,.zinner .eyebrow,.zinner .z-sub,.zinner .z-en{transition:none;opacity:1;transform:none}
  .char-title .ch{transition:none;opacity:1;transform:none}
}

/* ===== 실사이트 공통 레이아웃과의 정합 (이관 시 추가) ===== */

/* 이 파일은 showroom.jsp 에서만 link 한다. 다른 페이지에 영향이 없으므로
   body 클래스로 한 번 더 가둘 필요가 없다. JS 로 클래스를 붙이면 그 사이
   띠배너가 잠깐 보였다 사라지므로(FOUC) 일부러 쓰지 않는다. */
#header .h_banner{display:none !important;}  /* 띠배너 */
#side_left{display:none;}                    /* 제품검색 */
#side_right{display:none;}                   /* 우측 플로팅 */
/* mu_layout.css:79 의 #wrap{max-width:1920px} 해제.
   이 페이지는 섹션이 화면을 꽉 채우는 구성이라 1920 에서 잘리면
   position:fixed 인 히어로 배경만 화면 전체를 덮어 오른쪽에 사진이 비어져 나온다. */
#wrap{padding:0;margin:0;max-width:none;}

/* brand.css 의 공통 .map_label 이 display/line-height 를 덮어써서
   말풍선이 4.4px 납작해진다. 두 속성만 되돌린다. */
.ct-map .map_label{display:block;line-height:1.6;}

/* 카카오맵 SDK 가 지도 컨테이너에 인라인으로 touch-action:none 을 건다.
   그 값은 "이 요소가 모든 터치 제스처를 처리하니 페이지를 스크롤하지 말라"는 뜻이다.
   지도는 모바일에서 draggable:false 라 움직이지도 않는데 페이지 스크롤만 막혀,
   지도 위에 손가락을 올리고 쓸면 아무 일도 안 일어난다.
   지도가 화면 세로의 3분의 1을 차지하므로 CONTACT 에서 스크롤이 먹통처럼 느껴진다.
   세로 패닝만 페이지에 돌려준다. 인라인 스타일이라 !important 가 필요하다.
   draggable 을 끄는 조건(pointer:coarse)과 같은 범위로 한정해, 마우스 환경의
   지도 드래그는 건드리지 않는다. */
@media (pointer:coarse){
  .ct-map .kakao_map,
  .ct-map .kakao_map > div{touch-action:pan-y !important;}
}