@charset "utf-8";
/* ==========================================================================
   mr.korhomemaster.com — 시스템난방 / 난방분배기수리
   아트디렉션 모티프: M1 라인 드로잉·도면풍 (분배기 회로 단면을 1.5px 선으로)
   Hero 아키타입: H3 분할 매거진 (clip-path 리빌 + 미디어 패널 3장 크로스페이드)
   서사 프레임: C 근거강화형 (hook -> problem -> proof -> method -> cost -> risk -> action)
   액센트: 버건디 h344 (형제사이트 딥그린/틸과 겹치지 않는 허용 색역)
   ========================================================================== */

/* ── 토큰 ───────────────────────────────────────────────────────────────── */
:root {
  color-scheme: only light;

  --ink:        #16181b;
  --ink-2:      #2a2e33;
  --ink-3:      #3c4249;
  --muted:      #5c646e;
  --paper:      #f6f7f8;
  --paper-2:    #eceef0;
  --line:       #d6dadf;
  --line-soft:  #e4e7ea;

  --accent:      #8e1f3c;
  --accent-d:    #6b142c;
  --accent-l:    #b0294c;
  --accent-tint: #f7edf0;
  /* 다크 배경 위 액센트 — #b0294c는 #16181b 대비 2.77:1로 WCAG AA 미달이라
     같은 버건디 계열(h≈346)에서 명도만 올린 값을 쓴다(대비 7.9:1 / 다크카드 6.0:1). */
  --accent-on-dark: #ef92a8;

  --text-on-light: #16181b;
  --text-on-dark:  #ffffff;
  --muted-on-dark: #c7ccd2;

  --radius:   2px;
  --radius-l: 3px;

  --sp-1: 10px;
  --sp-2: 18px;
  --sp-3: 28px;
  --sp-4: 44px;
  --sp-5: 72px;
  --sp-6: 108px;
  --sp-7: 152px;

  --wrap: 1200px;
  --font: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  /* 라벨·숫자도 같은 산세리프로 통일하고 자간·굵기·tabular-nums로만 구분한다 */
  --mono: var(--font);

  --sticky-h: 64px;

  --proc-badge: 48px;
  --proc-badge-radius: var(--radius);
  --proc-line: 2px;
}

/* ── 리셋 · 전역 ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* hidden은 스크롤 컨테이너를 만들어 position:sticky(헤더)를 죽인다.
     clip은 컨테이너를 만들지 않으면서 가로 넘침만 잘라낸다 — 미지원 브라우저는 앞의 hidden을 쓴다. */
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--paper);
  color: var(--text-on-light);
  font-family: var(--font);
  font-size: 19px;
  line-height: 1.85;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* 한글은 어절 단위로만 줄바꿈한다. break-all / anywhere 금지. */
body, p, h1, h2, h3, h4, h5, h6, li, td, th, a, span, div,
button, label, figcaption, dt, dd, summary, small, strong {
  word-break: keep-all;
  overflow-wrap: break-word;
}

* { -webkit-tap-highlight-color: transparent; }
:where(a, button, [role="button"], summary) { touch-action: manipulation; }

img, svg, video { max-width: 100%; }
img { height: auto; border: 0; display: block; }

/* 세로 원본이 어떤 경로로 들어와도 가로로만 렌더링되게 하는 2차 방어선 */
.photo img, .card img, .hero img, .ba__fig img, .mq__item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  height: auto;
}

a { color: var(--accent-d); text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.24;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--text-on-light);
}

p, ul, ol, dl, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* 터치 타깃 — 단독 링크·버튼·아코디언·푸터 링크는 최소 44x44px */
:where(a, button, [role="button"], summary, .btn, .hdr__cta, nav a, .ftc__list--links a) {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
}
/* 본문 문장 안 인라인 링크는 예외 — 클래스가 붙은 컴포넌트 링크(.btn 등)는 제외한다.
   이전에 `p a`로 잡아서 <p class="hero__act"> 안의 .btn이 display:inline이 되고
   justify-content:center가 무효화돼 버튼 텍스트가 왼쪽으로 치우쳤다. */
p a:not([class]), li a.inline, .prose a:not([class]) {
  min-height: 0;
  min-width: 0;
  display: inline;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--text-on-dark);
  padding: 10px var(--sp-3);
}
.skip:focus { left: 0; }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

/* ── M1 모티프: 도면 해칭 · 눈금 · 라인 ────────────────────────────────────
   배경은 모눈(격자) 대신 단면도 해칭에 쓰는 사선 헤어라인을 쓴다.
   하단 CTA의 대각 액센트 라인과 같은 각도(115deg 계열)로 맞춰 한 모티프로 읽히게 한다. */
.bp {
  position: relative;
  isolation: isolate;
}
.bp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(115deg, currentColor 0 1px, transparent 1px 15px);
  opacity: .05;
}
/* 텍스트가 놓이는 면에는 더 촘촘하고 옅은 해칭 + 상하 페이드로 시선을 방해하지 않게 */
.bp--fine::before {
  background-image: repeating-linear-gradient(115deg, currentColor 0 1px, transparent 1px 9px);
  opacity: .038;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

/* 섹션 구분 눈금자 */
.rule {
  height: 16px;
  border-top: 1px solid var(--line);
  background-image: repeating-linear-gradient(115deg, var(--line) 0 1px, transparent 1px 10px);
  background-size: auto 8px;
  background-repeat: repeat-x;
}
.sec--dark .rule,
.sec--accent .rule {
  border-top-color: rgba(255, 255, 255, .28);
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px 10px);
}

.motif {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  color: var(--accent);
}
.motif--wide { max-width: 100%; }
.sec--dark .motif { color: rgba(255, 255, 255, .58); }

.motif path,
.motif line,
.motif circle,
.motif rect { vector-effect: non-scaling-stroke; }

