/* ══════════════════════════════════════════════════════════════════
   인증 페이지 시네마틱 다크 테마 (Abyss & Ice) — 랜딩(index.html)과 통일
   login / sign-up / forgot-password / reset-password 에서 _shared-v5.css 뒤에 로드.
   ══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@1,500;1,600&display=swap');

:root{
  --abyss:#05070d; --deep:#090d16; --deep2:#0a101c; --panel:#0d1424;
  --frost:#eef3f9; --frost-dim:#d9e3ef;
  --ice:#a9cbee; --ice-soft:#c8def5; --ice-deep:#6f96c8; --steel:#47679a;
  --a-muted:rgba(238,243,249,.56); --a-muted2:rgba(238,243,249,.34);
  --a-hair:rgba(169,203,238,.20); --a-hair-soft:rgba(238,243,249,.09);
  --a-glass:rgba(238,243,249,.045); --a-glass-brd:rgba(238,243,249,.12);
  --a-serif:"Noto Serif KR", serif;
  --a-latin:"Cormorant Garamond", serif;
}

body{ background:var(--abyss); color:var(--frost); }

/* ── 배경: 콜드 오로라 + 그레인 ── */
.auth-wrap{
  background:var(--abyss);
  padding:64px var(--container-pad) 48px;
}
.auth-wrap::after{  /* 미세 그레인 */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.auth-bg{
  background:
    radial-gradient(120% 80% at 50% -18%, #0c1322 0%, transparent 58%),
    radial-gradient(45% 34% at 82% 16%, rgba(169,203,238,.16) 0%, transparent 70%),
    radial-gradient(42% 32% at 12% 92%, rgba(111,150,200,.12) 0%, transparent 72%);
}

/* ── 로고 ── */
.auth-logo{ font-family:var(--a-serif); color:var(--frost); }
.auth-logo-dot{ background:var(--ice); box-shadow:0 0 14px rgba(169,203,238,.7); }

/* ── 카드 ── */
.auth-card-box{
  background:linear-gradient(180deg, rgba(13,20,36,.72), rgba(9,13,22,.72));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--a-glass-brd);
  border-radius:20px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(238,243,249,.05);
  padding:36px 30px;
}
.auth-title{
  font-family:var(--a-serif); font-weight:500; font-size:27px;
  letter-spacing:-.02em; color:var(--frost); line-height:1.32;
}
.auth-sub{ color:var(--a-muted); font-size:14px; }

/* ── 로그인/회원가입 탭 ── */
.auth-tabs{ background:var(--a-glass); border:1px solid var(--a-hair-soft); }
.auth-tab{ color:var(--a-muted); }
.auth-tab.on{
  background:linear-gradient(160deg,#e2eefb,var(--ice) 60%,var(--ice-deep));
  color:#0a1220; box-shadow:0 6px 18px -8px rgba(111,150,200,.7);
}

/* ── 소셜 버튼 ── */
.social-btn{
  background:var(--a-glass); border:1px solid var(--a-glass-brd); color:var(--frost);
}
.social-btn:hover:not(:disabled){ background:rgba(238,243,249,.09); }
.social-kakao{ background:#FEE500; color:#191919; border-color:transparent; }
.social-kakao:hover:not(:disabled){ background:#f5dc00; }

/* ── 구분선 ── */
.auth-divider-line{ background:var(--a-hair); }
.auth-divider-text{ color:var(--a-muted2); }

/* ── 입력 필드 ── */
.field-label{ color:var(--ice-soft); font-weight:600; letter-spacing:.01em; }
.field-input{
  background:var(--a-glass); border:1px solid var(--a-glass-brd);
  color:var(--frost); border-radius:12px; height:50px;
}
.field-input::placeholder{ color:var(--a-muted2); }
.field-input:focus{
  border-color:var(--ice); background:rgba(238,243,249,.06);
  box-shadow:0 0 0 3px rgba(169,203,238,.15);
}
.field-input:disabled{ background:rgba(238,243,249,.03); opacity:.55; }
.field-pw-toggle{ color:var(--a-muted); }
.field-pw-toggle:hover{ color:var(--frost); background:rgba(238,243,249,.08); }
.field-helper, .field-msg{ color:var(--a-muted); }
.field-timer{ color:var(--ice); }

/* 휴대폰 인증 등 액션 버튼 (인증번호 받기/확인) */
.field-action-btn{
  background:var(--a-glass); border:1px solid var(--a-glass-brd); color:var(--frost);
}
.field-action-btn:hover:not(:disabled){ background:rgba(238,243,249,.09); border-color:var(--a-hair); }

/* ── 주요 버튼(로그인/가입): 아이스 그라디언트 ── */
.btn-primary{
  background:linear-gradient(160deg,#e2eefb,var(--ice) 55%,var(--ice-deep));
  color:#0a1220; font-weight:700; border:0;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 16px 40px -14px rgba(111,150,200,.7);
}
.btn-primary:hover:not(:disabled){
  background:linear-gradient(160deg,#eaf3fd,var(--ice-soft) 55%,var(--ice));
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 22px 50px -12px rgba(111,150,200,.85);
  transform:translateY(-1px);
}

/* ── 알림 박스 ── */
.alert-error{ background:rgba(220,60,60,.10); border:1px solid rgba(240,120,120,.3); color:#ffb4b4; }
.alert-success{ background:rgba(169,203,238,.10); border:1px solid var(--a-hair); color:var(--ice-soft); }

/* ── 하단 링크 ── */
.auth-bottom{ color:var(--a-muted); }
.auth-bottom a{ color:var(--ice-soft); }
.auth-bottom a:hover{ color:var(--frost); }
.auth-fine{ color:var(--a-muted2); }
.auth-fine a{ color:var(--a-muted); }
.auth-fine a:hover{ color:var(--ice-soft); }

/* ── 약관 동의 (sign-up 인라인 <style> 뒤에 로드되므로 !important 필요) ── */
.agree-box{ background:var(--a-glass) !important; border:1px solid var(--a-glass-brd) !important; }
.check-row:first-child{ border-bottom:1px solid var(--a-hair-soft) !important; color:var(--frost) !important; }
.check-row:first-child .chk-label{ color:var(--frost) !important; }
.chk-label{ color:var(--frost-dim) !important; }
.chk-label a{ color:var(--ice-soft) !important; }
.chk-label .req{ color:var(--ice) !important; }
.chk{ accent-color:var(--ice) !important; }

/* ── 비밀번호 강도 (sign-up 인라인) ── */
.strength-seg{ background:rgba(238,243,249,.10) !important; }
.strength-seg.strong{ background:var(--ice) !important; }
.pw-hint.ok{ color:var(--ice-soft) !important; }
.field-timer{ color:var(--ice) !important; }

/* ── 이메일 확인 모달 (sign-up 인라인) ── */
.modal-box{
  background:linear-gradient(180deg, rgba(13,20,36,.98), rgba(9,13,22,.98)) !important;
  border:1px solid var(--a-glass-brd) !important; color:var(--frost) !important;
}
.modal-title{ color:var(--frost) !important; }
.modal-desc{ color:var(--a-muted) !important; }
.modal-email{ color:var(--ice-soft) !important; }
.modal-resend a{ color:var(--ice-soft) !important; }