/* 집담공간 — 공통 스타일
 * 값의 정본은 DESIGN.md. 여기 있는 숫자를 바꾸려면 DESIGN.md도 같이 고칠 것.
 * 7개 페이지가 이 파일 하나를 쓴다. 페이지마다 <style>을 다시 쓰지 말 것.
 * 다크모드 없음 — 넣지 말 것(CLAUDE.md).
 */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.css");

:root{
  /* colors.* */
  --canvas:#FFFFFF;
  --canvas-ivory:#FAF7F2;
  --ink:#4C453C;
  --ink-muted:#736B61;
  --hairline:#E6E0D7;
  --line-strong:#958C80;

  /* radius.* — 버튼·칩만 2px, 나머지 0 */
  --r-control:2px;

  --font:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,
         "Apple SD Gothic Neo","Malgun Gothic",sans-serif;

  --nav-h:72px;
  --pad:clamp(18px,4vw,40px);
  --wrap:1180px;
}

*{box-sizing:border-box;}
/* .btn 같은 곳의 display가 hidden 속성을 이기지 않도록 */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font); font-weight:400;
  font-size:clamp(15px,1.1vw,16px); line-height:1.8;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%;}
a{color:inherit;}

/* typography.* — 굵기는 400/500만. 700 이상 쓰지 말 것 */
.t-display{font-size:clamp(30px,4.2vw,48px); font-weight:500; letter-spacing:-.02em; line-height:1.3; margin:0;}
.t-title-lg{font-size:clamp(24px,2.6vw,32px); font-weight:500; letter-spacing:-.01em; line-height:1.4; margin:0;}
.t-title-md{font-size:clamp(21px,1.9vw,26px); font-weight:500; line-height:1.5; margin:0;}
.t-case{font-size:clamp(17px,1.4vw,19px); font-weight:500; line-height:1.5; margin:0;}
.t-body{font-size:clamp(15px,1.1vw,16px); font-weight:400; line-height:1.8; margin:0;}
.t-meta{font-size:14px; font-weight:400; color:var(--ink-muted); line-height:1.7; margin:0;}
.t-label{font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--ink-muted); margin:0;}
.t-fine{font-size:12px; font-weight:400; color:var(--ink-muted); line-height:1.7; margin:0;}

.wrap{max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}
.stack > * + *{margin-top:var(--gap,14px);}

/* ── global-nav ─────────────────────────────────────────── */
.global-nav{
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between;
  gap:20px; 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:500; text-decoration:none; letter-spacing:-.01em;}
.global-nav ul{display:flex; gap:clamp(14px,2.2vw,30px); list-style:none; margin:0; padding:0;}
.global-nav a{font-size:clamp(14px,1vw,15px); font-weight:400; text-decoration:none; color:var(--ink-muted); padding:4px 0;}
.global-nav a:hover{color:var(--ink);}
.global-nav a[aria-current="page"]{color:var(--ink); border-bottom:1px solid var(--ink);}

/* ── hero ───────────────────────────────────────────────── */
.hero-photo{width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--hairline);}
.hero-caption{padding-top:clamp(20px,3vw,32px); max-width:44ch;}
.hero-caption .t-body{margin-top:12px; color:var(--ink-muted);}

/* ── 사진 자리(아직 사진이 없을 때) ───────────────────────── */
.ph{background:var(--hairline); display:flex; align-items:center; justify-content:center;}
.ph span{font-size:12px; color:var(--ink-muted);}

/* ── card — 시공사례 목록. 2열, 사진 3:2 ──────────────────── */
.case-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px) clamp(16px,2.4vw,32px); list-style:none; margin:0; padding:0;}
.card{display:block; text-decoration:none;}
.card img, .card .ph{width:100%; aspect-ratio:3/2; object-fit:cover;}
.card .t-case{margin-top:14px;}
.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:13px; font-weight:500; letter-spacing:.02em;
  padding:7px 14px; border:1px solid var(--line-strong); border-radius:var(--r-control);
  background:var(--canvas); color:var(--ink-muted); cursor:pointer;
}
.chip:hover{color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--canvas);}

