@charset "utf-8";
/* ==========================================================================
   결하우징 — P2 블루프린트 / ★아키타입 E: 오버레이 레이어드
   모티프: 도면 시트 — 24px 그리드, 도면번호(A-0N), 치수 눈금, 각진 모서리(≤4px)
   액센트: 웜 그레이 + 오커 (#C08A2E) — 같은 P2 데모(cheum, 엔지니어 오렌지)와 구분

   ★ 구조 (아키타입 E) — main.stack > section.layer > .layer-card
     · 데스크톱(≥1024px): .layer{position:sticky;top:0} + .layer-card{margin-top:-14vh}
       다음 장이 앞장 위로 14vh 파고들며 "시공 층이 쌓이듯" 적층된다.
       밀려나는 앞장은 JS가 scale .94 + brightness .68 로 물러나고,
       transform-origin:50% 0% 이라 축소돼도 윗변이 남아 "쌓인 겹"이 보인다.
     · 모바일(<1024px): sticky·음수마진·z-index 전부 해제 → 일반 세로 흐름

   ⚠ scroll-behavior:smooth 전역 금지 (Lenis 충돌) — 모바일 미디어쿼리 안에서만
   ========================================================================== */

:root{
  --paper:#F4F1EC;          /* 웜 페이퍼 */
  --paper-2:#E7E2D9;        /* 한 단계 어두운 웜 그레이 */
  --paper-3:#D8D2C6;
  --ink:#1C1A17;            /* 웜 블랙 */
  --stone:#3A362F;          /* 다크 웜 그레이 (다크 챕터) */
  --stone-dk:#26231E;
  --ochre:#C08A2E;          /* ★ 액센트 */
  --ochre-dk:#9C6E1F;
  --ochre-lt:#DCAE55;

  --ink-72:rgba(28,26,23,.72);
  --ink-52:rgba(28,26,23,.52);
  --ink-34:rgba(28,26,23,.34);
  --line:rgba(28,26,23,.14);
  --line-2:rgba(28,26,23,.22);
  --line-lt:rgba(244,241,236,.18);

  --sans:'Pretendard Variable',Pretendard,-apple-system,'Noto Sans KR',sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Consolas,monospace;

  --wrap:1300px;
  --gut:clamp(20px,4vw,52px);
  --head-h:72px;
  --pad-y:clamp(90px,13vw,190px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--stone-dk);color:var(--ink);
  font-size:16px;line-height:1.7;word-break:keep-all;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--ochre);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);width:100%}
.wrap.narrow{max-width:900px}
.mono{font-family:var(--mono)}
.pc-br{display:none}
@media(min-width:768px){.pc-br{display:inline}}

/* 사진 통일 처리 (§03) — 전 이미지 동일 그레이딩 + 웜스톤 8% multiply */
.hero-media img,.sec-slab img,.ba-card img,.mat-fig img,.quote-fig img{
  filter:contrast(1.07) saturate(.86);
}
.hero-media,.sec-slab,.ba-card,.mat-fig,.quote-fig{position:relative}
.sec-slab::after,.ba-card::after,.mat-fig::after,.quote-fig::after{
  content:"";position:absolute;inset:0;background:var(--stone);
  opacity:.08;mix-blend-mode:multiply;pointer-events:none;
}

/* ==========================================================================
   ★ 아키타입 E — 오버레이 레이어드 스택
   ========================================================================== */
.stack{position:relative}
.layer{position:relative}

@media(min-width:1024px){
  .layer{position:sticky;top:0}
  /* 스택 순서 — 나중 레이어가 위로 (CSS로 확정, JS 의존 없음) */
  .layer-hero{z-index:1}
  .layer-manifesto{z-index:2}
  .layer-section{z-index:3}
  .layer-works{z-index:4}
  .layer-stage{z-index:5}
  .layer-material{z-index:6}
  .layer-quote{z-index:7}
  .layer-faq{z-index:8}
  .layer-contact{z-index:9}

  .layer-card{
    position:relative;min-height:100svh;
    transform-origin:50% 0%;
    will-change:transform,filter;
    overflow:hidden;
    /* ★ 음수 마진 — 다음 장이 앞장을 14vh 만큼 파고들며 겹친다 */
    margin-top:-14vh;
    border-top:1px solid rgba(28,26,23,.2);
    box-shadow:0 -2px 0 rgba(192,138,46,.35), 0 -40px 70px -34px rgba(0,0,0,.6);
  }
  .layer-hero .layer-card{margin-top:0;border-top:0}
  .layer.is-last .layer-card{box-shadow:0 -2px 0 rgba(192,138,46,.35)}

  /* 도면 시트 번호 — 겹친 윗변에 남아 "몇 겹째"인지 보이게 한다 */
  .layer-edge{
    position:absolute;top:16px;right:var(--gut);z-index:8;
    font-size:9.5px;letter-spacing:.3em;color:var(--ink-34);pointer-events:none;
  }
  .layer-edge.is-light{color:rgba(244,241,236,.42)}
}

