/* ============================================================
   스타일.css — 왕창사. 색과 서체는 설정.js가 CSS 변수로 덮어쓴다.
   ============================================================ */

/* ── 색 (당근풍 · 2026-09-14 대표 지시) ───────────────────
   주색   당근 오렌지 #FF6F0F   — 버튼·수치·강조. **여기에만 쓴다**
   바탕   크림/아이보리 #FAFAFA #F2F3F6
   글자   딥 차콜 #212529

   ⚠ 변수 이름(--navy·--gold)은 **일부러 그대로 두었다.** 25곳·21곳에서
     쓰고 있어 이름을 바꾸면 한 군데만 빠져도 색이 통째로 날아간다.
     지금은 --navy = 딥 차콜(구조·글자), --gold = 당근 오렌지(강조) 다.
   ⚠ 설정.js 브랜드 값이 **실행 중에 이 값을 덮어쓴다.** 양쪽을 같이 고친다. */
:root{
  --navy:#212529;          /* 딥 차콜 — 헤더·푸터·제목·본문 */
  --gold:#FF6F0F;          /* 당근 오렌지 — 버튼·수치·배지 */
  --sky:#FF8A3D;           /* 보조 오렌지 — 포커스 링 */

  --ink:#212529;
  --ink-2:#4A5157;
  --muted:#868E96;
  --bg:#F2F3F6;
  --surface:#FFFFFF;
  --surface-2:#FAFAFA;
  --rule:#E9ECEF;
  --rule-soft:#F1F3F5;
  --cream:#FFF4EC;         /* 오렌지 기운이 도는 크림 */
  --bad:#E03131;
  --warn:#E8590C;
  --ok:#2F9E44;

  /* 모서리 — 모바일 앱처럼 둥글게 (16px 이상) */
  --r-card:20px;
  --r-box:16px;
  --r-chip:14px;

  --face-display:'GmarketSansMedium','Pretendard Variable',Pretendard,sans-serif;
  --face-body:'Pretendard Variable',Pretendard,'Malgun Gothic',sans-serif;

  --shadow:0 1px 2px rgba(33,37,41,.05), 0 10px 30px -18px rgba(33,37,41,.28);
  --wrap:1120px;
  --bar:76px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--face-body); font-size:16px; line-height:1.75;
  word-break:keep-all; overflow-wrap:break-word;
}
img{max-width:100%; display:block}
a{color:var(--navy)}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--sky); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.tight{max-width:780px}

