/* ══════════════════════════════════════════════════════════════
   DB IN 견적마법사 — 화면 모양
   ⚠ 색은 :root 한 곳에서 정한다. public/quote.css 와 같은 값을 쓴다 —
     한쪽만 바꾸면 고객이 두 화면을 오갈 때 색이 튄다.
   ══════════════════════════════════════════════════════════════ */
@import url('/fonts/pretendard.css');

/* ════════════════════════════════════════════════════════════
   디자인 시스템
   - 브랜드 보라(#4A2E6E)는 유지, 배경·선·그림자를 낮춰 정돈된 톤으로
   - 선택 상태는 1px 테두리 + 1px 링(레이아웃 흔들림 없이 또렷하게)
   - 굵기: 제목 700 / 라벨·버튼 600~700 / 본문 400~500
   ════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* 버튼·입력창·셀렉트도 Pretendard 적용 (브라우저 기본 폰트로 떨어지는 것 방지) */
button,input,select,textarea,option{font-family:inherit}
:root{
  /* DB IN 색 — public/quote.css 와 같은 값이다. 한쪽만 바꾸지 말 것 */
  --red:#4A2E6E;--red-dark:#3A2357;          /* brand · brand-dark */
  --red-soft:#EFEAF6;--red-soft2:#DCD2EA;    /* brand-dim */
  --gold:#B0863B;                            /* 우리 금색(조금 차분하다) */
  --required:#A5453B;--price:#A5453B;        /* danger — 쨍한 빨강 대신 벽돌색 */
  --ink:#231F29;--ink2:#5D5766;--ink3:#8C8697;
  --bg:#F7F5F3;--canvas:#F0EDEA;--panel:#FFFFFF;   /* 따뜻한 회색 바탕 */
  --line:#E6E2E4;--line-strong:#D4CFD6;
  --green:#2F6B4F;--green-soft:#E4F0E9;      /* 매장 화면의 성약 색과 같다 */
  --shadow-sm:0 1px 2px rgba(35,31,41,.04);
  --shadow-md:0 1px 2px rgba(35,31,41,.03),0 12px 28px -14px rgba(35,31,41,.10);
  --ring:0 0 0 3px rgba(74,46,110,.14);
}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Pretendard','Pretendard Variable','Apple SD Gothic Neo','Malgun Gothic',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--canvas);min-height:100vh;color:var(--ink);
  display:flex;justify-content:center;padding:36px 16px 56px;
  letter-spacing:-.011em;line-height:1.5;
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.page{width:100%;max-width:480px}
/* ── 줄바꿈: 제목은 균형 있게, 본문은 마지막 줄에 한두 글자만 남지 않게, ·로 이어진 단어는 붙여서 ── */
h2,.p1-title,.sec-title,.modal-title,.qp-customer-greet,.p1-hero-caption{text-wrap:balance}
.step-sub,.p1-sub,.opt-tag,.sec-desc,.p1-note,.qp-ai-card-text,.qp-disclaimer,.brand-card-desc,.info-err,.item-modal-sub,.upload-guide li,.modal-box p{text-wrap:pretty}
.nb{white-space:nowrap}
button:focus-visible,select:focus-visible,input[type=file]:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ── 상단 브랜드 로우 (관리자 진입용) ── */
/* 로고(왼쪽) + 배지(오른쪽)를 한 줄에. ⚠ 배지는 첫 화면에서만 보인다 */
/* 로고 — 글자 배지를 바로 이어서 둔다(따로 떨어뜨리지 않는다) */
.brand-row{display:flex;justify-content:flex-start;align-items:center;gap:9px;margin-bottom:16px}
.brand-row .p1-tag{margin-bottom:0}
body:not([data-scr="p1"]) .brand-row .p1-tag{display:none}
.brand-row-logo{height:20px;width:auto}

/* ── 스텝 카드 ── */
.step-card{background:var(--panel);border-radius:28px;box-shadow:var(--shadow-md);padding:28px 24px 26px;position:relative;overflow:hidden}
.scr{display:none}
.scr.on{display:block;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.step-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2);font-weight:600;margin-bottom:10px}
.step-meta span:last-child{color:var(--ink3);font-variant-numeric:tabular-nums}
.progress{height:3px;background:var(--line);border-radius:99px;margin-bottom:28px;overflow:hidden}
.progress-fill{height:100%;background:var(--red);border-radius:99px;transition:width .35s ease}
.scr h2{font-size:22px;font-weight:700;margin-bottom:8px;line-height:1.38;letter-spacing:-.028em}
.step-sub{font-size:13.5px;color:var(--ink2);line-height:1.65;margin-bottom:28px}