/* 모바일·태블릿: 겹침 완전 해제 (함정 6 — 겹쳐 쌓인 층이 CSS로 보여야 한다) */
@media(max-width:1023px){
  .layer{position:relative;z-index:auto}
  .layer-card{
    position:relative;margin-top:0;
    transform:none !important;filter:none !important;
    box-shadow:none;overflow:visible;border-top:1px solid var(--line);
  }
  .layer-edge{display:none}
}

/* 레이어 배경 — 밝음/다크/컬러 교차로 리듬 (§00 리듬 규칙) */
.layer-hero .layer-card{background:var(--stone-dk)}
.layer-manifesto .layer-card{background:var(--paper)}
.layer-section .layer-card{background:var(--stone-dk);color:var(--paper)}   /* ★다크 챕터 */
.layer-works .layer-card{background:var(--paper-2)}
.layer-stage .layer-card{background:var(--stone);color:var(--paper)}        /* 다크 스트립 */
.layer-material .layer-card{background:var(--paper)}
.layer-quote .layer-card{background:var(--ochre);color:var(--ink)}          /* 컬러 챕터 */
.layer-faq .layer-card{background:var(--paper-2)}
.layer-contact .layer-card{background:var(--stone-dk);color:var(--paper)}

.layer-manifesto .layer-card,
.layer-works .layer-card,
.layer-stage .layer-card,
.layer-material .layer-card,
.layer-quote .layer-card,
.layer-faq .layer-card,
.layer-contact .layer-card{
  padding:var(--pad-y) 0;display:flex;flex-direction:column;justify-content:center;
}

/* 도면 그리드 — 페이퍼 레이어 공통 배경 모티프 */
.layer-manifesto .layer-card::before,
.layer-works .layer-card::before,
.layer-material .layer-card::before,
.layer-faq .layer-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(28,26,23,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,26,23,.05) 1px,transparent 1px);
  background-size:24px 24px;
}
.layer-manifesto .wrap,.layer-works .wrap,.layer-material .wrap,.layer-faq .wrap{position:relative;z-index:1}

/* ---------- 로딩 커튼 ---------- */
.curtain{position:fixed;inset:0;z-index:200;background:var(--stone-dk);display:grid;place-items:center}
.curtain-inner{text-align:center}
.curtain-dim{width:min(280px,58vw);height:26px;display:block;margin:0 auto 18px}
.curtain-txt{font-size:10px;letter-spacing:.4em;color:var(--ochre);opacity:0;padding-left:.4em}
html.loaded .curtain{pointer-events:none}

