/* 회원 앱 — 테마 토큰 (관리자와 동일 5종: 블루/다크/그린/핑크/시스템) */
:root,
[data-app-theme="light"] {
  --app-color-primary: #2563eb;
  --app-color-primary-soft: rgba(59, 130, 246, 0.12);
  --app-color-primary-border: rgba(37, 99, 235, 0.22);

  --app-bg: #f8fafc;
  --app-surface: #ffffff;
  --app-surface-muted: #f1f5f9;
  --app-border: #e2e8f0;
  --app-border-soft: #f1f5f9;

  --app-text: #0f172a;
  --app-text-muted: #64748b;
  --app-text-subtle: #94a3b8;

  --app-gold: var(--app-color-primary);
  --app-gold-soft: var(--app-color-primary-soft);
  --app-accent-border: #dbeafe;

  --app-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  --app-header-bg: rgba(255, 255, 255, 0.94);
  --app-nav-bg: rgba(255, 255, 255, 0.96);
  --app-overlay: rgba(15, 23, 42, 0.35);
  --app-on-primary: #ffffff;

  --app-pill-preparing-bg: #eef2f8;
  --app-pill-preparing-color: #6b7f99;
  --app-pill-running-bg: #edf5f0;
  --app-pill-running-color: #5a8a72;
  --app-pill-live-dot: #d4847a;
  --app-tag-add-bg: #edf5f0;
  --app-tag-add-color: #5a8a72;
  --app-tag-minus-bg: #faf0ef;
  --app-tag-minus-color: #b87a72;

  --app-branch-count-bg: rgba(255, 255, 255, 0.92);

  --app-stat-action-bg: #ffffff;
  --app-stat-action-border: #93c5fd;
  --app-stat-action-text: #0f172a;
  --app-stat-action-label: #475569;
  --app-stat-action-value: #0f172a;
  --app-stat-action-accent: #2563eb;
  --app-stat-action-hint: #2563eb;

  --board-rich-body: var(--app-text-muted);
  --board-rich-heading: var(--app-text);
  --board-rich-lead: var(--app-text);
  --board-rich-link: var(--app-gold);
  --board-rich-kicker-news: #0d9488;
  --board-rich-em-news: #0f766e;
  --board-rich-callout-text: #334155;
  --board-rich-table-border: var(--app-border);
  --board-rich-table-head-bg: var(--app-surface-muted);
}

[data-app-theme="dark"] {
  --app-color-primary: #60a5fa;
  --app-color-primary-soft: rgba(96, 165, 250, 0.18);
  --app-color-primary-border: rgba(96, 165, 250, 0.28);

  --app-bg: #0f172a;
  --app-surface: #1e293b;
  --app-surface-muted: #334155;
  --app-border: #334155;
  --app-border-soft: #1e293b;

  --app-text: #f1f5f9;
  --app-text-muted: #94a3b8;
  --app-text-subtle: #64748b;

  --app-gold: var(--app-color-primary);
  --app-gold-soft: var(--app-color-primary-soft);
  --app-accent-border: rgba(96, 165, 250, 0.35);

  --app-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  --app-header-bg: rgba(30, 41, 59, 0.94);
  --app-nav-bg: rgba(30, 41, 59, 0.96);
  --app-overlay: rgba(0, 0, 0, 0.55);
  --app-on-primary: #0f172a;

  --app-pill-preparing-bg: rgba(96, 165, 250, 0.15);
  --app-pill-preparing-color: #93c5fd;
  --app-pill-running-bg: rgba(52, 211, 153, 0.15);
  --app-pill-running-color: #6ee7b7;
  --app-pill-live-dot: #f87171;
  --app-tag-add-bg: rgba(52, 211, 153, 0.15);
  --app-tag-add-color: #6ee7b7;
  --app-tag-minus-bg: rgba(248, 113, 113, 0.15);
  --app-tag-minus-color: #fca5a5;

  --app-branch-count-bg: rgba(15, 23, 42, 0.65);

  --app-stat-action-bg: #1e293b;
  --app-stat-action-border: #60a5fa;
  --app-stat-action-text: #f8fafc;
  --app-stat-action-label: #cbd5e1;
  --app-stat-action-value: #ffffff;
  --app-stat-action-accent: #93c5fd;
  --app-stat-action-hint: #93c5fd;

  --board-rich-body: #cbd5e1;
  --board-rich-heading: #f8fafc;
  --board-rich-lead: #e2e8f0;
  --board-rich-link: #93c5fd;
  --board-rich-kicker-news: #5eead4;
  --board-rich-em-news: #99f6e4;
  --board-rich-callout-text: #cbd5e1;
  --board-rich-table-border: #475569;
  --board-rich-table-head-bg: #334155;
}

