/* ========================================
   라이트 테마 오버라이드
   ======================================== */

:root{
  /* Base */
  --bg: #F4F4F4;
  --bg-alt: #EEF2F3;
  --card: #FFFFFF;
  --border: #DDE2E7;

  /* Text */
  --text: #0B1220;
  --muted: #5B6675;
  --hint: #7B8796;

  /* Brand */
  --primary: #00B7B5;
  --secondary: #018790;
  --tint: #E6FAF9;

  /* Shadow */
  --shadow: 0 10px 30px rgba(11,18,32,.08);
}

/* 기존 다크 클래스명을 '라이트'로 재정의 */
.dark-bg{ 
  background: var(--bg) !important; 
  color: var(--text) !important; 
}

.dark-bg-alt{ 
  background: var(--bg-alt) !important; 
  color: var(--text) !important; 
}

.dark-card{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
  color: var(--text) !important;
}

/* 텍스트 톤 */
body{ 
  color: var(--text); 
  background: var(--bg);
}

p, .text-gray-300, .text-gray-400{ 
  color: var(--muted) !important; 
}

.text-gray-500{ 
  color: var(--hint) !important; 
}

.text-white {
  color: var(--text) !important;
}

.text-muted {
  color: var(--muted) !important;
}

/* 포인트(기존 gradient-text를 '브랜드 컬러'로) */
.gradient-text{
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: #005461 !important;
  font-weight: 800;
}

/* 버튼(기존 gradient-bg를 CTA로) */
.gradient-bg{
  background: var(--primary) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(1,135,144,.25);
  transition: all 0.3s ease;
}

.gradient-bg:hover{
  background: var(--secondary) !important;
  color: #FFFFFF !important;
}

/* 링크/네비 */
.nav-link{ 
  color: var(--text) !important; 
  opacity: .85; 
  transition: all 0.3s ease;
}

.nav-link:hover{ 
  color: var(--secondary) !important; 
  opacity: 1; 
}

/* 네비게이션 배경 */
#navbar {
  background: rgba(244, 244, 244, 0.95) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* 구분선 */
.border-gray-800, .border-border{ 
  border-color: var(--border) !important; 
}

/* 히어로를 너무 어둡게 만드는 오버레이가 있다면 약하게 */
.hero-video-overlay{
  background: radial-gradient(1200px 600px at 50% 30%, rgba(0,183,181,.10), rgba(244,244,244,0) 60%),
              linear-gradient(180deg, rgba(244,244,244,.92), rgba(244,244,244,.98)) !important;
}

/* ===== CONTACT: 검정 박스 제거(배경 노출) ===== */
#contact,
#contact .bk-subscribe__wrap {
  background: transparent !important;
}

/* CONTACT 상단 문구("CONTACT / 구독 신청 / 24시간…")가 들어있는 패널/카드가 검정인 경우를 전부 커버 */
#contact .dark-card,
#contact .contact-card,
#contact .contact-box,
#contact .bk-subscribe__head,
#contact .bk-subscribe__card,
#contact [class*="bg-black"],
#contact [style*="background: #000"],
#contact [style*="background-color: #000"] {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 입력폼은 흰 배경 유지(가독성 유지) */
#contact input,
#contact select,
#contact textarea {
  background: #FFFFFF !important;
}

/* 폼 섹션(문의/구독신청) - subscribe 섹션만 적용 */
#subscribe, .contact-section{
  background: var(--bg-alt) !important;
}

#contact .dark-card, 
#subscribe .dark-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}

/* 폼 입력 필드 */
input, textarea, select {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  transition: all 0.3s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--hint) !important;
}

input:focus, textarea:focus, select:focus{
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(0,183,181,.12) !important;
  background: var(--card) !important;
}

/* 버튼 스타일 */
.contact-btn {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
}

.contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,183,181,0.3) !important;
}

/* 클라이언트 섹션 */
#clients {
  background: var(--card) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* 팀 카드 */
.team-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
}

