:root {
  --game-238-header-height: 4.0625rem;
}

/* font */
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.banggooso.com/assets/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.banggooso.com/assets/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 500;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.banggooso.com/assets/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 600;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.banggooso.com/assets/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 700;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.banggooso.com/assets/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 800;
}

/* 
reset.css 
TODO: 히스토리 파악 후 공통으로 뺄 것 
*/
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;
  }
}

/* 이미지 wrapper */
.image-wrapper > img {
  width: 100%;
  height: 100%;
}

/* 모달 wrapper */
#modal {
  display: flex;
  justify-content: center;
  align-items: center;
}
#modal.one {
  background: rgba(0, 0, 0, 0.5);
}
#modal .next-modal {
  display: flex;
  width: 26.25rem;
  padding: 2.625rem 1.75rem 2.125rem 1.75rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  border-radius: 1.25rem;
  background: var(--Background-Default-Default, #fff);
}
#modal .title {
  color: #573b3b;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.125rem; /* 141.667% */
}
#modal .title .name {
  font-weight: 700;
}
#modal .btn-area {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
}
#modal button {
  display: flex;
  padding: 1.25rem 0.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  flex: 1 0 0;
  border-radius: 1rem;
  background: #3d3d3d;
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 1.625rem */
  cursor: pointer;
}

/* 헤더 */
.game-wrapper.basic .app-header {
  background: rgba(76, 56, 56, 0.1);
  backdrop-filter: blur(1.563rem);
  -webkit-backdrop-filter: blur(1.563rem);
  position: fixed;
  width: 100%;
  z-index: 1;
  border: none;
  height: var(--game-238-header-height);
}

.game-wrapper.basic .app-header.step {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0.9;
  background: rgba(44, 43, 47, 0.4);
}

/* 헤더 뒤로가기 */
.game-wrapper .app-header .app-header-btn.back-w {
  background-size: 1rem 1.5rem;
  background-position: 1.75rem;
  width: 4rem;
}

/* 헤더 로고 */
.game-wrapper .app-header .app-logo {
  background-image: url(https://cdn.banggooso.com/assets/images/common/logo_2024_white.png);
  width: 9.3025rem;
  background-position-y: 1.06rem;
}

/* 헤더 사운드 */
.game-wrapper .app-header.step .sound {
  background-image: url(https://cdn.banggooso.com/assets/bing/main/intro/on.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 2.5rem;
  height: 2.5rem;
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  cursor: pointer;
}

/* 헤더 사운드 끔 */
.game-wrapper .app-header.step .sound.off {
  background-image: url(https://cdn.banggooso.com/assets/bing/main/intro/off.png);
}

/* 인트로 BGM 권장 모달 백그라운드 */
.dim {
  width: 100%;
  height: 100%;
  background: #2c2b2f80;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  justify-content: center;
  align-items: center;
  display: none;
}
.dim.show {
  display: flex;
}

/* 인트로 BGM 권장 모달 박스 */
.dim .container {
  display: flex;
  width: 26.25rem;
  height: 20.125rem;
  padding: 2.375rem 1.75rem 1.25rem 1.75rem;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  flex-shrink: 0;
  border-radius: 1.25rem;
  background: var(--Background-Default-Default, #fff);
}

/* 인트로 BGM 권장 모달 내용 */
.dim .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  align-self: stretch;
}

/* 인트로 BGM 권장 모달 이미지 */
.dim .content .image-wrapper {
  width: 5rem;
  height: 5rem;
}

/* 인트로 BGM 권장 모달 타이틀 */
.dim .content p {
  color: #573b3b;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.125rem;
}

.dim .btn-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
}
.dim .btn-container button {
  display: flex;
  padding: 1.25rem 0.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  flex: 1 0 0;
  border-radius: 1rem;
  background: rgba(255, 179, 197, 0.95);
  color: #573b3b;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 1.625rem */
  cursor: pointer;
}

/* 인트로 페이지 */
.game-wrapper.basic .game-intro {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/intro/bg.png);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  padding-top: var(--game-238-header-height);
  overflow: hidden;
  padding-bottom: 0;
}

.game-wrapper.basic .game-intro .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 1.88rem 6.25rem;
  margin-top: 5rem;
  width: 100%;
  background: linear-gradient(180deg, #fff0f4 0%, #d9abe9 75.19%, #ffadc0 129.43%);
}

/* 인트로 타이틀 */
.game-intro .title {
  position: relative;
  top: calc(2rem - var(--game-238-header-height));
}

/* 인트로 사람 이미지 */
.game-intro .silhouette {
  position: absolute;
  top: 12rem;
  overflow: hidden;
  width: 100%;
  height: 60rem;
}
.game-intro .silhouette > img {
  transform: scale(1.1);
  position: relative;
  top: 3rem;
  object-fit: cover;
}

.game-intro .target {
  width: 7.6875rem;
  height: 7.6875rem;
  position: absolute;
  top: 33.3rem;
  left: 9.88rem;
}

.game-intro .nickname {
  display: flex;
  width: 25rem;
  padding: 1.5rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1rem;
  border: 2px solid #fff;
  background: rgba(251, 141, 183, 0.2);
  color: rgb(87, 59, 59);
  text-align: center;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  z-index: 1;
  outline: none;
  margin-bottom: 0.62rem;
}

.game-intro .nickname::placeholder {
  color: rgba(87, 59, 59, 0.5);
  text-align: center;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  z-index: 1;
}

.game-intro .start-btn {
  width: 27.50644rem;
  height: 5.625rem;
  background: url(https://cdn.banggooso.com/assets/images/game238/icons/favorite-w.png),
    url(https://cdn.banggooso.com/assets/images/game238/icons/favorite-w.png),
    url(https://cdn.banggooso.com/assets/images/game238/intro/start-btn.png);
  background-position: 1.875rem center, calc(100% - 1.875rem), 0;
  background-repeat: no-repeat;
  background-size: 1.875rem, 1.875rem, contain;
  background-color: transparent;

  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.875rem; /* 107.143% */
  letter-spacing: -0.0175rem;
}

.game-intro .game-count {
  display: flex;
  padding: 2.5rem 0rem 1rem 0rem;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  width: 100%;
  border-bottom: 0.063rem solid rgba(255, 255, 255, 0.6);
}
.game-intro .game-count .count-label {
  padding: 0;
  color: #573b3b;
  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: #573b3b;
  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 {
  padding: 2.625rem 0rem 3.125rem 0rem;
  margin: 0;
}

/* 문제 페이지 */
.game-step {
  display: flex;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: var(--game-238-header-height);
  justify-content: center;
}

.game-step > * {
  display: flex;
  width: 100%;
  position: absolute;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: var(--game-238-header-height);
}

/* 문제 페이지 - 대사 */
.game-step .line-section {
  justify-content: flex-start;
  gap: 2.5rem;
  padding-top: calc(var(--game-238-header-height));
  top: 0;
  width: 100%;
  height: 100%;
}

.game-step .line-section.dark {
  background-color: rgba(0, 0, 0, 0.3);
}

/* 문제 페이지 - 대사 */
.game-step .line-section .top {
  margin-top: 2.125rem;
}

.game-step .line-section .center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.game-step .line-section .bottom {
  position: absolute;
  bottom: 2.5rem;
}

/* 문제 페이지 - 중단 */
.game-step .middle-section {
  justify-content: center;
  gap: 0.875rem;
  height: 100%;
  top: 0;
  padding-top: 0;
}

/* 문제 페이지 - 하단 */
.game-step .button-section {
  justify-content: flex-end;
  gap: 0.75rem;
  padding-bottom: 2.5rem;
  bottom: 0;
}

/* 문제 페이지 - 캐릭터 */
.game-step .character-section {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  justify-content: center;
  top: 0;
  overflow: hidden;
}

.game-step .character-section > li,
.game-step .character-section > li:before {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center calc(100% + 6.25rem);
  position: absolute;
  top: 0;
}
.game-step .character-section > li:before {
  content: '';
  left: 0;
  opacity: 0;
  background-position: inherit;
}

.game-step .character-section > li.left {
  background-position: calc(50% - 10rem) calc(100% + 9.25rem);
}
.game-step .character-section > li.right {
  background-position: calc(50% + 12rem) calc(100% + 9.25rem);
}

/* 문제 페이지 캐릭터 - 서강 */
.game-step .character-section .sk {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/10.png);
}
.game-step .character-section .sk.face-b::before,
.game-step .character-section .sk.face-1 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/11.png);
}
.game-step .character-section .sk.face-2 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/20.png);
}
.game-step .character-section .sk.face-2::before,
.game-step .character-section .sk.face-3 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/30.png);
}
.game-step .character-section .sk.face-3::before,
.game-step .character-section .sk.face-4 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/40.png);
}
.game-step .character-section .sk.face-4::before,
.game-step .character-section .sk.face-5 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/50.png);
}
.game-step .character-section .sk.face-5::before,
.game-step .character-section .sk.face-6 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/60.png);
}
.game-step .character-section .sk.face-6::before,
.game-step .character-section .sk.face-7 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/70.png);
}
.game-step .character-section .sk.face-7::before,
.game-step .character-section .sk.face-8 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/80.png);
}
.game-step .character-section .sk.face-8::before,
.game-step .character-section .sk.face-9 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/90.png);
}
.game-step .character-section .sk.face-e::before,
.game-step .character-section .sk.face-a {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/a0.png);
}
.game-step .character-section .sk.face-9::before,
.game-step .character-section .sk.face-b {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/b0.png);
}
.game-step .character-section .sk.face-9::before,
.game-step .character-section .sk.face-c {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/c0.png);
}
.game-step .character-section .sk.face-9::before,
.game-step .character-section .sk.face-d {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/d0.png);
}
.game-step .character-section .sk.face-b::before,
.game-step .character-section .sk.face-e {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/e0.png);
}
.game-step .character-section .sk.face-a::before,
.game-step .character-section .sk.face-choose {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/sk/choose.png);
}

