/* ================================================================
   아웃크래프트 — style.css (누수시공)
   에디토리얼/아키텍처럴 디자인 시스템 — 컬러/카드/그림자보다
   타이포그래피·그리드·화이트스페이스·실제 시공사진으로 위계를 만든다.
   ================================================================ */

:root {
  /* 컬러 — 웜 크림 배경 + 골드/블루/퍼플 브랜드 팔레트.
     에디토리얼 레이아웃(카드/그림자/필 없음)은 그대로 두고 색만 브랜드 팔레트로 복원.
     밝은 gold(#f9c410)·sky(#6eb4fb)는 텍스트로 쓰면 대비가 안 나와 라벨/링크류엔
     항상 -ink(어두운) 변형을 쓴다. 채우기(버튼)는 원색 그대로 + 어두운 글자. */
  --c-bg:        #FFFDF6;
  --c-bg-alt:    #FDF3D9;
  --c-surface:   #FFFFFF;

  --c-ink:       #1C1401;
  --c-ink-soft:  #624604;
  --c-ink-faint: #946705;

  --c-line:        rgba(28,20,1,.14);
  --c-line-strong: #1C1401;

  --c-primary:      #F9C410;
  --c-primary-ink:  #634D03;
  --c-secondary:      #6EB4FB;
  --c-secondary-ink:  #044C95;
  --c-accent:       #8A41FA;
  --c-accent-ink:   #3E0495;
  --c-accent-light: #F1E6FE;

  --text-on-primary: #1C1401;
  --text-on-dark: #FFFDF6;

  --font-body:    'Pretendard Variable', 'Apple SD Gothic Neo', sans-serif;
  /* 시그니처: 헤드라인·구조 넘버는 세리프(정밀 진단/전문성), 본문은 계속 Pretendard(가독성) */
  --font-display: 'Noto Serif KR', 'Apple SD Gothic Neo', serif;

  /* 타입 스케일 — 데스크톱. H1 72px / H2 44px / H3 22-26px / 본문 18px(시니어 가독성 유지) */
  --fs-xs:  .875rem;  /* 14px  caption/eyebrow */
  --fs-sm:  1rem;     /* 16px  보조 텍스트 */
  --fs-base: 1.125rem;/* 18px  본문 */
  --fs-lg:  1.25rem;  /* 20px  본문 강조/버튼 */
  --fs-xl:  1.5rem;   /* 24px  h3 */
  --fs-2xl: 1.875rem; /* 30px  h3 large / stat */
  --fs-3xl: 2.75rem;  /* 44px  h2 */
  --fs-4xl: 3.5rem;   /* 56px  디테일 페이지 h1 */
  --fs-5xl: 4.75rem;  /* 76px  홈 히어로 h1 */

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem; --space-32:8rem; --space-40:10rem;

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  --radius-sm: 2px; --radius-md: 6px; --radius-lg: 8px;

  --shadow-sm: 0 1px 3px rgba(30,28,25,.08);
  --shadow-md: 0 8px 24px rgba(30,28,25,.10);

  --trans-fast: .2s ease-out;
  --trans-base: .35s ease-out;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-bg);
  font-size: var(--fs-base);
  line-height: 1.7;
  overflow-x: hidden;
}

body, p, h1, h2, h3, h4, h5, h6, li, td, th, a, span, div, button {
  word-break: keep-all;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0; letter-spacing: -.005em; }
h1 { line-height: 1.08; }
h2, h3 { line-height: 1.2; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 var(--container-pad); }
/* padding-top/bottom만 사용(shorthand 금지) — <section class="section container">처럼
   두 클래스가 같은 요소에 같이 쓰이는 경우, 둘 다 padding shorthand면 같은 특이도에서
   나중에 정의된 쪽이 위/아래뿐 아니라 좌우까지 통째로 덮어써서 container의 좌우
   padding이 사라지는 사고가 난다(실제로 이 버그가 있었음). shorthand를 쓰지 않으면
   애초에 충돌할 속성이 없다. */