/* ── 헤더 ────────────────────────────────────────────── */
/* 당근풍 — 헤더는 **흰 바탕**이다. 어두운 띠를 쓰면 앱 느낌이 사라진다. */
.hdr{
  position:sticky; top:0; z-index:40; background:var(--surface); color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.hdr-in{max-width:var(--wrap); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:16px}
/* 로고 — 글자 대신 **그림 워드마크**를 쓴다 (대표 지시 2026-09-14).
   옆에 코끼리 가족을 작게 붙인다. 좁은 화면에서는 가족을 숨긴다 —
   로고와 전화번호가 먼저다. */
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
/* 1.5배 키웠다 (30 → 45px, 대표 지시 2026-09-14). 헤더에 로고 하나만 둔다 —
   옆에 가족 그림을 붙였더니 로고가 눌려 보였다. 가족은 '시공 절차' 로 옮겼다. */
.logo .lg{height:45px; width:auto; flex:none}
@media (max-width:420px){ .logo .lg{height:36px} }   /* 아주 좁은 화면에서만 줄인다 */
/* 상단 로고만 다시 1.6배 (45 → 72px. 대표 지시 2026-09-14).
   ⚠ 푸터 로고는 그대로 45px 다 — '상단' 만 키우라는 지시였고,
     어두운 바탕의 푸터에서는 이 크기가 이미 충분히 읽힌다.
   가로가 세로의 세 배인 워드마크라 72px 면 216px 를 먹는다. 좁은 화면에서
   전화번호와 부딪히지 않도록 아래 두 구간에서 단계적으로 줄인다. */
.hdr .logo .lg{height:72px}
@media (max-width:560px){ .hdr .logo .lg{height:58px} }
@media (max-width:420px){ .hdr .logo .lg{height:46px} }
/* 글자 로고를 되살릴 때 쓰던 것 — 지금은 마크업에 없다
.logo b{font-family:var(--face-display); font-size:21px; color:var(--gold)}
.logo span{font-size:10.5px; letter-spacing:.18em; color:var(--muted)}            */
.hdr nav{margin-left:auto; display:flex; gap:22px}
.hdr nav a{color:var(--ink-2); text-decoration:none; font-size:14px; font-weight:500}
.hdr nav a:hover{color:var(--gold)}
/* 전화번호 — 딥 차콜로 굵게, 1.2배 (16 → 19px. 대표 지시 2026-09-14).
   오렌지는 버튼이 이미 쓰고 있어, 번호까지 오렌지면 어느 것을 누를지 흐려진다.
   번호는 검게 두고 무게로 세운다. */
.hdr .tel{
  margin-left:8px; font-family:var(--face-display); font-size:19px; font-weight:700;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
@media (max-width:860px){ .hdr nav{display:none} }

/* ── 히어로 ──────────────────────────────────────────── */
/* 당근풍 — 크림/아이보리 바탕에 딥 차콜 글자.
   오렌지는 배지·강조어·버튼에만 쓴다. 바탕까지 오렌지로 깔면 눈이 아프다. */
.hero{
  background:
    radial-gradient(120% 90% at 88% 4%, rgba(255,111,15,.13), transparent 62%),
    linear-gradient(180deg, #FFF6EF, var(--surface));
  color:var(--ink); padding:64px 0 56px;
}
.hero h1{
  font-family:var(--face-display); font-weight:500;
  font-size:clamp(30px,5.2vw,50px); line-height:1.26; letter-spacing:-.02em;
  margin:0 0 18px; text-wrap:balance;
}
.hero h1 em{font-style:normal; color:var(--gold)}
.hero p.sub{max-width:52ch; color:var(--ink-2); font-size:17px; margin:0 0 30px}
/* 글씨를 2배로 키웠다 (12.5 → 25px, 대표 지시 2026-09-14).
   여백도 같이 키우지 않으면 알약이 글자에 끼여 터져 보인다.
   괄호 안 조건은 한 단계 작게 — 숫자가 먼저 읽혀야 한다. */
.hero .eyebrow{
  display:inline-block; padding:10px 22px; margin-bottom:22px;
  border:0; border-radius:999px; font-weight:700;
  font-size:25px; line-height:1.25; letter-spacing:.01em;
  color:#fff; background:var(--gold);
}
.hero .eyebrow em{font-style:normal; font-size:.72em; font-weight:600; opacity:.92}

/* 접수행사 아래 줄 — 프로모션·제품 할인. 큰 배지 하나가 주인공이고
   이것들은 곁가지라 **테두리형**으로 한 단계 낮춘다. */
.hero .deals{display:flex; flex-wrap:wrap; gap:7px; margin:-8px 0 20px}
.hero .deal{
  display:inline-block; padding:5px 12px; border-radius:999px;
  border:1px solid var(--gold); background:var(--surface);
  color:var(--warn); font-size:13px; font-weight:600;
}
@media (max-width:560px){ .hero .deal{font-size:12px; padding:4px 10px} }
@media (max-width:560px){
  .hero .eyebrow{font-size:20px; padding:9px 18px}
}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:32px} }

/* 숫자 카드 — 흰 카드 셋을 나란히. 앱의 요약 카드처럼 보이게 한다. */
.figures{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.figures div{background:var(--surface); padding:16px 14px; border:1px solid var(--rule);
  border-radius:var(--r-box); box-shadow:var(--shadow)}
.figures .n{font-family:var(--face-display); font-size:23px; color:var(--gold); line-height:1.1;
  font-variant-numeric:tabular-nums}
.figures .l{font-size:12px; color:var(--muted); margin-top:6px; line-height:1.45}

/* ── 히어로 안 견적 진입 카드 ─────────────────────────── */
.qbox{background:var(--surface); border-radius:var(--r-box); padding:24px; box-shadow:var(--shadow); color:var(--ink)}
.qbox h2{font-family:var(--face-display); font-size:19px; margin:0 0 6px; font-weight:500}
.qbox p{font-size:13.5px; color:var(--muted); margin:0 0 18px}
.qbox .steps{display:flex; gap:8px; margin:0 0 18px; padding:0; list-style:none;
  font-size:12px; color:var(--muted)}
.qbox .steps li{flex:1; padding-top:9px; border-top:2px solid var(--rule); text-align:center}
.qbox .steps li:first-child{border-top-color:var(--gold); color:var(--navy); font-weight:600}

/* ── 두 갈래 (아파트 / 신축·구축 상담) ─────────────────
   길이 둘이라는 것을 첫 화면에서 보여 준다. 한 카드 안에 나란히 두어
   **고르는 일**로 보이게 한다 — 따로 떨어뜨리면 하나는 안 보인다. */
.two-way{padding:0; overflow:hidden}
.two-way .way{padding:22px 24px}
.two-way .way + .way{border-top:1px solid var(--rule)}
.two-way .way.alt{background:var(--bg)}
.two-way .way-tag{
  display:inline-block; font-family:var(--face-display); font-size:11px;
  letter-spacing:.12em; color:var(--gold); margin-bottom:8px;
}
.two-way > .btn-text{
  margin:0; padding:16px; border-top:1px solid var(--rule); border-radius:0;
}

/* 두 갈래 제목 — 1.5배로 키우고 딥 차콜로 굵게 (19 → 28px).
   손님이 첫 화면에서 **먼저 읽어야 하는 글자**다. 카드 제목이 작으면
   길이 둘이라는 것 자체가 안 보인다. */
.two-way .way h2{ font-size:28px; font-weight:700; color:var(--ink); margin-bottom:8px; }
@media (max-width:560px){ .two-way .way h2{font-size:23px} }

/* ⚠ 크기는 **이 카드 안에서만** 키운다 (대표 지시 2026-09-14).
   .btn · .btn-line · .btn-text 는 견적 4단계와 상담 화면도 함께 쓴다.
   전역으로 키우면 그쪽 버튼이 통째로 부풀어 화면이 깨진다. */
.two-way #go-quote{ font-size:22px; font-weight:700; padding:18px 18px; }   /* 1.3배 */
/* ★ 두 버튼을 **같은 문양**으로 맞춘다 (대표 지시 2026-09-14).
   전에는 테두리형이었다 — 꽉 찬 오렌지가 둘이면 어느 쪽이 주인지 흐려진다는
   이유였다. 대표가 그 판단을 뒤집었다. 두 갈래는 우열이 아니라 **갈림길**이고,
   한쪽만 흐리면 '이쪽은 덜 중요한 문' 으로 읽힌다는 것이다.
   그래서 마크업을 .btn-line → .btn 으로 바꿨다. 색·모서리·그림자가 전부
   '30초 예상견적 시작' 과 같은 값을 탄다. 여기서는 크기만 손댄다. */
.two-way #go-consult{
  font-size:25px; font-weight:700; padding:18px 18px;          /* 1.5배 */
}
.two-way > .btn-text{ font-size:17px; font-weight:700; color:var(--ink-2); } /* 1.2배 */

/* 두 갈래를 가르는 선 — 얇으면 한 덩어리로 보여 '고르는 일' 이 안 된다 */
.two-way .way + .way{ border-top:3px solid var(--rule); }

@media (max-width:560px){
  .two-way #go-quote{font-size:19px}
  .two-way #go-consult{font-size:21px}
  .two-way > .btn-text{font-size:15.5px}
}

/* 아래쪽 재안내도 같은 무게로 맞춘다 — 위아래가 달라 보이면 다른 버튼으로 읽힌다 */
.pickbox #go-quote2{font-size:19px; font-weight:700}
.pickbox #go-consult2{font-size:20px; font-weight:700}

/* 아래쪽 재안내 — 다 읽고 내려온 손님용 */
.pickbox{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.pickbox > div{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-card);
  padding:24px; display:flex; flex-direction:column;
}
.pickbox h3{font-family:var(--face-display); font-size:19px; font-weight:500; margin:0 0 8px}
.pickbox p{font-size:14px; color:var(--ink-2); margin:0 0 18px; flex:1; line-height:1.7}
.pickbox b{color:var(--gold)}
@media (max-width:760px){ .pickbox{grid-template-columns:1fr} }

/* ── 버튼 ────────────────────────────────────────────── */
.btn{
  display:block; width:100%; padding:16px 18px; border:0; border-radius:var(--r-box); cursor:pointer;
  font-family:var(--face-display); font-size:17px; font-weight:500; letter-spacing:-.01em;
  background:var(--gold); color:#fff; transition:filter .15s, transform .05s;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-line{background:transparent; color:var(--navy); border:1.5px solid var(--rule)}
.btn-line:hover{border-color:var(--navy); filter:none}
.btn-text{
  display:block; width:100%; margin-top:10px; padding:12px; border:0; background:none;
  color:var(--muted); font-size:14px; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px;
}

/* ── 섹션 ────────────────────────────────────────────── */
section.blk{padding:72px 0; border-top:1px solid var(--rule-soft); background:var(--bg)}
section.blk.alt{background:var(--surface)}
.shead{margin-bottom:34px; max-width:64ch}
.shead .tag{
  font-family:var(--face-display); font-size:12px; letter-spacing:.14em;
  color:var(--gold); display:block; margin-bottom:10px;
}
.shead h2{
  font-family:var(--face-display); font-weight:500;
  font-size:clamp(23px,3.3vw,31px); line-height:1.35; letter-spacing:-.015em;
  margin:0 0 12px; text-wrap:balance;
}
.shead p{color:var(--ink-2); margin:0; font-size:16px}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:16px}
.card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-box); padding:22px}
section.blk.alt .card{background:var(--bg)}
.card h3{font-family:var(--face-display); font-size:16.5px; font-weight:500; margin:0 0 8px}
.card p{font-size:14px; color:var(--muted); margin:0; line-height:1.7}
/* ── 3D 엠블럼 ─────────────────────────────────────────
   선 아이콘 대신 **입체감 있는 그림**을 쓴다 (당근풍, 대표 지시 2026-09-14).
   크림 방석 위에 얹어 앱 아이콘처럼 보이게 한다. 그림은 index.html 의
   <symbol> 에 한 번만 정의하고 <use> 로 꺼내 쓴다. */