/* 문제 페이지 캐릭터 - 강연준 */
.game-step .character-section .kyj {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/kyj/10.png);
}
.game-step .character-section .kyj.face-2 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/kyj/20.png);
}
.game-step .character-section .kyj.face-4:before,
.game-step .character-section .kyj.face-3 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/kyj/30.png);
}
.game-step .character-section .kyj.face-2:before,
.game-step .character-section .kyj.face-3-1 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/kyj/31.png);
}
.game-step .character-section .kyj.face-3-1:before,
.game-step .character-section .kyj.face-4 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/kyj/40.png);
}
.game-step .character-section .kyj.face-3:before,
.game-step .character-section .kyj.face-5 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/kyj/50.png);
}
.game-step .character-section .kyj.face-5:before,
.game-step .character-section .kyj.face-6 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/kyj/60.png);
}
.game-step .character-section .kyj.face-5:before,
.game-step .character-section .kyj.face-7 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/kyj/70.png);
}
.game-step .character-section .kyj.face-7::before,
.game-step .character-section .kyj.face-choose {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/kyj/choose.png);
}

/* 문제 페이지 캐릭터 - 백은호 */
.game-step .character-section .beh {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/beh/10.png);
}
.game-step .character-section .beh.face-5::before,
.game-step .character-section .beh.face-1 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/beh/11.png);
}
.game-step .character-section .beh.face-2 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/beh/20.png);
}
.game-step .character-section .beh.face-2::before,
.game-step .character-section .beh.face-3 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/beh/30.png);
}
.game-step .character-section .beh.face-3::before,
.game-step .character-section .beh.face-4 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/beh/40.png);
}
.game-step .character-section .beh.face-4::before,
.game-step .character-section .beh.face-5 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/beh/50.png);
}
.game-step .character-section .beh.face-1::before,
.game-step .character-section .beh.face-6 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/beh/60.png);
}
.game-step .character-section .beh.face-6::before,
.game-step .character-section .beh.face-7 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/beh/70.png);
}
.game-step .character-section .beh.face-7::before,
.game-step .character-section .beh.face-8 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/beh/80.png);
}
.game-step .character-section .beh.face-8::before,
.game-step .character-section .beh.face-9 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/beh/90.png);
}
.game-step .character-section .beh.face-9::before,
.game-step .character-section .beh.face-a {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/beh/a0.png);
}
.game-step .character-section .beh.face-9::before,
.game-step .character-section .beh.face-b {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/beh/b0.png);
}
.game-step .character-section .beh.face-b::before,
.game-step .character-section .beh.face-choose {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/characters/beh/choose.png);
}

.game-step.phone .character-section {
  width: 100%;
  height: 52rem;
  bottom: 0;
  top: auto;
  padding: 0;
  max-height: calc(100% - 8rem);
}

