/* =========================================
   auth/login.css — 멤버 로그인 (FANTAJ 핑크·퍼플 컨셉)
   common.css 를 직접 로드하지 않는 단독 페이지라 팔레트를 자체 정의.
========================================= */
:root{
  --bg-1:#fff7fb; --bg-2:#f7f0ff; --bg-3:#fffaf4;
  --pink:#ff7eb7; --pink-2:#a965e8; --purple:#8f4eb2; --deep-pink:#ff4f98;
  --card:rgba(255,255,255,.86); --line:rgba(226,194,223,.62);
  --t1:#3d3148; --t2:#6f5b79; --t3:#9a8aa3; --field:rgba(255,247,251,.9);
  --err-bg:#fdeef3; --err-bd:#f3c2d4; --err-tx:#c0395e;
  --shadow:0 30px 72px rgba(150,94,171,.22);
}
[data-theme="dark"]{
  --bg-1:#171019; --bg-2:#120d18; --bg-3:#1c1424;
  --card:rgba(38,29,49,.9); --line:rgba(206,176,224,.16);
  --t1:#f4edf8; --t2:#cbbcd6; --t3:#9a8aa6; --field:rgba(255,255,255,.05);
  --err-bg:rgba(220,60,110,.12); --err-bd:rgba(220,60,110,.32); --err-tx:#ff9bbb;
  --shadow:0 30px 72px rgba(0,0,0,.55);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:'DM Sans','Noto Sans KR',system-ui,-apple-system,sans-serif;
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; color:var(--t1); position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 12% 6%, rgba(255,183,217,.30), transparent 30%),
    radial-gradient(circle at 86% 14%, rgba(184,156,255,.26), transparent 32%),
    linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 48%,var(--bg-3) 100%);
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 18% 90%, rgba(255,126,183,.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 88% 92%, rgba(169,101,232,.14), transparent 60%);
}

/* 테마 토글 */
.theme-btn{
  position:fixed; top:18px; right:18px; z-index:10;
  display:flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:100px;
  padding:8px 14px; font-size:.76rem; font-weight:700; color:var(--t2);
  backdrop-filter:blur(12px); transition:all .2s;
}
.theme-btn:hover{ border-color:var(--pink); color:var(--purple); }

/* 카드 */
.card{
  position:relative; z-index:1; width:100%; max-width:412px;
  background:var(--card); border:1px solid var(--line); border-radius:22px;
  padding:46px 42px 34px; box-shadow:var(--shadow); overflow:hidden;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  animation:cardUp .5s cubic-bezier(.22,1,.36,1) both;
}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,var(--pink),var(--pink-2),var(--deep-pink));
}
@keyframes cardUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }

/* 로고 */
.logo{ text-align:center; margin-bottom:32px; }
.logo-mark{
  display:block; font-family:'Cormorant Garamond',serif;
  font-size:2.7rem; font-weight:700; letter-spacing:.14em; line-height:1.05; margin-bottom:6px;
  background:linear-gradient(135deg,var(--purple) 0%,var(--pink-2) 50%,var(--deep-pink) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.logo-sub{ font-size:.68rem; font-weight:800; letter-spacing:.3em; text-transform:uppercase; color:var(--t3); }
.logo-divider{ width:46px; height:2px; margin:15px auto 0; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--pink),transparent); }

/* 필드 */
.field{ margin-bottom:15px; }
.field label{ display:block; font-size:.7rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--t3); margin-bottom:7px; }
.field input{
  width:100%; padding:13px 16px; border-radius:12px; font-size:.96rem; font-family:inherit;
  background:var(--field); border:1px solid var(--line); color:var(--t1); outline:none;
  transition:border-color .18s, box-shadow .18s, background .2s;
}
.field input::placeholder{ color:var(--t3); }
.field input:focus{ border-color:var(--pink); background:rgba(255,255,255,.96);
  box-shadow:0 0 0 4px rgba(255,126,183,.16); }
[data-theme="dark"] .field input:focus{ background:rgba(255,255,255,.08); }
.field input.err{ border-color:var(--err-tx); box-shadow:0 0 0 4px rgba(192,57,94,.14); }

/* 에러 */
.error-box{ display:none; margin-bottom:14px; padding:11px 14px; border-radius:10px;
  background:var(--err-bg); border:1px solid var(--err-bd); color:var(--err-tx);
  font-size:.84rem; font-weight:700; text-align:center; }
.error-box.show{ display:block; }

/* 로그인 버튼 */
.login-btn{
  width:100%; margin-top:8px; padding:14px; border:0; border-radius:12px; cursor:pointer;
  font-family:inherit; font-size:.95rem; font-weight:800; letter-spacing:.05em; color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--pink-2)); box-shadow:0 12px 26px rgba(176,97,209,.28);
  transition:transform .18s, box-shadow .18s, opacity .18s;
}
.login-btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 16px 32px rgba(176,97,209,.36); }
.login-btn:active:not(:disabled){ transform:translateY(0); }
.login-btn:disabled{ opacity:.6; cursor:default; }

/* 힌트 */
.hint{ text-align:center; margin-top:18px; font-size:.78rem; color:var(--t3); letter-spacing:.02em; }

/* 하단 링크 (커뮤니티 / 관리자) */
.admin-link{ display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.admin-link a{ font-size:.78rem; font-weight:800; color:var(--purple); letter-spacing:.02em; transition:opacity .18s; }
.admin-link a:hover{ opacity:.65; }

/* 쉐이크 */
@keyframes shake{ 0%,100%{ transform:translateX(0); } 20%,60%{ transform:translateX(-5px); } 40%,80%{ transform:translateX(5px); } }
.shake{ animation:shake .38s ease; }

@media (max-width:460px){
  .card{ padding:38px 26px 30px; border-radius:18px; }
  .logo-mark{ font-size:2.3rem; }
}