/* 집담공간 — 공통 스타일
 * 모든 페이지가 이 파일 하나를 쓴다. 페이지 <style> 에는 그 페이지에만 있는 배치만 둔다.
 * 다크모드는 두지 않는다.
 * 글꼴(Pretendard)은 여기서 @import 하지 않는다 — 그러면 글꼴 서버가 늦을 때 화면 전체가 하얗게 기다린다.
 * 각 페이지 <head> 가 화면을 막지 않는 방식(media="print" → 받으면 all)으로 부르고, 받기 전에는 아래 --font 의 시스템 글꼴로 먼저 그린다.
 */

:root{
  /* 색 — 제목만 한 단계 진한 먹색 */
  --canvas:#FFFFFF;
  --canvas-ivory:#FAF7F2;
  --surface:#F3EEE6;          /* 흰 바탕 위에 놓는 아이보리 카드 */
  --ink:#4C453C;
  --ink-strong:#2E2924;       /* 굵은 제목 */
  --ink-muted:#736B61;
  --hairline:#E6E0D7;
  --line-strong:#958C80;
  --tint:rgba(76,69,60,.07);  /* 옅게 칠한 버튼 바탕 */
  --tint-hover:rgba(76,69,60,.12);

  /* 모서리 */
  --r-sm:10px;     /* 칩 · 작은 버튼 */
  --r-md:14px;     /* 버튼 · 입력칸 */
  --r-card:20px;   /* 사진 카드 · 패널 */
  --r-hero:28px;   /* 첫 화면 사진 */

  /* Pretendard 를 받기 전·못 받았을 때: 맥·아이폰 → 애플 산돌고딕, 윈도우 → 맑은 고딕, 안드로이드 → 본고딕(Noto Sans KR) */
  --font:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,system-ui,
         "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Noto Sans KR","Noto Sans CJK KR",Roboto,"Segoe UI",sans-serif;

  --nav-h:64px;
  --pad:clamp(16px,4vw,40px);
  --wrap:1180px;
  --sec:clamp(56px,7.5vw,108px);    /* 큰 섹션 사이 */
  /* 머리 아래 → 페이지 제목(상세도 이 자리에 맞춘다). 낮은 창(1366×657 등)에선 덜 띄워 첫 화면에 사진이 더 들어오게 */
  --head-top:clamp(40px,min(7vw,11vh),96px);
  --ease:cubic-bezier(.2,.7,.2,1);

  /* 글자 크기 — 역할마다 한 벌(폰 390 → 넓은 화면 1440, 그보다 넓어도 그대로). 페이지 <style> 에서 따로 정하지 않는다 */
  --fs-display:clamp(34px,5.6vw,72px);  /* 34 → 72  홈 첫 화면 사진 위 제목만 */
  --fs-h1:clamp(32px,23.1px + 2.286vw,56px);  /* 32 → 56  페이지 제목(홈 말고 전부) — 390~1440 사이를 고르게 키워 태블릿에서도 섹션 제목과 떨어지게 */
  --fs-h2:clamp(26px,2.8vw,40px);       /* 26 → 40  섹션 제목 */
  --fs-h3:clamp(20px,1.7vw,24px);       /* 20 → 24  소제목 · 견적문의 단계 제목 */
  --fs-card:clamp(17px,1.35vw,19px);    /* 17 → 19  카드 제목 · 리드 · 탭 · 창 제목 */
  --fs-sm:16px;                         /* 작은 제목 · 폼 칸 이름 */
  --fs-body:15.5px;                     /* 본문 — 폭 따라 키우지 않는다. 카드 제목(19)·작은 제목(16)과 한 단계 떨어지고 카드 설명이 두 줄에 든다 */
  --fs-meta:14px;                       /* 한 줄 정보 · 캡션 · eyebrow · 폰 메뉴 */
  --fs-fine:13px;                       /* 안내 · 주소 · 꼬리표 */
  /* 버튼 · 칩 · 입력칸 */
  --fs-btn-lg:17px;                     /* 큰 버튼 */
  --fs-btn:16px;                        /* 기본 버튼 · 입력칸(16 아래면 iOS 가 누를 때 화면을 키운다) */
  --fs-btn-sm:15px;                     /* 작은 버튼 · 칩 · 글자 링크 · 넓은 화면 메뉴 */
  /* 제목 → 바로 아래 글 — 제목 단계가 간격을 정한다 */
  --gap-h1:clamp(14px,1.6vw,22px);
  --gap-h2:clamp(10px,1.2vw,16px);
  --gap-card:10px;
}

*{box-sizing:border-box;}
/* .btn 같은 곳의 display가 hidden 속성을 이기지 않도록 */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 12px);}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font); font-weight:400;
  font-size:var(--fs-body); line-height:1.7; letter-spacing:-.01em;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%;}
a{color:inherit;}
b,strong{font-weight:600; color:var(--ink-strong);}
/* 문단 마지막 줄에 한두 글자만 남지 않게(제목은 balance) */
p, li{text-wrap:pretty;}

/* 글자 — 역할마다 한 벌. 굵기는 제목(display·h1·h2·h3) 700, 작은 제목·버튼·탭 600, 칩·메뉴·사진 위 글 500, 글 400. 800 이상은 쓰지 않는다.
   줄 간격은 큰 글일수록 촘촘하게(한글 제목이 헐거워 보이지 않게), 읽는 글은 넉넉하게 */
