/* 
  수정하고 싶은 곳 검색으로 찾기: 
  1.인트로 스타일 2.문제 스타일 3.결과 스타일 
*/

/* font */
@font-face {
  font-family: 'Ownglyph eunbyul21';
  src: url('https://cdn.banggooso.com/assets/fonts/Ownglyph-eunbyul21.ttf') format('truetype');
  font-style: normal;
}

@font-face {
  font-family: 'Cafe24 Meongi B';
  src: url('https://cdn.banggooso.com/assets/fonts/Cafe24Meongi-B-v1.0.otf') format('opentype');
  font-style: normal;
}

/* reset.css */

html,
body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: 'Pretendard';
  text-align: center;
}

@media (max-width: 500px) {
  html,
  body {
    font-size: 3.2vw;
  }
}

button,
li,
ul,
dt,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
div,
a,
p,
span,
b {
  transform: skew(0);
}

.app-main {
  background-color: #fff6e5;
}

.game-wrap:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 9.125rem;
  bottom: 0;
  background: url('https://cdn.banggooso.com/assets/images/game232/common/bottom-bg.png') no-repeat bottom;
  background-size: contain;
}

/* 헤더 */

.game-wrapper .app-header .app-header-btn.back {
  background-image: url('https://cdn.banggooso.com/assets/images/game220/header/header_back.png');
  background-size: 23%;
  width: 3.5rem;
}

.game-wrapper .app-header .app-logo {
  background-size: contain;
  background-image: url('https://cdn.banggooso.com/assets/images/common/logo_2024.png');
}

.game-wrapper .app-header.wv .app-logo {
  background-image: url('https://cdn.banggooso.com/assets/images/game232/common/logo.png');
  width: 14.5rem;
}

.app .app-header.intro-header {
  position: fixed;
  z-index: 1;
  width: 100%;
  border: none;
}

.game-wrapper.basic .game-wrap {
  position: relative;
  width: 100%;
}

.game-wrapper.basic .app-header {
  height: 4rem;
  border: none;
  background-color: white;
}

.game-wrapper .app-header.page {
  position: relative;
  height: 4rem;
}

.app-header.wv.intro:not(.question) .back {
  display: none;
}

.game-wrapper .game-title {
  font-family: 'Pretendard';
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  background-color: transparent;
}

.game-wrapper.basic .test-controller-top .game-stage-wrap,
.game-wrapper.basic .test-controller-top .back-btn-wrap {
  visibility: hidden;
}

.game-wrapper.basic .test-progress-header {
  padding: 0 0 2.5rem;
}
.game-wrapper.basic .test-controller-top {
  margin: 0;
  height: 3.75rem;
  padding: 0 1.625rem;
}

.game-wrap .game-progress,
.game-wrap .game-progress .game-progress-inner {
  height: 0.313rem;
}

.game-wrap .game-progress .game-progress-inner {
  background-color: #3aa0c8;
}

.game-wrap .game-body .question-image {
  margin: 0 auto;
  padding: 0.62rem 0 1.5rem;
  width: 25rem;
}

/* 인트로 */
.game-wrapper .game-intro {
  padding: 0;
  height: 100%;
}

.game-wrapper .game-intro:not(.started) {
  display: flex;
  flex-direction: column;
}

.game-intro .title {
  background-color: #fff6e5;
}

.game-intro .title .intro_background_top {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-intro .content {
  display: flex;
  width: 31.25rem;
  padding: 0rem 1.875rem 2.5rem;
  flex-direction: column;
  align-items: center;
  background-color: #44a5c8;
  flex-grow: 1;
}

.game-intro .title .speech-bubble-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.game-intro .title .speech-bubble-wrap .name {
  position: relative;
  width: 100%;
  height: 25.125rem;
  display: flex;
  justify-content: center;
  overflow: auto;
  pointer-events: none;
}

.game-intro .title .speech-bubble-wrap .name img {
  height: 25.125rem;
  letter-spacing: -0.01688rem;
  top: 25.125rem;
  box-sizing: border-box;
  position: absolute;
  padding-bottom: var(--offset);
}

.game-intro .title .speech-bubble-wrap .name img::before,
.game-intro .title .speech-bubble-wrap .name img::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1.14rem;
}

