/* =====================================================================
   다크 패널 온 웜 캔버스 (레퍼런스: 탠/베이지 그라디언트 배경 + 네이비 라운디드 패널)
   ===================================================================== */
@font-face {
  font-family: 'NanumSquareNeo';
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquareNeo@1.0/NanumSquareNeoTTF-bRg.woff2') format('woff2');
}
@font-face {
  font-family: 'NanumSquareNeo';
  font-weight: 800;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquareNeo@1.0/NanumSquareNeoTTF-dEb.woff2') format('woff2');
}

:root {
  --dp-accent:       #A47B58;
  --dp-accent-2:     #8C6647;
  --dp-accent-soft:  #C9AA8C;

  --dp-panel:        #171512;   /* 다크 패널 배경 */
  --dp-panel-card:   #24201A;   /* 패널 안에 얹히는 카드(패널보다 살짝 밝음) */
  --dp-panel-card-2: #2C2720;   /* 카드 hover/대비용 */
  --dp-panel-border: rgba(255,255,255,.08);

  --dp-canvas-a:     #F3EADA;   /* 캔버스 그라디언트 밝은 쪽 */
  --dp-canvas-b:     #D8BE97;   /* 캔버스 그라디언트 짙은 쪽 */

  --dp-text:         #1C1812;   /* 캔버스 위 텍스트(진함) */
  --dp-text-sub:     #4A4438;
  --dp-text-muted:   #6E6656;

  --dp-text-on-dark:     #F6F1E7;
  --dp-text-on-dark-sub: #C7BEAE;
  --dp-text-on-dark-muted: #948C7C;

  --dp-font-heading: 'NanumSquareNeo', -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  --dp-font-body:    'NanumSquareNeo', -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;

  --dp-fs-h1:      clamp(2.3rem,  5vw, 3.6rem);
  --dp-fs-h2:      clamp(1.7rem, 3.4vw, 2.4rem);
  --dp-fs-h3:      clamp(1.1rem, 1.8vw, 1.3rem);
  --dp-fs-body:    17px;

  --dp-max-w:      1200px;
  --dp-gutter:     clamp(20px, 4vw, 40px);
  --dp-sec-pad:    clamp(48px, 6vw, 76px);

  --dp-r-panel:    32px;
  --dp-r-card:     18px;
  --dp-r-pill:     999px;
  --dp-ease:       cubic-bezier(.22, 1, .36, 1);

  --dp-panel-pattern: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px);
}

/* ===== 리셋 & 기본 ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--dp-font-body);
  font-size: var(--dp-fs-body);
  line-height: 1.75;
  color: var(--dp-text);
  background:
    radial-gradient(120% 90% at 15% 0%, var(--dp-canvas-a) 0%, var(--dp-canvas-b) 75%);
  background-attachment: fixed;
}
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%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--dp-font-heading); font-weight: 800; letter-spacing: -.01em; margin: 0 0 .5em; color: var(--dp-text); }
h1 { font-size: var(--dp-fs-h1); line-height: 1.15; }
h2 { font-size: var(--dp-fs-h2); line-height: 1.25; }
h3 { font-size: var(--dp-fs-h3); }
p { color: var(--dp-text-sub); }
ol, ul { padding: 0; margin: 0; list-style: none; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }

main, .dp-section, .dp-hero, article > section { max-width: var(--dp-max-w); margin: 0 auto var(--dp-gutter); padding-left: var(--dp-gutter); padding-right: var(--dp-gutter); }

/* ===== 다크 패널 (기본값 — hero, 캐러셀, 캔버스형 섹션 제외) ===== */
article > section:not(.dp-hero):not(.dp-hero-carousel):not(.dp-diag-sheet):not(.dp-section--soft):not(.dp-section--alt) {
  background-color: var(--dp-panel);
  background-image: var(--dp-panel-pattern);
  background-size: 20px 20px;
  color: var(--dp-text-on-dark);
  border: 1px solid var(--dp-panel-border);
  border-radius: var(--dp-r-panel);
  padding-top: var(--dp-sec-pad);
  padding-bottom: var(--dp-sec-pad);
  margin-bottom: 22px;
}
article > section:not(.dp-hero):not(.dp-diag-sheet):not(.dp-section--soft):not(.dp-section--alt) h2,
article > section:not(.dp-hero):not(.dp-diag-sheet):not(.dp-section--soft):not(.dp-section--alt) h3 { color: var(--dp-text-on-dark); }
article > section:not(.dp-hero):not(.dp-diag-sheet):not(.dp-section--soft):not(.dp-section--alt) p { color: var(--dp-text-on-dark-sub); }
/* 카드형 링크(전체를 감싸는 <a>)는 밑줄 대상에서 제외 — 인라인 본문 링크만 밑줄 유지 */
article > section:not(.dp-hero) a:not(.dp-cta):not(.dp-btn-primary):not(.service-card):not(.dp-related__list a):not(.dp-related-services a):not(.dp-sitemap__list a) { color: var(--dp-accent-soft); text-decoration: underline; }

