/* ═══════════════════════════════════════════════════════════
   dcpay-tokens.css — 디씨페이 디자인 토큰 + 컴포넌트 정규화
   적용: index / how / faq / notices / reviews / 후기 서브 5종

   로드 순서: 기존 CSS(인라인 <style> 포함) 이후에 로드한다.
   동일 명시도에서 나중 규칙이 이기는 캐스케이드를 이용하므로
   !important 는 사용하지 않는다.

   변경 범위: 컬러 / 타이포 / 여백 / 라운딩 / 그림자 / 보더 /
             상태 스타일 / 반응형 조정 — 텍스트·기능·구조 불변
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   1. 토큰
   ─────────────────────────────────────────────────────────── */
:root {
  /* ── Primary : 브랜드 남색. 기존 값 유지 ── */
  --primary:            #3b4890;
  --primary-hover:      #323E7D;
  --primary-active:     #29367c;
  --primary-dark:       #29367c;
  --primary-light:      #5a68b0;
  --primary-tint:       #EEF0F8;
  --primary-tint-deep:  #D6DBEF;

  /* ── Accent : 골드. 3분화(#ffd600/#ffed44/#fff200)를 상태값으로 재배치 ── */
  --accent:             #FFD600;
  --accent-hover:       #FFE24D;
  --accent-active:      #E6BF00;
  --accent-on:          #111111;   /* 골드 면 위 텍스트 */

  /* ── Secondary : 다크 서페이스 2값 ── */
  --surface-dark:       #1A1F3E;   /* 통계 그라데이션 시작 (기존 #1a1f3e 확정) */
  --surface-darkest:    #111111;   /* 푸터 */

  /* ── Gradient : 단일 토큰 ── */
  --gradient:           linear-gradient(135deg, var(--primary) 0%, var(--primary-active) 100%);
  --gradient-deep:      linear-gradient(135deg, var(--surface-dark) 0%, var(--primary-active) 100%);

  /* ── Background / Surface / Border ── */
  --bg:                 #FFFFFF;
  --bg-alt:             #F5F6FA;
  --bg-blue:            #EEF0F8;
  --surface:            #FFFFFF;
  --border:             #E2E5F0;
  --border-strong:      #C7CCE4;

  /* ── Text ── */
  --text:               #111111;   /* 18.88:1 */
  --text-sub:           #444444;   /*  9.74:1 */
  --text-muted:         #5B6072;   /*  6.25:1 (흰) / 5.49:1 (틴트) — 기존 #888888 3.54:1 대체 */
  --text-disabled:      #A1A6B8;
  --text-on-dark:       rgba(255,255,255,0.80);

  /* ── Semantic ── */
  --success:            #0F7B4F;   /* 5.29:1 */
  --warning:            #B45309;   /* 5.02:1 */
  --error:              #C81E1E;   /* 5.74:1 */
  --info:               #3b4890;   /* 8.35:1 */

  /* ── Radius : 15종 → 박스 2단계 + pill + circle ── */
  --radius:             12px;
  --radius-sm:          8px;
  --radius-pill:        9999px;

  /* ── Shadow : 16종 → 2단계 (기본 없음 / hover 1종) ── */
  --shadow:             0 4px 16px rgba(28,35,74,0.10);
  --shadow-hover:       0 8px 28px rgba(28,35,74,0.16);
  --shadow-bar:         0 -4px 20px rgba(28,35,74,0.10);

  /* ── Focus ── */
  --focus-ring:         0 0 0 3px rgba(59,72,144,0.28);

  /* ── Spacing (4px 그리드) ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-15: 60px; --sp-16: 64px; --sp-20: 80px;

  /* ── Font ──
     Pretendard static 6종 = 약 4.49MB (굵기당 ~785KB) 였다.
     가변(Variable) + 동적 서브셋으로 바꾸면 쓰는 글자 조각만 받아
     약 250~330KB. 글자 모양은 동일하고 굵기 45~920 무단계 지원. */
  --font:      'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;

  /* ── Motion ── */
  --transition:         0.18s ease;

  /* ── 공유 네임스페이스 매핑 : variables.css 기본값 누수 차단 (D1) ── */
  --color-primary:      #3b4890;
  --color-primary-dark: #29367c;
  --color-primary-light:#5a68b0;
  --color-accent:       #3b4890;
  --text-primary:       #111111;
  --text-secondary:     #444444;
}

/* ───────────────────────────────────────────────────────────
   2. 베이스 — 한글 조판
   ─────────────────────────────────────────────────────────── */
body {
  word-break: keep-all;          /* 기존 break-word: 어절 중간 절단 */
  overflow-wrap: break-word;     /* 긴 URL·숫자만 예외적으로 분리 */
}

/* ───────────────────────────────────────────────────────────
   3. 타이포 — 위계 재배분
   ─────────────────────────────────────────────────────────── */
.dc-hero-title,
.dc-slide-headline,
.dc-cta h2,
.dc-section-h2,
.dc-stat-value,
.dc-fraud-header h2 {
  letter-spacing: -0.03em;       /* 기존 -2px / -1px / -0.5px / -0.055em 혼재 */
}

/* 크기 역전 해소 : 모바일 상한이 데스크톱 상한을 넘지 않도록 (R1·R2).
   하한을 올려 모바일 존재감은 유지 — 375px에서 40px / 36px */
.dc-hero-title    { font-size: clamp(2.5rem, 9vw, 3.5rem); }
.dc-slide-headline{ font-size: clamp(2.25rem, 8vw, 3.25rem); }

/* 섹션 h2 : 모바일 하한 상향 → 본문 대비 확보 (P4) */
.dc-section-h2    { font-size: clamp(1.625rem, 4.4vw, 2rem); }

