:root {
  --canvas: #f4f5f7;
  --surface: #fff;
  --surface-2: #f8f8fa;
  --ink: #111318;
  --ink-2: #555b67;
  --ink-3: #858b97;
  --line: #dedfe4;
  --line-strong: #b7bbc4;
  --brand: #6c60e4;
  --brand-strong: #5f54da;
  --brand-soft: #eeecff;
  --on-brand: #fff;
  --success: #16704a;
  --danger: #b52a2a;
  --danger-soft: #fff1f1;
  --danger-line: #f0caca;
  --story-glow: rgb(255 255 255 / 86%);
  --story-start: #f2efff;
  --story-middle: #dfe8fa;
  --story-end: #fbf5ee;
  --story-grid: rgb(95 84 218 / 12%);
  --story-shadow: rgb(74 64 160 / 18%);
  --control-shadow: 0 18px 50px rgb(17 19 24 / 7%);
  color: var(--ink);
  background: var(--canvas);
  color-scheme: light;
  font-family: Inter, Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

html[data-theme="dark"] {
  --canvas: #0b0d12;
  --surface: #12141a;
  --surface-2: #171a21;
  --ink: #f2f2f4;
  --ink-2: #b2b5bd;
  --ink-3: #7e838e;
  --line: #292d36;
  --line-strong: #484e5a;
  --brand: #9f96ff;
  --brand-strong: #b7b0ff;
  --brand-soft: #28243f;
  --on-brand: #11121a;
  --success: #58c692;
  --danger: #ff8585;
  --danger-soft: #261719;
  --danger-line: #5a2b30;
  --story-glow: rgb(159 150 255 / 10%);
  --story-start: #151326;
  --story-middle: #111827;
  --story-end: #1a1618;
  --story-grid: rgb(159 150 255 / 10%);
  --story-shadow: rgb(0 0 0 / 32%);
  --control-shadow: 0 24px 56px rgb(0 0 0 / 22%);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --canvas: #0b0d12;
    --surface: #12141a;
    --surface-2: #171a21;
    --ink: #f2f2f4;
    --ink-2: #b2b5bd;
    --ink-3: #7e838e;
    --line: #292d36;
    --line-strong: #484e5a;
    --brand: #9f96ff;
    --brand-strong: #b7b0ff;
    --brand-soft: #28243f;
    --on-brand: #11121a;
    --success: #58c692;
    --danger: #ff8585;
    --danger-soft: #261719;
    --danger-line: #5a2b30;
    --story-glow: rgb(159 150 255 / 10%);
    --story-start: #151326;
    --story-middle: #111827;
    --story-end: #1a1618;
    --story-grid: rgb(159 150 255 / 10%);
    --story-shadow: rgb(0 0 0 / 32%);
    --control-shadow: 0 24px 56px rgb(0 0 0 / 22%);
    color-scheme: dark;
  }
  html[data-theme="system"] .story-navi { opacity: .88; filter: brightness(.72) saturate(.92) drop-shadow(0 28px 44px var(--story-shadow)); }
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
button, input { color: inherit; font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.login { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); }
.login-story { position: relative; display: flex; min-height: 100vh; padding: clamp(32px, 5vw, 68px); overflow: hidden; background: radial-gradient(circle at 72% 28%, var(--story-glow), transparent 28%), linear-gradient(145deg, var(--story-start) 0%, var(--story-middle) 55%, var(--story-end) 100%); flex-direction: column; isolation: isolate; }
.login-story::before { position: absolute; z-index: -1; inset: 0; opacity: .2; background-image: linear-gradient(var(--story-grid) 1px, transparent 1px), linear-gradient(90deg, var(--story-grid) 1px, transparent 1px); background-size: 52px 52px; content: ""; mask-image: linear-gradient(135deg, #000, transparent 68%); }
.login-brand { display: inline-flex; width: fit-content; color: var(--ink); align-items: center; gap: 11px; font-size: 1rem; font-weight: 880; letter-spacing: -.04em; text-decoration: none; }
.login-brand img { background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); border-radius: 12px; box-shadow: var(--control-shadow); }
.story-copy { z-index: 2; max-width: 720px; margin: auto 0; }
.story-copy > p { margin: 0 0 18px; color: var(--brand-strong); font-size: .63rem; font-weight: 820; letter-spacing: .11em; }
.story-copy h1 { margin: 0 0 24px; font-size: clamp(3rem, 5.7vw, 6rem); line-height: .96; letter-spacing: -.075em; }
.story-copy > span { display: block; max-width: 52%; color: var(--ink-2); font-size: .9rem; line-height: 1.7; }
.story-navi { position: absolute; z-index: 1; right: -1%; bottom: -5%; width: min(28vw, 360px); height: auto; filter: drop-shadow(0 28px 44px var(--story-shadow)); mask-image: radial-gradient(ellipse at center, #000 48%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse at center, #000 48%, transparent 76%); transform: rotate(-3deg); }
html[data-theme="dark"] .story-navi { opacity: .88; filter: brightness(.72) saturate(.92) drop-shadow(0 28px 44px var(--story-shadow)); }
.story-foot { z-index: 2; margin: 0; color: var(--brand-strong); font-family: Georgia, serif; font-size: .78rem; font-style: italic; }
.login-control { position: relative; display: grid; min-height: 100vh; padding: clamp(28px, 6vw, 82px); background: var(--canvas); place-items: center; }
.login-theme { position: absolute; top: clamp(20px, 3vw, 32px); right: clamp(20px, 3vw, 32px); display: inline-flex; min-height: 38px; padding: 8px 11px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; align-items: center; gap: 7px; box-shadow: 0 1px 2px rgb(17 19 24 / 4%); transition: color 140ms cubic-bezier(.2,.8,.2,1), border-color 140ms cubic-bezier(.2,.8,.2,1), background 140ms cubic-bezier(.2,.8,.2,1); }
.login-theme:hover { color: var(--ink); background: var(--surface-2); border-color: var(--line-strong); }
.login-theme svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-theme span { font-size: .62rem; font-weight: 700; }
.theme-sun { display: none; }
html[data-resolved-theme="dark"] .theme-moon { display: none; }
html[data-resolved-theme="dark"] .theme-sun { display: block; }
.login-card { display: grid; width: min(100%, 420px); gap: 14px; }
.login-card header { margin-bottom: 12px; }
.private-label { display: inline-flex; margin-bottom: 20px; color: var(--ink-2); align-items: center; gap: 7px; font-size: .6rem; font-weight: 820; letter-spacing: .08em; }
.private-label i { width: 7px; height: 7px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 10%, transparent); }
.login-card h2 { margin: 0 0 9px; font-size: 2rem; letter-spacing: -.055em; }
.login-card header p { margin: 0; color: var(--ink-2); font-size: .76rem; }
.login-card label { display: grid; gap: 6px; }
.login-card label span { font-size: .68rem; font-weight: 720; }
.login-card input { width: 100%; min-height: 48px; padding: 10px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; outline: 0; }
.login-card input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.login-card > button { display: flex; min-height: 48px; margin-top: 5px; padding: 10px 15px; color: var(--on-brand); background: var(--brand); border: 0; border-radius: 10px; cursor: pointer; align-items: center; justify-content: space-between; font-weight: 730; box-shadow: 0 10px 28px color-mix(in srgb, var(--brand) 23%, transparent); transition: transform 140ms cubic-bezier(.2,.8,.2,1), box-shadow 140ms cubic-bezier(.2,.8,.2,1); }
.login-card > button:hover { box-shadow: 0 13px 34px color-mix(in srgb, var(--brand) 29%, transparent); transform: translateY(-1px); }
.login-card footer { display: grid; margin-top: 8px; padding-top: 16px; color: var(--ink-2); border-top: 1px solid var(--line); gap: 4px; font-size: .62rem; }
.login-error { padding: 10px 12px; color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-line); border-radius: 9px; font-size: .68rem; }
.control-foot { position: absolute; bottom: 24px; color: var(--ink-3); font-size: .52rem; font-weight: 780; letter-spacing: .09em; }
.control-foot i { margin: 0 5px; color: var(--brand-strong); font-style: normal; }

@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-story { min-height: 440px; padding: 28px 22px; }
  .story-copy h1 { font-size: clamp(2.8rem, 11vw, 4.5rem); }
  .story-copy > span { max-width: 65%; font-size: .78rem; }
  .story-navi { right: -10%; bottom: -8%; width: min(58vw, 360px); }
  .login-control { min-height: 560px; padding: 72px 22px 78px; }
}

@media (max-width: 500px) {
  .login-story { min-height: 520px; }
  .story-copy h1 { font-size: 2.7rem; }
  .story-copy > span { max-width: 58%; font-size: .7rem; }
  .story-navi { right: -4%; bottom: -2%; width: 50vw; }
  html[data-theme="dark"] .story-navi { opacity: .78; filter: brightness(.92) saturate(.95) drop-shadow(0 22px 36px var(--story-shadow)); }
  .login-card h2 { font-size: 1.75rem; }
  .login-theme span { display: none; }
}

@media (max-width: 500px) and (prefers-color-scheme: dark) {
  html[data-theme="system"] .story-navi { opacity: .78; filter: brightness(.92) saturate(.95) drop-shadow(0 22px 36px var(--story-shadow)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}