/* DB IN — 고객 견적 퍼널 공용 스타일
 *  quote.html   (랜딩)
 *  request.html (견적 요청 마법사)
 *  두 페이지가 함께 사용하므로 한쪽만 고치지 말 것. */

@import url('/fonts/pretendard.css');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F7F5F3;
  --paper:#FFFFFF;
  --ink:#231F29;
  --ink2:#5D5766;
  --ink3:#8C8697;
  --line:#E6E2E4;
  --line2:#D4CFD6;
  --brand:#4A2E6E;
  --brand-dark:#3A2357;
  --brand-dim:#EFEAF6;
  --gold:#B0863B;
  --gold-dim:#F5EDDF;
  --danger:#A5453B;
  --nav-h:64px;
  --radius:8px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
  overflow-x:hidden;
  word-break:keep-all;
  overflow-wrap:break-word;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
/* display:flex 등을 지정한 요소에서도 hidden 속성이 이기도록 한다.
   브라우저 기본 [hidden]{display:none} 은 작성자 규칙에 밀린다. */
[hidden]{display:none !important}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
/* 넓은 화면에서 양옆이 과하게 비지 않도록 1240px 까지 쓴다.
   ⚠ FAQ(.faq 680px)·후기(.rv-wrap 760px)는 자체 상한이 있어 함께 넓어지지 않는다.
     읽는 글은 한 줄이 길어지면 오히려 읽기 어렵다. */
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
section[id]{scroll-margin-top:calc(var(--nav-h) + 10px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── NAV ── */
nav{
  position:sticky;top:0;z-index:60;
  background:rgba(247,245,243,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .2s;
}
nav.scrolled{border-bottom-color:var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:14px}
.brand{font-size:18px;font-weight:800;letter-spacing:-.01em}
.brand span{color:var(--brand)}

/* ── 로고 ──
   logo-mark.png(심볼) · logo-full.png(심볼+워드마크+슬로건).
   파일이 없으면 img 가 onerror 로 스스로 사라져 글자 로고만 남는다.
   ⚠ 원본 logo.png 를 그대로 쓰지 말 것 — 정사각형이라 내비에서
     심볼이 손톱만 하게 줄고 슬로건이 뭉개진다. */
/* ⚠ flex:none 을 빼지 말 것. 내비가 좁아지면 로고가 눌려 글자가 잘린다 */
.brand{white-space:nowrap;flex:none}
.brand-logo{height:28px;width:auto;display:inline-block;vertical-align:-8px;margin-right:8px}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.foot-logo{height:72px;width:auto;display:block}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-link{font-size:14px;color:var(--ink2);white-space:nowrap}
.nav-link:hover{color:var(--ink)}
/* 오픈 상태 배지. 원래 히어로 h1 위에 있었는데 내비로 올렸다.
   ⚠ 히어로로 되돌리면 왼쪽 단이 배지 높이만큼 내려가 오른쪽 카드와 어긋난다.
   ⚠ 내비에 들어가므로 문장이 아니라 짧은 표시여야 한다. 길어지면
     좁은 화면에서 로고·CTA 를 밀어낸다. */
.nav-badge{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:12.5px;font-weight:700;color:var(--brand);
  background:var(--brand-dim);padding:6px 12px;border-radius:999px;
}
.nav-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}

/* ── HERO ── */
/* ══ 히어로 배너 ══
   ⚠ 사진을 쓰지 않는다. 우리가 파는 제품의 사진이 아니라서 저작권도
     걸리고, 실제로 취급하지 않는 모델을 보여주는 오해도 생긴다.
     대신 업종 레지스트리의 아이콘을 흐리게 깔아 "무엇을 다루는 곳인지"를
     보이게 한다.

   ⚠ 색을 더 진하게 하지 말 것. 업종 버튼이 채움 보라(--brand)라서
     배경이 진해지면 버튼이 배경에 묻힌다. 여기는 어디까지나 바탕이다. */
.hero{
  padding:0 0 64px;text-align:center;
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  /* ⚠ 사진이 들어간 뒤(2026-09-14)로 바탕은 단색(--bg)에 왼쪽 위 은은한 보라 하나만 둔다.
       사진 가장자리 페이드가 --bg 로 녹아들기 때문에, 바탕에 흰색→베이지 세로
       그라디언트나 오른쪽 금색 번짐을 되살리면 사진 경계에서 색이 어긋나 선이 보인다.
     ⚠ 보라 번짐의 크기·위치를 키우지 말 것. 1200px 화면에서 사진 시작점(약 560px)에
       닿지 않는 크기다. */
  background:
    radial-gradient(700px 360px at 0% -10%, var(--brand-dim), transparent 62%),
    var(--bg);
  border-bottom:1px solid var(--line);
}

/* 배경 장식. 아이콘은 JS 가 업종 레지스트리에서 그린다 */
.hero-deco{position:absolute;inset:0;pointer-events:none;z-index:-1}
.hero-deco svg{
  position:absolute;width:var(--s);height:var(--s);
  stroke:var(--brand);fill:none;stroke-width:1.1;
  opacity:.07;transform:rotate(var(--r));
}
/* 가운데는 글이 놓이는 자리라 비워 둔다 — 가장자리에만 깐다 */
.hero-deco svg:nth-child(1){--s:150px;--r:-12deg;left:-34px;  top:34px}
.hero-deco svg:nth-child(2){--s:104px;--r:9deg;  left:13%;    bottom:24px}
.hero-deco svg:nth-child(3){--s:128px;--r:-6deg; right:-28px; top:96px}
.hero-deco svg:nth-child(4){--s:92px; --r:14deg; right:11%;   bottom:12px}
.hero-deco svg:nth-child(5){--s:76px; --r:-18deg;left:31%;    top:-18px}
.hero-deco svg:nth-child(6){--s:84px; --r:7deg;  right:29%;   top:-24px}

/* 히어로 안의 내용은 장식·사진 위로.
   ⚠ z-index 를 지우지 말 것. 2단에서 사진이 글 칸 안쪽으로 당겨져 들어와 있어서,
     없으면 나중에 오는 사진이 글자 위에 칠해진다. */
.hero-copy{position:relative;z-index:1}

/* ── 히어로 사진 ──
   쌓기 배치(1200px 미만)에서는 글 위에 가로로 길게 놓인다. */
.hero-bg{
  order:-1;position:relative;display:block;overflow:hidden;
  width:100%;height:clamp(240px, 34vw, 380px);
}
/* ⚠ absolute 를 빼지 말 것. 흐름에 두면 사진이 제 비율대로 높이를 차지해
     2단에서 히어로 높이를 밀어올린다(회사 홈페이지에서 겪었다). */
.hero-bg img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%;display:block;
}
/* 쌓기 배치: 사진 아래쪽을 바탕색으로 녹여 글과 이어지게 한다 */
.hero-bg::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(247,245,243,0) calc(100% - 64px),
    rgba(247,245,243,.6) calc(100% - 22px),
    #F7F5F3 100%);
}
.hero h1{
  font-size:44px;font-weight:800;line-height:1.35;letter-spacing:-.03em;
  max-width:660px;margin:0 auto 20px;
}
.hero h1 em{font-style:normal;color:var(--brand);position:relative;white-space:nowrap}
.hero h1 em::after{
  content:'';position:absolute;left:0;right:0;bottom:.06em;height:.32em;
  background:var(--gold-dim);z-index:-1;
}
/* text-wrap:balance — <br> 로 나눈 각 구절이 좁은 화면에서 다시 접힐 때
   마지막 한 단어만 떨어지지 않도록 줄 길이를 고르게 맞춘다.
   지원하지 않는 브라우저는 그냥 무시한다(기본 줄바꿈). */
