/* ============================================================================
   theme/inerp/css/pages/auth.css: 인증 계열 화면 전용
   SCR-CMN-01 로그인 · SCR-CMN-02 비밀번호 변경 · SCR-CMN-07 접근거부·오류

   ── 이 파일의 범위
      `components.css` / `layout.css` / `tokens.css` 는 **고치지 않는다**(다른 담당과 충돌한다).
      여기 있는 것은 전부 `.ie-auth` · `.ie-pwform` · `.ie-err` 스코프 안이며,
      공용 컴포넌트(`.ie-btn` `.ie-field` `.ie-input` `.ie-alert`)는 그대로 재사용한다.

   ── 로드 경로 2가지
      ① 셸이 있는 화면 : add_stylesheet(..., 94) 로 큐에 넣고 html_end() 가 주입
      ② 셸이 없는 화면 : `inerp/views/error.php` 가 tokens.css · base.css 와 함께 직접 <link>
      ②는 DB 장애 상황에서도 떠야 하므로 `layout.css` · `components.css` 에 의존하지 않는다.
      → 이 파일은 **버튼·폼의 최소 스타일을 스스로 갖는다**(아래 §4). 중복이지만 의도된 것이다.

   ── 접두사 `ie-` / 토큰 `--ie-*` (D-01)
   ── 다크 모드 없음 (D-76)
   ============================================================================ */

/* §1 ── 중앙 카드 레이아웃 (로그인 · 강제 비밀번호 변경 · 오류) ─────────────── */

.ie-body--auth {
  min-block-size: 100vh;
  background: var(--ie-c-surface-page, #f6f8f9);
}

.ie-auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ie-sp-4);
  min-block-size: 100vh;
  padding: var(--ie-sp-6) var(--ie-sp-4);
  background: var(--ie-c-surface-page, #f6f8f9);
  box-sizing: border-box;
}

/* 셸 안에서 열린 경우(오류 화면이 .ie-main 안에 있을 때) 100vh 를 강제하지 않는다 */
.ie-content .ie-auth { min-block-size: 320px; }

.ie-auth__card {
  inline-size: 400px;
  max-inline-size: 100%;
  padding: var(--ie-sp-8);
  background: var(--ie-c-surface-card, #fff);
  border: 1px solid var(--ie-c-border, #dfe5e8);
  border-radius: var(--ie-r-lg, 10px);
  box-shadow: var(--ie-shadow-pop, 0 2px 8px rgba(18, 34, 42, .08));
  box-sizing: border-box;
}

.ie-auth__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ie-sp-3);
  margin-block-end: var(--ie-sp-6);
}