.t-display{font-size:var(--fs-display); font-weight:700; letter-spacing:-.035em; line-height:1.18; margin:0; color:var(--ink-strong); text-wrap:balance;}
.t-h1{font-size:var(--fs-h1); font-weight:700; letter-spacing:-.03em; line-height:1.2; margin:0; color:var(--ink-strong); text-wrap:balance;}
.t-title-lg{font-size:var(--fs-h2); font-weight:700; letter-spacing:-.03em; line-height:1.3; margin:0; color:var(--ink-strong); text-wrap:balance;}
.t-title-md{font-size:var(--fs-h3); font-weight:700; letter-spacing:-.025em; line-height:1.4; margin:0; color:var(--ink-strong);}
.t-case{font-size:var(--fs-card); font-weight:600; letter-spacing:-.02em; line-height:1.45; margin:0; color:var(--ink-strong);}
.t-lead{font-size:var(--fs-card); font-weight:400; line-height:1.65; margin:0; color:var(--ink-muted); max-width:34em;}   /* 한 줄 45자 안팎 — 긴 리드도 문장 하나가 한 줄에 */
.t-body{font-size:var(--fs-body); font-weight:400; line-height:1.75; margin:0;}
.t-label{font-size:var(--fs-sm); font-weight:600; letter-spacing:-.01em; line-height:1.45; color:var(--ink-strong); margin:0;}
.t-eyebrow{font-size:var(--fs-meta); font-weight:600; letter-spacing:0; color:var(--ink-muted); margin:0 0 12px;}
.t-meta{font-size:var(--fs-meta); font-weight:400; line-height:1.7; color:var(--ink-muted); margin:0;}
.t-fine{font-size:var(--fs-fine); font-weight:400; line-height:1.7; color:var(--ink-muted); margin:0;}
/* 제목 바로 아래 글(리드·본문·한 줄 정보) — 어느 페이지든 제목 단계로 간격이 정해진다 */
:is(.t-display, .t-h1) + :is(.t-lead, .t-body, .cd-sub){margin-top:var(--gap-h1);}
:is(.t-title-lg, .t-title-md) + :is(.t-lead, .t-body, .t-meta){margin-top:var(--gap-h2);}
.t-case + .t-body{margin-top:var(--gap-card);}

