/* STEP113-3-2-24 업로드 반응형 사계절 로그인 실제 ERP 연결
   Source UI: DAERYUNG_ERP_responsive_login_final.html
   기존 ERP 인증/회원가입/승인 로직은 auth_v32.js를 그대로 사용합니다. */
.d32-auth-overlay.d32-cinematic-mode{
  padding:0!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  background:#0c1117!important;
  overflow:hidden!important;
}
.d32-auth-overlay.d32-cinematic-mode.show{display:flex!important;}

.d32-cinematic-shell{
  position:relative;
  width:100%;
  height:100%;
  min-height:100dvh;
  overflow:hidden;
  color:#fff;
  font-family:Arial,"Malgun Gothic",sans-serif;
  background:var(--page-bg,#0c1117);
  transition:background .45s ease;
  --accent1:#f2c9a2;
  --accent2:#e2725b;
  --tint:226,114,91;
  --page-bg:#241813;
  --card-border:rgba(255,219,187,.28);
  --season-image:none;
  --door-image:none;
  --ease:cubic-bezier(.22,.78,.18,1);
}
.d32-cinematic-shell,
.d32-cinematic-shell *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
.d32-cinematic-shell button,
.d32-cinematic-shell input{font:inherit;}

.d32-cinematic-shell.spring{--accent1:#f7d6e4;--accent2:#ff8e99;--tint:255,170,196;--page-bg:#1a1621;--card-border:rgba(255,221,232,.28)}
.d32-cinematic-shell.summer{--accent1:#a9d8ff;--accent2:#4ca8ff;--tint:95,174,255;--page-bg:#0f1a28;--card-border:rgba(184,225,255,.28)}
.d32-cinematic-shell.autumn{--accent1:#f2c9a2;--accent2:#e2725b;--tint:226,114,91;--page-bg:#241813;--card-border:rgba(255,219,187,.28)}
.d32-cinematic-shell.winter{--accent1:#d9e9ff;--accent2:#8bbcff;--tint:155,200,255;--page-bg:#0f1724;--card-border:rgba(219,235,255,.28)}

.d32-cinematic-shell .d32-responsive-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--page-bg);
  cursor:pointer;
  isolation:isolate;
}
.d32-cinematic-shell .cinema-bg{
  position:absolute;
  inset:-2%;
  z-index:0;
  background-image:var(--season-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.055);
  filter:brightness(.67) saturate(.92) blur(1.25px);
  transition:transform 1.9s var(--ease),filter 1.5s ease;
}
.d32-cinematic-shell .cinema-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.06) 45%,rgba(0,0,0,.28)),
    radial-gradient(circle at 50% 76%,rgba(var(--tint),.16),transparent 45%);
  opacity:.72;
  transition:opacity 1.2s ease,background .45s ease;
}
.d32-cinematic-shell .cinema-doors{
  position:absolute;
  inset:0;
  z-index:5;
  filter:blur(2.4px) brightness(.76);
  transform:scale(1.01);
  transition:filter 1s ease,transform 1.1s var(--ease);
  pointer-events:none;
}
.d32-cinematic-shell .cinema-half{
  position:absolute;
  top:0;
  width:50.2%;
  height:100%;
  background-image:var(--door-image);
  background-size:200% 100%;
  background-repeat:no-repeat;
  transition:transform 1.55s var(--ease);
}
.d32-cinematic-shell .cinema-half.left{left:0;background-position:left center;}
.d32-cinematic-shell .cinema-half.right{right:0;background-position:right center;}
.d32-cinematic-shell .cinema-seam{
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:100%;
  transform:translateX(-50%);
  background:linear-gradient(transparent,rgba(255,230,190,.9),#fff,rgba(255,220,170,.8),transparent);
  box-shadow:0 0 14px rgba(255,225,180,.45);
  opacity:.15;
  transition:opacity .6s ease;
}
.d32-cinematic-shell .d32-responsive-stage.focus .cinema-doors{
  filter:blur(0) brightness(1.03) contrast(1.05);
  transform:scale(1.045);
}
.d32-cinematic-shell .d32-responsive-stage.focus .cinema-seam{opacity:.95;}
.d32-cinematic-shell .d32-responsive-stage.open .cinema-half.left{transform:translateX(-102%);}
.d32-cinematic-shell .d32-responsive-stage.open .cinema-half.right{transform:translateX(102%);}
.d32-cinematic-shell .d32-responsive-stage.open .cinema-seam{opacity:0;}
.d32-cinematic-shell .d32-responsive-stage.open .cinema-bg{
  transform:scale(1);
  filter:brightness(1) saturate(1.03) blur(0);
}
.d32-cinematic-shell .d32-responsive-stage.open .cinema-shade{opacity:.16;}

.d32-cinematic-shell .auth-panel{
  position:absolute;
  z-index:10;
  left:50%;
  top:50%;
  width:min(430px,88vw);
  cursor:auto;
  transform:translate(-50%,calc(-50% + 10px)) scale(.994);
  opacity:0;
  pointer-events:none;
  transition:opacity 1.05s ease,transform 1.15s var(--ease);
}
.d32-cinematic-shell .d32-responsive-stage.ready .auth-panel{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  pointer-events:auto;
}
.d32-cinematic-shell .login-card{
  width:100%;
  padding:24px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(var(--tint),.045),rgba(8,12,15,.20));
  box-shadow:0 14px 46px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(0) saturate(1);
  -webkit-backdrop-filter:blur(0) saturate(1);
  transition:background 1.45s ease,border-color 1.45s ease,box-shadow 1.45s ease,backdrop-filter 1.45s ease,-webkit-backdrop-filter 1.45s ease,opacity .35s ease,transform .42s ease;
}
.d32-cinematic-shell .d32-responsive-stage.soft-blur .login-card{
  border-color:var(--card-border);
  background:linear-gradient(145deg,rgba(var(--tint),.13),rgba(8,12,15,.55));
  box-shadow:0 20px 60px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(15px) saturate(1.08);
  -webkit-backdrop-filter:blur(15px) saturate(1.08);
}
.d32-cinematic-shell .login-brand{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:18px;
}
.d32-cinematic-shell .login-logo{
  width:50px;
  height:50px;
  border-radius:14px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-weight:800;
  font-size:25px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.22);
}
.d32-cinematic-shell .login-small{font-size:9px;letter-spacing:.18em;opacity:.68;margin-bottom:5px;}
.d32-cinematic-shell .login-title{font-size:26px;font-weight:800;line-height:1.12;}
.d32-cinematic-shell .login-sub{font-size:12px;letter-spacing:.05em;opacity:.65;margin-top:5px;}
.d32-cinematic-shell .login-label{display:block;font-size:12px;opacity:.82;margin:10px 0 6px;}
.d32-cinematic-shell .login-input{
  width:100%;
  height:48px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;
  padding:0 13px;
  outline:none;
  font-size:14px;
}
.d32-cinematic-shell .login-input::placeholder{color:rgba(255,255,255,.42);}
.d32-cinematic-shell .login-input:focus{border-color:rgba(255,255,255,.40);box-shadow:0 0 0 3px rgba(var(--tint),.13);}
.d32-cinematic-shell .login-btn{
  width:100%;
  height:50px;
  margin-top:14px;
  border:0;
  border-radius:13px;
  font-weight:800;
  color:#201612;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  box-shadow:0 10px 24px rgba(var(--tint),.34);
  cursor:pointer;
}
.d32-cinematic-shell .signup{
  display:block;
  text-align:center;
  margin-top:11px;
  font-size:11px;
  color:rgba(255,255,255,.82);
  text-decoration:none;
}
.d32-cinematic-shell .signup:hover{text-decoration:underline;}
.d32-cinematic-shell .login-status{
  min-height:16px;
  margin-top:8px;
  text-align:center;
  font-size:11px;
  color:rgba(255,255,255,.70);
}

