@charset "UTF-8";
/* ===================================================================
   선경설비 — 커스텀 스타일시트
   기획·개발 가이드 §4 반응형 / §5 컴포넌트 상태 / §6 디자인 토큰 기준
   목차
     01. 디자인 토큰
     02. 리셋 · 베이스
     03. 레이아웃 (컨테이너 · 섹션 · 그리드)
     04. 타이포
     05. 버튼
     06. (비움)
     07. 헤더 GNB · 드로어
     08. 히어로
     08b. 띠배너 (.ribbon — 마무리 섹션 위 가로로 흐르는 약속 문구)
     09. 카드
     09b. 고객 후기 (.rv — 텍스트 카드 · 한 줄 슬라이드)
     09d. 서비스 안내 (.svcrow — 1열 · 오른쪽 사진 · 바로 전화. 지금은 모바일 전용)
     09e. 서비스 벤토 (.sv — 대표 서비스 큰 카드 + 나머지 넷)
     10. 표
     11. 폼
     12. 아코디언
     13. 스텝 · 체크 리스트 · 진행 과정 타임라인(.tl) · 견적 문의 전화 판(.est) · 번호 단계 폼(.form-step)
     13b. 신뢰 섹션 (.trust — 모바일 목록 · 태블릿 2열 · PC 3열 엇갈림)
     14. (비움) · 14b. 마지막 전환 섹션(.finale)
     15. 푸터
     16. 우측 퀵메뉴 · 플로팅 CTA
     17. 유틸리티 · 17b. 움직임(은은한 등장 + 숫자 카운트 · 진행 과정 단계 켜짐)
     18. 접근성 · 모션 · 인쇄
   =================================================================== */

/* ── 01. 디자인 토큰 (가이드 §6) ───────────────────────────────── */
:root {
  /* ═══ 색 체계 — 역할 4가지. 이 블록 밖에서 색을 새로 만들지 않는다 ═══════════
     메인     로고 파랑 한 색상(221.5°)의 명암 단계 — 누르는 것 · 선택 상태 · 아이콘 · 작은 라벨
     서브 1   네이비 — 어두운 면 (히어로 · 띠배너 · 신뢰 카드 · 마무리 섹션)
     서브 2   미스트 — 밝은 면 (섹션 바탕 · 카드 바탕 · 푸터 · 안내 상자)
     포인트   노랑 — 중요한 문구 강조에만. 면(바탕)으로 깔지 않는다(예외 없음)
     전화     형광 시안 — 히어로 "지금 전화하기" 버튼(.btn--call) 한 곳 전용. 다른 곳에 쓰지 않는다
     무채색(ink) · 흰색은 글자와 선이고, 빨강(urgent)은 폼 오류 표시 전용이다.
     노랑 · 초록 · 파스텔은 쓰지 않는다 — 전에는 9계열이 섞여 색이 따로 놀았다. */

  /* ── 메인 · 로고 파랑 ──────────────────────────────────────────────
     모든 단계가 로고와 같은 색상각이다. 각이 흐트러지면 로고 옆 버튼이
     "비슷하지만 다른 파랑" 으로 보여 색이 두 개로 읽힌다.
     500 은 채도가 높아 넓게 깔면 시끄럽다 — 버튼 · 알약 같은 작은 판에만. */
  --brand-100: #DDE5F8; /* 호버 · 선택 배경 · 꼬리표 */
  --brand-200: #BACBF3; /* 포커스 글로우 · 어두운 면 위 보조 글자 */
  --brand-300: #7698E5; /* 호버 테두리 */
  --brand-400: #3A6DDF; /* 테두리 (흰 바탕 3:1 이상) */
  --brand-500: #1047C2; /* = 로고 색. 버튼 · 링크 (흰 글자 7.77:1) */
  --brand-600: #0C389D; /* hover */
  --brand-700: #0B296D; /* active · 선택된 칩 글자 */

  /* ── 서브 1 · 네이비 — 어두운 면은 전부 이 한 색이다 ─────────────────
     로고와 같은 색상각이라 파랑 버튼 · 로고와 한 가족으로 읽힌다.
     전에는 #0A142B(거의 검정) · brand-700 · 사진 오버레이가 제각각이었다.
     흰 글자 16.2:1. 사진 위 오버레이는 이 색의 rgb(11, 30, 69) 알파로 깐다. */
  --sub-navy: #0B1E45;

  /* ── 서브 2 · 미스트 — 밝은 면은 전부 이 한 색이다 ──────────────────
     전에는 회색(#F9FAFB)과 옅은 파랑(#F1F4FC) 두 바탕이 섞여 섹션마다 온도가 달랐다.
     보조 글자 ink-500 이 이 위에서 4.8:1 — 더 진하게 깔면 보조 글자가 먼저 무너진다. */
  --sub-mist: #F2F5FA;

  /* ── 포인트 · 노랑 — "중요한 문구" 강조 전용 ──────────────────────────
     파랑의 보색 쪽이라 색상 자체로 갈려 멀리서도 먼저 읽힌다. 설비 현장의 안전색이기도 하다.
     한 화면에 강조가 많으면 강조가 아니다. 노랑 한 값을 바탕에 따라 두 방식으로 쓴다:
       어두운 면(네이비) 위  — 노란 "글자". 네이비 위 11.4:1
       밝은 면(흰 · 미스트) 위 — 진한 글자(ink-900) 아래 노란 "형광펜 밑줄"(.t-accent · .point__key).
                              노란 글자는 흰 바탕에서 1.5:1 이라 읽히지 않는다. 밑줄 위 글자는 15:1.
     전에는 주황(두 명암)이었는데, 밝은 면용 진한 주황이 갈색처럼 가라앉아 노랑으로 바꿨다.
     #FFE500(형광)보다 한 단계 따뜻한 #FFD43B — 흰 바탕과의 단차가 커서(1.46) 밑줄이 더 또렷하다. */
  --point: #FFD43B;

  /* 히어로 전화 버튼 전용 — 네이비 사진 위에서 가장 튀는 형광 시안. 노랑(문구 강조)과 갈리게 로고 파랑 계열에서 골랐다.
     글자는 네이비(대비 12:1). 이 색은 .btn--call 한 곳에만 쓴다 — 여기저기 쓰면 첫 화면의 "눌러야 할 것" 이 흐려진다. */
  --call: #22E3FF;
  --call-hover: #5EECFF;
  --call-glow: rgba(34, 227, 255, .45);

  /* 폼 오류 · 필수 표시 전용 (브랜드 색이 아니라 상태 색이다) */
  --urgent: #DC2626;
  --urgent-weak: rgba(220, 38, 38, .10);

  /* 무채색 — 글자와 선 */
  --ink-900: #111827; /* 제목 */
  --ink-700: #374151; /* 본문 */
  --ink-500: #656C7B; /* 보조 (흰 5.28 / 미스트 4.80) */
  --ink-200: #E5E7EB; /* 구분선 */
  --white:   #FFFFFF;

  /* 타이포 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, "Malgun Gothic", "맑은 고딕", sans-serif;

  --fs-display: 32px;  --lh-display: 1.25;
  --fs-h1:      26px;  --lh-h1:      1.3;
  --fs-h2:      22px;  --lh-h2:      1.35;
  --fs-h3:      18px;  --lh-h3:      1.4;
  --fs-body:    16px;  --lh-body:    1.7;
  --fs-caption: 13px;  --lh-caption: 1.5;
  --fs-tel:     22px;

  /* 여백 — 4의 배수 (가이드 §5 Figma 오토 레이아웃과 1:1) */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px;

  /* 반경 · 그림자 */
  --r-card: 16px;
  --r-btn:  12px;
  --r-field: 10px;
  --r-pill: 999px;
  --sh-card:       0 1px 3px rgba(17, 24, 39, .06);
  --sh-card-hover: 0 12px 24px rgba(17, 24, 39, .10);
  --sh-gnb:        0 1px 0 rgba(17, 24, 39, .06);

  /* 구조 */
  --container: 1200px;
  --gnb-h: 56px;
  --float-h: 64px;
  --tap: 44px;              /* 최소 탭 타겟 (가이드 §4) */
  --ease: 150ms ease-out;   /* 모든 상태 전환은 이 값으로 통일 */
}

@media (min-width: 1024px) {
  :root {
    --fs-display: 48px; --lh-display: 1.2;
    --fs-h1:      36px;
    --fs-h2:      26px;
    --fs-h3:      20px;
    --fs-body:    17px;
    --fs-tel:     26px;
    --gnb-h:      80px;
  }
}

/* ── 02. 리셋 · 베이스 ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--gnb-h) + var(--sp-4));
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-700);
  background: var(--white);
  word-break: keep-all;          /* 한글 단어 중간에서 줄이 끊기지 않게 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  /* 가이드 §4: 플로팅 바가 푸터 마지막 줄을 가리지 않도록 */
  padding-bottom: calc(var(--float-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) { body { padding-bottom: 0; } }
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
table { border-collapse: collapse; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }

/* 포커스: 마우스 클릭에는 링을 띄우지 않고 키보드에만 띄운다 */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 03. 레이아웃 ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 768px) { .container { padding-inline: var(--sp-8); } }
/* 긴 글줄이 이어지는 문서형 페이지 (약관 등) */
.container--narrow { max-width: 800px; }

/* 가이드 §4: 섹션 상하 여백은 이 클래스 하나로 통일한다 */
.section { padding-block: var(--sp-14); }
@media (min-width: 768px)  { .section { padding-block: var(--sp-20); } }
@media (min-width: 1024px) { .section { padding-block: 112px; } }

.section--tight { padding-block: var(--sp-10); }
@media (min-width: 1024px) { .section--tight { padding-block: var(--sp-12); } }

/* 섹션 바탕 — 흰 / 서브 2(미스트)가 번갈아 온다. 어두운 면은 서브 1(네이비) 하나.
   gray 와 brand 는 예전 이름이다 — 둘 다 미스트로 같다(바탕 온도를 하나로 맞췄다). */
.section--brand  { background: var(--sub-mist); }

.section__head { margin-bottom: var(--sp-8); }
.section__head--center { text-align: center; margin-bottom: var(--sp-10); }
.section__eyebrow {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .08em;
  color: var(--brand-500);
}
.section__desc { margin-top: var(--sp-2); color: var(--ink-700); }
/* 강조 섹션 제목 — 일반 섹션 제목(.t-h1)보다 한 단계 크다. 핵심어는 .t-accent(노란 밑줄)로 뺀다.
   한 페이지에 한두 곳만 쓴다 — 모든 제목이 크면 아무것도 크지 않다. */
.section__head--feature .t-h1 {
  font-size: clamp(28px, 7.6vw, 46px); line-height: 1.25; font-weight: 800;
  letter-spacing: -.04em; text-wrap: balance;
}
.section__head--feature .section__desc { margin-top: var(--sp-3); font-size: clamp(15px, 4vw, 18px); }

/* 그리드 — 가이드 §4의 섹션별 Grid/Flex 선택 기준 */
.grid { display: grid; gap: var(--sp-4); }
@media (min-width: 768px)  { .grid { gap: var(--sp-6); } }
@media (min-width: 1024px) { .grid { gap: var(--sp-8); } }
@media (min-width: 768px) {
  .grid--md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 04. 타이포 ───────────────────────────────────────────────── */
.t-display {
  font-size: var(--fs-display); line-height: var(--lh-display);
  font-weight: 800; letter-spacing: -.02em; color: var(--ink-900);
}
.t-h1 {
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  font-weight: 700; letter-spacing: -.02em; color: var(--ink-900);
}
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; color: var(--ink-900); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; color: var(--ink-900); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-muted { color: var(--ink-500); }
/* 중요 문구 강조 — 밝은 면에서는 진한 글자 + 노란 형광펜 밑줄, 어두운 면(.hero 등)에서는 노란 글자로 덮는다.
   밑줄은 줄이 바뀌어도 끊기지 않게 clone 으로 그린다.
   파랑은 "누르는 것" 의 색이라 강조에 쓰면 링크처럼 보인다. */
.t-accent,
.point__key {
  font-style: normal; font-weight: 800; color: var(--ink-900);
  padding-inline: .06em;
  background: linear-gradient(transparent 60%, var(--point) 60%);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.t-strong { color: var(--ink-900); font-weight: 700; }
/* 본문 속 글자 링크 — 메인 파랑 + 밑줄. 강조(.t-accent · 노랑)와 헷갈리지 않게 따로 둔다 */
.t-link { color: var(--brand-500); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.t-link:hover { color: var(--brand-600); }

/* 가이드 §6: 전화번호는 숫자 폭이 흔들리지 않게 고정한다 */
.tabular { font-variant-numeric: tabular-nums; }

/* 브레드크럼 */
.crumb { display: flex; flex-wrap: wrap; gap: var(--sp-1); font-size: var(--fs-caption); color: var(--ink-500); }
/* 글자가 한 자뿐이라 11×15 밖에 안 됐다. 레이아웃을 밀지 않도록
   패딩을 주고 같은 크기의 음수 마진으로 되돌린다(.tap-safe 와 같은 방식).
   한 글자 링크를 44×44 까지 넓히면 빵부스러기 간격이 어그러지므로,
   WCAG 2.5.8 의 24×24 를 넘기는 선에서 잡는다. */
.crumb a {
  display: inline-block;
  padding: var(--sp-3) var(--sp-2);
  margin: calc(var(--sp-3) * -1) calc(var(--sp-2) * -1);
}
.crumb a:hover { color: var(--brand-500); }
.crumb li[aria-hidden] { opacity: .5; }
.crumb li:last-child { font-weight: 600; color: var(--ink-700); }

/* ── 05. 버튼 (가이드 §5 상태 정의) ───────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-4) var(--sp-6);
  border: 1px solid transparent; border-radius: var(--r-btn);
  font-size: 17px; font-weight: 700; line-height: 1.2; text-align: center;
  transition: background-color var(--ease), border-color var(--ease),
              color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn--block { width: 100%; }
.btn--lg { min-height: 60px; padding: var(--sp-5) var(--sp-8); }

.btn--primary { background: var(--brand-500); color: var(--white); }
.btn--primary:hover { background: var(--brand-600); box-shadow: var(--sh-card-hover); }
.btn--primary:active { background: var(--brand-700); transform: scale(.98); box-shadow: none; }
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  background: var(--ink-200); color: var(--ink-500);
  cursor: not-allowed; transform: none; box-shadow: none;
}

.btn--secondary { background: var(--white); border-color: var(--brand-500); color: var(--brand-500); }
.btn--secondary:hover { background: var(--brand-100); }
.btn--secondary:active { background: var(--brand-200); transform: scale(.98); }
.btn--secondary:disabled { border-color: var(--ink-200); color: var(--ink-500); cursor: not-allowed; }

/* 어두운 배경(히어로) 위 주 버튼 — 딥블루는 묻히므로 흰 바탕으로 뒤집는다 */
.btn--on-dark { background: var(--white); color: var(--brand-500); }
.btn--on-dark:hover { background: var(--brand-100); }
.btn--on-dark:active { background: var(--brand-200); transform: scale(.98); }
.btn--on-dark:focus-visible { outline-color: var(--white); }

/* 히어로 전화 버튼 — 형광 시안 판 · 네이비 글자 · 같은 색 빛 번짐(01절 --call). 이 버튼 한 곳 전용 */
.btn--call { background: var(--call); color: var(--sub-navy); box-shadow: 0 0 0 1px var(--call-glow), 0 10px 32px var(--call-glow); }
.btn--call:hover { background: var(--call-hover); box-shadow: 0 0 0 1px var(--call-glow), 0 14px 40px var(--call-glow); }
.btn--call:active { transform: scale(.98); box-shadow: 0 0 0 1px var(--call-glow), 0 6px 16px var(--call-glow); }
.btn--call:focus-visible { outline-color: var(--white); }

/* 텍스트 링크도 44px 판을 갖게 한다 (가이드 §4) */
.tap-safe { display: inline-block; padding-block: var(--sp-3); margin-block: calc(var(--sp-3) * -1); }

/* ── 06. (비움) 히어로 배지는 제거됨 ────────────────────────────
   되살릴 때는 --r-pill 과 --urgent-weak 토큰이 아직 남아 있다. */

/* ── 07. 헤더 GNB · 드로어 (가이드 §5 StickyGnb) ──────────────── */
.gnb {
  position: sticky; top: 0; z-index: 40;
  height: var(--gnb-h);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: saturate(180%) blur(8px);
  transition: box-shadow var(--ease);
}
.gnb.is-scrolled { box-shadow: var(--sh-gnb); }
.gnb__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: 100%; }

.gnb__logo { display: flex; align-items: center; }
/* 로고는 높이로만 맞춘다. 가로를 고정하면 파일을 바꿀 때 비율이 틀어진다.
   GNB 가 56px(lg 80px)이라 30px(lg 40px)이면 위아래로 숨 쉴 자리가 남는다.
   원본이 435x119 라 표시 폭의 3배가 넘어 고해상도 화면에서도 선명하다.
   같은 파일을 모바일 드로어 머리(.drawer__logo)에서도 쓴다. */
.gnb__img { width: auto; height: 30px; }

.gnb__menu { display: none; }
.gnb__link {
  display: flex; align-items: center; height: var(--tap);
  padding-inline: var(--sp-4); border-radius: var(--r-btn);
  font-weight: 600; color: var(--ink-700);
  transition: color var(--ease), background-color var(--ease);
  position: relative;
}
.gnb__link:hover { color: var(--brand-500); }
.gnb__link:active { color: var(--brand-700); }
/* 지금 있는 페이지 — 진한 글자 + 굵은 파랑 밑줄(3px) */
.gnb__link[aria-current="page"] { color: var(--ink-900); font-weight: 800; }
.gnb__link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: 6px;
  height: 3px; background: var(--brand-500); border-radius: 2px;
}

.gnb__tel { display: none; }
.gnb__icons { display: flex; align-items: center; gap: var(--sp-1); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  border-radius: var(--r-btn); color: var(--ink-900);
  transition: background-color var(--ease);
}
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn:active { background: var(--sub-mist); }

/* 전화 — 모바일은 둥근 파랑 아이콘(44px · 하단 고정 바에 "지금 전화하기" 가 있어 글자는 감춘다),
   태블릿은 파랑 글자 알약 [☎ 전화] */
.gnb__pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: var(--tap); height: var(--tap); margin-right: var(--sp-1);
  border-radius: 32%; background: var(--brand-500); color: var(--white);
  font-size: 15px; font-weight: 800; transition: background-color var(--ease);
}
.gnb__pill svg { width: 18px; height: 18px; }
.gnb__pill:active { background: var(--brand-700); }
.gnb__pilltxt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
/* 모바일 메뉴 버튼 — 전화 버튼과 같은 44px 판(모서리 32% — 둥근 사각). 바탕은 옅은 파랑(brand-100) · 아이콘 진한 파랑 —
   같은 모양으로 짝을 맞추되, 채운 파랑(전화)이 먼저 보이게 한 단계 옅게 둔다 */
