/* service.css — 생활 서비스 9장(/service · /service/<slug>) 전용 (2026-09-15 묶음 services)
   토큰은 stage.css 의 시맨틱 이름만 쓴다(업종 색만 예외 · 아래 참조). 모바일 우선 390 → 768 → 1280 · 터치 타깃 44(--cs-hit).
   🔴 2026-09-29 세로띠 투톤 전환 — 바탕이 순백에서 **회녹 지면**(--bg-primary #fafbf9)으로 바뀌었다.
   선택자 접두 = svc- · lf- · lead-form (다른 파일과 겹치지 않는다). head.html 이 page.isService 일 때만 싣는다. */

.svc-page{ background:var(--bg-primary); }
/* ── 업종 색 (🔴 2026-09-17 신설 · 🔴 2026-09-29 세로띠 투톤 전환에서 9색 전면 재설계) ──────
   왜 규약을 바꿨나(09-17): 이 파일은 「새 색값 0 · stage.css 시맨틱 토큰만」이었다. 그 결과 9개 분야가
   전부 같은 브랜드 색 하나였고, 허브 8칸이 눈으로 구분되지 않았다(09-17 「밋밋하다」).
   분야마다 색을 준다. 프로젝트 규칙은 아니었다 — home.css 는 이미 하드코딩 색 70개를 쓴다.
   🔴 09-29 무엇을 다시 했나: 옛 9색(파랑 #1d4ed8 · 청록 · 초록 · 주황 · 회색 · 하늘 · 보라 · 갈색 · 자주)은
   채도가 높은 원색 계열이라, 중성축이 회녹으로 내려앉은 투톤 지면 위에서 색만 붕 떠 보였다.
   9색 전부 **채도를 낮추고 명도를 내린 「흙·숲」 축**으로 옮겼다 — L* 24~38 · 채도 C* 10~32.
   서로 구분되는지는 눈대중이 아니라 재서 정했다: 9색 상호 최소 색차 ΔE(CIE76) **16.5**
   (가장 가까운 짝 = 이사/보험 17 · 이사/상가 17 · 장례/보험 18).
   🔴 폐기 팔레트(아이보리 #f2ede3 · 브라운 #3b2c21 · 테라코타 #9c4e22 계열)는 쓰지 않는다(check-html ⓔ).
   새 9색·진한색·틴트 27개 전부 그 여덟 값과 다르다(확인 완료).
   🔴 --svc-c 는 선·아이콘 채움이 아니라 **글자로도 쓰인다**(눈썹 · 진행률 % · 선택된 조각).
   그래서 밝은 바탕 세 종류 **전부** 4.5:1 을 넘겨야 한다. 아래 수치는 WCAG 상대휘도로 직접 계산한 값이다
   (지면 #fafbf9 / 판 #eef0ec / 판-강 #e2e6e1 순서 · 전 조합 최저 5.61 = 부동산 × 판-강).
   🔴 글자를 싣는 조합은 진한 색 × 아주 옅은 틴트다 — render-contrast(RV5)가 실렌더로 다시 잰다.
   틴트 위 --svc-c 글자 6.22~10.18 · 틴트 위 --svc-c-deep 9.36~12.94 · 틴트 위 --cs-ink 14.68~15.32.
   🔴 테라코타 --a-600 #9a3b1f 는 링크·강조를 맡은 **전역** 악센트다. 한 분야가 독점하지 않게
   인테리어는 명도를 달리한 흙갈색(L* 34 vs 악센트 L* 38 · ΔE 29)으로 떨어뜨렸다. */