.game-intro .title .speech-bubble-wrap .name img::before {
  left: -1.38rem;
}

.game-intro .title .speech-bubble-wrap .name img::after {
  right: -1.38rem;
}

.game-intro .title .speech-bubble-wrap .name img[data-show] {
  transform: translateY(-100%);
}

.game-intro .title .speech-bubble-wrap .name img[data-up] {
  transform: translateY(-200%);
}

.game-intro .title .text-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JejuDoldam';
  color: #000;
  text-align: center;
  font-size: 2.75rem;
  font-weight: 400;
  line-height: 3.75rem; /* 136.364% */
  gap: 0.625rem;
}

.game-intro .title .text-wrap .name {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: auto;
  pointer-events: none;
  width: 10.625rem;
  height: 3.688rem;
  padding: 0.875rem 0.75rem;
  border-radius: 0.25rem;
  font-family: Pretendard;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.95rem;
  text-align: center;
  background: #0000001a;
  align-items: center;
}

.game-intro .title .text-wrap .name span {
  display: flex;
  flex-direction: column;
  height: 3.688rem;
  align-items: center;
  top: 3.688rem;
  box-sizing: border-box;
  position: absolute;
  padding-bottom: var(--offset);
  justify-content: center;
}

.game-intro .title .text-wrap .name span[data-show] {
  transform: translateY(-100%);
  transition: 0.5s transform ease-in-out;
}

.game-intro .title .text-wrap .name span[data-up] {
  transform: translateY(-200%);
  transition: 0.5s transform ease-in-out;
}

.game-intro .title .text-wrap .though {
  font-family: Pretendard;
  font-size: 26px;
  font-weight: 600;
  line-height: 31.2px;
  text-align: center;
  font-size: 1.625rem;
}

.game-intro .title .intro-content-top {
  width: 100%;
  position: relative;
  transform: translateY(50%);
}

.game-intro .content .name-input-wrap {
  margin: 1.75rem auto 1.25rem;
}

.game-intro .content .name-input-wrap input {
  position: relative;
  z-index: 2;
  width: 25rem;
  height: 3.875rem;
  padding: 1.125rem 1.25rem;
  border-radius: 0.625rem;
  border: 0.125rem;
  background-color: #ffffff;
  font-family: Pretendard;
  font-size: 1.375rem;
  line-height: 1.65rem;
  text-align: center;
  font-weight: 700;
  color: #000;
}
.game-intro .content .name-input-wrap input::placeholder {
  font-weight: 500;
  color: #000000b2;
}

.game-intro .content button.start {
  width: 27.5rem;
  cursor: pointer;
  border-radius: 0.625rem;
  background: #000;
  display: flex;
  height: 5rem;
  padding: 0.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.625rem;
}

.game-intro .game-count {
  margin: 0;
  padding: 2.5rem 0 1rem;
  border-bottom: 1px solid #00000033;
  width: 100%;
}

.game-intro .game-count .count {
  font-family: Pretendard;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.79rem;
  letter-spacing: -0.01em;
  text-align: center;
  color: #000000;
}

.game-intro .game-count .count-num {
  font-family: Pretendard;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 3.282rem;
  letter-spacing: -0.01em;
  text-align: center;
  color: #000000;
}

.game-intro .share-wrap {
  padding-bottom: 6.25rem;
}

.game-intro .share-sns-list {
  padding-top: 2.625rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
}

.game-intro .name-input-bubble-wrap {
  display: none;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  padding: 0.5rem 0 1rem;
}

.game-intro .name-input-bubble-wrap img {
  width: 1.125rem;
  height: 0.9375rem;
  margin-top: -0.2rem;
}

.game-intro .name-input-bubble {
  width: 15.625rem;
  display: flex;
  padding: 1rem 0rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.625rem;
  background: #fff;
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem; /* 140% */
  letter-spacing: -0.0125rem;
}