/* 모듈 코너 마커 */
.corner {
  position: relative;
}
.corner::before,
.corner::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--accent);
  border-style: solid;
  pointer-events: none;
}
.corner::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.corner::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* ── 헤더 ───────────────────────────────────────────────────────────────── */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  background: rgba(246, 247, 248, .96);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(22, 24, 27, .07);
}
.hdr__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink);
  min-height: 48px;
}
.brand__mark {
  display: inline-flex;
  color: var(--accent);
  flex: 0 0 auto;
  transition: color .25s ease, transform .35s ease;
}
.brand__txt { display: flex; flex-direction: column; line-height: 1.16; }
.brand__name {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.brand__sub {
  font-family: var(--mono);
  font-variant: small-caps;
  font-feature-settings: "smcp" 1;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--muted);
  transition: color .25s ease;
}
.hdr__cta {
  flex: 0 0 auto;
  padding: 0 var(--sp-3);
  min-height: 46px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-on-dark);
  font-size: .95rem;
  font-weight: 600;
  justify-content: center;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

/* ── 히어로 (H3 분할 매거진) ───────────────────────────────────────────── */
.hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}
.hero__grid {
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}
/* 미디어가 DOM에서 먼저 — 모바일 1열에서 사진이 위로 온다 */
.hero__media {
  position: relative;
  /* 사진 프레임은 폭이 좁아져도 항상 가로비율을 유지한다.
     vh/dvh 높이를 쓰면 좁은 뷰포트에서 패널이 세로로 서면서 <img> 박스도 세로가 된다. */
  aspect-ratio: 4 / 3;
  min-height: 0;
  overflow: hidden;
  background: var(--paper-2);
  animation: heroClip .9s cubic-bezier(.22, .61, .36, 1) both;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero__slide.is-on { opacity: 1; }
.hero__slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  animation: kenburns 15s ease-in-out infinite alternate;
}
.hero__tag {
  font-variant-numeric: tabular-nums;
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 2;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  padding: 7px 12px;
  border-left: 3px solid var(--accent);
}
.hero__dots {
  position: absolute;
  right: calc(var(--sp-3) - 8px);
  bottom: calc(var(--sp-3) - 18px);
  z-index: 2;
  display: flex;
  gap: 0;
}
.hero__dot {
  width: 44px;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 시각 표시는 ::before — 버튼 자체는 44x44 히트 영역으로 유지한다 */
.hero__dot::before {
  content: "";
  display: block;
  width: 30px;
  height: 4px;
  background: rgba(246, 247, 248, .55);
  transition: background-color .3s ease, transform .3s ease;
}
.hero__dot.is-on::before { background: var(--accent-l); }

.hero__body {
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
  border-left: 1px solid var(--line);
}
.eyebrow {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}
.sec--dark .eyebrow { color: var(--accent-on-dark); }
.sec--dark .eyebrow::after { background: rgba(255, 255, 255, .22); }

/* H1 — 잘림 유발 속성(ellipsis/nowrap/line-clamp/고정 height) 사용 금지 */
.hero h1 {
  font-size: clamp(2.05rem, 6.6vw, 4.8rem);
  line-height: 1.1;
  letter-spacing: -0.045em;
  animation: fadeUp .8s .12s cubic-bezier(.22, .61, .36, 1) both;
}
.hero__sub {
  font-size: 1.08rem;
  color: var(--ink-3);
  max-width: 34em;
  animation: fadeUp .8s .22s cubic-bezier(.22, .61, .36, 1) both;
}
.hero__sub b { color: var(--accent-d); font-weight: 600; }
.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  animation: fadeUp .8s .3s cubic-bezier(.22, .61, .36, 1) both;
}
.chip {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .02em;
  padding: 6px 11px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.hero__act {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  animation: fadeUp .8s .38s cubic-bezier(.22, .61, .36, 1) both;
}

/* ── 버튼 ───────────────────────────────────────────────────────────────── */
.btn {
  padding: 0 var(--sp-4);
  min-height: 54px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.5px solid transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn--primary {
  background: var(--accent);
  color: var(--text-on-dark);
  border-color: var(--accent);
}
.btn--ghost {
  background: transparent;
  color: var(--accent-d);
  border-color: var(--accent);
}
.sec--dark .btn--ghost,
.sec--accent .btn--ghost {
  color: var(--text-on-dark);
  border-color: rgba(255, 255, 255, .6);
}
.sec--accent .btn--primary {
  background: var(--text-on-dark);
  color: var(--accent-d);
  border-color: var(--text-on-dark);
}

/* ── 섹션 ───────────────────────────────────────────────────────────────── */
.sec { padding: var(--sp-7) 0; }
.sec--tight { padding: var(--sp-6) 0; }
.sec--alt { background: var(--paper-2); }
.sec--dark {
  background: var(--ink);
  color: var(--text-on-dark);
}
.sec--dark h2, .sec--dark h3, .sec--dark h4 { color: var(--text-on-dark); }
.sec--dark p, .sec--dark li, .sec--dark dd { color: var(--muted-on-dark); }
.sec--accent {
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-d) 100%);
  color: var(--text-on-dark);
}
.sec--accent h2, .sec--accent h3 { color: var(--text-on-dark); }
.sec--accent p, .sec--accent li, .sec--accent small { color: rgba(255, 255, 255, .9); }

.sec__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  max-width: 40em;
}
.sec h2 { font-size: clamp(1.85rem, 4vw, 3.15rem); }
.sec__lead { font-size: 1.06rem; color: var(--ink-3); }
.sec--dark .sec__lead { color: var(--muted-on-dark); }

/* 좌 텍스트 / 우 비주얼 반복 리듬 (A4) — 미디어가 DOM에서 먼저 */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line-soft);
}
/* 섹션 제목 직후 첫 행은 여백이 겹치지 않게 상단 패딩·구분선을 제거한다 */
.sec__head + .row { padding-top: 0; border-top: 0; }
.sec--dark .row { border-top-color: rgba(255, 255, 255, .14); }
.row__txt { display: flex; flex-direction: column; gap: var(--sp-3); }
.row h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

