/* 서비스·상세 연관 페이지: 배경 이미지 + 가독성 확보 frosted 패널 */
body.wither-service-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  /* 밝은 베이스 — 다크 테마 흰색 글자 상속을 차단 */
  background: #ebe6f8 !important;
  color: #0f172a !important;
  --text: #0f172a;
  --muted: #334155;
  --on-dark-text: #0f172a;
  --on-dark-muted: #334155;
  --on-dark-muted-soft: #475569;
}

/* 배경 이미지 + 강한 반투명 덮개 (텍스트 대비용) */
body.wither-service-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      160deg,
      rgba(248, 246, 255, 0.88) 0%,
      rgba(237, 233, 254, 0.84) 45%,
      rgba(245, 243, 255, 0.90) 100%
    ),
    var(--wither-service-bg) center / cover no-repeat;
}

body.wither-service-page > header,
body.wither-service-page > main,
body.wither-service-page > footer {
  position: relative;
  z-index: 1;
}

body.wither-service-page main,
body.wither-service-page .wrap,
body.wither-service-page .lead,
body.wither-service-page .leadCopy,
body.wither-service-page .helperNote,
body.wither-service-page .fieldHint,
body.wither-service-page .ctaSection p,
body.wither-service-page .detailBody,
body.wither-service-page .sub {
  color: #1e293b !important;
}

body.wither-service-page :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: #0b1220 !important;
}

/* ── 블럭: 불투명에 가까운 frosted (배경은 남기되 글자는 선명) ── */
body.wither-service-page .panel,
body.wither-service-page .heroBox,
body.wither-service-page .card,
body.wither-service-page .formBox,
body.wither-service-page .sectionBox {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(250, 248, 255, 0.92) 100%
  ) !important;
  backdrop-filter: blur(20px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow: 0 10px 36px rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
}

body.wither-service-page .fareBox,
body.wither-service-page .summaryCard,
body.wither-service-page .infoBox,
body.wither-service-page .detailCard,
body.wither-service-page .priceBox,
body.wither-service-page .confirmBox,
body.wither-service-page .successBox,
body.wither-service-page .statusPanel,
body.wither-service-page .locationConfirmed {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(245, 243, 255, 0.90) 100%
  ) !important;
  backdrop-filter: blur(14px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  color: #0f172a !important;
}

/* 패널 내부 텍스트 강제 (다크테마 흰색 글자 차단) */
body.wither-service-page
  :is(
    .panel,
    .heroBox,
    .card,
    .formBox,
    .sectionBox,
    .fareBox,
    .summaryCard,
    .infoBox,
    .detailCard,
    .successBox,
    .statusPanel
  )
  :is(p, li, span, label, dd, dt, td, th, .sub, .lead, .leadCopy, .detailBody, .fieldHint, .helperNote, .fareRow) {
  color: #1e293b !important;
}

body.wither-service-page
  :is(
    .panel,
    .heroBox,
    .card,
    .formBox,
    .sectionBox,
    .fareBox,
    .summaryCard,
    .successBox
  )
  :is(h1, h2, h3, h4, h5, strong) {
  color: #0b1220 !important;
}

body.wither-service-page .field label,
body.wither-service-page .locationRow label {
  color: #0f172a !important;
  font-weight: 800;
}

body.wither-service-page .reqList span,
body.wither-service-page .ctaSection p,
body.wither-service-page .helperNote {
  color: #334155 !important;
}

body.wither-service-page .reqList strong {
  color: #0f172a !important;
}

body.wither-service-page .heroLabel,
body.wither-service-page .chip {
  color: #4c1d95 !important;
  background: rgba(245, 243, 255, 0.96) !important;
  border-color: #ddd6fe !important;
}

body.wither-service-page .fareRow {
  color: #111827 !important;
}

body.wither-service-page .fareRow.total,
body.wither-service-page .nameDisplay,
body.wither-service-page .detailBody strong {
  color: #5b21b6 !important;
}

body.wither-service-page .msg.error,
body.wither-service-page .locStatus.error {
  color: #b91c1c !important;
}

body.wither-service-page .msg.ok,
body.wither-service-page .locStatus.loading {
  color: #047857 !important;
}

body.wither-service-page .locationConfirmed h4,
body.wither-service-page .locationConfirmed p {
  color: #166534 !important;
}

/* 입력 필드 */
body.wither-service-page .field input,
body.wither-service-page .field textarea,
body.wither-service-page .field select,
body.wither-service-page .locationRow input {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(100, 116, 139, 0.45) !important;
  color: #0f172a !important;
}
body.wither-service-page .field input::placeholder,
body.wither-service-page .field textarea::placeholder {
  color: #64748b !important;
}
body.wither-service-page .field input:focus,
body.wither-service-page .field textarea:focus,
body.wither-service-page .field select:focus,
body.wither-service-page .locationRow input:focus {
  outline: 2px solid rgba(124, 92, 255, 0.45);
  background: #ffffff !important;
}

