/* assets/style.css — visual-designer-INSIDE-V3
   컬러/폰트/브랜드 시각 언어 전담. base.css(레이아웃 메커니즘) 다음에 로드되어 값을 덮어쓴다.
   컬러는 structure.json client.colors에서 파생(하드코딩 금지) — 파생 근거는 아래 주석 참조.

   ── 컬러 스킴 소스 (structure.json client.colors) ──
   primary=#171512 (웜 니어블랙) / accent=#A07850 (코냑) / bg=#F5F2ED (웜 오프화이트)
   rationale: 주차시설물 설치시공업체 — 순수 브라운+순금색 금지 조합 회피, 웜 니어블랙+코냑으로 절제된 신뢰감.
   금지 조합 검증: primary(#171512)는 #3D2B1E~#6B4F35 범위 밖 → 대체 불필요.
   5단 팔레트는 primary/accent/bg를 표준 tint(백색 혼합)·shade(흑색 혼합) 공식으로 파생(브랜드 무관 알고리즘,
   hex는 전부 위 3개 소스 값에서 계산됨 — 별도 hex 상수 없음). */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Space+Grotesk:wght@500;600;700&family=Cormorant+Garamond:ital,wght@1,500;1,600&family=Noto+Serif+KR:wght@500;600&display=swap');

:root {
  /* primary 파생 (tint = 백색 혼합 %, shade = 흑색 혼합 %) */
  --dp-primary:      #171512;   /* client.colors.primary 그대로 */
  --dp-primary-2:    #3A3836;   /* primary tint 15% — 카드 hover bg */
  --dp-primary-3:    #2A2825;   /* primary tint 8% — 섹션 다크 bg 보조 */
  --dp-primary-d:    #12110E;   /* primary shade 20% — 깊은 포인트 */
  --dp-primary-d-rgb: 18, 17, 14;
  --dp-primary-rgb:   23, 21, 18;

  /* accent 파생 */
  --dp-accent:       #A07850;   /* client.colors.accent 그대로 */
  --dp-accent-soft:  #B39A80;   /* accent tint 25% + 채도 15%↓ — 배지, 소프트 강조 */
  --dp-accent-rgb:   160, 120, 80;

  /* bg 파생 */
  --dp-bg-soft:      #F5F2ED;   /* client.colors.bg 그대로 — 메인 배경 */
  --dp-bg-warm:      #EBE8E4;   /* bg shade 4% — 섹션 alt */
  --dp-bg-dark:      #171512;   /* = primary — 다크 섹션 */

  /* 보더 (bg 기준 shade) */
  --dp-border:       #C4C2BE;   /* bg shade 20% */
  --dp-border-soft:  #DCDAD5;   /* bg shade 10% */

  /* 텍스트 — industry_mood 무관 고정 룰 */
  --dp-text:         #131210;
  --dp-text-sub:     #4A4742;
  --dp-text-muted:   #7A7670;
  --dp-text-on-dark:      #F5F2ED;
  --dp-text-on-dark-sub:  #C9C4BB;

  /* 타이포 — JSC 디자인 시스템 이식: Pretendard(본문/헤딩) + Space Grotesk(라벨) + Cormorant Garamond/Noto Serif KR(세리프 보조) */
  --dp-font-display: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --dp-font-heading: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --dp-font-body:    "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --dp-font-caps:    "Space Grotesk", "Pretendard Variable", Pretendard, sans-serif; /* 한글은 자동 폴백(Space Grotesk엔 한글 글리프 없음) */
  --dp-font-tech:    "IBM Plex Mono", "Pretendard Variable", monospace; /* 홈페이지 시그니처(실측/스펙 라벨) 전용 — 유지 */
  --dp-font-serif:   "Cormorant Garamond", "Noto Serif KR", serif; /* JSC 시그니처 보조: 공정 숫자·사이트맵 카테고리 타이틀 전용 */

  --dp-fs-display: clamp(2.75rem, 6.2vw, 4.9rem);
  --dp-fs-h1:      clamp(2.1rem,  4.8vw, 3.4rem);
  --dp-fs-h2:      clamp(1.75rem, 3.6vw, 2.55rem);
  --dp-fs-h3:      clamp(1.18rem, 2vw,   1.45rem);
  --dp-fs-lede:    clamp(1.05rem, 1.6vw, 1.2rem);
  --dp-fs-body:    19px; /* 40대 이상 주 고객층 가독성 — 고정 룰 */

  --dp-max-w:      1200px;
  --dp-max-w-wide: 1360px;
  --dp-max-w-text: 780px;
  --dp-gutter:     clamp(20px, 4vw, 40px);
  --dp-sec-pad:    clamp(80px, 11vw, 140px); /* RB 섹션 리듬 이식 (JSC 스텝값 대체) */

  /* RB 스페이싱 스케일 이식 */
  --dp-space-xs: 0.5rem;
  --dp-space-sm: 1rem;
  --dp-space-md: 2rem;
  --dp-space-lg: 3rem;
  --dp-space-xl: 5rem;
  --dp-space-2xl: 8rem;

  /* industry_mood: utility → 각진 디자인 강제 (RB: 배지/버튼 등 pill류만 2px 예외) */
  --dp-radius:      0px;
  --dp-radius-pill: 2px;
  --dp-shadow-sm:  0 2px 8px rgba(var(--dp-primary-rgb), .06);
  --dp-shadow-md:  0 12px 32px rgba(var(--dp-primary-rgb), .10);
  --dp-shadow-lg:  0 24px 60px rgba(var(--dp-primary-rgb), .16);
  --dp-ease:       cubic-bezier(.22, 1, .36, 1); /* RB 이징 이식 */
  --dp-bg-soft-rgb: 245, 242, 237; /* = --dp-bg-soft, 헤더 블러 배경용 */
}

