/**
 * 우쎔AI 디자인 — 핀툴(fintool.ezinit.com)과 동일 제품군 톤:
 * 밝은 슬레이트 베이스 · 인디고 악센트 · 화이트 카드 · 앱 랜딩 느낌
 * base.html 맨 아래에서 로드
 */

:root {
  --woosa-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --woosa-ink-900: #0f172a;
  --woosa-ink-800: #1e293b;
  --woosa-ink-600: #475569;
  --woosa-accent: #4f46e5;
  --woosa-accent-hover: #4338ca;
  --woosa-accent-soft: #eef2ff;
  --woosa-accent-mid: #6366f1;
  --woosa-page-bg: #f1f5f9;
  --woosa-page-bg-mid: #e2e8f0;
  --woosa-cream: #f8fafc;
  --woosa-surface: #ffffff;
  --woosa-surface-raised: #f8fafc;
  --woosa-hero-grad: linear-gradient(
    168deg,
    #e8edff 0%,
    #f1f4fd 22%,
    #f8fafc 52%,
    #f1f5f9 78%,
    #eef2f7 100%
  );
  --woosa-hero-mist: rgba(99, 102, 241, 0.14);
  --woosa-hero-mist-2: rgba(56, 189, 248, 0.06);
  --woosa-border: rgba(148, 163, 184, 0.35);
  --woosa-radius-sm: 10px;
  --woosa-radius-md: 16px;
  --woosa-radius-lg: 20px;
  --woosa-shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.07),
    0 4px 14px rgba(15, 23, 42, 0.04);
  --woosa-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.06);
  --woosa-shadow-card-hover: 0 20px 48px rgba(79, 70, 229, 0.12),
    0 8px 20px rgba(15, 23, 42, 0.08);
}

/* ------------------------------------------------------------------------- 전역 */
body {
  font-family: var(--woosa-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--woosa-page-bg);
  background-image: linear-gradient(
    180deg,
    #f8fafc 0%,
    var(--woosa-page-bg) 40%,
    var(--woosa-page-bg-mid) 100%
  );
  background-attachment: fixed;
  color: var(--woosa-ink-600);
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }
}

/* ------------------------------------------------------------------------- 상단 네비 */
nav.woosa-navbar.navbar-light.fixed-top,
nav.navbar.woosa-navbar.fixed-top {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--woosa-border) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 4px 24px rgba(15, 23, 42, 0.05) !important;
  backdrop-filter: saturate(160%) blur(12px);
}

.woosa-navbar .navbar-brand {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--woosa-ink-900) !important;
}

.woosa-navbar .navbar-nav .nav-link {
  color: #64748b !important;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: -0.015em;
}

.woosa-navbar .navbar-nav .nav-link:hover,
.woosa-navbar .navbar-nav .nav-link:focus {
  color: var(--woosa-ink-900) !important;
}

.woosa-navbar .navbar-toggler {
  border-color: var(--woosa-border);
}

/* ------------------------------------------------------------------------- 푸터 · 모바일 하단 바 */
.company-footer {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-top: 1px solid var(--woosa-border) !important;
}

.bottom-nav-mobile {
  border: 1px solid var(--woosa-border) !important;
  box-shadow: var(--woosa-shadow-soft) !important;
  background: rgba(255, 255, 255, 0.97) !important;
}

/* ------------------------------------------------------------------------- 모달 헤더 — 과한 네온 대신 차분한 톤 */
.modal-header {
  background: linear-gradient(
    135deg,
    #6366f1 0%,
    var(--woosa-accent) 50%,
    #4f46e5 100%
  ) !important;
  border-bottom: none !important;
}

