body { text-align: center; padding:0; margin:0;}

p,div,img { margin: 0; padding: 0; }

#event2506{max-width:1020px;margin:0 auto;}
#event2506 .eventBox{position:relative;}
#event2506 .eventBox .eventBg{background-image:url('/image/event/250609/bl_250609_EQ_02.jpg');width:100%;height:806px;}
#event2506 .eventBox .cardBox{width:600px;height:800px;position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:10;}
#event2506 .eventBox .cardBox .startBtn{position:absolute;left:0;top:0;width:600px;height:800px;z-index:9;}
#event2506 .eventBox .startBtn img{width:100%;}
#event2506 .card-grid {display: grid;grid-template-columns: repeat(3, 190px);gap: 10px;perspective: 1000px;z-index:5;}
#event2506 .card {width: 190px;height:260px;cursor: pointer;}
#event2506 .card img{width:100%;}
#event2506 .card .inner {position: relative;width: 100%;height: 100%;transition: transform 0.6s;transform-style: preserve-3d;}
#event2506 .card.flipped .inner {transform: rotateY(180deg);}
#event2506 .card .front,#event2506 .card .back {position: absolute;width: 100%;height: 100%;backface-visibility: hidden;background-size: cover;background-position: center;display: flex;align-items: center;justify-content: center;}
#event2506 .card .back {transform: rotateY(180deg);}
#event2506 .card.selected-user {position: relative;border-radius: 16px;background: white;z-index: 1;}
#event2506 .card.selected-user::before {content: "";position: absolute;z-index: -1;top: -2px;left: -2px;right: -2px;bottom: -2px;border-radius: 18px;background: linear-gradient(#fdcfc8);}
#event2506 .card.correct {position: relative;border-radius: 16px;background: white;z-index: 1;}
#event2506 .card.correct::before {content: "";position: absolute;z-index: -1;top: -2px;left: -2px;right: -2px;bottom: -2px;border-radius: 18px;background: linear-gradient(#8fbce3 , #efa59b);}

#event250714 {max-width:1020px;margin:0 auto;}
#event250714 .eventBox{width:100%;height:autor;background-image:url('/image/event/250714/bl_250714_tropical_back.jpg');}
#event250714 .eventBox .ChoiceBox {position:relative;width:100%;height:900px;text-align: center;background-image:url('/image/event/250714/bl_250714_tropical_back.jpg');}
#event250714 .eventBox .ChoiceBox .ChoiceArea{width:800px;height:730px;border: 5px solid #fccd67;margin: 0px auto;border-radius: 50px;}
#event250714 .eventBox .ChoiceBox .ChoiceArea .ChoiceTxt {color:#fccd67; font-size: 2rem;margin-top: 90px;width:100%;}
#event250714 .eventBox .ChoiceBox .ChoiceArea .ChoiceImg{width:60%;}
#event250714 .eventBox .ChoiceBox .ChoiceArea .text_bottomLine {border-bottom: 1px solid #fccd67;padding-bottom:10px;}
#event250714 .eventBox .ChoiceBox .ChoiceArea .ChoiceBtnArea{width: 100%;display: flex;justify-content: center;align-items: center;margin-top:80px;}
#event250714 .eventBox .ChoiceBox .ChoiceArea .startBtn{position: relative;padding:20px;cursor:pointer;}
#event250714 .eventBox .ChoiceBox .ChoiceArea .startBtn .ChoiceTxt{width: 100%;font-size: 2rem;color: #fff;}
#event250714 .eventBox .ActionBox{position:relative;width:100%;height:1029px;text-align: center;}
#event250714 .eventBox .ActionBox .result_action{display: block;position: absolute;top:0px;left: 0px;}
#event250714 .eventBox .ActionBox #action_move1 {position: absolute;top:320px;left: 790px;z-index:22;}
#event250714 .eventBox .ActionBox #action_img_move1 {display: none;}
#event250714 .eventBox .ActionBox #action_move2 {position: absolute;top:620px;left: 710px;z-index:10;animation: fly 1s infinite ease-in-out;}
#event250714 .eventBox .ActionBox #action_move3 {position: absolute;top:630px;left: 370px;z-index:10;}
#event250714 .eventBox .ActionBox #action_img_move3 {display: none; width: 80%}
#event250714 .eventBox .ActionBox .result_action_end{display: none;position: absolute;top:0px;left: 0px;}
#event250714 .eventBox .ActionBox .result_action_message{
    display: none;position: relative;top:550px;left: 0px;z-index:10;color:#000;background:#fff;width:450px;padding-bottom:25px;padding-top:25px;margin:0 auto;border-radius: 25px;font-size:1.5rem;
}

