@charset "utf-8";
/* ==================================================
   auth.css — 아이탐라 Auth Presentation v1

   Login / Signup / Recovery 가 공유하는 **Auth Shell** 과
   Auth Scope 에서만 쓰는 Presentation Primitive 를 담는다.

   Architecture
     Common Auth Shell + Screen-specific Content
     Generic Auth Engine 을 만들지 않는다. 화면이 3~5개뿐이고 State 가 서로 다르다.

   Boundary (docs/auth/ITAMRA_AUTH_AUDIT.md §14)
     [REUSE]                 reset / tokens / common / Logo asset
     [REUSE WITH WRAPPER]    .form-field .form-label .form-input .form-help .form-check
                             Focus Ring 규약 (outline 2px --border-focus)
     [AUTH SPECIFIC]         Auth Header / Main / Container / Primary Button /
                             Utility Row / Divider / Social / Secondary CTA /
                             Head(Back · Title · Description) / Member Type Choice Card
     [DO NOT REUSE]          .registration-layout__* / Registration Surface Grammar /
                             .registration-actions / .mypage-nav / .main-wing /
                             Global GNB / Header location · notification · account

   이 파일은 **Auth 화면에서만 로드**되며 모든 Selector 가 .auth-* 로 Scope 된다.
   header / main / form / button / input 같은 Element Selector 를 쓰지 않는다.
================================================== */


/* ==================================================
   00. Auth Scope — 전역 1680 최소폭에서 분리

   layout.css 는 `body { min-width: var(--service-frame-width) }` 로
   **모든 페이지에 1680px 최소폭**을 건다.
   그 값은 `1400 Main + 40 Gap + 240 Wing` 을 지키기 위한 것이고,
   Auth 는 Wing / Sidebar / 1400 Main 을 전부 쓰지 않는다(Audit §14.5).

   전역 정책을 고치지 않고 **Auth Scope 에서만** 분리한다.
     1차  Auth 화면은 layout.css 를 **로드하지 않는다** (login.html <head> 주석 참고)
     2차  그래도 layout.css 가 들어오는 경우를 대비해 아래 규칙을 둔다.
          body.auth-page 는 body 보다 Specificity 가 높고 auth.css 가 뒤에 로드된다.

   음수 margin / transform / left·top 보정을 쓰지 않는다.
================================================== */

body.auth-page {
  min-width: 0;
  background-color: var(--bg-page); /* #FFFFFF — 전체 White Canvas */
}

/* Inline SVG Sprite 정의부를 화면에서 감춘다.
   프로젝트 기존 Convention(.registration-icon-sprite 등)과 같은 규칙이지만,
   Auth 는 registration-form.css 를 로드하지 않으므로 여기서 직접 선언한다. */
.auth-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.auth-icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==================================================
   01. Auth Header

   Global Header(.header)를 쓰지 않는다. Audit §9.3 —
   로그인 화면에 `로그인` CTA 가 다시 노출되는 자기모순,
   `.header-notification` 이 로그인 사용자 전용이라는 점,
   Baseline 이 `좌측 정렬 로고만` 이라는 점 때문이다.

   높이는 Logo 30 + 상하 20 = 70px 로 Token 조합으로 만든다.
   Global Header(--header-height 90px)보다 가볍고,
   Logo 는 같은 Asset 을 같은 크기(160x30)로 써서 더 커지지 않는다.

   좌측 여백 40px 은 Global Header 의 Safe Padding(--space-10)과 같은 값이라
   Auth 와 다른 화면의 Logo 시작 x 가 어긋나지 않는다.

   [Viewport > 1680px 보정]
   .header__inner 는 max-width: var(--service-frame-width) + margin: 0 auto 로
   1680px Frame 안에서 중앙 정렬되므로, 1680px 보다 넓은 화면(기준 1920x1080 포함)에서는
   Logo 시작 x 가 화면 왼쪽 끝이 아니라 `(뷰포트 - 1680) / 2 + 40px` 가 된다.
   .auth-header__inner 도 같은 Frame 규칙을 따라야 위 문단의 전제(Logo 시작 x 일치)가
   1680px 이하 화면뿐 아니라 실제 기준 화면(1920)에서도 성립한다.
================================================== */

.auth-header {
  background-color: var(--bg-page);
  /* Header <-> 본문 구분. Shadow 대신 가장 약한 Border Token 한 줄만 쓴다. */
  border-bottom: 1px solid var(--border-light);
}

.auth-header__inner {
  display: flex;
  align-items: center;
  max-width: var(--service-frame-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-10); /* 20 / 40 */
}

.auth-header__logo {
  display: inline-flex;
  align-items: center;
}

.auth-header__logo:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.auth-header__logo-image {
  width: 160px;
  height: 30px;
}


/* ==================================================
   02. Auth Main / Container

   Wing / Sidebar / 1400 Main 을 쓰지 않는 **중앙 단일 컬럼**이다.
   화면 전체를 감싸는 거대한 Card 를 만들지 않는다 —
   Container 는 배경도 Border 도 Shadow 도 갖지 않는다.
   White Canvas 위에 Form 이 바로 놓인다.

   세로 위치: 화면 정중앙보다 **약간 위**.
   1920x1080 실측 — Header 71 / Content 666 이라 완전 중앙 정렬이면 Container top 이 243 이다.
   위 Padding 120(--space-20 + --space-10) 이면 top 191 로 중앙보다 52px 위에 놓인다.
   80 은 위로 너무 붙고(top 151) 아래 여백이 과해 보여 한 단계 내렸다.
================================================== */

.auth-main {
  display: flex;
  justify-content: center;
  /* top 120 / 좌우 24(좁은 Viewport 최소 여백) / bottom 40

     bottom 을 64 에서 40 으로 내린 이유 : 문서 높이가 921 이 되어
     1440x900 에서 21px 만큼 세로 Scroll 이 생겼다. 40 이면 897 로 900 안에 들어온다.
     Content 의 세로 위치(top 191)는 바뀌지 않는다. */
  padding: calc(var(--space-20) + var(--space-10)) var(--space-6) var(--space-10);
}

.auth-container {
  width: 100%;
  /* PC Form 으로 읽히는 폭. 시안(1200px 이미지)의 값을 그대로 쓰지 않고
     1920x1080 Visual QA 결과로 정했다. 모바일 폼을 가운데 놓은 인상을 피한다. */
  max-width: 420px;
}


/* ==================================================
   03. Auth Title

   Hero Title 로 키우지 않는다. 로그인 Task 의 중심 정도로만 강조한다.
   --text-detail-title-* (28 / 700 / 1.4) Token 을 그대로 쓴다.
================================================== */

.auth-title {
  margin-bottom: var(--space-8);
  color: var(--text-primary);
  font-size: var(--text-detail-title-size);
  font-weight: var(--text-detail-title-weight);
  line-height: var(--text-detail-title-line-height);
}

.auth-flash {
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body-sm, 14px);
  line-height: 1.5;
}