.team-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 15px 40px rgba(0,183,181,0.15) !important;
}

.team-role {
  color: var(--text) !important;
}

.team-desc {
  color: var(--muted) !important;
}

/* Price 섹션 배지 */
.bg-brandLight\/10 {
  background: var(--tint) !important;
}

.text-brandLight {
  color: var(--secondary) !important;
}

.border-brandLight\/30 {
  border-color: var(--primary) !important;
}

.border-brandLight\/20 {
  border-color: rgba(0,183,181,0.3) !important;
}

/* FAQ 섹션 */
.br-faq-item {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
}

.br-faq-item summary {
  color: var(--text) !important;
}

.br-faq-answer {
  color: var(--muted) !important;
  border-top: 1px solid var(--border) !important;
}

/* Footer */
footer {
  background: var(--card) !important;
  border-top: 1px solid var(--border) !important;
}

/* CTA Block */
.dark-card.border-accent\/30 {
  border-color: rgba(0,183,181,0.4) !important;
  box-shadow: 0 0 0 4px rgba(0,183,181,0.08) !important;
}

/* 체크박스 */
input[type="checkbox"] {
  accent-color: var(--primary);
}

/* 모바일 메뉴 */
#mobileMenu {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
}

/* Data Snapshot 섹션 */
.bk-section {
  background: var(--bg-alt) !important;
}

.bk-slide {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
}

.bk-chip {
  background: var(--tint) !important;
  color: var(--secondary) !important;
  border: 1px solid var(--primary) !important;
}

/* Roadmap cards */
#roadmap .dark-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
}

#roadmap .dark-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 15px 40px rgba(0,183,181,0.15) !important;
}

/* Service cards */
#services .dark-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
}

#services .dark-card:hover {
  border-color: var(--primary) !important;
}

/* 유저플로우 도식 박스 */
#services .dark-card.border-2 {
  background: linear-gradient(135deg, rgba(0,183,181,0.05) 0%, rgba(0,183,181,0.02) 100%) !important;
  border: 2px solid rgba(0,183,181,0.3) !important;
  box-shadow: 0 8px 32px rgba(0,183,181,0.12) !important;
}

/* 유저플로우 텍스트 */
.flow-step-1,
.flow-step-2,
.flow-step-3,
.flow-step-4 {
  color: var(--secondary) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Red badges/borders */
.bg-red-500\/10 {
  background: rgba(239, 68, 68, 0.08) !important;
}

.text-red-400 {
  color: #DC2626 !important;
}

.border-red-500\/30 {
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.border-red-500\/20 {
  border-color: rgba(239, 68, 68, 0.2) !important;
}

/* 아이콘 색상 */
.fa-check-circle,
.fa-calendar-check {
  color: var(--primary) !important;
}

/* 브랜드 로고 */
.brand-word {
  color: #005461 !important;
}

/* 추가 텍스트 색상 조정 */
strong {
  color: var(--text) !important;
}

/* 배지 애니메이션 색상 */
.hero-badge {
  background: rgba(1,135,144, 0.08) !important;
  border: 1px solid rgba(1,135,144, 0.25) !important;
  box-shadow: 0 4px 20px rgba(0,183,181, 0.1) !important;
}

.badge-dot {
  background: var(--secondary) !important;
}

/* 추가: accent color 관련 */
.text-accent {
  color: var(--primary) !important;
}

.border-accent\/30 {
  border-color: rgba(0,183,181,0.3) !important;
}

/* DATA SNAPSHOT 상단 검정 박스 강제 제거 (배경 = 전체 배경) */
#data-snapshot,
#data-snapshot * {
  /* 필요 시 전체 섹션 톤도 통일 */
}

#data-snapshot .dark-card,
#data-snapshot .bk-slider,
#data-snapshot .bk-head,
#data-snapshot .bk-wrap > header,
#data-snapshot .bk-wrap > .bk-head {
  background: var(--bg, #F4F4F4) !important;
  background-color: var(--bg, #F4F4F4) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}