.hero .lead{font-size:17px;color:var(--ink2);max-width:520px;margin:0 auto 32px;text-wrap:balance}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 28px;border-radius:6px;font-size:15px;font-weight:700;
  border:1px solid transparent;transition:background .15s,border-color .15s;
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{border-color:var(--line2);color:var(--ink);background:var(--paper)}
.btn-ghost:hover{border-color:var(--ink3)}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* 핵심어를 크게, 설명을 작게 내린 3칸.

   ⚠ 카드(테두리+흰 배경)로 감싸지 말 것. 한때 그렇게 했더니
     「준비 중」이라 점선·투명인 업종 버튼보다 더 세 보여 위계가 뒤집혔다.
   ⚠ 핵심어에 브랜드색을 쓰지 말 것. 같은 이유다.
     크기와 굵기만으로 세우고 색은 본문색을 쓴다.

   업종이 열려 버튼이 채운 색으로 바뀌면 그때는 버튼이 자연히 앞선다. */
.trust{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin:26px 0 0;
}
.trust-item{padding:2px 10px;text-align:center;border-left:1px solid var(--line)}
.trust-item:first-child{border-left:0}
.trust dt{
  font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
  line-height:1.3;
}
.trust dd{margin:3px 0 0;font-size:12px;color:var(--ink3);white-space:nowrap}

/* 쌓기 배치의 글 칸. 가운데 정렬, 좌우 여백은 .wrap 과 같다 */
.hero-copy{max-width:728px;width:100%;margin:0 auto;padding:36px 24px 0}

/* ── 히어로 2단: [여백] [글] [사진] [여백] ──
   회사 홈페이지(index.html) 히어로와 같은 구조다. 1200px 이상에서만.

   50% − 596px = (폭 − 1240)/2 + 24 — .wrap 의 내용 시작점. 로고 왼쪽 끝과 같다.
   ⚠ 이걸 padding 으로 옮기지 말 것. 100vw 는 스크롤바를 포함해 7~8px 어긋난다.
   ⚠ 1200px 아래로 2단을 내리지 말 것. 글 칸 596px 을 빼면 사진 칸이 너무 좁아진다.
   ⚠ .hero 의 text-align:center 를 2단에서는 왼쪽으로 되돌린다. */
