/* ============================================================
   두리종합에어컨설비 — style.css (v0.2, 클로드 디자인 v3 기반)
   규칙: 아래 토큰에 없는 숫자는 쓰지 않는다 (CLAUDE.md)
   ============================================================ */

:root {
  /* 글자 크기 8단계 */
  --fs-12: 12px;  --fs-14: 14px;  --fs-16: 16px;  --fs-18: 18px;
  --fs-22: 22px;  --fs-28: 28px;  --fs-36: 36px;  --fs-48: 48px;

  /* 간격 — 8의 배수만 (4는 최소 단위) */
  --sp-4: 4px;    --sp-8: 8px;    --sp-12: 12px;  --sp-16: 16px;
  --sp-24: 24px;  --sp-32: 32px;  --sp-48: 48px;  --sp-64: 64px;

  /* 모서리 3종 */
  --r-8: 8px;  --r-16: 16px;  --r-pill: 999px;

  /* 그림자 2종 */
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-strong: 0 12px 32px rgba(0, 40, 100, 0.35);

  /* 버튼·터치 높이 (8의 배수) */
  --h-40: 40px;  --h-48: 48px;  --h-56: 56px;  --h-64: 64px;

  /* 색 */
  --bg: #000000;          /* 어두운 섹션 바탕 */
  --surface: #13151b;     /* 어두운 섹션 안의 카드 */
  --surface-2: #1b1e26;   /* 카드보다 한 단계 밝게 */
  --paper: #ffffff;       /* 밝은 섹션 바탕 */
  --paper-soft: #f3f5f8;  /* 밝은 섹션 안의 카드 */
  --ink: #111111;         /* 밝은 섹션 글자 */
  --muted-dark: #a0a3ad;  /* 어두운 섹션 보조 글자 */
  --muted-light: #5b6675; /* 밝은 섹션 보조 글자 */
  --line-dark: rgba(255, 255, 255, 0.08);
  --line-light: #e3e8ef;

  --brand: #3182f6;       /* 브랜드 파랑 — 라벨·강조·하단바 전화 */
  --brand-deep: #1f6ad8;
  --brand-light: #4a9bff;
  --navy: #0f2a5c;        /* 가격 카드, 노랑 위 글자 */
  --call: #ffd23f;        /* 히어로·상담의 큰 전화 버튼 */
  --call-hover: #ffc51a;
  --kakao: #fee500;       /* 카카오 공식 노랑 — 카톡 버튼 전용 */
  --kakao-ink: rgba(0, 0, 0, 0.85);  /* 카카오 공식 글자색 (검정 85%) */
  --kakao-hover: #f0d800;

  --bar: 72px;            /* 하단 고정 전화바가 차지하는 높이 */
}

/* ---------- 기본 ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: #fff;
  font-family: "Pretendard Variable", Pretendard, -apple-system, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: var(--fs-16);
  line-height: 1.6;
  word-break: keep-all;
  text-wrap: pretty;   /* 줄 끝에 낱말 하나만 떨어지는 것 방지 (미지원 브라우저는 무시) */
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--bar);
}

img { max-width: 100%; display: block; }
h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
svg { flex: none; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.page { max-width: 480px; margin: 0 auto; min-height: 100vh; }

.sec { padding: var(--sp-48) var(--sp-16); }
.sec.light { background: var(--paper); color: var(--ink); }
.sec.dark  { background: var(--bg); }

.eyebrow {
  text-align: center;
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-8);
}
/* 밝은 바탕에서는 한 단계 진한 파랑 — 작은 글씨라 대비 기준(4.5:1)을 넘겨야 한다 */
.light .eyebrow { color: var(--brand-deep); }

.sec-title {
  text-align: center;
  font-size: var(--fs-28);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-bottom: var(--sp-24);
}
.hl { color: var(--brand); }   /* 제목 안 파란 강조 글자 */
.sec-title.tight { margin-bottom: var(--sp-8); }   /* 바로 아래 한 줄 설명이 붙을 때 */

