/* 로그인(인증 전) 화면 — 로그인.dc.html 시안 재현 */
.auth-body { background: var(--bg-app); }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.auth-card { width: 100%; max-width: 900px; min-height: 600px; background: #fff; display: flex;
             border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); }

.auth-brand { width: 44%; flex: none; background: var(--brand); color: #fff; padding: 44px 40px;
              display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-brand-deco { position: absolute; border-radius: 50%; }
.deco-1 { right: -70px; top: -70px; width: 260px; height: 260px; background: rgba(255,255,255,.06); }
.deco-2 { right: -30px; bottom: -90px; width: 220px; height: 220px; background: rgba(255,255,255,.05); }
.auth-brand-logo { display: flex; align-items: center; gap: 11px; position: relative; }
.auth-brand-logo .logo-glyph { width: 38px; height: 38px; border-radius: 11px; display: block; object-fit: cover; }
.auth-brand-logo .logo-text { font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: #fff; }
.auth-brand-copy { position: relative; }
.auth-brand-copy h2 { color: #fff; font-size: 26px; line-height: 1.35; margin: 0 0 12px; }
.auth-brand-copy p { color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.7; margin: 0; }
.auth-brand-foot { position: relative; font-size: 12.5px; color: rgba(255,255,255,.6); }

.auth-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-form form { width: 100%; max-width: 330px; }
.auth-title { font-size: 21px; margin: 0 0 5px; color: var(--fg-1); }
.auth-sub { margin: 0 0 26px; color: var(--fg-3); font-size: 13.5px; }
.auth-field { margin-bottom: 16px; }
.lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--fg-2); margin-bottom: 7px; }
.fld { width: 100%; box-sizing: border-box; border: 1px solid var(--border-default); border-radius: 9px;
       padding: 12px 14px; font-size: 14px; font-family: inherit; color: var(--fg-1); background: #fff;
       outline: none; transition: border-color .15s, box-shadow .15s; }
.fld:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(52,64,91,.16); }
.fld::placeholder { color: var(--fg-4); }
.auth-row { display: flex; align-items: center; justify-content: space-between; margin: 0 0 20px; }
.auth-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); cursor: pointer; }
.auth-remember input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.auth-forgot { font-size: 13px; color: var(--fg-3); text-decoration: none; }
.auth-forgot:hover { color: var(--fg-1); }
.auth-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
               background: var(--brand); color: #fff; border: none; border-radius: 9px; padding: 13px;
               font-size: 14.5px; font-weight: 600; font-family: inherit; cursor: pointer; }
.auth-submit:hover { background: var(--brand-hover); }
.auth-links { margin-top: 14px; font-size: 13px; }
.auth-links a { color: var(--fg-3); }

/* 회원가입 — 필드가 많아 폼 폭을 조금 넓힌다 */
.auth-form form.auth-wide { max-width: 380px; }
.auth-addr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.auth-addr .lbl { margin-bottom: 7px; }
.auth-addr-btn { font-size: 12px; font-weight: 600; color: var(--brand); background: var(--brand-tint);
                 border: 1px solid var(--brand-tint-2); border-radius: 7px; padding: 4px 10px;
                 text-decoration: none; margin-bottom: 7px; white-space: nowrap; }
.auth-addr-btn:hover { background: var(--brand-tint-2); color: var(--brand); text-decoration: none; }
.fld[readonly] { background: var(--neutral-50); cursor: pointer; }

/* 폼 오류 — devise/shared/_error_messages */
.auth-errors { background: #fdf2f2; border: 1px solid #f5c6c6; border-radius: 9px;
               padding: 12px 14px; margin: 0 0 16px; }
.auth-errors ul { margin: 0; padding-left: 18px; }
.auth-errors li { font-size: 13px; line-height: 1.6; color: #9b2c2c; }

@media (max-width: 767px) {
  .auth-card { flex-direction: column; min-height: 0; }
  .auth-brand { width: 100%; padding: 28px; gap: 20px; }
}