@charset "UTF-8";

@font-face {
  font-family: 'GMarketSans';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'),
       url('/fonts/GmarketSansLight.otf') format('opentype'),
       url('/fonts/GmarketSansLight.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'GMarketSans';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'),
       url('/fonts/GmarketSansMedium.otf') format('opentype'),
       url('/fonts/GmarketSansMedium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'GMarketSans';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'),
       url('/fonts/GmarketSansBold.otf') format('opentype'),
       url('/fonts/GmarketSansBold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --fontsize-tit:20px;
  --fontsize-desc:12px;
}


body {
  font-family: 'GMarketSans', "SF Pro Display", -apple-system, sans-serif;
  background-image: linear-gradient(to bottom, #000c25, #07133a, #000a1e);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
.wrapper {
  max-width: 768px; 
  max-width:360px; 
  width:100%; 
  margin: 0 auto; 
  overflow:hidden; 
  background-color: #000c25; 
  /* background:linear-gradient(to bottom, #000C25 20%, #430ecf, #7b008e,#000C25 80%, #dfdfdf, #fff); */
  /* background:linear-gradient(to bottom, #000C25 20%, #430ecf, #7b008e,#000C25 80%, #dfdfdf, #fff); */
  box-shadow: 0 0 50px rgba(4,61,87,0.6); 
  animation:breath 3s infinite alternate
}

@keyframes breath {
  0% {box-shadow: 0 0 50px rgba(4,61,87,0.6);}
  100% {box-shadow: 0 0 10px rgba(4,61,87,0.2);}
}

[class^="section-"] {
  min-height: 200px;
  padding: 40px 0;
  box-sizing: border-box;
}
[class^="icon-"]{
  width: 24px;
  height: 24px;
  border-radius:100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.icon-camera {
  background-image: url('./images/icon-camera.svg');
  fill: #fff;
}
.text-shadow-blue {  
  color:#045f74;
  -webkit-text-stroke: 0.5px #d7f9f9;
  text-shadow: 0 0 12px #1ec7ef;
}
.text-shadow-pink {
  color:#6f087c;
  -webkit-text-stroke: 0.5px #f5d1f9;
  text-shadow: 0 0 12px #d91eef;
}
.box-shadow-blue {
  box-shadow: 0 0 12px #1ec7ef;
}
.box-shadow-pink {
  box-shadow: 0 0 12px #f5a5ff;
}

.gradient-text {
  background: linear-gradient(45deg, #91fefe, #fff, #aaf3f3, #fff); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  text-shadow: 0 0 6px rgba(255,255,255,0.3);
  /* -webkit-text-stroke: 0.5px rgba(255,255,255,0.5); */
}

.color-blue {color: #91fefe;}
.color-pink {color: #f5a5ff;}

.align-c {text-align: center;}
.mt20 {margin-top: 20px;}

.underline {text-decoration: underline; text-underline-offset: 2px;}

/* ===================================================== */


/* section: 행사 고지 영역 */
.section-intro {position:relative; z-index:0; padding-top:0; background-image: linear-gradient(to bottom, #000, transparent);}
.section-intro .logo {position: absolute; top:10px; left:10px; width: 100px; height: auto;}

.section-intro .tit { font-size: var(--fontsize-tit); font-weight: 700; text-align: center; letter-spacing: -0.7px; line-height: 1.4; margin-top: 20px; margin-bottom: 20px;;}
.section-intro .article {background: rgb(145 254 254 / 10%); padding: 20px 10px; box-sizing: border-box; border-radius: 20px; margin: 0 10px; border: 1px solid rgb(145 254 254 / 30%);}
.section-intro .article+.article {margin-top: 10px;}
.section-intro .article-1 {position: relative;}
.section-intro .article-1:before {position: absolute; content:''; bottom:0; left:50%; transform: translateX(-50%); width: 100%; height: 100%; background: url(./images/bg-timessquare.jpg) no-repeat 0 0/cover; opacity: 0.1; z-index: -1;}
.section-intro .article .art-tit {text-align: center; margin-bottom: 10px;}
.section-intro .article .art-desc {text-align: center; font-size: var(--fontsize-desc); padding: 10px 0; box-sizing: border-box; margin: 0 10px; ;}
.section-intro .article .art-desc small {font-size: 9px;}
.section-intro .article .art-desc .note {text-align: center; font-size: 9px;}
.section-intro .article .art-desc .em {font-size: 16px; font-weight: 700;}
.section-intro .article .art-desc .img-wrap {text-align: center;}
.section-intro .article .art-desc p+p {margin-top: 10px;}
.section-intro .article .art-desc p+.img-wrap {margin-top: 10px;}
.section-intro .article .art-desc .time {display:inline-block; border:1px solid #f5a5ff; border-radius: 20px; padding: 2px 7px 0; box-sizing: border-box; color: #f5a5ff;}
.section-intro .article .art-desc .date,
.section-intro .article .art-desc .place {font-size: 16px; font-weight: 700;}
/* .section-intro .article .art-desc .date {font-size: 16px; font-weight: 700; color: #f5a5ff; text-shadow: 0 0 12px rgba(30, 199, 239, 0.5)}
.section-intro .article .art-desc .place {font-size: 16px; font-weight: 700; color: #91fefe; text-shadow: 0 0 12px rgba(30, 199, 239, 0.5)} */
.section-intro .article .art-desc .icon-pin {display:inline-block; width: 18px; height: 18px; background: url(./images/icon-pin.svg) no-repeat center/contain; transform: translateY(3px); margin-right:5px;}

.section-intro .mid-deco {}
.section-intro .mid-deco p {text-align: center;margin-top: 20px;}
.section-intro .mid-deco-2 {}
.section-intro .mid-deco-2 p {text-align: center;margin: 20px 0; background:linear-gradient(to bottom, transparent,#000C25)}
.section-intro .mid-wording {margin: 40px 0; text-align: center; font-weight: 700; font-size: 18px;}
.section-intro .mid-wording small {font-size: 14px;}

/*  */
.section-local .zone {display: flex; flex-wrap:wrap; gap:5px; padding: 0 10px; margin-top:20px;}
.section-local .zone li {width: 100%; background: rgba(244, 153, 255, 0.1); padding: 15px; box-sizing: border-box; border-radius: 10px;}
.section-local .zone li .name {font-size: 14px; font-weight: 700; margin-bottom: 5px;}
.section-local .zone li .desc {font-size: 11px; font-weight: 300; letter-spacing: -0.1px;}
.section-local .mid-wording {margin: 40px 0; text-align: center; font-weight: 700; font-size: 18px;}
.section-local .mid-wording small {font-size: 14px;}

/* section: 이벤트 안내 */
.section-event {
  position:relative;
  z-index:0;
  background-image: linear-gradient(to bottom, transparent, #430ecf, #7b008e, transparent);
}
.section-event:before {position: absolute; content:''; top:-1%; left:0; width: 100%; height: 100%; background: url(./images/bg-linewave2.png) no-repeat 0 0/contain; opacity: 0.5; z-index: -1;}
.section-event .tit {font-size: var(--fontsize-tit); text-align: center; color: #fff; font-weight: 700; margin-bottom: 10px;}
.section-event .subtit {font-size: var(--fontsize-tit); text-align: center; font-weight: 700;}

.section-event .reward-tit {font-size: var(--fontsize-tit); font-weight:700; text-align: center; margin-top: 0px;}
.section-event .reward {display: flex; flex-direction:column; gap: 5px; padding: 0 10px; margin-top: 10px;}
.section-event .reward li {background: rgba(244, 153, 255, 0.1); padding: 20px 15px; box-sizing: border-box; border-radius: 20px; text-align: center;}
.section-event .reward li .name {font-weight: 700;}
.section-event .reward li .img-wrap {margin:20px 0;}
.section-event .reward li .img-wrap img {max-width: 80%;}
.section-event .reward li .desc{margin-top: 10px; font-size:12px }

.section-event .bull-dot {padding: 0 10px; box-sizing: border-box; font-size: 10.5px; font-weight: 300; margin-top: 10px;}
.section-event .bull-dot li {}

.section-event .step-tit {font-size: var(--fontsize-tit); text-align: center; margin-top: 60px;}
.section-event .step {display:flex; flex-direction: column; gap:10px; padding: 0 10px; 
  box-sizing:border-box; counter-reset:step; margin-top: 10px;}
.section-event .step li {border:1px solid rgba(244, 153, 255, 0.3); padding: 10px 10px 10px 40px; border-radius: 12px; box-sizing:border-box; position: relative; background-color:rgba(244, 153, 255, 0.1); color: #f4c8f9;}
.section-event .step li:before {position: absolute; top:10px; left: 10px; counter-increment: step 1;content:counter(step);text-align: center; border:1px solid #f499ff; width:20px; height: 20px; border-radius: 100%; color: #f499ff; box-shadow: 0 0 12px #d91eef; font-size:10px; line-height: 20px; box-sizing: border-box;}
.section-event .step li strong {color: #fff;}
.section-event .arrow {text-align:center; font-size: 40px; line-height: 1; margin-top: 10px;}
/* .section-event .step li {border:1px solid rgba(244, 153, 255, 0.3); padding: 10px 10px 10px 84px; border-radius: 30px; box-sizing:border-box; position: relative; background-color:rgba(244, 153, 255, 0.1); color: #f4c8f9;}
.section-event .step li:before {position: absolute; top:10px; left: 55px; counter-increment: step 1;content:counter(step);text-align: center; border:1px solid #f499ff; width:20px; height: 20px; border-radius: 100%; color: #f499ff; box-shadow: 0 0 12px #d91eef; font-size:10px; line-height: 20px; box-sizing: border-box;} */


/* section: 뱃지 제작 및 다운로드 영역 */
#cameraCard .btn-wrap,
#badgeCard .btn-wrap {display: flex; gap: 5px; margin-top: 20px; }
#cameraCard .btn-wrap .btn,
#badgeCard .btn-wrap .btn {height:50px; border-radius: 30px; white-space: nowrap; line-height: 50px; text-align: center; box-sizing: border-box;}
#cameraCard .btn-filled,
#badgeCard .btn-filled {
  /* background: #f499ff;  */
  /* background: #ED8006;  */
  /* color: #fff;  */
  background: #fff; 
  color: #f04804;
  width: 70%;
}
#cameraCard .btn-outline,
#badgeCard .btn-outline {
  background: transparent;
 border: 1px solid #fff;
 color: #fff;
 /* border: 1px solid #f499ff;
 color: #f499ff; */
 width: 30%;
}

#cameraCard.hidden {padding:0;height: 0;}
#cameraCard,
#badgeCard {
  /* padding: 60px 10px; */
  padding: 30px 10px;
  box-sizing: border-box;
  /* background: linear-gradient(-144deg, #b601d1 30%, #5823e6 94%, #b601d1 109%); */
  background: linear-gradient(to bottom, transparent, rgba(209, 64, 4, 1),rgba(255, 187, 0, 1),rgba(209, 64, 4, 1) 90%, transparent);
  /* background: radial-gradient(rgba(255, 187, 0, 1),rgba(209, 64, 4, 1), transparent 70%); */
  text-align:center;
}
#cameraCard .inner,
#badgeCard .inner {
  width: 98%;
  border-radius: 20px;
  padding: 30px 20px;
  /* padding: 60px 20px; */
  border:1px solid #F09C04;
  background: rgba(240,153,4,0.3);
  /* border:1px solid #f499ff;
  background: rgba(244,153,255,0.3); */
  box-sizing: border-box;
}
#cameraCard .tit,
#badgeCard .tit {
  font-size: var(--fontsize-tit);
  text-align: center; 
  font-weight: 700;
  margin-bottom: 10px;
}
#cameraCard .desc {
  font-size: var(--fontsize-desc);
  font-weight: 300;
}
.camera-circle { 
  width:128px; height: 128px; border-radius: 100%; margin: 20px auto; 
  /* background: rgba(244,153,255,0.2);  */
  background: rgbA(255, 255, 255, 0.3); 
  box-shadow: 0 0 10px rgba(4,61,87,0.2); 
  display: flex; justify-content: center; align-items: center; }
#cameraCard .btn-start-camera { width: 100%;
 height: 50px;
 background:#fff;
 color: #000c25;
 border-radius: 25px;
 margin-top: 10px;
 font-size: var(--fontsize-tit);
 line-height: 50px;
 text-align: center;
 color: #f04804; 
 /* color: #7b008e;  */
}
#cameraCard .btn-start-camera {
  box-shadow: 0 0 10px rgba(138, 78, 0, 0.5);
}
#cameraCard video { transform: scaleX(-1); width: 100%;}

#cameraCard {position: relative; z-index:0;}



#badgeCard {}
#badgeCard .tit {}
#badgeCard input {font-family: inherit; font-size: inherit; line-height: inherit; width: 100%; background: rgba(255,255,255, 0.25); border-radius:6px; height: 50px; line-height: 50px; padding: 0 10px; box-sizing: border-box; border:none; color: #fff; margin-bottom: 20px;}
#badgeCard input::placeholder {width: 100%; color: #fff; opacity: 0.8;}

#spinner {margin-bottom: 2rem;}
#spinner .animate-spin{
  animation: spin 1s linear infinite;
  width: 64px;
  height: 64px;
  border-radius: 100%;
  border: 4px solid #fff;
  border-top-color: transparent;
  margin:2rem auto;
}
@keyframes spin {
  100% {transform: rotate(360deg);}
}
#spinner .txt{text-align: center;}

#badgeCanvas {width: 100%;}


/* flip motion effect */
@keyframes flipLoop {
  0% {
    transform: rotateY(0deg);
  }
  25% {
    transform: rotateY(180deg); /* 뒷면 보임 */
  }
  50% {
    transform: rotateY(180deg); /* 뒷면 유지 */
  }
  75% {
    transform: rotateY(0deg); /* 앞면으로 복귀 */
  }
  100% {
    transform: rotateY(0deg); /* 앞면 유지 */
  }
}
/* 플립 컨테이너 */
.flip-container {
  perspective: 1000px; /* 3D 효과를 위한 원근법 설정 */
  width: 290px; /* 캔버스 너비와 동일하게 설정 */
  max-width:100%;
  height: 516px; /* 캔버스 높이와 동일하게 설정 */
  margin: 0 auto; /* 중앙 정렬 */
  position: relative; /* 자식 요소의 절대 위치를 위함 */
}
.flip-container.hidden {
  height: 0;
}

/* 플립될 요소 */
.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* 플립 시 회전 */
.flip-container.flipped .flipper {
  transform: rotateY(180deg);
  animation: flipLoop 8s infinite ease-in-out forwards;
}

/* 앞면과 뒷면 공통 스타일 */
.flipper .front, 
.flipper .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 뒷면이 보이지 않도록 숨김 */
  display: flex; /* 내부 요소 중앙 정렬을 위해 */
  justify-content: center;
  align-items: center;
}

/* 뒷면 스타일 */
.flipper .back {
  transform: rotateY(180deg); /* 뒷면은 180도 회전하여 시작 */
}

/* 뒷면 이미지 스타일 (배지 뒷면 이미지가 캔버스 크기에 맞게) */
.flipper .back .badge-back-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지가 요소에 꽉 차게 */
  display: block; /* img 태그 아래 여백 제거 */
}




/* section: 신라면 오리지널, 툼바 제품 특징 간단하게 표시 */
.section-ads { background: #000a1e; }
.section-ads .tit{ text-align: center; font-size: 12px; font-weight: 500}
.section-ads .video-container{ position:relative; height:0; padding-bottom:56.25%; margin:20px 0;}
.section-ads .video-container iframe{ position:absolute; top:0; left:0; width:100%; height:100%;}

.section-prod {
  color: #000a1e;
  /* background-color: #ffffff;  */
  padding-top:60px;
  background: linear-gradient(to bottom, transparent 1%, #fff7d7 4%);
}
.section-prod .prod-tit {text-align:center; font-weight: 700; font-size: var(--fontsize-tit); margin-bottom: 20px;}
.section-prod .prod-tit img {max-width: 80%;}
.section-prod .prod-wrap {display: flex; flex-direction:column; gap:60px; }
.section-prod .prod-wrap .prod-item{width: 100%;}
.section-prod .prod-wrap .prod-item .name{text-align: center; font-size: 16px; font-weight: 700; margin-bottom: 6px;}
.section-prod .prod-wrap .prod-item .feature {text-align: center; font-size: 16px;  margin-bottom: 15px;}
.section-prod .prod-wrap .prod-item .desc{text-align: center; font-size: 12px; font-weight: 300;margin-bottom: 16px;}
.section-prod .prod-wrap .prod-item .img-wrap {position: relative; padding-bottom: 15px;;}
.section-prod .prod-wrap .prod-item .sizzle-img {width: 100%;}
.section-prod .prod-wrap .prod-item .sizzle-img img{}
.section-prod .prod-wrap .prod-item .prod-img {position: absolute; right:15px; bottom:-15px; max-width: 40%;}
.section-prod .prod-wrap .prod-item .prod-img img{filter:drop-shadow(2px 4px 6px rgba(0,0,0,0.2));}
.section-prod .prod-wrap .prod-item-2 .prod-img{max-width: 60%;}
.section-prod .prod-wrap .prod-item-3 .prod-img {position: unset; max-width: 80%; margin:auto; text-align: center;}
.section-prod .prod-wrap .prod-item .link {width: 90%; height: 50px; background: #EE2223; color: #ffffff; border-radius: 25px; margin: 30px auto 30px; font-size: var(--fontsize-tit); line-height: 52px; text-align: center; box-shadow: 0 6px 10px rgba(206, 25, 25, 0.5);}

.section-prod .product-group-img {text-align: center;}
.section-prod .remark {text-align: center; font-size: 20px; font-weight: 700; color: #EE2223; line-height: 1.4;}

/* .section-prod .prod-wrap .prod-item .prod-img img {max-width: 60%; max-height: 280px;} */
/* .section-ads .prod-wrap {display: flex; justify-content: space-around;}
.section-ads .prod-wrap .prod-item{width: 50%;}
.section-ads .prod-wrap .prod-item .name{text-align: center; font-size: 12px; font-family: 700; margin-bottom: 6px;}
.section-ads .prod-wrap .prod-item .desc{text-align: center; font-size: 9px; font-weight: 300;margin-bottom: 16px;}
.section-ads .prod-wrap .prod-item .img-wrap {text-align: center; }
.section-ads .prod-wrap .prod-item .img-wrap img {max-height: calc(310px / 4);} */








/* section5: 신라면 오리지널, 툼바 제품 구매 링크 */
.section-purchase {}
.section-purchase .tit {
  text-align: center; 
  font-weight: 700;
  font-size: var(--fontsize-tit); 
  letter-spacing: -0.5px;
  line-height: 1.4;
}
.section-purchase .btn-amazon {
  /* width: calc(670px / 2);
  height: calc(138px / 2);
  background:url('./images/btn-amazon.png') no-repeat center/contain; */
  position: relative;
  z-index: 0;
  margin: auto;
  margin-top: 144px;
  width: 100%;
  max-width: 330px;
  height: 50px;;
  border-radius: 6px;
  background: #fff;
  text-align: center;
  line-height: 50px;
  font-size: var(--fontsize-tit);
  color: #132369;
  line-height: 53px;
}
.section-purchase .btn-amazon:before {
  position: absolute;
  content:'';
  z-index: -1;
  top: -146px;
  left:0;
  width: 100%;
  height: calc(304px / 2);
  background:url('./images/btn-amazon-derpy.png') no-repeat center/contain;
}

/* footer */
.legal-line {text-align: center; background-color: #fff7d7;}
.legal-line img {max-width: 80%; height: auto;;}