.card .emb{
  width:56px; height:56px; border-radius:var(--r-box); margin-bottom:14px;
  background:linear-gradient(160deg, #FFF1E6, #FFE2CC);
  box-shadow:inset 0 -2px 0 rgba(242,92,5,.10), 0 4px 12px -6px rgba(242,92,5,.45);
  display:flex; align-items:center; justify-content:center;
}
.card .emb svg{width:34px; height:34px; display:block}

/* 마스코트(1PRO 코끼리)는 **방석 없이** 통째로 보여 준다.
   캐릭터를 38px 방석 안에 넣으면 무슨 그림인지 안 보인다. 그림 자체가
   주인공이므로 배경과 그림자를 빼고 키운다. 그림은 투명 PNG 다. */
.card .emb.mascot, .shead .emb-s.mascot{
  background:none; box-shadow:none; width:auto; border-radius:0;
}
.card .emb.mascot{height:84px; margin-bottom:10px; justify-content:flex-start}
.card .emb.mascot img{height:84px; width:auto}
.shead .emb-s.mascot{height:64px; margin-bottom:8px; justify-content:flex-start}
.shead .emb-s.mascot img{height:64px; width:auto}
/* 가족 그림은 가로로 길어(7마리) 같은 높이면 얼굴이 너무 작다. 키우고
   배경이 옅게 박혀 있어 흰 바탕에 녹아들도록 multiply 를 건다. */
.shead .emb-s.fam-s{height:86px}
.shead .emb-s.fam-s img{height:86px; mix-blend-mode:multiply}
@media (prefers-reduced-motion:no-preference){
  .card{transition:transform .16s ease, box-shadow .16s ease}
  .card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
}

/* 섹션 머리에 붙는 작은 엠블럼 */
.shead .emb-s{
  width:44px; height:44px; border-radius:var(--r-chip); margin-bottom:12px;
  background:linear-gradient(160deg, #FFF1E6, #FFE2CC);
  box-shadow:inset 0 -2px 0 rgba(242,92,5,.10);
  display:flex; align-items:center; justify-content:center;
}
.shead .emb-s svg{width:28px; height:28px; display:block}

/* 브랜드 3종 */
.brands{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:760px){ .brands{grid-template-columns:1fr} }
.brand{border:1px solid var(--rule); border-radius:var(--r-box); padding:22px; background:var(--surface); text-align:center}
.brand .nm{font-family:var(--face-display); font-size:19px; color:var(--navy); margin-bottom:8px}
.brand .ds{font-size:13px; color:var(--muted); min-height:2.6em}
.brand .rt{
  margin-top:14px; padding-top:14px; border-top:1px dashed var(--rule);
  font-size:12.5px; color:var(--muted);
}
.brand .rt b{font-family:var(--face-display); color:var(--navy); font-size:15px}

/* 공정 */
.flow{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:var(--r-box); overflow:hidden}
@media (max-width:780px){ .flow{grid-template-columns:repeat(2,1fr)} }
.flow div{background:var(--surface); padding:18px 14px}
.flow .n{font-family:var(--face-display); font-size:12px; color:var(--gold); letter-spacing:.1em}
.flow .t{font-size:14.5px; font-weight:600; margin:7px 0 4px}
.flow .d{font-size:12.5px; color:var(--muted); line-height:1.55}

/* ── 표 ──────────────────────────────────────────────── */
.tw{overflow-x:auto; border:1px solid var(--rule); border-radius:var(--r-box); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:480px; font-size:14px}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--rule-soft); line-height:1.6}
thead th{background:var(--surface-2); font-size:12.5px; color:var(--ink-2); font-weight:600;
  border-bottom:1px solid var(--rule); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}