.wrap{max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ── 머리 · global-nav ──────────────────────────────────────
   위에 붙어 따라온다. 스크롤하면 아래 선이 생긴다(site.js). */
/* 흐림(backdrop-filter) 없이 불투명한 흰색 — 흐림은 스크롤하는 프레임마다 뒤 화면을 한 번 더 그려 버벅인다.
   반투명으로 두면 흐림 없이 뒤 글자가 또렷하게 비쳐 보여서 다 가린다 */
body > header{position:sticky; top:0; z-index:100;
  background:var(--canvas);
  border-bottom:1px solid transparent; transition:border-color .2s ease;}
body > header.scrolled{border-bottom-color:var(--hairline);}
.global-nav{
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between;
  gap:16px; max-width:var(--wrap); margin:0 auto;
  padding-left:var(--pad); padding-right:var(--pad);
}
.global-nav .mark{font-size:clamp(17px,1.4vw,19px); font-weight:700; text-decoration:none; letter-spacing:-.03em; color:var(--ink-strong); white-space:nowrap;}
/* 로고 이미지 — 글자는 남겨 두고 화면에서만 로고로 바꾼다 */
.global-nav .mark{display:block; flex:none; width:clamp(116px,10.5vw,146px); aspect-ratio:702/142;
  background:url(logo.png) left center/contain no-repeat; font-size:0; line-height:0; color:transparent; overflow:hidden;}
/* 아주 좁은 폰(320~360px)에서는 로고와 메뉴 사이를 줄여 머리가 넘치지 않게 */
@media (max-width:360px){ .global-nav{gap:10px;} .global-nav .mark{width:96px;} .global-nav ul{gap:11px;} }
.global-nav ul{display:flex; align-items:center; gap:clamp(12px,2.2vw,30px); list-style:none; margin:0; padding:0;}
.global-nav a{font-size:var(--fs-meta); font-weight:500; text-decoration:none; color:var(--ink-muted); padding:6px 0; white-space:nowrap;}
.global-nav a:hover{color:var(--ink-strong);}
.global-nav a[aria-current="page"]{color:var(--ink-strong); font-weight:600;}
/* 마지막 메뉴(견적문의)는 옅게 칠한 버튼. 폰에서는 아래 막대가 대신한다 */
@media (min-width:720px){
  .global-nav a{font-size:var(--fs-btn-sm);}   /* 오른쪽 견적문의 버튼이 다른 작은 버튼(.more)과 같은 크기가 되게 */
  .global-nav li:last-child a{background:var(--tint); color:var(--ink-strong); font-weight:600;
    padding:9px 16px; border-radius:var(--r-md);}
  .global-nav li:last-child a:hover{background:var(--tint-hover);}
  /* 화살표 — 누르면 된다는 게 분명하게. 꾸밈이라 화면 읽기에선 대체 글을 비운다(앞 content 는 그 문법을 모르는 브라우저용) */
  .global-nav li:last-child a{display:inline-flex; align-items:center; gap:8px;}
  .global-nav li:last-child a::after{content:"→"; content:"→" / ""; font-weight:500; transition:transform .2s var(--ease);}
  .global-nav li:last-child a:hover::after{transform:translateX(3px);}
}
@media (max-width:380px){ .global-nav ul{gap:10px;} .global-nav a{font-size:var(--fs-fine);} }
/* 폰: 누르는 자리를 높이 44px 로 — 글자 크기·자리는 그대로 두고 여백을 늘린 만큼 음수 여백으로 되돌린다.
   옆으로는 메뉴 사이 간격의 절반까지만(서로 겹치지 않게). 로고는 그림 크기 그대로 상자 높이만 44px */
@media (max-width:719px){
  .global-nav ul a{display:inline-flex; align-items:center; min-height:44px; padding:0 5px; margin:0 -5px;}
  .global-nav .mark{aspect-ratio:auto; height:44px;}
}

/* ── hero — 둥근 사진 카드 위에 굵은 글 ──────────────────────
   글 아래쪽에 어두운 그라데이션을 깔아서 밝은 사진에서도 읽힌다. */
/* 사진 카드는 본문 폭보다 조금 넓게(wrap + 240px) 가운데. 스크롤해도 제자리에 있다 */
.hero{padding:clamp(8px,1.2vw,16px) calc(var(--pad) + max(0px, (100% - var(--wrap) - 240px) / 2)) 0;}
.hero-card{position:relative; border-radius:var(--r-hero); overflow:hidden; background:var(--surface);
  aspect-ratio:16/9; max-height:calc(100vh - var(--nav-h) - 40px); min-height:420px; isolation:isolate;
  max-width:100%;    /* 721~830px 폭에서 min-height 가 비율을 타고 폭을 늘려 화면 밖으로 넘치지 않게 */
  margin-inline:auto;}   /* 낮은 창(1366x657 등)에서 높이 제한으로 폭이 줄면 한쪽에 붙지 않고 가운데 */
.hero-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
/* 어두운 겹은 사진을 감싼 hero-media 에 */
.hero-media{position:absolute; inset:0;}
.hero-media::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(30,26,22,0) 38%, rgba(30,26,22,.58) 100%);}
.hero-text{position:absolute; z-index:2; left:0; right:0; bottom:0; --hp:clamp(24px,4.4vw,64px); padding:var(--hp); color:#fff;}
/* 글 뒤에만 옅은 그늘 한 겹 — 제목 첫 줄이 밝은 창·벽 위에 와도 읽히게(사진 전체는 어둡게 하지 않는다).
   제목 위로 부드럽게 번지고 글 오른쪽과 아래에서 사라진다. em 은 제목 글자 크기.
   그늘 상자는 양옆(--xs)·아래(--xb)로 늘려 그리고 글 상자 자리로 잘라 둔다(그라데이션 끝이 카드 아래끝보다 아래에 있어 끝까지 옅게 남는다) */
.hero-text::before{content:""; position:absolute; z-index:-1; pointer-events:none;
  font-size:var(--fs-display); --xs:50vw; --xb:120px;
  --r:calc(1.8em + var(--hp)); --cw:calc(var(--hp) + max(5.4em, 260px));
  top:-1.6em; left:calc(-1 * var(--xs)); right:calc(-1 * var(--xs)); bottom:calc(-1 * var(--xb));
  background:linear-gradient(180deg, rgba(30,26,22,0) 0, rgba(30,26,22,.14) calc(var(--r) * .45), rgba(30,26,22,.32) calc(var(--r) * .8),
    rgba(30,26,22,.4) var(--r), rgba(30,26,22,.4) calc(100% - var(--hp) - var(--xb)),
    rgba(30,26,22,.18) calc(100% - (var(--hp) + var(--xb)) * .5), rgba(30,26,22,0) 100%);
  -webkit-mask-image:linear-gradient(90deg, #000 calc(var(--xs) + var(--cw)), transparent calc(var(--xs) + var(--cw) * 1.9));
          mask-image:linear-gradient(90deg, #000 calc(var(--xs) + var(--cw)), transparent calc(var(--xs) + var(--cw) * 1.9));
  clip-path:inset(0 var(--xs) var(--xb) var(--xs) round 0 0 var(--r-hero) var(--r-hero));}
.hero-text .t-display{color:#fff;}
/* 사진 위 한 줄 — 본문 크기로 사진을 덜 가리고, 흰 글이 얇아 보이지 않게 500 */
.hero-text .t-body{color:rgba(255,255,255,.88); max-width:40ch; font-weight:500;}
@media (max-width:720px){ .hero-card{aspect-ratio:4/5; min-height:0; max-height:none;} }

/* ── 페이지 머리(홈 말고) ─────────────────────────────────── */
.page-head{padding-top:var(--head-top); padding-bottom:clamp(8px,2vw,24px);}
.page-head.center .t-lead{margin-left:auto; margin-right:auto;}

/* ── 사진 자리(아직 사진이 없을 때) ───────────────────────── */
.ph{background:var(--surface); display:flex; align-items:center; justify-content:center; border-radius:var(--r-card);}
.ph span{font-size:var(--fs-fine); color:var(--ink-muted);}

/* ── card — 시공사례 목록. 2열, 사진 3:2, 둥근 모서리 ──────── */
.case-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,4vw,52px) clamp(16px,2.4vw,28px); list-style:none; margin:0; padding:0;}
.card{display:block; text-decoration:none; color:inherit;}
.card .photo{border-radius:var(--r-card); overflow:hidden; background:var(--surface); isolation:isolate;}
.card img, .card .ph{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-card);}
.card .photo img{border-radius:0; transition:transform .7s var(--ease);}
a.card:hover .photo img{transform:scale(1.035);}
.card .t-case{margin-top:16px;}
.card .t-meta{margin-top:4px;}
@media (max-width:640px){ .case-grid{grid-template-columns:1fr;} }

/* ── chip — 폼 선택지 ─────────────────────────────────────── */
.chip-row{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;}
.chip{
  appearance:none; font:inherit; font-size:var(--fs-btn-sm); font-weight:500; letter-spacing:-.01em;
  padding:10px 16px; border:1px solid var(--hairline); border-radius:var(--r-sm);
  background:var(--canvas); color:var(--ink); cursor:pointer; line-height:1.3;
}
.chip:hover{border-color:var(--line-strong);}
.chip{position:relative;}
.chip::after{content:""; position:absolute; inset:-3px 0;}   /* 누르는 자리 44px 안팎 — 칩 사이 8px 안이라 서로 겹치지 않는다 */
.chip[aria-pressed="true"]{background:var(--ink-strong); border-color:var(--ink-strong); color:#fff;}

/* ── tab — 글자 탭(목록 평대 · 상세 공간) ─────────────────────
   테두리 없이 글자만. 고른 것만 진한 글자 + 아래 3px 줄, 줄 아래는 탭 줄 폭의 헤어라인 하나.
   굵기는 모두 600 — 고를 때 굵기가 바뀌면 글자 폭이 달라져 줄이 흔들린다
   고른 줄이 헤어라인을 덮도록 헤어라인은 감싼 nav 에, 탭 줄(ul)은 넘치면 옆으로 민다(폰) */
.tabs{position:relative;}
.tabs::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--hairline);}
.tab-row{display:flex; gap:clamp(20px,2.4vw,32px); list-style:none; margin:0 -6px; padding:0;
  overflow-x:auto; scrollbar-width:none;}