@keyframes fly {
  0% {
    transform: translate(0px, 0px);
  }
  10% {
    transform: translate(10px, -30px);
  }
  20% {
    transform: translate(30px, -10px);
  }
  30% {
    transform: translate(40px, -40px);
  }
  40% {
    transform: translate(60px, -20px);
  }
  50% {
    transform: translate(50px, 0px);
  }
  60% {
    transform: translate(70px, 20px);
  }
  70% {
    transform: translate(40px, 30px);
  }
  80% {
    transform: translate(20px, 10px);
  }
  90% {
    transform: translate(10px, 20px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

/* 드래그 중인 퍼즐 조각에만 터치 액션 방지 */
.puzzlePiece.dragging {
    touch-action: none;
    user-select: none;
}

/* 스크롤 강제 활성화 */
body {
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* 모바일 최적화 클래스 */
body.mobile-optimized {
    -webkit-overflow-scrolling: touch;
}

body.mobile-optimized #event250820 .puzzlePiece {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Event 250820 - Puzzle Event Styles START */
#event250820 { width: 1020px;margin: 0 auto;}
#event250820 > div { margin: 0; padding: 0; line-height: 0; }
#event250820 img { display: block; margin: 0; padding: 0; }
#event250820 .eventBox {width: 100%;}
#event250820 .puzzleBackground { width:100%; position: relative;}
#event250820 #puzzleBackgroundImg { margin: 0 auto; }
#event250820 .puzzlePieces {position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background: url('/image/event/250820/bl_250825_puzzle_03.jpg'); height:526px;}
#event250820 .puzzlePiece {width: 330px; height: 330px; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: bold; cursor: grab; touch-action: none; /* 터치 디바이스에서 기본 터치 동작 방지 */ user-select: none; /* 텍스트 선택 방지 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
#event250820 .puzzlePiece:active {cursor: grabbing;}
#event250820 .puzzleSlot {width: 330px; height: 330px; display: flex; justify-content: center; align-items: center;}
#event250820 .puzzleSlot.dragover {background-color: rgba(232, 245, 232, 0.9); border-color: #4caf50;}
/* 이벤트 참여 완료 후 비활성화된 퍼즐 조각 스타일 */
#event250820 .puzzlePiece.disabled {cursor: default !important;opacity: 0.5;pointer-events: none;box-shadow: none;}

/* 정답 퍼즐 조각 이동 애니메이션 */
.puzzlePiece.moving-to-slot {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1000;
}

.puzzlePiece.slot-highlight {
    animation: slotGlow 0.6s ease-in-out;
    border-color: #4caf50;
}

@keyframes slotGlow {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0.1); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

/* 퍼즐 완성 효과 애니메이션 */
@keyframes puzzleBorderFade {
  0% { border: 2px dashed #aaa; }
  100% { border: 2px solid transparent; }
}

@keyframes backgroundChange {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.puzzleSlot.completing {
  animation: puzzleBorderFade 1s ease-in-out forwards;
}

.puzzleBackground.completed {
  transition: all 1s ease-in-out;
}

.puzzleBackground .background-completed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}

.puzzleBackground .background-completed.show {
  opacity: 1;
}

/* 오답 시 흔들림 애니메이션 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
  20%, 40%, 60%, 80% { transform: translateX(8px); }
}

#event250820 .puzzlePiece.incorrect {
  animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  box-shadow: 0 0 10px rgba(255,0,0,0.3); /* 틀렸을 때 붉은 그림자 효과 */
}

/* 퍼즐 조각 이동 애니메이션 */
#event250820 .puzzlePiece.returning {
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); /* 부드러운 이징 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* 이동 중 그림자 효과 */
}
/* Event 250820 - Puzzle Event Styles END */

/* 기존 스타일을 방해하지 않도록 ID로 범위 제한 */
#event250915{
  width: 1020px;
  text-align: center;
  margin: 0 auto;
}
#event250915 .eventBox {
    position: relative;
    width: 1020px;
    min-height: 1008px; /* 자판기 높이에 맞게 조정 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0; /* 배경색 예시 */
    background: url('/image/event/250915/bl_250915_heritage_02.jpg') no-repeat center top;
    background-size: 100% auto;
}