.auth-flash--error {
  color: var(--text-danger, #b42318);
  background: var(--bg-danger-subtle, #fef3f2);
  border: 1px solid var(--border-danger, #fecdca);
}

.auth-flash--success {
  color: var(--text-success, #027a48);
  background: var(--bg-success-subtle, #ecfdf3);
  border: 1px solid var(--border-success, #a6f4c5);
}

/* 로그인 회원 유형 탭 — 개인회원 / 기업회원 (링크라 JS 없이 동작) */
.auth-login-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.auth-login-tabs__tab {
  padding: var(--space-3) 0;
  text-align: center;
  color: var(--text-tertiary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.auth-login-tabs__tab[aria-current="page"] {
  color: var(--brand-secondary);
  border-bottom-color: var(--brand-secondary);
}

.auth-login-tabs__tab:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.auth-login-note {
  margin: 0 0 var(--space-6);
  color: var(--text-secondary);
  font-size: var(--font-size-body-sm, 14px);
  line-height: 1.5;
}


/* ==================================================
   04. Auth Form

   Field 골격은 components.css 의 .form-field / .form-label / .form-input 을
   그대로 재사용한다. Registration 전용 Wrapper 나 Surface 는 쓰지 않는다.

   .form-input 기본값은 min-height 44 / font-size 14 다.
   Auth 는 입력 항목이 2개뿐인 단독 Task 라 Control 을 한 단계 키운다.
================================================== */

.auth-form {
  margin-bottom: var(--space-8);
}

/* Icon 을 품는 Control Wrapper.
   .form-input 자체를 고치지 않고 Padding 만 Auth Scope 에서 덮는다. */
.auth-control {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-control__icon {
  position: absolute;
  left: var(--space-4);
  display: flex;
  align-items: center;
  color: var(--text-tertiary);
  pointer-events: none;
}

.auth-control .form-input {
  min-height: 52px;
  padding-left: calc(var(--space-4) + 20px + var(--space-3)); /* 16 + icon 20 + 12 */
  padding-right: var(--space-4);
  font-size: var(--font-size-base); /* 16px */
}

/* 오른쪽 Toggle 이 있는 Control 은 그만큼 오른쪽 Padding 을 확보한다 */
.auth-control--with-toggle .form-input {
  padding-right: calc(var(--space-3) + 36px + var(--space-2));
}

.auth-control__toggle {
  position: absolute;
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.auth-control__toggle:hover {
  color: var(--text-secondary);
  background-color: var(--surface-hover);
}

.auth-control__toggle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

/* Toggle 이 켜진 상태(비밀번호 노출 중)를 색으로도 알린다 */
.auth-control__toggle[aria-pressed="true"] {
  color: var(--brand-secondary);
}


/* ==================================================
   05. Primary Action

   프로젝트에 범용 Button Component 가 없다(Audit §14.3).
   유일한 Button 인 .registration-actions__button 은
   min-width 120 + margin-left auto 의 **좌우 배치 전용**이라 재사용하지 않는다.

   Auth 전용 전폭 Primary Button 을 정의한다.
   색은 기존 Token 그대로 — --brand-secondary / hover --brand-interaction.
   (CLAUDE.md — Primary Button 에 --brand-primary 를 쓰지 않는다)
================================================== */

.auth-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: var(--space-8);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background-color: var(--brand-secondary);
  color: var(--text-inverse);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.auth-primary:hover {
  background-color: var(--brand-interaction);
}

.auth-primary:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* ==================================================
   06. Utility Row
   왼쪽 `로그인 유지` (기본 unchecked) / 오른쪽 `비밀번호 찾기`

   `로그인 유지` 는 registration-form.css 가 아니라 이 파일에서
   .form-check 규칙을 Auth Scope 로 다시 선언한다.
   (Auth 는 registration-form.css 를 로드하지 않는다)
================================================== */

.auth-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* components.css / registration-form.css 의 .form-check 와 같은 규격.
   Auth 는 그 파일을 로드하지 않으므로 동일 값을 여기서 선언한다. */
.auth-utility .form-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  cursor: pointer;
}

.auth-utility .form-check__input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--brand-secondary);
  cursor: pointer;
}

.auth-utility .form-check__input:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* ==================================================
   07. Auth Link (Text CTA)

   `회원가입 하기`(Login) / `로그인`(Signup Type) 처럼
   실제 목적지가 있는 CTA 는 <a href> 다.

   `비밀번호 찾기` 처럼 **아직 목적지 화면이 없는** CTA 만
   죽은 href="#" 이나 존재하지 않는 파일로 연결하지 않기 위해
   <button type="button"> 으로 두고 Handler 를 붙이지 않았다.
   Screen 이 생기면 <a href> 로 교체한다.
   reset.css 가 <a> 의 color / text-decoration 을 지우므로
   두 태그의 Visual 은 동일하다.
================================================== */

.auth-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.auth-link:hover {
  color: var(--brand-secondary);
}

.auth-link:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.auth-link--strong {
  color: var(--brand-secondary);
  font-weight: var(--font-weight-semibold);
}

.auth-link--strong:hover {
  color: var(--brand-interaction);
}

.auth-link__chevron {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==================================================
   08. Divider — 좌우 Line + 중앙 텍스트
   장식을 더하지 않고 --border-default 한 줄만 쓴다.
================================================== */

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--border-default);
}


/* ==================================================
   09. Social Login  `[BACKEND PENDING]`

   **UI 상태만 구현한다.** SDK / OAuth / callback / token / redirect 없음.
   Button 에 Handler 를 붙이지 않았고 가짜 성공도 만들지 않는다.

   Primary Login 보다 시각적으로 강해지지 않도록
   원형 48px + 아이콘만 두고 전폭 Button 으로 만들지 않는다.
================================================== */

.auth-social {
  margin-bottom: var(--space-10);
  text-align: center;
}

.auth-social__label {
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

.auth-social__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.auth-social__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--transition-fast);
}

.auth-social__button:hover {
  filter: brightness(0.95);
}

.auth-social__button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Provider Brand Color 는 Design Token 대상이 아니다.
   각 사의 규격 색이라 Palette 로 승격하지 않고 이 Component 안에만 둔다. */
.auth-social__button--kakao {
  background-color: #FEE500;
}

.auth-social__button--naver {
  background-color: #03C75A;
}

.auth-social__mark {
  display: block;
  width: 22px;
  height: 22px;
}

.auth-social__mark--naver {
  width: 20px;
  height: 20px;
  fill: #FFFFFF;
}

/* 아이디 찾기 결과 — 이메일 일부를 가린 계정 목록 */
.auth-find-id-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.auth-find-id-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.auth-find-id-item__type {
  color: var(--brand-secondary);
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold);
}

.auth-find-id-item__email {
  color: var(--text-primary);
  font-size: 18px;
  word-break: break-all;
}

.auth-find-id-item__meta {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm, 13px);
}

/* 개인회원 간편 로그인 — 로그인 버튼과 같은 크기의 가로 버튼 (Provider 규격 색) */
.auth-social-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.auth-social-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-decoration: none;
}

.auth-social-btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.auth-social-btn__mark {
  position: absolute;
  left: var(--space-5);
  width: 20px;
  height: 20px;
}

.auth-social-btn--kakao {
  background-color: #FEE500;
  color: rgba(0, 0, 0, 0.85);
}

.auth-social-btn--naver {
  background-color: #03C75A;
  color: #FFFFFF;
}

.auth-social-btn--naver .auth-social-btn__mark {
  width: 16px;
  height: 16px;
  fill: #FFFFFF;
}

.auth-social-btn--google {
  background-color: #FFFFFF;
  border-color: var(--border-default);
  color: var(--text-primary);
}


/* ==================================================
   10. Secondary CTA — 회원가입 진입  `[PENDING]`

   Header v5 결정에 따라 비로그인 Header 에는 회원가입 CTA 가 없고
   **회원가입 진입은 로그인 화면이 담당**한다.
   `[CONNECTED]` pages/auth/signup-type.html (회원 유형 선택).

   Signup Type 화면도 같은 Block 을 다시 쓴다 —
   `이미 계정이 있으신가요? 로그인`.
================================================== */

.auth-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}


/* ==================================================
   11. Auth Head — Back Action / Title / Description
   (Signup Type 이후 화면에서 쓰는 Head Block)

   Login 은 Title 하나뿐이라 이 Block 을 쓰지 않는다.
   .auth-head 안에서만 .auth-title 의 아래 여백을 줄이므로
   Login 의 Title Geometry 는 바뀌지 않는다.
================================================== */

.auth-head {
  margin-bottom: var(--space-8);
}

/* Title 바로 아래 Description 이 붙는 형태.
   Login 의 `.auth-title { margin-bottom: 32 }` 을 덮지 않고
   .auth-head Scope 안에서만 좁힌다. */
.auth-head .auth-title {
  margin-bottom: var(--space-2);
}

/* 2줄 Hero Title 을 만들지 않는다. Login 과 같은 Typography Scale(28/700)을 쓰고
   줄바꿈을 강제하는 <br> 도 넣지 않는다. */

.auth-description {
  margin-bottom: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

/* Back Action — `‹ 이전으로`
   Browser History 에 의존하지 않고 **실제 Login 경로**를 갖는 <a> 다.
   href="#" 을 만들지 않는다. */
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  /* --text-tertiary(#7B8494)는 White 위 3.78:1 로 14px 본문 기준(4.5:1)에 못 미친다.
     Back 은 실제로 누르는 Control 이므로 --text-secondary(7.53:1)를 쓴다.
     조용하게 보이되 대비는 확보한다. */
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  transition: color var(--transition-fast);
}

.auth-back:hover {
  color: var(--text-primary);
}

.auth-back:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.auth-back__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==================================================
   12. Auth Container Width Variant

   Login Container 는 420px 이다(§02).
   회원 유형 선택은 Card 안에 설명 문구가 들어가므로 그보다 넓은 폭이 필요하다.

   480px 으로 정한 근거 (1920x1080 Visual QA)
     Card 내부 텍스트 폭 = 480 - 좌우 Padding 40 - Icon 48 - Gap 16 - Check 24 - Gap 16
                        = 336px
     가장 긴 설명 `사업자 또는 서비스를 등록·관리하는 회원`(14px)이 한 줄에 들어간다.
     460 이면 이 문구가 2줄로 꺾이고, 520 이면 Auth Form 이 아니라
     일반 콘텐츠 페이지처럼 넓어 보인다.

   Login 의 .auth-container 를 고치지 않고 Modifier 로만 넓힌다 —
   Login Geometry Diff 0 을 보장하기 위해서다.
================================================== */

.auth-container--wide {
  max-width: 480px;
}


/* ==================================================
   13. Member Type Selection  (Signup Step 1)

   Surface Grammar — **Choice Control** 이지 Content Grouping 이 아니다.
     Default   White / 약한 Border / radius-md / Shadow 없음
     Hover     Border 강조만
     Selected  Brand Border + Ring / Icon Surface 강조 / Check Indicator

   Registration 의 Section Card · Nested Card · Category Matrix ·
   Blue-White Context Panel 을 가져오지 않는다.
   선택 Card 전체를 진한 파란 Surface 로 칠하지 않는다.

   Semantics
     실제 <input type="radio"> 를 쓴다(components.css .form-option 과 같은 방식).
     div + onclick 선택 UI 를 만들지 않는다.
     Input 은 화면에서만 감추고 접근성 트리에는 남긴다 —
     checked 상태 전달 · 키보드 화살표 이동 · Focus 가 모두 그대로 동작한다.

   선택 상태를 색으로만 전달하지 않는다.
     Border 색 + Icon Surface + **Check Indicator 의 형태 변화**(빈 원 -> 체크)
     세 가지가 함께 바뀐다.
================================================== */

.auth-type-fieldset {
  /* fieldset 의 기본 최소 폭(intrinsic)이 Container 를 밀어내지 않게 한다.
     border / margin / padding 은 reset.css 가 이미 지운다. */
  min-width: 0;
}

.auth-type-list {
  /* PC 에서도 회원 유형 비교·선택은 세로가 명확하다. 2-column 으로 만들지 않는다. */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-type-option {
  display: block;
  cursor: pointer;
}

/* 실제 Control. 화면에서만 감추고 접근성 트리에는 남긴다.
   components.css .form-option__input 과 동일한 규격이다. */
.auth-type-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Card Visual */
.auth-type-option__body {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.auth-type-option:hover .auth-type-option__body {
  border-color: var(--border-strong);
}

/* Icon — 아주 연한 Surface 위 24px Line Icon */
.auth-type-option__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: var(--bg-subtle);
  color: var(--text-tertiary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.auth-type-option__icon .auth-icon {
  width: 24px;
  height: 24px;
}

.auth-type-option__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1;
}

.auth-type-option__title {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  transition: color var(--transition-fast);
}

.auth-type-option__description {
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

/* Check Indicator
   미선택 = 빈 원 / 선택 = 채워진 원 + 체크.
   **형태가 바뀌므로** 선택 상태가 색에만 의존하지 않는다.
   항상 자리를 차지해 선택 시 Layout 이 흔들리지 않는다. */
.auth-type-option__check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--surface-default);
  color: var(--text-inverse);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.auth-type-option__check .auth-icon {
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* ---------- Selected ---------- */

/* Border 를 굵히는 대신 안쪽 Ring 을 한 겹 더한다.
   Border Width 를 바꾸면 Card 내부가 1px 씩 밀려 선택할 때마다 Layout 이 흔들린다.
   이것은 Elevation Shadow 가 아니라 Border Ring 이다(Shadow Token 을 쓰지 않는다). */
.auth-type-option__input:checked ~ .auth-type-option__body {
  border-color: var(--brand-secondary);
  box-shadow: inset 0 0 0 1px var(--brand-secondary);
}

.auth-type-option__input:checked ~ .auth-type-option__body .auth-type-option__icon {
  background-color: var(--surface-selected);
  color: var(--brand-secondary);
}

.auth-type-option__input:checked ~ .auth-type-option__body .auth-type-option__title {
  color: var(--brand-secondary);
}

.auth-type-option__input:checked ~ .auth-type-option__body .auth-type-option__check {
  border-color: var(--brand-secondary);
  background-color: var(--brand-secondary);
}

.auth-type-option__input:checked ~ .auth-type-option__body .auth-type-option__check .auth-icon {
  opacity: 1;
}

/* ---------- Focus ----------
   Card 전체에 표시한다. components.css .form-option 과 같은 규약이다. */
.auth-type-option__input:focus-visible ~ .auth-type-option__body {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* ==================================================
   14. Primary Action — Disabled State

   회원 유형을 고르기 전에는 `다음` 을 누를 수 없다.
   Card 클릭 즉시 다음 화면으로 넘어가지 않고
   **선택 -> 명시적 다음** 2단계로 진행하기 때문이다.

   색은 프로젝트 기존 Disabled 문법 그대로다
   (components.css `.modal__button--primary:disabled` / `.pagination__nav:disabled`
    — --bg-muted 배경 + --text-disabled 텍스트).

   Login 에는 disabled Button 이 없으므로 Login 에 영향이 없다.
================================================== */

.auth-primary:disabled {
  background-color: var(--bg-muted);
  color: var(--text-disabled);
  cursor: default;
}

/* Hover 는 활성 상태에서만 반응한다 */
.auth-primary:disabled:hover {
  background-color: var(--bg-muted);
}


/* ==================================================
   15. Secondary CTA 앞 간격 (Signup Type)

   Login 에서는 .auth-secondary 앞에 .auth-social(margin-bottom 40)이 있어
   Button -> Divider 간격이 40 + padding 24 = 64 로 잡혔다.
   회원 유형 화면은 .auth-primary 바로 뒤에 오므로 같은 간격을 여기서 만든다.

   인접형제 Selector 라 Login 에는 적용되지 않는다 —
   Login 의 .auth-primary 는 .auth-form 안에 있고 .auth-secondary 와 형제가 아니다.
   과도한 세로 공백을 만들지 않으면서 Login 과 같은 리듬을 유지한다.
================================================== */

.auth-primary + .auth-secondary {
  margin-top: var(--space-10);
}


/* ==================================================
   16. Terms — Container Width

   약관 화면은 항목이 7개 + 마케팅 하위 채널 3개다.
   Signup Type 의 480 보다 한 단계 넓혀 각 Row 가
   `checkbox + 약관명 + (필수/선택) + chevron` 을 한 줄에 담게 한다.

   520px 으로 정한 근거 (1920x1080 Visual QA)
     Row 내부 = 520 - 좌우 Padding 40 - checkbox 20 - gap 12 - chevron 20 - gap 12 = 416px
     가장 긴 `상품 특가, 혜택 등 마케팅 정보 수신 동의 (선택)` 이 한 줄에 들어간다.
     500 이면 그 항목이 2줄로 꺾이고,
     560 이면 Auth Context 를 벗어나 일반 Content Page 처럼 넓어 보인다.

   Login 420 / Signup Type·Company Type 480 은 건드리지 않는다.
================================================== */

.auth-container--terms {
  max-width: 520px;
}


/* ==================================================
   17. Terms — Check Control

   프로젝트에 이미 커스텀 Checkbox 문법이 있다
   (places.css .places-filter__option-input / 부동산 상세조건).
   OS 기본 Control 은 브라우저마다 크기·모서리가 달라
   같은 화면 안에서 미묘하게 어긋난다.
   **같은 문법을 Auth Scope 에 그대로 가져오고 크기만 20px 로 키운다.**
   별도 Custom Checkbox Engine(JS 로 그리는 가짜 Control)을 만들지 않는다 —
   native <input type="checkbox"> 에 CSS 만 입힌다.
================================================== */

.auth-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.auth-check:checked {
  border-color: var(--brand-secondary);
  background-color: var(--brand-secondary);
  /* places.css 와 같은 Inline SVG 체크. 외부 Asset 을 늘리지 않는다. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2l2.4 2.4 4.6-4.8'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 13px 13px;
}

.auth-check:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* ==================================================
   18. Terms — 전체 동의

   Master Control 이라 개별 약관보다 한 단계 강하게 두되
   거대한 Card 로 만들지 않는다. Border + 여백만 쓰고 Shadow 를 쓰지 않는다.
================================================== */

.auth-terms {
  margin-bottom: var(--space-8);
}

.auth-terms__all {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.auth-terms__all:hover {
  border-color: var(--border-strong);
}

/* 개별 약관이 전부 켜졌을 때 Master 도 함께 강조된다.
   :has() 없이 인접형제로 처리해 Baseline 지원 폭을 넓게 가져간다. */
.auth-terms__all-input:checked ~ .auth-terms__all-text {
  color: var(--brand-secondary);
}


/* ==================================================
   19. Terms — 약관 List

   Content Grouping 이지 선택 Card 가 아니다.
   Signup Type 의 `.auth-type-option` 문법(Border + Ring + Icon)을 가져오지 않는다.
   항목이 7개라 각 Row 에 Border 를 두르면 화면이 격자처럼 무거워진다.
   Row 는 배경 없이 나열하고 구분은 여백이 맡는다.
================================================== */

.auth-terms__list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-5);
  /* Master 의 checkbox 와 개별 약관의 checkbox 를 같은 세로선에 놓는다 —
     어긋나면 Master 가 하위 항목보다 안쪽으로 들어가 종속 관계가 거꾸로 보인다.

     `전체 동의` Box 는 Border 1px + Padding 20 이라 내용이 21px 지점에서 시작한다.
     이 List 는 Border 가 없으므로 같은 21px 을 Padding 으로 만든다.
     임의 보정값이 아니라 두 Box 의 Box Model 을 맞추는 계산이다. */
  padding: 0 calc(var(--space-5) + 1px);
}

.auth-terms__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px; /* Pointer Target 확보 */
}

/* Label 이 Row 전체를 덮어 어디를 눌러도 선택된다.
   오른쪽 상세 Button 은 이 Label 바깥에 둔다(중첩 Interactive 금지). */
.auth-terms__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  padding: var(--space-2) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.auth-terms__label:hover {
  color: var(--text-primary);
}

.auth-check:checked ~ .auth-terms__text {
  color: var(--text-primary);
}

.auth-terms__text {
  min-width: 0;
}

/* 필수 / 선택은 **텍스트로** 구분한다.
   색만으로 구분하면 색을 구별하지 못하는 사용자에게 전달되지 않는다.
   색과 굵기는 그 위에 얹는 보조 신호일 뿐이다.

   `(선택)` 에 --text-tertiary(#7B8494)를 쓰면 White 위 3.77:1 로
   14px 본문 기준(4.5:1)에 못 미친다. 약관명과 같은 --text-secondary(7.54:1)를 쓴다.
   구분은 `(필수)` 쪽을 Brand + medium 으로 **올려서** 만든다. */
.auth-terms__badge {
  color: var(--text-secondary);
  font-weight: var(--font-weight-regular);
}

.auth-terms__badge--required {
  color: var(--brand-secondary);
  font-weight: var(--font-weight-medium);
}

/* 약관 상세 보기 — 목적지 화면 `[PENDING]` (§21 참고) */
.auth-terms__detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.auth-terms__detail:hover {
  color: var(--text-primary);
  background-color: var(--surface-hover);
}

.auth-terms__detail:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

.auth-terms__detail-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==================================================
   20. Terms — 마케팅 수신 채널

   상위 `마케팅 정보 수신 동의` 의 하위 항목이라
   왼쪽 들여쓰기로 종속 관계를 보이고, 3개를 가로로 배치한다.
   좁은 Viewport 에서는 자연스럽게 줄바꿈된다(flex-wrap).
================================================== */

.auth-terms__channels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  /* checkbox 20 + gap 12 = 32. 상위 약관명 시작점에 맞춰 들여쓴다. */
  margin: 0 0 var(--space-2) calc(20px + var(--space-3));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--bg-subtle);
}

.auth-terms__channel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.auth-terms__channel:hover {
  color: var(--text-primary);
}

/* 채널 Checkbox 는 약관 Checkbox 보다 한 단계 작다 — 하위 항목이기 때문이다 */
.auth-terms__channel .auth-check {
  width: 18px;
  height: 18px;
}

.auth-terms__channel .auth-check:checked {
  background-size: 12px 12px;
}

.auth-check:checked ~ .auth-terms__channel-text {
  color: var(--text-primary);
}


/* ==================================================
   21. Terms Detail — 약관 상세 문서

   Auth Form 이 아니라 **읽는 문서**다.
   420 / 480 / 520 Auth Container 를 쓰지 않는다.

   Card 도 Shadow 도 없다. White Canvas 위에 본문이 바로 놓이고
   위계는 Typography 와 여백, 조문 사이 얇은 구분선만으로 만든다.

   Auth Header(h71 / Logo 160x30)는 그대로 재사용한다 —
   약관 상세용 Header Variant 를 만들지 않는다.
================================================== */

.auth-terms-detail {
  padding: var(--space-20) var(--space-6);
}

.auth-terms-detail__inner {
  width: 100%;
  /* 지시 기준 1250px. 좁은 Viewport 에서는 좌우 Padding 만큼 자연스럽게 줄어든다
     (width 100% + max-width 조합이라 calc 보정이 필요 없다). */
  max-width: 1250px;
  margin: 0 auto;
}


/* ---------- 문서 제목 ---------- */

.auth-terms-detail__title {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
  /* Auth Title(28)보다 작다. 이 화면의 주인공은 제목이 아니라 본문이다. */
  font-size: var(--font-size-2xl); /* 24px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}


/* ---------- 장 (Chapter) ---------- */

.auth-terms-detail__chapter {
  margin-top: var(--space-12);
  color: var(--text-primary);
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.auth-terms-detail__body > .auth-terms-detail__chapter:first-child {
  margin-top: var(--space-10);
}


/* ---------- 조 (Article) ---------- */

.auth-terms-detail__article {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  /* 조문 사이 구분. Card 로 감싸지 않고 얇은 선 하나만 쓴다. */
  border-top: 1px solid var(--border-light);
}

/* 장 바로 다음 첫 조는 위에 장 제목이 있어 선을 그리지 않는다 */
.auth-terms-detail__chapter + .auth-terms-detail__article,
.auth-terms-detail__body > .auth-terms-detail__article:first-child {
  padding-top: 0;
  border-top: 0;
}

.auth-terms-detail__article-title {
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}


/* ---------- 본문 ---------- */

.auth-terms-detail__paragraph {
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-relaxed); /* 1.7 — 긴 법률 문장을 위한 행간 */
}

/* 항(①②③)은 번호를 문단 왼쪽에 걸어 둔다 */
.auth-terms-detail__paragraph--clause {
  display: flex;
  gap: var(--space-2);
}

.auth-terms-detail__clause-marker {
  flex-shrink: 0;
  color: var(--text-secondary);
}

/* 번호 목록.
   번호를 CSS 가 다시 매기지 않는다(list-style: none) —
   `1.` `가.` 처럼 **원문 번호를 그대로** 보여줘야 하는 법률 문서다. */
.auth-terms-detail__list {
  margin-top: var(--space-3);
  list-style: none;
}

/* 번호와 본문을 한 줄에 두되, 하위 목록(가. 나. 다.)이 들어오면 **다음 줄로 내려간다.**
   wrap 이 없으면 하위 <ol> 이 marker · text 옆의 세 번째 flex 칸으로 밀려
   본문 오른쪽에 따로 떠 버린다. */
.auth-terms-detail__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.auth-terms-detail__item:first-child {
  margin-top: 0;
}

/* 하위 항목(가. 나. 다.)은 한 줄을 통째로 차지하고 상위 **본문 시작점**에 맞춰 들여쓴다.
   28px = marker 최소폭 20 + marker/text 사이 gap 8. */
.auth-terms-detail__list--nested {
  flex-basis: 100%;
  margin: var(--space-2) 0 var(--space-2) calc(20px + var(--space-2));
}

/* 번호도 본문의 일부다(법률 문서에서 번호는 곧 내용).
   --text-tertiary 는 White 위 3.77:1 로 14px 본문 기준(4.5:1)에 못 미쳐
   본문과 같은 --text-secondary(7.54:1)를 쓴다. */
.auth-terms-detail__marker {
  flex-shrink: 0;
  min-width: 20px;
  color: var(--text-secondary);
}

/* 번호 옆 본문이 남은 폭을 다 쓰게 해 하위 목록이 확실히 다음 줄로 내려가게 한다 */
.auth-terms-detail__item-text {
  flex: 1;
  min-width: 0;
}


/* ---------- 불러오기 실패 ----------
   약관 본문을 불러오지 못했을 때의 최소 상태다.
   빈 화면으로 두거나 다른 약관을 대신 보여주지 않는다.
   개발 오류 메시지 / stack 을 노출하지 않는다. */

.auth-terms-detail__fallback {
  margin-top: var(--space-10);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.auth-terms-detail__fallback-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  color: var(--brand-secondary);
  font-weight: var(--font-weight-semibold);
}

.auth-terms-detail__fallback-link:hover {
  color: var(--brand-interaction);
}

.auth-terms-detail__fallback-link:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ==================================================
   22. Account Check — 이미 본인 인증된 계정 발견 `[UI MOCK]`

   **Signup 의 정상 Step 이 아니다.**
   향후 본인인증 API 가 `동일 본인인증 정보로 가입된 계정이 있음` 을 돌려줄 때
   보여줄 **Exception Result Screen** 이다.
   Progress / Stepper 를 두지 않고 Signup State 도 건드리지 않는다.

   오류 화면이 아니라 **중립적인 안내**다 —
   빨간 Error 색 / Warning Icon / Alert Box / Modal 을 쓰지 않는다.

   Layout
     시안처럼 위쪽 Result Block 과 아래쪽 CTA 가 떨어져 있다.
     position / top / transform / 음수 margin / viewport 별 magic number 를 쓰지 않고
     **body flex column + main flex:1 + CTA margin-top:auto** 로 구조적으로 만든다.
     Header 높이를 상수로 계산하지 않으므로 Header 가 바뀌어도 따라간다.
================================================== */

/* body.auth-page 공통 규칙은 그대로 두고 이 화면에서만 세로 Flex 로 만든다.
   다른 Auth 화면의 Layout 에 영향을 주지 않기 위해 Modifier 로 분리했다. */
body.auth-page--account-check {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-account-check {
  display: flex;
  flex-direction: column;
  /* Header 를 뺀 나머지 세로 공간 전부. calc(100vh - 71px) 같은 상수를 쓰지 않는다. */
  flex: 1;
  /* 위 여백은 다른 Auth 화면(120)과 같은 계열, 아래는 CTA 가 바닥에 붙지 않을 만큼 */
  padding: calc(var(--space-20) + var(--space-10)) var(--space-6) var(--space-20);
}

/* .auth-container(420) 를 그대로 쓰고 세로 Flex 성격만 더한다 */
.auth-account-check__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0 auto;
  /* Result Message 는 가운데 정렬이다(Login Form 의 좌측 정렬과 다르다) */
  text-align: center;
}

/* Result Block 과 CTA 사이 **최소** 간격.
   화면이 크면 아래 margin-top:auto 가 그만큼 더 벌린다. */
.auth-account-check__result {
  margin-bottom: var(--space-10);
}

/* 발견된 계정 표시.
   **선택지가 아니라 정보 표시**다 — Border 강조 / Shadow / Hover / Cursor 를 두지 않는다.
   Signup Type 의 선택 Card(.auth-type-option) 문법을 가져오지 않는다. */
.auth-account-check__account {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--bg-subtle);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  /* 아주 긴 이메일이 Container 를 밀지 않게 한다 */
  overflow-wrap: anywhere;
}

/* Provider Badge — 이 계정이 네이버 연동임을 알리는 **보조 정보**다.
   §27 계정 찾기 확인과 **공유**한다 — 같은 표식이라 크기/색이 갈리면 안 된다.
   Social Login Button(.auth-social__button 48px)과 목적이 달라 재사용하지 않고
   훨씬 작은 Badge 로 둔다. 누를 수 없다.
   색은 login.html 의 .auth-social__button--naver 와 같은 Provider 규격 색이다
   (각 사의 상징색이라 Design Token 으로 승격하지 않는다). */
.auth-account-check__provider,
.auth-recovery-result__provider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background-color: #03C75A;
}

.auth-account-check__provider-mark,
.auth-recovery-result__provider-mark {
  width: 11px;
  height: 11px;
  fill: #FFFFFF;
}

/* CTA 를 남은 공간 끝으로 민다. 시안의 `넓은 여백` 이 여기서 나온다.
   .auth-primary 의 margin-top(32)을 대체하며, 남는 공간이 없으면
   위 .auth-account-check__result 의 margin-bottom(40)이 최소 간격으로 남는다. */
.auth-account-check__cta {
  margin-top: auto;
}


/* ==================================================
   23. Auth Form Control (일반회원 / 기업회원 / 비밀번호 재설정 공용)

   일반회원(.auth-personal-signup) · 기업회원(.auth-company-signup) ·
   비밀번호 재설정(.auth-password-reset)이
   **같은 Form Control 밀도와 같은 Validation 표현**을 쓴다.
   두 화면이 Signup Flow 안에서 연달아 나오므로 Control 이 달라 보이면 안 된다.
   값을 복제하지 않고 Selector 만 함께 둔다.

   Container 폭은 서로 다르다(일반 420 / 기업 480). 그건 §02·§12·§24 가 맡는다.
   일반회원 Field 는 6개라 Login 과 같은 420 Container 를 쓴다 —
   설명이 긴 선택 Card 화면이 아니므로 480 / 520 Modifier 를 쓰지 않는다.
   **세로 Layout(Head / Scroll / Action)은 §24 에서 둘이 완전히 공유한다.**

   Form 골격은 components.css 의 .form-field / .form-label /
   .form-label__required / .form-input / .form-help 를 그대로 재사용한다.
   Registration 전용(.registration-form / .registration-actions / Surface Card)은 쓰지 않는다.
   Broker / Dealer / Business Card 의 Domain Detail UI 도 가져오지 않는다.

   Validation Presentation 은 registration-form.css 에 이미 규약이 있지만
   **Auth 는 그 파일을 로드하지 않으므로** 같은 값을 여기서 Auth Scope 로 다시 선언한다
   (.auth-utility .form-check 와 같은 방식).
================================================== */

/* Control 크기.
   .form-input 기본값은 min-height 44 / font-size 14 다.
   Login 의 Auth Control(52 / 16)과 같은 밀도로 맞춘다 —
   Icon Wrapper(.auth-control)가 없는 화면이라 좌우 Padding 은 기본형으로 둔다. */
.auth-personal-signup .form-input,
.auth-company-signup .form-input,
.auth-password-reset .form-input {
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base); /* 16px */
}

