/*
 * 성우웰라이프 디자인 시스템 v1 — 컴포넌트 규칙 (2026-11-05 대표님 확정, docs/디자인-시스템.md)
 * 모든 페이지의 마지막 스타일로 싣는다. 값은 tokens.css 의 변수만 쓴다.
 *   버튼 4종(주·보조·어두운 바탕·글자) × 크기 3단계 · 장례상품 남색 한 계열 · 탭 한 모양 · 본문 18px · 상단 카드 라이트 글래스
 * 오래된 덧씌우기 규칙(styles.css)보다 이기도록 선택자 앞에 :root 를 붙인다.
 */

/* ── 좌우 여백: 태블릿 24px · 모바일 16px ── */
@media (max-width:760px) {
  :root { --sw-section-y: 64px; }
  :root .container { width: calc(100% - 48px); } /* 좌우 24px */
}
@media (max-width:560px) {
  :root .container { width: calc(100% - 32px); } /* 좌우 16px */
}

/* ── 버튼 공통: 알약 라운드 · 글자와 아이콘 사이 8px · 줄 간격 1.2 ── */
:root .btn, :root .header-cta, :root .hd-cta, :root .card-button, :root .help-btn, :root .sw-pop__cta, :root .endia-check-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sw-space-2);
  border-radius: var(--sw-radius-pill);
  font-family: var(--sw-font); font-weight: var(--sw-fw-bold); letter-spacing: var(--sw-ls); line-height: var(--sw-lh-tight);
  text-align: center; white-space: normal; word-break: keep-all;
  transition: background var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease), color var(--sw-dur-fast) var(--sw-ease);
}

/* ── 버튼 크기 3단계 (글자는 토큰 단계 안에서, 여백은 8의 배수) ──
 * 대: 섹션의 대표 행동(첫 화면·엔디아 체크·팝업) 높이 56 · 20px · 좌우 32
 * 중: 기본 버튼·카드 버튼 높이 48 · 16px · 좌우 24
 * 소: 머리말 상담 버튼 높이 44 · 14px · 좌우 16 (손가락 기준 최소 44)
 */
:root .btn, :root .card-button, :root .help-btn {
  min-height: 48px; padding: 8px 24px; font-size: var(--sw-fs-16);
}
:root .hero-cta-section .btn, :root .endia-cta .btn, :root .endia-check-btn, :root .sw-pop__cta {
  min-height: 56px; padding: 8px 32px; font-size: var(--sw-fs-20);
}
:root .header-cta, :root .hd-cta {
  min-height: 44px; padding: 0 16px; font-size: var(--sw-fs-14);
}
@media (max-width:560px) {
  :root .hero-cta-section .btn, :root .endia-cta .btn, :root .endia-check-btn, :root .sw-pop__cta { padding: 8px 24px; font-size: var(--sw-fs-16); }
}

/* 1. 주 버튼: 주황 바탕 · 흰 글자 (상담 신청·확인) */
:root .btn-gold, :root .header-cta, :root .hd-cta, :root .help-btn-main, :root .sw-pop__cta, :root .endia-check-btn, :root .sw-hero__btn {
  background: var(--sw-orange-600); border: 1px solid var(--sw-orange-600); color: var(--sw-text-on-dark); box-shadow: none;
}
:root .btn-gold:hover, :root .header-cta:hover, :root .hd-cta:hover, :root .help-btn-main:hover, :root .sw-pop__cta:hover, :root .endia-check-btn:hover {
  background: var(--sw-orange-700); border-color: var(--sw-orange-700);
}

/* 2. 보조 버튼: 흰 바탕 · 남색 테두리 · 남색 글자 (더 알아보기·비교) */
:root .btn-outline, :root .btn-ghost, :root .card-button, :root .help-btn-sub {
  background: var(--sw-surface); border: 1px solid var(--sw-navy-900); color: var(--sw-navy-900);
}
:root .btn-outline:hover, :root .btn-ghost:hover, :root .card-button:hover, :root .help-btn-sub:hover { background: var(--sw-navy-50); }

/* 3. 어두운 바탕 버튼: 흰 바탕 · 남색 글자 */
:root .hero .btn-ghost, :root .hero .btn-outline, :root .endia-cta .btn-ghost, :root .endia-cta .btn-outline {
  background: var(--sw-surface); border-color: var(--sw-surface); color: var(--sw-navy-900);
}

/* 4. 글자 버튼: 바탕 없음 · 밑줄 · 누르기 쉬운 높이 44 */
:root .sub-link-btn, :root .text-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sw-space-1);
  background: none; border: 0; font-size: var(--sw-fs-16); color: var(--sw-text-muted); text-decoration: underline; text-underline-offset: 3px;
}

