/* 섹션별 컴포넌트 스타일 — 기존 index.html 인라인 <style>에서 옮겼습니다.
   반응형 브레이크포인트(960/640/480/359px)와 prefers-reduced-motion 처리는
   원본 그대로 파일 맨 아래에 유지했습니다(요청: 화면이 달라지지 않도록). */

header{position:fixed;inset:0 0 auto;z-index:900;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);transition:.3s;border-bottom:1px solid transparent}
header.on{border-bottom-color:var(--line);box-shadow:0 4px 24px rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:74px}
/* 로고 — 워드마크가 이미지에 포함되어 있어 별도 텍스트 없이 이미지만 사용합니다.
   가로폭이 아니라 높이 기준으로 크기를 맞춥니다. */
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:46px;width:auto;object-fit:contain}
.logo .logo-mark{display:none}   /* 480px 이하에서만 아이콘 단독 표시 */
.menu{display:flex;gap:26px;font-size:var(--fz-sm);font-weight:500}
.menu a{position:relative;padding:4px 0}
.menu a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--navy);transition:width .25s}
.menu a:hover{color:var(--navy)}.menu a:hover::after{width:100%}
.hd-call{background:var(--navy);color:#fff;padding:11px 22px;border-radius:100px;font-weight:700;font-size:var(--fz-sm);transition:.2s;white-space:nowrap}
.hd-call:hover{background:var(--navy-d);transform:translateY(-2px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.burger span{width:24px;height:2px;background:var(--ink)}
.mnav{display:none;flex-direction:column;background:#fff;border-top:1px solid var(--line);padding:8px 20px 18px}
.mnav a{padding:14px 0;border-bottom:1px solid var(--line);font-weight:500}.mnav a:last-child{border:0}

.hero{padding:148px 0 0;background:#101828;position:relative;overflow:hidden}
/* 움직이는 사진 배경 (켄번즈 슬라이드쇼) */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* 두 장을 겹쳐두고 번갈아 교차 페이드 — 사진 목록은 js/main.js 의 HERO_IMAGES 에서 관리 */
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;will-change:opacity,transform;transition:opacity 1.6s ease-in-out;transform:scale(1.04)}
.hero-slide.on{opacity:1;animation:heroKen 9.6s linear forwards}
@keyframes heroKen{from{transform:scale(1.04)}to{transform:scale(1.14)}}
/* 사진 위 어두운 오버레이 — 텍스트 가독성 확보 (사진 색감은 손대지 않고 오버레이만 조절).
   제목·lead·버튼·체크 4개가 실제로 차지하는 영역(대략 히어로 높이의
   90%까지)은 어둡기를 거의 그대로 유지하고, 그 아래 콘텐츠 없는
   여백(hero-in의 padding-bottom 70px)에서만 --bg로 빠르게 넘어갑니다.
   콘텐츠 높이를 실측할 수 없어 각 요소 높이를 계산해 추정한 값입니다
   (데스크톱 90%, 체크 칩이 2줄로 접히는 모바일은 93%로 더 늦게 뺌) —
   특정 사진에서 여전히 묻히면 이 정지점을 더 조정해야 합니다. */
.hero::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(10,14,28,.62),rgba(10,14,28,.6) 90%,var(--bg) 100%)}
.hero-in{position:relative;z-index:2;text-align:center;padding-bottom:70px}
.hero .mark{width:94px;height:94px;object-fit:contain;margin:0 auto 24px;background:#fff;border-radius:22px;padding:9px;box-shadow:0 10px 28px rgba(0,0,0,.4)}
.badge{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.42);color:#fff;font-size:var(--fz-cap);font-weight:700;padding:7px 18px;border-radius:100px;margin-bottom:22px;backdrop-filter:blur(6px)}
/* 오버레이를 옅게 낮춘 만큼, 사진이 밝을 때도 글자가 묻히지 않도록
   그림자를 두 겹으로 보강합니다(가까운 겹은 또렷하게, 먼 겹은 은은하게) */
.hero h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;line-height:1.3;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.55),0 4px 24px rgba(0,0,0,.45)}
.hero h1 em{font-style:normal;color:#9FB4FF}
.hero p.lead{margin:24px auto 0;max-width:680px;color:rgba(255,255,255,.95);font-size:clamp(16px,2.2vw,var(--fz-lg));font-weight:400;text-shadow:0 1px 4px rgba(0,0,0,.6),0 2px 14px rgba(0,0,0,.5);word-break:keep-all}
/* 움직임 최소화 설정: 전환 없이 한 장만 고정 표시 */
@media(prefers-reduced-motion:reduce){
  .hero-slide{transition:none;transform:none}
  .hero-slide.on{animation:none;transform:none}
}
.hbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero .btn-o{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.hero .btn-o:hover{background:rgba(255,255,255,.2)}
.checks{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:44px}
.checks span{background:rgba(10,14,28,.45);border:1px solid rgba(255,255,255,.4);border-radius:100px;padding:9px 20px;font-size:var(--fz-cap);color:rgba(255,255,255,.95);backdrop-filter:blur(6px)}
.checks b{color:#fff}

.stats{background:var(--navy);color:#fff}
/* 위아래 비대칭 패딩 — 첫 칸의 .stat-hint 한 줄만큼 2·3번 칸 아래에 남는
   빈 공간이 있어서, 아래쪽을 그만큼 덜 줘야 위아래 여백이 시각적으로
   맞습니다(52px 대칭 → 위 50px·아래 32px). */
.stats-in{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;text-align:center;padding:50px 0 32px}
/* 통계 3칸 중 하나(누적 시공)는 블로그로 연결됩니다. 링크가 있어도
   없어도 높이·정렬이 같도록 .stat 자체가 아니라 안쪽 요소만 꾸밉니다.
   align-self:stretch는 .stats-in의 align-items:start(숫자 상단 정렬 유지용,
   변경 금지)와는 별개로 .stat 박스 자체만 행 높이만큼 늘립니다 — 안쪽
   내용은 flex-start라 계속 위쪽에 붙어 있고, 덕분에 옆 칸 구분선
   (.stat+.stat)이 짧은 칸 쪽만 낮게 끝나는 문제 없이 항상 같은 높이로
   보입니다. */
.stat{display:flex;flex-direction:column;align-items:center;align-self:stretch}
.stat-link{display:flex;flex-direction:column;align-items:center;transition:opacity .2s}
.stat-link:hover{opacity:.82}
.stat b{display:block;font-size:clamp(30px,5vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1.2}
.stat span{font-size:var(--fz-sm);opacity:.82;font-weight:300}
.stat-hint{display:block;font-size:var(--fz-cap);line-height:1.3;opacity:.7;margin-top:2px;white-space:nowrap}
.stat+.stat{border-left:1px solid rgba(255,255,255,.18)}

/* BEFORE / AFTER */
.ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;margin-top:56px;align-items:stretch}
/* 홈 화면 노출만 3건으로 줄입니다 — 마크업은 지우지 않고 숨기기만
   해서(display:none) /works 등 다른 곳에서 이 항목이 필요해지면
   클래스만 떼면 됩니다. display:none은 grid 레이아웃에서 완전히
   빠지므로 남은 3건(대표 1건 wide + 일반 2건)이 빈 자리 없이
   자연스럽게 다시 채워집니다. */
.ba-hide-home{display:none}
/* 카드를 세로 flex로 만들어, 본문 길이가 달라도 하단 정보 박스가 카드 바닥에 맞춰집니다 */
.ba-item{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 10px 34px rgba(20,22,29,.07);display:flex;flex-direction:column;min-height:0}
/* 전후 사진을 좌우로 나란히 배치 — 한눈에 비교 */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);position:relative}
.ba figure{position:relative;margin:0;aspect-ratio:1/1;overflow:hidden;background:#eee;cursor:zoom-in}
.ba figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ba figure:hover img{transform:scale(1.04)}
.ba figcaption{position:absolute;top:13px;left:13px;font-size:var(--fz-cap);font-weight:800;letter-spacing:.1em;padding:6px 13px;border-radius:100px;color:#fff;backdrop-filter:blur(6px);z-index:2}
.ba .f-before figcaption{background:rgba(20,22,29,.72)}
.ba .f-after figcaption{background:rgba(43,68,166,.9)}
/* 가운데 화살표 — 전 → 후 방향 표시 */
.ba .arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 4px 18px rgba(20,22,29,.28);display:flex;align-items:center;justify-content:center;z-index:3}
.ba .arrow svg{width:20px;height:20px;stroke:var(--navy);stroke-width:2.4;fill:none}
.ba-cap{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1}
.ba-cap .loc{font-size:var(--fz-cap);color:var(--navy);font-weight:700}
.ba-cap h3{font-size:clamp(19px,2.4vw,23px);font-weight:900;letter-spacing:-.02em;line-height:1.45;margin-top:8px}
.ba-cap p{margin-top:11px;color:var(--gray);font-size:var(--fz-md);font-weight:300;line-height:1.62}
/* 박스 개수가 2개·4개로 바뀌어도 폭이 어긋나지 않게 균등 분배 */
.ba-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:auto;padding-top:20px}
.ba-spec div{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ba-spec b{display:block;font-size:var(--fz-md);color:var(--navy);font-weight:800;line-height:1.4;word-break:keep-all}
.ba-spec span{display:block;font-size:var(--fz-cap);color:var(--gray);line-height:1.4;word-break:keep-all}
.ba-cta{text-align:center;margin-top:44px}
/* 와이드(대표) 전후 카드 */
.ba-item.wide{grid-column:1/-1;display:grid;grid-template-columns:1.02fr 1fr}
.ba-item.wide .ba figure{aspect-ratio:4/5}
.ba-item.wide .ba-cap{padding:38px 40px;display:flex;flex-direction:column;justify-content:center}
.ba-item.wide .ba-cap h3{font-size:clamp(21px,2.8vw,27px)}
/* 와이드 카드는 한 줄을 혼자 차지하므로 기존의 가운데 정렬 모양을 유지합니다 */
.ba-item.wide .ba-spec{margin-top:20px;padding-top:0}

/* ── 하단 정보 박스 높이 정렬 ──
   카드가 2열 이상일 때만 적용. 같은 줄 카드는 align-items:stretch로 높이가 같아지고,
   본문에 flex:1을 주어 박스가 카드 바닥에 붙으므로 아래 라인이 서로 맞습니다. */
@media(min-width:961px){
  .ba-item:not(.wide) .ba-spec{margin-top:auto}
}
.new-tag{display:inline-block;margin-left:8px;background:var(--navy);color:#fff;font-size:var(--fz-cap);font-weight:800;letter-spacing:.06em;padding:3px 9px;border-radius:100px;vertical-align:middle}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px}
/* 카드 13개 = 4줄+1(마지막 줄에 카드 1개만 남아 왼쪽에 붙는 문제).
   마지막 카드가 "한 줄의 첫 칸"이기도 할 때만(3n+1번째이면서 동시에
   맨 마지막) 가운데 칸으로 옮겨 균형을 맞춥니다 — 카드 수가 나중에
   또 바뀌어도(3의 배수+1이 될 때만) 자동으로 맞는 일반 규칙이라
   특정 개수에 종속되지 않습니다. 개수가 3의 배수거나 3의 배수+2면
   :last-child가 3n+1이 아니라서 이 규칙 자체가 조용히 적용 안 됩니다. */
.grid .card:nth-child(3n+1):last-child{grid-column:2}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 26px;transition:.3s;position:relative;overflow:hidden}
.card::after{content:'';position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.card:hover{transform:translateY(-7px);box-shadow:0 20px 42px rgba(20,22,29,.1);border-color:transparent}
.card:hover::after{transform:scaleX(1)}
.ico{width:54px;height:54px;flex:0 0 54px;border-radius:15px;background:var(--navy-l);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:background .3s}
.ico svg{width:27px;height:27px;stroke:var(--navy);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card:hover .ico{background:var(--navy)}
.card:hover .ico svg{stroke:#fff}
.card h3{font-size:var(--fz-lg);font-weight:700;letter-spacing:-.02em;line-height:1.45}
.card p{margin-top:10px;font-size:var(--fz-md);color:var(--gray);font-weight:300}
.etc{margin-top:28px;text-align:center;font-size:var(--fz-md);color:var(--gray)}.etc b{color:var(--navy)}

.why{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.why-list{display:flex;flex-direction:column;gap:16px}
.wi{display:flex;gap:16px;background:#fff;border-radius:16px;padding:24px 26px;box-shadow:0 4px 20px rgba(0,0,0,.05)}
.wi .n{flex:0 0 42px;min-height:42px;border-radius:11px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:var(--fz-md)}
.wi h4{font-size:var(--fz-lg);font-weight:800;letter-spacing:-.02em}
.wi p{margin-top:6px;font-size:var(--fz-md);color:var(--gray);font-weight:300}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:54px}
.step{text-align:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 14px;transition:.3s}
.step:hover{border-color:var(--navy);transform:translateY(-6px);box-shadow:0 14px 32px rgba(43,68,166,.12)}
.step .num{width:44px;height:44px;flex:0 0 44px;margin:0 auto 15px;border-radius:50%;background:var(--navy-l);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:var(--fz-sm)}
.step h4{font-size:var(--fz-md);font-weight:800}
.step p{margin-top:7px;font-size:var(--fz-cap);color:var(--gray);font-weight:300;line-height:1.65}

.tabs{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:44px}
.tab{background:#fff;border:1px solid var(--line);padding:9px 20px;border-radius:100px;font-size:var(--fz-sm);font-weight:600;color:var(--gray);cursor:pointer;transition:.2s}
.tab:hover{border-color:var(--navy);color:var(--navy)}
.tab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
/* 「더 보기」 버튼 — 시공사례를 12건씩 이어서 불러옵니다 */
.more-wrap{margin-top:34px}
.more-wrap .btn:disabled{opacity:.6;cursor:progress}
.work{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.3s;display:block}
.work:hover{transform:translateY(-7px);box-shadow:0 20px 42px rgba(20,22,29,.11)}
.thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,var(--navy),#5570D8)}
.thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:opacity .45s}
.thumb .b-img{opacity:0}
.work:hover .thumb .b-img{opacity:1}
.thumb .ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.thumb .ph .big{font-size:46px;margin-bottom:6px}
.thumb .ph small{font-size:var(--fz-cap);opacity:.9}
.thumb .cat{position:absolute;top:13px;left:13px;background:rgba(20,22,29,.62);backdrop-filter:blur(6px);color:#fff;font-size:var(--fz-cap);font-weight:700;padding:5px 12px;border-radius:100px;z-index:2}
.thumb .flip{position:absolute;bottom:13px;right:13px;background:rgba(43,68,166,.9);color:#fff;font-size:var(--fz-cap);font-weight:700;padding:5px 12px;border-radius:100px;z-index:2}
.work:hover .thumb .flip{background:rgba(20,22,29,.82)}
.w-body{padding:22px 24px 26px}
.w-date{font-size:var(--fz-cap);color:#9AA0AE;font-weight:500}
.w-body h3{font-size:var(--fz-lg);font-weight:700;margin-top:6px;line-height:1.5;letter-spacing:-.02em}
.w-body p{margin-top:10px;font-size:var(--fz-md);color:var(--gray);font-weight:300;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.w-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.w-meta span{font-size:var(--fz-cap);background:var(--bg);border:1px solid var(--line);color:var(--gray);padding:4px 11px;border-radius:100px}

/* ── 견적 요청 3단계 위저드 ── */
.qz{background:#fff;border:1px solid var(--line);border-radius:24px;padding:40px;margin-top:46px;box-shadow:0 8px 34px rgba(20,22,29,.06)}
/* 단계 표시 */
.qz-steps{display:flex;align-items:center;gap:8px;margin-bottom:34px}
.qz-st{display:flex;align-items:center;gap:9px;flex:1}
.qz-st i{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line);
  color:var(--gray);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:var(--fz-cap)}
.qz-st span{font-size:var(--fz-cap);font-weight:700;color:var(--gray);white-space:nowrap}
.qz-st.on i{background:var(--navy);border-color:var(--navy);color:#fff}
.qz-st.on span{color:var(--navy)}
.qz-st.done i{background:var(--navy-l);border-color:var(--navy);color:var(--navy)}
.qz-st b{flex:1;height:2px;background:var(--line);border-radius:2px}
.qz-st.done b{background:var(--navy)}
.qz-st:last-child{flex:0 0 auto}
/* 단계 패널 */
.qz-panel{display:none}
.qz-panel.on{display:block}
.qz-q{font-size:var(--fz-lg);font-weight:800;letter-spacing:-.02em}
/* 선택 개수 실시간 표시 — 질문 옆에 붙이면 스텝 표시줄(모바일에서는
   숫자만 남기고 글자를 숨김, 아래 @media 참고)과 달리 모든 화면
   폭에서 항상 보입니다. 0개일 때는 비워둬(quote.js) 아예 자리를
   차지하지 않습니다. */
.qz-item-count{margin-left:6px;font-size:var(--fz-cap);font-weight:700;color:var(--navy)}
.qz-hint{margin-top:7px;color:var(--gray);font-size:var(--fz-cap);font-weight:300}
/* 항목 다중 선택 */
.qz-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
.qz-opt{position:relative}
.qz-opt input{position:absolute;opacity:0;width:0;height:0}
.qz-opt span{display:block;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;font-size:var(--fz-md);
  font-weight:500;cursor:pointer;transition:.18s;background:#fff;word-break:keep-all}
.qz-opt span::before{content:'';display:inline-block;width:17px;height:17px;border:1.5px solid var(--line);border-radius:5px;
  margin-right:10px;vertical-align:-3px;transition:.18s}
.qz-opt input:checked+span{border-color:var(--navy);background:var(--navy-l);color:var(--navy);font-weight:700}
.qz-opt input:checked+span::before{background:var(--navy);border-color:var(--navy)}
.qz-opt input:focus-visible+span{outline:2px solid var(--navy);outline-offset:2px}
/* 라디오형 (주거 형태·시기) */
.qz-row{margin-top:22px}
.qz-row>label{display:block;font-size:var(--fz-sm);font-weight:700;margin-bottom:9px}
.qz-chips{display:flex;flex-wrap:wrap;gap:9px}
.qz-chip{position:relative}
.qz-chip input{position:absolute;opacity:0;width:0;height:0}
.qz-chip span{display:block;border:1.5px solid var(--line);border-radius:100px;padding:11px 20px;font-size:var(--fz-md);
  cursor:pointer;transition:.18s;background:#fff}
.qz-chip input:checked+span{border-color:var(--navy);background:var(--navy);color:#fff;font-weight:700}
.qz-chip input:focus-visible+span{outline:2px solid var(--navy);outline-offset:2px}
/* 입력칸 */
.qz-in{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;font-size:var(--fz-md);
  font-family:inherit;color:var(--ink);background:#fff}
.qz-in:focus{outline:0;border-color:var(--navy)}
textarea.qz-in{resize:vertical;min-height:96px;line-height:1.6}
/* 사진 첨부 */
.qz-file{display:inline-flex;align-items:center;gap:8px;border:1.5px dashed var(--line);border-radius:12px;
  padding:14px 20px;font-size:var(--fz-md);font-weight:600;color:var(--navy);cursor:pointer;background:var(--bg);transition:.18s}
.qz-file:hover{border-color:var(--navy);background:var(--navy-l)}
.qz-file input{display:none}
.qz-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.qz-thumb{position:relative;width:88px;height:88px;border-radius:11px;overflow:hidden;border:1px solid var(--line)}
.qz-thumb img{width:100%;height:100%;object-fit:cover}
.qz-thumb button{position:absolute;top:3px;right:3px;width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(20,22,29,.72);color:#fff;font-size:15px;line-height:1;cursor:pointer}
/* 안내 박스 */
.qz-note{margin-top:24px;background:var(--navy-l);border-radius:16px;padding:24px;text-align:center}
.qz-note strong{display:block;font-size:var(--fz-lg);font-weight:800;color:var(--navy);letter-spacing:-.02em}
.qz-note p{margin-top:8px;font-size:var(--fz-cap);color:var(--gray);font-weight:300;line-height:1.65}
.qz-note p b{color:var(--navy);font-weight:700}
/* 요약 */
.qz-sum{margin-top:20px;border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--bg);font-size:var(--fz-cap)}
.qz-sum div{display:flex;gap:10px;padding:5px 0}
.qz-sum dt{flex:0 0 82px;color:var(--gray);font-weight:700}
.qz-sum dd{flex:1;font-weight:500;word-break:keep-all}
/* 이동 버튼 */
.qz-nav{display:flex;gap:10px;justify-content:space-between;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.qz-btn{display:inline-flex;align-items:center;gap:7px;padding:15px 30px;border-radius:100px;font-weight:700;
  font-size:var(--fz-btn);font-family:inherit;border:0;cursor:pointer;transition:.2s}
.qz-btn.next{background:var(--navy);color:#fff;margin-left:auto}
.qz-btn.next:hover{background:var(--navy-d)}
.qz-btn.prev{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.qz-btn.prev:hover{background:var(--navy-l)}
/* 검증 메시지 */
.qz-err{margin-top:16px;color:#C0392B;font-size:var(--fz-cap);font-weight:600;display:none}
.qz-err.on{display:block}
.qz-in.bad,.qz-opts.bad,.qz-chips.bad{border-color:#C0392B}
.qz-opts.bad .qz-opt span,.qz-chips.bad .qz-chip span{border-color:#E4A9A2}

/* 지역 2단 선택 (견적 위저드) */
.qz-region2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:480px){.qz-region2{grid-template-columns:1fr}}

/* 개인정보 동의 */
.qz-consent{background:var(--bg);border-radius:14px;padding:18px 20px}
.qz-consent-text{font-size:var(--fz-cap);color:var(--gray);line-height:1.7}
.qz-consent-text b{display:block;color:var(--ink);font-weight:800;margin-bottom:4px}
.qz-consent-text ul{margin:4px 0 0 18px;padding:0}
.qz-consent-link{display:inline-block;margin-top:8px;color:var(--navy);font-weight:700;text-decoration:underline}
.qz-consent-check{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:var(--fz-sm);font-weight:700;cursor:pointer}
.qz-consent-check input{width:20px;height:20px;flex:0 0 20px}
.qz-consent.bad{outline:1.5px solid #C0392B}

/* 접수 완료 화면 */
.qz-done{text-align:center}

.area-box{margin-top:46px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:46px 40px;text-align:center}
.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:34px}
.ac{background:var(--bg);border-radius:16px;padding:26px 20px;text-align:left;border:1px solid var(--line)}
.ac h4{font-size:var(--fz-lg);font-weight:800;color:var(--navy);margin-bottom:8px}
.ac p{font-size:var(--fz-md);color:var(--gray);font-weight:300}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips span{background:var(--bg);border:1px solid var(--line);padding:7px 15px;border-radius:8px;font-size:var(--fz-cap);color:var(--gray)}
.area-note{margin-top:26px;font-size:var(--fz-md);color:var(--gray);font-weight:300}

.faq{max-width:840px;margin:48px auto 0}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%;background:none;border:0;text-align:left;padding:24px 46px 24px 0;font-size:var(--fz-lg);font-weight:600;line-height:1.55;cursor:pointer;position:relative;color:var(--ink);letter-spacing:-.02em}
.q button::after{content:'+';position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:25px;color:var(--navy);font-weight:300;transition:.3s}
.q.open button::after{transform:translateY(-50%) rotate(45deg)}
.a{max-height:0;overflow:hidden;transition:max-height .35s}
.a p{padding:0 0 24px;color:var(--gray);font-size:var(--fz-md);font-weight:300}

.cta{background:linear-gradient(135deg,var(--navy),var(--navy-d));color:#fff;text-align:center;padding:100px 0}
.cta h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:900;letter-spacing:-.02em;line-height:1.38}
.cta p{margin-top:18px;opacity:.86;font-weight:300;font-size:var(--fz-lg)}
.tel{display:inline-block;margin-top:28px;font-size:clamp(31px,6.4vw,50px);font-weight:900;letter-spacing:-.02em}
.cbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.cta .btn-p{background:#fff;color:var(--navy)}.cta .btn-p:hover{background:#EDEFFC}
.cta .btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.cta .btn-o:hover{background:rgba(255,255,255,.13)}
.blog-ico{width:20px;height:20px;border-radius:5px;flex:0 0 20px}

footer{background:#13151B;color:#868C99;padding:58px 0 34px;font-size:var(--fz-sm);font-weight:300}
.f-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid #252831}
.f-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
/* 정사각 로고 — width/height를 함께 고정해야 원본 비율로 늘어나지 않습니다 */
.f-logo img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:10px;padding:3px}
.f-links{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:14px}
.f-links a:hover{color:#fff}
.f-bot{padding-top:24px;font-size:var(--fz-cap);color:#5F6472}
/* 사업자 정보 — 상담문의·상담시간·소재지 아래 부가 정보처럼 한 단계 작고 옅게 */
.f-biz{margin-top:14px;font-size:var(--fz-cap);color:#5F6472;line-height:1.6}

.float{position:fixed;right:20px;bottom:22px;z-index:950;display:flex;flex-direction:column;gap:10px}
.fbtn{width:56px;height:56px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:23px;box-shadow:0 6px 22px rgba(0,0,0,.24);transition:.25s;color:#fff}
.fbtn:hover{transform:scale(1.09)}
.f-top-btn{background:#2E3340;font-size:19px}
/* 로고 이미지 자체에 초록 배경이 포함돼 있어 버튼 배경은 따로 두지
   않습니다 — 겹치면 모서리에 이중 배경이 비칠 수 있습니다. 이미지가
   원형 버튼을 여백 없이 꽉 채우도록 부모(.fbtn)의 overflow:hidden로
   자릅니다. */
.f-blog img{width:100%;height:100%;object-fit:cover;display:block}
.f-tel{background:var(--navy)}
.mbar{display:none}

.lb-ov{position:fixed;inset:0;background:rgba(10,11,15,.93);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.lb-ov.on{display:flex}
.lb-ov img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:10px}
.lb-x{position:absolute;top:22px;right:26px;color:#fff;font-size:34px;cursor:pointer;line-height:1;font-weight:300}

/* ── /works, /works/:slug (SSR) 전용 간단 헤더·푸터 ──
   홈페이지 헤더(.nav)는 #works 같은 인앱 앵커 기준이라 이 페이지들엔
   맞지 않아 별도로 둡니다. 색상·폰트는 tokens.css 변수를 그대로 씁니다. */
.wh{background:#fff;border-bottom:1px solid var(--line);padding:16px 0}
.wh-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.wh-logo img{height:38px;width:auto;object-fit:contain}
.wh-nav{display:flex;align-items:center;gap:20px;font-size:var(--fz-sm);font-weight:500}
.wh-nav a{color:var(--ink)}
.wh-nav a:hover{color:var(--navy)}
.wh-tel{background:var(--navy);color:#fff!important;padding:9px 18px;border-radius:100px;font-weight:700}
.crumb{font-size:var(--fz-cap);color:var(--gray);margin:24px auto 0}
.crumb a{color:var(--gray)}
.crumb a:hover{color:var(--navy)}
.wf{background:#13151B;color:#868C99;padding:36px 0;font-size:var(--fz-sm);font-weight:300;margin-top:60px}
.wf a{color:#868C99}
.wf a:hover{color:#fff}
.empty-list{padding:80px 20px;text-align:center;color:var(--gray)}

/* /privacy 등 약관형 본문 — 헤딩·목록 최소 간격만 지정하고 나머지는
   base.css 기본 타이포그래피(폰트/줄간격/색)를 그대로 씁니다 */
.legal{max-width:760px}
.legal .sub{margin-bottom:8px}
.legal h2{margin-top:44px;margin-bottom:14px;font-size:clamp(19px,2.4vw,22px);font-weight:800}
.legal h2:first-of-type{margin-top:36px}
.legal p{margin-top:10px}
.legal ul{margin-top:10px;padding-left:20px}
.legal li{margin-top:8px}
.legal li:first-child{margin-top:0}
.legal b{font-weight:700}

@media(max-width:960px){
  .grid,.works{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:1fr;gap:36px}
  .ba-grid{grid-template-columns:1fr;gap:30px}
  .ba-item.wide{grid-template-columns:1fr}
  .ba-item.wide .ba figure{aspect-ratio:1/1}
  .ba-item.wide .ba-cap{padding:28px 28px 30px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .area-grid{grid-template-columns:repeat(2,1fr)}
  }
@media(max-width:640px){
  :root{--fz-base:17px;--fz-lg:18px;--fz-md:16px;--fz-sm:15.5px;--fz-cap:14px;--fz-btn:17px}
  .sec{padding:68px 0}
  .menu,.hd-call{display:none}.burger{display:flex}
  .logo img{height:38px}
  .grid,.works,.steps,.area-grid{grid-template-columns:1fr}
  /* 모바일은 한 줄씩 쌓이는 1열이라 align-items:start로 생기는 빈 공간
     자체는 없지만, 데스크톱과 같은 비율(약 -38%)로 아래쪽만 줄여
     위아래 무게감을 맞춥니다 */
  .stats-in{grid-template-columns:1fr;gap:26px 0;padding:38px 0 24px}
  .stat+.stat{border-left:0;border-top:1px solid rgba(255,255,255,.18);padding-top:26px}
  /* 모바일 첫 화면: 헤더에 이미 로고가 있어 히어로 로고 마크는 중복이라 숨기고,
     그만큼 위쪽 여백도 줄여서 제목·버튼 2개가 스크롤 없이 보이게 합니다
     (iPhone SE 375×667 기준). 버튼은 폭이 좁아 나란히 두면 줄바꿈되므로
     세로로 쌓아 폭 100%로 만듭니다. */
  .hero{padding-top:96px}.area-box{padding:30px 20px}
  .hero .mark{display:none}
  /* 모바일은 체크 칩이 2줄로 접히고 lead 줄바꿈도 늘어나 콘텐츠가 상대적으로
     더 아래까지 내려갑니다 — 어두운 구간을 데스크톱(90%)보다 조금 더
     늦게(93%) 뺍니다 */
  .hero::after{background:linear-gradient(rgba(10,14,28,.62),rgba(10,14,28,.6) 93%,var(--bg) 100%)}
  .hbtns{flex-direction:column;margin-top:28px}
  .hbtns .btn{width:100%;justify-content:center}
  .checks{margin-top:20px;gap:8px}
  .qz{padding:26px 20px}
  .qz-opts{grid-template-columns:1fr}
  .qz-st span{display:none}          /* 좁은 화면에서는 번호만 표시 */
  .qz-steps{gap:6px}
  .qz-btn{padding:14px 22px;font-size:var(--fz-md)}
  .hero-slide{animation-duration:44s}
  .ba-cap,.ba-item.wide .ba-cap{padding:24px 20px 26px}
  /* 모바일: 가로 3등분 유지하되 여백을 줄여 글자 눌림을 막습니다 */
  .ba-spec{gap:6px}
  .ba-spec div{padding:10px 4px}
  .float{bottom:80px;right:14px}.fbtn{width:50px;height:50px;font-size:20px}
  /* 하단 고정 바(mbar)가 전화·문자·견적요청을 이미 담당하므로, 이 폭에서는
     플로팅 버튼 중 맨위로가기만 남깁니다 (데스크톱은 3개 그대로).
     블로그는 mbar·플로팅 버튼 어디에도 없지만 통계 바(#top 아래)와
     푸터 링크는 모바일에서도 그대로 노출되어 있어 계속 접근 가능합니다. */
  .float .f-tel,.float .f-blog{display:none}
  .mbar{display:flex;position:fixed;inset:auto 0 0;z-index:940;background:#fff;border-top:1px solid var(--line);box-shadow:0 -3px 16px rgba(0,0,0,.08)}
  .mbar a{flex:1;text-align:center;padding:17px 0;font-weight:700;font-size:var(--fz-md);white-space:nowrap}
  .mbar a:first-child{background:var(--navy);color:#fff}
  .mbar a:nth-child(2){color:var(--navy)}
  /* 견적요청 칸은 눈에 띄게 남색과 충돌 안 하는 주황 계열 + 폭을 살짝 넓게(1.2) */
  .mbar a:last-child{flex:1.2;background:#EA580C;color:#fff}
  footer{padding-bottom:92px}
  /* CTA 섹션 3버튼(전화 상담/문자로 사진 보내기/블로그에서 더 보기) —
     "문자로 사진 보내기"가 이미 가장 길어서 360px에서는 애초에 flex-wrap로
     줄바꿈되던 조합입니다("블로그에서 더 보기"로 4글자 늘어도 줄바꿈
     자체는 새로 생기는 문제가 아님). 다만 조금이라도 여유를 주려고
     패딩·글자 크기를 살짝 줄여둡니다. */
  .cbtns{gap:8px}
  .cbtns .btn{padding:13px 20px;font-size:var(--fz-sm)}
  /* 시공사례 필터 탭 6개(전체 포함)는 이 폭에서 줄바꿈으로 2~3줄이
     되면 눈에 잘 안 들어와서, 감싸기 대신 한 줄 가로 스크롤로
     바꿉니다. 탭이 줄어들지(찌그러지지) 않게 flex:0 0 auto를 주고,
     .wrap의 좌우 20px 패딩을 상쇄하는 음수 마진으로 스크롤 영역을
     화면 끝까지 넓혀 마지막 탭이 잘려 보이지 않게 합니다. */
  .tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin-left:-20px;margin-right:-20px;padding:0 20px 6px;scrollbar-width:thin}
  .tab{flex:0 0 auto}
}
/* 아주 좁은 화면: 3등분으로는 글자가 눌리므로 한 줄씩 쌓고 라벨↔값을 좌우로 배치 */
@media(max-width:480px){
  /* 새 가로 로고는 여백이 없어 폭이 좁아(390px 화면에서 151px, 여유 155px) 좁은 화면에서도
     글씨까지 그대로 보여줍니다. 아이콘 단독 교체는 360px 미만에서만 적용합니다. */
  .logo img{height:36px}
  .ba-spec{grid-template-columns:1fr;gap:7px}
  .ba-spec div{flex-direction:row-reverse;justify-content:space-between;padding:11px 14px;text-align:left}
  .ba-spec b{font-size:var(--fz-sm)}
}
/* 초소형 화면(구형 기기 등): 이때만 아이콘 단독으로 교체합니다 */
@media(max-width:359px){
  .logo .logo-full{display:none}
  .logo .logo-mark{display:block;height:32px}
}