/* B안 게임 선반 흐름. 표지는 한 열에만 넣고 같은 묶음 두 개로 이음을 숨긴다. */
@font-face { font-family:'Galmuri11 Opening'; src:url('../assets/fonts/galmuri11-bold-opening-df27197d43ed.woff2') format('woff2'); font-weight:700; font-display:block; }
body.opening-page { margin: 0; overflow: hidden; background: #07080c; font-family: 'Galmuri11 Opening', sans-serif; line-height: normal; -webkit-font-smoothing: antialiased; }
.op { position: relative; width: 100vw; height: 100dvh; max-width: none; padding: 0; overflow: hidden; color: #fff; cursor: pointer; }
.op-wall { position: absolute; left: 50%; top: 50%; width: 190vmax; height: 100vmax;
  transform: translate(-50%, -50%) perspective(1600px) rotateX(22deg) rotateZ(-14deg);
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 1.1vmax; pointer-events: none; }
.op-col { display: flex; flex-direction: column; align-self: start; min-width: 0; animation: op-up 110s linear infinite; will-change: transform; }
.op-col:nth-child(even) { animation-name: op-down; }
.op-loop { display: grid; gap: 1.1vmax; padding-bottom: 1.1vmax; }
.op-col img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: .8vmax; display: block; box-shadow: 0 1vmax 2vmax rgba(0,0,0,.45); }
.op:not([data-ready]) .op-col, .op.go .op-col { animation-play-state: paused; }
@keyframes op-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes op-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.op-veil { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 52% 48% at 50% 50%, rgba(7,8,12,.92) 0%, rgba(7,8,12,.74) 45%, rgba(7,8,12,.2) 100%),
  linear-gradient(180deg, rgba(7,8,12,.7) 0%, transparent 22%, transparent 78%, rgba(7,8,12,.85) 100%); }
.op-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center;
  gap: clamp(12px, 1.8vh, 22px); text-align: center; width: max-content; max-width: 92vw; }
.op-chip { margin: 0; padding: 8px 18px; border-radius: 0; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px); font-size: clamp(14px, 1.1vw, 17px); font-weight: 700; letter-spacing: .06em; color: rgba(255,255,255,.9); }
.op-title { margin: 0; font: 700 clamp(70px, 10vw, 190px)/1 'Galmuri11 Opening', sans-serif; white-space: nowrap; color: #f2ecdf;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.5)); }
.op-title span { color: #e8590c; }
.op-enter { margin-top: clamp(6px, 1.4vh, 16px); min-height: 62px; padding: 12px 32px; border: 0; border-radius: 0;
  font: 700 clamp(22px, 1.8vw, 32px) 'Galmuri11 Opening', sans-serif; color: #f2ecdf; cursor: pointer; white-space: nowrap;
  background: none; box-shadow: none; text-shadow: 3px 3px 0 #000;
  display: inline-flex; align-items: center; gap: 12px; animation: op-enter-pulse 1.8s ease-in-out infinite; }
@keyframes op-enter-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.op-enter:hover, .op-enter:focus { animation: none; opacity: 1; }
.op-enter:focus-visible { outline: 4px solid var(--gf-cream); outline-offset: 5px; }
.op-enter-arrow { color: #e8590c; font-size: .8em; transition: transform .18s; }
.op-enter:hover .op-enter-arrow, .op-enter:focus .op-enter-arrow { transform: translateX(3px); }
.op-lab { position: absolute; right: clamp(14px, 2.2vw, 32px); bottom: clamp(12px, 2vw, 28px); margin: 0; font-size: clamp(18px, 1.4vw, 21px); }
.op-lab.labmark i { color: var(--gf-cream); }
.op-flash { position: absolute; inset: 0; background: var(--gf-cream); opacity: 0; pointer-events: none; }
.op-mid, .op-lab { transition: opacity .35s, filter .35s; }
.op-wall { transition: transform 1.3s cubic-bezier(.6,0,.2,1), filter 1.3s; }
.op.go .op-mid, .op.go .op-lab { opacity: 0; filter: blur(6px); }
.op.go .op-wall { transform: translate(-50%, -50%) perspective(1600px) rotateX(0) rotateZ(0) scale(1.4); filter: brightness(1.3); }
.op.go .op-flash { animation: op-flash 1.5s ease-in forwards; }
@keyframes op-flash { 0%, 35% { opacity: 0; } 100% { opacity: 1; } }
@media (max-width: 480px) {
  .op-title { font-size: 15.5vw; }
}
@media (max-aspect-ratio: 3/4) {
  .op-wall { width: 300vmax; height: 156vmax; }
  .op-veil { background:
    radial-gradient(ellipse 90% 34% at 50% 50%, rgba(7,8,12,.92) 0%, rgba(7,8,12,.7) 55%, rgba(7,8,12,.15) 100%),
    linear-gradient(180deg, rgba(7,8,12,.6) 0%, transparent 22%, transparent 78%, rgba(7,8,12,.85) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .op .op-col, .op.go .op-flash, .op-enter { animation: none; }
  .op-enter { opacity: 1; }
  .op-wall, .op-mid, .op-lab, .op-enter-arrow { transition: none; }
}