/* ── 푸터 ────────────────────────────────────────────── */
footer{background:var(--navy); color:rgba(255,255,255,.72); padding:46px 0 calc(34px + var(--bar));
  font-size:13px}
footer .logo{margin-bottom:16px}
footer .biz{display:flex; flex-wrap:wrap; gap:6px 20px; margin:0 0 14px; padding:0; list-style:none}
footer .note{color:rgba(255,255,255,.45); font-size:12px; line-height:1.7; max-width:78ch}
footer a{color:var(--gold)}
@media (min-width:861px){ footer{padding-bottom:34px} }

/* ── 모바일 고정 하단바 ──────────────────────────────
   본체의 주 리드 수단이다. 마찰 없이 번호만 받는다. */
.fixbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--navy); border-top:1px solid rgba(255,255,255,.14);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex; gap:9px;
}
.fixbar a,.fixbar button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:14px 10px; border:0; border-radius:var(--r-box); cursor:pointer; text-decoration:none;
  font-family:var(--face-display); font-size:15.5px; font-weight:500;
}
.fixbar .call{background:rgba(255,255,255,.12); color:#fff}
.fixbar .est{background:var(--gold); color:#fff}
.fixbar svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
@media (min-width:861px){ .fixbar{display:none} :root{--bar:0px} }

/* ══════════════════════════════════════════════════════
   견적 퍼널
   ══════════════════════════════════════════════════════ */
.fnl{min-height:100vh; display:flex; flex-direction:column; background:var(--bg)}
.fnl-main{
  flex:1; width:100%; max-width:560px; margin:0 auto;
  padding:26px 18px calc(30px + 132px);
  display:flex; flex-direction:column; gap:16px;
}
.fnl-main.nocta{padding-bottom:40px}

/* 상담 폼 — 시·도 + 시·군·구 두 칸 */
.two{display:grid; grid-template-columns:minmax(96px,.9fr) 1.4fr; gap:8px}
/* ⚠ 16px 아래로 내리지 않는다 — iOS 가 탭할 때 화면을 확대하고 그대로 남긴다.
   2026-09-15 실측에서 15.5px 이었다. 상담 폼은 **직접 타이핑하는 칸**이라
   견적 화면보다 오히려 더 자주 걸린다. */
.two select, .two input{
  width:100%; min-height:44px; padding:13px 14px; border:1px solid var(--rule);
  border-radius:var(--r-box); font-size:16px; font-family:inherit;
  background:var(--surface); color:var(--ink);
}
.two select:focus, .two input:focus{outline:0; border-color:var(--gold)}
/* 고른 칩은 주색. .sel 규칙을 그대로 쓰므로 따로 칠하지 않는다 */
.field .sel{margin-top:2px}

/* 대표 확인 모드 띠 — 손님 화면과 헷갈리지 않게 맨 위에 굵게 */
.peek{
  position:sticky; top:0; z-index:60; background:var(--navy); color:#fff;
  padding:9px 16px; text-align:center; font-size:13px; line-height:1.5;
}
.peek b{color:#FFD8B8}
.peek code{background:rgba(255,255,255,.16); padding:1px 6px; border-radius:6px}

/* 뒤로가기 — 네 단계 전부 같은 자리·같은 모양 (대표 지시 2026-09-14).
   ⚠ 브라우저 기록(history.back)을 쓰지 않는다. 손님이 링크로 바로 들어오거나
     새로고침하면 돌아갈 기록이 없어 **아무 일도 안 일어난다.**
     단계 순서를 따라 갈 곳을 직접 적는다. */
.fnl-back{
  display:inline-flex; align-items:center; gap:5px; margin-bottom:14px;
  padding:8px 15px 8px 11px; border:1px solid var(--rule); border-radius:999px;
  background:var(--surface); color:var(--ink-2); text-decoration:none;
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
}
.fnl-back:hover{border-color:var(--gold); color:var(--gold)}
.fnl-back svg{width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* 첫 갈림길의 '홈으로' 만 1.5배로 키우고 딥 차콜로 굵게 (대표 지시 2026-09-14).
   ⚠ 다음 단계들의 '이전 단계' 는 그대로 14px 다. 여기만 다른 이유 —
     이 화면은 아직 견적이 시작되기 전이라, 잘못 들어온 손님이 되돌아
     나갈 문이 필요하다. 견적 도중의 뒤로가기는 보조 동작이라 작게 둔다. */
.fnl-back.home{
  padding:12px 22px 12px 17px; gap:7px;
  font-size:21px; font-weight:700; color:var(--ink);
  /* 테두리도 한 단계 진하게 — 글자만 굵히면 실선이 사라진 듯 보인다 */
  border-color:#CED4DA;
}
.fnl-back.home svg{width:24px; height:24px; stroke-width:2.4}
@media (max-width:420px){
  .fnl-back.home{font-size:19px; padding:11px 18px 11px 14px}
  .fnl-back.home svg{width:22px; height:22px}
}

.prog{display:flex; gap:5px; margin-bottom:6px}
.prog i{flex:1; height:3px; border-radius:2px; background:var(--rule)}
.prog i.on{background:var(--gold)}

.phead .lbl{
  font-family:var(--face-display); font-size:12px; letter-spacing:.13em;
  color:var(--gold); display:block; margin-bottom:8px;
}
.phead h1{
  font-family:var(--face-display); font-weight:500;
  font-size:clamp(23px,5.4vw,29px); line-height:1.4; letter-spacing:-.015em; margin:0;
  text-wrap:balance;
}
.phead p.sub{color:var(--muted); font-size:14.5px; margin:10px 0 0}

.cd{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-box)}
.cd-pad{padding:20px}

.pick{display:grid; gap:11px; margin-top:8px}
.pick button{
  padding:22px 18px; border:1.5px solid var(--rule); border-radius:var(--r-box); background:var(--surface);
  font-family:var(--face-display); font-size:17px; font-weight:500; color:var(--ink);
  cursor:pointer; text-align:left; display:flex; align-items:center; gap:14px;
}
.pick button:hover{border-color:var(--gold)}
.pick button span.d{font-family:var(--face-body); font-size:12.5px; color:var(--muted);
  font-weight:400; margin-left:auto; text-align:right}

.srch{position:relative; display:flex; align-items:center; background:var(--surface);
  border:1.5px solid var(--rule); border-radius:var(--r-box); padding:0 14px}
.srch:focus-within{border-color:var(--gold)}
.srch input{
  flex:1; border:0; outline:0; background:none; padding:16px 8px; font-size:16.5px;
  font-family:inherit; color:var(--ink); min-width:0;
}
.srch svg{width:19px; height:19px; fill:none; stroke:var(--muted); stroke-width:1.8;
  stroke-linecap:round; flex:none}
.hint{font-size:12.5px; color:var(--muted); margin:9px 2px 0}

.results{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:7px}
.results button{
  width:100%; text-align:left; padding:15px 16px; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r-box); cursor:pointer;
}
.results button:hover{border-color:var(--gold); background:#fff}
.results .nm{font-weight:600; font-size:15.5px; margin-bottom:3px}
.results .mt{font-size:12.5px; color:var(--muted)}
.results li.more{font-size:12.5px; color:var(--muted); text-align:center; padding:9px}

.sel{display:flex; flex-wrap:wrap; gap:7px}
/* ⚠ 손가락으로 누르는 버튼이다. **최소 44px** 을 지킨다 (Apple HIG · Google 은 48dp).
   2026-09-15 모바일 실측에서 35px 이었다 — 눌리기는 하지만 평형·층은 **핵심 경로**라
   잘못 눌리면 그 자리에서 손님이 떨어진다. padding 이 아니라 min-height 로 잡는다:
   글자 크기를 나중에 바꿔도 높이가 따라 무너지지 않는다. */
.sel button{
  min-height:44px; padding:9px 16px; border:1px solid var(--rule); border-radius:999px;
  background:var(--surface); font-size:13.5px; cursor:pointer; color:var(--ink-2);
}
/* 고른 것은 **주색(오렌지)** 으로 표시한다. 당근풍에서 선택은 오렌지다. */
.sel button[aria-pressed="true"]{
  background:var(--gold); border-color:var(--gold); color:#fff; font-weight:600;
}

/* 진단 카드 */
.dj-top{padding:20px 20px 16px}
.dj-zone{font-size:12.5px; color:var(--muted)}
.dj-nm{font-family:var(--face-display); font-size:23px; color:var(--navy); margin:3px 0 2px}
.dj-meta{font-size:12.5px; color:var(--muted)}
.dj-age{text-align:right}
.dj-age b{font-family:var(--face-display); font-size:27px; line-height:1;
  font-variant-numeric:tabular-nums}
.dj-age .g{font-size:12px; margin-top:5px}
.dj-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px}
.gauge{margin-top:16px; height:7px; border-radius:4px; background:var(--surface-2); overflow:hidden}
.gauge i{display:block; height:100%; border-radius:4px; background:var(--gold)}
.gauge i.warn{background:var(--warn)}
.gauge i.bad{background:var(--bad)}
.gmark{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:6px}
.verdict{text-align:center; font-weight:600; font-size:15px; margin-top:12px}
.verdict.ok{color:var(--ok)} .verdict.warn{color:var(--warn)} .verdict.bad{color:var(--bad)}

.spec{border-top:1px solid var(--rule-soft); padding:16px 20px}
.spec h4{font-size:13.5px; margin:0 0 12px; display:flex; align-items:center; gap:8px}
.spec h4 em{
  font-style:normal; font-size:11px; padding:3px 8px; border-radius:999px;
  background:var(--cream); color:var(--warn); margin-left:auto;
}
.irow{display:flex; justify-content:space-between; gap:14px; padding:7px 0; font-size:13.5px}
.irow .l{color:var(--muted)} .irow .v{font-weight:600; text-align:right}

.notes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.notes li{display:flex; gap:10px; font-size:14px; color:var(--ink-2); line-height:1.65}
.notes svg{width:16px; height:16px; flex:none; margin-top:4px; fill:none; stroke:var(--gold);
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

/* 견적 결과 — 3브랜드 비교 */
.qres{display:flex; flex-direction:column; gap:9px}
.qcard{
  border:1.5px solid var(--rule); border-radius:var(--r-box); background:var(--surface);
  padding:16px 18px; display:flex; align-items:center; gap:14px;
}
.qcard.best{border-color:var(--gold); background:var(--cream)}
.qcard .bnm{font-family:var(--face-display); font-size:16.5px; color:var(--navy)}
.qcard .bds{font-size:12px; color:var(--muted); margin-top:2px}
.qcard .amt{margin-left:auto; text-align:right; white-space:nowrap}
.qcard .amt b{font-family:var(--face-display); font-size:19px; font-variant-numeric:tabular-nums}
.qcard .amt small{display:block; font-size:11.5px; color:var(--muted); margin-top:2px}
.qcard .tagbest{
  font-size:10.5px; padding:2px 7px; border-radius:999px; background:var(--gold);
  color:#fff; font-weight:700; margin-left:7px; vertical-align:2px;
}
/* 제품별 추가 할인 배지. '최저가' 와 달리 **테두리형**으로 둔다 —
   둘이 같이 붙는 카드가 있어 꽉 찬 알약 두 개는 시끄럽다. */
.qcard .tagsale{
  font-size:10.5px; padding:2px 7px; border-radius:999px;
  border:1px solid var(--gold); color:var(--warn); background:var(--cream);
  font-weight:700; margin-left:6px; vertical-align:2px; white-space:nowrap;
}

.m0{
  padding:22px; text-align:center; background:var(--cream); border:1px solid var(--gold);
  border-radius:var(--r-box); font-size:14.5px; color:var(--ink-2);
}
.m0 b{display:block; font-family:var(--face-display); font-size:16.5px; color:var(--navy);
  margin-bottom:7px}

.brk{margin-top:12px; border-top:1px solid var(--rule-soft); padding-top:12px}
.brk summary{font-size:13px; color:var(--muted); cursor:pointer}
.brk .irow{font-size:13px}

/* 폼 */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px}
.field label span{color:var(--bad)}
.field input[type=text],.field input[type=tel]{
  width:100%; padding:14px 15px; border:1.5px solid var(--rule); border-radius:var(--r-box);
  font-size:16px; font-family:inherit; color:var(--ink); background:var(--surface);
}
.field input:focus{outline:0; border-color:var(--gold)}
.field.bad input{border-color:var(--bad)}
.field .err{display:none; font-size:12.5px; color:var(--bad); margin-top:6px}
.field.bad .err{display:block}

.chk{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-2);
  line-height:1.6; margin-bottom:10px; cursor:pointer}
.chk input{width:19px; height:19px; margin:2px 0 0; flex:none; accent-color:var(--navy)}
.chk button{background:none; border:0; color:var(--navy); text-decoration:underline;
  cursor:pointer; font-size:13px; padding:0}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.disclaim{font-size:12px; color:var(--muted); line-height:1.7; margin:0}

.ctafix{
  position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--surface);
  border-top:1px solid var(--rule);
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
}
.ctafix-in{max-width:560px; margin:0 auto}
.errbox{
  padding:16px; border-radius:var(--r-box); background:#FDECEA; border:1px solid #F0B7B2;
  color:#8C2A20; font-size:14px; text-align:center;
}
.srcnote{font-size:11.5px; color:var(--muted); text-align:center; line-height:1.6}
.srcnote button{background:none; border:0; color:var(--navy); text-decoration:underline;
  cursor:pointer; font-size:11.5px; padding:0}