/* ── 전역 타이포/색 ─────────────────────────────────────────── */
html, body {
  font-family: var(--dp-font-body);
  font-size: var(--dp-fs-body);
  color: var(--dp-text);
  background: var(--dp-bg-soft);
  line-height: 1.7;
}
body, h1, h2, h3, h4, h5, h6, p, a, li, span, dt, dd, button, label {
  word-break: keep-all;
  overflow-wrap: break-word;
}
h1, h2, h3, h4 { font-family: var(--dp-font-heading); font-weight: 700; color: var(--dp-text); letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: var(--dp-fs-h1); font-weight: 800; }
h2 { font-size: var(--dp-fs-h2); }
h3 { font-size: var(--dp-fs-h3); }
p { color: var(--dp-text-sub); margin: 0 0 1em; }
a { color: inherit; }
em, i { font-style: normal; } /* italic 전면 금지 — utility 무드 고정 룰 */

section { padding: var(--dp-sec-pad) 0; }

.dp-eyebrow {
  font-family: var(--dp-font-caps);
  font-weight: 700;
  color: var(--dp-accent);
  text-transform: uppercase;
  letter-spacing: .18em;
}
.dp-section-head h2 { margin-top: .3em; }
.dp-section-head p { color: var(--dp-text-sub); max-width: var(--dp-max-w-text); margin-left: auto; margin-right: auto; }
.dp-section-head--left p { margin-left: 0; }

/* 헤딩/문단은 정적 콘텐츠 — 스크롤마다 페이드인시키지 않고 즉시 노출 (AI-슬롭 "천편일률 페이드인" 회피) */
.dp-section-head.dp-reveal { opacity: 1; transform: none; transition: none; }
/* 카드류 리빌은 유지하되 사이트 공통 이징으로 통일하고 더 절제된 값으로 축소 */
.dp-reveal { transition: opacity .32s var(--dp-ease), transform .32s var(--dp-ease); transform: translateY(10px); }

/* ── 섹션 리듬 & 교차 배경 ──────────────────────────────────── */
.dp-section--soft { background: var(--dp-bg-soft); }
.dp-section--warm { background: var(--dp-bg-warm); }
.dp-section--dark {
  background: var(--dp-bg-dark);
  color: var(--dp-text-on-dark);
}
.dp-section--dark h1, .dp-section--dark h2, .dp-section--dark h3,
.dp-section--dark .dp-section-head p { color: var(--dp-text-on-dark); }
.dp-section--dark p { color: var(--dp-text-on-dark-sub); }
.dp-section--dark .dp-eyebrow { color: var(--dp-accent-soft); }

