/* =====================================================================
   PATHFINDER · APPLE DESIGN SYSTEM  —  apple.css
   ---------------------------------------------------------------------
   전 페이지 공통 오버라이드 레이어.
   반드시 각 페이지의 마지막 스타일(인라인 <style> 뒤)로 로드할 것.

   원칙 (DESIGNapple 기준)
   1. 액센트는 Action Blue #0066cc 단 하나. 두 번째 브랜드 컬러 없음.
   2. 그림자는 제품/인물 사진에만. 카드·버튼·텍스트에는 절대 없음.
   3. 섹션 구분은 선이 아니라 '면의 색 변화'(화이트 ↔ 파치먼트 ↔ 근흑).
   4. 헤드라인은 음수 자간(-0.02em), 본문은 17px.
   5. 필(pill) 라운드는 '액션'의 신호. 카드·타일에는 쓰지 않음.
   6. 장식 그라디언트 금지. 분위기는 사진이 만든다.
   7. 버튼 눌림 = transform: scale(0.95). 시스템 전역 마이크로 인터랙션.

   버전: v1.0 · 2026-08-14
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. 폰트 — 라틴/숫자는 SF Pro(애플 기기 자동), 한글은 Pretendard
   --------------------------------------------------------------------- */
:root,
html:root {
  --ap-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
             "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
             system-ui, "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* ---- Apple 컬러 토큰 ---- */
  --ap-blue:        #0066cc;   /* Action Blue — 유일한 액센트 */
  --ap-blue-focus:  #0071e3;   /* 포커스 링 */
  --ap-blue-ondark: #2997ff;   /* 다크 타일 위 링크 */
  --ap-ink:         #1d1d1f;   /* 근흑 잉크 — 모든 헤드라인·본문 */
  --ap-ink-80:      #333333;
  --ap-ink-sub:     #6e6e73;   /* 보조 텍스트 */
  --ap-ink-48:      #86868b;   /* 미세 텍스트·비활성 */
  --ap-canvas:      #ffffff;
  --ap-parchment:   #f5f5f7;   /* 애플 오프화이트 */
  --ap-pearl:       #fafafc;
  --ap-tile-1:      #272729;
  --ap-tile-2:      #2a2a2c;
  --ap-tile-3:      #252527;
  --ap-black:       #000000;
  --ap-hairline:    #e0e0e0;
  --ap-divider:     #f0f0f0;
  --ap-ondark:      #ffffff;
  --ap-ondark-sub:  #cccccc;

  /* ---- 라운드 ---- */
  --ap-r-none: 0px;
  --ap-r-sm:   8px;
  --ap-r-md:   11px;
  --ap-r-lg:   18px;
  --ap-r-pill: 980px;

  /* ---- 간격 ---- */
  --ap-s-xxs: 4px;  --ap-s-xs: 8px;  --ap-s-sm: 12px; --ap-s-md: 17px;
  --ap-s-lg: 24px;  --ap-s-xl: 32px; --ap-s-xxl: 48px; --ap-s-section: 80px;

  /* ---- 유일한 그림자 (사진 전용) ---- */
  --ap-shadow-photo: rgba(0,0,0,0.22) 3px 5px 30px 0;
}

/* ---------------------------------------------------------------------
   1. 레거시 토큰 재정의 — 기존 페이지가 쓰던 변수를 애플 값으로 갈아끼움
      (마스터카드 시스템 · 네이비/테라코타 시스템 모두 커버)
   --------------------------------------------------------------------- */
:root,
html:root {
  /* 마스터카드 계열 (index.html · LP · cases) */
  --bg:             var(--ap-parchment);
  --white:          var(--ap-canvas);
  --dark:           var(--ap-ink);
  --dark-sub:       var(--ap-tile-1);
  --text:           var(--ap-ink);
  --text-sub:       var(--ap-ink-sub);
  --text-light:     var(--ap-ink-48);
  --accent:         var(--ap-blue);
  --accent-hover:   var(--ap-blue-focus);
  --accent-bg:      rgba(0,102,204,0.08);
  --line:           var(--ap-hairline);
  --line-light:     var(--ap-divider);
  --heading-green:  var(--ap-ink);
  --band:           var(--ap-tile-1);
  --band-text:      var(--ap-ondark);
  --band-text-sub:  var(--ap-ondark-sub);
  --signal:         var(--ap-blue);
  --signal-light:   var(--ap-blue-focus);
  --slate:          var(--ap-ink-48);
  --sans:           var(--ap-sans);
  --en:             var(--ap-sans);
  --serif:          var(--ap-sans);
  --max-w:          1200px;
  --section-py:     110px;
  --section-py-mobile: 64px;

  /* 네이비/테라코타 계열 (style.css · privacy · chat) */
  --navy:           var(--ap-ink);
  --navy-dark:      var(--ap-tile-1);
  --navy-light:     var(--ap-ink-sub);
  --terracotta:     var(--ap-blue);
  --terracotta-dark: var(--ap-blue-focus);
  --terracotta-light: var(--ap-blue-ondark);
  --cream:          var(--ap-parchment);
  --gold:           var(--ap-blue);
  --green:          var(--ap-blue);
  --light-blue:     rgba(0,102,204,0.08);
  --text-dark:      var(--ap-ink);
  --border:         var(--ap-hairline);
  --bg-gray:        var(--ap-parchment);
  --radius-sm:      var(--ap-r-sm);
  --radius-md:      var(--ap-r-md);
  --radius-lg:      var(--ap-r-lg);
  --radius-full:    var(--ap-r-pill);
  --shadow-sm:      none;
  --shadow-md:      none;
  --shadow-lg:      none;
  --font-family:    var(--ap-sans);

  /* 진단(빠른계산) 계열 — revolving-check.css */
  --rc-ink:         var(--ap-ink);
  --rc-signal:      var(--ap-blue);
  --rc-bg:          var(--ap-parchment);
  --ink:            var(--ap-ink);
  --paper:          var(--ap-canvas);
  --taupe:          var(--ap-ink-sub);
  --rose:           var(--ap-blue);
  --ochre:          var(--ap-blue);
  --sage:           var(--ap-blue);
}

@media (max-width: 833px) {
  :root, html:root { --section-py: var(--section-py-mobile); }
}

/* ---------------------------------------------------------------------
   2. 베이스 — 타이포 리듬
   --------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ap-sans) !important;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.01em;
  color: var(--ap-ink);
  background: var(--ap-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 세리프 전량 제거 — 애플 시스템에 세리프는 없다 */
h1, h2, h3, h4, h5, h6,
.section__title, .hero__title, .px-h1, .px-result-head,
.rc-h1, .rc-q-title, .rc-result-head, .rc-explainer h3,
.eyebrow, .btn, .nav-pill__logo, .footer__wordmark {
  font-family: var(--ap-sans) !important;
}

