/* 로그인·회원가입 전용 스타일 — 소비처는 users/user_base.html(로그인·가입 공통) 하나. 값은 리터럴이지만 전부 tt/core/tokens 의 토큰 값이다(서버 템플릿이라 CSS 변수가 없다).
   인접 `← tokenName` 주석이 대응을 적고, tools/check_auth_tokens.py 가 그 대응을 colors.ts·typography.ts·radius.ts 와 대조한다(pre-push).
   ⚠ 토큰 값을 바꾸면 여기도 손으로 맞춘다 — 게이트가 어긋난 선언을 지목한다. */
/* 로그인·회원가입 전용 스타일 — 값은 리터럴이지만 전부 tt/core/tokens/colors.ts 의 토큰 값이다(서버 템플릿이라 CSS 변수가 없다).
   brand #323FA9(primary, hover #28338c primaryHover) · ink #0f172a(textPrimary) · panel #141719(brandInk) · accent #C0F000(brandLime)
   label #4a5058(textSecondary) · muted #5f656e(textTertiary) · border #d7dbe2(borderInput) · hairline #f1f5f9(borderFaint)
   ⚠ 토큰 값을 바꾸면 여기도 손으로 맞춘다(게이트 없음). */

/* ── 페이지: 카드를 뷰포트 정중앙에 띄운다 ─────────────────────────
   사용자 지시: 셸을 화면 전체로 펼치지 않고 **목업 그대로의 카드 컴포넌트**를 중립 배경 위에 가운데 배치. */
/* ⚠ 이 style 블록은 로그인·가입 두 화면에만 붙는다(user_base 상속) — body 리셋을 여기 둬도 다른 화면에 새지 않는다.
   main.css 기본 body margin 8px 를 두면 100vh + 16px 가 되어 **카드가 세로 중앙에서 밀리고 스크롤이 생긴다**. */
body { margin: 0; }

.auth-page {
  box-sizing: border-box;   /* padding 이 100vh 에 더해지면 위와 같은 이유로 스크롤이 생긴다 */
  min-height: 100vh;
  min-height: 100dvh;       /* iOS 사파리 주소창 높이만큼 넘치던 것 — 미지원은 윗줄 유지 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: #f8fafc;      /* ← bgPage */
  color: #0f172a;           /* ← textPrimary */
}

/* ── 셸(카드): 좌 브랜드 패널 / 우 폼 컬럼 — 정지 카드(그림자 없음, DESIGN.md Floating-Only) ───────── */
.auth-shell {
  width: 100%;
  max-width: 920px;
  min-height: 540px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #ffffff;      /* ← bgSurface */
  border: 1px solid #e2e8f0; /* ← border */
  border-radius: 12px;      /* ← radius.xl */
  overflow: hidden;          /* 좌측 패널의 각진 모서리를 카드 radius 로 깎는다 */
  /* 정지 카드 — 그림자 없음(DESIGN.md Floating-Only, 사용자 결정). 1px 테두리가 경계를 만든다 */
}

.auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 44px 40px;
  background: #141719;      /* ← brandInk — 화면의 유일한 먹 면(One Ink) */
}
.auth-brand { display: inline-flex; text-decoration: none; border-radius: 4px; }
.auth-brand:focus-visible { outline: 2px solid #C0F000; outline-offset: 4px; }   /* ← brandLime — 먹 위에서 보이는 유일한 획 색 */
/* 워드마크는 단일 SVG 자산(삼색점 + Ops 포함). 비율 유지를 위해 폭만 지정한다.
   ⚠ 로고 ver final 자산(1115×124)은 박스 **위쪽 24 유닛이 "Ops" 글자상자의 어센트라 비어 있다**
     (= 폭의 24/1115 ≈ 2.15%). 걷어내지 않으면 패널 위 여백이 padding(44px)보다 그만큼 커 보인다.
     폭을 바꾸면 --tt-logo-w 만 바꾼다 — 음수 마진이 따라 계산된다. */
.auth-brand__logo {
  --tt-logo-w: 248px;
  display: block;
  width: var(--tt-logo-w);
  max-width: 100%;
  height: auto;
  margin-top: calc(var(--tt-logo-w) * -0.0215);
}
.auth-panel__headline {
  margin: 0;
  font-size: 26px;          /* ← FontSize.4xl */
  font-weight: 600;
  line-height: 1.35;        /* 두 줄 한국어 — display 토큰의 1 은 숫자용 */
  letter-spacing: -0.01em;
  color: #ffffff;           /* ← white */
}
.auth-panel__rule {
  display: block;
  width: 44px;
  height: 3px;
  margin: 14px 0;
  background: #C0F000;      /* ← brandLime — 획으로만(Lime Stroke) */
}
.auth-panel__sub {
  margin: 0;
  font-size: 13px;          /* ← FontSize.md */
  line-height: 1.75;
  color: #9aa0a8;           /* ← textOnDarkMuted */
}
.auth-panel__copyright {
  margin: 0;
  font-size: 11px;          /* ← FontSize.xs */
  color: #9aa0a8;           /* ← textOnDarkMuted */
}

.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 40px;
}
.auth-col { width: 100%; max-width: 380px; }

.auth-head { margin-bottom: 24px; }
.auth-title {
  margin: 0;
  font-size: 20px;          /* ← FontSize.2xl */
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0f172a;           /* ← textPrimary */
}
.auth-subtitle {
  margin: 4px 0 0;          /* 4 배수 리듬 */
  font-size: 13px;
  color: #5f656e;           /* ← textTertiary */
}

/* 9b 에는 카드 박스가 없다 — 폼이 흰 바탕 위에 바로 놓인다. 래퍼는 구조 유지용으로만 남긴다. */
.auth-card { display: block; }

/* ── 필드 ──────────────────────────────────────────────────────────── */
.auth-fields { display: flex; flex-direction: column; gap: 16px; }
.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.auth-field label {
  display: block;
  margin-bottom: 8px;       /* 라벨↔필드 8(DESIGN.md 여백 서열 8 < 20 < 24) */
  font-size: 12px;          /* ← FontSize.sm */
  font-weight: 600;
  color: #4a5058;           /* ← textSecondary */
}
.auth-field label .req { color: #dc2626; }   /* ← danger */
.auth-field input {
  width: 100%;
  height: 44px;             /* 단독 폼의 큰 타깃 — 앱 안 36/38 과 다른 저작 치수(유지) */
  padding: 0 13px;
  box-sizing: border-box;
  border: 1px solid #d7dbe2; /* ← borderInput */
  border-radius: 8px;       /* ← radius.lg */
  background: #ffffff;
  font-size: 14px;          /* ← FontSize.base */
  color: #0f172a;           /* ← textPrimary */
  caret-color: #323FA9;     /* ← primary — 커서도 상호작용의 색 */
  outline: 2px solid transparent;   /* 링이 포커스를 대체하되 Windows 강제색 모드에서는 outline 이 살아난다 */
  transition: border-color 80ms ease, box-shadow 80ms ease;
}
.auth-field input::placeholder { color: #94a3b8; }   /* ← textFaint */
.auth-field input::selection { background: rgba(50, 63, 169, 0.2); }   /* ← primary 알파 — OS 기본 파랑 대신 */
.auth-field input:focus {
  border-color: #323FA9;    /* ← primary */
  box-shadow: 0 0 0 3px rgba(50, 63, 169, 0.35);   /* ← primaryRing */
}
/* 9b "입력 필드의 연파랑 채움 제거": 그 연파랑은 우리 스타일이 아니라 **크롬 자동완성**이다
   (-webkit-autofill 이 background 를 무시하고 rgb(232,240,254)로 덮는다). 배경은 inset 그림자로만 되돌릴 수 있다.
   ⚠ 그림자 목록의 **항목 순서·개수를 focus 분기와 같게** 둔다 — 다르면 브라우저가 보간을 못 해 링이 전환 없이 툭 뜬다.
     자동완성이 채워지는 순간의 연파랑→흰색 플래시는 box-shadow 전환 0ms 로 끊는다. */
.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover {
  -webkit-text-fill-color: #0f172a;
  box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 0 rgba(50, 63, 169, 0);
  transition: border-color 80ms ease, box-shadow 0ms;
}
.auth-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a;
  box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(50, 63, 169, 0.35);
}
.auth-help {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #5f656e;           /* ← textTertiary */
}
.auth-field.has-error input { border-color: #dc2626; }   /* ← danger */
/* 오류 필드에 포커스하면 빨간 테두리 + 인디고 링이 싸웠다(특이도 동률) — 오류가 이긴다 */
.auth-field.has-error input:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);   /* ← danger 알파 */
}
.auth-field-error {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.5;
  color: #dc2626;           /* ← danger (흰 위 4.8:1) */
}

