/* 홈 팝업 캐러셀 (2026-10-15) · web_popup.py
   v6 글로우: 차가운 검정 바탕, 로고 파랑 #4A63E0 빛. 카드(픽스터·런칭·이벤트)는 각자의 CSS 그대로, 여기는 틀만. */
#hpop{position:fixed!important;inset:0;z-index:2147483002;margin:0;padding:0;
  --hp-blue:#4A63E0;--hp-blue2:#6E86F2;--hp-tx:#EEEEF3;--hp-tx2:#A8A9BA;
  font-family:Pretendard,"Pretendard Variable",-apple-system,"Malgun Gothic",sans-serif;color:var(--hp-tx)}
#hpop[hidden]{display:none}
#hpop *{box-sizing:border-box}
.hpop-bg{position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 32%,rgba(30,38,84,.62),rgba(5,5,10,.9) 68%),rgba(3,3,8,.6);
  backdrop-filter:blur(9px) saturate(1.1);-webkit-backdrop-filter:blur(9px) saturate(1.1);animation:hp-fade .4s ease}
.hpop-box{position:relative;height:100%;width:min(1200px,100%);margin:0 auto;
  display:grid;grid-template-rows:minmax(0,1fr) auto auto;padding:56px 16px 14px;
  animation:hp-in .6s cubic-bezier(.2,.9,.3,1.12)}

/* 무대: 슬라이드를 겹쳐 놓고 지금 것만 보인다 */
.hpop-stage{position:relative;min-height:0;container-type:size;touch-action:pan-y}
.hp-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 68px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateX(calc(var(--dir,1) * 56px)) scale(.97);
  transition:opacity .45s ease,transform .6s cubic-bezier(.2,.9,.25,1),visibility 0s linear .6s}