.gnb__menubtn { border-radius: 32%; background: var(--brand-100); color: var(--brand-700); }
.gnb__menubtn svg { width: 22px; height: 22px; }
.gnb__menubtn:active { background: var(--brand-200); }

/* 태블릿(768~) — 화면이 넓어 메뉴 3개를 헤더에 펼친다. 메뉴 버튼(드로어)은 숨긴다 — 오시는 길은 푸터에 있다 */
@media (min-width: 768px) {
  .gnb__menu { display: flex; align-items: center; margin-left: auto; }
  .gnb__menu .gnb__link { padding-inline: var(--sp-3); font-size: 15px; }
  .gnb__menu .gnb__link[aria-current="page"]::after { left: var(--sp-3); right: var(--sp-3); }
  .gnb__menubtn { display: none; }
  .gnb__pill { width: auto; padding-inline: var(--sp-4); margin-right: 0; border-radius: var(--r-pill); }   /* 태블릿 글자 알약은 둥근 알약 그대로 */
  .gnb__pilltxt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

@media (min-width: 1024px) {
  .gnb__img { height: 40px; }
  .gnb__menu { display: flex; align-items: center; gap: var(--sp-1); margin-left: 0; }
  .gnb__menu .gnb__link { padding-inline: var(--sp-4); font-size: inherit; }
  .gnb__menu .gnb__link[aria-current="page"]::after { left: var(--sp-4); right: var(--sp-4); }
  .gnb__tel {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5); border-radius: var(--r-btn);
    background: var(--brand-500); color: var(--white);
    font-weight: 800; font-variant-numeric: tabular-nums;
    transition: background-color var(--ease);
  }
  .gnb__tel svg { width: 20px; height: 20px; }
  .gnb__tel:hover { background: var(--brand-600); }
  /* 번호는 가는 흰 선으로 행동 문구와 나눈다 */
  .gnb__telnum { padding-left: var(--sp-3); margin-left: var(--sp-1); border-left: 1px solid rgba(255, 255, 255, .35); font-weight: 700; }
  .gnb__tel:active { background: var(--brand-700); }
  .gnb__icons { display: none; }
}

/* 모바일 전체화면 드로어 */
.drawer { position: fixed; inset: 0; z-index: 50; background: var(--white); overflow-y: auto; }
.drawer[hidden] { display: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--gnb-h); }
/* GNB 로고와 같은 높이로 맞춘다. 드로어 머리도 --gnb-h(56px) 이다. */
.drawer__logo { width: auto; height: 30px; }
/* 메뉴 목록 — 메인 진행 과정 · FAQ 와 같은 글자 목록: 항목마다 위 굵은 선(옅은 파랑) + 큰 글자 */
.drawer__list { margin-top: var(--sp-4); border-bottom: 2px solid var(--brand-200); }
.drawer__list li { border-top: 2px solid var(--brand-200); }
.drawer__list a {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--ink-900);
}
.drawer__list a:active { color: var(--brand-500); }
.drawer__list svg { width: 20px; height: 20px; color: var(--ink-500); }
.drawer__foot { padding-block: var(--sp-6) 160px; }
.drawer__foot .btn + .btn { margin-top: var(--sp-3); }
@media (min-width: 1024px) { .drawer { display: none; } }

/* ── 08. 히어로 (가이드 §7) ───────────────────────────────────── */
/* 배경 이미지 위에 카피를 얹는다. 사진이 어떤 밝기로 바뀌어도 글자가 읽히도록
   어두운 오버레이를 항상 깐다. 배경색은 이미지가 늦게 떠도 흰 글자가 보이게 미리 깔아둔다. */
.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: 480px;
  background: var(--sub-navy);
  color: var(--white);
}
@media (min-width: 1024px) { .hero { min-height: 620px; } }

.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* 좌측(글자 쪽)을 더 진하게 눌러 대비를 확보한다 */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(11, 30, 69, .86) 0%, rgba(11, 30, 69, .66) 55%, rgba(11, 30, 69, .45) 100%),
    linear-gradient(to top, rgba(11, 30, 69, .5), rgba(11, 30, 69, 0) 60%);
}

.hero__inner { position: relative; z-index: 1; }
.hero__copy { max-width: 42rem; }
.hero__title { color: var(--white); }
.hero__title .t-accent { color: var(--point); background: none; padding: 0; }

.hero__actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-8); }
@media (min-width: 640px) {
  .hero__actions { flex-direction: row; }
  .hero__actions .btn { width: auto; }
}

/* 넓은 현장 사진 히어로(메인) — 글은 왼쪽 정렬. 사진은 <picture>(모바일 현장 사진 · 태블릿부터 넓은 탐지 사진)라
   picture 를 배경 판으로 깔고, 태블릿부터는 왼쪽(글자 쪽)만 진하고 오른쪽(피사체)은 옅은 막으로 바꾼다.
   모바일은 위 기본 막(왼쪽 86% → 45%)을 그대로 쓴다. 모바일 사진은 세로 판이라 장비가 있는 아래쪽(70%)을 기준으로 자른다 */
.hero--wide > picture { position: absolute; inset: 0; }
.hero--wide .hero__bg { object-position: 50% 70%; }
@media (min-width: 768px) {
  .hero--wide .hero__bg { object-position: 100% 50%; }
  .hero--wide::after {
    background:
      linear-gradient(90deg, rgba(11, 30, 69, .96) 0%, rgba(11, 30, 69, .9) 34%, rgba(11, 30, 69, .45) 62%, rgba(11, 30, 69, .12) 100%),
      linear-gradient(to top, rgba(11, 30, 69, .45), rgba(11, 30, 69, 0) 50%);
  }
}
@media (min-width: 1024px) { .hero.hero--wide .hero__copy { max-width: 40rem; } }   /* .hero--big 의 56rem 보다 앞서게 */

/* 제목 바로 아래 한 줄. 버튼 아래 지표(.hkeys — 영업시간·지역·방문자)와 역할이 다르다. */
.hero__lead {
  margin-top: var(--sp-5);
  font-size: clamp(16px, 4.2vw, 21px); line-height: 1.5;
  font-weight: 600; letter-spacing: -.02em;
  color: var(--brand-200);
}

/* 대형 타이포 — 소제목을 버튼 아래로 내리고 제목만 남긴다 */
.hero--big .hero__copy { max-width: 56rem; }
.hero__title--big {
  font-size: clamp(34px, 9.5vw, 76px);
  line-height: 1.05; font-weight: 800; letter-spacing: -.04em;
  color: var(--white); text-wrap: balance;
}
.hero--big .hero__actions { margin-top: var(--sp-8); }

/* 히어로 [문자 보내기 | 지금 전화하기] — 두 버튼 모두 채운 판.
     문자 = 흰 판 · 파랑 글자(.btn--on-dark) / 전화 = 형광 시안 판 · 네이비 글자(.btn--call)
     테두리만 있는 버튼은 네이비 사진 위에서 묻혀서 둘 다 채웠다. 전화는 형광색 + 빛 번짐이라 가장 먼저 보인다.
     (전에는 전화가 노랑이었다 — 노랑은 문구 강조 전용으로 돌렸다)
   크기는 일반 버튼보다 한 단계 크다 — 높이 60px(태블릿 · PC 64px) · 글자 17px(18px) · 800.
   올리면 2px 올라오고 누르면 살짝 눌린다 — 누를 것이라 움직임을 준다(카드는 떠오르지 않는다).
   폰(~639px): 반씩 한 줄 · 태블릿 · PC: 왼쪽에 나란히.
   PC 에서 문자 링크는 연결된 앱(Windows "휴대폰과 연결", Mac "메시지")이 있을 때만 열린다. */
.hero__actions--duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.hero__actions--duo .btn {
  width: 100%; min-height: 60px; padding-inline: var(--sp-3);
  border-width: 2px; font-size: 17px; font-weight: 800; letter-spacing: -.02em;
}
.hero__actions--duo .btn svg { width: 22px; height: 22px; }
.hero__actions--duo .btn:hover { transform: translateY(-2px); }
.hero__actions--duo .btn:active { transform: translateY(0) scale(.98); }
@media (min-width: 640px) {
  .hero__actions--duo { display: flex; justify-content: flex-start; gap: var(--sp-3); }
  .hero__actions--duo .btn { width: auto; min-height: 64px; padding-inline: var(--sp-10); font-size: 18px; }
}

/* 히어로 제목은 고정이다(문구 슬라이드는 제거했다). 같은 말을 두 번 하지 않는다 —
   20년 · 24시간 · 0원을 다시 요약하던 지표 띠와 "무료" 를 세 번째로 말하던 안심 문구는 지웠다.
   제목 위 상태 배지(알약 테두리 + 맥박 점)도 지웠다 — AI 가 만든 히어로의 전형적인 장식이다.
   "매일 24시간" 은 버튼 아래 지표 줄(.hkeys)이 맡는다.
   첫 3초에 읽혀야 하는 순서: 제목(무엇을) → 약속(0원) → 전화. */

/* 약속의 핵심어(0원)만 포인트색으로 — 제목의 강조어와 같은 색이라 한 줄로 이어 읽힌다 */
.hero__lead strong { color: var(--point); font-weight: 800; }

/* 버튼 아래 지표 3칸(.hkeys) — 상담 시간 · 출동 지역 · 방문자.
   진행 과정 · 마무리 섹션 보증과 같은 글자 목록을 네이비 위로 옮겼다:
     · 판      없음. 칸마다 위 굵은 선(흰 24%)
     · 순서    설명어(작게 · 흰 72%) → 핵심어(크게 · 흰). 훑을 때 핵심어만 걸리게
     · 색      포인트(노랑)는 쓰지 않는다 — 바로 위 제목 · 약속 줄에서 이미 두 번 썼다
   전에는 반투명 유리 타일 세 장이었다(AI 디자인 티 · 다른 섹션과 문법이 달랐다). */
.hkeys {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3);
  max-width: 560px; margin-top: var(--sp-10);
}
.hkeys li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: var(--sp-3); border-top: 2px solid rgba(255, 255, 255, .24); }
.hkeys__cap { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .72); }
.hkeys__key { font-size: clamp(15px, 4.2vw, 22px); line-height: 1.3; font-weight: 800; letter-spacing: -.03em; color: var(--white); }
@media (min-width: 768px) {
  .hkeys { gap: var(--sp-6); }
  .hkeys__cap { font-size: var(--fs-caption); }
}

/* 서브페이지 헤더 — 메인 히어로 · 마무리 섹션과 같은 서브 1(네이비) 띠.
   사이트의 모든 페이지가 같은 네이비로 열린다. 여기는 "어디인지" 를 알리는 자리라 높이는 낮게 두고
   (모바일 약 170px) 장식은 오른쪽 아래 옅은 동심원(정지) 하나뿐이다 — 마무리 섹션의 동심원과 같은 그림.
   흰 글자 · 브레드크럼 흰 60% · 설명 흰 80%. 강조어가 있으면 노란 글자(.t-accent, 히어로와 같은 규칙). */
