/* web/css/auth-ui.css — 소비자 로그인 UI 공용 스타일 (index 바텀시트 · result 모달 공통).
   껍데기(시트/모달)는 각 페이지가, 안쪽 버튼·입력·안내문은 여기가 소유한다.

   ⚠ 두 페이지가 로드하는 토큰 파일이 다르다 — index=tokens.css / result=fitting.css.
      교집합(--ink·--line·--warn·--accent)만 쓰고, 나머지는 폴백을 단다.
      (--line2·--muted·--sub는 한쪽에만 있어 그대로 쓰면 한 화면에서 값이 비어 규칙이 통째로 무효가 된다.) */
.authui, .authui-sheet{
  --au-ink:var(--ink,#16140F);
  --au-line:var(--line,#E6E5E1);
  --au-sub:var(--sub,var(--muted,#6E6B63));
  --au-warn:var(--warn,#B0553F);
  --au-ok:var(--accent,#2E4A3B);
}

/* 바텀시트 껍데기 — index·result가 같은 화면을 쓰도록 컴포넌트가 직접 소유한다(자체 스크림).
   페이지 스크림(index .scrim)은 드로어와 공유라 건드리지 않는다. */
.authui-scrim{position:fixed; inset:0; background:rgba(22,20,15,.5); opacity:0; pointer-events:none; transition:.22s; z-index:1190;}
.authui-scrim.on{opacity:1; pointer-events:auto;}
.authui-sheet{position:fixed; left:0; right:0; bottom:0; max-width:520px; margin:0 auto; z-index:1200;
  background:#fff; border-radius:24px 24px 0 0; padding:24px 24px 32px; box-shadow:0 -14px 50px rgba(0,0,0,.18);
  transform:translateY(101%); transition:.3s cubic-bezier(.2,.8,.2,1);}
.authui-sheet.on{transform:none;}
.authui-grip{width:40px; height:4px; border-radius:4px; background:var(--au-line); margin:0 auto 18px;}
.authui-title{font-size:21px; font-weight:800; letter-spacing:-.04em; text-align:center; margin:0; color:var(--au-ink);}
.authui-desc{font-size:14px; color:var(--au-sub); text-align:center; margin:8px 0 0; line-height:1.5;}
.authui-sheet .authui{margin-top:22px;}
@media (prefers-reduced-motion:reduce){ .authui-sheet{transition:none;} }
.authui-step{display:flex; flex-direction:column; gap:10px;}
.authui-step[hidden]{display:none;}   /* display:flex가 UA의 [hidden]{display:none}을 이겨서 두 단계가 같이 보이는 걸 막음 */

.authui-btn{padding:14px; border-radius:13px; border:none; font-size:16px; font-weight:800; cursor:pointer; font-family:inherit;}
.authui-btn.kakao{background:#FEE500; color:#191600;}
.authui-btn.naver{background:#03C75A; color:#fff;}
.authui-btn.google{background:#fff; color:var(--au-ink); border:1.5px solid var(--au-line);}
.authui-btn.email{background:var(--au-ink); color:#fff;}
.authui-btn:disabled{opacity:.5; cursor:default;}
.authui-back{background:transparent; border:none; color:var(--au-sub); font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; padding:4px;}

.authui-inp{width:100%; padding:13px 15px; border:1.5px solid var(--au-line); border-radius:12px;
  font-size:16px; font-family:inherit; background:#fff; color:var(--au-ink);}   /* 16px 미만이면 iOS가 포커스 시 확대 */
.authui-inp:focus{outline:none; border-color:var(--au-ok);}

/* 가입 사전 고지 — 읽히긴 해야 하나 로그인 수단보다 앞서면 안 된다(작게, 아래에) */
.authui-notice{margin:14px 0 0; font-size:12px; line-height:1.6; color:var(--au-sub); text-align:center;}
.authui-notice a{color:var(--au-ink); font-weight:700;}
.authui-notice b{color:var(--au-ink); font-weight:700;}

.authui-msg{font-size:13px; line-height:1.5; color:var(--au-sub); text-align:center; margin:0; min-height:20px;}
.authui-msg.err{color:var(--au-warn);}
.authui-msg.ok{color:var(--au-ok);}