/* ---------- 타이포 ---------- */
.display{font-weight:800;font-size:clamp(40px,8vw,118px);line-height:1.04;letter-spacing:-.04em}
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--ochre);font-weight:600}
.layer-quote .label{color:var(--stone-dk)}
em{font-style:normal;color:var(--ochre);font-weight:700}
.layer-quote em{color:var(--stone-dk)}
.sec-lead{color:var(--ink-72);font-size:clamp(14.5px,1.6vw,17.5px);max-width:60ch;margin-top:20px}
.layer-stage .sec-lead,.layer-contact .sec-lead,.layer-section .sec-desc{color:rgba(244,241,236,.68)}
.sub-h{font-weight:800;font-size:clamp(26px,3.6vw,52px);line-height:1.14;letter-spacing:-.035em;margin-top:16px}
.mini-note{font-size:12px;color:var(--ink-52);margin-top:22px}
.dwg-cap{display:flex;justify-content:space-between;gap:12px;margin-top:10px;
  font-size:10px;letter-spacing:.22em;color:var(--ink-52);border-top:1px solid var(--line);padding-top:8px}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;border-radius:2px;font-size:14.5px;font-weight:700;
  transition:background .25s,color .25s,border-color .25s;will-change:transform;
}
.btn-primary{background:var(--ochre);color:#fff}
.btn-primary:hover{background:var(--ochre-dk)}
.layer-quote .btn-primary{background:var(--ink);color:var(--paper)}
.btn-line{border:1px solid rgba(244,241,236,.4);color:var(--paper)}
.btn-line:hover{border-color:var(--ochre-lt);color:var(--ochre-lt)}
.btn-kakao{background:#FEE500;color:#191600}
.btn-kakao:hover{background:#F2D900}
.btn-mini{padding:10px 18px;font-size:13px;background:var(--ochre);color:#fff;border-radius:2px}

/* ---------- 헤더 ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:90;
  border-bottom:1px solid transparent;transition:background .4s,border-color .4s,backdrop-filter .4s}
.site-head.is-stuck{background:rgba(244,241,236,.93);border-bottom-color:var(--line);
  backdrop-filter:saturate(1.25) blur(10px)}
.head-inner{display:flex;align-items:center;gap:24px;height:var(--head-h);
  padding:0 var(--gut);max-width:1800px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;color:var(--paper);transition:color .4s}
.site-head.is-stuck .logo{color:var(--ink)}
.logo-mark{color:var(--ochre);display:flex}
.logo-txt{font-weight:800;font-size:18px;letter-spacing:-.03em}
.gnb{display:none;gap:26px;margin-left:auto;font-size:13.5px;color:rgba(244,241,236,.8);transition:color .4s}
.site-head.is-stuck .gnb{color:var(--ink-72)}
@media(min-width:1040px){.gnb{display:flex}}
.gnb a{position:relative;padding:4px 0}
.gnb a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .3s}
.gnb a:hover::after{right:0}
@media(max-width:1039px){.btn-mini{margin-left:auto}}

/* ==========================================================================
   L01 히어로 — 풀블리드 + 2중 스크림 (좌우 분할 금지)
   ========================================================================== */
.layer-hero .layer-card{
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(36px,6vw,80px);
}
/* ⚠ overflow:hidden 필수 — 패럴랙스 scale(1.06)로 확대된 이미지가 밖으로 삐져나오면
   모바일에서 문서 폭이 늘어나 가로 스크롤이 생긴다(390→400px 실측).
   .layer-card 는 모바일·reduced-motion 분기에서 overflow:visible 이 되므로
   여기서 직접 잘라야 한다. */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 52%;will-change:transform}
.hero-scrim{position:absolute;inset:0;
  background:
    linear-gradient(94deg,rgba(24,22,18,.92) 0%,rgba(24,22,18,.68) 34%,rgba(24,22,18,.14) 64%,rgba(24,22,18,.36) 100%),
    linear-gradient(180deg,rgba(24,22,18,.58) 0%,rgba(24,22,18,.08) 40%,rgba(24,22,18,.86) 100%);
}
.hero-grid-ov{position:absolute;inset:0;opacity:.18;
  background-image:
    linear-gradient(rgba(244,241,236,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,241,236,.16) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 60%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 60%);
}
.hero-inner{position:relative;z-index:2;color:var(--paper);padding-bottom:clamp(22px,4vw,42px)}
.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);
  font-size:11px;letter-spacing:.24em;color:var(--ochre-lt);margin-bottom:26px}
.eyebrow .rule{display:block;width:54px;height:1px;background:var(--ochre)}
.hero-h1{color:var(--paper);max-width:14ch;text-shadow:0 2px 44px rgba(24,22,18,.44)}
.hero-lead{margin-top:26px;font-size:clamp(15px,1.9vw,19px);color:rgba(244,241,236,.86);max-width:52ch;line-height:1.75}
.hero-lead em{color:var(--ochre-lt)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
.hero-trust{margin-top:26px;font-size:11px;letter-spacing:.16em;color:rgba(244,241,236,.55)}
.hero-foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
  color:rgba(244,241,236,.52);font-size:10px;letter-spacing:.22em;
  border-top:1px solid rgba(244,241,236,.2);padding-top:15px}
.hero-scroll{display:flex;align-items:center;gap:10px}
.hero-scroll i{display:block;width:1px;height:26px;background:rgba(244,241,236,.3);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;left:0;top:0;width:1px;height:10px;background:var(--ochre);
  animation:scrollDot 1.8s cubic-bezier(.6,0,.2,1) infinite}
@keyframes scrollDot{0%{transform:translateY(-12px)}100%{transform:translateY(28px)}}

/* ==========================================================================
   L02 선언 — 초대형 타이포 (페이지당 1곳)
   ========================================================================== */
.statement-h{
  font-weight:800;font-size:clamp(38px,9.5vw,140px);line-height:1.0;letter-spacing:-.05em;
  margin-top:26px;
}
.statement-sub{margin-top:34px;max-width:62ch;font-size:clamp(15px,1.8vw,18.5px);color:var(--ink-72)}
.pain-list{list-style:none;display:grid;gap:1px;margin-top:clamp(52px,7vw,88px);
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:900px){.pain-list{grid-template-columns:repeat(3,1fr)}}
.pain{background:var(--paper);padding:clamp(26px,3.2vw,40px) clamp(20px,2.4vw,32px)}
.pain-no{display:block;font-size:11px;letter-spacing:.26em;color:var(--ochre);margin-bottom:16px}
.pain h3{font-size:clamp(17px,1.9vw,21px);font-weight:800;letter-spacing:-.028em;line-height:1.3}
.pain p{margin-top:12px;font-size:14.5px;color:var(--ink-72);line-height:1.72}

/* ==========================================================================
   ★ L03 시그니처 — 시공 레이어 단면
   .sec-stage 가 핀 트리거이자 핀 대상 (함정: 트리거=핀 대상 동일 요소)
   ========================================================================== */
.layer-section .layer-card{padding:0;background:var(--stone-dk)}
.sec-stage{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:clamp(80px,9vw,104px) 0}
.sec-inner{width:100%}
.sec-head{max-width:44ch}
.sec-title{font-weight:800;font-size:clamp(30px,5vw,72px);line-height:1.08;letter-spacing:-.042em;
  margin-top:16px;color:var(--paper)}
.sec-desc{margin-top:16px;font-size:clamp(14px,1.5vw,16.5px)}

.sec-build{display:grid;gap:clamp(28px,4vw,56px);margin-top:clamp(28px,3.4vw,44px);align-items:center}
@media(min-width:1024px){.sec-build{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}

/* --- 적층 무대: 5장의 슬래브가 아래에서 위로 겹쳐 쌓인다 --- */
.sec-slabs{position:relative;aspect-ratio:5/4;max-height:min(52vh,440px);margin:0 auto;width:100%}
@media(min-width:1024px){.sec-slabs{aspect-ratio:auto;height:clamp(340px,44vh,460px);max-height:none}}
.sec-slab{
  position:absolute;left:0;right:0;margin:0;
  border:1px solid rgba(244,241,236,.16);
  box-shadow:0 -14px 34px -18px rgba(0,0,0,.8);
  overflow:hidden;
}
.sec-slab img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/6}
/* 기본(정적/폴백) 배치 — JS 없이도 5겹이 계단처럼 보인다 */
.sec-slab[data-i="0"]{bottom:0;   z-index:1}
.sec-slab[data-i="1"]{bottom:15%; z-index:2}
.sec-slab[data-i="2"]{bottom:30%; z-index:3}
.sec-slab[data-i="3"]{bottom:45%; z-index:4}
.sec-slab[data-i="4"]{bottom:60%; z-index:5}
.slab-tag{
  position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:10px;
  padding:7px 12px;background:rgba(24,22,18,.82);color:var(--paper);
  font-size:10px;letter-spacing:.16em;backdrop-filter:blur(4px);
}
.slab-tag b{color:var(--ochre-lt);font-weight:600}
.sec-slab.is-on{border-color:rgba(192,138,46,.7)}
.sec-slab.is-on .slab-tag{background:var(--ochre);color:#fff}
.sec-slab.is-on .slab-tag b{color:rgba(255,255,255,.82)}

/* 두께 게이지 — 층이 쌓일수록 오커 선이 올라온다 */
.sec-gauge{position:absolute;right:-34px;top:0;bottom:0;width:34px;height:100%;display:none}
@media(min-width:1024px){.sec-gauge{display:block}}

/* --- 층 사양 패널 --- */
.sec-specs{position:relative;min-height:clamp(240px,26vw,300px)}
.sec-spec{border-left:2px solid rgba(192,138,46,.5);padding-left:clamp(18px,2vw,26px)}
@media(min-width:1024px){
  .sec-spec{position:absolute;inset:0;opacity:0;visibility:hidden;transition:none}
  .sec-spec.is-on{opacity:1;visibility:visible}
}
.spec-no{font-size:11px;letter-spacing:.28em;color:var(--ochre)}
.spec-h{font-size:clamp(21px,2.6vw,32px);font-weight:800;letter-spacing:-.032em;margin-top:12px;color:var(--paper)}
.spec-txt{margin-top:14px;font-size:15px;line-height:1.74;color:rgba(244,241,236,.72);max-width:38ch}
.spec-txt em{color:var(--ochre-lt)}
.spec-meta{margin-top:22px;display:grid;gap:8px;font-size:11px;letter-spacing:.08em}
.spec-meta>div{display:flex;gap:14px;border-top:1px solid rgba(244,241,236,.14);padding-top:8px}
.spec-meta dt{color:rgba(244,241,236,.44);min-width:6em}
.spec-meta dd{color:rgba(244,241,236,.78)}

.sec-foot{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap;
  margin-top:clamp(30px,4vw,52px);border-top:1px solid rgba(244,241,236,.16);padding-top:16px}
.sec-bar{flex:1 1 160px;height:2px;background:rgba(244,241,236,.18);position:relative;min-width:120px}
.sec-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ochre);display:block}
.sec-idx{font-size:10.5px;letter-spacing:.24em;color:rgba(244,241,236,.66)}
.sec-idx b{color:var(--ochre-lt);font-weight:600}
.sec-hint{font-size:10px;letter-spacing:.2em;color:rgba(244,241,236,.4)}