.page-head {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--sp-10); background: var(--sub-navy); color: var(--white);
}
.page-head::before,
.page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-head::before { background: radial-gradient(50% 90% at 100% 100%, rgba(58, 109, 223, .34) 0%, rgba(11, 30, 69, 0) 70%); }
.page-head::after {
  background: repeating-radial-gradient(circle at 92% 110%, rgba(255, 255, 255, .05) 0 1px, rgba(255, 255, 255, 0) 1px 48px);
  -webkit-mask-image: radial-gradient(circle at 92% 110%, #000 0, #000 20%, transparent 60%);
          mask-image: radial-gradient(circle at 92% 110%, #000 0, #000 20%, transparent 60%);
}
@media (min-width: 1024px) { .page-head { padding-block: var(--sp-16); } }
.page-head .crumb { color: rgba(255, 255, 255, .6); }
.page-head .crumb a:hover { color: var(--white); }
.page-head .crumb li:last-child { color: rgba(255, 255, 255, .9); }
/* 브레드크럼 바로 아래 제목 하나뿐이다. 간격은 여기서 준다. */
.page-head .t-display { margin-top: var(--sp-4); color: var(--white); }
.page-head .t-accent { color: var(--point); background: none; padding: 0; }
/* 제목 아래 한 줄 — 이 페이지에서 무엇을 얻는지 고객 말로 알려 준다 */
.page-head__desc { margin-top: var(--sp-3); max-width: 40rem; color: rgba(255, 255, 255, .8); }

/* ── 08b. 띠배너 (.ribbon — 마무리 섹션 위 가로로 흐르는 약속 문구) ──────
   자주 묻는 질문 아래 · 마무리 섹션(.finale) 바로 위. 끝까지 읽은 고객에게 약속을 요약하고 전화로 잇는다.
   마무리 섹션과 같은 서브 1(네이비) 바탕이라 둘이 하나의 마무리 블록으로 읽힌다.
   전화 버튼과는 마무리 제목 하나만큼 떨어져 있어 움직이는 글이 버튼을 가리지 않는다.
   문장이 아니라 키워드(최신 장비 보유 · 책임 시공 …)다. 체크 아이콘만 포인트색(노랑).

   두 벌(.ribbon__list)을 이어 붙여 -50% 만큼 민다. 두 벌의 폭이 정확히 같아야
   이음매가 안 보이므로 벌 사이 간격은 margin 이 아니라 각 벌의 padding-right 에 넣는다.
   키워드는 화면 폭에 펼치지 않고 일정 간격(모바일 48px · PC 64px)으로 이어 붙인다. 전에는 한 벌을 화면 폭(100vw)에
   고르게 펼쳐서, PC 넓은 화면에서 키워드 사이가 200px 넘게 벌어져 허전했다.
   대신 한 벌 안에서 키워드 일곱 개를 두 번 돌려(index.php) 한 벌이 어떤 화면보다도 길게 한다(PC 약 3,800px).
   느리고 부드럽게 — 계속 움직이는 글은 눈을 피로하게 한다(사용자 피드백 "눈 아픔").
     · 속도: 한 바퀴 200초 — PC 초당 약 19px(전의 40% 남짓). 눈이 글자를 쫓아가지 않아도 되는 속도
     · 글자: 흰 80% · 보통 굵기(600). 꽉 찬 흰 굵은 글자는 네이비 위에서 번쩍여 보였다
     · 아이콘: 노랑을 75% 로 낮춰 깜빡이는 점처럼 튀지 않게
   멈춤 — 버튼(is-paused) · 마우스 올림 · 키보드 포커스. 상태는 JS 5d 가 바꾼다. */
.ribbon { background: var(--sub-navy); color: var(--white); border-top: 1px solid rgba(255, 255, 255, .14); }
.ribbon__view { position: relative; }
.ribbon__win {
  overflow: hidden; padding-block: var(--sp-4);
  /* 양 끝을 흐리게 — 오른쪽은 멈춤 버튼 자리라 더 길게 흐린다 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 80%, transparent 96%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 80%, transparent 96%);
}
.ribbon__roll { display: flex; width: max-content; animation: ribbon-roll 200s linear infinite; }
@keyframes ribbon-roll { to { transform: translateX(-50%); } }

.ribbon__list {
  flex: none; display: flex; align-items: center;
  gap: var(--sp-12); padding-right: var(--sp-12);
}
.ribbon__list li {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .80);
}
.ribbon__list svg { width: 18px; height: 18px; flex: none; color: var(--point); opacity: .75; }

.ribbon__view.is-paused .ribbon__roll,
.ribbon__view:hover .ribbon__roll,
.ribbon__view:focus-within .ribbon__roll { animation-play-state: paused; }

.ribbon__pause {
  position: absolute; top: 50%; right: var(--sp-3); z-index: 1;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap); border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .34); background: var(--sub-navy);
  color: var(--white); font-size: 12px; letter-spacing: -.05em;
  transition: background-color var(--ease);
}
.ribbon__pause:hover { background: var(--brand-700); }
.ribbon__pause:focus-visible { outline-color: var(--white); }

@media (min-width: 768px) {
  .ribbon__win { padding-block: var(--sp-5); }
  .ribbon__list li { font-size: 17px; }
  .ribbon__pause { right: var(--sp-6); }
}
@media (min-width: 1024px) {
  /* PC — 넓은 띠에 비해 글자가 작아 보이지 않게 한 단계 키운다 */
  .ribbon__list { gap: var(--sp-16); padding-right: var(--sp-16); }
  .ribbon__list li { font-size: 18px; gap: var(--sp-3); }
  .ribbon__list svg { width: 18px; height: 18px; }
}

/* 모션 최소화 — 흐르지 않고 두 문구를 한 번씩만 펼쳐 보인다. 멈출 것이 없으니 버튼도 숨긴다. */
@media (prefers-reduced-motion: reduce) {
  .ribbon__win { -webkit-mask-image: none; mask-image: none; }
  .ribbon__roll { width: auto; animation: none; }
  .ribbon__list[aria-hidden="true"],
  .ribbon__list li[aria-hidden="true"] { display: none; }
  .ribbon__list {
    min-width: 0; width: 100%; flex-wrap: wrap; justify-content: center;
    gap: var(--sp-2) var(--sp-6); padding-inline: var(--sp-5);
  }
  .ribbon__list li { white-space: normal; }
  .ribbon__pause { display: none; }
}

/* ── 09. 카드 (가이드 §5 ServiceCard · CaseCard) ──────────────── */
.card {
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--ink-200); border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
@media (min-width: 1024px) { .card { padding: var(--sp-8); } }

.card:hover { transform: translateY(-4px); border-color: var(--brand-300); box-shadow: var(--sh-card-hover); }
.card:active { transform: translateY(0); box-shadow: var(--sh-card); }
/* 키보드로 카드 안 링크에 닿으면 카드 전체가 포커스를 받은 것으로 보인다 */
.card:focus-within { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* 카드 전체를 클릭 판으로. 탭 순서에는 링크가 1개만 들어간다 (가이드 §8) */
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__link:focus-visible { outline: none; }
.card__title { margin-bottom: var(--sp-2); }

/* 출장 가능 지역 — 모바일 1열 → md 3열. 메인 진행 과정 · 보증과 같은 판 없는 글자 목록:
   위 굵은 선(옅은 파랑) · 핀 아이콘 · 지역(크게) + 동네(작게) */
/* 지역 이름만 남아 짧다 — 모바일도 세 칸 한 줄(세로로 쌓으면 빈 줄 셋이 화면을 길게 차지했다) */
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 768px) {
  .areas { gap: var(--sp-8); }
}
.area { display: block; padding-top: var(--sp-4); border-top: 2px solid var(--brand-200); }
.area__icon { display: block; width: 22px; height: 22px; margin-bottom: var(--sp-2); color: var(--brand-500); }
.area__name { display: block; font-size: clamp(22px, 6vw, 32px); line-height: 1.2; font-weight: 800; letter-spacing: -.035em; color: var(--ink-900); }

/* ── 정보 카드 — "다시 찾는 이유"(.point) ─────────────────────────
     · 면      섹션 바탕의 반대색 한 장 · 모서리 --r-card(16px) · 테두리 · 그림자 · 떠오름 없음
     · 순서    제목 → 설명, 모든 화면에서 세로로 쌓는다
     · 글자    제목 20~24px · 800 / 설명 15 → 16px · 줄간격 1.65 — 진행 과정 타임라인(13절 .tl)과 같다
     · 문구    제목 한 줄 · 설명 한 줄
     · 링크 없음 — 정보 카드다. 표시 없는 링크는 고객이 알아보지 못한다 */
.point {
  position: relative;
  padding: var(--sp-6); border-radius: var(--r-card);
}
.point__title {
  font-size: clamp(20px, 5.2vw, 24px); line-height: 1.32; font-weight: 800;
  letter-spacing: -.03em; color: var(--ink-900); text-wrap: balance;
}
.point__desc { margin-top: var(--sp-3); font-size: 15px; line-height: 1.65; color: var(--ink-700); }
@media (min-width: 768px) { .point__desc { font-size: var(--fs-body); } }
@media (min-width: 1024px) { .point { min-height: 176px; padding: var(--sp-8); } }

/* 다시 찾는 이유 — 미스트 카드 세 장 */
.point { display: flex; flex-direction: column; height: 100%; background: var(--sub-mist); }

/* 제목 = 설명어(작게) + 핵심어(크게). 핵심어가 이 섹션에서 가장 큰 글자다(문구를 디자인으로).
   색은 .t-accent 와 같은 노란 형광펜 밑줄(04절), 사진 카드에서는 노란 글자로 덮는다. */
.point__title { display: flex; flex-direction: column; }
.point__cap { font-size: var(--fs-caption); font-weight: 800; letter-spacing: .02em; }
.point__key {
  align-self: flex-start; margin-top: var(--sp-1);
  font-size: clamp(48px, 13vw, 72px); line-height: 1; letter-spacing: -.05em;
}
/* 태블릿 세 칸은 카드가 좁아 "직접 시공" 이 꺾이지 않게 한 단계 줄인다 */
@media (min-width: 768px)  { .point__key { font-size: clamp(36px, 4.6vw, 44px); } }
@media (min-width: 1024px) { .point__key { font-size: clamp(44px, 4.6vw, 64px); } }
.point__title + .point__desc { margin-top: var(--sp-4); }

/* 사진 카드 — 카드 내용을 증명하는 실사진을 깐다.
     "20년 현장 경력" ← 지하 주차장 고압세척 현장(main-sec3-1.jpg · 인물이 오른쪽 → .point__bg--right)
     "못 찾으면 0원"  ← 누수 지점만 부분 보수한 바닥(main-sec3-2.jpg · 수전 · 보수 자국이 가운데 → 기본 위치)
     "대표가 직접 시공" ← 대표가 직접 탐지하는 장면(main-sec3-3.jpg · 얼굴이 위쪽 → 기본 위치)
   글은 카드 아래에 모으고
   덮개는 아래만 진하게(네이비 94% → 위 10%) 깔아 위쪽 사진이 살아 있게 한다.
   글자는 흰색, 핵심어는 네이비 위 규칙대로 노란 글자(밑줄 없음 · 11.4:1).
   카드 높이 — 모바일은 한 줄에 한 장이라 최소 240px(글 덩어리 + 위쪽 사진 띠가 보일 만큼만. 360px 은 세 장이 화면 세 장을 넘게 차지했다).
   태블릿 세 칸부터 최소 360px · PC 400px — 같은 줄 카드도 그리드가 같은 높이로 맞춘다. */
.point--photo {
  overflow: hidden; isolation: isolate;
  justify-content: flex-end; min-height: 240px; padding: var(--sp-5);
  background: var(--sub-navy);
}
.point__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
}
/* 사람이 사진 오른쪽에 있는 가로 사진 — 카드 폭으로 잘려도 사람이 남게 오른쪽을 기준으로 자른다 */
.point__bg--right { object-position: 72% 40%; }
.point--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(11, 30, 69, .94) 0%, rgba(11, 30, 69, .80) 38%, rgba(11, 30, 69, .25) 68%, rgba(11, 30, 69, .10) 100%);
}
.point--photo .point__title { color: rgba(255, 255, 255, .84); }
.point--photo .point__key { color: var(--point); background: none; padding: 0; }
.point--photo .point__desc { color: rgba(255, 255, 255, .84); }
@media (min-width: 768px)  { .point--photo { min-height: 360px; padding: var(--sp-6); } }
@media (min-width: 1024px) { .point--photo { min-height: 400px; padding: var(--sp-8); } }

/* 사진 카드 호버 — 사진을 살리는 두 가지 움직임. 카드 자체는 떠오르지 않는다(정보 카드 규칙).
     ① 배경 사진이 천천히 확대된다
     ② 제목 · 설명 묶음이 살짝 위로 올라온다
   마우스가 있는 기기에서만 움직인다(터치에서 hover 가 눌린 채 남는 것을 막는다).
   모션 최소화 설정이면 18절이 전환을 걷어낸다. */
.point__bg { transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.point--photo .point__title,
.point--photo .point__desc { transition: transform 400ms ease-out; }
@media (hover: hover) {
  .point--photo:hover .point__bg { transform: scale(1.07); }
  .point--photo:hover .point__title,
  .point--photo:hover .point__desc { transform: translateY(-6px); }
}

/* 시공 사례 카드 — "다시 찾는 이유" 사진 카드와 같은 문법(시안 D)
     · 사진 전면 + 아래만 진한 네이비 덮개(94% → 위 10%) · 글은 카드 아래 · 모서리 16px · 테두리 · 그림자 없음
     · 날짜(작게 · 흰 84%) → 제목(흰 · 굵게 · 두 줄까지)
     · 카드 전체가 블로그 글 한 링크(제목 링크의 ::after). 탭 순서에는 링크 하나
     · 호버: 사진 확대 + 글 살짝 올림. 카드 자체는 떠오르지 않는다. 마우스가 있는 기기에서만
   카드 높이 = 슬라이드 높이(같은 화면의 카드들이 높이를 맞춘다). */
.cs-grid > li { display: flex; }   /* 시공 사례 페이지 — 같은 줄 카드 높이를 맞춘다 */
.cs-grid > li[hidden] { display: none; }
.cs-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; flex: 1;
  height: 100%; min-height: 320px; padding: var(--sp-6);
  border-radius: var(--r-card); background: var(--sub-navy);
}
.cs-card__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}
.cs-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(11, 30, 69, .94) 0%, rgba(11, 30, 69, .80) 38%, rgba(11, 30, 69, .25) 68%, rgba(11, 30, 69, .10) 100%);
}
.cs-card__cap {
  font-size: var(--fs-caption); font-weight: 800; letter-spacing: .02em; color: rgba(255, 255, 255, .84);
  transition: transform 400ms ease-out;
}
.cs-card__title {
  margin-top: var(--sp-2);
  font-size: clamp(18px, 4.8vw, 21px); line-height: 1.4; font-weight: 800; letter-spacing: -.02em; color: var(--white);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: transform 400ms ease-out;
}
.cs-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* 카드 전체가 한 링크 */
.cs-card__title a:focus-visible { outline: none; }
.cs-card:focus-within { outline: 2px solid var(--brand-500); outline-offset: 3px; }
@media (hover: hover) {
  .cs-card:hover .cs-card__bg { transform: scale(1.07); }
  .cs-card:hover .cs-card__cap,
  .cs-card:hover .cs-card__title { transform: translateY(-6px); }
}
@media (min-width: 1024px) { .cs-card { min-height: 380px; padding: var(--sp-8); } }

/* 시공 종류 배지 — 카드 왼쪽 위. 사진 위에서 가장 먼저 읽힌다(고객은 "내 문제와 같은 공사" 를 먼저 찾는다).
     · 첫 배지(주 시공) 노랑 바탕 + 네이비 글자 — 포인트색은 사례당 하나
     · 둘째 배지 흰 바탕 + 네이비 글자
   반투명이 아닌 꽉 찬 판이라 사진 밝기와 상관없이 읽힌다.
   배지는 링크가 아니다 — 카드 링크 판(::after) 아래에 깔려 눌러도 글로 이동한다. */
.cs-kinds {
  position: absolute; top: var(--sp-5); left: var(--sp-5); right: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.cs-kinds li {
  padding: 5px var(--sp-3); border-radius: var(--r-pill);
  background: var(--white); color: var(--sub-navy);
  font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em;
}
.cs-kinds li:first-child { background: var(--point); }
@media (min-width: 1024px) {
  .cs-kinds { top: var(--sp-6); left: var(--sp-6); right: var(--sp-6); }
  .cs-kinds li { font-size: var(--fs-caption); }
}

/* ── 실제 현장 기록(메인) — 시공 종류 탭 + 대표 카드 + 목록 3개씩 쪽 넘김 ─────────────
   · 탭(.cxd__tab)        네이비로 채우면 선택. 모바일은 옆으로 밀어 본다
   · 대표 카드(.cxb__lead) 사진 전면 + 아래 네이비 덮개 위 흰 글자 · 노란 제목. 사진은 두 장(앞 .is-front · 뒤)을 겹쳐
                           투명도만 0.5초에 바꾼다(깜박임 없음). 좌우 화살표(.cxd__arrow)는 카드 밖으로 반쯤 걸친다
   · 목록(.cxb__item)     [사진 + 번호 배지 | 종류 · 날짜 · 제목(두 줄) · 보기]. 지금 보이는 줄(.is-active)은 파랑
   · 쪽 넘김(.cxd__pager)  3개씩. 모든 화면에 숫자로 보인다(좁은 화면은 버튼 폭만 줄인다)
   · 한국어 낱말 단위 줄바꿈 · 글자 4단계(28/24 · 17/15 · 15 · 13) · 간격 8px 배수
   동작은 main.js 4b 가 상태(.is-active · .is-front · hidden · aria-*)와 글자만 바꾼다 */
.cxb h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cxb__lead {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 420px; border-radius: var(--r-card); background: var(--sub-navy); color: var(--white); }
.cxb__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.cxb__lead::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(11, 30, 69, .95) 0%, rgba(11, 30, 69, .8) 38%, rgba(11, 30, 69, .15) 70%, rgba(11, 30, 69, 0) 100%); }
.cxb__body { position: relative; padding: var(--sp-6); }
.cxb__date { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); color: rgba(255, 255, 255, .8); }
.cxb__new { padding: 3px var(--sp-2); border-radius: var(--r-pill); background: rgba(255, 255, 255, .16); color: var(--white); font-weight: 800; }
.cxb__title { margin-top: var(--sp-2); font-size: clamp(22px, 5.8vw, 30px); line-height: 1.3; font-weight: 800; letter-spacing: -.035em; color: var(--point); }
.cxb__summary {
  margin-top: var(--sp-3); font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .85);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cxb__list { display: grid; align-content: space-between; }
.cxb__item {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 84px; column-gap: var(--sp-3); align-items: center;
  padding-block: var(--sp-4); border-top: 2px solid var(--brand-200); }
