/* 벨비디자인 홈페이지 — 하나의 체계(Taste 원칙): 한 가지 버튼, 한 가지 카드, 같은 좌우 선 */
*{box-sizing:border-box}
html,body{margin:0}
:root{
  --bg:#F4F1EB;          /* 따뜻한 미색(완성 장면과 같은 색) */
  --bg-alt:#FBFAF8;      /* 흰 미술관 벽 */
  --bg-dark:#161514;     /* 공사 중 밤 */
  --ink:#1E1E1E;
  --muted:#4E4A44;
  --line:rgba(30,30,30,.13);
  --gold:#A88647;        /* 선·장식 */
  --gold-text:#7E6230;   /* 작은 골드 글자(미색 바탕 대비 약 5:1) */
  --gold-fill:#C9AD78;   /* 주 버튼 바탕(위 글자는 ink) */
  --on-dark:#F1ECE3;
  --nav:72px;
  --gut:80px;
  --padt:120px; --padb:96px;
  --bar:0px;
  --r:2px;
  --f-display:'Cormorant Garamond','Noto Serif KR',serif;
  --f-kr-display:'Noto Serif KR','Cormorant Garamond',serif;
  --f-body:'Noto Sans KR',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:1023px){ :root{ --gut:48px; --padt:104px; --padb:80px; } }
@media (max-width:639px){ :root{ --gut:24px; --nav:56px; --padt:88px; --padb:56px; --bar:calc(64px + env(safe-area-inset-bottom)); } }

