/* 범홈클린
 *
 * 색과 조형을 로고에서 그대로 가져옵니다.
 *   색  — 청록 #008E97, 주황 #F58220
 *   조형 — 네모 넷이 2×2 로 어긋나게 물린 형태
 *
 * 그 어긋난 네모를 제목 표식(.mk)·번호·강조에 되풀이합니다. 장식을 새로
 * 지어내는 것보다 이미 있는 것을 반복하는 편이 업체 것처럼 보입니다.
 *
 * 모서리는 3px. 알약 단추와 크게 둥근 카드는 어느 사이트에나 있어서
 * 업체 성격이 안 드러납니다. 로고가 각졌으니 화면도 각지게 둡니다.
 */

:root {
  --teal:      #008E97;
  --teal-dk:   #00707a;
  --teal-dp:   #04353a;   /* 히어로·꼬리말 바탕 */
  --orange:    #F58220;
  --orange-dk: #d96c11;
  --ink:       #16191b;
  --ink-2:     #4d565b;
  --ink-3:     #7b858a;
  --line:      #e3e7e9;
  --wash:      #f4f7f8;
  --r:         3px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: #fff;
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, "Malgun Gothic", sans-serif;
  letter-spacing: -0.014em;    /* 한글은 살짝 좁혀야 덜 성깁니다 */
  line-height: 1.72;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 56px;         /* 하단 고정 전화바 자리 */
}

h1, h2, h3 { margin: 0; letter-spacing: -0.035em; word-break: keep-all; line-height: 1.26; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--teal-dk); }
img { max-width: 100%; display: block; }
strong { font-weight: 800; }

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.2rem; }
.sec  { padding: 3.4rem 0; }

.skip { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: .7rem 1.1rem; }
.skip:focus { left: 0; top: 0; z-index: 100; }

/* ── 로고에서 가져온 네모 넷 ─────────────────────────────────── */
.mk {
  display: inline-grid; grid-template-columns: repeat(2, 7px); gap: 2px;
  margin-right: .55rem; transform: translateY(-2px);
}
.mk i { display: block; width: 7px; height: 7px; }
.mk i:nth-child(1) { background: var(--teal); }
.mk i:nth-child(2) { background: var(--orange); transform: translateY(3px); }
.mk i:nth-child(3) { background: var(--orange); }
.mk i:nth-child(4) { background: var(--teal); transform: translateY(3px); }

/* ── 머리말 ─────────────────────────────────────────────────── */
.head { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--line); }
.head__in {
  max-width: 62rem; margin: 0 auto; padding: .5rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.head__brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); }
.head__logo { width: 26px; height: auto; }
.head__name { font-weight: 800; font-size: 1.02rem; letter-spacing: -0.04em; }
.head__tel {
  font-weight: 800; font-size: .98rem; color: #fff; background: var(--orange);
  text-decoration: none; padding: .42rem .8rem; border-radius: var(--r);
  font-variant-numeric: tabular-nums;
}
.head__tel:hover { background: var(--orange-dk); }

/* ── 첫 화면 ─────────────────────────────────────────────────
 * 좁은 화면에서는 사진과 글을 **위아래로 나눕니다.**
 * 세로 사진 위에 글을 얹으면 정작 사람이 글자 뒤로 들어가고, 사진을 흐리게
 * 깔면 사진도 글자도 같이 죽습니다. 사진은 사진대로 보여 주는 편이 낫습니다.
 * 넓은 화면에서는 가로로 잘라 둔 사진을 쓰므로 그때만 겹칩니다.
 */
