@charset "UTF-8";
/* 로그인 · 회원가입 — 좌측 그림 / 우측 폼 (adsquare 로그인 틀, 모두의지원금 색) */
:root{
  /* 로고 이미지에서 뽑은 실제 브랜드 파랑 — 비슷하지만 다른 파랑을 쓰면 로고와 버튼이 미묘하게 어긋나 보인다 */
  --blue:#0060F8; --blue-600:#0048C8; --text:#1A1E2C; --sub:#5A6276; --muted:#9AA2B1;
  --line:#E7EAF0; --white:#ffffff;
}
*{box-sizing:border-box}
body.auth-body{margin:0;background:var(--white);color:var(--text);
  font-family:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,system-ui,"Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{text-decoration:none}

.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}

/* ── 좌측 그림 — 글자 없이 그림만 ── */
.auth-visual{position:relative;overflow:hidden;background:#0E1A3C}
/* 세로(1024x1536) 사진이라 패널 비율에 그대로 맞는다 */
.auth-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}

/* ── 우측 폼 ── */
.auth-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;background:#fff}
.auth-box{width:100%;max-width:380px}
.auth-panel .auth-logo{display:flex;justify-content:center;margin-bottom:28px}
.auth-logo img{height:34px;width:auto;object-fit:contain}
.auth-title{margin:0;font-size:26px;font-weight:800;line-height:1.3;letter-spacing:-.03em;text-align:center}
.auth-lead{margin:8px 0 0;font-size:14.5px;color:var(--sub);text-align:center;line-height:1.5}

.auth-form{margin-top:28px}
.field{margin-bottom:16px}
.field label{display:block;margin-bottom:7px;font-size:14px;font-weight:650}
.field-box{position:relative}
.field-box i{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:15px;color:#9AA2B1;pointer-events:none;transition:color .15s}
.field input{width:100%;height:50px;padding:0 16px 0 42px;border:1px solid transparent;border-radius:12px;background:#F2F4F7;
  font:inherit;font-size:15px;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s,background-color .15s}
.field input::placeholder{color:#A9B0BC}
.field input:hover{background:#EDF0F4}
.field input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,96,248,.12)}
.field-box:focus-within i{color:var(--blue)}

.check{display:flex;align-items:center;gap:8px;margin:4px 0 18px;font-size:14px;color:var(--sub);cursor:pointer}
.check input{flex:none;width:17px;height:17px;margin:0;accent-color:var(--blue)}

.auth-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border:0;border-radius:12px;
  background:var(--blue);color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:background-color .15s}
.auth-submit i{font-size:14px;transition:transform .15s}
.auth-submit:hover{background:var(--blue-600)}
.auth-submit:hover i{transform:translateX(3px)}
.auth-submit:disabled{background:#DCE1E8;color:#9AA2B1;cursor:default}

.auth-or{display:flex;align-items:center;gap:14px;margin:26px 0 18px;font-size:13px;color:var(--muted)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* 간편 로그인 — 가로로 꽉 찬 버튼 */
.social{display:grid;gap:10px}
.social-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border:1px solid transparent;border-radius:12px;
  font-size:15px;font-weight:650;cursor:pointer;color:inherit;transition:filter .15s,background-color .15s,border-color .15s}
.social-btn svg{flex:none}
.social-btn.is-kakao{background:#FEE500;color:rgba(0,0,0,.85)}
.social-btn.is-kakao:hover{filter:brightness(.97)}
.social-btn.is-naver{background:#03C75A;color:#fff}
.social-btn.is-naver:hover{filter:brightness(.96)}
.social-btn[hidden]{display:none}

.auth-error{margin:0 0 14px;padding:11px 14px;border-radius:10px;background:#FFF0F0;color:#D6363C;font-size:14px}
.auth-error[hidden]{display:none}
.auth-help{margin-top:24px;font-size:14px;text-align:center;color:var(--sub)}
.auth-help a{color:var(--blue);font-weight:700}
.auth-sublinks{margin-top:14px;display:flex;justify-content:center;gap:18px;font-size:13.5px;color:var(--muted)}
.auth-sublinks a{color:var(--muted)}
.auth-sublinks a:hover{color:var(--text)}

/* 좁은 화면은 그림을 빼고 폼만 */
@media (max-width:900px){.auth{grid-template-columns:1fr}.auth-visual{display:none}}
@media (max-width:640px){.auth-panel{justify-content:flex-start;padding:40px 20px}}