/* font */
@font-face {
  font-family: 'Ownglyph soomini';
  src: url('https://cdn.banggooso.com/assets/fonts/OwnglyphSoomini.woff2') format('woff2');
  font-style: normal;
}
@font-face {
  font-family: 'Yoon Childfundkorea ManSeh';
  src: url('https://cdn.banggooso.com/assets/fonts/YoonChildfundkoreaManSeh.woff2') format('woff2');
  font-style: normal;
}
@font-face {
  font-family: 'Sokcho Bada Dotum';
  src: url('https://cdn.banggooso.com/assets/fonts/SokchoBadaDotum.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
}

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

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

input:focus-visible {
  outline: none;
  caret-color: auto;
}

.game-wrapper {
  height: 100dvh !important;
  letter-spacing: normal;
}
button {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease-in-out;
}
button:active {
  transform: scale(0.96);
  filter: brightness(0.85);
}

input,
text-area,
button {
  font-family: 'Pretendard', sans-serif;
}

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

@keyframes fadeIn {
  0% {
    opacity: 0%;
  }

  100% {
    opacity: 100%;
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes rollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes floatUpDown {
  0% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(-5px);
  }
}

.floating {
  animation: floatUpDown 2s ease-in-out infinite;
}

/* common */
.game-wrapper .app-header {
  display: flex;
  height: 3.75rem;
  padding: 0rem 0rem;
  justify-content: center;
  align-items: center;
  background: #000;
  background-blend-mode: multiply;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.game-wrapper .app-header .app-logo {
  background: url(https://cdn.banggooso.com/assets/images/common/logo_2024_white.png) no-repeat center / contain;
}

.game-wrapper .app-header .app-header-btn {
  left: 0;
}

.hide {
  display: none !important;
}

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

a,
button {
  cursor: pointer;
  background: transparent;
}

a,
button,
img,
.rolling-item {
  user-select: none;
  font-weight: 500;
}

button:disabled {
  cursor: default;
  opacity: 0.3;
}

/* ios 기본 스타일 제거 */
summary {
  list-style: none;
  -webkit-appearance: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* 공유하기 */
.share-sns-list {
  display: flex;
  width: 27.5rem;
  padding: 2.75rem 0rem 9.375rem 0rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 1.25rem;
}
.share-sns-list .list-title {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 0;
}
.share-sns-list .list-title span {
  color: #000;
  text-align: center;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%; /* 1.7875rem */
}
.share-sns-list .list-title .countBox {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
}
.share-sns-list .list-title .countBox .countImg {
  background: none;
  padding: 0;
  width: 1.26925rem;
  height: 1.375rem;
  aspect-ratio: 20.31/22;
  background: url(https://cdn.banggooso.com/assets/images/game271/icons/share.svg) no-repeat center center;
  background-size: contain;
}
.share-sns-list .list-title .countBox .countNumber {
  color: #000;
  text-align: center;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 1.7875rem */
}
.share-sns-list ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
}
.share-sns-list .list li + li {
  margin: 0;
}
.share-sns-list .btn-share {
  width: 3.7505rem;
  height: 3.75rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
.share-sns-list .btn-share.kakao {
  background-image: url(https://cdn.banggooso.com/assets/images/game271/buttons/share-kakao-v1.svg);
}
.share-sns-list .btn-share.instagram {
  background-image: url(https://cdn.banggooso.com/assets/images/game271/buttons/share-instagram-v1-content.svg);
  background-size: 1.563rem;
  background-color: #fff;
  border-radius: 100%;
  border: 0.125rem solid #000;
}
.share-sns-list .btn-share.facebook {
  background-image: url(https://cdn.banggooso.com/assets/images/game271/buttons/share-facebook-v1.svg);
}
.share-sns-list .btn-share.twitter {
  background-image: url(https://cdn.banggooso.com/assets/images/game271/buttons/share-twitter-v1.svg);
}
.share-sns-list .btn-share.link-copy {
  background-image: url(https://cdn.banggooso.com/assets/images/game271/buttons/share-link-v1.svg);
}

/* 참여자 컴포넌트 */
.input-item {
  display: flex;
  padding-bottom: 1.5rem;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
}
.input-item .character-select-button {
  display: flex;
  align-items: flex-end;
}
.input-item .character-select-button::after {
  content: '';
  width: 1.5625rem;
  height: 1.5625rem;
  background: url(https://cdn.banggooso.com/assets/images/game271/icons/change.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 0;
  bottom: 0;
}
.input-item .character-preview {
  display: flex;
  width: 4.5rem;
  height: 4.5rem;
  flex-direction: column;
  align-items: center;
}
.input-item .input-wrap {
  display: flex;
  padding: 1.375rem 1.25rem;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  border-radius: 1rem;
  border: 1.5px solid #000;
  background-color: #fff;
}
.input-item .input-wrap *:not(.hide):first-child {
  flex: 1 0 0;
}
.input-item .input-wrap input,
.input-item .input-wrap p {
  color: #000;
  font-feature-settings: 'hist' on;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 1.7875rem */
  text-align: left;
}
.input-item .input-wrap input {
  width: 100%;
  border-radius: 4px;
}
.input-item .input-wrap:has(input:read-only),
.input-item .input-wrap input::placeholder {
  opacity: 0.3;
}
.input-item .input-wrap .random-button {
  width: 2rem;
  height: 2rem;
  background: url(https://cdn.banggooso.com/assets/images/game271/icons/shuffle.svg) no-repeat center center;
  background-size: contain;
}
.input-item .button--delete {
  background: url(https://cdn.banggooso.com/assets/images/game271/icons/delete.svg) no-repeat center center;
  background-size: contain;
  width: 1.875rem;
  height: 2rem;
}

/* 인트로 */
.game-wrapper .game-intro {
  padding: 0;
}
.game-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  background: linear-gradient(180deg, #fff 22.19%, #fff5f8 65.21%, #ffe0ea 100%);
}
.game-intro .game-intro-text {
  color: #000;
  text-align: center;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: #000;
  font-family: 'Yoon Childfundkorea ManSeh';
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 2.4375rem */
}
.game-intro .img-box {
  margin: 0;
}
.game-intro .img-box.padding-top-20 {
  padding-top: 1.25rem;
}
.game-intro .input-wrap {
  padding-bottom: 0.78rem;
}
.game-intro input.nickname {
  width: 21.92rem;
  height: 4.42rem;
  flex-shrink: 0;
  color: #000;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.01375rem;
  text-align: center;
  background: url(https://cdn.banggooso.com/assets/images/game271/decor/bg-input.svg) no-repeat center center;
  background-size: contain;
  border-radius: 4px; /* caret issue */
}
.game-intro input.nickname::placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.01375rem;
}
.game-intro .start-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 25rem;
  height: 5.1225rem;
  flex-shrink: 0;
  color: #000;
  text-align: center;
  font-size: 1.5625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 2.1875rem */
  background: url(https://cdn.banggooso.com/assets/images/game271/buttons/button-w401-h83.svg) no-repeat center center;
  background-size: contain;
}
.game-intro .start-btn img {
  width: 3.03563rem;
  height: 2.17969rem;
  aspect-ratio: 48.57/34.87;
}
.game-intro .game-count {
  display: flex;
  width: 27.5rem;
  padding: 3.125rem 0rem 1.5rem 0rem;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.game-intro .game-count .count-label {
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.01375rem;
}
.game-intro .game-count .count-label:before {
  content: none;
}
.game-intro .game-count .count-num {
  color: #000;
  text-align: center;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.025rem;
}
.game-intro .share-sns-list {
  margin: 0;
}

.game-intro .intro-subtitle {
  display: flex;
  padding: 0.625rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  border-radius: 0.75rem;
  background: #000;
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  position: absolute;
  top: 2.43rem;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
}
.game-intro .intro-subtitle::after {
  content: '';
  position: absolute;
  border: 0.375rem solid transparent;
  border-top-color: #000;
  bottom: -0.75rem;
}

/* 인트로 롤링 애니메이션 */
.rolling-container {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  width: 100%;
  padding-bottom: 1.875rem;
}
.rolling-track {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  animation: rollLeft 20s linear infinite;
  position: relative;
  left: -3.72rem;
  transform: translate3d(0, 0, 0); /* ios rendering error fix */
  will-change: transform; /* ios rendering error fix */
}
.rolling-track:nth-child(1) {
  width: 116.875rem; /* ios rendering error fix */
}
.rolling-track:nth-child(2) {
  width: 149.5rem; /* ios rendering error fix */
}
.rolling-item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.rolling-item .title {
  display: flex;
  padding: 0.9375rem 1.25rem 0.875rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 62.4375rem;
  background: #fff;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  color: #000;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 1.4625rem */
}
.rolling-item img {
  width: 3.90388rem;
  height: 3.25rem;
  aspect-ratio: 62.46/52;
}
.rolling-item .character-tomato {
  width: 3.3125rem;
  height: 2.8125rem;
}
.rolling-item .character-sun {
  width: 3.375rem;
  height: 3.375rem;
}
.rolling-item .character-turtle {
  width: 2.9375rem;
  height: 3rem;
}
.rolling-item .character-bread {
  width: 3.3125rem;
  height: 2.5rem;
}
.rolling-item .character-lemon {
  width: 3.625rem;
  height: 2.4375rem;
}
.rolling-item .character-heart {
  width: 3.1875rem;
  height: 2.8125rem;
}

/* 문제 페이지 */
.page-list {
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  height: 100%;
}

.page-list .page-item {
  display: flex;
  flex-direction: column;
  flex: 0 0 100%;
}

.page-list.player-step .page-item {
  justify-content: space-between;
}

.page-item .field-group {
  display: flex;
  width: 31.25rem;
  padding-bottom: 13.875rem;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
}
.field-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 3.125rem 1.875rem 2rem;
  gap: 1.25rem;
}
.field-header.question {
  padding: 2.375rem 1.875rem 1.75rem;
  gap: 1rem;
}
.bg-confetti {
  background: url(https://cdn.banggooso.com/assets/images/game271/decor/decor-bg-top.png) no-repeat top center;
  background-size: contain;
}

.player-step .page-item .field-group {
  padding-top: 1.5rem;
  flex-shrink: 1;
  padding-bottom: 0;
}

.dot-progress {
  display: flex;
  padding: 0 1.875rem 2.25rem;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
}

.dot-progress .dot {
  height: 0.1875rem;
  flex: 1 0 0;
  background-color: #d9d9d9;
  border-radius: 62.4375rem;
}

.dot-progress .dot.active {
  background-color: #ff85ac;
}

.player-step .page-item .field-group .question-number {
  display: flex;
  padding: 0.625rem 1.25rem 0.5rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1rem;
  background: #000;
  color: #fff;
  text-align: center;
  font-family: 'Sokcho Bada Dotum';
  font-weight: 500;
  font-size: 1.125rem;
  font-style: normal;
  line-height: 130%; /* 1.4625rem */
}

.field-group .decor-top-friends {
  width: 7.0625rem;
  height: 2.5rem;
}
.field-group .decor-top-paper {
  width: 3.0625rem;
  height: 3.625rem;
  aspect-ratio: 49/58;
}

.player-step .field-block {
  display: flex;
  padding-top: 1rem;
  flex-direction: column;
  align-items: center;
  gap: 1.375rem;
  align-self: stretch;
}

.player-step .field-block.answer-field {
  flex-shrink: 1;
  overflow: auto;
}

.player-step .field-block h4 {
  color: #000;
  text-align: center;
  font-family: 'Sokcho Bada Dotum';
  font-size: 1.75rem;
  font-style: normal;
  line-height: 140%; /* 2.45rem */
  font-weight: 500;
  word-break: keep-all;
}

.field-block .participant-item .input-wrapper:has(input:read-only) {
  opacity: 0.3;
}
.field-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0 1.875rem;
}
.field-block.participant-field {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.field-block.answer-field fieldset {
  display: flex;
  width: 27.5rem;
  padding: 1.375rem 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 1.25rem;
  border: 1.5px solid #000;
  background: #fff;
  flex-shrink: 1;
  overflow-y: scroll;
}

.answer-list .answer-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.answer-list .answer-item:not(:first-child)::before {
  content: '';
  display: block;
  width: 100%;
  height: 1.5px;
  background: rgba(0, 0, 0, 0.1);
}

.answer-list .answer-item label {
  display: flex;
  padding: 0.75rem 1.25rem 0.75rem 0.75rem;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
  border-radius: 0.75rem;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}

.answer-list .answer-item label:active,
.answer-list .answer-item label:has(input:checked) {
  background-color: #fff4f8;
  transform: scale(0.98);
}
.answer-list .answer-item label:active .answer-check,
.answer-list .answer-item label:has(input:checked) .answer-check {
  opacity: 1;
}

.answer-list .answer-item .character-preview {
  width: 4.25rem;
  height: 4.25rem;
  aspect-ratio: 1/1;
  background-position: center;
}
.answer-list .answer-item .answer-name {
  flex: 1 0 0;
  color: #000;
  font-feature-settings: 'hist' on;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 1.925rem */
  text-align: left;
}
.answer-list .answer-item .answer-check {
  width: 1.875rem;
  height: 1.875rem;
  opacity: 0.3;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/icons/vote.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transition: opacity 0.2s ease;
}
.answer-list .answer-item input:checked ~ .answer-check {
  opacity: 1;
}

.field-header .field-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.125rem;
  align-self: stretch;
}

.field-header .field-title h4 {
  color: #000;
  text-align: center;
  font-family: 'Sokcho Bada Dotum';
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 2.6rem */
}

.field-header .field-title .subtitle {
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 1.4rem */
}

.field-block fieldset {
  width: 100%;
}

.field-block fieldset ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.field-block fieldset ul.answer-list {
  gap: 1rem;
}

.field-block fieldset .question-item {
  display: flex;
  padding-bottom: 1.5rem;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
}

.field-block fieldset ul > li .question-number {
  width: 2rem;
  color: #000;
  text-align: center;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 1.7875rem */
}

.field-block fieldset ul > li .input-wrapper {
  display: flex;
  padding: 1.375rem 1.25rem;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  border-radius: 1rem;
  border: 1.5px solid #000;
  background-color: #fff;
  gap: 0.25rem;
}

.field-block fieldset ul > li .input-wrapper *:not(.hide):first-child {
  flex: 1 0 0;
}

.field-block fieldset ul > li .input-wrapper input,
.field-block fieldset ul > li .input-wrapper p {
  color: #000;
  font-feature-settings: 'hist' on;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 1.7875rem */
  text-align: left;
}

.field-block fieldset ul > li .input-wrapper .random-button {
  width: 2rem;
  height: 2rem;
  background: url(https://cdn.banggooso.com/assets/images/game271/icons/shuffle.svg) no-repeat center center;
  background-size: contain;
}

.field-block fieldset ul > li .delete-button {
  background: url(https://cdn.banggooso.com/assets/images/game271/icons/delete.svg) no-repeat center center;
  background-size: contain;
  width: 1.875rem;
  height: 2rem;
}

.field-block .add-item-button {
  display: flex;
  padding: 0.75rem 1rem;
  align-items: center;
  gap: 0.5rem;
  border-radius: 62.4375rem;
  border: 1.75px solid #000;
  background: #000;

  color: #fff;
  font-feature-settings: 'hist' on;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.add-item-button::before {
  content: '';
  background: url(https://cdn.banggooso.com/assets/images/game271/icons/add.svg) no-repeat center center;
  background-size: contain;
  width: 1rem;
  height: 1rem;
}

.page-item .bottom-button-area {
  display: flex;
  width: 31.25rem;
  padding: 3.75rem 1.875rem 2.5rem 1.875rem;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  position: fixed;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 26.36%);
}
.page-item .bottom-button-area .button-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.page-item .bottom-button-area .skip {
  color: rgba(0, 0, 0, 0.7);
  font-feature-settings: 'hist' on;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%; /* 1.925rem */

  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.7);
  text-underline-offset: 0.4rem;
}
.player-step .page-item .bottom-button-area {
  position: static;
  flex-shrink: 0;
}

.bottom-button-area button {
  color: #000;
  text-align: center;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%; /* 2.1rem */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.bottom-button-area button:disabled {
  opacity: 0.3;
}

.bottom-button-area button:only-child {
  width: 27.5rem;
  height: 5.125rem;
  flex-shrink: 0;
  background-image: url('https://cdn.banggooso.com/assets/images/game271/buttons/button-w439-h81.svg');
}

.bottom-button-area button:not(:only-child):first-child {
  width: 8.84rem;
  height: 5.05688rem;
  flex-shrink: 0;
  background-image: url('https://cdn.banggooso.com/assets/images/game271/buttons/button-w141-h80.svg');
}

.bottom-button-area button:nth-child(2) {
  height: 5.06063rem;
  flex: 1 0 0;
  background-image: url('https://cdn.banggooso.com/assets/images/game271/buttons/button-w286-h81.svg');
}

.participant-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.participant-item .delete-button {
  margin-left: auto;
}

#modal {
  background: rgba(0, 0, 0, 0.2);
  padding: 0rem 1.25rem 2.5rem 1.25rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  transform: none;
  display: none;
}

#modal.show {
  display: flex;
  animation: fadeIn 0.25s;
  animation-fill-mode: forwards;
}

#modal .modal-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 2.5rem;
  background: #fff;
}

#modal .modal-content {
  padding: 2.375rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

#modal.show .modal-bg {
  animation: slideUp 0.25s ease-out forwards;
}

#modal.show .modal-content {
  animation: slideUp 0.3s ease-out forwards;
}

#modal .modal-title {
  color: #000;
  text-align: center;
  font-family: 'Pretendard Variable';
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 2.275rem */
}

#modal .modal-body {
  display: flex;
  padding-top: 1.75rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

#modal .modal-body .swiper {
  width: 100%;
}

#modal .swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  position: static;
}

#modal .swiper-pagination-bullet {
  width: 0.625rem;
  height: 0.625rem;
  aspect-ratio: 1 / 1;
  margin: 0;
}

#modal .swiper-pagination-bullet-active {
  background: #000;
}

#modal .modal-wrapper .character-list {
  display: flex;
  padding-bottom: 1.5rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  flex-wrap: wrap;
  gap: 0.625rem;
}

#modal .modal-wrapper .character-list .character-preview {
  width: 4.5rem;
  height: 4.5rem;
  transition: filter 0.2s ease-in-out, border 0.2s ease;
}

#modal .character-item:active .character-preview {
  border: 1.5px solid #000;
  filter: brightness(0.8);
}

#modal .modal-button {
  width: 25rem;
  height: 4.375rem;
  color: #000;
  text-align: center;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%; /* 1.925rem */
  background: url('https://cdn.banggooso.com/assets/images/game271/buttons/button-w400-h70.svg') no-repeat center center;
  background-size: contain;
}

/* 결과페이지 */
.game-result {
  padding: 0;
  align-items: center;
}

.result-content {
  display: flex;
  width: 31.25rem;
  padding: 3.125rem 1.875rem 0rem 1.875rem;
  flex-direction: column;
  align-items: center;
}

.result-header-decoration {
  width: 4.25rem;
  height: 4.25rem;
  aspect-ratio: 1/1;
  background: url(<path-to-image>) lightgray 50% / cover no-repeat;
}

.result-container {
  display: flex;
  padding-top: 1.25rem;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  align-self: stretch;
}

.result-container .result-title {
  color: #000;
  font-family: 'Sokcho Bada Dotum';
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.result-container .result-title b {
  color: #44c3e6;
  text-align: center;
  font-family: 'Sokcho Bada Dotum';
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 2.6rem */
}

.result-container .vote-section {
  display: flex;
  width: 27.5rem;
  flex-direction: row;
  border-radius: 1.25rem;
  border: 1.5px solid #000;
  background: #fff;
  overflow-x: hidden;
}

.result-container .vote-slide {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding: 0rem 1.875rem 1rem 1.875rem; */
}

.result-container .vote-header {
  display: flex;
  width: 27.5rem;
  padding: 1.75rem 0rem 1.5rem 0rem;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border-radius: 1.25rem 1.25rem 0rem 0rem;
  background: linear-gradient(180deg, #fff 86.12%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
}

.result-container .vote-header .vote-step-indicator {
  color: #000;
  text-align: center;
  font-family: 'Sokcho Bada Dotum';
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 2.8rem */
}

.result-container .vote-header .vote-pagination {
  display: flex;
  padding: 0rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
  height: 4.25rem;
}

.result-container .vote-header .vote-pagination .vote-prev-btn {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: 0.125rem 0.1875rem 0.125rem 0rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  aspect-ratio: 1/1;
  border-radius: 62.4375rem;
  border: 1.5px solid #000;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/icons/arrow.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #000;
  background-size: 0.41313rem 0.74969rem;
}
.result-container .vote-slide:first-child .vote-header .vote-pagination .vote-prev-btn {
  visibility: hidden;
}

.result-container .vote-header .vote-pagination .vote-question-title {
  flex: 1 0 0;
  color: #000;
  text-align: center;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%; /* 2.1rem */
  word-break: keep-all;
}

.result-container .vote-header .vote-pagination .vote-next-btn {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: 0.125rem 0rem 0.125rem 0.1875rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  aspect-ratio: 1/1;
  border-radius: 62.4375rem;
  border: 1.5px solid #000;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/icons/arrow.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #000;
  background-size: 0.41313rem 0.74969rem;
  transform: scaleX(-1);
}
.result-container .vote-slide:last-child .vote-header .vote-pagination .vote-next-btn {
  visibility: hidden;
}

.result-container .vote-items {
  width: 100%;
  max-height: 34.6875rem;
  padding: 1.5rem 1.875rem 1rem 1.875rem;
  flex-shrink: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-top: -1.5rem;
}

.result-container .vote-item {
  display: flex;
  width: 23.75rem;
  align-items: center;
  display: flex;
  padding: 1.5rem 0rem;
  align-items: center;
  align-self: stretch;
  border-top: 1.5px solid rgba(0, 0, 0, 0.1);
}

.result-container .vote-item .vote-rank-indicator {
  width: 1.9375rem;
  height: 2.25rem;
  color: #000;
  text-align: center;
  font-feature-settings: 'hist' on;
  font-family: 'Ownglyph soomini';
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.result-container .vote-item:nth-child(1) .vote-rank-indicator {
  background-image: url(https://cdn.banggooso.com/assets/images/game271/rankings/gold-medal.png);
  color: transparent;
}
.result-container .vote-item:nth-child(2) .vote-rank-indicator {
  background-image: url(https://cdn.banggooso.com/assets/images/game271/rankings/silver-medal.png);
  color: transparent;
}
.result-container .vote-item:nth-child(3) .vote-rank-indicator {
  background-image: url(https://cdn.banggooso.com/assets/images/game271/rankings/bronze-medal.png);
  color: transparent;
}

.result-container .vote-item .participant-info {
  display: flex;
  padding: 0rem 0.75rem;
  align-items: center;
  flex: 1 0 0;
}

.result-container .vote-item .participant-avatar {
  width: 4.25rem;
  height: 4.25rem;
  aspect-ratio: 1/1;
}

.result-container .vote-item .participant-details {
  display: flex;
  padding-left: 0.75rem;
  flex-direction: column;
  align-items: center;
  flex: 1 0 0;
}

.result-container .vote-item .participant-header {
  display: flex;
  padding-bottom: 0.625rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.result-container .vote-item .participant-header .participant-name {
  display: -webkit-box;
  width: 6.875rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  color: #000;
  font-feature-settings: 'hist' on;
  text-overflow: ellipsis;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: left;
}

.result-container .vote-item .participant-header .vote-count {
  color: rgba(0, 0, 0, 0.6);
  font-feature-settings: 'hist' on;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.result-container .vote-item .vote-bar-container {
  height: 1.125rem;
  align-self: stretch;
  border-radius: 62.4375rem;
  overflow: hidden;
}

.result-container .vote-bar-container .vote-bar-bg {
  width: 100%;
  height: 100%;
  background: #d9d9d9;
}

.result-container .vote-bar-container .vote-bar-fill {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  border-radius: 62.4375rem;
  background: #80e5a0;
}

.restart-button-wrapper {
  display: flex;
  width: 31.25rem;
  padding-top: 2rem;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.restart-button {
  width: 14.20994rem;
  height: 4.375rem;
  aspect-ratio: 227.36/70;
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 1.925rem */
  background: url(https://cdn.banggooso.com/assets/images/game271/buttons/button-w227-h70.svg) no-repeat center center;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.23rem;
}
.restart-button::after {
  content: '';
  display: flex;
  width: 1.97938rem;
  height: 1.97938rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background: url(https://cdn.banggooso.com/assets/images/game271/icons/restart.svg) no-repeat center center;
  background-size: 1.1875rem 1.37538rem;
}

.game-result .share-sns-list {
  padding: 3.75rem 0rem 5rem 0rem;
  margin: 0;
}

.event-container {
  display: flex;
  width: 31.25rem;
  padding: 0rem 1.875rem;
  flex-direction: column;
  align-items: center;
  background: #ffe0ea;
}

.event-container .event-header {
  display: flex;
  padding: 4.375rem 0rem 1.75rem 0rem;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  align-self: stretch;
}

.event-container .event-header .event-subtitle {
  color: #ff568c;
  text-align: center;
  font-family: 'Sokcho Bada Dotum';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 2.1rem */
}

.event-container .event-header .event-title {
  color: #000;
  text-align: center;
  font-family: 'Sokcho Bada Dotum';
  font-size: 2.125rem;
  font-style: normal;
  line-height: 130%; /* 2.7625rem */
  font-weight: 500;
}

.event-container .answer-list {
  display: flex;
  padding: 1.375rem 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 1.25rem;
  border: 1.5px solid #000;
  background: #fff;
  gap: 1rem;
  max-height: 35rem;
  overflow-y: scroll;
}
.event-container .button-group {
  display: flex;
  width: 31.25rem;
  padding: 2rem 1.875rem 6.25rem 1.875rem;
  flex-direction: column;
  align-items: center;
}
.event-button-wrapper {
  display: flex;
  width: 27.5rem;
  height: 11.43092rem;
  padding-bottom: 1.25rem;
  flex-direction: column;
  align-items: flex-start;
}
.maker .event-button-wrapper {
  height: 14rem;
}

.event-top-decoration {
  position: absolute;
  bottom: 5.17rem;
  right: 0.39rem;
}
.event-top-decoration img {
  width: 8.14356rem;
  height: 5.77625rem;
  flex-shrink: 0;
}

.event-button {
  width: 27.5rem;
  height: 5rem;
  flex-shrink: 0;
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 2.1rem */
  background: url(https://cdn.banggooso.com/assets/images/game271/buttons/button-w439-h79.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  bottom: 1.25rem;
}

.event-bubble-wrapper {
  display: flex;
  padding-bottom: 0.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
  bottom: 5.42rem;
  cursor: pointer;
}

.event-bubble {
  display: flex;
  padding: 0.625rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  border-radius: 0.75rem;
  background: #000;
  color: #fff;
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 1.4rem */
}

.event-bubble-wrapper::after {
  content: '';
  position: absolute;
  left: 3.75rem;
  bottom: -0.25rem;
  width: 0;
  height: 0;
  border: 0.44525rem solid transparent;
  border-top-color: #000;
}

.create-button {
  width: 27.37313rem;
  height: 4.87856rem;
  flex-shrink: 0;
  fill: #fff;
  stroke-width: 1.75px;
  stroke: #000;
  background: url(https://cdn.banggooso.com/assets/images/game271/buttons/button-w439-h79-white.svg) no-repeat center
    center;
  background-size: contain;
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 2.1rem */
}

/* 유의사항 */
.precaution-container {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.03) 100%), #ffe0ea;
}

.precaution-container summary {
  display: flex;
  width: 31.25rem;
  height: 4.375rem;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border-bottom: 0.75px solid rgba(0, 0, 0, 0.1);
  color: #686868;
  text-align: center;
  font-family: 'Pretendard Variable';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.875rem; /* 150% */
  letter-spacing: -0.0125rem;
}
.precaution-container summary::after {
  content: '';
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/icons/arrow-up.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transform: scaleY(-1);
}
.precaution-container[open] summary::after {
  transform: scaleY(1);
}
.precaution-content {
  display: flex;
  padding: 2rem 1.875rem 3.75rem 1.875rem;
  flex-direction: column;
  align-items: start;
  gap: 0.5rem;
  align-self: stretch;
  text-align: left;
}
.precaution-content p {
  color: rgba(104, 104, 104, 0.8);
  font-family: 'Pretendard Variable';
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.875rem;
  letter-spacing: -0.01125rem;
}
.precaution-content b {
  color: rgba(104, 104, 104, 0.8);
  font-family: 'Pretendard Variable';
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.875rem; /* 166.667% */
  letter-spacing: -0.01125rem;
}

/* 캐릭터 이미지 */
.character-preview {
  height: 4.5rem;
  align-self: stretch;
  aspect-ratio: 1/1;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 62.4375rem;
}
.character-preview.character0,
.character-preview.bread {
  background-color: #ffcca0;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-bread.svg);
  background-size: 3.3125rem;
}
.character-preview.character1,
.character-preview.pudding {
  background-color: #ffe3c3;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-pudding.svg);
  background-size: 3.25rem;
}
.character-preview.character2,
.character-preview.cake {
  background-color: #a2e4e8;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-cake.svg);
  background-size: 3rem;
}
.character-preview.character3,
.character-preview.cheese {
  background-color: #ffcd8b;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-cheese.svg);
  background-size: 3.125rem;
}
.character-preview.character4,
.character-preview.dumpling {
  background-color: #ffb5b6;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-dumpling.svg);
  background-size: 3.1875rem;
}
.character-preview.character5,
.character-preview.tomato {
  background-color: #b3d9ff;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-tomato.svg);
  background-size: 3.3125rem;
}
.character-preview.character6,
.character-preview.orange {
  background-color: #fffcb3;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-orange.svg);
  background-size: 3.3125rem;
}
.character-preview.character7,
.character-preview.lemon {
  background-color: #feebd5;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-lemon.svg);
  background-size: 3.625rem;
}
.character-preview.character8,
.character-preview.mushroom {
  background-color: #feebd5;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-mushroom.svg);
  background-size: 3.25rem;
}
.character-preview.character9,
.character-preview.gimbab {
  background-color: #abe185;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-gimbab.svg);
  background-size: 3.1875rem;
}
.character-preview.sun {
  background-color: #a7e9ff;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-sun.svg);
  background-size: 3.375rem;
}
.character-preview.star {
  background-color: #78aeff;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-star.svg);
  background-size: 3.3125rem;
}
.character-preview.snowman {
  background-color: #fff2b2;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-snowman.svg);
  background-size: 2.8125rem;
}
.character-preview.flower {
  background-color: #ccf299;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-flower.svg);
  background-size: 3.4375rem;
}
.character-preview.nut {
  background-color: #ffd27f;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-nut.svg);
  background-size: 2.9375rem;
}
.character-preview.heart {
  background-color: #ff8ec5;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-heart.svg);
  background-size: 3.1875rem;
}
.character-preview.egg {
  background-color: #a1eaa1;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-egg.svg);
  background-size: 3.0625rem;
}
.character-preview.poop {
  background-color: #aff7ff;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-poop.svg);
  background-size: 4.5rem;
}
.character-preview.alien {
  background-color: #c1aeff;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-alien.svg);
  background-size: 2.9375rem 3.125rem;
}
.character-preview.ghost {
  background-color: #a8f2de;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-ghost.svg);
  background-size: 3.25rem;
}
.character-preview.jellyfish {
  background-color: #b1e9ff;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-jellyfish.svg);
  background-size: 3.0625rem;
}
.character-preview.seal {
  background-color: #fff9b1;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-seal.svg);
  background-size: 3.3125rem;
}
.character-preview.octopus {
  background-color: #ffebd3;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-octopus.svg);
  background-size: 3.1875rem;
  background-position: 0.85rem 0.69rem;
}
.character-preview.fish {
  background-color: #b9ffbf;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-fish.svg);
  background-size: 3.4375rem;
}
.character-preview.dolphin {
  background-color: #68d1f2;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-dolphin.svg);
  background-size: 3.125rem;
}
.character-preview.chipmunk {
  background-color: #ffc277;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-chipmunk.svg);
  background-size: 3.1875rem;
}
.character-preview.hamster {
  background-color: #d9f480;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-hamster.svg);
  background-size: 3.375rem;
}
.character-preview.panda {
  background-color: #ffc1a8;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-panda.svg);
  background-size: 3.25rem;
}
.character-preview.capybara {
  background-color: #fffcb1;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-capybara.svg);
  background-size: 3.25rem;
}
.character-preview.turtle {
  background-color: #d3ffc0;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/characters/character-turtle.svg);
  background-size: 2.9375rem;
}

/* 콘텐츠 더보기 & 추천 콘텐츠 */

.game-result .recommend-section-wrapper {
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  margin-top: 5rem;
}

.game-result .contents-more {
  background: #000;
  flex-flow: wrap;
  margin: 0;
  padding-bottom: 2.25rem;
  padding-top: 2.5rem;
  margin-top: -1px;
  border-radius: 0;
}

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

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

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

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

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

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

.game-result .contents-more .contents-list .game-btn a {
  color: #fff;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  font-family: 'Pretendard';
  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/game268/common/expand_more.png) no-repeat center center/100%
    100%;
  transform-origin: center;
}

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

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

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

.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: #fff;
  color: #000;
  font-size: 1.00006rem;
  font-family: 'Pretendard';
  font-weight: 500;
  letter-spacing: -0.022rem;
}

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

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

.game-result .recommend-list:before {
  content: none;
}

/* 메이커 결과 */
.result-maker {
  display: flex;
  width: 31.25rem;
  padding: 2.375rem 1.875rem 0rem 1.875rem;
  flex-direction: column;
  align-items: center;
}

.result-maker .title-container {
  display: flex;
  padding-bottom: 1.25rem;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  align-self: stretch;
}

.result-maker .title-container .decor-top {
  width: 9.66594rem;
  height: 4.25rem;
}

.result-maker .title-container .result-title {
  color: #000;
  font-family: 'Sokcho Bada Dotum';
  font-size: 2.125rem;
  font-style: normal;
  line-height: 140%;
  font-weight: 500;
}

.result-maker .title-container .result-title .pink {
  color: #ff85ac;
  text-align: center;
  font-family: 'Sokcho Bada Dotum';
  font-size: 2.125rem;
  font-style: normal;
  line-height: 140%; /* 2.975rem */
  font-weight: 500;
}

.result-maker .share-container {
  display: flex;
  height: 13.9375rem;
  padding-bottom: 2.25rem;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  border-radius: 1.25rem;
  border: 1.5px solid #000;
  background: #fff;
  box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.2);
}

.result-maker .share__buttons {
  display: flex;
  padding: 2.5rem 0rem 2rem 0rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
}

.share__buttons .share__button {
  display: flex;
  width: 4.875rem;
  height: 4.875rem;
  padding: 1.56925rem 1.501rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.68225rem;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.share__button.share__button--link {
  background-image: url(https://cdn.banggooso.com/assets/images/game271/buttons/share-link-v2.png);
}
.share__button.share__button--instagram {
  background-image: url(https://cdn.banggooso.com/assets/images/game271/buttons/share-instagram-v2.png);
}
.share__button.share__button--kakao {
  background-image: url(https://cdn.banggooso.com/assets/images/game271/buttons/share-kakao-v2.png);
}
.share__button.share__button--x {
  background-image: url(https://cdn.banggooso.com/assets/images/game271/buttons/share-twitter-v2.png);
}
.share-container .share__description {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%; /* 1.75rem */
}
.share-container .share__description::after {
  content: '';
  display: flex;
  width: 19rem;
  height: 0.3125rem;
  padding: 0.13963rem 0rem 0.07144rem 0rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background: url(https://cdn.banggooso.com/assets/images/game271/decor/flair-text-underline.svg) no-repeat center
    center;
  background-size: contain;
}
.maker .bottom-fixed {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.maker .precaution-container {
  background: #f2f2f2;
}

.event-top-decoration {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  cursor: pointer;
}
.event-top-decoration.decor-v1 {
  width: 6.91675rem;
  height: 5.45838rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/decor/decor-top-pig.png);
}
.event-button-wrapper:has(*:hover) .decor-v1 {
  background-image: url(https://cdn.banggooso.com/assets/images/game271/decor/decor-top-pig-hover.png);
}

.event-top-decoration.decor-v2 {
  width: 8.17063rem;
  height: 8.60725rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game271/guide/click-default.png);
}
.event-button-wrapper:has(*:hover) .decor-v2 {
  background-image: url(https://cdn.banggooso.com/assets/images/game271/guide/click-hover.png);
}