/* 로그인 전용 페이지(2026-10-05). 사용자가 보내준 레퍼런스 화면의 좌우 분할 레이아웃·보라 팔레트를 따른다.
   회원 사이트 본문(styles.css)과 색 체계가 달라 이 파일만 단독으로 쓴다. */
:root{
  --auth-bg:#f3eefb; --auth-card:#fff; --auth-side:#efe7fb;
  --auth-ink:#1d1b2e; --auth-muted:#6b6880; --auth-line:#e5ddf4;
  --auth-purple:#6b2fd6; --auth-purple-2:#8b5cf6; --auth-link:#7b3fe4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.auth-page{
  min-height:100vh;background:var(--auth-bg);color:var(--auth-ink);
  font-family:Manrope,'Noto Sans KR',system-ui,sans-serif;
  display:flex;align-items:flex-start;justify-content:center;padding:48px 20px 40px;
}
.auth-shell{width:min(1120px,100%)}

/* ── 카드: 왼쪽 흰 폼, 오른쪽 연보라 비주얼 ───────────────────────────── */
.auth-card{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--auth-card);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px rgba(60,32,122,.10),0 2px 8px rgba(60,32,122,.06);
}
.auth-form-side{padding:40px 56px 44px;display:flex;flex-direction:column}
.auth-brand{display:flex;align-items:center;gap:10px;align-self:center;text-decoration:none;color:var(--auth-ink);margin-bottom:26px}
.auth-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--auth-purple-2),var(--auth-purple));color:#fff;display:grid;place-items:center;font-weight:800;font-size:17px}
.auth-brand .site-name{font-weight:800;font-size:19px;letter-spacing:-.2px}
.auth-form-side h1{text-align:center;font-size:30px;font-weight:800;margin:0 0 26px;letter-spacing:-.4px}