#event250915 .vending-machine-container {
    position: relative;
    width: 743px; /* 자판기 이미지 너비에 맞게 조정 */
    height: 1008px; /* 자판기 이미지 높이에 맞게 조정 */
    margin: 0 auto;
    background-image: url('/image/event/250915/machine.png'); /* 자판기 이미지 경로 */
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
}

#event250915 .interaction-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#event250915 .coin-slot-area {
    position: absolute;
    top: 680px; /* 동전 투입구 위치 조정 */
    right: 70px; /* 동전 투입구 위치 조정 */
    text-align: center;
}

#event250915 .coin {
    width: 20px; /* 동전 이미지 크기 */
    cursor: pointer;
    transition: transform 0.2s ease-in-out, opacity 0.3s;
}

#event250915 .coin:hover {
    transform: scale(1.1);
}

#event250915 .coin.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none; /* 클릭 이벤트 비활성화 */
}

#event250915 .coin-slot-area p {
    color: #fff;
    font-weight: bold;
    margin-top: 10px;
    text-shadow: 1px 1px 2px #000;
}

#event250915 #startCoinBtn{
  cursor: pointer;
}

#event250915 .coin.inserting {
    /* 동전이 투입구로 들어가는 애니메이션 */
    animation: insert-coin-animation 0.5s ease-in forwards;
}

@keyframes insert-coin-animation {
    0% {
        transform: scale(1.1) rotate(0); opacity: 1;
    }
    100% {
        transform: scale(0) translateY(-20px); opacity: 0;
    }
}

#event250915 .product-display {
    position: absolute;
    bottom: 85px; /* 상품 나오는 곳 위치 조정 */
    left: 50%;
    transform: translateX(-50%);
    width: 230px; /* 상품 이미지 크기 조정 */
    height: 84px; /* 상품 이미지 크기 조정 */
    overflow: hidden;
}

#event250915 .product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 애니메이션 시작 위치 (위에서 아래로) */
    transform: translateY(-200px);
    opacity: 0;
    /* 애니메이션 효과를 기본 클래스로 이동하여 되돌아가는 애니메이션도 가능하게 함 */
    transition: transform 0.8s cubic-bezier(0.6, -0.28, 0.74, 0.05), opacity 0.5s;
}

#event250915 .product-image.drop {
    transform: translateY(0);
    opacity: 1;
}

#event250915 .product-image.reveal {
    /* 상품이 나온 후 강조되는 애니메이션 */
    transform: translateY(0);
    /* 펼쳐지는 애니메이션은 더 빠르게 */
    transition: transform 0.4s ease-out;
}

#event250915 .result-message {
    position: absolute;
    top: 200px; /* 메시지 위치 조정 */
    left: 50%;
    transform: translateX(-50%);
    color: #ffdd00;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000;
    text-align: center;
    width: 100%;
}

.swal-custom-height {
  width: 770px;
  background: no-repeat top center;
  height: 100vh; /* Example: Set height to 80% of viewport height */
}