/* ── 체크리스트 ─────────────────────────────────────────────────────────── */
[data-comp="checklist"] {
  display: grid;
  gap: var(--sp-1);
}
[data-comp="checklist"] > li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--sp-2);
  align-items: start;
  padding: var(--sp-1) var(--sp-2) var(--sp-2) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1rem;
  line-height: 1.62;
}
.sec--dark [data-comp="checklist"] > li { border-bottom-color: rgba(255, 255, 255, .14); }
[data-comp="checklist"] > li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 5px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  background-image: linear-gradient(to bottom right, transparent 45%, var(--accent) 45%, var(--accent) 55%, transparent 55%);
}
[data-comp="checklist"] b { color: var(--accent-d); font-weight: 600; }
.sec--dark [data-comp="checklist"] b { color: var(--accent-on-dark); }

/* ── Before / After ─────────────────────────────────────────────────────── */
[data-comp="ba"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.ba__fig {
  position: relative;
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
}
.sec--dark .ba__fig { border-color: rgba(255, 255, 255, .2); background: var(--ink-2); }
.ba__lbl {
  font-variant-numeric: tabular-nums;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  padding: 6px 12px;
  background: var(--ink);
  color: var(--text-on-dark);
}
.ba__fig--after .ba__lbl { background: var(--accent); }
.ba__fig figcaption {
  padding: var(--sp-3);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
}
.sec--dark .ba__fig figcaption { color: var(--muted-on-dark); border-top-color: rgba(255, 255, 255, .14); }

/* ── 카드 그리드 — 고정 열 수, auto-fit 금지 ───────────────────────────── */
.cg {
  display: grid;
  align-items: stretch;
  grid-auto-rows: 1fr;
  gap: var(--sp-4);
}
.cg--2 { grid-template-columns: repeat(2, 1fr); }
.cg--3 { grid-template-columns: repeat(3, 1fr); }
.cg--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sec--dark .card { background: var(--ink-2); border-color: rgba(255, 255, 255, .18); }
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
  z-index: 2;
}
.card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-2);
}
.card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
}
.card__n {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .14em;
  color: var(--accent);
}
.card h3 { font-size: 1.1rem; }
.card p {
  font-size: .95rem;
  line-height: 1.66;
  color: var(--muted);
}
.sec--dark .card p { color: var(--muted-on-dark); }
.sec--dark .card .card__n { color: var(--accent-on-dark); }
.sec--dark .card__badges > span {
  font-variant-numeric: tabular-nums; color: var(--muted-on-dark); border-color: rgba(255, 255, 255, .24); }
.card__more {
  font-variant-numeric: tabular-nums;
  margin-top: auto;
  padding-top: var(--sp-3);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--accent-d);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sec--dark .card__more { color: var(--accent-on-dark); }
a.card { color: inherit; min-height: 0; min-width: 0; display: flex; }
.card--cta { background: var(--ink); border-color: var(--ink); }
.card--cta h3 { color: var(--text-on-dark); }
.card--cta .card__n { color: var(--accent-on-dark); }
.card--cta p { color: var(--muted-on-dark); }
.card--cta .card__more { color: var(--accent-on-dark); }
.card--cta .card__body { justify-content: center; }

/* ── 프로세스 · 타임라인 (변형 금지 구역) ──────────────────────────────── */
.proc-list { display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; }
.proc-step { flex: 1 1 0; min-width: 0; position: relative; padding: 0 20px; text-align: center; }
.proc-step:not(:last-child)::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: calc(var(--proc-badge) / 2 - var(--proc-line) / 2);
  left: 50%;
  width: 100%;
  height: var(--proc-line);
  background: var(--line);
}
.sec--dark .proc-step:not(:last-child)::after { background: rgba(255, 255, 255, .22); }
.proc-num {
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
  width: var(--proc-badge);
  height: var(--proc-badge);
  margin: 0 auto 12px;
  border-radius: var(--proc-badge-radius);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-family: var(--mono);
  display: flex;
  align-items: center;
  justify-content: center;
}
.proc-step h3 { font-size: 1.02rem; margin-bottom: 6px; }
.proc-step p { font-size: .93rem; line-height: 1.62; color: var(--muted); }
.sec--dark .proc-step p { color: var(--muted-on-dark); }
.proc-step__meta {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--accent-d);
  border-top: 1px solid var(--line);
  padding-top: 6px;
}
.sec--dark .proc-step__meta { color: var(--accent-on-dark); border-top-color: rgba(255, 255, 255, .22); }

/* ── 표 ─────────────────────────────────────────────────────────────────── */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--paper);
}
.sec--dark .tablewrap { border-color: rgba(255, 255, 255, .2); background: var(--ink-2); }
[data-comp="costtable"],
[data-comp="compare"],
[data-comp="spec"] {
  width: 100%;
  border-collapse: collapse;
  font-size: .97rem;
  min-width: 34em;
}
[data-comp="costtable"] th,
[data-comp="compare"] th,
[data-comp="spec"] th {
  text-align: left;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .1em;
  font-weight: 600;
  background: var(--ink);
  color: var(--text-on-dark);
  padding: var(--sp-3);
  white-space: normal;
}
[data-comp="costtable"] td,
[data-comp="compare"] td,
[data-comp="spec"] td {
  padding: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.6;
}
.sec--dark [data-comp="costtable"] td,
.sec--dark [data-comp="compare"] td,
.sec--dark [data-comp="spec"] td { border-top-color: rgba(255, 255, 255, .14); color: var(--muted-on-dark); }
[data-comp="costtable"] tbody tr:nth-child(even),
[data-comp="compare"] tbody tr:nth-child(even) { background: var(--paper-2); }
.sec--dark [data-comp="costtable"] tbody tr:nth-child(even),
.sec--dark [data-comp="compare"] tbody tr:nth-child(even) { background: rgba(255, 255, 255, .04); }
[data-comp="costtable"] td:first-child,
[data-comp="compare"] td:first-child { font-weight: 600; color: var(--ink); }
.sec--dark [data-comp="costtable"] td:first-child,
.sec--dark [data-comp="compare"] td:first-child { color: var(--text-on-dark); }
.tnote {
  margin-top: var(--sp-3);
  font-size: .88rem;
  color: var(--muted);
}
.sec--dark .tnote { color: var(--muted-on-dark); }