/* Label 8 -> Input 52 -> 다음 Field 24.
   .form-field + .form-field 의 24(--space-6)와 .form-label 의 8(--space-2)은
   components.css 기본값이라 따로 덮지 않는다. */

/* Validation — Border + Inline Message 중심.
   빨간 배경 Block / Alert Modal 을 쓰지 않는다(registration-form.css 와 같은 원칙). */
.auth-personal-signup .form-input.is-invalid,
.auth-company-signup .form-input.is-invalid,
.auth-password-reset .form-input.is-invalid {
  border-color: var(--error);
}

.auth-personal-signup .form-error,
.auth-company-signup .form-error,
.auth-password-reset .form-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--error);
  font-size: var(--font-size-xs); /* 12px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

/* Message 가 없을 때는 자리도 차지하지 않는다.
   .form-error 의 display:flex 가 [hidden] 을 이기므로 명시적으로 끈다. */
.auth-personal-signup .form-error[hidden],
.auth-company-signup .form-error[hidden],
.auth-password-reset .form-error[hidden] {
  display: none;
}

/* `.auth-signup-info .auth-form { margin-bottom: 0 }` 은 삭제했다.
   Primary 가 Form 의 마지막 요소일 때 생기던 죽은 여백을 없애는 규칙이었는데,
   §24 Layout 으로 바꾸면서 Primary 가 Form 밖 Action 영역으로 나갔고
   Form 자체도 .auth-form Block 을 쓰지 않는다. 대상이 사라진 규칙이다. */


