/*
 * 인증 화면 — 「관제(C)」 다크 테마 (2026-09-23 로그인 → 같은 날 인증 화면 전체로 확장)
 *
 * 적용 범위 = 로그인·회원가입·인증메일 재발송·비밀번호 찾기(이메일/휴대폰)·인증번호·새 비밀번호·
 *   2차 인증 페이지·2FA 휴대폰 복구. 네임스페이스 `.odal-*`. 카드 골격 = devise/shared/_auth_card 파셜.
 *   샘플 정본 = sample/auth-flow/index.html 의 C·관제(비밀번호 찾기 흐름 포함).
 * ⚠로그인 화면의 2차 인증 OTP 모달은 흰 rmm 모달이라 종전 라이트 `.ord-auth-input` 유지(_auth_form.css).
 *
 * ⭐규칙 10(폼 컨트롤 배경·글자색 동시 지정) 준수:
 *   `html{color-scheme: only light}`(_color_scheme.css)는 그대로 두고 — 브라우저 강제 다크가
 *   아무것도 못 뒤집게 한 상태에서 — 여기서 배경·글자색을 **모두 명시**해 다크로 칠한다.
 *   자동완성(-webkit-autofill)은 불투명 색으로 따로 못 박는다(유리 배경은 autofill 에 안 먹는다).
 *
 * 🔴`.odal-card` 는 backdrop-filter 를 쓴다 → **position:fixed 자식의 기준 박스가 카드가 된다.**
 *   rmm 모달·오버레이는 반드시 이 카드 «밖»(뷰 최상위)에 렌더할 것.
 */

/* ─── 무대: 전체 화면 다크 필드 ─────────────────────────────── */
.odal-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  justify-items: center;
  align-items: safe center;   /* 회원가입처럼 긴 카드가 화면보다 크면 위가 잘리지 않게 */
  padding: 40px 20px;
  overflow: auto;
  background:
    radial-gradient(1100px 620px at 72% -6%, #204a5a 0%, transparent 55%),
    radial-gradient(900px 640px at 8% 108%, #1a3550 0%, transparent 52%),
    linear-gradient(160deg, #0f1e2b 0%, #132a3c 100%);
}

/* 카드 래퍼 — 신호(물결)의 기준 박스. 회원가입처럼 내용이 긴 화면은 .is-wide */
.odal-cardwrap { position: relative; width: 100%; max-width: 402px; }
.odal-cardwrap.is-wide { max-width: 468px; }

/* 신호(관제) — 카드 좌상단 로고 점에서 퍼진다(C+1 과 같은 위치·크기·속도, 2026-09-23 샘플 확정).
   원점 = 카드 패딩(좌 36 + 점 반지름 ≈ 41px, 위 38 + 줄 중앙 ≈ 51px). 카드 뒤(z-index 0). */
.odal-signal { position: absolute; left: 41px; top: 51px; width: 0; height: 0; pointer-events: none; z-index: 0; }
.odal-signal span {
  position: absolute;
  left: 0; top: 0;
  width: 14px; height: 14px;
  border: 1px solid rgba(87, 196, 201, .45);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: odal-ping 5s ease-out infinite;
}
.odal-signal span:nth-child(2) { animation-delay: 1.7s; }
.odal-signal span:nth-child(3) { animation-delay: 3.4s; }
@keyframes odal-ping {
  0%   { width: 14px;  height: 14px;  opacity: .8; }
  100% { width: 760px; height: 760px; opacity: 0; }
}

/* ─── 글래스 카드 ───────────────────────────────────────────── */
.odal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;   /* 폭은 .odal-cardwrap 이 정한다 */
  padding: 38px 36px 32px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 20px;
  background: rgba(255, 255, 255, .055);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .09);
}

/* ─── 브랜드 마크 ───────────────────────────────────────────── */
.odal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .05em;
  color: #ffffff;
}
.odal-brand::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #57c4c9;
  box-shadow: 0 0 0 4px rgba(87, 196, 201, .22);
  animation: odal-pulse 2.6s ease-in-out infinite;
}
@keyframes odal-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(87, 196, 201, .22); }
  50%      { box-shadow: 0 0 0 7px rgba(87, 196, 201, .04); }
}

.odal-title {
  margin: 14px 0 22px;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
}

/* ─── 입력 ──────────────────────────────────────────────────── */
.odal-field { margin-bottom: 15px; }
.odal-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #dbe7f0;
}
.odal-input-wrap { position: relative; }

.odal-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(255, 255, 255, .16);
  border-radius: 11px;
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  background-color: rgba(255, 255, 255, .06);
  color: #eaf2f9;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.odal-input::placeholder { color: #8296a8; }
.odal-input:focus {
  border-color: #57c4c9;
  background-color: rgba(255, 255, 255, .09);
  box-shadow: 0 0 0 3px rgba(87, 196, 201, .20);
}
.odal-input:disabled { background-color: rgba(255, 255, 255, .03); color: #6f8496; }

/* 자동완성 — Chrome 이 배경·글자색을 자체 값으로 덮으므로 이 셋으로만 되돌릴 수 있다.
   유리(반투명) 배경은 autofill 에 적용되지 않아 불투명 근사색으로 고정한다. */
.odal-input:-webkit-autofill,
.odal-input:-webkit-autofill:hover,
.odal-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #eaf2f9;
  -webkit-box-shadow: 0 0 0 1000px #18303f inset;
  caret-color: #eaf2f9;
}

/* ─── 옵션 줄(로그인 유지 / 비밀번호 찾기) ──────────────────── */
.odal-optrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 20px;
}
.odal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #9cb1c4;
  cursor: pointer;
}
.odal-check input[type="checkbox"] {
  width: 17px; height: 17px;
  margin: 0;
  accent-color: #57c4c9;
  cursor: pointer;
}
.odal-link-muted {
  font-size: 14px;
  color: #9cb1c4;
  text-decoration: none;
  transition: color .15s;
}
.odal-link-muted:hover { color: #57c4c9; }

/* ─── 버튼 ──────────────────────────────────────────────────── */
.odal-btn {
  display: block;
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: 11px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .01em;
  background-color: #57c4c9;
  color: #052226;
  cursor: pointer;
  transition: filter .15s, transform .05s;
}
.odal-btn:hover { filter: brightness(1.06); }
.odal-btn:active { transform: translateY(1px); }

/* ─── 하단 영역 ─────────────────────────────────────────────── */
.odal-alt {
  margin-top: 22px;
  text-align: center;
  font-size: 13.5px;
  color: #9cb1c4;
}
.odal-alt a {
  color: #57c4c9;
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}
.odal-alt a:hover { text-decoration: underline; }

.odal-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 12.5px;
}
.odal-foot a {
  color: #9cb1c4;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s;
}
.odal-foot a:hover { color: #57c4c9; text-decoration: underline; }
.odal-foot .odal-foot-sep { color: rgba(255, 255, 255, .22); font-size: 11px; }

/* 키보드 포커스 가시성 */
.odal-stage a:focus-visible,
.odal-stage button:focus-visible,
.odal-stage input:focus-visible {
  outline: 2px solid #57c4c9;
  outline-offset: 2px;
}

/* ─── 이메일 자동완성 드롭다운 — 다크 대응(로그인 화면 한정) ── */
.odal-stage .email-dropdown {
  background: #14293a;
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.odal-stage .email-item:hover,
.odal-stage .email-item.highlighted { background: rgba(255, 255, 255, .07); }
.odal-stage .email-item-content span { color: #dbe7f0; }
.odal-stage .email-item-content svg { color: #8296a8; }
.odal-stage .email-item-remove { color: #8296a8; }
.odal-stage .email-item-remove:hover { background: rgba(220, 38, 38, .2); color: #fca5a5; }

/* ─── 반응형 ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .odal-stage { padding: 24px 16px; }
  .odal-card { padding: 30px 22px 26px; border-radius: 18px; }
  .odal-signal { left: 27px; top: 43px; }   /* 모바일 패딩(좌 22·위 30)에 맞춘 원점 */
}

@media (prefers-reduced-motion: reduce) {
  .odal-signal { display: none; }
  .odal-brand::before { animation: none; }
  .odal-btn.is-loading::before { animation-duration: 2s; }
}


/* ════════════════════════════════════════════════════════════════════
 * 인증 화면 공용 부품 (2026-09-23 — 회원가입·비밀번호 찾기·2FA 확장)
 * ════════════════════════════════════════════════════════════════════ */

/* 제목 아래 한 줄 설명 */
.odal-lead { margin: -12px 0 20px; font-size: 13.5px; line-height: 1.55; color: #9cb1c4; }
.odal-lead b, .odal-lead strong { color: #eaf2f9; font-weight: 600; }

/* 입력칸 아래 도움말·오류 — 오류는 .odal-field.is-invalid 일 때만 보인다 */
.odal-help { margin-top: 6px; font-size: 12px; line-height: 1.45; color: #8ba2b6; }
.odal-err { display: none; margin-top: 7px; font-size: 12.5px; color: #ff8a8d; }
.odal-field.is-invalid .odal-input { border-color: #e5484d; }
.odal-field.is-invalid .odal-err { display: block; }
.odal-req { color: #ff8a8d; margin-left: 2px; }

/* 안내 배너 — 카드 안 메시지(오류·완료·안내). 스낵바·모달 대신 여기에 (사용자 확정 2026-09-23) */
.odal-banner {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 18px; padding: 12px 14px;
  border: 1px solid; border-radius: 12px;
  font-size: 13.5px; line-height: 1.55;
}
.odal-banner[hidden] { display: none; }
.odal-banner svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.odal-banner b, .odal-banner strong { font-weight: 700; }
.odal-banner a { color: inherit; font-weight: 700; text-decoration: underline; }
.odal-banner-meta { display: block; margin-top: 4px; font-size: 12.5px; opacity: .85; }
.odal-banner.is-info { background: rgba(87, 196, 201, .12); border-color: rgba(87, 196, 201, .30); color: #d6eef1; }
.odal-banner.is-ok   { background: rgba(110, 231, 183, .10); border-color: rgba(110, 231, 183, .30); color: #c9f5e2; }
.odal-banner.is-warn { background: rgba(251, 191, 36, .10);  border-color: rgba(251, 191, 36, .30);  color: #fde7b0; }
.odal-banner.is-err  { background: rgba(229, 72, 77, .12);   border-color: rgba(229, 72, 77, .35);   color: #ffd2d3; }

/* 진행 단계 — 계정 확인 → 본인 인증 → 새 비밀번호 (관제 흐름도의 점·선 언어) */
.odal-steps { display: flex; align-items: center; gap: 8px; margin: -8px 0 20px; font-size: 11.5px; color: #8ba2b6; }
.odal-steps .st { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.odal-steps .st i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .22); }
.odal-steps .st.is-on { color: #eaf2f9; font-weight: 600; }
.odal-steps .st.is-on i { background: #57c4c9; border-color: #57c4c9; box-shadow: 0 0 0 3px rgba(87, 196, 201, .22); }
.odal-steps .st.is-done i { background: #57c4c9; border-color: #57c4c9; }
.odal-steps .ln { flex: 1; min-width: 10px; height: 1px; background: rgba(255, 255, 255, .16); }

/* 방법 탭(이메일/휴대폰) — 카드 안 세그먼트. 자식은 링크(서로 다른 화면) */
.odal-mseg {
  display: flex; gap: 4px; margin: 0 0 20px; padding: 4px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(255, 255, 255, .06);
}
.odal-mseg a {
  flex: 1; padding: 9px 8px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; text-align: center; text-decoration: none;
  color: #9cb1c4; transition: color .15s, background-color .15s;
}
.odal-mseg a:hover { color: #eaf2f9; }
.odal-mseg a.is-on { background: rgba(87, 196, 201, .22); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(87, 196, 201, .35); }

/* 6자리 코드 — 칸 6개(auth-code 컨트롤러가 hidden 입력으로 합친다) */
.odal-code { display: flex; gap: 8px; justify-content: space-between; margin: 4px 0 6px; }
.odal-code input {
  width: 100%; min-width: 0; height: 52px; box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, .16); border-radius: 11px;
  background-color: rgba(255, 255, 255, .06); color: #eaf2f9;
  font-size: 22px; font-weight: 700; font-family: inherit; text-align: center; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.odal-code input:focus { border-color: #57c4c9; box-shadow: 0 0 0 3px rgba(87, 196, 201, .20); }
.odal-code.is-invalid input { border-color: #e5484d; }
/* 한 칸 코드(백업코드 겸용) — 2차 인증 페이지 */
.odal-input.is-code { font-size: 20px; letter-spacing: 6px; text-align: center; font-weight: 700; }

/* 타이머·다시 받기 줄 */
.odal-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 20px; font-size: 12.5px; color: #9cb1c4; }
.odal-timer { font-weight: 700; color: #57c4c9; font-variant-numeric: tabular-nums; }
.odal-timer.is-low { color: #ff8a8d; }

/* 보조 버튼·텍스트 버튼·버튼 묶음 */
.odal-btn.is-sec { background-color: transparent; color: #dbe7f0; border: 1.5px solid rgba(255, 255, 255, .16); font-weight: 600; }
.odal-btn.is-sec:hover { filter: none; border-color: #57c4c9; color: #57c4c9; }
.odal-btn:disabled { opacity: .55; cursor: default; filter: none; transform: none; }
.odal-btns { display: flex; flex-direction: column; gap: 10px; }
.odal-txtbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: #57c4c9; cursor: pointer; }
.odal-txtbtn:disabled { color: #8ba2b6; font-weight: 500; cursor: default; }

/* 버튼 안 로딩 — 전체 화면 오버레이 대신 (2026-09-23) */
.odal-btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.odal-btn.is-loading::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(5, 34, 38, .35); border-top-color: #052226; border-radius: 50%;
  animation: odal-spin .8s linear infinite;
}
@keyframes odal-spin { to { transform: rotate(360deg); } }
/* input[type=submit] 은 ::before 를 못 그린다 — 로딩은 문구 교체로(login-flow) */
input.odal-btn.is-loading { color: #052226; opacity: .7; }

/* 카드 안 보조 상자 — 회원가입 검색 노출 설정 등 */
.odal-box { margin: 4px 0 18px; padding: 14px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 12px; background: rgba(255, 255, 255, .04); }
.odal-box-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.odal-box-row input[type="checkbox"] { width: 17px; height: 17px; margin: 2px 0 0; flex: 0 0 auto; accent-color: #57c4c9; cursor: pointer; }
.odal-box-t { font-size: 13.5px; font-weight: 600; color: #eaf2f9; }
.odal-box-d { margin-top: 3px; font-size: 12px; line-height: 1.45; color: #8ba2b6; }
.odal-box-row .odal-box-t, .odal-box-row .odal-box-d { display: block; }
.odal-help.is-err { color: #ff8a8d; }
.odal-box-sub { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .10); transition: opacity .15s; }
.odal-box-sub.is-off { opacity: .45; pointer-events: none; }
.odal-box-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .10); font-size: 11.5px; color: #8ba2b6; }

/* 체크 칩 — 검색 가능 항목 */
.odal-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.odal-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px;
  font-size: 13px; color: #9cb1c4; cursor: pointer; transition: all .15s;
}
.odal-chip input { width: 14px; height: 14px; margin: 0; accent-color: #57c4c9; cursor: pointer; }
.odal-chip:has(input:checked) { border-color: rgba(87, 196, 201, .55); background: rgba(87, 196, 201, .14); color: #eaf2f9; font-weight: 600; }

/* 약관 동의 상자 — 모두 동의 + 개별 줄 (샘플 C·관제, 2026-09-23) */
.odal-terms { padding: 16px; }
.odal-terms input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: #57c4c9; cursor: pointer; }
.odal-terms-all {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 14.5px; font-weight: 700; color: #ffffff;
}
.odal-terms-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; cursor: pointer; font-size: 13.5px; color: #dbe7f0; }
.odal-terms-view {
  margin-left: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px;
  color: #57c4c9; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.odal-terms .odal-box-foot a { color: #9cd9dc; }

/* 문서 보기 모달 본문 — rmm 모달(흰색) 안, A-4 골격(규칙 12): 16px·#f6f9fc + 흰 문서 카드.
   게시 문서 HTML(표·색 포함)을 원문 그대로 읽히게 한다. */
.odal-doc-wrap { padding: 16px; background: #f6f9fc; }
.odal-doc {
  max-height: min(62vh, 560px); overflow-y: auto; padding: 18px 20px;
  border: 1px solid #dbe6f0; border-radius: 12px; background: #ffffff;
  color: #1f2a35; font-size: 13px; line-height: 1.7;
}
.odal-doc table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12.5px; }
.odal-doc th, .odal-doc td { padding: 8px 10px; border-bottom: 1px solid #e5edf5; text-align: left; vertical-align: top; }
.odal-doc th { width: 30%; background: #f3f7fb; color: #3e6187; font-weight: 700; }
.odal-doc p { margin: 0 0 10px; }

/* 작은 간격·구분점 */
.odal-mb { margin: -6px 0 20px; }
.odal-dot { margin: 0 6px; color: rgba(255, 255, 255, .3); }
.odal-alt a + .odal-dot + a { margin-left: 0; }
.odal-mb-l { margin-bottom: 20px; }
.odal-mt { margin-top: 14px; }
.odal-alt.odal-alt-tight { margin-top: 8px; }

/* 구글 버튼·구분선 (2026-09-23 구글 로그인) — 샘플 C·관제: 흰 버튼 + 컬러 G */
.odal-google-form { margin: 0; }
.odal-btn.is-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background-color: rgba(255, 255, 255, .94); color: #1f2a35; font-weight: 600;
}
.odal-btn.is-google:hover { filter: none; background-color: #ffffff; }
.odal-btn.is-google svg { width: 18px; height: 18px; flex: 0 0 auto; }
.odal-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 12.5px; color: #8296a8; }
.odal-divider::before, .odal-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .16); }

/* 안드로이드 앱 웹뷰 (2026-09-23) — 카드 backdrop-filter 가 뒤에서 매 프레임 바뀌는 물결을 매번 다시 흐리게 계산해
   삼성 웹뷰에서 화면 전체가 깜박였다. 앱에서는 흐림을 끄고 같은 톤의 불투명 카드로 그린다(물결은 카드 밖에서만 보임). */
.odal-stage.is-app .odal-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #1d3344;
}
/* 앱 웹뷰는 애니메이션도 끈다 (2026-09-23 실기기 — 흐림을 끈 뒤에도 물결·맥박 애니메이션만으로 삼성 웹뷰가 계속 깜박였다).
   정지 화면으로 그리고, 로고 점은 고정 링만 남긴다. PC·모바일 브라우저는 종전 그대로. */
.odal-stage.is-app .odal-signal { display: none; }
.odal-stage.is-app .odal-brand::before { animation: none; }

/* 한 페이지 전환 프레임 (2026-09-23) — 무대(grid) 안에서 카드를 가운데 두는 블록 */
.odal-frame { display: grid; justify-items: center; width: 100%; }
/* 앱 네이티브 구글 버튼 오류 — 버튼 아래(카드 안 규칙) */
.odal-err.is-shown { display: block; }
.odal-err.is-shown[hidden] { display: none; }