/* 문제페이지 - 채팅 이미지 */
.game-step .character-section .chat {
  background-position-y: 100%;
  background-size: contain;
  width: 100%;
  height: 100%;
}
.game-step .character-section .chat-00 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-00.png);
}
.game-step .character-section .chat-00::before,
.game-step .character-section .chat-01 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-01.png);
}
.game-step .character-section .chat-02::before,
.game-step .character-section .chat-02 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-02.png);
}
.game-step .character-section .chat-02::before,
.game-step .character-section .chat-02.P {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-02-p.png);
}
.game-step .character-section .chat-02::before,
.game-step .character-section .chat-02.J {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-02-j.png);
}
.game-step .character-section .chat-02.P::before,
.game-step .character-section .chat-03.P {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-03-p.png);
}
.game-step .character-section .chat-02.J::before,
.game-step .character-section .chat-03.J {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-03-j.png);
}
.game-step .character-section .chat-03.P::before,
.game-step .character-section .chat-04.P {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-04-p.png);
}
.game-step .character-section .chat-03.J::before,
.game-step .character-section .chat-04.J {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-04-j.png);
}
.game-step .character-section .chat-04.P::before,
.game-step .character-section .chat-05.P {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-05-p.png);
}
.game-step .character-section .chat-04.J::before,
.game-step .character-section .chat-05.J {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-05-j.png);
}
.game-step .character-section .chat-05-popup {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-05-popup.png);
}
.game-step .character-section .chat-05.P::before,
.game-step .character-section .chat-05.J::before,
.game-step .character-section .chat-06 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-06.png);
}
.game-step .character-section .chat-06::before,
.game-step .character-section .chat-07 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-07.png);
}
.game-step .character-section .chat-07::before,
.game-step .character-section .chat-08 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-08.png);
}
.game-step .character-section .chat-08::before,
.game-step .character-section .chat-09 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-09.png);
}
.game-step .character-section .chat-09::before,
.game-step .character-section .chat-10 {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-10.png);
}
.game-step .character-section .chat-10::before,
.game-step .character-section .chat-11.E {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-11-e.png);
}
.game-step .character-section .chat-10::before,
.game-step .character-section .chat-11.I {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-11-i.png);
}
.game-step .character-section .chat-11.E::before,
.game-step .character-section .chat-12.E {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-12-e.png);
}
.game-step .character-section .chat-11.I::before,
.game-step .character-section .chat-12.I {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-12-i.png);
}
.game-step .character-section .lockscreen {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/lockscreen-1.png);
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.game-step .character-section .chat-05-popup {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/chat-05-popup.png);
  width: 20rem;
  height: 5rem;
  position: absolute;
  top: 7rem;
  cursor: pointer;
  z-index: 1;
}
.game-step .character-section .chat-05-popup.slide-down {
  animation: slideDown 0.5s ease-in-out;
}

.game-step .character-section .lockscreen-popup {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/step/message-alert.png);
  width: 65%;
  position: absolute;
  top: 38%;
  height: 17%;
  background-size: contain;
}
.game-step .character-section .lockscreen-popup.slide-up {
  animation: slideUp 0.5s ease-in-out;
}

