.event-popup:not([open]){display:none}
.event-popup[open]{
  position:fixed;
  inset:0;
  z-index:1000;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0 16px;
  border:0;
  background:transparent;
  overflow:auto;
  color:#231a11;
  font-family:Pretendard,sans-serif;
}
.event-popup::backdrop{background:rgba(22,13,8,.76)}
.event-popup:focus{outline:none}
.event-popup-open{overflow:hidden}
.event-popup__shell{
  width:min(466px,100%);
  margin:min(13.44vh,131px) auto 24px;
  filter:drop-shadow(0 10px 10px rgba(35,26,17,.2));
}
.event-popup__controls{
  position:relative;
  display:flex;
  height:24px;
  justify-content:space-between;
  color:#fff;
}
.event-popup__today,.event-popup__close{
  position:absolute;
  top:-15px;
  z-index:2;
  display:flex;
  height:44px;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
.event-popup__today{
  left:-12px;
  padding:0 12px;
  font:400 12px/14px Pretendard,sans-serif;
}
.event-popup__close{
  right:-12px;
  width:44px;
}
.event-popup__zoom{
  position:absolute;
  top:-15px;
  left:50%;
  display:flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  transform:translateX(-50%);
  color:#fff;
  font:400 12px/14px Pretendard,sans-serif;
  text-decoration:none;
  white-space:nowrap;
}
.event-popup__close svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.event-popup__today:hover,.event-popup__close:hover,.event-popup__zoom:hover{background:rgba(255,255,255,.12)}
.event-popup__today:focus-visible,.event-popup__close:focus-visible,.event-popup__zoom:focus-visible,.event-popup__item:focus-visible,.event-popup__image:focus-visible,.event-popup__arrow:focus-visible{outline:2px solid #b49a82;outline-offset:3px}
.event-popup__poster{position:relative;touch-action:pan-y}
.event-popup__image{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:466/583;
  overflow:hidden;
  background:#a18b7d;
  cursor:grab;
}
.event-popup__image.is-dragging{cursor:grabbing}
.event-popup__image img{
  position:static;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  transition:transform .2s ease;
}
.event-popup__image.is-dragging img{transition:none}
.event-popup__arrow{
  position:absolute;
  top:50%;
  z-index:1;
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  padding:0;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  background:rgba(35,26,17,.55);
  color:#fff;
  cursor:pointer;
}
.event-popup__arrow:hover{background:rgba(35,26,17,.82)}
.event-popup__arrow[hidden]{display:none}
.event-popup__arrow--prev{left:-16px}
.event-popup__arrow--next{right:-16px}
.event-popup__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:521px) and (max-width:700px){
  .event-popup__arrow--prev{left:clamp(-98px,calc((466px - 100vw)/2 + 4px),-24px)}
  .event-popup__arrow--next{right:clamp(-98px,calc((466px - 100vw)/2 + 4px),-24px)}
}
@media(min-width:701px){
  .event-popup__arrow--prev{left:-98px}
  .event-popup__arrow--next{right:-98px}
}
.event-popup__list{
  display:grid;
  grid-template-rows:repeat(5,36px);
  width:100%;
  height:213px;
  padding:17px 13px 16px;
  background:#fff;
}
.event-popup__item{
  display:grid;
  width:100%;
  height:36px;
  place-items:center;
  padding:0 8px;
  border:0;
  border-radius:0;
  background:#fff;
  color:#231a11;
  font:600 16px/14px Pretendard,sans-serif;
  text-align:center;
  white-space:nowrap;
}
.event-popup__item.is-active{background:#2c1f17;color:#fff}
.event-popup__item:disabled{opacity:1;cursor:default}
@media(max-height:900px) and (min-width:521px){
  .event-popup__shell{width:min(466px,calc((100dvh - 270px)*466/583));margin-top:24px}
}
@media(max-width:520px){
  .event-popup[open]{padding:0 12px}
  .event-popup__shell{margin-top:clamp(20px,5vh,42px)}
  .event-popup__list{grid-template-rows:repeat(5,34px);height:194px;padding:12px 10px}
  .event-popup__item{height:34px;font-size:clamp(13px,3.8vw,16px)}
  .event-popup__arrow{width:40px;height:40px}
  .event-popup__arrow--prev{left:-12px}
  .event-popup__arrow--next{right:-12px}
}
@media(prefers-reduced-motion:reduce){
  .event-popup__image img{transition:none}
}
@media(max-height:580px){
  .event-popup__shell{margin-top:16px}
}