.cxb__item:first-child { border-top-color: var(--brand-500); }
.cxb__no { font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--brand-200); }
.cxb__item:first-child .cxb__no { color: var(--brand-500); }
.cxb__meta { display: flex; align-items: center; gap: var(--sp-2); font-size: 12px; color: var(--ink-500); }
.cxb__kind { font-weight: 800; color: var(--ink-700); }
.cxb__itemtitle {
  margin-top: 2px; font-size: 16px; line-height: 1.4; font-weight: 800; letter-spacing: -.025em; color: var(--ink-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cxb__thumb { width: 84px; height: 64px; object-fit: cover; border-radius: var(--r-btn); }
@media (hover: hover) {
.cxb__lead:hover .cxb__bg { transform: scale(1.05); }
.cxb__item:hover .cxb__itemtitle { color: var(--brand-500); }
}
@media (min-width: 768px) {
.cxb__body { padding: var(--sp-8); }
.cxb__item { grid-template-columns: 64px minmax(0, 1fr) 112px; }
.cxb__no { font-size: 40px; }
.cxb__thumb { width: 112px; height: 84px; }
.cxb__itemtitle { font-size: 17px; }
}
@media (min-width: 1024px) {
.cxb__lead { min-height: 520px; }
.cxb__body { padding: var(--sp-10); }
}
.cxd .cxb { display: grid !important; gap: var(--sp-6); }
/* 글이 3개보다 적은 탭(막힘 해결 등)도 목록 세 줄 자리를 차지한다 — 탭을 바꿔도 섹션 높이 · 대표 카드 크기가 그대로 */
.cxd .cxb__list { min-height: 234px; }   /* 모바일 줄(약 78px) × 3 */
@media (min-width: 1024px) { .cxd .cxb { min-height: 530px; } .cxd .cxb__list { min-height: 0; } }   /* PC 대표 카드 = 목록 3줄 + 쪽 번호 높이 */
@media (min-width: 1024px) { .cxd .cxb { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.cxd .cxb[hidden] { display: none !important; }
.cxd__tabs { display: flex; gap: var(--sp-2); margin: calc(var(--sp-2) * -1) 0 var(--sp-6); overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
.cxd__tabs::-webkit-scrollbar { display: none; }
.cxd__tab {
  flex: none; min-height: var(--tap); padding-inline: var(--sp-4); border-radius: var(--r-pill);
  border: 1px solid var(--ink-200); background: var(--white); font-size: 15px; font-weight: 700; color: var(--ink-700);
  transition: background-color var(--ease), color var(--ease), border-color var(--ease); }
.cxd__tab:hover { border-color: var(--brand-300); }
.cxd__tab[aria-selected="true"] { background: var(--sub-navy); border-color: var(--sub-navy); color: var(--white); }
/* .7 은 선택 안 된 탭(흰 바탕 · ink-700)에서 4.33:1 이라 기준(4.5)에 못 미친다.
   .8 이면 흰 바탕 5.71 · 네이비 10.78 로 두 상태 모두 통과한다. */
.cxd__n { margin-left: 2px; font-size: 13px; opacity: .8; }
@media (min-width: 768px) {
.cxd__tabs { justify-content: center; }
}
.cxd .cxb__body, .cxd .cxb__bg { transition: opacity 160ms ease-out, transform 700ms cubic-bezier(.2, .7, .2, 1); }
.cxd .cxb__bg { opacity: 0; transition: opacity 500ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1); }
.cxd .cxb__bg.is-front { opacity: 1; }
.cxd .cxb__bg[data-l-img]:not(.is-ready) { opacity: 1; }
.cxd .cxb__body { transition: opacity 140ms ease-out; }
.cxd .cxb__body.is-fade { opacity: .8; }
@media (prefers-reduced-motion: reduce) {
.cxd .cxb__bg, .cxd .cxb__body { transition: none; }
}
.cxd .cxb__item:first-child { border-top-color: var(--brand-200); }
.cxd .cxb__item:first-child .cxb__no { color: var(--brand-200); }
.cxd .cxb__item.is-active { border-top-color: var(--brand-500); }
.cxd .cxb__item.is-active .cxb__no { color: var(--brand-500); }
.cxd .cxb__item.is-active .cxb__itemtitle { color: var(--brand-500); }
.cxd .cxb__list { align-content: start; }
.cxd .cxb__lead { touch-action: pan-y; }
@media (min-width: 1024px) {
}
.cxd__ctas { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-5); }
.cxd__ctas .btn { min-height: 52px; padding-inline: var(--sp-3); font-size: 15px; font-weight: 800; }
.cxd__ctas .btn svg { width: 18px; height: 18px; }
.cxd__view { border: 1px solid rgba(255, 255, 255, .7); color: var(--white); background: transparent; }
.cxd__view:hover { background: rgba(255, 255, 255, .12); border-color: var(--white); }
.cxd__call:hover { transform: translateY(-2px); }
@media (min-width: 768px) {
.cxd__ctas { display: flex; }
.cxd__ctas .btn { padding-inline: var(--sp-6); }
}
.cxd__go {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sp-2);
  min-height: 36px; padding-inline: var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid var(--brand-400); background: var(--white); color: var(--brand-500);
  font-size: 13px; font-weight: 800; transition: background-color var(--ease), color var(--ease); }
.cxd__go::after { content: ""; position: absolute; inset: -4px; }
.cxd__go svg { width: 14px; height: 14px; transition: transform var(--ease); }
.cxd__go:hover { background: var(--brand-500); color: var(--white); }
.cxd__go:hover svg { transform: translateX(3px); }
.cxd .cxb__item.is-active .cxd__go { background: var(--brand-500); border-color: var(--brand-500); color: var(--white); }
.cxd .cxb__item { align-items: start; }
.cxd .cxb__thumb { align-self: center; }
/* 쪽 번호는 모든 화면에 둔다.
   모바일에서 44px 버튼 8개는 380px 이 필요해 320px 화면(자리 280px)에서 넘쳤다.
   그래서 좁은 화면에서는 버튼 폭을 32px 로 줄인다 — 높이 44px 는 그대로라 누르기 어렵지 않고
   가로 32px 도 WCAG 2.5.8(24x24)을 넘는다.
   줄바꿈도 함께 켠다 — 블로그 글이 늘어 쪽수가 많아져도 밖으로 나가지 않고 다음 줄로 접힌다. */
.cxd__pager {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-1); margin-top: var(--sp-4);
}
.cxd__pg {
  display: inline-grid; place-items: center; min-width: var(--tap); height: var(--tap); padding-inline: var(--sp-2);
  border-radius: var(--r-pill); border: 1px solid transparent; background: transparent;
  font-size: 15px; font-weight: 800; color: var(--ink-700); transition: background-color var(--ease), color var(--ease), border-color var(--ease); }
.cxd__pg:hover:not(:disabled) { border-color: var(--brand-300); color: var(--brand-500); }
.cxd__pg[aria-current="page"] { background: var(--sub-navy); color: var(--white); }
.cxd__pg svg { width: 18px; height: 18px; }
.cxd__pg--prev svg { transform: scaleX(-1); }
.cxd__pg:disabled { opacity: .3; cursor: default; }
/* 좁은 화면 — 버튼 폭만 줄여 8개가 한 줄에 선다(높이 44px 는 그대로).
   반드시 .cxd__pg 기본 규칙 뒤에 둔다. 앞에 두면 같은 명시도라 뒤의 min-width:44px 에 덮인다. */
@media (max-width: 1023.98px) {
  .cxd__pager { gap: 2px; }
  .cxd__pg { min-width: 32px; padding-inline: 0; font-size: 14px; }
}
@media (min-width: 1024px) {
.cxd .cxb { grid-template-rows: auto 1fr; }
.cxd .cxb__lead { grid-row: 1 / span 2; }
.cxd .cxd__pager { grid-column: 2; align-self: end; justify-content: flex-start; }
}
.cxd .cxb__item[hidden] { display: none; }
@media (max-width: 1023.98px) {
.cxd .cxb__item {
    grid-template-columns: 30px minmax(0, 1fr) 52px auto; column-gap: var(--sp-2); align-items: center;
    padding-block: var(--sp-2); }
.cxd .cxb__item > div { display: contents; }
.cxd .cxb__no { font-size: 20px; }
.cxd .cxb__meta { display: none; }
.cxd .cxb__itemtitle { grid-column: 2; grid-row: 1; margin: 0; font-size: 15px; -webkit-line-clamp: 1; }
.cxd .cxb__thumb { grid-column: 3; grid-row: 1; width: 52px; height: 40px; border-radius: 8px; }
.cxd .cxd__go { grid-column: 4; grid-row: 1; margin: 0; min-height: 36px; padding-inline: var(--sp-2); font-size: 12px; }
.cxd .cxd__go svg { display: none; }
}
@media (max-width: 1023.98px) {
.cxd__go-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.cxd .cxd__go { min-width: var(--tap); justify-content: center; }
}
@media (max-width: 1023.98px) {
.cxd .cxb__itemtitle { -webkit-line-clamp: 2; line-height: 1.35; }
.cxd .cxb__item { padding-block: var(--sp-3); }
}
@media (max-width: 1023.98px) {
.cxd .cxb__item { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: var(--sp-3); }
.cxd .cxb__thumb { grid-column: 1; grid-row: 1; width: 64px; height: 52px; }
.cxd .cxb__no {
    grid-column: 1; grid-row: 1; align-self: start; justify-self: start; z-index: 1; position: relative;
    margin: 4px 0 0 4px; padding: 2px 6px; border-radius: 6px;
    background: rgba(11, 30, 69, .78); color: var(--white); font-size: 12px; line-height: 1.2; letter-spacing: 0; }
.cxd .cxb__item.is-active .cxb__no { background: var(--brand-500); color: var(--white); }
.cxd .cxb__itemtitle { grid-column: 2; }
.cxd .cxd__go { grid-column: 3; }
}
@media (min-width: 1024px) {
.cxd .cxb__item { grid-template-columns: 136px minmax(0, 1fr); column-gap: var(--sp-5); align-items: center; }
.cxd .cxb__thumb { grid-column: 1; grid-row: 1; width: 136px; height: 102px; border-radius: var(--r-btn); }
.cxd .cxb__no {
    grid-column: 1; grid-row: 1; align-self: start; justify-self: start; z-index: 1; position: relative;
    margin: 6px 0 0 6px; padding: 3px 8px; border-radius: 6px;
    background: rgba(11, 30, 69, .78); color: var(--white); font-size: 14px; line-height: 1.2; letter-spacing: 0; }
.cxd .cxb__item.is-active .cxb__no { background: var(--brand-500); color: var(--white); }
.cxd .cxb__item > div { grid-column: 2; grid-row: 1; }
}
.cxd__arrow {
  position: absolute; top: 40%; z-index: 3; transform: translateY(-50%);
  display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%;
  background: rgba(255, 255, 255, .88); color: var(--sub-navy); box-shadow: 0 6px 16px rgba(11, 30, 69, .25);
  transition: background-color var(--ease), transform var(--ease); }
.cxd__arrow svg { width: 20px; height: 20px; }
.cxd__arrow--prev { left: var(--sp-3); }
.cxd__arrow--prev svg { transform: scaleX(-1); }
.cxd__arrow--next { right: var(--sp-3); }
.cxd__arrow:hover { background: var(--white); }
.cxd__arrow:active { transform: translateY(-50%) scale(.94); }
@media (min-width: 1024px) {
.cxd__arrow { width: 52px; height: 52px; opacity: 0; transition: opacity var(--ease), background-color var(--ease); }
.cxd .cxb__lead:hover .cxd__arrow, .cxd__arrow:focus-visible { opacity: 1; }
}
@media (max-width: 1023.98px) {
.cxd__arrow { top: 30%; }
}
.cxd__arrow, .cxd .cxd__arrow { top: 50%; }
@media (max-width: 1023.98px) {
.cxd__arrow { top: 50%; }
}
.cxd__arrow--prev { left: var(--sp-2); }
.cxd__arrow--next { right: var(--sp-2); }
.cxd .cxb__lead .cxb__body { padding-inline: 60px; }
@media (min-width: 1024px) {
.cxd .cxb__lead .cxb__body { padding-inline: 76px; }
}
.cxd .cxb__lead { overflow: visible; }
.cxd .cxb__bg, .cxd .cxb__lead::after { border-radius: inherit; }
.cxd .cxb__lead:hover .cxb__bg { transform: none; }
.cxd__arrow--prev { left: -20px; }
.cxd__arrow--next { right: -20px; }
.cxd .cxb__lead .cxb__body { padding-inline: var(--sp-8); }
@media (min-width: 1024px) {
.cxd__arrow--prev { left: -26px; }
.cxd__arrow--next { right: -26px; }
.cxd .cxb__lead .cxb__body { padding-inline: var(--sp-10); }
}
.cxd :is(h3, p, a, li, em) { word-break: keep-all; overflow-wrap: anywhere; }
.cxd .cxb__title { font-size: clamp(22px, 5.6vw, 28px); line-height: 1.32; text-wrap: balance; }
.cxd .cxb__summary { font-size: 15px; line-height: 1.65; text-wrap: pretty; }
.cxd .cxb__date { font-size: 13px; }
.cxd .cxb__itemtitle { font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.cxd .cxb__meta { font-size: 13px; }
.cxd .cxb__body { padding: var(--sp-6) var(--sp-6) var(--sp-6); }
.cxd .cxd__ctas { margin-top: var(--sp-5); }
.cxd .cxd__tabs { margin-bottom: var(--sp-6); }
.cxd .cxb__item { border-top-width: 1px; border-top-color: var(--ink-200); }
.cxd .cxb__item.is-active { border-top: 2px solid var(--brand-500); }
.cxd .cxb__item:last-of-type { border-bottom: 1px solid var(--ink-200); }
@media (min-width: 768px) {
.cxd .cxb__body { padding: var(--sp-8); }
.cxd .cxb__itemtitle { font-size: 17px; }
}
@media (min-width: 1024px) {
.cxd .cxb { gap: var(--sp-8); align-items: stretch; }
.cxd .cxb__lead { min-height: 0; height: 100%; }
.cxd .cxb__item { min-height: 134px; padding-block: var(--sp-4); }
.cxd .cxb__body { padding: var(--sp-8) var(--sp-10); }
.cxd .cxd__pager { margin-top: var(--sp-4); }
}

/* Swiper 공용 셸 — 시공 사례와 고객 후기가 같이 쓴다.
   JS 가 늦게 뜨거나 실패해도 가로로 넘길 수 있도록 스크롤 스냅을 미리 깔아 둔다.
   Swiper 가 초기화되면 .swiper-initialized 가 붙고 아래 규칙이 덮어쓴다.
   새 슬라이더를 붙일 때는 마크업에 data-slider="키" 를 주고 main.js 5절의
   SLIDERS 에 항목만 추가한다. CSS 는 손대지 않는다. */
.slider { position: relative; }
.slider__track { overflow: hidden; }
.slider__track .swiper-wrapper {
  display: flex; gap: var(--sp-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: var(--sp-2);
}
.slider__track .swiper-wrapper::-webkit-scrollbar { display: none; }
.slider__track .swiper-slide { flex: 0 0 84%; scroll-snap-align: center; height: auto; }
@media (min-width: 768px)  { .slider__track .swiper-slide { flex-basis: 48%; } }
@media (min-width: 1024px) { .slider__track .swiper-slide { flex-basis: 31.5%; } }

.slider__track.swiper-initialized .swiper-wrapper {
  gap: 0; overflow: visible; padding-bottom: 0; scroll-snap-type: none;
}
/* flex: initial 로 되돌리면 flex-shrink 가 1 이 되어 Swiper 의 flex-shrink:0 을
   덮어쓴다. 그러면 슬라이드 전부가 트랙 폭에 맞춰 찌그러진다. 반드시 0 0 auto. */
.slider__track.swiper-initialized .swiper-slide { flex: 0 0 auto; }

/* 페이지네이션 점 */
.slider__dots { position: static; margin-top: var(--sp-5); }
.slider .swiper-pagination-bullet {
  width: 8px; height: 8px; background: var(--ink-200); opacity: 1;
  transition: width var(--ease), background-color var(--ease);
}
.slider .swiper-pagination-bullet-active {
  width: 24px; border-radius: var(--r-pill); background: var(--brand-500);
}

/* 이전·다음 화살표 — 슬라이드 양옆에 걸쳐 둔다. 모든 해상도에서 보인다.
   모바일은 화면이 좁으므로 버튼을 줄이고 카드 바깥쪽으로 붙인다. */
.slider__nav {
  display: inline-flex;
  position: absolute; top: 50%; z-index: 3;
  transform: translateY(-50%);
  align-items: center; justify-content: center;
  /* 최소 탭 크기 44px. 왼쪽/오른쪽 -12px 는 그대로라 커진 만큼 안쪽으로만 자란다 */
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--ink-200); border-radius: 50%;
  background: var(--white); color: var(--ink-900);
  box-shadow: 0 6px 18px rgba(17, 24, 39, .16);
  transition: background-color var(--ease), border-color var(--ease),
              color var(--ease), opacity var(--ease);
}
.slider__nav svg { width: 18px; height: 18px; }
/* 같은 화살표 스프라이트를 좌우로 뒤집어 쓴다 */
.slider__nav--prev svg { transform: scaleX(-1); }
/* 컨테이너 좌우 여백(20px) 안쪽까지만 빼서 가로 스크롤이 생기지 않게 한다 */
.slider__nav--prev { left: -12px; }
.slider__nav--next { right: -12px; }

.slider__nav:hover { border-color: var(--brand-500); background: var(--sub-mist); color: var(--brand-500); }
.slider__nav:active { background: var(--brand-100); }
/* 끝에 닿으면 흐려지고 클릭도 막는다 */
.slider__nav.swiper-button-disabled { opacity: .35; cursor: default; pointer-events: none; }
/* 슬라이드가 한 화면 수보다 적으면 Swiper 가 .swiper-button-lock 을 붙인다.
   우리 .slider__nav 의 display 와 명시도가 같아 이 규칙이 없으면 죽은 화살표가 남는다. */
.slider__nav.swiper-button-lock { display: none; }

@media (min-width: 768px) {
  .slider__nav { width: 48px; height: 48px; }
  .slider__nav svg { width: 20px; height: 20px; }
  .slider__nav--prev { left: -16px; }
  .slider__nav--next { right: -16px; }
}
@media (min-width: 1280px) {
  /* 화면이 넓으면 카드를 덜 가리도록 바깥으로 더 뺀다 */
  .slider__nav { width: 52px; height: 52px; }
  .slider__nav--prev { left: -26px; }
  .slider__nav--next { right: -26px; }
}

/* ── 09c. 서브페이지 전용 — 시공 사례 필터 · 회사 소개 본문 ──────
   cases.php 와 about.php 만 쓴다. 시안 시트에 있던 것을 옮겨 왔다. */
/* 시공 사례 분류 필터 — 알약형 토글.
   LNB 와 생김새가 비슷하다고 .lnb__list 를 빌려 쓰면 안 된다.
   그쪽은 lg 에서 세로 sticky 사이드바로 바뀌어 필터가 세로로 무너진다. */
.filters {
  display: flex; gap: var(--sp-2);
  margin-inline: calc(var(--sp-5) * -1);
  padding-inline: var(--sp-5); padding-block: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                  /* 모바일에서 스크롤바를 감춘다 */
}
.filters::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .filters { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
}

.filters__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--tap); flex-shrink: 0;
  padding-inline: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--ink-200); border-radius: var(--r-pill);
  font-size: var(--fs-caption); font-weight: 600; color: var(--ink-700);
  white-space: nowrap;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.filters__btn:hover { border-color: var(--brand-300); background: var(--sub-mist); }
.filters__btn:active { background: var(--brand-100); }

/* 선택 상태는 aria-pressed 가 쥔다. JS 는 속성만 바꾸고 그리기는 CSS 가 한다. */
.filters__btn[aria-pressed="true"] {
  background: var(--brand-500); border-color: var(--brand-500); color: var(--white);
}

.filters__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding-inline: 6px;
  border-radius: var(--r-pill);
  background: var(--sub-mist); color: var(--ink-500);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.filters__btn[aria-pressed="true"] .filters__n {
  background: rgba(255, 255, 255, .22); color: var(--white);
}

/* 회사 소개 메인 이미지 — 사진 아래쪽에 카피를 얹는다 */
.intro { position: relative; overflow: hidden; border-radius: var(--r-card); }
.intro img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 768px) { .intro img { aspect-ratio: 16 / 9; } }

.intro__cap {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-8) var(--sp-5) var(--sp-6);
  color: var(--white); text-align: center;
  /* 사진이 밝아도 글자가 읽히도록 아래쪽을 어둡게 깐다 */
  background: linear-gradient(to top, rgba(11, 30, 69, .78), rgba(11, 30, 69, 0));
}
.intro__cap strong {
  font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3;
}
.intro__cap span { font-size: var(--fs-caption); opacity: .9; }
@media (min-width: 768px) {
  .intro__cap { padding: var(--sp-12) var(--sp-8) var(--sp-8); }
  .intro__cap strong { font-size: 28px; }
  .intro__cap span { font-size: var(--fs-body); }
}
@media (min-width: 1024px) {
  .intro__cap strong { font-size: 34px; }
}

/* 소개 본문 — 읽는 글이므로 줄 길이를 제한한다 */
.prose { max-width: 62ch; margin-inline: auto; margin-top: var(--sp-10); }
.prose p + p { margin-top: var(--sp-5); }
.prose__close {
  margin-top: var(--sp-8); padding-top: var(--sp-6);
  border-top: 1px solid var(--ink-200);
  font-weight: 700; color: var(--ink-900);
}
.prose__sign {
  margin-top: var(--sp-4); text-align: right;
  font-size: var(--fs-caption); color: var(--ink-500);
}
.prose__sign strong { font-size: var(--fs-body); color: var(--ink-900); }