.section { padding-top: var(--space-32); padding-bottom: var(--space-32); }
.section-sm { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.section-soft, .section-warm { background: var(--c-bg-alt); }

/* 상담 절차 — 카드 그리드(=흔한 "3-4개 동일 박스" 패턴) 대신 실제 진행 순서를 선으로
   잇는 흐름형. 카드 4개를 나란히 찍어내지 않고, 원 마디 + 연결선으로 "차례로 진행된다"는
   사실 자체를 형태로 보여준다. */
.flow { display: flex; gap: var(--space-8); }
.flow-step { flex: 1; text-align: left; }
.flow-node-row { display: flex; align-items: center; margin-bottom: var(--space-5); }
.flow-node {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--c-surface);
  border: 2px solid var(--c-primary); color: var(--c-primary-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); font-variant-numeric: tabular-nums;
}
.flow-line { flex: 1; height: 1px; background: var(--c-line); margin-left: var(--space-3); }
.flow-step h3 { font-size: var(--fs-lg); color: var(--c-ink); margin-bottom: var(--space-2); }
.flow-step p { font-size: var(--fs-base); color: var(--c-ink-soft); margin: 0; line-height: 1.7; }
.flow-step:nth-child(2) .flow-node { border-color: var(--c-secondary); color: var(--c-secondary-ink); }
.flow-step:nth-child(3) .flow-node { border-color: var(--c-accent); color: var(--c-accent-ink); }
.flow-step:nth-child(4) .flow-node { border-color: var(--c-primary); color: var(--c-primary-ink); }
@media (max-width: 768px) {
  .flow { flex-direction: column; gap: var(--space-6); }
  .flow-line { display: none; }
}

/* 섹션 헤드 — 기본은 좌측 정렬 에디토리얼. 중앙정렬은 FAQ 등 예외적으로만 별도 지정 */
.section-head { text-align: left; margin-bottom: var(--space-16); max-width: 640px; }
.section-head h2 { font-size: var(--fs-3xl); color: var(--c-ink); }
.section-head p { color: var(--c-ink-soft); margin-top: var(--space-3); font-size: var(--fs-lg); }

/* 상담신청 페이지 — 전화 영역을 하나의 박스로 묶어 시선이 바로 여기 멈추게 */
.contact-box {
  max-width: 560px; margin: var(--space-10) auto 0; background: var(--c-surface);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-10) var(--space-8);
}
@media (max-width: 600px) { .contact-box { padding: var(--space-8) var(--space-5); } }

.phone-display { text-align: center; margin: 0 auto; }
.phone-display a {
  display: inline-flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em;
  font-size: var(--fs-4xl); color: var(--c-primary-ink); font-variant-numeric: tabular-nums;
}
.phone-display .icon-svg { width: 36px; height: 36px; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) { .phone-display a:hover { opacity: .75; } }
@media (max-width: 600px) {
  .phone-display a { font-size: var(--fs-2xl); gap: var(--space-3); }
  .phone-display .icon-svg { width: 26px; height: 26px; }
}

.eyebrow {
  display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--c-accent-ink);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-4);
}

/* 줄글 나열 금지용 텍스트 블록 — 아이콘/둥근박스 대신 좌측 accent rule + 타이포로 위계를 만든다 */
.intro-card { border-left: 2px solid var(--c-ink); padding-left: var(--space-8); max-width: 720px; margin: var(--space-10) 0 var(--space-16); }
.intro-card .intro-icon { display: none; }
.intro-card p { margin: 0; color: var(--c-ink-soft); font-size: var(--fs-lg); line-height: 1.75; }
.intro-card p:first-of-type { color: var(--c-ink); font-weight: 600; font-size: var(--fs-xl); line-height: 1.5; }
.intro-card p + p { margin-top: var(--space-4); }
@media (max-width: 600px) { .intro-card { padding-left: var(--space-5); } .intro-card p:first-of-type { font-size: var(--fs-lg); } }

/* 텍스트 분량이 많은 인트로용 — 좌측 큰 리드문 + 우측 본문 2단 레이아웃 */
.split-intro { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-10); align-items: start; margin: var(--space-10) 0 var(--space-16); }
.split-intro .split-lead { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.4; color: var(--c-ink); margin: 0; }
.split-intro .split-body p { color: var(--c-ink-soft); font-size: var(--fs-base); line-height: 1.75; margin: 0 0 var(--space-4); }
.split-intro .split-body p:last-child { margin-bottom: 0; }
@media (max-width: 768px) { .split-intro { grid-template-columns: 1fr; gap: var(--space-5); } }

/* 체크리스트 항목이 많을 때용 — 줄 나열 대신 2열 카드 그리드 */
.chk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); }
.chk-grid .chk {
  background: var(--c-surface); border: none; border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-sm);
}
.chk-grid .chk .mark {
  width: 24px; height: 24px; border-radius: 50%; background: var(--c-accent-light);
  border: none; color: var(--c-accent-ink);
}
@media (max-width: 768px) { .chk-grid { grid-template-columns: 1fr; } }

