/* ========================================
   CAMTALKERS.COM - Theme (Light/Dark)
   Applies to legacy pages that use css/style.css tokens.
   Excludes admin panel by simply not including this file there.
   ======================================== */

:root {
  color-scheme: light;
}

/* Dark theme overrides: re-map existing tokens so legacy pages auto-adapt */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg-white: var(--bg-dark);
  --bg-light: var(--bg-dark);
  --bg-card: #141428; /* slightly deeper than default */
  --text-primary: var(--text-light);
  --text-secondary: rgba(255,255,255,0.72);
  --text-muted: rgba(255,255,255,0.55);
  --border: var(--border-dark);

  --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
  --shadow-md: 0 10px 36px rgba(0,0,0,0.45);
}

/* Make surfaces/cards readable in dark mode */
html[data-theme="dark"] .card,
html[data-theme="dark"] .template-card,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .nav-menu,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .login-required .lr-content {
  background: var(--bg-card);
  border-color: var(--border);
}

/* Theme toggle (shared markup across pages) */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.04);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

html[data-theme="dark"] .theme-toggle {
  background: rgba(255,255,255,0.08);
}

.theme-toggle .toggle-icons {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  font-size: 13px;
  line-height: 1;
  user-select: none;
}

/* Show the "active" icon a bit brighter */
html[data-theme="light"] .theme-toggle .toggle-icons span:last-child { opacity: 1; }
html[data-theme="light"] .theme-toggle .toggle-icons span:first-child { opacity: .35; }
html[data-theme="dark"]  .theme-toggle .toggle-icons span:first-child { opacity: 1; }
html[data-theme="dark"]  .theme-toggle .toggle-icons span:last-child  { opacity: .35; }

.theme-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


