/* @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"); */

#rouletter_div { 
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 100%;
  height: 100%;
  /* background-color:rgba(0, 0, 0, 0.5); */
  background-color: inherit;
}

.rouletter_message_modal_bg_cover { 
  /* 배경 이미지는 움직이는 에니메이션 파일 */
  background: url('/img/contents/cover/rouletter_message_modal_background.gif');
  background-size: cover;
  /* display: flex; */
  /* flex-direction: column; */
  min-height: 100%;
  min-width: 100%;
  border: none;
  border-radius: 8px;
}

.rouletter_div_bg_cover {
  /* 배경 이미지는 움직이는 에니메이션 파일 */
  background: url('/img/contents/cover/rouletter_background.gif');
  background-size: cover;
  /* display: flex; */
  /* flex-direction: column; */
  min-height: 100%;
  min-width: 100%;
}

/* 배경 위에 레이어 추가하기*/
.rouletter_div_layer {
  /* background: rgba(18, 25, 66, 0.6); */
  min-height: 100vh;
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* justify-content: center; */
}

.rouletter_message_modal_layer {
  background: rgba(70, 70, 70, 0.6);
  min-height: 100%;
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  justify-content: center;
  border: none;
  border-radius: 8px;
  /* background: linear-gradient(180deg, rgba(183, 183, 183, 0.6) 0%, rgba(51,51,51,0.6) 100%); */
}

.rouletter_message {
  font-size:1.2rem;
  font-weight:700;
  color: #fff;
}

.rouletter {
  position: relative;
  width: 400px;
  height: 400px;
}

.rouletter-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  border-radius: 350px;
  overflow: hidden;
}

.rouletter-bg-customize {
  position: absolute;
  top: 25px;
  left: 25px;
  /* transform: translate(-50%, -50%); */
  width: 350px;
  height: 350px;
  border-radius: 350px;
  overflow: hidden;
  
}

.rouletter_title {
  padding: 30px 0px 10px 0px; 
  /* color:#fff; */
}

.rouletter_writer {
  padding: 0px 0px 30px 0px; 
}

.text_long {
  display: block;
}

.text_short {
  display: none;
}

.rouletter_piece_count_btn {
  padding:1px 20px 1px 20px;
}

.rouletter_piece_count_input {
  padding:1px 0px 1px 0px;
}

/* '모든 디바이스 & 최대 너비가 576px 이하'라는 조건을 모두 만족할 때 */
@media all and (max-width:575px) {
  /* 모바일일 때 */
/* @media (hover: none) and (pointer: coarse) {  */
  .rouletter_title {
    padding: 0px 0px 30px 0px; 
    /* color:#fff; */
  }

  .rouletter_piece_count_btn {
    padding:1px 10px 1px 10px;
  }

  .text_long {
    display: none;
  }

  .text_short {
    display: block;
  }
}
/* macOS,linux, windodws, iOS, ipadOS, androidOS */
@-webkit-keyframes color_strok_change {
  0% {
    text-shadow: -1px 0px rgb(255, 255, 255), 0px 1px rgb(255, 255, 255), 1px 0px rgb(255, 255, 255), 0px -1px rgb(255, 255, 255);
  }
  25% {
    text-shadow: -1px 0px rgb(249,188,150), 0px 1px rgb(249,188,150), 1px 0px rgb(249,188,150), 0px -1px rgb(249,188,150);
  }
  50% {
    text-shadow: -1px 0px rgb(253,132,57), 0px 1px rgb(2253,132,57), 1px 0px rgb(253,132,57), 0px -1px rgb(253,132,57);
  }
  75% {
    text-shadow: -1px 0px rgb(0, 162, 255), 0px 1px rgb(0, 162, 255), 1px 0px rgb(0, 162, 255), 0px -1px rgb(0, 162, 255);
  }
  100% {
    text-shadow: -1px 0px rgb(190, 227, 249), 0px 1px rgb(190, 227, 249), 1px 0px rgb(190, 227, 249), 0px -1px rgb(190, 227, 249);
  }
}

