@font-face { font-family: Pretendard; font-weight: 400; font-display: swap; src: url(/fonts/Pretendard-Regular.woff2) format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 700; font-display: swap; src: url(/fonts/Pretendard-Bold.woff2) format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 800; font-display: swap; src: url(/fonts/Pretendard-ExtraBold.woff2) format("woff2"); }

:root {
  --ink: #0A2A4F;
  --muted: #5B6B80;
  --line: #E3E8EF;
  --soft: #F4F6F9;
  --bg: #FFFFFF;
  --accent: #127A82;
  --warm: #E0702E;
  --danger: #C2412D;
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: Pretendard, system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
.hidden { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 56px; padding: 0 28px; border-radius: 999px;
  border: 2px solid var(--line); background: #fff;
  font-weight: 700; font-size: 18px;
  transition: transform .12s ease, background .2s ease;
  text-decoration: none; color: var(--ink);
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.big { min-height: 76px; font-size: 26px; padding: 0 44px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn svg { width: 1.2em; height: 1.2em; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px);
  background: var(--ink); color: #fff; padding: 14px 22px; border-radius: 14px;
  font-weight: 700; opacity: 0; pointer-events: none; transition: .25s ease; z-index: 99;
  max-width: calc(100% - 32px); text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.card {
  border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; padding: 22px;
}
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field > span { font-weight: 700; }
.field small { color: var(--muted); }
.field input[type=text], .field input[type=password], .field input:not([type]), .field select {
  min-height: 52px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-size: 17px;
}
.pin-gate {
  min-height: 100%; display: grid; place-items: center; padding: 24px;
}
.pin-gate form { width: min(420px, 100%); display: grid; gap: 16px; text-align: center; }
.pin-gate h1 { margin: 0; font-size: 28px; }
.pin-gate p { margin: 0; color: var(--muted); }
.pin-gate input {
  min-height: 64px; font-size: 28px; text-align: center; letter-spacing: .2em;
  border: 2px solid var(--line); border-radius: 14px;
}