@media (min-width:1200px){
  .hero{
    display:grid;
    grid-template-columns:max(24px, calc(50% - 596px)) minmax(0,596px)
                          minmax(0,1fr) max(24px, calc(50% - 596px));
    align-items:stretch;padding:0;
  }
  .hero-copy{
    grid-column:2;max-width:none;margin:0;padding:64px 44px 56px 0;
    text-align:left;display:flex;flex-direction:column;justify-content:center;
  }
  .hero-copy h1{margin-left:0;margin-right:0;font-size:38px}
  .hero-copy .lead{margin-left:0;margin-right:0}
  /* ⚠ 520px 를 넓히지 말 것. 본문(.lead)이 520px 이라 그 끝에 맞췄다.
       버튼·신뢰 3칸이 글 칸 끝(552px)까지 가면 사진을 당길 수 있는 자리가 없어진다. */
  .hero-picks,.trust{max-width:520px}
  /* ⚠ .hero-copy 를 붙인 채로 둘 것. 기본 .picks-note(margin:auto) 가 이 파일 아래쪽에 있어
       같은 강도면 그쪽이 이겨 문구만 가운데로 들여 써졌다. 옛 2단 규칙에도 있던 문제다. */
  .hero-copy .picks-note{margin-left:0;margin-right:0;max-width:520px}

  /* ⚠ margin-left 는 글 칸의 가장 긴 줄 끝 바로 뒤에서 페이드가 시작되게 맞춘 값이다.
       글 칸 596 − 오른쪽 안쪽 여백 44 = 552, 가장 긴 요소(버튼·신뢰 3칸·본문)는 520.
       사진 시작 = 520 + 8 → 596 − 528 = 68px.
       문구·버튼 폭을 바꾸면 다시 잴 것. */
  .hero-bg{
    /* ⚠ width:auto 를 지우지 말 것. 쌓기 배치의 width:100% 가 남으면 칸 폭에 묶여
       당긴 만큼 오른쪽이 비고 사진은 넓어지지 않는다(실제로 그랬다) */
    grid-column:3;order:0;width:auto;height:auto;margin-left:-68px;
  }
  .hero-bg img{
    /* ⚠ right 를 center 로 바꾸지 말 것. 인물이 오른쪽에 있다 */
    object-position:right center;
    /* ⚠ 지우지 말 것. 사진 시작점이 소수점 픽셀에 걸리면 가장자리 한 줄에 사진이
         비쳐 얇은 세로선이 보인다. 이 2px 는 페이드가 완전히 불투명한 구간이다. */
    clip-path:inset(0 0 0 2px);
  }
  /* 글 쪽 가장자리를 바탕색으로 녹인다. 곡선은 1 − smoothstep — 양 끝 기울기가 0 이라
     시작도 끝도 선이 생기지 않는다. 회사 홈페이지와 같은 값이다.
     ⚠ transparent 키워드를 쓰지 말 것. 투명한 '검정'으로 섞여 회색 때가 낀다. */
  .hero-bg{--fade:240px}
  .hero-bg::after{
    background:linear-gradient(90deg,
      #F7F5F3 0,
      rgba(247,245,243,.972) calc(var(--fade) * .1),
      rgba(247,245,243,.896) calc(var(--fade) * .2),
      rgba(247,245,243,.784) calc(var(--fade) * .3),
      rgba(247,245,243,.648) calc(var(--fade) * .4),
      rgba(247,245,243,.500) calc(var(--fade) * .5),
      rgba(247,245,243,.352) calc(var(--fade) * .6),
      rgba(247,245,243,.216) calc(var(--fade) * .7),
      rgba(247,245,243,.104) calc(var(--fade) * .8),
      rgba(247,245,243,.028) calc(var(--fade) * .9),
      rgba(247,245,243,0)    var(--fade));
  }
  /* 오른쪽 자리의 장식은 사진에 가려지거나 오른쪽 여백에 떠 보인다. 글 쪽만 남긴다 */
  .hero-deco svg:nth-child(3),
  .hero-deco svg:nth-child(4),
  .hero-deco svg:nth-child(6){display:none}
}

/* ── 이용 방법 섹션 ── (2026-09-14 히어로 오른쪽 카드에서 옮겼다) */
.how-sec .steps{max-width:560px;margin:0 auto}


/* ── 하단 2단 (구매 후기 + 자주 묻는 질문) ──
   히어로와 같은 규칙. 1000px 이상에서만 나란히 놓는다.
   ⚠ align-items:start — 두 단의 내용 길이가 다르다. stretch 로 두면
     짧은 쪽이 늘어나 빈 공간이 생긴다. */
.bottom-grid{display:grid;gap:44px}
.col-head{margin-bottom:22px}
.col-head h2{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.4}

@media (min-width:1000px){
  .bottom-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:start}
}

/* ── 랜딩의 후기 목록 ──
   후기 게시판(.rv-*)과 달리 훑어보는 용도라 카드 없이 줄로만 나눈다.
   ⚠ 여기에 후기를 직접 적지 말 것. /api/reviews 에서만 온다. */