/* ===== Guide/login backgrounds (legacy) ===== */
html[data-theme="dark"] .login-required {
  background: linear-gradient(160deg, #0D0520 0%, #12082E 60%, #0D0520 100%) !important;
}
html[data-theme="dark"] .lr-c1 {
  background: radial-gradient(circle, rgba(107,70,255,0.22), transparent) !important;
}
html[data-theme="dark"] .lr-c2 {
  background: radial-gradient(circle, rgba(255,107,157,0.16), transparent) !important;
}

/* UGC/Partners guide hero (guide.css uses light gradients by default) */
html[data-theme="dark"] .guide-hero {
  background: linear-gradient(135deg, #0D0520 0%, #12082E 100%) !important;
}
html[data-theme="dark"] .guide-hero::before {
  background: radial-gradient(circle, rgba(107,70,255,0.22), transparent) !important;
}
html[data-theme="dark"] .guide-hero::after {
  background: radial-gradient(circle, rgba(255,107,157,0.16), transparent) !important;
}

/* Guide sidebar/cards */
html[data-theme="dark"] .toc-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .toc-section,
html[data-theme="dark"] .toc-item,
html[data-theme="dark"] .toc-category {
  background: var(--bg-card);
  border-color: var(--border);
}
/* ===== Accordions (home FAQ) ===== */
html[data-theme="dark"] .accordion-item{
  background: var(--bg-card);
  border-color: var(--border);
}
html[data-theme="dark"] .accordion-header{
  background: transparent;
  color: var(--text-primary);
}
html[data-theme="dark"] .accordion-header:hover{
  background: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .accordion-header.active{
  background: rgba(107,70,255,0.14);
}
html[data-theme="dark"] .accordion-icon{
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
  color: var(--text-secondary);
}

/* ===== Home feature/stat/testimonial cards ===== */
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .float-card,
html[data-theme="dark"] .sp-link{
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}

/* ===== Templates page surfaces ===== */
html[data-theme="dark"] .tpl-hero-stats,
html[data-theme="dark"] .filter-section,
html[data-theme="dark"] .filter-search{
  background: var(--bg-card);
  border-color: var(--border);
}
html[data-theme="dark"] .filter-search:focus-within{
  background: rgba(255,255,255,0.06);
}

/* ===== Q&A page surfaces ===== */
html[data-theme="dark"] .qa-cat-card,
html[data-theme="dark"] .qa-contact-form,
html[data-theme="dark"] .qa-cat{
  background: var(--bg-card);
  border-color: var(--border);
}

/* ===== Generic form controls ===== */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background: rgba(255,255,255,0.06);
  color: black;
  border-color: var(--border);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color: var(--text-muted);
}


/* ===== sp-name (showcase phones) — force dark text in dark mode ===== */
/* .sp-screen has a fixed light background (#F8F7FF), so text must always be dark */
html[data-theme="dark"] .sp-screen {
  background: #F8F7FF !important;
}
html[data-theme="dark"] .sp-name {
  color: #1A1A2E !important;
}
html[data-theme="dark"] .sp-link {
  background: white !important;
  color: #1A1A2E !important;
}

/* ===== Models directory search (.modelsDir #q) — dark input ===== */
html[data-theme="dark"] .modelsDir .search {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html[data-theme="dark"] .modelsDir .search:focus-within {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(229,59,69,0.40) !important;
  box-shadow: 0 0 0 4px rgba(229,59,69,0.12) !important;
}
html[data-theme="dark"] .modelsDir .search input {
  color: var(--text-primary) !important;
  background: transparent !important;
}
html[data-theme="dark"] .modelsDir .search input::placeholder {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .modelsDir .search svg {
  color: rgba(255,255,255,0.55) !important;
}

/* ===== Q&A contact card — replace light gradient in dark mode ===== */
html[data-theme="dark"] .qa-contact-card {
  background: var(--bg-card) !important;
  border-color: rgba(107,70,255,0.25) !important;
}

/* ===== Light gradient sections (switch to dark in dark theme) ===== */
html[data-theme="dark"] .bg-gradient-light{
  background: linear-gradient(160deg, #0D0520 0%, #1A0A3E 50%, #0D0520 100%) !important;
}


/* ===== Templates hero (dark) ===== */
html[data-theme="dark"] .tpl-hero{
  background: linear-gradient(160deg, #0D0520 0%, #1A0A3E 50%, #0D0520 100%) !important;
}


/* ===== Templates filter search (make "colorless" in dark) ===== */
html[data-theme="dark"] .filter-search{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html[data-theme="dark"] .filter-search:focus-within{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(107,70,255,0.40) !important;
  box-shadow: 0 0 0 3px rgba(107,70,255,0.20) !important;
}

/* ===== Mobile menu dark background ===== */
html[data-theme="dark"] .mobile-nav{
  background: #0B0B10 !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important;
}
html[data-theme="dark"] .mobile-nav-link{
  color: rgba(255,255,255,0.80) !important;
}
html[data-theme="dark"] .mobile-nav-link:hover{
  background: rgba(255,255,255,0.06) !important;
  color: white !important;
}

/* ===== Partners Guide landing: remove lr-content card bg only in dark ===== */
html[data-theme="dark"] body[data-page-key="partners-guide"] .login-required .lr-content{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ===== Autofill fix (prevents colored rectangles in inputs) ===== */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill{
  -webkit-text-fill-color: var(--text-primary) !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* ===== Q&A light-mode hero (keep structure from original qa.css) ===== */
html[data-theme="light"] .qa-hero{
  background: linear-gradient(160deg, #F8F7FF 0%, #EDE8FF 60%, #FFF0F5 100%) !important;
}
html[data-theme="light"] .qa-c1{
  background: radial-gradient(circle, rgba(107,70,255,0.12), transparent) !important;
}
html[data-theme="light"] .qa-c2{
  background: radial-gradient(circle, rgba(255,107,157,0.10), transparent) !important;
}
html[data-theme="light"] .qa-hero-content .section-title{ color: var(--text-primary) !important; }
html[data-theme="light"] .qa-hero-content .section-subtitle{ color: var(--text-secondary) !important; }
html[data-theme="light"] .qa-search{
  background: rgba(255,255,255,0.90) !important;
  border-color: rgba(107,70,255,0.14) !important;
}
html[data-theme="light"] .qa-search:focus-within{
  background: rgba(255,255,255,0.98) !important;
  border-color: rgba(107,70,255,0.32) !important;
  box-shadow: 0 0 0 3px rgba(107,70,255,0.16) !important;
}
html[data-theme="light"] .qa-search i{ color: var(--text-muted) !important; }
html[data-theme="light"] .qa-search input{ color: var(--text-primary) !important; }
html[data-theme="light"] .qa-search input::placeholder{ color: var(--text-muted) !important; }

/* ===== Mobile theme toggle (inside .mobile-nav-actions) ===== */
.mobile-theme-toggle {
  width: 100%;
  height: 40px;
  border-radius: var(--radius-full, 999px);
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.04);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-primary);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.mobile-theme-toggle::before {
  content: "테마 전환";
  font-size: 13px;
  font-weight: 500;
  opacity: 0.75;
}
.mobile-theme-toggle .toggle-icons {
  width: auto;
  height: auto;
  padding: 0;
  gap: 4px;
}
html[data-theme="dark"] .mobile-theme-toggle {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.85) !important;
}
html[data-theme="dark"] .mobile-theme-toggle:hover {
  background: rgba(255,255,255,0.12) !important;
}
.mobile-theme-toggle:hover {
  background: rgba(107,70,255,0.06);
  border-color: rgba(107,70,255,0.25);
}

/* ===== templates.html: filter-search input bg fix in dark mode ===== */
html[data-theme="dark"] .filter-search input {
  background: none !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .filter-search input::placeholder {
  color: var(--text-muted) !important;
}

/* ===== templates.html: modelsDir h2 visible in dark mode ===== */
html[data-theme="dark"] .modelsDir .sectionHead h2 {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .modelsDir .sectionHead .hint {
  color: var(--text-muted) !important;
}

/* ===== qa.html: quick-link buttons visible in light mode ===== */
html[data-theme="light"] .quick-link {
  background: rgba(107,70,255,0.08);
  border: 1px solid rgba(107,70,255,0.18);
  color: var(--primary);
}
html[data-theme="light"] .quick-link:hover {
  background: rgba(107,70,255,0.15);
  border-color: rgba(107,70,255,0.30);
  color: var(--primary);
}

html[data-theme="dark"] .qa-search input {
  background: none !important;
}