/* dark.css: data-theme 속성 우선, system 설정 fallback */

[data-theme="dark"] {
  --c-primary:       #3B82F6;
  --c-primary-hover: #2563EB;
  --c-primary-light: #1E3A5F;
  --c-accent:        #34D399;
  --c-accent-light:  #064E3B;
  --c-danger:        #F87171;
  --c-danger-light:  #3B1010;
  --c-warning:       #FBBF24;
  --c-warning-light: #451A03;

  --c-bg:        #0F172A;
  --c-surface:   #1E293B;
  --c-surface-2: #253347;
  --c-border:    #334155;
  --c-border-focus: #3B82F6;

  --c-text-1: #F1F5F9;
  --c-text-2: #94A3B8;
  --c-text-3: #64748B;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3),  0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-primary:       #3B82F6;
    --c-primary-hover: #2563EB;
    --c-primary-light: #1E3A5F;
    --c-accent:        #34D399;
    --c-accent-light:  #064E3B;
    --c-danger:        #F87171;
    --c-danger-light:  #3B1010;
    --c-warning:       #FBBF24;
    --c-warning-light: #451A03;

    --c-bg:        #0F172A;
    --c-surface:   #1E293B;
    --c-surface-2: #253347;
    --c-border:    #334155;
    --c-border-focus: #3B82F6;

    --c-text-1: #F1F5F9;
    --c-text-2: #94A3B8;
    --c-text-3: #64748B;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 28px rgba(0,0,0,0.5);
  }
}

/* dark 모드에서 input/select 배경색 보정 */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select {
  background: var(--c-surface);
  color: var(--c-text-1);
  color-scheme: dark;
}

[data-theme="dark"] .input-with-unit input,
[data-theme="dark"] .input-with-unit select {
  background: var(--c-surface);
  color: var(--c-text-1);
}

[data-theme="dark"] .input-with-unit .unit {
  background: var(--c-surface-2);
  border-left-color: var(--c-border);
}

[data-theme="dark"] .notice-card {
  background: #2D1F07;
  border-color: #78350F;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input[type="text"],
  :root:not([data-theme="light"]) input[type="number"],
  :root:not([data-theme="light"]) select {
    background: var(--c-surface);
    color: var(--c-text-1);
    color-scheme: dark;
  }

  :root:not([data-theme="light"]) .input-with-unit input,
  :root:not([data-theme="light"]) .input-with-unit select {
    background: var(--c-surface);
    color: var(--c-text-1);
  }

  :root:not([data-theme="light"]) .notice-card {
    background: #2D1F07;
    border-color: #78350F;
  }
}