/* gate.css — 비밀번호 게이트(번개·그레인·파동·글리치·해제 연출) */
  /* ── PASSWORD GATE ── */
  #passwordGate {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background:
      radial-gradient(ellipse at 50% 30%, rgba(232,0,28,0.18) 0%, transparent 55%),
      radial-gradient(ellipse at 20% 80%, rgba(201,168,76,0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 75%, rgba(74,144,217,0.10) 0%, transparent 50%),
      #050505;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #passwordGate::before {
    content: '';
    position: absolute;
    inset: -10%;
    background-image:
      radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,0.5) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 30% 70%, rgba(255,255,255,0.4) 0%, transparent 100%),
      radial-gradient(2px 2px at 60% 15%, rgba(255,255,255,0.45) 0%, transparent 100%),
      radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.35) 0%, transparent 100%),
      radial-gradient(2px 2px at 90% 85%, rgba(255,255,255,0.4) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 45% 45%, rgba(255,255,255,0.3) 0%, transparent 100%),
      radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.35) 0%, transparent 100%),
      radial-gradient(2px 2px at 70% 35%, rgba(255,255,255,0.4) 0%, transparent 100%);
    background-size: 100% 100%;
    animation: gateStars 16s linear infinite;
    pointer-events: none;
    opacity: 0.6;
  }
  @keyframes gateStars {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(-30px) translateX(-20px); }
  }
  #passwordGate::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px,
      transparent 1px, transparent 3px
    );
    pointer-events: none;
  }
  #siteContent { display: none; }

  /* ── VIGNETTE ── */
  .gate-vignette {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, transparent 0%, transparent 38%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.85) 100%);
  }

  /* ── FILM GRAIN ── */
  .gate-grain {
    position: absolute;
    inset: -20%;
    z-index: 3;
    pointer-events: none;
    opacity: 0.05;
    transition: opacity 0.4s;
    mix-blend-mode: overlay;
    background-image:
      radial-gradient(1px 1px at 12% 8%, #fff 0%, transparent 100%),
      radial-gradient(1px 1px at 38% 22%, #fff 0%, transparent 100%),
      radial-gradient(1px 1px at 64% 5%, #fff 0%, transparent 100%),
      radial-gradient(1px 1px at 82% 30%, #fff 0%, transparent 100%),
      radial-gradient(1px 1px at 5% 55%, #fff 0%, transparent 100%),
      radial-gradient(1px 1px at 28% 70%, #fff 0%, transparent 100%),
      radial-gradient(1px 1px at 50% 48%, #fff 0%, transparent 100%),
      radial-gradient(1px 1px at 70% 62%, #fff 0%, transparent 100%),
      radial-gradient(1px 1px at 90% 80%, #fff 0%, transparent 100%),
      radial-gradient(1px 1px at 18% 92%, #fff 0%, transparent 100%),
      radial-gradient(1px 1px at 45% 88%, #fff 0%, transparent 100%),
      radial-gradient(1px 1px at 75% 95%, #fff 0%, transparent 100%);
    background-size: 180px 180px;
    animation: grainShift 0.6s steps(4) infinite;
  }
  @keyframes grainShift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-2%, 1%); }
    50%  { transform: translate(1%, -2%); }
    75%  { transform: translate(-1%, -1%); }
    100% { transform: translate(0, 0); }
  }

  /* ── PULSE WAVE (붉은 파동) ── */
  /* ── LIGHTNING ── */
  .lightning-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
    overflow: visible;
  }
  .lightning-bolt {
    fill: none;
    stroke: #FFD93D;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px #FFD93D) drop-shadow(0 0 14px #FFE680);
    opacity: 0;
  }
  .lightning-bolt.flash {
    animation: lightningFlash 0.45s ease-out forwards;
  }
  .lightning-bolt.branch {
    stroke-width: 1.3;
    opacity: 0;
  }
  .lightning-bolt.branch.flash {
    animation: lightningFlash 0.4s ease-out forwards;
  }
  @keyframes lightningFlash {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    14%  { opacity: 0.3; }
    20%  { opacity: 1; }
    30%  { opacity: 0.5; }
    45%  { opacity: 0.9; }
    100% { opacity: 0; }
  }

  .pulse-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pulse-ring {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid rgba(232,0,28,0.55);
    box-shadow: 0 0 18px 2px rgba(232,0,28,0.25);
    opacity: 0;
    animation: pulseExpand 4.5s cubic-bezier(0.2,0.6,0.4,1) infinite;
    transition: border-color 0.4s;
  }
  .pulse-ring.r2 { animation-delay: 1.5s; }
  .pulse-ring.r3 { animation-delay: 3s; }

  /* 경고 모드: 파동 빨라지고 강해짐, 그레인 증가 */
  #passwordGate.warning-mode .pulse-ring {
    border-color: rgba(255,0,0,0.85);
    box-shadow: 0 0 24px 4px rgba(255,0,0,0.4);
    animation-duration: 2.2s;
  }
  #passwordGate.warning-mode .gate-grain {
    opacity: 0.14;
  }
  #passwordGate.warning-mode .pulse-glow {
    background: radial-gradient(circle at 50% 50%, rgba(255,0,0,0.32) 0%, rgba(255,0,0,0.12) 35%, transparent 65%);
    animation-duration: 1.4s;
  }
  @keyframes pulseExpand {
    0% {
      width: 60px;
      height: 60px;
      opacity: 0.65;
      border-width: 3px;
    }
    70% {
      opacity: 0.18;
    }
    100% {
      width: 1400px;
      height: 1400px;
      opacity: 0;
      border-width: 0.5px;
    }
  }
  .pulse-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(232,0,28,0.22) 0%, rgba(232,0,28,0.08) 35%, transparent 65%);
    animation: pulseGlowBeat 2.8s ease-in-out infinite;
  }
  @keyframes pulseGlowBeat {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
  }

  /* 에너지 코어 (파동 발생원) */
  .pulse-core {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ff6a52 35%, rgba(232,0,28,0.9) 70%, transparent 100%);
    box-shadow: 0 0 14px 4px rgba(232,0,28,0.7), 0 0 30px 10px rgba(232,0,28,0.35);
    animation: coreBeat 1.4s ease-in-out infinite;
    z-index: 2;
  }
  @keyframes coreBeat {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.5); opacity: 1; }
  }
  /* 경고 모드 (오답 누적 시) */
  .pulse-core.warning {
    background: radial-gradient(circle, #fff 0%, #ff2b2b 30%, rgba(255,0,0,0.95) 70%, transparent 100%);
    box-shadow: 0 0 18px 5px rgba(255,0,0,0.85), 0 0 36px 12px rgba(255,0,0,0.4);
    animation: coreBeat 0.7s ease-in-out infinite;
  }

  .gate-box-scaler {
    display: inline-block;
  }
  .gate-box {
    position: relative;
    text-align: center;
    padding: 3rem 2.5rem;
    border: 1px solid rgba(201,168,76,0.35);
    border-radius: 14px;
    background: rgba(15,15,15,0.75);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    width: 320px;
    box-shadow: 0 0 60px rgba(232,0,28,0.15), 0 20px 60px rgba(0,0,0,0.6);
    z-index: 2;
  }
  .gate-box.entering {
    animation: gateBoxIn 0.7s cubic-bezier(0.16,1,0.3,1);
  }
  @keyframes gateBoxIn {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }
  .gate-box.shake { animation: gateShake 0.45s; }
  @keyframes gateShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(4px); }
  }

  /* 게이트 박스 전체 글리치 - RGB 색수차 콘텐츠 복제 방식 */
  .gate-box.box-glitching {
    animation: boxGlitchShift 2s steps(8, end);
  }
  .glitch-clone {
    display: none;
    pointer-events: none;
  }
  .gate-box.box-glitching .glitch-clone {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 14px;
    mix-blend-mode: screen;
  }
  .gate-box.box-glitching .glitch-clone .glitch-clone-inner {
    position: absolute;
    inset: 0;
    padding: 3rem 2.5rem;
    text-align: center;
  }
  .glitch-clone.cyan .glitch-clone-inner { color: #00e0ff; }
  .glitch-clone.magenta .glitch-clone-inner { color: #ff2bd6; }
  .glitch-clone.cyan {
    clip-path: inset(8% 0 72% 0);
    animation: glitchCloneA 2s steps(8, end);
  }
  .glitch-clone.magenta {
    clip-path: inset(58% 0 18% 0);
    animation: glitchCloneB 2s steps(8, end);
  }
  @keyframes boxGlitchShift {
    0%   { transform: translate(0, 0); }
    8%   { transform: translate(-3px, 1px); }
    16%  { transform: translate(2px, -1px); }
    24%  { transform: translate(0, 0); }
    38%  { transform: translate(-2px, 1px); }
    46%  { transform: translate(3px, -1px); }
    54%  { transform: translate(0, 0); }
    68%  { transform: translate(-3px, 1px); }
    76%  { transform: translate(2px, 0); }
    84%  { transform: translate(0, 0); }
    100% { transform: translate(0, 0); }
  }
  @keyframes glitchCloneA {
    0%, 100% { opacity: 0; transform: translateX(0); }
    5%  { opacity: 0.85; transform: translateX(-7px); }
    12% { opacity: 0.3; transform: translateX(4px); }
    20% { opacity: 0.8; transform: translateX(-4px); }
    28% { opacity: 0; transform: translateX(0); }
    42% { opacity: 0.7; transform: translateX(6px); }
    50% { opacity: 0.2; transform: translateX(-3px); }
    58% { opacity: 0; transform: translateX(0); }
    70% { opacity: 0.8; transform: translateX(-5px); }
    78% { opacity: 0; transform: translateX(0); }
    90% { opacity: 0.6; transform: translateX(5px); }
    96% { opacity: 0; transform: translateX(0); }
  }
  @keyframes glitchCloneB {
    0%, 100% { opacity: 0; transform: translateX(0); }
    9%  { opacity: 0.8; transform: translateX(6px); }
    18% { opacity: 0; transform: translateX(-5px); }
    32% { opacity: 0.75; transform: translateX(7px); }
    40% { opacity: 0; transform: translateX(0); }
    55% { opacity: 0.65; transform: translateX(-6px); }
    63% { opacity: 0; transform: translateX(0); }
    74% { opacity: 0.7; transform: translateX(4px); }
    82% { opacity: 0; transform: translateX(0); }
    93% { opacity: 0.55; transform: translateX(-4px); }
    98% { opacity: 0; transform: translateX(0); }
  }

  /* 글리치 스파크 */
  .glitch-spark {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
      0 0 6px 2px rgba(255,255,255,0.95),
      0 0 14px 4px rgba(120,200,255,0.7),
      calc(var(--sp-x, 40px) * -0.4) calc(var(--sp-y, 40px) * -0.4) 8px 1px rgba(120,200,255,0.35);
    pointer-events: none;
    z-index: 6;
    animation: sparkFly var(--sp-dur, 0.55s) cubic-bezier(0.15,0.7,0.3,1) forwards;
  }
  @keyframes sparkFly {
    0% {
      transform: translate(0, 0) scale(1.4);
      opacity: 1;
    }
    8% {
      opacity: 0.3;
    }
    16% {
      opacity: 1;
    }
    55% {
      transform: translate(calc(var(--sp-x, 40px) * 0.6), calc(var(--sp-y, 40px) * 0.6 - 6px)) scale(0.8);
      opacity: 0.9;
    }
    100% {
      transform: translate(var(--sp-x, 40px), var(--sp-y, 40px)) scale(0.1);
      opacity: 0;
    }
  }

  .gate-emblem {
    position: relative;
    color: var(--red);
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 0 12px rgba(232,0,28,0.5));
  }
  .emblem-clone {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -17px;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .emblem-clone.cyan { color: #00e0ff; }
  .emblem-clone.magenta { color: #ff2bd6; }
  #gateEmblem.glitching .emblem-clone.cyan {
    animation: glitchCloneA 2s steps(8, end);
  }
  #gateEmblem.glitching .emblem-clone.magenta {
    animation: glitchCloneB 2s steps(8, end);
  }
  .gate-logo {
    position: relative;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.7rem;
    letter-spacing: 0.18em;
    color: var(--red);
    margin-bottom: 0.4rem;
    text-shadow: 0 0 20px rgba(232,0,28,0.4);
  }
  .gate-logo span { color: var(--text); }
  .gate-logo.glitching::before,
  .gate-logo.glitching::after {
    content: attr(data-text);
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    overflow: hidden;
    color: var(--red);
  }
  .gate-logo.glitching::before {
    color: #00e0ff;
    transform: translate(-3px, -1px);
    clip-path: polygon(0 10%, 100% 10%, 100% 45%, 0 45%);
    opacity: 0.85;
  }
  .gate-logo.glitching::after {
    color: #ff2bd6;
    transform: translate(3px, 1px);
    clip-path: polygon(0 55%, 100% 55%, 100% 90%, 0 90%);
    opacity: 0.85;
  }
  .gate-sub {
    font-size: 0.62rem;
    letter-spacing: 0.25em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 1.75rem;
    opacity: 0.85;
  }
  .gate-label {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: var(--muted);
    margin-bottom: 1.1rem;
    text-transform: uppercase;
  }

  /* 4자리 동그라미 인디케이터 */
  .gate-dots {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    margin-bottom: 1.6rem;
    padding: 0.5rem;
    border-radius: 10px;
    transition: box-shadow 0.3s, background 0.3s;
  }
  .gate-dots.focused {
    box-shadow: 0 0 0 1px rgba(201,168,76,0.4), 0 0 22px rgba(201,168,76,0.35);
    background: rgba(201,168,76,0.04);
  }

  /* 입력 시 미세 화면 펄스 */
  .gate-box.tap-pulse {
    animation: tapPulse 0.18s ease-out;
  }
  @keyframes tapPulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.012); }
    100% { transform: scale(1); }
  }
  .gate-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: transparent;
    transition: all 0.2s;
    position: relative;
  }
  .gate-dot.filled {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(201,168,76,0.6);
    animation: dotPop 0.25s;
  }
  /* 빛 트레일: 점이 채워질 때 옆으로 흐르는 잔상 */
  .gate-dot.filled::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,0.9) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(1);
    animation: dotTrail 0.45s ease-out;
    pointer-events: none;
  }
  @keyframes dotTrail {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
  }
  @keyframes dotPop {
    0% { transform: scale(0.5); }
    60% { transform: scale(1.25); }
    100% { transform: scale(1); }
  }
  .gate-dots.error .gate-dot.filled {
    background: var(--red);
    border-color: var(--red);
    box-shadow: 0 0 12px rgba(232,0,28,0.6);
  }

  #gateInput {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .gate-btn {
    width: 100%;
    padding: 0.7rem;
    background: linear-gradient(135deg, var(--red), #b8001a);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(232,0,28,0.3);
  }
  .gate-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,0,28,0.45); }
  .gate-btn:active { transform: translateY(0); }

  .gate-error {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.6rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--red);
    letter-spacing: 0.05em;
    opacity: 0;
    pointer-events: none;
  }
  .gate-error.show {
    animation: gateErrorFade 1.5s ease;
  }
  @keyframes gateErrorFade {
    0% { opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; }
  }

  /* VERIFIED 화면 */
  .gate-success {
    display: none;
    position: absolute;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(15,15,15,0.95);
    border-radius: 14px;
    z-index: 10;
  }
  .gate-success.show {
    display: flex;
    animation: successFadeIn 0.3s;
  }
  @keyframes successFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* 포털 통과: 붉은 플래시 */
  .gate-flash {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, #fff 0%, #ff3b1f 25%, var(--red) 55%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 3000;
  }
  .gate-flash.fire {
    animation: portalFlash 0.7s ease-out forwards;
  }
  @keyframes portalFlash {
    0% { opacity: 0; }
    12% { opacity: 1; }
    100% { opacity: 0; }
  }

  /* 줌인 흡입: 게이트 전체가 빨려들어가는 느낌 */
  #passwordGate.sucking {
    animation: gateSuckIn 0.45s ease-in forwards;
  }
  @keyframes gateSuckIn {
    0% { transform: scale(1); filter: blur(0); opacity: 1; }
    100% { transform: scale(2.4); filter: blur(6px); opacity: 0; }
  }

  /* 처리 중 로딩 점 */
  .gate-loading-dots {
    display: none;
    gap: 0.35rem;
  }
  .gate-loading-dots.show { display: flex; }
  .gate-loading-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    animation: loadingBlink 1s infinite ease-in-out both;
  }
  .gate-loading-dots span:nth-child(1) { animation-delay: 0s; }
  .gate-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
  .gate-loading-dots span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes loadingBlink {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.1); }
  }
  .gate-success-icon {
    display: flex;
    justify-content: center;
    color: #4ADE80;
    margin-bottom: 0.75rem;
    animation: successPop 0.5s cubic-bezier(0.34,1.56,0.64,1);
    filter: drop-shadow(0 0 16px rgba(74,222,128,0.5));
  }
  @keyframes successPop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
  }
  .gate-success-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.15em;
    color: #4ADE80;
  }