@keyframes color_strok_change {
  0% {
    text-shadow: -1px 0px rgb(255, 255, 255), 0px 1px rgb(255, 255, 255), 1px 0px rgb(255, 255, 255), 0px -1px rgb(255, 255, 255);
  }
  25% {
    text-shadow: -1px 0px rgb(249,188,150), 0px 1px rgb(249,188,150), 1px 0px rgb(249,188,150), 0px -1px rgb(249,188,150);
  }
  50% {
    text-shadow: -1px 0px rgb(253,132,57), 0px 1px rgb(2253,132,57), 1px 0px rgb(253,132,57), 0px -1px rgb(253,132,57);
  }
  75% {
    text-shadow: -1px 0px rgb(0, 162, 255), 0px 1px rgb(0, 162, 255), 1px 0px rgb(0, 162, 255), 0px -1px rgb(0, 162, 255);
  }
  100% {
    text-shadow: -1px 0px rgb(190, 227, 249), 0px 1px rgb(190, 227, 249), 1px 0px rgb(190, 227, 249), 0px -1px rgb(190, 227, 249);
  }
}

.rouletter_title_text {
  font-size:2rem;
  /* font-weight:700; */
  color: #fff;
  text-shadow: -1px 0px rgb(43, 50, 250), 0px 1px rgb(43, 50, 250), 1px 0px rgb(43, 50, 250), 0px -1px rgb(43, 50, 250);
  /* animation-name: color_strok_change; */
  /* animation-duration: 3s; */
  /* animation-iteration-count: infinite; */
}

.color_stroke_change_text {
  animation-name: color_strok_change;
  animation-duration: 3s;
  animation-iteration-count: infinite; /* 2초 간격으로 무한 반복 */
}
.rouletter_writer_title {
  font-size:.75rem;
  font-weight:700;
  color: inherit;
}

.rouletter_writer_text {
  font-size:.75rem;
  font-weight:700;
  color:#fff;
}

.rouletter_text {
  font-size:.75rem;
  text-align: center;
}

.rouletter_text_blank {
  font-size:.75rem;
  text-align: center;
  opacity: 0.6;
}

.rouletter_making_text {
  font-size:1.5rem;
  font-weight:700;
  color: rgba(238, 255, 0, 1);
}

/* macOS,linux, windodws, iOS, ipadOS, androidOS */
@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* 1.5초 간격으로 무한으로 깜빡이는 텍스트 */
.blinking-text {
  animation: blink 1.3s infinite; /* 1.3초 간격으로 무한 반복 */
}

.rouletter-panel {
  width: 100%;
  height: 100%;
  background: #f5f5f2
    url("https://gwblog.lognlook.com/img/contents/rouletter_476x476_201026.png")
    no-repeat;
  background-size: 100%;
  transform-origin: center;
  transition-timing-function: ease-in-out;
  transition: 2s;
}

.rouletter-panel-lunch {
  width: 100%;
  height: 100%;
  background: #f5f5f2
    url("https://gwblog.lognlook.com/img/contents/lunch_menu_panel.png")
    no-repeat;
  background-size: 100%;
  transform-origin: center;
  transition-timing-function: ease-in-out;
  transition: 2s;
}

.rouletter-panel-customize {
  width: 350px;
  height: 350px;
  /* 룰렛판 테두리 효과 */
  /* background-color: rgba(0, 0, 0, 0.8);
  border: solid 2.5px rgba(0, 0, 0, 0.8);
  padding: 0px 0.1px 0.1px 0px; */
  /* background-size: 100%; */
  transform-origin: center;
  transition-timing-function: ease-in-out;
  transition: 2s;
  
}

