/**
 * WITHER 공개 페이지 본문 테마 — dcfnews.com 계열
 * 배경 대비: 어두운 바탕 → 밝은 글자 / 밝은 카드·섹션 → 진한 글자
 */
:root {
  --bg: #5e6875;
  --bg-soft: #5e7083;
  --panel: rgba(255, 255, 255, 0.94);
  --panel-strong: rgba(255, 255, 255, 0.98);
  /* 밝은 표면용 (대부분 카드·패널·인라인 var(--text) 참조) */
  --text: #0f172a;
  --muted: #334155;
  --muted-soft: #475569;
  /* 어두운 페이지 바탕용 */
  --on-dark-text: #ffffff;
  --on-dark-muted: #d6e0f0;
  --on-dark-muted-soft: #b9c6dc;
  /* 밝은 표면 강조 */
  --on-light-text: #0f172a;
  --on-light-strong: #0b1220;
  --on-light-muted: #1f2937;
  --line: rgba(15, 23, 42, 0.12);
  --line-strong: rgba(15, 23, 42, 0.2);
  --line-on-dark: rgba(255, 255, 255, 0.14);
  --primary: #4e92e6;
  --primary-2: #2563eb;
  --accent: #18b4a0;
  --accent-strong: #0d9488;
  --success: #059669;
  --warning: #d97706;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
  --radius: 24px;
  --radius-sm: 16px;
  --requester-bg: #4e92e6;
  --requester-bg-2: #67d6c8;
  --requester-shadow: rgba(78, 146, 230, 0.28);
  --requester-shadow-hover: rgba(103, 214, 200, 0.32);
  --wither-bg: #f97316;
  --wither-bg-hover: #fb923c;
  --wither-text: #0a0a0a;
  --wither-border: rgba(251, 146, 60, 0.45);
  --wither-border-hover: #fb923c;
  --wither-shadow: rgba(194, 65, 12, 0.22);
}