/* ==========================================================================
   L04 비포&애프터 — Flip 자리바꿈
   ========================================================================== */
.ba{display:grid;gap:clamp(14px,1.8vw,24px);margin-top:clamp(30px,4vw,50px);position:relative}
@media(min-width:900px){.ba{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:start}}
.ba-slot,.ba-side{min-height:1px}
.ba-card{margin:0;background:var(--stone-dk);overflow:hidden;border:1px solid var(--line-2);width:100%}
.ba-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.ba-side .ba-card img{aspect-ratio:3/2}
.ba-card figcaption{display:flex;align-items:center;gap:12px;padding:11px 14px;
  border-top:1px solid var(--line);background:var(--paper);position:relative;z-index:2}
.ba-tag{font-size:10px;letter-spacing:.24em;color:#fff;background:var(--ink);padding:4px 9px}
.ba-card[data-kind="after"] .ba-tag{background:var(--ochre)}
.ba-cap{font-size:12.5px;color:var(--ink-72)}
.ba-side .ba-card{opacity:.9}
.ba-side .ba-card:hover{opacity:1}

.ba-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.ba-btn{padding:11px 20px;border:1px solid var(--line-2);font-size:13.5px;font-weight:700;
  border-radius:2px;transition:background .25s,color .25s,border-color .25s}
.ba-btn:hover{border-color:var(--ochre)}
.ba-btn.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ba-note{margin-left:auto;font-size:10.5px;letter-spacing:.2em;color:var(--ink-52)}

.ba-facts{margin-top:clamp(30px,4vw,52px);display:grid;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:760px){.ba-facts{grid-template-columns:repeat(4,1fr)}}
.ba-facts>div{background:var(--paper-2);padding:18px 20px}
.ba-facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--ochre-dk)}
.ba-facts dd{margin-top:8px;font-size:13.5px;color:var(--ink-72);line-height:1.6}
.ba-facts dd.note{font-size:11px;color:var(--ink-52);letter-spacing:.02em}

