/* =========================================
   auth/login.css — 멤버 로그인 (KP COMPANY 핑크·퍼플 컨셉)
   common.css 를 직접 로드하지 않는 단독 페이지라 팔레트를 자체 정의.
========================================= */
:root{
  --bg-1:#fdfbf6; --bg-2:#faf6ec; --bg-3:#fffdf8;
  --pink:#e3bd4e; --pink-2:#d4af37; --purple:#b8860b; --deep-pink:#d4a017;
  --card:rgba(255,255,255,.86); --line:rgba(226,209,166,.62);
  --t1:#2b2317; --t2:#6d5f45; --t3:#a3977c; --field:rgba(255,247,251,.9);
  --err-bg:#fdeef3; --err-bd:#f3c2d4; --err-tx:#c0395e;
  --shadow:0 30px 72px rgba(160,125,45,.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:#d3c69a; --t3:#a3977c; --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(240,220,150,.30), transparent 30%),
    radial-gradient(circle at 86% 14%, rgba(224,197,104,.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(227,189,78,.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 88% 92%, rgba(212,175,55,.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(227,189,78,.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(202,160,48,.28);
  transition:transform .18s, box-shadow .18s, opacity .18s;
}
.login-btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 16px 32px rgba(202,160,48,.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; }
}