:root {
  --ds-bg: #f7f8fa;
  --ds-surface: #ffffff;
  --ds-surface-alt: #eef1f4;
  --ds-text: #171c21;
  --ds-muted: #4d5966;
  --ds-line: #d5dce3;
  --ds-border: #778592;
  --ds-accent: #0f62fe;
  --ds-on-accent: #ffffff;
  --ds-focus: #005fcc;
  --ds-danger: #ac2340;
  --ds-radius: 6px;
  --ds-control: 44px;
  --ds-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  --control-h: 44px;
  --tap-min: 44px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ds-bg: #151719;
    --ds-surface: #202427;
    --ds-surface-alt: #2c3238;
    --ds-text: #f4f6f8;
    --ds-muted: #bac4ce;
    --ds-line: #49545f;
    --ds-border: #8796a5;
    --ds-accent: #94bfff;
    --ds-on-accent: #102039;
    --ds-focus: #94bfff;
    --ds-danger: #ff9cb0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ds-bg: #151719;
  --ds-surface: #202427;
  --ds-surface-alt: #2c3238;
  --ds-text: #f4f6f8;
  --ds-muted: #bac4ce;
  --ds-line: #49545f;
  --ds-border: #8796a5;
  --ds-accent: #94bfff;
  --ds-on-accent: #102039;
  --ds-focus: #94bfff;
  --ds-danger: #ff9cb0;
  color-scheme: dark;
}
html[data-os-design="1"] {
  font-family: var(--ds-font);
  letter-spacing: 0;
  scroll-padding-block: 24px;
}
html[data-os-design="1"] body {
  margin: 0;
  font-family: var(--ds-font);
  font-size: 16px;
  line-height: 24px;
  color: var(--ds-text);
  background: var(--ds-bg);
}
html[data-os-design="1"] :where(button, input, select, textarea) {
  font: inherit;
  letter-spacing: 0;
  max-width: 100%;
}
html[data-os-design="1"] :where(button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), summary, a[role="button"]) {
  min-height: var(--ds-control);
}
html[data-os-design="1"] :where(button, a[role="button"]) {
  overflow-wrap: anywhere;
  white-space: normal;
  touch-action: manipulation;
}
html[data-os-design="1"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]), select, textarea) {
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
  border-color: var(--ds-border);
  color: var(--ds-text);
  background-color: var(--ds-surface);
  border-radius: var(--ds-radius);
}
html[data-os-design="1"] :where(input[type="range"]) { width: 100%; }
html[data-os-design="1"] :where(input[type="color"]) { min-width: 44px; }
html[data-os-design="1"] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
  min-height: 44px;
  min-width: 44px;
}
html[data-os-design="1"] :focus-visible {
  outline: 3px solid var(--ds-focus);
  outline-offset: 3px;
  scroll-margin-block: 24px;
}
html[data-os-design="1"] :where(input[type="date"], input[type="datetime-local"], input[type="time"]):focus-within {
  outline: 3px solid var(--ds-focus);
  outline-offset: 3px;
}
html[data-os-design="1"] :where(h1, h2, h3, label, legend, button, summary) { letter-spacing: 0; }
html[data-os-design="1"] :where(h1) { font-size: 24px; line-height: 32px; }
html[data-os-design="1"] :where(h2) { font-size: 20px; line-height: 28px; }
html[data-os-design="1"] :where(h3) { font-size: 16px; line-height: 24px; }
html[data-os-design="1"] :where(img, canvas, svg) { max-width: 100%; }
html[data-os-design="1"] :where(dialog) {
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  max-width: calc(100% - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
.os-theme-controls {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: center;
  gap: 4px;
  padding: 4px;
  margin: 8px 0;
  border: 1px solid var(--ds-line);
  border-radius: 8px;
  background: var(--ds-surface);
}
.os-theme-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ds-muted);
  box-shadow: none;
}
.os-theme-controls button[aria-pressed="true"] {
  background: var(--ds-accent);
  color: var(--ds-on-accent);
  border-color: var(--ds-accent);
}
.os-theme-controls button:hover:not([aria-pressed="true"]) {
  background: var(--ds-surface-alt);
  color: var(--ds-text);
}
.os-theme-controls svg { display: block; width: 20px; height: 20px; flex: none; }
html[data-os-design="1"] #theme-toggle[hidden] { display: none !important; }
.os-skip-link {
  position: fixed;
  z-index: 10000;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  padding: 12px 16px;
  border-radius: 6px;
  background: var(--ds-surface);
  color: var(--ds-text);
  border: 1px solid var(--ds-border);
}
.os-skip-link:focus { transform: translateY(0); }
@media (max-width: 600px) {
  html[data-os-design="1"] :where(input, select, textarea) { font-size: 16px; }
  .os-theme-controls { margin-block: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-os-design="1"] *, html[data-os-design="1"] *::before, html[data-os-design="1"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media print { .os-theme-controls, .os-skip-link { display: none !important; } }