/* ── button ─────────────────────────────────────────────── */
.btn{
  appearance:none; font:inherit; font-size:14px; font-weight:500; cursor:pointer;
  padding:11px 20px; border-radius:var(--r-control); text-decoration:none;
  display:inline-block; border:1px solid var(--ink); background:var(--ink); color:var(--canvas);
}
.btn:hover{background:#3C362F; border-color:#3C362F;}
.btn-line{background:var(--canvas); color:var(--ink);}
.btn-line:hover{background:var(--canvas-ivory);}

/* ── spec-panel — 시공사례 상세 오른쪽 ────────────────────── */
.spec-panel{background:var(--canvas-ivory); padding:clamp(20px,2.4vw,30px);}
.spec-panel dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:0 20px;}
.spec-panel dt,.spec-panel dd{
  margin:0; padding:11px 0; border-bottom:1px solid var(--hairline);
  font-size:14px; line-height:1.6;
}
.spec-panel dt{color:var(--ink-muted); white-space:nowrap;}
.spec-panel dd{color:var(--ink);}
.spec-panel dl > :nth-last-child(1),
.spec-panel dl > :nth-last-child(2){border-bottom:none;}

/* ── gallery-photo — 가로 한 장씩 · 세로 두 장씩 ──────────── */
.gallery{display:flex; flex-direction:column; gap:clamp(10px,1.4vw,16px);}
.gallery img{width:100%;}
.gallery .pair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.4vw,16px);}

/* ── process-row — 9단계를 4행으로 ────────────────────────── */
.process-row{display:grid; grid-template-columns:minmax(120px,200px) 1fr; gap:0 clamp(20px,4vw,60px); padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--hairline);}
.process-row:last-child{border-bottom:none;}
.process-row ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.process-row li{display:grid; grid-template-columns:28px auto 1fr; gap:6px 10px; align-items:baseline;}
.process-row .n{font-size:14px; color:var(--ink-muted); font-variant-numeric:tabular-nums;}
.process-row .s{grid-column:2; grid-row:1; font-size:clamp(15px,1.1vw,16px); font-weight:500;}
.process-row .d{grid-column:2 / -1; grid-row:2; font-size:14px; line-height:1.75; color:var(--ink-muted); word-break:keep-all;}
@media (max-width:640px){
  .process-row{grid-template-columns:1fr; gap:14px;}
}