.tab-row::-webkit-scrollbar{display:none;}
.tab-row li{flex:none;}
/* 옆 6px 은 초점 테두리 자리 — 탭 줄 바깥 여백(-6px)으로 글자는 제목과 같은 선에 선다 */
.tab{appearance:none; position:relative; display:block; margin:0; border:0; border-radius:6px; background:none; cursor:pointer;
  padding:15px 6px 16px; font:inherit; font-size:var(--fs-card); font-weight:600; letter-spacing:-.015em; line-height:1.3;
  color:var(--ink-muted); text-decoration:none; white-space:nowrap;}
.tab::after{content:""; position:absolute; z-index:1; left:6px; right:6px; bottom:0; height:3px; background:transparent;}
.tab:hover{color:var(--ink);}
.tab[aria-current], .tab[aria-pressed="true"]{color:var(--ink-strong);}
.tab[aria-current]::after, .tab[aria-pressed="true"]::after{background:var(--ink-strong);}
.tab:focus-visible{outline-offset:-2px;}   /* 미는 줄 안이라 바깥으로 그리면 위아래가 잘린다 */
@media (max-width:719px){
  .tab-row{gap:clamp(16px,5vw,24px); margin:0 calc(var(--pad) * -1); padding:0 calc(var(--pad) - 6px); scroll-padding-inline:var(--pad);}
}

/* ── button ─────────────────────────────────────────────────
   기본은 진한 먹색 채움. 옅게 칠한 버튼(btn-tint)이 두 번째. 테두리만 있는 알약 버튼은 쓰지 않는다 */
.btn{
  appearance:none; font:inherit; font-size:var(--fs-btn); font-weight:600; letter-spacing:-.01em; cursor:pointer;
  min-height:48px; padding:0 22px; border-radius:var(--r-md); text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--ink-strong); background:var(--ink-strong); color:#fff; white-space:nowrap;
}
.btn:hover{background:#1F1B18; border-color:#1F1B18;}
.btn:disabled{opacity:.55; cursor:default;}
.btn-lg{min-height:56px; padding:0 30px; font-size:var(--fs-btn-lg);}
.btn-tint{background:var(--tint); border-color:transparent; color:var(--ink-strong);}
.btn-tint:hover{background:var(--tint-hover); border-color:transparent;}

/* 끊기면 어색한 묶음은 한 줄로 */
.nw{white-space:nowrap;}

/* ── point-grid — 한 줄 제목 + 짧은 설명 카드 묶음 ─────────── */
.point-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(12px,1.6vw,20px);}
.point{background:var(--canvas-ivory); border-radius:var(--r-card); padding:clamp(24px,2.8vw,36px);}
.point .t-body{color:var(--ink-muted);}
/* 장 수가 정해진 묶음 — auto-fit 이면 768px 안팎에서 2칸 + 1장이 남는다 */
.point-grid.three{grid-template-columns:1fr;}
@media (min-width:980px){ .point-grid.three{grid-template-columns:repeat(3,1fr);} }
.point-grid.two{grid-template-columns:1fr;}
@media (min-width:720px){ .point-grid.two{grid-template-columns:repeat(2,1fr);} }

/* ── quote-panel — 견적문의 ──────────────────────────────── */
.quote-panel{background:var(--canvas-ivory); padding:clamp(22px,3.4vw,44px); border-radius:var(--r-card);}
/* 단계 제목은 소제목 — 칸 이름(16 · 600)과 크기·굵기 모두 한 단계 떨어지게 */
.step-of{font-size:var(--fs-h3); font-weight:700; letter-spacing:-.025em; line-height:1.4; color:var(--ink-strong); margin:0 0 14px;}
.field + .field{margin-top:28px;}
/* 두 칸 줄(평수·층수, 이름·연락처) 앞뒤에도 같은 간격. 없으면 폰에서 칸과 다음 제목이 붙는다 */
.field + .field-row, .field-row + .field{margin-top:28px;}
.field > .t-label{display:block; margin-bottom:10px;}
.t-label .opt{font-weight:400; color:var(--ink-muted);}   /* '(선택)' 같은 덧말 */
.text-input{
  width:100%; font:inherit; font-size:var(--fs-btn); color:var(--ink-strong);
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:var(--r-md); padding:13px 15px; line-height:1.4;
}
.text-input::placeholder{color:var(--ink-muted); opacity:.7;}
.text-input:focus{outline:none; border-color:var(--ink-strong); box-shadow:0 0 0 3px var(--tint);}
textarea.text-input{resize:vertical; min-height:96px; line-height:1.7;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:640px){ .field-row{grid-template-columns:1fr;} }
/* 날짜 칸 묶음 안내 */
.date-note, .att-note{font-size:var(--fs-fine); line-height:1.7; color:var(--ink-muted); margin:12px 0 0; max-width:60ch;}

/* ── footer ─────────────────────────────────────────────── */
.site-footer{background:var(--canvas-ivory); margin-top:0; padding:clamp(32px,4.4vw,52px) 0;}
.site-footer .wrap > * + *{margin-top:6px;}
.site-footer .wrap > .legal{margin-top:14px;}   /* 처리방침 링크는 사업자 정보와 한 칸 띄운다 */
.site-footer a{color:var(--ink-muted); text-decoration:none;}
.site-footer a:hover{color:var(--ink);}
/* 폰: 전화·메일·처리방침 링크의 누르는 자리를 높이 44px 로(글자 자리는 그대로). 그 줄 위 간격을 넓혀 주소 줄과 겹치지 않게 */
@media (max-width:719px){
  .site-footer a{display:inline-block; padding:11px 0; margin:-11px 0;}
  .site-footer .wrap > p:has(a[href^="tel:"]){margin-top:12px;}
}

