:root { --navy:#172a3a; --navy-2:#203a4c; --cyan:#08aec4; --cyan-dark:#008ca1; --ink:#263744; --muted:#748491; --line:#dfe8ed; --soft:#f4f7f9; --orange:#ff7a2c; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--soft); font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.02em; }
button, input { font: inherit; }
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, .88fr) minmax(520px, 1.12fr); }
.brand-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 70px clamp(48px, 7vw, 110px); color: #fff; background: linear-gradient(145deg, var(--navy), #19384a); }
.brand-panel::before, .brand-panel::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.08); }
.brand-panel::before { width:540px; height:540px; right:-280px; top:-190px; }
.brand-panel::after { width:350px; height:350px; left:-190px; bottom:-180px; }
.brand-content { position: relative; z-index: 1; }
.brand-mark { position:relative; width:50px; height:50px; display:block; border-radius:15px; background:var(--cyan); box-shadow:0 12px 28px rgba(8,174,196,.25); }
.brand-mark::before,.brand-mark::after { content:""; position:absolute; inset:11px 21px; border-radius:2px; background:#fff; }
.brand-mark::after { inset:21px 11px; }
.brand-kicker { margin:30px 0 0; color:#76d9e5; font-size:11px; font-weight:900; letter-spacing:.18em; }
.brand-content h1 { margin:14px 0 0; font-size:clamp(30px,3vw,45px); line-height:1.3; letter-spacing:-.06em; }
.brand-content > p:last-child { margin:22px 0 0; color:#a7bbc7; font-size:14px; }
.brand-panel > small { position:absolute; left:clamp(48px,7vw,110px); bottom:38px; color:#688393; font-size:9px; letter-spacing:.12em; }
.form-panel { display:grid; place-items:center; padding:50px 28px; background:#fff; }
.auth-card { width:min(100%, 430px); }
.mobile-brand { display:none; }
.first-notice { margin-bottom:25px; padding:15px 17px; border:1px solid #b9e5ea; border-radius:10px; background:#effbfc; }
.first-notice strong,.first-notice span { display:block; }
.first-notice strong { color:var(--cyan-dark); font-size:12px; }
.first-notice span { margin-top:5px; color:#68808c; font-size:10px; }
.auth-heading > span { color:var(--cyan-dark); font-size:10px; font-weight:900; letter-spacing:.14em; }
.auth-heading h2 { margin:10px 0 0; color:var(--navy); font-size:28px; letter-spacing:-.05em; }
.auth-heading p { margin:9px 0 0; color:var(--muted); font-size:12px; }
form { margin-top:30px; }
.field-grid { display:grid; gap:17px; }
label { display:block; }
label > span { display:block; margin-bottom:8px; color:var(--navy); font-size:11px; font-weight:800; }
input { width:100%; height:48px; padding:0 14px; border:1px solid var(--line); border-radius:9px; outline:none; color:var(--ink); background:#fff; font-size:12px; transition:.15s; }
input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(8,174,196,.09); }
#loginForm label + label { margin-top:17px; }
.form-error { min-height:18px; margin:12px 0 4px; color:#d35454; font-size:10px; }
.primary-button { width:100%; height:49px; border:0; border-radius:9px; color:#fff; background:var(--cyan); font-size:12px; font-weight:800; box-shadow:0 7px 18px rgba(8,174,196,.2); cursor:pointer; }
.primary-button:hover { background:var(--cyan-dark); }
.primary-button:disabled { opacity:.6; cursor:wait; }
.switch-copy { margin:20px 0 0; color:#8b9aa3; font-size:11px; text-align:center; }
.switch-copy a { color:var(--cyan-dark); font-weight:800; text-decoration:none; }
[hidden] { display:none !important; }
@media (max-width:800px) {
  .auth-layout { display:block; }
  .brand-panel { display:none; }
  .form-panel { min-height:100vh; padding:35px 22px; }
  .mobile-brand { display:flex; align-items:center; gap:11px; margin-bottom:42px; color:var(--navy); font-size:14px; }
  .mobile-brand .brand-mark { width:36px; height:36px; border-radius:10px; }
  .mobile-brand .brand-mark::before { inset:8px 15px; }
  .mobile-brand .brand-mark::after { inset:15px 8px; }
}