/* =====================================================
   대문 3D 라이브 단말기 — 검은 유리 패널이 아이보리 바탕 위에 떠 있는 느낌.
   마우스에 따라 기울고(3D), 뒤에서 금색 링이 돈다. 화면(screen)에만 적용.
   ===================================================== */
@media screen {

.gate-stage { position: relative; perspective: 1100px; width: 100%; max-width: 560px; margin-top: 46px; }
.gate-3d { position: relative; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(10deg); transition: transform .12s linear; will-change: transform; }

/* 뒤에서 도는 홀로그램 링 (깊이 -60px) */
.gate-orb { position: absolute; inset: -34px -30px -30px -30px; transform: translateZ(-70px); pointer-events: none; }
.gate-orb::before, .gate-orb::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed rgba(176,138,62,.55); }
.gate-orb::before { inset: 4%; animation: gOrb 26s linear infinite; }
.gate-orb::after { inset: 16%; border-style: solid; border-color: rgba(176,138,62,.22); animation: gOrb 40s linear infinite reverse; }
@keyframes gOrb { to { transform: rotate(360deg); } }

/* 단말기 패널 */
.gate-term { position: relative; transform: translateZ(40px); border-radius: 20px; padding: 14px 16px 12px; color: #F4F2EC;
  background: linear-gradient(160deg, #1A1810 0%, #0B0A08 70%); border: 1px solid #8E7448;
  box-shadow: 0 40px 70px rgba(70,55,20,.35), 0 0 0 1px rgba(230,204,146,.12) inset, 0 0 60px rgba(201,169,106,.16); overflow: hidden; }
.gate-term::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%);   /* 유리 반사 */
}
.gt-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #E6CC92; }
.gt-head em { font-style: normal; font-weight: 500; letter-spacing: 0; font-size: 10.5px; color: #8C8878; }
.gt-clock { margin-left: auto; font-variant-numeric: tabular-nums; color: #B7B4AB; letter-spacing: .04em; font-weight: 600; }
.gt-dot { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 10px #E5484D; animation: gtBlink 1.2s ease-in-out infinite; }
@keyframes gtBlink { 50% { opacity: .25; } }

.gt-ticker { margin: 10px -16px 6px; padding: 7px 0; overflow: hidden; border-block: 1px solid rgba(201,169,106,.22); background: rgba(201,169,106,.05); }
.gt-track { display: inline-flex; white-space: nowrap; animation: gtMarquee 38s linear infinite; }
.gt-tk { display: inline-flex; align-items: center; gap: 6px; padding: 0 20px; font-size: 12px; color: #D9D5C6; }
.gt-tk b { font-weight: 700; }
.gt-tk i { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; transition: border-color .4s; }
.gt-tk i.up { border-bottom: 8px solid #E5484D; }
.gt-tk i.dn { border-top: 8px solid #4F8FD6; }
@keyframes gtMarquee { to { transform: translateX(-50%); } }

#gateLive { display: block; width: 100%; height: auto; }
.gt-note { margin-top: 4px; font-size: 10px; color: #7F7B6D; text-align: right; }

.gate-note { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .gate-orb::before, .gate-orb::after, .gt-track, .gt-dot { animation: none; }
}
@media (max-width: 900px) { .gate-stage { display: none; } }
/* ══════ 대문 전체 분위기: 극적인 블랙·금색 (로그인 후 화면은 밝게 유지) ══════ */
#pwLockOverlay, #pwLockOverlay .gate, #pwLockOverlay > .cp-foot {
  --cp-ink:#F4F2EC; --cp-ink2:#C9C5B7; --cp-ink3:#8C8878; --cp-bg2:#0C0C0E; --cp-surface:#141310; --cp-raise:#1D1B15;
  --cp-line:#3A362A; --cp-hair:#24211A; --cp-gold-dim:#8E7448; --cp-goldtx:#E6CC92; --cp-goldbg:rgba(201,169,106,.10);
}
#pwLockOverlay.pw-lock-overlay {
  background:
    radial-gradient(1100px 700px at 18% 28%, rgba(201,169,106,.24), transparent 62%),
    radial-gradient(900px 620px at 88% 82%, rgba(79,143,214,.16), transparent 62%),
    linear-gradient(160deg, #0B0A08 0%, #17130B 48%, #06060A 100%) !important;
  backdrop-filter: none !important;
}
#pwLockOverlay .pw-lock-box {
  background: linear-gradient(160deg, rgba(30,27,18,.88), rgba(11,10,8,.92)) !important;
  border: 1px solid #8E7448 !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 70px rgba(201,169,106,.22) !important;
  backdrop-filter: blur(10px);
  animation: gfxBoxGlow 4.5s ease-in-out infinite alternate;
}
@keyframes gfxBoxGlow { to { box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 110px rgba(230,204,146,.34); } }
#pwLockOverlay .pw-lock-box .pw-input { background: #0C0C0E !important; }
#pwLockOverlay .gate-h { text-shadow: 0 0 40px rgba(201,169,106,.35); }

/* 배경 효과 층 */
.gate-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.gfx-beam { position: absolute; left: -30%; top: -45%; width: 160%; height: 190%;
  background: conic-gradient(from 0deg at 42% 50%, transparent 0deg, rgba(230,204,146,.20) 16deg, transparent 46deg, transparent 176deg, rgba(230,204,146,.12) 206deg, transparent 238deg);
  filter: blur(34px); animation: gfxSpin 46s linear infinite; }
@keyframes gfxSpin { to { transform: rotate(360deg); } }
.gfx-grid { position: absolute; left: -60%; right: -60%; bottom: -12%; height: 58%;
  background-image: linear-gradient(rgba(201,169,106,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(201,169,106,.42) 1px, transparent 1px);
  background-size: 64px 64px; transform: perspective(520px) rotateX(70deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 88%); mask-image: linear-gradient(to top, #000 0%, transparent 88%);
  animation: gfxGrid 2.6s linear infinite; }
@keyframes gfxGrid { to { background-position: 0 64px; } }
.gfx-p { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #E6CC92; box-shadow: 0 0 8px #E6CC92; opacity: 0; animation: gfxFloat linear infinite; }
@keyframes gfxFloat { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .95; } 100% { transform: translateY(-105vh); opacity: 0; } }
.gfx-ring { position: absolute; left: 50%; top: 46%; width: 92vmin; height: 92vmin; margin: -46vmin 0 0 -46vmin; border-radius: 50%;
  border: 1px solid rgba(201,169,106,.16); box-shadow: 0 0 0 6vmin rgba(201,169,106,.03), 0 0 0 12vmin rgba(201,169,106,.02); }
@media (prefers-reduced-motion: reduce) { .gfx-beam, .gfx-grid, .gfx-p, #pwLockOverlay .pw-lock-box { animation: none; } .gfx-p { opacity: .5; } }

}

/* ══════ 대문 왼쪽 아래: 변액을더하다 3D 로고 화면 (2026-10-02 상무님 지시, 기존 LIVE SIMULATION 대체)
   2026-10-02 상무님 지시 "영상 테두리 없애 배경과 자연스럽게": 테두리·상자 없이 배경에 그대로 얹고, 가장자리는 서서히 사라지게 한다. ══════ */
@media screen {
  .gate-logo3d { position: relative; width: 100%; aspect-ratio: 2 / 1; border: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible;
    -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 45%, transparent 100%);
            mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 45%, transparent 100%); }
  .gate-logo3d iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; pointer-events: none; color-scheme: normal; }
}