.svc-page, .svc-card{ --svc-c:var(--cs-brand); --svc-c-deep:var(--cs-brand-deep); --svc-c-tint:var(--cs-brand-tint); }
/* 이사 — 짙은 남청 · 8.45 / 7.64 / 6.95 */
.svc-page[data-service="moving"],     .svc-card[data-svc="moving"]    { --svc-c:#3f4875; --svc-c-deep:#2b3253; --svc-c-tint:#eceef5; }
/* 청소 — 깊은 청록(물) · 6.94 / 6.28 / 5.71 */
.svc-page[data-service="cleaning"],   .svc-card[data-svc="cleaning"]  { --svc-c:#216062; --svc-c-deep:#164446; --svc-c-tint:#e3f2f2; }
/* 부동산 — 숲 초록 · 6.82 / 6.17 / 5.61 (9색 중 최저값 · 4.5 통과) */
.svc-page[data-service="realty"],     .svc-card[data-svc="realty"]    { --svc-c:#3d6139; --svc-c-deep:#2a4527; --svc-c-tint:#ebf5ea; }
/* 인테리어 — 구운 흙·목재 · 7.70 / 6.97 / 6.33 */
.svc-page[data-service="interior"],   .svc-card[data-svc="interior"]  { --svc-c:#714634; --svc-c-deep:#503023; --svc-c-tint:#f8ece8; }
/* 장례 — 절제된 자회 슬레이트(9색 중 가장 어둡고 채도 최저) · 11.26 / 10.19 / 9.26 */
.svc-page[data-service="funeral"],    .svc-card[data-svc="funeral"]   { --svc-c:#3b3644; --svc-c-deep:#292630; --svc-c-tint:#f1eef6; }
/* 보험 — 강청 회색 · 7.19 / 6.51 / 5.91 */
.svc-page[data-service="insurance"],  .svc-card[data-svc="insurance"] { --svc-c:#3a5871; --svc-c-deep:#273e50; --svc-c-tint:#e9f2f9; }
/* 상가 — 짙은 자보라 · 7.41 / 6.71 / 6.10 */
.svc-page[data-service="store"],      .svc-card[data-svc="store"]     { --svc-c:#6b4574; --svc-c-deep:#4c2f52; --svc-c-tint:#f7f1f9; }
/* 정책자금 — 짙은 황토 · 6.83 / 6.18 / 5.62 */
.svc-page[data-service="policyfund"], .svc-card[data-svc="policyfund"]{ --svc-c:#63582b; --svc-c-deep:#463e1d; --svc-c-tint:#f6f3e6; }
/* 광고 — 와인 · 6.94 / 6.28 / 5.70 */
.svc-page[data-service="ads"],        .svc-card[data-svc="ads"]       { --svc-c:#79495b; --svc-c-deep:#56323f; --svc-c-tint:#f5ecf0; }

.svc-inner{ width:100%; max-width:960px; margin:0 auto; }
/* 🔴 2026-09-29 투톤 전환에서 걷어냈다 — 여기 있던
     .svc-page a:where(:not(.btn)){ color:var(--fg-brand) }
   가 두 가지를 어겼다. ① 브랜드가 딥그린이 되면서 이 규칙이 링크를 본문 글자와 1.21 로 묻히게 만들었고,
   ② stage.css §2 불변식 A 가 요구하는 제외 셋(:not(.btn):not(.rg-btn):not(.rg-fullbtn)) 중 하나만 적어
      특정도 (0,1,1) 로 전역 링크 규칙을 덮어썼다.
   지금은 전역 규칙(stage.css · color:var(--a-600) 테라코타)이 이 화면 링크도 맡는다. 여기서 다시 칠하지 않는다. */

/* ── 현재 위치 ── */
.svc-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; font-size:var(--cs-text-sm); color:var(--fg-secondary); }
/* 🔴 2026-09-17 min-height 만 있어 「홈」이 20×44 였다(qa-390-probe 터치 타깃 9화면). 가로도 히트 영역을 채운다. */
.svc-crumb a{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--cs-hit); min-width:var(--cs-hit); padding:0 4px; }
.svc-crumb__sep{ color:var(--fg-secondary); }
.svc-crumb__here{ color:var(--fg-secondary); }

/* 🔴 2026-09-29 세로띠 투톤 전환: 색면 위 글자·아이콘을 #fff 에서 --fg-on-color(지면 #fafbf9)로 바꿨다.
   순백 한 점이 남으면 지면과 미세하게 갈라진다. 대비는 9색 모두 6.82~11.26 으로 그대로 넉넉하다. */
/* ── 히어로 (🔴 2026-09-17 사진 도입 · 모바일 사진 위 → 글 아래 · ≥768 글 왼쪽 · 사진 오른쪽)
      사진 위에 글을 얹지 않는다 — 대비가 사진마다 달라져 render-contrast 를 못 지킨다. ── */
.svc-hero{ display:grid; gap:20px; padding:16px 0 8px; }
.svc-hero__media{ order:-1; display:block; overflow:hidden; border-radius:var(--cs-radius-card); background:var(--bg-secondary); box-shadow:var(--cs-shadow-card); }
.svc-hero__img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:72% 50%; }
.svc-hero__body{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.svc-hero__icon{ display:inline-flex; width:60px; height:60px; align-items:center; justify-content:center; border-radius:18px; background:linear-gradient(135deg, var(--svc-c), var(--svc-c-deep)); color:var(--fg-on-color); }
.svc-icon{ display:block; width:48px; height:48px; flex:none; }
.svc-hero__icon .svc-icon{ width:32px; height:32px; }
.svc-hero__eyebrow{ display:inline-flex; align-items:center; margin:14px 0 2px; padding:5px 13px; border-radius:var(--cs-radius-pill); background:var(--svc-c-tint); font:700 var(--cs-text-sm)/1.5 var(--cs-font); color:var(--svc-c); }
.svc-page .svc-hero__title{ margin:10px 0 12px; font:700 var(--cs-h1)/1.25 var(--cs-font); letter-spacing:-0.02em; color:var(--cs-ink); word-break:keep-all; }
.svc-hero__lead{ margin:0; font-size:var(--cs-text-md); line-height:1.65; color:var(--fg-secondary); word-break:keep-all; }
.svc-hero__ctas{ display:flex; flex-direction:column; gap:10px; margin:24px 0 0; width:100%; }
.svc-hero__ctas .btn{ width:100%; white-space:normal; }

/* ── 절 공통 ── */
.svc-sec, .svc-notice, .svc-partner{ margin-top:40px; }
.svc-page .svc-sec__title{ margin:0 0 18px; font:700 var(--cs-h2)/1.3 var(--cs-font); letter-spacing:-0.01em; color:var(--cs-ink); word-break:keep-all; }
.svc-sec__lead{ margin:0 0 16px; color:var(--fg-secondary); word-break:keep-all; }

/* ── 이런 분께 ── */
.svc-page .svc-for{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.svc-for__card{ display:flex; align-items:center; gap:16px; padding:18px 16px; border:1px solid var(--cs-hair); border-radius:var(--cs-radius-card); background:var(--bg-primary); box-shadow:var(--cs-shadow-card); }
.svc-for__icon{ display:inline-flex; flex:none; width:48px; height:48px; align-items:center; justify-content:center; border-radius:14px; background:var(--svc-c-tint); color:var(--svc-c); }
.svc-for__icon .svc-icon{ width:26px; height:26px; }
.svc-for__text{ font-size:var(--cs-text-md); line-height:1.5; color:var(--cs-ink); word-break:keep-all; }

/* ── 진행 절차 ── */
.svc-page .svc-steps{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
/* 단계 사이를 잇는 세로선. 번호 배지(32px)의 가운데가 16px 이라 left 는 15px 이다. */
.svc-step{ position:relative; display:flex; gap:14px; align-items:flex-start; padding-bottom:22px; }
.svc-step:last-child{ padding-bottom:0; }
.svc-step::before{ content:""; position:absolute; left:15px; top:36px; bottom:2px; width:2px; border-radius:1px; background:var(--cs-hair); }
.svc-step:last-child::before{ display:none; }
.svc-step__num{ flex:none; display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:var(--cs-radius-pill); background:var(--svc-c); color:var(--fg-on-color); font:700 var(--cs-text-sm)/1 var(--cs-font); }
.svc-step__body{ display:flex; flex-direction:column; gap:2px; padding-top:4px; }
.svc-step__t{ font-size:var(--cs-text-md); color:var(--cs-ink); }
.svc-step__d{ font-size:var(--cs-text-sm); line-height:1.6; color:var(--fg-secondary); word-break:keep-all; }

/* ── 확인할 것 ── */
.svc-page .svc-checks{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.svc-check{ position:relative; padding:12px 16px 12px 40px; border-radius:var(--cs-radius-bar); background:var(--bg-secondary); line-height:1.6; color:var(--cs-ink); word-break:keep-all; }
.svc-check::before{ content:""; position:absolute; left:16px; top:20px; width:12px; height:7px; border-left:2px solid var(--svc-c); border-bottom:2px solid var(--svc-c); transform:rotate(-45deg); }

/* ── 자주 묻는 질문 ── */
.svc-faq{ border-top:1px solid var(--cs-hair); }
.svc-faq__item{ border-bottom:1px solid var(--cs-hair); }
.svc-faq__q{ display:flex; align-items:center; min-height:var(--cs-hit); padding:12px 32px 12px 0; position:relative; cursor:pointer; list-style:none; font-weight:700; color:var(--cs-ink); word-break:keep-all; }
.svc-faq__q::-webkit-details-marker{ display:none; }
.svc-faq__q::after{ content:""; position:absolute; right:8px; top:50%; width:8px; height:8px; border-right:2px solid var(--fg-secondary); border-bottom:2px solid var(--fg-secondary); transform:translateY(-70%) rotate(45deg); }
.svc-faq__item[open] .svc-faq__q::after{ transform:translateY(-30%) rotate(-135deg); }
.svc-page .svc-faq__a{ margin:0; padding:0 0 16px; line-height:1.6; color:var(--fg-secondary); word-break:keep-all; }
.svc-related{ margin:16px 0 0; }
.svc-related__link{ display:inline-flex; align-items:center; min-height:var(--cs-hit); font-weight:700; }

/* ── 상담 폼 ── */
.lead-form__card{ padding:20px 16px; border:1px solid var(--cs-hair); border-radius:var(--cs-radius-card); background:var(--bg-primary); }
.lead-form{ display:grid; gap:20px; }
.lf-field{ display:grid; gap:8px; min-width:0; }
.lf-fieldset{ margin:0; padding:0; border:0; }
.lf-label{ padding:0; font:700 var(--cs-text-md)/1.4 var(--cs-font); color:var(--cs-ink); }
.lf-tag{ display:inline-block; margin-left:4px; padding:1px 6px; border-radius:var(--cs-radius-pill); background:var(--cs-brand-tint); font:700 var(--cs-text-xs)/1.5 var(--cs-font); color:var(--cs-brand); vertical-align:middle; }
.lf-tag--opt{ background:var(--bg-secondary); color:var(--fg-secondary); }
.lf-input, .lf-select{ width:100%; min-height:var(--cs-hit); padding:10px 12px; border:1px solid var(--cs-x-field-border); border-radius:var(--cs-radius-btn); background:var(--cs-x-field-bg); font:400 var(--cs-text-md)/1.4 var(--cs-font); color:var(--cs-ink); }
.lf-hint{ margin:0; font-size:var(--cs-text-sm); color:var(--fg-secondary); }
.lf-error{ margin:0; font-size:var(--cs-text-sm); font-weight:700; color:var(--cs-x-error); }
.lf-field.is-invalid .lf-input, .lf-field.is-invalid .lf-select{ border-color:var(--cs-x-error); }
.lf-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.lf-chip{ position:relative; display:inline-flex; }
.lf-chip input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.lf-chip__t{ display:inline-flex; align-items:center; min-height:var(--cs-hit); padding:8px 14px; border:1px solid var(--cs-x-field-border); border-radius:var(--cs-radius-pill); background:var(--bg-primary); font-size:var(--cs-text-sm); line-height:1.4; color:var(--cs-ink); cursor:pointer; word-break:keep-all; }
.lf-chip input:checked + .lf-chip__t{ border-color:var(--svc-c); background:var(--svc-c-tint); color:var(--svc-c); font-weight:700; box-shadow:inset 0 0 0 1px var(--svc-c); }
.lf-chip input:focus-visible + .lf-chip__t{ outline:var(--cs-focus-w) solid var(--cs-brand); outline-offset:2px; }
.lf-consent__label{ display:flex; align-items:flex-start; gap:10px; min-height:var(--cs-hit); padding:10px 0; cursor:pointer; line-height:1.5; color:var(--cs-ink); word-break:keep-all; }
.lf-consent__label input{ flex:none; width:22px; height:22px; margin:0; accent-color:var(--cs-brand); }
.lf-consent__details summary{ display:inline-flex; align-items:center; min-height:var(--cs-hit); cursor:pointer; font-size:var(--cs-text-sm); color:var(--cs-brand); font-weight:700; }
.lf-consent__list{ margin:8px 0 0; display:grid; gap:4px 12px; font-size:var(--cs-text-sm); line-height:1.6; }
.lf-consent__list dt{ font-weight:700; color:var(--cs-ink); }
.lf-consent__list dd{ margin:0 0 6px; color:var(--fg-secondary); word-break:keep-all; }
.lf-consent__link{ margin:8px 0 0; }
.lf-consent__link a{ display:inline-flex; align-items:center; min-height:var(--cs-hit); font-size:var(--cs-text-sm); }
.lf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.lead-form__submit{ width:100%; white-space:normal; }
.lead-form[data-state="sending"] .lead-form__submit{ opacity:.6; pointer-events:none; }
.lead-form__alert{ margin:0 0 16px; padding:12px 14px; border:1px solid var(--cs-x-error); border-radius:var(--cs-radius-bar); background:var(--cs-x-error-tint); color:var(--cs-x-error); font-weight:700; }
.lead-form__success{ padding:8px 0; }
.lead-form__success-title{ margin:0 0 8px; font:700 var(--cs-text-lg)/1.4 var(--cs-font); color:var(--cs-ink); }
.lead-form__receipt{ margin:0 0 8px; color:var(--cs-ink); }
.lead-form__success-body{ margin:0; color:var(--fg-secondary); }

/* ── 단계형 요청 (🔴 2026-09-17 전면 개편 · lead-form.js 가 화면에서만 나눈다) ── */
.lf-wiz__head{ display:grid; gap:10px; }
.lf-prog{ display:flex; align-items:center; gap:12px; }
.lf-prog__track{ flex:1 1 auto; height:6px; border-radius:3px; background:var(--bg-secondary); overflow:hidden; }
.lf-prog__bar{ display:block; height:100%; width:0; border-radius:3px; background:var(--svc-c); transition:width var(--cs-t-fast) var(--cs-ease-out); }
.lf-prog__pct{ flex:none; min-width:3.2em; text-align:right; font:700 var(--cs-text-sm)/1 var(--cs-font); color:var(--svc-c); font-variant-numeric:tabular-nums; }
.lf-wiz__step{ margin:0; font-size:var(--cs-text-xs); color:var(--fg-secondary); }
.lf-wiz__intro{ position:relative; margin:4px 0 0; padding:14px 16px; border-radius:var(--cs-radius-card); background:var(--svc-c-tint); font-size:var(--cs-text-sm); line-height:1.6; color:var(--cs-ink); word-break:keep-all; }
.lf-wiz__intro::after{ content:""; position:absolute; left:22px; bottom:-7px; width:14px; height:14px; border-radius:2px; background:var(--svc-c-tint); transform:rotate(45deg); }
.lf-wiz__pane{ display:grid; gap:20px; }
.lf-wiz__pane[hidden]{ display:none; }
.lf-wiz__title{ margin:0; font:700 var(--cs-text-lg)/1.4 var(--cs-font); color:var(--cs-ink); word-break:keep-all; }
.lf-wiz__nav{ display:flex; gap:10px; }
.lf-wiz__nav .btn{ flex:1 1 0; min-height:var(--cs-hit); white-space:normal; }
.lf-wiz__nav .btn[hidden]{ display:none; }

/* ── 꼭 알아 두실 점 ── */
.svc-notice{ padding:20px 16px; border-radius:var(--cs-radius-card); background:var(--bg-secondary); }
.svc-page .svc-notice__list{ margin:0; padding-left:1.1em; display:grid; gap:8px; line-height:1.6; color:var(--cs-ink); word-break:keep-all; }

/* ── 파트너 띠 ── */
.svc-partner{ padding:8px 0 16px; border-top:1px solid var(--cs-hair); }
.svc-partner__row{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:12px 0 0; color:var(--fg-secondary); font-size:var(--cs-text-sm); }
.svc-partner__link{ display:inline-flex; align-items:center; min-height:var(--cs-hit); font-weight:700; }

/* ── 허브 카드 ── */
.svc-page .svc-grid{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
/* 🔴 2026-09-17 카드 = 사진 + 아이콘 배지 + 글. 사진은 히어로 800w 를 그대로 다시 쓴다(추가 생성 0). */
.svc-card{ display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; border:1px solid var(--cs-hair); border-radius:var(--cs-radius-card); background:var(--bg-primary); text-decoration:none; box-shadow:var(--cs-shadow-card); transition:box-shadow var(--cs-t-fast) var(--cs-ease-out); }
.svc-page a.svc-card{ color:var(--cs-ink); }
.svc-card__thumb{ display:block; overflow:hidden; background:var(--bg-secondary); }
.svc-card__img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:70% 50%; transition:transform var(--cs-t-fast) var(--cs-ease-out); }
.svc-card__icon{ position:relative; z-index:1; display:inline-flex; flex:none; width:48px; height:48px; margin:-24px 0 0 16px; align-items:center; justify-content:center; border-radius:15px; background:linear-gradient(135deg, var(--svc-c), var(--svc-c-deep)); box-shadow:0 6px 14px -6px var(--svc-c-deep); color:var(--fg-on-color); border:2px solid var(--bg-primary); }
.svc-card__icon .svc-icon{ width:24px; height:24px; }
.svc-card__body{ display:flex; flex-direction:column; gap:5px; min-width:0; padding:12px 16px 18px; }
.svc-card__title{ font:700 var(--cs-text-md)/1.4 var(--cs-font); color:var(--cs-ink); }
.svc-card__desc{ font-size:var(--cs-text-sm); line-height:1.5; color:var(--fg-secondary); word-break:keep-all; }
@media (hover:hover){ .svc-card:hover{ box-shadow:var(--cs-shadow-hover); } .svc-card:hover .svc-card__img{ transform:scale(1.04); } }
.svc-card:active{ transform:scale(.985); }

@media (min-width:768px){
  .svc-hero{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:32px; padding:24px 0 12px; }
  .svc-hero__media{ order:0; }
  .svc-hero__img{ aspect-ratio:4/3; }
  .svc-hero__ctas{ width:auto; }
  .svc-hero__ctas{ flex-direction:row; }
  .svc-hero__ctas .btn{ width:auto; }
  .svc-page .svc-for{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .svc-for__card{ flex-direction:column; align-items:flex-start; }
  .svc-page .svc-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .lead-form__card{ padding:28px 28px; }
  .lead-form__submit{ width:auto; justify-self:start; }
  .svc-notice{ padding:24px 28px; }
  .lf-consent__list{ grid-template-columns:auto 1fr; }
  .lf-consent__list dd{ margin:0; }
}
@media (min-width:1280px){
  .svc-page .svc-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .svc-hero{ gap:48px; padding:32px 0 16px; }
  .svc-sec, .svc-notice, .svc-partner{ margin-top:56px; }
}
@media (prefers-reduced-motion:reduce){
  .svc-card{ transition:none; } .svc-card:active{ transform:none; }
  .svc-card__img{ transition:none; } .svc-card:hover .svc-card__img{ transform:none; }
}