/* 더해주는청소 — 「닦아 놓은 집의 아침」 (2026-08-24 테마 교체)
 *
 * 왜 바꿨나 (오너 지시 「테마도 좀 바꿔봐」)
 *   전에는 순백(#fff) + 밝은 파랑(#3182f6) — 토스 톤이었다. 두 가지가 걸렸다:
 *   ① **청소업체 대부분이 그 파랑이다.** 검색 결과에서도 명함 더미에서도 안 띈다
 *   ② 슬로건이 「더럽다고 하시면, 더러운 겁니다」인데 화면은 핀테크였다. 온도가 안 맞는다
 *
 * 바꾼 방향 — «차갑고 밝은» 에서 «따뜻하고 깊은» 으로
 *   · 배경  순백 → **웜 아이보리**. 종이 같고 40~60대 눈에 편하다. 사진도 순백보다 여기서 낫다
 *   · 포인트 밝은 파랑 → **깊은 잉크블루**. 같은 파랑 계열이라 로고를 버리지 않으면서
 *            훨씬 차분하다. 「오래 한 집」 쪽으로 읽힌다
 *   · 잉크  차가운 회청 → **따뜻한 먹색**
 *
 * ★ 초록은 손대지 않았다 — 「+0원」 배지가 초록이다. 포인트까지 초록으로 가면
 *   이 집의 유일한 «혜택 신호»가 배경에 묻힌다. 파랑 계열을 유지한 진짜 이유가 이것이다.
 *
 * ⚠️ 명도대비 실측(2026-08-24): 전부 WCAG AA 통과.
 *    ink 16.5 · ink-2 9.0 · sub 5.5 · point-ink 11.1 · point 8.0 · danger 5.8
 *    (옛 --sub #8b95a1 은 3.04:1 로 미달이었다. 색을 만질 때 여기부터 다시 잰다)
 */

:root {
  --bg: #fbfaf7;           /* 웜 아이보리 — 순백이 아니다 */
  --bg-soft: #f3f0ea;
  --ink: #1c1b18;          /* 따뜻한 먹색 */
  --ink-2: #494640;
  --sub: #6a665e;          /* 5.47:1 — 옛 #8b95a1 은 3.04:1 로 AA 미달이었다 */
  --point-ink: #0E5F55;    /* 파란 「글자」 전용. --point 는 버튼 배경·아이콘·선에만 */
  --line: #e6e1d6;
  --point: #116156;        /* 딥틸 — 흰 글자 대비 7.32 (2026-08-25 민트 전환) */
  --point-soft: #E4F6F2;
  /* ★★ 2026-08-25 민트 전환 — 계산으로 정했다 (tools/_mint_palette.py)
        밝은 민트는 «면»으로 못 쓴다: 흰 글자 대비가 2.06~2.96 으로 전부 AA 미달이었다.
        그래서 두 단으로 나눴다 — 큰 면·글자는 딥틸(--point/--point-ink),
        「민트 느낌」은 아래 --mint 가 «도형·강조»에서만 만든다.
        ⛔ --mint 위에 흰 글자를 올리지 말 것(2.30). 먹색만 올린다(7.49). */
  --mint: #2FBFA8;         /* 악센트·아이콘·강조 도형 전용 */
  --mint-soft: #E4F6F2;
  --line-mint: #BFE7DE;    /* 연한 구분선 */
  --danger: #b0392c;       /* 웜 레드 — 옛 #f04452 는 이 배경에서 튄다 */
  --r-card: 20px;
  --r-btn: 14px;
  --pad: 20px;
  --max: 560px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ⚠️ [hidden] 은 브라우저 기본값이 display:none 이지만, 클래스에 display 가 있으면 그쪽이 이긴다.
   .btn 이 display:grid 라서 「사진으로 저장」 버튼이 hidden 인데도 계속 보였다.
   (상가·60평 초과·5평 이하 상담 전환에서 견적서 저장 버튼이 눌리던 문제 — 8/19 배포 게이트가 잡음)
   JS 가 .hidden = true 로 숨긴 것은 무조건 사라져야 한다. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input { font-family: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* ── 헤더 ───────────────────────────── */
.hd {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,250,247,.92);   /* 본문과 같은 웜 아이보리 — 순백이면 헤더만 혼자 차갑다 */
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.hd-in { max-width: var(--max); margin: 0 auto; padding: 14px var(--pad);
         display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.4px; }
.logo svg { width: 22px; height: 22px; }
.logo b { color: var(--point); font-weight: 800; }
.hd-tag { font-size: 12px; color: var(--sub); font-weight: 600; }

/* ── 히어로 ─────────────────────────── */
.hero { position: relative; }
/* ⚠️ 점·화살표의 기준은 .hero 가 아니라 사진이다. (2026-08-19)
   .hero 는 헤드라인·칩까지 품는 689px 블록이라, bottom:12px 이 사진 아래가 아니라
   「퇴거청소」 칩 위를 가리켰다 — 흰 배경에 흰 점이라 보이지도 않았다. */
.hero-media { position: relative; }

/* 사진 슬라이드 — scroll-snap 이라 터치로 넘기는 건 브라우저가 해 준다 */
.hero-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-img {
  flex: 0 0 100%; width: 100%;
  height: 46vh; min-height: 260px; max-height: 420px;
  object-fit: cover; scroll-snap-align: start; user-select: none;
}

.hero-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.hero-dots i {
  position: relative;
  width: 9px; height: 9px; border-radius: 99px; background: rgba(255,255,255,.7);
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.35);
  transition: background .2s, width .2s; cursor: pointer;
}
/* ⚠️ 점 자체에 padding 을 주면 배경이 사각형으로 잘려 세로 타원처럼 보인다 (2026-08-19).
   보이는 점은 9px 원 그대로 두고, 누를 수 있는 면적만 투명한 ::after 로 넓힌다. */
.hero-dots i::after { content: ''; position: absolute; inset: -15px -6px; }
.hero-dots i.on { background: #fff; width: 22px; border-radius: 99px; }

.hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.82); color: var(--ink);
  font-size: 24px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.18); opacity: 0; transition: opacity .2s;
}
.hero-media:hover .hero-nav { opacity: 1; }
.hero-nav.prev { left: 12px; padding-right: 3px; }
.hero-nav.next { right: 12px; padding-left: 3px; }
/* 손가락으로 넘기는 기기에서는 화살표를 아예 두지 않는다 */
@media (hover: none) { .hero-nav { display: none; } }
.hero-body { max-width: var(--max); margin: 0 auto; padding: 28px var(--pad) 8px; }
.hero h1 { margin: 0; font-size: 30px; line-height: 1.35; font-weight: 800; letter-spacing: -.8px; }
.hero h1 em { font-style: normal; color: var(--point); }
.hero p { margin: 14px 0 0; color: var(--ink-2); font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.chip { background: var(--bg-soft); color: var(--ink-2); font-size: 13px; font-weight: 600;
        padding: 7px 12px; border-radius: 999px; }

/* ── 섹션 ───────────────────────────── */
section { padding: 44px 0; }
section.soft { background: var(--bg-soft); }
h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.6px; line-height: 1.4; }
.lead { margin: 0 0 24px; color: var(--sub); font-size: 15px; }

