:root {
  font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif;
  color: #15243b;
  background: #eef3f8;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #071a33 0 47%, #eef3f8 47% 100%);
}

.shell {
  width: min(1080px, calc(100% - 40px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 72px;
  align-items: center;
}

.brand { color: #fff; }
.eyebrow { color: #65d1c2; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 18px 0; font-size: clamp(34px, 4vw, 54px); line-height: 1.24; }
.brand-copy { max-width: 520px; color: #c8d4e4; font-size: 18px; line-height: 1.7; }
.trust-list { margin: 34px 0 0; padding: 0; list-style: none; color: #dce6f2; }
.trust-list li { margin: 14px 0; padding-left: 28px; position: relative; }
.trust-list li::before { content: "✓"; position: absolute; left: 0; color: #65d1c2; font-weight: 900; }

.card {
  min-height: 500px;
  padding: 44px;
  border-radius: 24px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 24px 70px rgba(4, 21, 42, .2);
  display: grid;
  align-items: center;
}

.state[hidden] { display: none; }
h2 { margin: 14px 0 8px; font-size: 28px; }
.subcopy { color: #637188; line-height: 1.6; margin: 0 0 28px; }
.badge { display: inline-flex; width: fit-content; padding: 6px 10px; border-radius: 999px; background: #e3f7f3; color: #08796a; font-size: 13px; font-weight: 800; }
.badge.warning { background: #fff2cc; color: #7b5a00; }
.badge.danger { background: #ffe1e1; color: #a21b1b; }

label { display: block; margin: 18px 0 7px; font-weight: 750; }
input {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #c8d1dd;
  border-radius: 10px;
  font: inherit;
  color: inherit;
  background: #fff;
}
input:focus { outline: 3px solid rgba(20, 125, 181, .22); border-color: #147db5; }
button {
  width: 100%;
  min-height: 49px;
  margin-top: 24px;
  border: 0;
  border-radius: 10px;
  background: #0b5f88;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
button:hover { background: #084e70; }
button:focus-visible { outline: 3px solid #65d1c2; outline-offset: 3px; }
button.secondary { background: transparent; color: #46566c; border: 1px solid #c8d1dd; }
.error { padding: 12px; border-radius: 8px; background: #fff0f0; color: #9a2020; }
.spinner { width: 38px; height: 38px; border: 4px solid #dbe5ef; border-top-color: #0b5f88; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  body { background: #eef3f8; }
  .shell { width: min(100% - 24px, 520px); grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .brand { color: #15243b; }
  .brand-copy, .trust-list { color: #526176; }
  .eyebrow, .trust-list li::before { color: #08796a; }
  h1 { font-size: 34px; }
  .card { min-height: 440px; padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}