/* 본문 하한 13px → 14px (P4) */
.dc-feat-desc,
.dc-step-desc,
.dc-trust-badge,
.dc-slide-eyebrow { font-size: 0.875rem; }

@media (max-width: 768px) {
  .dc-hero-title    { font-size: clamp(2.5rem, 9vw, 3.5rem); }
  .dc-slide-headline{ font-size: clamp(2.25rem, 8vw, 3.25rem); }
  .dc-hero-sub      { font-size: 1.0625rem; }
  .dc-slide-eyebrow { font-size: 0.875rem; }
}
@media (max-width: 480px) {
  .dc-slide-headline{ font-size: clamp(2.25rem, 8vw, 3.25rem); }
}
@media (max-width: 390px) {
  .dc-slide-headline{ font-size: clamp(2.125rem, 8vw, 3.25rem); }
  .dc-slide-eyebrow { font-size: 0.8125rem; }
}

/* ───────────────────────────────────────────────────────────
   4. 아이브로우 — pill 1규격 (L3)
   ─────────────────────────────────────────────────────────── */
.dc-section-eyebrow {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.dc-hero-eyebrow,
.dc-slide-eyebrow {
  border-radius: var(--radius-pill);
}
/* ── 골드 등장 지점 축소 ──
   기존 4곳(eyebrow dot · 헤드라인 강조어 · 슬라이드 강조어 · CTA 버튼)에서
   dot 을 상태색으로 빼내 히어로 화면 내 골드를 2곳으로 줄인다.
   남는 2곳: 헤드라인 강조어 1개 + CTA 버튼 1개 */
.dc-hero-eyebrow-dot   { background: var(--success); }
.dc-hero-title .accent,
.dc-slide-accent       { color: var(--accent); }

/* ───────────────────────────────────────────────────────────
   5. 라운딩 정규화 (C5)
   ─────────────────────────────────────────────────────────── */
.dc-qm-card,
.dc-feat-card,
.dc-review-card,
.dc-faq-item,
.dc-stats-inner,
.dc-fraud-list li,
.dc-hero-btn,
.dc-cta-btn,
.dc-bottom-btn         { border-radius: var(--radius); }

.dc-nav a,
.dc-btn-sm,
.dc-logo-icon,
.dc-footer-logo-icon,
.dc-hamburger,
.dc-mobile-nav a,
.dc-mobile-nav-cta a,
.dc-mobile-nav-cta button,
.dc-qm-icon,
.dc-feat-icon,
.dc-trust-badge-icon   { border-radius: var(--radius-sm); }

.dc-hero-eyebrow,
.dc-hero-trust-pill,
.dc-review-tag,
.dc-dot.active         { border-radius: var(--radius-pill); }

/* 원형은 의미 요소이므로 유지 : .dc-*-dot, .dc-review-avatar, .dc-step-num */

/* ───────────────────────────────────────────────────────────
   6. 그림자 — 기본 없음 / hover 1종 (T8)
   ─────────────────────────────────────────────────────────── */
.dc-feat-card,
.dc-hero-btn.primary,
.dc-hero-trust-pill    { box-shadow: none; }

.dc-qm-card:hover,
.dc-feat-card:hover,
.dc-review-card:hover,
.dc-hero-btn.primary:hover,
.dc-hero-btn:hover     { box-shadow: var(--shadow-hover); }

.dc-mobile-nav,
.dc-bottom-bar         { box-shadow: var(--shadow-bar); }

/* ───────────────────────────────────────────────────────────
   7. 카드 1규격 (L6)
   ─────────────────────────────────────────────────────────── */
.dc-qm-card,
.dc-feat-card,
.dc-review-card,
.dc-faq-item,
.dc-fraud-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.dc-qm-card:hover,
.dc-feat-card:hover,
.dc-review-card:hover  { border-color: var(--border-strong); }

/* ───────────────────────────────────────────────────────────
   8. 버튼 — 5종 개별 정의 → 1규격 + variant (P8)
   ─────────────────────────────────────────────────────────── */
.dc-hero-btn,
.dc-cta-btn,
.dc-bottom-btn,
.dc-btn-sm {
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
/* ── 버튼 전체 확대 ── */
.dc-hero-btn {                 /* 52px → 64px */
  min-height: 64px;
  padding: 0 40px;
  font-size: 1.0625rem;
  font-weight: 800;
}
.dc-cta-btn {                  /* 52px → 62px */
  min-height: 62px;
  padding: 0 40px;
  font-size: 1.0625rem;
  font-weight: 800;
}
.dc-btn-sm {                   /* 헤더 44px → 48px */
  min-height: 48px;
  padding: 0 20px;
  font-size: 0.9375rem;
}
.dc-qm-card                    { min-height: 132px; }
.dc-bottom-btn                 { min-height: 56px; font-size: 0.9375rem; }
.dc-bottom-bar__btn            { min-height: 54px; font-size: 1rem; padding: 14px 0; }
.subpage-cta-chat,
.subpage-cta-phone             { min-height: 60px; font-size: 1.0625rem; }
.dc-mobile-nav-cta a,
.dc-mobile-nav-cta button      { min-height: 54px; font-size: 0.9375rem; }

@media (max-width: 600px) {
  .dc-hero-btn                 { min-height: 60px; width: 100%; font-size: 1.0625rem; }
  .dc-cta-btn                  { min-height: 58px; width: 100%; }
}

.dc-hero-btn.primary          { background: var(--accent); color: var(--accent-on); }
.dc-hero-btn.primary:hover    { background: var(--accent-hover); }
.dc-hero-btn.primary:active   { background: var(--accent-active); }
.dc-hero-btn.ghost            { color: var(--primary); border-color: var(--border-strong); background: var(--surface); }
.dc-hero-btn.ghost:hover      { background: var(--primary-tint); border-color: var(--primary); }

.dc-btn-sm.solid,
.dc-cta-btn:not(.white):not(.outline-white) { background: var(--primary); color: #fff; }
.dc-btn-sm.solid:hover,
.dc-cta-btn:not(.white):not(.outline-white):hover { background: var(--primary-hover); }

.dc-btn-sm.outline            { border-color: var(--border-strong); color: var(--primary); background: var(--surface); }
.dc-btn-sm.outline:hover      { border-color: var(--primary); background: var(--primary-tint); }

.dc-hero-btn:focus-visible,
.dc-cta-btn:focus-visible,
.dc-btn-sm:focus-visible,
.dc-bottom-btn:focus-visible,
.dc-faq-btn:focus-visible,
.dc-qm-card:focus-visible,
.faq-tab:focus-visible,
.dc-bottom-bar__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ───────────────────────────────────────────────────────────
   9. 배경 2값 교차 (C1) — 흰 ↔ 틴트, 다크는 히어로/티커/CTA/푸터만
   ─────────────────────────────────────────────────────────── */
.dc-quickmenu,
.dc-howto,
.dc-reviews            { background: var(--bg); }
.dc-features,
.dc-faq,
.dc-feed-section       { background: var(--bg-blue); }

.dc-cta                { background: var(--gradient); }
.dc-footer             { background: var(--surface-darkest); }

.dc-footer-info,
.dc-footer-info a      { color: var(--text-on-dark); }

/* ── 통계 : 다크 그라데이션 → 라이트 (대면적 다크 4구간 → 3구간)
      기존 .dc-stat-meta 는 white35% = 3.15:1 로 AA 미달이었다 ── */
.dc-stats              { background: var(--bg-blue); }
.dc-stats-inner        { background: var(--border); border-radius: var(--radius); overflow: hidden; }
.dc-stat-card          { background: var(--surface); }
.dc-stat-card:hover    { background: var(--surface); }
.dc-stat-label         { color: var(--text-muted); }
.dc-stat-dot           { background: var(--success); }
.dc-stat-value         { color: var(--primary); font-variant-numeric: tabular-nums; }
.dc-stat-value .unit   { color: var(--text-muted); }
.dc-stat-meta          { color: var(--text-muted); }   /* 3.15:1 → 6.25:1 */

/* ── 티커 : 얇은 남색 액센트 띠로 유지 (대면적 아님) ── */
.dc-ticker             { background: var(--primary-active); }
.dc-ticker-label       { background: var(--accent); color: var(--accent-on); }

/* ───────────────────────────────────────────────────────────
   9-a. 히어로 라이트 전환 (A안)
        슬라이드 사진이 밝은 톤이라 흰 덮개 74%면 남색 글자가
        밝은부분 10.5:1 / 어두운부분 6.5:1 로 모두 읽힌다.
   ─────────────────────────────────────────────────────────── */
.dc-hero {
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg-blue) 100%);
}
.dc-slide-overlay {
  background: linear-gradient(145deg, rgba(255,255,255,0.76) 0%, rgba(255,255,255,0.74) 100%);
}
.dc-slide-overlay--center {
  background: linear-gradient(180deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.80) 100%);
}

