/* 선택한 테마 색을 버튼뿐 아니라 앱 전체 표면/배경/테두리/글자에 반영 */
body[data-mode="light"] {
  --bg: color-mix(in srgb, var(--accent) 7%, #fbfcff);
  --surface: color-mix(in srgb, var(--accent) 3%, rgba(255,255,255,.94));
  --surface-strong: color-mix(in srgb, var(--accent) 4%, #ffffff);
  --panel: color-mix(in srgb, var(--accent) 10%, #f7f8fc);
  --line: color-mix(in srgb, var(--accent) 16%, #e9ebf1);
  --line-strong: color-mix(in srgb, var(--accent) 22%, #dde1e9);
  --text: color-mix(in srgb, var(--accent) 28%, #1f2430);
  --muted: color-mix(in srgb, var(--accent) 34%, #7c8498);
}

body[data-mode="dark"] {
  --bg: color-mix(in srgb, var(--accent) 8%, #15171e);
  --surface: color-mix(in srgb, var(--accent) 6%, rgba(31,34,45,.96));
  --surface-strong: color-mix(in srgb, var(--accent) 7%, #222531);
  --panel: color-mix(in srgb, var(--accent) 9%, #1d2029);
  --line: color-mix(in srgb, var(--accent) 18%, #313644);
  --line-strong: color-mix(in srgb, var(--accent) 24%, #3f4553);
  --text: color-mix(in srgb, var(--accent) 24%, #f1f3f8);
  --muted: color-mix(in srgb, var(--accent) 34%, #9ca4b7);
}

body {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 14%, transparent), transparent 30rem),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34rem),
    var(--bg) !important;
}

.topbar {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg)) !important;
  border-bottom-color: var(--line) !important;
}

.search-wrap input,
.modal-card,
.modal-head,
.icon-choice,
.color-input-row input,
.form-row input,
.form-row select,
.form-row textarea {
  background: var(--surface-strong) !important;
  border-color: var(--line-strong) !important;
}

.status-strip {
  background: color-mix(in srgb, var(--accent) 11%, var(--bg)) !important;
  border-color: var(--line) !important;
}

.category-card {
  background: color-mix(in srgb, var(--accent) 3%, var(--surface)) !important;
  border-color: var(--line) !important;
}

.category-head {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 13%, var(--surface-strong)),
    color-mix(in srgb, var(--accent) 5%, var(--surface))
  ) !important;
  border-color: var(--line) !important;
}

.group + .group {
  border-top-color: var(--line) !important;
}

.link-row:hover,
body.edit-mode .link-row:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel)) !important;
}

.count-badge,
.sync-card,
.custom-theme-panel,
.custom-icon-fields,
.empty-state {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-strong)) !important;
  border-color: var(--line) !important;
}

.btn,
.icon-btn,
.chip,
.theme-option {
  border-color: color-mix(in srgb, var(--accent) 18%, #dfe3eb) !important;
  background: color-mix(in srgb, var(--accent) 9%, #f1f3f7) !important;
  color: var(--text) !important;
}

.btn:hover,
.icon-btn:hover,
.chip:hover,
.theme-option:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, #dfe3eb) !important;
  background: color-mix(in srgb, var(--accent) 16%, #f3f3ff) !important;
  color: var(--accent-strong) !important;
}

.btn.primary,
.pan-edit-toggle.is-editing {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: #fff !important;
}

.chip.active,
.theme-option.active {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line)) !important;
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
}

.add-inline:hover,
.group.drag-over {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

.brand-mark {
  background: var(--accent) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

.brand strong,
.category-title strong,
.link-title,
.group-name,
.status-strip strong,
.modal-head h2,
.form-row label,
.custom-theme-panel > label,
.sync-card strong {
  color: var(--text) !important;
}

.brand span,
.link-host,
.status-help,
#summaryText,
.helper,
.sync-card p,
.icon-choice small {
  color: var(--muted) !important;
}

.pan-context-menu button:hover:not(:disabled) {
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
}

.pan-text-color-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body[data-custom-text-color="true"] .btn:not(.primary),
body[data-custom-text-color="true"] .icon-btn,
body[data-custom-text-color="true"] .chip,
body[data-custom-text-color="true"] .theme-option,
body[data-custom-text-color="true"] .btn:hover:not(.primary),
body[data-custom-text-color="true"] .icon-btn:hover,
body[data-custom-text-color="true"] .chip:hover,
body[data-custom-text-color="true"] .theme-option:hover,
body[data-custom-text-color="true"] .chip.active,
body[data-custom-text-color="true"] .theme-option.active,
body[data-custom-text-color="true"] .pan-context-menu button {
  color: var(--text) !important;
}

@media (max-width: 520px) {
  .pan-text-color-actions {
    grid-template-columns: 1fr;
  }
}