/* ── 09d. 서비스 안내 — 한 줄에 하나, 오른쪽에서 사진이 스며든다 ─────────
   고객은 이 목록에서 "내 증상" 을 찾는 순간 전화할 마음이 가장 크다.
   그래서 줄마다 바로 거는 버튼을 둔다(data-cta 가 서비스별로 갈린다).
   글자는 흰 판 위에 있고 사진은 오른쪽 58% 에만 깔려, 사진이 무엇이든
   글자 쪽은 흰색이다 — 제목 ink-900 17.74 · 설명 ink-700 10.31.
   사진은 CSS background 가 아니라 <img> 다: lazy 로딩되고 파일만 갈면 된다. */
/* 폭 — 모바일 · 태블릿은 본문 폭 그대로, PC 는 본문 폭 전체(아래 1024 규칙). 전에는 860px 로 묶여 PC 에서
   본문(1,200px) 가운데에 좁게 놓였다. 이 사이트에서 전화로 바로 이어지는 핵심 섹션이라 넓게 쓴다. */
.svcrow { display: grid; gap: var(--sp-3); max-width: 860px; margin-inline: auto; }
.svcrow__item {
  position: relative; overflow: hidden; isolation: isolate;
  /* 버튼이 둘이라 좁은 화면에서는 글자와 한 줄에 못 선다. 모바일은 세로로 쌓는다. */
  display: grid; grid-template-columns: 1fr; align-items: center; gap: var(--sp-3);
  min-height: 96px; padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  /* 흰 카드 — 미스트 섹션 위 반대색 한 장. 옅은 테두리 + 그림자 */
  border-radius: 18px; background: var(--white);
  border: 1px solid var(--ink-200); box-shadow: var(--sh-card);
  transition: box-shadow var(--ease), border-color var(--ease);
}
@media (min-width: 768px) {
  .svcrow__item { grid-template-columns: 1fr auto; min-height: 112px; padding-left: var(--sp-6); }
}
@media (min-width: 1024px) {
  /* PC — 서비스 카드를 본문 폭 전체(860px 제한 해제)로 넓히고 높이를 180px 로 키운다.
     112px 에서는 가로로 긴 사진이 높이에 맞춰 줄어 피사체가 아주 작았다. 사진은 높이에 맞춰 커지고
     (object-fit: cover) 흐린 양끝은 잘려 나가 피사체가 크게 남는다 */
  .svcrow { max-width: none; gap: var(--sp-4); }
  .svcrow__item { min-height: 180px; padding-left: var(--sp-10); padding-right: var(--sp-8); border-radius: var(--r-card); }
}
.svcrow__item:hover { box-shadow: var(--sh-card-hover); border-color: var(--brand-300); }
.svcrow__bg {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: -2;
  /* 사진 폭 — 모바일은 카드의 68%(사진이 넓게 보이게), 태블릿 · PC 는 58% */
  width: 68%; height: 100%; object-fit: cover;
  /* 자르는 기준 — 가로는 오른쪽(100%), 세로는 가운데보다 조금 아래(62%).
     가로: 모바일용(-mo) 사진이 아직 없는 서비스는 PC 사진(왼쪽이 빈 가로 사진)을 모바일에서도 쓴다.
           오른쪽 기준으로 잘라야 빈 왼쪽이 아니라 피사체가 남는다. 모바일용 사진은 폭에 맞춰 들어가 가로 기준과 상관없다.
     세로: 설비(변기 · 세면대 · 배관)는 사진 아래쪽에 있는 경우가 많다 */
  object-position: 100% 62%;
  transition: transform 400ms ease-out;
}
.svcrow__item:hover .svcrow__bg { transform: scale(1.05); }
/* 모바일 · PC 사진 두 벌(<picture>) — picture 를 카드 전체에 깔리는 배경 판으로 그리드 흐름에서 뺀다.
   display: contents 로 풀면 안의 <source> 가 그리드 칸 하나를 차지해(PC 2열에서) 제목 · 버튼이 밀린다.
   안의 img(.svcrow__bg)는 이 판을 기준으로 오른쪽 58%(모바일 68%)에 깔린다. */
.svcrow__item > picture { position: absolute; inset: 0; z-index: -2; }
/* 글자 영역 막 — 카드 바탕색(흰색)으로 깔아, 사진이 카드 바탕으로 자연스럽게 녹아들게 한다.
   막은 글자 영역에만 두고 그 뒤로 짧게 사라져, 사진은 원본 그대로 보인다. 막 색 = 카드 바탕색이어야 이음매가 없다.
     · 모바일: 가장 긴 제목("변기 세면대 수전 교체")이 카드 폭의 58% 까지 뻗는다.
                 54% 까지 흰색, 64% 에서 사라진다 — 제목 끝 지점에서도 흰 막이 60% 남아
                 사진이 새까맣더라도 제목 대비 6.23:1 이다. 여기서 더 당기면(62%) 4.46 으로 기준 아래가 된다.
                 사진이 온전히 드러나는 구간은 카드의 36% (전에는 30%)
     · 태블릿 · PC: 아래 미디어 쿼리 참고(사진 양끝을 흰색으로 녹인다)
   버튼(전화 = 채운 파랑 · 문자 = 흰 판 + 테두리)은 사진 위에 놓여도 판이 있어 읽힌다. */
.svcrow__item::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--white) 54%, rgba(255, 255, 255, 0) 64%);
}
@media (min-width: 768px) {
  /* 태블릿 · PC — 사진을 카드 오른쪽 끝에 붙여 오른쪽 60% 에 깐다.
     사진이 피사체를 오른쪽에 둔 구도라 오른쪽 기준으로 자른다(object-position 100%) — 카드 높이에 맞춰
     확대되면서 잘려 나가는 쪽은 비어 있는 왼쪽이다. 막은 왼쪽(글자 뒤)에만: 40% 까지 흰색, 50% 에서 사라진다. */
  .svcrow__bg { right: 0; width: 60%; object-position: 100% 50%; }
  .svcrow__item::after {
    background: linear-gradient(90deg, var(--white) 40%, rgba(255, 255, 255, .6) 45%, rgba(255, 255, 255, 0) 50%);
  }
}
/* 그리드 칸은 기본 min-width 가 auto 라 긴 제목이 칸을 밀어낸다. 0 으로 풀어 준다. */
.svcrow__text { min-width: 0; }
.svcrow__btns { display: flex; gap: var(--sp-2); }
/* 제목은 이 섹션에서 가장 먼저 읽혀야 한다. 18px 일 때는 카드 안에서 버튼보다 작아
   스크롤하는 눈이 파란 버튼만 따라가고 제목을 지나쳤다(390px 기준 제목 17% · 버튼 32%).
   사례 제목(22px)과 같은 급으로 올린다. */
.svcrow__title {
  display: block; font-size: clamp(20px, 5.6vw, 24px); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.3; color: var(--ink-900);
  transition: color var(--ease);
}
.svcrow__desc { display: block; margin-top: 3px; font-size: var(--fs-caption); color: var(--ink-700); }
@media (min-width: 768px) { .svcrow__desc { font-size: var(--fs-body); } }
/* PC — 카드가 넓고 높아진(180px) 만큼 글자도 키운다. 작은 카드 크기 그대로면 큰 사진 옆에서 글이 작아 보인다 */
@media (min-width: 1024px) {
  .svcrow__title { font-size: 30px; letter-spacing: -.03em; }
  .svcrow__desc { margin-top: var(--sp-2); font-size: 18px; }
}
.svcrow__call {
  display: inline-flex; align-items: center; gap: 6px;
  /* 줄형 카드에서는 40px — 사이트 기본 탭 크기(44px)보다 낮다.
     가로는 100px 이 넘어 WCAG 2.5.8(24x24)은 넉넉히 넘기지만,
     사이트가 지켜 온 44px 기준에서는 벗어난 값이다. */
  min-height: 40px; padding-inline: var(--sp-4); border-radius: var(--r-pill);
  background: var(--brand-500); color: var(--white);
  font-size: var(--fs-caption); font-weight: 800; white-space: nowrap;
  transition: background-color var(--ease);
}
.svcrow__call:hover { background: var(--brand-600); }

/* 문자 버튼(.svcrow__quote)은 전화보다 한 단계 낮춘다 — 이 집의 전환 1순위는 전화다.
   채운 판(전화)과 테두리 판(견적)으로 갈라 둘이 같은 무게로 보이지 않게 한다. */
.svcrow__quote {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding-inline: var(--sp-4); border-radius: var(--r-pill);
  background: var(--white); color: var(--brand-500);
  /* 테두리는 brand-400 — brand-300 은 흰 바탕에서 2.84 라 UI 경계 기준(3:1)에 못 미친다 */
  border: 1px solid var(--brand-400);
  font-size: var(--fs-caption); font-weight: 800; white-space: nowrap;
  transition: background-color var(--ease), border-color var(--ease);
}
.svcrow__quote:hover { background: var(--sub-mist); border-color: var(--brand-500); }
/* 모바일에서는 줄마다 버튼이 둘이면 제목보다 눈에 먼저 들어온다 — 줄형은 전화 하나만 남긴다.
   반드시 .svcrow__btns 안으로 범위를 좁힌다 — 대표 카드(.sv__btns)도 같은 버튼 클래스를 쓰므로
   그냥 숨기면 대표 카드의 문자 보내기까지 사라진다.
   문자 경로는 대표 카드 · 하단 고정 바 · 견적 폼에 그대로 있다.
   PC(1024+)는 카드가 넓어 둘이 나란히 서도 제목을 가리지 않으므로 되살린다. */
.svcrow__btns .svcrow__quote { display: none; }
@media (min-width: 1024px) { .svcrow__btns .svcrow__quote { display: inline-flex; } }
.svcrow__call svg, .svcrow__quote svg { width: 15px; height: 15px; }
/* PC — 버튼도 넓어진 카드에 맞춰 한 단계 크게. 이 섹션의 할 일은 "누르기" 다.
   (기본 버튼 규칙보다 뒤에 둬야 덮이지 않는다) */
@media (min-width: 1024px) {
  .svcrow__btns { gap: var(--sp-3); }
  .svcrow__call, .svcrow__quote { min-height: 52px; padding-inline: var(--sp-6); font-size: var(--fs-body); }
  .svcrow__call svg, .svcrow__quote svg { width: 18px; height: 18px; }
}

/* ── 09e. 서비스 벤토 — 대표 서비스(누수탐지) 큰 카드 + 나머지 넷 ─────────
   누수탐지가 이 집의 주력이라 큰 어두운 사진 카드로 세운다. 나머지 넷은 밝은 사진 카드 —
   바로 아래 "다시 찾는 이유"(어두운 사진 카드 3장)와 모양이 갈린다.
     · PC(1024~)    왼쪽 대표 카드(두 줄 높이 · 세로 사진 svc-leak-lead.jpg) + 오른쪽 2 × 2
     · 태블릿        대표 카드 가로로 위(가로 사진) + 아래 2 × 2
     · 모바일        대표 카드만(약 300px · 약속 목록 숨김) — 나머지 넷은 줄형(.svcrow, 09d)으로 짧게
   작은 카드: 제목 + 설명을 한 묶음으로 사진 아래쪽 네이비 그라데이션 위에 두고, 흰 판에는 반반 버튼만 둔다.
     원래 제목 · 설명(h3 · p)은 화면에서 감추고 스크린리더용으로 둔다(사진 위 글은 aria-hidden).
     대표 카드 높이만큼 늘어날 때 남는 높이는 사진이 받는다 — 흰 판은 버튼 높이만큼(버튼 위 빈칸 없음).
   노랑은 "대표 서비스" 점 하나만. 체크 아이콘은 흰색.
   버튼 모양은 줄형과 같은 문자(테두리) · 전화(채운 파랑) 알약 — 이 규칙들이 09d 버튼 규칙보다 뒤에 있어야 덮인다. */
.sv { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-3); }
.sv__item {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-card); background: var(--white);
  border: 1px solid var(--ink-200); box-shadow: var(--sh-card);
  transition: box-shadow var(--ease), border-color var(--ease);
}
.sv__item:hover { box-shadow: var(--sh-card-hover); border-color: var(--brand-300); }
.sv__media { position: relative; overflow: hidden; background: var(--sub-mist); }
.sv__media picture { display: contents; }
.sv__img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: 100% 60%;   /* 가로 띠 사진은 왼쪽이 빈 구도라 오른쪽 기준으로 자른다 */
  transition: transform 600ms cubic-bezier(.2, .7, .2, 1);
}
.sv__body { display: flex; flex-direction: column; }
.sv__title { font-weight: 800; line-height: 1.3; letter-spacing: -.03em; }
/* 버튼은 반반 꽉 차게 — 엄지로 누르기 쉽다 */
.sv__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.sv__btns a { justify-content: center; min-height: 48px; padding-inline: var(--sp-3); font-size: 15px; }
.sv__btns svg { width: 17px; height: 17px; }

/* 대표 카드 — 사진 전면 + 아래 네이비 덮개 위 흰 글자 */
.sv__item--lead {
  position: relative; isolation: isolate; justify-content: flex-end;
  min-height: 300px; border: 0; background: var(--sub-navy);
}
.sv__item--lead .sv__media { position: absolute; inset: 0; z-index: -2; }
.sv__item--lead .sv__img { object-position: 50% 35%; }
.sv__item--lead::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(11, 30, 69, .96) 0%, rgba(11, 30, 69, .82) 48%, rgba(11, 30, 69, .2) 82%, rgba(11, 30, 69, .05) 100%);
}
.sv__item--lead .sv__body { padding: var(--sp-5); transition: transform 400ms ease-out; }
.sv__badge {
  display: inline-flex; align-items: center; gap: var(--sp-2); align-self: flex-start;
  margin-bottom: var(--sp-3); padding: 5px var(--sp-3); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14); color: var(--white);
  font-size: var(--fs-caption); font-weight: 800; letter-spacing: .02em;
}
.sv__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--point); }
.sv__item--lead .sv__title { font-size: 24px; color: var(--white); }
.sv__item--lead .sv__desc { margin-top: var(--sp-2); font-size: 15px; color: rgba(255, 255, 255, .84); }
.sv__points { display: none; gap: var(--sp-2); margin-top: var(--sp-5); }   /* 모바일은 숨겨 카드를 낮춘다 */
.sv__points li {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-body); font-weight: 700; color: var(--white);
}
.sv__points svg { width: 18px; height: 18px; flex: none; color: var(--white); opacity: .9; }
.sv__item--lead .sv__btns { padding-top: var(--sp-4); }
.sv__item--lead .sv__btns a { font-size: var(--fs-body); }

/* 작은 카드 — 사진(제목 + 설명) 위 · 버튼 아래. 모바일에서는 줄형이 대신한다 */
.sv__item:not(.sv__item--lead) { display: none; }
.sv__item:not(.sv__item--lead) .sv__media { flex: 1 1 auto; aspect-ratio: 16 / 10; }
.sv__item:not(.sv__item--lead) .sv__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11, 30, 69, .9) 0%, rgba(11, 30, 69, .55) 42%, rgba(11, 30, 69, 0) 72%);
}
.sv__over {
  display: flex; flex-direction: column; gap: 2px;
  position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-4); z-index: 1;
  color: var(--white); transition: transform 400ms ease-out;
}
.sv__over b { font-size: 22px; line-height: 1.3; font-weight: 800; letter-spacing: -.03em; }
.sv__over span { font-size: 14px; line-height: 1.45; font-weight: 500; color: rgba(255, 255, 255, .85); }
.sv__item:not(.sv__item--lead) :is(.sv__title, .sv__desc) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.sv__item:not(.sv__item--lead) .sv__body { flex: 0 0 auto; padding: var(--sp-4); }

/* 호버 — 사진 확대 + 글 살짝 올림(카드 자체는 떠오르지 않는다) */
@media (hover: hover) {
  .sv__item:hover .sv__img { transform: scale(1.05); }
  .sv__item--lead:hover .sv__body { transform: translateY(-6px); }
  .sv__item:not(.sv__item--lead):hover .sv__over { transform: translateY(-4px); }
}

/* 모바일 줄형의 첫 줄(누수탐지)은 대표 카드와 겹친다 */
.sv + .svcrow .svcrow__item:first-child { display: none; }

/* 태블릿 — 대표 카드 가로로 위 · 아래 2 × 2. 줄형은 숨긴다 */
@media (min-width: 768px) {
  .svcrow { display: none; }
  .sv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin-bottom: 0; }
  .sv__item:not(.sv__item--lead) { display: flex; }
  .sv__item--lead { grid-column: 1 / -1; min-height: 380px; }
  .sv__item--lead .sv__img { object-position: 66% 70%; }   /* 가로 사진 — 탐지 장비 · 손이 있는 자리 */
  .sv__item--lead::after {
    background: linear-gradient(90deg, rgba(11, 30, 69, .95) 0%, rgba(11, 30, 69, .8) 45%, rgba(11, 30, 69, .1) 80%);
  }
  .sv__item--lead .sv__body { padding: var(--sp-8); max-width: 60%; }
  .sv__badge { margin-bottom: var(--sp-4); }
  .sv__item--lead .sv__title { font-size: 30px; }
  .sv__item--lead .sv__desc { font-size: 18px; }
  .sv__points { display: grid; }
  .sv__item--lead .sv__btns { display: flex; flex-wrap: wrap; padding-top: var(--sp-5); }
  .sv__item--lead .sv__btns a { min-height: 52px; padding-inline: var(--sp-5); }
}
/* PC — 왼쪽 대표 카드(두 줄 높이 · 세로 사진) + 오른쪽 2 × 2 */
@media (min-width: 1024px) {
  .sv {
    grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 4fr));
    grid-template-rows: repeat(2, auto); gap: var(--sp-6);
  }
  .sv__item--lead { grid-column: 1; grid-row: 1 / span 2; min-height: 620px; }
  .sv__item--lead .sv__img { object-position: 50% 50%; }
  .sv__item--lead::after {
    background: linear-gradient(to top,
      rgba(11, 30, 69, .96) 0%, rgba(11, 30, 69, .85) 40%, rgba(11, 30, 69, .25) 70%, rgba(11, 30, 69, .05) 100%);
  }
  .sv__item--lead .sv__body { padding: var(--sp-10); max-width: none; }
  .sv__item--lead .sv__title { font-size: 40px; }
}