/* 완료 */
.done{padding:34px 24px; text-align:center}
.done .ok{
  width:52px; height:52px; margin:0 auto 16px; border-radius:50%; background:var(--cream);
  display:flex; align-items:center; justify-content:center;
}
.done .ok svg{width:26px; height:26px; fill:none; stroke:var(--ok); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round}
.done h2{font-family:var(--face-display); font-size:21px; font-weight:500; margin:0 0 10px}
.done p{color:var(--ink-2); font-size:14.5px; margin:0}
.done .no{
  margin-top:16px; display:inline-block; padding:8px 14px; border-radius:var(--r-chip);
  background:var(--surface-2); font-size:13px; font-variant-numeric:tabular-nums;
}
.callbox{
  display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px;
}
.callbox .t{font-size:13.5px; color:var(--muted)}
.callbox a{font-family:var(--face-display); font-size:20px; color:var(--navy);
  text-decoration:none; white-space:nowrap}

/* 모달 */
.modal{position:fixed; inset:0; z-index:60; background:rgba(11,31,58,.55);
  display:flex; align-items:flex-end; justify-content:center; padding:0}
.modal.hidden{display:none}
.modal-box{background:var(--surface); width:100%; max-width:560px;
  border-radius:var(--r-card) var(--r-card) 0 0; max-height:82vh; display:flex; flex-direction:column}
