/* DOPAMINE SYSTEM — 로그인 화면 (v6 목업01 기준)
   좌측 대형 로고 비주얼 + 우측 로그인 카드 */

.login-page { display: flex; min-height: 100vh; align-items: stretch; position: relative; z-index: 1; }

/* 좌측 브랜드 비주얼 */
.brand-side {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 50px; position: relative; overflow: hidden;
}
.brand-side .b-topbrand {
  position: absolute; top: 36px; left: 44px; display: flex; align-items: center; gap: 11px;
  font-size: 16px; font-weight: 800; color: var(--txt-0); letter-spacing: -.01em;
}
.brand-side .b-topbrand .dia { width: 17px; height: 17px; transform: rotate(45deg); background: var(--grad); border-radius: 4px; box-shadow: 0 0 16px var(--glow-purple); }
.brand-hero-logo { text-align: center; }
.brand-hero-logo img { width: min(460px, 60vw); height: auto; filter: drop-shadow(0 8px 40px var(--glow-purple)); }
.brand-glow {
  position: absolute; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow-purple), transparent 62%); filter: blur(40px);
  z-index: -1; animation: pulse 5s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }

/* 우측 로그인 패널 */
.login-side {
  width: 480px; flex-shrink: 0; background: var(--bg-2); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center; padding: 50px 52px;
}
.login-box { width: 100%; }
.login-head { margin-bottom: 28px; }
.login-head h2 { font-size: 26px; margin-bottom: 7px; }
.login-head p { color: var(--txt-2); font-size: 14px; }
.login-form .field { margin-bottom: 17px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 46px; }
.pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; color: var(--txt-3); padding: 4px; }
.pw-toggle svg { width: 19px; height: 19px; display: block; }
.pw-toggle:hover { color: var(--txt-1); }
.input-ico { position: relative; }
.input-ico > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--txt-3); pointer-events: none; }
.input-ico .input { padding-left: 42px; }
.input-ico.has-toggle .input { padding-right: 46px; }

.login-opts { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 20px; }
.checkbox { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--txt-1); user-select: none; }
.checkbox input { display: none; }
.checkbox .box { width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--line-2); background: var(--bg-3); display: inline-flex; align-items: center; justify-content: center; transition: .15s; }
.checkbox input:checked + .box { background: var(--grad); border-color: transparent; }
.checkbox input:checked + .box::after { content: '✓'; color: #fff; font-size: 12px; font-weight: 800; }

.sec-warn { margin-top: 22px; padding: 16px; border: 1px solid rgba(251,1,58,.28); background: rgba(251,1,58,.06); border-radius: var(--radius-sm); }
.sec-warn-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.sec-warn-head svg { width: 17px; height: 17px; color: var(--neon-pink); }
.sec-warn-head strong { font-size: 13.5px; color: var(--txt-0); font-weight: 700; }
.sec-warn p { font-size: 12.5px; color: var(--txt-2); line-height: 1.65; }
.sec-warn .sec-ip { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--txt-3); display: flex; align-items: center; gap: 7px; }
.sec-warn .sec-ip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neon-pink); box-shadow: 0 0 8px var(--neon-pink); }

.login-foot { margin-top: 20px; font-size: 13px; color: var(--txt-2); text-align: center; line-height: 1.6; }
.login-copy { margin-top: 28px; font-size: 11.5px; color: var(--txt-3); text-align: center; }

@media (max-width: 920px) {
  .login-page { flex-direction: column; }
  .brand-side { flex: none; padding: 56px 30px 20px; }
  .brand-side .b-topbrand { position: static; margin-bottom: 30px; }
  .brand-hero-logo img { width: min(360px, 80vw); }
  .login-side { width: 100%; border-left: 0; border-top: 1px solid var(--line); padding: 36px 26px 50px; }
}