/* ── 이미지 톤 통일 (media-manager 보고: 원본 사진 톤 불균일) ── */
.dp-hero__media img,
.dp-service-card__img img,
.jgo-marquee__item img,
.dp-gallery__before img,
.dp-gallery__after img,
.dp-cta-banner__media img {
  filter: saturate(.92) contrast(1.05) brightness(.98);
}

/* ── 헤더 / 내비게이션 — JSC: position:fixed + backdrop-filter blur, 스크롤 시 불투명해짐 ── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--dp-max-w-wide); margin: 0 auto;
  padding: 0 var(--dp-gutter);
  height: 72px;
  background: rgba(var(--dp-bg-soft-rgb), .88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--dp-border-soft);
  transition: background .25s var(--dp-ease), box-shadow .25s var(--dp-ease);
}
.site-header.is-scrolled {
  background: rgba(var(--dp-bg-soft-rgb), .97);
  box-shadow: var(--dp-shadow-sm);
}
@media (max-width: 768px) { .site-header { height: 60px; } }
/* 고정 헤더가 콘텐츠를 가리지 않도록 본문에 헤더 높이만큼 여백 확보 */
body { padding-top: 72px; }
@media (max-width: 768px) { body { padding-top: 60px; } }
.hdr-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.hdr-logo__text { display: flex; flex-direction: column; position: relative; }
.hdr-logo__name {
  font-family: var(--dp-font-heading); font-weight: 800; font-size: 1.1rem; color: var(--dp-text);
  position: relative; display: inline-block; width: fit-content;
}
.hdr-logo__name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--dp-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--dp-ease);
}
@media (hover: hover) and (pointer: fine) {
  .hdr-logo:hover .hdr-logo__name::after { transform: scaleX(1); }
}
.hdr-logo__tagline { font-size: .72rem; color: var(--dp-text-muted); }
.hdr-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--dp-font-caps); font-weight: 700; font-size: .92rem;
  color: var(--dp-bg-soft); background: var(--dp-primary);
  border-radius: 2px; padding: 10px 20px; text-decoration: none;
  transition: background .25s var(--dp-ease);
}
@media (hover: hover) and (pointer: fine) {
  .hdr-nav a:hover { background: var(--dp-accent); }
}

/* ── 푸터 ───────────────────────────────────────────────────── */
.site-footer { background: var(--dp-primary); padding: 28px 0; }
.ftr-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 32px;
}
.ftr-biz {
  display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 4px;
  font-size: .8rem; color: var(--dp-text-on-dark-sub);
}
.ftr-biz span:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--dp-accent-soft); }
.ftr-biz__name { font-family: var(--dp-font-heading); font-weight: 700; color: var(--dp-text-on-dark); }
.ftr-biz__tel-note a { color: var(--dp-accent-soft); text-decoration: underline; text-underline-offset: 2px; }
.ftr-links {
  display: flex; flex-wrap: wrap; gap: 20px;
  font-family: var(--dp-font-caps); font-size: .8rem; font-weight: 700; letter-spacing: .04em;
}
.ftr-links a { color: var(--dp-text-on-dark); text-decoration: none; position: relative; padding-bottom: 2px; }
.ftr-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--dp-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--dp-ease);
}
@media (hover: hover) and (pointer: fine) {
  .ftr-links a:hover::after { transform: scaleX(1); }
}
@media (max-width: 640px) {
  .ftr-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ── 버튼 / CTA — 전 사이트 통일 (Step 7) ──────────────────── */
.dp-cta, .dp-btn-primary, .jgo-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 2px;
  min-height: 52px;
  padding: 14px 32px;
  font-family: var(--dp-font-caps);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .25s var(--dp-ease), background .25s var(--dp-ease), color .25s var(--dp-ease), border-color .25s var(--dp-ease), box-shadow .25s var(--dp-ease);
  position: relative;
}
.dp-cta::after, .dp-btn-primary::after, .jgo-btn-primary::after {
  content: "→"; display: inline-block; transition: transform .25s var(--dp-ease);
}
@media (hover: hover) and (pointer: fine) {
  .dp-cta:hover::after, .dp-btn-primary:hover::after, .jgo-btn-primary:hover::after { transform: translateX(4px); }
}