/* 색조/톤 수식자 — 패널 형태는 유지하되 배경만 데운다 */
article > section:not(.dp-hero):not(.dp-hero-carousel):not(.dp-diag-sheet):not(.dp-section--soft):not(.dp-section--alt).dp-section--warm {
  background-color: color-mix(in srgb, var(--dp-panel) 82%, var(--dp-accent) 18%);
  background-image: var(--dp-panel-pattern);
  background-size: 20px 20px;
}
article > section:not(.dp-hero):not(.dp-hero-carousel):not(.dp-diag-sheet):not(.dp-section--soft):not(.dp-section--alt).dp-section--dark {
  background-image: var(--dp-panel-pattern), linear-gradient(155deg, var(--dp-panel) 0%, var(--dp-accent-2) 160%);
  background-size: 20px 20px, auto;
}

/* 캔버스형 섹션 — 패널 없이 웜 그라디언트 위에 바로 얹힌다(신뢰지표/시공사진) */
article > section.dp-section--soft,
article > section.dp-section--alt {
  background: none; border: none; color: var(--dp-text-sub);
  border-radius: 0; margin-bottom: 8px;
}
article > section.dp-section--soft { padding-top: 0; padding-bottom: clamp(20px, 3vw, 32px); }
article > section.dp-section--alt { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(28px, 4vw, 48px); }
article > section.dp-section--soft h2, article > section.dp-section--soft h3,
article > section.dp-section--alt h2, article > section.dp-section--alt h3 { color: var(--dp-text); }
article > section.dp-section--soft p, article > section.dp-section--alt p { color: var(--dp-text-sub); }
article > section.dp-section--soft .dp-eyebrow, article > section.dp-section--alt .dp-eyebrow {
  background: var(--dp-panel); color: var(--dp-text-on-dark);
}

.dp-section-head { margin-bottom: clamp(24px, 4vw, 40px); }
.dp-section-head:has(+ *) { display: flex; flex-direction: column; align-items: flex-start; }
.dp-eyebrow, .dp-hero__eyebrow {
  display: inline-flex; align-items: center; font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 7px 16px; border-radius: var(--dp-r-pill);
  background: rgba(164,123,88,.16); color: var(--dp-accent-soft); margin-bottom: .9em;
}
article > section.dp-hero .dp-eyebrow { background: var(--dp-panel); color: var(--dp-text-on-dark); }
.dp-eyebrow--center { align-self: center; }