/* 폼 전체 오류 = Notice(danger) 등급(DESIGN.md Badge-Then-Notice): soft 면 + 같은 계열 테두리 + 진한 글자, `!` 만 danger.
   글자는 danger 가 아니라 dangerDeep — danger 는 soft 면 위 4.4:1 로 AA 미달 */
.auth-error {
  margin: 16px 0 0;         /* 필드 스택과 같은 16 */
  padding: 10px 14px;
  list-style: none;
  border: 1px solid #f3c1c1; /* ← dangerSoftBorder */
  border-radius: 8px;
  background: #fdf7f7;      /* ← dangerSoftBg */
  font-size: 13px;
  line-height: 1.5;
  color: #9e2a17;           /* ← dangerDeep (7.1:1) */
}
.auth-error li + li { margin-top: 4px; }
/* `/ ''` = 대체 텍스트 빈 문자열 — 스크린리더가 "느낌표"를 읽지 않는다(미지원 브라우저는 규칙을 무시해 구와 동일) */
.auth-error li::before { content: '! ' / ''; font-weight: 700; color: #dc2626; }   /* ← danger */

.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;             /* 단독 폼의 저작 치수 */
  margin-top: 20px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #323FA9;      /* ← primary */
  font-family: inherit;
  font-size: 14px;          /* ← FontSize.base */
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 160ms ease, transform 120ms ease-out, box-shadow 80ms ease;   /* 하우스 .tt-press 와 같은 리듬 */
}
.auth-submit:active { transform: translateY(1px) scale(0.98); }
.auth-submit:focus-visible { outline: none; box-shadow: 0 0 0 6px rgba(50, 63, 169, 0.35); }   /* ← primaryRing, 버튼은 6px(Button.css) */
.auth-submit:disabled { opacity: 0.55; cursor: progress; transform: none; }   /* 제출 중 disabled 는 스크립트 몫(범위 밖) — 규칙만 준비 */

.auth-notice {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef0f9;      /* ← primarySoft — 로그인·가입에서는 --ok 가 덮어 단독 노출 없음 */
  font-size: 13px;
  color: #28338c;           /* ← primaryDeep */
}
/* success-soft 의 첫 참조(DESIGN.md "알림 카드 등급으로만"). 글자는 본문색 — success 글자는 soft 면 위 3.1:1 */
.auth-notice--ok {
  margin: 12px 0 0;
  border: 1px solid #bfe6cb; /* ← successSoftBorder */
  background: #f2faf4;      /* ← successSoftBg */
  color: #0f172a;           /* ← textPrimary (success #16a34a 는 3.1:1 미달) */
}
#lime-error { margin-top: 12px; }   /* 버튼 바로 아래 간격 없이 붙었다. --ok 와 같은 12 */
/* 끊기 안내 등장 — hidden 해제 때 140ms(DESIGN.md popover 와 같은 ease). 서버 렌더 .auth-error 는 페이지째 그려져 대상 아님 */
#lime-error, #lime-notice {
  transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
@starting-style {
  #lime-error, #lime-notice { opacity: 0; transform: translateY(-4px); }
}