.dp-cta--gold, .dp-btn-primary, .jgo-btn-primary {
  background: var(--dp-accent); color: var(--dp-primary); border-color: var(--dp-accent);
}
@media (hover: hover) and (pointer: fine) {
  .dp-cta--gold:hover, .dp-btn-primary:hover, .jgo-btn-primary:hover {
    background: var(--dp-primary); color: var(--dp-bg-soft); border-color: var(--dp-primary);
    transform: translateY(-2px); box-shadow: var(--dp-shadow-md); /* RB 호버 리프트 패턴 */
  }
}
.dp-cta--outline {
  background: transparent; color: var(--dp-primary); border-color: var(--dp-primary);
}
.dp-section--dark .dp-cta--outline { color: var(--dp-text-on-dark); border-color: var(--dp-text-on-dark-sub); }
@media (hover: hover) and (pointer: fine) {
  .dp-cta--outline:hover { background: var(--dp-primary); color: var(--dp-bg-soft); }
  .dp-section--dark .dp-cta--outline:hover { background: var(--dp-accent); color: var(--dp-primary); border-color: var(--dp-accent); }
}
.dp-cta--ghost { background: transparent; color: var(--dp-accent); border-color: transparent; padding: 8px 4px; min-height: auto; }

.jgo-btn-primary--large { padding: 16px 36px; font-size: 1.05rem; }

/* ── Hero ───────────────────────────────────────────────────── */
/* 빌드 변형 선택: 우카피/좌이미지 (dp-hero--media-left) — Step3 기본 예시(좌카피/우이미지)의
   반대 배치를 이번 빌드 값으로 채택. 근거: 서비스 실사진을 시선 유입 지점(좌측)에 먼저 배치해
   "주차시설물 시공 현장"을 즉시 각인시키고, 카피/CTA는 시선이 자연스럽게 이동하는 우측에 배치. */
.dp-hero { background: var(--dp-bg-soft); padding: clamp(56px, 9vw, 108px) 0; overflow: hidden; }
.dp-hero__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
.dp-hero--media-left .dp-hero__media { order: 1; }
.dp-hero--media-left .dp-hero__copy  { order: 2; }
.dp-hero__media figure { margin: 0; aspect-ratio: 4/5; overflow: hidden; position: relative; }
.dp-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.dp-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(var(--dp-primary-rgb), .35) 0%, rgba(var(--dp-primary-rgb), 0) 45%);
  pointer-events: none;
}
.dp-hero__media { position: relative; }

.dp-hero__title { font-size: var(--dp-fs-display); line-height: 1.16; margin: .35em 0 .4em; }
.dp-hero__title em {
  position: relative; color: var(--dp-primary); display: inline-block;
}
.dp-hero__title em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .12em;
  background: var(--dp-accent-soft); z-index: -1;
  transform: scaleX(0); transform-origin: left;
  animation: dp-underline-in 1.1s var(--dp-ease) .35s forwards;
}
@keyframes dp-underline-in { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .dp-hero__title em::after { animation: none; transform: scaleX(1); } }

.dp-hero__sub { font-size: var(--dp-fs-lede); color: var(--dp-text-sub); max-width: 46ch; }
.dp-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 32px; }
.dp-hero__stats {
  list-style: none; margin: 0; padding: 20px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  border-top: 1px solid var(--dp-border-soft);
}
.dp-hero__stats li {
  font-size: .85rem; font-weight: 600; color: var(--dp-text-sub);
  padding-left: 14px; position: relative;
}
.dp-hero__stats li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--dp-accent);
}
@media (max-width: 860px) {
  .dp-hero__grid { grid-template-columns: 1fr; }
  .dp-hero--media-left .dp-hero__media { order: 0; }
  .dp-hero__media figure { aspect-ratio: 16/9; }
  .dp-hero__stats { grid-template-columns: 1fr; }
}

/* ── 서비스 카드 그리드 (메인) — 카드 스타일 변형: outline 채택 ─
   근거: industry_mood utility(절제·신뢰감)에는 그림자 대신 얇은 보더가 더 어울림. */