/* 레퍼런스처럼 폼은 패널 가운데에 좁게 둔다. */
form{display:flex;flex-direction:column;width:min(340px,100%);margin:0 auto}
.field{display:block;position:relative;margin-bottom:18px}
/* display를 지정한 요소에는 hidden 속성이 먹지 않는다. 이 한 줄이 없으면 가입 전용 칸이 로그인 화면에 그대로 보인다. */
.field[hidden],[hidden]{display:none !important}
/* 라벨 글자만 테두리 위에 올린다. :not(.with-eye)가 없으면 눈 아이콘 감싸개까지 절대배치되어 비밀번호 칸이 찌그러진다. */
.field>span:not(.with-eye){position:absolute;top:-7px;left:12px;padding:0 6px;background:#fff;font-size:11px;color:var(--auth-muted);z-index:1}
.field>span i{font-style:normal;color:#e0483d}
.field input{
  width:100%;height:50px;padding:0 14px;border:1px solid var(--auth-line);border-radius:7px;
  background:#fff;color:var(--auth-ink);font:inherit;font-size:14px;outline:0;transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder{color:#b3aec6}
.field input:focus{border-color:var(--auth-purple-2);box-shadow:0 0 0 3px rgba(139,92,246,.16)}
.with-eye{display:block;position:relative}
.with-eye input{padding-right:46px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:none;color:#8b86a3;font-size:15px;cursor:pointer;border-radius:7px}
.eye:hover{background:#f5f1fd;color:var(--auth-purple)}
.eye.on{color:var(--auth-purple)}

.reset-link{align-self:flex-end;color:var(--auth-link);font-size:12px;font-weight:600;text-decoration:none;margin:-4px 0 18px}
.reset-link:hover{text-decoration:underline}
.auth-msg{min-height:0;margin:0;color:#d33a2c;font-size:12px;line-height:1.6}
.auth-msg:not(:empty){margin:0 0 12px;padding:10px 12px;background:#fdecea;border-radius:7px}
.auth-msg.ok{color:#0f7a52;background:#e6f7f0}

.auth-submit{
  width:100%;height:50px;border:0;border-radius:7px;cursor:pointer;
  background:linear-gradient(90deg,#7b3fe4,#5a21c0);color:#fff;font:inherit;font-size:15px;font-weight:700;letter-spacing:.2px;
  transition:filter .15s,transform .05s;
}
.auth-submit:hover{filter:brightness(1.07)}
.auth-submit:active{transform:translateY(1px)}
.auth-submit:disabled{opacity:.6;cursor:default}

.auth-or{display:flex;align-items:center;gap:12px;margin:22px auto 16px;width:min(340px,100%);color:var(--auth-muted);font-size:12px}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--auth-line)}
.auth-social{display:flex;justify-content:center;gap:14px}
.social{width:46px;height:40px;border:1px solid var(--auth-line);background:#fff;border-radius:9px;display:grid;place-items:center;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.social:hover{border-color:#c9bbe9;box-shadow:0 2px 10px rgba(60,32,122,.08)}
.auth-switch{text-align:center;margin:22px 0 0;font-size:13px;color:var(--auth-muted)}
.auth-switch a{color:var(--auth-link);font-weight:700;text-decoration:none}
.auth-switch a:hover{text-decoration:underline}

/* ── 오른쪽 비주얼 ──────────────────────────────────────────────────── */
.auth-visual{position:relative;background:var(--auth-side);padding:48px 40px;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}
.auth-visual .blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55}
.auth-visual .blob.one{width:260px;height:260px;right:-90px;top:-70px;background:radial-gradient(circle at 30% 30%,#e3d6fb,#efe7fb)}
.auth-visual .blob.two{width:200px;height:200px;left:-70px;bottom:-60px;background:radial-gradient(circle at 40% 40%,#ded0fa,#efe7fb)}
.chart-stack{position:relative;width:min(330px,100%);height:210px;margin-bottom:34px}
.mini-card{position:absolute;background:#fff;border-radius:10px;padding:12px 14px;box-shadow:0 10px 30px rgba(60,32,122,.12)}
.mini-card.back{right:0;top:0;width:88%;opacity:.96}
.mini-card.front{left:0;bottom:0;width:88%}
.mini-head{display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.mini-head b{font-size:10px;font-weight:700;margin-right:auto;white-space:nowrap}
.chip{font-size:8px;color:var(--auth-muted);border:1px solid var(--auth-line);border-radius:99px;padding:2px 6px;white-space:nowrap}
.chip.up{color:#0f9b6c;border-color:#bfe9d8;background:#edfbf4}
.mini-bars{display:flex;align-items:flex-end;gap:6px;height:74px}
.mini-bars i{flex:1;border-radius:3px 3px 2px 2px;background:linear-gradient(180deg,#a78bfa,#7c4ae0)}
.mini-card.back .mini-bars i{background:linear-gradient(180deg,#c4b5fd,#9f7aea);opacity:.85}
.auth-welcome{text-align:center}
.auth-welcome h2{font-size:24px;font-weight:800;margin:0 0 8px;letter-spacing:-.3px}
.auth-welcome p{margin:0;color:var(--auth-muted);font-size:13px}

/* ── 카드 아래 안내 ─────────────────────────────────────────────────── */
.auth-foot{margin:26px 4px 0;color:#7a7590;font-size:11px;line-height:1.75}
.auth-foot p{margin:0 0 8px}
.auth-foot b{color:#5f5a78}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);background:#1d1b2e;color:#fff;padding:12px 18px;border-radius:8px;font-size:13px;opacity:0;pointer-events:none;transition:.2s}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:860px){
  body.auth-page{padding:24px 14px 30px}
  .auth-card{grid-template-columns:1fr}
  .auth-form-side{padding:30px 22px 32px;order:1}
  /* 좁은 화면에서는 비주얼을 폼 아래로 내리고 낮게 줄인다(폼이 먼저 보여야 한다). */
  .auth-visual{order:2;padding:30px 20px 34px}
  .chart-stack{height:170px;margin-bottom:24px}
  .auth-form-side h1{font-size:25px}
}