/* 로그인·회원가입·비밀번호 다시 정하기 세 화면 + 구독 결제 화면(billing.html, 2026-10-03)의 옷. style.css 뒤에 불러 그 변수를 이 화면들(body.auth)에서만 덮는다.
   WHY(2026-10-02 사용자): "홈페이지에서 로그인을 누르면 갑자기 사장님 화면이 나와서 당황스럽다. 공비서는 그렇게 안 넘어가던데."
     같은 날 공비서 원장님 로그인(gongbiz.kr/signin)을 실측: 가운데 흰 카드 한 장, 맨 위 로고와 한 줄 글, 칸 두 개, 버튼 하나,
     아래에 "처음이신가요? …" — 그 짜임을 따르고 색은 예얍 홈페이지(web/index.html :root)의 값을 쓴다(빌드가 없어 복사본. 홈페이지 색을 바꾸면 여기도).
   노랑(#FFD51F)은 면으로만 쓴다(버튼·로고 알약). 글자·링크·초점·체크 표시는 차콜 — 노란 글자는 흰 바탕에서 안 보인다.
   로그인한 뒤의 화면(오늘·통계·시술·설정)은 이 파일을 부르지 않는다 — 그쪽의 파랑은 상태를 구분하는 색이라 그대로 둔다.
   예외 하나: 구독 결제 화면(billing.html)은 로그인한 뒤의 화면이지만 이 옷을 입는다 — 홈페이지 요금 페이지(pricing.html)의 [구독 결제하기]에서
     이어지는 화면이라서(2026-10-03 사용자 "사장님 페이지에 들어가 있는 게 아니라 홈페이지 요금에서 결제"). 그 화면에만 쓰는 모양은 billing.html 안의 <style>에 있다. */
body.auth {
  --bg: #FFF9E8;        /* 아이보리 바탕 */
  --card: #FFFFFF;
  --line: #E9DFC8;
  --text: #2E2A22;      /* 차콜. 흰 바탕 14.3:1 */
  --text-2: #4A443A;
  --muted: #6F675A;     /* 흰 바탕 5.6:1 · 아이보리 5.3:1 */
  --ink: #2E2A22;       /* 선택된 탭 */
  --accent: #2E2A22;    /* 링크·초점·체크 표시·입력칸 초점선 */
  --gray-soft: #F6EFDC; /* 탭 줄 바탕 */
  --wait-bg: #FFF3A8; --wait-ink: #2E2A22;   /* 안내 상자: 연한 노랑 면 + 차콜 글자 */
  --brand: #FFD51F; --brand-press: #F4B800;
  background: var(--bg);
  word-break: keep-all; overflow-wrap: break-word;   /* 한글 낱말 중간에서 줄이 바뀌지 않게(홈페이지와 같은 규칙) */
}
body.auth .login-wrap { max-width: 472px; margin: 7vh auto 48px; padding: 0 16px; }
/* 카드 한 장. 안에 든 폼(.card)은 테두리·그림자·여백을 벗겨 카드 속 카드가 되지 않게 한다 */
.auth-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  padding: 32px 24px 26px; box-shadow: 0 18px 40px -28px rgba(46, 42, 34, .28);
}
@media (min-width: 480px) { .auth-card { padding: 40px 36px 30px; } }
.auth-card .card { border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; background: transparent; }
/* 로고: 홈페이지 상단 바와 같은 노란 알약(확정 로고는 원본 그대로 얹는다). 누르면 홈페이지로 */
.auth-logo { display: flex; justify-content: center; text-decoration: none; }
.auth-pill { display: inline-flex; align-items: center; padding: 7px 18px; border-radius: 999px; background: var(--brand); box-shadow: 0 4px 12px -6px rgba(46, 42, 34, .35); }
.auth-pill img { display: block; height: 30px; width: auto; }
.auth-tag { margin: 12px 0 22px; text-align: center; font-size: 14px; color: var(--muted); }
body.auth .login-wrap h1 { margin: 0 0 6px; font-size: 22px; text-align: center; }
body.auth .login-wrap .sub { margin-bottom: 20px; text-align: center; font-size: 15px; color: var(--muted); }
.auth-partner { margin: -12px 0 20px; text-align: center; font-size: 14px; color: var(--muted); }
/* 주 버튼 = 홈페이지의 노란 알약 버튼(차콜 글자 10.1:1). 흰 카드에서 묻히지 않게 진한 노랑 테두리 한 줄 */
body.auth .btn { border-radius: 12px; }
body.auth .btn.primary {
  background: var(--brand); border-color: var(--brand-press); color: #2E2A22; font-weight: 700;
  /* 홈페이지 주 버튼과 같은 안쪽 테두리·옅은 그림자(--btn-ring·--btn-shadow) — 흰 카드에서 노란 면의 윤곽이 보이게 */
  box-shadow: inset 0 0 0 1.5px rgba(244, 184, 0, .65), 0 12px 22px -14px rgba(214, 160, 0, .95);
}
body.auth .btn.primary:hover, body.auth .btn.primary:active { background: var(--brand-press); }
body.auth .input { border-radius: 12px; }
body.auth .notice-box { border-color: transparent; }
body.auth a { color: var(--text); text-underline-offset: 3px; }
body.auth .linkbtn { color: var(--text); }
/* 카드 맨 아래 한 줄: "예얍이 처음이신가요? 회원가입" */
.auth-join { margin: 18px 0 0; text-align: center; font-size: 15px; color: var(--muted); }
.auth-join a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 4px; font-weight: 700; }
body.auth .legal-links a { color: var(--muted); }
/* 가입 화면의 '(필수)': 강조색이 차콜이 되면서 본문과 같은 색이 됐다 → 필수 표시만 따로(흰 바탕 6.5:1) */
body.auth .agree-row .need { color: #94301C; }