/* 에디토리얼 리드 블록(홈 전용) — eyebrow + 큰 statement + rule + 본문 */
.lede {
  max-width: 760px; background: var(--c-bg-alt); border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-10); margin: 0 0 var(--space-16);
}
.lede .lede-statement { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.005em; line-height: 1.3; color: var(--c-ink); }
.lede hr { border: none; border-top: 1px solid var(--c-line); margin: var(--space-8) 0; width: 64px; }
.lede p { font-size: var(--fs-lg); color: var(--c-ink-soft); line-height: 1.8; margin: 0; }
.lede p + p { margin-top: var(--space-4); }
@media (max-width: 600px) { .lede { padding: var(--space-6) var(--space-6); } }

/* grid utility classes */
.dp-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10) var(--space-8); }
.dp-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10) var(--space-8); }
.dp-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.dp-stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; text-align: left; }
@media (max-width: 1024px) { .dp-g3, .dp-g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .dp-g2, .dp-g3, .dp-g4 { grid-template-columns: 1fr; } }
@media (max-width: 600px)  { .dp-stat3 { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ── 헤더 ── */
.hdr { position: sticky; top: 0; z-index: 100; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.hdr-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.hdr-logo { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.01em; color: var(--c-ink); }
.hdr-nav { display: flex; gap: var(--space-10); }
.hdr-nav a { font-weight: 500; font-size: var(--fs-sm); color: var(--c-ink-soft); transition: color var(--trans-fast); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.hdr-cta { background: var(--c-primary); color: var(--text-on-primary); padding: 11px 22px; border-radius: var(--radius-md); font-weight: 600; font-size: var(--fs-sm); transition: background var(--trans-fast); }
.hdr-burger { display: none; flex-direction: column; gap: 5px; width: 26px; }
.hdr-burger span { height: 1px; background: var(--c-ink); }

#mob-nav { display: none; }

@media (max-width: 768px) {
  .hdr-nav, .hdr-cta { display: none; }
  .hdr-burger { display: flex; }
  #mob-nav {
    display: block; position: fixed; inset: 72px 0 0 0; background: var(--c-bg);
    padding: var(--space-8) var(--container-pad); z-index: 99; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease-out, transform .22s ease-out, visibility 0s linear .22s;
  }
  #mob-nav.open {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .22s ease-out, transform .22s ease-out, visibility 0s linear 0s;
  }
  #mob-nav a { display: block; padding: var(--space-4) 0; font-weight: 600; font-size: var(--fs-lg); border-bottom: 1px solid var(--c-line); }
  body { padding-bottom: 64px; }
}

/* ── 히어로 ── 비대칭 레이아웃. 카드/그라디언트 블롭/wave 없음. 사진은 사진 그대로 크게 */
.hero { padding-top: var(--space-16); padding-bottom: var(--space-32); }
.hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: center; min-height: 60vh; }
.hero-content { max-width: 480px; }
.hero-badge { font-size: var(--fs-xs); font-weight: 700; color: var(--c-secondary-ink); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-5); display: block; }
.hero-content h1 { font-size: var(--fs-5xl); color: var(--c-ink); }
.hero-sub { color: var(--c-ink-soft); margin-top: var(--space-6); font-size: var(--fs-lg); line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: var(--space-8); margin-top: var(--space-10); flex-wrap: wrap; }
.hero-figure { position: relative; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; border-radius: var(--radius-sm); }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 30px; border-radius: var(--radius-md); font-weight: 600; font-size: var(--fs-base); transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast); }
.btn-icon { gap: 10px; }
.btn-primary { background: var(--c-primary); color: var(--text-on-primary); border: 1px solid var(--c-primary); }
.btn-outline { background: transparent; color: var(--c-ink); border: 1px solid var(--c-ink); }
.btn-outline-hero { background: transparent; color: var(--c-ink); border: 1px solid var(--c-ink); }
.btn-outline-light { background: transparent; color: var(--text-on-dark); border: 1px solid rgba(255,253,246,.6); }

/* 세컨더리 CTA — 버튼이 아니라 화살표 텍스트 링크 */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-base); color: var(--c-ink); border-bottom: 1px solid var(--c-ink); padding-bottom: 2px; transition: opacity var(--trans-fast), gap var(--trans-fast); }
.link-arrow .arrow { transition: transform var(--trans-fast); }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--c-primary-ink); border-color: var(--c-primary-ink); color: var(--c-bg); }
  .btn-outline:hover, .btn-outline-hero:hover { background: var(--c-ink); color: var(--c-bg); }
  .btn-outline-light:hover { background: var(--text-on-dark); color: var(--c-ink); border-color: var(--text-on-dark); }
  .hdr-cta:hover { background: var(--c-primary-ink); color: var(--c-bg); }
  .hdr-nav a:hover { color: var(--c-ink); border-bottom-color: var(--c-ink); }
  .link-arrow:hover { opacity: .7; }
  .link-arrow:hover .arrow { transform: translateX(3px); }
  .service-row:hover .service-row-img img { transform: scale(1.02); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-10); min-height: 0; }
  .hero-content { max-width: none; }
  .hero-figure img { aspect-ratio: 16/10; }
}
@media (max-width: 600px) {
  .hero { padding-top: var(--space-10); padding-bottom: var(--space-20); }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
}

