/* ===== 장판픽스 디자인 시스템 ===== */
:root{
  --ink:#1D2B36;
  --ink-2:#5B6B78;
  --paper:#F5F3EF;
  --card:#FFFFFF;
  --line:#E4DED4;
  --line-2:#EFEBE4;
  --cta:#D9541F;
  --cta-dark:#B84416;
  --cta-soft:#FBEEE7;
  --ok:#2E6B4F;
  --no:#A33A2A;
  --sans:'SUIT Variable','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --wrap:1080px;
  --r:6px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.8;
  word-break:keep-all;-webkit-font-smoothing:antialiased;
  padding-bottom:64px; /* 모바일 하단 고정바 */
}
@media (min-width:820px){body{padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
h1,h2,h3,h4{margin:0;line-height:1.45;text-wrap:balance;font-weight:700;letter-spacing:-.005em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== 헤더 ===== */
.hdr{position:sticky;top:0;z-index:50;background:rgba(245,243,239,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.logo{font-size:19.5px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:baseline;gap:7px}
.logo small{font-size:11px;font-weight:500;color:var(--ink-2);letter-spacing:0}
.gnb{display:none;gap:22px;font-size:15px;font-weight:500}
@media (min-width:820px){.gnb{display:flex}}
.gnb a:hover{color:var(--cta)}
.hdr-tel{display:none;font-weight:700;font-size:16px;color:var(--cta);white-space:nowrap}
@media (min-width:820px){.hdr-tel{display:block}}

/* ===== 하단 고정 액션바 (모바일) ===== */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  border-top:1px solid var(--line);background:var(--card);
  padding-bottom:env(safe-area-inset-bottom);
}
.actionbar a{
  flex:1;text-align:center;padding:17px 8px;font-weight:700;font-size:16px;
}
.actionbar .ab-tel{background:var(--ink);color:#fff}
.actionbar .ab-kko{background:var(--cta);color:#fff}
@media (min-width:820px){.actionbar{display:none}}

/* ===== 히어로 ===== */
.hero{padding:44px 0 40px;border-bottom:1px solid var(--line)}
@media (min-width:820px){.hero{padding:76px 0 68px}}
.hero .eyebrow{font-size:13px;font-weight:600;color:var(--cta);letter-spacing:.02em;margin-bottom:12px}
.hero h1{font-size:clamp(27px,6.4vw,43px);line-height:1.38;letter-spacing:-.018em;font-weight:700;margin-bottom:18px}
.hero .sub{font-size:clamp(16.5px,2.2vw,19px);color:var(--ink-2);max-width:34em;margin-bottom:26px}
.hero .damages{
  display:flex;flex-wrap:wrap;gap:7px 9px;list-style:none;padding:0;margin:0 0 14px;
}
.hero .damages li{
  font-size:clamp(14px,1.9vw,15.5px);font-weight:700;color:var(--cta);
  background:var(--cta-soft);border-radius:20px;padding:5px 13px;line-height:1.4;
}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:14px 22px;border-radius:var(--r);
  font-weight:700;font-size:16px;border:1.5px solid transparent;transition:.15s;
}
.btn-primary{background:var(--cta);color:#fff}
.btn-primary:hover{background:var(--cta-dark)}
.btn-ghost{border-color:var(--line);background:var(--card);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-2)}

/* ===== 섹션 ===== */
section{padding:48px 0}
@media (min-width:820px){section{padding:68px 0}}
section + section{border-top:1px solid var(--line)}
.sec-label{font-size:12.5px;font-weight:700;color:var(--cta);letter-spacing:.06em;margin-bottom:10px}
h2.sec{font-size:clamp(21px,3.6vw,29px);letter-spacing:-.012em;font-weight:700;margin-bottom:12px}
.sec-lead{color:var(--ink-2);max-width:42em;margin-bottom:28px}
h3{font-size:clamp(17px,2.4vw,21px);letter-spacing:-.008em;margin:34px 0 10px}
.prose{max-width:44em}
.prose p{color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{color:var(--ink-2);padding-left:1.2em;margin:0 0 1em}
.prose li{margin-bottom:.4em}
.prose li::marker{color:var(--cta)}

/* ===== 카드 그리드 ===== */
.grid{display:grid;gap:12px}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:820px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:640px) and (max-width:819px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card h4{font-size:17px;margin-bottom:7px;letter-spacing:-.004em}
.card p{color:var(--ink-2);font-size:15px;margin:0}
.card .no{font-size:12px;font-weight:700;color:var(--cta);display:block;margin-bottom:8px}
a.card{display:block;transition:.15s}
a.card:hover{border-color:var(--ink-2);transform:translateY(-2px)}
a.card .more{display:inline-block;margin-top:10px;font-size:14px;font-weight:700;color:var(--cta)}

/* ===== 시공 사례 — 사진 2장 1세트 ===== */
.cases{display:grid;gap:14px}
@media (min-width:700px){.cases{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.cases{grid-template-columns:repeat(3,1fr)}}
.case{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.case-imgs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2)}
.case-imgs figure{margin:0;position:relative;background:var(--card)}
.case-imgs img{width:100%;aspect-ratio:1/1;object-fit:cover}
.case-imgs figcaption{
  position:absolute;top:8px;left:8px;padding:3px 9px;border-radius:3px;
  font-size:11.5px;font-weight:700;color:#fff;letter-spacing:.02em;
}
.case-imgs .tag-b{background:rgba(163,58,42,.9)}
.case-imgs .tag-a{background:rgba(46,107,79,.9)}
.case-head{padding:15px 17px 17px;flex:1}
.case-head .type{
  display:inline-block;font-size:11.5px;font-weight:700;color:var(--cta);
  background:var(--cta-soft);padding:2px 8px;border-radius:3px;margin-bottom:8px;
}
.case-head .place{font-size:11.5px;font-weight:600;color:var(--ink-2);margin-left:6px}
.case-head h3{margin:0 0 6px;font-size:16.5px;letter-spacing:-.005em}
.case-head p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.7}

/* ===== 프로세스 ===== */
.steps{display:grid;gap:14px;counter-reset:st;list-style:none;padding:0;margin:0}
@media (min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:st;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.steps li::before{
  content:counter(st);display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;
  font-size:14px;font-weight:700;margin-bottom:11px;
}
.steps h4{font-size:16px;margin-bottom:5px}
.steps p{margin:0;font-size:14.5px;color:var(--ink-2)}

/* ===== 표 ===== */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin:0 0 20px}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:15px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:top}
thead th{background:#FAF8F5;font-size:13px;font-weight:700;color:var(--ink-2);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.yes{color:var(--ok);font-weight:600}
td.non{color:var(--no);font-weight:600}

/* ===== FAQ ===== */
.faq{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.faq details{border-bottom:1px solid var(--line-2)}
.faq details:last-child{border-bottom:0}
.faq summary{
  padding:17px 46px 17px 20px;font-weight:700;cursor:pointer;position:relative;list-style:none;font-size:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:20px;top:24px;width:9px;height:9px;
  border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);
  transform:rotate(45deg);transition:.2s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:27px}
.faq .a{padding:0 20px 18px;color:var(--ink-2);font-size:15.5px}
.faq .a p:last-child{margin-bottom:0}

/* ===== 링크 칩 ===== */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.chips a{
  display:block;padding:9px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);font-size:14.5px;font-weight:500;transition:.15s;
}
.chips a:hover{border-color:var(--cta);color:var(--cta)}

/* ===== CTA 배너 ===== */
.cta-band{background:var(--ink);color:#fff;border-top:0}
.cta-band h2{color:#fff;font-size:clamp(21px,3.4vw,28px);letter-spacing:-.012em;font-weight:700;margin-bottom:12px}
.cta-band p{color:#B9C4CC;max-width:36em;margin-bottom:24px}
.cta-band .btn-ghost{background:transparent;border-color:#41505C;color:#fff}
.cta-band .btn-ghost:hover{border-color:#fff}

/* ===== 빵부스러기 ===== */
.bc{font-size:13.5px;color:var(--ink-2);padding:16px 0 0}
.bc a:hover{color:var(--cta)}
.bc span{margin:0 6px;opacity:.5}

/* ===== 푸터 ===== */
.ft{background:#EFEBE4;border-top:1px solid var(--line);padding:40px 0 48px;font-size:14.5px;color:var(--ink-2)}
.ft h4{font-size:14px;color:var(--ink);margin-bottom:10px}
.ft-cols{display:grid;gap:26px;margin-bottom:28px}
@media (min-width:820px){.ft-cols{grid-template-columns:1.2fr 1fr 1fr}}
.ft ul{list-style:none;padding:0;margin:0}
.ft li{margin-bottom:5px}
.ft a:hover{color:var(--cta)}
.ft-biz{border-top:1px solid var(--line);padding-top:18px;font-size:13px;line-height:1.9}
.ft-biz b{color:var(--ink);font-weight:600}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}