/* ── 콜아웃 ─────────────────────────────────────────────────────────────── */
[data-comp="callout"] {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: var(--accent-tint);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
}
.sec--dark [data-comp="callout"] {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .18);
  border-left-color: var(--accent-l);
}
[data-comp="callout"] h3 { font-size: 1.04rem; }
[data-comp="callout"] p { font-size: .96rem; color: var(--ink-3); }

/* ── 스탯 (실데이터만) ──────────────────────────────────────────────────── */
[data-comp="spec"].stat,
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.stat__n {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-on-dark);
}
.stat__u { font-size: .5em; margin-left: 4px; }
.stat__k {
  display: block;
  margin-top: var(--sp-1);
  font-size: .95rem;
  color: var(--muted-on-dark);
}

/* ── 시공사진 마퀴 (무한 루프는 사이트 전체에서 이것 1개만) ────────────── */
.mq {
  overflow: hidden;
  overflow-x: clip;
  max-width: 100%;
  border-block: 1px solid var(--line);
  padding: var(--sp-5) 0;
  background: var(--paper);
}
.mq__track {
  display: flex;
  gap: var(--sp-4);
  width: max-content;
  animation: mq 38s linear infinite;
}
.mq__item {
  flex: 0 0 auto;
  width: 19rem;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.mq__item figcaption {
  padding: 10px var(--sp-2);
  font-size: .85rem;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: var(--sp-2); }
.faq__i {
  border: 1px solid var(--line);
  background: var(--paper);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.sec--dark .faq__i { background: var(--ink-2); border-color: rgba(255, 255, 255, .18); }
.faq__i summary {
  min-height: 60px;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  color: var(--ink);
}
.sec--dark .faq__i summary { color: var(--text-on-dark); }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .3s ease;
}
.faq__i[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq__a {
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: .99rem;
  line-height: 1.8;
  color: var(--ink-3);
}
.sec--dark .faq__a { color: var(--muted-on-dark); }
.faq__i[open] .faq__a { animation: fadeUp .4s ease both; }

/* ── 하단 CTA 배너 (5레이어) ───────────────────────────────────────────── */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--text-on-dark);
  isolation: isolate;
}
.cta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.cta__bg img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}
/* 국소 스크림 — 이미지 전체를 덮는 색상 오버레이가 아니라 카피 영역만 */
.cta__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(22, 24, 27, .93) 0%, rgba(22, 24, 27, .82) 38%, rgba(22, 24, 27, 0) 74%);
}
.cta__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-3);
  display: grid;
  gap: var(--sp-3);
  max-width: min(var(--wrap), 100%);
}
.cta__box { max-width: 28em; display: grid; gap: var(--sp-4); }
.cta h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); color: var(--text-on-dark); }
.cta p { color: var(--muted-on-dark); font-size: 1.05rem; }
.cta__act { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cta__act .btn { min-height: 54px; }
.cta small { color: var(--muted-on-dark); font-size: .9rem; }
/* .cta__diag 는 제거했다 — 대각 해칭이 사진 패널 경계와 어긋나 지저분해 보였다.
   배경은 브랜드 색면 + 사진 split(메인) 또는 색면 + 도면 라인 그래픽(그 외)으로 간다. */
/* 브랜드 색면 CTA — 색면 전체 + 우측 사진 패널 split (단색 아님) */
.cta--brand { background: linear-gradient(162deg, var(--accent) 0%, var(--accent-d) 100%); }
.cta--brand .cta__bg {
  left: 52%;
  right: 0;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  height: auto;
  aspect-ratio: 4 / 3;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
.cta--brand .cta__scrim {
  background: linear-gradient(94deg, rgba(107, 20, 44, .96) 0%, rgba(107, 20, 44, .74) 44%, rgba(107, 20, 44, 0) 62%);
}
.cta--brand p, .cta--brand small { color: rgba(255, 255, 255, .92); }
.cta--brand .btn--primary { background: var(--paper); color: var(--accent-d); border-color: var(--paper); }
.cta--brand .btn--ghost { color: var(--text-on-dark); border-color: rgba(255, 255, 255, .66); }
@media (max-width: 1024px) {
  .cta--brand .cta__bg {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 48%;
    clip-path: none;
  }
  .cta--brand .cta__scrim { background: linear-gradient(to bottom, rgba(107, 20, 44, .97) 0%, rgba(107, 20, 44, .9) 58%, rgba(107, 20, 44, .55) 100%); }
}
@media (hover: hover) and (pointer: fine) {
  .cta--brand .btn--primary:hover { background: var(--paper-2); }
  .cta--brand .btn--ghost:hover { background: rgba(255, 255, 255, .14); color: var(--text-on-dark); }
}

/* 상담 카드 — 전화/문자 시각 비중을 동일하게 맞춘다 */
.ccard {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  color: inherit;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ccard__ic { display: inline-flex; color: var(--accent); margin-bottom: var(--sp-1); }
.ccard__k {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .16em;
  color: var(--muted);
}
.ccard__n {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(1.6rem, 4.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ccard__d { font-size: .97rem; line-height: 1.66; color: var(--muted); }
.ccard__go {
  font-variant-numeric: tabular-nums;
  margin-top: auto;
  padding-top: var(--sp-3);
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--accent-d);
}
@media (hover: hover) and (pointer: fine) {
  .ccard:hover { border-color: var(--accent); box-shadow: 0 14px 38px rgba(22, 24, 27, .1); transform: translateY(-2px); }
}

/* 사진 대신 도면 라인을 얹는 CTA 배경 레이어 (M1 모티프) */
.cta__plan {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  width: min(42%, 28rem);
  color: rgba(255, 255, 255, .3);
  pointer-events: none;
}
@media (max-width: 768px) {
  .cta__plan { width: 80%; right: -8%; top: auto; bottom: 3%; transform: none; opacity: .55; }
}

/* 단독 내부링크 피처 행 — 발행 페이지가 1개뿐일 때 고아 카드를 만들지 않는다 */
.feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  background: var(--paper);
  color: inherit;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.feat__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.feat__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); justify-content: center; }
.feat__body h3 { font-size: clamp(1.2rem, 2.2vw, 1.7rem); }
.feat__body p { font-size: .98rem; color: var(--muted); }
.feat__more {
  font-variant-numeric: tabular-nums;
  margin-top: var(--sp-2);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--accent-d);
}
@media (max-width: 768px) { .feat { grid-template-columns: 1fr; } }
@media (hover: hover) and (pointer: fine) {
  .feat:hover { border-color: var(--accent); box-shadow: 0 14px 38px rgba(22, 24, 27, .1); }
}

/* 브레드크럼 */
.bc {
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.bc a {
  color: var(--muted);
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
}
.bc span[aria-current] { color: var(--accent-d); }
@media (hover: hover) and (pointer: fine) {
  .bc a:hover { color: var(--accent-d); }
}

/* 아이콘 격자 (M1 선 아이콘) */
.icg { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.icg__i {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  background: var(--paper);
}
.sec--dark .icg__i { border-color: rgba(255, 255, 255, .18); background: var(--ink-2); }
.icg__i svg { color: var(--accent); }
.sec--dark .icg__i svg { color: var(--accent-l); }
.icg__i h3 { font-size: 1rem; }
.icg__i p { font-size: .92rem; line-height: 1.6; color: var(--muted); }
.sec--dark .icg__i p { color: var(--muted-on-dark); }
@media (max-width: 1024px) { .icg { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .icg { grid-template-columns: 1fr; } }

/* ── 푸터 — 왼쪽 기준 클러스터. 가운데 정렬 금지 ───────────────────────── */
.ft {
  background: var(--ink);
  color: var(--text-on-dark);
  padding-top: var(--sp-4);
  overflow: hidden;
  font-size: .82rem;
  line-height: 1.55;
}
.ft__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-3);
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
  text-align: left;
}
.ftc__t {
  font-variant-numeric: tabular-nums;
  font-size: .76rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: rgba(255, 255, 255, .58);
  font-family: var(--mono);
  letter-spacing: .1em;
}
.ftc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.ftc__list > li { font-size: .82rem; line-height: 1.55; color: var(--muted-on-dark); }
.ftc--biz .ftc__list > li { display: grid; grid-template-columns: 6.6rem 1fr; gap: 6px; }
.ftc__k { color: rgba(255, 255, 255, .45); font-size: .78rem; }
.ftc__v { color: var(--muted-on-dark); }
.ftc__list--links > li { display: block; }
.ftc__list--links a {
  color: var(--muted-on-dark);
  font-size: .82rem;
  position: relative;
  transition: color .25s ease;
}
.ftc__list--links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 1px;
  background: var(--accent-l);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.ftc__list--row { grid-auto-flow: row; }
.ft__bottom {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 10px var(--sp-3) var(--sp-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: var(--sp-3);
  gap: var(--sp-2);
}
.ft__bottom small { color: rgba(255, 255, 255, .42); font-size: .74rem; }

/* ── 고정 CTA — z-index: 헤더 100 > 스티키바 90 > 플로팅 80 ────────────── */
.mobbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding: 10px var(--sp-2) calc(10px + env(safe-area-inset-bottom));
}
.mobbar__btn {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  background: var(--accent);
  color: var(--text-on-dark);
  font-weight: 600;
  border-radius: 999px;
}
.floatcta {
  position: fixed;
  right: var(--sp-3);
  z-index: 80;
  bottom: calc(var(--sticky-h) + 16px + env(safe-area-inset-bottom));
  gap: 9px;
  padding: 0 var(--sp-3);
  min-height: 52px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: .95rem;
  box-shadow: 0 10px 30px rgba(22, 24, 27, .28);
  transition: transform .25s ease, background-color .25s ease;
}
.floatcta__ic { display: inline-flex; }

/* ── 스크롤 리빌 — .js 게이트 필수 ─────────────────────────────────────── */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ── 애니메이션 ─────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroClip {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.11); }
}
@keyframes mq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes dash {
  from { stroke-dashoffset: 220; }
  to   { stroke-dashoffset: 0; }
}
.js [data-reveal].is-in .motif path { animation: dash 1.5s ease forwards; stroke-dasharray: 220; }

