:root {
  --gp-bg: #07080d;
  --gp-ink: #f3f5fa;
  --gp-ink-2: #9aa3b2;
  --gp-pink: #ff5fae;
  --gp-violet: #8b6cff;
  --gp-cyan: #39c6ff;
  --gp-amber: #ffc24b;
  --gp-grad: linear-gradient(100deg, var(--gp-pink), var(--gp-violet) 55%, var(--gp-cyan));
  --gp-num: "Chakra Petch", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--gp-bg); color: var(--gp-ink); }
body { font-family: "Noto Sans KR", "Pretendard", system-ui, sans-serif; }

.gp { max-width: 1280px; margin: 0 auto; padding: 16px; }
.gp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 4px 0 12px; word-break: keep-all; }
.gp-head h1 { margin: 0; font-size: 20px; font-weight: 700; }
.gp-head a { color: var(--gp-ink-2); font-size: 14px; white-space: nowrap; }   
.gp-head h1 { margin-right: auto; }                 
.gp-head [data-gp=other] { color: var(--gp-cyan); }

.gp-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px;
  background: #000; box-shadow: 0 10px 40px rgb(0 0 0 / .45); }

.gp-end { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 16px; background: rgb(7 8 13 / .72); backdrop-filter: blur(6px); text-align: center; }
.gp-end[hidden] { display: none; }
.gp-end-go { display: inline-block; padding: clamp(12px, 2.2vw, 22px) clamp(22px, 4vw, 48px); border-radius: 999px;
  background: var(--gp-grad); color: #fff; font-weight: 800; font-size: clamp(18px, 3.2vw, 34px); text-decoration: none;
  box-shadow: 0 12px 40px rgb(255 95 174 / .35); word-break: keep-all;
  text-shadow: 0 1px 8px rgb(0 0 0 / .45); }                     
.gp-end-go::after { content: " →"; }
.gp-end-go:hover, .gp-end-go:focus-visible { filter: brightness(1.12); outline: none; }
.gp-end-sub { color: var(--gp-ink-2); font-size: clamp(13px, 1.6vw, 17px); word-break: keep-all; }
.gp-end-again { background: none; border: 1px solid rgb(255 255 255 / .25); color: var(--gp-ink); border-radius: 999px;
  padding: 8px 18px; font: inherit; font-size: 14px; cursor: pointer; }
.gp-end-again:hover { border-color: rgb(255 255 255 / .6); }
.gp-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden;
  transform-origin: 0 0; background: var(--gp-bg); }


.gp-bg { position: absolute; inset: 0;
  background:
    radial-gradient(38% 48% at var(--bx1, 30%) var(--by1, 35%), rgb(255 95 174 / .26), transparent 70%),
    radial-gradient(42% 52% at var(--bx2, 70%) var(--by2, 62%), rgb(57 198 255 / .2), transparent 70%),
    linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px) 0 var(--gy, 0) / 64px 64px,
    linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px) var(--gx, 0) 0 / 64px 64px,
    var(--gp-bg); }


.gp-win { position: absolute; left: 96px; top: 34px; width: 1728px; height: 972px; overflow: hidden;
  border-radius: 16px; background: #14161a; transform-origin: 50% 55%; will-change: transform, opacity;
  box-shadow: 0 40px 90px rgb(0 0 0 / .7), 0 0 90px rgb(255 95 174 / .16), 0 0 160px rgb(57 198 255 / .1); }
.gp-win::after { content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 2px; pointer-events: none; z-index: 20;
  background: var(--gp-grad); opacity: .6;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.gp-photos { position: absolute; inset: 0; z-index: 0; }
.gp-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; will-change: transform, opacity; }

.lite .gp-layer { will-change: auto; }
.gp-layer img { display: block; }


.gp-spot { position: absolute; z-index: 1; border-radius: 14px; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 4000px rgb(4 6 12 / .66); }
.gp-ring { position: absolute; z-index: 2; border: 3px solid var(--gp-pink); border-radius: 12px; opacity: 0; pointer-events: none;
  box-shadow: 0 0 26px rgb(255 95 174 / .75), inset 0 0 18px rgb(255 95 174 / .3); --off: 12px; }
.gp-ring i { position: absolute; width: 30px; height: 30px; border: 4px solid var(--gp-cyan);
  filter: drop-shadow(0 0 8px rgb(57 198 255 / .9)); }