/* ==========================================================================
   L05 공정 단계 — 다크 스트립
   ========================================================================== */
.layer-stage .sub-h{color:var(--paper)}
.stages{list-style:none;counter-reset:st;margin-top:clamp(36px,5vw,62px);
  display:grid;gap:1px;background:rgba(244,241,236,.14);
  border-top:1px solid rgba(244,241,236,.14);border-bottom:1px solid rgba(244,241,236,.14)}
@media(min-width:820px){.stages{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.stages{grid-template-columns:repeat(3,1fr)}}
.stage{background:var(--stone);padding:clamp(24px,3vw,36px) clamp(20px,2.4vw,30px);
  display:flex;gap:16px;align-items:flex-start}
.stage-no{font-size:11px;letter-spacing:.2em;color:var(--ochre-lt);padding-top:5px;flex:0 0 auto}
.stage-body h3{font-size:clamp(17px,1.9vw,21px);font-weight:800;letter-spacing:-.028em;color:var(--paper)}
.stage-body p{margin-top:11px;font-size:14px;color:rgba(244,241,236,.68);line-height:1.72}
.stage-out{margin-top:14px !important;font-size:10.5px !important;letter-spacing:.12em;
  color:rgba(192,138,46,.9) !important;border-top:1px solid rgba(244,241,236,.14);padding-top:10px}

/* ==========================================================================
   L06 자재 라인업 — Flip 필터 재배치
   ========================================================================== */
/* overflow:hidden — 패럴랙스 이동분이 밖으로 나가지 않게 (가로 오버플로 방지) */
.mat-fig{margin-top:clamp(30px,4vw,52px);max-width:520px;border:1px solid var(--line-2);overflow:hidden}
.mat-fig img{width:100%;aspect-ratio:1/1;object-fit:cover}
.mat-fig .dwg-cap{padding:8px 12px;margin-top:0;border-top:1px solid var(--line);background:var(--paper)}
/* 데스크톱: 샘플 컷을 헤드 오른쪽에 띄운다.
   ⚠ 카드 그리드를 덮지 않도록 높이를 헤드+필터 영역 안으로 제한한다 */
@media(min-width:900px){
  .mat-fig{position:absolute;right:0;top:0;width:min(30%,340px);margin-top:0;z-index:2}
  .mat-fig img{aspect-ratio:4/3}
  .layer-material .wrap{position:relative}
  .layer-material .sec-lead,.layer-material .sub-h{max-width:min(62%,660px)}
}

.mat-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:clamp(32px,4vw,54px);
  border-bottom:1px solid var(--line);padding-bottom:16px}