.sec-lead { text-align: center; color: var(--muted-dark); margin-bottom: var(--sp-24); }
.light .sec-lead { color: var(--muted-light); }

/* 버튼 공통 */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  font-weight: 700;
  border-radius: var(--r-pill);
}
.btn-call {          /* 노랑 큰 전화 버튼 */
  background: var(--call);
  color: var(--navy);
  height: var(--h-64);
  font-size: var(--fs-28);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-strong);
}
.btn-call:hover { background: var(--call-hover); }
.btn-line {          /* 흰 테두리 버튼 (어두운 바탕) */
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn-line:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------- 헤더 ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-16);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-dark);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-weight: 800;
  font-size: var(--fs-16);
  letter-spacing: -0.01em;
}
.wordmark-banner {        /* 사장님 제공 로고 배너 — 흰 바탕째 둥근 상자로 */
  display: block;
  height: var(--h-40);
  border-radius: var(--r-8);
}

.hdr-call {
  background: var(--brand);
  height: var(--h-40);
  padding: 0 var(--sp-16);
  font-size: var(--fs-14);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  border-radius: var(--r-pill);
}
.hdr-num { display: none; }

/* ---------- 히어로 (계절 전환) ----------
   body class 하나로 전환한다:
   season-drain(기본·하수구) / season-ac(여름·에어컨)
   클래스가 없거나 오타여도 하수구 쪽이 나온다. */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--sp-48) var(--sp-16);
  /* 레퍼런스(사장님 제공) 스타일: 밝은 바탕 + 흐린 장비 사진 + 파란 큰 제목 */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(243, 245, 248, 0.92) 100%),
    url("img/27-hero-bg.jpg") center / cover no-repeat;
  color: var(--ink);
  text-align: center;
}
.hero-ac { display: none; }
body.season-ac .hero-drain { display: none; }
body.season-ac .hero-ac { display: block; }

.hero-kicker {
  font-size: var(--fs-16);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-16);
}
.hero h1 {
  font-size: var(--fs-36);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--brand-deep);
  margin-bottom: var(--sp-16);
}
.hero h1 mark {
  color: var(--navy);
  background: var(--call);
  padding: 0 var(--sp-12);
  border-radius: var(--r-8);
}
.hero-sub { font-size: var(--fs-18); color: var(--muted-light); margin-bottom: var(--sp-32); }
/* 기본값은 파란 히어로(내지 sub-hero) 기준 — 흰 글씨.
   메인 히어로(.hero)만 밝은 바탕이라 아래에서 회색으로 덮는다.
   ⚠️ 이 두 줄을 합치면 내지에서 회색 글씨가 파란 배경에 묻힌다 (2026-09-08 회귀 경험) */
.hero-note { font-size: var(--fs-14); color: #fff; margin-top: var(--sp-12); }
.hero .hero-note { color: var(--muted-light); }
.hero .btn-line {                       /* 밝은 바탕용 테두리 버튼 (여름 에어컨 화면의 알약들) */
  border: 1px solid var(--brand);
  color: var(--brand-deep);
  background: rgba(255, 255, 255, 0.75);
}

/* 캐릭터 + 서비스 타일 (레퍼런스의 사진·가격 타일) */
.hero-duo { margin-top: var(--sp-32); position: relative; }

/* 빙글 기울어진 긴급출동 뱃지 — 사장님 취향(아재 배너)용 포인트 */
.hero-badge {
  position: absolute;
  top: calc(-1 * var(--sp-8));
  right: 4%;
  z-index: 3;
  width: calc(var(--sp-64) + var(--sp-32));   /* 96px 원 */
  height: calc(var(--sp-64) + var(--sp-32));
  border-radius: var(--r-pill);
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: var(--fs-12);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-strong);
  transform: rotate(-8deg);
  animation: badge-wiggle 2.4s ease-in-out infinite;
}
@keyframes badge-wiggle {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(-2deg) scale(1.04); }
}
.hero-char {
  display: block;
  height: calc(var(--sp-64) * 4);            /* 256px */
  margin: 0 auto var(--sp-8);                /* 타일을 가리지 않게 겹침 없이 */
  filter: drop-shadow(0 12px 32px rgba(0, 40, 100, 0.35));
}
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}
.tile {
  display: block;
  border-radius: var(--r-8);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.tile-bar {
  display: block;
  background: var(--navy);
  color: #fff;
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: 1.35;
}
.tile-bar b { display: block; font-size: var(--fs-16); font-weight: 800; font-variant-numeric: tabular-nums; }

.chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
  margin-top: var(--sp-32);
}
.chips a {
  border-radius: var(--r-8);
  padding: var(--sp-12) var(--sp-8);
  min-height: var(--h-48);
  font-size: var(--fs-16);
  background: rgba(255, 255, 255, 0.14);
}