.game-step.intro {
  background-image: url('https://cdn.banggooso.com/assets/images/game238/step/simulation_background.png');
}
.game-step.road-afternoon {
  background-image: url('https://cdn.banggooso.com/assets/images/game238/step/road-afternoon.jpg');
}
.game-step.park-evening {
  background-image: url('https://cdn.banggooso.com/assets/images/game238/step/park-evening.jpg');
}
.game-step.playground-night {
  background-image: url('https://cdn.banggooso.com/assets/images/game238/step/playground-night.jpg');
}
.game-step.room-night {
  background-image: url('https://cdn.banggooso.com/assets/images/game238/step/room-night.jpg');
}
.game-step.room {
  background-image: url('https://cdn.banggooso.com/assets/images/game238/step/room.jpg');
}
.game-step.smartphone-chat {
  background-image: url('https://cdn.banggooso.com/assets/images/game238/step/smartphone-chat.png');
}
.game-step.outro {
  background: linear-gradient(180deg, #000 0%, #919191 100%);
}

.fade-in {
  display: none;
}

.fadeout {
  background-color: black;
  -webkit-transition: background-color 0.7s linear;
  -ms-transition: background-color 0.7s linear;
  transition: background-color 0.7s linear;
}

/* 문제 페이지 - 페이지 넘김 클릭 영역 */
.game-step .next-step {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  cursor: pointer;
}

/* 문제 페이지 - 스토리 진입 화면 */
.game-step .summary {
  color: #573b3b;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.125rem; /* 154.545% */
  letter-spacing: 0;
}

/* 문제 페이지 - 나레이션 */
.game-step .narration {
  display: flex;
  width: 27.5rem;
  height: 8.75rem;
  padding: 2.25rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.875rem;
  border: 1px solid #ffceda;
  opacity: 0.95;
  background: var(--Background-Default-Default, #fff);
  box-shadow: 0px 0px 15px 0px rgba(255, 115, 148, 0.5) inset, 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
  color: #fe7ab3;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.875rem; /* 136.364% */
  letter-spacing: 0;
}

/* 문제 페이지 - 주인공 대사 */
.game-step .line-self {
  display: flex;
  width: 27.5rem;
  height: 6.625rem;
  padding: 2.25rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.875rem;
  border: 2px solid #ffdfdf;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, #ffd4df 100%);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
  color: #573b3b;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.875rem; /* 136.364% */
  letter-spacing: 0;
}

/* 문제 페이지 - 대사 */
.game-step .line-other {
  display: flex;
  width: 27.5rem;
  height: 7.5rem;
  padding: 1.875rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  margin-top: 4.5rem;

  border-radius: 0.5rem;
  background: url(https://cdn.banggooso.com/assets/images/game238/icons/favorite.png),
    url(https://cdn.banggooso.com/assets/images/game238/icons/favorite.png),
    linear-gradient(180deg, rgba(255, 159, 200, 0.95) -101.53%, rgba(255, 242, 248, 0.95) 100%);
  background-position: 1rem center, calc(100% - 1rem), 0;
  background-repeat: no-repeat;
  background-size: 1.875rem, 1.875rem, cover;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.25);

  color: #6e475c;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.875rem; /* 136.364% */
  letter-spacing: 0;
}

/* 문제 페이지 - 대사 이름 칸 */
.game-step .line-other::before {
  display: flex;
  min-width: 7.5rem;
  height: 2.125rem;
  padding: 0.375rem 0.875rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  border-radius: 0.5rem 0.5rem 0rem 0rem;
  background: #fff2f7;
  position: absolute;
  top: -2.125rem;
  left: 1.25rem;

  color: #b77096;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 1.4625rem */
}

.game-step .line-other.unknown-a::before {
  content: 'A';
}
.game-step .line-other.unknown-b::before {
  content: 'B';
}
.game-step .line-other.unknown-c::before {
  content: 'C';
}
.game-step .line-other.sk::before {
  content: '서 강';
}
.game-step .line-other.beh::before {
  content: '백은호';
}
.game-step .line-other.kyj::before {
  content: '강연준';
}
.game-step .line-other.group::before {
  content: '백은호, 강연준, 서강';
}

/* 문제 페이지 - 정답 버튼 */
.game-step .btn-answer,
.game-step .btn-next {
  display: flex;
  width: 27.5rem;
  height: 6rem;
  padding: 0rem 3.75rem;
  justify-content: center;
  align-items: center;
  border-radius: 62.4375rem;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, rgba(255, 177, 194, 0.93) 50%, #ff9db2 100%);
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.875rem; /* 136.364% */
  cursor: pointer;
}
.game-step .btn-answer:focus,
.game-step .btn-answer:active {
  border-radius: 62.4375rem;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, rgba(255, 177, 194, 0.37) 50%, rgba(255, 157, 178, 0.4) 100%),
    rgba(115, 82, 82, 0.7);
}

/* 문제 페이지 개별 스타일 */
.game-step.step1 .btn-next {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  height: 5rem;
  width: 100%;
  background: linear-gradient(180deg, #ff83a0 -101.53%, #ffdde5 100%);
  cursor: pointer;
  padding: 0;
  border: none;
  border-radius: 0;

  color: #573b3b;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  z-index: 1;
}

.game-step.step19 .button-section {
  padding-bottom: 0;
}
.game-step .btn-next.notice {
  display: flex;
  width: 31.25rem;
  height: min-content;
  padding: 3.5rem 6rem 3.6875rem 6rem;
  justify-content: flex-end;
  align-items: center;
  background: linear-gradient(0deg, #ffa1b7 59.93%, rgba(255, 206, 218, 0) 97.6%);
  color: #fff;
  text-align: center;
  text-shadow: 0px 0px 8px rgba(140, 38, 79, 0.8);
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4375rem; /* 95.833% */
  gap: 0.5rem;
  flex-direction: column;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
  margin-bottom: -2.5rem;
  cursor: default;
}
.game-step .btn-next.notice::before {
  content: '';
  width: 0.875rem;
  height: 0.5625rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game238/icons/arrow.png');
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
}

.game-step .btn-next.notice.black {
  background: linear-gradient(0deg, #000 13.52%, rgba(0, 0, 0, 0) 94.81%);
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  text-shadow: 0px 0px 8px rgba(128, 128, 128, 0.8);
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.875rem; /* 150% */
  padding-bottom: 2.53rem;
  transition: all 0.4s;
  color: transparent;
}
.game-step .btn-next.notice.black.show {
  color: #fff;
}

.game-step.step21 .top-section {
  display: none;
  height: 100%;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.4);
}
.game-step.step21 .top-section.show {
  display: flex;
}

.game-step.step33 .character-section > li:nth-child(2),
.game-step.step38 .character-section > li:nth-child(2) {
  background-position: calc(50% - 10rem) calc(100% + 3rem);
}
.game-step.step33 .character-section > li:nth-child(3),
.game-step.step38 .character-section > li:nth-child(3) {
  background-position: calc(50% + 12rem) calc(100% + 3rem);
}

.blur {
  animation: blur 5s forwards ease-in;
  -webkit-animation: blur 5s forwards ease-in;
  -moz-animation: blur 5s forwards ease-in;
}

@keyframes blur {
  0% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
  }
  100% {
    -webkit-filter: blur(1rem);
    -moz-filter: blur(1rem);
    -o-filter: blur(1rem);
    -ms-filter: blur(1rem);
  }
}

.game-step.outro {
  background: linear-gradient(180deg, #000 0%, #919191 100%);
}
.game-step.outro .summary {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.125rem; /* 141.667% */
}
.game-step.outro .btn-next {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  height: 5rem;
  width: 100%;
  background: linear-gradient(180deg, #c1c1c1 -101.53%, #000 100%);
  cursor: pointer;
  padding: 0;
  border: none;
  border-radius: 0;

  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  z-index: 1;
}
.game-step.outro.choose {
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.game-step.outro .summary::before {
  content: '';
  position: absolute;
  width: 27.5rem;
  height: 100%;
  flex-shrink: 0;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.8);
  filter: blur(2.188rem);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  padding: 3rem 0;
  box-sizing: content-box;
}

.game-step.outro.choose .character-section > li {
  filter: grayscale(1);
}
.game-step.outro.choose .character-section > li.active {
  filter: grayscale(0);
  scale: 1.05;
  transition: 0.5s;
}

.game-step.outro.choose .line-section {
  gap: 0;
  position: static;
  margin: 0;
  margin-top: calc(5.75rem);
  width: 27.5rem;
  height: 9.4375rem;
  flex-shrink: 0;
  border-radius: 100%;
  padding: 2.5rem;
}
.game-step.outro.choose .summary {
  color: #000;
  text-align: center;
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
  font-family: Pretendard;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.125rem;
}
.game-step.outro.choose .summary span {
  color: rgba(0, 0, 0, 0.8);
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.125rem;
}
.game-step.outro.choose .button-section {
  padding: 0;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  height: 60rem;
  opacity: 0;
}
.game-step.outro.choose .button-section > *:not(.btn-next):last-child {
  margin-bottom: 0;
}
.game-step.outro.choose .btn-answer {
  height: 100%;
}
.game-step.outro .line-self {
  border-radius: 0.875rem;
  border: 0.125rem solid #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, #adadad 100%);
  box-shadow: 0 0.25rem 0.506rem 0 rgba(0, 0, 0, 0.25);
  color: #000;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.875rem;
}

.game-step.step50 .middle-section {
  gap: 1rem;
}

/* 결과 상단 */
.game-wrapper.basic .game-result {
  background: linear-gradient(180deg, #fce3e6 9.53%, #fff 17.41%);
  padding: calc(2rem + var(--game-238-header-height)) 0 0;
}

/* 결과 상단 박스 */
.game-wrapper.basic .game-result .result-box {
  display: flex;
  margin: 0;
  padding: 2rem 1.88rem 1rem;
  flex-direction: column;
  align-items: center;
  align-self: stretch;

  border: none;
  border-radius: 3.125rem;
  background: var(--Background-Default-Default, #fff);
  box-shadow: 0 0.313rem 1.25rem 0 rgba(0, 0, 0, 0.1);
}

/* 결과 부제목 */
.game-result .result-box .subtitle {
  display: flex;
  padding: 0.75rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 62.4375rem;
  background: rgba(255, 90, 90, 0.1);
  width: max-content;
  color: #573b3b;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

/* 결과 제목 */
.game-result .result-box .title {
  padding: 1rem 0rem 1.375rem 0rem;
  margin: 0;
  transform: rotate(0.191deg);
  color: #573b3b;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.75rem; /* 137.5% */
}

/* 결과 제목 강조 */
.game-result .result-box .title > strong {
  color: #f98989;
  font-family: 'Pretendard';
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.75rem;
}

/* 결과 아이콘 */
.game-result .result-box .image-wrapper {
  width: 7.8125rem;
  height: 7.8125rem;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 2.25rem;
  background-size: contain;
}

/* 결과 차트 박스 */
.game-result .result-box .inner-box {
  display: flex;
  padding: 2rem 1.875rem 1.75rem 1.875rem;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  margin-bottom: 1.25rem;

  border-radius: 1.875rem;
  background: #f9f9f9;

  color: #573b3b;
  font-family: 'Pretendard';
  font-style: normal;
  line-height: normal;
  text-align: center;
}

/* 결과 차트 박스 */
.game-result .result-box .inner-box .title {
  transform: rotate(0.191deg);
  flex: 1 0 0;
  padding: 0;
  margin-bottom: 1rem;

  color: #573b3b;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.4375rem; /* 150% */
}

/* 결과 차트 바 */
.game-result .result-box .chart-bar {
  display: flex;
  width: 100%;
  height: 4.375rem;
  align-items: center;
  align-self: stretch;
  overflow: hidden;

  border-radius: 1rem;
  background: #d4eaff;

  transform: rotate(0.191deg);
  color: #573b3b;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

/* 결과 차트 활성 바 */
.game-result .result-box .active-bar {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #e6d2ff;
  border-radius: 1rem 0 0 1rem;
}

/* 결과 차트 활성 바 */
.game-result .result-box .chart-bar .caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 1.25rem;
  width: 100%;
  height: 100%;
}

/* 결과 차트 바 - 수치 */
.game-result .chart-bar .per {
  display: flex;
  flex-grow: 1;
  height: 100%;
  padding: 0.625rem 1.25rem;
  align-items: center;
}

/* 결과 차트 캡션 */
.game-result .chart-caption {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0 0.5rem;
}

/* 결과 성향 리스트 */
.game-result .inner-box ul.desc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding-left: 1.5rem;
}

/* 결과 성향 리스트 텍스트 */
.game-result .inner-box ul.desc li {
  text-align: left;
  transform: rotate(0.191deg);
  align-self: stretch;
  color: #573b3b;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 145.455% */
  list-style-type: disc;
}

/* 결과 공통 섹션 */
.game-result .phrase {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* 결과 공통 섹션 부제목 */
.game-result .phrase .subtitle {
  color: rgba(87, 59, 59, 0.7);
  font-family: 'Pretendard';
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.625rem; /* 144.444% */
  letter-spacing: -0.01125rem;
  margin-left: 1.875rem;
}

/* 결과 공통 섹션 부제목 */
.game-result .phrase .title {
  color: #573b3b;
  font-family: 'Pretendard';
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.5rem; /* 142.857% */
  letter-spacing: -0.0175rem;
  margin: 0.25rem 0 0 1.875rem;
  text-align: left;
}

/* 결과 공통 섹션 버튼 */
.game-result button {
  display: flex;
  min-height: 5rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  border-radius: 1rem;
  background: #392d2d;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.875rem; /* 125% */
  letter-spacing: -0.015rem;
  cursor: pointer;
}

/* 결과 위험 신호 스와이퍼 */
.game-result .signal .swiper {
  width: 100%;
  padding: 0 1.875rem;
  margin-top: 1.75rem;
  z-index: inherit;
}

/* 결과 위험 신호 카드 */
.game-result .signal .card {
  display: flex;
  width: 25rem;
  height: 17.125rem;
  padding: 1.625rem 1.25rem 1.25rem 1.25rem;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 1.25rem;
  background: #f9f9f9;
}
.game-result .signal .card:not(:last-child) {
  margin-right: 0.75rem;
}

.game-result .signal .card-title {
  color: #573b3b;
  font-family: Pretendard;
  font-size: 1.4375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem;
  display: flex;
  padding: 0.375rem 0rem 0.625rem 0.75rem;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
}

/* 결과 위험 신호 카드 - 인용 박스 */
.game-result .signal .quote-box {
  display: flex;
  width: 100%;
  padding: 1rem 0.875rem;
  align-items: center;
  gap: 0.75rem;
  border-radius: 1rem;
  background: var(--Background-Default-Default, #fff);
  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.15);
  color: #573b3b;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem; /* 140% */
}

/* 결과 위험 신호 카드 - 인용 박스 */
.game-result .signal .quote-box .image-wrapper {
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
}

/* 결과 위험 신호 카드 - 인용 박스 */
.game-result .signal .quote-box .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

/* 결과 위험 신호 카드 - 캐릭터명 */
.game-result .signal .name {
  transform: rotate(0.191deg);
  align-self: stretch;
  color: #573b3b;
  font-family: Pretendard;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

/* 결과 위험 신호 카드 - 대사 */
.game-result .signal .quote {
  transform: rotate(0.191deg);
  align-self: stretch;
  color: #573b3b;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem;
}

/* 결과 위험 신호 카드 - 설명 */
.game-result .signal .desc {
  padding: 1.125rem 0rem 0rem 0.75rem;
  transform: rotate(0.191deg);
  flex: 1 0 0;
  color: #573b3b;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem; /* 145.455% */
}

/* 결과 위험 신호 스와이퍼 페이지네이션 */
.game-result .signal .swiper-pagination {
  position: static;
  margin: 0.75rem 0 3.125rem;
  display: flex;
  justify-content: center;
  height: 0.6rem;
}

/* 결과 위험 신호 스와이퍼 불렛 */
.game-result .signal .swiper-pagination .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #eaeaea;
  opacity: 1;
}

/* 결과 위험 신호 스와이퍼 활성화 불렛 */
.game-result .signal .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #f98989;
}

/* 결과 질문 섹션 */
.game-result .ask {
  padding: 3.125rem 1.875rem 1.75rem 0;
  background: #fff6f6;
}

/* 결과 질문 말풍선 */
.game-result .ask .bubble {
  display: flex;
  padding: 4rem 0rem 1.25rem 0rem;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
}

/* 결과 질문 말풍선 내용 */
.game-result .ask .bubble .content {
  display: flex;
  padding: 1.25rem;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  border-radius: 1rem;
  background: var(--Background-Default-Default, #fff);
  color: #f98989;
  text-align: center;
  font-family: Pretendard;
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.625rem;
  letter-spacing: -0.02rem;
  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);
}

/* 결과 질문 말풍선 내용 */
.game-result .ask .bubble .tail {
  height: 1.08256rem;
  width: 0.9375rem;
  fill: var(--Background-Default-Default, #fff);
  position: relative;
  left: -0.063rem;
  -webkit-filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.1));
  filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.1));
}

/* 결과 질문 말풍선 하단 문구 */
.game-result .ask .bubble-desc {
  color: #573b3b;
  text-align: right;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem;
  letter-spacing: -0.0125rem;
  width: 100%;
}

/* 결과 연구 내용 */
.game-result .research .content {
  padding: 1.5rem 1.875rem;
  background: #ffeaea;
  color: #815f5f;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem; /* 155.556% */
  letter-spacing: -0.01125rem;
}

/* 결과 연구 출처 */
.game-result .research .caption {
  display: flex;
  padding: 0.75rem 1.25rem 0 0;
  justify-content: flex-end;
  align-items: center;
  gap: 0.625rem;
  color: rgba(87, 59, 59, 0.5);
  text-align: right;
  font-family: Pretendard;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.00813rem;
}

/* 결과 대응법 */
.game-result .manual {
  padding: 3.12rem 0 2.12rem;
}

/* 결과 대응법 좌우 마진 */
.game-result .manual > * {
  margin: 0 1.88rem;
}

/* 결과 대응법 제목 */
.game-result .manual .title {
  margin-bottom: 1.25rem;
}

/* 결과 대응법 카드 목록 */
.game-result .manual .card-container {
  display: flex;
  padding-bottom: 0.75rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.75rem;
  align-self: stretch;
}

/* 결과 대응법 카드 */
.game-result .manual .card {
  display: flex;
  padding: 1.5rem 1.5rem 1.75rem 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.125rem;
  align-self: stretch;
  border-radius: 1.875rem;
  background: #f9f9f9;
}

/* 결과 대응법 카드 헤더 */
.game-result .manual .card .card-header {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  align-self: stretch;
}

/* 결과 대응법 카드 제목 영역 */
.game-result .manual .card .title-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  flex: 1 0 0;
}

/* 결과 대응법 카드 부제목 */
.game-result .manual .card .card-subtitle {
  color: rgba(249, 137, 137, 0.5);
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.0125rem;
}

/* 결과 대응법 카드 부제목 */
.game-result .manual .card .card-title {
  color: #f98989;
  font-family: Pretendard;
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.125rem;
  letter-spacing: -0.01625rem;
}

/* 결과 대응법 카드 썸네일 */
.game-result .manual .card .image-wrapper {
  width: 4.3125rem;
}

/* 결과 대응법 카드 본문 */
.game-result .manual .card .content {
  color: #573b3b;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.8125rem; /* 145% */
  letter-spacing: -0.025rem;
}

/* 결과 대응법 말풍선 */
.game-result .manual .bubble {
  padding: 1.625rem 1.875rem 1.5rem 1.875rem;
  border-radius: 1.25rem;
  background: rgba(249, 137, 137, 0.2);
  color: #573b3b;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.875rem;
  letter-spacing: -0.0125rem;
  width: -webkit-fill-available;
  margin-top: 1.0625rem;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.game-result .manual .bubble .tail {
  position: absolute;
  width: 1.25rem;
  height: 1.0625rem;
  top: -0.9rem;
}
.game-result .manual .bubble p {
  width: 100%;
}

/* 결과 대응법 출처 */
.game-result .manual .caption {
  display: flex;
  padding: 0rem 0.75rem;
  justify-content: flex-end;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  color: rgba(87, 59, 59, 0.5);
  text-align: right;
  font-family: Pretendard;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.00813rem;
}

/* 결과 광고 섹션 */
.game-result .announcement {
  display: flex;
  padding: 2.5rem 1.875rem;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  background: #f5f5f5;
  color: rgba(87, 59, 59, 0.7);
  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 .announcement .card {
  display: flex;
  padding: 1.625rem 1.25rem 2rem 1.25rem;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  border-radius: 1rem;
  background: var(--Background-Default-Default, #fff);
  color: rgba(87, 59, 59, 0.7);
  text-align: center;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem; /* 155.556% */
  letter-spacing: -0.01125rem;
}

/* 결과 광고 카드 이미지 영역 */
.game-result .announcement .card .icon {
  width: 3.25rem;
  height: 3.25rem;
}

/* 결과 광고 카드 이미지 */
.game-result .announcement .card .icon img {
  width: 100%;
}

/* 결과 광고 카드 타이틀 */
.game-result .announcement .card-title {
  color: #573b3b;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.25rem; /* 138.462% */
  letter-spacing: -0.01625rem;
  margin: 0.75rem 0 1rem;
}

/* 결과 광고 버튼영역 */
.game-result .announcement .btn-area {
  display: flex;
  padding: 1.75rem 0.625rem 0rem 0.625rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  color: #573b3b;
  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 .announcement .icon-copy {
  width: 1.5rem;
  height: 1.5rem;
}

/* 결과 광고 버튼 이미지 */
.game-result .announcement .icon-copy > img {
  position: absolute;
  top: 0;
  left: 0;
}

/* 결과 인증서 섹션 */
.game-result .award {
  display: flex;
  padding: 3.75rem 1.875rem 0rem 1.875rem;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

/* 결과 인증서 */
.game-result .award .certificate {
  width: 27.5rem;
  height: 34.31288rem;
  flex-shrink: 0;
  padding: 2.25rem 2.5rem 1.43rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game238/result/certificate_background.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.game-result .award .certificate-wrapper {
  border-radius: 2.5rem;
  overflow: hidden;
}

/* 결과 인증서 부제목 */
.game-result .award .certificate .subtitle {
  display: flex;
  width: max-content;
  padding: 0.75rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 62.4375rem;
  background: rgba(167, 53, 53, 0.07);
  color: #573b3b;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

/* 결과 인증서 제목 */
.game-result .award .certificate .title {
  display: flex;
  padding: 1.25rem 0rem 1.75rem 0.375rem;
  margin: 0;
  justify-content: left;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  border-bottom: 0.063rem solid rgba(0, 0, 0, 0.5);
  text-align: left;
  color: #573b3b;
  font-family: 'Pretendard';
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.5rem; /* 142.857% */
  letter-spacing: -0.0175rem;
}

/* 결과 인증서 내용 */
.game-result .award .certificate .content {
  display: flex;
  padding: 1.75rem 0.125rem 0rem 0.625rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.125rem;
  align-self: stretch;
}
.game-result .award .certificate .content > li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
  justify-content: space-between;
}
.game-result .award .certificate .content > li p:first-child {
  color: #573b3b;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.0125rem;
  width: 9.4375rem;
  text-align: left;
}
.game-result .award .certificate .content > li p:last-child {
  color: #573b3b;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.01375rem;
}

/* 결과 인증서 설명 */
.game-result .award .certificate .desc {
  display: flex;
  padding: 2.5rem 0rem 1.5rem 0rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  color: rgba(87, 59, 59, 0.8);
  text-align: center;
  font-family: Pretendard;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.625rem; /* 162.5% */
  letter-spacing: -0.01rem;
}

/* 결과 인증서 하단 로고 */
.game-result .award .certificate .es-logo {
  width: 6.11rem;
  margin: 0 auto;
  position: relative;
  top: -0.5rem;
}

.game-result .award .certificate .download-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* 결과 인증서 다운로드 텍스트 */
.game-result .award .download-text {
  display: flex;
  padding-top: 0.75rem;
  flex-direction: column;
  gap: 0.625rem;
  align-self: stretch;
  color: #573b3b;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.625rem; /* 144.444% */
  letter-spacing: -0.01125rem;
}

/* 결과 인증서 버튼 */
.game-result .award .button-wrapper {
  display: flex;
  padding: 1.25rem 0rem 2.5rem 0rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  align-self: stretch;
}

/* 결과 감정가게 */
.game-result .emotion-store {
  display: flex;
  padding: 2.5rem 1.875rem 1.5rem;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  background-color: #ffe1e1;
  background-image: url(https://cdn.banggooso.com/assets/images/game238/result/emotion_store.png);
  background-repeat: no-repeat;
  background-size: 7.4375rem auto;
  background-position: calc(100% - 1.875rem) 1.81225rem;
}

/* 결과 감정가게 제목 */
.game-result .emotion-store .title {
  display: flex;
  padding-bottom: 0.75rem;
  margin: 0;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.625rem;
  align-self: stretch;
  color: #573b3b;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.25rem; /* 138.462% */
  letter-spacing: -0.01625rem;
}

/* 결과 감정가게 본문 */
.game-result .emotion-store .desc {
  color: rgba(87, 59, 59, 0.8);
  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 .emotion-store .button-wrapper {
  display: flex;
  width: 27.5rem;
  padding-top: 1.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.game-result .emotion-store .caption {
  display: flex;
  padding-top: 0.875rem;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.625rem;
  align-self: stretch;
}
.game-result .emotion-store .caption > .image-wrapper {
  width: 9.47056rem;
  height: 2rem;
}

/* 결과 투표 */
.game-result .vote {
  display: flex;
  padding: 3.12rem 1.875rem;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

/* 결과 투표 타이틀 */
.game-result .vote .title {
  margin-top: 0.25rem;
  margin-left: 0;
}

/* 결과 투표 부제 */
.game-result .vote .subtitle {
  margin-left: 0;
}

/* 결과 투표 차트 */
.game-result .vote .chart {
  display: flex;
  padding-right: 0.5rem;
  margin-top: 1rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
}
.game-result .vote .chart > li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
}

/* 결과 투표 순위 */
.game-result .vote .rank {
  display: flex;
  width: 2.125rem;
  height: 2.125rem;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.00625rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game238/result/award_star.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* 결과 투표 그래프 영역 */
.game-result .vote .bar-area {
  height: 5rem;
  flex: 1 0 0;
  border-radius: 1rem;
  background: #f4f4f4;
  overflow: hidden;
}

/* 결과 투표 그래프 활성화 영역 */
.game-result .vote .active-bar {
  height: 100%;
  position: absolute;
  left: 0;
  background: #ffd6d6;
}

/* 결과 투표 그래프 캡션 영역 */
.game-result .vote .caption {
  display: flex;
  width: 100%;
  height: 5rem;
  padding: 0.625rem 1.25rem 0.625rem 0.75rem;
  justify-content: space-between;
  align-items: center;
  gap: 0.625rem;
  flex: 1 0 0;
}

/* 결과 투표 그래프 캐릭터 영역 */
.game-result .vote .character {
  display: flex;
  gap: 0.625rem;
  align-items: center;
}

/* 결과 투표 그래프 캐릭터 썸네일 영역 */
.game-result .vote .character .image-wrapper {
  width: 3.125rem;
  height: 3.125rem;
  flex-shrink: 0;
  border-radius: 0.625rem;
  background-color: #fff;
}

/* 결과 투표 그래프 캐릭터명 */
.game-result .vote .character .name {
  transform: rotate(0.191deg);
  color: #573b3b;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

/* 결과 투표 그래프 투표수 */
.game-result .vote .vote-number {
  transform: rotate(0.191deg);
  color: rgba(87, 59, 59, 0.8);
  text-align: center;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

/* 결과 공유하기 */
.game-result .share-sns-list {
  display: flex;
  padding: 3.125rem 0rem 3.75rem 0rem;
  margin: 0;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

.game-result .share-sns-list:nth-of-type(2) {
  background-color: #f9f9f9;
  padding-top: 2rem;
  padding-bottom: 2.25rem;
}

/* 공유하기 타이틀 */
.share-sns-list .list-title {
  display: flex;
  padding-bottom: 1rem;
  margin: 0;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

/* 공유하기 타이틀 텍스트 */
.share-sns-list .list-title span {
  color: #573b3b;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.01375rem;
  margin: 0;
}

/* 공유하기 카운트 영역 */
.share-sns-list .list-title .countBox {
  display: flex;
  margin: 0;
  gap: 0.25rem;
  opacity: 0.6;
}

/* 공유하기 카운트 이미지 */
.share-sns-list .list-title .countBox .countImg {
  padding: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game238/icons/share.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* 공유하기 카운트 이미지 */
.share-sns-list .list-title .countBox .countNumber {
  color: #573b3b;
  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 li + li {
  margin-left: 0.88rem;
}

/* 공유하기 버튼 */
.share-sns-list .btn-share {
  width: 3.375rem;
  height: 3.375rem;
  flex-shrink: 0;
  border-radius: 100%;
  background-color: #573b3b;
  background-size: 1.36125rem;
}

/* 공유하기 버튼 - 카카오 */
.share-sns-list .btn-share.kakao {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/icons/kakao.png);
}
/* 공유하기 버튼 - 트위터 */
.share-sns-list .btn-share.twitter {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/icons/twitter.png);
}
/* 공유하기 버튼 - 인스타 */
.share-sns-list .btn-share.instagram {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/icons/instagram.png);
}
/* 공유하기 버튼 - 인스타 */
.share-sns-list .btn-share.facebook {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/icons/facebook.png);
  background-size: 0.6875rem;
}
/* 공유하기 버튼 - 링크 */
.share-sns-list .btn-share.link-copy {
  background-image: url(https://cdn.banggooso.com/assets/images/game238/icons/link.png);
}

/* 결과 다시하기 버튼 */
.game-result .btn_retest {
  display: flex;
  width: 100%;
  padding: 3.125rem 0.625rem 4.375rem 0.625rem;
  margin: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
}

/* 결과 다시하기 버튼 */
.game-wrapper.basic .game-result .btn_retest > a {
  display: flex;
  width: 15rem;
  height: 5rem;
  padding: 0rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border-radius: 1rem;
  background: #392d2d;
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  border: none;
  box-shadow: none;
}

/* 결과 다시하기 버튼 아이콘 */
.game-wrapper.basic .game-result .btn_retest > a::after {
  content: '';
  background-image: url(https://cdn.banggooso.com/assets/images/common/re-test-w.png);
  width: 1.5rem;
  height: 1.5rem;
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
}

/* 방구소 더보기 영역 */
.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 {
  color: #573b3b;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.125rem; /* 141.667% */
  margin: 0;
}

/* 방구소 더보기 리스트 */
.game-result .contents-more .contents-list {
  margin: 0;
  padding: 0;
  border: none;
}

/* 방구소 더보기 버튼 */
.game-result .contents-more .contents-list .game-btn {
  border: 0;
  border-top: 0.083rem solid #573b3b;
  border-radius: 0;
  background: transparent;
  padding: 1.66669rem 2rem;
  margin: 0;
}

/* 방구소 더보기 버튼 텍스트 */
.game-result .contents-more .contents-list .game-btn > a {
  color: #573b3b;
  font-family: Pretendard;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

/* 방구소 더보기 버튼 아이콘 */
.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:before {
  background: linear-gradient(133deg, #ffbcb0 13.53%, #ccb8ff 49.82%, #88d5f5 88%);
  height: 16.125rem;
}

/* 결과 콘텐츠 추천 제목 */
.game-result .recommend-list .inner .title {
  color: #2c2b2f;
  font-family: 'Pretendard';
  font-size: 1.50013rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.033rem;
  margin: -0.13rem 0 0.46rem 1.46rem;
  padding: 0;
}

/* 결과 콘텐츠 추천 카드 */
.game-result .recommend-list .swiper-container {
  padding-left: 2.17rem;
  padding-bottom: 3.25rem;
}
.game-result .recommend-list .swiper-slide {
  width: 10.83988rem;
  height: 13.37894rem;
}
.game-result .recommend-list .slide-box {
  border: 0.33rem solid #000;
  border-radius: 0;
  background-color: #000;
}
.game-result .recommend-list .slide-box .link {
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
}
.game-result .recommend-list .slide-box .link > * {
  width: 100%;
  margin: 0;
  position: absolute;
  left: 0;
}

/* 결과 콘텐츠 추천 카드 이미지 */
.game-result .recommend-list .slide-box .img-box {
  top: 0.063rem;
  height: calc(100% - 2.1rem);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* 결과 콘텐츠 추천 카드 콘텐츠명 */
.game-result .recommend-list .slide-box .slide-text {
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0;
  color: #fff;
  font-family: Pretendard;
  font-size: 1.00006rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02rem;
  background-color: #000000;
  padding: 0.66rem;
  height: auto;
}

/* 결과 다시하기 버튼 영역 */
.game-result .recommend-list .btn-wrap {
  display: flex;
  justify-content: center;
  padding-bottom: 4rem;
}
.game-result .recommend-list .btn-wrap > a {
  display: flex;
  width: 15.25rem;
  height: 4.00025rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 2.00013rem;
  background: var(--Background-Default-Default, #fff);
  color: #000;
  text-align: center;
  font-size: 1.25006rem;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.025rem;
}

/* 토스트 팝업 */
.toast-wrapper {
  display: none;
  width: 100%;
  position: fixed;
  bottom: 0;
  padding: 1.88rem;
}

.toast-wrapper .toast-popup {
  display: flex;
  padding: 1.25rem 1.875rem;
  align-items: center;
  gap: 0.75rem;
  border-radius: 62.4375rem;
  background: rgba(76, 56, 56, 0.5);
  backdrop-filter: blur(1.563rem);
  -webkit-backdrop-filter: blur(1.563rem);
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%; /* 1.95rem */
  opacity: 0;
  transition: all 0.4s;
}
.toast-wrapper.show .toast-popup {
  opacity: 1;
}

.toast-wrapper .toast-popup::before {
  content: '';
  width: 2.375rem;
  height: 2.375rem;
  background-image: url(https://cdn.banggooso.com/assets/images/game238/icons/check.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}