/* ==== Roots / 욕실하부장시공 (brw.haengjipsaveteran.com) ====
   레퍼런스: smdc.haengjipsaveteran.com (--dp- 변수 체계, radius/grid/spacing 규모 참고)
   팔레트는 욕실/배관/목재 하부장 소재에 맞춰 틸 + 우드톤으로 변형 적용 */

:root {
  /* Primary — 딥 틸 (수전·배관·청결·신뢰) */
  --dp-primary:      #0F6E6A;
  --dp-primary-2:    #0B4E4B;
  --dp-primary-3:    #133B3F;

  /* Accent — 웜 우드톤 (실제 하부장 도어 소재감) */
  --dp-accent:       #B9814F;
  --dp-accent-soft:  #E8D5B7;
  --dp-accent-pale:  #F5EDE0;

  /* Background */
  --dp-bg:           #ffffff;
  --dp-bg-soft:      #F2F7F6;
  --dp-bg-warm:      #FBF7F1;

  /* Border */
  --dp-border:       #DCE6E4;
  --dp-border-soft:  rgba(15,110,106,0.10);

  /* Text */
  --dp-text:         #16211F;
  --dp-text-sub:     #3A4C49;
  --dp-text-muted:   #6C7D7A;
  --text-on-light:   #16211F;
  --text-on-dark:    #ffffff;

  /* Typography */
  --dp-font-body:    "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  --dp-font-display: "Noto Serif KR", "Pretendard Variable", serif;

  --dp-fs-display: clamp(2.3rem, 6.5vw, 4.8rem);
  --dp-fs-h1:      clamp(1.9rem, 4.2vw, 3rem);
  --dp-fs-h2:      clamp(1.6rem, 3.6vw, 2.5rem);
  --dp-fs-h3:      clamp(1.1rem, 2vw, 1.35rem);
  --dp-fs-lede:    clamp(0.95rem, 1.5vw, 1.1rem);

  /* Layout */
  --dp-max-w:      1280px;
  --dp-max-w-text: 760px;
  --dp-gutter:     clamp(16px, 4vw, 28px);
  --dp-sec-pad:    clamp(64px, 10vw, 120px);

  /* Radius scale — 라운드 없음(각진 스타일) */
  --dp-radius-sm:  0;
  --dp-radius:     0;
  --dp-radius-lg:  0;
  --dp-radius-xl:  0;
  --dp-radius-pill: 0;

  --dp-shadow: 0 8px 24px rgba(19,59,63,0.08);
  --dp-shadow-lg: 0 16px 40px rgba(19,59,63,0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 84px; } /* 고정 헤더에 앵커 이동 시 제목이 가리지 않도록 */
body {
  margin: 0;
  font-family: var(--dp-font-body);
  color: var(--dp-text);
  background: var(--dp-bg);
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

.dp-wrap { max-width: var(--dp-max-w); margin: 0 auto; padding: 0 var(--dp-gutter); }
.dp-section { padding: var(--dp-sec-pad) 0; }
.dp-section-soft { background: var(--dp-bg-soft); }
.dp-section-warm { background: var(--dp-bg-warm); }
.dp-section-dark { background: linear-gradient(135deg, var(--dp-primary-3), var(--dp-primary-2)); color: var(--text-on-dark); }
.dp-section-dark h2, .dp-section-dark h3, .dp-section-dark p { color: var(--text-on-dark); }

h1, h2, h3 { font-family: var(--dp-font-display); font-weight: 700; line-height: 1.3; margin: 0 0 16px; }
h2 { font-size: var(--dp-fs-h2); }
h3 { font-size: var(--dp-fs-h3); }
p { margin: 0 0 14px; color: var(--dp-text-sub); }
.dp-lede { font-size: var(--dp-fs-lede); color: var(--dp-text-sub); max-width: var(--dp-max-w-text); }

.dp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--dp-radius-pill);
  font-weight: 700; font-size: 1rem; border: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dp-btn-primary { background: var(--dp-primary); color: var(--text-on-dark); box-shadow: var(--dp-shadow); }
.dp-btn-outline { background: transparent; color: var(--dp-primary); border: 2px solid var(--dp-primary); }
.dp-section-dark .dp-btn-outline { color: var(--text-on-dark); border-color: rgba(255,255,255,0.6); }
@media (hover: hover) and (pointer: fine) {
  .dp-btn:hover { transform: translateY(-2px); box-shadow: var(--dp-shadow-lg); }
}
.dp-btn:active { transform: translateY(0); }

/* ==== 상담페이지 전용 — 큰 전화번호 (스펙상 /contact/ 에서만 전화번호 텍스트 노출 허용) ==== */
.contact-phone-big {
  display:inline-block; margin: 0 0 28px;
  font-family: var(--dp-font-display); font-weight:700;
  font-size: clamp(2.2rem, 6vw, 3.4rem); letter-spacing:0.02em;
  color: var(--dp-primary);
}
@media (hover: hover) and (pointer: fine) {
  .contact-phone-big:hover { color: var(--dp-primary-2); }
}

/* ==== 그리드 (인라인 style 고정컬럼 금지 — 반드시 클래스 사용) ==== */
.dp-g2  { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.dp-g3  { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.dp-g4  { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.dp-stat3 { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center; align-items:center; }
@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:16px; } }

/* ==== 카드 ==== */
.dp-card {
  background: var(--dp-bg); border: 1px solid var(--dp-border); border-radius: var(--dp-radius-lg);
  padding: 28px; box-shadow: var(--dp-shadow);
}
.dp-card h3 { margin-bottom: 10px; }
.dp-card p { margin-bottom: 0; font-size: 0.95rem; }

.card-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 12px; }
.dp-badge {
  display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 4px 12px;
  border-radius: var(--dp-radius-pill); background: var(--dp-accent-pale); color: var(--dp-primary-2);
  white-space: nowrap;
}
@media(max-width:768px) {
  .card-badges { flex-direction:column; align-items:flex-start; gap:6px; }
}

/* ==== 신뢰 근거 (미니멀 에디토리얼 — 큰 고스트 넘버 + 얇은 구분선, 그림자 없음) ==== */
.reason-grid {
  display:flex; flex-wrap:wrap;
  background: var(--dp-bg); border:1px solid var(--dp-border); border-radius: var(--dp-radius-xl);
  overflow:hidden; counter-reset: reasonnum;
}
.reason-item { flex:1 1 220px; padding:36px 28px; border-right:1px solid var(--dp-border); counter-increment: reasonnum; }
.reason-item:last-child { border-right:none; }
.reason-item::before {
  content: counter(reasonnum, decimal-leading-zero);
  display:block; font-family: var(--dp-font-display); font-size:2.6rem; font-weight:700;
  color: var(--dp-border); line-height:1; margin-bottom:18px;
}
.reason-item h3 { font-size:1.05rem; margin-bottom:8px; }
.reason-item p { font-size:0.9rem; margin-bottom:0; }
@media(max-width:768px) {
  .reason-item { flex:1 1 50%; border-right:none; }
  .reason-item:nth-child(1), .reason-item:nth-child(2) { border-bottom:1px solid var(--dp-border); }
  .reason-item:nth-child(odd) { border-right:1px solid var(--dp-border); }
}
@media(max-width:480px) {
  .reason-item { flex:1 1 100%; border-right:none !important; border-bottom:1px solid var(--dp-border); }
  .reason-item:last-child { border-bottom:none; }
}

/* ==== 이미지 카드(내부링크 썸네일 포함) ==== */
.dp-imgcard { border-radius: var(--dp-radius-lg); overflow: hidden; background: var(--dp-bg); border: 1px solid var(--dp-border); box-shadow: var(--dp-shadow); }
.dp-imgcard img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.dp-imgcard-body { padding: 18px 20px; }
.dp-imgcard-body h3 { font-size: 1.05rem; margin-bottom: 6px; }
.dp-imgcard-body p { font-size: 0.88rem; margin-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .dp-imgcard { transition: transform .2s ease, box-shadow .2s ease; }
  .dp-imgcard:hover { transform: translateY(-4px); box-shadow: var(--dp-shadow-lg); }
}

/* ==== Before/After ==== */
.dp-ba { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:768px) { .dp-ba { grid-template-columns:1fr; } }
.dp-ba figure { margin:0; position:relative; border-radius: var(--dp-radius-lg); overflow:hidden; }
.dp-ba figure img { aspect-ratio:4/3; object-fit:cover; }
.dp-ba figcaption {
  position:absolute; top:12px; left:12px; background: rgba(19,59,63,0.85); color:#fff;
  font-size:0.78rem; font-weight:700; padding:4px 12px; border-radius: var(--dp-radius-pill);
}

/* ==== 헤더 ==== */
.hdr { position: sticky; top:0; z-index: 100; background: rgba(255,255,255,0.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--dp-border); }
.hdr-inner { max-width: var(--dp-max-w); margin:0 auto; padding: 14px var(--dp-gutter); display:flex; align-items:center; justify-content:space-between; gap: 20px; }
.hdr-logo { font-family: var(--dp-font-display); font-weight: 700; font-size: 1.3rem; color: var(--dp-primary-2); }
.hdr-logo span { color: var(--dp-accent); }
.hdr-nav { display:flex; align-items:center; gap: 26px; }
.hdr-nav a { font-size: 0.92rem; font-weight: 600; color: var(--dp-text-sub); }
@media (hover: hover) and (pointer: fine) {
  .hdr-nav a:hover { color: var(--dp-primary); }
}
.hdr-phone { display:inline-flex; }
.hdr-cta { background: var(--dp-primary); color:#fff; padding: 10px 22px; border-radius: var(--dp-radius-pill); font-weight:700; font-size:0.9rem; }
.hdr-burger { display:none; width:40px; height:40px; border:none; background:transparent; }
.hdr-burger span { display:block; width:22px; height:2px; background: var(--dp-text); margin:5px auto; }

@media(max-width:768px) {
  .hdr-nav, .hdr-phone { display:none; }
  .hdr-burger { display:block; }
  body { padding-bottom: 64px; }
}

#mob-nav {
  position: fixed; inset: 0; background: #fff; z-index: 200; padding: 24px var(--dp-gutter);
  transform: translateX(100%); transition: transform .25s ease; overflow-y:auto;
}
#mob-nav.open { transform: translateX(0); }
#mob-nav a { display:block; padding: 16px 0; font-size: 1.1rem; font-weight:700; border-bottom: 1px solid var(--dp-border); }
#mob-nav-close { display:block; margin-left:auto; width:40px; height:40px; border:none; background:transparent; font-size:1.5rem; }

#mob-bar {
  display:none; position: fixed; bottom:0; left:0; right:0; z-index: 150;
  background: var(--dp-primary); padding: 12px var(--dp-gutter); box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
}
#mob-bar a { display:flex; align-items:center; justify-content:center; gap:8px; color:#fff; font-weight:700; font-size:1rem; }
@media(max-width:768px) { #mob-bar { display:block; } }

#float-cta {
  position: fixed; bottom: 32px; right: 32px; z-index: 150;
  background: var(--dp-primary); color:#fff; padding: 16px 26px; border-radius: var(--dp-radius-pill);
  box-shadow: var(--dp-shadow-lg); font-weight:700;
}
@media(max-width:768px) { #float-cta { display:none; } }

/* ==== 히어로 (전면 색상 오버레이 금지 — 텍스트 영역만 국소 그라데이션) ==== */
.hero { position: relative; min-height: 88vh; display:flex; align-items:center; overflow:hidden; }
.hero-slides { position:absolute; inset:0; }
.hero-slide { position:absolute; inset:0; opacity:0; animation: hero-fade 15s infinite; }
.hero-slide img { width:100%; height:100%; object-fit:cover; animation: hero-drift 15s ease-in-out infinite; }
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 5s; }
.hero-slide:nth-child(3) { animation-delay: 10s; }
@keyframes hero-fade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  28%  { opacity: 1; }
  36%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hero-drift {
  0% { transform: scale(1.04) translateY(0); } 100% { transform: scale(1.12) translateY(-14px); }
}
/* 상세/가이드 페이지: 단일 이미지 히어로 — 크로스페이드 없이 드리프트만 */
.hero-single .hero-slide { opacity: 1; animation: hero-drift 18s ease-in-out infinite alternate; }
.hero-textzone {
  position:absolute; left:0; right:0; bottom:0; height:280px;
  background: linear-gradient(to top, rgba(11,20,20,0.62), rgba(11,20,20,0) 100%);
}
.hero-inner { position:relative; z-index:2; max-width: var(--dp-max-w); margin:0 auto; padding: 0 var(--dp-gutter); }
.hero h1 { color:#fff; font-size: var(--dp-fs-display); margin-bottom: 18px; }
.hero-sub { color: rgba(255,255,255,0.92); font-size: 1.1rem; max-width: 560px; margin-bottom: 28px; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; }

/* ==== 상세/가이드 히어로: 사진(위) + 불투명 캡션 패널(아래) — 사진 위에 텍스트를 얹지 않아 어떤 사진에서도 가독성이 보장된다.
   브레드크럼도 같은 패널 안에 자연스럽게 포함된다. ==== */
.hero-single { min-height:auto; display:block; }
.hero-single .hero-slides { position:relative; height:44vh; min-height:300px; max-height:460px; }
.hero-single .hero-textzone { display:none; }
.hero-single .hero-inner {
  position:static; z-index:auto; max-width:none; margin:0;
  background: var(--dp-primary-3);
  padding: 26px var(--dp-gutter) 40px;
}
.hero-single .hero-crumb { display:block; font-size:0.8rem; color: rgba(255,255,255,0.55); margin-bottom:16px; }
.hero-single .hero-crumb a { color: rgba(255,255,255,0.8); }
@media (hover: hover) and (pointer: fine) {
  .hero-single .hero-crumb a:hover { color:#fff; }
}
.hero-single h1 { font-size: var(--dp-fs-h1); margin-bottom:12px; }
.hero-single .hero-sub { font-size:1rem; max-width:640px; margin-bottom:24px; }
@media(max-width:768px) {
  .hero-single .hero-slides { height:32vh; min-height:200px; }
  .hero-single .hero-inner { padding: 22px var(--dp-gutter) 30px; }
}

/* ==== 메인 히어로 (데스크톱: 텍스트 | 애프터사진 모자이크 분할 / 모바일: 사진·텍스트 섹션 완전 분리) ==== */
.hero-home { min-height:auto; display:block; align-items:initial; }
.hero-home .hero-split { display:flex; min-height:86vh; }
.hero-home .hero-media { position:relative; flex:1 1 60%; overflow:hidden; }
.hero-home .hero-mosaic { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr); gap:6px; height:100%; }
.hero-home .hero-mosaic-item { overflow:hidden; }
.hero-home .hero-mosaic-item img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-home .hero-mosaic-lg { grid-column: span 2; grid-row: span 2; }
.hero-home .hero-media .hero-textzone { display:none; }
.hero-home .hero-inner {
  position:static; z-index:auto; flex:0 0 40%; max-width:none;
  background: var(--dp-bg-warm); padding: 60px var(--dp-gutter);
  display:flex; flex-direction:column; justify-content:center;
}
.hero-home .hero-inner h1 { color: var(--dp-text); font-size: clamp(2.5rem, 4.2vw, 4.1rem); }
.hero-home .hero-sub { color: var(--dp-text-sub); }

/* 진입 애니메이션 — 모자이크 타일은 순서대로 등장, H1은 살짝 밀려 올라오며 페이드인 */
@keyframes mosaic-tile-in { from { opacity:0; transform: scale(1.06); } to { opacity:1; transform: scale(1); } }
@keyframes hero-h1-in { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform: translateY(0); } }
.hero-home .hero-mosaic-item { animation: mosaic-tile-in .7s cubic-bezier(.2,.7,.3,1) both; }
.hero-home .hero-mosaic-item:nth-child(1) { animation-delay: .05s; }
.hero-home .hero-mosaic-item:nth-child(2) { animation-delay: .15s; }
.hero-home .hero-mosaic-item:nth-child(3) { animation-delay: .22s; }
.hero-home .hero-mosaic-item:nth-child(4) { animation-delay: .29s; }
.hero-home .hero-mosaic-item:nth-child(5) { animation-delay: .36s; }
.hero-home .hero-mosaic-item:nth-child(6) { animation-delay: .43s; }
.hero-home .hero-mosaic-item:nth-child(7) { animation-delay: .5s; }
.hero-home .hero-mosaic-item:nth-child(8) { animation-delay: .57s; }
.hero-home .hero-mosaic-item:nth-child(9) { animation-delay: .64s; }
.hero-home .hero-inner h1 { animation: hero-h1-in .8s cubic-bezier(.2,.7,.3,1) .15s both; }