/* ==================================================
   24. Auth Form Screen Vertical Layout (일반회원 / 기업회원 / 비밀번호 재설정 공용)

   Form 이 있는 Auth 화면 셋이 **같은 세로 Architecture** 를 쓴다.
     Header 고정 -> Head 고정 -> Form 만 Scroll -> Action 고정

   먼저 기업회원(Field 10개)에서 검증한 뒤 일반회원(Field 6개)을 같은 문법에 태웠다.
   값을 복제하지 않고 Selector 만 함께 둔다 — 두 화면의 Layout 이 갈라지면
   Signup Flow 안에서 화면이 바뀔 때마다 Content 시작 높이가 튄다.

   다른 것은 **가로 폭뿐**이다.
     일반회원 .auth-container        420  (Login 과 같은 폭. Field 가 단순하다)
     기업회원 .auth-container--wide  480  (주소 Input+Button 같은 복합 Control 때문)
   폭은 §02 / §12 가 이미 갖고 있어 여기서 다시 정하지 않는다.

   Generic Layout Component 로 키우지 않았다 — Step 정의도 Slot 도 없고,
   두 화면이 공유하는 것은 `머리 / 스크롤 몸통 / 발` 이라는 배치 규칙뿐이다.

   일반회원이 Flow Layout 에서 이 구조로 옮겨온 이유
     Field 6개라 1920 에서는 넘치지 않지만 1440 에서 121px, 1366 에서 253px 만큼
     문서가 넘쳐 **`회원가입` 버튼이 화면 밖으로 밀렸다.**
     Content 시작 높이도 191 이라 기업회원(111)과 어긋나 있었다.

   왜 .auth-main 을 쓰지 않는가
     .auth-main 은 `위 Padding 120 + 중앙 단일 컬럼` 의 **흐름형** Layout 이다.
     Field 가 최대 10개인 이 화면을 그 위에 얹으면 문서가 길어져
     `회원가입 완료` 가 화면 밖으로 밀린다.
     전역 .auth-main 을 고치면 Login / Signup Type / Terms / Personal Info 가
     전부 영향을 받으므로, 이 화면 전용 Main 을 따로 둔다.

   구조 (두 화면 공통. 아래 <block> 은 personal / company)
     body.auth-page--<block>-signup   height 100vh / flex column / overflow hidden
     └ .auth-header                   고정 (기존 Auth Header 그대로)
     └ .auth-<block>-signup           flex:1 / min-height:0 / flex column
        ├ __head                      flex:0 0 auto — Title / Description
        ├ __scroll                    flex:1 / min-height:0 / overflow-y:auto
        └ __action                    flex:0 0 auto — Primary

   position:fixed Overlay 를 쓰지 않는 이유
     Overlay 는 Layout 공간을 차지하지 않아 Form 마지막 필드를 덮는다.
     그걸 피하려면 Form 아래에 버튼 높이만큼 가짜 Padding 을 넣어야 하는데,
     그건 버튼 높이가 바뀔 때마다 어긋나는 magic number 다.
     __action 은 **실제 Flex 영역**이라 Scroll 영역이 그만큼 줄어든다.

   min-height:0 이 두 곳에 필요한 이유
     Flex Item 의 기본 min-height 는 auto 라 내용보다 작아지지 않는다.
     그대로 두면 __scroll 이 내용 높이만큼 부풀어 overflow-y:auto 가
     발동하지 않고 body 가 대신 넘친다.

   음수 margin / transform / top·left 보정 / magic number 를 쓰지 않는다.
================================================== */