/* ── 섹션 여백 ──────────────────────────────────────────── */
.sec{padding-top:var(--sec);}
.sec-head{margin-bottom:clamp(22px,3vw,40px);}
.sec-head:last-child{margin-bottom:0;}   /* 제목과 리드만 있는 섹션 */
.sec-head.center{text-align:center;}
.sec-head.center .t-lead, .sec-head.center .t-meta{margin-left:auto; margin-right:auto;}

:where(a,button,input,textarea,[tabindex]):focus-visible{outline:2px solid var(--ink-strong); outline-offset:2px;}
@media (prefers-reduced-motion:no-preference){
  .chip,.tab,.btn,.global-nav a,.text-input{transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;}
}

/* 안내 상자 — privacy.html 의 .todo 와 같은 모양 */
.todo{background:var(--canvas-ivory); padding:16px 18px; margin:6px 0 0; border-radius:var(--r-card);}
.todo p{font-size:var(--fs-meta); color:var(--ink); margin:0; line-height:1.7; word-break:keep-all;}
.todo b{font-weight:600;}

/* ── 페이지마다 맨 아래 견적문의 ────────────────────────────
   폭 가득 아이보리를 바로 아래 바닥글과 한 바탕으로 잇고, 둘 사이는 가는 선 하나로만 나눈다.
   왼쪽 큰 두 줄 제목 + 버튼, 오른쪽 문의 · 첫 상담 · 견적서 세 줄(진행과정에 있는 사실만).
   번호는 달지 않는다(읽기를 방해해서). 전화번호는 넣지 않는다. */
.page-cta{margin-top:var(--sec); background:var(--canvas-ivory); padding:clamp(56px,7vw,104px) 0;}
/* 제목은 본문 왼쪽 끝, 세 줄은 오른쪽 끝까지 — 위 카드·아래 바닥글 선과 같은 가장자리에 선다.
   세 줄은 2열 카드(.case-grid)의 오른쪽 칸 자리에서 시작하고, 좁은 화면에서도 480px 은 지켜 한 줄씩 읽힌다. 세로는 서로 가운데 */
.page-cta .cta-box{display:grid; grid-template-columns:minmax(0,1fr) minmax(480px,1fr); align-items:center;
  gap:28px clamp(16px,2.4vw,28px);}
.page-cta .btns{margin:clamp(24px,2.6vw,32px) 0 0; display:flex;}
.page-cta .btn{min-height:52px; padding:0 24px 0 28px;}
.page-cta .btn::after{content:"→"; content:"→" / ""; font-weight:500; transition:transform .2s var(--ease);}
.page-cta .btn:hover::after{transform:translateX(3px);}
/* 세 줄 — 위아래 선 모두 같은 헤어라인. 이름 칸은 좁게, 이름과 설명은 같은 글자 밑선 */
.cta-steps{list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline);}
.cta-steps li{display:grid; grid-template-columns:4em minmax(0,1fr); column-gap:clamp(12px,1.2vw,16px);
  align-items:baseline; padding:clamp(16px,1.7vw,21px) 0; border-bottom:1px solid var(--hairline);}
.cta-steps .k{font-size:var(--fs-sm); font-weight:600; letter-spacing:-.02em; line-height:1.45; color:var(--ink-strong);}
.cta-steps p{margin:0; font-size:var(--fs-body); line-height:1.75; color:var(--ink-muted); word-break:keep-all;}
/* 바닥글과 한 바탕 — 위 여백 대신 가는 선 하나 */
.page-cta + .site-footer{padding-top:0;}
.page-cta + .site-footer .wrap::before{content:""; display:block; border-top:1px solid var(--hairline); margin-bottom:clamp(28px,3.6vw,44px);}
@media (max-width:899px){
  .page-cta .cta-box{grid-template-columns:minmax(0,1fr);}
  /* 폰: 제목 → 세 줄 → 버튼 순서로 읽고 누르게 */
  .page-cta .cta-head{display:contents;}
  .page-cta h2{order:1;} .cta-steps{order:2;} .page-cta .btns{order:3; margin-top:4px;}
}

/* ── 자주 묻는 질문 목록(옆 창 안) ───────────────────────── */
.qa-list{border-top:1px solid var(--hairline);}
.qa-item{padding:clamp(18px,2.4vw,24px) 0; border-bottom:1px solid var(--hairline);}
.qa-item .q{margin:0; font-size:var(--fs-sm); font-weight:600; letter-spacing:-.02em; color:var(--ink-strong);
            max-width:56ch; word-break:keep-all; line-height:1.45;}
.qa-item .a{margin:8px 0 0; font-size:var(--fs-body); line-height:1.75; color:var(--ink-muted);
            max-width:62ch; word-break:keep-all;}

/* ── 날짜 고르기 ─────────────────────────────────────────────
   type="date" 는 브라우저 언어를 따라가서 영어 환경에서 mm/dd/yyyy 로 뜬다.
   어디서나 연-월-일로 보이게 직접 만든다. */
.date-field{position:relative;}
.date-field .text-input{cursor:pointer;}
.cal{position:absolute; z-index:30; top:calc(100% + 8px); left:0;
     width:min(320px, calc(100vw - 48px)); background:var(--canvas);
     border:1px solid var(--hairline); padding:14px; border-radius:var(--r-card);
     box-shadow:0 12px 36px rgba(46,41,36,.14);}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.cal-head .t{font-size:var(--fs-sm); font-weight:600; color:var(--ink-strong); font-variant-numeric:tabular-nums;}