/* 모바일: 사진(크로스페이드 슬라이드쇼) 섹션과 텍스트 섹션을 완전히 분리 — 텍스트가 사진 위에 겹치지 않는다 */
@media(max-width:768px) {
  .hero-home .hero-split { flex-direction:column; min-height:auto; }
  .hero-home .hero-media { flex:none; height:50vh; }
  .hero-home .hero-mosaic { display:block; height:100%; }
  .hero-home .hero-mosaic-item { position:absolute; inset:0; opacity:0; animation: hero-fade 15s infinite; }
  .hero-home .hero-mosaic-item:nth-child(1) { animation-delay:0s; }
  .hero-home .hero-mosaic-item:nth-child(2) { animation-delay:5s; }
  .hero-home .hero-mosaic-item:nth-child(3) { animation-delay:10s; }
  .hero-home .hero-mosaic-item:nth-child(n+4) { display:none; }
  .hero-home .hero-mosaic-item img { animation: hero-drift 15s ease-in-out infinite; }
  .hero-home .hero-inner {
    position:static; flex:none; max-width:none;
    background: var(--dp-bg-warm); padding: 40px var(--dp-gutter) 36px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .hero-home .hero-inner h1 { color: var(--dp-text); font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero-home .hero-sub { color: var(--dp-text-sub); }
}

/* ==== 진행 흐름 (큼직한 카드 + 순차 등장 애니메이션) ====
   번호는 CSS counter로 자동 생성 — 마크업에 숫자를 넣지 않아도 됨.
   .flow-steps.in 이 붙는 순간 카드가 자식 순서대로 하나씩 올라오며 나타난다. */
.flow-steps {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:16px;
  counter-reset: flowstep;
}
.flow-steps span {
  counter-increment: flowstep;
  display:block; position:relative;
  background: var(--dp-bg); border:1px solid var(--dp-border); border-radius: var(--dp-radius-xl);
  padding: 32px 22px 26px; box-shadow: var(--dp-shadow);
  font-size:1.02rem; font-weight:700; color: var(--dp-text); line-height:1.4;
  opacity:0; transform: translateY(28px) scale(.97);
  transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
}
.flow-steps span::before {
  content: counter(flowstep, decimal-leading-zero);
  display:block; font-family: var(--dp-font-display); font-size:2.1rem; font-weight:700;
  color: var(--dp-accent); margin-bottom:12px;
}
.flow-steps span b { display:block; font-size:1.02rem; font-weight:700; margin-bottom:6px; }
.flow-steps span em { display:block; font-style:normal; font-size:0.85rem; font-weight:400; color: var(--dp-text-muted); }
.dp-section-dark .flow-steps span em { color: rgba(255,255,255,0.7); }
.flow-steps.in span { opacity:1; transform: translateY(0) scale(1); }
.flow-steps.in span:nth-child(1) { transition-delay: .05s; }
.flow-steps.in span:nth-child(2) { transition-delay: .18s; }
.flow-steps.in span:nth-child(3) { transition-delay: .31s; }
.flow-steps.in span:nth-child(4) { transition-delay: .44s; }
.flow-steps.in span:nth-child(5) { transition-delay: .57s; }
.dp-section-dark .flow-steps span { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); color: var(--text-on-dark); }
.dp-section-dark .flow-steps span::before { color: var(--dp-accent-soft); }
@media(max-width:480px) {
  .flow-steps span { padding:26px 18px 20px; font-size:0.95rem; }
  .flow-steps span::before { font-size:1.7rem; }
}

/* ==== FAQ 아코디언 ==== */
.faq-item { border-bottom: 1px solid var(--dp-border); }
.faq-q {
  width:100%; text-align:left; background:none; border:none; padding: 20px 0;
  display:flex; justify-content:space-between; align-items:center; gap: 16px;
  font-weight:700; font-size:1rem; color: var(--dp-text);
}
.faq-q .faq-icon { flex-shrink:0; transition: transform .25s ease; }
.faq-item.open .faq-q .faq-icon { transform: rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition: max-height .3s ease; }
.faq-a p { padding: 0 0 20px; margin:0; font-size:0.92rem; }

/* ==== 통계 카운터 ==== */
.dp-stat { }
.dp-stat-num { font-family: var(--dp-font-display); font-size: 2.6rem; font-weight:700; color: var(--dp-primary); }
.dp-stat-label { font-size:0.9rem; color: var(--dp-text-muted); font-weight:600; }

/* ==== 푸터 ==== */
.ftr { background: var(--dp-primary-3); color: rgba(255,255,255,0.82); padding: 56px 0 28px; }
.ftr-grid { display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; margin-bottom: 32px; }
@media(max-width:768px) { .ftr-grid { grid-template-columns:1fr; gap:28px; } }
.ftr h4 { color:#fff; font-size:0.95rem; margin-bottom:14px; font-family: var(--dp-font-body); }
.ftr p, .ftr li { font-size: 0.85rem; line-height:1.8; }
.ftr a { color: rgba(255,255,255,0.82); }
@media (hover: hover) and (pointer: fine) {
  .ftr a:hover { color: #fff; }
}
.ftr-bottom { border-top: 1px solid rgba(255,255,255,0.14); padding-top: 20px; font-size: 0.78rem; color: rgba(255,255,255,0.55); }

/* ==== 표(overflow-x 스크롤 래퍼 필수) ==== */
.dp-table-wrap { overflow-x:auto; margin: 20px 0; }
.dp-table { width:100%; border-collapse:collapse; min-width:520px; }
.dp-table th, .dp-table td { padding:12px 16px; border-bottom:1px solid var(--dp-border); text-align:left; font-size:0.9rem; }
.dp-table th { background: var(--dp-bg-soft); font-weight:700; }

/* ==== 체크리스트 (카드형 박스로 감싸 독립된 컴포넌트로 보이게) ==== */
.dp-checklist {
  background: var(--dp-bg); border: 1px solid var(--dp-border);
  padding: 4px 24px; margin-top: 4px;
}
.dp-checklist li { display:flex; gap:12px; padding: 14px 0; align-items:flex-start; }
.dp-checklist li:not(:last-child) { border-bottom: 1px solid var(--dp-border); }
.dp-checklist li::before { content:'✓'; color: var(--dp-primary); font-weight:700; flex-shrink:0; }
.dp-section-soft .dp-checklist, .dp-section-warm .dp-checklist { background: var(--dp-bg); }

@media(max-width:1024px) {
  .hero { min-height: 76vh; }
}
@media(max-width:480px) {
  .dp-g4 { grid-template-columns:1fr; }
  .hero-cta .dp-btn { width:100%; }
}