.game-intro .name-input-bubble #user-name {
  background: #10abfe;
  display: flex;
  padding: 0.125rem 0.375rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem; /* 140% */
  letter-spacing: -0.0375rem;
}

.game-intro .content .intro-logo {
  width: 14.5rem;
}

.game-intro .notification-box {
  width: 25rem;
  padding: 1.125rem 1.5rem;
  margin-top: 1.5rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.15);
  color: #000;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem;
  letter-spacing: -0.01375rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3125rem;
}

.game-intro .notification-box > div,
.game-intro .notification-box > div strong {
  display: flex;
  flex-direction: row;
  line-height: 1.75rem;
}

.game-intro .notification-box > div strong {
  margin-right: 0.5rem;
}

.game-intro .notification-box .name {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: auto;
  pointer-events: none;
  width: 12rem;
  height: 1.75rem;
  font-weight: 700;
  text-align: center;
  align-items: center;
}

.game-intro .notification-box .name span {
  display: flex;
  flex-direction: column;
  height: 1.75rem;
  align-items: center;
  top: 1.75rem;
  box-sizing: border-box;
  position: absolute;
  padding-bottom: var(--offset);
  justify-content: center;
}

.game-intro .notification-box .name span[data-show] {
  transform: translateY(-100%);
  transition: 0.5s transform ease-in-out;
}

.game-intro .notification-box .name span[data-up] {
  transform: translateY(-200%);
  transition: 0.5s transform ease-in-out;
}

/* 문제 */
.game-wrapper.basic .game-body {
  padding-top: 0;
}

.game-wrapper.basic .game-body .question-title {
  font-family: 'Ownglyph eunbyul21';
  font-size: 1.75rem;
  line-height: 2.5rem;
  text-align: center;
  text-shadow: -0.031rem 0 #000000, 0.031rem 0 #000000, 0.031rem 0 #000000, -0.031rem 0 #000000;
  margin: 0;
  letter-spacing: 0.031rem;
}

.game-wrap .game-body .question-options button.question-option {
  padding: 1.5rem 1.25rem;
  border-radius: 0.625rem;
  border: none;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.875rem;
  text-align: center;
  height: 6.75rem;
  border-radius: 0.625rem;
  border: 2px solid rgba(0, 0, 0, 0.1);
  background: #fff;
}

.game-wrap .game-body .question-options button.question-option:target,
.game-wrap .game-body .question-options button.question-option:focus,
.game-wrap .game-body .question-options button.question-option:active {
  background-color: #ffd471;
  font-weight: 700;
  border: none;
}

@media (max-width: 500px) {
  .game-wrapper.basic .game-body .question-options .question-option {
    font-size: 1.25rem;
  }
}

/* 결과 */
.game-wrapper.basic .game-result {
  padding: 0;
}

.game-wrapper .game-result .game-title {
  height: 3.75rem;
  border-bottom: 0.047rem solid #0000001a;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-result .result-title {
  padding: 2rem 0px 1.5rem;
  font-family: Ownglyph eunbyul21;
  font-size: 1.75rem;
  font-weight: 400;
  text-shadow: -0.031rem 0 #000000, 0.031rem 0 #000000, 0.031rem 0 #000000, -0.031rem 0 #000000;
}
.game-result .result-title b {
  font-size: 1.875rem;
  text-shadow: -0.047rem 0 #000000, 0.047rem 0 #000000, 0.047rem 0 #000000, -0.047rem 0 #000000;
  display: inline-block;
  line-height: 2.338rem;
  letter-spacing: 0.063rem;
}
.game-result .result-title b::before {
  content: '';
  height: 0.938rem;
  bottom: 0.1rem;
  position: absolute;
  left: 50%;
  width: 100%;
  z-index: -1;
  padding: 0 0.5rem;
  box-sizing: content-box;
  transform: translateX(-50%);
}

