:root {
  --game-292-primary: #2e3a36;
  --game-292-dark: #295a4a;
  --game-292-medium: #307b62;
  --game-292-light: #2cac6e;
  --game-292-white: #fff;
  --game-292-accent: #f34554;
  --game-292-font: 'Pretendard', sans-serif;
  --game-292-header-height: 4.0625rem;
}

* {
  box-sizing: border-box;
  transform: skew(0deg);
  letter-spacing: normal;
}

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

body,
html {
  font-size: 16px;
  font-family: Pretendard;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hidden {
  display: none !important;
}

a,
button,
.cursor-pointer {
  cursor: pointer;
}

button {
  background: none;
  border: none;
  transition: transform 0.2s, opacity 0.2s;
}

button:hover {
  opacity: 0.8;
  transform: scale(1.01);
  animation-play-state: paused;
}
button:active {
  transform: scale(0.99);
  animation-play-state: paused;
}

.image-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

img {
  user-select: none;
  -webkit-user-drag: none; /* Safari, Chrome */
  -khtml-user-drag: none; /* 옛날 Konqueror 브라우저 */
  -moz-user-drag: none; /* Firefox */
  -o-user-drag: none; /* 구형 Opera */
  -webkit-user-drag: none;
  user-select: none; /* 텍스트처럼 선택 방지 */
  -webkit-touch-callout: none;
}

input,
textarea {
  border: none;
  outline: none;
  background: none;
  width: 100%;
  border-radius: 1px; /* caret 오류 대응 */
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #295a4a !important;
  transition: background-color 9999s ease-in-out 0s !important;
  -webkit-transition: background-color 9999s ease-out;
}

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

/**
 * Common
 */
body {
  position: relative;
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--game-292-font);
  color: var(--game-292-white);
  text-align: center;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  border: none;
  background-color: none;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

button.button-1 {
  width: 27.6875rem;
  height: 6.34375rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game292/buttons/button_1.png');
  padding-bottom: 0.5rem;
}

button.button-2 {
  width: 16.40625rem;
  height: 6.40625rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game292/buttons/button_2.png');
  gap: 0.25rem;
  padding-bottom: 0.5rem;
}

button.button-2::after {
  content: '';
  width: 4.15625rem;
  height: 1.5rem;
  position: absolute;
  right: 1.98969rem;
  top: -0.5rem;
  background: url('https://cdn.banggooso.com/assets/images/game292/ui/snow.png') center / contain no-repeat;
}

button.button-3 {
  width: 28.875rem;
  height: 6.40625rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game292/buttons/button_3.png');
  display: flex;
  gap: 0.625rem;
  color: var(--game-292-white);
  padding-bottom: 0.5rem;
}

button.button-4 {
  width: 14.375rem;
  height: 6.3125rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game292/buttons/button_4.png');
  color: var(--game-292-medium);
  padding-bottom: 0.5rem;
}

button.button-5 {
  width: 14.375rem;
  height: 6.3125rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game292/buttons/button_5.png');
  padding-bottom: 0.5rem;
}

button.button-6 {
  width: 28.875rem;
  height: 6.40625rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game292/buttons/button_6.png');
  padding-bottom: 0.5rem;
}

button.button-6::after {
  content: '';
  width: 4.15625rem;
  height: 1.5rem;
  position: absolute;
  right: 1.98969rem;
  top: -0.5rem;
  background: url('https://cdn.banggooso.com/assets/images/game292/ui/snow.png') center / contain no-repeat;
}

/**
 * Icon
 */
i {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.icon-star {
  width: 1.125rem;
  height: 1.125rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game292/icons/star_shine.png);
}
.icon-star-white {
  width: 0.75rem;
  height: 0.8125rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game292/icons/star_white.png);
}
.icon-arrow {
  width: 1.125rem;
  height: 1.125rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game292/icons/arrow.png);
}
.icon-arrow:nth-of-type(2) {
  /* 좌우반전 */
}
.icon-check {
  width: 1.125rem;
  height: 1.125rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game292/icons/check.png);
}
.icon-pointer {
  width: 1.68731rem;
  height: 1.75rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game292/icons/pointer_hand.png);
}
.icon-rectangle {
  width: 0.663rem;
  height: 0.663rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game292/icons/rectangle.png);
}
.icon-replay {
  width: 1.125rem;
  height: 1.28519rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game292/icons/replay.png);
  background-size: cover;
}
.icon-santa {
  width: 1.125rem;
  height: 1.125rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game292/icons/santa.png);
}
.icon-waving {
  width: 2rem;
  height: 2rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game292/icons/waving_hand.png);
}
.icon-x {
  width: 1.125rem;
  height: 1.125rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game292/icons/x.png);
}
.icon-arrow-drop-up {
  width: 1.625rem;
  height: 1.625rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game292/icons/arrow_drop_up.png);
}
.icon-pointer-top {
  width: 1.04638rem;
  height: 1.125rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game292/ui/pointer_top.png);
}

