/**
 * TAI 브랜드 색상 (단일 관리)
 * ─────────────────────────
 * v2.3.0 (2026-05-01): fixed 헤더 텍스트 흰색 오버라이드 (다크 배경 대응)
 * v2.2.0 (2026-04-26): SVG 다이어그램 lazy loading 높이 보정
 * v2.1.0 (2026-04-26): 스크롤 고정 헤더 네이비로 변경
 * v2.0.0 (2026-04-25): 흰색 + 어두운 블루 톤으로 전환
 *
 * 조정 시 주로 건드릴 값:
 *   --tai-primary / --tai-primary-dark / --tai-primary-rgb  … 브랜드 블루
 *   --tai-surface-dark / --tai-surface-dark-rgb              … 히어로·CTA 다크 배경·오버레이
 *   --tai-ink-deep-rgb                                       … 그림자·그라데이션 딥 네이비
 */
:root {
  --tai-primary: #1565c0;
  --tai-primary-dark: #0f2b4a;
  --tai-primary-rgb: 21, 101, 192;

  /* 히어로·CTA 다크 배경·오버레이 (네이비 톤) */
  --tai-surface-dark: #0f2b4a;
  --tai-surface-dark-rgb: 15, 43, 74;
  /* 그림자·그라데이션 끝 등 딥 네이비 악센트 */
  --tai-ink-deep-rgb: 10, 25, 50;

  --main-color: var(--tai-primary);
  --main-color-opacity: var(--tai-primary-rgb);
  --main-gradient: linear-gradient(
    135deg,
    var(--tai-primary) 0%,
    var(--tai-primary-dark) 100%
  );
}

/* 테마 데모용 .home-2 ~ .home-6 가 서로 다른 색을 쓰지 않도록 통일 */
.home-2,
.home-3,
.home-4,
.home-5,
.home-6 {
  --main-color: var(--tai-primary);
  --main-color-opacity: var(--tai-primary-rgb);
  --main-gradient: linear-gradient(
    135deg,
    var(--tai-primary) 0%,
    var(--tai-primary-dark) 100%
  );
}