/* ── quote-panel — 견적문의 ──────────────────────────────── */
.quote-panel{background:var(--canvas-ivory); padding:clamp(22px,3vw,40px);}
.step-of{font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--ink-muted); margin:0 0 20px;}
.field + .field{margin-top:26px;}
.field > .t-label{display:block; margin-bottom:9px;}
.text-input{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:transparent; border:none; border-bottom:1px solid var(--line-strong);
  border-radius:0; padding:8px 2px;
}
.text-input:focus{outline:none; border-bottom-color:var(--ink); border-bottom-width:2px; padding-bottom:7px;}
textarea.text-input{resize:vertical; min-height:70px; line-height:1.7;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.field-row.three{grid-template-columns:repeat(3,1fr);}
@media (max-width:760px){ .field-row.three{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .field-row, .field-row.three{grid-template-columns:1fr;} }
/* 날짜 칸 묶음 안내 */
.date-note{font-size:12.5px; line-height:1.7; color:var(--ink-muted); margin:12px 0 0; max-width:60ch;}
.contact-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(20px,2.6vw,30px);}

/* ── footer ─────────────────────────────────────────────── */
.site-footer{background:var(--canvas-ivory); margin-top:clamp(60px,8vw,110px); padding:clamp(28px,4vw,44px) 0;}
.site-footer .wrap > * + *{margin-top:6px;}
.site-footer a{color:var(--ink-muted); text-decoration:none;}
.site-footer a:hover{color:var(--ink);}

/* ── 섹션 여백 ──────────────────────────────────────────── */
.sec{padding-top:clamp(44px,7vw,96px);}
.sec-head{margin-bottom:clamp(20px,3vw,36px);}
.sec-head .t-meta{margin-top:8px;}

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

/* ── 예시 데이터 표시 ───────────────────────────────────────────
   cases.js 의 ZD_SAMPLE 이 켜져 있는 동안만 보인다.
   실제 자료로 바꾸면 자동으로 사라진다. 지우지 말 것. */
.sample-bar{background:var(--canvas-ivory); border-bottom:1px solid var(--hairline);
            padding:12px var(--pad); text-align:center;}
.sample-bar p{margin:0; font-size:13px; line-height:1.7; color:var(--ink-muted);
              word-break:keep-all;}
.sample-bar b{color:var(--ink); font-weight:500;}
.tag-sample{display:inline-block; font-size:11px; line-height:1; letter-spacing:.04em;
            padding:4px 6px; border:1px solid var(--line-strong); color:var(--ink-muted);
            border-radius:var(--r-control); margin-left:6px; vertical-align:1px;}
.sample-line{font-size:13px; color:var(--ink-muted); margin:0 0 14px; word-break:keep-all;}

/* ── 소개 페이지 맺음 ───────────────────────────────────────────
   연락처를 스펙표(.spec-panel) 상자에 담았더니 시공사례 제원표처럼 보이고,
   바로 아래 푸터와 주소·전화·이메일이 그대로 겹쳤다. 상자를 걷어내고
   전화번호 하나만 크게 세운다. 주소는 푸터에만 둔다. */
.closing{border-top:1px solid var(--hairline); margin-top:clamp(40px,6vw,88px);
         padding-top:clamp(30px,4vw,52px);}
.closing .tel{display:inline-block; margin:10px 0 0; text-decoration:none; white-space:nowrap;
              font-size:clamp(30px,3.6vw,46px); font-weight:500; letter-spacing:-.01em;
              color:var(--ink); font-variant-numeric:tabular-nums;}
.closing .tel:hover{text-decoration:underline; text-underline-offset:6px;}
.closing .btns{margin-top:clamp(24px,3vw,36px); display:flex; gap:8px; flex-wrap:wrap;}

/* 시공사례 상세 왼쪽 칸 — 제목만 있어서 비어 있던 자리 */
.case-note{font-size:15px; line-height:1.85; color:var(--ink-muted);
           max-width:44ch; margin:clamp(18px,2.4vw,28px) 0 0; word-break:keep-all;}

/* 견적문의 동의 아래 — 처리방침을 굳이 다른 페이지로 안 가고 볼 수 있게 */
.consent-detail{margin-top:12px; border-top:1px solid var(--hairline); padding-top:12px;}
.consent-detail summary{list-style:none; cursor:pointer; font-size:13px; color:var(--ink-muted);
                        padding-right:18px; position:relative; width:fit-content;}
.consent-detail summary::-webkit-details-marker{display:none;}
.consent-detail summary::after{content:"+"; position:absolute; right:0; top:0;}
.consent-detail[open] summary::after{content:"\2212";}
.consent-detail .a{padding-top:12px;}
.consent-detail .a p{font-size:13.5px; line-height:1.8; color:var(--ink-muted); margin:0 0 8px;}
.consent-detail .a b{color:var(--ink); font-weight:500;}

/* 진행과정 단계별 소요 기간 */
/* 기간은 단계 이름과 같은 줄 오른쪽 끝에 붙인다.
   설명 왼쪽에 두니 들쭉날쭉해서 어디에 걸린 값인지 안 읽혔다. */
.process-row ol .t{grid-column:3; grid-row:1; justify-self:start; font-size:12.5px;
                   color:var(--ink-muted); white-space:nowrap; font-variant-numeric:tabular-nums;
                   border:1px solid var(--hairline); border-radius:var(--r-control); padding:1px 7px;}
/* 진행과정 안내 상자 — privacy.html 의 .todo 와 같은 모양 */
.todo{background:var(--canvas-ivory); padding:16px 18px; margin:6px 0 0;}
.todo p{font-size:14px; color:var(--ink); margin:0; line-height:1.8; word-break:keep-all;}
.todo b{font-weight:500;}

/* 시공사례 사진 설명 — cases.js 의 photos[].cap 이 있을 때만 나온다 */
.gallery figure{margin:0;}
.gallery figcaption{font-size:13.5px; line-height:1.75; color:var(--ink-muted);
                    margin-top:10px; max-width:56ch; word-break:keep-all;}


/* ── 페이지마다 맨 아래 견적문의 ────────────────────────────
   소개에만 큰 전화번호를 뒀더니 그 페이지만 따로 놀았다.
   모든 페이지 푸터 바로 위에 같은 모양으로 둔다. */
.page-cta{background:var(--canvas-ivory); border-top:1px solid var(--hairline);
          margin-top:clamp(48px,7vw,96px); padding:clamp(34px,5vw,60px) 0;}
.page-cta h2{font-size:clamp(19px,1.6vw,23px); font-weight:500; margin:0; word-break:keep-all;}
.page-cta p{font-size:14.5px; line-height:1.8; color:var(--ink-muted);
            margin:10px 0 0; max-width:46ch; word-break:keep-all;}
.page-cta .btns{margin-top:clamp(20px,2.6vw,28px); display:flex; gap:8px; flex-wrap:wrap;}


/* ── 문의 전에 많이 물어보시는 것 ────────────────────────────
   접어 두면 답이 안 읽힌다(PDF에서도 질문만 찍혔다). 처음부터 펼쳐 둔다. */
.qa-list{border-top:1px solid var(--hairline);}
.qa-item{padding:clamp(20px,2.6vw,28px) 0; border-bottom:1px solid var(--hairline);}
.qa-item .q{margin:0; font-size:clamp(15px,1.1vw,16px); font-weight:500;
            max-width:56ch; word-break:keep-all; line-height:1.6;}
.qa-item .a{margin:10px 0 0; font-size:15px; line-height:1.8; color:var(--ink-muted);
            max-width:62ch; word-break:keep-all;}

/* 견적문의 — 확인 대기 목록 */
.pending{margin-top:14px; border-top:1px solid var(--hairline); padding-top:12px;}
.pending .g{font-size:13px; font-weight:500; color:var(--ink); margin:14px 0 6px;}
.pending .g:first-child{margin-top:0;}
.pending ul{margin:0; padding-left:2px; list-style:none;}
.pending li{font-size:13px; line-height:1.8; color:var(--ink-muted);
            margin-bottom:5px; padding-left:22px; text-indent:-22px; word-break:keep-all;}
.pending li b{color:var(--ink); font-weight:500;}

/* ── 날짜 고르기 ─────────────────────────────────────────────
   type="date" 는 브라우저 언어를 따라가서 영어 환경에서 mm/dd/yyyy 로 뜬다.
   어디서나 연-월-일로 보이게 직접 만든다. */
.date-field{position:relative;}
.date-field .text-input{cursor:pointer; background:transparent;}
.date-field .text-input::placeholder{color:var(--ink-muted); opacity:.7;}
.cal{position:absolute; z-index:30; top:calc(100% + 6px); left:0;
     width:min(300px, calc(100vw - 48px)); background:var(--canvas);
     border:1px solid var(--line-strong); padding:12px;
     box-shadow:0 6px 24px rgba(76,69,60,.14);}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.cal-head .t{font-size:14px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums;}
.cal-nav{width:30px; height:30px; border:1px solid var(--hairline); background:var(--canvas);
         border-radius:var(--r-control); color:var(--ink); font-size:15px; line-height:1; cursor:pointer;}
.cal-nav:hover{border-color:var(--line-strong);}
.cal-dow,.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.cal-dow span{text-align:center; font-size:11.5px; color:var(--ink-muted); padding:4px 0;}
.cal-grid button{height:36px; border:1px solid transparent; background:none; cursor:pointer;
                 font-size:13.5px; color:var(--ink); border-radius:var(--r-control);
                 font-variant-numeric:tabular-nums;}
.cal-grid button:hover{border-color:var(--line-strong);}
.cal-grid button[aria-selected="true"]{background:var(--ink); color:var(--canvas);}
.cal-grid button:disabled{color:var(--hairline); cursor:default;}
.cal-grid .pad{height:36px;}
.cal-foot{display:flex; justify-content:space-between; align-items:center;
          margin-top:10px; padding-top:9px; border-top:1px solid var(--hairline);}
.cal-foot button{background:none; border:none; cursor:pointer; font-size:12.5px;
                 color:var(--ink-muted); padding:2px 0;}
.cal-foot button:hover{color:var(--ink); text-decoration:underline;}