html {
  scroll-behavior: smooth;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

body {
  margin: 0;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", -apple-system,
    BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 500;
  color: var(--on-dark-text) !important;
  line-height: 1.72;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at top left, rgba(103, 214, 200, 0.15), transparent 30%),
    radial-gradient(circle at top right, rgba(137, 191, 255, 0.19), transparent 34%),
    linear-gradient(180deg, #5c6371 0%, #5e6a7f 42%, #616f86 100%) !important;
}

h1,
h2,
h3,
h4 {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", -apple-system,
    sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* 띄어쓰기 우선 줄바꿈 — 모바일·PC 공통 */
:is(
  p,
  li,
  dd,
  dt,
  figcaption,
  blockquote,
  label,
  legend,
  summary,
  td,
  th,
  .sub,
  .lead,
  .leadCopy,
  .detailBody,
  .sectionHead,
  .hero,
  .panel,
  .heroBox,
  .sectionBox,
  .formBox,
  .insightCard,
  .solutionStep,
  .readinessCard,
  .howCard,
  .routeCard,
  .entryCard,
  .trustPoint,
  .footer,
  .footerCard,
  .statusPanel,
  .fareBox,
  .summaryCard,
  .linkCard,
  .fieldHint,
  .helperNote,
  .directionsMeta,
  .directionsName,
  .directionsAddr,
  .directionsParking
) {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* URL·코드 등 연속 문자열만 강제 분리 */
pre,
code,
kbd,
samp,
.wither-break-all {
  word-break: break-all;
  overflow-wrap: anywhere;
  text-wrap: wrap;
}

a {
  color: inherit;
}

/* ── 어두운 페이지 바탕 위 직접 텍스트 ── */
.section:not(#problem):not(#about):not(#directions) .sectionHead,
.section:not(#problem):not(#about):not(#directions) .sectionHead h2,
.section:not(#problem):not(#about):not(#directions) .sectionHead .sub,
main > .wrap > h1,
main > .wrap > h2,
main > .wrap > p.lead:not(.panel .lead) {
  color: var(--on-dark-text);
}

.section:not(#problem):not(#about):not(#directions) .sectionHead .sub {
  color: var(--on-dark-muted);
  font-weight: 700;
}

/* ── 밝은 표면 공통 (카드·패널) — 섹션 캔버스(heroShell·#problem 등)는 제외 ── */
:is(
  .panel,
  .heroBox,
  .sectionBox,
  .formBox,
  .statusPanel,
  .summaryCard,
  .fareBox,
  .linkCard,
  .footerBox,
  .footerCard,
  .successBox,
  .noData,
  .detailBody,
  .serviceCard,
  .featureCard,
  .infoCard,
  .stepCard,
  .regionCard,
  .partnerBox,
  .thankBox,
  .authBox,
  .profileBox,
  .mapPanel,
  .assignmentCard,
  .trackCard,
  .insightCard,
  .solutionStep,
  .signalItem,
  .readinessCard,
  .howCard,
  .trustPoint,
  .heroProofItem,
  .heroFocusItem,
  .entryCard,
  .routeCard,
  .routeMetaItem,
  .bizStep,
  .roadmapItem,
  .roadmapSignal,
  .businessCard,
  .directionsPanel,
  .chip,
  .hero-label
) {
  color: var(--on-light-text) !important;
}

:is(
  .panel,
  .heroBox,
  .sectionBox,
  .formBox,
  .statusPanel,
  .summaryCard,
  .fareBox,
  .linkCard,
  .footerBox,
  .footerCard,
  .successBox,
  .noData,
  .insightCard,
  .solutionStep,
  .signalItem,
  .readinessCard,
  .howCard,
  .trustPoint,
  .heroProofItem,
  .heroFocusItem,
  .entryCard,
  .routeCard,
  .routeMetaItem,
  .bizStep,
  .roadmapItem,
  .roadmapSignal,
  .businessCard,
  .directionsPanel,
  .chip,
  .hero-label
) {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
}

:is(
  .panel,
  .heroBox,
  .sectionBox,
  .formBox,
  .insightCard,
  .solutionStep,
  .readinessCard,
  .howCard,
  .routeCard,
  .entryCard,
  .footerBox,
  .footerCard
) {
  background-image: none !important;
}

body:not(.page-home) #directions {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(238, 242, 255, 0.92) 100%) !important;
  color: var(--on-light-text);
}

body:not(.page-home) .footer {
  background: linear-gradient(180deg, rgba(255, 250, 245, 0.96) 0%, rgba(255, 237, 213, 0.96) 100%) !important;
}

/* 밝은 표면 — 제목·본문 대비 */
:is(
  .panel,
  .heroBox,
  .sectionBox,
  .formBox,
  .insightCard,
  .solutionStep,
  .readinessCard,
  .howCard,
  .routeCard,
  .entryCard,
  .trustPoint,
  .heroProofItem,
  .heroFocusItem,
  .footerBox,
  .footerCard,
  .statusPanel,
  .fareBox,
  .summaryCard,
  .linkCard
) :is(h1, h2, h3, h4, h5, strong) {
  color: var(--on-light-strong) !important;
  font-weight: 800 !important;
}

:is(
  .panel,
  .heroBox,
  .sectionBox,
  .formBox,
  .insightCard,
  .solutionStep,
  .readinessCard,
  .howCard,
  .routeCard,
  .entryCard,
  .trustPoint,
  .heroProofItem,
  .heroFocusItem,
  .footerBox,
  .footerCard,
  .statusPanel,
  .fareBox,
  .summaryCard,
  .linkCard
) :is(p, li, span, label, dd, dt, td, th, .sub, .lead, .leadCopy, .detailBody, .fieldHint, .helperNote, .fareRow, .ctaSection p) {
  color: var(--on-light-muted) !important;
  font-weight: 600 !important;
}

:is(.panel, .heroBox, .routeCard, .footerBox, .footerCard) .sub,
:is(.panel, .heroBox, .routeCard) .lead,
.hero-label,
.routeBadge,
.heroProofItem span,
.signalItem span,
.readinessCard p,
.howCard p,
.insightCard p,
.footer p,
.footerCard p,
.footerCard li,
.field label,
.fieldHint,
.helperNote {
  color: var(--on-light-muted) !important;
  font-weight: 700 !important;
}

.hero-label,
.routeBadge {
  color: var(--primary-2) !important;
  background: rgba(238, 242, 255, 0.95) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
}

.heroBrandTitle,
.hero-label {
  color: #1e3a8a !important;
}

/* 폼 필드 — 밝은 배경 + 진한 글자 */
input,
select,
textarea {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--on-light-strong) !important;
  border-color: var(--line-strong) !important;
  font-weight: 600;
}

input::placeholder,
textarea::placeholder {
  color: #64748b;
}

/* 버튼 */
.btn.ghost {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--line-strong) !important;
  color: var(--on-light-strong) !important;
  font-weight: 700;
}

.btn.ghost:hover {
  background: #fff !important;
  border-color: #94a3b8 !important;
}

/* 어두운 바탕 위 고스트 버튼 */
.section:not(#problem):not(#about):not(#directions) .btn.ghost,
body > main .btn.platform-login {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--line-on-dark) !important;
  color: var(--on-dark-text) !important;
}

.section:not(#problem):not(#about):not(#directions) .btn.ghost:hover,
body > main .btn.platform-login:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* 밝은 카드 안 고스트 버튼 */
:is(.panel, .routeCard, .heroBox, .formBox, .footerBox) .btn.ghost,
:is(.panel, .routeCard, .heroBox, .formBox) .btn.platform-login {
  background: #fff !important;
  border-color: var(--line-strong) !important;
  color: var(--on-light-strong) !important;
}

.btn.primary,
.btn.mainBtn,
.btn.detailBtn,
.btn.requesterBtn {
  background: linear-gradient(135deg, var(--primary-2), var(--accent-strong)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 16px 32px rgba(78, 146, 230, 0.28) !important;
  font-weight: 800;
}

.btn.witherBtn,
.btn.wither-join,
a.btn.witherBtn {
  background: linear-gradient(135deg, #f97316, #fb923c) !important;
  color: #0a0a0a !important;
  font-weight: 800;
}

/* 퀵 네비·사운드 토글 */
.quickTopBtn {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--line) !important;
  color: var(--on-light-strong) !important;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

.quickTopBtn:hover {
  background: #fff !important;
  color: var(--primary-2) !important;
}

.sound-toggle:not(.is-on) {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #111827 !important;
  border-color: var(--line) !important;
}

.sound-toggle.is-on {
  color: #fff !important;
}

/* 푸터 링크 */
.footer a,
.footerLinks a {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(251, 146, 60, 0.35) !important;
  color: var(--on-light-strong) !important;
  font-weight: 800;
}

.footer a:hover,
.footerLinks a:hover {
  background: #fff !important;
}

/* 리스트 */
.reqList li {
  border-color: var(--line) !important;
  color: var(--on-light-text) !important;
}

.reqList strong {
  color: var(--on-light-strong) !important;
}

.reqList span {
  color: var(--on-light-muted) !important;
}

.locationConfirmed {
  background: rgba(240, 253, 244, 0.95) !important;
  border-color: #86efac !important;
}

.locationConfirmed h4,
.locationConfirmed p {
  color: #166534 !important;
}

.msg.error {
  color: #b91c1c !important;
  font-weight: 700;
}

.msg.ok {
  color: #047857 !important;
  font-weight: 700;
}

/* 밝은 카드/패널 위 에러·성공 색 (다크 톤용 pastel 차단) */
:is(.panel, .heroBox, .formBox, .sectionBox, .summaryCard, .fareBox, .statusPanel) .msg.error,
:is(.panel, .heroBox, .formBox, .sectionBox) .locStatus.error {
  color: #b91c1c !important;
}
:is(.panel, .heroBox, .formBox, .sectionBox, .summaryCard, .fareBox, .statusPanel) .msg.ok,
:is(.panel, .heroBox, .formBox, .sectionBox) .locStatus.loading {
  color: #047857 !important;
}

@media (max-width: 640px) {
  body {
    background:
      radial-gradient(circle at top left, rgba(103, 214, 200, 0.12), transparent 28%),
      linear-gradient(180deg, #5c6371 0%, #616f86 100%) !important;
  }
}

/* ── 확정 대비: 밝은 표면 클래스 (index 섹션·카드 공통) ── */
.wither-surface-light {
  color: var(--on-light-text) !important;
  --text: #0f172a;
  --muted: #334155;
}

.wither-surface-light :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: var(--on-light-strong) !important;
  font-weight: 800 !important;
}

.wither-surface-light :is(p, li, label, td, th, .sub, .lead, .leadCopy, .detailBody, .fieldHint, .helperNote) {
  color: var(--on-light-muted) !important;
  font-weight: 600 !important;
}

.wither-surface-light .sub,
.wither-surface-light .lead,
.wither-surface-light .legal span,
.wither-surface-light .footer p {
  color: #334155 !important;
  font-weight: 700 !important;
}

.wither-surface-light .btn.primary,
.wither-surface-light .btn.mainBtn,
.wither-surface-light .btn.detailBtn,
.wither-surface-light .btn.requesterBtn,
.wither-surface-light .btn.witherBtn,
.wither-surface-light .btn.wither-join {
  color: #fff !important;
}

.wither-surface-light .btn.witherBtn,
.wither-surface-light .btn.wither-join {
  color: #0a0a0a !important;
}

.wither-surface-light .btn.ghost,
.wither-surface-light .btn.platform-login {
  color: var(--on-light-strong) !important;
}

/* 어두운 캔버스 섹션 (#help 등) */
.section#help {
  color: var(--on-dark-text) !important;
}

.section#help .sectionHead h2 {
  color: #f8fafc !important;
}

.section#help .sectionHead .sub {
  color: var(--on-dark-muted) !important;
}

/* ── 홈(page-home): 본문 테마 캔버스 — 아래로 갈수록 한 단계씩 밝게 ── */
body.page-home {
  --theme-base: #5c6371;
  --theme-canvas-0: #5c6371;
  --theme-canvas-1: #5e667c;
  --theme-canvas-2: #606f88;
  --theme-canvas-3: #637894;
  --theme-canvas-4: #6581a0;
  --theme-canvas-5: #688aac;
  --theme-canvas-6: #6a93b8;
  background:
    radial-gradient(circle at top left, rgba(103, 214, 200, 0.15), transparent 30%),
    radial-gradient(circle at top right, rgba(137, 191, 255, 0.19), transparent 34%),
    linear-gradient(
      180deg,
      var(--theme-canvas-0) 0%,
      var(--theme-canvas-1) 16%,
      var(--theme-canvas-2) 32%,
      var(--theme-canvas-3) 48%,
      var(--theme-canvas-4) 64%,
      var(--theme-canvas-5) 80%,
      var(--theme-canvas-6) 100%
    ) !important;
}

body.page-home .heroShell {
  background: var(--theme-canvas-1) !important;
  background-image: none !important;
  color: var(--on-dark-text) !important;
}

/* 히어로 메인 카피 — 캔버스(본문 테마) 위에 직접 표시 (panel 클래스 사용 안 함) */
body.page-home .heroShell .heroLeadCanvas,
body.page-home .heroShell .heroLeft {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.page-home .heroShell .heroLeadCanvas::before,
body.page-home .heroShell .heroLeft::before {
  display: none !important;
}

body.page-home .heroShell .hero-unicorn-copy .lead,
body.page-home .heroShell .lead {
  color: #f8fafc !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 18px rgba(15, 23, 42, 0.28);
}

body.page-home .heroShell .lead .brandHangulSuffix {
  color: var(--on-dark-muted) !important;
  font-weight: 800 !important;
}

body.page-home #problem {
  background: var(--theme-canvas-2) !important;
  background-image: none !important;
  color: var(--on-dark-text) !important;
}

body.page-home #about {
  background: var(--theme-canvas-3) !important;
  background-image: none !important;
  color: var(--on-dark-text) !important;
}

body.page-home #help {
  background: var(--theme-canvas-4) !important;
  color: var(--on-dark-text) !important;
}

body.page-home #directions {
  background: var(--theme-canvas-5) !important;
  background-image: none !important;
  color: var(--on-dark-text) !important;
}