.piece-image-customize {
  /* 상위 요소를 기준으로 절대 위치에 배치 */
  position: absolute;
  top: 0px;
  left: 0px;
  /* width: 150px;
  height: 150px; */
  /* 룰렛판 테두리 효과 */
  /* background-color: rgba(0, 0, 0, 0.8);
  border: solid 2.5px rgba(0, 0, 0, 0.8);
  padding: 0px 0.1px 0.1px 0px; */
  /* background-size: 100%; */
  /* transform-origin: center;
  transition-timing-function: ease-in-out;
  transition: 2s; */
  
}

.rouletter-arrow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 1px;
  background: 
    url("/img/contents/arrow_noback.png")
    no-repeat;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 40px solid rgb(179, 0, 255);
  border-bottom: 0px solid transparent;
}

.rouletter-arrow-image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height:60px;
}

.rouletter-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 80px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  /* background: #fff; */
  /* border-image: linear-gradient(to right, #fbfcb9be, #ffcdf3aa, #65d3ffaa); */
  border: 2px solid #000000;
  color: inherit;
  font-weight: 600;
  /* display: none; */
}

.rouletter-btn-customize {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 80px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  /* background: #fff; */
  /* border-image: linear-gradient(to right, #fbfcb9be, #ffcdf3aa, #65d3ffaa); */
  border: 2px solid #ff0000;
  color: #ff0000;
  font-weight: 600;
  /* display: none; */
}

.rouletter-btn-customize-icon:hover {
  transform: scale(1.1); 
  transition-timing-function: ease-out;
}

.rouletter-btn-stop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 80px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  /* background: #fff; */
  /* border-image: linear-gradient(to right, #fbfcb9be, #ffcdf3aa, #65d3ffaa); */
  border: 2px solid #000;
  color: inherit;
  font-weight: 600;
  /* display: none; */
}

.rouletter-btn-stop-icon:hover {
  transform: scale(1.1); 
  transition-timing-function: ease-out;
}

.hidden-input {
  display: none;
}

/* 돌림판 회전 애니메이션 */
.rotate{
    animation-name: ani;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;  
    animation-iteration-count: infinite;
}

@keyframes ani{
    0% { 
        transform: rotate(0deg); 
    	transition-timing-function: ease-out;
    }
    100%{ 
        transform: rotate(360deg); 
    }
}

.img_heartbeat {
  -webkit-animation-name: heartbeat;
  -webkit-animation-duration: 1.5s;
  animation-name: heartbeat;
  animation-duration: 1.5s;
}

/* 심장 두근두근 효과 */
/* macOS,linux, windodws, iOS, ipadOS, androidOS */
@-webkit-keyframes heartbeat {
  0% { transform: scale(1);
    transition-timing-function: ease-in;
  }
  25% { transform: scale(1.1); 
    transition-timing-function: ease-out;
  }
  50% { transform: scale(1); 
    transition-timing-function: ease-in;
  }
  75% { transform: scale(1.2); 
    transition-timing-function: ease-out;
  }
  100% { transform: scale(1); 
    /* transition-timing-function: ease-out; */
  }
}

@keyframes heartbeat {
  0% { transform: scale(1);
    transition-timing-function: ease-in;
  }
  25% { transform: scale(1.1); 
    transition-timing-function: ease-out;
  }
  50% { transform: scale(1); 
    transition-timing-function: ease-in;
  }
  75% { transform: scale(1.2); 
    transition-timing-function: ease-out;
  }
  100% { transform: scale(1); 
    /* transition-timing-function: ease-out; */
  }
  /* 80% { transform: scale(0.8);}
  100% { transform: scale(1);} */
  /* 45도 돌아가서 위치 위치 (10px, 10px) 이동 후 두근두근*/
  /* 0% { transform: rotate(45deg) translate(10px, 10px) scale(1); }
  25% { transform: rotate(45deg) translate(10px, 10px) scale(1); }
  30% { transform: rotate(45deg) translate(10px, 10px) scale(1.4); }
  50% { transform: rotate(45deg) translate(10px, 10px) scale(1.2); }
  70% { transform: rotate(45deg) translate(10px, 10px) scale(1.4); }
  90% { transform: rotate(45deg) translate(10px, 10px) scale(1); }
  100% { transform: rotate(45deg) translate(10px, 10px) scale(1); } */
  /* 위치 (10px, 10px) 이동 후 두근두근 */
  /* 0% { transform: translate(10px, 10px) scale(1); }
  25% { transform: translate(10px, 10px) scale(1); }
  30% { transform: translate(10px, 10px) scale(1.4); }
  50% { transform: translate(10px, 10px) scale(1.2); }
  70% { transform: translate(10px, 10px) scale(1.4); }
  90% { transform: translate(10px, 10px) scale(1); }
  100% { transform: translate(10px, 10px) scale(1); } */
}