/* 히어로·슬라이드 글자를 남색 계열로 */
.dc-hero-title,
.dc-slide-headline     { color: var(--primary-active); }
.dc-hero-sub,
.dc-slide-sub          { color: var(--text-sub); }
.dc-hero-badge         { color: var(--text-muted); }
.dc-hero-eyebrow,
.dc-slide-eyebrow {
  display: inline-flex;      /* 블록으로 퍼져 가로 전체를 차지하던 문제 */
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--primary);
}

/* 강조어 : 밝은 면 위에서 골드 글자는 1.41:1 로 읽히지 않으므로
   글자는 남색으로 두고 골드를 형광펜처럼 뒤에 깐다 */
.dc-hero-title .accent,
.dc-slide-accent {
  color: var(--primary-active);
  background: linear-gradient(transparent 72%, var(--accent) 72%, var(--accent) 96%, transparent 96%);
  padding: 0 4px;
}

/* 슬라이더 점 */
.dc-dot                { background: var(--border-strong); }
.dc-dot.active         { background: var(--primary); }

/* 히어로 폰 일러스트 : 흰 배경이 사각 박스로 뜨는 것 제거 +
   기존 3D 코인은 새 일러스트에 코인이 포함돼 있어 숨김 (삭제 아님) */
.dc-hero-phone-img {
  mix-blend-mode: multiply;
  filter: none;
  animation: none;
}
.dc-hero-coin          { display: none; }

/* ───────────────────────────────────────────────────────────
   9-b. 트러스트 배지 — 카드화 + 모바일 복원
        기존 @media(max-width:600px) 에서 display:none 이라
        모바일에서는 신뢰 배지 5개가 아예 노출되지 않았다.
   ─────────────────────────────────────────────────────────── */
.dc-trust-badges {
  background: var(--bg-blue);
  padding: 24px;
}
.dc-trust-badges-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.dc-trust-badge { color: var(--text-sub); }

@media (max-width: 600px) {
  .dc-trust-badges       { display: block; padding: 16px; }
  .dc-trust-badges-inner { justify-content: center; gap: 4px; padding: 10px 8px; }
  .dc-trust-badge        { padding: 8px 10px; font-size: 0.8125rem; }
}

/* ───────────────────────────────────────────────────────────
   10. 보더 1규격 (C6)
   ─────────────────────────────────────────────────────────── */
.dc-header,
.dc-faq-item + .dc-faq-item,
.dc-trust-badges       { border-color: var(--border); }

/* ───────────────────────────────────────────────────────────
   11. 토큰 누수 차단
   ─────────────────────────────────────────────────────────── */
