/* LAPPIT 공통 디자인 토큰. Flutter 대응표: docs/DESIGN-SYSTEM.md */
@font-face {
  font-family: "Pretendard";
  src: url("/assets/fonts/PretendardVariable-v1.3.9.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ms-bg: #0d0f12;
  --ms-bg-sunken: #07080a;
  --ms-surface: #14171c;
  --ms-surface-raised: #1b1f26;
  --ms-border: #262b34;
  --ms-border-strong: #39414e;
  --ms-fg: #f4f6f9;
  --ms-fg-secondary: #9aa4b2;
  --ms-fg-muted: #7c8898;
  --ms-accent: #51b7ff;
  --ms-accent-hover: #7ac8ff;
  --ms-accent-muted: #142f46;
  --ms-brand-deep-blue: #2458d3;
  --ms-performance-blue: #51b7ff;
  --ms-performance-deep-blue: #2458d3;
  --ms-performance-red: #ff5449;
  --ms-on-accent: #07080a;
  --ms-success: #3ddc84;
  --ms-warning: #ffd028;
  --ms-danger: #ff5449;
  --ms-timing-best: #4cc2ff;
  --ms-data-low: #4cc2ff;
  --ms-space-xs: 4px;
  --ms-space-sm: 8px;
  --ms-space-md: 12px;
  --ms-space-lg: 16px;
  --ms-space-xl: 24px;
  --ms-space-xxl: 32px;
  --ms-radius-sm: 6px;
  --ms-radius-control: 10px;
  --ms-radius-panel: 14px;
  --ms-radius-large: 20px;
  --ms-control-height: 48px;
  --ms-primary-height: 52px;
  --ms-login-max-width: 480px;
  --ms-content-max-width: 1440px;
  --ms-font-sans: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ms-font-mono: var(--ms-font-sans);
}

/* 적용 범위를 지정해 다른 서비스의 기존 스타일을 변경하지 않는다. */
.ms-app {
  margin: 0;
  background: var(--ms-bg);
  color: var(--ms-fg);
  font: 400 14px/1.5 var(--ms-font-sans);
  -webkit-font-smoothing: antialiased;
}

.ms-app, .ms-app *, .ms-app *::before, .ms-app *::after { box-sizing: border-box; }
.ms-app :is(button, input, select, textarea) { font: inherit; }
.ms-app :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ms-accent);
  outline-offset: 3px;
}

.ms-content {
  width: min(100%, var(--ms-content-max-width));
  margin-inline: auto;
  padding: var(--ms-space-xl);
}

.ms-auth-layout {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: var(--ms-space-xl);
}

.ms-auth-panel {
  width: min(100%, var(--ms-login-max-width));
  padding: var(--ms-space-xxl);
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-large);
}

.ms-heading { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; }
.ms-section-heading { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 600; }
.ms-muted { color: var(--ms-fg-secondary); }
.ms-number { font-variant-numeric: tabular-nums; }
.ms-stack { display: grid; gap: var(--ms-space-lg); }
.ms-field { display: grid; gap: var(--ms-space-sm); font-weight: 500; }
.ms-field :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: var(--ms-primary-height);
  padding: var(--ms-space-md) var(--ms-space-lg);
  color: var(--ms-fg);
  background: var(--ms-surface-raised);
  border: 1px solid var(--ms-border-strong);
  border-radius: var(--ms-radius-control);
}
.ms-field input::placeholder, .ms-field textarea::placeholder { color: var(--ms-fg-secondary); }
.ms-field [aria-invalid="true"] { border-color: var(--ms-danger); }
.ms-field-error { color: var(--ms-danger); font-size: 13px; font-weight: 400; }
.ms-field :disabled { opacity: .5; cursor: not-allowed; }

.ms-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-sm);
  width: fit-content;
  max-width: 100%;
  min-height: var(--ms-control-height);
  padding: var(--ms-space-md) var(--ms-space-xl);
  border: 1px solid var(--ms-border-strong);
  border-radius: var(--ms-radius-control);
  background: var(--ms-surface);
  color: var(--ms-fg);
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.ms-button--primary {
  min-height: var(--ms-primary-height);
  background: var(--ms-accent);
  color: var(--ms-on-accent);
  border-color: transparent;
}
.ms-button--full { width: 100%; }
.ms-button:hover:not(:disabled):not([aria-busy="true"]) { background: var(--ms-surface-raised); }
.ms-button--primary:hover:not(:disabled):not([aria-busy="true"]) { background: var(--ms-accent-hover); }
.ms-button:disabled:not([aria-busy="true"]) { opacity: .4; cursor: not-allowed; }
.ms-button[aria-busy="true"] { cursor: progress; }

.ms-panel {
  padding: var(--ms-space-xl);
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-panel);
}
.ms-tabs { display: flex; gap: var(--ms-space-sm); overflow-x: auto; padding: var(--ms-space-sm); }
.ms-tab {
  flex: 0 0 auto;
  min-height: var(--ms-control-height);
  padding: var(--ms-space-md) var(--ms-space-lg);
  border: 1px solid transparent;
  border-radius: var(--ms-radius-control);
  color: var(--ms-fg-secondary);
  background: transparent;
  font-weight: 600;
  cursor: pointer;
}
.ms-tab[aria-selected="true"], .ms-tab[aria-current="page"] {
  color: var(--ms-accent);
  background: var(--ms-accent-muted);
  border-color: var(--ms-accent);
}
.ms-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-sm);
  padding: var(--ms-space-xs) var(--ms-space-sm);
  border: 1px solid currentColor;
  border-radius: var(--ms-radius-sm);
  font-size: 12px;
  font-weight: 500;
}
.ms-badge--warning { color: var(--ms-warning); }
.ms-badge--danger { color: var(--ms-danger); }
.ms-badge--success { color: var(--ms-success); }

@media (max-width: 599px) {
  .ms-content, .ms-auth-layout { padding: var(--ms-space-lg); }
  .ms-auth-panel { padding: var(--ms-space-xl); }
}

/* 넓어지면 패널을 나눈다. 입력칸·버튼을 화면 폭으로 확대하지 않는다. */
@media (min-width: 1000px) {
  .ms-grid--wide { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--ms-space-xl); }
}