/* 창앤커튼 중부이불 이천점 — 사이트 전용 추가 스타일 (style.css 뒤에 로드)
   style.css 의 토큰·컴포넌트를 그대로 쓰되, 커튼·블라인드 업종에 맞는
   따뜻한 프리미엄 팔레트로 보정하고 필요한 블록만 더한다. */

/* ---------- 팔레트: 따뜻한 브론즈 + 아이보리 (원단·인테리어 톤) ---------- */
:root{
  --primary:#9a7a53;
  --primary-focus:#8a6c48;
  --primary-on-dark:#d0ab78;
  --ink:#2a2521;
  --ink-80:#4a433c;
  --ink-48:#867c6f;
  --canvas:#ffffff;
  --parchment:#f6f1e9;
  --pearl:#faf7f1;
  --tile-dark:#282420;
  --tile-dark-2:#332e28;
  --hairline:#e8e1d5;
  --divider:#f1ece3;
  --shadow-photo:rgba(42,33,24,.20) 3px 8px 34px 0;
}
a{color:var(--primary)}
a,button,label,summary{-webkit-tap-highlight-color:rgba(154,122,83,.14)}
.btn--primary:hover{background:#836645}
.btn--ghost{color:var(--primary);border-color:var(--primary)}
.btn--ghost:hover{background:rgba(154,122,83,.07)}
.dbl a.hi{background:var(--primary);border-color:var(--primary)}
.dbl a.hi:hover{background:#86693f}
.dbl a.hi span{color:#f3e6d2}
.form__msg.ok{background:#f6efe3;color:#7a5e38;border:1px solid #e4d2b4}
.hero__scrim{background:linear-gradient(to top,rgba(30,24,18,.80) 0%,rgba(30,24,18,.46) 40%,rgba(30,24,18,.08) 72%,rgba(30,24,18,.22) 100%)}
.topbar{background:var(--tile-dark)}

/* 브랜드 로고 옆 보조 라벨 */
.brand small{display:block;font-size:11px;font-weight:500;color:var(--ink-48);letter-spacing:.04em;margin-top:1px}
.brand .brand__wrap{display:flex;flex-direction:column;line-height:1.05}

/* ---------- 서비스 카테고리 카드 (사진 + 설명) ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc__card{border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.svc__card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(42,33,24,.12)}
.svc__ph{aspect-ratio:4/3;overflow:hidden;background:var(--parchment)}
.svc__ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.svc__card:hover .svc__ph img{transform:scale(1.04)}
.svc__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.svc__tag{font-size:13px;font-weight:700;color:var(--primary);letter-spacing:.04em}
.svc__card h3{margin-top:9px}
.svc__card p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--ink-48);flex:1}
.svc__card .more{margin-top:16px;font-size:14px;font-weight:600;color:var(--primary)}

/* ---------- 기능 아이콘 그리드 (전동 등) ---------- */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feat__i{width:52px;height:52px;border-radius:var(--r-md);background:var(--parchment);color:var(--primary);
  display:grid;place-items:center;margin-bottom:14px}
.feat__i svg{width:28px;height:28px}
.feat .item{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:26px 24px;background:#fff}
.sec--dark .feat .item{background:#322d27;border-color:#403a32}
.feat h3{font-size:18px}
.feat p{margin-top:9px;font-size:15px;line-height:1.6;color:var(--ink-48)}
.sec--dark .feat p{color:#cfc6b8}

/* ---------- 룩북(가로형 사진 그리드) ---------- */
.look{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.look figure{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--parchment);position:relative}
.look img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease)}
.look figure:hover img{transform:scale(1.04)}
.look figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:#fff;font-size:14.5px;font-weight:600;
  background:linear-gradient(to top,rgba(26,20,14,.74),transparent)}
.look figcaption span{display:block;font-weight:400;font-size:13px;color:#e8ddcb;margin-top:2px}
.look--tall img{aspect-ratio:3/4}

/* ---------- 스텝 카드 (진행 순서) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step-c{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:28px 24px;background:#fff;text-align:left}
.step-c .ic{width:46px;height:46px;border-radius:var(--r-md);background:var(--parchment);color:var(--primary);display:grid;place-items:center;margin-bottom:16px}
.step-c .ic svg{width:26px;height:26px}
.step-c .n{font-size:13px;font-weight:700;color:var(--primary);letter-spacing:.05em}
.step-c h3{margin-top:7px;font-size:18px}
.step-c p{margin-top:9px;font-size:15px;line-height:1.6;color:var(--ink-48)}

/* ---------- 후기 ---------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:28px 26px;background:#fff}
.rev__stars{color:var(--primary);font-size:16px;letter-spacing:2px}
.rev__q{margin-top:14px;font-size:16px;line-height:1.66;color:var(--ink-80)}
.rev__who{margin-top:16px;font-size:14px;color:var(--ink-48)}
.rev__who b{color:var(--ink);font-weight:600}

/* ---------- 3열 가격 플랜 ---------- */
.price3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* ---------- 섹션 헤더 ---------- */
.sec-head{max-width:720px}
.sec-head.center{margin-left:auto;margin-right:auto}

/* ---------- 반응형 ---------- */
@media (max-width:1000px){
  .svc{grid-template-columns:1fr 1fr}
  .feat{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .revs{grid-template-columns:1fr}
  .look{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){ .price3{grid-template-columns:1fr} }
@media (max-width:560px){
  .svc{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .look{grid-template-columns:1fr 1fr;gap:10px}
}