/* 로그인 전 화면 — 스플릿 (2026-08-23 로그인 화면 개편, 스펙 2026-08-23-login-redesign-design.md §2).
   `pages/_auth_base.html`만 읽는다. 색은 tokens.css의 --ntb-* 와 앱 토큰 — 폼 면은 앱 토큰이라
   라이트·다크 둘 다 되고, 사진 위 색은 테마에 안 묶인다. */

.auth-body .wrap{max-width:none;padding:0;margin:0}

.auth-split{display:grid;grid-template-columns:1.12fr 1fr;min-height:100vh;min-height:100dvh;background:var(--surface)}

/* 사진 칸. <img>는 바닥, 남색 덮개는 그 위, 글은 맨 위. */
.auth-hero{position:relative;overflow:hidden;min-height:0;background:var(--ntb-night-2);color:#fff;isolation:isolate}
.auth-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 40%;z-index:-2}
.auth-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(165deg,rgba(7,20,50,.28) 0%,rgba(7,20,50,.62) 55%,rgba(7,20,50,.9) 100%)}
.auth-hero-in{position:relative;min-height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  padding:clamp(20px,5.5vw,64px) clamp(20px,6vw,72px)}
.auth-logo{width:clamp(110px,17vw,190px);height:auto;filter:drop-shadow(0 12px 26px rgba(0,0,0,.5))}
.auth-kicker{margin:0 0 6px;font-size:clamp(11px,1.2vw,13px);letter-spacing:.16em;text-transform:uppercase;color:var(--ntb-flood);font-weight:700}
.auth-hero-title{margin:0 0 8px;font-family:"Do Hyeon",system-ui,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;font-weight:400;
  font-size:clamp(26px,3.6vw,42px);line-height:1.12;letter-spacing:.01em;text-shadow:0 4px 20px rgba(0,0,0,.45);text-wrap:balance}
.auth-hero-sub{margin:0;color:#c9d7f0;max-width:32ch;font-size:clamp(13px,1.2vw,15px)}

/* 폼 칸. 왼쪽 모서리를 배트 각도로 비스듬히 — 사진 위로 4vw 겹친 뒤 잘라낸다. */
.auth-panel{position:relative;display:flex;flex-direction:column;background:var(--surface);
  padding:clamp(24px,4vw,56px) clamp(20px,5vw,64px) 16px;margin-left:-4vw;clip-path:polygon(4vw 0,100% 0,100% 100%,0 100%)}
.auth-form{width:100%;max-width:380px;padding-left:2vw;margin:auto}  /* 세로 flex 안에서 auto 여백 = 가운데 */
/* 푸터는 칸 안 맨 아래 — 전체 푸터 대신 (base.html의 블록은 비운다). */
.site-footer--compact{margin-top:24px;background:transparent;border-top:1px solid var(--border)}
.site-footer--compact .site-footer-in{padding:12px 0 0;flex-direction:column;align-items:center;gap:2px;text-align:center}
.auth-title{margin:0 0 4px;font-family:"Do Hyeon",system-ui,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;font-weight:400;
  font-size:clamp(24px,2.4vw,30px);letter-spacing:.01em;line-height:1.2}
.auth-sub{margin:0 0 18px;color:var(--muted);font-size:.9rem}
.auth-form .alert{margin-bottom:14px}
.auth-fields{display:flex;flex-direction:column;gap:13px}

/* 아이콘 든 입력. app.css의 .form-field input(테두리·패딩)을 래퍼로 옮긴다. */
.auth-input{display:flex;align-items:center;gap:8px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);
  padding:0 6px 0 12px;min-height:46px;transition:border-color .18s ease,box-shadow .18s ease}
.auth-input:focus-within{border-color:var(--ntb-red);box-shadow:0 0 0 3px rgba(193,39,45,.25)}
.auth-input>svg{width:18px;height:18px;color:var(--faint);flex:none}
.auth-input input{border:0;background:transparent;min-height:44px;padding:0;flex:1 1 auto;width:auto;min-width:0;font-size:.98rem;border-radius:0}
.auth-input input:focus-visible{box-shadow:none;outline:0}
.auth-eye{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;border-radius:8px;color:var(--faint);cursor:pointer;
  transition:background .18s ease,color .18s ease}
/* `hidden`은 UA 규칙이라 위 display:grid가 이긴다 — JS가 열기 전까지 정말로 숨기려면 작성자 규칙이 필요하다 (스펙 준수 검토 M-1). */
.auth-eye[hidden]{display:none}
.auth-eye svg{width:18px;height:18px}
.auth-eye:hover{background:var(--surface-3);color:var(--text)}
.auth-eye[aria-pressed="true"]{color:var(--ntb-red)}

/* 기억 옵션 줄. */
.auth-options{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:10px 0 16px;font-size:.86rem}
.auth-checks{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.auth-check{display:inline-flex;align-items:center;gap:7px;color:var(--muted);cursor:pointer;min-height:44px}  /* 터치 표적 44px */
.auth-check input{width:18px;height:18px;accent-color:var(--ntb-red);margin:0;cursor:pointer}
.auth-help{color:var(--muted);font-size:.84rem;text-decoration:underline;text-underline-offset:3px}
.auth-help:hover{color:var(--text)}

.btn-ntb{background:var(--ntb-red);color:#fff;font-size:1rem;font-weight:700}
.btn-ntb:hover{background:var(--ntb-red-deep);color:#fff}
.btn-ntb[disabled]{opacity:.7;cursor:progress}
.auth-actions{flex-direction:column;margin-top:0}
.auth-foot{margin-top:16px}

@media (max-width:700px){
  .auth-split{grid-template-columns:1fr;grid-template-rows:36vh 1fr}
  .auth-hero-img{object-position:58% 22%}
  .auth-hero-in{padding:18px 20px 28px}
  .auth-logo{width:104px}
  .auth-hero-sub{display:none}
  .auth-hero-title{font-size:22px}
  .auth-hero-title-tail{display:none}
  .auth-panel{margin-left:0;margin-top:-16px;clip-path:polygon(0 16px,100% 0,100% 100%,0 100%);padding:34px 20px 16px}
  .auth-form{padding-left:0;max-width:none;margin:0 0 auto}  /* 위에서부터 — 폼 아래가 스크롤 */
}
@media (prefers-reduced-motion:reduce){
  .auth-input,.auth-eye,.btn-ntb{transition:none}
}