/* MCWORLD Cloud design tokens — shared by the console, sign-in, public and
   policy pages. Light values here; dark values below. data-theme on <html>
   forces a mode, otherwise the browser preference decides. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --fill: #f0f0f3;
  --fill-hover: #e8e8ed;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #86868b;
  --line: rgba(0, 0, 0, .08);
  --line-strong: rgba(0, 0, 0, .18);
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-text: #0066cc;
  --accent-tint: rgba(0, 113, 227, .10);
  --on-accent: #fff;
  --success: #248a3d;
  --success-tint: rgba(36, 138, 61, .10);
  --warning: #b25000;
  --warning-tint: rgba(255, 149, 0, .14);
  --danger: #d70015;
  --danger-tint: rgba(215, 0, 21, .08);
  --neutral-tint: rgba(0, 0, 0, .05);
  --scrim: rgba(0, 0, 0, .32);
  --shadow-card: 0 0 0 1px rgba(0, 0, 0, .08);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 12px;
  --r-control: 8px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --control-h: 36px;
  --row-pad: 13px;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --dur: .2s;
  color-scheme: light;
}
:root[data-density="compact"] { --control-h: 32px; --row-pad: 8px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000; --surface: #1c1c1e; --surface-2: #232325; --fill: #2c2c2e; --fill-hover: #3a3a3c;
    --text: #f5f5f7; --text-2: #a1a1a6; --text-3: #8e8e93;
    --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .22);
    --accent: #2997ff; --accent-hover: #47a6ff; --accent-text: #2997ff; --accent-tint: rgba(41, 151, 255, .16);
    --success: #30d158; --success-tint: rgba(48, 209, 88, .14);
    --warning: #ff9f0a; --warning-tint: rgba(255, 159, 10, .16);
    --danger: #ff453a; --danger-tint: rgba(255, 69, 58, .14);
    --neutral-tint: rgba(255, 255, 255, .08); --scrim: rgba(0, 0, 0, .6);
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, .10);
    --shadow-pop: 0 12px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .10);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000; --surface: #1c1c1e; --surface-2: #232325; --fill: #2c2c2e; --fill-hover: #3a3a3c;
  --text: #f5f5f7; --text-2: #a1a1a6; --text-3: #8e8e93;
  --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .22);
  --accent: #2997ff; --accent-hover: #47a6ff; --accent-text: #2997ff; --accent-tint: rgba(41, 151, 255, .16);
  --success: #30d158; --success-tint: rgba(48, 209, 88, .14);
  --warning: #ff9f0a; --warning-tint: rgba(255, 159, 10, .16);
  --danger: #ff453a; --danger-tint: rgba(255, 69, 58, .14);
  --neutral-tint: rgba(255, 255, 255, .08); --scrim: rgba(0, 0, 0, .6);
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, .10);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .10);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.45 var(--font); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code, kbd, pre { font-family: var(--mono); font-size: .92em; }