/* 룰렛을 모달로 띄울 때 */
/* .modal-body {
  padding : 0px !important;
} */

.rouletter_modal_close:hover, .rouletter_modal_close:focus
{
  box-shadow:none;
}


.rouletter_message_modal_close_icon {
  position:relative;
  top:-5px;
  right:0px;
  color: #fff;
  margin: 0px 0px 0px 0px;
}

.rouletter_message_modal_close:hover, .rouletter_message_modal_close:focus
{
  box-shadow:none;
}

.modal-close:hover, .modal-close:focus
{
  box-shadow:none;
}

/* 이미지 드래그앤드롭 요소 */
.drop_area { 
  border: 2px dashed #ccc;
  border-radius: 8px;
  /* width: 200px; */
  /* height: 200px; */
  text-align: center; 
  padding: 10px;
  margin: 5px auto;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out; 
} 
.drop_area:hover {
  background-color: #eee; 
} 
.drop_area_text {
  font-size:.75rem;
  text-align: center;
  opacity: 0.6;
}
/* dark mode 스타일 */
[data-bs-theme="dark"] {
  .drop_area { 
    border: 2px dashed #606060;
  } 
  .drop_area:hover {
    background-color: #0d0d0d; 
  } 
}
.image_preview {
  margin: 10px auto 0px auto;
  max-width: 80%;
  /* max-height: 200px; */
  display: none;
}
.rouletter_close {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 0px 0px;
  margin: 0px 0px;
}

.rouletter_refresh {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 0px 0px;
  margin: 0px 0px;
}
.image_preview_close {
  height: 1px;
  padding: 0px 0px;
  margin: 0px 0px;
}
.rouletter_close_icon {
  position: fixed;
  top: 20px;
  right: 25px;
  /* position: relative;
  top: 15px;
  left: calc(100% - 50px); */
  opacity: 0.5;
  cursor: pointer;
}

.rouletter_refresh_icon {
  position: fixed;
  top: 20px;
  right: 70px;
  height: 30px;
  /* position: relative;
  top: 15px;
  left: calc(100% - 50px); */
  opacity: 0.5;
  cursor: pointer;
}

.rouletter_close_icon:hover,
.rouletter_refresh_icon:hover {
  /* transform: scale(1.1); */
  /* transition-timing-function: ease-out; */
  opacity: 1;
}

.image_preview_close_icon {
  position: relative;
  left: 90%;
  cursor: pointer;
  display: none;
}

/* '모든 디바이스 & 최대 너비가 576px 이하'라는 조건을 모두 만족할 때 */
@media all and (max-width:575px) {
  .image_preview_close_icon {
    left: 85%;
  }
}

.notice_area {
  background-color: #f2f1f1;
  border: 2px dashed #a8b0f7;
  border-radius: 8px;
  /* width: 200px; */
  /* height: 200px; */
  /* text-align: center;  */
  padding: 10px;
  margin: 5px auto;
  /* cursor: pointer; */
  /* transition: background-color 0.3s ease-in-out;  */
}

.notice_head {
  font-size:.75rem;
  color :#2a3fff;
  margin: 0px 5px 0px 0px;
}