.swal-custom-height .swal2-confirm{
  margin-top: 610px;
}

.swal-custom-height_ok {
  width: 770px;
  background: no-repeat top center;
  height: 100vh; /* Example: Set height to 80% of viewport height */
}

.swal-custom-height_ok .swal2-confirm{
  margin-top: 680px;
}

#event_251013 {max-width:1020px;margin:0 auto;}
#event_251013 .eventBox{position:relative;background-image: url('/image/event/251013/bl_251013_aftereffects_02.jpg');width:100%;}
#event_251013 .event_btn_area{display: flex;flex-wrap: wrap; margin:0 auto;justify-content: center;gap: 10px;}
#event_251013 .event_btn_area div{
  flex-basis: calc(40% - 5px); /* gap 10px의 절반 */
  text-align: center;
  box-sizing: border-box;
}
#event_251013 .event_btn_area div img {border-radius: 10%; cursor: pointer;}
#event_251013 .event_btn_area div .action {
  /*이미지가 유리창 빛반사 효과*/
  animation: glow 1.5s infinite;
}
@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 1);
  }
  100% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  }
}

#event_251107 {max-width:1020px;margin:0 auto;}
#event_251107 .eventBox{position:relative;background-image: url('/image/event/251107/bl_251107_calendar_02.jpg');width:100%;}
#event_251107 .event_btn_area{display: flex;flex-wrap: wrap; margin:0 auto;justify-content: center;gap: 10px;padding-top:130px;}
#event_251107 .event_btn_area img {width:100%;}
#event_251107 .event_btn_area div{
  text-align: center;
  box-sizing: border-box;
}
#event_251107 .event_btn_area .button_area{
  position: relative;
  top: 10vw;
  right: 10vw;
  width: 10%;
  height: 20%;
}

#event_251107 .event_btn_area .choice_action_btn1 {
  position: absolute;
  width: 3vw;
  height: 8vw;
  cursor: pointer;
  top: 5vw;
  right: 3vw;
}
#event_251107 .event_btn_area .choice_action_btn2 {
  position: absolute;
  width: 3vw;
  height: 8vw;
  cursor: pointer;
  top: 13vw;
  right: 3vw;
}
#event_251107 .event_btn_area .choice_action_btn3 {
  position: absolute;
  width: 3vw;
  height: 8vw;
  cursor: pointer;
  top: 21vw;
  right: 3vw;
}

#event_251201 {max-width:1020px;margin:0 auto;}
#event_251201 .eventBox{position:relative;background-image: url('/image/event/251201/bl_251201_calender_02.jpg');width:100%;height:1463px;background-size: cover;background-position: center;}
#event_251201 .event_btn_area{display: flex;flex-wrap: wrap; margin:0 auto;justify-content: center;gap: 20px;max-width: 800px;}
#event_251201 .event_btn_area .week_action{flex: 0 0 calc(50% - 10px);cursor: pointer;}
#event_251201 .event_btn_area .week_action:nth-child(5){flex: 0 0 100%;}
#event_251201 .event_btn_area img {width:100%;height:auto;display:block;}

/* 태블릿 반응형 (768px 이하) */
@media (max-width: 768px) {
    #event_251201 {max-width:100%;}
    #event_251201 .eventBox{height:180vw;}
    #event_251201 .event_btn_area{gap:10px;max-width: 100%;}
    #event_251201 .event_btn_area .week_action{flex: 0 0 calc(50% - 5px);}
    #event_251201 .event_btn_area .week_action:nth-child(5){flex: 0 0 100%;}
}

/* 모바일 반응형 (480px 이하) */
@media (max-width: 480px) {
    #event_251201 {max-width:100%;}
    #event_251201 .eventBox{height:180vw;}
    #event_251201 .event_btn_area{gap:8px;max-width: 100%;}
    #event_251201 .event_btn_area .week_action{flex: 0 0 calc(50% - 4px);}
    #event_251201 .event_btn_area .week_action:nth-child(5){flex: 0 0 100%;}
}