:root {
  color-scheme: light;
  --pn-bg-main: #f4f7f6;
  --pn-bg-container: #ffffff;
  --pn-text-main: #333333;
  --pn-text-muted: #555555;
  --pn-text-light: #7f8c8d;
  --pn-border-main: #d7e5e4;
  --pn-border-light: #e0e6e7;
  
  --pn-btn-primary-bg: #0f766e;
  --pn-btn-primary-hover-bg: #115e59;
  --pn-btn-primary-text: #ffffff;
  --pn-btn-primary-border: #0f766e;

  --pn-btn-secondary-bg: #ecf0f1;
  --pn-btn-secondary-hover-bg: #dfe8e7;
  --pn-btn-secondary-text: #0f766e;
  --pn-btn-secondary-border: #d6e2e1;

  --pn-pill-bg: #ecf8f6;
  --pn-pill-hover-bg: #0f766e;
  --pn-pill-text: #0f766e;
  --pn-pill-hover-text: #ffffff;
  --pn-pill-border: #b7d9d5;

  --pn-card-bg: #ffffff;
  --pn-card-border: #e0eceb;
  --pn-card-text: #3c4b50;
  --pn-card-heading: #115E59;

  --pn-input-bg: #f7fcfb;
  --pn-input-border: #c6d9d6;
  --pn-input-text: #163a40;

  --pn-footer-bg: #ecf0f1;
  --pn-footer-text: #7f8c8d;
  --pn-btn-disabled-bg: #93a1a1;

  --pn-option-bg: #ecf0f1;
  --pn-option-hover-bg: #e0e6e7;
  --pn-note-bg: #f4fbfa;
  --pn-note-border: #0f766e;
}

[data-theme="dark"] {
  color-scheme: dark;
  --pn-bg-main: #0b1520;
  --pn-bg-container: #132232;
  --pn-text-main: #9be5db;
  --pn-text-muted: #76d9ca;
  --pn-text-light: #6e879d;
  --pn-border-main: #294156;
  --pn-border-light: #2c465d;

  --pn-btn-primary-bg: #0f766e;
  --pn-btn-primary-hover-bg: #1f3549;
  --pn-btn-primary-text: #ffffff;
  --pn-btn-primary-border: #0f766e;

  --pn-btn-secondary-bg: #182a3b;
  --pn-btn-secondary-hover-bg: #1f3549;
  --pn-btn-secondary-text: #9be5db;
  --pn-btn-secondary-border: #2c465d;

  --pn-pill-bg: #182a3b;
  --pn-pill-hover-bg: #1f3549;
  --pn-pill-text: #9be5db;
  --pn-pill-hover-text: #ffffff;
  --pn-pill-border: #2c465d;

  --pn-card-bg: #182a3b;
  --pn-card-border: #2c465d;
  --pn-card-text: #9be5db;
  --pn-card-heading: #e7f0fa;

  --pn-input-bg: #132739;
  --pn-input-border: #35516a;
  --pn-input-text: #e5f1fb;

  --pn-footer-bg: #182a3b;
  --pn-footer-text: #76d9ca;
  --pn-btn-disabled-bg: #35516a;

  --pn-option-bg: #182a3b;
  --pn-option-hover-bg: #1f3549;
  --pn-note-bg: #132739;
  --pn-note-border: #35516a;
}

html {
  scrollbar-gutter: stable;
}

.theme-toggle {
  position: fixed;
  top: 14px;
  right: 16px; /* [2026-03-01] 버튼을 오른쪽 끝으로 정렬 (기존 104px에서 16px로 변경) */
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.58rem 0.84rem;
  border-radius: 999px;
  border: 1px solid var(--pn-border-main);
  background: transparent;
  color: var(--pn-card-heading);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: var(--pn-pill-bg);
}

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

[data-theme="dark"] .theme-toggle {
  background: transparent;
}

@media (max-width: 720px) {
  .theme-toggle {
    top: 12px;
    right: 12px; /* 모바일에서 더 바짝 붙임 */
  }
}

/* System UI Dark Mode Refinement */
[data-theme="dark"] ::selection {
  background-color: #14b8a6;
  color: #ffffff;
}

[data-theme="dark"] {
  scrollbar-color: #2c465d #0b1520;
}