/* height(100vh) 를 쓰는 이유 : min-height 면 내용이 길 때 body 가 같이 늘어나
   Scroll 이 두 겹(body + form)으로 생긴다. 높이를 Viewport 로 못박아
   넘치는 부분을 __scroll 하나가 전부 흡수하게 한다. */
body.auth-page--personal-signup,
body.auth-page--company-signup,
body.auth-page--password-reset {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* root.php 의 #root 가 body 와 main 사이를 끊어 flex 체인을 이어 준다 */
body.auth-page--personal-signup #root,
body.auth-page--company-signup #root,
body.auth-page--password-reset #root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.auth-personal-signup,
.auth-company-signup,
.auth-password-reset {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Container 를 가운데 놓는다.
   .auth-main 은 flex + justify-content 로 했지만 여기서는 세 영역이 각각
   Container 를 품으므로 margin auto 가 단순하다.
   폭은 .auth-container--wide(480) 를 그대로 쓴다 —
   기업 유형 선택 화면과 같은 폭이라 Flow 중간에 폭이 튀지 않고,
   `주소 Input + 주소 검색 Button` 한 줄도 380/92 로 무리 없이 들어간다.
   520 은 Auth Form 이 아니라 업무용 Form Workspace 처럼 넓어 보인다. */
.auth-personal-signup .auth-container,
.auth-company-signup .auth-container,
.auth-password-reset .auth-container {
  margin-right: auto;
  margin-left: auto;
}

/* Head — Header 아래 여백은 .auth-main 의 120 보다 작다.
   이 화면은 Head 가 화면을 차지할수록 Form Scroll 영역이 줄어든다. */
.auth-personal-signup__head,
.auth-company-signup__head,
.auth-password-reset__head {
  flex: 0 0 auto;
  padding: var(--space-10) var(--space-6) var(--space-6);
}

/* .auth-title 의 아래 여백(32)은 Description 이 바로 붙는 이 Head 에서 과하다.
   .auth-head 가 하는 것과 같은 조정이지만, 이 화면은 Head Block 을
   Layout 영역으로 쓰므로 여기서 직접 준다. */
.auth-personal-signup__head .auth-title,
.auth-company-signup__head .auth-title,
.auth-password-reset__head .auth-title {
  margin-bottom: var(--space-2);
}

/* Scroll 영역 — 이 화면에서 유일하게 스크롤되는 곳.
   overflow-x 는 hidden 이 아니라 기본값(visible->auto 상속 없음)으로 두지 않고
   가로 Scrollbar 가 생기지 않도록 Content 폭을 Container 가 이미 제한한다. */
.auth-personal-signup__scroll,
.auth-company-signup__scroll,
.auth-password-reset__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--space-6);
}

/* Scrollbar 가 Container 오른쪽 끝에 딱 붙지 않게 한다.
   Scrollbar 는 Padding Box 바깥에 그려지므로 Input 위에 겹치지 않는다. */

/* 마지막 Field 가 Action 경계선에 붙지 않게 아래 여백을 준다.
   32 는 Field 간격(24)보다 한 단계 큰 값이라 `여기서 끝났다` 로 읽힌다.
   버튼 높이만큼 비워두는 가짜 Padding 이 아니다 —
   Action 은 이미 Layout 공간을 따로 차지한다. */
.auth-personal-signup__scroll .auth-container,
.auth-company-signup__scroll .auth-container,
.auth-password-reset__scroll .auth-container {
  padding-bottom: var(--space-8);
}

/* Keyboard 로 Scroll 영역에 Focus 가 들어왔을 때 어디인지 보이게 한다.
   tabindex="0" 를 준 요소는 Focus Ring 이 없으면 사용자가 위치를 잃는다. */
.auth-personal-signup__scroll:focus-visible,
.auth-company-signup__scroll:focus-visible,
.auth-password-reset__scroll:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

/* Action — 항상 보이는 하단 영역.
   위 Border 한 줄로 Scroll 영역과 구분한다(Shadow 를 쓰지 않는다 —
   실제로 떠 있는 요소가 아니라 Layout 영역이다). */
.auth-personal-signup__action,
.auth-company-signup__action,
.auth-password-reset__action {
  flex: 0 0 auto;
  padding: var(--space-6);
  border-top: 1px solid var(--border-light);
  background-color: var(--bg-page);
}

/* .auth-primary 는 Form 마지막 요소로 쓰이는 것을 전제로 margin-top 32 를 갖는다.
   여기서는 Action 영역의 Padding 이 그 역할을 하므로 없앤다. */
.auth-personal-signup__submit,
.auth-company-signup__submit,
.auth-password-reset__submit {
  margin-top: 0;
}


/* --------------------------------------------------
   24.1 사업장 주소 — Input + 주소 검색 Button
   **기업회원 전용** (일반회원에는 주소 필드가 없다)
   -------------------------------------------------- */

