/* ===== 로그인 게이트웨이 ===== */
.login-page { overflow: hidden; }

.login-shell {
  display: grid; grid-template-columns: 1.1fr 1fr;
  min-height: 100vh; position: relative; z-index: 1;
}

/* ---- 좌측 브랜드 패널 ---- */
.brand-panel {
  position: relative; overflow: hidden;
  background:
    linear-gradient(160deg, #0a1322 0%, #0c1424 55%, #081019 100%);
  border-right: 1px solid var(--line);
  padding: 56px 60px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.brand-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(700px 500px at 70% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(700px 500px at 70% 30%, #000 0%, transparent 75%);
}
.brand-panel > * { position: relative; z-index: 1; }

.brand-top { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  color: var(--acc); font-size: 22px;
  filter: drop-shadow(0 0 10px var(--acc-glow));
}
.logo-txt { font-size: 22px; font-weight: 800; color: var(--txt-0); letter-spacing: -.02em; }
.logo-txt b { color: var(--acc); font-weight: 800; }

.brand-hero h1 { font-size: 44px; line-height: 1.18; margin-bottom: 20px; }
.brand-hero p { font-size: 16px; color: var(--txt-2); max-width: 460px; }

.brand-stats {
  display: flex; gap: 14px; list-style: none;
}
.brand-stats li {
  flex: 1; background: rgba(18,24,38,.6); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px 16px;
}
.brand-stats b { display: block; font-size: 22px; color: var(--acc); margin-bottom: 4px; }
.brand-stats span { font-size: 12.5px; color: var(--txt-2); }

/* ---- 우측 로그인 패널 ---- */
.login-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px; background: var(--bg-1);
}
.login-box { width: 100%; max-width: 400px; }

.login-head { margin-bottom: 30px; }
.login-head h2 { font-size: 28px; margin-bottom: 8px; }

.login-opts { margin: -2px 0 22px; }
.checkbox {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--txt-2); cursor: pointer; user-select: none;
}
.checkbox input { display: none; }
.checkbox .box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--line-2); background: var(--bg-3);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.checkbox input:checked + .box {
  background: var(--acc-grad); border-color: transparent;
}
.checkbox input:checked + .box::after {
  content: '✓'; color: #04221d; font-size: 12px; font-weight: 900;
}

/* ---- 보안 경고 박스 ---- */
.sec-warn {
  margin-top: 26px; padding: 18px 18px 16px;
  background: var(--danger-bg);
  border: 1px solid rgba(245,87,108,.28);
  border-radius: var(--radius-sm);
}
.sec-warn-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
}
.sec-warn-head strong { font-size: 13.5px; color: #ff9aa8; letter-spacing: .01em; }
.sec-ico { font-size: 14px; }
.sec-warn p {
  font-size: 12px; line-height: 1.65; color: #cfa6ad;
}
.sec-warn p b { color: #ffb3bd; font-weight: 700; }
.sec-ip {
  margin-top: 12px; padding-top: 11px;
  border-top: 1px dashed rgba(245,87,108,.25);
  font-size: 11px; color: var(--txt-2); display: flex; align-items: center; gap: 7px;
}
.sec-ip .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--danger);
  box-shadow: 0 0 8px var(--danger); animation: pulse 1.8s infinite;
}
.sec-ip #ipAddr { color: var(--txt-1); margin-left: 2px; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.login-foot {
  margin-top: 22px; font-size: 12.5px; color: var(--txt-3);
  text-align: center; line-height: 1.6;
}
.login-copy {
  margin-top: 40px; font-size: 11.5px; color: var(--txt-3);
}

/* ---- 반응형 ---- */
@media (max-width: 880px) {
  .login-shell { grid-template-columns: 1fr; }
  .brand-panel { display: none; }
  .login-panel { min-height: 100vh; }
}
@media (max-width: 480px) {
  .login-panel { padding: 28px 20px; }
  .brand-hero h1 { font-size: 34px; }
}