/* 관리자 로그인(lib/admin-login-page.js): 왼쪽 파란 소개 + 오른쪽 흰 로그인. 사이트와 같은 파랑·Pretendard */
:root{--al-blue:#2f6fe8;--al-blue2:#5b8ff5;--al-ink:#141824;--al-muted:#667085;--al-line:#e6eaf1}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body.al-body{font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--al-ink);background:#fff;-webkit-font-smoothing:antialiased}
.al-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}

/* 왼쪽: 파란 소개 */
.al-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:44px 56px;color:#fff;background:radial-gradient(90% 70% at 85% 10%,#86b0ff 0%,rgba(134,176,255,0) 60%),linear-gradient(150deg,#2a63db 0%,var(--al-blue) 45%,var(--al-blue2) 100%)}
.al-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(80% 80% at 70% 60%,#000,transparent);-webkit-mask-image:radial-gradient(80% 80% at 70% 60%,#000,transparent);pointer-events:none}
.al-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,70%) var(--my,40%),rgba(255,255,255,.14),transparent 60%);pointer-events:none;transition:background .2s}
.al-hero>*{position:relative;z-index:1}
.al-brand{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:24px;font-weight:800;letter-spacing:-.6px}
.al-brand img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.al-brand em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:1.2px;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35)}
.al-head{margin:auto 0 14px;padding-top:40px;font-size:44px;line-height:1.22;letter-spacing:-1.6px;font-weight:800}
.al-lead{margin:0 0 34px;max-width:400px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.86)}