/* ── 호버는 반드시 이 가드 안에서만 ───────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .hdr__cta:hover { background: var(--accent-d); border-color: var(--accent-d); }
  .brand:hover .brand__mark { transform: translateY(-2px); }
  .brand:hover .brand__sub { color: var(--accent); }
  .btn--primary:hover { background: var(--accent-d); border-color: var(--accent-d); transform: translateY(-2px); }
  .btn--ghost:hover { background: var(--accent); color: var(--text-on-dark); }
  .sec--accent .btn--primary:hover { background: var(--paper-2); }
  .card:hover { border-color: var(--accent); box-shadow: 0 14px 38px rgba(22, 24, 27, .1); }
  .card:hover::before { transform: scaleX(1); }
  .faq__i:hover { border-color: var(--accent); }
  .ftc__list--links a:hover { color: var(--accent-l); }
  .ftc__list--links a:hover::after { transform: scaleX(1); }
  .floatcta:hover { background: var(--accent-d); transform: translateY(-2px); }
  .hero__dot:hover::before { transform: scaleY(1.8); }
  .mq:hover .mq__track { animation-play-state: paused; }
}
.btn:active, .hdr__cta:active, .mobbar__btn:active { transform: scale(.985); }

/* ── LG/XL 1151px 이상은 기본값 유지 ───────────────────────────────────── */
@media (max-width: 1151px) {
  :root { --sp-7: 124px; --sp-6: 92px; }
  .mq__item { width: 17rem; }
}