.ie-auth__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--ie-r-md, 8px);
  background: var(--ie-brand-600, #0f6e6a);
  color: var(--ie-white, #fff);
  font-size: var(--ie-fs-16, 16px);
  font-weight: var(--ie-fw-bold, 700);
  letter-spacing: -.02em;
}

.ie-auth__title {
  margin: 0;
  font-size: var(--ie-fs-20, 20px);
  font-weight: var(--ie-fw-bold, 700);
  color: var(--ie-c-text-title, #12222a);
  text-align: center;
}

.ie-auth__head { margin-block-end: var(--ie-sp-5); }
.ie-auth__head .ie-auth__title { text-align: start; }

.ie-auth__desc {
  margin: var(--ie-sp-2) 0 0;
  font-size: var(--ie-fs-13, 13px);
  line-height: var(--ie-lh-read, 1.6);
  color: var(--ie-c-text-muted, #5b6b73);
}

.ie-auth__form { gap: var(--ie-sp-4); }

.ie-auth__submit {
  inline-size: 100%;
  justify-content: center;
  margin-block-start: var(--ie-sp-2);
}

.ie-auth__help {
  margin: var(--ie-sp-5) 0 0;
  font-size: var(--ie-fs-13, 13px);
  color: var(--ie-c-text-muted, #5b6b73);
  text-align: center;
}

.ie-auth__foot {
  margin: 0;
  font-size: var(--ie-fs-12, 12px);
  color: var(--ie-c-text-muted, #5b6b73);
  text-align: center;
}

.ie-auth__card .ie-auth__foot { margin-block-start: var(--ie-sp-5); }

/* §2 ── 비밀번호 표시 토글 ─────────────────────────────────────────────────── */

.ie-auth__pw { position: relative; display: block; }
.ie-auth__pw .ie-input { inline-size: 100%; padding-inline-end: 56px; box-sizing: border-box; }

.ie-auth__pwbtn {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 6px;
  transform: translateY(-50%);
  min-inline-size: 44px;               /* --ie-tap-min 과 같은 44px 터치 타깃 */
  block-size: 28px;
  padding: 0 var(--ie-sp-2);
  border: 1px solid var(--ie-c-border, #dfe5e8);
  border-radius: var(--ie-r-sm, 4px);
  background: var(--ie-c-surface-sunken, #f0f4f5);
  color: var(--ie-c-text-muted, #5b6b73);
  font-size: var(--ie-fs-12, 12px);
  cursor: pointer;
}
.ie-auth__pwbtn:hover { background: var(--ie-c-surface-hover, #e9eff1); }
.ie-auth__pwbtn[aria-pressed="true"] {
  border-color: var(--ie-c-border-brand, #0f6e6a);
  color: var(--ie-brand-700, #0B5754);
}

/* §3 ── 비밀번호 변경 (셸 안, 일반 모드) ───────────────────────────────────── */

.ie-pwform { max-inline-size: var(--ie-content-max-form, 880px); }

.ie-pwform__card {
  margin-block-start: var(--ie-sp-4);
  padding: var(--ie-sp-6);
  background: var(--ie-c-surface-card, #fff);
  border: 1px solid var(--ie-c-border, #dfe5e8);
  border-radius: var(--ie-r-lg, 10px);
}

.ie-form__actions {
  display: flex;
  gap: var(--ie-sp-3);
  justify-content: flex-end;
  margin-block-start: var(--ie-sp-2);
}

/* 오류 목록은 `.ie-alert` 를 재사용하되 <ul> 기본 마커를 정리한다 */
.ie-alert > li { margin-inline-start: 1.1em; list-style: disc; }
.ie-alert > li + li { margin-block-start: 4px; }

@media (max-width: 767px) {
  .ie-form__actions { flex-direction: column-reverse; }
  .ie-form__actions > * { inline-size: 100%; justify-content: center; }
  .ie-auth { justify-content: flex-start; padding-block-start: 10vh; }
  .ie-auth__card { box-shadow: none; padding: var(--ie-sp-6) var(--ie-sp-4); }
}

/* §4 ── 오류 화면 (SCR-CMN-07) ─────────────────────────────────────────────
   ⚠ 셸 없이 tokens.css + base.css 만으로 뜰 수 있어야 한다.
     그래서 `.ie-btn` 최소 스타일을 여기서도 정의한다(components.css 가 없을 때의 폴백).
     components.css 가 함께 로드되면 order 94 인 이 파일이 뒤에 오지만,
     아래 규칙은 전부 `.ie-err` 스코프 안이라 다른 화면의 버튼에 영향이 없다. */

.ie-err { text-align: center; }

.ie-err__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: var(--ie-sp-4);
  color: var(--ie-gray-400, #9aa8ae);
}
.ie-err--404 .ie-err__icon { color: var(--ie-gray-300, #c3ced3); }
.ie-err--500 .ie-err__icon,
.ie-err--503 .ie-err__icon,
.ie-err--429 .ie-err__icon,
.ie-err--419 .ie-err__icon,
.ie-err--405 .ie-err__icon { color: var(--ie-danger, #b4241c); }

.ie-err__title {
  margin: 0;
  font-size: var(--ie-fs-18, 18px);
  font-weight: var(--ie-fw-semi, 600);
  color: var(--ie-c-text-title, #12222a);
  line-height: var(--ie-lh-tight, 1.35);
}

.ie-err__desc {
  margin: var(--ie-sp-3) 0 0;
  font-size: var(--ie-fs-15, 15px);
  color: var(--ie-c-text-muted, #5b6b73);
  line-height: var(--ie-lh-read, 1.6);
}

.ie-err__perm {
  margin: var(--ie-sp-2) 0 0;
  font-size: var(--ie-fs-13, 13px);
  color: var(--ie-gray-500, #74848b);
  font-family: var(--ie-font-mono, monospace);
}

.ie-err__actions {
  display: flex;
  gap: var(--ie-sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-block-start: var(--ie-sp-6);
}

.ie-err__ref {
  margin: var(--ie-sp-5) 0 0;
  font-size: var(--ie-fs-12, 12px);
  color: var(--ie-gray-400, #9aa8ae);
  font-family: var(--ie-font-mono, monospace);
}

.ie-err__detail { margin-block-start: var(--ie-sp-5); text-align: start; }
.ie-err__detail > summary {
  font-size: var(--ie-fs-13, 13px);
  color: var(--ie-c-text-muted, #5b6b73);
  cursor: pointer;
}
.ie-err__detail > pre {
  margin: var(--ie-sp-2) 0 0;
  padding: var(--ie-sp-3);
  background: var(--ie-c-surface-sunken, #f0f4f5);
  border-radius: var(--ie-r-sm, 4px);
  font-family: var(--ie-font-mono, monospace);
  font-size: var(--ie-fs-12, 12px);
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}

/* components.css 미로드 폴백: .ie-err 안에서만 적용된다 */
/* 2026-08-07 (docs/42): 경계 토큰만 `--ie-c-border`(gray-200, 흰 배경 1.27:1) 에서
   `--ie-c-border-field`(gray-500, 3.75:1) 로 올렸다. 이 규칙은 order 94 라
   `components.css`(order 91) 의 `.ie-btn--ghost` 를 같은 특이도로 덮는다. 즉 오류 화면의
   보조 버튼만 옛 경계로 남아 다른 화면과 어긋났다(실측: `rgb(223,229,233)`).
   선언을 늘리거나 지우지 않고 값 하나만 바꿔 전 화면과 같은 경계로 맞춘다. */
.ie-err .ie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--ie-control-h, 36px);
  padding: 0 var(--ie-sp-4);
  border: 1px solid var(--ie-c-border-field, #78868f);
  border-radius: var(--ie-r-md, 8px);
  background: var(--ie-c-surface-card, #fff);
  color: var(--ie-c-text-body, #22343c);
  font-size: var(--ie-fs-14, 14px);
  font-weight: var(--ie-fw-semi, 600);
  text-decoration: none;
  cursor: pointer;
}
.ie-err .ie-btn--primary {
  background: var(--ie-c-action, #0f6e6a);
  border-color: var(--ie-c-action, #0f6e6a);
  color: var(--ie-c-action-on, #fff);
}
.ie-err .ie-btn--primary:hover { background: var(--ie-c-action-hover, #0B5754); }

/* ============================================================================
   §6 ── D-89 승인제 회원가입 (SCR-AUT-01 가입 · SCR-AUT-02 승인 대기 안내)
   ----------------------------------------------------------------------------
   ⚠ **추가만 했다.** 위의 §1~§5 는 한 줄도 고치지 않았다.
     로그인·비밀번호 변경·오류 화면이 같은 파일을 쓰고 있고, 그 셋은 이미 실측을 마쳤다.
   ⚠ `components.css` · `layout.css` · `tokens.css` 는 건드리지 않는다(docs/11 §6.3).
   ⚠ 새 색을 만들지 않는다(D-78). semantic 토큰만 참조하고, 토큰이 없을 때의 폴백값만 적는다.

   가입·안내 화면은 셸이 없는 **완결 문서**라 `tokens.css` · `base.css` ·
   `components.css` · 이 파일 4장만 로드된다(views/auth_signup.php).
   그래서 `.ie-field__err` 같은 소소한 것도 여기서 정의한다. 중복이지만 의도된 것이다.
   ========================================================================== */

/* §6.1 가입 카드: 필드가 6개라 로그인(400px)보다 넓다 */
.ie-auth__card--wide { inline-size: 480px; }

.ie-signup__lead {
  margin: 0 0 var(--ie-sp-5);
  padding: var(--ie-sp-3) var(--ie-sp-4);
  background: var(--ie-c-surface-subtle, #eef4f4);
  border-inline-start: 3px solid var(--ie-c-action, #0f6e6a);
  border-radius: var(--ie-r-sm, 4px);
  color: var(--ie-c-text-body, #22343c);
  font-size: var(--ie-fs-13, 13px);
  line-height: 1.6;
}

.ie-signup__form .ie-field { margin-block-end: var(--ie-sp-4); }

.ie-signup__note {
  margin: var(--ie-sp-2) 0 var(--ie-sp-5);
  color: var(--ie-c-text-muted, #5d7078);
  font-size: var(--ie-fs-12, 12px);
  line-height: 1.6;
}

/* 필수 표시. 색만으로 전달하지 않는다(D-78): `*` 글자 자체가 신호다 */
.ie-req { color: var(--ie-c-danger, #c0392b); margin-inline-start: 2px; }

/* 폼 보조 문구 · 오류 문구 (components.css 미로드 상황 폴백 겸용) */
.ie-auth .ie-field__hint,
.ie-signup__form .ie-field__hint {
  margin: var(--ie-sp-1) 0 0;
  color: var(--ie-c-text-muted, #5d7078);
  font-size: var(--ie-fs-12, 12px);
  line-height: 1.5;
}
.ie-auth .ie-field__err,
.ie-signup__form .ie-field__err {
  margin: var(--ie-sp-1) 0 0;
  color: var(--ie-c-danger, #c0392b);
  font-size: var(--ie-fs-12, 12px);
  font-weight: var(--ie-fw-semi, 600);
  line-height: 1.5;
}
.ie-auth .ie-field--err .ie-input,
.ie-auth .ie-field--err .ie-select { border-color: var(--ie-c-danger, #c0392b); }

/* 로그인 화면의 가입 안내 줄 */
.ie-auth__help--signup { margin-block-start: var(--ie-sp-2); }
.ie-auth__link {
  color: var(--ie-c-action, #0f6e6a);
  font-weight: var(--ie-fw-semi, 600);
  text-decoration: underline;
}
.ie-auth__link:hover { color: var(--ie-c-action-hover, #0B5754); }
.ie-auth__sub {
  display: block;
  margin-block-start: 2px;
  color: var(--ie-c-text-muted, #5d7078);
  font-size: var(--ie-fs-12, 12px);
}

/* §6.2 승인 대기 안내: 오류 카드(.ie-err)와 같은 골격, 다른 어조 */
.ie-pend { text-align: center; }

.ie-pend__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 64px;
  block-size: 64px;
  margin: 0 auto var(--ie-sp-4);
  border-radius: 50%;
  background: var(--ie-c-surface-subtle, #eef4f4);
  color: var(--ie-c-action, #0f6e6a);
}

.ie-pend__title {
  margin: 0 0 var(--ie-sp-2);
  font-size: var(--ie-fs-20, 20px);
  font-weight: var(--ie-fw-bold, 700);
  color: var(--ie-c-text-strong, #12222a);
}
.ie-pend__lead {
  margin: 0 0 var(--ie-sp-2);
  color: var(--ie-c-action, #0f6e6a);
  font-size: var(--ie-fs-14, 14px);
  font-weight: var(--ie-fw-semi, 600);
}
.ie-pend__desc {
  margin: 0 0 var(--ie-sp-5);
  color: var(--ie-c-text-body, #22343c);
  font-size: var(--ie-fs-14, 14px);
  line-height: 1.7;
}

/* 진행 단계. 색이 아니라 **글자와 위치**로 현재 단계를 전달한다(D-78) */
.ie-pend__steps {
  display: flex;
  justify-content: center;
  gap: var(--ie-sp-2);
  margin: 0 0 var(--ie-sp-5);
  padding: 0;
  list-style: none;
}
.ie-pend__step {
  flex: 1 1 0;
  padding: var(--ie-sp-2) var(--ie-sp-1);
  border-radius: var(--ie-r-sm, 4px);
  background: var(--ie-c-surface-subtle, #eef4f4);
  color: var(--ie-c-text-muted, #5d7078);
  font-size: var(--ie-fs-12, 12px);
}
.ie-pend__step--done { color: var(--ie-c-text-body, #22343c); }
.ie-pend__step--done span::before { content: '완료 · '; }
.ie-pend__step--now {
  background: var(--ie-c-action, #0f6e6a);
  color: var(--ie-c-action-on, #fff);
  font-weight: var(--ie-fw-bold, 700);
}
.ie-pend__step--now span::before { content: '진행 · '; }

.ie-pend__help {
  margin: 0 0 var(--ie-sp-5);
  color: var(--ie-c-text-muted, #5d7078);
  font-size: var(--ie-fs-13, 13px);
  line-height: 1.6;
}
.ie-pend__actions { display: flex; justify-content: center; gap: var(--ie-sp-2); }

/* components.css 미로드 폴백: `.ie-pend` 안에서만 적용된다(.ie-err 과 같은 방식) */
/* 2026-08-07 (docs/42): 위 `.ie-err .ie-btn` 과 같은 이유로 경계 토큰만 올렸다. */
.ie-pend .ie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--ie-control-h, 36px);
  padding: 0 var(--ie-sp-4);
  border: 1px solid var(--ie-c-border-field, #78868f);
  border-radius: var(--ie-r-md, 8px);
  background: var(--ie-c-surface-card, #fff);
  color: var(--ie-c-text-body, #22343c);
  font-size: var(--ie-fs-14, 14px);
  font-weight: var(--ie-fw-semi, 600);
  text-decoration: none;
  cursor: pointer;
}
.ie-pend .ie-btn--primary {
  background: var(--ie-c-action, #0f6e6a);
  border-color: var(--ie-c-action, #0f6e6a);
  color: var(--ie-c-action-on, #fff);
}
.ie-pend .ie-btn--primary:hover { background: var(--ie-c-action-hover, #0B5754); }

@media (max-width: 520px) {
  .ie-auth__card--wide { inline-size: 100%; }
  .ie-pend__steps { flex-direction: column; }
}