h1, h2, h3, h4 {
  color: var(--ap-ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
h1 { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.07; }
h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; }
h3 { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.14; letter-spacing: -0.015em; }
h4 { font-size: 21px; line-height: 1.19; letter-spacing: -0.015em; }

p  { font-size: 17px; line-height: 1.47; letter-spacing: -0.01em; }
a  { color: inherit; }

/* 숫자는 SF Pro의 tabular 사용 — 금액 표가 흔들리지 않게 */
.num, .money, .amount, table td, table th,
.hero__stat-value, .rc-amount, .money-vs .mv-n, .cost-nums .n b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------
   3. 그림자 전면 제거 — 사진에만 허용
   --------------------------------------------------------------------- */
*:not(.ap-photo):not(.ap-photo *) {
  text-shadow: none;
}
.card, .service-card, .pricing-card, .review-card, .rc-card, .px-card,
.store-card, .faq-item, .contact-form, .form-input, .form-select,
.form-textarea, .btn, .header, .header--scrolled, .cta-content,
.ceo-box, .process-step, .reviews-nav__btn, .chatbot-window,
.chatbot-toggle, .rc-q-card, .rc-result-card, .rc-brand-header {
  box-shadow: none !important;
}

/* 사진만 유일한 그림자를 갖는다 */
.ap-photo,
.hero__product-shot,
.why__image img,
.review-card__avatar img {
  box-shadow: var(--ap-shadow-photo);
}

/* 장식 그라디언트 제거 */
.section--gradient, .hero__gradient, .cta-section::before {
  background-image: none !important;
}

/* ---------------------------------------------------------------------
   4. 버튼 — 필(pill) 문법 단 두 가지
   --------------------------------------------------------------------- */
.btn,
button.btn,
a.btn,
.rc-btn,
.px-btn,
.cta-btn,
.btn-primary,
.btn-secondary {
  font-family: var(--ap-sans) !important;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  border-radius: var(--ap-r-pill) !important;
  padding: 11px 22px;
  border-width: 1px;
  transition: background-color .2s ease, color .2s ease,
              border-color .2s ease, transform .12s ease, opacity .2s ease;
}
.btn:active, .rc-btn:active, .px-btn:active,
.btn-primary:active, .btn-secondary:active { transform: scale(0.95); }

.btn:focus-visible, .rc-btn:focus-visible, .px-btn:focus-visible,
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ap-blue-focus);
  outline-offset: 2px;
}

/* 1차 액션 — 파란 필 */
.btn--primary, .btn-primary, .rc-btn--primary, .px-btn--primary,
.btn--cta, .cta-btn--primary {
  background: var(--ap-blue) !important;
  color: #fff !important;
  border: 1px solid var(--ap-blue) !important;
}
.btn--primary:hover, .btn-primary:hover, .rc-btn--primary:hover,
.px-btn--primary:hover, .btn--cta:hover {
  background: var(--ap-blue-focus) !important;
  border-color: var(--ap-blue-focus) !important;
}

/* 2차 액션 — 고스트 필 */
.btn--outline, .btn-secondary, .rc-btn--ghost, .px-btn--ghost {
  background: transparent !important;
  color: var(--ap-blue) !important;
  border: 1px solid var(--ap-blue) !important;
}
.btn--outline:hover, .btn-secondary:hover {
  background: rgba(0,102,204,0.06) !important;
  color: var(--ap-blue) !important;
}

/* 다크 타일 위 2차 액션 */
.btn--outline-light {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
}
.btn--outline-light:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: #fff !important;
}

.btn--ghost { color: var(--ap-blue) !important; background: transparent !important; border-color: transparent !important; }
.btn--lg { padding: 14px 28px; font-size: 18px; font-weight: 300; }

/* 텍스트 링크 */
a.text-link, .link, .rc-link, .faq-answer a, .footer__links a {
  color: var(--ap-blue);
}
.section--dark a, .band a, .footer--dark a,
.section--dark .link, .cta-section a:not(.btn) {
  color: var(--ap-blue-ondark);
}

/* ---------------------------------------------------------------------
   5. 섹션 — 풀블리드 타일 교차 리듬
   --------------------------------------------------------------------- */
.section {
  padding: var(--section-py) 0;
  border: 0;
  border-radius: 0;
}
.section--cream, .section--parchment {
  background: var(--ap-parchment) !important;
  color: var(--ap-ink);
}
.section--dark, .band {
  background: var(--ap-tile-1) !important;
  color: var(--ap-ondark);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark .section__title { color: var(--ap-ondark) !important; }
.section--dark p, .section--dark .section__subtitle { color: var(--ap-ondark-sub) !important; }

/* 섹션 사이 구분선·장식 스트립 제거 — 면의 색 변화가 곧 구분이다 */
.section-divider,
.hero-transition-strip {
  display: none !important;
}

/* 아이브로우 라벨 */
.section__label, .eyebrow, .rc-eyebrow {
  font-family: var(--ap-sans) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ap-blue) !important;
  margin-bottom: 12px;
}
.section__label::before { content: none !important; }

.section__title {
  font-weight: 600 !important;
  font-size: clamp(28px, 3.6vw, 40px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ap-ink);
  margin-bottom: 16px;
}
.section__subtitle {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--ap-ink-sub);
  max-width: 640px;
}

/* ---------------------------------------------------------------------
   6. 헤더 — 프로스티드 글래스 서브내비
   --------------------------------------------------------------------- */
.header {
  border-bottom: 1px solid transparent;
  box-shadow: none !important;
}
.header--scrolled {
  background: rgba(245,245,247,0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
}
.header__nav a {
  font-size: 14px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.header__nav a::after { background: var(--ap-blue) !important; }
.header--scrolled .header__nav a { color: var(--ap-ink); }
.header--scrolled .header__nav a:hover,
.header--scrolled .header__nav a.active { color: var(--ap-blue); }
.header__cta-btn {
  background: var(--ap-blue) !important;
  color: #fff !important;
  border-radius: var(--ap-r-pill) !important;
  border: 0 !important;
  font-size: 14px;
  padding: 8px 16px;
}
.header__logo .accent,
.footer__logo .accent { color: var(--ap-blue) !important; }

/* ---------------------------------------------------------------------
   7. 카드 — 하드라인 1px, 라운드 18px, 그림자 없음
   --------------------------------------------------------------------- */
.service-card, .pricing-card, .review-card, .rc-card, .px-card,
.faq-item, .ceo-box, .process-step, .case-card {
  background: var(--ap-canvas);
  border: 1px solid var(--ap-hairline) !important;
  border-radius: var(--ap-r-lg) !important;
  box-shadow: none !important;
  transition: border-color .2s ease, transform .12s ease;
}
.service-card:hover, .pricing-card:hover, .review-card:hover, .case-card:hover {
  border-color: var(--ap-ink-48) !important;
  transform: none !important;
  box-shadow: none !important;
}
.section--cream .service-card,
.section--cream .pricing-card,
.section--cream .review-card { background: var(--ap-canvas); }

.service-card__tag, .review-card__tag, .pricing-card__sub {
  color: var(--ap-blue) !important;
  background: rgba(0,102,204,0.08) !important;
  border-radius: var(--ap-r-pill) !important;
  border: 0 !important;
  font-size: 14px;
  font-weight: 600;
}

/* 리스트 불릿 → 애플식 미니멀 */
.service-card__details li::before,
.pricing-card__items li::before {
  color: var(--ap-blue) !important;
}

/* 탭 */
.services-tab, .faq-tab {
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ap-ink-sub);
  border-radius: 0 !important;
}
.services-tab.active, .faq-tab.active { color: var(--ap-ink) !important; }
.services-tab.active::after, .faq-tab.active::after,
.services-tab::after, .faq-tab::after { background: var(--ap-blue) !important; }

/* 숫자 뱃지 */
.process-step__num, .why__item-num {
  color: var(--ap-blue) !important;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   8. 폼 — 필 인풋 + 파란 포커스
   --------------------------------------------------------------------- */
.form-input, .form-select, .form-textarea,
input[type="text"], input[type="tel"], input[type="email"],
input[type="number"], select, textarea {
  font-family: var(--ap-sans) !important;
  font-size: 17px;
  color: var(--ap-ink);
  background: var(--ap-canvas);
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-radius: var(--ap-r-md) !important;
  padding: 12px 16px;
  box-shadow: none !important;
  transition: border-color .2s ease;
}
.form-input:focus, .form-select:focus, .form-textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--ap-blue-focus) !important;
  outline: 2px solid rgba(0,113,227,0.35);
  outline-offset: 0;
}
input[type="tel"], input[type="search"] { border-radius: var(--ap-r-pill) !important; padding: 12px 20px; }
.form-label { font-size: 14px; font-weight: 600; color: var(--ap-ink); letter-spacing: -0.01em; }
.form-label__opt { color: var(--ap-ink-48); font-weight: 400; }