[data-app-theme="green"] {
  --app-color-primary: #059669;
  --app-color-primary-soft: rgba(16, 185, 129, 0.14);
  --app-color-primary-border: rgba(5, 150, 105, 0.25);

  --app-bg: #f8fffb;
  --app-surface: #ffffff;
  --app-surface-muted: #f0fdf4;
  --app-border: #bbf7d0;
  --app-border-soft: #dcfce7;

  --app-text: #064e3b;
  --app-text-muted: #6b7280;
  --app-text-subtle: #9ca3af;

  --app-gold: var(--app-color-primary);
  --app-gold-soft: var(--app-color-primary-soft);
  --app-accent-border: #a7f3d0;

  --app-shadow: 0 1px 3px rgba(6, 78, 59, 0.06);
  --app-header-bg: rgba(255, 255, 255, 0.94);
  --app-nav-bg: rgba(255, 255, 255, 0.96);
  --app-overlay: rgba(6, 78, 59, 0.3);
  --app-on-primary: #ffffff;

  --app-pill-preparing-bg: #ecfdf5;
  --app-pill-preparing-color: #047857;
  --app-pill-running-bg: #d1fae5;
  --app-pill-running-color: #065f46;
  --app-pill-live-dot: #34d399;
  --app-tag-add-bg: #d1fae5;
  --app-tag-add-color: #047857;
  --app-tag-minus-bg: #fef2f2;
  --app-tag-minus-color: #b91c1c;

  --app-branch-count-bg: rgba(255, 255, 255, 0.92);

  --app-stat-action-bg: #ffffff;
  --app-stat-action-border: #34d399;
  --app-stat-action-text: #064e3b;
  --app-stat-action-label: #047857;
  --app-stat-action-value: #064e3b;
  --app-stat-action-accent: #059669;
  --app-stat-action-hint: #059669;

  --board-rich-body: var(--app-text-muted);
  --board-rich-heading: var(--app-text);
  --board-rich-lead: var(--app-text);
  --board-rich-link: var(--app-gold);
  --board-rich-kicker-news: #059669;
  --board-rich-em-news: #047857;
  --board-rich-callout-text: #334155;
  --board-rich-table-border: var(--app-border);
  --board-rich-table-head-bg: var(--app-surface-muted);
}

[data-app-theme="pink"] {
  --app-color-primary: #ec4899;
  --app-color-primary-soft: rgba(236, 72, 153, 0.12);
  --app-color-primary-border: rgba(236, 72, 153, 0.25);

  --app-bg: #fffbfd;
  --app-surface: #ffffff;
  --app-surface-muted: #fdf2f8;
  --app-border: #fbcfe8;
  --app-border-soft: #fce7f3;

  --app-text: #831843;
  --app-text-muted: #6b7280;
  --app-text-subtle: #9ca3af;

  --app-gold: var(--app-color-primary);
  --app-gold-soft: var(--app-color-primary-soft);
  --app-accent-border: #f9a8d4;

  --app-shadow: 0 1px 3px rgba(131, 24, 67, 0.06);
  --app-header-bg: rgba(255, 255, 255, 0.94);
  --app-nav-bg: rgba(255, 255, 255, 0.96);
  --app-overlay: rgba(131, 24, 67, 0.28);
  --app-on-primary: #ffffff;

  --app-pill-preparing-bg: #fdf2f8;
  --app-pill-preparing-color: #be185d;
  --app-pill-running-bg: #fce7f3;
  --app-pill-running-color: #9d174d;
  --app-pill-live-dot: #f472b6;
  --app-tag-add-bg: #fce7f3;
  --app-tag-add-color: #be185d;
  --app-tag-minus-bg: #fff1f2;
  --app-tag-minus-color: #e11d48;

  --app-branch-count-bg: rgba(255, 255, 255, 0.92);

  --app-stat-action-bg: #ffffff;
  --app-stat-action-border: #f472b6;
  --app-stat-action-text: #831843;
  --app-stat-action-label: #9d174d;
  --app-stat-action-value: #831843;
  --app-stat-action-accent: #ec4899;
  --app-stat-action-hint: #ec4899;

  --board-rich-body: var(--app-text-muted);
  --board-rich-heading: var(--app-text);
  --board-rich-lead: var(--app-text);
  --board-rich-link: var(--app-gold);
  --board-rich-kicker-news: #db2777;
  --board-rich-em-news: #be185d;
  --board-rich-callout-text: #334155;
  --board-rich-table-border: var(--app-border);
  --board-rich-table-head-bg: var(--app-surface-muted);
}

/* 공통 별칭 — app-board 등에서 사용 */
:root,
[data-app-theme] {
  --app-surface-2: var(--app-surface-muted);
}

body.app-body .app-ad-banner:not(.app-ad-banner--blind):not(.app-ad-banner--blind-ended) {
  background: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: var(--app-shadow);
}