/* D1 : index 검색배너가 variables.css 기본 파랑(#3883FF)으로 렌더되던 문제 */
.search-banner,
.search-banner--naver,
.search-banner--google { border-color: var(--primary); border-radius: var(--radius); }
.search-banner:hover   { border-color: var(--primary-active); box-shadow: var(--shadow-hover); }
.search-banner-text strong { color: var(--primary); }

/* D2 : how 히어로가 호호페이 파랑 그라데이션으로 남아 있던 문제 */
.how-hero              { background: var(--gradient-deep); }
/* 강조어가 --color-primary(남색)라 남색 배경 위에서 묻히던 문제 → 골드 */
.how-hero-accent       { color: var(--accent); }
.how-hero-sub          { color: var(--text-on-dark); }
.how-hero .section-eyebrow {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* D5 : 하위 페이지 히어로 틴트를 index 틴트와 동일 값으로 */
.notices-hero          { background: var(--bg-blue); }
.reviews-hero          { background: var(--bg-blue); }
.how-faq-cta           { background: var(--bg-blue); }

/* ───────────────────────────────────────────────────────────
   12. 하위 페이지 컴포넌트 정규화
   ─────────────────────────────────────────────────────────── */
.review-card,
.notice-item,
.notice-accordion,
.faq-item {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.review-card:hover,
.notice-accordion:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover); }

