@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --fk:'Noto Sans KR',sans-serif;
  --fe:'DM Sans',sans-serif;
  --g50:#f8fafc;--g100:#f1f5f9;--g200:#e2e8f0;--g300:#cbd5e1;
  --g400:#94a3b8;--g500:#64748b;--g600:#475569;--g700:#334155;
  --g800:#1e293b;--g900:#0f172a;
  --rs:8px;
}
html,body{min-height:100%;font-family:var(--fk);color:var(--g800)}
body{display:flex;min-height:100vh}
a{text-decoration:none;color:inherit}

/* ── LEFT PANEL ── */
.lp{
  width:44%;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:60px 52px;position:relative;overflow:hidden;
}
/* 배경 장식 원 */
.lp::before{
  content:'';position:absolute;
  width:500px;height:500px;border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  top:-120px;right:-120px;pointer-events:none;
}
.lp::after{
  content:'';position:absolute;
  width:700px;height:700px;border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
  bottom:-250px;left:-200px;pointer-events:none;
}

.lp-logo{display:flex;align-items:center;gap:12px;margin-bottom:52px}
.lp-logo-icon{
  width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.lp-logo-text{font-family:var(--fe);font-size:22px;font-weight:700;color:#fff;letter-spacing:-.3px}

.lp-title{font-size:30px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:14px;letter-spacing:-.5px}
.lp-desc{font-size:14px;color:rgba(255,255,255,.65);line-height:1.75;max-width:340px}

.lp-stats{display:flex;gap:36px;margin-top:52px}
.stat-num{font-family:var(--fe);font-size:26px;font-weight:700;color:#fff;letter-spacing:-.5px}
.stat-label{font-size:11px;color:rgba(255,255,255,.45);margin-top:3px}

/* ── RIGHT PANEL ── */
.rp{
  flex:1;display:flex;flex-direction:column;
  justify-content:center;padding:60px 52px;background:#fff;
}
.rp-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--g400);cursor:pointer;
  margin-bottom:30px;transition:color .15s;width:fit-content;
}
.rp-back:hover{color:var(--g600)}

.role-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:20px;
  font-size:12px;font-weight:600;margin-bottom:22px;
}

.rp-title{font-size:22px;font-weight:700;color:var(--g900);margin-bottom:6px}
.rp-desc{font-size:13px;color:var(--g500);margin-bottom:28px}

/* ── FORM ── */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--g600);margin-bottom:6px;letter-spacing:.1px}

.form-input-wrap{position:relative}
.form-input{
  width:100%;padding:11px 14px;
  border:1.5px solid var(--g200);border-radius:var(--rs);
  font-size:14px;font-family:var(--fk);color:var(--g800);
  background:#fff;outline:none;
  transition:border-color .2s;
}
.form-input:focus{border-color:var(--accent)}
.form-input.error{border-color:#dc2626}
.form-input::placeholder{color:var(--g300)}

/* 비밀번호 표시 버튼 */
.pw-toggle{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--g400);font-size:15px;
  padding:4px;line-height:1;
}
.pw-toggle:hover{color:var(--g600)}

.error-msg{font-size:12px;color:#dc2626;margin-top:5px;display:none}

.form-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.form-check{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:13px;color:var(--g600)}
.form-check input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.form-link{font-size:13px;color:var(--accent);cursor:pointer}
.form-link:hover{text-decoration:underline}

.btn-login{
  width:100%;padding:13px;
  background:var(--accent);color:#fff;border:none;
  border-radius:var(--rs);font-size:15px;font-weight:600;
  font-family:var(--fk);cursor:pointer;transition:opacity .2s;
  letter-spacing:.1px;
}
.btn-login:hover{opacity:.88}
.btn-login:active{opacity:.75}
.btn-login:disabled{opacity:.5;cursor:not-allowed}

.form-footer{
  margin-top:24px;text-align:center;
  font-size:12px;color:var(--g400);line-height:1.6;
}

/* ── ERROR SHAKE ── */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.shake{animation:shake .35s ease}

/* ═══════════════════
   RESPONSIVE (staff용, 768px)
═══════════════════ */
@media(max-width:768px){
  body{flex-direction:column}

  .lp{
    width:100%;min-height:auto;
    padding:28px 24px 32px;
  }
  .lp-logo{margin-bottom:0}
  /* 모바일에서 설명·통계 숨김 */
  .lp-title,.lp-desc,.lp-stats{display:none}

  .rp{
    flex:1;padding:28px 24px 40px;
    min-height:0;justify-content:flex-start;
  }
  .rp-back{margin-bottom:20px}

  .rp-title{font-size:20px}
  .rp-desc{margin-bottom:22px}
  .form-group{margin-bottom:14px}
  .btn-login{padding:14px;font-size:15px}
}

@media(max-width:400px){
  .lp{padding:22px 20px 26px}
  .rp{padding:24px 20px 36px}
}