.dp-service-grid__list { grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3.5vw, 48px); }
@media (max-width: 768px) {
  /* 카드/뱃지 그리드 규칙(Step5): 실제 카테고리 7개가 모바일 상한(5) 초과 → 5개만 노출 + CTA1 = 총 6 */
  .dp-service-grid__list li:nth-child(6),
  .dp-service-grid__list li:nth-child(7) { display: none; }
}

.dp-service-card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--dp-border); border-radius: 0; background: var(--dp-bg-soft);
  transition: transform .3s var(--dp-ease), border-color .3s var(--dp-ease), box-shadow .3s var(--dp-ease), opacity .32s var(--dp-ease);
  position: relative;
}
.dp-service-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--dp-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--dp-ease); z-index: 2;
}
.dp-service-card__img { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.dp-service-card__img img, .dp-service-card__img .dp-img--fallback {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--dp-ease);
}
.dp-service-card__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--dp-primary-rgb), 0) 55%, rgba(var(--dp-primary-rgb), .55) 100%);
}
.dp-service-card__num {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  font-family: var(--dp-font-caps); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dp-primary); background: var(--dp-accent); /* 배지 문법: 액센트 배경 + pill 라운드 예외(RB: 2px) */
  padding: 4px 9px; border-radius: var(--dp-radius-pill);
}
.dp-service-card__body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.dp-service-card__body h2 { font-size: 1.15rem; line-height: 1.35; margin: 0 0 .4em; }
.dp-service-card__body .dp-nseo-card__more { margin-top: auto; padding-top: 8px; }
.dp-nseo-card__more {
  display: inline-block; font-weight: 700; font-size: .88rem; color: var(--dp-accent);
  position: relative; padding-bottom: 2px;
}
.dp-nseo-card__more::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--dp-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--dp-ease);
}
@media (hover: hover) and (pointer: fine) {
  .dp-service-card:hover { transform: translateY(-4px); border-color: var(--dp-accent); box-shadow: var(--dp-shadow-md); }
  .dp-service-card:hover::before { transform: scaleX(1); }
  .dp-service-card:hover .dp-service-card__img img { transform: scale(1.05); }
  .dp-service-card:hover .dp-nseo-card__more::after { transform: scaleX(1); }
}
.dp-service-card--cta { justify-content: center; background: var(--dp-primary); border-color: var(--dp-primary); }
.dp-service-card--cta .dp-service-card__body h2, .dp-service-card--cta .dp-service-card__body p { color: var(--dp-text-on-dark); }
.dp-service-card--cta .dp-nseo-card__more { color: var(--dp-accent-soft); }
.dp-service-card--cta .dp-nseo-card__more::after { background: var(--dp-accent-soft); }

/* ── 사이트맵: 제목 + 바로가기만 있는 컴팩트 링크 목록 (설명 없음) ── */
.dp-sitemap__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 24px); }
@media (max-width: 900px) { .dp-sitemap__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dp-sitemap__list { grid-template-columns: 1fr; } }
.dp-sitemap__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border: 1px solid var(--dp-border); background: var(--dp-bg-soft);
  text-decoration: none; color: var(--dp-text); font-weight: 600;
  transition: border-color .25s var(--dp-ease), background .25s var(--dp-ease);
}
@media (hover: hover) and (pointer: fine) {
  .dp-sitemap__link:hover { border-color: var(--dp-accent); background: var(--dp-bg-warm); }
  .dp-sitemap__link:hover .dp-nseo-card__more::after { transform: scaleX(1); }
}

/* ── USP 카드 (선택 이유) ───────────────────────────────────── */
.dp-usp__list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 32px); }
@media (max-width: 900px) { .dp-usp__list { grid-template-columns: repeat(2, 1fr); } }
.dp-usp__item { background: var(--dp-bg-soft); border: 1px solid var(--dp-border); padding: 28px 22px; transition: background .3s var(--dp-ease), border-color .3s var(--dp-ease), opacity .32s var(--dp-ease), transform .32s var(--dp-ease); }
.dp-usp__item h3 { font-size: 1.05rem; margin-bottom: .5em; }
.dp-usp__item p { font-size: .92rem; margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .dp-usp__item:hover { background: var(--dp-bg-warm); border-color: var(--dp-accent); }
}