/* ── MD 태블릿 769~1024px — 카드 열 수 데스크톱 -1(최소 2열) ───────────── */
@media (max-width: 1024px) {
  :root { --sp-7: 108px; --sp-6: 80px; --sp-5: 60px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { aspect-ratio: 16 / 9; }
  .hero__body { border-left: 0; border-top: 1px solid var(--line); padding: var(--sp-5) var(--sp-3); }
  .cg--4 { grid-template-columns: repeat(3, 1fr); }
  .cg--3 { grid-template-columns: repeat(2, 1fr); }
  .row { grid-template-columns: 1fr; gap: var(--sp-3); }

  /* 프로세스 — 가로선을 세로선으로 전환(숨기지 않는다) */
  .proc-list { flex-direction: column; gap: 44px; }
  .proc-step { padding: 0 0 0 calc(var(--proc-badge) + 16px); text-align: left; }
  .proc-num { position: absolute; left: 0; top: 0; margin: 0; }
  .proc-step:not(:last-child)::after {
    top: var(--proc-badge);
    left: calc(var(--proc-badge) / 2 - var(--proc-line) / 2);
    width: var(--proc-line);
    height: calc(100% + 44px);
  }
  .ft__in { grid-template-columns: 1fr 1fr; }
}

/* ── SM 모바일 ≤768px ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --sp-7: 80px; --sp-6: 60px; --sp-5: 46px; --sp-4: 32px; --sp-3: 22px; }
  body { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom)); }
  .mobbar { display: block; }
  .floatcta { display: none; }
  .hdr { background: rgba(246, 247, 248, .96); border-bottom-color: var(--line); }
  .hdr__in { padding: 10px var(--sp-3); }
  .cg--2, .cg--3, .cg--4 { grid-template-columns: 1fr; }
  [data-comp="ba"] { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: var(--sp-3); }
  .cta__in { padding: var(--sp-6) var(--sp-3); }
  .cta__scrim { background: linear-gradient(to bottom, rgba(22, 24, 27, .78) 0%, rgba(22, 24, 27, .95) 55%); }
  .cta__act .btn, .hero__act .btn { width: 100%; }
  .ft__in { grid-template-columns: 1fr; text-align: left; }
  .ft__bottom { flex-direction: column; align-items: flex-start; }
  .br-desktop { display: none; }
  .br-mobile { display: inline; }
  .mq__item { width: 14.5rem; }
  .card__badges { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (min-width: 769px) {
  .br-mobile { display: none; }
  .br-desktop { display: inline; }
}

/* ── XS 소형 모바일 ≤480px ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --sp-3: 20px; --sp-4: 28px; }
  body { font-size: 18px; }
  .brand__sub { display: none; }
  .hero h1 { font-size: clamp(1.78rem, 8.6vw, 2.5rem); }
  .ftc--biz .ftc__list > li { grid-template-columns: 1fr; gap: 0; }
  .chip { font-size: .74rem; }
  [data-comp="checklist"] > li { grid-template-columns: 22px 1fr; font-size: .96rem; }
}

/* 뱃지는 폭이 서로 달라 grid가 아니라 flex로 — 빈 칸이 생기지 않는다 */
.card__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.card__badges > span {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  padding: 4px 9px;
  border: 1px solid var(--line);
  color: var(--muted);
}

/* ── 모션 민감 사용자 ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__media, .hero h1, .hero__sub, .hero__chips, .hero__act { animation: none !important; }
  .hero__slide img { animation: none !important; }
  .mq__track { animation: none !important; }
}

/* 시각적으로만 감추고 스크린리더에는 남기는 라벨 */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── 시맨틱 리스트로 조립한 컴포넌트 보정 ─────────────────────────────── */
.cg > li { min-width: 0; display: flex; flex-direction: column; }
.cg > li > .card,
.cg > li > .ccard { width: 100%; flex: 1 1 auto; }
.faq > li { display: block; }
.stats > li { display: block; }

/* 푸터 클러스터 블록 */
.ftc { min-width: 0; }
/* 대표 서비스 바로가기는 가로 나란히 배치 (폭이 서로 달라 grid 대신 flex-wrap) */
.ftc--svc .ftc__list--row { display: flex; flex-wrap: wrap; gap: 0 20px; }

/* 다크 섹션 안의 피처 카드 — 밝은 카드 배경에 흰 글씨가 얹히는 것을 막는다 */
.sec--dark .feat { background: var(--ink-2); border-color: rgba(255, 255, 255, .18); }
.sec--dark .feat__body p { color: var(--muted-on-dark); }
.sec--dark .feat__more,
.sec--dark .feat .card__n { color: var(--accent-on-dark); }
.sec--dark .feat__media { background: rgba(255, 255, 255, .06); }

/* 다크 섹션 안의 시공사진 마퀴 — 밝은 띠로 떠 보이지 않게 섹션과 결을 맞춘다 */
.sec--dark .mq { background: transparent; border-block-color: rgba(255, 255, 255, .18); }
.sec--dark .mq__item { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .18); }
.sec--dark .mq__item figcaption { color: var(--muted-on-dark); border-top-color: rgba(255, 255, 255, .14); }