.hp-slide.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .5s ease .06s,transform .65s cubic-bezier(.2,.9,.25,1) .02s,visibility 0s}
.hp-slide.drag{transition:none}
.hp-card{display:flex;flex-direction:column;max-height:100%;min-height:0;width:100%}
.hp-card>.pk-pc,.hp-card>.ln-card{flex:0 1 auto;min-height:0}
.hp-slide[data-k=pk] .hp-card{width:min(560px,100%)}
.hp-slide[data-k=ln] .hp-card{width:min(620px,100%)}
/* 이벤트(2:1). 무대 높이에 맞춰 폭을 정한다 */
.hp-evslot{width:min(1040px,100%,calc((100vh - 230px) * 2));width:min(1040px,100cqw,calc((100cqh - 34px) * 2))}
.hp-evslot #evb{box-shadow:0 0 0 1px rgba(110,134,242,.45),0 0 40px rgba(74,99,224,.4),0 40px 140px -20px rgba(0,0,0,.85)}
.hp-note{margin:12px 0 0;font-size:12.5px;color:#8A8CA1;text-align:center}

/* 좌우 화살표 */
.hpop-arr{position:absolute;top:50%;z-index:6;width:50px;height:50px;margin-top:-25px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:#DDE2FF;background:rgba(14,14,21,.62);border:1px solid rgba(110,134,242,.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 10px 30px -8px rgba(0,0,0,.7);transition:background .2s,box-shadow .25s,transform .2s,border-color .2s}
.hpop-arr svg{width:22px;height:22px}
.hpop-arr.prev{left:4px}.hpop-arr.next{right:4px}
.hpop-arr:hover,.hpop-arr:focus-visible{outline:none;background:rgba(74,99,224,.28);border-color:rgba(163,180,255,.85);box-shadow:0 0 22px rgba(74,99,224,.65)}
.hpop-arr.prev:hover{transform:translateX(-2px)}.hpop-arr.next:hover{transform:translateX(2px)}

/* 점: 지금 것은 길쭉한 막대, 안에 자동 넘김까지 남은 시간이 찬다 */
.hpop-dots{display:flex;justify-content:center;align-items:center;gap:9px;padding:16px 0 4px}
.hpop-dots button{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:99px;cursor:pointer;overflow:hidden;
  background:rgba(255,255,255,.26);transition:width .45s cubic-bezier(.2,.9,.25,1),background .3s}
.hpop-dots button::before{content:"";position:absolute;inset:-8px}
.hpop-dots button:hover{background:rgba(255,255,255,.5)}
.hpop-dots button:focus-visible{outline:2px solid var(--hp-blue2);outline-offset:3px}
.hpop-dots button.on{width:34px;background:rgba(74,99,224,.32);box-shadow:0 0 12px rgba(74,99,224,.55)}
.hpop-dots button.on::after{content:"";position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--hp-blue),#A3B4FF)}
.hpop-dots button.on.run::after{animation:hp-fill var(--d,5000ms) linear forwards}
.hpop-dots button.on.full::after{transform:none}
#hpop.paused .hpop-dots button.on.run::after{animation-play-state:paused}

/* 아래 줄: 오늘 하루 안 보기 · 닫기 */
.hpop-ft{display:flex;align-items:center;justify-content:space-between;gap:14px;width:min(640px,100%);margin:6px auto 0}
.hpop-today{display:inline-flex;align-items:center;gap:9px;cursor:pointer;color:#C9CCDB;font-size:13.5px;padding:8px 2px;user-select:none;min-width:0}
.hpop-today input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.hpop-today i{flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(255,255,255,.34);background:rgba(255,255,255,.04);
  display:grid;place-items:center;transition:background .2s,border-color .2s,box-shadow .2s}
.hpop-today i::after{content:"";width:9px;height:5px;margin-top:-2px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);transition:transform .2s cubic-bezier(.2,.9,.3,1.4)}
.hpop-today input:checked+i{background:var(--hp-blue);border-color:var(--hp-blue2);box-shadow:0 0 12px rgba(74,99,224,.7)}
.hpop-today input:checked+i::after{transform:rotate(-45deg) scale(1)}
.hpop-today input:focus-visible+i{outline:2px solid var(--hp-blue2);outline-offset:2px}
.hpop-today:hover{color:#fff}
.hpop-today span{overflow-wrap:anywhere}
.hpop-close{flex:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);color:#E4E6F0;font:inherit;font-size:13.5px;font-weight:600;
  padding:9px 20px;border-radius:99px;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.hpop-close:hover,.hpop-close:focus-visible{outline:none;color:#fff;border-color:rgba(163,180,255,.8);background:rgba(74,99,224,.2);box-shadow:0 0 16px rgba(74,99,224,.5)}

/* 닫기 X: 화면 오른쪽 위 */
.hpop-x{position:absolute;right:16px;top:12px;z-index:8;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:#fff;background:rgba(14,14,21,.7);border:1px solid rgba(110,134,242,.5);box-shadow:0 0 16px rgba(74,99,224,.45);transition:background .2s,box-shadow .2s,transform .25s}
.hpop-x svg{width:20px;height:20px}
.hpop-x:hover,.hpop-x:focus-visible{outline:none;background:rgba(74,99,224,.3);box-shadow:0 0 24px rgba(74,99,224,.8);transform:rotate(90deg)}

/* 한 장뿐이면 점·화살표 없이 */
#hpop.one .hpop-dots,#hpop.one .hpop-arr{display:none}
#hpop.one .hp-slide{padding:0}

@keyframes hp-fade{from{opacity:0}}
@keyframes hp-in{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
@keyframes hp-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:900px){.hp-slide{padding:0 58px}.hpop-arr{width:44px;height:44px;margin-top:-22px}}
@media (max-width:720px){
  .hpop-box{padding:58px 12px 10px}
  .hp-slide{padding:0}
  .hpop-arr{display:none}
  .hp-evslot{width:min(100%,calc((100vh - 200px) * .645));width:min(100cqw,calc(100cqh * .645))}
  .hp-ev .hp-note{display:none}
  .hpop-dots{padding:12px 0 2px}
  .hpop-today{font-size:13px}
  .hpop-close{padding:8px 16px;font-size:13px}
  .hpop-x{right:12px;top:10px;width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){.hpop-bg,.hpop-box{animation:none}.hp-slide{transform:none!important}}