:root {
  color-scheme: light;
  --ui-bg: #f3f5f8;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f7f8fa;
  --ui-text: #121a2a;
  --ui-muted: #5d6879;
  --ui-faint: #7d8796;
  --ui-line: #d9dee7;
  --ui-line-strong: #b7c0ce;
  --ui-brand: #215fe5;
  --ui-brand-hover: #174dc4;
  --ui-danger: #c4322a;
  --ui-danger-soft: #fff3f2;
  --ui-success: #087a55;
  --ui-success-soft: #edf8f3;
  --ui-navy: #0b1d3b;
  --ui-navy-soft: #112b55;
  --ui-ring: rgba(33, 95, 229, 0.24);
  --ui-font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", system-ui, sans-serif;

}

html[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #0c1018;
  --ui-surface: #141a25;
  --ui-surface-subtle: #1a2230;
  --ui-text: #edf1f7;
  --ui-muted: #a7b0bf;
  --ui-faint: #858fa0;
  --ui-line: #2b3546;
  --ui-line-strong: #445066;
  --ui-brand: #4d83f2;
  --ui-brand-hover: #6596f7;
  --ui-danger: #ff8279;
  --ui-danger-soft: #2b1718;
  --ui-success: #51c89b;
  --ui-success-soft: #13271f;
  --ui-navy: #08152d;
  --ui-navy-soft: #10264a;
  --ui-ring: rgba(77, 131, 242, 0.3);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--ui-bg);
  font-family: var(--ui-font);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ui-text);
  background: var(--ui-bg);
  font-family: inherit;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ui-brand);
  font-weight: 650;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

input[type="text"],
input[type="password"],
input[type="email"],
input:not([type]) {
  width: 100%;
  height: 48px;
  padding: 0 13px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 6px;
  outline: none;
  background: var(--ui-surface);
  color: var(--ui-text);
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

input::placeholder {
  color: var(--ui-faint);
}

input:focus {
  border-color: var(--ui-brand);
  box-shadow: 0 0 0 3px var(--ui-ring);
}

input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--ui-brand);
}

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 6px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: 14px;
  font-weight: 700;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.ui-button:hover {
  background: var(--ui-surface-subtle);
  text-decoration: none;
}

.ui-button--primary {
  border-color: var(--ui-brand);
  background: var(--ui-brand);
  color: #fff;
}

.ui-button--primary:hover {
  border-color: var(--ui-brand-hover);
  background: var(--ui-brand-hover);
  color: #fff;
}

.ui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--ui-brand);
  outline-offset: 3px;
}

::selection {
  background: rgba(33, 95, 229, 0.18);
}