.faq-tab,
.reviews-stats-bar,
.review-badge,
.notice-item-pin       { border-radius: var(--radius-pill); }
.faq-tab               { border-color: var(--border); color: var(--text-muted); }
.faq-tab:hover         { border-color: var(--primary); color: var(--primary); }
.faq-tab.is-active     { background: var(--primary); border-color: var(--primary); color: #fff; }

/* D7 : 후기 배지 5색 → 브랜드 1색 + 명도 단계 */
.review-badge--micro,
.review-badge--contents,
.review-badge--info,
.review-badge--card,
.review-badge--culture {
  background: var(--primary-tint);
  color: var(--primary-active);
  border-color: var(--border-strong);
}

/* 하단 고정 바 : 하위 페이지 기존 마크업 규격 통일 */
.dc-bottom-bar__btn            { border-radius: var(--radius); font-weight: 700; }
.dc-bottom-bar__btn--phone     { background: var(--surface); color: var(--primary); border: 1.5px solid var(--border-strong); }
.dc-bottom-bar__btn--phone:hover { border-color: var(--primary); background: var(--primary-tint); }
.dc-bottom-bar__btn--chat      { background: var(--primary); color: #fff; }
.dc-bottom-bar__btn--chat:hover{ background: var(--primary-hover); }

/* 공유 네비/푸터 브랜드 요소 */
.nav-live-dot          { background: var(--primary); box-shadow: 0 0 0 3px rgba(59,72,144,0.24); }
.nav-live-text         { color: var(--primary); }
.nav-live-badge        { border-color: var(--border); background: var(--primary-tint); border-radius: var(--radius-pill); }
/* 하위 페이지 로고 밑 미니 배지 : 10px 한글은 판독 하한 미만 → 12px */
.nav-cred-tag          { font-size: 0.75rem; padding: 3px 8px; border-radius: var(--radius-sm); }

/* ───────────────────────────────────────────────────────────
   13. 실시간 피드 — 이미 4열 표 구조(.feed-column-header + .feed-row)인데
       feed.css가 다크 배경 전제로 작성돼 흰 카드 위에서 무너져 있음.
       구조는 손대지 않고 색만 정합시킨다.
   ─────────────────────────────────────────────────────────── */
.feed-section          { border-color: var(--border); border-radius: var(--radius); }

/* 구분선 : rgba(255,255,255,0.03~0.04) → 대비 1.00:1 (사실상 비표시) */
.feed-column-header    { background: var(--bg-blue); border-bottom: 1px solid var(--border); color: var(--text-muted); gap: 16px; }
.feed-row              { border-bottom: 1px solid var(--border); gap: 16px; }
.feed-row:last-child   { border-bottom: none; }
.feed-row:hover        { background: var(--primary-tint); }

/* 브랜드 밖 색 차단 : #3883FF(호호페이 파랑) · #4F46E5(인디고) */
.feed-live-dot         { background: var(--success); }
.feed-status--completed{ background: rgba(15,123,79,0.12); color: var(--success); }
.feed-status--rejected { background: rgba(200,30,30,0.12); color: var(--error); }
.feed-new-banner       { background: var(--primary); color: #fff; border-radius: var(--radius-pill); }
.feed-list::-webkit-scrollbar-thumb { background: var(--border-strong); }

/* 금액 열 정렬 강화 — 표로 읽히게 */
.feed-amount           { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.feed-name-text,
.feed-service          { color: var(--text-sub); }

/* ═══════════════════════════════════════════════════════════
   14. 참고 사이트 기법 번안 (검정 → 밝은 톤)
   ═══════════════════════════════════════════════════════════ */

/* ── 6번 누적 통계 : 2분할 남색 패널 + ₩ 워터마크 + 격자 ──
      참고 ③ 오퍼 스트립 / 참고 ① 격자·글로우 */
.dc-stats {
  background: var(--bg-blue);
  padding: 56px 24px;
}
.dc-stats-inner {
  position: relative;
  overflow: hidden;
  max-width: 1120px;
  gap: 0;
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(255,214,0,0.06) 1px, transparent 1px),
    linear-gradient(rgba(255,214,0,0.06) 1px, transparent 1px),
    var(--primary-active);
  background-size: 46px 46px, 46px 46px, auto;
}
.dc-stat-card {
  position: relative;
  overflow: hidden;
  padding: 44px 48px;
  background: transparent;
}
.dc-stat-card:hover      { background: rgba(255,255,255,0.04); }
.dc-stat-card + .dc-stat-card { border-left: 1px solid rgba(255,255,255,0.16); }
/* ₩ 워터마크 */
.dc-stat-card::after {
  content: "₩";
  position: absolute;
  right: -8px;
  bottom: -38px;
  color: var(--accent);
  opacity: 0.38;          /* 22%면 남색의 파랑 채널이 남아 회색으로 보임 */
  font-size: 140px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
.dc-stat-label {
  position: relative;
  z-index: 1;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: lowercase;
}
.dc-stat-dot             { background: var(--accent); }
.dc-stat-value           { position: relative; z-index: 1; color: #fff; }
.dc-stat-value .unit     { color: rgba(255,255,255,0.72); }
.dc-stat-meta            { position: relative; z-index: 1; color: rgba(255,255,255,0.72); }

@media (max-width: 600px) {
  .dc-stat-card + .dc-stat-card { border-left: 0; border-top: 1px solid rgba(255,255,255,0.16); }
  .dc-stat-card          { padding: 32px 24px; }
  .dc-stat-card::after   { font-size: 96px; bottom: -26px; }
}

/* ── 7번 퀵메뉴 : 카드 안 알약 버튼 ── 참고 ⑤ */
.dc-qm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 26px 16px 20px;
}
.dc-qm-action {
  margin-top: auto;
  padding: 8px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 700;
  transition: background var(--transition), border-color var(--transition);
}
.dc-qm-card:hover .dc-qm-action {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ── 8번 서비스 특징 : 상단 이미지 카드 ── 참고 ② + ① */
.dc-feat-card {
  overflow: hidden;
  padding: 0 0 24px;
  text-align: left;
}
.dc-feat-icon            { display: none; }   /* 기존 아이콘은 지우지 않고 숨김 (되돌리기용) */
.dc-feat-thumb {
  aspect-ratio: 4 / 3;
  margin-bottom: 18px;
  background: var(--bg-blue);
}
.dc-feat-thumb img       { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-feat-tag {
  display: inline-block;
  margin: 0 24px 10px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--primary-tint);
  color: var(--primary-active);
  font-size: 0.6875rem;
  font-weight: 800;
}
.dc-feat-no {
  display: block;
  margin: 0 24px 6px;
  color: var(--primary);        /* 골드는 흰 배경 위 1.78:1 → 남색 8.35:1 */
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.dc-feat-title           { margin: 0 24px 8px; font-size: 1.0625rem; }
.dc-feat-desc            { margin: 0 24px 14px; }
.dc-feat-pill {
  display: inline-block;
  margin: 0 24px;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  background: var(--bg-blue);
  color: var(--primary-active);
  font-size: 0.8125rem;
  font-weight: 800;
}

/* ── 9번 이용방법 : 사각 번호 + 소요시간 알약 + 그림 + 화살표 ── 참고 ④ */
.dc-step {
  position: relative;
  padding: 24px 20px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.dc-step-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.dc-step-num {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);   /* 원형 → 사각 라운드 */
  background: var(--primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
}
.dc-step-time {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-on);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}
.dc-step-thumb {
  aspect-ratio: 1 / 1;
  max-width: 190px;
  margin: 0 auto 16px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-blue);
}
.dc-step-thumb img       { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 기존 점선 커넥터 제거 → 원형 화살표 */
.dc-howto-steps          { position: relative; }
.dc-howto-steps::before  { display: none; }
.dc-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -26px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  transform: translateY(-50%);
}
@media (max-width: 900px) {
  .dc-step:not(:last-child)::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   15. 신규 섹션 2종
   ═══════════════════════════════════════════════════════════ */

/* ── CHECK : 상황별 안내 (다크 3칸) ──
      호호티켓 AVAILABLE LIMIT 번안 — 격자 배경 + 글로우 오브 + 카테고리 알약
      밝아진 페이지의 리듬 앵커 역할 */
.dc-check {
  position: relative;
  overflow: hidden;
  padding: 76px 24px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(255,214,0,0.05) 1px, transparent 1px),
    linear-gradient(rgba(255,214,0,0.05) 1px, transparent 1px),
    var(--surface-dark);
  background-size: 46px 46px, 46px 46px, auto;
}
/* 상단 중앙 글로우 */
.dc-check::before {
  content: "";
  position: absolute;
  top: -260px;
  left: 50%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,0,0.16) 0%, transparent 68%);
  transform: translateX(-50%);
  pointer-events: none;
}
.dc-check .container        { position: relative; z-index: 1; }
.dc-check .dc-section-eyebrow{ border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); color: var(--accent); }
.dc-check .dc-section-h2    { color: #fff; }
.dc-check .dc-section-h2 .accent { color: var(--accent); background: none; padding: 0; }
.dc-check .dc-section-desc  { color: var(--text-on-dark); }

.dc-check-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.dc-check-card {
  min-height: 220px;
  padding: 32px 28px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.05);
  transition: border-color var(--transition), background var(--transition);
}
.dc-check-card:hover        { border-color: rgba(255,214,0,0.45); background: rgba(255,255,255,0.08); }
.dc-check-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,214,0,0.16);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
}
.dc-check-title {
  display: block;
  margin-top: 20px;
  color: #fff;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.dc-check-title em          { color: var(--accent); font-style: normal; }
.dc-check-desc              { margin-top: 14px; color: var(--text-on-dark); font-size: 0.9375rem; line-height: 1.7; }

@media (max-width: 900px) { .dc-check-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .dc-check      { padding: 60px 20px; }
  .dc-check-grid { grid-template-columns: 1fr; }
  .dc-check-card { min-height: 0; padding: 26px 22px; }
}

/* ── SERVICE : 사진 카드 4칸 ──
      소망페이 번안 — 사진 위 세로 그라데이션 + 흰 알약 버튼
      하단 82%에서 흰 글자 9.52:1 확보 */
.dc-service        { padding: 76px 24px; background: var(--bg); }
.dc-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.dc-service-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 260px;
  padding: 28px;
  border-radius: var(--radius);
  color: #fff;
  isolation: isolate;
}
.dc-service-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 28%;
  transition: transform 0.5s ease;
}
/* 3번 카드는 원본이 세로 사진(1280×1921)이라 가로로 긴 카드에서
   얼굴이 잘렸다 → 얼굴 중심으로 미리 자른 전용 이미지(1280×700) 사용 */