.hero-card-note { font-size: var(--fs-14); color: var(--muted-dark); margin-top: var(--sp-12); }   /* cases.html 오수조 설명이 씀 */

/* 전화 버튼 맥동 */
.pulse { position: relative; isolation: isolate; }
.pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--call);
  opacity: 0.5;
  z-index: -1;
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: 0.5; }
  70%  { transform: scale(1.08, 1.4); opacity: 0; }
  100% { transform: scale(1.08, 1.4); opacity: 0; }
}

/* 첫 화면 등장 */
@keyframes up { from { opacity: 0; transform: translateY(var(--sp-24)); } to { opacity: 1; transform: none; } }
.in { animation: up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.in:nth-child(2) { animation-delay: 0.08s; }
.in:nth-child(3) { animation-delay: 0.16s; }
.in:nth-child(4) { animation-delay: 0.24s; }
.in:nth-child(5) { animation-delay: 0.3s; }
.in:nth-child(6) { animation-delay: 0.38s; }
.in:nth-child(7) { animation-delay: 0.46s; }

/* 스크롤 등장 — 자바스크립트가 켜진 경우(html.js)에만 숨겼다가 보여준다 */
.js [data-reveal] { opacity: 0; transform: translateY(var(--sp-24)); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- 전/후 사진 짝 ---------- */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.pair figure { position: relative; border-radius: var(--r-16); overflow: hidden; }
.pair img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.pair img.pos-right { object-position: 75% 50%; }   /* 가로 사진에서 오른쪽 부분을 보여줄 때 */
.pair figcaption {
  position: absolute;
  left: var(--sp-8);
  top: var(--sp-8);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: var(--fs-12);
  font-weight: 700;
  padding: var(--sp-4) var(--sp-12);
  border-radius: var(--r-pill);
}
.pair .after figcaption { background: var(--brand); }

/* ---------- 숫자 스트립 ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-8);
  padding: var(--sp-24) var(--sp-16) 0;
}
.stats li {
  background: var(--surface);
  border-radius: var(--r-16);
  padding: var(--sp-16) var(--sp-4);
  text-align: center;
}
.stats b { display: block; font-size: var(--fs-28); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.stats b small { font-size: var(--fs-16); font-weight: 700; }
.stats b.hl { color: var(--brand); }
.stats span { display: block; margin-top: var(--sp-8); font-size: var(--fs-12); color: var(--muted-dark); font-weight: 600; }

/* ---------- 내시경 선언 ---------- */
.claim { text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.4); margin-top: var(--sp-24); }
.claim h2 { font-size: var(--fs-28); line-height: 1.35; letter-spacing: -0.02em; font-weight: 800; margin-bottom: var(--sp-16); }
.claim p { font-size: var(--fs-18); color: var(--muted-dark); }
.claim .claim-pair { max-width: 480px; margin: var(--sp-24) auto 0; }   /* 히어로에서 옮겨온 내시경 전/후 */
.claim-note { margin-top: var(--sp-12); font-size: var(--fs-14); color: var(--muted-dark); }

/* ---------- 신뢰 ---------- */
.trust { border-top: 1px solid rgba(255, 255, 255, 0.4); }
.trust-card {
  display: flex;
  gap: var(--sp-16);
  align-items: center;
  background: var(--surface);
  border-radius: var(--r-16);
  padding: var(--sp-16);
}
.trust-face {
  width: var(--sp-64);
  height: var(--sp-64);
  flex: none;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--muted-dark);
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
}
.trust-face img { width: 100%; height: 100%; object-fit: cover; }
.trust-name { font-weight: 800; font-size: var(--fs-18); margin-bottom: var(--sp-4); }
.trust-desc { color: var(--muted-dark); line-height: 1.5; }