/* <button>·폼 요소는 폰트를 상속하지 않아 UA 기본(Arial 등)으로 빠진다 */
button, input, select, textarea { font: inherit; color: inherit; }

/* ── 모바일 표: 가로 스크롤 대신 세로 카드로 접는다 ────────────────────────
   3~5열 표를 375px에서 min-width로 유지하면 래퍼가 195px 가로 스크롤된다.
   display를 바꾸면 표 의미가 사라지므로 마크업에 role="table|rowgroup|row|cell|
   columnheader"를 함께 부여했고, 헤더 라벨은 각 td의 data-label로 노출한다. */
@media (max-width: 768px) {
  .tablewrap {
    overflow-x: visible;
    border: 0;
    background: transparent;
  }
  .tablewrap table {
    min-width: 0;
    display: block;
  }
  .tablewrap caption { display: block; padding: 0 0 var(--sp-2) !important; }
  /* thead는 시각적으로만 감추고 스크린리더에는 남긴다 */
  .tablewrap thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tablewrap tbody { display: block; }
  .tablewrap tbody tr {
    display: block;
    border: 1px solid var(--line);
    background: var(--paper);
    padding: var(--sp-3);
  }
  .tablewrap tbody tr + tr { margin-top: var(--sp-2); }
  .tablewrap tbody tr:nth-child(even) { background: var(--paper); }
  .tablewrap tbody td {
    display: block;
    padding: var(--sp-2) 0 0;
    border-top: 0;
    font-size: .95rem;
  }
  .tablewrap tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--muted);
  }
  /* 첫 칸은 그 행의 제목으로 읽히게 — 라벨 없이 크게 */
  .tablewrap tbody td:first-child {
    padding: 0 0 var(--sp-2);
    margin-bottom: 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1.04rem;
    font-weight: 700;
    color: var(--ink);
  }
  .tablewrap tbody td:first-child::before { display: none; }
  .sec--dark .tablewrap tbody tr { background: var(--ink-2); border-color: rgba(255, 255, 255, .18); }
  .sec--dark .tablewrap tbody td::before { color: var(--muted-on-dark); }
  .sec--dark .tablewrap tbody td:first-child { color: var(--text-on-dark); border-bottom-color: rgba(255, 255, 255, .18); }
}

/* 카드 상단 라인 아이콘 — 사진 없는 텍스트 카드 구간의 시각 휴지 (M1 모티프) */
.card__ic {
  display: block;
  width: 64px;
  max-width: 64px;
  margin-bottom: var(--sp-2);
  color: var(--accent);
}
.card__ic svg { display: block; }
.sec--dark .card__ic { color: var(--accent-on-dark); }

/* ── 5-Image Internal Link Grid — 3+2 오프셋 배치 ─────────────────────────
   6열 그리드에서 앞 3개는 2열씩, 뒤 2개는 3열씩 차지해 고아 카드가 생기지 않는다.
   5개 항목 모두 동일한 마크업 패턴(List semantics)을 유지한다. */