/* ── 견적기 ─────────────────────────── */
.quoter { background: #fff; border-radius: var(--r-card); border: 1px solid var(--line); overflow: hidden; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0; gap: 12px; }
/* 앵커로 뛰면 sticky 헤더(58px)가 제목 윗부분을 덮던 것 — 2026-08-19 */
#quote, #regular { scroll-margin-top: 74px; }
.dots { display: flex; gap: 6px; }
.restart { font-size: 13px; font-weight: 700; color: var(--sub); padding: 4px 2px; white-space: nowrap; }
.restart:active { color: var(--point); }

/* 고른 내용 — 눌러서 그 단계로 바로 간다 */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 20px 0; }
.crumbs:empty { display: none; }
.crumb { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-soft);
         color: var(--ink-2); font-size: 13px; font-weight: 700; padding: 7px 11px; border-radius: 999px; }
.crumb::after { content: "고치기"; font-size: 11px; color: var(--point); font-weight: 700; }
.crumb:active { background: var(--point-soft); }
.dot { width: 22px; cursor: default; height: 4px; border-radius: 99px; background: var(--line); transition: background .2s; }
.dot.on { background: var(--point); }
.dot.dot-done { background: #b9d5ff; cursor: pointer; width: 26px; }  /* .done(접수완료 패널)과 이름이 겹쳐 padding 30px 을 물던 것 — 2026-08-19 */

.step { padding: 18px 20px 20px; }
.step[hidden] { display: none; }
.q { font-size: 22px; font-weight: 800; letter-spacing: -.5px; margin: 6px 0 4px; line-height: 1.4; }
.q-sub { color: var(--sub); font-size: 14px; margin: 0 0 18px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick {
  border: 1.5px solid var(--line); background: #fff; border-radius: 16px;
  padding: 18px 14px; text-align: left; transition: all .15s;
}
.pick .t { font-size: 16px; font-weight: 700; }
.pick .d { font-size: 12.5px; color: var(--sub); margin-top: 3px; }
.pick.on { border-color: var(--point); background: var(--point-soft); }
.pick.on .t { color: var(--point); }

.field { margin-top: 16px; }
.field label { display: block; font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.numrow { display: flex; align-items: center; gap: 10px; }
.numin {
  flex: 1; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 16px; font-size: 20px; font-weight: 700; text-align: center; color: var(--ink);
  background: #fff; outline: none; min-width: 0;
}
.numin:focus { border-color: var(--point); }
.unit { font-size: 16px; font-weight: 700; color: var(--sub); }

/* .hintline { margin: 8px 0 0; font-size: 12.5px; color: var(--sub); line-height: 1.6; } */
/* 2026-08-25 검수 A(60대) — 안내 12.5px 회색은 눈에 안 들어온다 → 13.5px */
.hintline { margin: 8px 0 0; font-size: 13.5px; color: var(--sub); line-height: 1.6; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.qbtn { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px;
        font-size: 14px; font-weight: 700; color: var(--ink-2); background: #fff; }
.qbtn.on { border-color: var(--point); color: var(--point); background: var(--point-soft); }

.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-soft);
                  font-size: 20px; font-weight: 700; color: var(--ink-2); }
.stepper button:disabled { opacity: .35; }
.stepper .v { flex: 1; text-align: center; font-size: 18px; font-weight: 800; }

.opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 1.5px solid var(--line); background: #fff; border-radius: 16px;
  padding: 16px; text-align: left; margin-bottom: 10px;
}
.opt.on { border-color: var(--point); background: var(--point-soft); }
.opt .ck { width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--line);
           flex: 0 0 auto; display: grid; place-items: center; background: #fff; }
.opt.on .ck { background: var(--point); border-color: var(--point); }
.opt.on .ck::after { content: ''; width: 7px; height: 11px; border: 2.5px solid #fff;
                     border-top: 0; border-left: 0; transform: rotate(42deg) translate(-1px,-1px); }
.opt .info { flex: 1; min-width: 0; }
.opt .t { display: block; font-size: 15.5px; font-weight: 700; }
.opt .d { display: block; font-size: 12.5px; color: var(--sub); margin-top: 2px; }
.opt .p { font-size: 15px; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.opt.on .p { color: var(--point); }

.allin { background: var(--point-soft); border-radius: 16px; padding: 22px 18px; text-align: center; }
.allin-t { font-size: 17px; font-weight: 800; color: var(--point); }
.allin-d { margin-top: 8px; font-size: 13.5px; color: #5b7fa6; line-height: 1.7; }

.filmbox { background: var(--bg-soft); border-radius: 16px; padding: 18px 16px; margin-top: 18px; }
.film-q { margin: 0; font-size: 15.5px; font-weight: 700; }
.film-d { margin: 4px 0 14px; font-size: 12.5px; color: var(--sub); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid3 .pick { padding: 14px 8px; text-align: center; background: #fff; }
.grid3 .pick .t { font-size: 14px; }
.grid3 .pick .d { font-size: 11px; margin-top: 2px; }

.pre { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.pre h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; }
.pre .row { display: flex; gap: 10px; padding: 7px 0; align-items: flex-start; }
.pre .n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; background: var(--point-soft);
          color: var(--point); font-size: 11.5px; font-weight: 800; display: grid; place-items: center; margin-top: 2px; }
.pre .tx { flex: 1; min-width: 0; }
.pre .tx { display: block; }
.pre .tt { display: block; font-size: 14px; font-weight: 700; }
.pre .dd { display: block; font-size: 12.5px; color: var(--sub); margin-top: 1px; line-height: 1.5; }

.navrow { display: flex; gap: 10px; margin-top: 22px; }
/* .btn { … display: grid; place-items: center; … }   — 2026-08-26 <a class="btn"> 는 grid 에서 글자가 위로 붙어 고장난 버튼처럼 보였다(4팀 실측) → inline-flex 로 button·a 를 같은 정렬 */
.btn {
  flex: 1; height: 56px; border-radius: var(--r-btn); font-size: 17px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; transition: opacity .15s; text-decoration: none;
  box-sizing: border-box; line-height: 1;
}
/* 2026-08-26 결과 화면 정리 — 견적번호 줄 · 「다른 방법으로 문의하기 ▾」 */
.quote-no { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--bg-soft); font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.quote-no b { color: var(--ink); font-size: 16px; letter-spacing: .2px; }
.r-other { margin-top: 12px; }
.r-other > summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--ink-2); padding: 10px 0; list-style: none; }
.r-other > summary::-webkit-details-marker { display: none; }
.r-other > summary::before { content: '▸ '; color: var(--sub); }
.r-other[open] > summary::before { content: '▾ '; }
.btn.primary { background: var(--point); color: #fff; }
.btn.primary:disabled { background: var(--line); color: var(--sub); }  /* 흰 글자는 대비 1.5:1 이라 「다음」이 안 읽혔다 — 2026-08-19 */
.btn.ghost { background: var(--bg-soft); color: var(--ink-2); flex: 0 0 96px; }
.btn:active { opacity: .85; }

/* ── 결과 ───────────────────────────── */
.result { padding: 26px 20px 22px; }
.r-top { text-align: center; padding: 8px 0 20px; }
.r-cond { font-size: 14px; font-weight: 700; color: var(--sub); }
.r-was { font-size: 17px; color: var(--sub); text-decoration: line-through; margin-top: 8px; font-weight: 600; }
.r-amt { font-size: 42px; font-weight: 800; letter-spacing: -1.5px; margin: 2px 0 6px; }
.r-amt.ask { font-size: 26px; letter-spacing: -.5px; }
.r-save { display: inline-block; background: #f7ece9; color: var(--danger); font-size: 13px; font-weight: 800;
          padding: 6px 12px; border-radius: 999px; margin-bottom: 10px; }
.r-badge { display: inline-block; background: var(--point-soft); color: var(--point);
           font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; }
.r-meta { display: flex; justify-content: center; gap: 18px; padding: 16px 0;
          border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.r-meta div { text-align: center; }
.r-meta .k { font-size: 12px; color: var(--sub); font-weight: 600; }
.r-meta .v { font-size: 16px; font-weight: 800; margin-top: 2px; }

/* 명세의 「깎아 드린 줄」 — 빼는 숫자라는 게 색으로도 보여야 한다 */
.r-line.r-off b { color: var(--point-ink); }

/* 히어로 — 오픈일 안내와 사진 고지 (2026-08-23) */
.hero-open { font-size: 14px; color: var(--sub); margin-top: 10px; }
/* ⚠️ 사진 위에 얹지 않는다 — 어느 사진이 밝을지 알 수 없어 글자가 묻힌다 */
.hero-note { font-size: 12px; line-height: 1.5; color: var(--sub); margin: 8px 0 0; }

/* 슬로건 아래 한 줄 — 못 오시는 분께도 같은 확인을 드린다는 안내 (2026-08-23) */
/* ⚠️ 슬로건 글씨 크기를 물려받지 않게 크기를 «명시»한다 — .slogan p 규칙에 걸린다 */
/* 검증에 걸린 칸을 눈에 보이게 (2026-08-23) */
.fld input.bad, .fld textarea.bad { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(217,45,32,.12); }
.agree input.bad { outline: 2px solid var(--danger); outline-offset: 3px; }

.slogan .sl-note {
  font-size: 14px; line-height: 1.65; color: var(--sub);
  margin: 18px auto 0; max-width: 34em; font-weight: 400;
}

/* ★ 오픈 기념 선택 — 깎기냐 사은품이냐 (2026-08-23) */
.giftbox { margin: 14px 0 4px; }
.gift-q { font-size: 14px; color: var(--sub); margin: 0 0 8px; text-align: center; }
/* ⚠️ minmax(0,1fr) 이어야 한다 — auto 면 글자가 칸을 밀어 390px 에서 가로 스크롤이 생긴다 */
.gift-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gift-i {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 12px 8px; border: 1.5px solid var(--line); background: var(--bg);
  border-radius: var(--r-btn); cursor: pointer; font: inherit; color: var(--sub);
  transition: border-color .12s, background .12s;
}
.gift-i b { font-size: 15px; color: var(--ink); font-weight: 700; }
.gift-i span { font-size: 12.5px; line-height: 1.4; text-align: center; }
.gift-i.on { border-color: var(--point); background: var(--point-soft); }
.gift-i.on b { color: var(--point-ink); }
.gift-i:focus-visible { outline: 2px solid var(--point); outline-offset: 2px; }

.r-lines { padding: 16px 0; }
.r-line { display: flex; justify-content: space-between; font-size: 14.5px; padding: 6px 0; color: var(--ink-2); }
.r-line b { font-weight: 700; color: var(--ink); }

.r-line.r-sum { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.r-line.r-total { font-size: 16px; }
.r-line.r-total b { font-size: 18px; color: var(--point); }
.r-line.r-total em { font-style: normal; font-size: 11.5px; color: var(--sub); font-weight: 600; margin-left: 5px; }

.pay { background: var(--bg-soft); border-radius: 16px; padding: 18px; margin-bottom: 10px; }
.pay h3 { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
/* ⚠️ display:flex 로 두지 말 것 — 문장 안의 <b> 가 flex 아이템이 되어 줄이 세로로 쪼개진다 (2026-08-19) */
.pay-row { font-size: 13.5px; color: var(--ink-2); padding: 4px 0 4px 14px; position: relative; }
.pay-row::before { content: '·'; color: var(--point); font-weight: 800; position: absolute; left: 2px; }

.dep { background: #faf3e2; border-radius: 16px; padding: 18px; margin-bottom: 10px; }
.dep h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: #8a6100; }
.dep .amt { font-size: 22px; font-weight: 800; color: #8a6100; margin-bottom: 10px; }
/* ⚠️ 여기도 flex 금지 — 「받은 예약금의 두 배」가 <b> 라서 세 조각으로 흩어졌다 (2026-08-19) */
.dep .row { font-size: 13px; color: #8a6100; padding: 3px 0 3px 14px; position: relative; line-height: 1.6; }
.dep .row::before { content: '·'; font-weight: 800; position: absolute; left: 2px; }

.free { background: var(--bg-soft); border-radius: 16px; padding: 18px; margin-top: 6px; }
.free h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; }
.free ul { list-style: none; margin: 0; padding: 0; }
.free li { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-2); padding: 4px 0; }
.free li span:last-child { color: var(--point); font-weight: 800; }

.warn { display: flex; gap: 10px; background: #faf3e2; border-radius: 14px; padding: 14px 16px; margin-top: 12px; }
.warn .ico { flex: 0 0 auto; font-size: 15px; }
.warn p { margin: 0; font-size: 13.5px; color: #8a6100; line-height: 1.6; }

.valid { text-align: center; font-size: 12.5px; color: var(--sub); margin-top: 16px; line-height: 1.7; }

/* ── 상담 안내 ──────────────────────── */
.consult { text-align: center; padding: 30px 8px; }
.consult .big { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.consult p { color: var(--ink-2); font-size: 15px; margin: 0 0 6px; }

/* ── 하루 한 집 ─────────────────────── */
.oneday { padding: 40px 0 34px; }
.od-t { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -.6px; line-height: 1.4; }
.od-d { margin: 12px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.75; }

/* ── 슬로건 ─────────────────────────── */
.slogan { background: var(--ink); padding: 56px 0; text-align: center; }
.slogan p { margin: 0; letter-spacing: -.7px; }
.slogan .sl1 { color: #9aa6b2; font-size: 19px; font-weight: 600; }
.slogan .sl2 { color: #fff; font-size: 25px; font-weight: 800; margin-top: 4px; line-height: 1.4; }
.slogan .sl3 { color: var(--point); font-size: 25px; font-weight: 800; margin-top: 14px; line-height: 1.4; }

/* ── 아쉬웠던 점 묻기 ───────────────── */
.fld.ask { background: var(--point-soft); border-radius: 16px; padding: 16px; }
.fld.ask label { color: var(--point-ink); font-size: 14.5px; }
.ask-b { margin: -3px 0 10px; font-size: 12.5px; color: #5b7fa6; }
.ask-note { background: var(--point-soft); border-radius: 16px; padding: 18px; margin-top: 12px; }
.ask-note h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--point-ink); }
.ask-note p { margin: 0; font-size: 13.5px; color: #5b7fa6; line-height: 1.65; }
.ask-note .ask-where { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(27,100,218,.18); font-weight: 700; }

/* ── 리스트 카드 ────────────────────── */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; }
section.soft .card { border-color: transparent; }
.inc { list-style: none; margin: 0; padding: 0; columns: 1; }
.inc li { display: flex; gap: 9px; font-size: 14.5px; color: var(--ink-2); padding: 5px 0; align-items: flex-start; }
.inc li::before { content: ''; flex: 0 0 auto; width: 6px; height: 10px; margin-top: 6px;
                  border: 2px solid var(--point); border-top: 0; border-left: 0; transform: rotate(42deg); }

.nots { display: grid; gap: 12px; }
.not { background: #fff; border-radius: 18px; padding: 20px; }
/* .not h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 800; }   2026-08-25 접기 전 — 제목이 summary 로 들어갔다 */
.not h3 { margin: 0; font-size: 15.5px; font-weight: 800; line-height: 1.45; flex: 1; min-width: 0; }
.not p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.not .tip { margin-top: 10px; background: var(--point-soft); color: var(--point-ink); border-radius: 12px;
            padding: 12px 14px; font-size: 13.5px; font-weight: 600; }
/* ★ 2026-08-25 오너 — 「평상시에는 제목만, ＋ 표시 눌러야 상세」. .not 이 <details> 가 됐다.
   ⚠️ 제목은 390px 에서 한 줄에 들어가야 한다(검증이 잰다). 15.5px · 좌우 20px · ＋ 22px 기준 한글 18자까지.
   ⚠️ ＋/－ 는 .plus::before 가 그린다. 열리면 －. 회전 연출은 reduced-motion 블록에서 꺼진다. */
.not > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; margin: -20px; padding: 20px; }
.not > summary::-webkit-details-marker { display: none; }
.plus { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
        background: var(--point-soft); color: var(--point-ink); font-size: 15px; font-weight: 800; line-height: 1;
        transition: transform .18s ease; }
.plus::before { content: '＋'; }
details[open] > summary .plus::before { content: '－'; }
details[open] > summary .plus { transform: rotate(180deg); }
.not-body { padding-top: 10px; }
.not[open] > summary h3 { color: var(--point-ink); }

/* 「이건 다 합니다」 — 「제목 — 설명」 꼴 긴 항목만 접는다 (짧은 항목은 그대로 한 줄) */
.inc li.inc-d > details { flex: 1; min-width: 0; }
.inc li.inc-d summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.inc li.inc-d summary::-webkit-details-marker { display: none; }
.inc li.inc-d .plus { width: 18px; height: 18px; font-size: 12px; }
.inc-dd { font-size: 13.5px; color: var(--sub); line-height: 1.6; padding: 4px 0 2px; }

/* 「사진 더 보기 ＋」 (2026-08-25) */
.gal-more { margin-top: 10px; }
.gal-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 2px; font-size: 14.5px; font-weight: 700; color: var(--point-ink); }
.gal-more > summary::-webkit-details-marker { display: none; }
.gal-more[open] > summary { margin-bottom: 8px; }
/* 전·후 쌍 — 한 figure 안에 두 장. 격자 한 줄을 통째로 쓴다 */
.gal figure.ba { grid-column: 1 / -1; }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ba-pair img { aspect-ratio: 1 / 1; }
.ba-tag { font-weight: 800; color: var(--point-ink); margin-left: 6px; }

/* ── 갤러리 ─────────────────────────── */
.gal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gal figure { margin: 0; border-radius: 14px; overflow: hidden; background: var(--bg-soft); }
.gal img { aspect-ratio: 4/3; object-fit: cover; height: auto; width: 100%; }
.gal figcaption { font-size: 12.5px; color: var(--sub); padding: 8px 2px 0; font-weight: 600; }
.gal-note { margin-top: 14px; font-size: 12.5px; color: var(--sub); line-height: 1.7; }

/* ── FAQ ────────────────────────────── */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 2px; font-size: 15.5px; font-weight: 700;
               display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--sub); font-size: 20px; font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-2); }

/* ── 푸터 ───────────────────────────── */
footer { padding: 34px 0 120px; background: var(--bg-soft); color: var(--sub); font-size: 13px; }
footer .fl { font-weight: 800; color: var(--ink-2); font-size: 15px; margin-bottom: 10px; }
footer p { margin: 3px 0; }

/* ── 하단 고정 바 ───────────────────── */
.cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
}
.cta-in { max-width: var(--max); margin: 0 auto; display: flex; gap: 8px; }

.btn.soft { background: var(--point-soft); color: var(--point); }

/* ── 예약·상담 폼 ───────────────────── */
.form-in { max-width: 480px; margin: 0 auto; background: #fff; border-radius: 22px; overflow: hidden; }
.form-hd { display: flex; align-items: center; justify-content: space-between;
           padding: 20px 20px 12px; }
.form-hd h3 { margin: 0; font-size: 20px; font-weight: 800; }
.form-hd .x { font-size: 20px; color: var(--sub); width: 36px; height: 36px; border-radius: 999px; }
.form-body { padding: 0 20px 24px; }
.sumbar { background: var(--bg-soft); border-radius: 14px; padding: 14px 16px; font-size: 14px;
          font-weight: 700; color: var(--ink-2); margin-bottom: 18px; }
.sumbar b { color: var(--point); }
.fld { margin-bottom: 14px; }
.fld label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 7px; }
/* .opt-tag { font-size: 11.5px; color: var(--sub); font-weight: 600; margin-left: 4px; } */
/* 2026-08-25 검수 A — 「필수/선택」 11.5px 는 안 보였다. 말(「(꼭 적어 주세요)」)로 바꾸고 13px 로 */
.opt-tag { font-size: 13px; color: var(--sub); font-weight: 600; margin-left: 4px; }
.fld input[type=text], .fld input[type=tel], .fld input[type=date], .fld textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 13px; padding: 14px;
  font-size: 16px; color: var(--ink); background: #fff; outline: none; resize: none;
}
.fld input:focus, .fld textarea:focus { border-color: var(--point); }
.agree { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 12px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.agree input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--point); }
.agree a { color: var(--point); }
.notice { background: #faf3e2; color: #8a6100; border-radius: 13px; padding: 14px 16px;
          font-size: 13px; line-height: 1.65; margin-bottom: 16px; }
.fallback { font-size: 13px; color: var(--sub); text-align: center; margin: 12px 0 0; }
/* ★ 접수 폼의 「직접 연락하기」 3버튼 — 2026-08-23.
   ⚠️ minmax(0,1fr) 이어야 한다. 기본값 auto 면 글자가 칸을 밀어 390px 에서 가로 스크롤이 생긴다. */
.contact3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.contact3 .btn { width: 100%; padding-left: 4px; padding-right: 4px; text-align: center; }
.orLine { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; color: var(--sub); font-size: 13px; }
.orLine::before, .orLine::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.done { text-align: center; padding: 30px 10px; }
.done .ic { font-size: 40px; }
.done h4 { margin: 14px 0 8px; font-size: 20px; font-weight: 800; }
.done p { margin: 0 0 6px; font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }

/* ── 견적서 미리보기 ────────────────── */
.sheet { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.72);
         display: none; overflow-y: auto; padding: 24px 16px; }
.sheet.on { display: block; }
.sheet-in { max-width: 420px; margin: 0 auto; }
.sheet canvas, .sheet img { width: 100%; border-radius: 14px; background: #fff; }
.sheet .hint { color: #fff; text-align: center; font-size: 14px; font-weight: 600; margin: 16px 0 10px; }
.sheet .close { display: block; width: 100%; height: 52px; border-radius: 14px;
                background: #fff; font-weight: 700; margin-top: 10px; }

@media (max-width: 360px) {
  .hero h1 { font-size: 26px; }
  .r-amt { font-size: 36px; }
  .grid2 { gap: 8px; }
}

/* ── 정기청소 ─────────────────────────── */
#regular { background: #fff; }
.reg-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.reg-plan { position: relative; border: 1.5px solid var(--line); border-radius: 16px; padding: 20px 12px 16px; text-align: center; background: #fff; }
.reg-plan.best { border-color: var(--point); background: var(--point-soft); }
.reg-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--point); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.reg-h { font-size: 15px; font-weight: 800; color: var(--ink); }
.reg-d { font-size: 12px; color: var(--sub); margin-top: 3px; line-height: 1.45; min-height: 34px; }
.reg-price { font-size: 21px; font-weight: 900; color: var(--ink); margin-top: 8px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.reg-once { font-size: 11.5px; color: var(--sub); margin-top: 4px; font-variant-numeric: tabular-nums; }
.reg-price.ask { font-size: 17px; color: var(--point); letter-spacing: 0; }
.reg-extra { font-size: 13px; color: var(--ink-2); line-height: 1.7; margin-top: 14px; background: var(--bg-soft); padding: 14px 16px; border-radius: 14px; }

.reg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.reg-card { border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.reg-card h3 { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.reg-list { margin: 0; padding: 0; list-style: none; }
.reg-list li { position: relative; padding: 6px 0 6px 22px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.reg-list.ok li::before { content: '✓'; position: absolute; left: 0; color: var(--point); font-weight: 800; }
.reg-list.no li::before { content: '×'; position: absolute; left: 2px; color: #98a2b3; font-weight: 800; }

.reg-safe { margin-top: 18px; border: 1.5px solid var(--point); border-radius: 18px; padding: 22px; background: var(--point-soft); }
.reg-safe h3 { margin: 0 0 6px; font-size: 17px; font-weight: 900; }
.reg-safe-lead { margin: 0 0 14px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.reg-row { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(27,100,218,.14); }
.reg-row .n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--point); color: #fff;
  font-size: 12px; font-weight: 800; display: grid; place-items: center; margin-top: 2px; }
.reg-row .tx { display: block; }
.reg-row .tt { display: block; font-size: 14px; font-weight: 800; color: var(--ink); }
.reg-row .dd { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.65; margin-top: 3px; }
.reg-break { margin: 14px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }

.reg-when { margin-top: 18px; }
.reg-when h3 { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.reg-when-row { padding: 12px 0; border-top: 1px solid var(--line); }
.reg-when-row b { display: block; font-size: 14.5px; font-weight: 800; }
.reg-when-row span { display: block; font-size: 13px; color: var(--sub); line-height: 1.65; margin-top: 3px; }

.reg-cta { margin-top: 20px; text-align: center; }
.reg-cta p { font-size: 13px; color: var(--sub); line-height: 1.7; margin: 0 0 8px; }
.reg-cta .btn { width: 100%; max-width: 340px; margin-top: 8px; }

@media (max-width: 560px) {
  .reg-plans { grid-template-columns: 1fr; }
  .reg-plan { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 16px 14px; }
  .reg-tag { left: 14px; transform: none; }
  .reg-d { min-height: 0; grid-column: 2; }
  .reg-h { grid-column: 1; }
  .reg-price { margin-top: 0; grid-column: 3; font-size: 19px; }
  .reg-price.ask { font-size: 16px; white-space: nowrap; }
  .reg-once { grid-column: 2 / 4; margin-top: 0; }
  .reg-cols { grid-template-columns: 1fr; }
}

.reg-why { margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--bg-soft); }
.reg-why h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.reg-why-lead { margin: 0 0 6px; font-size: 13px; color: var(--sub); line-height: 1.65; }

.reg-free { margin-top: 12px; background: var(--point-soft); border-radius: 16px; padding: 16px 18px; }
.reg-free-t { display: block; font-size: 14px; font-weight: 800; color: var(--point); margin-bottom: 10px; }
.reg-free-i { display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px;
  padding: 7px 12px; margin: 0 6px 6px 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.reg-free-i b { color: var(--point); font-weight: 800; }

.reg-head { margin: 4px 0 20px; padding: 22px 20px; border-radius: 18px; background: var(--ink); }
.reg-head-t { margin: 0; font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -.6px; line-height: 1.4; }
.reg-head-d { margin: 10px 0 0; font-size: 14px; color: #c3cad3; line-height: 1.75; }
.reg-head-d b { color: #fff; font-weight: 800; }

/* 로고를 눌러 맨 위로 — a 태그라 기본 밑줄·색을 지운다 */
.logo { text-decoration: none; color: inherit; cursor: pointer; }
.logo:active { opacity: .6; }

.reg-shot { margin: 0 0 18px; border-radius: 18px; overflow: hidden; background: var(--bg-soft); }
.reg-shot img { width: 100%; height: auto; display: block; }
.reg-shot figcaption { padding: 12px 16px; font-size: 13px; color: var(--sub); line-height: 1.6; background: #fff; }

/* ══════════════════════════════════════════════════════════════
   2026-08-19 전면 개편분
   ══════════════════════════════════════════════════════════════ */

/* 킥커 — 무엇을 파는 집인지 3초 안에 말한다 */
.kicker { margin: 0 0 10px; font-size: 13.5px; font-weight: 800; color: var(--point-ink); letter-spacing: -.2px; }

/* 평수 버튼 — 터치 타깃 44px 확보 (㎡ 병기는 오너 지시로 철회, 2026-08-19) */
.qbtn { padding: 13px 16px; }

/* 결과 화면 — 예외 고지 줄 */
.r-except {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 12px;
  background: var(--bg-soft); color: var(--ink-2); font-size: 12.5px; line-height: 1.7;
}
.r-except.ok { background: #eef7ee; color: #2b6a2b; }
.r-cta-top { margin: 16px 0 4px; }

/* 접는 블록 (예약금·결제 / 작업 전 확인 / 정기청소 자세히) */
.r-more, .reg-more { margin: 14px 0 0; }
.r-more > summary, .reg-more > summary {
  list-style: none; cursor: pointer;
  padding: 16px 2px; font-size: 14.5px; font-weight: 700; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.reg-more > summary { font-size: 15.5px; padding: 18px 2px; }
.r-more > summary::-webkit-details-marker, .reg-more > summary::-webkit-details-marker { display: none; }
.r-more > summary::after, .reg-more > summary::after { content: '+'; color: var(--sub); font-size: 20px; font-weight: 400; }
.r-more[open] > summary::after, .reg-more[open] > summary::after { content: '−'; }

/* 무상 항목을 칩으로 — 개수(메시지)는 그대로 두고 높이만 줄인다 */
.free-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.free-i {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 999px;
  background: #fff; border: 1px solid #d7e7d7;
  font-size: 12.5px; color: #2b6a2b; line-height: 1.4;
}
.free-i b { color: #1f7a1f; font-weight: 800; }
.free h3 em { margin-left: 6px; font-style: normal; font-size: 13px; color: #2b6a2b; font-weight: 700; }

/* 첫 손님 선언 · 중개사 블록 */
.tr-p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.tr-p:last-child { margin-bottom: 0; }
.agent { margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.agent > summary {
  list-style: none; cursor: pointer; padding: 18px 18px;
  font-size: 15.5px; font-weight: 800; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
}
.agent > summary::-webkit-details-marker { display: none; }
.agent > summary::after { content: '+'; color: var(--sub); font-size: 20px; font-weight: 400; }
.agent[open] > summary::after { content: '−'; }
.agent > p, .agent > button { margin: 0 18px 14px; }
.agent > button { width: calc(100% - 36px); }
.agent p { font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.agent-lead { color: var(--ink) !important; font-size: 15px !important; }
.agent-copy {
  padding: 14px; border-radius: 12px; background: var(--soft);
  font-size: 13px; color: var(--ink-2); word-break: keep-all;
}

/* 폼 — 유입 경로 · 희망 시간대
   ⚠️ 2026-08-25 검수 A — #fSlot 에 이 규칙이 없어 그 드롭다운만 13.3px(iOS 자동 확대)였다. 폼의 select 전부에 준다 */
/* #fVia { */
.fld select, #fVia, #fSlot {
  width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 12px;
  font-size: 16px; font-family: inherit; color: var(--ink); background: #fff;
}
/* 취소·환불 규정 접기 (검수 A — 노란 글자 14줄이 폼 한가운데 서 있었다) */
.policy-fold summary { cursor: pointer; font-weight: 700; padding: 6px 0; list-style: none; }
.policy-fold summary::before { content: '▸ '; }
.policy-fold[open] summary::before { content: '▾ '; }
.policy-fold summary::-webkit-details-marker { display: none; }
#fBigTrash { margin-top: 6px; }
#fBigTrash .pick { padding: 14px; }

/* 터치 타깃 44px */
.crumb { padding: 11px 13px; }
.restart, #restartBtn { padding: 12px 8px; margin: -12px -8px; }

/* 「이건 다 합니다」 뒤쪽 접기 */
.inc-more { margin-top: 6px; }
.inc-more > summary {
  list-style: none; cursor: pointer; padding: 12px 2px;
  font-size: 14px; font-weight: 700; color: var(--point-ink);
}
.inc-more > summary::-webkit-details-marker { display: none; }
.inc-more > summary::after { content: ' +'; }
.inc-more[open] > summary::after { content: ' −'; }


/* ★★★ 공유 (2026-08-23 오너 지시) — 예약보다 «아랫순위» 행동이라는 것이 보여야 한다.
   ⚠️ primary 로 두면 바로 위 「예약 신청하기」와 경쟁한다. soft 라인 버튼이다. */
.shareBox { margin-top: 14px; padding: 13px 14px; border: 1px solid var(--line, var(--line)); border-radius: 12px; }
.shareWhy { margin: 0 0 10px; font-size: .88rem; line-height: 1.6; color: var(--sub, var(--sub)); }
.shareWhy b { color: var(--ink, #191f28); }
.shareBox .btn { width: auto; }
.shareDone { margin: 10px 0 0; font-size: .84rem; color: var(--point-ink, var(--point-ink)); word-break: break-all; }
@media (max-width: 420px) { .shareBox .btn { width: 100%; } }

/* ══════════════════════════════════════════════════════════════
   화면에 온기 넣기 (2026-08-24 오너 지시 「홈페이지가 너무 정적이다」)
   ⚠️ 결정권자가 40~60대다. 「살아 있다」까지만 하고 «장난기»로 넘어가지 않는다.
   ⚠️ 움직임은 전부 아래 prefers-reduced-motion 블록에서 한 번에 꺼진다.
   ══════════════════════════════════════════════════════════════ */

/* ── ③ 「+0원」 배지 — 이 집의 자산인데 지금까지 조용했다 ── */
.free-i {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
@media (hover: hover) {           /* 터치 기기에서 :hover 가 눌린 채 남는 것을 막는다 */
  .free-i:hover {
    transform: translateY(-2px);
    border-color: #9ccf9c;
    box-shadow: 0 4px 10px rgba(31, 122, 31, .13);
  }
  .free-i:hover b { animation: freePop .32s ease; }
}
.free-i:active { transform: translateY(-1px) scale(.98); }
@keyframes freePop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.free-i b { display: inline-block; }   /* transform 이 먹으려면 inline 이 아니어야 한다 */

/* ── ② 견적 금액이 굴러 올라가는 동안 ── */
.r-amt.counting { font-variant-numeric: tabular-nums; }  /* 자릿수가 흔들려 폭이 튀는 것을 막는다 */

/* ── ⑦ 금액이 나올 때 반짝임 한 번 ──
   로고의 반짝임과 같은 4각 별. 새 브랜드 마크를 화면에서 한 번 더 쓰는 셈이다. */
.r-top { position: relative; }
.r-top::after {
  content: '';
  position: absolute; right: 12%; top: 4px;
  width: 22px; height: 22px;
  background: var(--point);
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  opacity: 0; pointer-events: none;
}
.r-top.spark::after { animation: sparkOnce .85s ease-out; }
@keyframes sparkOnce {
  0%   { opacity: 0;   transform: scale(.3) rotate(-25deg); }
  35%  { opacity: .95; transform: scale(1)  rotate(0deg); }
  100% { opacity: 0;   transform: scale(1.25) rotate(18deg); }
}

/* ── 움직임을 원치 않는 분에게는 전부 끈다 ──
   ⚠️ 이 블록이 없으면 어지럼증·전정기관 문제가 있는 분에게 그대로 나간다. */
@media (prefers-reduced-motion: reduce) {
  .free-i, .free-i:hover, .free-i:active { transition: none; transform: none; }
  .free-i:hover b { animation: none; }
  .r-top.spark::after { animation: none; opacity: 0; }
  .plus, details[open] > summary .plus { transition: none; transform: none; }   /* 2026-08-25 ＋/－ 회전도 끈다 */
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ── ⑥ 지금까지 한 집 (2026-08-24) ── */
.jobs { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.jobs .wrap { padding: 30px 20px; text-align: center; }
.jobs-big {
  margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--ink);
}
.jobs-sub {
  margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-2);
  max-width: 30rem; margin-inline: auto;
}
.jobs-sub b { color: var(--ink); }
@media (max-width: 400px) { .jobs-big { font-size: 22px; } }

/* ══════════════════════════════════════════════════════════════
   ★★ 데스크톱(PC) 레이아웃 — 2026-08-25 오너 지적
   「PC 화면 100% 기준인데 너무 휑한데.. 모바일일때는 어색하지 않은데」

   실측 원인: 이 파일에 **min-width 미디어쿼리가 하나도 없었다.**
   전부 max-width(작은 화면용)뿐이라 --max: 560px 가 1920px 화면에도 그대로 갔다
   → 본문 560px · 빈 여백 71%.

   ⛔ 고치는 방법에 규칙이 둘 있다
     ① **모바일은 손대지 않는다.** 오너가 「모바일은 어색하지 않다」고 했다.
        기본값·기존 규칙을 «수정»하지 않고 min-width 로 «더하기»만 한다.
        --max: 560px 기본값은 그대로 두고 이 블록 안에서만 다른 값으로 덮는다
     ② **파일 맨 아래에 둔다.** 미디어쿼리는 명시도를 올려 주지 않는다 —
        컴포넌트 본 정의보다 앞에 적으면 조용히 진다 (골만사 2026-08-20 사고)

   ★ 누가 PC 로 보는가 = **중개사무소**다. 유입 경로가 단지 앞 중개업소 소개라
     사무실 PC 로 열고, 손님에게 보여줄 때도 PC 다. 읽는 사람은 40~60대다
     → 「젊고 세련된」이 아니라 **「제대로 된 업체구나」**가 목표.
       글씨는 작게 만들지 않고 오히려 키운다

   ★ 폭을 무한정 넓히지 않는 이유 — **한글은 한 줄 40~45자가 한계**다.
     통은 넓히되(1120px) 줄글은 따로 46em 으로 잡아 둔다. 통 = 격자·카드용,
     46em = 읽는 글용으로 역할이 다르다

   ★ 왼쪽 모서리를 하나로 맞췄다 — 헤더·히어로·모든 섹션이 같은 --max 를 쓴다.
     칸마다 시작점이 다르면 그것만으로 「대충 만든 페이지」로 읽힌다
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

  /* ── 통 넓히기 ──
     --max 를 쓰는 곳은 .wrap · .hd-in · .hero-body · .cta-in 네 곳뿐이고
     넷 다 데스크톱에서 넓어져야 한다. 그래서 변수 한 줄로 덮는다.
     ⚠️ :root 기본값(560px)은 건드리지 않았다 — 모바일은 그대로다 */
  :root { --max: 880px; --pad: 28px; }

  section { padding: 68px 0; }

  /* ── 읽는 글의 줄 길이 상한 ──
     통이 880~1120 이어도 «문장»은 여기서 끊는다. 안 그러면 60자짜리 줄이 나온다 */
  .lead, .od-d, .hero p, .not p, .not .tip, .faq p,
  .reg-why-lead, .reg-safe-lead, .gal-note, .hero-note, .hero-open,
  .reg-head-d, .reg-extra, .valid, .reg-when-row span {
    max-width: 46em;
  }

  /* ── 히어로: 사진 옆에 글 ──
     지금까지는 사진만 전폭이고 바로 아래 글이 560px 라 폭이 급격히 좁아졌다.
     ⚠️ 사진 «위에» 글자를 얹지는 않는다 — 어느 사진이 밝을지 알 수 없다(2026-08-19 판단 그대로) */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    max-width: var(--max);
    margin: 0 auto;
    padding: 44px var(--pad) 4px;
  }
  .hero-media { border-radius: var(--r-card); overflow: hidden; }
  .hero-img { height: 430px; min-height: 0; max-height: none; }
  .hero-nav { opacity: 1; }          /* PC 는 손가락이 없다 — 화살표를 늘 보여 준다 */
  .hero-body { max-width: none; margin: 0; padding: 0; }
  .hero h1 { font-size: 38px; letter-spacing: -1.1px; }
  .hero p { font-size: 17px; }
  .hero-open { font-size: 15px; }
  .chips { margin-top: 22px; }
  .chip { font-size: 14px; padding: 8px 14px; }

  /* ── 제목·본문 키우기 (40~60대) ── */
  h2 { font-size: 30px; }
  .lead { font-size: 16.5px; margin-bottom: 28px; }
  .od-t { font-size: 28px; }
  .od-d { font-size: 17px; }

  /* ★ 2026-08-25 — 「하루에 한 집만」을 2단으로.
     바로 위 히어로가 2단인데 이 섹션만 1단이라 오른쪽이 크게 비어 있었다(오너 지적).
     제목 왼쪽 · 설명 오른쪽으로 히어로의 리듬을 잇는다.
     ⚠️ minmax(0,1fr) 이라야 한다 — 1fr 만 쓰면 내용이 칸을 밀어내 넓은 화면에서 깨진다
        (골만사 2026-08-20 에 실제로 겪은 자리다) */
  .oneday .wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 56px; align-items: start;
  }
  .od-d { margin-top: 4px; }

  .slogan { padding: 76px 0; }
  .slogan .sl1 { font-size: 23px; }
  .slogan .sl2 { font-size: 32px; }
  /* ★ 34em 이면 데스크톱에서 「드립니다.」만 둘째 줄에 남아 어색했다.
     40em 으로 넓혀 두 줄이 고르게 나뉘게 한다. 한 줄로 늘이지 않는 이유는
     한글 글줄이 45자를 넘으면 읽기가 나빠지기 때문이다. */
  .slogan .sl-note { font-size: 15.5px; max-width: 40em; }

  /* ── 「이건 다 합니다」 2열 ──
     ⚠️ 격자(grid)로 하면 두 줄짜리 항목이 옆 칸까지 행 높이를 늘려 빈 구멍이 생긴다.
        다단(columns)이라야 자연스럽게 흐른다. li 가 잘리지 않게 break-inside 를 건다 */
  .inc { columns: 2; column-gap: 40px; }
  /* ⚠️ .inc li 의 기본값은 display:flex 다. 문장 안의 <b> 가 flex 아이템이 되어
     「유리창 — 안쪽 전체, 바깥쪽은 / 창을 열어서 닿는 면까지 / . 큰 창은…」 처럼
     한 줄이 세 조각으로 흩어진다 (이 파일이 .pay-row·.dep .row 에서 두 번 겪은 함정).
     ⛔ 모바일 기본값은 오너 지시로 손대지 않는다 — 여기서 PC 만 바로잡는다.
        체크 표시는 flex 아이템 대신 절대 위치로 옮긴다(.reg-list 와 같은 방식). */
  .inc li { display: block; position: relative; break-inside: avoid;
            font-size: 16px; padding: 7px 0 7px 20px; }
  .inc li::before { position: absolute; left: 4px; top: 13px; margin-top: 0; }
  /* ⚠️ 다단 안에서 첫 항목의 margin 이 칸 위쪽에 빈 자리를 만드는 것을 막는다 */
  .inc li:first-child { margin-top: 0; }
  .card { padding: 30px 32px; }

  /* ── 「이건 하지 않습니다」 2열 ── */
  .nots { grid-template-columns: 1fr 1fr; gap: 16px; }
  .not { padding: 24px 26px; }
  .not > summary { margin: -24px -26px; padding: 24px 26px; }   /* 2026-08-25 details 화 — 여백을 따라간다 */
  /* .not h3 { font-size: 19px; }   2026-08-25 — 2열 칸(약 320px)에서 19px 은 두 줄로 꺾인다 */
  .not h3 { font-size: 17px; }
  .not p, .not .tip { font-size: 15.5px; }

  /* ── 사진 4열 (8장 = 두 줄로 딱 떨어진다 · 전·후 쌍은 2칸씩) ── */
  .gal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .gal figure.ba { grid-column: span 2; }
  .gal figcaption { font-size: 13.5px; }

  /* ── FAQ — 아코디언이라 열이 늘면 열 때마다 옆 칸이 튄다. 한 열로 두고 폭만 잡는다 ── */
  .faq { max-width: 780px; }
  .faq summary { font-size: 17px; padding: 20px 2px; }
  .faq p { font-size: 15.5px; }

  /* ── 견적기 ──
     ⚠️ 흐름·버튼·data- 속성은 손대지 않았다. 카드 폭과 안쪽 여백만 키운다 */
  .quoter { max-width: 640px; }
  .step { padding: 26px 28px 28px; }
  .q { font-size: 24px; }
  .q-sub { font-size: 15px; }
  .result { padding: 30px 28px 26px; }

  /* ── 정기청소 ──
     사진 원본이 1586px 라 통을 넓히면 사진이 화면을 잡아먹는다. 높이로 잘라 둔다 */
  /* ⚠️ 사진·글 블록은 780px 로 묶어 한 줄로 세운다. 격자(reg-plans·reg-cols)만 통 전체를 쓴다 —
     같은 칸 안에서 시작점이 제각각이면 그것만으로 흐트러져 보인다 */
  .reg-shot { max-width: 780px; }
  .reg-shot img { max-height: 380px; object-fit: cover; }
  .reg-head { padding: 28px 30px; max-width: 780px; }
  .reg-head-t { font-size: 27px; }
  .reg-head-d { font-size: 15px; }
  .reg-safe, .reg-why, .reg-free, .reg-when, .reg-extra, .reg-cols { max-width: 780px; }
  /* ⚠️ 「이건 하지 않습니다」 카드는 목록이 비면 app.js 가 통째로 감춘다(hidden).
     그때 2열 격자는 «빈 칸 하나»를 그대로 남긴다 — 지금이 정확히 그 상태다.
     flex 로 두면 감춰진 카드가 흐름에서 빠져 남은 카드가 폭을 다 쓴다.
     두 장이 다 살아나면 자동으로 반씩 나눠 가진다 */
  .reg-cols { display: flex; flex-wrap: wrap; }
  .reg-cols > .reg-card { flex: 1 1 320px; }
  .reg-cta .btn { margin-left: auto; margin-right: auto; }

  /* ── 푸터 ── */
  footer { font-size: 14.5px; }
  footer .fl { font-size: 17px; }

  /* ── 하단 고정 바 ──
     통을 따라 880px 로 벌어지면 버튼 두 개가 화면을 가로지른다. 여기만 따로 잡는다 */
  .cta-in { max-width: 620px; }

  /* 견적서 미리보기 — PC 에서 420px 는 글씨가 안 읽힌다 */
  .sheet-in { max-width: 560px; }
}

/* ── 더 큰 화면 ─────────────────────────────────────────────
   격자에만 폭을 더 준다. 줄글 상한(46em)은 위에서 이미 걸려 있다 */
@media (min-width: 1200px) {
  :root { --max: 1120px; }
  .hero { gap: 52px; }
  .hero-img { height: 470px; }
  .hero h1 { font-size: 44px; }
  .gal { gap: 14px; }
  .inc { column-gap: 56px; }

  /* ★ 견적기 — 제목을 왼쪽에 세우고 계산기를 오른쪽에 둔다.
     1120px 통 안에 640px 카드만 놓으면 그 칸만 다시 「휑」해진다.
     ⚠️ #quote > .wrap 의 자식은 h2 · p.lead · div.quoter 셋뿐이라 영역 이름으로 배치된다.
        HTML 은 손대지 않았고 견적기 내부(단계·버튼·data- 속성)도 그대로다 */
  #quote > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    /* ⚠️ 행을 명시하지 않으면 두 행에 걸친 계산기의 높이가 «두 행에 나뉘어» 들어가
       1행이 부풀고 부제가 화면 한가운데로 떠내려간다. 3행을 두고 남는 높이는 3행이 먹는다 */
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "t q" "l q" ".  q";
    column-gap: 56px;
  }
  #quote > .wrap > h2     { grid-area: t; }
  #quote > .wrap > .lead  { grid-area: l; align-self: start; }
  #quote > .wrap > .quoter { grid-area: q; max-width: 720px; }
}

/* ══ 카카오톡 상담 떠다니는 버튼 (2026-08-26 오너 지시) ══════════════════
   · 우하단 고정, 하단 고정 바(.cta) «위». 바 높이는 app.js 가 재서 --cta-h 에 넣는다(기본 76px = 10+56+10).
   · 카카오 노랑 #FEE500 + 검정 말풍선 심볼(색·비율 고정) + 라벨 「카톡 상담」.
   · 시트(폼·견적서 이미지)가 열려 있으면 감춘다 — 입력 칸·닫기 버튼을 덮지 않게.
     :has 를 못 읽는 옛 브라우저를 위해 app.js 가 body.sheet-open 도 같이 켠다.
   · z-index 70 = 고정 바(60) 위 · 시트(90) 아래. */
.kakao-fab {
  position: fixed; right: 16px;
  bottom: calc(var(--cta-h, 76px) + 12px + env(safe-area-inset-bottom));
  z-index: 70;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 58px; height: 58px; border-radius: 50%;
  background: #FEE500; color: #191919; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kakao-fab-ico { display: block; width: 26px; height: 26px; }
.kakao-fab-txt { font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: -.2px; }
@media (hover: hover) { .kakao-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.26); } }
.kakao-fab:active { transform: scale(.96); }
.kakao-fab:focus-visible { outline: 3px solid var(--point); outline-offset: 3px; }
body:has(.sheet.on) .kakao-fab, body.sheet-open .kakao-fab { display: none; }
/* 2026-08-26 결과 화면(5단계)에서는 감춘다 — 「합계 380,000원」 숫자를 가렸다(4팀 실측). 결과 화면에는 제 카톡 버튼이 있다 */
body.on-result .kakao-fab { display: none; }
@media (prefers-reduced-motion: reduce) { .kakao-fab, .kakao-fab:hover, .kakao-fab:active { transition: none; transform: none; } }
@media print { .kakao-fab, .cta { display: none !important; } }