@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+JP:wght@400;700&family=Noto+Sans+KR:wght@400;700&display=swap');
@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

/* reset */
* {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
h1, h2, h3, h4, h5, h6, p {margin: 0; padding: 0;}
p {display: inline-block;}
ol, ul {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none; color: inherit;}
button {padding: 0; cursor: pointer; line-height: 1.5; color: inherit;}
button, select {-webkit-appearance: none; background: none; border: none; outline: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
address {font-style: normal;}


html {/* min-height: 898px; */ overflow-x: hidden; font-size: 22px; color: #f4ecdd; -webkit-text-size-adjust: 100%; }
::selection {color: #1c1d29; background-color: #d92e5b;}

body {background: linear-gradient(to bottom, #1a1c20, #222730, #612438);}
body.en {font-family: 'Noto Sans', -apple-system, sans-serif;}
body.kr {font-family: 'Isamanru', -apple-system, sans-serif;}
body.jp {font-family: 'Noto Sans JP', -apple-system, sans-serif; font-optical-sizing: auto;}

#wrap {width: 520px; height: calc(var(--vh, 1vh) * 100); margin: 0 auto;}
.inner {display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: hidden;}

.redBtn {
  border: 3px solid transparent;
  border-radius: 10px;
  background-image: linear-gradient(to bottom, #be2f53, #c62e54, #df2856 50%), linear-gradient(180deg,rgba(190, 47, 83, 1) 0%, rgba(255, 120, 154, 1) 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  font-weight: 800;
  overflow: hidden;
}

.redGrBtn {
  border: 3px solid transparent;
  border-radius: 10px;
  background-image: linear-gradient(rgba(31, 35, 42, 0.9), rgba(31, 35, 42, 0.9)), linear-gradient(180deg,rgba(190, 47, 83, 1) 0%, rgba(255, 120, 154, 1) 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  font-weight: 800;
  overflow: hidden;
}

.grayBtn {
  border: 3px solid transparent;
  border-radius: 10px;
  background-image: linear-gradient(to bottom, #343d4c, #272b33 50%), linear-gradient(0deg,rgba(52, 61, 76, 1) 0%, rgba(177, 189, 213, 1) 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  font-weight: 800;
  overflow: hidden;
}


#start {display: none;}
#start {height: 100%;}
#start h1 {display: flex; margin-top: 100px; justify-content: center; text-align: center;}
#start h1 img {width: 300px;}
#start .main-img-wrap {position: relative; padding: 0 35px; text-align: center;}
#start .main-img-wrap img {width: 82%;}
#start .main-img-wrap h2 {position: absolute; width: 100%; padding: 0 35px; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 35px; text-shadow: #000000 0px 0 8px;}
#start .main-img-wrap h2 span {color: #d92e5b;}

#start .main-btn-wrap {padding: 0 35px 30px;}
#start .main-btn-wrap .btn-start {width: 100%; font-size: 25px; line-height: 66px;}
#start .main-btn-wrap .lang-wrap {display: flex; justify-content: space-between; margin-top: 10px;}
#start .main-btn-wrap .lang-wrap button {flex-grow: 1; max-width: 150px; line-height: 56px; border-radius: 10px; font-size: 19px;}
#start .main-btn-wrap .lang-wrap button:not(.redGrBtn) {background: rgba(31, 35, 42, 0.8);}
#start .main-btn-wrap .lang-wrap button:nth-child(1) {font-family: 'Noto Sans KR', -apple-system, sans-serif; font-optical-sizing: auto;}
#start .main-btn-wrap .lang-wrap button:nth-child(2) {margin: 0 10px; font-family: 'Noto Sans', -apple-system, sans-serif; font-optical-sizing: auto;}
#start .main-btn-wrap .lang-wrap button:last-child {font-family: 'Noto Sans JP', -apple-system, sans-serif; font-optical-sizing: auto;}

#test {display: none;}
#test .top {display: none;}
#test .question {display: none;}

#test {height: 100%;}
#test .inner {justify-content: flex-start; background: url(../img/test_bg.png) no-repeat 50% 45%;}

#test .top {padding: 30px 20px 0;}
#test .top .progress-bar {
  width: 100%;
  height: 18px;
  background: #000;
  border: 3px solid transparent;
  border-radius: 5px;
  background-image: linear-gradient(black), linear-gradient(0deg,#121212 0%, #84857c 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
#test .top .progress-bar .bar {display: block; width: 11.11%; height: 100%; background: #d92e5b; border-radius: 2px; transition: width 0.3s ease;}
#test .top .page-txt {text-align: center; margin-top: 10px; font-size: 20px;}
#test .top .current {color: #d92e5b;}

#test .question {justify-content: center; height: 100%; text-align: center;}
#test .question .story {width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 356px;}
#test .question .story .text p {padding: 0 10px 100px; font-size: 22px; font-weight: 700; line-height: 1.8;}
#test .question .btn-next {display: none; position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); width: 150px; font-size: 18px; line-height: 60px;}


#test .question .quiz {display: none; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; padding: 30px 25px;}
#test .question .quiz > p {font-weight: 700;}
#test .question .quiz.noimg > p {margin: auto; padding-top: 30px; line-height: 1.8;}
#test .question .quiz img {width: 100%;}
#test .question .choice button {width: 100%; height: 76px;}
#test .question .choice button:first-child {margin-bottom: 10px;}
#test .question .choice button p {padding: 0 24px; font-size: 18px; font-weight: 400;}

.kr #test .question .quiz p, .kr #test .question .choice button p {word-break: keep-all;}


#test .q1 .quiz img {max-width: 440px;}
#test .q8 .quiz img {max-width: 295px;}
#test .q8 .choice button:last-child {margin-top: 10px;}
#test .q8 .quiz > p {margin-top: 45px;}


.animate-fadeInUpSmall {
  display: flex;
  animation: fadeInUpSmall 1.8s ease forwards;
}
@keyframes fadeInUpSmall {
  0% {
    opacity: 0;
    transform: translateY(25px); /* 여기 값을 줄이면 살짝만 올라옴 */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.animate-fadeIn {
  display: flex;
  animation: fadeIn 1.8s ease forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



#loading {display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; background: url(../img/loading_bg.png) no-repeat 50% 50%;}
#loading p {font-size: 22px; font-weight: 400; line-height: 1.4;}
#loading em {font-style: normal;}
#loading img {display: block; margin: 0 auto 30px; height: 101px;}

@keyframes blinkdot {
    0% { opacity: .2; }
    20% { opacity: 1; }
    100% { opacity: .2; }
}
#loading span {
    animation-name: blinkdot;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
#loading span:nth-child(3) {
    animation-delay: .2s;
}
#loading span:nth-child(4) {
    animation-delay: .4s;
}


#result {padding: 25px; height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.2) transparent;}
/* #result .card {height: 870px; background: url(../img/result_card_bg.png) no-repeat 50% 0%; background-size: contain;} */
#result .card {aspect-ratio: 470 / 870; max-width: 470px; margin: 0 auto; background: url(../img/result_card_bg.png) no-repeat 50% 0%; background-size: 100% 100%;}
#result .card .inner {align-items: center; justify-content: flex-start;}
#result .card .inner .logo {max-width: 194px; width: 100%; margin: 60px 0 30px;}
#result .card .inner .top {width: 100%; /* height: 610px; */ flex: 75; padding: 0 25px; display: flex; flex-direction: column; align-items: center; text-align: center;}
#result .card .inner .top h4 {font-size: 20px; font-weight: 400; margin: 20px 0 10px;}
#result .card .inner .top h2 {font-size: 30px; font-weight: 700; color: #cca966;}
#result .card .inner .vam {max-width: 214px; width: 100%;}

.en #result .card .inner .top h4 {font-size: 18px;}
.en #result .card .inner .top h2 {font-size: 26px;}

#result .bottom {position: relative; width: 100%; flex: 25; /* height: 240px; */ padding: 15px; text-align: center;}
#result .bottom p {position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); padding: 0 55px; font-size: 18px; font-weight: 400; line-height: 1.4;}
.kr #result .bottom p {word-break: keep-all;}

.txt-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid transparent;
  opacity: 0.75;
  border-radius: 22px;
  background-image: linear-gradient(to bottom, #272b33 0%, #212121 100%), linear-gradient(0deg,#a98458 0%, #ffedd2 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  font-weight: 400;
  overflow: hidden;
}

#result .reservation {margin-top: 50px; color: #fff;}
#result .reservation .img-wrap {width: 100%; height: 200px; padding: 0 50px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 22px; font-weight: 700; line-height: 1.3; background: url(../img/result_item.png) no-repeat 50% 50%; background-size: contain;}

#result .reservation .txt-wrap {margin: 30px 0 40px; text-align: center; font-size: 16px; line-height: 1.5;}
#result .reservation .txt-wrap h4 {margin-top: 30px; font-weight: 700; font-size: 18px;}

.kr #result .reservation .txt-wrap {font-family: "Noto Sans KR", sans-serif;}
.en #result .reservation .txt-wrap {font-family: "Noto Sans", sans-serif;}

#result .store-wrap {display: flex; align-items: center; justify-content: center;}
#result .store-wrap a {display: flex; margin: 0 10px;}
#result .store-wrap a img {height: 52px;}

#result .share-wrap {margin: 60px 0; text-align: center; font-size: 24px;}
#result .share-wrap .btn-wrap {margin-top: 30px;}
#result .share-wrap .btn-wrap button {margin: 0 8px; width: 60px; height: 60px;}

#result .go-restart {display: block; width: 100%; font-size: 28px; text-align: center; line-height: 76px;}

@media screen and (max-width: 520px) {
  #wrap {width: 100%;}
  #start .main-img-wrap img {width: 95%;}
  #start h1 {margin-top: 60px;}
  #start h1 img {width: 270px;}
  #start .main-img-wrap h2 {font-size: 30px;}
  #start .main-btn-wrap {padding: 10px 10px 16px;}
  #start .main-btn-wrap .btn-start {font-size: 20px; line-height: 60px;}
  #start .main-btn-wrap .lang-wrap button {font-size: 16px; line-height: 48px;}
  
  #test .top .page-txt {font-size: 16px;}
  
  #test .question .story .text p {font-size: 18px;}
  #test .question .quiz {padding: 16px 10px}
  #test .question .quiz p {font-size: 18px;}
  #test .question .choice button {height: 64px;}
  #test .question .choice button p {font-size: 16px;}
  
  #test .q1 .quiz img {max-width: 300px; margin-top: 15px;}
  #test .q8 .quiz img {max-width: 245px;}
  
  #result .card .inner .logo {margin: 40px 0 27px;}
  
  #result .reservation {margin-top: 40px;}
  #result .share-wrap {font-size: 20px;}
  #result .go-restart {font-size: 20px; line-height: 60px;}
}


@media screen and (max-width: 499px) {

  #test .question .story .text p {font-size: 18px;}
  #test .question .choice button p {padding: 0 20px;}
  #test .question .btn-next {bottom: 40px;}

  #result {padding: 20px;}

  #result .card {height: 621px; margin: 0 auto;}
  #result .card .inner .logo {max-width: 144px; margin: 45px 0 15px;}
  #result .card .inner .vam {max-width: 152px;}
  #result .card .inner .top h4 {font-size: 15px;}
  #result .card .inner .top h2 {font-size: 22px;}

  .en #result .card .inner .top h4 {font-size: 13px;}
  .en #result .card .inner .top h2 {font-size: 19px;}

  #result .bottom .txt-box {max-width: 310px; margin: 0 auto;}
  #result .bottom p {font-size: 14px; padding: 0 40px;}

  #result .reservation {margin-top: 40px;}
  #result .reservation .img-wrap {height: 143px; font-size: 18px;}
  #result .reservation .txt-wrap {font-size: 14px; margin-bottom: 30px;}
  #result .reservation .txt-wrap h4 {font-size: 18px; margin-top: 24px;}

  .en #result .reservation .txt-wrap br {display: none;}

  #result .store-wrap a {margin: 0 8px;}
  #result .store-wrap a img {height: 40px;}
  #result .share-wrap {font-size: 18px; margin: 50px 0;}
  #result .share-wrap .btn-wrap button {width: 47px; height: 47px; margin: 0 6px;}
  #result .share-wrap .btn-wrap button img {width: 100%;}
}



@media screen and (max-height: 700px) {
  #start h1 {margin-top: 40px;}
  #start h1 img {width: 240px;}

  #test .q1 .quiz img {max-width: 250px;}
  #test .q8 .quiz img {max-width: 180px;}
  #test .q8 .quiz > p {margin-top: 20px;}
}