/* 입구 연출: 강판 두 장이 맞닿아 있고, 이음매로 빛이 새다가 갈라진다.
   장식 부품 없이 재질과 빛 하나로만 보여 준다. 닫힘 → lit(이음매 빛) → ajar(로그인 틈) → open(완전 열림) */
#door{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden;background:#07090c;
  --gap:min(calc(50vw - 6px),236px);--light:150,205,245;--slide:cubic-bezier(.66,0,.14,1)}
#door.ajar,#door.open{background:none}
#door .leaf{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:#1f2226 url(/steel.webp) center/cover;
  transition:transform 1.05s var(--slide)}
#door .left{left:0}
#door .right{right:0;background-position:right center}

/* 판 위로 흐르는 넓은 반사. 문이 움직일 때 판보다 늦게 따라와 금속처럼 보인다 */
#door .sheen{position:absolute;top:-10%;bottom:-10%;left:-30%;right:-30%;transition:transform 1.05s var(--slide);
  background:linear-gradient(104deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.05) 46%,rgba(255,255,255,.015) 54%,rgba(255,255,255,0) 68%)}
#door .right .sheen{transform:scaleX(-1)}
#door.ajar .left .sheen,#door.open .left .sheen{transform:translateX(9%)}
#door.ajar .right .sheen,#door.open .right .sheen{transform:scaleX(-1) translateX(9%)}

/* 틈에서 들어온 빛이 판 안쪽 가장자리에 맺힌다 */
#door .rim{position:absolute;top:0;bottom:0;width:min(34vw,300px);opacity:0;transition:opacity .9s ease-out .1s}
#door .left .rim{right:0;background:linear-gradient(270deg,rgba(var(--light),.17),rgba(var(--light),.035) 38%,rgba(var(--light),0))}
#door .right .rim{left:0;background:linear-gradient(90deg,rgba(var(--light),.17),rgba(var(--light),.035) 38%,rgba(var(--light),0))}
#door.ajar .rim,#door.open .rim{opacity:1}

/* 판 끝 절단면 */
#door .edge{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.2)}
#door .left .edge{right:0}
#door .right .edge{left:0}

/* 이음매 빛 */
#door .seam{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;opacity:0;transform:scaleY(.12);
  background:linear-gradient(180deg,rgba(var(--light),0),rgb(var(--light)) 32%,#fff 50%,rgb(var(--light)) 68%,rgba(var(--light),0));
  box-shadow:0 0 18px 2px rgba(var(--light),.55),0 0 70px 10px rgba(var(--light),.16);transition:opacity .42s ease-out,transform .55s cubic-bezier(.2,.7,.2,1)}
#door.lit .seam{opacity:1;transform:scaleY(1)}
#door.ajar .seam,#door.open .seam{opacity:0;transition:opacity .35s}

#door.ajar .left{transform:translateX(calc(var(--gap)*-1))}
#door.ajar .right{transform:translateX(var(--gap))}
#door.open .left{transform:translateX(-101%);transition-duration:1.1s}
#door.open .right{transform:translateX(101%);transition-duration:1.1s}
#door.still .leaf,#door.still .sheen,#door.still .rim,#door.still .seam{transition:none}

/* 틀린 비밀번호: 판이 잠깐 조여 든다 */
#door.deny .left{transition:transform .13s ease-out;transform:translateX(calc(var(--gap)*-1 + 10px))}
#door.deny .right{transition:transform .13s ease-out;transform:translateX(calc(var(--gap) - 10px))}

/* 문 뒤 공간과 로그인 칸 */
body.vault{background:#06080b radial-gradient(46% 62% at 50% 50%,rgba(40,92,130,.5),rgba(12,24,34,.5) 58%,rgba(6,8,11,0) 100%);color:#E9EEF3}
body.vault .login form{background:rgba(13,16,20,.72);border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 80px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.vault .login h1{font-size:17px;font-weight:600;letter-spacing:-.01em;color:#F1F4F7}
body.vault .login input{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);color:#F1F4F7}
body.vault .login input::placeholder{color:#7D8793}
body.vault .login input:focus{outline:1px solid rgba(var(--vault-light),.8);outline-offset:0;border-color:transparent}
body.vault .login input:-webkit-autofill{-webkit-text-fill-color:#F1F4F7;-webkit-box-shadow:0 0 0 40px #171b20 inset;caret-color:#F1F4F7}
body.vault .login button{background:#E9EEF3;color:#0D1014;font-weight:600}
body.vault .login button:hover{background:#fff}
body.vault .login .err{color:#FF8A8F}
body.vault .login form.leaving{opacity:0;transform:scale(.985);transition:opacity .2s,transform .2s}
body.vault{--vault-light:150,205,245}