/* ── 09b. 고객 후기 — 카드 판 없는 텍스트 · 한 줄 슬라이드 ─────────────────
   슬라이더 셸(.slider · 점)은 시공 사례 슬라이더와 같다(한 줄 · 무한 반복 · 자동 넘김).
   후기 한 개는 진행 과정(.tl) · 자주 묻는 질문(.acc)과 같은 문법이다
     · 판      카드 없이 글자로만 · 위 굵은 선(옅은 파랑)
     · 기호    옅은 파랑 큰 따옴표(진행 과정의 큰 번호 자리) — 멀리서도 "후기" 로 읽힌다
     · 제목    설명어(고객 상황, 작게) + 핵심어(해결된 구절, 크게). 훑는 고객은 핵심어만 읽고 지나가도 된다
     · 노랑    첫 후기 핵심어 하나에만(.rv__key--hl)
     · 끝      이름 · 시기(아래 끝선에 맞춘다 — 같은 화면의 후기들은 가장 긴 후기에 높이를 맞춘다)
   카드가 없어 옆 화살표가 글자를 가리므로 화살표는 점 줄의 오른쪽 끝으로 내린다. */
.rv-slider .swiper-slide { display: flex; height: auto; }
.rv__item {
  display: flex; flex-direction: column; flex: 1; width: 100%; min-width: 0;
  padding-top: var(--sp-4); border-top: 2px solid var(--brand-200);
}
.rv__mark { display: block; height: 40px; font-size: 72px; line-height: 1; font-weight: 800; color: var(--brand-200); }
.rv__title { margin-top: var(--sp-2); }
.rv__tag { display: block; font-size: 15px; font-weight: 700; color: var(--ink-700); }
.rv__key {
  font-size: clamp(22px, 5.8vw, 24px); line-height: 1.35; font-weight: 800;
  letter-spacing: -.035em; color: var(--ink-900); text-wrap: balance;
}
.rv__key--hl {
  padding-inline: .06em;
  background: linear-gradient(transparent 60%, var(--point) 60%);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.rv__quote { margin-top: var(--sp-3); font-size: 15px; line-height: 1.7; color: var(--ink-700); }
.rv__meta {
  display: flex; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-4);
  font-size: var(--fs-caption); color: var(--ink-500);
}
.rv__who { font-weight: 700; color: var(--ink-700); }
.rv__when::before { content: "·"; margin-right: var(--sp-2); }
.rv-slider .slider__nav { top: auto; bottom: -10px; transform: none; }
.rv-slider .slider__nav--prev { left: auto; right: 56px; }
.rv-slider .slider__nav--next { right: 0; }
.rv-slider .slider__dots { display: flex; align-items: center; justify-content: center; min-height: 44px; }
@media (min-width: 768px) { .rv__quote { font-size: var(--fs-body); } }
/* ── 10. 표 ───────────────────────────────────────────────────── */
/* 가이드 §4: 넓은 표는 페이지가 아니라 표 자신이 가로 스크롤한다 */
.table-scroll { overflow-x: auto; border: 1px solid var(--ink-200); border-radius: var(--r-card); }
.table { width: 100%; min-width: 520px; text-align: left; }
.table thead { background: var(--sub-mist); }
.table th, .table td { padding: var(--sp-4) var(--sp-5); }
.table thead th { font-size: var(--fs-caption); font-weight: 700; color: var(--ink-700); white-space: nowrap; }
.table tbody tr + tr { border-top: 1px solid var(--ink-200); }
.table tbody th { font-weight: 600; color: var(--ink-900); }
.table tbody td { color: var(--ink-700); }
.table td.num { font-variant-numeric: tabular-nums; }
.table td.sub { color: var(--ink-500); }
.table__note { margin-top: var(--sp-3); font-size: var(--fs-caption); color: var(--ink-500); }

/* 개인정보 처리방침 첫머리 — 방침의 범위와 원칙. 본문보다 한 단계 크게 읽힌다 */
.privacy-lead { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-900); }

/* 정의 목록 (사업자 정보) */
.deflist { display: grid; gap: var(--sp-2) var(--sp-8); font-size: var(--fs-caption); color: var(--ink-500); }
.deflist > div { display: flex; gap: var(--sp-2); }
.deflist dt { flex-shrink: 0; font-weight: 600; color: var(--ink-700); }
/* 오시는 길 정보 — 판 없는 글자 목록: 위 굵은 선 · 항목(작게) + 값(크게). 푸터의 작은 정의 목록과 따로 둔다 */
.deflist--big { gap: var(--sp-5) var(--sp-8); font-size: inherit; }
.deflist--big > div { display: block; padding-top: var(--sp-3); border-top: 2px solid var(--brand-200); }
.deflist--big dt { font-size: 15px; font-weight: 700; color: var(--ink-700); }
.deflist--big dd { margin-top: 2px; font-size: 20px; line-height: 1.4; font-weight: 800; letter-spacing: -.03em; color: var(--ink-900); }
@media (min-width: 768px) { .deflist--big { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .deflist--big { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px)  { .deflist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .deflist { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── 11. 폼 (가이드 §5 FormField · §9) ────────────────────────── */
.form-card {
  padding: var(--sp-6);
  background: var(--white); border-radius: var(--r-card); box-shadow: var(--sh-card-hover);
}
@media (min-width: 1024px) { .form-card { padding: var(--sp-8); } }
.form-card fieldset { margin: 0; padding: 0; border: 0; }
.form-card fieldset > * + * { margin-top: var(--sp-4); }

.field__label { display: block; margin-bottom: 6px; font-size: var(--fs-caption); font-weight: 700; color: var(--ink-700); }
.field__req { color: var(--urgent); }
/* 선택 항목 표시 — 필수(*)와 나란히 있을 때 "안 써도 된다" 가 바로 읽히게 */
.field__opt { font-weight: 500; color: var(--ink-500); }

.field__input {
  display: block; width: 100%; height: 52px;
  padding-inline: var(--sp-4);
  color: var(--ink-900); background: var(--white);
  border: 1px solid var(--ink-200); border-radius: var(--r-field);
  transition: border-color var(--ease), box-shadow var(--ease);
}
textarea.field__input { height: auto; min-height: 120px; padding-block: var(--sp-3); resize: vertical; }
.field__input::placeholder { color: var(--ink-500); }
.field__input:hover { border-color: var(--ink-500); }
.field__input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-200); outline: none; }
.field__input:disabled { background: var(--sub-mist); color: var(--ink-500); }
.field__input[aria-invalid="true"] { border-color: var(--urgent); }
.field__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--urgent-weak); }

.field__error { margin-top: 6px; font-size: var(--fs-caption); color: var(--urgent); display: none; }
.field__error.is-shown { display: block; }

/* 라디오 칩 — sr-only 입력 + 라벨 스타일링 (키보드 선택 유지) */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.choice { position: relative; display: block; }
/* 홀수 개일 때 마지막("잘 모르겠어요")은 한 줄을 다 쓴다 — 혼자 반 칸에 남으면 빠진 항목처럼 보인다 */
.choice:last-child:nth-child(odd) { grid-column: 1 / -1; }
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice span {
  display: flex; align-items: center; justify-content: center;
  height: 48px; padding-inline: var(--sp-2);
  font-size: var(--fs-caption); font-weight: 600; text-align: center; color: var(--ink-700);
  border: 1px solid var(--ink-200); border-radius: var(--r-field);
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.choice:hover span { border-color: var(--ink-500); }
.choice input:checked + span {
  border-color: var(--brand-500); background: var(--brand-100); color: var(--brand-700);
}
.choice input:focus-visible + span { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* 동의 체크박스 */
.agree { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-caption); color: var(--ink-500); }
.agree input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--brand-500); }
.agree a { text-decoration: underline; }
/* 제출을 눌렀을 때 걸린 칸 표시.
   탭으로 누르면 :focus-visible 이 뜨지 않아 초점만으로는 눈에 띄지 않는다.
   그래서 main.js 가 .is-flagged 를 붙이고 여기서 그린다. 값을 고치면 바로 걷힌다. */
.is-flagged {
  outline: 2px solid var(--urgent);
  outline-offset: 4px;
  border-radius: 6px;
}
.agree.is-flagged { background: var(--urgent-weak); }

/* 동의 체크 아래 안내 — 수집 항목 · 목적 · 기간 · 거부권(처리방침 요약) */
.agree__info { margin-top: var(--sp-2); padding-left: 28px; font-size: 12px; line-height: 1.6; color: var(--ink-500); }

/* 견적 폼 보내기 버튼 두 개 — 이메일(채운 파랑, 이 폼의 본래 할 일) | 문자(테두리).
   모바일은 위아래로(글자가 반 칸에 안 들어간다), 태블릿부터 반반 */
.form-actions { display: grid; gap: var(--sp-2); }
.form-actions .btn { width: 100%; padding-inline: var(--sp-4); font-weight: 800; }
@media (min-width: 768px) { .form-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }
.form-note {
  margin-top: var(--sp-4); text-align: center;
  font-size: var(--fs-caption); line-height: 1.6; color: var(--ink-500);
}
.form-note a { color: var(--brand-500); text-decoration: underline; text-underline-offset: 3px; }
.form-note a:hover { color: var(--brand-600); }

/* 접수 완료 팝업(.donepop) — 전화 안내 팝업(.telpop, 16b절) 판을 그대로 쓰고 위에 체크 원만 더한다 */
.donepop__ico {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-500);
}
.donepop__ico svg { width: 28px; height: 28px; }
.donepop .telpop__title { margin-top: var(--sp-4); font-size: 24px; }
.donepop .telpop__desc { font-size: var(--fs-body); }
/* 폼 안에 있어 폼 항목 간격(margin-top)을 물려받는다 — 화면 가운데에 오도록 되돌린다 */
.form-card fieldset > .donepop { margin: auto; }

.form-fail {
  padding: var(--sp-4); border-radius: var(--r-field);
  background: var(--urgent-weak); color: var(--urgent);
  font-size: var(--fs-caption); font-weight: 600;
}
.form-fail[hidden] { display: none; }

/* 허니팟 — 사람에게는 보이지 않는다. display:none 은 쓰지 않는다:
   일부 봇이 숨김 여부를 보고 건너뛴다. 화면 밖으로 밀어내는 쪽이 낫다. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ── 12. 아코디언 (가이드 §5 Accordion) — 메인 자주 묻는 질문 ──────────
   답이 보이는 아코디언: 접힌 줄에 [Q1 | 질문 | 한마디 답 | 화살표]. 답이 먼저 보이고 자세한 설명은 누르면 펼쳐진다.
   진행 과정(.tl, 13절)과 같은 문법 — 카드 판 없이 글자로만 · 줄마다 위 굵은 선(옅은 파랑) · 옅은 파랑 번호.
   펼친 줄은 선 · 번호가 진한 파랑. 노란 밑줄은 한마디 답 하나("0원")에만(.acc__key--hl). */
.acc { border-bottom: 2px solid var(--brand-200); }
.acc__item { border-top: 2px solid var(--brand-200); transition: border-color var(--ease); }
.acc__item:has([aria-expanded="true"]) { border-top-color: var(--brand-500); }
.acc__btn {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 20px; align-items: center; column-gap: var(--sp-3);
  width: 100%; min-height: 76px; padding-block: var(--sp-4); text-align: left;
}
.acc__no { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--brand-200); transition: color var(--ease); }
.acc__q { font-size: 17px; line-height: 1.4; font-weight: 700; color: var(--ink-900); transition: color var(--ease); }
.acc__key { font-size: 18px; font-weight: 800; letter-spacing: -.03em; color: var(--ink-900); white-space: nowrap; }
.acc__key--hl {
  padding-inline: .06em;
  background: linear-gradient(transparent 60%, var(--point) 60%);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.acc__btn svg { width: 20px; height: 20px; color: var(--ink-500); transition: transform var(--ease); }
.acc__btn:hover .acc__q { color: var(--brand-500); }
.acc__btn[aria-expanded="true"] .acc__no { color: var(--brand-500); }
.acc__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* 설명은 질문 글자 줄에 맞춰 들여 쓴다(번호 칸 + 간격) */
.acc__panel { padding: 0 0 var(--sp-6) calc(40px + var(--sp-3)); font-size: 15px; line-height: 1.7; color: var(--ink-700); }
.acc__panel[hidden] { display: none; }
@media (min-width: 768px) {
  .acc__btn { grid-template-columns: 56px minmax(0, 1fr) auto 20px; column-gap: var(--sp-4); min-height: 88px; }
  .acc__no { font-size: 28px; }
  .acc__q { font-size: 20px; }
  .acc__key { font-size: 24px; }
  .acc__panel { padding-left: calc(56px + var(--sp-4)); padding-right: var(--sp-12); font-size: var(--fs-body); }
}

/* ── 13. 스텝 · 체크 리스트 ───────────────────────────────────── */

.checklist > li {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4); border: 1px solid var(--ink-200); border-radius: var(--r-card);
}
/* 그리드 안이 아니면 gap 이 없으므로 항목 사이 여백을 직접 준다 */
.checklist:not(.grid) > li + li { margin-top: var(--sp-3); }
.checklist svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--brand-500); }

/* 진행 과정 (.tl) — 메인. "전화 한 통 이후" 를 시점 → 단계의 핵심어 타임라인으로 보인다.
   카드 판 없이 글자로만 — 어두운 카드가 이어지는 서비스 · "다시 찾는 이유" 사이에서 쉬어 가는 섹션이다.
     · 제목    "다시 찾는 이유"(.point) 와 같은 문법 — 설명어(시점, 작게) + 핵심어(단계명, 크게).
               핵심어가 이 섹션에서 가장 큰 글자라 훑어도 "전화 상담 → 방문 · 탐지 → …" 가 읽힌다
     · 번호    01~04 를 크게, 옅은 파랑(brand-200)으로 깔아 순서만 알린다. 1단계만 진한 파랑
     · 선      항목 위 굵은 선이 진행 막대 — 1단계 구간만 진한 파랑("여기서 출발")
     · 노랑    고객이 직접 하는 1단계 핵심어("전화 상담") 하나에만 형광펜 밑줄
   모바일 한 줄(번호 왼쪽 · 글 오른쪽) · 태블릿 2 × 2 · PC 네 칸(번호 위 · 글 아래). */
.tl { display: grid; gap: var(--sp-6); }
/* 모바일 — 번호는 왼쪽 칸, 시점 · 단계명 · 설명은 오른쪽 칸에 나란히. 세로로 쌓으면 번호가 줄마다 한 줄씩 차지해 섹션이 길어진다 */
.tl__item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--sp-3); align-items: start;
  padding-top: var(--sp-4); border-top: 2px solid var(--brand-200);
}
.tl__item > .tl__no { grid-row: 1 / span 2; }
.tl__item > :not(.tl__no) { grid-column: 2; }
.tl__item:first-child { border-top-color: var(--brand-500); }
.tl__no {
  display: block; font-size: 44px; line-height: 1;
  font-weight: 800; letter-spacing: -.04em; color: var(--brand-200);
}
.tl__item:first-child .tl__no { color: var(--brand-500); }
.tl__title { margin-top: 0; }
.tl__cap { display: block; font-size: 15px; font-weight: 700; color: var(--ink-700); }
.tl__key {
  font-size: clamp(24px, 6.4vw, 28px); line-height: 1.3; font-weight: 800;
  letter-spacing: -.035em; color: var(--ink-900);
}
.tl__key--hl {
  padding-inline: .06em;
  background: linear-gradient(transparent 60%, var(--point) 60%);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.tl__desc { margin-top: var(--sp-2); font-size: 15px; line-height: 1.6; color: var(--ink-700); }
@media (min-width: 768px) {
  /* 태블릿 · PC — 번호 위 · 글 아래로 쌓는다 */
  .tl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
  .tl__item { display: block; }
  .tl__no { font-size: 64px; }
  .tl__title { margin-top: var(--sp-3); }
  .tl__desc { font-size: var(--fs-body); }
}
@media (min-width: 1024px) {
  .tl { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-6); }
}
/* 같은 글자 목록을 순서 없는 약속 목록에 쓸 때(회사 소개 "이렇게 일합니다") — 첫 항목을 강조하지 않는다 */
.tl--plain .tl__item:first-child { border-top-color: var(--brand-200); }
.tl--plain .tl__item:first-child .tl__no { color: var(--brand-200); }
@media (min-width: 1024px) { .tl--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-12); } }

.flow__cta { margin-top: var(--sp-10); text-align: center; }
.flow__cta .btn { width: 100%; }
@media (min-width: 768px) {
  .flow__cta .btn { width: auto; padding-inline: var(--sp-10); }
}

/* 카드 안 경고·안내 박스 */
.notice { background: var(--sub-mist); border-color: var(--brand-300); }

/* 구글 지도 embed */
.map {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sub-mist); border-radius: var(--r-card);
}
@media (min-width: 768px) { .map { aspect-ratio: 16 / 9; } }

.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 본문 중간 인라인 CTA */

