/* 3.12.35 로그인 배경(강남구청 스케치 애니메이션) — 배치 규칙은 js/login-scene.js 머리말 참고 */
.login-stage.has-scene{position:relative;background:var(--color-surface-0d2a4f);isolation:isolate}
.login-scene{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--color-surface-0d2a4f);pointer-events:none}
.login-scene-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.login-scene video{opacity:0;transition:opacity .9s ease}
.login-scene.is-playing video{opacity:1}
.login-scene::after{content:'';position:absolute;inset:0;pointer-events:none}

/* 카드: 반투명 흰 판(배경이 비치되 글자는 또렷하게) */
.login-stage.has-scene .login-shell{position:relative;z-index:1;display:flex;flex-direction:column;grid-template-columns:none;max-width:none;width:clamp(340px,calc(30 * var(--gn-vw,1vw)),440px);min-height:0;
  background:var(--color-surface-170f7b1d01);-webkit-backdrop-filter:saturate(1.15) blur(12px);backdrop-filter:saturate(1.15) blur(12px);
  border:1px solid var(--color-line-395a60f1d0);border-radius:20px;box-shadow:0 24px 70px var(--color-shadow-eb7e7f9c3b),0 2px 10px var(--color-shadow-4bcc4b4267);overflow:hidden}
.login-stage.has-scene .login-shell>*{flex:none}   /* 높이가 모자라면 칸이 눌리지 않고 카드가 스크롤된다 */
.login-stage.has-scene .login-story{min-height:0;padding:15px 22px;background:linear-gradient(135deg,var(--color-surface-0c2d59) 0%,var(--color-surface-1b4a80) 100%);display:block}
.login-stage.has-scene .login-story>div{display:flex;align-items:center;gap:14px}
.login-stage.has-scene .login-logo{width:110px;padding:7px 10px;border-radius:9px;flex:none}
.login-stage.has-scene .login-story h1{font-size:21px;line-height:1.2;margin:0;letter-spacing:-.03em}
.login-stage.has-scene .login-brand-en,.login-stage.has-scene .login-story p,.login-stage.has-scene .login-story small{display:none}
.login-stage.has-scene .login-form{padding:24px 26px 20px;align-self:stretch}
.login-stage.has-scene .login-form h2{font-size:22px;margin-bottom:6px}
.login-stage.has-scene .login-form>p{margin-bottom:12px;line-height:1.6}
.login-stage.has-scene .login-form label{margin:14px 0 6px}
.login-stage.has-scene .login-form .btn{margin-top:18px}
.login-stage.has-scene .login-foot{margin-top:14px;line-height:1.6}

/* 가로 화면: 배경은 화면 전체, 카드는 왼쪽(넓은 화면) 또는 오른쪽(휴대폰·폴드 가로) */
.login-stage.has-scene.scene-land{display:flex;align-items:center;justify-content:flex-start;padding:max(20px,calc(4 * var(--gn-vh,1vh))) max(20px,calc(4.5 * var(--gn-vw,1vw)))}
.login-stage.has-scene.scene-land.card-right{justify-content:flex-end;padding:12px max(12px,calc(3 * var(--gn-vw,1vw)))}
.login-stage.has-scene.scene-land .login-shell{max-height:calc(calc(100 * var(--gn-dvh,1dvh)) - 2 * max(20px,calc(4 * var(--gn-vh,1vh))));overflow:auto;overscroll-behavior:contain}
.login-stage.has-scene.scene-land.card-right .login-shell{max-height:calc(calc(100 * var(--gn-dvh,1dvh)) - 24px);width:clamp(320px,calc(42 * var(--gn-vw,1vw)),400px)}
.scene-land.card-left .login-scene::after{background:linear-gradient(90deg,var(--color-surface-1a2ba8fea5) 0%,var(--color-surface-0c2a7b4f98) 32%,var(--color-surface-66d507d390) 56%)}
.scene-land.card-right .login-scene::after{background:linear-gradient(270deg,var(--color-surface-1a2ba8fea5) 0%,var(--color-surface-0c2a7b4f98) 36%,var(--color-surface-66d507d390) 60%)}

/* 세로 화면: 위쪽 장면(높이는 스크립트가 남는 높이로), 아래 카드 */
.login-stage.has-scene.scene-stack{display:block;padding:0 0 max(20px,env(safe-area-inset-bottom))}
/* 카드 둘레(태블릿·세로 모니터의 넓은 옆자리, 아래 여백)는 같은 그림을 흐리게 이어서 빈 남색 판처럼 보이지 않게 */
.login-stage.has-scene.scene-stack::before{content:'';position:fixed;inset:-40px;z-index:-1;pointer-events:none;
  background:var(--scene-poster,none) 50% 78%/cover no-repeat var(--color-surface-0d2a4f);filter:blur(26px) brightness(.52) saturate(1.1)}
.scene-stack .login-scene{position:relative;inset:auto;height:calc(42 * var(--gn-vh,1vh));width:100%;background:transparent;
  -webkit-mask-image:linear-gradient(180deg,var(--color-paint-000) 0,var(--color-paint-000) 80%,transparent 100%);mask-image:linear-gradient(180deg,var(--color-paint-000) 0,var(--color-paint-000) 80%,transparent 100%)}
.scene-stack .login-scene::after{inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,var(--color-surface-adaac190aa),var(--color-surface-5af9d4456a))}
.login-stage.has-scene.scene-stack .login-shell{width:min(480px,calc(100% - 24px));margin:-28px auto 0;background:var(--color-surface-fff);-webkit-backdrop-filter:none;backdrop-filter:none}

/* 세로 휴대폰: 장면을 넓히려고 카드를 조금 촘촘하게 */
@media (max-height:900px){
 .login-stage.has-scene.scene-stack .login-foot{display:none}
 .login-stage.has-scene.scene-stack .login-form{padding:20px 22px 18px}
 .login-stage.has-scene.scene-stack .login-story{padding:12px 18px}
 .login-stage.has-scene.scene-stack .login-form label{margin:12px 0 6px}
}
/* 짧은 화면(휴대폰 가로 등): 머리 띠는 빼고(간판이 배경에 보인다) 카드를 촘촘하게 */
.login-stage.has-scene.scene-short .login-story{display:none}
.login-stage.has-scene.scene-short .login-story{padding:9px 16px}
.login-stage.has-scene.scene-short .login-logo{width:88px;padding:5px 8px}
.login-stage.has-scene.scene-short .login-story h1{font-size:17px}
.login-stage.has-scene.scene-short .login-form{padding:12px 18px 12px}
.login-stage.has-scene.scene-short .login-form h2{font-size:18px;margin-bottom:2px}
.login-stage.has-scene.scene-short .login-form>p,.login-stage.has-scene.scene-short .login-foot{display:none}
.login-stage.has-scene.scene-short .login-form label{margin:8px 0 4px}
.login-stage.has-scene.scene-short .login-form input{min-height:40px}
.login-stage.has-scene.scene-short .login-form .btn{margin-top:12px;min-height:42px}
.login-stage.has-scene.scene-short .login-remember{min-height:28px;margin-top:8px}

@media (prefers-reduced-motion: reduce){.login-scene video{display:none}}