/* 스크롤 시 고정 헤더 — 네이비 배경 */
.navbar-area-fixed {
  background: rgba(var(--tai-surface-dark-rgb), 0.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* home-6 전용 스티키 내비가 테마 보라색을 쓰지 않도록 */
.home-6 .navbar-area-fixed {
  background: rgba(var(--tai-surface-dark-rgb), 0.92) !important;
}

/*
 * ── v2.3.0 고정 헤더 텍스트 수정 ──────────────────────────────────────
 * header.js v3.2 에서 fixed 상태 텍스트를 #0f2b4a(네이비)로 설정했으나
 * tai-brand.css v2.1 에서 fixed 배경도 다크 네이비로 변경되어
 * 텍스트가 배경에 묻히는 버그 발생 → 흰색으로 오버라이드
 * ────────────────────────────────────────────────────────────────────── */

/* 로고 텍스트 */
.navbar-area-fixed .tai-logo-text {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
}

/* 아웃라인 버튼 (마이페이지, 로그인) */
.navbar-area-fixed .tai-nav-btn-outline {
  border-color: rgba(255,255,255,.45) !important;
  color: rgba(255,255,255,.9) !important;
}
.navbar-area-fixed .tai-nav-btn-outline:hover {
  border-color: rgba(255,255,255,.75) !important;
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}

/* 솔리드 버튼 (회원가입) — 흰 배경 + 네이비 텍스트로 대비 */
.navbar-area-fixed .tai-nav-btn-solid {
  background: #fff !important;
  color: #0f2b4a !important;
  border-color: rgba(255,255,255,.95) !important;
}
.navbar-area-fixed .tai-nav-btn-solid:hover {
  background: #1565c0 !important;
  border-color: #1565c0 !important;
  color: #fff !important;
}

/* 로그아웃 버튼 */
.navbar-area-fixed button.tai-logout-btn {
  border-color: rgba(255,255,255,.45) !important;
  color: rgba(255,255,255,.9) !important;
}
.navbar-area-fixed button.tai-logout-btn:hover {
  border-color: rgba(255,255,255,.75) !important;
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}

/*
 * 헤더 정렬: 로고는 좌측, 메인 메뉴·로그인은 우측에 붙이고 서로 간격 유지
 * (theme style.css 의 .navbar-nav { width:100% } 를 데스크톱에서 덮어씀)
 */
@media (min-width: 992px) {
  .navbar-area .nav-container {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start !important;
    position: relative;
  }
  .navbar-area .nav-container > .logo {
    flex-shrink: 0;
    margin-right: auto;
  }
  .navbar-area .nav-container .navbar-collapse {
    display: flex !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
    width: auto !important;
    max-width: none !important;
  }
  .navbar-area .nav-container .navbar-collapse .navbar-nav {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: right;
  }
  .navbar-area .nav-container .navbar-collapse .navbar-nav > li {
    display: flex !important;
    align-items: center;
  }
  .navbar-area .nav-container .nav-right-part.nav-right-part-desktop {
    margin-left: 1.75rem !important;
    flex-shrink: 0;
  }
}

/* 안전정보 뒤 구분선(  |  ); 모바일 세로 메뉴에서는 숨김 */
.navbar-area .nav-container .navbar-collapse .navbar-nav li.tai-nav-sep {
  pointer-events: none;
  user-select: none;
}
.navbar-area .nav-container .navbar-collapse .navbar-nav li.tai-nav-sep span {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 300;
}
@media (max-width: 991px) {
  .navbar-area .nav-container .navbar-collapse .navbar-nav li.tai-nav-sep {
    display: none !important;
  }
}

/* 푸터 회사 블록: 회사명·대표·주소·연락처 등 글자 크기 통일 (테마 .footer-widget p 16px·.small·회사명 1.05rem 덮음) */
.footer-company-info .footer-company-name {
  font-size: inherit;
  margin-bottom: 0;
}
.footer-company-info p,
.footer-company-info .small {
  font-size: inherit !important;
}

/* ─── SVG 다이어그램 lazy loading 보정 ───
 * SVG가 viewBox만 있고 width/height 속성이 없으면
 * <img loading="lazy">에서 높이 0으로 계산되어 영원히 로딩 안 됨.
 * aspect-ratio + min-height로 placeholder 높이를 확보해 lazy 트리거.
 */
img[src*="diagram"][loading="lazy"] {
  aspect-ratio: 800 / 420;
  min-height: 120px;
}

/* 무료진단 결과 하단 — 다음 단계(B2B 톤, 쇼핑몰형 테이블 지양) */
.tai-pricing-next {
  padding: 4rem 0 5rem;
  background: linear-gradient(180deg, #f6f8fc 0%, #eef2f9 100%);
  border-top: 1px solid rgba(var(--tai-primary-rgb), 0.12);
}
.tai-pricing-next h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1a1d2e;
  margin-bottom: 0.5rem;
}
.tai-pricing-next .tai-pricing-lead {
  color: #5c6070;
  font-size: 0.95rem;
  max-width: 42rem;
  margin: 0 auto 2rem;
}
.tai-pricing-card {
  background: #fff;
  border: 1px solid #e2e6ef;
  border-radius: 12px;
  padding: 1.35rem 1.25rem;
  height: 100%;
  box-shadow: 0 8px 24px rgba(15, 43, 74, 0.06);
}
.tai-pricing-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #222;
}
.tai-pricing-card p.desc {
  font-size: 0.88rem;
  color: #5c6070;
  margin-bottom: 1rem;
  min-height: 2.75rem;
}
.tai-pricing-card .tai-price-hint {
  font-size: 0.8rem;
  color: #8b909f;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid #eef0f5;
}
.tai-diag-risk-pill {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}
.tai-diag-risk-HIGH {
  background: #fee2e2;
  color: #b91c1c;
}
.tai-diag-risk-MEDIUM {
  background: #fef3c7;
  color: #b45309;
}
.tai-diag-risk-LOW {
  background: #dcfce7;
  color: #15803d;
}