.gp-ring i:nth-child(1) { left: calc(-1 * var(--off)); top: calc(-1 * var(--off)); border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.gp-ring i:nth-child(2) { right: calc(-1 * var(--off)); top: calc(-1 * var(--off)); border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.gp-ring i:nth-child(3) { left: calc(-1 * var(--off)); bottom: calc(-1 * var(--off)); border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.gp-ring i:nth-child(4) { right: calc(-1 * var(--off)); bottom: calc(-1 * var(--off)); border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }

.gp-type { position: absolute; z-index: 3; display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  background: #1c2027; color: var(--gp-ink); border: 2px solid var(--gp-cyan); border-radius: 4px; opacity: 0;
  box-shadow: 0 0 22px rgb(57 198 255 / .5); font-family: "Noto Sans KR", system-ui, sans-serif; }
.gp-type i { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; background: var(--gp-cyan); }
.gp-note { position: absolute; z-index: 3; max-width: 900px; padding: 16px 24px 16px 22px; border-radius: 14px;
  background: #fff; color: #14161a; font-weight: 800; font-size: 30px; line-height: 1.35; border-left: 8px solid var(--gp-pink);
  box-shadow: 0 16px 38px rgb(0 0 0 / .5), 0 0 30px rgb(255 95 174 / .35); opacity: 0; white-space: nowrap; transform-origin: 40px 0; }
.gp-note::after { content: ""; position: absolute; left: 40px; top: -14px; border: 8px solid transparent;
  border-bottom: 8px solid #fff; border-width: 0 12px 14px; }
.gp-note.above { transform-origin: 40px 100%; }
.gp-note.above::after { top: auto; bottom: -14px; border-width: 14px 12px 0; border-color: #fff transparent transparent; }
.gp-note.right { transform-origin: 0 50%; border-left: 0; border-right: 8px solid var(--gp-pink); }
.gp-note.right::after { left: -14px; top: 50%; margin-top: -12px; border-width: 12px 14px 12px 0; border-color: transparent #fff transparent transparent; }

.gp-ghost { position: absolute; z-index: 4; background-repeat: no-repeat; border-radius: 8px; opacity: 0;
  box-shadow: 0 22px 44px rgb(0 0 0 / .6), 0 0 30px rgb(255 95 174 / .5); outline: 3px solid var(--gp-pink); }
.gp-trail { z-index: 3; outline: 0; box-shadow: none; }

.gp-sparks { position: absolute; z-index: 5; width: 0; height: 0; opacity: 0; pointer-events: none; }
.gp-sparks i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; transform-origin: 5px 5px;
  background: #fff; box-shadow: 0 0 12px 3px var(--gp-cyan); }
.gp-sparks i:nth-child(even) { box-shadow: 0 0 12px 3px var(--gp-pink); }
.gp-ripple { position: absolute; z-index: 5; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%;
  border: 5px solid var(--gp-pink); box-shadow: 0 0 24px var(--gp-pink), inset 0 0 18px rgb(255 95 174 / .5); opacity: 0; pointer-events: none; }


.gp-call { position: absolute; z-index: 6; display: grid; gap: 4px; padding: 18px 30px 20px; border-radius: 18px; opacity: 0;
  align-content: center; justify-items: center; background: #0a0b12; border: 1px solid rgb(255 255 255 / .14); transform-origin: 0 50%;
  box-shadow: 0 22px 50px rgb(0 0 0 / .6), 0 0 50px rgb(255 95 174 / .3); }
.gp-call small { font: 600 20px/1 var(--gp-num); letter-spacing: .24em; color: var(--gp-cyan); }
.gp-call b { font: 700 76px/1.05 var(--gp-num); font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--gp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gp-call.done { box-shadow: 0 22px 50px rgb(0 0 0 / .6), 0 0 70px rgb(255 194 75 / .55); border-color: rgb(255 194 75 / .6); }
.gp-call.done b { background: linear-gradient(100deg, #fff3c4, var(--gp-amber) 50%, #ff9f43); -webkit-background-clip: text; background-clip: text; }

.gp-halo { position: absolute; z-index: 7; left: 0; top: 0; width: 60px; height: 60px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgb(255 95 174 / .55), rgb(255 95 174 / 0) 70%); }
.gp-cursor { position: absolute; z-index: 7; left: 0; top: 0; width: 46px; height: 46px; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / .6)); transform-origin: 6px 4px; }


.gp-shine { position: absolute; z-index: 8; top: -10%; bottom: -10%; left: 0; width: 38%; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .2) 45%, rgb(255 255 255 / .32) 50%, rgb(255 255 255 / .2) 55%, transparent); }

.gp-wipe { position: absolute; z-index: 15; top: -12%; bottom: -12%; left: 0; width: 62%; opacity: 0; pointer-events: none;
  display: grid; place-items: center; background: var(--gp-grad);
  box-shadow: 0 0 80px rgb(255 95 174 / .7), 22px 0 0 rgb(57 198 255 / .55), 44px 0 0 rgb(57 198 255 / .2); }
.gp-wipe span { display: grid; place-items: center; transform: skewX(18deg); color: #fff; text-shadow: 0 6px 24px rgb(0 0 0 / .35); }
.gp-wipe small { font: 700 34px/1 var(--gp-num); letter-spacing: .5em; margin-right: -.5em; }
.gp-wipe b { font: 700 230px/1 var(--gp-num); }


.gp-shade { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: 320px; pointer-events: none; opacity: 0;
  background: linear-gradient(rgb(7 8 13 / 0), rgb(7 8 13 / .8) 55%, rgb(7 8 13 / .95)); }
.gp-shade.top { top: 0; bottom: auto; background: linear-gradient(rgb(7 8 13 / .95), rgb(7 8 13 / .8) 45%, rgb(7 8 13 / 0)); }
.gp-cap { position: absolute; z-index: 11; left: 0; right: 0; bottom: 44px; margin: 0 auto; width: 1560px;
  display: flex; align-items: stretch; border-radius: 18px; overflow: hidden; opacity: 0;
  background: linear-gradient(180deg, rgb(22 24 36 / .97), rgb(10 11 18 / .97));
  box-shadow: 0 24px 60px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .1), 0 0 60px rgb(139 108 255 / .2); }
.gp-cap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gp-grad); }
.gp-cap.top { top: 40px; bottom: auto; }
.gp-cap-step { flex: none; display: grid; place-content: center; text-align: center; min-width: 150px; padding: 12px 40px 12px 26px;
  background: var(--gp-grad); color: #fff; overflow: hidden; clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%); }
.gp-cap-step small { font: 600 18px/1 var(--gp-num); letter-spacing: .3em; opacity: .9; }
.gp-cap-step b { display: block; font: 700 70px/1 var(--gp-num); text-shadow: 0 4px 18px rgb(0 0 0 / .25); }
.gp-cap-body { flex: 1; min-width: 0; display: grid; gap: 14px; align-content: center; padding: 20px 38px 20px 18px; }
.gp-cap-text { font-size: 40px; font-weight: 800; line-height: 1.3; word-break: keep-all; letter-spacing: -.01em; }
.gp-cap-prog { display: flex; gap: 6px; }
.gp-cap-prog i { position: relative; flex: 1; min-width: 36px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / .12); overflow: hidden; }
.gp-cap-prog b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gp-grad); }