/* 로그인 성공 후 ERP 화면으로 자연스럽게 전환 */
.d32-cinematic-shell .d32-responsive-stage.login-success .login-card{
  opacity:0;
  transform:translateY(-12px) scale(.985);
}
.d32-cinematic-shell .d32-responsive-stage.login-success .cinema-bg{
  transform:scale(1.02);
  filter:brightness(1.04) saturate(1.04) blur(0);
}
.d32-cinematic-shell .d32-responsive-stage.login-success .cinema-doors{opacity:.18;transition:opacity .38s ease;}

@media (max-width:760px),(orientation:portrait){
  .d32-cinematic-shell .auth-panel{
    top:auto;
    bottom:max(20px,env(safe-area-inset-bottom));
    width:min(90vw,360px);
    transform:translate(-50%,10px) scale(.994);
  }
  .d32-cinematic-shell .d32-responsive-stage.ready .auth-panel{transform:translate(-50%,0) scale(1);}
  .d32-cinematic-shell .login-card{padding:18px;border-radius:20px;}
  .d32-cinematic-shell .login-brand{gap:12px;margin-bottom:14px;}
  .d32-cinematic-shell .login-logo{width:42px;height:42px;border-radius:12px;font-size:22px;}
  .d32-cinematic-shell .login-title{font-size:21px;}
  .d32-cinematic-shell .login-small{font-size:9px;}
  .d32-cinematic-shell .login-sub{font-size:11px;}
  .d32-cinematic-shell .login-input{height:43px;}
  .d32-cinematic-shell .login-btn{height:44px;}
}
@media (max-height:680px) and (max-width:760px){
  .d32-cinematic-shell .auth-panel{bottom:10px;width:min(91vw,340px);}
  .d32-cinematic-shell .login-card{padding:14px;}
  .d32-cinematic-shell .login-brand{margin-bottom:10px;}
  .d32-cinematic-shell .login-input{height:39px;}
  .d32-cinematic-shell .login-btn{height:40px;margin-top:10px;}
}
@media (prefers-reduced-motion:reduce){
  .d32-cinematic-shell *,
  .d32-cinematic-shell *::before,
  .d32-cinematic-shell *::after{animation:none!important;transition:none!important;}
}