/* ── 신뢰지표 스탯 ──────────────────────────────────────────── */
.dp-stats__num { color: var(--dp-accent-soft); font-family: var(--dp-font-heading); }
.dp-section--dark .dp-stats__label { color: var(--dp-text-on-dark-sub); }

/* ── Trust Badge 상세 ───────────────────────────────────────── */
.dp-trust__item {
  border: 1px solid var(--dp-border); border-radius: 0; background: var(--dp-bg-soft);
  position: relative; padding-top: 30px; transition: transform .25s var(--dp-ease), border-color .25s var(--dp-ease), opacity .32s var(--dp-ease);
}
.dp-trust__item::before {
  content: ""; width: 10px; height: 10px; background: var(--dp-accent); margin: 0 auto 10px; display: block;
  transition: transform .35s var(--dp-ease);
}
@media (hover: hover) and (pointer: fine) {
  .dp-trust__item:hover { border-color: var(--dp-accent); transform: translateY(-3px); }
  .dp-trust__item:hover::before { transform: rotate(45deg) scale(1.3); }
}

/* ── 프로세스 타임라인 — 좌→우 순차 등장(stagger) ──────────── */
.dp-process__item { border: 1px solid var(--dp-border); border-radius: 0; background: var(--dp-bg-soft); }
.dp-process__num {
  border-radius: 0; background: var(--dp-primary); color: var(--dp-bg-soft);
  font-family: var(--dp-font-serif); font-style: italic; font-weight: 600; font-size: 1.05rem; /* JSC 세리프 워터마크 넘버 보조 적용 — 실제 4단계 공정 순서라 정당한 사용 */
}
.dp-process__list li:nth-child(1) { transition-delay: 0s; }
.dp-process__list li:nth-child(2) { transition-delay: .12s; }
.dp-process__list li:nth-child(3) { transition-delay: .24s; }
.dp-process__list li:nth-child(4) { transition-delay: .36s; }

/* ── CTA 배너 (서비스 하위페이지: 카드/배너형) ─────────────── */
.dp-cta--card, .dp-cta--banner { border: 1px solid var(--dp-border); border-radius: 0; padding: 48px 32px; background: var(--dp-bg-soft); }
.dp-cta__text { font-family: var(--dp-font-heading); font-size: 1.3rem; font-weight: 700; }

/* ── 중간 CTA 배너 (메인) — split layout: 이미지 + 카피 ─────── */
.dp-cta-banner__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.dp-cta-banner__media { aspect-ratio: 4/3; overflow: hidden; }
.dp-cta-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.dp-cta-banner__body .dp-cta__text { color: var(--dp-text-on-dark); margin: .5em 0 1.2em; }
@media (max-width: 768px) { .dp-cta-banner__grid { grid-template-columns: 1fr; } }

/* ── 하단 Bottom CTA ────────────────────────────────────────── */
.dp-bottom-cta__inner { text-align: center; max-width: var(--dp-max-w-text); margin: 0 auto; }
.dp-bottom-cta__inner h2 { font-size: var(--dp-fs-h2); }
.dp-bottom-cta__inner p { color: var(--dp-text-on-dark-sub); margin-bottom: 28px; }
.dp-bottom-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ── FAQ / 마퀴 / 갤러리 — 각진 처리 유지 ──────────────────── */
.jgo-marquee__item img { border-radius: 0; }
.dp-nseo-card, .dp-diagnosis__card, .dp-compare__table th, .dp-compare__table td { border-radius: 0; }

/* ── 반응형 여백 밀도: default 유지(밀도 유틸은 base.css 제공, 이번 빌드는 표준값 채택) ── */

/* ══════════════════════════════════════════════════════════════════════
   pf-home — 홈페이지 시그니처: "현장실측" 도면 모티프.
   컬러 토큰은 변경하지 않음(브랜드 컬러 고정 유지) — 대신 실측 스펙 시트에서 쓰는
   코너 등록마크·눈금선·좌표주석을 기존 accent 컬러로 그려 넣는다.
   근거: client.trust_badges 1순위 "현장실측 기반 정확한 견적" — 장식이 아니라 실제 차별점.
   ══════════════════════════════════════════════════════════════════════ */