.gp-title { position: absolute; z-index: 20; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px;
  text-align: center; opacity: 0; overflow: hidden; }
.gp-title-word { position: absolute; left: 50%; top: 50%; white-space: nowrap; font: 700 300px/1 var(--gp-num);
  color: rgb(255 255 255 / .03); -webkit-text-stroke: 2px rgb(255 255 255 / .13); letter-spacing: .04em; }
.gp-title img { width: 200px; height: 200px; filter: drop-shadow(0 12px 30px rgb(255 95 174 / .5)); }
.gp-title-kicker { font: 600 28px/1 var(--gp-num); color: var(--gp-cyan); text-transform: uppercase; white-space: nowrap; }
.gp-title-main { font-size: 116px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap;
  text-shadow: 0 0 40px rgb(255 95 174 / .5), 0 10px 40px rgb(0 0 0 / .5); }
.gp-title-main span { display: inline-block; }
.gp-title-sub { font-size: 40px; color: #c9cfdb; font-weight: 500; }
.gp-title-stripes { position: absolute; left: 0; right: 0; bottom: 70px; height: 16px; overflow: hidden; opacity: .6; }
.gp-title-stripes i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% + 56px);
  background: repeating-linear-gradient(90deg, var(--gp-pink) 0 16px, transparent 16px 28px); transform: skewX(-40deg); }


.gp-ctrl { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.gp-ctrl button { min-width: 44px; height: 36px; padding: 0 12px; border: 0; border-radius: 6px; cursor: pointer;
  background: #232832; color: var(--gp-ink); font: 600 14px/1 "Noto Sans KR", system-ui, sans-serif; }
.gp-ctrl button:hover { background: #2c3340; }
.gp-bar { position: relative; flex: 1; height: 8px; border-radius: 4px; background: #232832; cursor: pointer; }
.gp-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--gp-grad); }
.gp-bar u { position: absolute; top: -3px; width: 2px; height: 14px; background: #4a5263; }
.gp-time { min-width: 86px; text-align: right; color: var(--gp-ink-2); font: 500 13px/1 var(--gp-num);
  font-variant-numeric: tabular-nums; }
.gp-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.gp-steps button { border: 1px solid #2c3340; background: transparent; color: var(--gp-ink-2); border-radius: 999px;
  padding: 6px 12px; font: 500 13px/1.2 "Noto Sans KR", system-ui, sans-serif; cursor: pointer; }
.gp-steps button.on { color: #fff; border-color: var(--gp-pink); }


.render .gp { max-width: none; padding: 0; margin: 0; }
.render .gp-head, .render .gp-ctrl, .render .gp-steps { display: none; }
.render .gp-frame { width: 1920px; height: 1080px; border-radius: 0; box-shadow: none; }

@media (prefers-reduced-motion: reduce) { .gp-ripple, .gp-sparks, .gp-shine { display: none; } }