/* ── 서비스 인덱스(에디토리얼 디렉토리 리스트) — 홈 전용, 6카드 그리드 대체 ── */
.service-index { border-top: 1px solid var(--c-line); }
.service-row { display: grid; grid-template-columns: 100px 1fr 340px; gap: var(--space-10); align-items: center; padding: var(--space-10) 0; border-bottom: 1px solid var(--c-line); }
.service-row:nth-child(even) { grid-template-columns: 340px 1fr 100px; }
.service-row:nth-child(even) .service-row-img { order: -1; }
.service-row:nth-child(even) .service-row-num { order: 1; text-align: right; }
.service-row-num { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--c-line-strong); opacity: .3; font-variant-numeric: tabular-nums; }
.service-row-body h3 { font-size: var(--fs-2xl); }
.service-row-body p { color: var(--c-ink-soft); margin-top: var(--space-3); font-size: var(--fs-base); max-width: 46ch; }
.service-row-body .link-arrow { margin-top: var(--space-5); font-size: var(--fs-sm); }
.service-row-img { aspect-ratio: 4/3; overflow: hidden; }
.service-row-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease-out; }
@media (max-width: 900px) {
  .service-row, .service-row:nth-child(even) { grid-template-columns: 60px 1fr; grid-template-areas: "num body" "img img"; padding: var(--space-8) 0; }
  .service-row-num { grid-area: num; font-size: var(--fs-xl); }
  .service-row:nth-child(even) .service-row-num { text-align: left; order: 0; }
  .service-row-body { grid-area: body; }
  .service-row-img { grid-area: img; order: 0 !important; aspect-ratio: 16/10; }
}

/* ── 카드(사진 예시 그리드) — 박스/그림자/둥근모서리 없음. 사진 + 캡션만 ── */
.card { background: var(--c-surface); border: none; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--trans-base), transform var(--trans-base); }
.card-img { aspect-ratio: 4/3; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: var(--space-5); }
.card-body h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.card-body p { color: var(--c-ink-soft); font-size: var(--fs-sm); line-height: 1.7; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
}

.card-badges { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.badge { color: var(--c-secondary-ink); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* ── Before/After — 넓게, 크게. 라벨은 색 배지가 아니라 캡션 텍스트 ── */
.ba-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.ba-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; }
.ba-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ba-label { position: absolute; top: var(--space-5); left: var(--space-5); background: var(--c-bg); color: var(--c-ink); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 6px 14px; }
@media (max-width: 600px) { .ba-wrap { grid-template-columns: 1fr; } }

/* ── 통계 — 색 구분 대신 상단 rule + 차콜 넘버 ── */
.dp-stat3 > div { border-top: 1px solid var(--c-line); padding-top: var(--space-5); }
.stat-num { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; color: var(--c-primary-ink); font-variant-numeric: tabular-nums; }
.dp-stat3 > div:nth-child(2) .stat-num { color: var(--c-secondary-ink); }
.dp-stat3 > div:nth-child(3) .stat-num { color: var(--c-accent-ink); }
.stat-num.stat-pop { animation: stat-pop .18s ease-out; }
@keyframes stat-pop { 0% { opacity: 0; transform: scale(.95); } 100% { opacity: 1; transform: scale(1); } }
.stat-label { color: var(--c-ink-soft); font-size: var(--fs-sm); margin-top: var(--space-2); }

/* ── FAQ — 카드 없음. divider + 큰 타이포 + '+/×' 텍스트 토글만 ── */
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-item:first-child { border-top: 1px solid var(--c-line); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-6) 0; font-weight: 600; font-size: var(--fs-lg); text-align: left; width: 100%; color: var(--c-ink); }
.faq-q .icon { flex-shrink: 0; color: var(--c-accent-ink); font-weight: 400; font-size: 1.5rem; transition: transform var(--trans-base); }
.faq-item.open .faq-q .icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease-out; color: var(--c-ink-soft); font-size: var(--fs-base); }
.faq-item.open .faq-a { max-height: 600px; }
.faq-a-inner { padding-bottom: var(--space-6); max-width: 68ch; line-height: 1.8; }