.modal-top{display:flex; align-items:center; gap:12px; padding:18px 20px;
  border-bottom:1px solid var(--rule)}
.modal-top h4{margin:0; font-size:15.5px; font-family:var(--face-display); font-weight:500}
.modal-top button{margin-left:auto; background:none; border:0; cursor:pointer; padding:4px}
.modal-top svg{width:20px; height:20px; fill:none; stroke:var(--muted); stroke-width:2;
  stroke-linecap:round}
.modal-body{padding:18px 20px 28px; overflow-y:auto; font-size:13.5px; color:var(--ink-2);
  line-height:1.75}
.modal-body dt{font-weight:600; color:var(--ink); margin-top:12px}
.modal-body dd{margin:2px 0 0}

.hidden{display:none!important}
/* ★ hidden **속성**도 반드시 숨는다 (2026-09-14 발견).
   브라우저 기본값 `[hidden]{display:none}` 은 특이도가 0 이라
   `.hero .eyebrow{display:inline-block}` 같은 규칙 하나에 밀린다.
   그래서 행사를 껐는데 `배지.hidden = true` 가 아무 일도 하지 않고
   **지난 행사 배지가 그대로 걸려 있었다** — 견적은 0% 로 나가는데
   첫 화면은 "접수 특가 7%" 라고 광고하는 상태. 값이 아니라 거짓말이 된다. */