/**
 * Header
 */
.game-wrapper .app-header,
.game-wrapper .app-header.page {
  display: block;
  position: absolute;
  width: 100%;
  height: var(--game-292-header-height);
  z-index: 999;
  border-bottom: 0;
  background: rgba(57, 97, 80, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); /* Safari 지원 */
}
.game-wrapper .app-header .app-logo {
  background-image: url(https://cdn.banggooso.com/assets/images/common/logo_2024_white.png);
  width: 9.3025rem;
}
.game-wrapper .app-header .app-header-btn.back {
  background: transparent url('https://cdn.banggooso.com/assets/images/icons/back-arrow-w.png') no-repeat center center /
    auto 1rem;
}
.app-header .app-sound,
.game-wrapper .app-header.page > a.app-sound {
  position: absolute;
  top: 0;
  right: 0;
  width: 3.5rem;
  height: 100%;
  background-size: 2rem 1.75rem;
  background-repeat: no-repeat;
  background-position: 0.5rem 1rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game280/sound-icon-on.svg);
}
.app-header .app-sound.off {
  background-image: url(https://cdn.banggooso.com/assets/images/game280/sound-icon-off.svg);
}
.app-header .app-sound.hide {
  display: none;
}

/**
 * Share Component
 */
.share-sns-list {
  display: flex;
  padding: 2.5rem 0 3.125rem 0;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.share-sns-list .list-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.share-sns-list .list-title > span {
  color: #2e3a36;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.625rem; /* 108.333% */
  letter-spacing: -0.015rem;
}
.share-sns-list .list-title .countBox {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  opacity: 0.5;
}
.share-sns-list .list-title .countBox .countImg {
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  background: url(https://cdn.banggooso.com/assets/images/game292/icons/share.png) center / contain no-repeat;
}
.share-sns-list .list-title .countBox .countNumber {
  color: #2e3a36;
  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;
}
.share-sns-list .list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
}
.share-sns-list .list li + li {
  margin: 0;
}

.share-sns-list .btn-share {
  width: 3.75rem;
  height: 3.75rem;
  background-position: center;
  background-size: 95%;
  background-repeat: no-repeat;
}

.share-sns-list .btn-share.kakao {
  background-image: url('https://cdn.banggooso.com/assets/images/game292/social/kakao_black.png');
}

.share-sns-list .btn-share.instagram {
  background-image: url('https://cdn.banggooso.com/assets/images/game292/social/instagram_black.png');
}

.share-sns-list .btn-share.twitter {
  background-image: url('https://cdn.banggooso.com/assets/images/game292/social/twitter_black.png');
}

.share-sns-list .btn-share.link-copy {
  background-image: url('https://cdn.banggooso.com/assets/images/game292/social/link_copy_black.png');
}

/**
 * Intro
 */
.game-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.game-wrapper .game-intro {
  padding-bottom: 0;
}

.game-intro .img-box {
  margin: 0;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

.game-intro .nickname-wrap {
  position: absolute;
  top: 12.28rem;
  left: 5.97rem;
  display: flex;
  width: 15rem;
  height: 4.375rem;
  padding: 1.25rem;
  justify-content: center;
  align-items: center;
  border-radius: 0.75rem;
  border: 0.125rem solid #e0e0e0;
  background: #fff;
}
.nickname-wrap input[type='text'] {
  color: #295a4a;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.06rem;
}
.nickname-wrap:has(input[type='text']:focus) {
  border: 0.125rem solid #2e3a36;
}
.nickname-wrap input[type='text']::placeholder {
  opacity: 0.5;
}
.game-intro .game-count {
  display: flex;
  width: 27.5rem;
  padding: 1.5rem 0;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
}
.game-intro .game-count::after {
  content: '';
  width: 100%;
  height: 0.09375rem;
  position: absolute;
  bottom: 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(46, 58, 54, 0.7) 0,
    rgba(46, 58, 54, 0.7) 0.563rem,
    transparent 0.563rem,
    transparent 1.125rem
  );
}
.game-intro .game-count .count-label {
  color: #2e3a36;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.015rem;
}
.game-intro .game-count .count-label::before {
  display: none;
}
.game-intro .game-count .count-num {
  color: #2e3a36;
  text-align: center;
  font-family: Pretendard;
  font-size: 2.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.0275rem;
}
.game-intro .share-sns-list {
  margin: 0;
  padding-bottom: 8.75rem;
}

/**
 * Game - Maker
 */
.game-wrap .full-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: scroll;
}

/**
 * 미리보기 섹션
 */
#store-interior {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + var(--scroll-content-height, 0px));
  overflow: hidden;
  pointer-events: none;
}