.mat-btn{padding:9px 17px;border:1px solid var(--line-2);font-size:13px;font-weight:700;border-radius:2px;
  transition:background .22s,color .22s,border-color .22s}
.mat-btn:hover{border-color:var(--ochre)}
.mat-btn.is-on{background:var(--ochre);color:#fff;border-color:var(--ochre)}
.mat-count{margin-left:auto;font-size:10.5px;letter-spacing:.24em;color:var(--ink-52)}
.mat-count b{color:var(--ochre-dk);font-weight:600}

.mat-grid{list-style:none;display:grid;gap:clamp(12px,1.5vw,18px);margin-top:clamp(22px,3vw,34px)}
@media(min-width:640px){.mat-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.mat-grid{grid-template-columns:repeat(4,1fr)}}
.mat-card{background:var(--paper-2);border:1px solid var(--line);padding:22px 20px 20px;
  border-top:2px solid var(--ochre)}
/* ⚠ mat-card 는 opacity:0 으로 시작시키지 않는다 — Flip 대상이라 숨기면 필터 후 안 보일 수 있다 */
.mat-card.is-hidden{display:none}
.mat-no{font-size:10px;letter-spacing:.24em;color:var(--ochre-dk)}
.mat-card h3{margin-top:10px;font-size:17.5px;font-weight:800;letter-spacing:-.028em}
.mat-card p{margin-top:9px;font-size:13.5px;color:var(--ink-72);line-height:1.68}
.mat-tag{margin-top:14px !important;font-family:var(--mono);font-size:10px !important;
  letter-spacing:.14em;color:var(--ink-52) !important;
  border-top:1px dashed var(--line-2);padding-top:9px}

/* ==========================================================================
   L07 견적 흐름 — 컬러(오커) 챕터
   ========================================================================== */
.layer-quote .sec-lead{color:rgba(28,26,23,.76)}
.qsim{display:grid;gap:clamp(18px,2.4vw,32px);margin-top:clamp(34px,4.5vw,56px)}
@media(min-width:900px){.qsim{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}}
.qsim-lbl{font-size:10.5px;letter-spacing:.24em;color:rgba(28,26,23,.62);margin-bottom:12px}
.qsim-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.qchip{padding:11px 18px;border:1px solid rgba(28,26,23,.3);font-size:13.5px;font-weight:700;
  border-radius:2px;transition:background .22s,color .22s,border-color .22s}
.qchip:hover{border-color:var(--ink)}
.qchip.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.qsim-out{background:var(--paper);border:1px dashed rgba(28,26,23,.34);padding:clamp(22px,3vw,34px)}
.qsim-list{list-style:none;display:grid;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:4px}
.qsim-list li{background:var(--paper);padding:11px 14px;font-size:14px;position:relative;padding-left:34px}
.qsim-list li::before{content:"";position:absolute;left:14px;top:50%;width:8px;height:8px;
  margin-top:-4px;background:var(--ochre)}
.qsim-note{margin-top:18px;font-size:13.5px;color:var(--ink-72);line-height:1.7}
.qsim-fine{margin-top:14px;font-size:10.5px;letter-spacing:.06em;color:var(--ink-52);line-height:1.6}

.quote-fig{margin-top:clamp(28px,3.4vw,44px);max-width:760px;border:1px solid rgba(28,26,23,.3);overflow:hidden}
.quote-fig img{width:100%;aspect-ratio:16/9;object-fit:cover}
/* 데스크톱: 도면 컷을 좌측 칩 열 아래로 넣어 여백을 메운다 */
@media(min-width:900px){
  .qsim-pick{display:flex;flex-direction:column}
  .quote-fig{grid-column:1;grid-row:2;margin-top:0;max-width:none}
  .qsim{grid-template-rows:auto 1fr}
  .qsim-out{grid-column:2;grid-row:1/span 2}
}
.quote-fig .dwg-cap{padding:9px 13px;margin-top:0;background:var(--paper);
  border-top:1px solid var(--line);color:var(--ink-52)}

/* ==========================================================================
   L08 FAQ
   ========================================================================== */
.acc{margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--line-2)}
.qa{border-bottom:1px solid var(--line-2)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:20px 0;font-weight:700;font-size:clamp(15px,1.8vw,18px);letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";margin-left:auto;flex:0 0 auto;width:13px;height:13px;
  border-right:1.5px solid var(--ochre);border-bottom:1.5px solid var(--ochre);
  transform:rotate(45deg) translateY(-3px);transition:transform .3s}