.dc-service-card:nth-child(3) .dc-service-bg {
  background-position: center 72%;
}
.dc-service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(26,31,62,0.10) 0%,
    rgba(26,31,62,0.48) 45%,
    rgba(26,31,62,0.82) 100%);
}
.dc-service-card:hover .dc-service-bg { transform: scale(1.04); }
.dc-service-eyebrow { margin: 0 0 6px; color: rgba(255,255,255,0.92); font-size: 0.8125rem; font-weight: 600; }
.dc-service-title   { margin: 0 0 8px; color: #fff; font-size: 1.375rem; font-weight: 900; letter-spacing: -0.03em; }
.dc-service-desc    { margin: 0 0 18px; color: rgba(255,255,255,0.88); font-size: 0.9375rem; line-height: 1.6; }
.dc-service-btn {
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--primary);
  font-size: 0.9375rem;
  font-weight: 800;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.dc-service-btn:hover  { background: var(--accent); color: var(--accent-on); }
.dc-service-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.6); }

@media (max-width: 640px) {
  .dc-service      { padding: 60px 20px; }
  .dc-service-grid { grid-template-columns: 1fr; gap: 16px; }
  .dc-service-card { min-height: 230px; padding: 22px; }
  .dc-service-btn  { width: 100%; }
}

/* ── LINEUP : 취급 서비스 6칸 ── 호호티켓 SERVICE 번안
      상단 4:3 제품컷 + 영문 번호 + 제목 + 설명 + 조건 알약 */
.dc-lineup        { padding: 76px 24px; background: var(--bg-blue); }
.dc-lineup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.dc-lineup-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.dc-lineup-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}
.dc-lineup-thumb  { aspect-ratio: 4 / 3; background: var(--bg-blue); }
.dc-lineup-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-lineup-body   { padding: 22px 24px 26px; }
.dc-lineup-no     { display: block; margin-bottom: 8px; color: var(--primary); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; }
.dc-lineup-title  { margin: 0 0 10px; color: var(--text); font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.03em; }
.dc-lineup-desc   { margin: 0 0 16px; color: var(--text-muted); font-size: 0.875rem; line-height: 1.7; }
.dc-lineup-pill {
  display: inline-block;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  background: var(--primary-tint);
  color: var(--primary-active);
  font-size: 0.8125rem;
  font-weight: 800;
}

@media (max-width: 900px) { .dc-lineup-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .dc-lineup      { padding: 60px 20px; }
  .dc-lineup-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* 섹션 제목 강조어 : 히어로와 동일한 골드 형광펜 처리 */
.dc-section-h2 .accent {
  color: var(--primary-active);
  background: linear-gradient(transparent 72%, var(--accent) 72%, var(--accent) 96%, transparent 96%);
  padding: 0 4px;
}

/* ═══════════════════════════════════════════════════════════
   16. 모바일 최적화
       .dc-feat-grid / .dc-qm-grid 는 4→2열 규칙만 있고
       1열 규칙이 없어 폰에서도 2열로 깔려 글자가 쪼개졌다.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* 카드가 든 그리드는 전부 1열 */
  .dc-feat-grid    { grid-template-columns: 1fr; gap: 16px; }
  .dc-lineup-grid  { grid-template-columns: 1fr; gap: 16px; }
  .dc-check-grid   { grid-template-columns: 1fr; gap: 14px; }
  .dc-service-grid { grid-template-columns: 1fr; gap: 16px; }

  /* 1열이 되면 4:3 이미지가 너무 높아짐 → 16:9 로 낮춤 */
  .dc-feat-thumb   { aspect-ratio: 16 / 9; }
  .dc-lineup-thumb { aspect-ratio: 16 / 9; }

  /* 카드 내부 여백 축소 */
  .dc-feat-tag,
  .dc-feat-no,
  .dc-feat-title,
  .dc-feat-desc,
  .dc-feat-pill    { margin-left: 20px; margin-right: 20px; }
  .dc-lineup-body  { padding: 20px 20px 22px; }
  .dc-feat-card    { padding-bottom: 20px; }

  /* 퀵메뉴는 2열 유지하되 여백만 축소 */
  .dc-qm-card      { min-height: 118px; padding: 20px 10px 16px; }
  .dc-qm-action    { padding: 7px 14px; font-size: 0.78125rem; }
}

/* 알약은 어떤 폭에서도 쪼개지지 않게 */
.dc-feat-pill,
.dc-lineup-pill,
.dc-feat-tag,
.dc-check-tag,
.dc-step-time,
.dc-qm-action     { white-space: nowrap; }

/* 아주 좁은 폰(≤420px) : 헤더가 로고+CTA+햄버거로 꽉 참 */
@media (max-width: 420px) {
  .dc-header-inner { padding: 0 14px; gap: 8px; }
  .dc-logo-text    { font-size: 1.0625rem; }
  .dc-logo-icon    { width: 32px; }
  .dc-btn-sm       { min-height: 44px; padding: 0 12px; font-size: 0.8125rem; gap: 4px; }
  .dc-hamburger    { width: 40px; min-height: 40px; }
  .dc-feat-title,
  .dc-lineup-title { font-size: 1.0625rem; }
}