.pf-home .dp-eyebrow,
.pf-home .dp-stats__num {
  font-family: var(--dp-font-tech);
}

/* 히어로 사진 — 코너 등록마크(실측 크롭마크) + 좌표 주석 */
.pf-home .dp-hero__media figure { position: relative; }
.pf-home .dp-hero__media figure::before {
  content: ""; position: absolute; inset: 14px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(var(--dp-accent), var(--dp-accent)) top left / 22px 2px no-repeat,
    linear-gradient(var(--dp-accent), var(--dp-accent)) top left / 2px 22px no-repeat,
    linear-gradient(var(--dp-accent), var(--dp-accent)) top right / 22px 2px no-repeat,
    linear-gradient(var(--dp-accent), var(--dp-accent)) top right / 2px 22px no-repeat,
    linear-gradient(var(--dp-accent), var(--dp-accent)) bottom left / 22px 2px no-repeat,
    linear-gradient(var(--dp-accent), var(--dp-accent)) bottom left / 2px 22px no-repeat,
    linear-gradient(var(--dp-accent), var(--dp-accent)) bottom right / 22px 2px no-repeat,
    linear-gradient(var(--dp-accent), var(--dp-accent)) bottom right / 2px 22px no-repeat;
}
.pf-home .dp-hero__media figure::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; z-index: 2;
  background-image: repeating-linear-gradient(90deg, var(--dp-accent-soft) 0 1px, transparent 1px 14px);
  background-position: bottom; opacity: .8;
}
.pf-geo-tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  font-family: var(--dp-font-tech); font-size: .72rem; font-weight: 500; letter-spacing: .02em;
  color: var(--dp-text-on-dark); background: rgba(var(--dp-primary-d-rgb), .82);
  padding: 5px 10px; white-space: nowrap;
}
.pf-home .dp-hero__title { position: relative; }
.pf-home .dp-hero__stats li { font-family: var(--dp-font-tech); font-size: .78rem; letter-spacing: 0; }
.pf-home .dp-hero__stats li::before { width: 8px; height: 1px; top: .75em; }

/* 신뢰지표 스탯 — 각 항목에 눈금 틱 */
.pf-home .dp-stats__item { position: relative; padding-top: 14px; }
.pf-home .dp-stats__item::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 10px; background: var(--dp-accent-soft);
}
.pf-home .dp-stats__num { letter-spacing: -.01em; }

/* 서비스 카드 배지 — 임의 순번 대신 실제 카테고리 라벨(정보 전달) */
.pf-home .dp-service-card__num {
  font-family: var(--dp-font-tech); font-size: .7rem; font-weight: 600; letter-spacing: .04em;
}

/* 하단 CTA — 히어로 코너마크와 시각적으로 짝을 이루는 마감(bookend) */
.pf-home .dp-bottom-cta__inner {
  position: relative; padding: 44px clamp(20px, 5vw, 64px);
}
.pf-home .dp-bottom-cta__inner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--dp-accent), var(--dp-accent)) top left / 26px 2px no-repeat,
    linear-gradient(var(--dp-accent), var(--dp-accent)) top left / 2px 26px no-repeat,
    linear-gradient(var(--dp-accent), var(--dp-accent)) top right / 26px 2px no-repeat,
    linear-gradient(var(--dp-accent), var(--dp-accent)) top right / 2px 26px no-repeat,
    linear-gradient(var(--dp-accent), var(--dp-accent)) bottom left / 26px 2px no-repeat,
    linear-gradient(var(--dp-accent), var(--dp-accent)) bottom left / 2px 26px no-repeat,
    linear-gradient(var(--dp-accent), var(--dp-accent)) bottom right / 26px 2px no-repeat,
    linear-gradient(var(--dp-accent), var(--dp-accent)) bottom right / 2px 26px no-repeat;
}

@media (max-width: 640px) {
  .pf-geo-tag { font-size: .64rem; padding: 4px 8px; }
}

/* pf-sitemap — JSC 시그니처 보조: 사이트맵 카테고리 타이틀에 세리프 이탤릭 적용 */
.pf-sitemap .dp-section-head h2 {
  font-family: var(--dp-font-serif); font-style: italic; font-weight: 600;
}