/* 떠 있는 콘솔 미리보기 카드 */
.al-mock{position:relative;height:250px;max-width:520px}
.al-tile{position:absolute;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.96);color:var(--al-ink);box-shadow:0 18px 40px rgba(12,32,90,.25)}
.al-tile-label{display:block;font-size:12px;font-weight:700;color:var(--al-muted);margin-bottom:6px}
.al-tile b{font-size:28px;letter-spacing:-.8px}
.al-tile b small{font-size:14px;margin-left:2px;color:var(--al-muted)}
.al-t1{left:0;top:6px;width:210px;animation:al-float 6s ease-in-out infinite}
.al-t2{left:150px;top:96px;width:300px;animation:al-float 7s ease-in-out -2s infinite}
.al-t3{left:330px;top:0;width:180px;animation:al-float 6.5s ease-in-out -4s infinite}
.al-faces{display:flex;align-items:center;margin-top:8px}
.al-faces i{width:24px;height:24px;border-radius:50%;border:2px solid #fff;margin-left:-6px;background:#c7d8fb}
.al-faces i:first-child{margin-left:0;background:#ffd59e}.al-faces i:nth-child(2){background:#b8e6c8}.al-faces i:nth-child(3){background:#e2c8fb}
.al-faces span{margin-left:6px;font-size:12px;font-weight:700;color:var(--al-muted)}
.al-ask{display:inline-block;margin:2px 0 8px;padding:8px 12px;border-radius:14px 14px 4px 14px;background:var(--al-blue);color:#fff;font-size:14px;font-weight:600;min-height:20px}
.al-ask.is-typing::after{content:'';display:inline-block;width:2px;height:14px;margin-left:2px;vertical-align:-2px;background:#fff;animation:al-caret .8s steps(1) infinite}
.al-reply{margin:0;padding:9px 12px;border-radius:14px 14px 14px 4px;background:#f1f4f9;font-size:13px;line-height:1.5;color:#344054;transition:opacity .35s,transform .35s}
.al-reply.is-hidden{opacity:0;transform:translateY(6px)}
.al-bar{display:block;height:8px;margin-top:10px;border-radius:99px;background:#eef2f8;overflow:hidden}
.al-bar i{display:block;height:100%;width:70%;border-radius:inherit;background:linear-gradient(90deg,var(--al-blue),#7aa5ff);animation:al-grow 2.4s cubic-bezier(.2,.8,.2,1) .6s both}

/* 오른쪽: 로그인 */
.al-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 32px 28px;background:#fff}
.al-form{width:100%;max-width:380px;margin:auto 0}
.al-eyebrow{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--al-blue)}
.al-form h1{margin:0 0 10px;font-size:32px;letter-spacing:-1px;line-height:1.25}
.al-desc{margin:0 0 28px;font-size:16px;line-height:1.6;color:var(--al-muted)}
/* 카카오 로그인 버튼(카카오 디자인 가이드: #FEE500, 글자 85% 검정, 둥근 12px) */
.al-kakao{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:54px;border-radius:12px;background:#fee500;color:rgba(0,0,0,.85);font-size:16px;font-weight:700;text-decoration:none;transition:transform .15s,box-shadow .2s,filter .2s;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.al-kakao svg{color:#000}
.al-kakao:hover{filter:brightness(.97);box-shadow:0 8px 20px rgba(254,229,0,.35)}
.al-kakao:active{transform:scale(.985)}
.al-kakao:focus-visible{outline:3px solid #9cc0fb;outline-offset:2px}
.al-points{list-style:none;margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--al-line);display:grid;gap:12px}
.al-points li{display:flex;align-items:center;gap:10px;font-size:14px;color:#475467}
.al-points svg{flex:none;color:var(--al-blue);width:18px;height:18px}
.al-points a{color:var(--al-blue);font-weight:600}
.al-back{display:inline-block;margin-top:26px;font-size:14px;color:var(--al-muted);text-decoration:none}
.al-back:hover{color:var(--al-ink)}
.al-foot{margin:24px 0 0;font-size:12px;color:#98a2b3}

/* 등장 모션 */
.al-brand,.al-head,.al-lead,.al-mock,.al-form>*{animation:al-in .7s cubic-bezier(.2,.8,.2,1) both}
.al-head{animation-delay:.08s}.al-lead{animation-delay:.16s}.al-mock{animation-delay:.26s}
.al-form>:nth-child(1){animation-delay:.1s}.al-form>:nth-child(2){animation-delay:.16s}.al-form>:nth-child(3){animation-delay:.22s}.al-form>:nth-child(4){animation-delay:.3s}.al-form>:nth-child(5){animation-delay:.38s}.al-form>:nth-child(6){animation-delay:.44s}
@keyframes al-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes al-float{50%{transform:translateY(-10px)}}
@keyframes al-grow{from{width:0}}
@keyframes al-caret{50%{opacity:0}}

/* 좁은 화면: 위 파란 소개(미리보기 카드 없이) + 아래 로그인 */
@media (max-width:860px){
 .al-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
 .al-hero{padding:22px 22px 30px;border-radius:0 0 28px 28px}
 .al-head{margin:28px 0 8px;padding-top:0;font-size:30px;letter-spacing:-1px}
 .al-lead{margin:0;font-size:15px}
 .al-mock{display:none}
 .al-panel{padding:30px 22px 24px;justify-content:flex-start}
 .al-form{margin:0}
 .al-form h1{font-size:26px}
 .al-desc{font-size:15px;margin-bottom:22px}
}
@media (prefers-color-scheme:dark){
 body.al-body,.al-panel{background:#1e2229;color:#e4e7ec}
 .al-desc,.al-points li,.al-back{color:#a0a8b6}
 .al-points{border-color:#363c47}
 .al-foot{color:#7d8696}
 .al-form h1{color:#f1f3f6}
}
@media (prefers-reduced-motion:reduce){
 .al-brand,.al-head,.al-lead,.al-mock,.al-form>*,.al-tile,.al-bar i{animation:none}
 .al-hero::after{display:none}
}
/* 왼쪽 소개는 파란 칸 가운데(로고는 위 왼쪽 그대로) */
@media (min-width:861px){
 .al-hero{align-items:center;text-align:center}
 .al-brand{align-self:flex-start}
 .al-head{margin:auto 0 14px;padding-top:0}
 .al-lead{margin:0 auto 34px}
 .al-mock{width:520px;max-width:100%;margin:0 auto auto;text-align:left}
}