/* ═══════════════════════════════════════════════════════════
   17. /how — "이럴 때 이용하세요" 섹션을 메인 디자인 언어로
       (제목 골드 형광펜 · 알약 배지 · 경고 박스 · 체크 카드)
   ═══════════════════════════════════════════════════════════ */
.how-when {
  padding: 76px 0;
  background: var(--bg-blue);
}
.how-when-inner {
  align-items: center;
  gap: 48px;
}

/* 제목 : 메인 섹션 h2 와 동일한 골드 형광펜 강조 */
.how-when-title {
  color: var(--text);
  font-size: clamp(1.625rem, 4.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.3;
}
.how-when-accent {
  color: var(--primary-active);
  background: linear-gradient(transparent 72%, var(--accent) 72%, var(--accent) 96%, transparent 96%);
  padding: 0 4px;
}

/* 사업자 배지 : .dc-feat-tag 규격 */
.how-when-sub    { margin-top: 14px; color: var(--text-muted); font-size: 0.9375rem; }
.how-when-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

/* 사칭 경고 : 얇은 좌측선 → 틴트 박스 (메인 사기주의와 같은 어법) */
.how-when-warning {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(200,30,30,0.22);
  border-left: 4px solid var(--error);
  border-radius: var(--radius-sm);
  background: #FEF2F2;
  color: #7F1D1D;
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* 체크 항목 : 메인 카드 규격(흰 배경 + 보더 + hover) */
.how-when-list { margin-top: 22px; display: grid; gap: 10px; }
.how-when-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 700;
  box-shadow: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.how-when-item:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.how-when-check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 900;
}

/* 일러스트 : 인라인 SVG → 브랜드 색 이미지 */
.how-when-illust { display: flex; justify-content: center; }
.how-when-img    { width: 100%; max-width: 300px; height: auto; }

@media (max-width: 768px) {
  .how-when      { padding: 60px 0; }
  .how-when-inner{ gap: 28px; }
  .how-when-img  { max-width: 220px; }
}

/* ═══════════════════════════════════════════════════════════
   18. 타이포 스케일 재정의 (메인)
       기존 문제 : 본문이 13 / 14 / 15px 세 값으로 섞여 역할 구분이 없고,
                   한글 본문 하한(15px)에 미달하는 13px가 다수.
       재정의    : 캡션 13 / 본문 15 / 본문+ 16 / 리드 17 / 제목 19·20 6단계
   ═══════════════════════════════════════════════════════════ */
:root {
  --fs-caption: 0.8125rem;  /* 13px — 라벨·배지 */
  --fs-sm:      0.9375rem;  /* 15px — 카드 설명 */
  --fs-base:    1rem;       /* 16px — 본문 */
  --fs-md:      1.0625rem;  /* 17px — 리드문 */
  --fs-lg:      1.1875rem;  /* 19px — 카드 제목 */
  --fs-xl:      1.25rem;    /* 20px — 강조 제목 */
}

/* ── 캡션·배지 (11~12px → 12~13px) ── */
.dc-section-eyebrow,
.dc-step-time,
.dc-check-tag,
.dc-stat-label      { font-size: var(--fs-caption); }
.dc-qm-sublabel     { font-size: var(--fs-caption); }
.dc-feat-tag,
.dc-feat-no,
.dc-lineup-no,
.dc-review-tag      { font-size: 0.75rem; }        /* 11 → 12px */

/* ── 카드 설명 (13 → 15px) ── */
.dc-feat-desc,
.dc-step-desc,
.dc-lineup-desc     { font-size: var(--fs-sm); line-height: 1.7; }
.dc-feat-pill,
.dc-lineup-pill,
.dc-qm-action,
.dc-service-eyebrow { font-size: 0.875rem; }        /* 13 → 14px */
.dc-footer-info     { font-size: 0.875rem; }        /* 13 → 14px */

/* ── 본문 (14 → 16px) ── */
.dc-review-text,
.dc-faq-panel       { font-size: var(--fs-base); line-height: 1.8; }
.dc-fraud-list li,
.dc-fraud-sub,
.dc-trust-badge,
.dc-slide-eyebrow   { font-size: var(--fs-sm); }
.dc-review-name     { font-size: var(--fs-sm); }

/* ── 리드문 (15 → 16~17px) ── */
.dc-section-desc    { font-size: var(--fs-md); line-height: 1.7; }
.dc-faq-btn         { font-size: var(--fs-md); }
.dc-qm-label,
.dc-check-desc,
.dc-service-desc    { font-size: var(--fs-base); line-height: 1.7; }
.dc-hero-sub        { font-size: clamp(1rem, 2.2vw, 1.1875rem); }

/* ── 제목 (16~19 → 18~20px) ── */
.dc-step-title      { font-size: 1.125rem; }        /* 16 → 18px */
.dc-feat-title      { font-size: var(--fs-lg); }    /* 17 → 19px */
.dc-lineup-title    { font-size: var(--fs-xl); }    /* 19 → 20px */
.dc-service-title   { font-size: 1.4375rem; }       /* 22 → 23px */
.dc-fraud-header h2 { font-size: var(--fs-xl); }    /* 18 → 20px */

/* ── 섹션 제목·숫자 ── */
.dc-section-h2      { font-size: clamp(1.75rem, 4.6vw, 2.25rem); }  /* 26~32 → 28~36 */
.dc-stat-value      { font-size: clamp(1.625rem, 4.4vw, 2.25rem); } /* 22~32 → 26~36 */
.dc-stat-meta       { font-size: var(--fs-sm); }

/* ── 모바일 : 커진 만큼 상한만 눌러 줄바꿈 폭발 방지 ── */
@media (max-width: 640px) {
  .dc-section-h2    { font-size: clamp(1.625rem, 6.2vw, 1.9375rem); }
  .dc-lineup-title,
  .dc-feat-title    { font-size: 1.125rem; }        /* 18px */
  .dc-service-title { font-size: 1.3125rem; }       /* 21px */
  .dc-section-desc  { font-size: var(--fs-base); }  /* 16px */
  .dc-review-text,
  .dc-faq-panel     { font-size: var(--fs-sm); }    /* 15px */
  .dc-hero-sub      { font-size: 1.0625rem; }       /* 17px */
  .dc-fraud-header h2 { font-size: 1.125rem; }
}

/* ═══════════════════════════════════════════════════════════
   19. 히어로 재설계 — 단일 화면 + 브랜드 그라데이션 + 확대 타이포
       · 캐러셀 5장 → 1장 (슬라이드 2~5 제거)
       · 배경: 글자쪽은 흰색 유지, 우측에 남색 그라데이션 오브
       · 헤드라인 대폭 확대
       · 폰 일러스트 위 플로팅 칩 2개
   ═══════════════════════════════════════════════════════════ */

/* 1장뿐이므로 캐러셀 점 숨김 + 캐러셀용 높이 결합 해제.
   기존엔 .dc-slider(aspect-ratio·overflow:hidden) → track(height:100%)
   → slide(height:100%) 사슬이라, 히어로가 470px여도 380px에서 잘렸다. */
.dc-slider-dots { display: none; }
.dc-slider {
  aspect-ratio: auto;
  min-height: 0;
  max-height: none;
  height: auto;
  overflow: visible;
}
.dc-slider-track {
  display: block;          /* flex 해제 → 높이 결합 끊김 */
  height: auto;
  transform: none;
  transition: none;
  will-change: auto;
}
.dc-slide  { height: auto; min-width: 0; }
.dc-hero   { height: auto; padding: 0; }

/* ── 배경 : 좌(텍스트) 흰색 → 우 남색 그라데이션 ── */
.dc-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1250px 780px at 92% 12%, rgba(59,72,144,0.17) 0%, rgba(59,72,144,0.09) 30%, rgba(59,72,144,0.03) 55%, transparent 78%),
    radial-gradient(820px 560px at 98% 92%, rgba(255,214,0,0.15) 0%, rgba(255,214,0,0.05) 45%, transparent 72%),
    linear-gradient(115deg, #FFFFFF 0%, #FFFFFF 46%, #F2F4FB 72%, #E4E8F5 100%);
}
/* 큰 원 두 개 (호호티켓의 원형 장식을 남색으로 번안) */
.dc-hero::before,
.dc-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: none;
}
.dc-hero::before {
  top: -180px; right: -120px;
  width: 560px; height: 560px;
  border: 92px solid rgba(59,72,144,0.07);
}
.dc-hero::after {
  right: 6%; bottom: -220px;
  width: 420px; height: 420px;
  background: rgba(255,214,0,0.13);
}
.dc-hero-inner { position: relative; z-index: 2; padding: 84px 24px 92px; }

