:root{
  --bg:#eaeaeb;--card:#ffffff;--border:#e5e7eb;--text:#1f2937;--muted:#6b7280;
  --primary:#0a3c86;--primary-press:#072e66;
  --card-w:360px; /* 기본 카드 폭 */
  --slogan-text:"우리 고객의 경험은 최고의 서비스와 즐거움 입니다.";
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 50% -200px, rgba(0,0,0,.08), transparent 60%), var(--bg);
}
.wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
@supports (height: 100dvh){
  .wrap{ min-height:100dvh; }
}

/* 로고 */
.logo{display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.logo img{height:52px;max-width:280px;width:auto;display:block;object-fit:contain}
.logo::before,.logo .logo-ico,.logo .logo-text,.logo .site-title{display:none!important;content:none!important}

/* 카드 */
.card{
  width:min(100%, var(--card-w));
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.08)
}

/* 폼 */
.input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;outline:none}
.input:focus{border-color:#cbd5e1;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
label{font-size:12px;color:var(--muted);display:block;margin:10px 2px 6px}
.row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.checkbox{display:flex;align-items:center;gap:6px;font-size:12px;color:#475569}
.btn{width:100%;margin-top:16px;padding:12px;border:0;border-radius:10px;background:var(--primary);color:#fff;font-weight:700;cursor:pointer}
.btn:active{background:var(--primary-press)}
.err{color:#c62828;font-size:12px;margin-top:10px;text-align:center}

/* 컨테이너 */
.box{width:100%;display:flex;flex-direction:column;align-items:center}

/* ────────────────────────────────────────────────────────────
   슬로건: 기본은 카드 아래 '엘리먼트' 사용 (.login-slogan)
   - 평상시: 카드 아래 자연스럽게 표시
   - 창이 낮아 스크롤이 생기면: sticky로 화면 하단에 붙음
   - 안전을 위해 기존 .box::after(가상요소)도 유지하되,
     .login-slogan이 있으면 자동 비활성화
   ──────────────────────────────────────────────────────────── */

/* (선호) 엘리먼트 방식 */
.login-slogan{
  display:block;
  width:min(100%, var(--card-w));
  margin:14px auto 0;
  padding:0 8px;
  text-align:center;
  color:var(--text);
  font-weight:600;
  font-size:13.5px;
  line-height:1.25;
  letter-spacing:-0.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

  /* 핵심: 화면이 낮아 스크롤될 때만 하단에 달라붙음 */
  position:sticky; bottom:16px;
}
@media (max-width:540px){
  .login-slogan{ bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* (폴백) 기존 테마의 가상요소 방식도 호환 */
.box::after{
  content:var(--slogan-text);
  display:block;
  width:min(100%, var(--card-w));
  margin:14px auto 0;
  text-align:center;
  color:var(--text);
  font-weight:600;
  font-size:13.5px;
  line-height:1.25;
  letter-spacing:-0.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* .login-slogan이 실제로 있으면 가상요소 숨김(중복 방지) */
.box:has(>.login-slogan)::after{ content:none; display:none; }

/* 짧은 창 높이에서 가운데 정렬을 풀어 스크롤 여유 확보 */
@media (max-height:720px){
  .wrap{ justify-content:flex-start; padding-bottom:24px; }
}

/* 혹시 과거에 넣었던 body::after 고정 규칙이 남아있다면 강제로 해제 */
body::after{ content:none !important; }