/* 카드 하단 안내 묶음 — 9b: 구분선 위, 두 줄로 분리 */
.auth-foot {
  margin-top: 16px;         /* padding-top 16 과 쌍 */
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;   /* ← borderFaint */
  font-size: 12px;
  line-height: 1.6;
  color: #5f656e;           /* ← textTertiary */
}
.auth-foot p { margin: 0; }
.auth-foot p + p { margin-top: 8px; }   /* 4 배수 리듬 */
.auth-foot a,
.auth-link {
  -webkit-appearance: none; /* iOS 사파리 버튼 기본 외형·베이스라인 어긋남 방지 */
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: #323FA9;           /* ← primary — 링크·텍스트 버튼은 액션 */
  vertical-align: baseline;
  text-decoration: underline;
  text-decoration-color: transparent;   /* 밑줄은 켜졌다 꺼지는 게 아니라 색이 번진다 */
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.auth-foot a:active,
.auth-link:active { opacity: 0.75; }
.auth-foot a:focus-visible,
.auth-link:focus-visible { outline: 2px solid #323FA9; outline-offset: 2px; border-radius: 3px; text-decoration-color: currentColor; }
.auth-link:disabled { opacity: 0.5; cursor: progress; }   /* 끊기 진행 중 disabled 는 스크립트 몫(범위 밖) — 규칙만 준비 */

/* hover 는 포인터가 있는 기기에서만 — 터치에서 탭 뒤 hover 가 달라붙던 것 */
@media (hover: hover) and (pointer: fine) {
  .auth-submit:hover { background-color: #28338c; }   /* ← primaryHover */
  .auth-foot a:hover,
  .auth-link:hover { color: #28338c; text-decoration-color: currentColor; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-field input, .auth-submit, .auth-foot a, .auth-link { transition: none; }
  .auth-submit:active { transform: none; }
  #lime-error, #lime-notice { transition: opacity 140ms ease; }   /* 이동만 끄고 불투명도는 남긴다 */
  @starting-style { #lime-error, #lime-notice { transform: none; } }
}

/* ⚠ `hidden` 속성은 브라우저 기본 `display:none` 인데, 아래처럼 클래스가
   display 를 지정하면 **작성자 규칙이 이겨서 hidden 이 무시된다** — 모달이 페이지 로드와 함께 열려 있었다.
   hidden 을 쓰는 요소는 전부 여기서 명시적으로 끈다(스테이지에서 실제로 노출된 결함). */
.auth-error[hidden], .auth-notice[hidden] { display: none; }


/* ── 반응형: 분할 해제 → 브랜드 패널이 카드 상단 배너로 ───────────── */
@media (max-width: 900px) {
  .auth-page { padding: 24px 16px; }
  .auth-shell {
    max-width: 460px;   /* 1열이 되면 카드가 가로로 늘어지지 않게 폭을 조인다 */
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .auth-panel {
    justify-content: flex-start;
    gap: 18px;
    padding: 28px 26px;
  }
  .auth-brand__logo { --tt-logo-w: 200px; }
  .auth-panel__headline { font-size: 19px; }
  .auth-panel__rule { margin: 10px 0; }
  .auth-panel__sub { display: none; }   /* 좁은 화면에서는 설명 한 줄을 접는다 */
  .auth-main { padding: 30px 26px 34px; }
}
@media (max-width: 480px) {
  /* 폰에서는 카드 테두리를 없애고 전면 배치 — 좁은 화면에 여백 카드는 손해다 */
  .auth-page { padding: 0; background: #ffffff; align-items: stretch; }
  .auth-shell {
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    border: none;
    border-radius: 0;
  }
  .auth-panel { padding: 24px 18px; }
  .auth-brand__logo { --tt-logo-w: 172px; }
  .auth-main { padding: 26px 18px 40px; align-items: flex-start; }
  .auth-row { grid-template-columns: 1fr; }   /* 가입 아이디/이름 2열은 320px 폰에서 칸당 ~130px — 1열로(품질 정리 #9) */
  /* 16px 미만이면 iOS 사파리가 포커스 시 화면을 자동 확대한다 — 좁은 화면에서만 9b(14px)를 벗어난다 */
  .auth-field input { font-size: 16px; }
}