.cal-nav{width:34px; height:34px; border:none; background:var(--tint);
         border-radius:var(--r-sm); color:var(--ink-strong); font-size:var(--fs-btn-sm); line-height:1; cursor:pointer;}
.cal-nav:hover{background:var(--tint-hover);}
.cal-nav{position:relative;}
.cal-nav::after{content:""; position:absolute; inset:-5px;}   /* 누르는 자리 44px — 보이는 크기는 34px 그대로 */
.cal-dow,.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.cal-dow span{text-align:center; font-size:var(--fs-fine); color:var(--ink-muted); padding:4px 0;}
.cal-grid button{height:38px; border:none; background:none; cursor:pointer;
                 font-size:var(--fs-meta); color:var(--ink-strong); border-radius:var(--r-sm);
                 font-variant-numeric:tabular-nums;}
.cal-grid button:hover{background:var(--tint);}
.cal-grid button[aria-selected="true"]{background:var(--ink-strong); color:#fff;}
.cal-grid button:disabled{color:var(--hairline); cursor:default; background:none;}
.cal-grid .pad{height:38px;}
.cal-foot{display:flex; justify-content:space-between; align-items:center;
          margin-top:10px; padding-top:9px; border-top:1px solid var(--hairline);}
/* '오늘' · '지우기' — 글자는 작게 두고 누르는 자리만 44px(늘린 만큼 음수 여백이라 달력 크기는 그대로) */
.cal-foot button{background:none; border:none; cursor:pointer; font-size:var(--fs-fine);
                 color:var(--ink-muted); min-height:44px; padding:0 12px; margin:-12px -12px;}
.cal-foot button:hover{color:var(--ink); text-decoration:underline;}

/* ═══ 공통 부품 — site.js 가 붙인다 ═══════════════════════ */

/* 움직임은 절제 — 한 화면에 하나.
   ① 스크롤: 섹션마다 한 번, 화면에 들어올 때 옅게 나타난다(제목 줄 나누기·사진 확대·카드 차례·사진 띠 흐름 없음).
      처음 화면에 보이는 것은 숨기지 않는다 — site.js 가 화면 아래에 있는 [data-reveal] 에만 .rv-wait 를 붙인다.
      자바스크립트가 안 돌면 전부 그대로 보인다.
   ② 첫 화면: 한 가지만. 큰 첫 사진이 있는 페이지(홈·소개·시공사례 상세)는 사진이 살짝 줄어들며 자리잡고,
      나머지는 페이지 머리 글이 옅게 나타난다(소개는 about.html 에서 머리 움직임을 끈다).
   움직임 줄이기 설정이면 전부 끈다 */
@media (prefers-reduced-motion:no-preference){
  .rv-wait{opacity:0; transform:translateY(14px);}
  .rv-in{transition:opacity .8s var(--ease), transform .8s var(--ease);}
  /* fill 은 backwards — 끝난 뒤 요소가 따로 겹을 만들어 안쪽 달력·드롭다운이 가려지는 일이 없게 */
  .hero-card img{animation:zd-hero-img 1.6s var(--ease) backwards;}
  .page-head{animation:zd-fade .7s var(--ease) backwards;}
}
@keyframes zd-hero-img{from{transform:scale(1.07);} to{transform:scale(1);}}
@keyframes zd-fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* 폰: 아래에 늘 붙어 있는 막대 — [자주 묻는 질문] [견적문의] */
.m-bar{position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; gap:8px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background:var(--canvas);   /* 머리와 같은 까닭으로 흐림 없이 불투명 */
  border-top:1px solid var(--hairline);}
.m-bar .btn{min-height:52px;}
.m-bar .btn-tint{flex:0 0 auto; padding:0 16px;}
.m-bar .btn:not(.btn-tint){flex:1;}
/* 맨 아래 견적문의 상자나 바닥글이 보이는 동안은 아래로 비켜 준다(site.js) — 같은 '견적문의'가 한 화면에 두 번 보이지 않게.
   그래서 막대 높이만큼 페이지 아래를 비워 둘 필요가 없다. 비키기를 못 하는 옛 브라우저만 비워 둔다(mbar-pad) */
.m-bar{transition:transform .28s var(--ease), visibility 0s;}
.m-bar.away{transform:translateY(calc(100% + 1px)); visibility:hidden;
  transition:transform .28s var(--ease), visibility 0s .28s;}
body.mbar-pad{padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px));}
/* 넓은 화면: 오른쪽 아래 떠 있는 '자주 묻는 질문' 버튼. 견적문의는 머리 오른쪽 버튼이 맡는다 */
.faq-fab{position:fixed; right:clamp(16px,2.4vw,32px); bottom:clamp(16px,2.4vw,32px); z-index:90;
  min-height:48px; padding:0 20px; border-radius:999px; border:none; cursor:pointer;
  font:inherit; font-size:var(--fs-btn-sm); font-weight:600; color:#fff; background:var(--ink-strong);
  box-shadow:0 8px 28px rgba(46,41,36,.22); display:inline-flex; align-items:center; gap:8px;}
.faq-fab:hover{background:#1F1B18;}
.faq-fab{transition:opacity .25s ease, transform .25s var(--ease), visibility 0s;}
/* 비켜 있는 동안은 초점·읽기에서도 빠진다(투명만 하면 Tab 이 보이지 않는 버튼에 선다). 숨김은 사라지는 움직임이 끝난 뒤에 */
.faq-fab.away{opacity:0; transform:translateY(10px); pointer-events:none; visibility:hidden;
  transition:opacity .25s ease, transform .25s var(--ease), visibility 0s .25s;}
.faq-fab .q-ico{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.18); font-size:var(--fs-fine); font-weight:700;}
@media (max-width:719px){ .faq-fab{display:none;} }
@media (min-width:720px){ .m-bar{display:none;} body.mbar-pad{padding-bottom:0;} }
@media (prefers-reduced-motion:reduce){ .m-bar, .m-bar.away, .faq-fab, .faq-fab.away{transition:none;} }