.hero { background: var(--teal-dp); color: #fff; overflow: hidden; }
.hero__photo { display: block; }
/* <picture> 가 높이를 안 물려주면 안쪽 img 의 height:100% 가 무시되고
   원본 비율로 퍼져서 히어로 밖으로 삐져나옵니다. 실제로 그렇게 깨졌습니다. */
.hero__photo picture { display: block; width: 100%; height: 100%; }
.hero__photo img {
  width: 100%; display: block;
  /* 화면 높이에 맞춰 잘립니다. 안 그러면 세로 사진이 화면을 다 먹고
     아래 띠가 첫 화면에서 잘려 나갑니다. */
  height: 44vh; min-height: 15rem; object-fit: cover; object-position: 50% 30%;
}
.hero__in { max-width: 62rem; margin: 0 auto; padding: 1.3rem 1.2rem 1.5rem; }
.hero__eyebrow {
  display: flex; align-items: center;
  font-size: .84rem; font-weight: 700; color: #a8d9dd;
  margin-bottom: .7rem;
}
.hero__title { font-size: clamp(1.95rem, 9vw, 3.8rem); font-weight: 800; letter-spacing: -0.045em; }
.hero__lead { margin-top: .75rem; max-width: 28rem; color: #bcd8db; font-size: .99rem; }
.hero__cta { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: .55rem; }

.hero__strip {
  /* 좁은 화면에서는 2열 + 마지막(출장 범위)이 한 줄을 다 씁니다.
     «서울·경기·인천» 은 3등분한 칸에서 두 줄로 접혀 아랫글이 어긋납니다. */
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.16);
  max-width: 62rem; margin: 0 auto;
}
.hero__strip li { padding: .8rem 1.2rem; border-right: 1px solid rgba(255,255,255,.12); }
.hero__strip li:last-child {
  grid-column: 1 / -1; border-right: none;
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero__strip b { display: block; font-size: 1rem; font-weight: 800; color: var(--orange); letter-spacing: -0.03em; }
.hero__strip span { display: block; font-size: .76rem; color: #92b7bb; letter-spacing: -0.02em; }

/* ── 단추 ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 800; text-decoration: none; cursor: pointer;
  border: none; border-radius: var(--r); padding: .82rem 1.5rem;
  font-variant-numeric: tabular-nums;
}
.btn--call { background: var(--orange); color: #fff; font-size: 1.12rem; }
.btn--call:hover { background: var(--orange-dk); }
.btn--ghost { background: rgba(255,255,255,.07); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.btn--ghost:hover { background: rgba(255,255,255,.16); }
.btn--wide { width: 100%; }
.btn--copy { width: 100%; margin-top: .5rem; background: var(--wash); color: var(--teal-dk); box-shadow: inset 0 0 0 1px var(--line); font-size: 1rem; }
.btn--copy:hover { background: #e9eef0; }

/* ── 제목 ───────────────────────────────────────────────────── */
.h2 { display: flex; align-items: center; font-size: clamp(1.45rem, 5.4vw, 2.05rem); font-weight: 800; }
.h2--light { color: #fff; }
.sub { margin-top: .45rem; color: var(--ink-2); font-size: .96rem; }

/* ── 사진 공통 ──────────────────────────────────────────────── */
.shot { margin: 0; position: relative; }
.shot img { width: 100%; object-fit: cover; border-radius: var(--r); background: var(--wash); }
.shot[data-label]::after {
  content: attr(data-label);
  position: absolute; left: 0; bottom: 0;
  background: var(--teal-dp); color: #fff;
  font-size: .76rem; font-weight: 800; letter-spacing: -0.02em;
  padding: .28rem .6rem; border-radius: 0 var(--r) 0 var(--r);
}
.shot[data-label="청소 후"]::after { background: var(--orange); }

/* ── 장면 ────────────────────────────────────────────────────
 * **사진 위에 글을 얹는 한 덩어리입니다.** 히어로는 «사진 + 그 아래 패널»
 * 구조라, 여기까지 같은 구조로 만들면 첫 화면이 두 번 나온 것처럼 보입니다.
 * 실제로 한 번 그렇게 만들었다가 걷어냈습니다. 구조를 일부러 다르게 둡니다.
 */
.stage {
  position: relative; isolation: isolate;
  background: var(--teal-dp); color: #fff;
  display: flex; align-items: flex-end;
  min-height: 26rem;
}
.stage__photo { position: absolute; inset: 0; z-index: -2; }
.stage__photo img { width: 100%; height: 100%; object-fit: cover; }
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(4,53,58,.96) 30%, rgba(4,53,58,.62) 62%, rgba(4,53,58,.2) 100%);
}
.stage__in { width: 100%; padding-top: 2.4rem; padding-bottom: 2.4rem; }
.stage__kicker {
  display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--teal-dp); background: #fff; padding: .22rem .6rem; margin-bottom: .85rem;
}
.stage__title { font-size: clamp(1.85rem, 8vw, 3rem); font-weight: 800; letter-spacing: -0.045em; }
.stage__lead { margin-top: .85rem; max-width: 32rem; color: #c6dee0; font-size: 1rem; }
.stage__lead strong { color: #fff; }
.stage .btn { margin-top: 1.4rem; }

/* ── 장면 사이 전화 띠 ──────────────────────────────────────
 * 손님은 끝까지 안 내려갑니다. 마음이 움직인 자리에서 바로 걸 수 있게 둡니다.
 */
.cut {
  background: var(--teal); color: #fff;
  padding: 1.6rem 1.2rem; text-align: center;
}
.cut p { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.03em; }
.cut .btn { margin-top: .9rem; }
.cut .btn--call { background: #fff; color: var(--teal-dk); }
.cut .btn--call:hover { background: #eef6f7; }

/* ── 큰 제목 ────────────────────────────────────────────────── */
.eyebrow {
  display: flex; align-items: center;
  font-size: .87rem; font-weight: 700; color: var(--teal-dk); margin-bottom: .7rem;
}
.big { font-size: clamp(1.75rem, 7.4vw, 2.7rem); font-weight: 800; letter-spacing: -0.045em; }
.big em { font-style: normal; color: var(--orange); }

/* ── 폭로 ───────────────────────────────────────────────────── */
.reveal__why { margin-top: 1rem; max-width: 36rem; color: var(--ink-2); font-size: 1.02rem; }
.reveal__why strong { color: var(--ink); }
.reveal__in { margin-top: 1.8rem; display: grid; gap: 1.6rem; }
.reveal__lead { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.035em; }
.reveal__txt > p + p { margin-top: .65rem; color: var(--ink-2); }
.reveal__txt strong { color: var(--ink); }
.shot--fan { max-width: 17rem; }
.pair { margin-top: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }

/* ── 안심 ───────────────────────────────────────────────────── */
.trust { background: var(--wash); }
.trust__list { margin-top: 1.8rem; display: grid; gap: .1rem; }
.trust__list li {
  background: #fff; padding: 1.15rem 1.2rem;
  border-left: 4px solid var(--teal);
}
.trust__list li:nth-child(even) { border-left-color: var(--orange); }
.trust__list b { display: block; font-size: 1.08rem; font-weight: 800; letter-spacing: -0.03em; }
.trust__list p { margin-top: .35rem; color: var(--ink-2); font-size: .95rem; }

/* ── 신뢰 배지 ──────────────────────────────────────────────
 * 히어로 바로 아래. 손님이 «여기 믿을 만한가» 를 판단하는 자리입니다.
 * 넣을 수 있는 건 **확인된 사실뿐**입니다. 자격증·보험은 아직 못 받았습니다.
 */
.badges { background: var(--ink); color: #fff; }
.badges__in { display: grid; grid-template-columns: 1fr 1fr; }
.badges__in li { padding: .85rem 0; }
.badges__in li:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.12); padding-right: .8rem; }
.badges__in li:nth-child(even) { padding-left: .8rem; }
.badges__in li:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
.badges b { display: block; font-size: .97rem; font-weight: 800; letter-spacing: -0.03em; }
.badges b::before { content: "✓"; color: var(--orange); margin-right: .3rem; font-weight: 800; }
.badges span { display: block; font-size: .78rem; color: #9aa3a8; letter-spacing: -0.02em; }

/* ── 시공 이력 ───────────────────────────────────────────────
 * 지어낸 «실시간 문의» 대신 실제로 한 일만 줄 단위로 놓습니다.
 * 한 줄에 다 들어가야 «훑는» 맛이 납니다. 문단으로 풀지 마세요.
 */
.works__list { margin-top: 1.3rem; border-top: 2px solid var(--ink); }
.works__i {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem;
  padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: .95rem;
}
.works__ym { font-weight: 800; color: var(--teal-dk); font-variant-numeric: tabular-nums; }
.works__area { font-weight: 700; }
.works__place {
  font-size: .76rem; font-weight: 800; color: #fff; background: var(--ink-2);
  padding: .08rem .4rem; border-radius: 2px;
}
.works__what { color: var(--ink-2); }
.works__days { margin-left: auto; color: var(--ink-3); font-size: .85rem; }

/* ── 세제 ────────────────────────────────────────────────────
 * app/eco.php 의 product 가 비면 화면에 아예 안 나옵니다.
 * 뱃지 칸(.eco__points)에는 **세제 통 라벨에 인쇄된 것만** 옮겨 적습니다.
 * 받지 않은 인증을 여기 달면 표시광고법 위반입니다.
 */
/* 위(안심)도 아래(가격)도 --wash 라, 여기까지 --wash 로 두면 세 구획이
   한 덩어리로 흘러 경계가 사라집니다. 흰 바탕으로 사이를 끊습니다. */
.eco { background: #fff; }
.eco__lead { max-width: 34em; }

.eco__list { margin-top: 1.6rem; display: grid; gap: 1rem; }
.eco__item {
  background: var(--wash); padding: 1.2rem 1.3rem;
  border-top: 3px solid var(--teal);
}
.eco__item:nth-child(even) { border-top-color: var(--orange); }

.eco__name b { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.03em; }
.eco__name span { margin-left: .5rem; font-size: .82rem; color: var(--ink-3); }
.eco__use { margin-top: .2rem; font-size: .9rem; color: var(--ink-2); }

.eco__points { margin-top: .9rem; display: grid; gap: .45rem; }
.eco__points li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem;
  padding-left: 1.1rem; position: relative;
}
.eco__points li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--teal); font-weight: 800; font-size: .9rem;
}
.eco__points b { font-size: .95rem; font-weight: 700; letter-spacing: -0.03em; }
/* 근거·출처. 표기를 옮겼을 뿐이라는 걸 숨기지 않습니다 — 그게 신뢰를 만듭니다. */
.eco__points span { font-size: .78rem; color: var(--ink-3); }

.eco__note {
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--ink-2);
}

/* ── 견적 신청 ──────────────────────────────────────────────
 * 전화만 두면 밤에 본 사람을 통째로 놓칩니다. 칸은 최소로 — 늘릴수록 안 씁니다.
 */
.apply { background: var(--teal-dp); color: #fff; }
.apply .h2, .apply .sub { color: #fff; }
.apply .sub { color: #bcd8db; }
.apply__form { margin-top: 1.4rem; display: grid; gap: .9rem; }
.fld { display: block; border: none; padding: 0; margin: 0; }
.fld > span { display: block; font-size: .88rem; font-weight: 700; margin-bottom: .35rem; color: #d7eaec; }
.fld > span em { font-style: normal; color: var(--orange); margin-left: .15rem; }
.fld input[type="text"], .fld input[type="tel"], .fld textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: none; border-radius: var(--r); padding: .7rem .8rem;
}
.fld textarea { resize: vertical; }
.fld input:focus-visible, .fld textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; }
.fld small { display: block; margin-top: .3rem; font-size: .8rem; color: #8fb4b8; }
.apply .chips label span { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); color: #d7eaec; }
.apply .chips input:checked + span { background: var(--orange); box-shadow: none; color: #fff; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.apply__msg { margin-top: .7rem; font-weight: 700; font-size: .95rem; min-height: 1.3em; }
.apply__msg.is-ok { color: #7fe3a0; }
.apply__msg.is-bad { color: #ffb38a; }
.apply__fine { margin-top: .5rem; color: #8fb4b8; font-size: .82rem; }
.apply .btn--call:disabled { opacity: .6; cursor: default; }

/* ── 가격 ───────────────────────────────────────────────────── */
.price { background: var(--wash); }
.board { margin-top: 1.5rem; }
.board__i { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.board__i:first-child { border-top: 2px solid var(--ink); }
.board__top { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.board__n { font-weight: 700; font-size: 1.06rem; letter-spacing: -0.03em; }
.board__tag {
  display: inline-block; margin-left: .45rem; vertical-align: 2px;
  font-style: normal; font-size: .7rem; font-weight: 800; letter-spacing: -0.02em;
  color: #fff; background: var(--teal); padding: .1rem .4rem; border-radius: 2px;
}
.board__p {
  font-weight: 800; font-size: clamp(1.5rem, 6.4vw, 1.95rem); letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.1;
}
.board__p small { font-size: .5em; font-weight: 700; margin-left: .08em; color: var(--ink-2); }
.board__note { margin-top: .15rem; color: var(--ink-2); font-size: .87rem; max-width: 30rem; }

/* 할인 안내. 대량이 주력이라 단서 목록에 묻히면 안 됩니다. */
.disc {
  margin-top: 1.4rem; padding: 1.3rem 1.4rem;
  background: #fff; border-left: 4px solid var(--orange); border-radius: var(--r);
  display: grid; gap: .4rem; align-items: center;
}
.disc__h { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.03em; }
.disc__b { margin: 0; color: var(--ink-2); font-size: .94rem; max-width: 34rem; }
.disc__btn { justify-self: start; margin-top: .5rem; }

.fine { margin-top: 1.3rem; color: var(--ink-3); font-size: .85rem; line-height: 1.6; }
.fine li { padding-left: .85rem; position: relative; margin-top: .35rem; }
.fine li::before { content: ""; position: absolute; left: 0; top: .62em; width: 4px; height: 4px; background: var(--teal); }

/* ── 증거 ───────────────────────────────────────────────────── */
.proof__in { margin-top: 1.5rem; display: grid; gap: 1.5rem; }
.shot--fan { max-width: 17rem; }
.proof__lead { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.45; }
.proof__txt > p + p { margin-top: .6rem; color: var(--ink-2); }
.pair { margin-top: 1.3rem; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }

/* ── 작업 방식 ──────────────────────────────────────────────── */
.how__row { margin-top: 2rem; display: grid; gap: 1.1rem; align-items: center; }
.how__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; background: var(--teal); color: #fff;
  font-size: .85rem; font-weight: 800; margin-bottom: .55rem;
}
.how__txt h3 { font-size: 1.2rem; font-weight: 800; }
.how__txt p { margin-top: .5rem; color: var(--ink-2); }
.how__eco {
  margin-top: .9rem !important; color: var(--ink) !important;
  background: var(--wash); border-left: 3px solid var(--orange);
  padding: .7rem .9rem; font-size: .94rem;
}

/* ── 자가진단 ───────────────────────────────────────────────── */
.quiz { margin-top: 1.4rem; display: grid; gap: .8rem; }
.quiz__q { border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; margin: 0; }
.quiz__q legend { font-weight: 700; padding: 0 .3rem; letter-spacing: -0.03em; }
.opts { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.opts label { cursor: pointer; }
.opts input { position: absolute; opacity: 0; width: 0; height: 0; }
/* 흰 바탕에 1px 테두리만 두면 «누르는 것» 으로 안 보입니다.
   바탕을 깔고 높이를 44px 로 잡습니다 — 손가락으로 누르는 칸의 최소치입니다. */
.opts span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .4rem 1rem; border-radius: var(--r);
  background: var(--wash); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2); font-size: .93rem; font-weight: 600;
  transition: box-shadow .12s, color .12s, background .12s;
}
.opts label:hover span {
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--teal); color: var(--ink);
}
.opts input:checked + span {
  background: var(--teal); box-shadow: none; color: #fff;
}
.opts input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.quiz__hint { margin-top: .2rem; color: var(--ink-3); font-size: .86rem; }

.result { margin-top: 1.2rem; border-radius: var(--r); padding: 1.4rem; background: var(--teal-dp); color: #fff; }
.result__bar { height: 6px; background: rgba(255,255,255,.2); overflow: hidden; }
.result__bar span { display: block; height: 100%; width: 0; background: var(--orange); transition: width .5s ease; }
.result__t { margin-top: 1rem; font-size: 1.25rem; font-weight: 800; }
.result__d { margin-top: .45rem; color: #c3dde0; font-size: .97rem; }
.result .btn { margin-top: 1.1rem; }
.result__fine { margin-top: .7rem; color: #8fb4b8; font-size: .82rem; }

/* ── 견적 ───────────────────────────────────────────────────── */
.quote { background: var(--wash); }
.calc { margin-top: 1.3rem; background: #fff; border-radius: var(--r); padding: 0 1.1rem; box-shadow: inset 0 0 0 1px var(--line); }
.calc__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.calc__row:last-child { border-bottom: none; }
.calc__name { display: block; font-weight: 700; letter-spacing: -0.03em; }
.calc__unit { display: block; color: var(--ink-3); font-size: .84rem; font-variant-numeric: tabular-nums; }
.stepper { display: flex; align-items: center; gap: .25rem; }
.stepper__b {
  width: 40px; height: 40px; border-radius: var(--r); cursor: pointer;
  border: none; box-shadow: inset 0 0 0 1px var(--line); background: #fff; color: var(--teal-dk);
  font-size: 1.3rem; font-weight: 700; line-height: 1;
}
.stepper__b:hover { box-shadow: inset 0 0 0 1.5px var(--teal); background: var(--wash); }
.stepper__b:disabled { opacity: .28; cursor: default; }
.stepper__v { min-width: 2.1rem; text-align: center; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.quote__out { margin-top: 1rem; background: #fff; border-radius: var(--r); padding: 1.4rem; box-shadow: inset 0 0 0 2px var(--teal); }
.quote__sum { font-weight: 700; color: var(--ink-2); font-size: .95rem; }
.quote__price { margin-top: .2rem; font-size: clamp(1.8rem, 8vw, 2.4rem); font-weight: 800; letter-spacing: -0.045em; color: var(--teal-dk); font-variant-numeric: tabular-nums; line-height: 1.15; }
.quote__out .btn--call { margin-top: .9rem; }
.quote__fine { margin-top: .7rem; color: var(--ink-3); font-size: .82rem; }

/* ── 자주 묻는 것 ───────────────────────────────────────────
 * <details> 를 씁니다. 접혀 있어도 본문은 HTML 안에 그대로 있어서
 * 검색엔진과 AI 가 다 읽습니다. 자바스크립트로 감추면 그게 안 됩니다.
 */
.faq { background: #fff; }
.faq__list { margin-top: 1.4rem; border-top: 2px solid var(--ink); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .95rem 0; cursor: pointer; list-style: none;
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::before {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: .55em;
  background: var(--teal); transition: background .15s ease;
}
.faq__i[open] summary::before { background: var(--orange); }
.faq__i summary h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.03em; }
.faq__i summary:hover h3 { color: var(--teal-dk); }
.faq__i > p { padding: 0 0 1.05rem 1.7rem; color: var(--ink-2); max-width: 42rem; }

/* ── 출장 범위 ──────────────────────────────────────────────── */
.area__in { display: grid; gap: 1.4rem; }
.area__txt p { margin-top: .75rem; color: var(--ink-2); }
.area__note { color: var(--ink) !important; font-weight: 700; }
.area__txt .btn { margin-top: 1.2rem; }
.area__shot { max-width: 17rem; }

/* ── 꼬리말 ─────────────────────────────────────────────────── */
.foot { background: var(--teal-dp); color: #8fb4b8; padding: 2.6rem 0; text-align: center; }
.foot__logo { width: 14rem; height: auto; margin: 0 auto; background: #fff; padding: .8rem 1rem; border-radius: var(--r); }
.foot__tel { margin-top: 1.2rem; font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.foot__tel a { color: var(--orange); text-decoration: none; }
.foot__area { margin-top: .25rem; font-size: .91rem; }
.foot__copy { margin-top: 1.4rem; font-size: .81rem; opacity: .55; }
.foot__admin { margin-top: .35rem; }
.foot__admin a { color: #5d8388; font-size: .79rem; text-decoration: none; }

/* ── 하단 고정 전화바 ───────────────────────────────────────── */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  height: 52px; background: var(--orange); color: #fff;
  font-weight: 700; text-decoration: none; font-size: .95rem;
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar strong { font-size: 1.08rem; font-variant-numeric: tabular-nums; }

/* ── 넓은 화면 ──────────────────────────────────────────────── */
@media (min-width: 46rem) {
  .sec { padding: 4.6rem 0; }
  /* 여기서부터는 가로로 잘라 둔 사진이라 글을 얹어도 사람이 안 가려집니다. */
  .hero { position: relative; isolation: isolate; }
  .hero__photo { position: absolute; inset: 0; z-index: -2; }
  .hero__photo img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 38%; }
  /* 글자는 화면 폭의 47% 에서 끝납니다(가장 긴 것이 본문 한 줄).
     거기까지는 어둡게 유지하고 그 뒤부터 빠르게 걷어, 사장님이 찍은 사진이
     오른쪽에서 보이게 합니다. 47% 지점 불투명도 .69 → 흰 글자 대비 약 5:1
     (사진이 가장 밝은 흰색일 때 기준)로 AA 를 넘깁니다. */
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(to right,
        rgba(4,53,58,.92) 0%,
        rgba(4,53,58,.88) 32%,
        rgba(4,53,58,.62) 52%,
        rgba(4,53,58,.06) 92%),
      linear-gradient(to top, rgba(4,53,58,.72), rgba(4,53,58,0) 45%);
  }
  .hero__in { padding: 7rem 1.2rem 4rem; }
  .hero__lead { font-size: 1.07rem; }
  .hero__strip { position: relative; grid-template-columns: repeat(3, 1fr); }
  .hero__strip li { padding: 1.1rem 1.2rem; }
  .hero__strip li:last-child { grid-column: auto; border-top: none; }
  .hero__strip b { font-size: 1.14rem; }

  .board { columns: 2; column-gap: 3rem; }
  .board__i { break-inside: avoid; }
  .board__i:first-child { border-top: 2px solid var(--ink); }
  .board__i:nth-child(4) { border-top: 2px solid var(--ink); }

  .proof__in { grid-template-columns: 17rem 1fr; gap: 2.4rem; align-items: start; }
  .how__row { grid-template-columns: 19rem 1fr; gap: 2.2rem; }
  .how__row--flip { grid-template-columns: 1fr 19rem; }
  .how__row--flip .shot { order: 2; }
  .reveal__in { grid-template-columns: 17rem 1fr; gap: 2.4rem; align-items: start; }
  /* 약품 구획이 살아나면 여기는 3항목이 됩니다. 2열로 두면 오른쪽 아래가 빕니다.
     3개면 3열, 4개면 2×2 — 개수에 따라 맞춥니다. */
  .trust__list { grid-template-columns: repeat(3, 1fr); gap: .1rem; }
  .trust__list:has(li:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
  .eco__list { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .badges__in { grid-template-columns: repeat(4, 1fr); }
  .badges__in li:nth-child(-n+2) { border-bottom: none; }
  .badges__in li { padding: 1.1rem .9rem; border-right: 1px solid rgba(255,255,255,.12); }
  .badges__in li:nth-child(odd) { padding-right: .9rem; }
  .badges__in li:nth-child(even) { padding-left: .9rem; }
  .badges__in li:last-child { border-right: none; }
  .apply__form { grid-template-columns: 1fr 1fr; }
  .apply__form > *:nth-child(4), .apply__form > *:nth-child(5),
  .apply__form > button, .apply__form > .apply__msg, .apply__form > .apply__fine { grid-column: 1 / -1; }

  .stage { min-height: 32rem; align-items: center; }
  .stage::before {
    background: linear-gradient(100deg, rgba(4,53,58,.95) 38%, rgba(4,53,58,.58) 76%, rgba(4,53,58,.2) 100%);
  }
  .stage__in { padding-top: 4rem; padding-bottom: 4rem; }
  .cut { padding: 2.2rem 1.2rem; display: flex; align-items: center; justify-content: center; gap: 1.4rem; }
  .cut .btn { margin-top: 0; }
  .bulk { padding: 5rem 0; }
  .area__in { grid-template-columns: 17rem 1fr; align-items: center; gap: 2.6rem; }
}

@media (min-width: 58rem) {
  .callbar { display: none; }
  body { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}