:root {
  --navy: #10162f;
  --blue: #3157d5;
  --blue-bright: #7794ff;
  --ink: #171b2e;
  --sub: #677087;
  --line: #dfe3ee;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { font-family: Pretendard, Inter, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #f7f8fb; }
button, input { font: inherit; }
.login-shell { min-height: 100dvh; display: grid; grid-template-columns: minmax(520px, 1.25fr) minmax(420px, .75fr); }
.brand-panel { position: relative; min-height: 100dvh; padding: 48px clamp(42px, 6vw, 96px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: white; background: radial-gradient(circle at 82% 18%, rgba(78,112,226,.68), transparent 28%), radial-gradient(circle at 22% 88%, rgba(65,87,180,.44), transparent 34%), linear-gradient(145deg, #0b1027 0%, #121c43 58%, #192c64 100%); }
.brand-panel::before { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; top: -150px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.018); }
.brand-lockup, .brand-copy, .principles { position: relative; z-index: 2; }
.brand-lockup { display: flex; align-items: center; gap: 14px; font-size: 10px; font-weight: 850; letter-spacing: .2em; }
.brand-mark { width: 43px; height: 43px; position: relative; display: block; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; }
.brand-mark i { position: absolute; font-size: 17px; font-weight: 900; font-style: normal; line-height: 1; }
.brand-mark i:first-child { left: 8px; top: 7px; }
.brand-mark i:last-child { right: 8px; bottom: 7px; color: var(--blue-bright); }
.brand-copy { max-width: 640px; margin: auto 0; padding: 80px 0; }
.eyebrow { margin: 0 0 18px; color: #9eb2ff; font-size: 10px; font-weight: 900; letter-spacing: .23em; }
.brand-copy h1 { margin: 0; max-width: 680px; font-size: clamp(45px, 5vw, 72px); font-weight: 660; line-height: 1.14; letter-spacing: -.065em; }
.brand-copy h1 em { color: #a9baff; font-style: normal; }
.brand-copy > p:last-child { max-width: 490px; margin: 25px 0 0; color: #d3d9ed; font-size: 14px; line-height: 1.8; }
.principles { display: flex; flex-wrap: wrap; gap: 9px; }
.principles span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #d8def0; background: rgba(9,15,40,.24); backdrop-filter: blur(8px); font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.visual-grid { position: absolute; z-index: 1; right: clamp(30px, 6vw, 90px); bottom: 18%; width: 280px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; transform: rotate(-8deg); opacity: .48; }
.visual-grid i { display: block; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.015)); }
.visual-grid i:nth-child(2), .visual-grid i:nth-child(6), .visual-grid i:nth-child(8) { background: linear-gradient(145deg, rgba(119,148,255,.4), rgba(51,79,175,.08)); }
.form-panel { min-height: 100dvh; padding: 48px clamp(36px, 5vw, 82px); display: grid; place-items: center; background: #fff; }
.form-wrap { width: min(390px, 100%); }
.form-wrap header > p { margin: 0 0 14px; color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: .19em; }
.form-wrap h2 { margin: 0; color: var(--navy); font-size: 29px; letter-spacing: -.05em; }
.form-wrap header > span { display: block; margin-top: 12px; color: var(--sub); font-size: 12px; line-height: 1.65; }
form { margin-top: 38px; display: grid; gap: 17px; }
label span { display: block; margin-bottom: 7px; color: #4c566f; font-size: 10px; font-weight: 780; }
input { width: 100%; height: 51px; padding: 0 14px; border: 1px solid #d3d8e4; border-radius: 9px; outline: none; color: var(--ink); background: #fbfcfe; font-size: 14px; transition: border-color .18s, box-shadow .18s, background .18s; }
input:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(49,87,213,.11); }
.error { min-height: 18px; margin: -2px 0 -3px; color: #b03f55; font-size: 11px; line-height: 1.5; }
form button { height: 53px; padding: 0 16px 0 19px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 9px; color: white; background: var(--blue); font-size: 12px; font-weight: 850; box-shadow: 0 13px 29px rgba(49,87,213,.2); cursor: pointer; transition: transform .15s, background .15s; }
form button:hover { background: #2649be; transform: translateY(-1px); }
form button:disabled { cursor: wait; opacity: .65; transform: none; }
form button b { font-size: 20px; font-weight: 400; }
.form-wrap footer { margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--line); }
.form-wrap footer span, .form-wrap footer small { display: block; }
.form-wrap footer span { color: #4d5871; font-size: 10px; font-weight: 780; }
.form-wrap footer small { margin-top: 6px; color: #9198a9; font-size: 9px; }
@media (max-width: 880px) {
  .login-shell { grid-template-columns: 1fr; }
  .brand-panel { min-height: 310px; padding: 30px; }
  .brand-copy { margin: 50px 0 30px; padding: 0; }
  .brand-copy h1 { font-size: clamp(34px, 9vw, 52px); }
  .brand-copy > p:last-child { margin-top: 16px; }
  .visual-grid { right: -30px; bottom: -50px; }
  .form-panel { min-height: auto; padding: 54px 28px 64px; }
}
@media (max-width: 520px) {
  .brand-panel { min-height: 270px; }
  .brand-copy { margin: 36px 0 18px; }
  .brand-copy h1 { font-size: 32px; }
  .brand-copy > p:last-child, .principles span:nth-child(2), .visual-grid { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}