/* ---------------------------------------------------------------------
   9. 히어로 — 사진 우선, 타이포는 타이트하게
   --------------------------------------------------------------------- */
.hero__title {
  font-family: var(--ap-sans) !important;
  font-weight: 600 !important;
  font-size: clamp(34px, 6vw, 56px) !important;
  line-height: 1.07 !important;
  letter-spacing: -0.022em !important;
  text-shadow: none !important;
}
.hero__sub {
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 400;
  line-height: 1.21;
  letter-spacing: -0.01em;
  text-shadow: none !important;
}
.hero__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.28) 45%, rgba(0,0,0,0.55) 100%) !important;
}
.hero__stat-value {
  font-family: var(--ap-sans) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero__stat-label { font-size: 14px; letter-spacing: -0.01em; }
.hero__dot.active { background: #fff !important; }

/* ---------------------------------------------------------------------
   10. CTA 밴드 · 푸터
   --------------------------------------------------------------------- */
.cta-section {
  background: var(--ap-tile-1) !important;
  color: var(--ap-ondark);
}
.cta-content__title {
  font-family: var(--ap-sans) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.cta-content__sub { color: var(--ap-ondark-sub); font-size: 21px; }
.cta-contact-item { color: #fff; }
.cta-contact-item svg { color: var(--ap-blue-ondark); }

.footer {
  background: var(--ap-parchment) !important;
  color: var(--ap-ink-80) !important;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 64px 0;
}
.footer__links a { font-size: 14px; color: var(--ap-ink-80) !important; }
.footer__links a:hover { color: var(--ap-blue) !important; }
.footer__copy, .footer small, .disclaimer-block {
  font-size: 12px !important;
  line-height: 1.5;
  color: var(--ap-ink-48) !important;
}
.disclaimer-block { background: var(--ap-parchment) !important; }

/* ---------------------------------------------------------------------
   11. 모바일 스티키 바 — 프로스티드 플로팅 바
   --------------------------------------------------------------------- */
.mobile-sticky, .sticky-bar, .rc-sticky, .px-sticky {
  background: rgba(245,245,247,0.80) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
}
.mobile-sticky .btn, .sticky-bar .btn { border-radius: var(--ap-r-pill) !important; }

/* ---------------------------------------------------------------------
   12. 챗봇 위젯
   --------------------------------------------------------------------- */
.chatbot-toggle, #chatbot-toggle {
  background: var(--ap-blue) !important;
  box-shadow: none !important;
  border: 0 !important;
}
.chatbot-window, #chatbot-window {
  border-radius: var(--ap-r-lg) !important;
  border: 1px solid var(--ap-hairline) !important;
  box-shadow: none !important;
  font-family: var(--ap-sans) !important;
}
.chatbot-header, .chatbot__header {
  background: var(--ap-tile-1) !important;
  color: #fff !important;
  border-radius: var(--ap-r-lg) var(--ap-r-lg) 0 0 !important;
}
.chatbot-message--bot, .msg--bot, .chat-bubble--bot {
  background: var(--ap-parchment) !important;
  color: var(--ap-ink) !important;
  border-radius: var(--ap-r-lg) !important;
}
.chatbot-message--user, .msg--user, .chat-bubble--user {
  background: var(--ap-blue) !important;
  color: #fff !important;
  border-radius: var(--ap-r-lg) !important;
}
.chatbot-input, .chatbot__input input {
  border-radius: var(--ap-r-pill) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  font-family: var(--ap-sans) !important;
}
.chatbot-send, .chatbot__send { background: var(--ap-blue) !important; color: #fff !important; }
.chip, .quick-reply, .chatbot-chip {
  border-radius: var(--ap-r-pill) !important;
  border: 1px solid var(--ap-blue) !important;
  color: var(--ap-blue) !important;
  background: transparent !important;
  font-size: 14px;
}

/* ---------------------------------------------------------------------
   13. 빠른계산(진단) · 결과 페이지
   --------------------------------------------------------------------- */
.rc-brand-header, .rc-header {
  background: rgba(245,245,247,0.80) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
}
.rc-progress, .rc-progress__bar, .progress-bar__fill {
  background: var(--ap-blue) !important;
}
.rc-q-card, .rc-card, .rc-result-card {
  background: var(--ap-canvas) !important;
  border: 1px solid var(--ap-hairline) !important;
  border-radius: var(--ap-r-lg) !important;
  box-shadow: none !important;
}
.rc-option, .rc-choice, .option-item {
  border: 1px solid var(--ap-hairline) !important;
  border-radius: var(--ap-r-md) !important;
  background: var(--ap-canvas) !important;
  transition: border-color .2s ease, background-color .2s ease;
}
.rc-option:hover, .rc-choice:hover { border-color: var(--ap-blue) !important; }
.rc-option.selected, .rc-choice.is-selected, .option-item.selected,
.rc-option[aria-checked="true"] {
  border: 2px solid var(--ap-blue-focus) !important;
  background: rgba(0,102,204,0.05) !important;
}
.rc-radio, .rc-checkbox { accent-color: var(--ap-blue); }
.rc-option.selected .rc-radio,
.rc-choice.is-selected .rc-radio { background: var(--ap-blue) !important; border-color: var(--ap-blue) !important; }

.rc-h1, .rc-q-title {
  font-family: var(--ap-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--ap-ink) !important;
}
.rc-h1 .num, .rc-h1 em, .rc-num { color: var(--ap-blue) !important; font-style: normal; }
.rc-chip, .rc-badge {
  border-radius: var(--ap-r-pill) !important;
  background: rgba(0,102,204,0.08) !important;
  color: var(--ap-blue) !important;
  border: 0 !important;
  font-size: 14px;
  font-weight: 600;
}
.rc-brand-divider { border-color: var(--ap-divider) !important; background: none !important; }
.rc-explainer, .rc-empathy {
  background: var(--ap-parchment) !important;
  border: 0 !important;
  border-radius: var(--ap-r-lg) !important;
}

/* 정밀진단 */
.px-h1, .px-result-head {
  font-family: var(--ap-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--ap-ink) !important;
}
.px-card, .px-box {
  border: 1px solid var(--ap-hairline) !important;
  border-radius: var(--ap-r-lg) !important;
  box-shadow: none !important;
  background: var(--ap-canvas) !important;
}

/* ---------------------------------------------------------------------
   14. 게이트 · 쿠폰 · 콜백 모달
   --------------------------------------------------------------------- */
.gate-overlay, .coupon-overlay, .modal-overlay, .pf-modal__backdrop {
  background: rgba(0,0,0,0.48) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.gate-modal, .coupon-modal, .modal-box, .pf-modal {
  background: var(--ap-canvas) !important;
  border-radius: var(--ap-r-lg) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--ap-sans) !important;
}
.gate-modal h2, .coupon-modal h2, .pf-modal h2 {
  font-weight: 600; letter-spacing: -0.02em; color: var(--ap-ink);
}
.gate-lock, .locked-blur { filter: blur(8px); }

/* ---------------------------------------------------------------------
   15. 사례(cases) 페이지
   --------------------------------------------------------------------- */
.case-card__tag, .case-tag {
  border-radius: var(--ap-r-pill) !important;
  background: rgba(0,102,204,0.08) !important;
  color: var(--ap-blue) !important;
  border: 0 !important;
}
.case-card__amount, .case-amount {
  color: var(--ap-ink) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------
   16. 반응형 — 애플 브레이크포인트
   --------------------------------------------------------------------- */
@media (max-width: 1068px) {
  .section { padding: 88px 0; }
}
@media (max-width: 833px) {
  .section { padding: 64px 0; }
  .section__subtitle, .cta-content__sub { font-size: 19px; }
  body { font-size: 17px; }
}
@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .container { padding: 0 20px; }
  .btn { width: 100%; }
  .btn--lg { padding: 14px 24px; font-size: 17px; }
}

/* 터치 타겟 44px 하한 */
@media (pointer: coarse) {
  .btn, .rc-btn, .px-btn, .header__cta-btn, .chip, .quick-reply,
  a.nav-link, .services-tab, .faq-tab { min-height: 44px; }
}

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

/* ---------------------------------------------------------------------
   17. 유틸리티 — 새 애플 타일을 만들 때 쓰는 클래스
   --------------------------------------------------------------------- */
.ap-tile          { padding: 80px 0; text-align: center; }
.ap-tile--light   { background: var(--ap-canvas); color: var(--ap-ink); }
.ap-tile--parch   { background: var(--ap-parchment); color: var(--ap-ink); }
.ap-tile--dark    { background: var(--ap-tile-1); color: var(--ap-ondark); }
.ap-tile--dark-2  { background: var(--ap-tile-2); color: var(--ap-ondark); }
.ap-tile--dark-3  { background: var(--ap-tile-3); color: var(--ap-ondark); }
.ap-tile__title   { font-size: clamp(28px,3.6vw,40px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 8px; }
.ap-tile__lead    { font-size: clamp(19px,2vw,28px); font-weight: 400; line-height: 1.21; letter-spacing: -0.01em; color: var(--ap-ink-sub); margin: 0 0 20px; }
.ap-tile--dark .ap-tile__lead { color: var(--ap-ondark-sub); }
.ap-tile__cta     { display: inline-flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.ap-tile__cta a   { font-size: 17px; color: var(--ap-blue); }
.ap-tile--dark .ap-tile__cta a { color: var(--ap-blue-ondark); }
.ap-hairline      { border: 0; border-top: 1px solid var(--ap-hairline); margin: 0; }

/* =====================================================================
   18. 페이지별 정밀 패치
   ===================================================================== */

/* ── 18-1. 공통 · 섹션 헤더 센터 정렬 (애플 타일 문법) ───────────────── */
.section > .container > .section__label,
.section > .container > .section__title,
.section > .container > .section__subtitle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section > .container > .section__subtitle { max-width: 680px; }

/* 형광펜·하이라이트 마커 전량 제거 — 애플은 강조에 색면을 쓰지 않는다 */
.why__title-highlight span,
.hl, mark, .marker, .highlight-text {
  background: none !important;
  background-image: none !important;
  color: inherit !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.section__title mark, h1 mark, h2 mark { color: var(--ap-blue) !important; }

/* 강조 낱말은 색면이 아니라 파란 글자로 */
.section__title em, .section__title strong,
.hero__title em, .hero__title strong { font-style: normal; color: var(--ap-blue); }
.section--dark .section__title em, .cta-content__title em { color: var(--ap-blue-ondark); }

/* 다크 면 위 숫자·액센트는 Sky Link Blue */
.hero__stat-value,
.section--dark [style*="color:var(--signal)"],
.cta-section .accent { color: var(--ap-blue-ondark) !important; }

/* ── 18-2. 푸터 (파치먼트 전환에 따른 텍스트 색 보정) ────────────────── */
.footer { color: var(--ap-ink-80) !important; }
.footer p, .footer span, .footer div { color: var(--ap-ink-80); }
.footer__logo { color: var(--ap-ink) !important; }
.footer__logo .accent { color: var(--ap-blue) !important; }
.footer__copy {
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  color: var(--ap-ink-48) !important;
}
.footer a { color: var(--ap-ink-80) !important; }
.footer a:hover { color: var(--ap-blue) !important; }

/* ── 18-3. LP (revolving-a / a-1561ef / b / c) ──────────────────────── */
.lp-page, body { }
:root, html:root {
  --canvas: var(--ap-canvas);
  --lifted: var(--ap-parchment);
  --charcoal: var(--ap-tile-1);
  --ghost: var(--ap-hairline);
  --shadow-card: none;
  --shadow-nav: none;
}

/* LP 버튼 — 잉크 필 → Action Blue 필 */
.btn-ink {
  background: var(--ap-blue) !important;
  color: #fff !important;
  border: 1px solid var(--ap-blue) !important;
  border-radius: var(--ap-r-pill) !important;
}
.btn-outline {
  background: transparent !important;
  color: var(--ap-blue) !important;
  border: 1px solid var(--ap-blue) !important;
  border-radius: var(--ap-r-pill) !important;
}
.cta-row { gap: 16px; }
@media (min-width: 768px) {
  .cta-row .btn { flex: 0 1 auto !important; min-width: 0 !important; white-space: nowrap; }
}

/* LP 아이브로우 점 제거 */
.eyebrow::before { display: none !important; }
.eyebrow { text-transform: none !important; letter-spacing: 0.01em !important; color: var(--ap-blue) !important; }
.flip .eyebrow { color: var(--ap-blue-ondark) !important; }

/* LP 내비 — 필 → 프로스티드 바 */
.nav-pill { max-width: none !important; margin: 0 !important; padding: 0 !important; top: 0 !important; }
.nav-pill__inner {
  border-radius: 0 !important;
  background: rgba(255,255,255,0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: none !important;
  max-width: 1200px; margin: 0 auto;
  padding: 10px 24px !important;
}
.nav-pill__logo .logo-wordmark span { color: var(--ap-blue) !important; }
.nav-pill__tel, .float-tel, .tel-fab {
  background: var(--ap-blue) !important;
  color: #fff !important;
  border-radius: var(--ap-r-pill) !important;
  box-shadow: none !important;
}

/* LP 카드 — 라운드 32~40px → 애플 유틸리티 카드 18px, 그림자 없음 */
.calcw {
  border-radius: var(--ap-r-lg) !important;
  border: 1px solid var(--ap-hairline);
  box-shadow: none !important;
}
.calcw .out-item {
  background: var(--ap-parchment) !important;
  border-radius: var(--ap-r-md) !important;
}
.calcw .out-item b { color: var(--ap-blue) !important; }
.chip { border: 1px solid var(--ap-hairline) !important; background: var(--ap-canvas) !important; }
.chip.on {
  background: var(--ap-canvas) !important;
  border: 2px solid var(--ap-blue-focus) !important;
  color: var(--ap-blue) !important;
}

/* LP 섹션 — 둥근 플로팅 블록 → 풀블리드 타일 */
.empathy {
  background: var(--ap-parchment) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 80px 0 !important;
}
.flip {
  background: var(--ap-tile-1) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 80px 0 !important;
}
.flip-card {
  background: var(--ap-tile-2) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--ap-r-lg) !important;
}
.flip-card .ad-copy { color: var(--ap-blue-ondark) !important; }
.flip-card .tag {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  border-radius: var(--ap-r-pill) !important;
}

/* LP 스탯 서클 · 포트레이트 — 인물 사진에만 유일한 그림자 */
.stat-circle {
  border: 1px solid var(--ap-hairline) !important;
  box-shadow: none !important;
  background: var(--ap-canvas) !important;
}
.stat-circle b { color: var(--ap-ink) !important; }
.portrait__circle { box-shadow: var(--ap-shadow-photo) !important; }
.portrait__sat {
  box-shadow: none !important;
  border: 1px solid var(--ap-hairline) !important;
  color: var(--ap-blue) !important;
}
.orbit path { stroke: var(--ap-hairline) !important; }
.hero .rate .pct { color: var(--ap-blue) !important; font-weight: 600 !important; }
.hero .ghost { color: var(--ap-divider) !important; }
.path-card { border-radius: var(--ap-r-lg) !important; box-shadow: none !important; border: 1px solid var(--ap-hairline) !important; }
.path-card.p1, .path-card.p2, .path-card.p3 { --pc: var(--ap-blue) !important; --pbg: rgba(0,102,204,0.06) !important; }
.money-vs .mv-n, .relief-num, .cost-nums .n b, .sim-item b { color: var(--ap-blue) !important; }
.money-vs .mv-arrow { color: var(--ap-ink-48) !important; }

/* ── 18-4. 빠른계산(진단) ──────────────────────────────────────────── */
.rc-header {
  background: rgba(245,245,247,0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
}
.rc-brand-text, .rc-brand { color: var(--ap-ink) !important; font-weight: 600; letter-spacing: -0.02em; }
.rc-brand-accent { color: var(--ap-blue) !important; }
.rc-brand-office { color: var(--ap-ink-48) !important; font-size: 14px; }
.rc-progress-bar { background: var(--ap-divider) !important; height: 4px !important; }
.rc-progress-fill { background: var(--ap-blue) !important; }
.rc-kicker, .rc-q-meta-title, .rc-q-number {
  color: var(--ap-blue) !important;
  background: transparent !important;
  font-weight: 600;
}
.rc-h1, .rc-q-title, .rc-result-h1, .rc-result-head, .rc-scenarios-title,
.rc-empathy-title, .rc-cta-title, .rc-radar-title, .rc-lawyer-title {
  font-family: var(--ap-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--ap-ink) !important;
}
.rc-accent, .rc-h1 .rc-accent, .rc-empathy-accent { color: var(--ap-blue) !important; }
.rc-sub, .rc-tagline, .rc-result-sub, .rc-q-helper { color: var(--ap-ink-sub) !important; }
.rc-source, .rc-band-note, .rc-radar-note, .rc-footer-disclaimer, .rc-footer-copy {
  color: var(--ap-ink-48) !important; font-size: 12px !important;
}

/* 진단 옵션 카드 */
.rc-option {
  background: var(--ap-canvas) !important;
  border: 1px solid var(--ap-hairline) !important;
  border-radius: var(--ap-r-md) !important;
  box-shadow: none !important;
  transition: border-color .18s ease, background-color .18s ease;
}
.rc-option:hover { border-color: var(--ap-blue) !important; }
.rc-option.is-selected, .rc-option.selected, .rc-option[aria-checked="true"] {
  border: 2px solid var(--ap-blue-focus) !important;
  background: rgba(0,102,204,0.05) !important;
}
.rc-cbx { accent-color: var(--ap-blue); border-color: var(--ap-hairline) !important; }
.rc-option.is-selected .rc-cbx, .rc-option.selected .rc-cbx {
  background: var(--ap-blue) !important; border-color: var(--ap-blue) !important;
}
.rc-other input, .rc-multi input { border-radius: var(--ap-r-md) !important; }

/* 진단 버튼 */
.rc-start-btn, .rc-confirm-btn, .rc-nav-btn, .rc-cta-btn, .rc-direct, .rc-save {
  border-radius: var(--ap-r-pill) !important;
  font-family: var(--ap-sans) !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  box-shadow: none !important;
  transition: background-color .2s ease, border-color .2s ease, transform .12s ease;
}
.rc-start-btn, .rc-confirm-btn, .rc-cta-btn--primary {
  background: var(--ap-blue) !important;
  color: #fff !important;
  border: 1px solid var(--ap-blue) !important;
}
.rc-start-btn:hover, .rc-confirm-btn:hover, .rc-cta-btn--primary:hover {
  background: var(--ap-blue-focus) !important; border-color: var(--ap-blue-focus) !important;
}
.rc-cta-btn--outline, .rc-nav-btn--prev, .rc-cta-btn--pdf, .rc-cta-btn--kakao {
  background: transparent !important;
  color: var(--ap-blue) !important;
  border: 1px solid var(--ap-blue) !important;
}
.rc-start-btn:active, .rc-confirm-btn:active, .rc-nav-btn:active, .rc-cta-btn:active { transform: scale(0.95); }
.rc-bullets li::before, .rc-bullets svg { color: var(--ap-blue) !important; fill: var(--ap-blue) !important; }
.rc-nav-trust { color: var(--ap-ink-48) !important; font-size: 12px !important; }

/* 진단 히어로 */
.rc-hero-overlay {
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.72) 78%, #fff 100%) !important;
}

/* 결과 페이지 */
.rc-result-header, .rc-result-header--toolbar {
  background: rgba(245,245,247,0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
}
.rc-result-crumb { color: var(--ap-ink-48) !important; font-size: 14px !important; }
.rc-scenario {
  background: var(--ap-canvas) !important;
  border: 1px solid var(--ap-hairline) !important;
  border-radius: var(--ap-r-lg) !important;
  box-shadow: none !important;
}
.rc-scenario .rc-rank, .rc-fit, .rc-benefit-num, .rc-total-amount {
  color: var(--ap-blue) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.rc-scenario .rc-name { font-weight: 600; letter-spacing: -0.02em; color: var(--ap-ink) !important; }
.rc-scenario .rc-type, .rc-desc { color: var(--ap-ink-sub) !important; }
.rc-empathy, .rc-explainer, .rc-radar, .rc-lawyer-card, .rc-total {
  background: var(--ap-parchment) !important;
  border: 0 !important;
  border-radius: var(--ap-r-lg) !important;
  box-shadow: none !important;
}
.rc-vs-cells { border-radius: var(--ap-r-lg) !important; overflow: hidden; }
.rc-vs-row { border-color: var(--ap-hairline) !important; }
.rc-vs-key { color: var(--ap-ink-48) !important; font-size: 14px; }
.rc-vs-b, .rc-vs-r { color: var(--ap-ink) !important; }
.rc-brand-divider { background: none !important; border-top: 1px solid var(--ap-hairline) !important; }
.rc-explainer-brand, .rc-explainer-title { color: var(--ap-ink) !important; }
.rc-footer, .rc-footer--dark {
  background: var(--ap-parchment) !important;
  color: var(--ap-ink-80) !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
}
.rc-footer a { color: var(--ap-blue) !important; }
.rc-radar-chart path, .rc-radar-chart polygon { fill: rgba(0,102,204,0.14) !important; stroke: var(--ap-blue) !important; }
.rc-lockv { filter: blur(8px); }
.rc-delete-btn { color: var(--ap-ink-48) !important; border-color: var(--ap-hairline) !important; }

/* ── 18-5. 정밀진단 ─────────────────────────────────────────────────── */
.px-h1 .px-accent, .px-accent { color: var(--ap-blue) !important; }

/* ── 18-6. 사례(cases) ──────────────────────────────────────────────── */
:root, html:root {
  --persona-a: var(--ap-blue);
  --persona-b: var(--ap-blue);
  --persona-c: var(--ap-blue);
  --persona-a-bg: rgba(0,102,204,0.08);
  --persona-b-bg: rgba(0,102,204,0.08);
  --persona-c-bg: rgba(0,102,204,0.08);
}
.case-card, .case-card[data-persona] {
  border: 1px solid var(--ap-hairline) !important;
  border-top: 1px solid var(--ap-hairline) !important;
  border-radius: var(--ap-r-lg) !important;
  box-shadow: none !important;
  background: var(--ap-canvas) !important;
}
.filter__btn {
  border-radius: var(--ap-r-pill) !important;
  border: 1px solid var(--ap-hairline) !important;
  background: var(--ap-canvas) !important;
  color: var(--ap-ink) !important;
  font-size: 14px;
}
.filter__btn.is-active,
.filter__btn[data-persona].is-active {
  background: var(--ap-blue) !important;
  border-color: var(--ap-blue) !important;
  color: #fff !important;
}
.case-card__persona { border-radius: var(--ap-r-pill) !important; }
.cases-hero__tel, .header__tel, .tel-pill {
  background: var(--ap-blue) !important;
  color: #fff !important;
  border-radius: var(--ap-r-pill) !important;
}

/* ── 18-7. 챗봇 상태 인디케이터 ─────────────────────────────────────── */
.chatbot-result__indicator--red { background: #fff5f5 !important; color: #d70015 !important; border-color: #ff3b30 !important; }
.chatbot-result__indicator--green { background: #f2fdf5 !important; color: #248a3d !important; border-color: #34c759 !important; }
.chatbot-header__status { background: #34c759 !important; }

/* ── 18-8. 잔여 하이라이트·장식 제거 ────────────────────────────────── */
.hero__title em, .hero__title span[class*="hl"],
.cases-hero h1 em, h1 em, h2 em {
  background: none !important;
  background-image: none !important;
  color: var(--ap-blue) !important;
  font-style: normal !important;
}
.section--dark h1 em, .section--dark h2 em,
.flip h2 em, .cta-content__title em { color: var(--ap-blue-ondark) !important; }

/* 인디케이터 점·장식 스트립 */
.hero__dot { background: rgba(255,255,255,0.35) !important; }
.hero__dot.active { background: #fff !important; }

/* ── 18-9. 잔여 버튼·헤더·오프셋 보정 ───────────────────────────────── */
.header__cta, .header__cta-btn, .cases-header__cta {
  background: var(--ap-blue) !important;
  color: #fff !important;
  border-radius: var(--ap-r-pill) !important;
  border: 0 !important;
}
.header__cta:hover, .header__cta-btn:hover { background: var(--ap-blue-focus) !important; }

/* 정밀진단 — 고정 헤더에 콘텐츠가 가려지던 문제 해소 */
.px-wrap { padding-top: calc(var(--rc-header-h, 56px) + 24px) !important; }

/* 정밀진단 버튼·카드 */
.px-cta-btn { border-radius: var(--ap-r-pill) !important; font-weight: 400 !important; font-size: 17px !important; }
.px-cta-btn--go, .px-cta-btn--sms {
  background: var(--ap-blue) !important; color: #fff !important; border: 1px solid var(--ap-blue) !important;
}
.px-cta-btn--tel {
  background: transparent !important; color: var(--ap-blue) !important; border: 1px solid var(--ap-blue) !important;
}
.px-cta-btn:active { transform: scale(0.95); }
.px-q, .px-card, .px-low, .px-capture {
  border: 1px solid var(--ap-hairline) !important;
  border-radius: var(--ap-r-lg) !important;
  box-shadow: none !important;
  background: var(--ap-canvas) !important;
}
.px-card.px-card--hero {
  background: var(--ap-tile-1) !important;
  border-color: var(--ap-tile-1) !important;
  color: #fff !important;
}
.px-card--hero .v { color: var(--ap-blue-ondark) !important; }
.px-opt span { border: 1px solid var(--ap-hairline) !important; border-radius: var(--ap-r-md) !important; font-weight: 400 !important; }
.px-opt input:checked + span {
  border: 2px solid var(--ap-blue-focus) !important;
  background: rgba(0,102,204,0.05) !important;
  color: var(--ap-blue) !important;
}
.px-num { border: 1px solid var(--ap-hairline) !important; border-radius: var(--ap-r-md) !important; font-weight: 400 !important; }
.px-num:focus { border-color: var(--ap-blue-focus) !important; outline: 2px solid rgba(0,113,227,0.35); }
.px-track, .px-signal {
  background: var(--ap-parchment) !important;
  border: 0 !important;
  border-radius: var(--ap-r-md) !important;
  color: var(--ap-ink) !important;
}
.px-kicker, .px-anon b, .px-capture-sub b { color: var(--ap-blue) !important; }
.px-h1, .px-result-head, .px-low-title, .px-capture-title { font-weight: 600 !important; }

/* 진단 페이지도 동일 오프셋 보정 */
.rc-intro:not(.rc-intro--hero) { padding-top: calc(var(--rc-header-h, 56px) + 24px); }

/* ── 18-10. LP 공통 스타일시트(lp.css) 토큰 재정의 ──────────────────── */
:root, html:root {
  --lp-canvas:        var(--ap-canvas);
  --lp-lifted:        var(--ap-parchment);
  --lp-cta:           var(--ap-blue);
  --lp-cta-hover:     var(--ap-blue-focus);
  --lp-cta-text:      #ffffff;
  --lp-heading:       var(--ap-ink);
  --lp-band:          var(--ap-tile-1);
  --lp-card:          var(--ap-canvas);
  --lp-text:          var(--ap-ink);
  --lp-text-sub:      var(--ap-ink-sub);
  --lp-text-light:    var(--ap-ink-48);
  --lp-white:         #ffffff;
  --lp-line:          rgba(0,0,0,0.08);
  --lp-link:          var(--ap-blue);
  --lp-signal:        var(--ap-blue);
  --lp-signal-light:  var(--ap-blue-focus);

  --lp-btn-radius:    var(--ap-r-pill);
  --lp-card-radius:   var(--ap-r-lg);
  --lp-hero-radius:   0px;
  --lp-pill-radius:   var(--ap-r-pill);
  --lp-card-shadow:       none;
  --lp-card-shadow-hover: none;

  /* 페르소나 3색 → 단일 액센트 */
  --persona-a: var(--ap-blue);      --persona-a-soft: rgba(0,102,204,0.08); --persona-a-deep: var(--ap-blue-focus);
  --persona-b: var(--ap-blue);      --persona-b-soft: rgba(0,102,204,0.08); --persona-b-deep: var(--ap-blue-focus);
  --persona-b-navy: var(--ap-ink);  --persona-b-navy-soft: var(--ap-parchment);
  --persona-c: var(--ap-blue);      --persona-c-soft: rgba(0,102,204,0.08); --persona-c-deep: var(--ap-blue-focus);
  --persona-c-ink: var(--ap-ink);

  --lp-section-py: 80px;
  --lp-section-py-mobile: 56px;
}
.lp-body {
  font-family: var(--ap-sans) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.47 !important;
  background: var(--ap-canvas) !important;
  color: var(--ap-ink) !important;
}
.lp-h1, .lp-h2, .lp-h3 {
  font-family: var(--ap-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
.lp-hero, .lp-section { border-radius: 0 !important; }
.lp-card, .lp-box { border-radius: var(--ap-r-lg) !important; border: 1px solid var(--ap-hairline) !important; box-shadow: none !important; }
.lp-btn, .lp-cta, a.lp-btn {
  border-radius: var(--ap-r-pill) !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  box-shadow: none !important;
}
.lp-btn:active, .lp-cta:active { transform: scale(0.95); }
.lp-pill, .lp-tag, .lp-chip { border-radius: var(--ap-r-pill) !important; }

/* ── 18-11. 모바일 히어로 오버플로 방지 (타이포 확대에 따른 재보정) ──── */
@media (max-width: 833px) {
  .hero {
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    align-items: flex-start !important;
  }
  .hero__content { padding: 104px 24px 64px !important; }
  .hero__title { font-size: clamp(28px, 7.4vw, 38px) !important; line-height: 1.12 !important; }
  .hero__sub { font-size: 17px !important; line-height: 1.45 !important; }
  .hero__slide-wrap { min-height: 0 !important; }
  .hero__stats { gap: 20px !important; flex-wrap: wrap; }
  .hero__stat-value { font-size: 22px !important; }
  .hero__stat-label { font-size: 12px !important; }
  .hero__buttons { gap: 10px; }
  .hero__buttons .btn { width: 100%; font-size: 16px; padding: 13px 20px; }
}
@media (max-width: 640px) {
  .section > .container > .section__title { font-size: 28px !important; }
  .section > .container > .section__subtitle { font-size: 17px !important; }
}

/* ── 18-12. revolving-check.css 토큰 전면 재정의 ────────────────────── */
:root, html:root {
  --rc-canvas:      var(--ap-parchment);
  --rc-lifted:      var(--ap-canvas);
  --rc-white:       #ffffff;
  --rc-ink:         var(--ap-blue);          /* 체크 마크·선택 표시 = 액션 컬러 */
  --rc-signal:      var(--ap-blue);
  --rc-signal-deep: var(--ap-blue-focus);
  --rc-signal-bg:   rgba(0,102,204,0.06);
  --rc-ink-soft:    var(--ap-tile-1);
  --rc-slate:       var(--ap-ink-48);
  --rc-band:        var(--ap-tile-1);
  --rc-text:        var(--ap-ink);
  --rc-text-sub:    var(--ap-ink-sub);
  --rc-text-light:  var(--ap-ink-48);
  --rc-line:        rgba(0,0,0,0.10);
  --rc-ink-bg:      rgba(0,102,204,0.05);
  --rc-ink-glow:    rgba(0,113,227,0.28);
  --rc-btn-radius:  var(--ap-r-pill);
  --rc-card-radius: var(--ap-r-lg);
  --rc-card-shadow: none;
  --rc-card-shadow-hover: none;
  --rc-option-shadow: none;
  --rc-option-shadow-hover: none;
  --rc-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* 헤드라인·본문은 잉크로 되돌린다 (--rc-ink 를 액션 컬러로 바꾼 부작용 차단) */
.rc-h1, .rc-q-title, .rc-result-h1, .rc-result-head,
.rc-scenarios-title, .rc-empathy-title, .rc-cta-title,
.rc-option span, .rc-lawyer-title, .rc-total { color: var(--ap-ink) !important; }
.rc-bullets li::before { background: var(--ap-blue) !important; }
.rc-bullets li::after { border-color: #fff !important; }
.rc-bullets li { color: var(--ap-ink-sub) !important; }
.rc-band, .rc-footer--dark { background: var(--ap-parchment) !important; }

/* ── 18-13. 고정 전화 필 (LP 공통) ─────────────────────────────────── */
.tel-fixed, .nav-pill__tel, .float-tel, .tel-fab, .lp-tel-fixed {
  background: var(--ap-blue) !important;
  color: #fff !important;
  border-radius: var(--ap-r-pill) !important;
  box-shadow: none !important;
  font-weight: 400 !important;
  font-size: 15px !important;
}
.tel-fixed:active { transform: scale(0.95); }

/* ── 18-14. 카드화로 안쪽 여백이 사라진 요소 보정 ──────────────────── */
/* FAQ 아코디언 — 테두리를 줬으면 안쪽 여백도 함께 줘야 한다 */
.faq-item {
  padding: 2px 26px !important;
  margin-bottom: 10px;
  background: var(--ap-canvas);
  transition: border-color .2s ease;
}
.faq-item:last-child { margin-bottom: 0; }
.faq-item:hover { border-color: var(--ap-ink-48) !important; }
.faq-item.open { border-color: var(--ap-blue) !important; }
.faq-question {
  padding: 22px 0 !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  gap: 20px;
}
.faq-question::after {
  font-size: 22px !important;
  color: var(--ap-ink-48) !important;
  font-weight: 300;
}
.faq-item.open .faq-question::after { color: var(--ap-blue) !important; }
.faq-answer__inner {
  padding: 0 0 24px !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--ap-ink-sub) !important;
}
@media (max-width: 640px) {
  .faq-item { padding: 2px 18px !important; }
  .faq-question { padding: 18px 0 !important; font-size: 16px !important; }
  .faq-answer__inner { font-size: 16px !important; }
}

/* 진단 선택지 — 안쪽 span 이 여백을 갖는 구조라 바깥은 0 유지, 대신 라벨 정렬만 보정 */
.rc-option > span, .rc-option label > span { display: block; }

/* 쿠폰·게이트 모달 내부 버튼(런타임 주입 스타일 대비) */
.pfc-btn { border-radius: 980px !important; font-weight: 400 !important; }
.pfc-btn:not(:disabled) { background: var(--ap-blue) !important; color: #fff !important; }
.pfc-card { box-shadow: none !important; }

/* ── 18-15. 사진 히어로 가독성 스크림 ───────────────────────────────
   원칙: 사진 위 텍스트는 '텍스트 그림자'로 살리지 않는다(애플 금지).
   면(스크림) 자체를 조정해 대비를 만든다. 페이지의 톤(밝은/어두운)을 존중한다. */

/* (a) 어두운 사진 + 흰 텍스트 — 홈 index.html */
.hero__overlay {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.40) 45%,
    rgba(0,0,0,0.62) 100%) !important;
}

/* (b) 밝은 미러 사진 + 잉크 텍스트 — LP-A 계열(.hero--bg) */
.hero--bg .hero__overlay {
  background: linear-gradient(180deg,
    rgba(245,245,247,0.84) 0%,
    rgba(245,245,247,0.90) 34%,
    rgba(245,245,247,0.94) 62%,
    rgba(245,245,247,0.97) 100%) !important;
}
@media (min-width: 768px) {
  /* 데스크톱은 텍스트가 좌측 컬럼에만 있으므로 우측 사진을 살린다 */
  .hero--bg .hero__overlay {
    background: linear-gradient(90deg,
      rgba(245,245,247,0.97) 0%,
      rgba(245,245,247,0.93) 44%,
      rgba(245,245,247,0.55) 70%,
      rgba(245,245,247,0.04) 100%) !important;
  }
}

/* 사진 위 미세 텍스트(출처·캡션)는 한 단계 진하게 */
.hero--bg .src,
.hero--bg .rate-cap,
.hero--bg .hero__note { color: #57575b !important; }

/* 사진 위 고스트 버튼 — 투명 배경으로는 대비가 안 나온다. 반투명 흰 필. */
.hero--bg .btn-outline,
.hero--bg .btn--outline {
  background: rgba(255,255,255,0.92) !important;
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}

/* ── 18-16. 밝은 미러 히어로 — 모바일 아트디렉션 전환 ────────────────
   애플이 모바일에서 쓰는 방식: 사진 위에 글자를 얹어 둘 다 죽이지 않고,
   '사진 면'과 '글자 면'을 분리한다. 모델 컷은 100% 살고 카피는 100% 읽힌다. */
@media (max-width: 767px) {
  .hero--bg {
    min-height: 0 !important;
    display: block !important;
    align-items: stretch !important;
    padding: 0 !important;
  }
  .hero--bg .hero__bgimg {
    position: relative !important;
    height: 34vh; min-height: 240px;
    background-position: 72% 14% !important;
  }
  .hero--bg .hero__overlay {
    top: 0 !important; bottom: auto !important;
    height: 34vh; min-height: 240px;
    background: linear-gradient(180deg,
      rgba(245,245,247,0)   0%,
      rgba(245,245,247,0)   54%,
      rgba(245,245,247,.50) 78%,
      rgba(245,245,247,.94) 94%,
      #f5f5f7               100%) !important;
  }
  .hero--bg .hero__content {
    position: relative; z-index: 2;
    background: var(--ap-parchment);
    padding-top: 0; padding-bottom: 32px;
    margin-top: -2px;
  }
  .hero--bg .eyebrow { margin-bottom: 12px !important; }
  .hero--bg h1 { font-size: 32px !important; line-height: 1.12 !important; }
  .hero--bg .lede { margin-top: 12px !important; font-size: 16px !important; }
  .hero--bg .cta-row { margin-top: 18px !important; gap: 10px !important; }
  .hero--bg .src { margin-top: 14px !important; font-size: 12px !important; }
  /* 면이 분리됐으므로 고스트 버튼은 원래대로 투명 */
  .hero--bg .btn-outline {
    background: transparent !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ── 18-17. 고정 전화 버튼이 CTA를 가리는 문제 ──────────────────────
   position:fixed 인 넓은 필은 스크롤 위치와 무관하게 본문 위에 얹힌다.
   모바일에서는 애플의 button-icon-circular(원형 44~56px) 문법으로 축소해
   가림 면적을 1/4로 줄인다. 전화번호는 상단 내비·2차 CTA·푸터에 이미 노출됨. */
@media (max-width: 767px) {
  .tel-fixed, .float-tel, .tel-fab {
    width: 56px; height: 56px; padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 0 !important; gap: 0 !important;
    bottom: 14px !important; right: 14px !important;
  }
  .tel-fixed::before, .float-tel::before, .tel-fab::before {
    content: '';
    width: 24px; height: 24px; display: block;
    background: #fff;
    -webkit-mask: no-repeat center / 24px 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    mask: no-repeat center / 24px 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  }
}

/* ── 18-18. 모바일 하단 고정 바 대비 · 겹침 보정 ─────────────────────
   프로스티드 바를 80%로 두면 어두운 히어로 위에서 중간 회색이 되어
   라벨 대비가 무너진다. 불투명도를 올리고 라벨을 잉크로 고정한다. */
.sticky-bar, .mobile-sticky, .rc-sticky, .px-sticky {
  background: rgba(250,250,252,0.94) !important;
  border-top: 1px solid rgba(0,0,0,0.10) !important;
}
.sticky-bar a, .mobile-sticky a,
.sticky-bar a span, .mobile-sticky a span { color: var(--ap-ink) !important; }
.sticky-bar .sticky-ai, .sticky-bar .sticky-ai span,
.sticky-bar a.active, .sticky-bar a[aria-current="page"] { color: var(--ap-blue) !important; }

/* 히어로 하단 요소가 겹치지 않도록 — 모바일에서는 트러스트 바를 흐름에 편입.
   absolute 로 두면 통계·고지문 위에 얹혀 내용을 가린다. */
@media (max-width: 767px) {
  .trust-bar {
    position: static !important; bottom: auto !important;
    padding: 18px 0 !important;
    background: rgba(29,29,31,0.92) !important;
  }
  .trust-bar__grid { gap: 14px 20px !important; justify-content: flex-start !important; }
  .hero__content { padding-bottom: 32px !important; }
  .hero { padding-bottom: 88px !important; }   /* 하단 고정 바 여유 */
}

/* 진단 헤더 사무소명 — 14px 600 에 #86868b 는 파치먼트 위에서 기준 미달 */
.rc-brand-office { color: var(--ap-ink-sub) !important; }

/* ── 18-19. 챗봇 넛지 버블이 고지문을 상시 가리는 문제 ────────────────
   모바일에서 .chatbot-fab__bubble 은 자동으로 사라지지 않아 히어로 하단
   법적 고지문을 계속 덮는다(광고 고지 가림 = 실제 규제 리스크).
   모바일에서는 버블을 숨기고 원형 버튼만 남긴다. 데스크톱은 그대로 유지. */
@media (max-width: 767px) {
  .chatbot-fab__bubble { display: none !important; }
  .chatbot-fab { bottom: 84px !important; right: 14px !important; }
}

/* ── 18-20. 미세 텍스트 색 등급 재조정 ───────────────────────────────
   #86868b(tertiary)를 고지문·출처에 쓰면 흰 배경에서도 3.3~3.6 으로
   WCAG AA(4.5) 미달. tertiary 는 '비활성' 전용으로 내리고,
   읽어야 하는 보조 텍스트는 전부 secondary(#6e6e73)로 올린다. */
:root, html:root { --ap-ink-48: #6e6e73; }
.src, .rate-cap, .yr, .lp-source, .rc-source, .px-note, .px-anon,
.chatbot-notice, .chatbot-msg__time, .footer__copy, .legal,
.pfc-legal, .fine-print, .disclaimer-block, small {
  color: #6e6e73 !important;
}
/* 진짜 비활성 상태에만 tertiary */
:disabled, [aria-disabled="true"], .is-disabled { color: #86868b !important; }

/* ── 18-21. LP 영상·사진 히어로 스크림 강화 ──────────────────────────
   밝은 원본 위에서 Sky Blue 액센트가 2.3까지 떨어진다. 스크림을 올려
   텍스트 밴드가 항상 근흑 위에 놓이게 한다(텍스트 그림자 대신 면으로 해결). */
.lp-hero__overlay {
  background: linear-gradient(180deg,
    rgba(29,29,31,0.62) 0%,
    rgba(29,29,31,0.80) 50%,
    rgba(29,29,31,0.90) 100%) !important;
}
/* 애플 규칙 — 사진 위 텍스트도 그림자 없이 간다 */
.lp-hero--video .lp-h1, .lp-hero--image .lp-h1,
.lp-hero--video .lp-sub, .lp-hero--image .lp-sub,
.lp-hero--video .lp-kicker, .lp-hero--image .lp-kicker {
  text-shadow: none !important;
}

/* ── 18-22. 사진·영상 히어로 위 텍스트 색 규칙 ───────────────────────
   애플은 사진 위에 색 강조를 얹지 않는다. 강조는 크기와 무게로 한다.
   Sky Blue(#2997ff)조차 밝은 원본 사진 위에서는 3.0 을 넘기지 못한다. */
.lp-hero--image .lp-h1 .accent, .lp-hero--video .lp-h1 .accent,
.lp-hero--image .accent, .lp-hero--video .accent,
.lp-hero--image [class*="accent-"], .lp-hero--video [class*="accent-"] {
  color: #ffffff !important;
}
/* 주의: 밝은 면의 히어로(.hero__title em 등)는 파란 강조를 유지한다.
   흰색 강제는 '사진 위'에서만. 흰 배경에 흰 글자가 되는 사고를 막는다. */
/* 다크 히어로 위 미세 텍스트는 흰색 계열 (18-20의 잉크 지정을 되돌림) */
.lp-hero--image .lp-source, .lp-hero--video .lp-source,
.lp-hero--image .src, .lp-hero--video .src,
.lp-hero--image .lp-sub, .lp-hero--video .lp-sub,
.section--dark .src, .section--dark small, .cta-section .src,
.flip .src, .flip small {
  color: rgba(255,255,255,0.80) !important;
}