/* ===== 헤더: 떠 있는 다크 필 바 ===== */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--dp-max-w); margin: 20px auto; padding: 12px 12px 12px 20px;
  background: var(--dp-panel); border-radius: var(--dp-r-pill);
  box-shadow: 0 10px 30px rgba(23,21,18,.25);
}
.hdr-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hdr-logo__icon { flex-shrink: 0; border-radius: 50%; background: #fff; padding: 3px; }
.hdr-logo__text { display: flex; flex-direction: column; min-width: 0; }
.hdr-logo__name { font-family: var(--dp-font-heading); font-weight: 800; font-size: 1rem; color: var(--dp-text-on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-logo__tagline { font-size: .72rem; color: var(--dp-text-on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .hdr-logo__tagline { display: none; } }

/* ===== CTA 버튼 ===== */
.dp-cta, .dp-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 50px; padding: 13px 28px;
  border-radius: var(--dp-r-pill); font-weight: 700; font-size: .98rem;
  border: none; cursor: pointer;
  transition: transform .2s var(--dp-ease), opacity .2s var(--dp-ease);
}
.dp-cta--gold, .dp-btn-primary {
  background: var(--dp-accent); color: #fff;
}
.dp-cta--outline {
  background: transparent; color: var(--dp-text); border: 1.5px solid var(--dp-text);
}
article > section:not(.dp-hero) .dp-cta--outline { color: var(--dp-text-on-dark); border-color: var(--dp-text-on-dark-muted); }
.dp-btn-primary--large { padding: 15px 36px; font-size: 1.02rem; }
@media (hover: hover) and (pointer: fine) {
  .dp-cta:hover, .dp-btn-primary:hover { transform: translateY(-2px); opacity: .92; }
}
.dp-cta:active, .dp-btn-primary:active { transform: translateY(0); opacity: .85; }

/* ===== Hero (탠 캔버스, 중앙 정렬 카피) ===== */
.dp-hero {
  padding-top: clamp(36px, 7vw, 68px);
  padding-bottom: clamp(32px, 5vw, 52px);
}
.dp-hero--center { text-align: center; }
.dp-hero--center .dp-hero__copy { max-width: 760px; margin: 0 auto; }
.dp-hero--center h1 { font-size: clamp(3.6rem, 9vw, 6.4rem); letter-spacing: -.025em; }
.dp-hero__copy { max-width: 560px; }
.dp-hero__sub, .dp-hero__lead { font-size: 1.15rem; margin-bottom: 1.5em; }
.dp-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.dp-hero--center .dp-hero__actions { justify-content: center; }
.dp-hero__home-link { align-self: center; color: var(--dp-text-muted); text-decoration: underline; }
h1 em { font-style: normal; color: var(--dp-accent); }

/* 히어로 진입 애니메이션 — "초점이 맞아가는" 느낌(블러+스케일)으로 요소별로 따로 나타난다.
   사진 중심 히어로라는 맥락에 맞춘 연출 — 스크롤 리빌과는 별개로 로드 시 1회만 재생. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes dp-hero-in-eyebrow {
    from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
  }
  @keyframes dp-hero-in-h1 {
    from { opacity: 0; transform: translateY(24px) scale(1.06); filter: blur(11px); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
  }
  @keyframes dp-hero-in-sub {
    from { opacity: 0; transform: translateY(16px); filter: blur(5px); }
    to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
  }
  @keyframes dp-hero-in-actions {
    from { opacity: 0; transform: translateY(14px) scale(.94); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
  }
  .dp-hero--center .dp-eyebrow      { animation: dp-hero-in-eyebrow .6s cubic-bezier(.22,1,.36,1) backwards; }
  .dp-hero--center h1               { animation: dp-hero-in-h1 .9s cubic-bezier(.16,1,.3,1) backwards; animation-delay: .1s; }
  .dp-hero--center .dp-hero__sub    { animation: dp-hero-in-sub .7s cubic-bezier(.22,1,.36,1) backwards; animation-delay: .34s; }
  .dp-hero--center .dp-hero__actions{ animation: dp-hero-in-actions .55s cubic-bezier(.22,1,.36,1) backwards; animation-delay: .52s; }
}

/* ===== 히어로 커버플로우 (after 전용 5장, 3D 센터모드) — 박스 없이, 더 넓은 영역 ===== */
.dp-hero-carousel {
  background: none; border: none; padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(48px, 7vw, 80px);
  max-width: 1520px; margin-bottom: 0;
}
.dp-coverflow { display: flex; flex-direction: column; align-items: center; }
.dp-coverflow__row { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.dp-coverflow__stage {
  position: relative; width: min(460px, 78vw); aspect-ratio: 4 / 3;
  perspective: 1200px; perspective-origin: 50% 50%;
}
.dp-coverflow__slide {
  position: absolute; inset: 0; margin: 0; padding: 0; border: none; cursor: pointer;
  border-radius: var(--dp-r-card); overflow: hidden; background: var(--dp-panel-card);
  box-shadow: 0 18px 40px rgba(23,21,18,.35);
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.25,.46,.28,1), opacity .6s cubic-bezier(.25,.46,.28,1), filter .6s cubic-bezier(.25,.46,.28,1);
  will-change: transform;
}
.dp-coverflow__slide img { width: 100%; height: 100%; object-fit: cover; }
/* 중심으로부터 거리(|offset|)에 따른 위치 — JS가 data-offset을 세팅하면 아래 규칙이 위치를 정한다 */
.dp-coverflow__slide[data-offset="0"] { transform: translateX(0) translateZ(55px) rotateY(0deg) scale(1.18); z-index: 5; opacity: 1; filter: brightness(1); }
.dp-coverflow__slide[data-offset="-1"] { transform: translateX(-72%) translateZ(-120px) rotateY(32deg) scale(.78); z-index: 4; opacity: .82; filter: brightness(.75); }
.dp-coverflow__slide[data-offset="1"]  { transform: translateX(72%)  translateZ(-120px) rotateY(-32deg) scale(.78); z-index: 4; opacity: .82; filter: brightness(.75); }
.dp-coverflow__slide[data-offset="-2"] { transform: translateX(-128%) translateZ(-240px) rotateY(40deg) scale(.6); z-index: 3; opacity: .5; filter: brightness(.58); }
.dp-coverflow__slide[data-offset="2"]  { transform: translateX(128%)  translateZ(-240px) rotateY(-40deg) scale(.6); z-index: 3; opacity: .5; filter: brightness(.58); }
.dp-coverflow__slide[data-offset="hidden"] { transform: translateX(0) translateZ(-360px) scale(.4); opacity: 0; z-index: 1; pointer-events: none; }
@media (max-width: 640px) {
  .dp-coverflow__slide[data-offset="-1"] { transform: translateX(-58%) translateZ(-90px) rotateY(30deg) scale(.78); }
  .dp-coverflow__slide[data-offset="1"]  { transform: translateX(58%)  translateZ(-90px) rotateY(-30deg) scale(.78); }
  .dp-coverflow__slide[data-offset="-2"],
  .dp-coverflow__slide[data-offset="2"] { opacity: 0; pointer-events: none; }
}
.dp-carousel__dots { display: flex; justify-content: center; gap: 10px; margin-top: 88px; }
.dp-carousel__dot {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: var(--dp-text-muted); opacity: .35;
  transition: transform .25s var(--dp-ease), background .25s var(--dp-ease), opacity .25s var(--dp-ease);
}
.dp-carousel__dot.is-active { background: var(--dp-accent); opacity: .8; transform: scale(1.3); }
@media (hover: hover) and (pointer: fine) {
  .dp-carousel__dot:hover { opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-coverflow__slide { transition-duration: .01ms !important; }
}

/* ===== 진단 체크시트 (시그니처 요소 — 캔버스 위 실측지 느낌) ===== */
.dp-diag-sheet__inner {
  max-width: 560px; margin: 0 auto;
  padding: 22px 26px;
  border: 1px solid rgba(28,24,18,.14); border-radius: var(--dp-r-card);
  background: rgba(255,255,255,.35);
}
.dp-diag-sheet__label {
  display: block; font-family: var(--dp-font-body); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dp-text-muted); margin-bottom: 12px;
}
.dp-diag-sheet__list { display: flex; flex-direction: column; gap: 0; }
.dp-diag-sheet__list li {
  display: flex; align-items: baseline; gap: 12px; font-size: .92rem; color: var(--dp-text-sub);
  padding: 10px 0 0; margin-top: 10px; border-top: 1px dashed rgba(28,24,18,.16);
}
.dp-diag-sheet__list li:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.dp-diag-sheet__mark {
  flex-shrink: 0; font-family: var(--dp-font-body); font-size: .74rem; font-weight: 700;
  padding: 3px 10px; border-radius: var(--dp-r-pill); color: #fff;
}
.dp-diag-sheet__mark--keep { background: var(--dp-accent-2); }
.dp-diag-sheet__mark--replace { background: var(--dp-accent); }
.dp-diag-sheet__mark--check { background: none; border: 1px solid var(--dp-text-muted); color: var(--dp-text-sub); }

/* ===== 신뢰 지표 ===== */
.dp-badges__list, .dp-trust__grid { display: flex; gap: 14px; flex-wrap: wrap; }
.dp-badges__item {
  padding: 14px 22px; background: var(--dp-panel-card); border-radius: var(--dp-r-pill);
  font-weight: 600; font-size: .92rem; color: var(--dp-text-on-dark);
}
.dp-trust-badges { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.dp-trust-badge {
  padding: 14px 22px; border-radius: var(--dp-r-pill);
  font-weight: 600; font-size: .92rem; color: var(--dp-text-on-dark);
  background: rgba(23,21,18,.4);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 8px 24px rgba(23,21,18,.12);
}
.dp-trust-badge:nth-child(1) { transition-delay: 0ms; }
.dp-trust-badge:nth-child(2) { transition-delay: 90ms; }
.dp-trust-badge:nth-child(3) { transition-delay: 180ms; }
.dp-trust-badge:nth-child(4) { transition-delay: 270ms; }
.dp-trust-badge:nth-child(5) { transition-delay: 360ms; }
.dp-trust-badge:nth-child(6) { transition-delay: 450ms; }

/* ===== 그리드 컨테이너 공통 (카드형 섹션 전부) =====
   주의: .dp-checklist / .dp-process / .dp-gallery / .dp-related 등은 <section> 자체의
   래퍼 클래스로도 쓰이므로(그 안의 실제 그리드는 __list/__grid 하위 클래스), 여기서는
   반드시 __list/__grid/-grid/-cols 접미사가 붙은 "내부 그리드" 클래스만 대상으로 한다. */
.dp-service-grid, .dp-usp-grid, .dp-process__list, .proc-list, .dp-card-grid,
.dp-diagnosis__grid, .dp-compare-cols, .dp-stats__list,
.dp-gallery__grid, .dp-related__list, .dp-related-services ul,
.dp-checklist__list, .dp-case-method__list, .dp-contact-info,
.dp-review-points__list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.dp-compare-cols { grid-template-columns: repeat(2, 1fr); }
.dp-contact-info { grid-template-columns: repeat(3, 1fr); }
.dp-gallery__grid, .dp-checklist__list { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
  .dp-service-grid, .dp-usp-grid, .dp-process__list, .proc-list, .dp-card-grid,
  .dp-diagnosis__grid, .dp-stats__list,
  .dp-related__list, .dp-related-services ul, .dp-case-method__list,
  .dp-review-points__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .dp-gallery__grid, .dp-checklist__list, .dp-contact-info, .dp-compare-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dp-service-grid, .dp-usp-grid, .dp-process__list, .proc-list, .dp-card-grid,
  .dp-diagnosis__grid, .dp-stats__list, .dp-gallery__grid,
  .dp-related__list, .dp-related-services ul, .dp-checklist__list,
  .dp-case-method__list, .dp-contact-info, .dp-review-points__list, .dp-compare-cols {
    grid-template-columns: 1fr;
  }
}

/* section 안에 __list 서브클래스 없이 바로 놓인 순수 ul/li (예: 일부 체크리스트/공정 페이지) */
.dp-checklist > ul, .dp-process > ul {
  display: flex; flex-direction: column; gap: 10px; margin-top: 16px;
}
.dp-process > ul > li {
  background: var(--dp-panel-card); border-radius: var(--dp-r-card);
  padding: 16px 20px; color: var(--dp-text-on-dark-sub);
}
/* 체크리스트 — 항목마다 체크박스 느낌 */
.dp-checklist > ul > li {
  display: flex; align-items: center; gap: 14px;
  background: var(--dp-panel-card); border-radius: var(--dp-r-card);
  padding: 14px 20px; color: var(--dp-text-on-dark-sub);
}
.dp-checklist > ul > li::before {
  content: "✓"; flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  background: var(--dp-accent); color: #fff; font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* 본문 설명 다음에 카드/리스트가 바로 오면 여백과 옅은 구분선으로 구분감을 준다 */
p + .dp-card-grid, p + .dp-service-grid, p + .dp-usp-grid,
p + .dp-process__list, p + .proc-list, p + .dp-timeline__list,
p + .dp-checklist__list, p + .dp-gallery__grid {
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--dp-panel-border);
}

/* ===== 카드 아이템 공통 (패널보다 밝은 톤) ===== */
.dp-usp-card, .dp-process__item, .dp-process__step, .dp-card,
.dp-diagnosis__card, .dp-trust__card,
.dp-gallery__item, .dp-checklist__item, .dp-case-method__item,
.dp-contact-info__item, .dp-contact-card, .dp-review-points__list li,
.dp-compare-col {
  background: var(--dp-panel-card); border-radius: var(--dp-r-card);
  padding: 24px 22px; height: 100%;
  transition: background .2s var(--dp-ease), transform .2s var(--dp-ease);
}
.dp-usp-card h3, .service-card h3, .dp-process__item h3, .dp-process__step h3, .dp-card h3,
.dp-diagnosis__card h3, .dp-timeline__item h3, .dp-trust__card h3, .dp-case-method__item h3,
.dp-compare-col h3 { color: var(--dp-text-on-dark); }
.dp-usp-card p, .service-card p, .dp-process__item p, .dp-process__step p, .dp-card p,
.dp-diagnosis__card p, .dp-timeline__item p, .dp-trust__card p, .dp-case-method__item p,
.dp-compare-col p { color: var(--dp-text-on-dark-sub); margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .dp-usp-card:hover, .dp-process__item:hover, .dp-card:hover,
  .dp-diagnosis__card:hover, .dp-trust__card:hover,
  .dp-gallery__item:hover, .dp-case-method__item:hover, .dp-related__list li a:hover,
  .dp-related-services li a:hover {
    background: var(--dp-panel-card-2); transform: translateY(-3px);
  }
}

/* 서비스 카드 — 글래스모피즘 */
.service-card {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding: 24px 22px; border-radius: var(--dp-r-card);
  text-decoration: none;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
  transition: background .25s var(--dp-ease), border-color .25s var(--dp-ease),
              transform .25s var(--dp-ease), box-shadow .25s var(--dp-ease);
}
.service-card--cta {
  background: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  border-color: color-mix(in srgb, var(--dp-accent) 70%, white 12%);
  color: #fff;
}
.service-card--cta h3, .service-card--cta .service-card__more { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.2);
    transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .service-card--cta:hover { background: color-mix(in srgb, var(--dp-accent) 68%, transparent); }
}
.service-card__more { color: var(--dp-accent-soft); font-weight: 600; font-size: .88rem; margin-top: auto; }

/* 번호 칩 (프로세스/케이스 방법론 — 순서가 있는 콘텐츠 전용) */
.dp-process__num, .dp-case-method__num {
  font-family: var(--dp-font-heading); font-size: 1.05rem; font-weight: 800; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--dp-accent); margin-bottom: 12px;
}
/* USP 라벨 (순서 없는 속성이라 번호 대신 짧은 태그) */
.dp-usp-card__tag {
  display: inline-block; font-family: var(--dp-font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dp-accent-soft); margin-bottom: 10px;
}

/* 통계 블록 */
.dp-stats__item { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.dp-stats__num { font-family: var(--dp-font-heading); font-size: 2.2rem; font-weight: 800; color: var(--dp-accent-soft); }
.dp-stats__label { font-size: .85rem; color: var(--dp-text-on-dark-muted); }

/* 진단 카드 (증상/원인) */
.dp-diagnosis__symptom { font-weight: 700; color: var(--dp-text-on-dark) !important; margin-bottom: 6px; }
.dp-diagnosis__cause { font-size: .92rem; }

/* 타임라인 (실제 순서가 있는 단계형 콘텐츠 전용 — 카드 그리드 대신 세로 흐름) */
.dp-timeline__list {
  display: flex; flex-direction: column; max-width: 640px;
  counter-reset: tl; gap: 0;
}
.dp-timeline__item {
  position: relative; counter-increment: tl;
  padding: 0 0 28px 54px; background: none; height: auto;
}
.dp-timeline__item::before {
  content: counter(tl, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--dp-accent); color: #fff;
  font-family: var(--dp-font-body); font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.dp-timeline__item:not(:last-child)::after {
  content: ""; position: absolute; left: 17px; top: 36px; bottom: 0;
  width: 1px; background: var(--dp-panel-border);
}
.dp-timeline__item:last-child { padding-bottom: 0; }
.dp-timeline__item h3 { margin-bottom: .3em; }
.dp-timeline__item p { margin: 0; }
/* 실제 순서형 콘텐츠라 단계별로 시간차를 두고 나타난다(사이트 전체에서 유일한 stagger) */
.dp-timeline__item:nth-child(1) { transition-delay: 0ms; }
.dp-timeline__item:nth-child(2) { transition-delay: 150ms; }
.dp-timeline__item:nth-child(3) { transition-delay: 300ms; }
.dp-timeline__item:nth-child(4) { transition-delay: 450ms; }
.dp-timeline__item:nth-child(5) { transition-delay: 600ms; }
.dp-timeline__item:nth-child(6) { transition-delay: 750ms; }

/* 알림/노티스 박스 */
.dp-notice { background: var(--dp-panel-card) !important; border-left: 4px solid var(--dp-accent); }

/* 리뷰 포인트 리스트 (단일 컬럼이어도 카드처럼) */
.dp-review-points__list li { display: block; }

/* ===== AFTER 마퀴 ===== */
.jgo-marquee { overflow: hidden; width: 100%; margin-top: 20px; }
.jgo-marquee__track { display: flex; gap: 20px; width: max-content; animation: jgo-marquee-scroll 88s linear infinite; }
.jgo-marquee__item {
  flex: 0 0 auto; width: min(440px, 62vw); border-radius: var(--dp-r-card);
  overflow: hidden; border: 1px solid rgba(28,24,18,.08);
  box-shadow: 0 12px 32px rgba(23,21,18,.16);
}
.jgo-marquee__item img { width: 100%; height: min(320px, 44vw); object-fit: cover; display: block; }
@keyframes jgo-marquee-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .jgo-marquee__track { animation: none; } }

/* ===== FAQ ===== */
.dp-faq { display: flex; flex-direction: column; gap: 12px; }
.dp-faq__item, details.dp-faq__item {
  background: var(--dp-panel-card); border-radius: var(--dp-r-card);
  padding: 18px 22px; transition: background .2s var(--dp-ease);
}
.dp-faq__item[open], .dp-faq__item:has(.dp-faq__q[aria-expanded="true"]) { background: var(--dp-panel-card-2); }
.dp-faq__item summary, .dp-faq__q {
  font-weight: 700; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: none; border: none; width: 100%; text-align: left; padding: 0; color: var(--dp-text-on-dark); font-family: var(--dp-font-body);
}
.dp-faq__item summary::after {
  content: "+"; font-size: 1rem; color: #fff; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--dp-accent);
}
.dp-faq__item[open] summary::after { content: "−"; }
.dp-faq__a { max-height: 0; overflow: hidden; transition: max-height .3s var(--dp-ease); }
.dp-faq__q[aria-expanded="true"] + .dp-faq__a { max-height: 600px; }
.dp-faq__item p, .dp-faq__a p { margin-top: 12px; color: var(--dp-text-on-dark-sub) !important; }

/* ===== 갤러리 캡션 ===== */
.dp-gallery__item figcaption { font-size: .82rem; color: var(--dp-text-on-dark-muted); margin-top: 8px; padding: 0 2px; }

/* ===== 표 ===== */
table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 16px 0;
  border-radius: var(--dp-r-card); overflow: hidden; background: var(--dp-panel-card);
}
table th, table td { padding: 14px 16px; text-align: left; font-size: .92rem; color: var(--dp-text-on-dark-sub); }
table th { background: var(--dp-panel-card-2); font-weight: 700; color: var(--dp-text-on-dark); }
table tr:not(:last-child) th, table tr:not(:last-child) td { border-bottom: 1px solid var(--dp-panel-border); }

/* ===== 관련 서비스 링크 ===== */
.dp-related__list li a, .dp-related-services li a {
  display: block; padding: 16px 18px; border-radius: var(--dp-r-card);
  background: var(--dp-panel-card); font-weight: 600; color: var(--dp-text-on-dark);
  height: 100%; text-decoration: none; transition: background .2s var(--dp-ease);
}

/* ===== CTA 배너 (레터/구독 스타일) ===== */
.dp-cta-banner {
  text-align: left; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
}
.dp-cta-banner h2 { margin-bottom: .3em; }
.dp-cta-banner p { margin: 0; }

/* 세부페이지 중간 CTA(마지막 배너 제외) — 시공 사진을 배경으로 깔고 어둡게 오버레이 */
section.dp-cta-banner:not(.dp-cta-banner--bottom) {
  position: relative;
  background-image:
    linear-gradient(155deg, rgba(23,21,18,.88) 10%, rgba(23,21,18,.62) 100%),
    url('/assets/images/file_6a6aeb3b704eb7.02248742-1200w.webp');
  background-size: cover; background-position: center;
}
section.dp-cta-banner:not(.dp-cta-banner--bottom) h2,
section.dp-cta-banner:not(.dp-cta-banner--bottom) p { color: var(--dp-text-on-dark); }
.dp-cta-banner .dp-cta--outline, .dp-cta-banner a.dp-cta--outline {
  border-color: rgba(255,255,255,.55); color: #fff;
}

/* ===== Floating CTA ===== */
.dp-float-cta {
  position: fixed; right: 24px; bottom: 88px; width: 60px; height: 60px;
  background: var(--dp-accent);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 10px 26px rgba(23,21,18,.3); z-index: 40;
}
.dp-float-cta__icon { width: 24px; height: 24px; }

/* ===== 모바일 하단바 ===== */
.dp-mobile-bar { display: none; }
@media (max-width: 768px) {
  .dp-mobile-bar {
    display: block; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 39;
    border-radius: var(--dp-r-pill); background: var(--dp-panel);
    box-shadow: 0 10px 30px rgba(23,21,18,.3);
    padding: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  .dp-mobile-bar__cta {
    display: block; text-align: center; font-weight: 700; padding: 13px;
    border-radius: var(--dp-r-pill); color: #fff; background: var(--dp-accent);
  }
  .dp-float-cta { bottom: 92px; }
}

/* ===== 푸터 (탠 캔버스, 미니멀) ===== */
.site-footer {
  max-width: var(--dp-max-w); margin: 0 auto; padding: 20px var(--dp-gutter) 120px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  font-size: .85rem; color: var(--dp-text-muted);
}
.ftr-links a { margin-left: 4px; }
@media (min-width: 769px) { .site-footer { padding-bottom: 32px; } }

/* ===== 사이트맵 / 404 (탠 캔버스 기본, article>section 규칙으로 패널화됨) ===== */
.dp-sitemap__list { display: flex; flex-direction: column; gap: 10px; }
.dp-sitemap__list li a {
  display: block; padding: 16px 20px; border-radius: var(--dp-r-card);
  background: var(--dp-panel-card); color: var(--dp-text-on-dark); text-decoration: none;
}
.dp-404 { text-align: center; }
.dp-404__code { font-size: 5rem; font-weight: 800; opacity: .25; margin: 0; }
.dp-404__actions { display: flex; gap: 14px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

/* ===== Contact 페이지 ===== */
.dp-contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .dp-contact-cards { grid-template-columns: 1fr; } }
.dp-contact-card {
  min-height: 260px; padding: 40px;
  display: flex; flex-direction: column; gap: 12px; justify-content: center; text-align: center;
}
.dp-contact-card h2 { color: var(--dp-text-on-dark); }

/* ===== 스크롤 리빌 ===== */
.dp-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--dp-ease), transform .6s var(--dp-ease); }
.dp-reveal.is-visible { opacity: 1; transform: translateY(0); }