[hidden]{display:none!important}

/* 등장 — 과하지 않게 */
.rise{animation:rise .34s ease-out both}
.rise-1{animation-delay:.05s} .rise-2{animation-delay:.1s}
@keyframes rise{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}


/* ── 프로모션 띠 ─────────────────────────────────────
   견적 카드 위에 붙는다. 골드를 배경으로 깔지 않고 테두리로만 쓴다 —
   금액이 주인공이고 띠는 그 이유를 말해 줄 뿐이다. */
.promo{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:0 0 12px; padding:10px 14px; border-radius:var(--r-box);
  border:1px solid var(--gold); background:var(--cream);
}
.promo b{ font-size:14px; color:var(--warn); letter-spacing:-.01em; }
.promo span{ font-size:13px; color:var(--ink-2); }


/* 행사 초대 배지 — 동·호수를 아직 안 넣었을 때. 점선으로 '아직 미적용'을 표시 */
.promo-invite{ border-style:dashed; }
.promo-invite b{ color:var(--warn); }

/* 행사가 옆에 그어 두는 원래 금액 */
.amt .was{ display:block; margin-top:2px; font-size:12px; color:var(--muted);
  text-decoration:line-through; font-weight:400; }

/* 평형 직접입력 — 칩으로 못 맞추는 사람을 위한 탈출구.
   우리 평형은 실거래가 전용면적을 전용률로 나눈 환산값이라 ±1평 어긋날 수
   있고, 평형 자료가 없는 단지(t=0)는 구간밖에 못 준다. 본인이 아는 값이
   언제나 우리 추정보다 정확하므로 직접 넣으면 그쪽을 쓴다. */