#store-interior > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top;
  pointer-events: auto;
}

/**
 * 상단 문구
 */
#title-wrap {
  display: flex;
  width: 100%;
  padding: 1.25rem 1.25rem 0 1.25rem;
  justify-content: center;
  align-items: flex-start;
  margin-top: var(--game-292-header-height);
}

#title-wrap h1 {
  display: flex;
  padding: 0.625rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.4);
  color: var(--game-292-white);
  text-align: center;
  font-family: var(--game-292-font);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.02rem;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.25);
}

/**
 * Result Page
 */
.game-result {
  padding: calc(var(--game-292-header-height) + 6.87rem) 0 0;
  height: auto;
  background-color: var(--game-292-dark);
  background-position: 0 var(--game-292-header-height);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(https://cdn.banggooso.com/assets/images/game292/ui/maker_result.png);
}
.game-result.player {
  padding-top: calc(var(--game-292-header-height) + 6.37rem);
  background-image: url(https://cdn.banggooso.com/assets/images/game292/ui/player_result.png);
}

/* Top Decoration */
.game-result .result-top-character {
  position: absolute;
  top: calc(var(--game-292-header-height) + 1rem);
  left: 2.5rem;
  width: 7.1075rem;
  height: 8.125rem;
  background: url(https://cdn.banggooso.com/assets/images/game292/ui/character.png) center/contain no-repeat;
}
.game-result .result-bubble {
  position: absolute;
  top: calc(var(--game-292-header-height) + 2.42rem);
  left: 11.65rem;
  display: flex;
  flex-direction: column;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  color: #2e3a36;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.0225rem;
  box-shadow: 0 0 0.313rem 0 rgba(0, 0, 0, 0.25);
}
.game-result .result-bubble svg {
  position: absolute;
  width: 0.78913rem;
  height: 0.53094rem;
  left: 1.75rem;
  bottom: -0.53094rem;
}

/* Result Content */
.game-result .result-content {
  display: flex;
  padding: 2.125rem 1.875rem 2.5rem 1.875rem;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  border-radius: 1.75rem;
  background: #f1faf5;
}
.game-result .result-content::after {
  content: '';
  width: 6.375rem;
  height: 4.4375rem;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(https://cdn.banggooso.com/assets/images/game292/ui/result_border.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.game-result .result-content h2 {
  color: #2e3a36;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 132%;
}
.game-result .result-content h3 {
  color: #307b62;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 132%;
  margin-bottom: 1.25rem;
}
.game-result .result-content h4 {
  color: #307b62;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: 132%;
}
.game-result .result-content .result-image {
  width: 22.51063rem;
  height: 8.125rem;
}
.game-result.player .result-content .result-image {
  width: 19rem;
  height: 10rem;
}
.game-result .result-content .result-share-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.88rem;
  padding-top: 1.25rem;
}
.game-result .result-content .result-share-wrap .result-share-title {
  color: #2e3a36;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.0125rem;
}
.game-result .result-content .result-share-wrap .result-share-title b {
  color: #379b7a;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.0125rem;
}

.game-result .result-content .share-sns-list {
  padding: 0;
  margin: 0;
}
.game-result .result-content .share-sns-list .list-title {
  display: none;
}

/* Gift Info (Player only) */
.game-result .result-gift-info {
  display: flex;
  padding-top: 1.125rem;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  padding-bottom: 1.75rem;
}
.game-result .result-gift-info::after {
  content: '';
  width: 100%;
  height: 0.125rem;
  position: absolute;
  bottom: 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(46, 58, 54, 0.2) 0,
    rgba(46, 58, 54, 0.2) 0.563rem,
    transparent 0.563rem,
    transparent 1.125rem
  );
}

.game-result .result-gift-title {
  display: flex;
  padding: 0.625rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 62.4375rem;
  background: #f34554;
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.game-result .result-gift-message {
  color: #307b62;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%; /* 1.925rem */
  padding-top: 0.5rem;
}

/* Awareness Section (Player only) */
.game-result .result-awareness-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.game-result .result-awareness-section .awareness-intro {
  padding-top: 1.75rem;
  color: #295a4a;
  font-family: Pretendard;
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 2.275rem */
  letter-spacing: -0.0325rem;
  margin-bottom: 1.75rem;
}

.game-result .result-awareness-section .awareness-swiper {
  width: 100%;
  overflow: visible;
}
.game-result .result-awareness-section .awareness-swiper .swiper-slide {
  width: 25rem;
  margin-right: 0.75rem;
}

.game-result .result-awareness-section .awareness-swiper .swiper-pagination {
  display: flex;
  width: 27.5rem;
  padding-top: 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  position: static;
}
.game-result .result-awareness-section .awareness-swiper .swiper-pagination .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  background: rgb(41, 90, 74);
  border-radius: 62.4375rem;
  transition: all 0.3s;
  margin: 0;
}
.game-result .result-awareness-section .awareness-swiper .swiper-pagination .swiper-pagination-bullet-active {
  width: 1.25rem;
  background: #44b47e;
}

.game-result .result-awareness-section .awareness-message {
  color: #295a4a;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 1.4625rem */
  letter-spacing: -0.0225rem;
  padding-top: 3.12rem;
}

.game-result .result-awareness-section .awareness-campaign {
  color: #295a4a;
  font-family: Pretendard;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 2.45rem */
  letter-spacing: -0.035rem;
  padding-top: 0.38rem;
  padding-bottom: 2.5rem;
}

/* Components Container */
.game-result .result-components {
  display: flex;
  width: 31.25rem;
  padding: 2.75rem 0 4.375rem 0;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.game-result .result-components .share-sns-list {
  margin: 0;
  padding: 0.62rem 0 1.63rem 0;
}
.game-result .result-components .share-sns-list .list-title > span,
.game-result .result-components .share-sns-list .list-title .countBox .countNumber {
  color: #fff;
}
.game-result .result-components .share-sns-list .list-title .countBox .countImg {
  background-image: url(https://cdn.banggooso.com/assets/images/game292/icons/share_white.png);
}
.game-result .result-components .share-sns-list .btn-share.kakao {
  background-image: url(https://cdn.banggooso.com/assets/images/game292/social/kakao.png);
}
.game-result .result-components .share-sns-list .btn-share.instagram {
  background-image: url(https://cdn.banggooso.com/assets/images/game292/social/instagram.png);
}
.game-result .result-components .share-sns-list .btn-share.twitter {
  background-image: url(https://cdn.banggooso.com/assets/images/game292/social/twitter.png);
}
.game-result .result-components .share-sns-list .btn-share.link-copy {
  background-image: url(https://cdn.banggooso.com/assets/images/game292/social/link_copy.png);
}

/**
 * 하단 고정 섹션
 */
.game-result .contents-more {
  margin: 0;
  margin-top: -0.063rem;
  padding-top: 0;
  padding-bottom: 2.19rem;
  border-radius: 0;
  flex-flow: wrap;
  background-color: transparent;
}

.game-result .contents-more .contents-main {
  align-items: flex-start;
  flex: 1 100%;
  margin: 0;
  padding: 0 2rem 1rem;
}

.game-result .contents-more .contents-main .contents-logo {
  width: 8.75rem;
  height: 1.875rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/logo_white.png) no-repeat center / contain;
}

body.en-US .game-result .contents-more .contents-main .contents-logo {
  width: 8.75rem;
  height: 1.875rem;
  background-image: url(https://cdn.banggooso.com/assets/images/common/LOGO-US.png) !important;
}

.contents-more .contents-main .contents-logo img {
  display: none;
}

.game-result .contents-more .contents-main .sub-text {
  font-family: 'Pretendard';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.125rem;
  color: #fff;
  /* 141.667% */
}

.game-result .contents-more .contents-list {
  flex: 1 100%;
  margin-top: 0;
  padding: 0;
  border-left: 0;
}

.game-result .contents-more .contents-list .game-btn {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 1.66669rem 2rem;
  border: 0;
  border-top: 0.063rem solid rgba(255, 255, 255, 0.5);
  background: transparent;
  order: 1;
  border-radius: 0;
}

.game-result .contents-more .contents-list .game-btn a {
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: #fff;
  order: -1;
}

.game-result .contents-more .contents-list .game-btn:before {
  display: block;
  position: static;
  width: 2rem;
  height: 2rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/ico_result_more_content_arrow_grey.png) no-repeat
    center / contain;
  transform-origin: center;
}

.game-result .recommend-list {
  width: 100%;
  margin: 0;
  border-top: 0;
}

.game-result .recommend-list:before {
  background: #f34554;
  height: 16.125rem;
}

.game-result .recommend-list .inner .title {
  margin: 0;
  margin-bottom: 0.48rem;
  padding: 0;
  padding-left: 1.46rem;
  font-family: 'Pretendard';
  font-size: 1.50013rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #fff;
  letter-spacing: -0.033rem;
}

.game-result .recommend-list .swiper-container {
  width: 100%;
  margin-bottom: 3.25rem;
  padding: 0;
  padding-left: 2.17rem;
}

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

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

.game-result .recommend-list .slide-box {
  width: 10.83406rem;
  height: 13.33425rem;
  border: 0.3rem solid #000;
}

.game-result .recommend-list .slide-box .slide-text {
  background-color: #000;
  font-family: 'Pretendard';
  font-size: 1.00006rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.022rem;
}

.game-result .recommend-list .btn-wrap {
  position: relative;
  z-index: 999;
  padding-bottom: 4rem;
}

.game-result .recommend-list .btn-wrap .btn-white-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 15.25106rem;
  height: 4.00025rem;
  background: #fff;
  font-family: 'Pretendard';
  font-size: 1.25006rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #000;
  text-align: center;
  letter-spacing: -0.0275rem;
  border-radius: 2.00013rem;
}

/**
 * Modal Common Styles
 * 모달 타입별로 스타일 관리
 *
 * 사용법:
 * <div class="modal-overlay modal-red">
 * <div class="modal-overlay modal-white">
 */

/* ============================================
   Base Modal Styles (공통)
   ============================================ */

/* Modal Overlay */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.modal-overlay.active {
  display: flex;
}

/* Modal Content Base */
.modal-content {
  display: flex;
  width: 26.25rem;
  padding: 1.25rem 1.875rem 1.75rem 1.875rem;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  border-radius: 1.25rem;
  box-shadow: 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.2);
  position: relative;
}

/* Modal Header */
.modal-header {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  top: 0;
  z-index: 1;
}

.modal-header h2 {
  font-family: Pretendard;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

/* Modal Close Button */
.modal-close {
  background: url(https://cdn.banggooso.com/assets/images/game292/icons/close.png) center / 2rem no-repeat;
  border: none;
  font-size: 1.75rem;
  cursor: pointer;
  line-height: 1;
  padding: 1.25rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  transition: opacity 0.2s;
}

.modal-close:hover {
  opacity: 0.7;
}

/* Modal Body */
.modal-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.05rem;
}

.modal-body h3 {
  text-align: center;
  font-family: Pretendard;
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

.modal-body .modal-title-wrap {
  display: flex;
  padding: 0.5rem 0 1rem 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

/* ============================================
   Modal Type: Red (기본 - 이벤트, 안내용)
   ============================================ */

.modal-red .modal-content {
  background: #f34554;
}

.modal-red .modal-close {
  color: #fff;
}

.modal-red .modal-header h2 {
  color: #333;
}

.modal-red .modal-body,
.modal-red .modal-body h3 {
  color: #fff;
}

/* ============================================
   Modal Type: White (입력 폼, 확인용)
   ============================================ */

.modal-white .modal-content {
  background: #fff;
}

.modal-white .modal-close {
  color: #999;
}

.modal-white .modal-header h2 {
  color: #333;
}

.modal-white .modal-body,
.modal-white .modal-body h3 {
  color: #333;
}

/* ============================================
   Modal Type: Transparent (이미지 중심)
   ============================================ */

.modal-transparent .modal-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.modal-transparent .modal-close {
  color: #333;
}

.modal-transparent .modal-header h2 {
  color: #333;
}

.modal-transparent .modal-body,
.modal-transparent .modal-body h3 {
  color: #333;
}

/**
 * Player Common Styles
 * Step 1, 3에서 공통으로 사용되는 스타일
 */

/* Container */
.player-step {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;

  background-image: url(https://cdn.banggooso.com/assets/images/game292/backgrounds/play_bg.png);
  background-size: 100% auto;
  background-position: top;
  background-repeat: no-repeat;
  padding-top: var(--game-292-header-height);
}

/* Answer Form */
.player-step .answer-form {
  display: flex;
  width: 100%;
  padding: 1.5rem 2.5rem 7.375rem;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  margin-top: 1.125rem;
  position: relative;
  flex: 1;
}
.player-step .answer-form::before {
  content: '';
  position: absolute;
  top: -1.1rem;
  left: 50%;
  height: 1.125rem;
  background: url(https://cdn.banggooso.com/assets/images/game292/ui/answer_list.png) bottom / cover no-repeat;
  width: calc(100% + 1px);
  transform: translateX(-50%);
}

/* Input Wrap */
.player-step .answer-form .input-wrap {
  display: flex;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 1.25rem;
  background: rgba(0, 0, 0, 0.04);
  border: 0.125rem solid transparent;
  box-shadow: 0 0 2.5rem 0 rgba(0, 0, 0, 0.03);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
  margin-bottom: 1.25rem;
  height: 4.375rem;
}

.player-step .answer-form .input-wrap.active {
  border: 0.125rem solid #2e3a36;
  background: #fff;
}

.player-step .answer-form .input-wrap input[type='text'] {
  flex: 1;
  color: #2e3a36;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 150%;
  transition: color 0.3s ease;
}

.player-step .answer-form .input-wrap input::placeholder {
  color: #b0b0b0;
  transition: color 0.3s ease;
}

.player-step .answer-form .input-wrap span {
  color: #b0b0b0;
  text-align: right;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 150%;
  transition: color 0.3s ease;
}
.player-step .answer-form .input-wrap.active span {
  color: #2e3a36;
}

/* Answer Group */
.player-step .answer-form .scroll-wrapper {
  flex: 1 1 0;
  overflow-y: scroll;
  margin-right: -1.3425rem;
  padding-right: 1rem;
  padding-bottom: 5.9rem;
  min-height: 5.875rem;
}
.player-step .answer-form .scroll-wrapper::-webkit-scrollbar {
  display: block;
  width: 0.3125rem;
}
.player-step .answer-form .scroll-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.player-step .answer-form .scroll-wrapper::-webkit-scrollbar-thumb {
  opacity: 0.5;
  border-radius: 62.4375rem;
  background: linear-gradient(0deg, rgba(44, 172, 110, 0.5) 0%, rgba(44, 172, 110, 0.5) 100%), #fff;
}
.player-step .answer-form .scroll-wrapper::-webkit-scrollbar-thumb:hover {
  opacity: 1;
  transform: scale(1.1);
}
.player-step .answer-form .answer-group {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  column-gap: 0.75rem;
  row-gap: 1rem;
  flex-wrap: wrap;
  /* overflow-y: scroll;
  flex: 1 1 0; */
  align-self: stretch;
}

.player-step .answer-form .answer-group input[type='radio'] {
  display: none;
}

.player-step .answer-form .answer-group .answer-item {
  display: flex;
  padding: 1.5rem 0.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  word-break: keep-all;
  cursor: pointer;

  border-radius: 1.25rem;
  background: rgba(0, 0, 0, 0.04);

  color: rgba(46, 58, 54, 0.8);
  text-align: center;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 130%;

  transition: all 0.3s ease;
  transform: scale(1);
}

.player-step .answer-form .answer-group .answer-item:hover {
  transform: scale(1.01);
}

.player-step .answer-form .answer-group input[type='radio']:checked + label {
  background: #f34554;
  color: #fff;
  transform: scale(1.01);
}

/* Button Wrap */
.game-wrap.player .button-wrap {
  display: flex;
  padding: 1.5rem 0 2rem 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 10%);
  flex-shrink: 0;
  position: absolute;
  bottom: 0;
  width: auto;
}
.game-wrap.player > .button-wrap {
  width: 100%;
}

.game-wrap.player .button-wrap p {
  color: rgba(46, 58, 54, 0.8);
  text-align: center;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 130%;
}

.game-wrap.player .button-wrap button {
  display: flex;
  width: 26.25rem;
  height: 4.875rem;
  justify-content: center;
  align-items: center;

  border-radius: 1.25rem;
  border: 0.125rem solid #2cac6e;
  background: #2cac6e;
  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.25);

  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: normal;
}