/* 자주 묻는 질문 옆 창 — 넓은 화면은 오른쪽에서, 폰은 아래에서 올라온다 */
.faq-scrim{position:fixed; inset:0; z-index:200; background:rgba(30,26,22,.36); opacity:0; pointer-events:none;
  transition:opacity .3s ease;}
.faq-panel{position:fixed; z-index:201; top:0; right:0; bottom:0; width:min(460px,100%);
  background:var(--canvas); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .38s var(--ease); visibility:hidden;
  box-shadow:-16px 0 48px rgba(46,41,36,.12);}
.faq-open .faq-scrim{opacity:1; pointer-events:auto;}
.faq-open .faq-panel{transform:none; visibility:visible;}
.faq-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px 14px 24px; border-bottom:1px solid var(--hairline);}
.faq-head h2{margin:0; font-size:var(--fs-card); font-weight:600; letter-spacing:-.02em; line-height:1.45; color:var(--ink-strong);}
.faq-close{width:40px; height:40px; border:none; border-radius:var(--r-sm); background:var(--tint);
  color:var(--ink-strong); font-size:20px; line-height:1; cursor:pointer;}   /* × 기호 — 글이 아니라 아이콘 크기 */
.faq-close:hover{background:var(--tint-hover);}
.faq-body{overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 24px 24px; flex:1;}
/* 목록 칸은 Tab 으로 들어가 화살표·스페이스로 내린다. 초점 테두리는 사이트와 같은 먹색, 칸 안쪽에 둥글게(공간 탭과 같은 모양) */
.faq-body:focus-visible{outline-offset:-2px; border-radius:6px;}
.faq-body .qa-list{border-top:none;}
.faq-foot{padding:14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--hairline);}
.faq-foot .btn{width:100%;}
@media (max-width:719px){
  .faq-panel{top:auto; left:0; width:100%; height:86vh; height:86dvh; border-radius:22px 22px 0 0;
    transform:translateY(100%); box-shadow:0 -16px 48px rgba(46,41,36,.14);}
  /* 머리 줄(손잡이 막대)을 끌어내리면 창이 닫힌다(site.js) — 브라우저가 그 손가락을 스크롤로 가져가지 않게 */
  .faq-head{padding:10px 16px 12px 20px; position:relative; touch-action:none;}
  .faq-head::before{content:""; position:absolute; top:7px; left:50%; width:40px; height:4px; margin-left:-20px;
    border-radius:4px; background:var(--hairline);}
  .faq-head h2{padding-top:10px;}
  .faq-body{padding:0 20px 20px;}
}
@media (prefers-reduced-motion:reduce){ .faq-panel,.faq-scrim{transition:none;} }
/* body 는 clip — hidden 이면 body 가 스크롤 칸이 되어 머리(sticky)가 창을 여는 동안 제자리를 잃는다.
   clip 을 모르는 옛 브라우저는 hidden 그대로 */
html.faq-lock{overflow:hidden;}
html.faq-lock body{overflow:hidden; overflow:clip;}

/* ═══ 홈 섹션 부품 ═══════════════════════════════════════ */

/* 섹션 머리 옆 작은 링크 버튼 */
.more{display:inline-flex; align-items:center; gap:6px; margin-top:clamp(18px,2.2vw,26px);
  font-size:var(--fs-btn-sm); font-weight:600; color:var(--ink-strong); text-decoration:none;
  background:var(--tint); padding:10px 16px; border-radius:var(--r-md);}
.more:hover{background:var(--tint-hover);}
.more::after{content:"→"; content:"→" / ""; font-weight:500;}

/* 현장 사진 줄 — 넓은 화면 4열, 폰은 옆으로 넘겨 보기 */
.rail{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,20px); list-style:none; margin:0; padding:0;}
.rail a{display:block; text-decoration:none; color:inherit;}
.rail .photo{border-radius:var(--r-card); overflow:hidden; background:var(--surface); aspect-ratio:1/1; isolation:isolate;}
.rail .photo img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease);}
.rail a:hover .photo img{transform:scale(1.04);}
/* 사진 아래 이름 — 상세 '다른 시공사례'(.cd-rail)도 같은 모양 */
:is(.rail, .cd-rail) .cap{margin:12px 0 0; font-size:var(--fs-sm); font-weight:600; color:var(--ink-strong); letter-spacing:-.02em; line-height:1.45;}
:is(.rail, .cd-rail) .cap span{display:block; font-size:var(--fs-meta); font-weight:400; letter-spacing:-.01em; line-height:1.7; color:var(--ink-muted); margin-top:2px;}
/* 같은 단지 다른 집 표시('· 두 번째 집') — 이름 옆에 작고 흐리게, 줄이 바뀌어도 한 덩어리로 */
:is(.rail, .cd-rail) .cap .nth{font-style:normal; font-weight:500; color:var(--ink-muted); font-size:.9em; white-space:nowrap;}
@media (max-width:900px){ .rail{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){
  .rail{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px;
        margin:0 calc(var(--pad) * -1); padding:0 var(--pad) 6px; scrollbar-width:none;
        scroll-padding-inline:var(--pad);}   /* 없으면 첫 장이 화면 왼쪽 끝에 붙어 멈춘다 */
  .rail::-webkit-scrollbar{display:none;}
  .rail li{flex:0 0 72%; scroll-snap-align:start;}
  .rail .photo{aspect-ratio:4/5;}
}

/* 대화 — 사진 한 장 + 말풍선 */
.talk{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,4vw,64px); align-items:center;}
.talk .photo{border-radius:var(--r-card); overflow:hidden; aspect-ratio:1/1; background:var(--surface);}
.talk .photo img{width:100%; height:100%; object-fit:cover;}
.bubbles{display:flex; flex-direction:column; gap:10px; margin-top:clamp(22px,3vw,34px);}
.bubble{margin:0; align-self:flex-start; max-width:92%; background:var(--canvas-ivory); color:var(--ink-strong);
  font-size:clamp(var(--fs-sm),1.35vw,var(--fs-card)); font-weight:500; line-height:1.5; padding:14px 18px;   /* 넓은 화면은 카드 제목 크기, 폰은 16 — 긴 질문도 한 줄에 */
  border-radius:20px 20px 20px 6px;}