:root .btn:focus-visible, :root .header-cta:focus-visible, :root .hd-cta:focus-visible, :root .card-button:focus-visible,
:root .help-btn:focus-visible, :root .sw-pop__cta:focus-visible, :root .endia-check-btn:focus-visible {
  outline: 3px solid var(--sw-focus); outline-offset: 2px;
}

/* ── 장례상품 색: 세 상품을 남색 한 계열로. 금색은 제목 밑 짧은 선에만 ── */
:root .subpage.plan-quiet, :root .subpage.plan-family, :root .subpage.plan-classic {
  --plan: var(--sw-navy-900); --plan-dk: var(--sw-navy-950); --plan-tint: var(--sw-navy-50);
}

/* 홈 상품 카드 */
:root .sw-products-v2 .sw-card-body h3::after { background: var(--sw-gold-600); }
:root .sw-products-v2 .sw-card-body .sw-products-tagline,
:root .sw-products-v2 .sw-products-card:nth-child(3) .sw-card-body .sw-products-tagline { color: var(--sw-navy-700); }

/* 가격 3단: 정상가(옅게) → 엔디아 체크(흰 칸) → 최대 혜택(남색 칸) */
:root .sw-products-v2 .fp-step.s1, :root .subpage .fp-step.s1 { background: var(--sw-surface-cream); }
:root .sw-products-v2 .fp-step.s2, :root .subpage .fp-step.s2,
:root .subpage[class*="plan-"] .sub-price-card .fp-step.s2 { background: var(--sw-surface); box-shadow: inset 0 0 0 1px var(--sw-line); }
:root .sw-products-v2 .fp-step .lb em, :root .subpage .fp-step .lb em,
:root .subpage[class*="plan-"] .sub-price-card .fp-step.s2 .lb em { color: var(--sw-navy-700); }
/* 최대 혜택가: 강조색은 버튼과 핵심 숫자에만 → 옅은 남색 칸에 주황 숫자 */
:root .sw-products-v2 .fp-step.s3, :root .subpage .fp-step.s3,
:root .subpage[class*="plan-"] .sub-price-card .fp-step.s3 { background: var(--sw-navy-50); }
:root .sw-products-v2 .fp-step.s3 .lb, :root .subpage .fp-step.s3 .lb { color: var(--sw-navy-900); }
:root .sw-products-v2 .fp-step.s3 .lb em, :root .subpage .fp-step.s3 .lb em { color: var(--sw-navy-700); }
:root .sw-products-v2 .fp-step.s3 .vl, :root .subpage .fp-step.s3 .vl { color: var(--sw-orange-600); }

/* 카드 세 장의 제목 높이를 맞춘다: 내용은 위에서부터, 가격 칸과 버튼은 아래에 붙인다 */
:root .sw-products-v2 .sw-card-body { justify-content: flex-start; }
:root .sw-products-v2 .sw-card-body .fp-price { margin-top: auto; }

/* 카드 "자세히 보기": 보조 버튼 + 남색 화살표 */
:root .sw-products-v2 .sw-products-card:nth-child(n) .sw-card-body .card-button {
  min-height: 48px; height: auto; border: 1px solid var(--sw-navy-900); border-radius: var(--sw-radius-pill);
  background: var(--sw-surface); color: var(--sw-navy-900); font-size: var(--sw-fs-16);
}
:root .sw-products-v2 .sw-products-card:nth-child(n) .sw-card-body .card-button:hover { background: var(--sw-navy-50); border-color: var(--sw-navy-900); }
:root .sw-products-v2 .sw-products-card:nth-child(n) .sw-card-body .card-button span {
  border-radius: var(--sw-radius-circle); background: var(--sw-navy-900); color: var(--sw-text-on-dark);
}

/* 상품 페이지: 품목 금액·합계·비교 카드 */
:root .subpage .fp-amt, :root .subpage .cmp-price, :root .subpage .cmp-total b { color: var(--sw-navy-900); }
:root .subpage .fp-total { background: var(--sw-navy-50); color: var(--sw-navy-900); }
:root .subpage .cmp-bar i { background: var(--sw-navy-900); }
:root .subpage .cmp-card::before { background: var(--sw-gold-600); }
:root .subpage .cmp-card:hover { border-color: var(--sw-line-strong); box-shadow: var(--sw-shadow-md); }
:root .subpage .cmp-card:hover .cmp-no { color: var(--sw-navy-50); }
/* 상품 합계: 세 상품 모두 같은 남색 */
:root .subpage[class*="plan-"] .cmp-total { background: var(--sw-navy-900); }