.qa[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.qa-body{padding:0 0 22px}
.qa-body p{font-size:14.5px;color:var(--ink-72);line-height:1.78;max-width:66ch}

/* ==========================================================================
   L09 상담 폼 · 오시는 길
   ========================================================================== */
.contact-h{font-weight:800;font-size:clamp(34px,6vw,88px);line-height:1.06;letter-spacing:-.045em;
  margin-top:20px;color:var(--paper)}
.cform{display:grid;gap:14px;margin-top:clamp(34px,4.5vw,56px);max-width:820px}
@media(min-width:700px){.cform{grid-template-columns:repeat(2,1fr)}}
.cf-field{display:flex;flex-direction:column;gap:8px}
.cf-wide{grid-column:1/-1}
.cf-field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:rgba(244,241,236,.55)}
.cf-field input,.cf-field select,.cf-field textarea{
  background:rgba(244,241,236,.05);border:1px solid rgba(244,241,236,.2);
  padding:14px 15px;border-radius:2px;font-size:14.5px;color:var(--paper);
  transition:border-color .25s,background .25s;
}
.cf-field textarea{resize:vertical;line-height:1.7}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:rgba(244,241,236,.34)}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{
  outline:none;border-color:var(--ochre);background:rgba(244,241,236,.08)}
.cf-field select option{color:var(--ink)}
.cf-submit{grid-column:1/-1;justify-self:start;margin-top:6px}
.cf-done{grid-column:1/-1;font-size:13.5px;color:var(--ochre-lt);
  border-left:2px solid var(--ochre);padding-left:14px}

.place{margin-top:clamp(52px,7vw,90px);border-top:1px solid rgba(244,241,236,.16);padding-top:clamp(30px,4vw,48px)}
/* 데스크톱: 폼(좌) + 오시는 길(우) 2단으로 묶어 하단 여백을 없앤다 */
@media(min-width:1000px){
  .layer-contact .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:clamp(40px,5vw,80px);align-items:start}
  .layer-contact .label,.contact-h,.layer-contact .sec-lead{grid-column:1}
  .cform{grid-column:1;max-width:none}
  .place{grid-column:2;grid-row:1/span 4;margin-top:0;align-self:end;
    border-top:0;border-left:1px solid rgba(244,241,236,.16);
    padding-top:0;padding-left:clamp(28px,3.4vw,48px)}
}
.place-body h3{color:var(--paper);margin-top:14px}
.place address{font-style:normal;margin-top:18px;font-size:14.5px;color:rgba(244,241,236,.72);line-height:1.8}
.place-list{list-style:none;margin-top:22px;display:grid;gap:9px}
.place-list li{font-size:13.5px;color:rgba(244,241,236,.66);padding-left:18px;position:relative}
.place-list li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--ochre)}
.place-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

/* ---------- 푸터 ---------- */
.site-foot{background:var(--ink);color:rgba(244,241,236,.62);
  padding:clamp(52px,7vw,84px) 0 calc(clamp(52px,7vw,84px) + env(safe-area-inset-bottom));position:relative;z-index:20}
.foot-inner{display:grid;gap:26px}
@media(min-width:900px){.foot-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr)}}
.foot-brand .logo-txt{color:var(--paper);display:block}
.foot-brand .mono{font-size:10px;letter-spacing:.24em;color:var(--ochre);margin-top:10px}
.foot-info p{font-size:12.5px;line-height:1.8}
.foot-note p{font-size:11.5px;line-height:1.75;color:rgba(244,241,236,.46)}
.foot-note .demo-badge{color:rgba(244,241,236,.72);margin-bottom:8px}
.foot-note .demo-badge b{color:var(--ochre-lt)}
.made-by{margin-top:14px;font-size:9.5px !important;letter-spacing:.2em}

/* ---------- 모바일 고정 바 ---------- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  padding-bottom:env(safe-area-inset-bottom);background:var(--ink);
  border-top:1px solid rgba(244,241,236,.16)}
.mobile-bar a{flex:1;text-align:center;padding:15px 8px;font-size:14px;font-weight:700}
.mb-call{color:var(--paper)}
.mb-kakao{background:var(--ochre);color:#fff}
@media(max-width:767px){
  .mobile-bar{display:flex}
  body{padding-bottom:0}
  .site-foot{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* ==========================================================================
   초기 숨김 — 반드시 html.js-anim 하위에만 (GSAP 로드 실패 시 전부 표시)
   ========================================================================== */
