:root{
  --bg:#f5f5f7;
  --card:rgba(255,255,255,.72);
  --stroke:rgba(0,0,0,.08);
  --text:#1d1d1f;
  --muted:#6e6e73;
  --blue:#0071e3;
  --blue-press:#0062c4;
  --ok:#30a46c;
  --no:#e5484d;
  --radius:22px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#000;
    --card:rgba(28,28,30,.72);
    --stroke:rgba(255,255,255,.1);
    --text:#f5f5f7;
    --muted:#98989d;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);color:var(--text);
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
.bg-orb{position:fixed;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;z-index:0}
.orb-a{width:520px;height:520px;background:#7aa8ff;top:-180px;left:-140px}
.orb-b{width:460px;height:460px;background:#ffb3d1;bottom:-180px;right:-120px}
@media (prefers-color-scheme: dark){.bg-orb{opacity:.28}}

.wrap{position:relative;z-index:1;width:100%;padding:24px;display:flex;justify-content:center}

.card{
  width:100%;max-width:400px;padding:34px 34px 26px;
  background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);
  backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
  box-shadow:0 22px 60px rgba(0,0,0,.14);
  text-align:center;
  animation:rise .5s cubic-bezier(.22,1,.36,1);
}

/* ── 최초 진입 애니메이션이 끝나면 .ready 가 붙어 카드 자체 애니메이션을 끕니다.
      shake 클래스를 떼는 순간 rise 가 재실행되어 화면이 한 번 더 덮어씌워지던
      문제를 이 규칙으로 차단합니다. (순서 중요: .card 규칙보다 뒤에 위치) ── */
.card.ready{animation:none}
.card.ready.shake{animation:shake .38s cubic-bezier(.36,.07,.19,.97)}

@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes shake{
  10%,90%{transform:translateX(-6px)}
  20%,80%{transform:translateX(7px)}
  30%,50%,70%{transform:translateX(-8px)}
  40%,60%{transform:translateX(8px)}
  100%{transform:none}
}

/* ── Max Studio 워드마크 ── */
.wordmark{
  margin:0 0 18px;
  font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);opacity:.85;
}

.brand-mark{
  width:54px;height:54px;margin:0 auto 14px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(145deg,#0a84ff,#0055d4);
  box-shadow:0 8px 20px rgba(0,113,227,.35);
}
.title{font-size:27px;line-height:1.15;letter-spacing:-.02em;font-weight:600;margin:0 0 6px}
.subtitle{font-size:14px;color:var(--muted);margin:0 0 22px;line-height:1.45}
.subtitle.dim{opacity:.7;margin-top:-16px;font-size:12.5px}

.field{text-align:left;margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 6px 2px;letter-spacing:.01em}
input[type=text],input[type=password]{
  width:100%;height:46px;padding:0 14px;font-size:15px;font-family:inherit;color:var(--text);
  background:rgba(255,255,255,.7);border:1px solid var(--stroke);border-radius:12px;outline:none;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
@media (prefers-color-scheme: dark){input[type=text],input[type=password]{background:rgba(255,255,255,.06)}}
input::placeholder{color:#aaa}
input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.16)}
.token-wrap{position:relative}
.token-wrap input{padding-right:44px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center}
.eye:hover{background:rgba(0,0,0,.05)}

.remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:4px 2px 18px;cursor:pointer;text-align:left}
.remember input{accent-color:var(--blue);width:15px;height:15px}

.btn{
  position:relative;width:100%;height:46px;border:0;border-radius:12px;cursor:pointer;
  background:var(--blue);color:#fff;font-size:15px;font-weight:600;font-family:inherit;letter-spacing:-.01em;
  transition:background .18s, transform .08s, opacity .18s;
}
.btn:hover{background:#0b7bec}
.btn:active{transform:scale(.985);background:var(--blue-press)}
.btn.ghost{background:rgba(120,120,128,.14);color:var(--text)}
.btn.ghost:hover{background:rgba(120,120,128,.2)}
.btn.loading .btn-label{opacity:0}
.btn.loading{pointer-events:none}
.spinner{display:none;position:absolute;inset:0;margin:auto;width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn.loading .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.inline-error{margin:12px 0 0;font-size:13px;color:var(--no);font-weight:500}
.foot{margin:18px 0 0;font-size:11.5px;color:var(--muted);opacity:.8}

.status-icon{width:64px;height:64px;margin:4px auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;animation:pop .45s cubic-bezier(.22,1.4,.36,1)}
.status-icon.ok{background:linear-gradient(145deg,#34d399,#16a34a);box-shadow:0 10px 24px rgba(22,163,74,.3)}
.status-icon.no{background:linear-gradient(145deg,#ff6b6b,#d93a3f);box-shadow:0 10px 24px rgba(217,58,63,.28)}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}

.meta{border:1px solid var(--stroke);border-radius:14px;overflow:hidden;margin:18px 0;background:rgba(255,255,255,.4)}
@media (prefers-color-scheme: dark){.meta{background:rgba(255,255,255,.04)}}
.meta-row{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;font-size:13px;border-bottom:1px solid var(--stroke)}
.meta-row:last-child{border-bottom:0}
.meta-row span{color:var(--muted)}
.meta-row b{font-weight:600;font-variant-numeric:tabular-nums;font-size:12.5px}
.pill{padding:3px 9px;border-radius:999px;font-size:11px;letter-spacing:.04em}
.pill.ok{background:rgba(48,164,108,.15);color:var(--ok)}

/* 성공 화면 전환용. 실패 화면(.view.no-anim)에는 적용하지 않아 이중 렌더링을 막습니다. */
.view{animation:rise .35s cubic-bezier(.22,1,.36,1)}
.view.no-anim{animation:none}

@media (prefers-reduced-motion: reduce){
  .card,.card.ready.shake,.view,.status-icon{animation:none !important}
}