.pydirect{ display:flex; align-items:center; gap:8px; margin-top:10px;
  font-size:15px; font-weight:700; color:var(--bad); }
/* ⚠ font-size 는 **16px 아래로 내리지 않는다.** iOS 사파리는 입력칸 글꼴이
   16px 미만이면 탭하는 순간 화면을 확대하고 **확대된 채로 남긴다.** 손님이
   손가락으로 다시 줄여야 한다. 2026-09-15 실측에서 이 칸만 15px 이었다
   (이름·동호수·연락처는 16px 이라 멀쩡했다). 높이도 44px 로 맞춘다. */
.pydirect input{ width:84px; min-height:44px; padding:7px 10px; border:1px solid var(--rule);
  border-radius:var(--r-box); font-size:16px; font-weight:600; color:var(--ink);
  text-align:right; background:#fff; }
.pydirect input:focus{ outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,162,74,.18); }

/* 할인이 최소 시공금액에 먹혀 사라진 브랜드 표시.
   깎았다고 말해 놓고 금액이 그대로면 손님이 속았다고 느낀다. 취소선을 지우고
   여기서 이유를 밝힌다 — 왜 이 브랜드만 할인이 없는지 그 자리에서 읽히게. */
.amt small.floor{ display:inline-block; margin-top:3px; padding:2px 7px;
  border:1px solid var(--bad); border-radius:999px;
  color:var(--bad); font-weight:700; font-size:11.5px; line-height:1.5; }