/* ── CTA — 컬러 박스 대신 큰 클로징 스테이트먼트 ── */
/* 마무리 CTA — 사진 배경 + 어두운 오버레이로 확실한 클로징 임팩트를 준다(플랫 크림 배경 대신) */
.cta-band {
  position: relative; text-align: center;
  padding-top: var(--space-32); padding-bottom: var(--space-32);
  background: linear-gradient(rgba(28,20,1,.76), rgba(28,20,1,.76)), url('/assets/images/leak-5989.webp') center/cover no-repeat;
}
.cta-band .container { max-width: 760px; margin-left: auto; margin-right: auto; }
.cta-band h2 { color: var(--text-on-dark); font-size: var(--fs-4xl); line-height: 1.25; }
.cta-band p { color: rgba(255,253,246,.85); margin-top: var(--space-5); font-size: var(--fs-lg); }
.cta-band .cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
@media (max-width: 480px) { .cta-band .cta-actions { flex-direction: column; align-items: center; } }
.cta-note { color: rgba(255,253,246,.65); font-size: var(--fs-sm); margin-top: var(--space-5) !important; }

/* ── 내부링크 카드 ── */
.related-card { display: block; }
.related-card .card-img { aspect-ratio: 16/10; }

/* ── 표 ── */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-4) var(--space-5); text-align: left; border-bottom: 1px solid var(--c-line); }
th { background: transparent; color: var(--c-secondary-ink); font-weight: 700; border-bottom: 2px solid var(--c-secondary-ink); }

/* ── 타임라인(가이드용) — 대시선 대신 얇은 실선 + 숫자 ── */
.tl { border-left: 1px solid var(--c-line); padding-left: var(--space-8); }
.tl-item { position: relative; padding-bottom: var(--space-10); }
.tl-item::before { content: ''; position: absolute; left: -33px; top: 6px; width: 8px; height: 8px; background: var(--c-secondary); }
.tl-item h3 { font-size: var(--fs-xl); }
.tl-item p { margin-top: var(--space-2); }

/* ── 체크리스트(가이드용) ── */
.chk { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--c-line); }
.chk .mark { width: 20px; height: 20px; border-radius: 0; background: none; border: 1px solid var(--c-accent-ink); color: var(--c-accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .75rem; flex-shrink: 0; margin-top: 2px; }

/* ── 아이콘(장식용, 최소한만) ── */
.icon-svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ── 푸터 ── */
.ftr { background: var(--c-ink); color: rgba(246,244,238,.7); padding: var(--space-20) 0 var(--space-8); }
.ftr h4 { color: var(--text-on-dark); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-5); }
.ftr-g { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-8); }
.ftr a { color: rgba(246,244,238,.7); }
.ftr li { padding: 5px 0; }
.ftr-bottom { border-top: 1px solid rgba(246,244,238,.15); margin-top: var(--space-10); padding-top: var(--space-6); font-size: var(--fs-xs); }
@media (hover: hover) and (pointer: fine) { .ftr a:hover { color: var(--text-on-dark); } }
@media (max-width: 768px) { .ftr-g { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ── 모바일 스티키 CTA ── */
#mob-bar { display: none; }
@media (max-width: 768px) {
  #mob-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: var(--c-primary); height: 64px; border-top: 1px solid var(--c-line);
  }
  #mob-bar a { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-on-primary); font-weight: 700; }
}
#float-cta { display: none; }
@media (min-width: 769px) {
  #float-cta {
    display: flex; position: fixed; bottom: 32px; right: 32px; z-index: 200;
    background: var(--c-primary); color: var(--text-on-primary); padding: 15px 26px;
    border-radius: var(--radius-md); font-weight: 700; box-shadow: var(--shadow-sm);
  }
}

/* ── 스크롤 리빌 — 절제된 opacity + 소폭 이동만 ── */
.reveal { opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .5s ease-out, transform .5s ease-out; }
.reveal.in { opacity: 1; transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .service-row-img img { transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── 모바일 타입 스케일 축소 ── */
@media (max-width: 768px) {
  :root {
    --fs-5xl: 2.75rem; /* 44px */
    --fs-4xl: 2.5rem;  /* 40px */
    --fs-3xl: 1.875rem;/* 30px */
    --fs-2xl: 1.5rem;  /* 24px */
    --fs-xl: 1.375rem; /* 22px */
  }
  .section { padding-top: var(--space-20); padding-bottom: var(--space-20); }
  .section-sm { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .cta-band { padding-top: var(--space-20); padding-bottom: var(--space-20); }
}