/* =========================================================
   DAERYUNG ERP v1.0.6 MOBILE LOGIN HOTFIX
   - 모바일 로그인 카드 전체를 위로 이동
   - 작은 화면에서 회원가입 링크 잘림 방지
   ========================================================= */
@media (max-width:760px),(orientation:portrait){
  .login{
    bottom:max(64px,calc(env(safe-area-inset-bottom) + 52px)) !important;
  }
}

@media (max-height:740px) and (max-width:760px){
  .login{
    bottom:max(36px,calc(env(safe-area-inset-bottom) + 26px)) !important;
    width:min(91vw,340px) !important;
  }

  .card{
    padding:12px 14px !important;
  }

  .brand{
    margin-bottom:8px !important;
  }

  input{
    height:38px !important;
  }

  .loginbtn{
    height:39px !important;
    margin-top:8px !important;
  }

  .signup{
    margin-top:8px !important;
  }
}

/* =========================================================
   DAERYUNG ERP v1.0.7 MOBILE LOGIN FIX
   - 실제 로그인 선택자 기준 보정
   - 모바일 브라우저 하단에 회원가입이 걸리는 문제 수정
   ========================================================= */
@media (max-width:760px),(orientation:portrait){
  .d32-cinematic-shell .auth-panel{
    bottom:max(76px,calc(env(safe-area-inset-bottom) + 64px)) !important;
  }
}

@media (max-height:740px) and (max-width:760px){
  .d32-cinematic-shell .auth-panel{
    bottom:max(44px,calc(env(safe-area-inset-bottom) + 34px)) !important;
    width:min(91vw,340px) !important;
  }

  .d32-cinematic-shell .login-card{
    padding:12px 14px !important;
  }

  .d32-cinematic-shell .login-brand{
    margin-bottom:8px !important;
  }

  .d32-cinematic-shell .login-input{
    height:38px !important;
  }

  .d32-cinematic-shell .login-btn{
    height:39px !important;
    margin-top:8px !important;
  }

  .d32-cinematic-shell .signup{
    margin-top:8px !important;
  }
}