/* AEO 교육 수강 사이트 — 공용 토큰·부품 (login.html · index.html)
 *
 * 디자인 바탕 = 피그마 커뮤니티 「E Learning Site」 by Shinobi (CC BY 4.0) — 사용자 지정(2026-11-04).
 *   원본 캡처 실측: 주색 #49BBBD(청록) · 옅은 청록 #92D6D6 · 페이지 #FFFEFC · 내용 바탕 #EBF5FF · 입력칸 53px 알약 · 버튼 48px 알약 · 사진 판 radius 40.
 * 🔴 청록은 덴티움 금지색(스트라우만 연상, 서승우 이사) → 원본의 청록 자리를 전부 덴티움 라임으로 바꿨다.
 *    라임은 흰 바탕 대비 1.89 라 글자로 쓰지 않는다 — 라임 면 위 글자는 먹(#12200A, 8.99:1), 라임 계열 글자는 #5C6B08(5.90:1).
 * 서체: 원본 Poppins(라틴·숫자) + 한글은 Noto Sans KR.
 */
:root{
  --lime:#ACC90E; --lime-2:#C9DE5A; --lime-soft:#EEF4D6; --lime-ink:#5C6B08; --lime-line:#7E930A;
  --ink:#12200A; --navy:#252641; --text:#5B5B6E; --muted:#6E6E82; --line:#E3E6EC;
  --paper:#FFFEFC; --sky:#EEF5FC; --sky-2:#E3EEFA; --surface:#FFFFFF; --error:#B3261E;
  --stage:#1D1E2C; --stage-2:#2A2C3D;
  --sans:"Poppins","Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --shadow:0 6px 24px rgba(37,38,65,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:400 16px/1.65 var(--sans);word-break:keep-all;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3{color:var(--navy);margin:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.player :focus-visible{outline-color:#fff}
.tab{font-variant-numeric:tabular-nums}

/* 버튼 — 원본처럼 알약 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 28px;border:1px solid var(--lime-line);background:var(--surface);color:var(--navy);border-radius:40px;font-weight:600;font-size:16px;cursor:pointer;transition:background .15s var(--ease),transform .08s var(--ease),box-shadow .15s var(--ease)}
.btn:hover:not(:disabled){background:var(--lime-soft)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.pri{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.btn.pri:hover:not(:disabled){background:#B9D51A;box-shadow:0 6px 16px rgba(172,201,14,.35)}
.btn:disabled{background:#ECEEF2;border-color:#ECEEF2;color:var(--muted);cursor:not-allowed;box-shadow:none}
.lnk{background:none;border:0;padding:8px 2px;color:var(--text);font-size:14px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.lnk:hover{color:var(--navy)}

/* 입력 — 원본: 53px 알약, 1px 주색 테두리 */
.fld{display:block;margin-bottom:22px}
.fld>span:first-child{display:block;font-size:16px;font-weight:500;color:var(--ink);margin-bottom:10px}
.inp{display:flex;align-items:center;height:54px;border:1px solid var(--lime-line);border-radius:40px;background:var(--surface);padding:0 8px 0 0}
.inp:focus-within{outline:2px solid var(--lime);outline-offset:2px}
.inp input{flex:1;min-width:0;height:100%;border:0;background:none;padding:0 0 0 26px;font-size:15px;outline:0;color:var(--ink)}
.inp input::placeholder{color:#ACACB8}
.inp .suf{padding-right:18px;color:var(--muted);font-size:14px}
.inp.bad{border-color:var(--error)}
.inp .eye{width:40px;height:40px;border:0;background:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--navy)}
.inp .eye:hover{background:var(--sky)}
.hint{font-size:14px;line-height:22px;color:var(--muted);margin-top:8px}
.guil,svg[data-micro]{display:none}

/* 토스트 */
.toast{position:fixed;right:24px;top:24px;max-width:min(420px,calc(100vw - 32px));background:var(--navy);color:#fff;padding:14px 20px;border-radius:14px;font-size:15px;line-height:23px;opacity:0;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease);pointer-events:none;z-index:50;box-shadow:var(--shadow)}
.toast.on{opacity:1;transform:none}
.toast.err{background:var(--error)}

.credit{font-size:12px;color:#8A8A9A;text-align:center;padding:20px 16px 28px}
.credit a{color:inherit}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}.btn:active:not(:disabled){transform:none}}