/* 버튼: 밝은 표면에서도 대비 유지 */
body.wither-service-page .btn.ghost {
  background: #ffffff !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}
body.wither-service-page .btn.primary,
body.wither-service-page .btn.detailBtn,
body.wither-service-page .btn.mainBtn {
  color: #ffffff !important;
}

/* 푸터 */
body.wither-service-page .footer,
body.wither-service-page .footerBox,
body.wither-service-page .footerCard {
  color: #0f172a !important;
}
body.wither-service-page .footer p,
body.wither-service-page .footer a,
body.wither-service-page .footerLinks a {
  color: #1e293b !important;
}

/* 상세·신청 페이지 공통 헤더 치수 */
body.wither-service-page .siteHeader {
  max-width: 1100px;
  width: calc(100% - 24px);
}

body.wither-service-page .siteHeader .headerInner {
  max-width: 1100px;
  padding: 12px 20px;
}

body.wither-service-page .siteHeader .brand {
  gap: 12px;
}

body.wither-service-page .siteHeader .brandMark .brandLogo {
  width: 72px !important;
  height: 72px !important;
}

body.wither-service-page .siteHeader .brand .brandText > strong,
body.wither-service-page .siteHeader .brand .brandText > strong.brandFlyText {
  font-size: 44px !important;
  line-height: 0.98;
}

body.wither-service-page .siteHeader .brand .brandFlyText .fly-char {
  font-size: inherit !important;
}

body.wither-service-page .siteHeader .brand .brandText > span {
  font-size: 15px !important;
}

@media (max-width: 640px) {
  body.wither-service-page .siteHeader .headerInner {
    padding: 10px 14px;
  }

  body.wither-service-page .siteHeader .brandMark .brandLogo {
    width: 52px;
    height: 52px;
  }

  body.wither-service-page .siteHeader .brand .brandText > strong,
  body.wither-service-page .siteHeader .brand .brandText > strong.brandFlyText {
    font-size: 30px;
  }

  body.wither-service-page .siteHeader .brand .brandText > span {
    font-size: 11px;
  }
}

/* ── 신청 페이지: 개요(hero) ↔ 신청서(pageGrid) 밀착 ──
 * 대리운전은 폼만 바로 나오고, 행사/청소 등은 개요 블록이 커
 * 신청서가 화면 밖에 있는 것처럼 보이던 문제를 막는다. */
body.wither-service-page .shell > .hero {
  padding: 8px 0 12px !important;
  gap: 16px !important;
  align-items: start !important;
}

body.wither-service-page .shell > .pageGrid {
  margin-top: 0 !important;
  gap: 16px !important;
}

body.wither-service-page .shell .heroMain {
  padding: 22px 24px !important;
}

body.wither-service-page .shell .hero h1 {
  margin: 10px 0 8px !important;
  font-size: clamp(26px, 4.2vw, 40px) !important;
  line-height: 1.15 !important;
}

body.wither-service-page .shell .hero p {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

body.wither-service-page .shell .heroGrid {
  margin-top: 14px !important;
  gap: 10px !important;
}

body.wither-service-page .shell .heroMetric {
  padding: 12px !important;
}

body.wither-service-page .shell .heroMetric span {
  font-size: 16px !important;
}

body.wither-service-page .shell .pillRow {
  margin-top: 12px !important;
}

body.wither-service-page .shell .formStep.active {
  margin-top: 18px !important;
}

body.wither-service-page .shell .sectionTitle {
  margin: 0 0 6px !important;
  font-size: clamp(24px, 4vw, 30px) !important;
}

body.wither-service-page .shell .progress {
  margin: 16px 0 0 !important;
}

body.wither-service-page .shell .heroJump {
  display: inline-flex;
  margin-top: 14px;
  align-self: flex-start;
}

@media (max-width: 980px) {
  /* 우측 비주얼·콜아웃이 세로로 쌓이며 신청서를 한참 아래로 민다 → 접기 */
  body.wither-service-page .shell .heroVisual {
    display: none !important;
  }
}

@media (max-width: 720px) {
  body.wither-service-page .shell .heroGrid {
    display: none !important;
  }

  body.wither-service-page .shell .heroMain {
    padding: 14px 12px !important;
    border-radius: 16px !important;
  }

  body.wither-service-page .shell .hero h1 {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    margin: 6px 0 6px !important;
  }

  body.wither-service-page .shell .panel {
    padding: 14px 12px !important;
    border-radius: 18px !important;
  }
}

/* 모바일: 개요·헤더·진행단계를 최소화해 신청서가 바로 보이게 */
@media (max-width: 640px) {
  body.wither-service-page .shell {
    padding: 0 12px 28px !important;
  }

  body.wither-service-page .siteHeader {
    width: calc(100% - 16px) !important;
    margin-top: 8px !important;
  }

  body.wither-service-page .siteHeader .headerInner {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  body.wither-service-page .siteHeader .nav {
    display: none !important;
  }

  body.wither-service-page .siteHeader .brand {
    gap: 8px !important;
  }

  body.wither-service-page .siteHeader .brandMark .brandLogo {
    width: 40px !important;
    height: 40px !important;
  }

  body.wither-service-page .siteHeader .brand .brandText > strong,
  body.wither-service-page .siteHeader .brand .brandText > strong.brandFlyText {
    font-size: 22px !important;
    line-height: 1 !important;
  }

  body.wither-service-page .siteHeader .brand .brandText > span {
    display: none !important;
  }

  body.wither-service-page .shell > .hero {
    padding: 4px 0 8px !important;
    gap: 8px !important;
  }

  body.wither-service-page .shell .eyebrow,
  body.wither-service-page .shell .pillRow,
  body.wither-service-page .shell .heroMain > p {
    display: none !important;
  }

  body.wither-service-page .shell .heroMain {
    padding: 12px !important;
  }

  body.wither-service-page .shell .hero h1 {
    font-size: 18px !important;
    margin: 0 0 8px !important;
    line-height: 1.25 !important;
  }

  body.wither-service-page .shell .hero h1 br {
    display: none;
  }

  body.wither-service-page .shell .heroJump {
    margin-top: 0 !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }

  body.wither-service-page .shell > .pageGrid {
    gap: 10px !important;
  }

  body.wither-service-page .shell .sectionTitle {
    font-size: 20px !important;
    margin: 0 0 4px !important;
  }

  body.wither-service-page .shell .sectionLead {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  body.wither-service-page .shell .progress {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    margin: 10px 0 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  body.wither-service-page .shell .progressStep {
    flex: 0 0 auto;
    min-width: 0;
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 12px !important;
  }

  body.wither-service-page .shell .progressStep span {
    display: none !important;
  }

  body.wither-service-page .shell .progressStep strong {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }

  body.wither-service-page .shell .progressStep b {
    font-size: 12px !important;
  }

  body.wither-service-page .shell .formStep.active {
    margin-top: 12px !important;
  }

  body.wither-service-page .shell .formSection + .formSection {
    margin-top: 14px !important;
  }

  body.wither-service-page .shell .formSectionHeader {
    margin-bottom: 8px !important;
  }

  body.wither-service-page .shell .formSectionHeader h3 {
    font-size: 16px !important;
  }

  body.wither-service-page .shell .formSectionHeader p {
    display: none !important;
  }

  body.wither-service-page .shell .grid,
  body.wither-service-page .shell .choiceGrid {
    gap: 10px !important;
  }

  body.wither-service-page .shell .field {
    gap: 6px !important;
  }

  body.wither-service-page .shell .field input,
  body.wither-service-page .shell .field select,
  body.wither-service-page .shell .field textarea {
    padding: 12px !important;
  }

  body.wither-service-page .shell .choice span {
    min-height: 0 !important;
    padding: 12px !important;
  }

  body.wither-service-page .shell .summaryPanel {
    margin-top: 10px !important;
  }

  /* 상세(병원·골프 등) 모바일 밀착 */
  body.wither-service-page main > .hero,
  body.wither-service-page section.hero {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }

  body.wither-service-page .wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.wither-service-page .heroImg {
    max-height: 120px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
  }

  body.wither-service-page .heroBox,
  body.wither-service-page .sectionBox,
  body.wither-service-page .panel {
    margin-bottom: 10px !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }

  body.wither-service-page .hero h1 {
    margin: 8px 0 6px !important;
    font-size: clamp(22px, 6vw, 26px) !important;
  }

  body.wither-service-page .heroLabel {
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  body.wither-service-page .detailBody {
    padding: 6px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  body.wither-service-page .detailBody p {
    margin: 0 0 0.5em !important;
  }

  body.wither-service-page .ctaSection {
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  body.wither-service-page .ctaSection p {
    margin: 0 0 10px !important;
    font-size: 13px !important;
  }

  body.wither-service-page .btn {
    min-height: 44px !important;
  }
}

/* ── 상세 페이지: 개요 본문 ↔ 신청 CTA 밀착 ── */
body.wither-service-page main > .hero,
body.wither-service-page section.hero {
  padding-top: 20px !important;
  padding-bottom: 16px !important;
}

body.wither-service-page .heroImg {
  max-height: 200px !important;
  margin-bottom: 12px !important;
}

body.wither-service-page .detailBody {
  padding: 10px 0 0 !important;
}

body.wither-service-page .detailBody p {
  margin: 0 0 0.65em !important;
}

body.wither-service-page .ctaSection {
  margin-top: 14px !important;
  padding-top: 14px !important;
}

body.wither-service-page .heroBox,
body.wither-service-page .sectionBox {
  margin-bottom: 14px !important;
  padding: 20px !important;
}

body.wither-service-page .hero h1 {
  margin: 12px 0 8px !important;
}