/* doorlock gate — 도어락 모양 잠금 화면 */
html.dg-locked, html.dg-locked body { overflow: hidden !important; height: 100%; }

#doorgate {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 700px at 50% -10%, #24303d 0%, #141b23 55%, #0d1116 100%);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic",
               "Noto Sans KR", -apple-system, sans-serif;
  -webkit-user-select: none; user-select: none;
}
#doorgate.dg-hide { opacity: 0; pointer-events: none; transition: opacity .45s ease; }

.dg-wrap { text-align: center; padding: 24px; }

.dg-kicker {
  color: #7e8b99; font-size: 12px; letter-spacing: 5px; margin-bottom: 10px;
}
.dg-title {
  color: #e8eef5; font-size: 20px; font-weight: 800; letter-spacing: -.2px;
  margin-bottom: 4px;
}
.dg-sub { color: #8b98a6; font-size: 13px; margin-bottom: 26px; }

/* 도어락 본체 */
.dg-lock {
  width: 268px; margin: 0 auto; padding: 20px 20px 24px;
  border-radius: 26px;
  background: linear-gradient(160deg, #4a5764 0%, #2f3a45 26%, #232c35 62%, #1a2129 100%);
  box-shadow:
    0 26px 60px rgba(0,0,0,.62),
    0 2px 0 rgba(255,255,255,.10) inset,
    0 -2px 0 rgba(0,0,0,.45) inset;
  border: 1px solid #10161c;
}
.dg-brand {
  color: #9fb0c0; font-size: 10px; letter-spacing: 4px; font-weight: 700;
  margin-bottom: 12px;
}

/* LCD 창 */
.dg-screen {
  height: 52px; border-radius: 10px; margin-bottom: 16px;
  background: linear-gradient(180deg, #0a1410 0%, #0e1c16 100%);
  border: 1px solid #050b08;
  box-shadow: 0 2px 8px rgba(0,0,0,.55) inset;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.dg-dots {
  color: #5df2a5; font-size: 26px; letter-spacing: 12px; padding-left: 12px;
  font-family: "Nanum Gothic Coding", ui-monospace, Menlo, Consolas, monospace;
  text-shadow: 0 0 12px rgba(93,242,165,.55);
  min-height: 30px;
}
.dg-screen.dg-err { animation: dgshake .38s; }
.dg-screen.dg-err .dg-dots { color: #ff6b6b; text-shadow: 0 0 12px rgba(255,107,107,.6); }
.dg-screen.dg-ok .dg-dots { color: #7ef7b6; }
@keyframes dgshake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-4px); }
}

/* 키패드 */
.dg-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dg-pad button {
  height: 50px; border-radius: 13px; cursor: pointer;
  font-family: inherit; font-size: 19px; font-weight: 700; color: #dfe8f1;
  background: linear-gradient(180deg, #4d5a68 0%, #38434f 55%, #2b343d 100%);
  border: 1px solid #151c23;
  box-shadow: 0 3px 0 #10161c, 0 6px 12px rgba(0,0,0,.4),
              0 1px 0 rgba(255,255,255,.14) inset;
  transition: transform .06s ease, box-shadow .06s ease, filter .12s ease;
}
.dg-pad button:hover { filter: brightness(1.14); }
.dg-pad button:active, .dg-pad button.dg-press {
  transform: translateY(3px);
  box-shadow: 0 0 0 #10161c, 0 2px 6px rgba(0,0,0,.4),
              0 1px 0 rgba(255,255,255,.10) inset;
}
.dg-pad button.dg-fn { font-size: 17px; }

@media (max-width: 420px) {
  .dg-lock { width: 240px; }
  .dg-pad button { height: 46px; font-size: 18px; }
}