@media (max-width:820px){ .talk{grid-template-columns:1fr;} .talk .photo{aspect-ratio:3/2;} }

/* 진행과정 요약 — 네 묶음 */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.4vw,16px); list-style:none; margin:0; padding:0;}
.flow li{background:var(--canvas-ivory); border-radius:var(--r-card); padding:clamp(22px,2.4vw,30px);}
/* 네 묶음 이름은 진행과정 '한눈에 보기'(.proc-map .g)와 같은 카드 제목 */
.flow .h{display:block; font-size:var(--fs-card); font-weight:600; letter-spacing:-.02em; line-height:1.45; color:var(--ink-strong);}
.flow .d{margin:var(--gap-card) 0 0; font-size:var(--fs-body); line-height:1.75; color:var(--ink-muted);}
@media (max-width:900px){ .flow{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .flow{grid-template-columns:1fr;} }

/* 넓은 사진 띠 + 한쪽에 얹은 글 상자 — 사진은 어둡게 덮지 않는다(밝은 사진이 탁해져서).
   글은 아이보리 상자에 먹색으로. 넓은 화면은 오른쪽(빈 벽 쪽), 900px 아래는 사진 아래 */
.band-photo{position:relative; border-radius:var(--r-hero); overflow:hidden; min-height:clamp(440px,40vw,540px);
  display:flex; align-items:center; justify-content:flex-end; isolation:isolate; background:var(--surface);}
.band-photo .band-img{position:absolute; inset:0; z-index:-2;}
/* 사진은 왼쪽을 3px 띠 밖으로 — 사진 왼쪽 끝 2px 짙은 세로줄이 폭에 맞춰 그리는 화면에서 갈색 선으로 보여서 */
.band-photo img{position:absolute; top:0; bottom:0; left:-3px; width:calc(100% + 3px); max-width:none; height:100%;
  object-fit:cover; object-position:22% 50%;}
.band-photo .txt{margin:clamp(12px,1.8vw,24px); width:min(468px, 50%);   /* 상자가 사진(창)을 절반 넘게 덮지 않게 */
  padding:clamp(24px,2.8vw,38px) clamp(24px,2.8vw,40px);
  background:var(--canvas-ivory); border-radius:var(--r-card);}
.band-photo .t-body{color:var(--ink-muted);}
/* 폰·태블릿 세로: 사진을 위에 두고 글 상자를 사진 아래에 살짝 겹쳐 잇는다 — 세로로 긴 띠에 사진을 채우면 천장만 크게 보이고,
   900px 아래에서 상자를 사진 위에 얹으면 창을 거의 다 가려서. 태블릿은 사진 비율(3:2) 그대로 창이 다 보이게 */
@media (max-width:899px){
  .band-photo{display:block; min-height:0; background:var(--canvas-ivory);}
  .band-photo .band-img{position:relative; aspect-ratio:3/2;}
  .band-photo .txt{position:relative; width:auto; margin:-26px 0 0; padding:28px 22px 26px;}
}
@media (max-width:719px){ .band-photo .band-img{aspect-ratio:5/4;} }

/* 왼쪽 섹션 표시 — 번호 목록. 지금 보는 섹션만 번호가 진해지고 이름이 붙는다.
   본문에 닿지 않을 만큼 넓은 화면(1440px~)에서만. 그래도 가장 긴 이름과 본문 왼쪽 끝이 24px 안쪽이거나,
   본문보다 넓은 첫 화면 사진이 그 높이를 지나는 동안은 site.js 가 숨긴다 */
.sec-dots{position:fixed; left:clamp(16px,2vw,32px); top:50%; transform:translateY(-50%); z-index:80;
  list-style:none; margin:0; padding:0 0 0 14px; display:flex; flex-direction:column; gap:12px;
  border-left:1px solid var(--hairline); opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .3s ease, visibility 0s .3s;}   /* 숨어 있는 동안은 Tab 도 서지 않게 — 숨김은 사라지는 움직임이 끝난 뒤에 */
.sec-dots.show{opacity:1; pointer-events:auto; visibility:visible; transition:opacity .3s ease, visibility 0s;}
.sec-dots a{display:flex; align-items:baseline; gap:10px; text-decoration:none; position:relative;}
.sec-dots b{font-size:var(--fs-fine); font-weight:600; color:var(--line-strong); font-variant-numeric:tabular-nums; letter-spacing:.02em; transition:color .25s ease;}
.sec-dots span{font-size:var(--fs-fine); font-weight:600; color:var(--ink-strong); opacity:0; transform:translateX(-4px); transition:opacity .25s ease, transform .25s ease; white-space:nowrap;}
.sec-dots a::before{content:""; position:absolute; left:-15px; top:2px; bottom:2px; width:2px; border-radius:2px; background:transparent; transition:background .25s ease;}
.sec-dots a:hover b{color:var(--ink);}
.sec-dots a.on b{color:var(--ink-strong);}
.sec-dots a.on span{opacity:1; transform:none;}
.sec-dots a.on::before{background:var(--ink-strong);}
@media (max-width:1439px){ .sec-dots{display:none;} }
@media (prefers-reduced-motion:reduce){ .sec-dots span{transition:none;} }