/* 한 줄 배치. Button 은 줄어들지 않고 Input 이 남는 폭을 갖는다. */
.auth-address {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.auth-address__input {
  flex: 1;
  min-width: 0;
}

/* readonly Input 은 `지금 타이핑할 곳이 아니다` 로 읽혀야 한다.
   disabled 가 아니라 readonly 다 — Focus 와 값 읽기는 가능해야 한다. */
.auth-address__input:read-only {
  background-color: var(--bg-subtle);
  cursor: default;
}

.auth-address__input:read-only:hover {
  border-color: var(--border-default);
}

.auth-address__detail {
  margin-top: var(--space-2);
}

/* Secondary Button.
   .auth-primary(Brand 채움)와 구분되는 Outline 형이다.
   Primary Action 은 화면에 하나(`회원가입 완료`)뿐이어야 한다. */
.auth-address__button {
  flex: 0 0 auto;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.auth-address__button:hover {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

.auth-address__button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* --------------------------------------------------
   24.2 명함/로고 이미지 — 파일 선택 + 로컬 미리보기
   **기업회원 전용** (일반회원에는 이미지 필드가 없다)
   -------------------------------------------------- */

/* Native Button 을 쓰지 않는 이유
     input[type=file] 이 그리는 `Choose File` / `파일 선택` 문구와
     `No file chosen` 은 **브라우저 Locale 을 따라간다.** CSS 로 바꿀 수 없어
     한국어 화면에 영어 버튼이 그대로 노출될 수 있다.

   대신 실제 input 은 .sr-only 로 **화면에서만** 감추고(Focus·Tab·SR 유지),
   <label for> 를 버튼 모양으로 만든다. Label 은 클릭·Enter·Space 로
   파일 선택창을 여는 Native 동작을 그대로 갖는다.
   display:none 이었다면 Focus 를 받지 못해 Keyboard 로 열 수 없다. */
.auth-upload {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Secondary Button. 주소 검색 버튼과 같은 문법이다 —
   화면의 Primary Action 은 `회원가입 완료` 하나뿐이어야 한다. */
.auth-upload__button {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
  color: var(--text-primary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.auth-upload__button:hover {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

/* Focus 는 감춰진 input 이 받는다. Ring 은 눈에 보이는 Label 에 그린다 —
   그렇지 않으면 Keyboard 사용자가 현재 위치를 볼 수 없다. */
.auth-upload__input:focus-visible + .auth-upload__button {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* 선택한 파일명. 길면 줄이지 않고 말줄임한다 — 버튼을 밀어내지 않게 한다. */
.auth-upload__name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 아직 고르지 않은 상태는 값이 아니라 안내라 한 단계 약하게 둔다.
   --text-tertiary(3.77:1)가 아니라 --text-secondary(7.54:1)를 쓴다. */
.auth-upload__name.is-empty {
  color: var(--text-secondary);
}

/* 미리보기 — 선택 전에는 [hidden] 이라 자리도 차지하지 않는다.
   Registration 의 Photo Picker(Grid · 대표사진 · 정렬)를 가져오지 않는다.
   여기서 필요한 건 `고른 이미지가 이것이 맞나` 확인뿐이다. */
.auth-upload__preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.auth-upload__preview[hidden] {
  display: none;
}

/* 작게 유지한다. Auth 화면이 이미지 편집 화면처럼 보이지 않게 한다.
   object-fit: contain — 로고는 잘리면 안 된다(cover 는 가장자리를 자른다). */
.auth-upload__image {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--bg-subtle);
  object-fit: contain;
}

/* Text Button. 삭제는 파괴적 동작이 아니라 `선택 취소` 라 빨간색을 쓰지 않는다. */
.auth-upload__remove {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.auth-upload__remove:hover {
  color: var(--brand-secondary);
}

.auth-upload__remove:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ==================================================
   25. Signup Complete — 회원가입 완료

   Signup Flow 의 마지막 화면이다. 일반회원 / 기업회원이 같은 화면으로 합류한다.

   아래 Shell 세 규칙(body / main / __inner)은 §26 계정 찾기 · §27 계정 찾기 확인과
   **공유**한다 — 셋 다 `Header + 420 중앙 열 + 가운데 정렬` 의 Result/Guide Screen 이다.
   그 아래 Block(__result / __video / __cta)은 이 화면 전용이다.

   성공 Alert / Modal / Toast 가 아니라 **독립적인 Auth Result Screen** 이다 —
   Card / Shadow / Surface / Registration UI 를 쓰지 않는다.
   White Canvas 위에 Title · Description · Motion · CTA 만 놓인다.

   Layout
     Account Check(§22)와 같은 문법이다.
       body flex column -> main flex:1 -> CTA margin-top:auto
     시안의 `중앙과 하단 사이 넓은 여백` 이 여기서 구조적으로 나온다.
     position / top / transform / 음수 margin / viewport 별 magic number 를 쓰지 않아
     Header 높이가 바뀌어도 따라간다.

   Account Check 와 Block 을 공유하지 않고 따로 두는 이유
     그 화면은 `발견된 계정 표시` 라는 정보 Block 이 중심이고
     이 화면은 `Completion Motion` 이 중심이라 안에 들어가는 것이 다르다.
     공유하는 것은 Layout **문법**이지 Class 가 아니다.
================================================== */

/* body.auth-page 공통 규칙은 그대로 두고 이 화면에서만 세로 Flex 로 만든다.
   min-height 라서 작은 Viewport 에서는 내용이 넘치며 세로 Scroll 이 생긴다
   (기업회원 화면의 height:100vh + overflow:hidden 과 다르다 —
    거기는 Form 만 스크롤시켜야 했고, 여기는 화면 전체가 흘러도 된다). */
body.auth-page--signup-complete,
body.auth-page--account-recovery,
body.auth-page--recovery-result,
body.auth-page--password-reset-complete {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-signup-complete,
.auth-account-recovery,
.auth-recovery-result,
.auth-password-reset-complete {
  display: flex;
  flex-direction: column;
  /* Header 를 뺀 나머지 세로 공간 전부. calc(100vh - 71px) 같은 상수를 쓰지 않는다. */
  flex: 1;
  /* 위 80 / 좌우 24 / 아래 80.
     Account Check(위 120)보다 위를 한 단계 줄였다 — 중앙에 420 짜리 정사각 영상이
     들어와 세로 예산이 그만큼 빠듯하다. 1440x900 까지 Scroll 없이 들어간다. */
  padding: var(--space-20) var(--space-6);
}

/* .auth-container(420) 를 그대로 쓰고 세로 Flex 성격만 더한다.
   폭을 420 으로 두는 이유 : CTA 가 다른 Auth 화면과 같은 폭이어야 하고,
   Title · Video · CTA 가 하나의 세로 열로 정렬돼 보여야 한다. */
.auth-signup-complete__inner,
.auth-account-recovery__inner,
.auth-recovery-result__inner,
.auth-password-reset-complete__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0 auto;
  /* Result 는 가운데 정렬이다(Login Form 의 좌측 정렬과 다르다) */
  text-align: center;
}

/* Result Block 과 CTA 사이 **최소** 간격.
   화면이 크면 아래 margin-top:auto 가 그만큼 더 벌린다. */
.auth-signup-complete__result {
  margin-bottom: var(--space-10);
}

/* Title 바로 아래 Description 이 붙는다 — .auth-head 와 같은 규칙이지만
   이 화면은 .auth-head Block 을 쓰지 않으므로(Back Action 이 없다) 여기서 직접 준다.
   Login 의 .auth-title { margin-bottom: 32 } 를 덮지 않는다.

   keep-all : `아이탐라 회원이 되신 걸 환영해요!` 는 28px 기준 420 을 넘어 두 줄이 된다.
   기본 word-break 는 음절 중간에서 꺾어 `...환영해 / 요!` 가 된다.
   프로젝트 기존 규약(components.css §Feature Chip 주석)대로 어절 단위로 꺾는다.
   <br> 로 줄바꿈을 못박지 않는다 — 폭이 바뀌면 어긋난다. */
.auth-signup-complete__result .auth-title {
  margin-bottom: var(--space-2);
  word-break: keep-all;
}

/* Completion Motion.

   width:100%  -> Container(420)를 그대로 채운다. 아래 CTA 와 폭이 정확히 같아
                  Title · Video · CTA 가 한 열로 읽힌다.
                  360/400 같은 별도 숫자를 두지 않는다 — 그러면 CTA 와 폭이 어긋나고
                  Container 를 바꿀 때마다 따로 맞춰야 한다.
   aspect-ratio -> 원본이 720x720(1:1)이다. 높이를 강제하지 않고 비율로 잡는다.
                   **파일을 못 받아도 Box 크기가 유지돼** Layout 이 무너지지 않는다.
   object-fit:contain -> 비율을 깨지 않는다. Container 가 좁아져도 잘리지 않는다.

   `[ASSET MISMATCH]` 이 영상의 배경은 투명이 아니라 불투명한 검정이다.
   White Canvas 위에서 검은 정사각형으로 보인다.
   White 배경에서 검정을 걷어내는 blend-mode 는 존재하지 않고
   (screen/lighten 은 흰 backdrop 을 만나면 전부 흰색이 된다),
   휘도->알파 SVG Filter 는 일러스트의 검은 외곽선까지 지운다.
   영상을 편집하지 않는다는 제약 아래에서는 **원본을 그대로 보여주는 것**이 맞다.
   Radius 만 줘서 잘린 사각형이 아니라 의도된 Media Block 으로 읽히게 한다.
   Card 가 아니므로 Border 도 Shadow 도 두지 않는다. */
.auth-signup-complete__video {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--space-10);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  object-fit: contain;
}

/* CTA 를 남은 공간 끝으로 민다. 시안의 `넓은 여백` 이 여기서 나온다.
   .auth-primary 의 margin-top(32)을 대체하며, 남는 공간이 없으면
   위 .auth-signup-complete__result 의 margin-bottom(40)이 최소 간격으로 남는다. */
.auth-signup-complete__cta,
.auth-password-reset-complete__cta {
  margin-top: auto;
}

.auth-signup-complete__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
  width: 100%;
}

.auth-signup-complete__actions .auth-signup-complete__cta {
  margin-top: 0;
}

.auth-signup-complete__verify {
  margin-top: var(--space-6);
  text-align: left;
}

.auth-secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 12px);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-base, 16px);
  font-weight: var(--font-weight-semibold, 600);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.auth-secondary-cta:hover {
  border-color: var(--border-strong, #94a3b8);
  color: var(--text-primary);
}


/* ==================================================
   26. Account Recovery — 계정 찾기

   로그인하려는 사용자가 휴대폰 본인인증으로 자기 계정을 찾는 진입 화면이다.
   아이디 찾기 / 비밀번호 찾기를 나누지 않고 본인인증 1회로 합쳤다.

   Signup Complete(§25)와 같은 **Result/Guide Screen** 계열이라
   Shell 세 규칙(body / main / inner)을 그대로 공유한다 —
   Header 아래 여백 80, 420 중앙 열, 가운데 정렬, Header 를 뺀 세로 공간 전부.
   값을 복제하면 두 화면의 위 여백이 서로 모르게 갈라진다.

   공유하지 않는 것
     §25 의 __result / __video / __cta 는 `Title+설명+영상` 구성 전용이다.
     이 화면은 `Title / 중앙 Illustration / 하단 CTA` 3단이라 배치가 다르다.
     Signup Complete 의 Class 를 억지로 끌어다 쓰지 않는다.

   세로 구성
     __head    flex:0 0 auto   Title (Description 없음)
     __visual  flex:1          남는 공간 전부 + 그 안에서 Illustration 가운데
     __action  flex:0 0 auto   본인인증하기

     __visual 이 flex:1 로 slack 을 흡수하므로 CTA 에 margin-top:auto 가 필요 없고,
     좁은 Viewport 에서는 __visual 이 먼저 줄어 자연스럽게 압축된다.
     시안의 1204x677 좌표를 그대로 옮기지 않고 Composition 만 재현한다.

   position / top / transform / 음수 margin / viewport 별 magic number 를 쓰지 않는다.
================================================== */

/* Shell 세 규칙은 §25 와 완전히 같다. Selector 만 함께 둔다.
   min-height 라서 아주 좁은 Viewport 에서는 내용이 넘치며 세로 Scroll 이 생긴다
   (기업/일반 회원정보 화면의 height:100vh + overflow:hidden 과 다르다 —
    거기는 Form 만 스크롤시켜야 했고, 여기는 화면 전체가 흘러도 된다). */

/* Title 은 §03 의 28/700 을 그대로 쓴다. 시안의 크기를 복사해
   Celebration Hero 로 키우지 않는다 — Login / Signup 과 같은 Auth Title Grammar 다.

   margin-bottom 0 : §03 기본값 32 를 여기서 끈다.
   Title 아래 간격은 __visual 의 padding 이 담당한다 —
   두 여백이 겹쳐 붙으면 시안보다 Title 이 위로 떠 보인다.

   keep-all : <br> 로 두 줄을 고정했지만 폭이 더 좁아져 한 줄이 넘칠 때
   음절 중간(`필요해 / 요`)이 아니라 어절 단위로 꺾이게 한다
   (프로젝트 기존 규약 — components.css / §25 와 같다). */
.auth-account-recovery__head .auth-title {
  margin-bottom: 0;
  word-break: keep-all;
}

/* 남는 세로 공간 전부를 차지하고 그 안에서 Illustration 을 가운데 둔다.
   min-height:0 : Flex Item 기본값 auto 로는 내용보다 작아지지 않아
   좁은 Viewport 에서 압축되지 않는다.
   위아래 Padding 은 Title / CTA 와 붙지 않게 하는 **최소** 간격이고,
   화면이 크면 flex:1 이 그만큼 더 벌린다. */
.auth-account-recovery__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  padding: var(--space-10) 0;
}

/* 시안의 시각 크기(150~170 계열)에 맞춘 폭이다.
   원본 viewBox 220x315(세로형, 0.698:1)라 height 는 비율대로 따라간다(약 229).
   height 를 고정하거나 transform:scale 로 키우지 않는다 — 비율이 깨진다.

   object-fit:contain : 지금 구조에서는 Box 가 이미지 비율 그대로라 잘릴 일이 없지만,
   좁은 Viewport 에서 Box 가 눌리더라도 Artwork 가 잘리지 않게 하는 안전장치다.
   (원본 SVG 는 viewBox 전체가 그려져 있어 여백을 잘라낼 것이 없다)

   max-width:100% : 420 Container 보다 커질 일은 없지만 넘침을 구조적으로 막는다. */
.auth-account-recovery__image {
  display: block;
  width: 160px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Action 은 Layout 안의 실제 영역이다. position:fixed Overlay 가 아니다.
   .auth-primary 의 위 여백(32)은 __visual 의 아래 Padding 이 이미 담당한다. */
.auth-account-recovery__action {
  flex: 0 0 auto;
}

.auth-account-recovery__cta {
  margin-top: 0;
}


/* ==================================================
   27. Account Recovery Result — 계정 찾기 확인

   본인인증을 마친 사용자에게 찾은 계정을 보여주고
   새 비밀번호 설정 단계로 넘기는 화면이다.

   §25 / §26 과 같은 **Result/Guide Screen** 계열이라
   Shell 세 규칙(body / main / __inner)을 그대로 공유한다.
   이제 이 Shell 을 Signup Complete · 계정 찾기 · 계정 찾기 확인 셋이 함께 쓴다 —
   값을 복제하면 세 화면의 위 여백이 서로 모르게 갈라진다.

   Badge 두 규칙은 §22 Account Check 와 공유한다.
   같은 `네이버 연동 계정` 표식이라 크기나 색이 갈리면 안 된다.
   **Account Check 화면은 수정하지 않았다** — Selector 만 함께 뒀다.

   Account Check 와 다르게 가는 부분
     그 화면은 계정을 **가운데** 정렬한다(Result Message 의 일부처럼 읽힌다).
     이 화면은 시안대로 **좌측 정렬 + Badge 가 텍스트 바로 뒤**다 —
     `이 계정으로 계속한다` 는 대상을 가리키는 표시라 읽기 시작점이 왼쪽이어야 한다.
     그래서 __account 는 공유하지 않고 따로 뒀다.

   세로 구성
     __content  flex:0 0 auto   Title / Helper / 계정   (아래 최소 간격 40)
     __action   margin-top:auto 새 비밀번호 설정하기

     남는 공간을 __action 의 margin-top:auto 가 흡수해
     시안의 `상단 정보 / 넓은 중앙 여백 / 하단 CTA` 가 구조적으로 나온다.
     Account Check(§22)와 같은 방식이다.

   position / top / transform / 음수 margin / viewport 별 magic number 를 쓰지 않는다.
================================================== */

/* Result Block 과 CTA 사이 **최소** 간격.
   화면이 크면 아래 margin-top:auto 가 그만큼 더 벌린다.
   Title/Helper 와 계정 Box 사이 간격(32)은 .auth-head 가 이미 갖고 있다. */
.auth-recovery-result__content {
  flex: 0 0 auto;
  margin-bottom: var(--space-10);
}

/* 찾은 계정.
   **선택지가 아니라 정보 표시**다 — Border 강조 / Shadow / Hover / Cursor 를 두지 않는다.
   Signup Type 의 선택 Card(.auth-type-option) 문법을 가져오지 않는다.

   Padding 16/20 이면 높이가 52 로 아래 Primary 와 같아진다 —
   시안의 compact 한 인상이 여기서 나온다. Card 로 키우지 않는다.

   text-align:left : __inner 가 가운데 정렬(공유 Shell)이라 여기서만 되돌린다.
   시안에서 계정 텍스트는 왼쪽에서 시작한다.

   §28 비밀번호 재설정 화면의 `계정 정보` 도 **이 Block 을 그대로 쓴다** —
   같은 계정을 가리키는 표시라 두 화면에서 생김새가 갈리면 안 된다.
   (그 화면은 Form Field 안에 들어가지만 Surface 자체는 동일하다) */
.auth-recovery-result__account {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--bg-subtle);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-align: left;
  /* 아주 긴 이메일이 Container 를 밀지 않게 한다 */
  overflow-wrap: anywhere;
}

/* 이메일이 길어지면 Badge 를 밀지 않고 자기 폭 안에서 줄바꿈한다 */
.auth-recovery-result__email {
  min-width: 0;
}

/* CTA 를 남은 공간 끝으로 민다. 시안의 `넓은 중앙 여백` 이 여기서 나온다.
   .auth-primary 의 margin-top(32)을 대체하며, 남는 공간이 없으면
   위 __content 의 margin-bottom(40)이 최소 간격으로 남는다. */
.auth-recovery-result__action {
  flex: 0 0 auto;
  margin-top: auto;
}

/* .auth-primary 는 Form 마지막 요소로 쓰이는 것을 전제로 margin-top 32 를 갖는다.
   여기서는 위 margin-top:auto 가 간격을 정하므로 없앤다. */
.auth-recovery-result__cta {
  margin-top: 0;
}


/* ==================================================
   28. Password Reset — 비밀번호 재설정

   계정 찾기를 마친 사용자가 새 비밀번호를 설정하는 화면이다.

   재사용하는 것 — **이 섹션이 새로 정의하는 값은 거의 없다**
     §24  Head / Scroll / Action 세로 Layout   (Personal / Company Info 와 공유)
     §23  Form Control 밀도 · Validation 표현  (Personal / Company Info 와 공유)
     §27  계정 표시 Surface · Provider Badge   (Account Recovery Result 와 공유)
     §05  .auth-primary                        (전 Auth 공유)
     §04  .auth-control--with-toggle           (Login 의 비밀번호 Toggle)

   폭은 420(.auth-container)이다 — Login / Personal / Recovery 계열이다.
   기업회원의 480(.auth-container--wide)을 쓰지 않는다.

   Head 가 `71..182` 인 이유
     Personal / Company Info 는 Head 에 Description 이 한 줄 더 있어 203 이다.
     이 화면은 Title 하나뿐이라 그만큼 짧다 —
     **Title 시작 높이(top 111)는 세 화면이 같다.**
     203 을 맞추려고 가짜 Description 이나 magic spacer 를 넣지 않는다.

   position / top / transform / 음수 margin / viewport 별 magic number 를 쓰지 않는다.
================================================== */

/* Password Control 의 좌우 Padding.

   왼쪽 : 이 화면의 Control 에는 왼쪽 Icon 이 없다.
   §04 의 .auth-control .form-input 은 왼쪽 Icon 을 전제로
   padding-left 를 48(16 + icon 20 + 12)로 잡는다.
   Login 의 규칙을 고치지 않고 이 화면에서만 기본값(16)으로 되돌린다 —
   Icon 이 없는데 왼쪽만 비면 placeholder 가 가운데로 밀려 보인다.

   오른쪽 : **여기서 다시 잡아 주지 않으면 글자가 Toggle 버튼 밑으로 들어간다.**
   §23 의 .auth-password-reset .form-input 이 `padding` **단축 속성**으로 좌우를 16 으로
   덮는데, 그 규칙이 §04 의 .auth-control--with-toggle .form-input 보다 뒤에 있고
   Specificity 도 같아서 오른쪽 56 이 사라진다.
   실측(수정 전) — 글자 영역 오른쪽 끝 1154 vs Toggle 왼쪽 1122 로 32px 겹쳤다.

   §23 의 단축 속성을 풀거나 §04 의 Specificity 를 올리면 Login 과
   일반/기업회원 화면까지 건드리게 되므로, 이 화면에서만 값을 되돌린다.
   값은 §04 와 같은 식이다(12 + Toggle 36 + 8 = 56). */
.auth-password-reset .auth-control .form-input {
  padding-left: var(--space-4);
}

.auth-password-reset .auth-control--with-toggle .form-input {
  padding-right: calc(var(--space-3) + 36px + var(--space-2));
}

/* 계정 표시 Surface 는 §27 과 공유한다(.auth-recovery-result__account).
   Form Field 안에 들어가므로 Label 과의 간격(8)과 다음 Field 간격(24)은
   components.css 의 .form-label / .form-field + .form-field 가 그대로 담당한다.
   이 Surface 에만 별도 위/아래 margin 을 주지 않는다 —
   그러면 계정 항목만 리듬에서 튄다. */


/* ==================================================
   29. Password Reset Complete — 비밀번호 재설정 완료

   Account Recovery Flow 의 마지막 화면이다.

   **이 섹션은 새 선언을 하나도 만들지 않는다.**
   위 네 규칙에 Selector 만 함께 둔 것이 전부다 —
   그래서 이 자리에는 설명만 남긴다.

     body 모드파이어 / main / __inner   §25 Result Screen Shell 공유
       (회원가입 완료 · 계정 찾기 · 계정 찾기 확인과 **같은** 규칙)
       Header 아래 80 / 420 중앙 열 / 가운데 정렬 —
       같은 Recovery Flow 의 앞 두 화면과 Content 시작 높이(151)가 정확히 맞는다.
     __cta { margin-top: auto }         §25 와 공유 — CTA 를 남은 공간 끝으로 민다
     .auth-head / .auth-title / .auth-description   §11 · §03 그대로
     .auth-primary                      §05 그대로

   **새로 정의하는 것은 완료 Visual 한 규칙뿐이다.**

   이 화면이 Signup Complete(§25)의 __result / __video 를 쓰지 않는 이유
     그 Block 은 중앙 Completion Motion 을 위한 구성이다.
     이 화면은 Title / Description / CTA 뿐이라
     .auth-head 하나로 충분하고, account-check.html 과 같은 문법이다.
     새 Success Icon / Badge / 일러스트를 만들지 않았다.

   position / top / transform / 음수 margin / viewport 별 magic number 를 쓰지 않는다.
================================================== */

/* 완료 Visual — 도장 이미지.

   width 240 / height auto
     한쪽만 고정하고 다른 쪽을 비율에 맡긴다 — **왜곡도 crop 도 없다.**
     원본은 4000x4000(1:1)이라 실제로 240x240 으로 그려지고,
     그림 자체는 여백을 포함한 이미지라 화면에서는 그보다 작게 읽힌다.
     420 Column 의 57% — 완료 사실을 보조하는 크기다.
     Signup Complete 의 __video(width:100%)처럼 Column 을 꽉 채우지 않는다.
     계정 찾기의 __image(160)와 같은 방식으로 px 폭만 정한다.

     280 도 재보았으나 1366x768 / Zoom 125% 에서 CTA 가 접혔다(body scroll 필요).
     240 은 검사한 4 Viewport x 4 Zoom 전부에서 CTA 가 화면 안에 남는다 —
     이미지 40px 보다 `CTA 가 항상 보인다` 를 우선한다.

   max-width:100%
     Column 이 240 보다 좁아지는 경우에도 넘치지 않게 한다.

   margin: 0 auto
     display:block 이므로 좌우 auto 로 가운데 정렬한다.
     위 margin 은 주지 않는다 — .auth-head 의 아래 여백(32)이 이미 간격이다.
     아래 여백은 __cta 의 margin-top:auto 가 남는 공간 전부를 흡수해 만든다.

   Card 가 아니므로 Border / Shadow / Radius / 배경을 두지 않는다.
   position / transform / 음수 margin 을 쓰지 않는다 — Flex 흐름 안의 요소다. */
.auth-password-reset-complete__image {
  display: block;
  width: 240px;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}

/* PC signup — identity / review info card + relation/region chips + terms dialog */
.auth-info-card {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-default, #fff);
}

.auth-info-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-default);
  font-size: var(--font-size-md, 14px);
  color: var(--text-secondary);
}

.auth-info-card__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.auth-info-card__row:first-child {
  padding-top: 0;
}

.auth-info-card__row strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold, 600);
  text-align: right;
}