body.app-body .app-ad-banner__label {
  color: var(--app-text-subtle);
}

body.app-body .app-ad-banner__demo {
  color: var(--app-text-subtle);
}

body.app-body .app-ad-banner__demo-label {
  color: var(--app-text-muted);
  border-color: var(--app-border);
}

body.app-body .app-ad-banner.is-demo {
  border-color: var(--app-accent-border);
}

/* 다크 테마 — 지점 그룹 틴트 */
[data-app-theme="dark"] .app-branch-group[data-color-index="0"] { --branch-accent: #7a9eb8; --branch-tint: rgba(122, 158, 184, 0.14); }
[data-app-theme="dark"] .app-branch-group[data-color-index="1"] { --branch-accent: #9a8fc0; --branch-tint: rgba(154, 143, 192, 0.14); }
[data-app-theme="dark"] .app-branch-group[data-color-index="2"] { --branch-accent: #c08aa0; --branch-tint: rgba(192, 138, 160, 0.14); }
[data-app-theme="dark"] .app-branch-group[data-color-index="3"] { --branch-accent: #c4a06a; --branch-tint: rgba(196, 160, 106, 0.14); }
[data-app-theme="dark"] .app-branch-group[data-color-index="4"] { --branch-accent: #7aaa92; --branch-tint: rgba(122, 170, 146, 0.14); }
[data-app-theme="dark"] .app-branch-group[data-color-index="5"] { --branch-accent: #78a4ac; --branch-tint: rgba(120, 164, 172, 0.14); }

[data-app-theme="dark"] .app-ad-banner:not(.app-ad-banner--blind):not(.app-ad-banner--blind-ended) {
  background: var(--app-surface);
  border-color: var(--app-border);
}

/* ═══════════════════════════════════════════════════════════
   다크 테마 — common.css *{color:#303030} 및 하드코딩 보정
   ═══════════════════════════════════════════════════════════ */
[data-app-theme="dark"] body.app-body {
  color: var(--app-text);
}

/* common.css 전역 글자색 무력화 → 테마 상속 */
[data-app-theme="dark"] body.app-body:not(.app-body--blind-live):not(.app-body--blind-gate) main,
[data-app-theme="dark"] body.app-body:not(.app-body--blind-live):not(.app-body--blind-gate) header,
[data-app-theme="dark"] body.app-body:not(.app-body--blind-live):not(.app-body--blind-gate) .app-content,
[data-app-theme="dark"] body.app-body:not(.app-body--blind-live):not(.app-body--blind-gate) .app-home-hero {
  color: var(--app-text);
}
[data-app-theme="dark"] body.app-body:not(.app-body--blind-live):not(.app-body--blind-gate) :where(
  p, span, div, li, td, th, h1, h2, h3, h4, h5, h6,
  label, strong, b, em, i, small, dt, dd, blockquote, figcaption,
  article, section, ul, ol, main, header, nav, footer
) {
  color: inherit;
}

/* 폼 입력 */
[data-app-theme="dark"] body.app-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[data-app-theme="dark"] body.app-body textarea,
[data-app-theme="dark"] body.app-body select {
  color: var(--app-text);
  background-color: var(--app-surface-muted);
  border-color: var(--app-border);
}
[data-app-theme="dark"] body.app-body input::placeholder,
[data-app-theme="dark"] body.app-body textarea::placeholder {
  color: var(--app-text-subtle);
  opacity: 1;
}

/* 스크랩·피드 본문 — 인라인 style color/background 덮어쓰기 */
[data-app-theme="dark"] .board-rich-wrap,
[data-app-theme="dark"] .board-rich-wrap .board-rich,
[data-app-theme="dark"] .board-rich-wrap .board-rich__html {
  color: var(--board-rich-body);
}
[data-app-theme="dark"] .board-rich-wrap .board-rich__html *:not(a):not(img):not(svg) {
  color: var(--board-rich-body) !important;
}
[data-app-theme="dark"] .board-rich-wrap .board-rich__html a {
  color: var(--board-rich-link) !important;
}
[data-app-theme="dark"] .board-rich-wrap .board-rich__html :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: var(--board-rich-heading) !important;
}
[data-app-theme="dark"] .board-rich-wrap .board-rich__html :is(.board-rich__lead, .board-rich__para:first-of-type) {
  color: var(--board-rich-lead) !important;
}
[data-app-theme="dark"] .board-rich-wrap [style*="background-color"],
[data-app-theme="dark"] .board-rich-wrap [style*="background:"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* 게시판 UI */
[data-app-theme="dark"] .board-cat-chip {
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
}
[data-app-theme="dark"] .board-cat-badge {
  background: var(--app-gold-soft);
  color: var(--app-gold);
}
[data-app-theme="dark"] .board-carpool-meta,
[data-app-theme="dark"] .board-rich__list li,
[data-app-theme="dark"] .board-guide__emph {
  background: var(--app-surface-muted);
  border-color: var(--app-border);
}
[data-app-theme="dark"] .board-rich__callout {
  background: var(--app-gold-soft);
}
[data-app-theme="dark"] .board-rich__tagline {
  color: var(--app-text-subtle);
}
[data-app-theme="dark"] .board-report-btn {
  color: var(--app-text-muted);
  background: var(--app-surface-muted);
  border-color: var(--app-border);
}
[data-app-theme="dark"] .board-report-btn--ghost {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.28);
}
[data-app-theme="dark"] .board-comment-form__input,
[data-app-theme="dark"] .board-write-input,
[data-app-theme="dark"] .board-write-textarea,
[data-app-theme="dark"] .board-modal__textarea {
  color: var(--app-text);
  background: var(--app-surface-muted);
  border-color: var(--app-border);
}
[data-app-theme="dark"] .board-modal__panel {
  background: var(--app-surface);
}
[data-app-theme="dark"] .board-reason-chip {
  color: var(--app-text);
  background: var(--app-surface-muted);
}
[data-app-theme="dark"] .board-modal__btn--ghost {
  color: var(--app-text-muted);
  background: var(--app-surface-muted);
}
[data-app-theme="dark"] .board-alert--warn {
  background: #422006;
  color: #fcd34d;
  border-color: #78350f;
}
[data-app-theme="dark"] .board-alert--warn a {
  color: #fbbf24;
}
[data-app-theme="dark"] .board-guide__section--warn {
  background: #431407;
  border-color: #9a3412;
}
[data-app-theme="dark"] .board-guide__section--warn h2 {
  color: #fb923c;
}
[data-app-theme="dark"] .board-pager__btn {
  background: var(--app-surface-muted);
  color: var(--app-text);
}

/* 테마 선택 UI */
.app-theme-picker__label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--app-text);
}

.app-modal--theme .app-modal__panel--theme {
  max-height: none;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
}

.app-theme-modal__hint {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--app-text-subtle);
  text-align: center;
}

.app-modal--theme .app-theme-picker__options {
  gap: 10px;
}

.app-modal--theme .app-theme-picker__btn {
  min-height: 80px;
}

.app-modal--theme .app-theme-picker__swatch {
  width: 32px;
  height: 32px;
}

.app-theme-picker__options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.app-theme-picker__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 8px 4px;
  border-radius: 12px;
  border: 1.5px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.app-theme-picker__btn:hover,
.app-theme-picker__btn:active {
  border-color: var(--app-color-primary);
  background: var(--app-surface-muted);
}

.app-theme-picker__btn.is-active {
  border-color: var(--app-color-primary);
  background: var(--app-color-primary-soft);
  box-shadow: 0 0 0 2px var(--app-color-primary-soft);
}

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

.app-theme-picker__swatch {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
  flex-shrink: 0;
}

.app-theme-picker__swatch--light {
  background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
}

.app-theme-picker__swatch--dark {
  background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
}

.app-theme-picker__swatch--green {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
}

.app-theme-picker__swatch--pink {
  background: linear-gradient(135deg, #f9a8d4 0%, #ec4899 100%);
}

.app-theme-picker__swatch--system {
  background: linear-gradient(135deg, #f8fafc 0%, #f8fafc 48%, #0f172a 52%, #0f172a 100%);
}

.app-theme-picker__name {
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--app-text);
  white-space: nowrap;
}

@media screen and (max-width: 380px) {
  .app-theme-picker__name {
    font-size: 9px;
  }
  .app-theme-picker__btn {
    min-height: 64px;
    gap: 4px;
  }
  .app-theme-picker__swatch {
    width: 24px;
    height: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════
   전 회원 앱 테마 — 기본 글자색·모달·폼 (light/dark/green/pink)
   ═══════════════════════════════════════════════════════════ */
body.app-body {
  color: var(--app-text);
}

body.app-body .app-card__title,
body.app-body .app-modal__title,
body.app-body .ticket-modal-list__name,
body.app-body .hero-card__name {
  color: var(--app-text) !important;
}

body.app-body .app-card__badge,
body.app-body .hero-card__meta,
body.app-body .ticket-modal-list__foot {
  color: var(--app-text-muted) !important;
}

body.app-body .ticket-modal-list__count {
  color: var(--app-gold) !important;
}

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

body.app-body .app-rank-tabs__btn {
  color: var(--app-text-muted) !important;
}

body.app-body .app-rank-tabs__btn.is-active {
  color: var(--app-gold) !important;
}

body.app-body .app-rank-list__name {
  color: var(--app-text) !important;
}

body.app-body .app-rank-list__score,
body.app-body .app-rank-list__pos {
  color: var(--app-text-muted) !important;
}

body.app-body .app-rank-my__score {
  color: var(--app-text) !important;
}