.game-result .result-title #title-ENFJ::before {
  background-color: #ef93b8;
}
.game-result .result-title #title-ENFP::before {
  background-color: #ff624d;
}
.game-result .result-title #title-ENTJ::before {
  background-color: #f9e89f;
}
.game-result .result-title #title-ENTP::before {
  background-color: #ff7c59;
}
.game-result .result-title #title-ESFJ::before {
  background-color: #59c8ea;
}
.game-result .result-title #title-ESFP::before {
  background-color: #ffa101;
}
.game-result .result-title #title-ESTJ::before {
  background-color: #e1fb62;
}
.game-result .result-title #title-ESTP::before {
  background-color: #cde633;
}
.game-result .result-title #title-INFJ::before {
  background-color: #d3e59a;
}
.game-result .result-title #title-INFP::before {
  background-color: #b2c746;
}
.game-result .result-title #title-INTJ::before {
  background-color: #c7eaff;
}
.game-result .result-title #title-INTP::before {
  background-color: #d9ccea;
}
.game-result .result-title #title-ISFJ::before {
  background-color: #aed9ff;
}
.game-result .result-title #title-ISFP::before {
  background-color: #ffc871;
}
.game-result .result-title #title-ISTJ::before {
  background-color: #95ddf9;
}
.game-result .result-title #title-ISTP::before {
  background-color: #f4cbd7;
}

.game-result .result-container .result-image .download-text-box {
  padding: 0.75rem 0 3.125rem;
}
.game-result .result-container .result-image .download-text-box .download-text {
  font-family: Pretendard;
  font-size: 1.125rem;
  text-align: center;
  color: #000000b2;
}
.game-result .result-container .result-image .download-text-box .download-btn {
  display: flex;
  padding: 0.625rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  border-radius: 62.4375rem;
  background: #000;
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.5rem; /* 166.667% */
  cursor: pointer;
}

/* 결과 캡쳐 이미지 */
.game-result .result-container .result-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#capture {
  width: 25rem;
  height: 35.5rem;
  display: flex;
  justify-content: center;
}
#capture .name {
  font-family: Pretendard;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0.9rem;
  width: 100%;
  text-align: center;
}
#capture img {
  width: 100%;
  height: 100%;
}
#capture .img-object {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* 결과 소구 */
.game-result .tendency-box {
  background-color: #6ab848;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.game-result .tendency-box-wrap .tendency-box-img {
  width: 100%;
  height: 4.5625rem;
  position: relative;
}
.game-result .tendency-box-wrap .tendency-box-img:first-child {
  bottom: -1px;
}
.game-result .tendency-box-wrap .tendency-box-img:last-child {
  top: -1px;
}
.game-result .tendency-box .tendency-title {
  font-family: Ownglyph eunbyul21;
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-align: center;
  text-shadow: -0.047rem 0 #ffffff, 0.047rem 0 #ffffff, 0.047rem 0 #ffffff, -0.047rem 0 #ffffff;
  line-height: 2.125rem;
}
.game-result .tendency-box .tendency-title-border {
  width: 17.125rem;
  height: 0.313rem;
  display: flex;
}
.game-result .tendency-box .tendency-title-border img {
  width: 100%;
}
.game-result .tendency-box .tendency-desc-list {
  text-align: left;
  padding: 1.5rem 1.875rem 0;
}
.game-result .tendency-box .tendency-desc {
  display: flex;
  gap: 0.5rem;
}
.game-result .tendency-box .tendency-desc:not(:last-child) {
  padding-bottom: 0.625rem;
}
.game-result .tendency-box .tendency-desc .bullet-img {
  padding: 0.5rem 0.25rem;
  display: flex;
}
.game-result .tendency-box .tendency-desc .bullet-img img {
  width: 1.246rem;
  height: 1.246rem;
}
.game-result .tendency-box .tendency-desc .desc {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: -0.01em;
  text-align: left;
}

.game-result .result-tendency-product {
  padding: 4.375rem 1.875rem 0;
}
.game-result .result-tendency-product .tendency-product-title {
  font-family: Ownglyph eunbyul21;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 2rem;
  text-align: center;
  text-shadow: -0.031rem 0 #000000, 0.031rem 0 #000000, 0.031rem 0 #000000, -0.031rem 0 #000000;
}
.game-result .result-tendency-product .tendency-product-title b {
  font-family: Pretendard;
  font-weight: 400;
  line-height: 2.625rem;
  text-align: center;
  padding-bottom: 0.375rem;
  display: inline-block;
  padding-right: 0.25rem;
}