/* ── 버튼 ── */
.nav-row{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:32px}
.nav-row.single{grid-template-columns:1fr}
.btn-primary{padding:16px;background:var(--red);color:#fff;border:none;border-radius:14px;font-size:15px;font-weight:700;letter-spacing:-.01em;cursor:pointer;font-family:inherit;transition:background .15s,transform .1s}
.btn-primary:hover{background:var(--red-dark)}
.btn-primary:active{transform:scale(.985)}
.btn-primary:disabled{background:#E9E6EF;color:#A9A4B6;cursor:not-allowed;transform:none}
.btn-secondary{padding:16px;background:var(--bg);color:var(--ink2);border:none;border-radius:14px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,transform .1s}
.btn-secondary:hover{background:#EEEBF4}
.btn-secondary:active{transform:scale(.985)}

/* ── P1 랜딩 ── */
/* ⚠ 배지에 배경·테두리를 다시 넣지 말 것. 로고 옆에 붙어 있어서 카드 모양이 겹쳐 보인다.
   글자만 두고, 로고와 구분되도록 색과 굵기로만 말한다. */
.p1-tag{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;color:var(--red);
  background:none;border:0;padding:0;margin:0;letter-spacing:-.01em}
.p1-title{font-size:27px;font-weight:700;line-height:1.4;letter-spacing:-.032em;margin-bottom:14px}
.p1-title .hl{color:var(--red)}
.p1-sub{font-size:14px;color:var(--ink2);line-height:1.7;margin-bottom:28px}
/* ⚠ .ln 은 히어로 밖(다른 화면)에서만 쓴다. 히어로 설명글에는 쓰지 말 것 —
     balance 가 줄을 일부러 짧게 끊어 오른쪽이 비어 보인다. */
.p1-sub .ln{display:block;text-wrap:balance}
.p1-hero-in .p1-sub{text-wrap:initial}
.step-sub .ln{display:block;text-wrap:balance}
.p1-note{background:var(--bg);border-radius:12px;padding:14px 16px;margin-top:16px;font-size:11.5px;color:var(--ink3);line-height:1.65;text-align:left}

/* ── P1 히어로 로고 배너 ── */
/* ── 따라다니는 견적 버튼 ──
   화면 세로 2/3 지점, 오른쪽에 붙는다.
   ⚠ 좁은 화면에서는 카드가 화면을 꽉 채운다. 그때는 아래쪽 가운데로 내려
     글을 가리지 않게 한다(아래 @media).
   ⚠ 첫 화면에서만 보인다 — 표시 여부는 body[data-scr="p1"] 가 정한다. */
.float-cta{
  position:fixed;top:66%;right:18px;z-index:50;
  display:none;align-items:center;gap:10px;
  padding:14px 18px;border:0;border-radius:16px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:800;line-height:1.35;color:#fff;
  background:var(--red);box-shadow:0 14px 30px -12px rgba(74,46,110,.7);
  transition:transform .15s ease, box-shadow .15s ease;
}
body[data-scr="p1"] .float-cta{display:inline-flex}
.float-cta:hover{transform:translateY(-2px)}
.float-cta-txt{text-align:left}
.float-cta-go{font-size:16px;font-weight:700}

@media (max-width:900px){
  /* 카드와 겹치지 않게 아래로 내린다. 가로로 눕혀 폭을 줄인다 */
  .float-cta{top:auto;bottom:18px;right:50%;transform:translateX(50%);
    padding:13px 20px;border-radius:999px;box-shadow:0 12px 26px -10px rgba(74,46,110,.75)}
  .float-cta:hover{transform:translateX(50%) translateY(-2px)}
  /* ⚠ 한 줄로 둔다. 글씨를 줄이면 읽기 어려워지므로 버튼이 옆으로 늘어나게 한다.
       375px 에서도 화면 폭을 넘지 않는다(글자 + 화살표 + 여백 ≈ 250px). */
  .float-cta-txt{white-space:nowrap}
  .float-cta-txt br{display:none}
  /* 본 버튼이 화면에 보이면 겹치므로 잠깐 물러난다 (watchCta() 가 표시를 붙인다) */
  body.cta-near .float-cta{opacity:0;pointer-events:none;transform:translateX(50%) translateY(8px)}
}
.float-cta{transition:transform .15s ease, box-shadow .15s ease, opacity .18s ease}

/* ══ 세로 다이얼(시안 C) — 글 오른쪽 ══ */
/* ⚠ 아래끝은 조각 줄(y 417) 위에서 끝나야 한다. 72px 으로 뒀더니 y 468 까지
     내려와 Carrier 로고가 「연락은 1곳만」 조각에 겹쳤다(2026-10-06). */
/* ⚠ 한 번에 두어 개만 보이면 된다. 길게 두면 사진 오른쪽이 로고로 꽉 차
     사람이 묻힌다(2026-10-06).
   ⚠ 아래끝은 조각 줄(y 417) 위에서 끝나야 한다. Carrier 로고가 「연락은
     1곳만」 조각에 겹친 적이 있다. */
.p1-dial-r{position:absolute;right:14px;top:290px;bottom:150px;width:76px;z-index:1;pointer-events:none}
.p1-hero-track-wrap.is-vert{height:100%;padding:0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
.p1-hero-track-wrap.is-vert .p1-hero-track{flex-direction:column;align-items:center;gap:16px;width:auto}
/* ⚠ 가운데 온 로고가 커지는 만큼 칸에 여유가 있어야 한다. 세로일 때는
     1.2배다(wizard.js). 63 × 1.2 = 76 으로 칸 폭과 딱 맞다.
     가로(1.4배)와 값이 다르니 한쪽만 보고 고치지 말 것. */
.p1-hero-track-wrap.is-vert .p1-hero-logo-card{width:63px;height:22px;
  background:none;box-shadow:none;border-radius:0;padding:0}
.p1-hero-banner{margin-top:0;position:relative;background:linear-gradient(135deg,#2B1946 0%,#4A2E6E 58%,#5D3C8A 100%);border-radius:22px;padding:0;margin-bottom:14px;overflow:hidden;box-shadow:0 16px 30px -16px rgba(74,46,110,.6)}
.p1-hero-banner::before{content:'';position:absolute;left:50%;top:50%;width:280px;height:190px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(196,168,255,.42),rgba(196,168,255,0));pointer-events:none}
/* ⚠ 로고 위아래 여백(2026-09-28). 처음 24px 은 너무 넓어 띠가 비어 보여 13px 로 줄였고,
     그 뒤 띠 자체의 여백 6px 까지 여기로 몰아 19px 이 되었다.
     ⚠ 6px 을 여기로 옮긴 까닭: 가리개(mask)가 걸린 이 칸은 따로 그려지는데,
       그 경계가 띠 안쪽에 있으면 휴대폰에서 가로로 흰 줄이 비쳤다.
       띠 가장자리와 겹쳐 두면 테두리에 가린다.
     ⚠ 띠 여백 + 이 여백 × 2 + 카드 56px = 94px 이어야 띠 높이가 그대로다.
       한쪽만 고치지 말 것.
     ⚠ 가운데 로고가 1.4배로 커지므로 이 여백이 그만큼은 남아 있어야 잘리지 않는다. */
.p1-hero-track-wrap{position:relative;overflow:hidden;padding:19px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* ⚠ will-change 를 쓰지 않는다. 층이 하나 더 생기면서 그 경계가 흰 줄로 비쳤다. */
.p1-hero-track{display:flex;align-items:center;gap:28px;width:max-content}
.p1-hero-logo-card{width:104px;height:56px;border-radius:18px;background:#fff;box-shadow:0 5px 14px -3px rgba(12,6,28,.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:6px;transition:transform .12s linear,opacity .12s linear,box-shadow .2s ease;transform-origin:center center}
.p1-hero-logo-card img{max-width:100%;max-height:100%;object-fit:contain}
/* ⚠ 해피콜만 별을 머리에 이고 있다. 그림 전체의 가운데를 맞추면 정작 글자는
     아래로 내려앉아 보인다(2026-09-28 확인 — 잉크 무게중심이 아래로 14.8% 치우쳐 있었다.
     나머지 로고는 모두 ±4% 안이다).
   ⚠ 이 img 에 다른 곳에서 transform 을 주지 말 것. 띠의 확대는 바깥 카드가 맡는다. */
.p1-hero-logo-card img[alt="해피콜"]{transform:translateY(-14.8%)}
.p1-hero-caption{text-align:center;font-size:12.5px;font-weight:500;color:var(--ink3);margin-bottom:22px}
.p1-hero-caption b{color:var(--red);font-weight:700}
/* ══ 히어로 ══ 사진 위에 글과 버튼을 얹는다.
   ⚠ 높이를 글이 정하게 둔다(min-height 만 준다). 글이 길어지면 사진이 따라
     늘어나야지, 반대로 글이 사진 밖으로 넘치면 안 된다.
   ⚠ 사진은 뒤에 깔고(absolute) 글은 위에 올린다(relative). 순서를 바꾸면
     버튼이 안 눌린다. */
/* ⚠ 글을 아래에 붙인다(align-items:flex-end).
     사진 속 사람 얼굴이 세로로 37~57% 자리에 있다. 사진은 가로가 길어 세로가
     딱 맞게 채워지므로, 이 비율은 높이를 바꿔도 변하지 않는다. 글을 위에 두면
     어떤 크기로 잘라도 얼굴을 덮는다(2026-10-01 확인). 그래서 얼굴은 위쪽에
     그대로 두고 글은 아래 빈 자리(소파·바닥)에 얹는다.
   ⚠ 높이는 화면에 맞춰 줄인다. 작은 폰에서 600px 을 고집하면 첫 화면이
     사진 하나로 다 찬다. */
.p1-hero{position:relative;margin:0 0 18px;border-radius:18px;overflow:hidden;
  min-height:min(540px,68vh);display:flex;align-items:flex-end;box-shadow:var(--shadow-md)}
/* ⚠ 사진을 위로 올려 붙인다. 원본 위쪽 1/4 은 냉장고 위 빈 벽이라 쓸 데가 없다.
     칸을 아래는 맞추고 위로만 33% 늘린 뒤, 넘친 윗부분은 .p1-hero 의
     overflow:hidden 이 잘라낸다. 결과로 원본의 위 약 25% 가 사라진다.
   ⚠ object-position 세로 값으로는 못 한다. 사진이 가로로 길어 칸에 맞출 때
     세로는 늘 딱 맞게 채워지므로 세로 값이 아무 효과가 없다(2026-10-02).
   ⚠ 33% 를 함부로 올리지 말 것. 위로 올리는 만큼 좌우도 같이 좁아진다.
     45% 로 올렸더니 얼굴은 더 또렷해졌지만 냉장고가 왼쪽 회색 덩어리로만
     남아 「가전」 사진으로 읽히지 않았다(2026-10-06).
   ⚠ 이 값은 아래 장막 끝(65%)과 짝이다. 33% 라야 사람 턱이 장막 위로
     올라온다. 둘 중 하나만 고치면 얼굴이 다시 뿌옇게 된다. */
.p1-hero-pic{position:absolute;left:0;right:0;bottom:0;top:-33%;height:133%;display:block}
/* ⚠ 사람이 보이게 자른다. 26% 로 두었더니 사람이 통째로 잘려 나갔다(2026-10-02).
     58% 면 세탁기·냉장고와 사람이 함께 들어온다.
   ⚠ 세로 값은 효과가 없다. 사진이 가로로 길어 세로는 딱 맞게 채워진다. */
.p1-hero-pic img{width:100%;height:100%;object-fit:cover;object-position:65% 50%;display:block}
/* 흰 장막 — 위는 거의 불투명, 아래로 갈수록 사진이 드러난다.
   ⚠ 지우지 말 것. 대낮 거실 사진이라 이게 없으면 검은 글씨가 묻힌다. */
/* 아래에서 올라오는 흰 장막.
   ⚠ 위쪽은 건드리지 않는다 — 사람과 가전이 또렷하게 보여야 한다.
   ⚠ 글이 시작되는 자리(아래에서 약 45%)부터 거의 불투명해진다. 대낮 거실
     사진이라 이게 없으면 검은 글씨가 바닥·소파에 묻힌다. */
.p1-hero-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.96) 38%,
    rgba(255,255,255,.80) 50%,
    rgba(255,255,255,.26) 56%,
    rgba(255,255,255,0) 65%)}
/* ⚠ 첫 화면에서는 위쪽 머리줄을 감춘다. 사진 위 배지와 같은 말이 두 번 나온다.
     2단계부터는 사진이 없으므로 머리줄이 다시 보인다. */
body[data-scr="p1"] .brand-row{display:none}
.p1-hero-kicker{position:absolute;top:14px;left:16px;z-index:1;
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:700;letter-spacing:-.01em;color:var(--red);
  background:rgba(255,255,255,.84);border-radius:999px;padding:6px 13px 6px 9px;
  backdrop-filter:blur(6px);box-shadow:0 2px 8px -4px rgba(35,31,41,.25)}
.p1-hero-kicker img{height:23px;width:auto;display:block}
/* 우리 이름은 로고처럼 보이게 자간을 벌린다 */
.p1-hero-kicker .k-us{font-size:13px;font-weight:800;letter-spacing:.04em}
/* ⚠ 제휴처 이름은 우리 보라색이 아니라 먹색이다. 같은 색으로 두면 전자랜드가
     우리 브랜드의 일부처럼 읽힌다. 서로 다른 두 회사임이 보여야 한다. */
.p1-hero-kicker .k-them{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
/* 가운데 ✕ 는 잇는 기호일 뿐이다. 양쪽 이름보다 물러나 있어야 한다 */
.p1-hero-kicker .k-x{font-size:9.5px;font-weight:600;opacity:.5;margin:0 -1px}
/* ⚠ 오른 여백 102px 은 세로 다이얼(.p1-dial-r) 자리다. 다이얼을 빼면
     이 값도 20px 으로 되돌릴 것 — 안 그러면 글이 괜히 좁게 남는다. */
/* ⚠ 오른 여백 86px 은 세로 다이얼(.p1-dial-r 76px) + 사이 10px 이다.
     다이얼을 빼면 20px 으로 되돌릴 것. 둘은 한 쌍이다. */
.p1-hero-in{position:relative;padding:0 86px 20px 20px;width:100%}
/* ⚠ 27px 이면 「이번엔 어디서 사야」가 191px 이라 좁아진 글칸(173px)을 넘어
     두 줄로 쪼개진다. 24px 이라야 한 줄에 들어간다(2026-10-06 실측). */
.p1-hero-in .p1-title{font-size:24px}

.p1-hero-in .p1-title{margin-bottom:12px}
.p1-hero-in .p1-sub{margin-bottom:16px}
/* ⚠ 오른쪽 -82px 은 좁힌 글칸(102-20) 밖으로 되돌리는 값이다.
     조각과 버튼만 폭을 다 쓴다 — 안 그러면 조각이 두 줄, 버튼 글씨가
     두 줄로 접힌다(전에 고쳤던 문제가 되살아난다). */
.p1-hero-in .p1-chips{margin:0 -66px 18px 0}
.p1-hero-in .p1-stats{margin:0 -66px 18px 0}
/* ⚠ width:auto 로는 안 된다. 버튼은 auto 일 때 글자 폭에 맞춰 줄어든다. */
.p1-cta-hero{width:calc(100% + 66px)}

/* ⚠ 좁은 폰에서는 다이얼을 접고 글이 폭을 다 쓴다. 글칸이 150px 아래로
     떨어지면 제목이 두 줄로 쪼개져 첫인상을 버린다.
   ⚠ 이 블록은 반드시 위 .p1-hero-in / .p1-chips / .p1-cta-hero 보다 뒤에
     있어야 한다. 앞에 두었더니 힘이 같아 뒤엣것에 덮였다(2026-10-06). */
@media (max-width:359px){
  .p1-dial-r{display:none}
  .p1-hero-in{padding-right:20px}
  .p1-hero-in .p1-chips{margin-right:0}
  .p1-hero-in .p1-stats{margin-right:0}
  .p1-cta-hero{width:100%}
}

/* 브랜드 띠 머리말 */
.p1-band-t{font-size:13px;font-weight:700;color:var(--ink3);margin:0 0 9px;letter-spacing:-.01em}

/* 왜 쓰는지 — 세 장 */
/* ⚠ minmax(0,1fr) 이어야 세 칸이 똑같아진다. 그냥 1fr 로 두면 긴 낱말이 든
     칸이 넓어져 71/105/62 처럼 들쭉날쭉해진다(320px 에서 확인, 2026-10-01). */
.p1-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 24px}
.p1-why-card{padding:14px 10px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;text-align:center;box-shadow:var(--shadow-sm)}
.p1-why-ico{position:relative;width:34px;height:34px;margin:0 auto 9px;display:flex;align-items:center;
  justify-content:center;border-radius:10px;background:var(--red-soft);color:var(--red)}
.p1-why-ico svg{width:21px;height:21px}
/* 순서 번호 — 아이콘 칸 왼쪽 위 모서리에 걸친다.
   ⚠ 이 번호가 세 칸이 「차례」임을 말한다. 머리말을 따로 두지 않는 까닭이니
     지우려면 머리말을 되살릴 것.
   ⚠ 테두리는 카드 바탕색이다. 번호가 아이콘 칸에 걸쳐 있어 경계가 필요하다. */
.p1-why-n{position:absolute;top:-6px;left:-6px;width:17px;height:17px;border-radius:50%;
  background:var(--red);color:#fff;border:2px solid var(--panel);
  font-size:10px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center}
.p1-why-t{font-size:12.5px;font-weight:700;line-height:1.35;margin-bottom:5px}
.p1-why-d{font-size:11px;font-weight:300;line-height:1.55;color:var(--ink3)}

/* 접수를 닫아 둔 동안의 「준비 중」 안내 (wizard.js checkIntake)
   ⚠ hidden 만으로는 안 숨는다 — 아래 display 가 브라우저 기본값보다 세다. [hidden] 줄을 지우지 말 것.
   ⚠ 닫아 둔 동안 견적 단추(.p1-cta · .float-cta)를 함께 감춘다. 안내만 있고 단추가 남으면 눌러 봐도 안 간다. */
.p1-closed{margin:0 0 16px;padding:14px 16px;border-radius:12px;background:#F4F1FA;color:#3B2A66;font-size:14px;line-height:1.6}
.p1-closed[hidden]{display:none}
body.intake-closed .p1-cta,
body.intake-closed .float-cta{display:none!important}

/* 걸리는 시간·비용·연락 횟수 칩 */
.p1-chips{display:flex;flex-wrap:wrap;gap:7px;margin:-4px 0 16px}
/* ⚠ hidden 만으로는 안 숨는다. 브라우저 기본값(display:none)보다 바로 위
     display:flex 가 세서, 칩과 누적 숫자가 **둘 다** 나와 두 줄이 된다
     (2026-10-19 실제로 겪었다). 아래 두 줄을 지우지 말 것. */
.p1-chips[hidden],.p1-stats[hidden]{display:none}
.p1-chip{font-size:12.5px;font-weight:600;color:var(--ink2);background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap}

/* 누적 실적 세 칸 — 칩을 대신한다.
   ⚠ minmax(0,1fr) 이라야 세 칸이 똑같아진다. 그냥 1fr 로 두면 「누적 접속」이
     든 칸만 넓어져 숫자 줄이 어긋난다(.p1-why 에서 겪은 것과 같다).
   ⚠ 칸 사이는 선으로만 나눈다. 칩처럼 테두리를 두르면 세 덩어리가 되어
     바로 아래 안심 상자와 함께 상자가 넷이 된다. */
.p1-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:-4px 0 16px;padding:10px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.p1-stat{text-align:center;line-height:1.3}
.p1-stat + .p1-stat{border-left:1px solid var(--line)}
/* 숫자는 글꼴 폭을 고정한다. 10분마다 값이 바뀌는데 폭까지 움직이면 눈에 띈다 */
.p1-stat b{display:block;font-size:17px;font-weight:800;color:var(--red);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.p1-stat span{display:block;margin-top:2px;font-size:11px;font-weight:600;color:var(--ink2)}
@media (max-width:339px){ .p1-stat b{font-size:15px} }

/* 전화 폭탄 불안을 푸는 상자 — 첫 화면에서 가장 중요한 한 덩어리다 */
.p1-calm{display:flex;gap:11px;align-items:flex-start;margin:0 0 22px;padding:14px 16px;
  background:var(--green-soft);border:1px solid rgba(47,107,79,.18);border-radius:14px}
.p1-calm-ico{font-size:17px;line-height:1.35;flex-shrink:0}
.p1-calm-t{font-size:13.5px;font-weight:700;color:var(--green);line-height:1.45}
.p1-calm-d{margin-top:3px;font-size:12.5px;font-weight:300;color:var(--ink2);line-height:1.6}
.p1-calm-d strong{font-weight:700;color:var(--green)}

/* 견적서 사진 올리는 상태 — 접수번호 바로 아래 */
.qp-upload-note{margin-top:4px;font-size:11.5px;line-height:1.55;color:var(--ink3)}
.qp-upload-note.ok{color:var(--green)}
.qp-upload-note.bad{color:var(--red)}

.p1-cta{box-shadow:0 8px 20px -6px rgba(74,46,110,.4)}

/* ── 선택 카드 (구매 목적 / 상담 이력 등) ── */
.opt-list{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
.opt-card{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.opt-card:hover{border-color:var(--line-strong)}
.opt-card.sel{border-color:var(--red);box-shadow:0 0 0 1px var(--red);background:var(--red-soft)}
.opt-radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong);flex-shrink:0;position:relative;background:#fff;transition:border-color .15s}
.opt-card.sel .opt-radio{border-color:var(--red)}
.opt-card.sel .opt-radio::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--red)}
.opt-ico{font-size:20px;width:40px;height:40px;border-radius:12px;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.opt-card.sel .opt-ico{background:#fff}
.opt-name{font-size:15px;font-weight:600;display:block;letter-spacing:-.015em}
.opt-tag{font-size:12px;color:var(--ink3);display:block;margin-top:2px}
.opt-discount-badge{flex-shrink:0;background:var(--green-soft);color:var(--green);font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap;margin-left:auto}

/* ── 브랜드 선택 카드 그리드 ── */
.brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px;margin-bottom:4px}
.brand-card-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.brand-card{width:100%;aspect-ratio:1/0.8;background:#fff;border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;justify-content:center;padding:10px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.brand-card:hover{border-color:var(--line-strong)}
.brand-card.brand-card-fill{padding:4px;overflow:hidden}
.brand-card.brand-card-fill img{width:100%;height:100%;object-fit:contain;max-width:none;max-height:none}
.brand-card.sel{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.brand-card img{max-width:100%;max-height:100%;object-fit:contain}
.brand-card-label{font-size:12.5px;font-weight:600;color:var(--ink2)}
.brand-card-desc{font-size:10.5px;color:var(--ink3);line-height:1.45;text-align:center;margin-top:-4px;padding:0 2px}
.brand-card svg{width:100%;height:100%}

/* ── 예산 ── */
.bud-direct-row{display:flex;align-items:center;border:1px solid var(--red-soft2);border-radius:14px;padding:2px 16px;margin-bottom:10px;background:var(--red-soft);transition:border-color .15s,box-shadow .15s}
.bud-direct-row:focus-within{border-color:var(--red);box-shadow:var(--ring)}
.bud-direct-input{flex:1;min-width:0;border:none;outline:none;font-size:17px;font-weight:600;padding:14px 0;font-family:inherit;background:transparent;color:var(--ink)}
.bud-direct-input::placeholder{color:var(--ink3);font-weight:500}
.bud-direct-input{-moz-appearance:textfield}
.bud-direct-input::-webkit-outer-spin-button,.bud-direct-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bud-direct-unit{font-size:14px;color:var(--ink2);font-weight:500}
.bud-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bud-card{border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s,background .15s}
.bud-card:hover{border-color:var(--line-strong)}
.bud-card.sel{border-color:var(--red);box-shadow:0 0 0 1px var(--red);background:var(--red-soft);color:var(--red)}

/* ── 1단계 통합 페이지 섹션(목적·예산·브랜드) ── */
.sec-block{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.sec-block.first{margin-top:0;padding-top:0;border-top:none}
.sec-title{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;line-height:1.4;margin-bottom:4px;letter-spacing:-.02em}
.sec-num{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.sec-desc{font-size:12.5px;color:var(--ink2);line-height:1.6;margin-bottom:16px;padding-left:29px}

/* ── 선택된 제품 요약 박스 ── */
.sel-summary-box{background:var(--red-soft);border-radius:16px;padding:14px 16px;margin-bottom:16px}
.sel-summary-title{font-size:12.5px;font-weight:700;color:var(--red);margin-bottom:8px}
.sel-summary-list{display:flex;flex-wrap:wrap;gap:6px}
.sel-summary-chip{background:#fff;border:1px solid var(--red-soft2);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;color:var(--ink)}

/* ── 대분류 아코디언 ── */
.acc-cat{border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden;background:#fff}
.acc-cat-hd{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;transition:background .15s}
.acc-cat-hd:hover{background:#FBFAFD}
.acc-cat-ico{width:44px;height:44px;flex-shrink:0;position:relative;border-radius:12px;overflow:hidden;background:var(--bg)}
.acc-cat-ico img{width:100%;height:100%;object-fit:contain}
.acc-cat-ico-fallback{display:none;align-items:center;justify-content:center;width:100%;height:100%;font-size:20px;position:absolute;inset:0}
.acc-cat-info{flex:1;min-width:0}
.acc-cat-name{font-size:15px;font-weight:600;letter-spacing:-.015em}
.acc-cat-tag{background:var(--red-soft);color:var(--red);font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;flex-shrink:1;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-cat-caret{color:var(--ink3);font-size:9px;flex-shrink:0;width:16px;text-align:center}
.acc-cat-body{border-top:1px solid var(--line);padding:6px 8px 8px}
.acc-sub-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;cursor:pointer;transition:background .15s}
.acc-sub-row:hover{background:var(--bg)}
.acc-sub-row.sel{background:var(--red-soft)}
.acc-sub-radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;background:#fff}
.acc-sub-row.sel .acc-sub-radio{background:var(--red);border-color:var(--red)}
.acc-sub-name{flex:1;font-size:14px;font-weight:600}
.acc-mini-btn{background:#fff;border:1px solid var(--line-strong);border-radius:999px;padding:6px 12px;font-size:11.5px;font-weight:600;color:var(--ink2);cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,color .15s}
.acc-mini-btn:hover{border-color:var(--red);color:var(--red)}
.acc-mini-btn.on{background:var(--red);border-color:var(--red);color:#fff}
/* ── 결과 화면의 구독 추천 ──
   ⚠ 일시불 견적표(.qp-sum-*)보다 눈에 덜 띄게 둔다. 고객이 받으러 온 것은
     일시불 견적이고 이쪽은 곁들이는 제안이다. 더 크게 만들지 말 것.
   ⚠ 그래도 흰 바탕에 글자만 얹지는 않는다 — 견적서 안의 다른 덩어리와 구별이
     안 되어 허전해 보인다(2026-10-08). 옅은 보라 바탕 + 위 모서리의 빛선으로
     「여기부터 다른 이야기」라는 것만 알린다. */
.qp-reco{
  position:relative;margin:16px 0 0;padding:15px 16px 14px;border-radius:14px;
  background:linear-gradient(180deg, var(--red-soft), rgba(255,255,255,0) 72%), var(--panel);
  border:1px solid var(--red-soft2);
  overflow:hidden;
}
/* 위 모서리를 따라 흐르는 빛선 — .step-card 와 같은 말투 */
.qp-reco::before{
  content:'';position:absolute;top:0;left:14px;right:14px;height:2px;border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
  opacity:.5;
}
.qp-reco-head{
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:11px;
}
.qp-reco-head strong{color:var(--red);font-weight:800}
/* 머리말 앞의 작은 표 — 글자로 넣으면 줄바꿈 때 따로 떨어진다 */
.qp-reco-head::before{
  content:'';flex:none;width:17px;height:17px;border-radius:50%;
  background:var(--red);opacity:.14;
  box-shadow:inset 0 0 0 1.5px var(--red);
}
/* 제품 한 건 — 흰 카드로 띄워 바탕과 분리한다. 여러 건일 때 어디서 끊기는지
   점선보다 또렷하다 */
.qp-reco-item{
  padding:11px 13px;margin-bottom:7px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.qp-reco-item:last-of-type{margin-bottom:0}
.qp-reco-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.qp-reco-name{font-size:13px;font-weight:800;color:var(--ink)}
.qp-reco-fee{font-size:12.5px;color:var(--ink2);margin-left:auto;white-space:nowrap}
.qp-reco-fee b{font-size:14px;font-weight:800;color:var(--ink)}
.qp-reco-fee small{font-size:10.5px;color:var(--ink3);margin-left:3px}
.qp-reco-perks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.qp-reco-perks li{position:relative;padding-left:14px;font-size:12px;line-height:1.55;color:var(--ink2);
  /* ⚠ 한국어는 띄어쓰기에서 꺾인다. 그대로 두면 「…약 32만원 무상」 / 「제공」
     처럼 마지막 한 낱말만 다음 줄에 떨어진다. pretty 가 그것을 피해 꺾어 준다
     (모르는 브라우저는 그냥 무시한다). */
  text-wrap:pretty}
.qp-reco-perks li::before{content:'✓';position:absolute;left:0;top:0;color:var(--red);font-weight:800;font-size:11px}
.qp-reco-perks li b{font-weight:800;color:var(--ink)}
/* ⚠ --ink3 는 이 바탕에서 3.4:1 밖에 안 나온다(기준 4.5:1). 72개월 약정·소유권
   이전을 알리는 줄이라 작아도 읽혀야 한다 — 흐리게 되돌리지 말 것. --ink2 는 6.9:1 */
.qp-reco-foot{margin-top:11px;padding-top:9px;border-top:1px solid var(--line-strong);
  font-size:11px;line-height:1.65;color:var(--ink2);
  /* 꼬리말의 줄바꿈(\n)을 살린다. buildSubReco 가 textContent 로 넣는다 */
  white-space:pre-line}
@media (max-width:359px){
  .qp-reco{padding:12px}
  .qp-reco-fee{margin-left:0;width:100%}
}

/* ⚠ .acc-sub-btn 은 이제 쓰이지 않는다(2026-10-07 고르는 화면에서 구독 버튼을
     뺐다). 지우지 않고 남겨 둔 까닭 — 마지막 견적 화면의 구독 추천에서 같은
     모양을 다시 쓸 참이다. 그때까지 쓰이지 않아도 괜찮다. */
/* 구독 버튼: 옵션 버튼(흰 바탕·회색 테두리)과 구분되도록 보라색 강조 스타일 */
.acc-sub-btn{border:1.5px solid var(--red);border-radius:8px;color:var(--red);font-weight:700;padding:5.5px 12px}   /* 둥근 네모 */
.acc-sub-btn:hover{background:var(--red-soft);color:var(--red)}
.acc-sub-btn.on,.acc-sub-btn.on:hover{background:var(--red);color:#fff}
.acc-sub-btn.on::before{content:'✓';margin-right:4px;font-weight:800}   /* 선택되면 체크 + 구독 */
.acc-sub-info{flex:1;min-width:0}
.acc-sub-info .acc-sub-name{flex:none}
.acc-sub-item{font-size:12px;color:var(--red);font-weight:500;margin-top:2px}
.acc-sub-actions{display:flex;gap:6px;flex-shrink:0;align-items:center}
.acc-sub-actions .acc-mini-btn{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 세부옵션 선택 팝업 ── */
.item-modal-box{max-width:440px;position:relative;padding:0;display:flex;flex-direction:column;overflow:hidden}
.item-modal-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:var(--bg);border:none;font-size:13px;line-height:1;color:var(--ink2);cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:1}
.item-modal-x:hover{background:#EBE8F1}
.item-modal-head{text-align:center;padding:26px 56px 16px;flex-shrink:0}
.item-modal-head .modal-title{font-size:18px;margin-bottom:6px}
.item-modal-sub{font-size:13px;color:var(--ink3)}
#item-modal-body{overflow-y:auto;padding:4px 20px 22px;-webkit-overflow-scrolling:touch}
.item-card{border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:10px;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s,background .15s}
.item-card:last-child{margin-bottom:0}
.item-card-row{display:flex;gap:14px;align-items:center}
.item-card-thumb{width:60px;height:60px;flex-shrink:0;border-radius:12px;background:#fff;border:1px solid var(--line);overflow:hidden;padding:4px}
.item-card-thumb img{width:100%;height:100%;object-fit:contain}
.item-card-text{flex:1;min-width:0}
.item-card:hover{border-color:var(--line-strong)}
.item-card.sel{border-color:var(--red);box-shadow:0 0 0 1px var(--red);background:var(--red-soft)}
.item-card-name{font-size:15.5px;font-weight:700;line-height:1.35;letter-spacing:-.02em}
.item-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.item-chip{background:var(--red-soft);color:var(--red);font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;line-height:1.45}
.item-card.sel .item-chip{background:#fff}
.item-card-desc{font-size:12.5px;color:var(--ink2);margin-top:8px;line-height:1.6;overflow-wrap:anywhere}

/* ── 고객정보 ── */
.info-field{margin-bottom:20px}
.info-lbl{font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:8px}
.info-input,.region-sel{width:100%;border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px;font-size:16px;font-family:inherit;outline:none;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.info-input::placeholder{color:var(--ink3)}
.info-opt{font-weight:500;color:var(--ink3)}
.p7-hint{display:none;margin-top:10px;text-align:center;font-size:12px;font-weight:500;line-height:1.5;color:var(--required)}
.info-help{margin:-2px 0 6px;font-size:12px;line-height:1.5;color:var(--ink3);text-wrap:pretty}
.info-textarea::placeholder{font-size:13.5px;line-height:1.55}
.info-textarea{display:block;min-height:72px;padding:11px 14px;resize:none;line-height:1.6;transition:min-height .18s ease,border-color .15s,box-shadow .15s}
.info-textarea:focus{min-height:112px}   /* 평소엔 작게, 입력하려고 누르면 넓게 */
.info-count{margin-top:4px;text-align:right;font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.info-err{display:none;margin-top:7px;font-size:12px;font-weight:500;color:var(--required);line-height:1.5}
.info-input.err,.phone-row.err{border-color:var(--required)}
.info-input.err:focus,.phone-row.err:focus-within{border-color:var(--required);box-shadow:0 0 0 3px rgba(179,64,75,.14)}
.info-input:focus,.region-sel:focus{border-color:var(--red);box-shadow:var(--ring)}
.region-sel{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23857F93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.phone-row{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:12px;padding:0 16px;background:#fff;transition:border-color .15s,box-shadow .15s}
.phone-row:focus-within{border-color:var(--red);box-shadow:var(--ring)}
.phone-prefix{font-size:16px;color:var(--ink2);font-weight:600}
.phone-row input{border:none;outline:none;flex:1;min-width:0;width:100%;padding:14px 0 14px 6px;font-size:16px;font-family:inherit;background:transparent;color:var(--ink)}
.region-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* 이름 · 연락처를 한 줄에.
   ⚠ 연락처 칸을 더 넓게 준다(010- 접두사 + 0000-0000 이 들어간다).
     이름은 좁아도 괜찮다 — 두세 글자면 끝난다.
   ⚠ 안쪽 .info-field 의 아래 여백은 지운다. 바깥이 대신 가진다. */
.info-row2{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10px;margin-bottom:20px}
.info-row2 .info-field{margin-bottom:0}
/* ⚠ 아주 좁은 화면에서는 다시 세로로. 360px 에서 재어 보니 번호 칸이 72px 밖에
     안 남아 「1234-5678」(87px)이 잘렸다(2026-09-30). 잘린 번호는 고객이
     알아채기 어렵다 — 좁을 때는 길어지더라도 세로가 낫다. */
@media (max-width:360px){
  .info-row2{grid-template-columns:1fr;gap:0}
  .info-row2 .info-field{margin-bottom:20px}
  .info-row2 .info-field:last-child{margin-bottom:0}
}

.privacy-box{background:var(--bg);border-radius:14px;padding:16px;margin-top:8px;margin-bottom:8px}
.privacy-row{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.privacy-cb{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-strong);background:#fff;flex-shrink:0;position:relative;margin-top:1px;transition:background .15s,border-color .15s}
.privacy-cb.on{background:var(--red);border-color:var(--red)}
.privacy-cb.on::after{content:'✓';color:#fff;font-size:12px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
/* 동의 아래 설명 줄 — 가볍게 보이되 읽히긴 해야 한다(2026-09-30).
   ⚠ 굵기 300. 400 이면 이 크기에서 획이 뭉친다.
   ⚠ 11.5px 에서 12.5px 로 키웠다. 작을수록 획이 붙어 오히려 두꺼워 보인다 —
     키우는 편이 가벼워 보이고 읽기도 낫다.
   ⚠ 색을 더 연하게 하지 말 것. 지금도 바탕 대비 3.23:1 로 권고치(4.5:1)
     아래다. 여기는 개인정보 수집·이용 동의 문구라 「알아보기 쉽게」 적어야
     한다(개인정보보호법 시행령 제17조). 연하게 하면 그 요건에서 멀어진다. */
.privacy-sub{font-size:11.5px;font-weight:300;color:var(--ink3);line-height:1.55;margin-top:3px}
.privacy-view{display:inline-block;margin-top:5px;text-decoration:none}
.privacy-txt{font-size:13.5px;line-height:1.55}
.privacy-view{background:none;border:none;color:var(--red);font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:2px;padding:4px 0 0;cursor:pointer;font-family:inherit}
/* 동의 항목이 둘에서 여섯·일곱 줄로 늘었다(v1.4).
   ⚠ 줄 사이에 선을 넣어 끊어 준다. 붙여 두면 어느 설명이 어느 항목의
     것인지 헷갈려서, 「읽고 체크한다」가 아니라 「다 눌러 치운다」가 된다.
   ⚠ 줄 수가 몇 개인지 CSS 에 적지 말 것. 서버가 정한다(_lib/consent.js). */
.privacy-row + .privacy-row{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.consent-wait{font-size:12.5px;color:var(--ink3);line-height:1.6;text-align:center;padding:6px 0}
.consent-links{display:flex;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

/* 연락 희망 시점.
   ⚠ 기본으로 켜진 칩을 두지 말 것(본사 요청). 고르지 않은 값을 고른 것으로
     기록하게 된다 — JS 쪽도 빈 값으로 시작한다(wizard.js 의 contactPref). */
.pref-row{display:flex;flex-wrap:wrap;gap:8px}
.pref-chip{border:1px solid var(--line-strong);background:#fff;color:var(--ink2);border-radius:999px;
  padding:9px 15px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.pref-chip.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
/* 연락 희망 시점은 설명 줄이 붙는다(「지금 상담」이 무슨 뜻인지 알려야 한다).
   ⚠ 알약 모양을 쓰지 않는다 — 두 줄이 들어가면 모서리가 글을 먹는다.
   ⚠ 보기가 하나뿐일 수 있어 가로로 늘린다. 하나짜리 칩이 왼쪽에 작게 붙어
     있으면 「고를 게 없다」로 보여 그냥 지나친다. */
.pref-row:has(.pref-when){flex-direction:column}
.pref-chip.pref-when{border-radius:12px;width:100%;text-align:left;padding:12px 15px}
.pref-when-t{font-size:14px;font-weight:600}
.pref-when-d{font-size:12px;font-weight:400;color:var(--ink3);margin-top:2px}
.pref-chip.pref-when.on .pref-when-d{color:rgba(255,255,255,.85)}

/* ── 견적서 업로드 ── */
.text-input{width:100%;font-size:13px;padding:10px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--bg);color:var(--ink2)}
.text-input::file-selector-button{margin-right:10px;padding:7px 13px;border:1px solid #C9C5D1;border-radius:8px;background:#E4E1E9;color:var(--ink);font-weight:600;font-size:12px;font-family:inherit;cursor:pointer;transition:background .15s}
.text-input::file-selector-button:hover{background:#D8D4DF}
.upload-guide{list-style:none;margin-top:10px;padding:0;display:flex;flex-direction:column;gap:5px}
.consult-file-item{display:flex;justify-content:space-between;align-items:center;background:var(--bg);border-radius:10px;padding:9px 12px;font-size:12px;color:var(--ink2);margin-top:8px}
.consult-file-item b{color:var(--ink3);cursor:pointer;font-weight:600;padding-left:8px}
.consult-file-warn{color:var(--required);font-size:11.5px;font-weight:600;margin-top:8px}
.upload-guide-title{color:var(--ink);font-size:12.5px;font-weight:700;margin-top:16px;margin-bottom:6px}
.upload-guide li{color:var(--ink2);font-size:12px;line-height:1.6;padding-left:12px;position:relative}
.upload-guide li::before{content:'•';position:absolute;left:0;color:var(--ink3)}
.why-doc-link{background:none;border:none;color:var(--ink3);font-size:12px;text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-family:inherit}

/* ── 로딩 ── */
.loading-overlay{position:fixed;inset:0;background:rgba(24,18,36,.74);z-index:50;display:none;align-items:center;justify-content:center;flex-direction:column;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.loading-overlay.show{display:flex}
.loading-spin{width:40px;height:40px;border:3px solid rgba(255,255,255,.22);border-top-color:#fff;border-radius:50%;animation:spin .9s linear infinite;margin-bottom:18px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-txt{font-size:15px;font-weight:600}
.loading-sub{font-size:12.5px;color:rgba(255,255,255,.7);margin-top:6px}

/* ── 결과 화면 ── */
.p8-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.p8-topbar-status{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--green);background:var(--green-soft);padding:6px 12px;border-radius:999px}
.p8-save-btn{display:flex;align-items:center;gap:5px;background:var(--bg);border:none;color:var(--ink2);border-radius:10px;padding:8px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.p8-save-btn:hover{background:#EEEBF4}

.quote-paper{position:relative;background:#fff;border:1px solid var(--line);border-top:4px solid var(--red);border-radius:18px;padding:24px 18px 22px;box-shadow:var(--shadow-sm)}

.qp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:16px;border-bottom:2px solid var(--ink);margin-bottom:18px}
.qp-brand{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.qp-doc-title{font-size:12.5px;font-weight:700;color:var(--red);margin-top:6px;letter-spacing:.08em}
.qp-no-note{font-size:10.5px;color:var(--ink3);margin-top:2px}
.qp-head-right{text-align:right;font-size:11.5px;color:var(--ink2);line-height:1.75;font-variant-numeric:tabular-nums}

.qp-customer{margin-bottom:18px}
.qp-customer-greet{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-.02em;line-height:1.45}
.qp-cust-panel{background:var(--bg);border-radius:12px;padding:1px 12px}
.qp-cust-row{display:flex;align-items:baseline;gap:10px;padding:7px 0}
.qp-cust-row+.qp-cust-row{border-top:1px solid rgba(74,46,110,.10)}
.qp-cust-k{flex-shrink:0;width:62px;font-size:11px;font-weight:600;color:var(--ink3)}
.qp-cust-v{flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.qp-cust-v.is-empty{font-weight:500;color:var(--ink3)}

.qp-section-title{font-size:13px;font-weight:700;color:var(--ink2);margin:0 0 10px}

.qp-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--ink);border-radius:8px;overflow:hidden;margin-bottom:22px;font-size:11.5px}
.qp-table th{background:var(--ink);color:#fff;font-weight:600;font-size:11.5px;padding:10px 4px;text-align:center;white-space:nowrap}
.qp-table th+th{border-left:1px solid rgba(255,255,255,.14)}
.qp-table td{padding:10px 4px;text-align:center;vertical-align:middle;border-top:1px solid var(--line);color:var(--ink);overflow-wrap:anywhere;word-break:normal}
.qp-table tbody tr:first-child td{border-top:none}
.qp-table td+td{border-left:1px solid var(--line)}
.qp-td-name{font-weight:700;font-size:12px;min-width:44px}
.qp-td-img{width:46px}
.qp-product-thumb{width:34px;height:34px;margin:0 auto;border-radius:8px;background:var(--bg);overflow:hidden;display:flex;align-items:center;justify-content:center}
.qp-product-thumb img{width:100%;height:100%;object-fit:contain}
.qp-td-model{text-align:left;font-weight:700;font-size:11px;line-height:1.4;padding-left:8px;padding-right:6px}
.qp-td-price{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:11px;padding-left:6px;padding-right:6px}
.qp-price-strike{color:var(--ink3);text-decoration:line-through}
.qp-price-sub{color:var(--ink);font-weight:700}
.qp-td-event{font-weight:700;letter-spacing:.08em;white-space:nowrap;padding-left:6px;padding-right:6px}

.qp-sum{padding:16px 16px 0;background:#fff;border:1px solid var(--line-strong);border-radius:16px;margin-bottom:18px}
.qp-sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.qp-sum-label{font-size:13.5px;color:var(--ink2);font-weight:500;letter-spacing:-.01em}
.qp-sum-val{font-size:14.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.qp-sum-strike{color:var(--ink3);font-weight:500;text-decoration:line-through}
.qp-sum-minus{color:var(--red)}
.qp-sum-val.qp-sum-none{color:var(--ink3);font-weight:500}
.qp-sum-head{font-size:12.5px;font-weight:700;color:var(--red);padding:2px 0 4px}
.qp-sum-list{padding:4px 0 6px 12px;border-bottom:1px solid var(--line)}
.qp-sum-item{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0}
.qp-sum-item .qp-sum-label{font-size:13px;color:var(--ink2);position:relative;padding-left:12px}
.qp-sum-item .qp-sum-label::before{content:'';position:absolute;left:0;top:50%;width:5px;height:1px;background:var(--ink3)}
.qp-sum-item .qp-sum-val{font-size:14px}
.qp-sum-total{border-top:1px solid var(--ink)}
.qp-sum-total .qp-sum-row{border-bottom:none}
.qp-sum-final{align-items:center;padding-top:16px;padding-bottom:16px}
.qp-sum-final .qp-sum-label{font-size:14px;font-weight:700;color:var(--ink)}
.qp-sub-block{margin-top:-6px;margin-bottom:18px;padding:16px 16px 4px;background:var(--red-soft);border-radius:16px}
.qp-sub-head{font-size:12.5px;font-weight:700;color:var(--red);padding-bottom:4px}
.qp-sub-block .qp-sum-row,.qp-sub-block .qp-sum-list{border-bottom-color:rgba(74,46,110,.14)}
.qp-sub-block .qp-sum-row:last-child{border-bottom:none}
.qp-sum-main small{font-size:11.5px;font-weight:500;color:var(--ink2);margin-left:4px;letter-spacing:0}
.qp-sum-subfinal{align-items:center;padding-top:12px;padding-bottom:10px}
.qp-sum-subfinal .qp-sum-label{font-size:14px;font-weight:700;color:var(--ink)}
.qp-sum-final .qp-sum-main{color:var(--price)}
.qp-sum-main{font-size:26px;font-weight:700;color:var(--red);letter-spacing:-.03em;line-height:1.2;font-variant-numeric:tabular-nums;text-align:right}
.qp-sum-main.qp-sum-main-sub{font-size:22px}

.qp-foot{display:flex;align-items:center;justify-content:space-between;gap:16px}
.qp-foot-text{flex:1;min-width:0}
.qp-ai-card-text{font-size:11.5px;color:var(--ink3);line-height:1.75}
.qp-disclaimer{font-size:10.5px;color:var(--ink3);line-height:1.6;margin-top:6px}
.qp-stamp{position:relative;width:74px;height:74px;flex-shrink:0;border-radius:50%;border:2px solid var(--red);color:var(--red);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:800;line-height:1.35;text-align:center}
.qp-stamp::after{content:'';position:absolute;inset:4px;border-radius:50%;border:1px solid var(--red)}
.qp-stamp span{position:relative;z-index:1}

.res-actions{display:flex;flex-direction:column;gap:8px;margin-top:28px}
.btn-outline{width:100%;padding:15px;background:#fff;color:var(--ink2);border:1px solid var(--line-strong);border-radius:14px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.btn-outline:hover{background:var(--bg)}
.btn-kakao{width:100%;padding:16px;background:#FEE500;color:#191600;border:none;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:filter .15s}
.btn-kakao:hover{filter:brightness(.97)}

/* ── 모달 공통 ── */
.modal-overlay{position:fixed;inset:0;background:rgba(24,18,36,.5);z-index:60;display:none;align-items:center;justify-content:center;padding:20px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal-overlay.show{display:flex}
.modal-overlay.show .modal-box{animation:modalIn .22s ease-out}
@keyframes modalIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.modal-box{background:#fff;border-radius:24px;padding:26px 22px 22px;max-width:420px;width:100%;max-height:82vh;overflow:auto;box-shadow:0 24px 60px -12px rgba(24,18,36,.35)}
.modal-title{font-size:17px;font-weight:700;margin-bottom:12px;letter-spacing:-.02em}
.modal-close{display:block;width:100%;background:var(--bg);border:none;border-radius:12px;padding:13px;font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer;font-family:inherit;margin-top:16px;transition:background .15s}
.modal-close:hover{background:#EEEBF4}
.admin-input{width:100%;border:1px solid var(--line-strong);border-radius:12px;padding:13px 14px;font-size:16px;margin-bottom:12px;font-family:inherit;outline:none}
.admin-input:focus{border-color:var(--red);box-shadow:var(--ring)}
.admin-tabs{display:flex;gap:6px;margin-bottom:16px}
.admin-tab{flex:1;padding:10px 6px;background:var(--bg);border:none;border-radius:10px;font-weight:600;font-size:12px;color:var(--ink2);cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.admin-tab.active{background:var(--red);color:#fff}
.admin-row{font-size:13px;padding:9px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}
.admin-row b{flex-shrink:0;color:var(--ink2);font-weight:600}

/* ── 모바일: 모달은 하단 시트 형태 ── */
@media (max-width:560px){
  .step-card:has(#p8.on){padding-left:14px;padding-right:14px}
  .quote-paper{padding:22px 12px 20px}
  .qp-table th{font-size:11px;padding:9px 2px}
  .qp-table td{padding:9px 3px}
  .qp-td-name{font-size:11.5px;min-width:42px}
  .qp-td-img{width:38px}
  .qp-product-thumb{width:30px;height:30px}
  .qp-td-model{font-size:10.5px;padding-left:6px;padding-right:4px}
  .qp-td-price{font-size:10.5px;padding-left:4px;padding-right:4px}
  .qp-td-event{font-size:11px;letter-spacing:.04em;padding-left:4px;padding-right:4px}
  body{padding:14px 12px 40px}
  .step-card{padding:26px 20px 22px;border-radius:26px}
  .modal-overlay{align-items:flex-end;padding:0}
  .modal-box{max-width:none;border-radius:26px 26px 0 0;max-height:88vh;padding-bottom:28px}
  .modal-overlay.show .modal-box{animation:sheetIn .28s cubic-bezier(.2,.8,.2,1)}
  .item-modal-box{padding-bottom:0}
}
@keyframes sheetIn{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media print{
  body *{visibility:hidden}
  #quote-capture, #quote-capture *{visibility:visible}
  #quote-capture{position:absolute;left:0;top:0;width:100%;border:none;box-shadow:none}
}

/* ── DB IN 맞춤 (tools/wizard-import.mjs 가 덧붙인다) ──
   우리 사이트는 모서리가 8~12px 이고 그림자보다 선으로 나눈다.
   ⚠ 여기 없는 클래스를 새로 만들면 원본 모서리(14~18px)가 그대로 남는다. */
.acc-cat,.brand-card,.item-card,.opt-card,.qp-sub-block,.qp-sum,.sel-summary-box{border-radius:12px}
.quote-paper,.p1-hero-logo-card{border-radius:12px}
.btn-primary,.btn-secondary,.btn-outline,.btn-kakao,.bud-direct-row,.privacy-box{border-radius:8px}
.text-input,.region-sel,.phone-row,.bud-card,.acc-sub-row,.p1-note,.qp-cust-panel,
.acc-cat-ico,.opt-ico,.item-card-thumb,.consult-file-item,.p8-save-btn{border-radius:8px}
.modal-box{border-radius:12px}
/* 카드 테두리를 한 톤 더 또렷하게 — 그림자를 줄인 만큼 선이 경계를 맡는다 */
.acc-cat,.opt-card,.item-card,.brand-card{box-shadow:none}


/* ── [선택] 추가 상담정보 묶음 (2026-11-06, 본사 조건 7·8) ──
   ⚠ 동의 박스 바로 아래 붙어 보여야 한다. 체크한 줄과 떨어지면 무엇에 따라
     열린 칸인지 알 수 없다. */
#opt12-box{
  border:1px solid var(--line,#E6E2E4);
  border-left:3px solid var(--brand,#4A2E6E);
  border-radius:0 10px 10px 0;
  padding:14px 16px 4px;
  margin:12px 0 4px;
  background:rgba(74,46,110,.03);
}
#opt12-box .opt12-head{margin-bottom:12px}
#opt12-box .opt12-title{font-size:13.5px;font-weight:700;color:var(--brand,#4A2E6E)}
#opt12-box .opt12-sum{
  margin-top:6px;font-size:12.5px;line-height:1.6;
  color:var(--ink2,#5D5766);word-break:keep-all;
}
#opt12-box .opt12-sum b{color:var(--brand,#4A2E6E)}

/* 예산·브랜드 칸 아래 안내 — 본사가 준 문장 그대로다 */
.opt12-note{
  margin-top:12px;padding:10px 12px;
  border-radius:8px;background:rgba(74,46,110,.05);
  font-size:12.5px;line-height:1.65;color:var(--ink2,#5D5766);
  word-break:keep-all;
}
.opt12-note b{color:var(--brand,#4A2E6E)}