html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }
body{ background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased; padding-bottom:var(--bar); word-break:keep-all; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.wrap{ width:min(100% - 2*var(--gut), 1280px); margin-inline:auto; position:relative; z-index:1; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- 머리줄 ---------- */
.skip{ position:absolute; left:8px; top:8px; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.skip:focus{ width:auto; height:auto; clip-path:none; background:var(--ink); color:#fff; padding:8px 12px; z-index:30; }
header.nav{ position:fixed; inset:0 0 auto 0; height:var(--nav); background:var(--bg-alt); border-bottom:1px solid var(--line); z-index:20; }
header.nav .wrap{ height:100%; display:flex; align-items:center; gap:32px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; }
.brand svg{ height:34px; width:auto; }
.brand--mark svg{ height:40px; transition:opacity .2s; } .brand--mark:hover svg{ opacity:.7; }
.brand b{ font-family:var(--f-display); font-weight:500; font-size:22px; letter-spacing:.14em; }
.brand small{ display:block; font-size:11px; letter-spacing:.08em; color:var(--muted); margin-top:-4px; }
.nav__links{ display:flex; gap:28px; margin-left:auto; }
.nav__links a{ font-size:15px; font-weight:500; text-decoration:none; white-space:nowrap; position:relative; padding:6px 0; }
.nav__links a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav__tel{ font-family:var(--f-body); font-weight:500; font-size:15px; text-decoration:none; letter-spacing:.02em; white-space:nowrap; }
header.nav .nav__menu{ display:none; }
@media (max-width:1180px){ .nav__links{ gap:20px; } .nav__tel{ display:none; } }
@media (max-width:1023px){
  .nav__links{ display:none; }
  header.nav .nav__menu{ display:inline-flex; margin-left:auto; }
}
@media (max-width:639px){ header.nav .btn--primary{ display:none; } .brand svg{ height:28px; } .brand b{ font-size:19px; } }

/* 휴대폰 전체 메뉴 */
.sheet{ position:fixed; inset:var(--nav) 0 0 0; background:var(--bg-alt); z-index:19; padding:16px var(--gut) calc(24px + var(--bar)); display:none; overflow:auto; }
.sheet.open{ display:block; }
.sheet a{ display:flex; align-items:center; min-height:56px; border-bottom:1px solid var(--line); font-size:18px; text-decoration:none; }
.sheet .sheet__foot{ margin-top:24px; font-size:15px; color:var(--muted); line-height:1.8; }

/* ---------- 버튼(한 가지 모양) ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 24px; border-radius:var(--r);
  font:500 16px/1 var(--f-body); text-decoration:none; cursor:pointer; border:1px solid var(--ink); background:transparent; color:var(--ink);
  transition:transform .18s var(--ease), background .2s, color .2s, border-color .2s; white-space:nowrap; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--primary{ background:var(--gold-fill); border-color:var(--gold-fill); color:var(--ink); }
.btn--primary:hover{ background:#BFA16A; border-color:#BFA16A; }
.btn--secondary:hover{ background:var(--ink); color:var(--bg-alt); }
.on-dark .btn--secondary{ border-color:var(--on-dark); color:var(--on-dark); }
.on-dark .btn--secondary:hover{ background:var(--on-dark); color:var(--ink); }
.btn svg{ width:18px; height:18px; flex:none; }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:639px){ .btn-row .btn{ flex:1 1 100%; } }
.link{ text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .25s var(--ease); padding-bottom:2px; }
.link:hover{ background-size:100% 1px; }

/* ---------- 구역 ---------- */
main > section{ padding:var(--padt) 0 var(--padb); }
.ground-alt{ background:var(--bg-alt); }
.ground-dark{ background:var(--bg-dark); color:var(--on-dark); }
.ground-dark .muted,.ground-dark .lead{ color:#B9B2A6; }
.eyebrow{ font-size:14px; font-weight:500; letter-spacing:.02em; color:var(--gold-text); margin:0 0 14px; }
.eyebrow .en{ font-family:'Cormorant Garamond',serif; font-size:17px; letter-spacing:.06em; margin-right:10px; color:var(--ink); }
.ground-dark .eyebrow,.closing .eyebrow{ color:#D2B278; } .closing .eyebrow .en{ color:var(--on-dark); }
.eyebrow::after{ content:''; display:block; width:28px; height:1px; background:var(--gold); margin-top:12px; }
h1,h2,h3{ font-weight:400; margin:0; }
.h2{ font-family:var(--f-kr-display); font-size:clamp(28px, 2.2vw + 14px, 46px); line-height:1.22; letter-spacing:-.01em; max-width:24ch; text-wrap:balance; }
.lead{ font-size:17px; color:var(--muted); margin:16px 0 0; max-width:56ch; line-height:1.75; }
.muted{ color:var(--muted); }
.head{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:end; margin-bottom:48px; }
.head > div{ grid-column:1 / span 7; }
.head > .btn,.head > .head__side{ grid-column:9 / span 4; justify-self:end; }
@media (max-width:1023px){ .head{ grid-template-columns:1fr; gap:20px; margin-bottom:32px; } .head > div,.head > .btn,.head > .head__side{ grid-column:auto; justify-self:start; } }

/* ---------- 사진 카드(한 가지 카드) ---------- */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px; }
.card{ display:block; text-decoration:none; color:inherit; }
.card__ph{ overflow:hidden; background:#E6E2DA; aspect-ratio:4/3; }
.card__ph img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card:hover .card__ph img{ transform:scale(1.025); }
.card__meta{ display:flex; gap:10px; align-items:baseline; margin-top:14px; }
.card__kind{ font-size:13px; font-weight:500; color:var(--gold-text); flex:none; }
.card__title{ font-size:17px; font-weight:500; }
.card__title .arrow{ display:inline-block; transition:transform .2s var(--ease); margin-left:4px; }
.card:hover .card__title .arrow{ transform:translateX(4px); }
.cards-4 > .card{ grid-column:span 3; }
.cards-3 > *{ grid-column:span 4; }
@media (max-width:1023px){ .cards-4 > .card{ grid-column:span 6; } .cards-3 > *{ grid-column:span 12; } }
@media (max-width:639px){ .grid{ gap:24px 12px; } .cards-4 > .card{ grid-column:span 6; } .cards-4 .card__meta{ flex-direction:column; gap:2px; margin-top:10px; } .cards-4 .card__title{ font-size:15px; line-height:1.4; } }

/* ---------- 3D 첫 구역 ---------- */
#intro{ position:relative; height:520svh; padding:0; background:#F5F5F3; }
#intro-stage{ position:sticky; top:0; height:100svh; overflow:hidden; }
#intro-stage canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; }
#intro-ui{ --ink:#1E1E1E; --gold:#A88647; --bgrgb:245,245,243; position:absolute; inset:0; pointer-events:none; }
#intro-ui .scrim{ position:absolute; left:0; right:0; bottom:0; height:58%;
  background:linear-gradient(to top, rgba(var(--bgrgb),.96) 0%, rgba(var(--bgrgb),.86) 30%, rgba(var(--bgrgb),.45) 62%, rgba(var(--bgrgb),0) 100%); }
#intro-ui .frame{ position:absolute; inset:var(--nav) 0 0 0; padding:24px 0 40px; display:flex; flex-direction:column; justify-content:space-between; }
#intro-ui .wrap{ width:min(100% - 2*var(--gut), 1280px); }
.intro__top{ display:flex; justify-content:flex-end; gap:10px; pointer-events:auto; }
.chip{ font:500 13px/1 var(--f-body); color:var(--ink); background:rgba(var(--bgrgb),.6); border:1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  padding:10px 14px; border-radius:999px; cursor:pointer; text-decoration:none; transition:transform .18s var(--ease); }
.chip:hover{ transform:translateY(-1px); }
.intro__bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
#stage{ max-width:520px; color:var(--ink); transition:opacity .4s, transform .4s; pointer-events:auto; }
#stage.swap{ opacity:0; transform:translateY(8px); }
#stage .no{ font-size:12px; letter-spacing:.2em; color:var(--gold); font-weight:500; }
#stage h2{ margin:8px 0 0; font-family:var(--f-display); font-weight:500; font-size:clamp(34px, 3.6vw + 8px, 60px); line-height:1.08; }
#stage p{ margin:10px 0 0; font-size:15px; color:color-mix(in srgb, var(--ink) 82%, transparent); line-height:1.7; }
#stage .contact{ margin-top:18px; }
#stage .contact .tel{ font-size:26px; font-weight:500; letter-spacing:.05em; text-decoration:none; color:var(--ink); }
#stage .contact .row{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin-top:14px; }
.intro__side{ text-align:right; }
#dots{ display:flex; gap:8px; justify-content:flex-end; }
#dots i{ width:6px; height:6px; border-radius:50%; background:var(--ink); opacity:.25; transition:all .4s; }
#dots i.on{ background:var(--gold); opacity:1; width:22px; border-radius:3px; }
#sim{ margin-top:10px; font-size:12px; letter-spacing:.06em; color:color-mix(in srgb, var(--ink) 60%, transparent); }
.intro__fallback{ display:none; }
#intro.intro--fallback{ height:100svh; }
#intro.intro--fallback .intro__fallback{ display:block; position:absolute; inset:0; }
#intro.intro--fallback .intro__fallback img{ width:100%; height:100%; object-fit:cover; }

@media (max-width:639px){
  #intro{ height:400svh; }
  #intro-ui .frame{ padding:16px 0 calc(20px + var(--bar)); }
  .intro__bottom{ flex-direction:column; align-items:flex-start; }
  .intro__side{ text-align:left; } #dots{ justify-content:flex-start; }
  #stage .btn-row .btn{ flex:1 1 100%; }
  #stage .contact .row{ display:none; }
  .chip{ font-size:14px; padding:12px 16px; }
}

/* ---------- 일하는 방식 ---------- */
.way{ display:block; }
.way .card__ph{ aspect-ratio:4/5; }
.way h3{ font-size:20px; font-weight:500; margin:20px 0 0; line-height:1.4; }
.way p{ margin:8px 0 0; color:var(--muted); font-size:16px; }
@media (max-width:1023px){ .way{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; } .way .card__ph{ aspect-ratio:4/3; } .way h3{ margin-top:0; } }
@media (max-width:639px){ .way{ grid-template-columns:1fr; gap:0; } .way h3{ margin-top:16px; } }

/* ---------- 공사 종류 ---------- */
.kind{ display:block; text-decoration:none; color:inherit; }
.kind .card__ph{ aspect-ratio:4/5; }
.kind h3{ font-family:var(--f-kr-display); font-size:26px; line-height:1.3; margin-top:20px; }
.kind p{ margin:6px 0 0; font-size:16px; color:var(--muted); }
.kind .go{ display:inline-block; margin-top:12px; font-size:15px; font-weight:500; }
.kind .go .arrow{ display:inline-block; transition:transform .2s var(--ease); }
.kind:hover .go .arrow{ transform:translateX(4px); }
.kind:hover .card__ph img{ transform:scale(1.025); }
@media (max-width:1023px){ .kind .card__ph{ aspect-ratio:16/10; } }

/* ---------- 상담 순서 ---------- */
.steps{ list-style:none; margin:0; padding:0; grid-column:1 / span 7; counter-reset:s; }
.steps li{ display:grid; grid-template-columns:56px 1fr; gap:16px; padding:22px 0; border-bottom:1px solid var(--line); }
.steps li:first-child{ border-top:1px solid var(--line); }
.steps .n{ font-family:var(--f-display); font-size:30px; line-height:1; color:var(--gold); }
.steps b{ display:block; font-size:18px; font-weight:500; }
.steps span{ display:block; color:var(--muted); margin-top:4px; }
.steps-ph{ grid-column:9 / span 4; }
.steps-ph .card__ph{ aspect-ratio:3/4; }
@media (max-width:1023px){ .steps{ grid-column:1 / -1; } .steps-ph{ display:none; } }

/* ---------- 상담·오시는 길 ---------- */
.ways3{ grid-column:1 / span 6; display:grid; gap:12px; }
.way-btn{ display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:16px; padding:20px 22px; border:1px solid var(--line); background:var(--bg-alt);
  text-decoration:none; transition:transform .18s var(--ease), border-color .2s; }
.way-btn:hover{ transform:translateY(-2px); border-color:var(--ink); }
.way-btn .ic{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--bg); }
.way-btn .ic svg{ width:22px; height:22px; }
.way-btn b{ display:block; font-size:17px; font-weight:500; }
.way-btn span{ display:block; color:var(--muted); font-size:15px; }
.way-btn .arr{ font-size:20px; }
.way-btn--main{ background:var(--gold-fill); border-color:var(--gold-fill); }
.way-btn--main span{ color:#3B3427; }
.way-btn--main .ic{ background:rgba(255,255,255,.45); }
.office{ grid-column:8 / span 5; }
.office .addr{ font-family:var(--f-kr-display); font-size:clamp(22px, 1vw + 14px, 28px); line-height:1.45; margin:0; }
.office dl{ margin:24px 0 0; display:grid; grid-template-columns:auto 1fr; gap:10px 20px; }
.office dt{ font-size:13px; font-weight:500; color:var(--muted); padding-top:3px; }
.office dd{ margin:0; }
.office .btn-row{ margin-top:28px; }
@media (max-width:1023px){ .ways3,.office{ grid-column:1 / -1; } .office{ margin-top:48px; } }

/* ---------- 마무리 + 바닥글 ---------- */
footer.closing{ background:var(--bg-dark); color:var(--on-dark); padding:var(--padt) 0 calc(40px + var(--bar)); }
.close{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:end; padding-bottom:72px; border-bottom:1px solid rgba(241,236,227,.16); }
.close > div{ grid-column:1 / span 7; }
.close .h2{ max-width:none; }
.close .btn-row{ grid-column:8 / span 5; justify-content:flex-end; }
.close .lead{ color:#B9B2A6; }
.foot{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px; padding-top:48px; font-size:15px; color:#CFC8BC; }
.foot .brand{ grid-column:1 / span 4; color:var(--on-dark); align-self:start; }
.foot .brand svg{ color:var(--on-dark); }
.foot nav{ grid-column:5 / span 3; display:grid; gap:8px; align-content:start; }
.foot nav a{ text-decoration:none; } .foot nav a:hover{ color:#fff; }
.foot address{ grid-column:8 / span 5; font-style:normal; line-height:1.9; }
.foot address a{ text-decoration:none; color:var(--on-dark); }
.legal{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:32px; font-size:13px; color:#8F887C; }
.legal a{ color:#B9B2A6; }
@media (max-width:1023px){ .close > div,.close .btn-row{ grid-column:1 / -1; justify-content:flex-start; } .foot .brand,.foot nav,.foot address{ grid-column:1 / -1; } }

/* ---------- 휴대폰 아래 고정 버튼 ---------- */
nav.actionbar{ display:none; }
@media (max-width:639px){
  nav.actionbar{ display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:18;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:var(--bg-alt); border-top:1px solid var(--line); }
  nav.actionbar a{ height:48px; display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; font-size:15px; font-weight:500;
    border:1px solid var(--ink); border-radius:var(--r); }
  nav.actionbar a.main{ background:var(--gold-fill); border-color:var(--gold-fill); }
  nav.actionbar svg{ width:17px; height:17px; }
}

/* ---------- 하위 페이지 머리 ---------- */
.page-head{ padding:calc(var(--nav) + 72px) 0 56px; }
.page-head h1{ text-wrap:balance; font-family:var(--f-kr-display); font-size:clamp(34px, 2.6vw + 18px, 56px); line-height:1.18; letter-spacing:-.01em; }
.page-head .lead{ margin-top:18px; }
.crumb{ font-size:14px; color:var(--muted); margin-bottom:20px; display:flex; gap:8px; }
.crumb a{ text-decoration:none; }
.group{ padding:24px 0 88px; }
.group h2{ font-family:var(--f-kr-display); font-size:clamp(24px, 1vw + 18px, 32px); margin:0 0 28px; display:flex; gap:14px; align-items:baseline; }
.group h2 small{ font-family:var(--f-body); font-size:14px; color:var(--muted); }

/* 사례 상세 */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.chips span,.chips button{ font:inherit; font-size:14px; color:var(--ink); padding:9px 16px; min-height:40px; border:1px solid var(--line); border-radius:999px; background:var(--bg-alt); }
.chips button{ cursor:pointer; transition:background .2s,border-color .2s,color .2s; }
.chips button small{ font-size:12px; color:var(--muted); margin-left:2px; }
.chips button:hover{ border-color:var(--gold); }
.chips button.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chips button.on small{ color:#D8D2C6; }
.chips button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.group > .wrap > .chips{ margin:0 0 28px; }
.gallery figure[hidden],.works-grid .card[hidden]{ display:none; }
.gallery.filtered .lead-ph{ column-span:none; }
.gallery{ columns:2; column-gap:24px; }
.gallery figure{ margin:0 0 24px; break-inside:avoid; overflow:hidden; background:#E6E2DA; cursor:zoom-in; }
.gallery img{ width:100%; height:auto; transition:transform .5s var(--ease); }
.gallery figure:hover img{ transform:scale(1.02); }
.gallery .lead-ph{ column-span:all; }
@media (max-width:639px){ .gallery{ columns:1; } }
.lightbox{ position:fixed; inset:0; background:rgba(15,14,13,.94); z-index:40; display:none; place-items:center; padding:24px; }
.lightbox.open{ display:grid; }
.lightbox img{ max-width:100%; max-height:calc(100svh - 48px); object-fit:contain; }
.lightbox button{ position:absolute; top:16px; right:16px; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:none; color:#fff; font-size:22px; cursor:pointer; }
.pager{ display:flex; justify-content:space-between; gap:16px; padding:32px 0 0; border-top:1px solid var(--line); margin-top:40px; }
.pager a{ text-decoration:none; font-size:16px; }
.pager small{ display:block; color:var(--muted); font-size:13px; }

/* ---------- 신청서 ---------- */
.form-wrap{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px; padding-bottom:104px; }
form.req{ grid-column:1 / span 7; display:grid; gap:20px; }
.aside{ grid-column:9 / span 4; }
@media (max-width:1023px){ form.req,.aside{ grid-column:1 / -1; } }
.field label,.field legend{ display:block; font-size:13px; font-weight:500; color:var(--muted); margin-bottom:8px; padding:0; }
.field .req-mark{ color:var(--gold); margin-left:4px; }
.field input[type=text],.field input[type=tel],.field select,.field textarea{ width:100%; height:52px; padding:0 16px; font:400 16px var(--f-body); color:var(--ink);
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r); transition:border-color .2s; }
.field textarea{ height:120px; padding:14px 16px; resize:vertical; line-height:1.6; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--ink); outline:none; }
fieldset.field{ border:0; margin:0; padding:0; min-width:0; }
.opts{ display:flex; flex-wrap:wrap; gap:8px; }
.opts label{ margin:0; position:relative; }
.opts input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.opts span{ display:inline-flex; align-items:center; min-height:48px; padding:0 18px; border:1px solid var(--line); background:var(--bg-alt); border-radius:var(--r);
  font-size:16px; color:var(--ink); cursor:pointer; transition:border-color .2s, background .2s; }
.opts input:checked + span{ border-color:var(--ink); background:var(--ink); color:var(--bg-alt); }
.opts input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:639px){ .two{ grid-template-columns:1fr; } }
.agree{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.6; }
.agree input{ width:22px; height:22px; margin:1px 0 0; flex:none; accent-color:var(--ink); }
.agree a{ color:var(--ink); }
.hint{ font-size:14px; color:var(--muted); margin:0; }
.err{ color:#9B2C1F; font-size:14px; margin:0; min-height:1px; }
.sent{ display:none; border:1px solid var(--ink); background:var(--bg-alt); padding:24px; }
.sent.show{ display:block; }
.sent pre{ white-space:pre-wrap; font:400 15px/1.7 var(--f-body); background:var(--bg); padding:16px; margin:12px 0 16px; border:1px solid var(--line); }
.aside .box{ border:1px solid var(--line); background:var(--bg-alt); padding:28px; }
.aside .box + .box{ margin-top:16px; }
.aside h2{ font-family:var(--f-kr-display); font-size:22px; margin:0 0 12px; }
.aside p{ margin:0 0 8px; color:var(--muted); font-size:15px; }
.aside .tel{ font-size:24px; font-weight:500; letter-spacing:.04em; text-decoration:none; display:inline-block; margin:6px 0 10px; }
.prose{ max-width:760px; padding-bottom:104px; }
.prose h2{ font-family:var(--f-kr-display); font-size:22px; margin:40px 0 12px; }
.prose p,.prose li{ color:#3A3732; }
.prose table{ border-collapse:collapse; width:100%; font-size:15px; }
.prose th,.prose td{ border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.prose th{ background:var(--bg-alt); font-weight:500; width:30%; }



form.req .btn-row .btn--primary{ min-width:280px; }
@media (max-width:639px){ form.req .btn-row .btn--primary{ min-width:0; } }
.sent .big{ font-size:18px; font-weight:500; color:var(--ink); }

.page-head .place{ margin:14px 0 0; font-size:14px; color:var(--muted); letter-spacing:.02em; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.sent .sent__ok[hidden],.sent .sent__fallback[hidden]{ display:none; }

/* 공사 과정 바로 가기: 3D가 공사 장면(철거)으로 넘어간 자리 */
.intro-anchor{ position:absolute; left:0; width:1px; height:1px; top:calc(.22 * (100% - 100svh)); }
/* 입장 화면 — 누르는 순간 소리와 3D가 함께 시작 */
.enter{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; background:#F5F5F3; color:#1E1E1E; transition:opacity .8s var(--ease), visibility .8s; }
.enter.out{ opacity:0; visibility:hidden; }
html.entering, html.entering body{ overflow:hidden; }
.enter__in{ display:flex; flex-direction:column; align-items:center; text-align:center; animation:enterIn 1.4s var(--ease) both; }
.enter__in svg{ height:92px; width:auto; margin-bottom:28px; }
.enter__name{ font-family:var(--f-display); font-weight:500; font-size:30px; letter-spacing:.32em; margin:0 0 4px .32em; }
.enter__sub{ font-family:var(--f-display); font-style:italic; font-size:17px; letter-spacing:.12em; color:var(--muted); margin:0 0 48px; }
.enter__btn{ font-family:var(--f-display); font-size:18px; letter-spacing:.34em; text-transform:uppercase; padding:16px 44px 16px calc(44px + .34em); min-height:52px; background:transparent; color:#1E1E1E; border:1px solid #1E1E1E; cursor:pointer; transition:background .35s, color .35s, border-color .35s; }
.enter__btn:hover,.enter__btn:focus-visible{ background:#1E1E1E; color:#F5F5F3; outline:none; }
.enter__quiet{ margin-top:20px; font:inherit; font-size:13px; letter-spacing:.04em; color:var(--muted); background:none; border:0; padding:10px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.enter__quiet:hover{ color:#1E1E1E; }
@keyframes enterIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }