/* ============================================================
   themes/dodon/style/auth.css
   로그인 / 회원가입 공용 폼 스타일

   로드: 컨트롤러의 additionalCss 로만. 상시 로드 아님.
         (login, register, find 화면에서만 필요)

   전제: _base.css 가 먼저 로드돼 있다.
         전역 리셋(*, body, a, img)·.container·.btn·.page-top·.breadcrumb
         ·.cat-* 변수는 전부 거기 있으므로 여기서 다시 쓰지 않는다.
         겹쳐 쓰면 로그인 화면만 폰트·여백이 미묘하게 달라진다.

   쓰는 변수 (_base.css 의 :root / .cat-*)
     --ink     본문 글자색
     --muted   보조 글자색
     --line    테두리선
     --accent  대표색   ← 로그인은 카테고리가 없어 :root 기본색이 나온다
     --accent2 진한색
     --soft    연한색
   ============================================================ */


/* ============================================================
   1. 페이지 배경 / 폭
   ============================================================ */

/* 카드가 흰색이라 뒤가 완전 백색이면 카드 경계가 안 보인다.
   가운데만 살짝 회색으로 눌러서 카드를 띄운다.
   🔥 목업의 초록 radial-gradient 는 뺐다. 그 색(#2F8F7B)은
      정리용품(cat-1) 전용색이라 로그인에 오면 근거 없는 초록이 된다. */
.auth-page{
  background:linear-gradient(180deg, #fff, #F8FAFC 45%, #fff);
  padding:40px 0 64px;
}

/* 1단 중앙 정렬 래퍼.
   🔥 폭 제한을 .login-panel 이 아니라 이 바깥 요소가 갖는 이유:
      .login-panel 은 나중에 로그인 모달이 그대로 재사용한다.
      모달은 자기 폭이 따로 있어서, 패널에 max-width 가 박혀 있으면 충돌한다. */
.auth-narrow{
  max-width:460px;
  margin:0 auto;
}


/* ============================================================
   2. 페이지 타이틀 (모달에는 없음 — 페이지 전용)
   ============================================================ */

.auth-title{
  text-align:center;
  margin:0 0 28px;
}

.auth-title h1{
  margin:0 0 8px;
  font-size:32px;
  letter-spacing:-1px;
}

.auth-title p{
  margin:0;
  color:var(--muted);
  font-weight:700;
  font-size:14px;
}


/* ============================================================
   3. 카드 (패널)
   .login-panel = 폼을 감싸는 흰 카드. 모달이 이 클래스째 재사용한다.
   ============================================================ */

.login-panel{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:0 16px 32px rgba(15,23,42,.05);
  padding:28px 24px;
}

/* 카드 안 소제목 영역. 모달에서 "로그인이 필요합니다" 안내를 넣을 자리.
   페이지에서는 안 쓴다(위 .auth-title 이 대신함). */
.panel-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}

.panel-head h2{
  margin:10px 0 0;
  font-size:24px;
  line-height:1.15;
  letter-spacing:-0.7px;
}

.panel-head p{
  margin:0;
  max-width:360px;
  color:#475569;
  font-weight:700;
}

/* 작은 뱃지형 라벨. 모달 상단 "회원 전용" 같은 표시용 */
.panel-kicker{
  display:inline-flex;
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  background:var(--soft);
  color:var(--accent2);
}


/* ============================================================
   4. 폼
   ============================================================ */

.login-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* 라벨+입력칸 한 묶음. <label class="field"> 로 감싸면
   라벨 클릭 시 입력칸에 포커스가 가서 for/id 를 안 써도 된다. */
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field span{
  font-weight:800;
  color:#334155;
  font-size:14px;
}

/* ============================================================
   5. 상태 메시지
   한 클래스로 6가지를 다 그린다.
     기본        승인대기 / 탈퇴신청 접수
     .is-error   로그인 실패
     .is-success 가입 완료
   ============================================================ */

.form-status{
  margin:0;
  padding:12px 14px;
  border:1px solid #CBD5E1;
  border-radius:8px;
  background:#F8FAFC;
  color:#334155;
  font-size:14px;
  font-weight:800;
  line-height:1.55;
}

.form-status.is-error{
  border-color:#FDA29B;
  background:#FEF3F2;
  color:#B42318;
}

.form-status.is-success{
  border-color:#A6F4C5;
  background:#ECFDF3;
  color:#067647;
}

/* 폼 위(카드 최상단)에 뜰 때만 아래 여백.
   폼 안(제출 직후 JS 메시지)에서는 .login-form 의 gap 이 처리한다. */
.login-panel > .form-status{
  margin-bottom:18px;
}

/* 안내 박스가 붙는 경우엔 그 박스가 아래 여백을 갖는다 */
.login-panel > .form-status.is-joined{
  margin-bottom:0;
}

/* ============================================================
   6. 체크박스 줄 (아이디 저장)
   ============================================================ */

.field-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#475569;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
}

/* 브라우저 기본 체크박스를 쓰되 색만 몰 색으로.
   직접 그리면(appearance:none) 접근성·키보드 조작을 다시 만들어야 한다. */
.check input{
  width:17px;
  height:17px;
  accent-color:var(--accent);
  margin:0;
  cursor:pointer;
}


/* ============================================================
   7. 제출 버튼
   .btn 은 _base.css 것을 쓰고 폭·높이만 여기서 얹는다.
   → 버튼 기본 모양이 바뀌면 로그인도 자동으로 따라간다.
   ============================================================ */

.login-submit{
  width:100%;
  height:54px;
  margin-top:6px;
  font-size:16px;
  font-weight:900;
}

/* 제출 중 이중 클릭 방지 상태 (JS 가 disabled 를 건다) */
.login-form button:disabled{
  cursor:wait;
  opacity:.68;
}


/* ============================================================
   8. 카드 아래 링크
   ============================================================ */

.auth-foot{
  margin-top:22px;
  text-align:center;
  font-size:14px;
  color:var(--muted);
  font-weight:700;
}

.auth-foot a{
  color:var(--accent);
  font-weight:900;
}

/* 두 번째 줄(찾기) — 회원가입보다 덜 강조 */
.auth-foot .sub{
  display:block;
  margin-top:8px;
  color:#94A3B8;
}

.auth-foot .sub a{
  color:inherit;
  font-weight:700;
}

.auth-foot a:hover{
  text-decoration:underline;
}

/* 카드 안쪽 보조 링크 묶음 (모달에서 씀 — 모달엔 .auth-foot 이 없다) */
.quick-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:18px;
}

.quick-links a{
  color:#64748B;
  font-weight:800;
  font-size:14px;
}


/* ============================================================
   9. 탈퇴유예 계정 복구 확인
   비번은 맞았지만 status=4 라 세션을 아직 안 만든 상태.
   폼 대신 이 블록이 뜬다. (페이지 전용 — 모달은 여기로 리다이렉트됨)
   ============================================================ */

.restore-box{
  margin-bottom:18px;
  padding:18px;
  border:1px solid #FDA29B;
  border-radius:8px;
  background:#FEF3F2;
}

.restore-box p{
  margin:0 0 12px;
  color:#334155;
  font-weight:700;
  font-size:14px;
  line-height:1.6;
  text-align:center;
}

.restore-box .head{
  color:#B42318;
  font-weight:900;
}

.restore-actions{
  display:flex;
  gap:8px;
}

/* [아니오]는 <a>, [예]는 <form><button>.
   태그가 달라도 같은 크기로 보이게 flex:1 과 높이를 맞춘다. */
.restore-actions > *{ flex:1; }
.restore-actions form{ margin:0; }

.restore-actions button,
.restore-actions a{
  display:block;
  width:100%;
  height:46px;
  line-height:46px;
  border-radius:8px;
  text-align:center;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  border:0;
}

.restore-actions .no{
  background:#F1F5F9;
  color:#475569;
}

.restore-actions .yes{
  background:#B42318;
  color:#fff;
}

.restore-actions .no:hover{ background:#E2E8F0; }
.restore-actions .yes:hover{ background:#9A1D14; }


/* ============================================================
   10. 안내 박스 (선택 — 필요할 때만)
   ============================================================ */

.login-note{
  margin-top:18px;
  padding:16px;
  border-radius:8px;
  background:#F8FAFC;
  border:1px solid #E2E8F0;
  color:#475569;
  font-weight:700;
  font-size:14px;
}


/* ============================================================
   11. 모바일
   ============================================================ */

@media (max-width: 640px){
  .auth-page{ padding:24px 0 44px; }
  .auth-title h1{ font-size:26px; }
  .login-panel{ padding:22px 18px; }
  .login-submit{ height:50px; }
}

/* 에러 메시지 안의 탈출 링크 (잠금 시 비밀번호 찾기).
   메시지 색과 같은 계열로 두되 밑줄로 링크임을 표시한다. */
/* 에러 박스에 안내 박스가 붙을 때 : 아래 모서리를 펴서 한 덩어리로 보이게 */
.form-status.is-joined{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  border-bottom:0;
}

/* ── 잠금 시 탈출구 ──
   에러(빨강) 바로 아래 흰 박스.
   같은 색 안에 링크를 넣으면 묻히므로 배경을 갈아서 대비를 준다. */
.status-help{
  margin:0 0 18px;
  padding:14px;
  border:1px solid #FDA29B;
  border-top:1px solid #FEE4E2;   /* 위 박스와 만나는 선만 연하게 */
  border-radius:0 0 8px 8px;
  background:#fff;
  text-align:center;
}

.status-help p{
  margin:0 0 10px;
  color:#475569;
  font-weight:700;
  font-size:13px;
}

.status-help a{
  display:inline-block;
  padding:9px 20px;
  border:1px solid #B42318;
  border-radius:8px;
  color:#B42318;
  font-weight:900;
  font-size:14px;
}

.status-help a:hover{
  background:#B42318;
  color:#fff;
}