.game-result .result-tendency-product .tendency-product-desc-wrap img {
  width: 100%;
}

/* 이벤트 소구 */
.game-result .event-wrap {
  padding: 8rem 0 1.75rem;
  background: url('https://cdn.banggooso.com/assets/images/game232/result/event-bg.png') no-repeat top;
  background-size: 100%;
  background-color: #ffdae2;
}

.game-result .event-container .event-phrase {
  font-family: Cafe24 Meongi B;
  font-size: 3.438rem;
  font-weight: 400;
  line-height: 3rem;
  letter-spacing: -0.02em;
  text-align: center;
  color: #ffffff;
  -webkit-text-stroke: 0.125rem #e8637e;
  padding-bottom: 0.75rem;
}

.game-result .event-container .event-title {
  color: #f55173;
  font-family: Pretendard;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 2.375rem;
  letter-spacing: -0.01em;
  text-align: center;
}

.game-result .event-container .event-desc {
  color: #f55173;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem; /* 140% */
  letter-spacing: -0.0125rem;
  padding: 0.5rem 0 1rem;
}

.game-result .event-container.event-1 .event-img {
  width: 14.8rem;
}

.game-result .event-container .event-date {
  padding-top: 1.5rem;
  color: #ed6384;
  text-align: center;
  font-family: 'Pretendard Variable';
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.625rem; /* 144.444% */
  letter-spacing: -0.01125rem;
}

.game-result .event-container .event-date b {
  font-weight: 600;
}

.game-result .event-container .event-btn-wrap {
  padding: 1rem 1.875rem 0;
}

.game-result .event-container .event-btn {
  width: 100%;
  padding: 1.688rem 0;
  border-radius: 0.938rem;
  background-color: #000000;
  color: #ffffff;
  font-family: Pretendard;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.625rem;
  text-align: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  align-items: center;
}

.game-result .event-container .event-caption {
  padding-top: 0.75rem;
  color: rgba(245, 81, 115, 0.7);
  text-align: center;
  font-family: Pretendard;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
  letter-spacing: -0.00938rem;
}

.game-result .event-container .event-btn.event-hash {
  gap: 0.5rem;
}

.game-result .event-container .event-btn img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.game-result .event-container.event-2 {
  padding: 4.125rem 1.875rem 0;
}
.game-result .event-container.event-2 .event-img {
  width: 14.8rem;
  padding-top: 0.12rem;
}

.game-result .event-container .event-guide-list-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.game-result .event-container .event-guide-list {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  align-self: stretch;
}

.game-result .event-container .event-guide-list:not(:last-child) {
  border-bottom: 0.063rem solid #f55173;
  padding: 1.625rem 0rem 1.25rem 0.75rem;
}

.game-result .event-container .event-guide-list:last-child {
  display: flex;
  padding: 1.25rem 1rem 2rem 0.75rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.game-result .event-container .event-guide-list .event-guide-title {
  width: 5.375rem;
  color: #f55173;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.875rem; /* 150% */
  letter-spacing: -0.0125rem;
  text-align: left;
}

.game-result .event-container .event-guide-list:last-child .event-guide-title {
  width: auto;
}

.game-result .event-container .event-guide-list .privacy-btn {
  display: flex;
  height: 1.75rem;
  padding: 0rem 0.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.375rem;
  background: #000;
  color: #fff;
  font-family: 'Pretendard';
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem; /* 111.111% */
  letter-spacing: -0.01125rem;
  cursor: pointer;
}

.game-result .event-container .event-guide-list .event-guide-desc {
  color: #f55173;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem; /* 155.556% */
  letter-spacing: -0.01125rem;
  text-align: left;
}

.game-result .event-container.event-2 .event-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 1rem;
  padding: 0;
}