/* 상품 페이지 합계 띠(남색) 위 금액은 핵심 숫자라 주황 · 가격 카드의 상담 버튼은 메인 버튼이라 주황 */
:root .subpage[class*="plan-"] .cmp-total b { color: var(--sw-orange-600); }
:root .subpage[class*="plan-"] .cmp-total { color: var(--sw-text-on-dark); }
:root .subpage[class*="plan-"] .sub-price-card .btn-gold { background: var(--sw-orange-600); border-color: var(--sw-orange-600); color: var(--sw-text-on-dark); }
:root .subpage[class*="plan-"] .sub-price-card .btn-gold:hover { background: var(--sw-orange-700); border-color: var(--sw-orange-700); }

/* ── 탭(상품·회사소개·엔디아): 상품마다 다르던 색(갈색·파랑·남색·주황)을 한 모양으로 ──
 * 선택 안 됨: 흰 바탕 · 남색 글자 · 옅은 선  /  선택됨: 남색 바탕 · 흰 글자  (높이 48 · 18px) */
:root .subpage .sub-tabs a, :root .subpage .sub-tabs a[class*="t-"], :root .subpage .about-tabs .sub-tabs a {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 16px;
  background: var(--sw-surface) !important; color: var(--sw-navy-700); opacity: 1;
  border: 1px solid var(--sw-line-strong); border-radius: var(--sw-radius-pill); box-shadow: none;
  font: 600 var(--sw-fs-18)/1.2 var(--sw-font); letter-spacing: var(--sw-ls); transform: none;
}
:root .subpage .sub-tabs a:hover, :root .subpage .about-tabs .sub-tabs a:hover {
  background: var(--sw-navy-50) !important; color: var(--sw-navy-900); border-color: var(--sw-navy-900); transform: none;
}
:root .subpage .sub-tabs a.active, :root .subpage .sub-tabs a[class*="t-"].active, :root .subpage .about-tabs .sub-tabs a.active {
  background: var(--sw-navy-900) !important; color: var(--sw-text-on-dark); border: 1px solid var(--sw-navy-900); font-weight: 700;
}
:root .subpage .sub-tabs a.active::after { display: none; }
@media (max-width:560px) {
  :root .subpage .sub-tabs a, :root .subpage .sub-tabs a[class*="t-"] { min-height: 44px; padding: 8px; font-size: var(--sw-fs-14); }
}
:root .endia-subnav a.active { border-bottom-color: var(--sw-navy-900); color: var(--sw-navy-900); }

/* ── 본문 문단은 18px (모바일 16px). 14px 은 본문에 쓰지 않는다 ── */
:root .faq details p, :root .after-grid p, :root .hero-description, :root .sw-products-v2 .sw-products-lead,
:root .sw-products-v2 .sw-products-card:nth-child(n) .sw-card-body .sw-products-description,
:root .benefits-intro > p:last-child, :root .subpage .sub-steps p, :root .subpage .sub-faq details p, :root .subpage .sub-values p,
:root .subpage .sub-lead, :root .subpage .sub-text, :root .sub-intro-p, :root .endia-card-desc, :root .net-band-desc, :root .net-desc,
:root .net-value p, :root .consult-help .help-lead, :root .endia-act-steps p, :root .about-values-grid p, :root .sw-faq__a p {
  font-size: var(--sw-fs-18); line-height: var(--sw-lh-body);
}
@media (max-width:760px) {
  :root .faq details p, :root .after-grid p, :root .hero-description, :root .sw-products-v2 .sw-products-lead,
  :root .sw-products-v2 .sw-products-card:nth-child(n) .sw-card-body .sw-products-description,
  :root .benefits-intro > p:last-child, :root .subpage .sub-steps p, :root .subpage .sub-faq details p, :root .subpage .sub-values p,
  :root .subpage .sub-lead, :root .subpage .sub-text, :root .sub-intro-p, :root .endia-card-desc, :root .net-band-desc, :root .net-desc,
  :root .net-value p, :root .consult-help .help-lead, :root .endia-act-steps p, :root .about-values-grid p, :root .sw-faq__a p {
    font-size: var(--sw-fs-16);
  }
}

/* 상품 아래 신뢰 문구 설명도 본문이라 14 → 16 */
:root .sw-products-assure span { font-size: var(--sw-fs-16); }

/* 머리말 상담 버튼은 원래대로 1100px 이하에서 숨긴다(메뉴 안 버튼과 떠 있는 버튼이 대신한다) */
@media (max-width:1100px) { :root .header-cta { display: none; } }