/* ------------------------------------------------------------------------- index — 히어로 (자연스러운 메시 — 좌·우 반쪽 하드 스플릿 제거) */
.hero-section {
  background: radial-gradient(
      ellipse 130% 85% at 50% -18%,
      rgba(199, 210, 254, 0.42) 0%,
      rgba(241, 245, 249, 0.2) 42%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 95% 75% at 88% 38%,
      rgba(165, 180, 252, 0.14) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 95% 75% at 12% 62%,
      rgba(224, 231, 255, 0.22) 0%,
      transparent 58%
    ),
    var(--woosa-hero-grad) !important;
  border-bottom: 1px solid var(--woosa-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* index 인라인의 우상단/좌하단 원을 덮어: 전체에 부드러운 빛만 */
.hero-section::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: radial-gradient(
    ellipse 115% 70% at 50% 8%,
    rgba(99, 102, 241, 0.07) 0%,
    transparent 58%
  ) !important;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.hero-section::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: radial-gradient(
    ellipse 100% 55% at 50% 92%,
    rgba(148, 163, 184, 0.09) 0%,
    transparent 52%
  ) !important;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.hero-section > .container {
  position: relative;
  z-index: 1;
}

/* ::after가 섹션 맨 위에 그려져도 인디케이터·플로팅이 가리지 않게 */
.hero-section .scroll-indicator,
.hero-section .floating-element {
  position: relative;
  z-index: 2;
}

.hero-section .catchphrase-title {
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.35;
  color: var(--woosa-ink-900) !important;
  max-width: min(38rem, 94vw);
  margin-left: auto;
  margin-right: auto;
}

.hero-section .main-catchphrase-text {
  color: #475569 !important;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.hero-section .sub-catchphrase {
  color: #64748b !important;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

.hero-section .hero-title {
  color: var(--woosa-ink-900) !important;
}

.hero-section .hero-subtitle {
  color: var(--woosa-ink-600) !important;
}

.highlight-ai {
  background: linear-gradient(
    135deg,
    var(--woosa-accent-mid),
    #a78bfa
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.hero-section .highlight-text {
  color: var(--woosa-accent) !important;
}

/* 나이대 카드 */
.hero-section .age-group {
  background: var(--woosa-surface) !important;
  border: 1px solid var(--woosa-border) !important;
  box-shadow: var(--woosa-shadow-card);
}

.hero-section .age-group:hover {
  background: #fff !important;
  border-color: rgba(99, 102, 241, 0.28) !important;
}

/* AI 기능 카드 — 핀툴형 화이트 카드 */
.hero-section .ai-feature-grid {
  gap: 1.15rem 1rem;
}

.hero-section .ai-feature-card {
  background: var(--woosa-surface) !important;
  border: 1px solid var(--woosa-border) !important;
  border-radius: var(--woosa-radius-md) !important;
  box-shadow: var(--woosa-shadow-card);
}

.hero-section .ai-feature-card:hover {
  border-color: rgba(99, 102, 241, 0.35) !important;
  box-shadow: var(--woosa-shadow-card-hover) !important;
  background: #fff !important;
  transform: translateY(-3px);
}

.hero-section .ai-feature-icon {
  background: linear-gradient(145deg, #eef2ff, #e0e7ff) !important;
  border: 1px solid rgba(99, 102, 241, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hero-section .ai-feature-icon i {
  color: var(--woosa-accent) !important;
}

.hero-section .ai-feature-title {
  color: var(--woosa-ink-900) !important;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-size: 1.05rem;
}

.hero-section .ai-feature-desc {
  color: #64748b !important;
  line-height: 1.55;
  font-size: 0.875rem;
}

.cta-btn-primary {
  background: var(--woosa-accent) !important;
  border-radius: var(--woosa-radius-sm) !important;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.28) !important;
  color: #fff !important;
}

.cta-btn-primary:hover {
  background: var(--woosa-accent-hover) !important;
  color: #fff !important;
}

.hero-section .cta-btn-secondary {
  border-radius: var(--woosa-radius-sm) !important;
  background: #fff !important;
  border: 1px solid var(--woosa-border) !important;
  color: var(--woosa-ink-800) !important;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.hero-section .cta-btn-secondary:hover {
  border-color: rgba(99, 102, 241, 0.45) !important;
  background: #f8fafc !important;
  color: var(--woosa-accent) !important;
}

.hero-section .highlight-item {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid var(--woosa-border) !important;
}

.hero-section .highlight-item:hover {
  background: #fff !important;
  border-color: rgba(99, 102, 241, 0.22) !important;
}

.hero-section .highlight-item span {
  color: var(--woosa-ink-800) !important;
}

/* 통계 블록 */
.hero-section .stats-section {
  border-radius: var(--woosa-radius-lg) !important;
  border: 1px solid var(--woosa-border) !important;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%) !important;
  box-shadow: var(--woosa-shadow-card), var(--woosa-shadow-soft);
}

.hero-section .stats-section h3.text-white,
.hero-section .stats-section .text-white {
  color: var(--woosa-ink-900) !important;
}

.hero-section .stats-section .text-white-50 {
  color: rgba(87, 83, 78, 0.75) !important;
}

.hero-section .stat-item {
  border-radius: var(--woosa-radius-sm) !important;
  background: #f8fafc !important;
  border: 1px solid var(--woosa-border) !important;
  color: var(--woosa-ink-800) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.hero-section .stat-item .text-white,
.hero-section .stat-item h5.text-white {
  color: var(--woosa-ink-900) !important;
}

.hero-section .stat-item .text-white-50 {
  color: rgba(87, 83, 78, 0.78) !important;
}

.hero-section .stat-icon i {
  color: var(--woosa-accent) !important;
}

.hero-section .stat-number {
  color: var(--woosa-ink-900) !important;
}

.hero-section .stat-label {
  color: var(--woosa-ink-800) !important;
}

.hero-section .stat-desc {
  color: rgba(87, 83, 78, 0.85) !important;
}

.hero-section .stats-section .stat-item .text-warning {
  color: var(--woosa-accent) !important;
}

.hero-section .stats-section .stat-item[style*="border-left"] {
  border-left-color: rgba(99, 102, 241, 0.45) !important;
}

/* 시장분석 배너 (JS 인라인 스타일 덮어쓰기) */
#latestReportBanner .report-slide {
  background: #fff !important;
  border: 1px solid var(--woosa-border) !important;
  box-shadow: var(--woosa-shadow-card);
}

#latestReportBanner .report-title-text {
  color: var(--woosa-ink-900) !important;
}

#latestReportBanner a.report-slide .bi-chevron-right {
  color: rgba(99, 102, 241, 0.65) !important;
}

.section-title h2 {
  color: var(--woosa-ink-900) !important;
  letter-spacing: -0.02em;
}

.section-title p {
  color: #64748b !important;
}

#fintool-intro.section-gap,
section#fintool-intro {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

/* 핀툴 소개 카드 — 앱과 동일하게 화이트 + 얇은 보더 */
#fintool-intro .bg-white.rounded-3,
#fintool-intro .bg-white {
  background: #fff !important;
  border: 1px solid var(--woosa-border) !important;
  box-shadow: var(--woosa-shadow-card) !important;
}

#strategies.bg-light {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}

.strategy-card {
  border-radius: var(--woosa-radius-md) !important;
  border-color: var(--woosa-border) !important;
  background: #fff !important;
  box-shadow: var(--woosa-shadow-card) !important;
}

.strategy-card:hover {
  border-color: rgba(99, 102, 241, 0.25) !important;
  box-shadow: var(--woosa-shadow-card-hover) !important;
}

/* 하단 CTA — 인디고 글로우 (앱 랜딩형) */
.cta-container {
  background: linear-gradient(
    145deg,
    #eef2ff 0%,
    #e0e7ff 38%,
    #f8fafc 100%
  ) !important;
  border-radius: var(--woosa-radius-lg) !important;
  border: 1px solid rgba(99, 102, 241, 0.18) !important;
  box-shadow: var(--woosa-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.cta-container h2,
.cta-container .cta-title,
.cta-title {
  color: var(--woosa-ink-900) !important;
  text-shadow: none !important;
}

.cta-container p,
.cta-subtitle {
  color: #64748b !important;
}

.cta-btn {
  border-radius: var(--woosa-radius-md) !important;
  border: 1px solid var(--woosa-border) !important;
  background: #fff !important;
  color: var(--woosa-ink-800) !important;
  box-shadow: var(--woosa-shadow-card);
}

.cta-btn:hover {
  background: #f8fafc !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  color: var(--woosa-accent) !important;
}

.cta-btn-icon {
  background: var(--woosa-accent-soft) !important;
  color: var(--woosa-accent) !important;
}

.cta-btn-title,
.cta-btn-subtitle {
  color: inherit !important;
}

.btn-community {
  background: var(--woosa-accent) !important;
  border-radius: var(--woosa-radius-sm) !important;
}

.btn-community:hover {
  background: var(--woosa-accent-hover) !important;
}

/* ------------------------------------------------------------------------- 긴 글 페이지 (비즈니스 모델 등) */
.business-model-container {
  background: #fff !important;
  border: 1px solid var(--woosa-border);
  box-shadow: var(--woosa-shadow-card), var(--woosa-shadow-soft) !important;
}

.business-model-content {
  font-size: 17px !important;
  line-height: 1.85 !important;
  color: #334155 !important;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.business-model-content p {
  margin-bottom: 1.1em;
}

.business-model-content h1,
.business-model-content h2,
.business-model-content h3 {
  letter-spacing: -0.02em;
}