/* 로그인 · 가입(#76) — 브랜드 면은 두 테마에서 같은 무대색(--stage), 카드는 바탕색. 색은 토큰만.
   배치(설계 165 §3-2): .wrap 안 격자. 문서 순서 = S 의 읽는 순서(카드 → 소개), L+ 는 영역 이름으로 「소개 │ 카드」 */
.auth{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);padding-block:32px 8px}
@media (min-width:1024px){
  .auth{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"brand side";gap:48px;
    min-height:calc(100vh - var(--gn-h) - 40px);align-items:stretch}
  .auth-brand{grid-area:brand}.auth-side{grid-area:side}
}

.auth-brand{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--stage);color:var(--on-stage);display:flex;align-items:center}
.auth-brand-in{position:relative;width:100%;padding:40px clamp(20px,4vw,56px);display:flex;flex-direction:column;gap:22px}
.auth-logo{display:flex;align-items:center;gap:12px}
.auth-logo b{display:block;font-size:17px;font-weight:900}
.auth-logo small{display:block;font-size:12px;color:var(--on-stage-dim)}
.auth-title{font-size:clamp(30px,3.2vw,44px);font-weight:900;line-height:1.2;letter-spacing:-1px}
.auth-lede{color:var(--on-stage-2);line-height:1.7}
.auth-points{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.auth-points li{position:relative;padding-left:22px;display:flex;flex-direction:column;gap:4px}
.auth-points li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b))}
.auth-points b{font-size:15px}
.auth-points span{font-size:14px;line-height:1.7;color:var(--on-stage-dim)}

/* 들어오는 곳 — 열 폭을 그대로 쓴다(가운데 좁은 상자를 두지 않는다) */
.auth-side{display:flex;flex-direction:column;justify-content:center;gap:14px}
.auth-card{width:100%;display:flex;flex-direction:column;gap:14px;padding:32px;border-radius:var(--r-xl);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.auth-card-title{font-size:24px;font-weight:900}
.auth-card form{margin:0}
.auth-wide{width:100%;justify-content:center}
/* Google 로그인 버튼 — 브랜딩 가이드: 공식 G 로고 · 정해진 바탕/테두리/글자색 · Roboto Medium 14 · 높이 40 이상(#94) */
.auth-google{display:flex;align-items:center;gap:10px;min-height:44px;border-radius:var(--r-pill);
  background:var(--google-bg);border:1px solid var(--google-line);color:var(--google-fg);
  font:500 14px/20px "Roboto",var(--sans);letter-spacing:.25px}
.auth-google:hover{background:var(--google-bg);filter:brightness(.97)}
.auth-google svg{flex:none}
.auth-signed{font-weight:700}
.auth-dev{border-top:1px dashed var(--line-strong);padding-top:14px;margin-top:4px}
.auth-dev summary{display:flex;align-items:center;gap:8px;min-height:var(--tap);cursor:pointer;font-weight:700;font-size:14px}
.auth-dev p{margin:10px 0}
.auth-dev-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.auth-dev-roles .btn{padding-left:6px;padding-right:6px;font-size:13px}
.auth-terms{font-size:12px;color:var(--faint)}
.auth-terms a{color:var(--muted)}