/* 로그인 화면 — 그룹 수소 마크 3D (2026-10-07, 시안 B2)
   사이트 공통 style.css 의 .card·.login-card 등과 겹치지 않게 모든 이름에 l3- 를 붙인다 */
body.l3 { margin: 0; height: 100vh; overflow: hidden; background: #040a18; color: #eef3ff;
  font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; }
#l3Scene { position: fixed; inset: 0; display: block; width: 100%; height: 100%; }
.l3-glow { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 36% 50%, rgba(26, 123, 224, .16), transparent 50%),
              radial-gradient(circle at 36% 50%, rgba(255, 42, 42, .06), transparent 30%); }
/* 3D 가 안 되는 PC: 그라데이션 배경만 */
body.l3.no3d { background: radial-gradient(circle at 36% 50%, #0d2a55 0%, #040a18 60%); }

.l3-card { position: fixed; right: 7vw; top: 50%; transform: translateY(-50%); width: 360px; padding: 34px 32px 26px; border-radius: 20px; z-index: 5;
  background: linear-gradient(160deg, rgba(20, 50, 100, .5), rgba(6, 12, 28, .7)); border: 1px solid rgba(26, 123, 224, .35);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 0 60px rgba(26, 123, 224, .18), 0 30px 80px rgba(0, 0, 0, .5); }
.l3-card::before { content: ""; position: absolute; left: 32px; right: 32px; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #ff2a2a, #ff7a7a); }
.l3-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.l3-mark svg { width: 34px; height: 34px; flex: none; }
.l3-card h1 { margin: 0; font-size: 25px; color: #fff; }
.l3-sub { margin: 8px 0 22px; color: #8a98b8; font-size: 13px; line-height: 1.5; }
.l3-card label { display: block; font-size: 12.5px; color: #8a98b8; margin-bottom: 14px; }
.l3-card input[name=username], .l3-card input[name=password] { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font: inherit; font-size: 15px;
  color: #fff; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; outline: none; transition: .2s; box-sizing: border-box; }
.l3-card input:focus { border-color: #1a7be0; box-shadow: 0 0 0 3px rgba(26, 123, 224, .28); }
.l3-card input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #0d1f3d inset; caret-color: #fff; }
.l3-card label.l3-remember { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 4px 0 18px; }
.l3-card label.l3-remember input { width: 15px; height: 15px; margin: 0; }
.l3-card button { width: 100%; padding: 13px; font: inherit; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer; border: 0; border-radius: 12px;
  background: linear-gradient(90deg, #0d5fc0, #1a7be0 55%, #3ea6ff); box-shadow: 0 8px 22px rgba(26, 123, 224, .35); transition: transform .15s, filter .15s; }
.l3-card button:hover { transform: translateY(-1px); filter: brightness(1.1); }
.l3-card button:disabled { filter: grayscale(.3) brightness(.9); cursor: wait; }
.l3-foot { margin: 16px 0 0; font-size: 12px; color: #8a98b8; text-align: center; line-height: 1.6; }
.l3-card .flash { margin: 0 0 14px; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
.l3-card .flash-error { background: rgba(255, 42, 42, .14); color: #ffb3b3; border: 1px solid rgba(255, 90, 90, .4); }
.l3-card .flash-ok { background: rgba(46, 158, 91, .16); color: #b6f0cb; border: 1px solid rgba(46, 158, 91, .4); }

/* 비밀번호가 틀렸을 때 흔들기 (가운데 정렬 transform 을 유지한 채) */
.l3-card.l3-shake { animation: l3shake .45s ease; }
@keyframes l3shake {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  20% { transform: translateY(-50%) translateX(-10px); } 40% { transform: translateY(-50%) translateX(9px); }
  60% { transform: translateY(-50%) translateX(-6px); } 80% { transform: translateY(-50%) translateX(4px); }
}

/* 로그인 성공: 화면 가운데로 이동 → 문처럼 반으로 갈라짐 */
.l3-card.l3-move { transition: left .65s cubic-bezier(.6, 0, .2, 1), top .65s cubic-bezier(.6, 0, .2, 1); }
.l3-door { position: fixed; z-index: 20; margin: 0 !important; pointer-events: none;
  transition: transform 1.2s cubic-bezier(.65, 0, .25, 1), opacity 1s ease .2s;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #0b1a33 !important;
  will-change: transform, opacity; backface-visibility: hidden; }
.l3-door-left { clip-path: inset(0 50% 0 0); transform-origin: left center; }
.l3-door-right { clip-path: inset(0 0 0 50%); transform-origin: right center; }
body.l3-opening .l3-door-left { transform: perspective(1400px) translateX(-50vw) rotateY(30deg) scale(1.8); opacity: 0; }
body.l3-opening .l3-door-right { transform: perspective(1400px) translateX(50vw) rotateY(-30deg) scale(1.8); opacity: 0; }
body.l3::after { content: ""; position: fixed; inset: 0; z-index: 15; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(120, 190, 255, .9) 0%, rgba(26, 123, 224, .25) 35%, rgba(4, 10, 24, 0) 65%);
  transition: opacity .9s ease .45s; }
body.l3-opening::after { opacity: 1; }
/* 마지막: 메인 화면 배경색(#f3f5f9)으로 화면을 완전히 덮은 뒤 넘어간다 — 3D 마크 잔상이 남지 않게 */
.l3-white { position: fixed; inset: 0; z-index: 25; pointer-events: none; opacity: 0; background: #f3f5f9;
  transition: opacity .45s ease-in .5s; }      /* 갈라진 뒤 0.95초에 완전히 덮임 */
body.l3-opening .l3-white { opacity: 1; }

@media (max-width: 760px) {
  .l3-card { right: 50%; transform: translate(50%, -50%); width: calc(100% - 32px); padding: 28px 22px 22px; }
  .l3-card.l3-shake { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .l3-door, body.l3::after, .l3-card.l3-move { transition: none; }
  .l3-card.l3-shake { animation: none; }
}