/* ── 페이지 상단 카드: 라이트 글래스(흰 유리 · 남색 글자). 회사소개·장례 절차·엔디아·상품 페이지 공통 (2026-11-05 대표님 선택 A) ── */
:root .subpage .sub-hero .sub-hero-inner.sub-hero-inner, :root .subpage[class*="plan-"] .sub-hero .sub-hero-inner.sub-hero-inner {
  background: rgba(255,255,255,.66); background-image: none;
  -webkit-backdrop-filter: blur(32px) saturate(1.1) brightness(1.4); backdrop-filter: blur(32px) saturate(1.1) brightness(1.4); /* 어두운 사진 위에서도 밝게 */
  border: 1px solid rgba(255,255,255,.75); box-shadow: 0 16px 48px rgba(16,38,63,.14);
}
:root .subpage .sub-hero .sub-hero-inner h1, :root .subpage .sub-hero .sub-hero-inner .sub-lead,
:root .subpage .sub-hero .sub-hero-inner .eyebrow, :root .subpage .sub-hero .sub-hero-inner .sub-crumb,
:root .subpage .sub-hero .sub-hero-inner .sub-crumb a, :root .subpage .sub-hero .sub-hero-inner .hero-promo { text-shadow: none; }
:root .subpage .sub-hero .sub-hero-inner h1, :root .subpage .sub-hero .sub-hero-inner .hero-promo { color: var(--sw-navy-900); }
:root .subpage .sub-hero .sub-hero-inner h1 small, :root .subpage .sub-hero .sub-hero-inner .sub-lead,
:root .subpage .sub-hero .sub-hero-inner .sub-crumb, :root .subpage .sub-hero .sub-hero-inner .sub-crumb a { color: var(--sw-navy-700); opacity: 1; }
:root .subpage .sub-hero .sub-hero-inner .eyebrow, :root .subpage[class*="plan-"] .sub-hero .sub-hero-inner .eyebrow { color: var(--sw-navy-700); opacity: 1; } /* 금색은 사진 위에서 묻혀 남색 */

/* ── 겹침: 팝업이 떠 있는 동안 오른쪽 떠 있는 버튼(상담·전화·카톡)을 숨긴다 (PRD F12 D5) ── */
html.swc-lock .sw-float, html.sw-pop-open .sw-float { visibility: hidden; }

/* ── 모바일 겹침·누름 영역 (PRD F12 D8, 2026-11-06) ── */
@media (max-width:760px) {
  /* 장례 절차: 단계 탭이 머리말(모바일 70px) 밑으로 들어가지 않게 머리말 아래에 붙인다 */
  :root .sg .rail { top: 70px; }
}
@media (max-width:1100px) {
  /* 장례 절차: 해시태그는 한 줄 6개 고정 대신 줄을 바꿔 카드 안에 둔다 (태블릿 폭에서도 잘렸다) */
  :root .sg .service-chips { display: flex; flex-wrap: wrap; }
  :root .sg .service-chips li:nth-child(6) { margin-right: 0; }
}
/* 누름 영역은 44px 이상 (손가락 기준) */
:root .menu-toggle { min-width: 44px; min-height: 44px; place-content: center; }
:root .brand { min-height: 44px; }
:root .subpage .sub-crumb a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
/* 경로 표시: 44px 누름 영역과 › · 현재 페이지 글자를 한 줄 가운데에 (PRD F14 A1) */
:root .subpage .sub-crumb { align-items: center; flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
:root .ov-h a { display: flex; align-items: center; justify-content: center; min-height: 44px; }
:root .swc-x { width: 44px; height: 44px; }
:root .swc-more, :root .swc-rt-close { min-height: 44px; }
/* 모양은 그대로 두고 누르는 범위만 넓힌다 (투명한 덧판) */
:root .sw-float__handle, :root .sw-hero__nav { position: relative; }
:root .sw-float__handle::after { content: ""; position: absolute; top: 0; bottom: 0; left: -18px; right: 0; }
:root .sw-hero__nav::after { content: ""; position: absolute; inset: -4px; }
:root .sw-hero__dot::before { content: ""; position: absolute; inset: -4px -7px; }

/* 입장 팝업 "오늘 하루 보지 않기": 체크박스와 글자를 함께 누르는 라벨을 44px 로 */
:root .sw-pop__today { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* 홈 혜택 섹션 (모바일): 주황 금액 칸과 대상 목록을 나란히 두면 목록이 한 단어씩 꺾인다 → 위아래로 쌓는다 */
@media (max-width:560px) {
  :root .benefit-panel { grid-template-columns: 1fr; }
  :root .benefit-amount { padding: 24px 16px; }
  :root .benefit-groups { padding: 24px 16px; }
  :root .benefit-groups > div { font-size: var(--sw-fs-16); }
}

/* 약관·개인정보처리방침 표 (모바일·태블릿): 칸이 좁아 한 단어씩 꺾이지 않게 칸 너비를 지키고 표 안에서 옆으로 넘긴다 */
@media (max-width:760px) {
  :root .subpage .sub-narrow { width: calc(100% - 32px); }
  :root .subpage .sub-prose th, :root .subpage .sub-prose td { min-width: 144px; word-break: keep-all; }
}