.inline-cta {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-top: var(--sp-8); padding: var(--sp-6);
  background: var(--sub-mist); border-radius: var(--r-card);
}
.inline-cta p { font-weight: 700; color: var(--ink-900); }
@media (min-width: 640px) {
  .inline-cta { flex-direction: row; align-items: center; justify-content: space-between; }
  .inline-cta .btn { flex-shrink: 0; }
}
.inline-cta__sub { display: block; margin-top: var(--sp-1); font-size: var(--fs-caption); color: var(--ink-700); }
/* 서브페이지 맨 끝 — 다 읽은 사람이 푸터로 빠지기 전 마지막 다음 행동.
   (전 페이지 공통 전환 섹션이 아니다. 페이지마다 그 페이지의 말로 따로 쓴다.)
   메인 마무리 섹션(.finale)을 줄인 모양 — 네이비 판 · 오른쪽 옅은 동심원(정지) · 큰 흰 글자 · 흰 버튼(.btn--on-dark). */
.inline-cta--end {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: var(--sp-16); padding: var(--sp-8) var(--sp-6); background: var(--sub-navy);
}
.inline-cta--end::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 100% 50%, rgba(255, 255, 255, .05) 0 1px, rgba(255, 255, 255, 0) 1px 40px);
  -webkit-mask-image: radial-gradient(circle at 100% 50%, #000 0, #000 15%, transparent 55%);
          mask-image: radial-gradient(circle at 100% 50%, #000 0, #000 15%, transparent 55%);
}
.inline-cta--end p { font-size: clamp(20px, 5.4vw, 26px); line-height: 1.35; font-weight: 800; letter-spacing: -.03em; color: var(--white); }
.inline-cta--end .inline-cta__sub { margin-top: var(--sp-2); font-size: 15px; color: rgba(255, 255, 255, .78); }
.inline-cta--end .btn { min-height: 56px; font-weight: 800; }
@media (min-width: 768px) { .inline-cta--end { padding: var(--sp-10); } }

/* 견적 문의 — 왼쪽 전화 판(미스트) + 오른쪽 번호 단계 폼 ────────────────
   판: "급하시면 전화가 가장 빠릅니다" · 큰 번호 · 파랑 전화 버튼 · 안심 3가지(위 굵은 선 · 굵은 말 + 보조 말).
     미스트 면 — 바로 위 네이비 머리와 같은 색이 겹치지 않게. 오른쪽 아래 옅은 파랑 동심원(정지).
     노랑은 알약의 점 하나뿐.
   모바일: 판이 위(안심 문구는 굵은 말만 세 칸 한 줄) · PC(1024~): 왼쪽 4 : 오른쪽 7, 판이 스크롤을 따라온다 */
.est { max-width: 1100px; margin-inline: auto; }
.est__side {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; margin-bottom: var(--sp-10);
  padding: var(--sp-8) var(--sp-6); border-radius: var(--r-card); background: var(--sub-mist); color: var(--ink-900);
}
.est__side::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 100% 100%, rgba(16, 71, 194, .08) 0 1px, rgba(16, 71, 194, 0) 1px 44px);
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0, #000 25%, transparent 70%);
          mask-image: radial-gradient(circle at 100% 100%, #000 0, #000 25%, transparent 70%);
}
.est__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2); align-self: flex-start;
  padding: 5px var(--sp-3); border-radius: var(--r-pill); background: var(--white);
  font-size: var(--fs-caption); font-weight: 800;
}
.est__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--point); }
.est__title { margin-top: var(--sp-4); font-size: clamp(24px, 6.4vw, 30px); line-height: 1.3; font-weight: 800; letter-spacing: -.035em; }
.est__num {
  display: inline-block; align-self: flex-start; margin-top: var(--sp-5);
  font-size: clamp(30px, 8.4vw, 38px); line-height: 1.1; font-weight: 800; letter-spacing: -.035em; color: var(--ink-900);
}
.est__btn { margin-top: var(--sp-5); min-height: 56px; font-weight: 800; }
.est__assure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-6); }
.est__assure li { display: flex; flex-direction: column; gap: 2px; padding-top: var(--sp-3); border-top: 2px solid var(--brand-200); }
.est__assure b { font-size: var(--fs-caption); font-weight: 800; }
.est__assure span { display: none; font-size: var(--fs-caption); color: var(--ink-500); }   /* 모바일은 굵은 말만 */
@media (min-width: 768px) {
  .est__assure { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin-top: var(--sp-8); }
  .est__assure b { font-size: var(--fs-body); }
  .est__assure span { display: block; }
}
@media (min-width: 1024px) {
  .est { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-12); align-items: start; }
  .est__side { position: sticky; top: calc(var(--gnb-h) + var(--sp-6)); margin-bottom: 0; padding: var(--sp-10) var(--sp-8); }
}

/* 판 없는 번호 단계 폼 — 항목마다 위 굵은 선(옅은 파랑) + 큰 번호(왼쪽) + 큰 질문.
   지금 쓰고 있는 항목(:focus-within)은 번호 · 선이 진한 파랑 — 어디까지 왔는지 보인다(JS 없이 CSS 만) */
.form-card--flat { padding: 0; background: none; box-shadow: none; border-radius: 0; }
@media (min-width: 1024px) { .form-card--flat { padding: 0; } }
.form-card--flat fieldset > * + * { margin-top: var(--sp-6); }
.form-step {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--sp-3);
  padding-top: var(--sp-4); border-top: 2px solid var(--brand-200); transition: border-color var(--ease);
}
.form-step__no { font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--brand-200); transition: color var(--ease); }
.form-step:focus-within { border-top-color: var(--brand-500); }
.form-step:focus-within .form-step__no { color: var(--brand-500); }
.form-step .field__label { margin-bottom: var(--sp-3); font-size: 20px; line-height: 1.3; font-weight: 800; letter-spacing: -.03em; color: var(--ink-900); }
.form-step .field__opt { font-size: 15px; }
.form-end { padding-top: var(--sp-5); border-top: 2px solid var(--brand-200); }
@media (min-width: 768px) {
  .form-step { grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--sp-4); }
  .form-step__no { font-size: 44px; }
  .form-step .choice span { height: 52px; font-size: 15px; }
  .form-end { padding-left: calc(64px + var(--sp-4)); }
}

/* ── 13b. 신뢰 섹션 — 맡겨도 되는 이유 여섯 가지 ────────────────────
   정사각 사진 타일(main-sec5-1~6.jpg). "다시 찾는 이유" · 시공 사례와 같은 사진 카드 문법:
     · 사진   위쪽은 막을 거의 걷어 사진이 잘 보이고, 아래(제목 · 설명 자리)만 진한 네이비
     · 번호   위 왼쪽 흰 글자(옅은 그림자 — 밝은 사진에서도 읽힌다)
     · 제목   카드 대제목 포인트 — 노란 글자 · 카드에서 가장 큰 글자. 훑어도 6가지 약속이 읽힌다
     · 설명   모든 화면에서 전체가 보인다
   배치: 모바일 1열 겹침 카드(가로 16:10) · 태블릿 2열 · PC 3열(정사각). 옆으로 넘기지 않는다 — 넘겨야 보이는 내용은 대부분 안 읽힌다.
   호버: 사진 확대만(카드는 떠오르지 않는다), 마우스가 있는 기기에서만.
   모바일 겹침 카드: 아래 "겹침 카드" 규칙. */
.trust__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.trust__card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 16 / 10; padding: var(--sp-5);
  border-radius: var(--r-card); background: var(--sub-navy); color: var(--white);
}
.trust__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms ease-out;
}
.trust__card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(11, 30, 69, .9) 0%, rgba(11, 30, 69, .55) 32%, rgba(11, 30, 69, .1) 60%, rgba(11, 30, 69, 0) 80%, rgba(11, 30, 69, .12) 100%);
}
.trust__no { font-size: 24px; font-weight: 800; letter-spacing: -.03em; text-shadow: 0 1px 8px rgba(11, 30, 69, .55); }
.trust__title { font-size: clamp(22px, 6vw, 26px); line-height: 1.25; font-weight: 800; letter-spacing: -.035em; color: var(--point); }
.trust__desc { margin-top: var(--sp-1); font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
@media (min-width: 768px) {
  .trust__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .trust__card { aspect-ratio: 1 / 1; padding: var(--sp-6); }
  .trust__no { font-size: 32px; }
  .trust__title { font-size: 26px; }
  .trust__desc { margin-top: var(--sp-2); font-size: 15px; }
}
@media (min-width: 1024px) {
  .trust__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust__title { font-size: 28px; }
}
@media (hover: hover) {
  .trust__card:hover .trust__bg { transform: scale(1.05); }
}

/* 겹침 카드(모바일) — 스크롤하면 1 → 6 카드가 화면 위쪽에 차례로 붙고, 다음 카드가 아래에서 올라와 그 위를 덮는다.
   카드마다 붙는 높이를 10px 씩 내려(--stack) 아래 카드의 윗단이 한 줄씩 보인다 — 겹친 카드 묶음이 한 장씩 펼쳐지는 모양.
   position: sticky 만 쓴다(JS 없음 · 스크롤 성능 부담 없음 · 모션 최소화 설정과도 충돌 없음 — 움직임은 사용자의 스크롤 그대로다).
   위쪽 그림자로 덮은 카드와 덮인 카드의 경계를 보인다. 태블릿부터는 일반 그리드. */
@media (max-width: 767.98px) {
  .trust__card {
    position: sticky; top: calc(var(--gnb-h) + var(--sp-3) + var(--stack, 0px));
    box-shadow: 0 -10px 28px rgba(11, 30, 69, .22);
  }
  .trust__card:nth-child(2) { --stack: 10px; }
  .trust__card:nth-child(3) { --stack: 20px; }
  .trust__card:nth-child(4) { --stack: 30px; }
  .trust__card:nth-child(5) { --stack: 40px; }
  .trust__card:nth-child(6) { --stack: 50px; }
}
/* ── 14. (비움) 하단 공통 전환 섹션은 제거됨 ──────────────────────
   전환 동선은 이제 히어로 CTA · 스티키 GNB 전화 버튼 ·
   본문 인라인 CTA(.inline-cta) · 모바일 플로팅 바가 맡는다.
   견적 폼은 estimate.php 한 곳에만 있다. */

/* ── 14b. 마지막 전환 섹션 ────────────────────────────────────────
   끝까지 읽은 사람을 전화로 보내는 자리. 할 일이 하나뿐이므로 화면도 하나를 가리킨다.

   면은 서브 1(네이비) — 히어로와 같은 색이라 페이지가 같은 색으로 열리고 닫힌다.
   전에는 생노랑 전면 + 사선 줄무늬였는데, 사이트 어디에도 없는 면 색이라 이 섹션만 따로 놀았다.
   버튼은 히어로와 같은 규칙 — 어두운 면 위의 주 버튼은 흰 판 + 메인 파랑 글자.
   "0원" 같은 값만 포인트색(노랑)으로 강조한다. */
.finale {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--sp-16);
  background: var(--sub-navy); color: var(--white);
}
/* 배경 그래픽 — 잔잔하게, 시선을 가운데(전화번호)로 모은다. 장식이 아니라 초점을 만드는 장치다.
     ::before  번호 뒤의 은은한 파랑 빛(메인 파랑 400 의 알파). 가장자리로 갈수록 네이비로 녹는다
     ::after   번호를 중심으로 한 아주 옅은 동심원. 흰 4.5% 선이라 가까이서만 보이고,
               가운데에서 멀어질수록 마스크로 사라져 글자 뒤를 어지럽히지 않는다
   동심원은 아주 느리게 안쪽(전화번호)으로 모여든다 — 원 한 칸 이동에 9초. 시선을 버튼 쪽으로 계속 끌어당긴다.
     · 원리: 동심원 무늬의 시작점(--finale-ring)을 원 간격 → 0 으로 줄인다. 한 칸 줄면 무늬가 처음과 같아져 끊김 없이 돈다
     · 섹션이 화면에 보일 때만 돈다(main.js 가 .is-inview 만 켠다) — 모바일 배터리 · 버벅임 방지
     · 모션 최소화 설정이면 멈춘 그림. @property 를 모르는 브라우저도 멈춘 그림으로 보인다(깨지지 않는다)
   글자 대비에는 영향이 없다. */
@property --finale-ring { syntax: "<length>"; inherits: false; initial-value: 0px; }
.finale::before,
.finale::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.finale::before {
  background: radial-gradient(60% 55% at 50% 48%, rgba(58, 109, 223, .32) 0%, rgba(11, 30, 69, 0) 72%);
}
.finale::after {
  --finale-gap: 56px;   /* 원 간격 — PC 는 80px */
  background: repeating-radial-gradient(circle at 50% 48%,
    rgba(255, 255, 255, .045) var(--finale-ring) calc(var(--finale-ring) + 1px),
    rgba(255, 255, 255, 0) calc(var(--finale-ring) + 1px) calc(var(--finale-ring) + var(--finale-gap)));
  animation: finale-rings 9s linear infinite paused;
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 0, #000 22%, transparent 62%);
          mask-image: radial-gradient(circle at 50% 48%, #000 0, #000 22%, transparent 62%);
}
@media (min-width: 1024px) {
  .finale::after { --finale-gap: 80px; animation-duration: 11s; }
}
.finale.is-inview::after { animation-play-state: running; }
@keyframes finale-rings {
  from { --finale-ring: var(--finale-gap); }
  to   { --finale-ring: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .finale::after { animation: none; }
}
@media (min-width: 1024px) { .finale { padding-block: 104px; } }

.finale__inner { position: relative; text-align: center; }
.finale__eyebrow {
  display: inline-block; margin-bottom: var(--sp-4);
  padding: var(--sp-1) var(--sp-4); border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .34); color: var(--brand-200);
  font-size: var(--fs-caption); font-weight: 800; letter-spacing: .01em;
}
.finale__title {
  font-size: clamp(26px, 7.4vw, 46px); line-height: 1.2;
  font-weight: 800; letter-spacing: -.035em; color: var(--white);
  text-wrap: balance;
}
/* 제목의 강조어 — 어두운 면 위라 노란 글자로 덮는다(형광펜 밑줄 없이). 히어로 제목과 같은 규칙 */
.finale__title .t-accent { color: var(--point); background: none; padding: 0; }

/* ── 전화번호 — 이 섹션에서 가장 큰 것 ──────────────────────────── */
.finale__dial { display: block; margin-top: var(--sp-10); color: var(--white); }
.finale__num {
  display: block;
  font-size: clamp(36px, 10.5vw, 76px); line-height: 1;
  font-weight: 800; letter-spacing: -.045em;
}

/* 번호 아래는 캡션이 아니라 "눌러야 할 판" 이다.
   13px 알약은 76px 숫자 옆에서 주석처럼 읽혀 아무도 누를 생각을 안 한다.
   글자 17px · 높이 58px 로 세우고, 아이콘과 화살표로 방향을 준다.
   폭은 아래 보증 알약과 같은 380px — 세로줄이 맞아야 한 묶음으로 읽힌다. */
.finale__cta {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; max-width: 380px; min-height: 58px;
  margin: var(--sp-5) auto 0; padding-inline: var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--white); color: var(--brand-500);
  font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  transition: background-color var(--ease), transform var(--ease);
}
.finale__ctaico { width: 20px; height: 20px; flex: 0 0 auto; }
/* 화살표는 "다음" 을 가리키는 표시다. 글자 묶음에서 조금 떼어 둔다. */
.finale__ctaarrow { width: 18px; height: 18px; flex: 0 0 auto; margin-left: var(--sp-1); }
.finale__dial:hover .finale__cta { background: var(--brand-100); transform: translateY(-2px); }
.finale__dial:active .finale__cta { background: var(--brand-200); transform: translateY(0) scale(.99); }
.finale__dial:focus-visible { outline-color: var(--white); }

/* ── 보증 — 이 섹션에서 가장 중요한 정보 ───────────────────────────
   라벨은 왼쪽, 값은 오른쪽에 붙는 장부식 배열이다. 값만 포인트색이라 "0원" 이 먼저 걸린다.
   폭을 380px 로 묶는 이유: 가운데 정렬 전체 폭에서는 둘 사이가 300px 넘게 벌어져
   한 짝으로 안 읽힌다. 모바일 폭과 비슷하게 맞춰 어느 화면에서나 같게 보인다. */
.finale__pledges {
  display: grid; gap: var(--sp-3);
  max-width: 380px; margin: var(--sp-10) auto 0;
}
.finale__pledges li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
}
.finale__pledgeico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .10); color: var(--brand-200);
}
.finale__pledgeico svg { width: 18px; height: 18px; }
.finale__plabel { font-size: var(--fs-caption); font-weight: 700; color: rgba(255, 255, 255, .78); }
.finale__pvalue { margin-left: auto; font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.02em; color: var(--point); }

/* ── 15. 푸터 ─────────────────────────────────────────────────── */
/* 미스트 면. 위: 왼쪽 로고 · 한 줄 소개 · 큰 전화번호 · 상담 시간 / 오른쪽 링크(가로 한 줄 · 태블릿부터 오른쪽 정렬).
   큰 번호는 끝까지 내려온 사람의 마지막 전화 기회다(data-cta footer-call).
   아래: 사업자 정보(작게 · 텍스트 — 지역 검색) → 저작권 · 처리방침.
   메인은 네이비 마무리 섹션, 서브페이지는 네이비 끝 전화 안내 뒤에 온다 — 밝은 면이라 끝이 무거워지지 않는다. */
.footer {
  border-top: 1px solid var(--ink-200); background: var(--sub-mist);
  padding-block: var(--sp-10);
}
@media (min-width: 1024px) { .footer { padding-block: var(--sp-12); } }

.footer__top { display: grid; gap: var(--sp-8); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--ink-200); }
.footer__logo { display: inline-block; }
.footer__logo img { display: block; width: auto; height: 28px; }
.footer__line { margin-top: var(--sp-4); font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.footer__tel {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5);
  font-size: clamp(28px, 7.6vw, 36px); line-height: 1.1; font-weight: 800; letter-spacing: -.035em; color: var(--ink-900);
  transition: color var(--ease);
}
.footer__tel svg { width: 26px; height: 26px; color: var(--brand-500); }
.footer__tel:hover { color: var(--brand-500); }
.footer__hours { margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--ink-500); }