.qr-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.qr-item{padding:16px 2px;border-bottom:1px solid var(--line)}
.qr-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.qr-stars{color:var(--gold);font-size:13px;letter-spacing:1px;flex:none}
.qr-who{font-size:13.5px;font-weight:700}
.qr-date{font-size:12.5px;color:var(--ink3);margin-left:auto}
.qr-badge{font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;white-space:nowrap}
.qr-badge.verified{background:var(--brand);color:#fff}
.qr-badge.quoted{background:var(--brand-dim);color:var(--brand)}
/* 두 줄까지만. 랜딩에서 긴 후기가 화면을 밀지 않게 한다 */
.qr-text{
  font-size:14px;color:var(--ink2);line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.qr-spec{font-size:12.5px;color:var(--ink3);margin-top:6px}

/* ── 예시 후기 ──
   ⚠ 실제 후기와 확실히 달라 보여야 한다. 점선 + 흐린 배경 + 예시 배지.
     이 구분이 흐려지면 표시광고법상 허위 광고가 된다. */
.qr-sample-note{
  font-size:12.5px;color:var(--ink3);line-height:1.7;
  margin:0 0 12px;padding:10px 12px;
  background:var(--gold-dim);border-radius:8px;
}
.qr-sample-note strong{color:var(--ink)}
.qr-badge.sample{background:var(--gold-dim);color:var(--gold);border:1px solid var(--gold)}
.qr-item.is-sample{
  border:1px dashed var(--line2);border-radius:10px;
  padding:16px 14px;background:transparent;
}
.qr-item.is-sample .qr-text{color:var(--ink3)}

/* 사진 줄 */
.qr-photos{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:10px}
.qr-ph{
  width:52px;height:52px;flex:none;border-radius:7px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg);display:block;
}
.qr-ph img{width:100%;height:100%;object-fit:cover;display:block}
.qr-ph.is-blank{border-style:dashed;border-color:var(--line2)}
.qr-ph-note{font-size:12px;color:var(--ink3)}

.qr-empty{
  border:1px dashed var(--line2);border-radius:10px;
  padding:28px 20px;text-align:center;
}
.qr-empty p{font-size:13.5px;color:var(--ink3);line-height:1.75}

/* ── 고객센터 ──
   FAQ 는 그 안의 한 덩어리다. 소제목을 붙여 "여기 말고도 더 있다"는
   것을 보이게 한다. */
.support-sub{
  font-size:13px;font-weight:800;color:var(--ink3);
  letter-spacing:-.01em;margin-bottom:10px;
}

/* 답이 없을 때 갈 곳. FAQ 목록이 끝나는 자리에 붙는다. */
.support-ask{
  margin-top:18px;padding:16px 18px;
  background:var(--brand-dim);border-radius:10px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.support-ask p{font-size:13.5px;color:var(--ink2);flex:1;min-width:150px}
.support-btn{
  display:inline-flex;align-items:center;
  background:var(--brand);color:#fff;font-weight:700;font-size:13.5px;
  padding:10px 16px;border-radius:7px;white-space:nowrap;
}
.support-btn:hover{background:var(--brand-dark)}
/* 채널 주소가 없을 때. contact.js 가 contact-off 를 붙인다 */
.support-btn.contact-off{background:var(--line2);color:var(--ink3)}

.qr-more{
  display:inline-flex;align-items:center;gap:5px;margin-top:16px;
  font-size:13.5px;font-weight:700;color:var(--brand);
}
.qr-more:hover{text-decoration:underline}
/* ── 고객센터 페이지 (support.html) ──
   구매 후기 페이지와 같은 rv-page / rv-wrap 위에 카드를 얹는다. */
.sup-card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:26px 24px;margin-bottom:16px;
}
.sup-p{font-size:14px;color:var(--ink2);line-height:1.8}
/* ⚠ 링크를 본문과 같은 색으로 두지 말 것. 카드 안의 유일한 행동인데
     밑줄도 색도 없으면 누를 수 있는 줄 모른다. */
.sup-p a{color:var(--brand);font-weight:700;text-decoration:underline}
.sup-p a.contact-off{color:var(--ink3);text-decoration:none;font-weight:500}
/* ── 내 견적 조회 · 취소 ── */
.lk-hint{
  margin-top:14px;font-size:12.5px;color:var(--ink3);line-height:1.7;
  text-align:center;
}
.lk-hint a{color:var(--brand);font-weight:700;text-decoration:underline}

/* 조회 결과 요약 */
.lk-sum{display:grid;gap:0;margin-bottom:20px;border-top:1px solid var(--line)}
.lk-sum>div{
  display:flex;gap:14px;padding:11px 2px;
  border-bottom:1px solid var(--line);font-size:14px;
}
.lk-sum dt{flex:none;width:88px;color:var(--ink3);font-size:13.5px}
.lk-sum dd{color:var(--ink);font-weight:600;min-width:0;word-break:break-all}

/* 두 요청. 색과 문장이 서로 달라야 아무거나 누르지 않는다 */
.lk-acts{display:grid;gap:10px}
.lk-act{
  display:flex;flex-direction:column;gap:3px;text-align:left;
  padding:14px 16px;border-radius:10px;cursor:pointer;
  background:var(--paper);border:1px solid var(--line2);
  transition:border-color .15s,background .15s;
}
.lk-act:hover{border-color:var(--brand);background:var(--brand-dim)}
.lk-act strong{font-size:14.5px;font-weight:800;color:var(--ink)}
.lk-act span{font-size:12.5px;color:var(--ink3);line-height:1.6}
.lk-act.is-danger:hover{border-color:var(--danger);background:#FBF0EF}
.lk-act.is-danger strong{color:var(--danger)}

/* 확인 단계 */
.lk-confirm{
  padding:16px 18px;border-radius:10px;
  background:var(--brand-dim);border:1px solid var(--brand);
}
.lk-confirm p{font-size:14px;color:var(--ink);line-height:1.7;margin-bottom:14px}
.lk-confirm-btns{display:flex;gap:8px}
.lk-confirm-btns .btn{flex:1}

.lk-back{
  display:block;margin:18px auto 0;
  font-size:13px;color:var(--ink3);text-decoration:underline;cursor:pointer;
  background:none;border:0;
}
.lk-back:hover{color:var(--ink2)}

.lk-done-h{font-size:19px;font-weight:800;margin-bottom:10px}
.lk-done-p{font-size:13.5px;color:var(--ink2);line-height:1.8;margin-bottom:8px}

/* ── SECTION ── */
section{padding:76px 0}
.sec-head{max-width:560px;margin:0 auto 44px;text-align:center}
.kicker{font-size:12.5px;color:var(--gold);font-weight:800;letter-spacing:.06em;margin-bottom:12px}
.sec-head h2{font-size:29px;font-weight:800;letter-spacing:-.025em;line-height:1.4}
.sec-head p{color:var(--ink2);font-size:15px;margin-top:14px}
.band{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ── STEPS ──
   좁은 화면에서는 세로 타임라인, 900px 이상에서는 가로 4단(아래 미디어쿼리).
   예전에는 히어로 오른쪽 좁은 카드 안이라 세로만 가능했다. 섹션으로 나오면서
   폭이 생겨 가로로 편다.
   번호와 연결선이 네 덩어리를 한 흐름으로 읽히게 한다. */
.steps{display:grid;grid-template-columns:1fr;gap:0;counter-reset:s}
/* 안심 문구를 걷어낸 만큼 단계 사이를 넓혀 네 항목이 붙어 보이지 않게 한다 */
.step{position:relative;padding:0 0 30px 42px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:0;
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:13px;font-weight:800;
}
.step::after{
  content:'';position:absolute;left:13px;top:34px;bottom:2px;
  width:2px;background:var(--line2);
}
.step:last-child{padding-bottom:0}
.step:last-child::after{display:none}
.step h3{font-size:16px;font-weight:700;margin-bottom:5px}
.step p{font-size:14px;color:var(--ink2)}

/* ⚠ 900px 아래로 가로 4단을 내리지 말 것. 칸이 190px 아래로 줄어 본문이 두세 어절씩 끊긴다 */
@media (min-width:900px){
  .how-sec .steps{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
  .how-sec .step{padding:44px 0 0}
  /* 연결선은 번호 오른쪽에서 다음 칸 번호 앞까지 */
  .how-sec .step::after{left:38px;right:-22px;top:13px;bottom:auto;width:auto;height:2px}
}

/* ── 업종별 견적 버튼 (히어로 안) ──
   원래 별도 "오픈 예정 업종" 섹션의 카드였는데, 히어로의 행동 유도가
   따로 있고 업종 카드가 또 아래에 있어 두 번 고르게 만들었다.
   버튼을 히어로로 올려 한 곳에서 고르게 한다.
   ⚠ 다시 별도 섹션으로 떼어내지 말 것. */
/* 업종 버튼은 항상 같은 크기여야 한다. 내용 길이에 따라 폭이 달라지면
   "어느 쪽이 더 중요한가" 처럼 보인다.
   ⚠ display:flex 로 되돌리지 말 것 — 글자 수대로 폭이 벌어진다.
   auto-fit 이라 업종을 늘려도 자동으로 나뉜다. */
.hero-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
/* 열린 업종 = 이 화면의 주 행동. 채운 색으로 세운다.
   ⚠ 흰 배경 + 얇은 회색 테두리로 되돌리지 말 것.
     페이지 배경(#F7F5F3)이 연해서 「준비 중」과 구분이 거의 안 됐다. */
.pick{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:10px;
  background:var(--brand);border:1px solid var(--brand);color:#fff;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .15s;
}
.pick:not(.is-soon):hover{
  background:var(--brand-dark);border-color:var(--brand-dark);
  transform:translateY(-1px);box-shadow:0 6px 16px rgba(74,46,110,.22);
}
.pick-ico{
  width:38px;height:38px;flex:none;border-radius:9px;
  background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
}
.pick-ico svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.7}
.pick-body{display:flex;flex-direction:column;gap:1px;text-align:left;min-width:0;flex:1}
.pick-name{font-size:15px;font-weight:800;letter-spacing:-.01em}
.pick-sub{font-size:12.5px;color:rgba(255,255,255,.72)}
/* 눌러서 어딘가로 간다는 신호. 열린 버튼에만 붙는다. */
.pick-go{flex:none;font-size:20px;line-height:1;opacity:.8}

/* 준비 중 — 색·테두리·아이콘을 한꺼번에 바꾼다.
   한 가지만 다르게 하면 축소 화면이나 색약 사용자에게 구분이 안 된다. */
.pick.is-soon{
  cursor:not-allowed;background:transparent;color:var(--ink2);
  border:1px dashed var(--line2);box-shadow:none;transform:none;
}
.pick.is-soon .pick-ico{background:var(--line)}
.pick.is-soon .pick-ico svg{stroke:var(--ink3)}
.pick.is-soon .pick-name{color:var(--ink2)}
.pick.is-soon .pick-sub{font-weight:700;color:var(--gold)}

/* 준비 중이지만 「오픈 알림 받기」로 눌리는 상태.
   contact.js 가 채널 주소를 넣어 줬을 때만 href 가 생긴다 —
   주소가 없으면 아래 규칙이 걸리지 않아 위의 not-allowed 가 남는다.

   ⚠ 열린 업종의 채움색을 여기 쓰지 말 것. 견적을 받을 수 있는 업종과
     알림만 받는 업종이 같아 보이면 버튼을 나눈 의미가 없어진다.
     점선은 그대로 두고 테두리 색과 배경만 옅게 반응시킨다. */
a.pick.is-soon[href]{cursor:pointer}
a.pick.is-soon[href] .pick-go{color:var(--ink3)}
a.pick.is-soon[href]:hover{
  border-color:var(--brand);background:var(--brand-dim);
  transform:translateY(-1px);
}
a.pick.is-soon[href]:hover .pick-name,
a.pick.is-soon[href]:hover .pick-go{color:var(--brand)}

.picks-note{
  margin:16px auto 0;max-width:440px;
  font-size:13px;line-height:1.7;color:var(--ink3);
}
.picks-note a{color:var(--brand);font-weight:700;text-decoration:underline}
/* 상담 채널 주소가 비면 contact.js 가 이 링크를 비활성으로 만든다 */


/* ── 후기 사진 고르기 ── */
.ph-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.ph-grid:empty{display:none}
.ph-item{position:relative;width:84px;height:84px;border-radius:8px;overflow:hidden;border:1px solid var(--line2)}
.ph-item img{width:100%;height:100%;object-fit:cover}
.ph-del{
  position:absolute;top:4px;right:4px;width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.ph-del:hover{background:rgba(0,0,0,.75)}
.ph-add{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 16px;border-radius:8px;font-size:13.5px;font-weight:700;
  border:1px dashed var(--line2);background:var(--paper);color:var(--ink2);
}
.ph-add:hover{border-color:var(--brand);color:var(--brand)}
.ph-note{margin-top:10px;font-size:12.5px;color:var(--ink3);line-height:1.65}
.ph-note strong{color:var(--ink2)}

/* ── 후기에 붙은 사진 (목록) ── */
.rv-photos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rv-photos a{
  display:block;width:92px;height:92px;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);
}
.rv-photos img{width:100%;height:100%;object-fit:cover;display:block}
/* ══ 구매 후기 게시판 (reviews.html) ══ */
.rv-page{padding:48px 0 72px}
.rv-wrap{max-width:760px;margin:0 auto;padding:0 24px}

/* 요약 바 — 후기가 1건 이상일 때만 노출 */
.rv-summary{
  display:flex;align-items:center;gap:18px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px;margin-bottom:20px;
}
.rv-avg{font-size:30px;font-weight:800;color:var(--brand);line-height:1;font-variant-numeric:tabular-nums}
.rv-summary .meta{font-size:13.5px;color:var(--ink3)}

/* 필터 */
.rv-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.rv-chip{
  font-size:13.5px;font-weight:700;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line2);background:var(--paper);color:var(--ink2);
}
.rv-chip:hover{border-color:var(--ink3)}
.rv-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* 목록 */
.rv-list{display:flex;flex-direction:column;gap:12px}
.rv-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.rv-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.rv-stars{color:var(--gold);font-size:15px;letter-spacing:2px}
.rv-who{font-size:13.5px;font-weight:700}
.rv-date{font-size:12.5px;color:var(--ink3);margin-left:auto;font-variant-numeric:tabular-nums}
.rv-body{font-size:14.5px;color:var(--ink2);white-space:pre-wrap}
.rv-spec{
  display:inline-block;margin-top:12px;font-size:12.5px;color:var(--ink3);
  background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:5px 10px;
}

/* 검증 배지 — 확인된 사실이 다르므로 색으로도 구분한다 */
.rv-badge{font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:999px;white-space:nowrap}
.rv-badge.verified{background:var(--brand);color:#fff}
.rv-badge.quoted{background:var(--brand-dim);color:var(--brand)}

/* ── 예시 후기 ──
   실제 후기와 절대 헷갈리면 안 된다. 배지 색·점선 테두리·흐린 배경으로
   세 가지를 동시에 다르게 만든다. 색 하나만 바꾸면 축소 캡처에서 구분이 안 된다. */
.rv-badge.sample{background:var(--gold-dim);color:var(--gold);border:1px solid var(--gold)}
.rv-item.is-sample{border-style:dashed;background:transparent}
.rv-item.is-sample .rv-body{color:var(--ink2)}
.rv-sample-note{
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;
  background:var(--paper);padding:14px 16px;margin-bottom:14px;
  font-size:13.5px;line-height:1.65;color:var(--ink2);
}
.rv-sample-note strong{color:var(--ink)}

/* 빈 상태 */
.rv-empty{
  background:var(--paper);border:1px dashed var(--line2);border-radius:var(--radius);
  padding:56px 28px;text-align:center;
}
.rv-empty .ico{
  width:48px;height:48px;border-radius:50%;background:var(--brand-dim);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.rv-empty .ico svg{width:23px;height:23px;stroke:var(--brand);fill:none;stroke-width:1.8}
.rv-empty h3{font-size:17px;font-weight:800;margin-bottom:8px}
.rv-empty p{font-size:14px;color:var(--ink3)}

/* 작성 카드 */
.rv-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:28px 30px;margin-top:22px}
.rv-card h2{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:7px}
.rv-card .hint{font-size:13.5px;color:var(--ink3);margin-bottom:20px}

/* 별점 입력 */
.rv-rate{display:flex;gap:4px;margin-bottom:6px}
.rv-rate button{
  background:none;border:0;padding:2px;line-height:1;
  font-size:30px;color:var(--line2);transition:color .12s;
}
.rv-rate button.on{color:var(--gold)}
.rv-rate button:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.rv-rate-label{font-size:13px;color:var(--ink3);margin-bottom:18px;min-height:20px}

.rv-count{font-size:12.5px;color:var(--ink3);text-align:right;margin-top:6px;font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .rv-page{padding:32px 0 48px}
  .rv-wrap{padding:0 18px}
  .rv-summary{padding:16px 18px;gap:14px}
  .rv-avg{font-size:26px}
  .rv-item{padding:18px 18px}
  .rv-date{margin-left:0;width:100%}
  .rv-card{padding:22px 20px}
  .rv-empty{padding:44px 20px}
  .rv-rate button{font-size:27px}
}

/* ── CTA 배너 (랜딩의 견적 요청 유도) ── */
.cta-banner{
  background:var(--brand);border-radius:10px;
  padding:56px 48px;text-align:center;color:#fff;
}
.cta-banner h2{font-size:27px;font-weight:800;letter-spacing:-.02em;margin-bottom:14px}
.cta-banner p{color:rgba(255,255,255,.78);font-size:15px;margin-bottom:28px}
.cta-banner .btn-primary{background:#fff;color:var(--brand)}
.cta-banner .btn-primary:hover{background:#F0EBF7}

/* ── 견적 요청 전용 페이지(request.html) ── */
.page-form{background:var(--paper)}
.form-page{padding:56px 0 72px}
a.brand{display:inline-block}
.nav-link.back{font-weight:600}
@media (max-width:640px){
  /* 모바일에서는 버튼을 화면 폭에 꽉 채워 세로로 쌓는다.
     가로로 두면 "가구·침대·매트리스 견적" 이 두세 줄로 접힌다. */
  .hero-picks{grid-template-columns:1fr;gap:8px}
  /* 좁은 화면에서는 장식이 글 뒤로 겹쳐 읽기를 방해한다.
     가장자리 큰 것 둘만 남기고 나머지는 감춘다. */
  .hero-deco svg{opacity:.05}
  .hero-deco svg:nth-child(n+3){display:none}

  .pick{width:100%;padding:13px 16px}
  .pick-ico{width:34px;height:34px;border-radius:8px}
  .pick-ico svg{width:18px;height:18px}
  .cta-banner{padding:40px 22px;border-radius:8px}
  .cta-banner h2{font-size:21px;line-height:1.45}
  .cta-banner p{font-size:14.5px;margin-bottom:24px}
  .form-page{padding:36px 0 48px}
  /* 폼 전용 페이지에서는 좌우 여백을 줄여 입력 영역을 넓게 쓴다 */
  .page-form .wrap{padding:0 14px}
  .page-form .nav-link{display:block}
}

/* ══ WIZARD ══ */
.form-shell{max-width:660px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.form-top{padding:22px 30px 0}
.prog-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.prog-step{font-size:13px;font-weight:800;color:var(--brand)}
.prog-pct{font-size:12.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.prog-track{height:4px;background:var(--line);border-radius:99px;overflow:hidden}
.prog-fill{height:100%;background:var(--brand);border-radius:99px;width:0;transition:width .35s cubic-bezier(.4,0,.2,1)}

.panel{display:none;padding:26px 30px 30px}
.panel.active{display:block;animation:slide .3s ease}
@keyframes slide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel h2{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.4;margin-bottom:7px}
.panel .hint{font-size:13.5px;color:var(--ink3);margin-bottom:22px}

fieldset{border:0}
legend{padding:0}

/* 선택 카드 */
.opts{display:grid;gap:10px}
.opts.g4{grid-template-columns:repeat(4,1fr)}
.opts.g3{grid-template-columns:repeat(3,1fr)}
.opts.g2{grid-template-columns:repeat(2,1fr)}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  min-height:96px;padding:14px 10px;text-align:center;
  border:1px solid var(--line2);border-radius:var(--radius);
  font-size:14px;font-weight:600;background:var(--paper);
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.opt.row span{flex-direction:row;min-height:0;padding:14px 16px;justify-content:flex-start;text-align:left;gap:12px}
.opt.chip span{min-height:0;padding:11px 14px;font-size:13.5px;justify-content:center;gap:1px}
.opt-sub{display:block;font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink3);white-space:nowrap}
.opt input:checked + span .opt-sub{color:var(--brand)}
.opt svg{width:26px;height:26px;stroke:var(--ink2);fill:none;stroke-width:1.6;flex:none;transition:stroke .15s}
.opt span:hover{border-color:var(--ink3)}
.opt input:checked + span{
  border-color:var(--brand);background:var(--brand-dim);color:var(--brand);
  box-shadow:inset 0 0 0 1px var(--brand);
}
.opt input:checked + span svg{stroke:var(--brand)}
.opt input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}

/* 세부 옵션 블록 */
.optgrp{border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:14px;background:var(--bg)}
.optgrp > header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.optgrp > header svg{width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:1.6;flex:none}
.optgrp > header h3{font-size:16px;font-weight:800;letter-spacing:-.01em}
.optgrp .sub{margin-bottom:14px}
.optgrp .sub:last-child{margin-bottom:0}
.optgrp .sub > .lab{font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:8px;display:block}
.optgrp .lab-hint{font-style:normal;font-weight:600;color:var(--gold);font-size:12px;margin-left:5px}
.optgrp .opt span{background:var(--paper)}
.spec-wait{font-size:13px;color:var(--ink3);padding-top:2px}

/* 입력 */
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px}
.field .opt-tag{font-weight:500;color:var(--ink3);font-size:12.5px;margin-left:5px}
.ctrl{
  width:100%;padding:13px 14px;border:1px solid var(--line2);border-radius:6px;
  background:var(--paper);font-size:15px;transition:border-color .15s,box-shadow .15s;
}
.ctrl:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(74,46,110,.14)}
textarea.ctrl{resize:vertical;min-height:88px;line-height:1.6}
select.ctrl{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8697' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:38px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.err{display:none;font-size:13px;color:var(--danger);margin-top:7px;font-weight:600}
.err.show{display:block}
.ctrl.invalid{border-color:var(--danger)}
.divider{height:1px;background:var(--line);margin:22px 0}

/* 안내 박스 */
.note{display:flex;gap:11px;background:var(--brand-dim);border-radius:var(--radius);padding:15px 17px;margin-top:18px}
.note svg{width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2.2;flex:none;margin-top:3px}
.note p{font-size:13.5px;color:var(--brand);line-height:1.6}
.note strong{font-weight:800}
.note.warn{background:var(--gold-dim)}
.note.warn svg{stroke:#8A6A2C}
.note.warn p{color:#7A5C24}

/* ══ 예상 견적서 ══ */
.quote-doc{border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.quote-hd{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding:20px 22px;background:var(--brand);color:#fff;
}
.quote-hd h3{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px}
.quote-hd .sub{font-size:12.5px;color:rgba(255,255,255,.75)}
.quote-hd .no{text-align:right;font-size:12px;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;white-space:nowrap}
.quote-body{padding:4px 0}
.qline{display:flex;gap:12px;padding:15px 22px;border-bottom:1px solid var(--line)}
.qline .qmain{flex:1;min-width:0}
.qline .qname{font-size:14.5px;font-weight:800;margin-bottom:3px}
.qline .qspec{font-size:12.5px;color:var(--ink3)}
.qline .qprice{font-size:14px;font-weight:800;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.qtotal{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:18px 22px;background:var(--bg)}
.qtotal .lbl{font-size:14px;font-weight:800}
.qtotal .val{font-size:19px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
.qbudget{padding:0 22px 18px;background:var(--bg);font-size:13px;color:var(--ink2)}
.qbudget b{color:var(--brand);font-weight:800}
.qbudget.over b{color:var(--gold)}
.qdisc{padding:16px 22px;border-top:1px solid var(--line);background:var(--paper)}
.qdisc p{font-size:12.5px;color:var(--ink3);line-height:1.65}
.qdisc strong{color:var(--ink2);font-weight:700}

/* 요약 */
.summary{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:22px}
.summary-row{display:flex;gap:14px;padding:11px 16px;font-size:13.5px;border-bottom:1px solid var(--line)}
.summary-row:last-child{border-bottom:0}
.summary-row dt{flex:none;width:82px;color:var(--ink3);font-weight:600}
.summary-row dd{color:var(--ink);font-weight:600}

/* 동의 */
.agree-all{
  display:flex;align-items:center;gap:11px;padding:16px;
  border:1px solid var(--brand);background:var(--brand-dim);border-radius:var(--radius);
  margin-bottom:14px;cursor:pointer;
}
.agree-all span{font-size:15px;font-weight:800;color:var(--brand)}
.agree-item{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:9px;overflow:hidden}
.agree-head{display:flex;align-items:center;gap:11px;padding:14px 16px;cursor:pointer}
.agree-head .txt{flex:1;font-size:14px;font-weight:600}
.agree-head .req{font-size:12px;font-weight:800;color:var(--danger)}
.agree-head .req.opt{color:var(--ink3)}
.agree-toggle{background:none;border:0;padding:6px;display:flex;align-items:center;color:var(--ink3)}
.agree-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .2s}
.agree-item.open .agree-toggle svg{transform:rotate(180deg)}
.agree-body{display:none;padding:0 16px 16px;font-size:13px;color:var(--ink2)}
.agree-item.open .agree-body{display:block}
.agree-body table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:4px}
.agree-body th,.agree-body td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.agree-body th{background:var(--bg);font-weight:700;white-space:nowrap;width:88px}
.agree-body .foot{margin-top:10px;font-size:12.5px;color:var(--ink3)}

/* 체크박스 */
.cbx{
  appearance:none;width:21px;height:21px;flex:none;
  border:1.5px solid var(--line2);border-radius:5px;background:var(--paper);
  display:grid;place-content:center;transition:background .15s,border-color .15s;
}
.cbx::before{
  content:'';width:11px;height:11px;transform:scale(0);transition:transform .12s ease-in-out;
  box-shadow:inset 1em 1em #fff;
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);
}
.cbx:checked{background:var(--brand);border-color:var(--brand)}
.cbx:checked::before{transform:scale(1)}
.cbx:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 네비 */
/* 하단 네비게이션 — "이전"은 내용 폭, "다음"이 남은 폭을 모두 차지한다.
   width 를 명시해 두는 이유: 다른 곳의 .btn{width:100%} 같은 규칙이 흘러들어와
   "이전"이 한 줄을 다 먹고 "다음"을 밀어내는 사고를 막기 위함. */
.form-nav{display:flex;gap:10px;padding:0 30px 30px;align-items:stretch}
.form-nav .btn{padding:15px 20px;width:auto}
.form-nav .btn-next{flex:1 1 auto;min-width:0}
.btn-back{flex:0 0 auto;white-space:nowrap;background:var(--bg);border-color:var(--line2)}

/* 완료 */
.done{text-align:center;padding:8px 0}
.done .check{width:60px;height:60px;border-radius:50%;background:var(--brand-dim);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.done .check svg{width:28px;height:28px;stroke:var(--brand);fill:none;stroke-width:2.6}
.done h2{font-size:23px;margin-bottom:10px}
.done p{font-size:14.5px;color:var(--ink2);margin-bottom:6px}
.ticket{
  display:inline-block;margin:18px 0 22px;padding:11px 20px;
  background:var(--bg);border:1px dashed var(--line2);border-radius:6px;
  font-size:14px;font-weight:800;letter-spacing:.06em;font-variant-numeric:tabular-nums;
}

/* ── FAQ ── */
.faq{max-width:680px;margin:0 auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 4px;background:none;border:0;text-align:left;
  font-size:15.5px;font-weight:700;letter-spacing:-.01em;
}
.faq-q svg{width:17px;height:17px;stroke:var(--ink3);fill:none;stroke-width:2.2;flex:none;transition:transform .2s}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{display:none;padding:0 4px 22px;font-size:14.5px;color:var(--ink2)}
.faq-item.open .faq-a{display:block}
.faq-a a{color:var(--brand);font-weight:700;text-decoration:underline}

/* ── LOOKUP ── */
.lookup-box{max-width:520px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:32px 30px}
.lookup-msg{display:none;margin-top:16px;padding:14px 16px;border-radius:var(--radius);background:var(--gold-dim);font-size:13.5px;color:#7A5C24;font-weight:600}
.lookup-msg.show{display:block}

/* ── FOOTER ── */
footer{border-top:1px solid var(--line);padding:40px 0;background:var(--bg)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--ink3)}
footer a{color:var(--ink3)}
footer a:hover{color:var(--ink2)}
/* ⚠ nowrap 이 없으면 칸이 모자랄 때 링크 하나가 글자 단위로 끊긴다 */
.foot-links{display:flex;gap:12px 20px;flex-wrap:wrap}
.foot-links a{white-space:nowrap}

/* ── 반응형 ── */
@media (max-width:900px){
  .hero h1{font-size:36px}
}
@media (max-width:640px){
  :root{--nav-h:58px}
  .wrap{padding:0 18px}
  .nav-right{gap:12px}
  .nav-link{display:none}
  .hero{padding:0 0 48px}
  .hero-bg{height:210px}
  .hero-copy{padding:30px 18px 0}
  .hero h1{font-size:29px;letter-spacing:-.03em}
  .hero .lead{font-size:15.5px;margin-bottom:26px}
  .trust{margin-top:22px}
  .trust-item{padding:2px 6px}
  .trust dt{font-size:16px}
  .trust dd{font-size:11.5px}
  section{padding:52px 0}
  .sec-head{margin-bottom:32px}
  .sec-head h2{font-size:23px}
  .form-shell{border-radius:10px}
  .form-top{padding:18px 20px 0}
  .panel{padding:22px 20px 26px}
  .panel h2{font-size:19px}
  .form-nav{padding:0 20px 22px}
  .opts.g4,.opts.g3{grid-template-columns:repeat(2,1fr)}
  /* 브랜드 칩은 글자가 짧아 3열이 그대로 들어간다 (2+1 고아 방지) */
  .opts.g3.chips.short{grid-template-columns:repeat(3,1fr)}
  .opt span{min-height:88px;font-size:13.5px}
  .optgrp{padding:16px}
  .two{grid-template-columns:1fr;gap:14px}
  .quote-hd{padding:16px 18px}
  .qline,.qtotal{padding:14px 18px}
  .qtotal{flex-direction:column;align-items:flex-start;gap:2px}
  .qtotal .val{font-size:20px}
  .qbudget,.qdisc{padding-left:18px;padding-right:18px}
  .lookup-box{padding:26px 22px}
  footer{padding:32px 0}
  footer .wrap{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:380px){
  /* 아주 좁은 화면에서는 배지를 숨긴다. 로고·상담 버튼이 먼저다.
     ⚠ 메시지가 사라지는 것은 아니다 — 히어로 본문("…준비하고 있습니다")과
       업종 버튼의 "준비 중" 이 같은 말을 한다. */
  .nav-badge{display:none}
  .hero h1{font-size:26px}
  /* 큰 아이콘 카드(1단계 품목)만 1열로 접는다.
     칩(.chips)은 글자가 짧아 접으면 화면만 길어지므로 열 수를 유지한다. */
  .opts.g4:not(.chips),.opts.g3:not(.chips),.opts.g2:not(.chips){grid-template-columns:1fr}
  .opt:not(.chip) span{min-height:0;flex-direction:row;justify-content:flex-start;padding:14px 16px;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}