html.js-anim .fade-up{opacity:0}
html.js-anim .pain,
html.js-anim .stage,
html.js-anim .qa,
html.js-anim .place-list li,
html.js-anim .cf-field,
html.js-anim .cf-submit,
html.js-anim .ba-facts>div{opacity:0}
/* .mat-card 와 .sec-slab 은 숨기지 않는다 (Flip·핀 의존 → 함정 대응) */

/* ==========================================================================
   반응형 — 모바일 (아키타입 E 해제 후 콘텐츠 복구)
   ========================================================================== */
@media(max-width:1023px){
  html{scroll-behavior:smooth}   /* Lenis는 데스크톱 전용이므로 여기서만 허용 */

  .layer-manifesto .layer-card,
  .layer-works .layer-card,
  .layer-stage .layer-card,
  .layer-material .layer-card,
  .layer-quote .layer-card,
  .layer-faq .layer-card,
  .layer-contact .layer-card{
    padding:clamp(80px,13vw,120px) 0;display:block;min-height:0;
  }
  .layer-hero .layer-card{min-height:100svh;display:flex}
  .layer-section .layer-card{padding:0;min-height:0}

  .sec-foot{margin-top:32px}
  .sec-hint{display:none}
  .ba-card{opacity:1 !important}
}

/* ★★ 핀 해제 시 시그니처 복구 — 모바일과 reduced-motion이 공유하는 규칙.
   .sec-slab / .sec-spec 는 데스크톱에서 absolute + opacity:0 으로 겹쳐 있다.
   핀이 사라지는 분기에서 이걸 되돌리지 않으면 5겹과 5개 사양이 영영 안 보인다.
   → 아키타입 E의 최대 함정. 두 분기 모두에서 반드시 적용한다. */
@media(max-width:1023px),(prefers-reduced-motion:reduce){
  .sec-stage{min-height:0;display:block;padding:clamp(80px,13vw,120px) 0}
  .sec-build{display:block;margin-top:30px}
  .sec-slabs{position:static;aspect-ratio:auto;max-height:none;height:auto;
    display:grid;gap:14px;margin-bottom:34px}
  .sec-slab{position:static;bottom:auto;box-shadow:none;
    border:1px solid rgba(244,241,236,.18)}
  .sec-slab img{aspect-ratio:16/9}
  .sec-gauge{display:none}
  .sec-specs{position:static;min-height:0;display:grid;gap:26px}
  .sec-spec{position:static;opacity:1;visibility:visible;inset:auto}

  /* 비포&애프터 — 자리바꿈 없이 두 장을 세로로 (전환 버튼 불필요) */
  .ba{display:grid;grid-template-columns:1fr}
  .ba-slot,.ba-side{display:contents}
  .ba-ctl{display:none}
}

@media(max-width:767px){
  .hero-h1{max-width:none}
  .pain-list{grid-template-columns:1fr}
  .stages{grid-template-columns:1fr}
  .ba-facts{grid-template-columns:1fr}
  .ba-note{margin-left:0}
  .mat-count{margin-left:0;width:100%}
  .sec-foot{gap:12px}
  .sec-bar{flex-basis:100%}
}

/* ---------- 접근성 ---------- */
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
.layer-hero :focus-visible,.layer-section :focus-visible,
.layer-stage :focus-visible,.layer-contact :focus-visible{outline-color:var(--ochre-lt)}
.layer-quote :focus-visible{outline-color:var(--ink)}

/* ---------- reduced-motion — 모션 제거, 콘텐츠는 전부 살린다 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  html.js-anim .fade-up,html.js-anim .pain,html.js-anim .stage,html.js-anim .qa,
  html.js-anim .place-list li,html.js-anim .cf-field,html.js-anim .cf-submit,
  html.js-anim .ba-facts>div{opacity:1 !important}
  .curtain{display:none}
  .hero-scroll i::after{animation:none}

  /* 레이어드 해제 — 일반 흐름으로 */
  .layer{position:relative !important;z-index:auto !important}
  .layer-card{transform:none !important;filter:none !important;box-shadow:none !important;
    margin-top:0 !important;min-height:0 !important;overflow:visible !important}
  .layer-hero .layer-card{min-height:100svh !important}
  .layer-edge{display:none}
  /* 시그니처 정적 노출(5겹 세로 나열)은 위 공유 블록이 처리한다.
     여기서는 강제 우선순위만 덧붙인다 */
  .sec-stage{min-height:0 !important}
  .sec-spec{opacity:1 !important;visibility:visible !important}
  .ba-card{opacity:1 !important}
}