.grid5 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.grid5 > li { min-width: 0; display: flex; }
.grid5 > li:nth-child(-n+3) { grid-column: span 2; }
.grid5 > li:nth-child(n+4)  { grid-column: span 3; }
.g5 {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  min-width: 0;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sec--dark .g5 { background: var(--ink-2); border-color: rgba(255, 255, 255, .18); }
.g5__fig { margin: 0; }
.g5__fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
.g5__fig figcaption {
  padding: var(--sp-2) var(--sp-3) 0;
  font-size: .88rem;
  line-height: 1.58;
  color: var(--muted);
}
.sec--dark .g5__fig figcaption { color: var(--muted-on-dark); }
.g5__body { display: block; padding: var(--sp-2) var(--sp-3) var(--sp-3); margin-top: auto; }
.g5__t {
  display: block;
  margin-top: 4px;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.sec--dark .g5__t { color: var(--text-on-dark); }
@media (hover: hover) and (pointer: fine) {
  .g5:hover { border-color: var(--accent); box-shadow: 0 14px 38px rgba(22, 24, 27, .12); transform: translateY(-2px); }
}
@media (max-width: 1024px) {
  .grid5 { grid-template-columns: repeat(2, 1fr); }
  .grid5 > li:nth-child(-n+3),
  .grid5 > li:nth-child(n+4) { grid-column: span 1; }
  .grid5 > li:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 768px) {
  .grid5 { grid-template-columns: 1fr; }
  .grid5 > li:nth-child(5) { grid-column: span 1; }
}

/* 다크 섹션에서 새로 쓰이는 블록의 텍스트 색 보정 (밝은 배경용 색이 그대로 걸려 대비 미달) */
.sec--dark [data-comp="callout"] p { color: var(--muted-on-dark); }
.sec--dark .g5 .card__n { color: var(--accent-on-dark); }
.sec--dark .g5__fig figcaption { color: var(--muted-on-dark); }

/* ── 히어로 아키타입 변형 (H4 · H5 · H7 · H10) ───────────────────────────
   어떤 변형이든 사진 박스는 aspect-ratio로 가로비율을 고정한다. */
.hero--h4, .hero--h5, .hero--h7, .hero--h10 { display: block; }

.hero__band { position: relative; overflow: hidden; }
.hero__band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; height: auto; }
.hero__band--tall img { aspect-ratio: 16 / 9; }
.hero__band--wide img { aspect-ratio: 24 / 9; }
.hero__band .hero__tag { left: var(--sp-3); bottom: var(--sp-3); }

/* H4 띠 스택 — 사진띠 아래 대형 카피 */
.hero__stack { padding: var(--sp-5) var(--sp-3) var(--sp-6); display: grid; gap: var(--sp-3); }
.hero--h4 h1 { font-size: clamp(2.05rem, 7vw, 5.2rem); line-height: 1.08; letter-spacing: -0.045em; }

/* H5 카드 오버랩 — 사진 위로 카피 카드가 올라온다 */
.hero__card {
  position: relative;
  margin-top: calc(var(--sp-5) * -1);
  margin-bottom: var(--sp-5);
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  gap: var(--sp-3);
  max-width: 46rem;
}
.hero--h5 h1 { font-size: clamp(2rem, 5.6vw, 4.2rem); }

/* H7 사선 클립 — 우측 사진을 대각으로 잘라낸 분할 */
.hero__diag { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; max-width: var(--wrap); margin-inline: auto; }
.hero__diag-copy { padding: var(--sp-6) var(--sp-4) var(--sp-6) var(--sp-3); display: grid; gap: var(--sp-3); }
.hero__diag-media { position: relative; overflow: hidden; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
.hero__diag-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
.hero--h7 h1 { font-size: clamp(2rem, 5.4vw, 4.1rem); }

/* H10 타이포 우선 — 초대형 카피 먼저, 아래 와이드 사진띠 */
.hero__type { padding: var(--sp-6) var(--sp-3) var(--sp-5); display: grid; gap: var(--sp-3); max-width: 52rem; margin-inline: auto; }
.hero--h10 h1 { font-size: clamp(2.1rem, 7.6vw, 5.6rem); line-height: 1.06; letter-spacing: -0.05em; }
.hero--h10 .hero__sub { max-width: 40em; }

@media (max-width: 1024px) {
  .hero__diag { grid-template-columns: 1fr; }
  .hero__diag-media { clip-path: none; order: -1; }
  .hero__diag-media img { aspect-ratio: 16 / 9; }
  .hero__diag-copy { padding: var(--sp-5) var(--sp-3); }
}
@media (max-width: 768px) {
  .hero__band--wide img { aspect-ratio: 16 / 9; }
  .hero__card { margin-top: calc(var(--sp-4) * -1); padding: var(--sp-4); }
  .hero__stack, .hero__type { padding: var(--sp-4) var(--sp-3) var(--sp-5); }
}

/* ── 큰 번호 목록 ─────────────────────────────────────────────────────── */
.numlist { display: grid; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; counter-reset: none; }
.numlist > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}
.sec--dark .numlist > li { border-bottom-color: rgba(255, 255, 255, .14); }
.numlist__n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.sec--dark .numlist__n { color: var(--accent-on-dark); }
.numlist__b h3 { font-size: 1.06rem; margin-bottom: 6px; }
.numlist__b p { font-size: .97rem; line-height: 1.66; color: var(--muted); }
.sec--dark .numlist__b p { color: var(--muted-on-dark); }

/* ── 정의 목록 ────────────────────────────────────────────────────────── */
.defs { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.sec--dark .defs { border-top-color: rgba(255, 255, 255, .18); }
.defs__row {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.sec--dark .defs__row { border-bottom-color: rgba(255, 255, 255, .14); }
.defs dt { font-weight: 700; font-size: 1.02rem; color: var(--ink); margin: 0; }
.sec--dark .defs dt { color: var(--text-on-dark); }
.defs dd { margin: 0; font-size: .98rem; line-height: 1.7; color: var(--muted); }
.sec--dark .defs dd { color: var(--muted-on-dark); }
@media (max-width: 768px) { .defs__row { grid-template-columns: 1fr; gap: 6px; } }

/* ── 좌 텍스트 / 우 목록 split 행 ─────────────────────────────────────── */
.splitrow {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line-soft);
}
.splitrow--first { border-top: 0; padding-top: 0; }
.sec--dark .splitrow { border-top-color: rgba(255, 255, 255, .14); }
.splitrow__t h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: var(--sp-1); }
.splitrow__t p { font-size: .98rem; line-height: 1.7; color: var(--muted); }
.sec--dark .splitrow__t p { color: var(--muted-on-dark); }
.splitrow__l { display: grid; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.splitrow__l > li {
  position: relative;
  padding-left: var(--sp-3);
  font-size: .98rem;
  line-height: 1.66;
  color: var(--ink-3);
}
.sec--dark .splitrow__l > li { color: var(--muted-on-dark); }
.splitrow__l > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 12px;
  height: 1px;
  background: var(--accent);
}
.sec--dark .splitrow__l > li::before { background: var(--accent-on-dark); }
@media (max-width: 768px) { .splitrow { grid-template-columns: 1fr; gap: var(--sp-3); } }

/* ── 강조 밴드 ────────────────────────────────────────────────────────── */
.band {
  background: linear-gradient(168deg, var(--accent) 0%, var(--accent-d) 100%);
  color: var(--text-on-dark);
  padding: var(--sp-6) 0;
}
.band__in { display: grid; gap: var(--sp-2); }
.band__t {
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.035em;
  color: var(--text-on-dark);
  max-width: 34em;
}
.band__t b { color: var(--text-on-dark); border-bottom: 2px solid rgba(255, 255, 255, .55); }
.band small { color: rgba(255, 255, 255, .88); font-size: .9rem; }

/* ── 인라인 질답 ──────────────────────────────────────────────────────── */
.qa { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }
.qa > li { padding-left: var(--sp-3); border-left: 2px solid var(--accent); }
.sec--dark .qa > li { border-left-color: var(--accent-on-dark); }
.qa__q { font-size: 1.04rem; margin-bottom: var(--sp-1); }
.qa__a { font-size: .97rem; line-height: 1.7; color: var(--muted); }
.sec--dark .qa__a { color: var(--muted-on-dark); }
@media (max-width: 768px) { .qa { grid-template-columns: 1fr; gap: var(--sp-3); } }

/* ── CTA 변형 ─────────────────────────────────────────────────────────── */
.cta--band .cta__in { padding-block: var(--sp-5); }
.cta--plan .cta__box { max-width: 30em; }