details summary::-webkit-details-marker {
  display: none;
}

.game-result .precaution-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffc9d4;
}

.game-result .precaution-container .precaution-title {
  display: flex;
  width: 31.25rem;
  height: 4.375rem;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  color: #333;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.875rem; /* 150% */
  letter-spacing: -0.0125rem;
}

.game-result .precaution-container .precaution-title .arrow-img {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  background: url('https://cdn.banggooso.com/assets/images/game232/icon/keyboard_arrow_down.png') no-repeat center
    center;
  background-size: contain;
}

.game-result .precaution-container[open] .precaution-title .arrow-img {
  background-image: url('https://cdn.banggooso.com/assets/images/game232/icon/keyboard_arrow_up.png');
}

.game-result .precaution-container .precaution-list {
  display: flex;
  padding: 0.75rem 1.875rem 2rem 1.875rem;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
}

.game-result .precaution-container .precaution-list .precaution {
  color: #333;
  font-family: 'Pretendard';
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem; /* 155.556% */
  letter-spacing: -0.01125rem;
  text-align: left;
}

/* 결과 궁합 */
.game-result .relation-type-container {
  display: flex;
  padding: 3.125rem 1.875rem;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  background: #9b58b7;
  color: #ffffff;
}

.game-result .relation-type-container .result-box.type {
  border: none;
  margin: 0;
  padding: 0;
}

.game-result .relation-type-container .result-box .result-box-title {
  width: 16.3755rem;
  height: 6rem;
  background: url('https://cdn.banggooso.com/assets/images/game232/common/relation-title.png') no-repeat center top;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  text-align: center;
  text-shadow: -0.047rem 0 #000000, 0.047rem 0 #000000, 0.047rem 0 #000000, -0.047rem 0 #000000;

  font-family: 'Ownglyph eunbyul21';
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.625rem; /* 150% */
  letter-spacing: -0.0175rem;
  background-size: contain;
}

.game-result .relation-type-container .result-box .result-box-title::before {
  display: none;
}

.game-result .relation-type-container .result-box .img-halt-box {
  padding: 1.5rem 0;
  margin: 0;
  width: 27.5rem;
}

.game-result .relation-type-container .result-box .img-halt-box .list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
}

.game-result .relation-type-container .result-box .img-halt-box .list li {
  display: flex;
  padding: 1.5rem 0.75rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  align-self: stretch;
}

.game-result .relation-type-container .result-box .img-halt-box .list li .good,
.game-result .relation-type-container .result-box .img-halt-box .list li .bad {
  display: flex;
  padding: 0.25rem 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.375rem;
  background: #6ab848;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.0125rem;
  margin-bottom: 0.5rem;
}

.game-wrapper.basic .result-box .img-halt-box ul.list > li span.label-top {
  color: #fff;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.01375rem;
  background: none;
  text-indent: inherit;
  text-shadow: none;
  width: 100%;
  margin-bottom: 0.88rem;
}

.game-wrapper.basic .result-box .img-halt-box ul.list > li span.label-bottom {
  margin: 0;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.01125rem;
  margin-top: 0.88rem;
}

.game-result .relation-type-container .result-box .btn-gray-round {
  display: none;
}

.game-result .relation-type-container .game-btn {
  width: 100%;
  padding: 1.688rem 0;
  border-radius: 0.938rem;
  background-color: #000000;
  color: #ffffff;
  font-family: Pretendard;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.625rem;
  text-align: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  align-items: center;
}

.game-wrapper .game-btn-wrapper.btn_retest {
  display: flex;
  padding: 3.125rem 0rem 5rem 0rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  margin: 0;
  width: 100%;
}

.game-wrapper.basic .game-result .btn_retest > a {
  display: flex;
  width: 12.5rem;
  padding: 1.5rem 1.2rem 1.5rem 0;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.9375rem;
  background-color: #000;
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.875rem; /* 125% */
  border: none;
  box-shadow: none;
  background-position: 76% center;
}

.game-result .recommend-list:before {
  background-color: #6ab848;
  height: 16.11331rem;
}