/* ── 타이포 확대 ── */
.dc-hero-title {
  font-size: clamp(2.875rem, 6.4vw, 4.5rem);   /* 40~56 → 46~72px */
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 22px;
}
.dc-hero-sub {
  font-size: clamp(1.125rem, 2.4vw, 1.4375rem); /* 16~19 → 18~23px */
  font-weight: 600;
  line-height: 1.55;
}
.dc-hero-eyebrow { font-size: 0.9375rem; padding: 8px 18px; }
.dc-hero-badge   { font-size: 1rem; }

/* ── 플로팅 칩 (호호티켓 방식 번안) ── */
.dc-hero-img-wrap { position: relative; }
.dc-hero-chip {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
  padding: 13px 18px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 16px 38px rgba(28,35,74,0.16);
}
.dc-hero-chip--top    { top: 6%;  left: -6%; }
.dc-hero-chip--bottom { bottom: 12%; right: -4%; }
.dc-hero-chip-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 900;
}
.dc-hero-chip--bottom .dc-hero-chip-icon { background: var(--accent); color: var(--accent-on); }
.dc-hero-chip-text  { display: flex; flex-direction: column; line-height: 1.3; }
.dc-hero-chip-text small  { color: var(--text-muted); font-size: 0.8125rem; font-weight: 600; }
.dc-hero-chip-text strong { color: var(--text); font-size: 1.0625rem; font-weight: 800; white-space: nowrap; }

@media (max-width: 1120px) {
  .dc-hero-chip--top    { left: 0; }
  .dc-hero-chip--bottom { right: 0; }
}
@media (max-width: 900px) {
  /* 폰 일러스트가 사라지는 구간 → 글자쪽이 회색에 눌리지 않게 배경을 흰색 위주로 */
  .dc-hero {
    background:
      radial-gradient(680px 460px at 100% 0%, rgba(59,72,144,0.13) 0%, transparent 66%),
      radial-gradient(560px 420px at 100% 100%, rgba(255,214,0,0.14) 0%, transparent 68%),
      linear-gradient(160deg, #FFFFFF 0%, #FFFFFF 58%, #F4F6FC 100%);
  }
  .dc-hero::before { top: -150px; right: -160px; width: 420px; height: 420px; border-width: 66px; }
  .dc-hero::after  { right: -120px; bottom: -190px; width: 340px; height: 340px; }
  .dc-hero-inner   { padding: 60px 20px 76px; }
  .dc-hero-chip    { display: none; }
}
@media (max-width: 640px) {
  .dc-hero-title { font-size: clamp(2.625rem, 11vw, 3.25rem); }  /* 42~52px */
  .dc-hero-sub   { font-size: 1.1875rem; }
  .dc-hero-inner { padding: 52px 20px 72px; }
}

/* ───────────────────────────────────────────────────────────
   20. 모션 접근성
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}