.auth-verify-callout {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-subtle, #f8fafc);
}

.auth-verify-callout__title {
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-md, 14px);
  font-weight: var(--font-weight-bold, 700);
}

.auth-verify-callout__body {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm, 13px);
  line-height: 1.7;
}

.auth-personal-signup .form-label__required,
.auth-company-signup .form-label__required {
  margin-left: 2px;
  color: var(--brand-secondary, #1b6fd0);
}

.auth-personal-signup .form-error.is-ok,
.auth-company-signup .form-error.is-ok {
  color: var(--text-success, #027a48);
}

/* --------------------------------------------------
   사업자 인증 (PC Auth)
   start = company-type 톤 / form = company-signup 셸 + 모바일 로직 브리지
   -------------------------------------------------- */

.auth-biz-verify__step {
  margin: 0 0 var(--space-2);
  color: var(--brand-secondary, #1246A3);
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold, 600);
}

.auth-biz-verify-steps {
  margin: 0 0 var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-default, #fff);
}

.auth-biz-verify-steps__head {
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
  font-size: var(--font-size-md, 14px);
  font-weight: var(--font-weight-bold, 700);
}

.auth-biz-verify-steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-biz-verify-steps__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.auth-biz-verify-steps__num {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--bg-subtle, #f3f7fd);
  color: var(--brand-secondary, #1246A3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-md, 14px);
  font-weight: var(--font-weight-bold, 700);
}

.auth-biz-verify-steps__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.auth-biz-verify-steps__label {
  color: var(--text-primary);
  font-size: var(--font-size-md, 14px);
  font-weight: var(--font-weight-bold, 700);
}

.auth-biz-verify-steps__desc {
  color: var(--text-secondary);
  font-size: var(--font-size-sm, 13px);
  line-height: 1.5;
}

.auth-biz-verify-submitted__card {
  margin-bottom: var(--space-6);
  text-align: left;
}

.auth-biz-verify-submitted__status {
  color: var(--text-warning, #b54708) !important;
}

.auth-biz-verify-submitted .auth-signup-complete__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 모바일 verify 페이지 브리지 — 토큰·버튼·CTA만 PC auth에 맞게 보정 */
.auth-biz-verify,
.auth-biz-verify-bridge {
  --color-primary: #1246A3;
  --color-primary-light: #084BE7;
  --color-primary-50: #F3F7FD;
  --color-bg: #F7F9FC;
  --color-surface: #ffffff;
  --color-text-main: #172033;
  --color-text-sub: #4B5565;
  --color-text-muted: #7B8494;
  --color-divider: #E2E7EE;
  --color-gold: #C9920A;
  --color-gold-bg: #FFF7E8;
  --color-success: #22A06B;
  --color-warning: #E89A17;
  --color-error: #E5484D;
  --radius-btn: 10px;
}

.auth-biz-verify-bridge .verify-steps,
.auth-biz-verify-bridge .verify-body > .h1,
.auth-biz-verify-bridge .verify-body > .sub,
.auth-biz-verify-bridge .verify-heading,
.auth-biz-verify-bridge .verify-sub {
  display: none !important;
}

.auth-biz-verify-bridge #screenContent {
  display: block;
}

.auth-biz-verify-bridge .verify-body,
.auth-biz-verify-bridge .verify-wrap {
  flex: none;
  overflow: visible;
  padding: 0 0 var(--space-4);
}

.auth-biz-verify-bridge .icon {
  flex-shrink: 0;
  stroke-width: 1.7;
}

.auth-biz-verify-bridge .btn,
.auth-company-signup__action .btn {
  border: none;
  border-radius: var(--radius-btn);
  padding: 14px 20px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.auth-biz-verify-bridge .btn-primary,
.auth-company-signup__action .btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.auth-biz-verify-bridge .btn-line,
.auth-company-signup__action .btn-line {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  color: var(--color-text-main);
  font-weight: 600;
}

.auth-biz-verify-bridge .btn-outline,
.auth-company-signup__action .btn-outline {
  background: var(--color-surface);
  color: var(--color-text-main);
  border: 1px solid var(--color-divider);
}

.auth-biz-verify-bridge .btn-disabled,
.auth-company-signup__action .btn-disabled {
  background: var(--color-divider);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.auth-biz-verify-bridge .btn-block,
.auth-company-signup__action .btn-block {
  width: 100%;
}

.auth-company-signup__action .cta-bar {
  position: static;
  z-index: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-company-signup__action .cta-bar .btn {
  width: 100%;
  min-height: 52px;
  border-radius: var(--radius-md, 12px);
}

.auth-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.auth-chip {
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-default, #fff);
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
}

.auth-chip.is-active {
  border-color: var(--brand-secondary, #1b6fd0);
  color: var(--brand-secondary, #1b6fd0);
  font-weight: var(--font-weight-semibold, 600);
}

/* 회원가입 지역 — 시 선택 후 펼쳐지는 읍면동 칩 줄 */
.auth-chip-row--dong {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-default);
}

.auth-chip-row[hidden] {
  display: none;
}

.auth-field-hint {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs, 12px);
}

.auth-terms-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.auth-terms-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.auth-terms-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
}

.auth-terms-dialog__head button {
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
}

.auth-terms-dialog__body {
  padding: var(--space-5);
  overflow: auto;
  max-height: calc(min(80vh, 720px) - 64px);
  font-size: var(--font-size-md, 14px);
  line-height: 1.6;
  color: var(--text-primary);
}