/* 방구소 더보기 */
.game-result .contents-more {
  margin-bottom: 2.19rem;
  flex-direction: column;
  background: transparent;
}

.game-result .contents-more .contents-main {
  padding: 0 2rem 1rem;
  align-items: baseline;
  gap: 0.33331rem;
  margin: 0;
}

.game-result .contents-more .contents-main .contents-logo {
  width: 8.72094rem;
}

.game-result .contents-more .contents-main .sub-text {
  margin-top: 0;
  color: #333;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.16669rem;
}

.game-result .contents-more .contents-list {
  margin: 0;
  padding: 0;
  border: none;
}

.game-result .contents-more .contents-list .game-btn {
  border: 0;
  border-top: 1.333px solid #333;
  border-radius: 0;
  background: transparent;
  padding: 1.66669rem 2rem;
  color: #333;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

.game-result .contents-more .contents-list .game-btn::before {
  width: 2rem;
  height: 2rem;
  left: 87%;
  background-size: 30%;
  background-position: center center;
}

/* 추천 탭 */
.game-result .recommend-list {
  margin: 0;
}

.game-result .recommend-list .inner .title {
  font-size: 1.5rem;
  margin: 0;
  padding-left: 1.42rem;
  padding-bottom: 0.48rem;
}

.game-result .recommend-list .swiper-container {
  padding-bottom: 3.25rem;
}

.game-result .recommend-list .swiper-slide {
  width: 10.83406rem;
  height: 13.33425rem;
  flex-shrink: 0;
}

.game-result .recommend-list .slide-box .img-box {
  height: 10.875rem;
}

.game-result .recommend-list .slide-box .slide-text {
  color: #000;
  font-family: 'Pretendard';
  font-size: 1.00006rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.022rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-result .recommend-list .btn-wrap {
  padding-bottom: 4.01rem;
}

.game-result .recommend-list .btn-white-round {
  width: 15.25106rem;
  height: 4.00025rem;
  padding: 1.25rem;
  text-align: center;
  font-size: 1.25006rem;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.0275rem;
}

/* 결과 공유하기 */
.game-result .share-wrap {
  padding: 2.5rem 0rem 3.5rem 0rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-result .share-sns-list {
  display: flex;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
}

.share-sns-list .list-title {
  margin: 0;
  display: flex;
  gap: 0.5rem;
}
.share-sns-list .list-title span {
  color: #000;
  text-align: center;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.01375rem;
}

.share-sns-list .list-title .countBox {
  opacity: 0.6;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.share-sns-list .list-title .countBox .countImg {
  background-image: url(https://cdn.banggooso.com/assets/images/game232/icon/share.png);
  width: 1.25rem;
  height: 1.25rem;
}

.share-sns-list .list-title .countBox .countNumber {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem; /* 100% */
  letter-spacing: -0.0125rem;
  padding-left: 0.25rem;
}

.share-sns-list .list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.875rem;
  align-self: stretch;
}

.share-sns-list .list li + li {
  margin: 0;
}

.share-sns-list .btn-share {
  width: 3.375rem;
  height: 3.375rem;
}

.share-sns-list .btn-share.kakao {
  background-image: url(https://cdn.banggooso.com/assets/images/game220/intro/intro_kakao.png);
}
.share-sns-list .btn-share.instagram {
  background-image: url(https://cdn.banggooso.com/assets/images/game220/intro/intro_instagram.png);
}
.share-sns-list .btn-share.twitter {
  background-image: url(https://cdn.banggooso.com/assets/images/game220/intro/intro_twitter.png);
}
.share-sns-list .btn-share.facebook {
  background-image: url(https://cdn.banggooso.com/assets/images/game220/intro/intro_facebook.png);
}
.share-sns-list .btn-share.link-copy {
  background-image: url(https://cdn.banggooso.com/assets/images/game220/intro/intro_link.png);
}
.share-wrap .wv-btn-share {
  display: flex;
  padding: 0.625rem 2.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  border-radius: 62.4375rem;
  background: #000;
}
.share-wrap .wv-btn-share p {
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.5rem;
}
.share-wrap .wv-btn-share img {
  width: 1.25rem;
  height: 1.25rem;
}

/* 전체 유형 순위 */
.game-wrapper .list-type .game-title {
  display: flex;
  width: 31.25rem;
  height: 5.875rem;
  padding: 0rem 0.75rem 0.875rem 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.game-wrapper .list-type .game-title img {
  position: absolute;
  width: 100%;
  z-index: -1;
  top: 0;
}

.list-type .total-type-rank {
  color: #000;
  text-shadow: -0.047rem 0 #000000, 0.047rem 0 #000000, 0.047rem 0 #000000, -0.047rem 0 #000000;
  font-family: 'Ownglyph eunbyul21';
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.01875rem;
  padding: 1.25rem;
}

.list-type .test-lists {
  padding: 0 1.88rem 6.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
}

.list-item .item-wrap {
  display: flex;
  width: 27.5rem;
  padding: 1rem 1.875rem 1rem 1.75rem;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.75rem;
  background: #ffe7ce;
}

.list-item .item-wrap .content {
  display: flex;
  padding: 1.25rem 0rem 0.875rem 0rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
}

.list-item .item-wrap .content .rank {
  width: 4.50388rem;
  height: 2.6825rem;
  flex-shrink: 0;
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.015rem;
  padding-top: 0.48rem;
}

.list-item .item-wrap .content .rank img {
  position: absolute;
  width: 100%;
  z-index: -1;
  top: 0;
  left: 0;
}

.list-item .item-wrap .content .item-info {
  display: flex;
  padding-left: 0.125rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

.list-item .item-wrap .content .item-info .subject {
  color: #333;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem; /* 100% */
}

.list-item .item-wrap .content .item-info .item-title p {
  color: #333;
  font-family: Pretendard;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.875rem; /* 107.143% */
}

.list-item .item-wrap .image-box {
  width: 7.1875rem;
  position: relative;
}

.list-item .item-wrap .image-box p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JejuDoldam';
  color: #000;
  font-size: 0.6rem;
  width: 100%;
  text-align: center;
  letter-spacing: 0.0009rem;
  top: 3%;
}

.list-item .item-wrap .image-box img {
  width: 7.1875rem;
  height: 10.20625rem;
  border-radius: 0.25rem;
}

.list-item .bottom-line {
  width: 100%;
  display: block;
  margin: 1rem 0;
}

/* 이용 약관 모달 */
.privacy-modal {
  display: none;
  position: fixed;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.privacy-modal.show {
  display: flex;
}

.privacy-modal .modal-container {
  position: relative;
  border-radius: 0.9375rem;
  overflow: hidden;
}

.privacy-modal .modal {
  width: 26.25rem;
  height: 31.1rem;
  background-color: #ffffff;
  overflow: auto;
  padding: 1.5rem 1.88rem 5.6rem;
}

.privacy-modal .modal .title {
  color: #0c0c0c;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.625rem;
  letter-spacing: -0.01375rem;
  margin-bottom: 1.25rem;
}

.privacy-modal .modal .sub-title {
  color: rgba(51, 51, 51, 0.7);
  font-family: 'Pretendard';
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.625rem; /* 162.5% */
  letter-spacing: -0.01rem;
  margin-bottom: 0.38rem;
  text-align: left;
}

.privacy-modal .modal .text-1 {
  color: rgba(51, 51, 51, 0.7);
  font-family: 'Pretendard';
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5625rem; /* 166.667% */
  letter-spacing: -0.00938rem;
  margin-bottom: 0.38rem;
  text-align: left;
}

.privacy-modal .modal .text-2 {
  color: rgba(51, 51, 51, 0.7);
  font-family: 'Pretendard';
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.625rem; /* 162.5% */
  letter-spacing: -0.01rem;
  text-align: left;
}

.privacy-modal .modal-container button {
  height: 4.0625rem;
  background: #000;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.625rem;
  letter-spacing: -0.01375rem;
  cursor: pointer;
}