/* ---------- 가격 — 한 줄에 한 항목 (모바일·데스크톱 공통) ---------- */
.price-rows { display: flex; flex-direction: column; gap: var(--sp-8); }
.price-rows li {
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-8);
  padding: var(--sp-12) var(--sp-16);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-12);
}
.price-rows span { font-size: var(--fs-16); font-weight: 700; }
.price-rows b {
  font-size: var(--fs-22);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.price-rows b small { font-size: var(--fs-14); font-weight: 600; }
.price-rows b.point { color: var(--brand-light); }   /* 교체·설비 공사의 포인트 */
.price-promise { margin-top: var(--sp-16); text-align: center; font-weight: 700; line-height: 1.5; }

/* ---------- 차별점 ---------- */
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.perks li {
  background: var(--paper-soft);
  border-radius: var(--r-16);
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.perks h3 { font-size: var(--fs-22); font-weight: 800; letter-spacing: -0.02em; }
.perks h3 .hl { color: var(--brand); }
.perks p { font-size: var(--fs-14); line-height: 1.5; color: var(--muted-light); }
.sec.perks-sec { padding-top: 0; }

/* ---------- 절차 ---------- */
.steps { display: flex; flex-direction: column; gap: var(--sp-8); }
.steps li {
  display: flex;
  gap: var(--sp-16);
  padding: var(--sp-16);
  background: var(--surface);
  border-radius: var(--r-16);
}
.steps .n {
  width: var(--sp-32);
  height: var(--sp-32);
  flex: none;
  border-radius: var(--r-pill);
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--fs-16);
}
.steps h3 { font-size: var(--fs-18); font-weight: 800; margin-bottom: var(--sp-4); }
.steps p { color: var(--muted-dark); }

/* ---------- 전/후 사례 ---------- */
.cases { display: flex; flex-direction: column; gap: var(--sp-24); }
.case-title { font-size: var(--fs-18); font-weight: 800; margin-bottom: var(--sp-8); }

/* ---------- 하는 일 ---------- */
.svc-sec { padding-bottom: 0; }
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.svc a {
  background: var(--surface-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-16);
  padding: var(--sp-16);
  min-height: var(--h-56);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.svc a:hover { border-color: rgba(255, 255, 255, 0.18); }

/* ---------- 출동 지역 ---------- */
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
.areas a { height: var(--h-48); }
.area-note { margin-top: var(--sp-16); text-align: center; color: var(--muted-dark); }

/* ---------- Q&A ---------- */
.faq { display: flex; flex-direction: column; gap: var(--sp-8); }
.faq details { background: var(--paper-soft); border-radius: var(--r-16); padding: 0 var(--sp-16); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-12);
  min-height: var(--h-56);
  font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .chev { transition: transform 0.2s; color: var(--muted-light); }
.faq details[open] .chev { transform: rotate(180deg); }
.faq details p { padding-bottom: var(--sp-16); color: var(--muted-light); }

/* ---------- 상담 ---------- */
.contact {
  background: linear-gradient(165deg, var(--brand) 0%, var(--brand-deep) 55%, var(--navy) 100%);
  text-align: center;
}
.contact h2 { font-size: var(--fs-28); line-height: 1.3; letter-spacing: -0.02em; font-weight: 800; margin-bottom: var(--sp-8); }
.contact h2 + .btn-call { margin-top: var(--sp-24); }   /* 소개 문장 없이 제목→버튼 바로 올 때 */
.contact .lead { font-size: var(--fs-18); color: #fff; margin-bottom: var(--sp-24); }
.contact-sub { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); margin-top: var(--sp-8); }
.contact-sub a { height: var(--h-48); }
.contact-hours { margin-top: var(--sp-16); font-size: var(--fs-14); color: rgba(255, 255, 255, 0.85); }
.contact-hours a { font-weight: 700; }

/* ---------- 블로그 띠 (숫자 칸 아래, 파랑 배경으로 튀게) ---------- */
.band { margin-top: var(--sp-24); padding-top: var(--sp-24); padding-bottom: var(--sp-24); background: var(--brand-deep); }
.band-in { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); text-align: center; }
.band-txt { font-size: var(--fs-18); font-weight: 700; color: #fff; }
.band-txt strong { color: var(--navy); background: #fff; border-radius: var(--r-8); padding: 0 var(--sp-8); }
.band .btn-line { height: var(--h-48); padding: 0 var(--sp-24); border-color: rgba(255, 255, 255, 0.7); }
.band-logo {
  display: inline-block;   /* 기본 규칙(img=block, 한 줄 통째)을 풀어 글자처럼 흐르게 */
  height: var(--sp-24);
  border-radius: var(--r-8);
  vertical-align: middle;
}
.nb { white-space: nowrap; }   /* 로고와 뒤 단어가 서로 떨어지지 않게 */
@media (min-width: 768px) {
  .band-in { flex-direction: row; justify-content: center; gap: var(--sp-32); }
}

/* ---------- 하단 ---------- */
.site-footer { padding: var(--sp-32) var(--sp-16); font-size: var(--fs-14); line-height: 1.7; color: var(--muted-dark); }
.site-footer strong { display: block; color: #fff; font-size: var(--fs-16); }
.site-footer a { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- 하단 고정 전화바 ---------- */
.fixbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.fixbar-in {
  width: 100%;
  max-width: 480px;
  display: grid;
  grid-template-columns: 2fr 1fr;   /* 전화번호 버튼이 넘치지 않게 카톡보다 두 배 폭 */
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12) calc(var(--sp-8) + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--line-light);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}
.fixbar-call {
  background: var(--brand);
  color: #fff;
  height: var(--h-56);
  font-size: var(--fs-22);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-soft);
}
.fixbar-call:hover { background: var(--brand-deep); }
.fixbar-kakao {
  background: var(--kakao);
  color: var(--kakao-ink);
  height: var(--h-56);
  font-weight: 800;
}
.fixbar-kakao:hover { background: var(--kakao-hover); }

/* ---------- 내지 (서비스·지역·사례 페이지) ----------
   tools/build-pages.py 가 찍어내는 페이지들이 쓰는 부품 */
.sub-hero {
  /* 흰 글씨 대비를 위해 밝은 끝을 한 단계 낮췄다 (brand-light 위 흰 글씨는 2.83:1로 미달) */
  background: linear-gradient(165deg, var(--brand) 0%, var(--brand-deep) 55%, var(--navy) 100%);
  text-align: center;
  padding-top: var(--sp-32);
}
.crumb {
  display: flex;
  justify-content: center;
  gap: var(--sp-8);
  font-size: var(--fs-14);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--sp-16);
}
.crumb a { text-decoration: underline; text-underline-offset: 0.2em; }
.sub-hero h1 {
  font-size: var(--fs-28);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-bottom: var(--sp-12);
}
.sub-hero h1 mark { color: var(--navy); background: var(--call); padding: 0 var(--sp-8); border-radius: var(--r-8); }
.sub-hero .lead { font-size: var(--fs-16); color: #fff; margin-bottom: var(--sp-24); }
.sub-hero .btn-call { font-size: var(--fs-22); height: var(--h-56); }

/* 항목 카드 목록 (증상·원인·하는 일) */
.bullets { display: flex; flex-direction: column; gap: var(--sp-8); }
.bullets li { background: var(--surface); border-radius: var(--r-16); padding: var(--sp-16); }
.light .bullets li { background: var(--paper-soft); }
.bullets b { display: block; font-size: var(--fs-18); font-weight: 800; margin-bottom: var(--sp-4); }
.bullets p { font-size: var(--fs-14); line-height: 1.5; color: var(--muted-dark); }
.light .bullets p { color: var(--muted-light); }

/* 한 줄 가격 */
.price-line { background: var(--navy); color: #fff; border-radius: var(--r-16); padding: var(--sp-16); text-align: center; }
.price-line span { display: block; font-size: var(--fs-14); font-weight: 600; opacity: 0.85; }
.price-line b { display: block; font-size: var(--fs-28); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-line b small { font-size: var(--fs-14); font-weight: 600; }

/* 본문 단락 */
.prose { color: var(--muted-dark); line-height: 1.7; }
.light .prose { color: var(--muted-light); }
.prose p + p { margin-top: var(--sp-12); }
.prose strong { color: #fff; }
.light .prose strong { color: var(--ink); }

/* 동네 이름 알약 */
.towns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8); }
.towns li { border: 1px solid var(--line-light); border-radius: var(--r-pill); padding: var(--sp-4) var(--sp-12); font-size: var(--fs-14); font-weight: 600; }

/* 사례 밑 "이 작업 보기" 링크 */
.case-link { display: inline-block; margin-top: var(--sp-8); font-size: var(--fs-14); font-weight: 700; color: var(--brand); }
.light .case-link { color: var(--brand-deep); }   /* 밝은 바탕 대비 확보 */

/* ---------- 움직임 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 큰 화면 (768px 이상) ---------- */
@media (min-width: 768px) {
  /* 하단 전화바는 큰 화면에서도 유지 — 떠 있는 알약형으로 */
  body { padding-bottom: calc(var(--bar) + var(--sp-16)); }
  .page { max-width: none; }
  .fixbar-in {
    margin-bottom: var(--sp-16);
    border: 1px solid var(--line-light);
    border-radius: var(--r-pill);
  }

  .hdr { padding: var(--sp-16) var(--sp-32); }
  .wordmark-banner { height: var(--h-48); }
  .price-rows { max-width: 768px; }   /* 한 줄 막대가 너무 길게 늘어지지 않게 */
  .hdr-num { display: inline; }
  .hdr-txt { display: none; }
  .hdr-call { font-size: var(--fs-18); height: var(--h-48); padding: 0 var(--sp-24); white-space: nowrap; }

  .sec, .stats { padding-left: var(--sp-32); padding-right: var(--sp-32); }
  .sec > *, .stats { max-width: 1100px; margin-left: auto; margin-right: auto; }

  .hero { padding-top: var(--sp-64); padding-bottom: var(--sp-64); }
  /* 레퍼런스 구조: 제목 블록 가운데, 그 아래 캐릭터(왼쪽) + 타일(오른쪽) */
  .hero h1 { font-size: var(--fs-48); }
  .hero-in .btn-call, .hero-in .chips { max-width: 420px; margin-left: auto; margin-right: auto; }
  .brm { display: none; }   /* 모바일 전용 줄바꿈은 큰 화면에서 무시 */
  .hero-duo {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--sp-48);
    align-items: end;
    margin-top: var(--sp-48);
  }
  .hero-char { height: calc(var(--sp-64) * 6 + var(--sp-32)); margin: 0; }   /* 416px — 데스크톱 여백이 휑하다는 사장님 피드백으로 확대 */
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-badge {                                /* 큰 화면: 캐릭터 머리 옆, 타일은 건드리지 않게 */
    top: 0;
    right: auto;
    left: calc(var(--sp-64) * 2 + var(--sp-32));
  }

  .sub-hero h1 { font-size: var(--fs-36); }
  .sub-hero > * { max-width: 768px; }
  .bullets { display: grid; grid-template-columns: 1fr 1fr; }
  .perks, .svc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps, .faq { display: grid; grid-template-columns: 1fr 1fr; }
  .cases { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-32); }
  .areas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}