body.page-home .footer {
  background: var(--theme-canvas-6) !important;
  background-image: none !important;
  color: var(--on-dark-text) !important;
}

body.page-home :is(#problem, #about, #help, #directions, .heroShell) .sectionHead h2 {
  color: #f8fafc !important;
}

body.page-home :is(#problem, #about, #help, #directions, .heroShell) .sectionHead .sub {
  color: var(--on-dark-muted) !important;
}

/* 홈 캔버스 위 밝은 카드·패널 (히어로 메인 카피 영역 제외) */
body.page-home :is(
  .panel,
  .heroBox,
  .insightCard,
  .solutionStep,
  .readinessCard,
  .howCard,
  .routeCard,
  .entryCard,
  .directionsPanel,
  .footerBox,
  .footerCard
) {
  background: var(--panel) !important;
  color: var(--on-light-text) !important;
}

body.page-home :is(
  .panel,
  .heroBox,
  .insightCard,
  .solutionStep,
  .readinessCard,
  .howCard,
  .routeCard,
  .entryCard,
  .directionsPanel,
  .footerBox,
  .footerCard
) :is(h1, h2, h3, h4, h5, h6, strong) {
  color: var(--on-light-strong) !important;
}

body.page-home :is(
  .panel,
  .heroBox,
  .insightCard,
  .solutionStep,
  .readinessCard,
  .howCard,
  .routeCard,
  .entryCard,
  .directionsPanel,
  .footerBox,
  .footerCard
) :is(p, li, .sub, .lead, label, span:not(.btn)) {
  color: var(--on-light-muted) !important;
}

@media (max-width: 640px) {
  body.page-home {
    background:
      radial-gradient(circle at top left, rgba(103, 214, 200, 0.12), transparent 28%),
      linear-gradient(
        180deg,
        var(--theme-canvas-0) 0%,
        var(--theme-canvas-3) 50%,
        var(--theme-canvas-6) 100%
      ) !important;
  }
}