.footer__nav { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); font-size: 15px; font-weight: 700; color: var(--ink-700); }
.footer__nav a { transition: color var(--ease); }
.footer__nav a:hover { color: var(--brand-500); }

.footer__biz { padding-top: var(--sp-6); }

.footer__bottom {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-size: var(--fs-caption); color: var(--ink-500);
}
@media (min-width: 640px) {
  .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 768px) {
  .footer__top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .footer__nav { justify-content: flex-end; }   /* 태블릿 · PC 도 모바일처럼 가로 한 줄 — 오른쪽 위에 붙인다 */
  .footer__biz { grid-template-columns: repeat(2, max-content); }
}
@media (min-width: 1024px) { .footer__biz { grid-template-columns: repeat(4, max-content); } }
/* ── 16a. 우측 하단 퀵메뉴 ────────────────────────────────────────
   lg 부터만 쓴다. 모바일·태블릿에서는 블로그도 전화도 하단 고정 바에
   이미 있어서, 같은 항목을 둘로 나누면 양쪽 다 덜 눌린다.
   되살리려면 아래 display 두 줄만 손대면 된다. 드로어(z 50)보다는 아래. */
.quick { display: none; }
@media (min-width: 1024px) {
  .quick {
    display: block;
    position: fixed;
    right: var(--sp-6);
    bottom: var(--sp-6);
    z-index: 45;
  }
}

.quick ul { display: flex; flex-direction: column; gap: var(--sp-2); }

.quick__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  width: 56px; height: 56px;           /* 44px 탭 최소치를 넉넉히 넘긴다 */
  border-radius: 50%;
  font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  box-shadow: 0 6px 16px rgba(17, 24, 39, .18);
  transition: transform var(--ease), box-shadow var(--ease), background-color var(--ease);
}
.quick__item svg { width: 20px; height: 20px; }
.quick__item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(17, 24, 39, .24); }
.quick__item:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(17, 24, 39, .18); }

/* 블로그: 흰 바탕 + 무채색 아이콘. 외부 서비스 색(네이버 초록)은 쓰지 않는다 — 색 체계 밖이다. */
.quick__item--blog {
  background: var(--white); color: var(--ink-700);
  box-shadow: 0 6px 16px rgba(17, 24, 39, .18), inset 0 0 0 1px var(--ink-200);
}
.quick__item--blog svg { color: var(--ink-700); }
.quick__item--blog:hover { background: var(--sub-mist); }

/* 견적: 흰 바탕 + 브랜드 아이콘. 전화보다 한 단계 낮다 */
.quick__item--form {
  background: var(--white); color: var(--brand-500);
  box-shadow: 0 6px 16px rgba(17, 24, 39, .18), inset 0 0 0 1px var(--brand-400);
}
.quick__item--form:hover { background: var(--sub-mist); }

/* 전화: 주 전환 버튼이므로 브랜드색으로 채운다 */
.quick__item--call { background: var(--brand-500); color: var(--white); }
.quick__item--call:hover { background: var(--brand-600); }
.quick__item--call:active { background: var(--brand-700); }

@media (min-width: 1024px) {
  .quick__item { width: 64px; height: 64px; font-size: 11px; }
  .quick__item svg { width: 24px; height: 24px; }
}

/* ── 16. 플로팅 CTA (가이드 §9) ───────────────────────────────── */
/* 모바일 · 태블릿 하단 — 아래 · 좌우에서 살짝 뜬 둥근 유리 판 한 장 [문자 | 견적 | 전화].
     · 판      흰 55% + 뒤 내용 흐림(18px) · 흰 60% 테두리 · 옅은 그림자. 뒤로 본문이 은은하게 비친다.
               흐림을 모르는 브라우저는 흰 92% 로 덮는다(@supports) — 글자가 묻히지 않게
     · 칸      문자 1 : 견적 1 : 전화 2.6. 문자 · 견적은 아이콘 위 · 글 아래(테두리 없이 가는 세로 선으로만 나눔),
               전화는 파랑 알약 + 번호("누르면 바로 걸린다")
     · 높이    버튼 44px(최소 누름 크기) + 판 여백 → 판 약 54px, 바닥에서 6px. 합이 --float-h(64px) 안이라
               body 하단 여백과 맞고 푸터 마지막 줄이 가려지지 않는다 */
.float-cta {
  position: fixed; inset-inline: var(--sp-2); bottom: calc(6px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 28px rgba(11, 30, 69, .18), inset 0 1px 0 rgba(255, 255, 255, .7);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .float-cta {
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
            backdrop-filter: blur(18px) saturate(180%);
  }
}
.float-cta ul {
  /* 작은 칸 셋(블로그 · 문자 · 견적) + 전화. 전화는 번호까지 들어가 넓게 잡는다.
     작은 칸은 1fr 에서 0.2 줄인 0.8fr — 비율이라 화면이 넓을수록 줄어드는 폭도 커진다.
     전화 몫(2.3)은 그대로 두고 남는 자리를 받는다. 320px 에서도 탭 최소 44px 를 지킨다. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 0.8fr)) minmax(0, 2.3fr);
  align-items: center;
  padding: 4px;
}
.float-cta a {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--tap); border-radius: var(--r-pill);
  font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  transition: background-color var(--ease), transform var(--ease);
}
.float-cta a:active { transform: scale(.98); }
.float-cta svg { width: 20px; height: 20px; flex: none; }

/* 블로그 · 문자 · 견적 — 판과 같은 바탕의 작은 칸. 아이콘 위 · 글 아래 */
.float-cta .float-cta__mini { flex-direction: column; gap: 1px; color: var(--brand-700); font-size: 12px; }
.float-cta__mini svg { width: 18px; height: 18px; }
.float-cta__mini:active { background: rgba(255, 255, 255, .5); }
.float-cta li + li:not(:last-child) { border-left: 1px solid rgba(11, 30, 69, .12); }   /* 작은 칸 사이 가는 선 */
.float-cta li:last-child { margin-left: var(--sp-1); }

/* 전화 — 파랑 알약 + 번호 */
.float-cta__call { background: var(--brand-500); color: var(--white); }
.float-cta__call:active { background: var(--brand-700); }
.float-cta__call:focus-visible { outline-color: var(--brand-700); }
.float-cta__label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.float-cta__label b { font-size: 15px; font-weight: 800; }
.float-cta__label .tabular { font-size: 12px; font-weight: 600; opacity: .88; }
@media (min-width: 1024px) { .float-cta { display: none; } }
/* ── 16c. 맨 위로 버튼(.totop) ─────────────────────────────────────
   한 화면 넘게 내려가면 나타난다(.is-shown — main.js 1절). 숨어 있을 때는 visibility 로 탭 순서에서도 빠진다.
   위치: 모바일 · 태블릿 — 하단 고정 바(--float-h) 바로 위 오른쪽 / PC — 우측 퀵메뉴(64px × 3 + 간격) 바로 위.
   모양: 흰 동그라미 + 옅은 테두리 · 위쪽 꺾쇠 + TOP. 전환 버튼(파랑)보다 한 단계 낮게 — 눈에 띄되 전화를 가리지 않는다. */
.totop {
  position: fixed; right: var(--sp-3); z-index: 44;
  bottom: calc(var(--float-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: var(--tap); height: var(--tap); border-radius: 50%;
  background: var(--white); color: var(--ink-700);
  box-shadow: 0 6px 16px rgba(17, 24, 39, .18), inset 0 0 0 1px var(--ink-200);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease), background-color var(--ease);
}
.totop.is-shown { opacity: 1; visibility: visible; transform: none; }
.totop svg { width: 18px; height: 18px; transform: rotate(180deg); }   /* 아래 꺾쇠를 뒤집어 위쪽으로 */
.totop__txt { font-size: 9px; font-weight: 800; letter-spacing: .04em; line-height: 1; }
.totop:hover { background: var(--sub-mist); color: var(--brand-500); }
.totop:active { transform: scale(.95); }
@media (min-width: 1024px) {
  .totop { right: var(--sp-6); bottom: calc(var(--sp-6) + 192px + var(--sp-2) * 3); width: 64px; height: 64px; }
  .totop svg { width: 22px; height: 22px; }
  .totop__txt { font-size: 11px; }
}

/* ── 16b. PC 전화 안내 팝업(<dialog class="telpop">) ─────────────────
   PC 에서 tel: 링크를 누르면 전화가 걸리지 않는다 — 번호를 크게 보여 주고 복사 · 견적 문의로 잇는다.
   main.js 가 PC(hover · pointer: fine)에서만 연다. 모바일 · 태블릿은 tel: 그대로 바로 전화.
   흰 판 · 큰 번호(이 팝업에서 가장 큰 글자) · 뒤 배경은 네이비 60% 막. 열 때 살짝 떠오른다(모션 최소화면 18절이 걷어낸다). */
.telpop {
  width: min(440px, calc(100% - var(--sp-8))); padding: var(--sp-10) var(--sp-8) var(--sp-8);
  border: 0; border-radius: var(--r-card); background: var(--white); color: var(--ink-900);
  box-shadow: 0 24px 64px rgba(11, 30, 69, .35); text-align: center;
}
.telpop::backdrop { background: rgba(11, 30, 69, .6); }
.telpop[open] { animation: telpop-in 260ms cubic-bezier(.16, 1, .3, 1); }
@keyframes telpop-in { from { transform: translateY(12px) scale(.98); } to { transform: none; } }   /* 투명도는 움직이지 않는다 — 애니메이션이 멈춰도 팝업이 보이게 */
.telpop__close { position: absolute; top: var(--sp-3); right: var(--sp-3); color: var(--ink-500); }
.telpop__close:hover { background: var(--sub-mist); }
.telpop__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px var(--sp-3); border-radius: var(--r-pill); background: var(--sub-mist);
  font-size: var(--fs-caption); font-weight: 800;
}
.telpop__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--point); }
.telpop__title { margin-top: var(--sp-4); font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.telpop__num {
  display: block; margin-top: var(--sp-3);
  font-size: 40px; line-height: 1.15; font-weight: 800; letter-spacing: -.035em; color: var(--brand-500);
  user-select: all;
}
.telpop__desc { margin-top: var(--sp-3); font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.telpop__form { margin-top: var(--sp-6); min-height: 52px; font-weight: 800; }
/* 전화 · 문자 두 가지 — data-mode 에 맞는 쪽만 보인다 */
.telpop[data-mode="tel"] .telpop__sms,
.telpop[data-mode="sms"] .telpop__tel { display: none; }


/* ── 17. 유틸리티 (꼭 필요한 것만) ────────────────────────────── */

/* 구글 태그 매니저가 자바스크립트 꺼진 브라우저에서 쓰는 iframe.
   구글이 주는 조각은 style="display:none;visibility:hidden" 을 태그에 직접 박아 두는데,
   이 사이트는 마크업에 style 속성을 쓰지 않기로 했으므로(메일 템플릿만 예외) 여기로 옮겼다. */
.gtm-noscript { display: none; visibility: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 60;
  transform: translateY(-200%);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-btn);
  background: var(--brand-500); color: var(--white); font-weight: 700;
  transition: transform var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
/* 목록 아래 "전체 보기" 한 줄. 모바일은 꽉 찬 버튼, lg 부터는 가운데 인라인. */
.more-row { margin-top: var(--sp-6); text-align: center; }
@media (min-width: 1024px) {
  .more-row .btn--block { display: inline-flex; width: auto; padding-inline: var(--sp-10); }
}
.mt-8 { margin-top: var(--sp-8); }

/* 표시 전환은 "숨기기"만 담당한다. 보일 때는 컴포넌트가 정한 display 를 그대로 쓴다.
   (.hide-lg { display: initial } 식으로 쓰면 .btn 의 inline-flex 를 덮어써 버린다) */
@media (max-width: 1023.98px) { .show-lg { display: none !important; } }
@media (min-width: 1024px)    { .hide-lg { display: none !important; } }
.actions { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 640px) { .actions { flex-direction: row; } .actions .btn { width: auto; } }

figure figcaption { margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--ink-500); }

/* ── 17b. 움직임 — 은은한 등장 + 핵심 두 곳(A 조합) ───────────────────
   원칙: 첫 화면 글자 · 전화 버튼은 움직이지 않는다(첫 3초에 "0원 · 전화" 가 읽혀야 한다). 등장은 한 번만, 0.6~0.9초.
   위치 · 크기 · 투명도만 움직인다(모바일 버벅임 방지). main.js 5f 가 JS 가 돌 때만 <html>.has-motion 을 붙이고
   화면에 들어온 요소에 .is-in · .is-on 을 켠다 — JS 가 없거나 '동작 줄이기' 면 처음부터 완성된 화면이다.
     · 은은   서비스 카드 · 시공 사례 · 신뢰(태블릿~) · FAQ · 후기 — 아래에서 살짝 떠오름(.reveal)
     · 화려 ① 다시 찾는 이유 — 카드 차례로 등장 + 숫자 카운트(20년 0→20 · 0원 500,000→0) + "직접 시공" 글자 올라옴
     · 화려 ② 진행 과정 — 단계마다 위 선이 그어지고 번호 · 글이 진해짐(모바일: 스크롤 따라 · PC: 0.35초 간격 차례로)
     · 그 밖  히어로 배경 사진 천천히 제자리로(1번) · 히어로 전화 버튼 4초마다 빛 고리 · 마지막 섹션 번호 살짝 커지며 등장 */

/* 은은 — 공통 떠오름 */
.has-motion .reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease-out, transform 800ms cubic-bezier(.16, 1, .3, 1); }
.has-motion .reveal.is-in { opacity: 1; transform: none; }
/* 같은 줄 카드는 0.1초씩 늦게 — 차례로 나타나 보인다 */
.has-motion .sv__item:nth-child(2), .has-motion .svcrow__item:nth-child(2), .has-motion .point:nth-child(2) { transition-delay: 100ms; }
.has-motion .sv__item:nth-child(3), .has-motion .svcrow__item:nth-child(3), .has-motion .point:nth-child(3) { transition-delay: 200ms; }
.has-motion .sv__item:nth-child(4), .has-motion .svcrow__item:nth-child(4) { transition-delay: 300ms; }
.has-motion .sv__item:nth-child(5), .has-motion .svcrow__item:nth-child(5) { transition-delay: 400ms; }

/* 화려 ① — 숫자 없는 핵심어("직접 시공")는 글자가 아래에서 올라온다(숫자 카운트는 JS 가 글자만 바꾼다) */
.has-motion .point__key { display: inline-block; overflow: hidden; }
.has-motion .point__key .rise { display: inline-block; transform: translateY(105%); transition: transform 900ms cubic-bezier(.16, 1, .3, 1) 250ms; }
.has-motion .point.is-in .point__key .rise { transform: none; }

/* 화려 ② — 진행 과정 단계 켜짐 */
.has-motion .tl__item { position: relative; border-top-color: var(--brand-200); }
.has-motion .tl__item::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--brand-500); transform: scaleX(0); transform-origin: left center;
  transition: transform 800ms cubic-bezier(.65, 0, .35, 1);
}
.has-motion .tl__item .tl__no { color: var(--brand-200); transition: color 500ms ease-out 300ms; }
.has-motion .tl__item .tl__title,
.has-motion .tl__item .tl__desc { opacity: .35; transform: translateY(8px); transition: opacity 600ms ease-out 250ms, transform 700ms cubic-bezier(.16, 1, .3, 1) 250ms; }
.has-motion .tl__item.is-on::before { transform: scaleX(1); }
.has-motion .tl__item.is-on .tl__no { color: var(--brand-500); }
.has-motion .tl__item.is-on .tl__title,
.has-motion .tl__item.is-on .tl__desc { opacity: 1; transform: none; }
.has-motion .tl__key--hl { background-size: 0 100%; background-repeat: no-repeat; transition: background-size 700ms ease-out 600ms; }
.has-motion .tl__item.is-on .tl__key--hl { background-size: 100% 100%; }

/* 히어로 — 배경 사진이 아주 천천히 제자리로(한 번). 글자 · 버튼은 그대로 */
.hero__bg { animation: hero-settle 14s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes hero-settle { from { transform: scale(1.08); } to { transform: none; } }
/* 히어로 전화 버튼 — 4초마다 한 번 은은한 빛 고리(버튼 자체는 움직이지 않는다) */
.btn--call { position: relative; }
.btn--call::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 var(--call-glow); animation: call-ring 4s ease-out 2s infinite;
}
@keyframes call-ring {
  0%   { box-shadow: 0 0 0 0 rgba(34, 227, 255, .55); }
  30%  { box-shadow: 0 0 0 14px rgba(34, 227, 255, 0); }
  100% { box-shadow: 0 0 0 14px rgba(34, 227, 255, 0); }
}

/* FAQ — 답이 펼쳐질 때 부드럽게 나타난다 */
.acc__panel:not([hidden]) { animation: acc-open 320ms ease-out; }
@keyframes acc-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 마지막 섹션 — 전화번호가 살짝 커지며 나타난다 */
.has-motion .finale__num.reveal { transform: scale(.94); }
.has-motion .finale__num.reveal.is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__bg, .btn--call::after, .acc__panel:not([hidden]) { animation: none; }
}
/* ── 18. 접근성 · 모션 · 인쇄 ─────────────────────────────────── */
/* 가이드 §5: 모션을 줄인 사용자에게는 전환을 걷어낸다 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none; }
}

@media print {
  .gnb, .drawer, .float-cta, .quick, .skip-link { display: none !important; }
  body { padding-bottom: 0; color: #000; }
  a[href^="tel:"]::after { content: " (" attr(href) ")"; }
}