/* ==========================================================================
   PUBLIC LIGHT THEME — 모든 공개 페이지(/admin 제외)에 일괄 적용
   - Tailwind 인라인 다크 hex 클래스를 라이트 색상으로 강제 오버라이드
   - text-white, text-gray-* 등 다크 텍스트를 라이트 본문 색으로 매핑
   ========================================================================== */

/* ─── 1. Body 기본 색상 (base.html 인라인 클래스 오버라이드) ───────────────── */
body.bg-\[\#030712\] {
  background: #f5f7fb !important;
  color: #0f172a !important;
}

/* 전체 페이지 그라데이션 (home 외에도 부드러운 배경) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;             /* 콘텐츠 뒤로 보냄 */
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, #e0e7ff 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 100%, #cffafe 0%, transparent 60%),
    linear-gradient(180deg, #f5f7fb 0%, #ffffff 50%, #f1f5f9 100%);
}

/* 본문 컨테이너가 그라데이션 배경 위에 올라가도록 */
.site-main {
  position: relative;
  z-index: 1;
}

/* ─── 2. 다크 배경 헥스 → 라이트 매핑 (Tailwind escape selector) ─────── */
.bg-\[\#030712\],
.bg-\[\#010309\],
.bg-\[\#0c1929\],
.bg-\[\#020617\],
.bg-\[\#000000\] {
  background-color: transparent !important;
  background: transparent !important;
}

/* 다크 hex + opacity (예: bg-[#030712]/60) — 라이트 글래스 뱃지로 */
[class*="bg-[#030712]/"],
[class*="bg-[#010309]/"],
[class*="bg-[#0f172a]/"],
[class*="bg-[#1e293b]/"] {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* 그라데이션 from-[다크hex] — 이미지 위 페이드 오버레이 약화 */
[class*="from-[#030712]"],
[class*="from-[#010309]"],
[class*="from-[#020617]"] {
  --tw-gradient-from: rgba(255, 255, 255, 0.5) !important;
  --tw-gradient-stops: rgba(255, 255, 255, 0.5), var(--tw-gradient-to, rgba(255,255,255,0)) !important;
}
.bg-\[\#111827\],
.bg-\[\#1f2937\],
.bg-\[\#1e293b\],
.bg-\[\#0f172a\] {
  background-color: rgba(255, 255, 255, 0.78) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}
.bg-\[\#0a0f1c\],
.bg-\[\#1a1f2e\],
.bg-\[\#0b1220\],
.bg-\[\#0c111d\] {
  background-color: #f1f5f9 !important;
  background: #f1f5f9 !important;
}

/* ─── 3. 텍스트 색 매핑 ───────────────────────────────────────── */
.text-white { color: #0f172a !important; }
.text-gray-100 { color: #1e293b !important; }
.text-gray-200,
.text-gray-300 { color: #334155 !important; }
.text-gray-400 { color: #475569 !important; }
.text-gray-500 { color: #64748b !important; }
.text-gray-600 { color: #94a3b8 !important; }
.text-gray-700 { color: #cbd5e1 !important; }
/* slate variants */
.text-slate-100 { color: #1e293b !important; }
.text-slate-200,
.text-slate-300 { color: #334155 !important; }
.text-slate-400 { color: #475569 !important; }
.text-slate-500 { color: #64748b !important; }

/* primary/accent 텍스트는 라이트에 맞게 더 진하게 */
.text-primary-500 { color: #1e40af !important; }
.text-primary-400 { color: #2563eb !important; }
.text-accent-cyan { color: #0e7490 !important; }
.text-accent-teal { color: #0f766e !important; }
/* accent-cyan을 색상으로 쓰는 곳(border, bg)도 보강 */
.bg-accent-cyan { background-color: #0e7490 !important; }
.border-accent-cyan { border-color: #0e7490 !important; }

/* ─── 4. 보더/구분선 (Tailwind opacity 변형) ──────────────── */
.border-white\/5,
.border-white\/10,
.border-white\/20 { border-color: rgba(15, 23, 42, 0.06) !important; }
.border-white\/30,
.border-white\/40,
.border-white\/50 { border-color: rgba(15, 23, 42, 0.1) !important; }

/* ─── 5. 글래스 배경 → 라이트 글래스 카드 ──────────────────── */
/* 두 가지 방식 병행: Tailwind escape + attribute selector (브라우저 호환) */
.bg-white\/5,
.bg-white\/10,
.bg-white\/15,
.bg-white\/20,
.bg-white\/\[0\.01\],
.bg-white\/\[0\.02\],
.bg-white\/\[0\.03\],
.bg-white\/\[0\.04\],
.bg-white\/\[0\.05\],
.bg-white\/\[0\.06\],
.bg-white\/\[0\.07\],
.bg-white\/\[0\.08\],
.bg-white\/\[0\.1\],
[class*="bg-white/["],
[class*="bg-white/5"],
[class*="bg-white/10"],
[class*="bg-white/15"],
[class*="bg-white/20"] {
  background-color: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}
/* 글래스 hover 변형 */
.hover\:bg-white\/\[0\.02\]:hover,
.hover\:bg-white\/\[0\.03\]:hover,
.hover\:bg-white\/\[0\.04\]:hover,
.hover\:bg-white\/\[0\.05\]:hover,
.hover\:bg-white\/\[0\.07\]:hover,
.hover\:bg-white\/\[0\.08\]:hover,
.hover\:bg-white\/\[0\.1\]:hover,
.hover\:bg-white\/5:hover,
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.95) !important; }

/* Tailwind opacity 변형 텍스트 — purple/orange accent */
.text-purple-400,
.text-purple-500 { color: #7c3aed !important; }
.text-orange-400,
.text-orange-500 { color: #ea580c !important; }
.text-blue-400 { color: #2563eb !important; }
.text-pink-400 { color: #db2777 !important; }
.text-emerald-400 { color: #059669 !important; }
.bg-purple-500\/10 { background-color: rgba(124, 58, 237, 0.08) !important; border-color: rgba(124, 58, 237, 0.18) !important; }
.bg-orange-500\/10 { background-color: rgba(234, 88, 12, 0.08) !important; border-color: rgba(234, 88, 12, 0.18) !important; }
.bg-blue-500\/10 { background-color: rgba(37, 99, 235, 0.08) !important; border-color: rgba(37, 99, 235, 0.18) !important; }
.bg-pink-500\/10 { background-color: rgba(219, 39, 119, 0.08) !important; border-color: rgba(219, 39, 119, 0.18) !important; }
.bg-emerald-500\/10 { background-color: rgba(5, 150, 105, 0.08) !important; border-color: rgba(5, 150, 105, 0.18) !important; }

/* selection */
::selection { background: rgba(30, 64, 175, 0.18) !important; color: #0f172a !important; }

/* ─── 6. 헤더 — 라이트 글래스 ─────────────────────────────────── */
.site-header {
  background: rgba(255, 255, 255, 0.78) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 50 !important;
}
.site-header .site-logo-text,
.site-header .site-nav-link { color: #0f172a !important; }
.site-header .site-nav-link:hover { color: #1e40af !important; }
/* Contact Us 버튼 — 그라데이션 + 글로우 + lift hover */
.site-header .site-nav-cta {
  background: linear-gradient(135deg, #1e40af 0%, #0891b2 100%) !important;
  color: #fff !important;
  padding: 0.6rem 1.5rem !important;
  border-radius: 9999px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-shadow:
    0 8px 24px rgba(30, 64, 175, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease,
              background 0.3s ease !important;
  position: relative;
  overflow: hidden;
}
.site-header .site-nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1d4ed8 0%, #0e7490 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
  z-index: -1;
}
.site-header .site-nav-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 36px rgba(30, 64, 175, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.site-header .site-nav-cta:hover::before { opacity: 1; }
.site-header .site-nav-cta:active { transform: translateY(0); }

/* 메가 드롭다운 */
.site-header .nav-mega,
.site-header .nav-dropdown {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12) !important;
}
.site-header .nav-mega-item,
.site-header .nav-mega-title { color: #0f172a !important; }
.site-header .nav-mega-subtitle { color: #64748b !important; }
.site-header .nav-mega-arrow { color: #94a3b8 !important; }

/* 메가 CTA 카드 — 그라데이션 배경 유지 + white 텍스트 + 글로우 */
.site-header .nav-mega-cta { border-left-color: rgba(15, 23, 42, 0.08) !important; }
.site-header .nav-mega-card,
.site-header .nav-mega-card *,
.site-header .nav-mega-card-eyebrow,
.site-header .nav-mega-card-title {
  color: #fff !important;
}
.site-header .nav-mega-card-eyebrow { opacity: 0.85; }
.site-header .nav-mega-card-primary {
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important;
  box-shadow:
    0 12px 28px rgba(30, 64, 175, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.site-header .nav-mega-card-cyan {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
  box-shadow:
    0 12px 28px rgba(8, 145, 178, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.site-header .nav-mega-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 40px rgba(30, 64, 175, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.site-header .nav-mega-card-cyan:hover {
  box-shadow:
    0 18px 40px rgba(8, 145, 178, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.site-header .nav-mega-item:hover {
  background: #f1f5f9 !important;
}
.site-header .nav-dropdown-link { color: #334155 !important; }
.site-header .nav-dropdown-link:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}
.site-header .nav-mega-all { color: #1e40af !important; border-color: rgba(30,64,175,0.2) !important; }

/* 모바일 네비 */
.mobile-nav { background: rgba(255, 255, 255, 0.97) !important; }
.mobile-nav-link { color: #0f172a !important; }
.mobile-nav-sublink { color: #475569 !important; }
.mobile-menu-btn { color: #0f172a !important; }

/* ─── 7. 푸터 — 라이트 ────────────────────────────────────────── */
.site-footer {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
  position: relative;
  z-index: 5;
}
.site-footer .footer-logo-text { color: #0f172a !important; }
.site-footer .footer-nav-title { color: #0f172a !important; }
.site-footer .footer-nav-link { color: #475569 !important; }
.site-footer .footer-nav-link:hover { color: #1e40af !important; }
.site-footer p,
.site-footer address > div > span:last-child,
.site-footer address > div > a { color: #475569 !important; }
.site-footer address > div > span:first-child { color: #94a3b8 !important; }
.site-footer a:hover { color: #1e40af !important; }
.site-footer .footer-copyright { color: #94a3b8 !important; }

/* ─── 8. 공통 컴포넌트 (버튼/배지/카드) ───────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow:
    0 10px 28px rgba(30, 64, 175, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  font-weight: 800 !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease,
              background 0.3s ease !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #0e7490 100%) !important;
  transform: translateY(-2px);
  box-shadow:
    0 16px 38px rgba(30, 64, 175, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  backdrop-filter: blur(8px);
}
.btn-secondary:hover {
  background: #fff !important;
  border-color: #1e40af !important;
  color: #1e40af !important;
}
.btn-cta {
  background: linear-gradient(135deg, #1e40af 0%, #0891b2 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 40px rgba(30, 64, 175, 0.3);
}
.btn-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(30, 64, 175, 0.4);
}
.btn-link { color: #0f172a !important; font-weight: 700; }
.btn-link:hover { color: #1e40af !important; }

.badge { background: rgba(30, 64, 175, 0.1) !important; color: #1e40af !important; }
.badge-cyan { background: rgba(8, 145, 178, 0.1) !important; color: #0e7490 !important; }

/* glass-card 컴포넌트 */
.glass-card {
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06);
  color: #0f172a !important;
}
.glass-card:hover {
  border-color: rgba(30, 64, 175, 0.25) !important;
  box-shadow: 0 16px 50px rgba(15, 23, 42, 0.1);
}

/* text gradient — 라이트 배경 대비 진하게 */
.text-gradient {
  background: linear-gradient(90deg, #1e40af 0%, #0891b2 50%, #1e40af 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ─── 9. Hero/Section 배경 (페이지 공통 패턴) ────────────────── */
/* hero-blob blur 강한 색상 → 라이트에 어울리는 옅은 색으로 */
[class*="hero-blob"] { opacity: 0.6; mix-blend-mode: multiply; }

/* bg-circuit-grid, bg-grid-pattern → 더 진한 파란선 */
.bg-grid-pattern,
.bg-circuit-grid {
  background-image:
    linear-gradient(to right, rgba(30, 64, 175, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 64, 175, 0.08) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
}

/* ─── 10. 폼 요소 (input/select/textarea) ─────────────────────── */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="number"],
body input[type="password"],
body input[type="url"],
body input[type="date"],
body input[type="search"],
body select,
body textarea {
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
body input::placeholder,
body textarea::placeholder { color: #94a3b8 !important; }
body input:focus,
body select:focus,
body textarea:focus {
  border-color: #1e40af !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12) !important;
}

/* ─── 11. 챗봇 위젯도 라이트 ───────────────────────────────── */
#chatbotBtn { background: #1e40af !important; box-shadow: 0 10px 30px rgba(30, 64, 175, 0.3) !important; }
#chatbotWindow {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}
#chatbotWindow .text-white { color: #0f172a !important; }
#chatbotMessages .chatbot-msg-text {
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}
#chatbotInput {
  background: #fff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}

/* ─── 12. 모든 prose/article 본문 ──────────────────────────── */
/* Tailwind v4 standalone CLI에는 @tailwindcss/typography 플러그인이 없어
   .prose 클래스가 비어있다. preflight가 heading/list 스타일을 리셋해
   markdown→HTML 변환 결과가 일반 텍스트처럼 보이는 문제를 여기서 보강. */
.prose, .post-content, article {
  color: #1e293b;
}
.prose a { color: #1e40af; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #1d4ed8; }
.prose code { background: #f1f5f9; color: #be185d; padding: 0.15em 0.4em; border-radius: 0.25rem; font-size: 0.9em; }

/* Typography 복구 — heading */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { color: #0f172a; font-weight: 800; line-height: 1.3; }
.prose h1 { font-size: 2.25rem; margin-top: 0; margin-bottom: 1.25rem; }
.prose h2 { font-size: 1.75rem; margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(15, 23, 42, 0.08); }
.prose h3 { font-size: 1.4rem; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose h4 { font-size: 1.15rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }

/* Typography 복구 — block */
.prose p { margin: 0.9em 0; line-height: 1.75; }
.prose ul { list-style: disc; padding-left: 1.6rem; margin: 1em 0; }
.prose ol { list-style: decimal; padding-left: 1.6rem; margin: 1em 0; }
.prose li { margin: 0.4em 0; line-height: 1.7; }
.prose li > p { margin: 0.3em 0; }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin: 0.3em 0; }
.prose blockquote {
  margin: 1.25em 0;
  padding: 0.5em 1.2em;
  border-left: 4px solid #94a3b8;
  color: #475569;
  background: rgba(148, 163, 184, 0.08);
  border-radius: 0 0.5rem 0.5rem 0;
}
.prose hr { border: 0; border-top: 1px solid rgba(15, 23, 42, 0.1); margin: 2em 0; }
.prose pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.25em 0;
  font-size: 0.9em;
  line-height: 1.6;
}
.prose pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; }
.prose img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1.25em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.25em 0; font-size: 0.95em; }
.prose th, .prose td { padding: 0.6em 0.9em; border: 1px solid rgba(15, 23, 42, 0.1); text-align: left; }
.prose th { background: rgba(15, 23, 42, 0.04); font-weight: 700; }
.prose strong { font-weight: 700; color: #0f172a; }
.prose em { font-style: italic; }

/* 페이지별 공통 헤드라인 강제 어둡게 */
body h1, body h2, body h3, body h4 { color: #0f172a; }

/* ─── 13. Tailwind opacity prefix (text-white/80 등) ─────────── */
.text-white\/80 { color: rgba(15, 23, 42, 0.8) !important; }
.text-white\/70 { color: rgba(15, 23, 42, 0.7) !important; }
.text-white\/60 { color: rgba(15, 23, 42, 0.65) !important; }
.text-white\/50 { color: rgba(15, 23, 42, 0.6) !important; }
.text-white\/40 { color: rgba(15, 23, 42, 0.55) !important; }
.text-white\/30 { color: rgba(15, 23, 42, 0.45) !important; }

/* ─── 13b. hover variants — 라이트에서도 동작하도록 ──────── */
.hover\:text-white:hover { color: #0f172a !important; }
.hover\:text-gray-200:hover { color: #1e293b !important; }
.hover\:text-gray-300:hover { color: #334155 !important; }
.hover\:text-gray-400:hover { color: #475569 !important; }
.hover\:text-slate-200:hover { color: #1e293b !important; }
.hover\:text-slate-300:hover { color: #334155 !important; }
.hover\:bg-white:hover { background-color: #fff !important; }

/* placeholder Tailwind utility */
.placeholder-gray-500::placeholder,
.placeholder\:text-gray-500::placeholder { color: #94a3b8 !important; }
.placeholder-gray-400::placeholder { color: #94a3b8 !important; }
.placeholder-gray-600::placeholder { color: #64748b !important; }

/* 추가 accent text 색상 — 라이트 배경에서 더 진하게 */
.text-emerald-400,
.text-emerald-300 { color: #059669 !important; }
.text-cyan-400,
.text-cyan-300 { color: #0e7490 !important; }
.text-yellow-400,
.text-yellow-300 { color: #ca8a04 !important; }
.text-red-400,
.text-red-300 { color: #dc2626 !important; }
.text-amber-400 { color: #d97706 !important; }
.text-green-400 { color: #059669 !important; }

/* 임의 hex border (bg-[#030712] 류) — about/카드 등에서 다크 hex 보더 라이트로 */
[class*="border-[#030712]"],
[class*="border-[#010309]"],
[class*="border-[#0f172a]"],
[class*="border-[#1e293b]"] { border-color: rgba(15, 23, 42, 0.08) !important; }

/* hover variant 다크 hex (예: hover:bg-[#030712]) 차단 */
[class*="hover:bg-[#030712]"]:hover,
[class*="hover:bg-[#010309]"]:hover { background-color: rgba(255, 255, 255, 0.92) !important; }

/* ─── 14. 어두운 페이지 헤더 영역 (페이지별 자주 쓰는 패턴) ── */
.page-hero,
.page-header,
[class*="bg-gradient-to-"] {
  /* 그라데이션은 그대로 두되 텍스트는 보장 */
}

/* 어떤 페이지에서든 명시적 hex bg 안의 텍스트는 부모 색을 받지 못해 white로 남는 일이 있음 → 강제 */
body section, body main { color: inherit; }