/* font */
@font-face {
  font-family: 'SchoolSafeLittleOne';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimKkokkomaR.woff2')
    format('woff2');
  font-weight: normal;
  font-display: swap;
}

@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;
  text-align: center;
}
input:focus {
  outline: none;
}
button {
  cursor: pointer;
}

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

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

.game-intro .title img {
  margin-top: 4rem;
  width: 100%;
  height: auto;
}

/* 전체 배경 영역 */
/* 헤더 */
.app-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
}

.game-wrapper.basic .app-header {
  height: 3.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
  z-index: 999 !important;
}
.game-wrapper.basic .app-header.intro:not(.question),
.game-wrapper.basic .app-header.result:not(.question) {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
  position: absolute;
  width: 100%;
}

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

.share-sns-list {
  margin: 0;
  display: flex;
  width: 100%;
  padding: 2.625rem 0rem 3.125rem 0rem;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* 공유하기 타이틀 영역 */
.share-sns-list .list-title {
  margin: 0;
  display: flex;
  align-items: center;
}

/* 공유하기 카운트 영역 */
.game-intro .share-sns-list .list-title .countBox {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.05rem;
  color: #2f2c2a !important;
}

.game-result .share-sns-list .list-title .countBox {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  color: #2f2c2a !important;
}

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

/* 공유하기 카운트 수 */
.game-intro .share-sns-list .list-title .countBox .countNumber {
  color: #2f2c2a;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25rem;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}

.game-result .share-sns-list .list-title .countBox .countNumber {
  color: #2f2c2a;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25rem;
  margin-top: 0.05rem;
}

.share-sns-list .list li + li {
  margin-left: 0.88rem;
}

/* 공유하기 버튼 */
.share-sns-list .btn-share {
  width: 3.375rem;
  height: 3.375rem;
  background-color: #2f2c2a;
}

/* 인트로 페이지 */
.game-wrapper.basic .game-intro {
  background-image: url(https://cdn.banggooso.com/assets/images/game281/intro/background.png);
  background-size: cover;
  background-position: top;
  padding-bottom: 0;
  height: auto;
  background-repeat: repeat-y;
}

input#nickname.nickname,
input#nickname.nickname:focus,
input#nickname.nickname:active {
  font-family: 'Pretendard' !important;
  color: #2f2c2a !important;
  font-weight: 500 !important;
}

/* 인트로 하단 영역 */
.game-intro .container {
  display: flex;
  width: 100%;
  padding: 0rem 1.875rem 6.25rem 1.875rem;
  flex-direction: column;
  align-items: center;
}

/* 인트로 말풍선 */
.game-intro .intro-bubble {
  width: 9.375rem;
  height: 3.50706rem;
  margin: 1.375rem 0rem 0.5rem 0rem;
}

/* 인트로 게임시작 영역 */
.game-intro .start-btn-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

/* 인트로 유저이름 인풋 */
.game-intro .nickname {
  width: 21.92rem;
  height: 4.42rem;
  padding: 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0;
  border: none;
  background: #fff;
  background-image: url('https://cdn.banggooso.com/assets/images/game281/intro/name-input.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  color: #2f2c2a;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 145.455% */
  border-radius: 1px;
}

.game-intro .nickname::placeholder {
  color: rgba(81, 81, 81, 0.5);
}

.game-intro .nickname::focus {
  color: #2f2c2a;
}

/* 인트로 시작 버튼 */
.game-intro .start-btn {
  display: flex;
  width: 25rem;
  height: 5.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0;
  border: none;
  background: #2f2c2a;
  background-image: url('https://cdn.banggooso.com/assets/images/game281/intro/start-button.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.375rem; /* 135.714% */
  letter-spacing: -0.0175rem;
}

/* 인트로 참여자 수 영역 */
.game-intro .game-count {
  margin: 0;
  display: flex !important;
  width: 27.5rem;
  padding: 2.5rem 0rem 1rem 0rem;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  border-bottom: 1px solid rgba(81, 81, 81, 0.2);
}

/* 인트로 참여자 수 제목 */
.game-intro .game-count .count-label {
  color: #2f2c2a;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.125rem; /* 141.667% */
  letter-spacing: -0.015rem;
}
/* 인트로 참여자 수 하단 아웃라인 삭제 */
.game-intro .game-count .count-label:before {
  display: none;
}

/* 인트로 참여자 수 숫자 */
.game-intro .game-count .count-num {
  color: #2f2c2a;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 2.75rem;
  font-style: normal;
  font-weight: 800;
  line-height: 3.375rem; /* 122.727% */
  letter-spacing: -0.0275rem;
}

/* 인트로 공유하기 영역 */
.game-intro .share-sns-list {
  margin: 0;
  display: flex;
  width: 27.5rem;
  padding: 2.75rem 0rem 3.125rem 0rem !important;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* 인트로 페이지 공유하기 텍스트 스타일 */
.game-intro .share-sns-list .list-title span {
  font-family: 'Pretendard' !important;
  font-size: 1.375rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1.3 !important;
  letter-spacing: 0% !important;
  text-align: center !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #2f2c2a !important;
}

/* 인트로 페이지 공유하기 영역 padding 강제 적용 */
.game-wrapper.basic .game-intro .share-sns-list {
  padding-top: 2.75rem !important;
}

/* 문제 페이지 테스트명 헤더 영역 */
.game-wrapper.basic .test-progress-header {
  padding: 0;
}
.game-wrapper.basic .test-controller-top {
  margin: 0;
  display: flex;
  width: 100%;
  height: 3.75rem;
  padding: 0.875rem 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
}

.game-wrapper .game-base-title {
  width: 100%;
  height: 3.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'SchoolSafeLittleOne';
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 600;
  -webkit-text-stroke: 0.5px #2f2c2a;
  line-height: normal;
}

/* 문제 페이지 테스트명 헤더 게임 타이틀 */
.game-wrapper.basic .game-title.page {
  color: #2f2c2a;
  text-align: center;
  font-family: 'SchoolSafeLittleOne';
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  background-color: transparent !important;
  -webkit-text-stroke: 0.5px #2f2c2a;
}

.game-wrapper .game-title {
  background-color: transparent !important;
  color: #2f2c2a !important;
  font-family: 'SchoolSafeLittleOne' !important;
  font-size: 1.625rem !important;
}

/* 문제 페이지 테스트명 헤더 - 뒤로가기, 진행률바 미사용 */
.game-wrapper.basic .test-progress-header .back-btn-wrap,
.game-wrapper.basic .test-progress-header .test-controller-bottom,
.game-wrapper.basic .test-progress-header .game-stage-wrap {
  display: none;
}

.game-wrapper.basic:has(.app-main:not(.result):not(.list-type)) {
  background-image: url(https://cdn.banggooso.com/assets/images/game281/questions/background.png);
  background-repeat: no-repeat;
  background-position: center 0.5rem;
  background-size: cover;
}

.game-wrap .game-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.875rem;
  position: relative;
}

/* 문제 페이지 스테이지 */
.game-wrap .game-body .progress-image {
  width: 100%;
  height: 3rem;
  object-fit: contain;
  margin-bottom: 1rem;
}

.game-wrap .game-body::before {
  content: '';
  display: block;
  width: 100%;
  height: 3rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.game-wrap .game-body.test-step-1::before {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/progressbar/step1.png');
}
.game-wrap .game-body.test-step-2::before {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/progressbar/step2.png');
}
.game-wrap .game-body.test-step-3::before {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/progressbar/step3.png');
}
.game-wrap .game-body.test-step-4::before {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/progressbar/step4.png');
}
.game-wrap .game-body.test-step-5::before {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/progressbar/step5.png');
}
.game-wrap .game-body.test-step-6::before {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/progressbar/step6.png');
}
.game-wrap .game-body.test-step-7::before {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/progressbar/step7.png');
}
.game-wrap .game-body.test-step-8::before {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/progressbar/step8.png');
}
.game-wrap .game-body.test-step-9::before {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/progressbar/step9.png');
}
.game-wrap .game-body.test-step-10::before {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/progressbar/step10.png');
}
.game-wrap .game-body.test-step-11::before {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/progressbar/step11.png');
}
.game-wrap .game-body.test-step-12::before {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/progressbar/step12.png');
}

/* Q1 - Q12 텍스트 */
.game-wrap .game-body[class*='test-step-']::after {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.424375rem;
  height: 2.218125rem;
  content: '';
  font-family: 'SchoolSafeLittleOne';
  font-weight: 600;
  font-size: 1.375rem;
  color: #fff;
  position: absolute;
  top: 4.7rem;
  left: 6rem;
  text-align: center;
  -webkit-text-stroke: 0.5px #fff;
}

.game-wrap .game-body.test-step-1::after {
  content: 'Q1';
}
.game-wrap .game-body.test-step-2::after {
  content: 'Q2';
}
.game-wrap .game-body.test-step-3::after {
  content: 'Q3';
}
.game-wrap .game-body.test-step-4::after {
  content: 'Q4';
}
.game-wrap .game-body.test-step-5::after {
  content: 'Q5';
}
.game-wrap .game-body.test-step-6::after {
  content: 'Q6';
}
.game-wrap .game-body.test-step-7::after {
  content: 'Q7';
}
.game-wrap .game-body.test-step-8::after {
  content: 'Q8';
}
.game-wrap .game-body.test-step-9::after {
  content: 'Q9';
}
.game-wrap .game-body.test-step-10::after {
  content: 'Q10';
}
.game-wrap .game-body.test-step-11::after {
  content: 'Q11';
}
.game-wrap .game-body.test-step-12::after {
  content: 'Q12';
}

/* 문제 페이지 문제 텍스트 */
.game-wrap .game-body .question-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.25rem 0 0;
  width: 100%;
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/question-bubble.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 7.9375rem;
  color: #2f2c2a;
  font-family: 'SchoolSafeLittleOne';
  font-size: 1.875rem;
  font-weight: 600;
  padding-top: 0.5rem;
  -webkit-text-stroke: 0.75px #2f2c2a;
}

/* 문제 페이지 문제 이미지 */
.game-wrap .game-body .question-image {
  width: 18.375rem;
  height: 14.1875rem;
  margin: 1.125rem 0 0;
  position: relative;
  top: -2.25rem;
}

/* 문제 페이지 답안 영역 */
.question-options {
  width: 100%;
  height: 4.875rem;
}

/* 문제 페이지 답안 버튼 */
.game-wrap .game-body .question-options button.question-option {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/button-inactive.png');
  background-size: contain;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  color: #373529;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.875rem;
  border: none;
  background-color: transparent;
}

.game-wrap .game-body .question-options .question-option + .question-option {
  margin-top: 0.75rem;
}

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

/* 문제 페이지 답안 버튼 */
.game-wrap .game-body .question-options button.question-option:active,
.game-wrap .game-body .question-options button.question-option:focus {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/button-active.png');
  background-color: transparent;
  color: #fff;
}

/* 결과 페이지 */
.result-wrapper {
  width: 100%;
  height: 100%;
  color: #2f2c2a;
}

.game-wrapper.basic:has(.app-main.result) {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/results/background.png') !important;
  background-size: cover;
  background-position: center 0.4rem;
  background-repeat: no-repeat;
  min-height: 100vh;
}

.game-wrapper.basic .game-result {
  padding: 3.75rem 0 0 0;
}

/* 결과페이지 결과명 영역 */
.result-wrapper .game-title {
  width: 100%;
  height: 3.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent !important;
  flex-wrap: wrap;
  font-family: 'SchoolSafeLittleOne';
  font-size: 2.4rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: normal;
}

.result-wrapper .badge-image {
  width: auto;
  height: 3.625rem;
  margin-top: 0.75rem;
  margin-bottom: 1.375rem;
}

/* 이벤트 */
.event-wrap .top {
  margin-top: 60px;
  width: 100%;
  height: 15.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  color: #2f2c2a !important;
}

.event-wrap .top img {
  width: 6.125rem;
  height: 3.125rem;
}

.event-wrap .top p {
  font-family: 'SchoolSafeLittleOne';
  font-size: 2.25rem;
  font-weight: 800;
}

.event-wrap .top .open-account {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 25rem !important;
  height: 5rem !important;
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/button-active.png');
  background-size: contain;
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  color: #fff;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-weight: 600;
}

.event-wrap .top .open-account::before {
  content: '';
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/icons/add.png');
  width: 1.75rem;
  height: 1.75rem;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: 5.5rem;
  top: 1.55rem;
}

.event-wrap .top .arrow {
  position: absolute;
  left: 9.5rem;
  top: 6rem;
  width: 3.166875rem;
  height: 3.118125rem;
  background-size: contain;
  background-repeat: no-repeat;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.3125rem);
  }
}

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

@keyframes slideUp1 {
  0% {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

@keyframes slideUp2 {
  0% {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

.event-wrap .top button.bubble {
  position: absolute;
  display: flex;
  justify-content: center;
  line-height: 5.3rem;
  right: 2rem;
  top: 6.3rem;
  z-index: 10;
  width: 16.26625rem;
  height: 5.7025rem;
  padding: 0;
  margin: 0;
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/icons/speech-bubble-hd.png');
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  font-family: 'SchoolSafeLittleOne';
  pointer-events: none;
  color: #2f2c2a;
  font-size: 1.3125rem;
  font-weight: 600;
  background-color: transparent;
  animation: float 2s ease-in-out infinite;
  -webkit-text-stroke: 0.5px #2f2c2a;
}

@media (max-width: 500px) {
  .event-wrap .top button.bubble {
    letter-spacing: -0.04rem;
  }
}

.info-wrap {
  margin-top: 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.info-wrap .info {
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 2rem;
  color: #2f2c2a;
  letter-spacing: 0;
}

.info-wrap .info span {
  font-weight: 700;
}

.event-wrap .line {
  width: 12.5rem;
  height: auto;
  padding-top: 3.125rem;
  padding-bottom: 2.75rem;
}

/* 결과 이벤트 이미지 영역 */
.game-result .event-wrap {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/background.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  transform: skew(0deg);
}

/* preload 해놓기 */
.game-result .event-wrap::before {
  content: '';
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: -999;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.game-result .event-wrap:has(.warn-info.open-toggle) {
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

/* 결과 이벤트 버튼 영역 */
.game-result .event-button-wrap {
  display: flex;
  padding: 0 1.88rem 3.125rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

/* 결과 이벤트 버튼 */
.game-result .event-button {
  display: flex;
  width: 100%;
  height: 5rem;
  justify-content: center;
  align-items: center;
  border-radius: 0.625rem;
  background: #2f2c2a;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

/* 결과 공유하기 영역 */
.share-sns-list {
  margin: 0 !important;
  padding: 0 !important;
}

.share-sns-list .list-title span {
  font-family: 'SchoolSafeLittleOne' !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #2f2c2a !important;
}

/* 공유하기 버튼 - 카카오 */
.share-sns-list .btn-share.kakao {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/icons/kakaotalk.svg');
  background-size: contain;
  background-color: transparent;
  border: none;
}

/* 공유하기 버튼 - 트위터 */
.share-sns-list .btn-share.twitter {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/icons/twitter.svg');
  background-size: contain;
  background-color: transparent;
  border: none;
}

/* 공유하기 버튼 - 인스타 */
.share-sns-list .btn-share.instagram {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/icons/instagram_new.png');
  background-size: contain;
  background-color: transparent;
  border: none;
}

/* 공유하기 버튼 - 링크 */
.share-sns-list .btn-share.link-copy {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/icons/link.svg');
  background-size: contain !important;
  background-color: transparent;
  border: none;
}

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

/* 결과 다시하기 버튼 */
.game-wrapper.basic .game-result .btn_retest > a {
  display: flex;
  width: 12.5rem;
  height: 5rem;
  padding: 1.5rem 0;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border-radius: 1rem;
  background: #2f2c2a;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.875rem;
  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: calc(50% + 0.1rem) calc(50% - 0.1rem);
}

.game-wrapper.basic .game-result .good {
  margin-bottom: 0 !important;
}

.game-wrapper.basic .game-result .bad {
  margin-bottom: 0 !important;
}

/* 방구소 더보기 영역 */
.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;
  filter: brightness(0) invert(1); /* 흰색으로 변경 */
  padding-top: 2.5rem; /* 40px를 rem으로 변환 */
}

/* 방구소 더보기 방구소 제목 */
.game-result .contents-more .contents-main .sub-text {
  color: #333;
  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 #333;
  border-radius: 0;
  background: transparent;
  padding: 1.66669rem 2rem;
  margin: 0;
}

/* 방구소 더보기 버튼 텍스트 */
.game-result .contents-more .contents-list .game-btn > a {
  color: #333;
  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 {
  content: '';
  width: 2rem;
  height: 2rem;
  left: 87%;
  top: 1.45rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/icons/expand_more.svg');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* 결과 콘텐츠 추천 */
.game-result .recommend-list {
  margin: 0;
}

/* 결과 콘텐츠 추천 배경 색상 */
.game-result .recommend-list:before {
  background: #fff253;
  height: 16.125rem;
}

/* 결과 콘텐츠 추천 제목 */
.game-result .recommend-list .inner .title {
  color: #2c2b2f;
  font-family: 'Pretendard';
  font-size: 1.50013rem;
  font-style: normal;
  font-weight: 600;
  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 #fff;
  border-radius: 0;
  background-color: #fff;
}
.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: black;
  font-family: 'Pretendard';
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -2.2%;
  background-color: #fff;
  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: #2f2c2a;
  text-align: center;
  font-size: 1.25006rem;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.025rem;
}

/* MBTI 결과 이미지 */
.result-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0 1rem;
}

/* 인터랙션 이미지 애니메이션 */
.interaction-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.interaction-img {
  position: absolute;
  height: auto;
  opacity: 0;
  transform: translateY(2rem) scale(0.5);
}

.interaction-img:nth-child(1) {
  width: 6.6175rem;
  height: 3.6075rem;
  top: 24rem;
  right: 2rem;
  animation: interaction1 4s infinite;
}

.interaction-img:nth-child(2) {
  width: 5rem;
  height: 3.7375rem;
  top: 24rem;
  left: 3.5rem;
  animation: interaction2 4s infinite;
}

.interaction-img:nth-child(3) {
  width: 5rem;
  height: 3.7375rem;
  top: 11.5rem;
  right: 3.8rem;
  animation: interaction3 4s infinite;
}

@keyframes interaction1 {
  0%,
  20% {
    opacity: 0;
    transform: translateY(2rem) scale(0.5);
  }
  25%,
  40% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  45%,
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(1);
  }
}

@keyframes interaction2 {
  0%,
  45% {
    opacity: 0;
    transform: translateY(2rem) scale(0.5);
  }
  50%,
  65% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(1);
  }
}

@keyframes interaction3 {
  0%,
  70% {
    opacity: 0;
    transform: translateY(2rem) scale(0.5);
  }
  75%,
  90% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  95%,
  100% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
}

/* 메뉴판 제목 오버레이 */
.capture-wrap {
  position: relative;
  cursor: pointer;
  width: 23.4375rem;
  height: 41.625rem;
  max-height: 41.625rem;
  border-radius: 1rem;
  box-shadow: 0 0.25rem 1rem rgba(215, 201, 188, 1);
  overflow: hidden;
}

.capture-wrap img {
  width: 100%;
  height: 100%;
}

.menu-title-overlay {
  position: absolute;
  margin-top: 3.8rem;
  z-index: 1;
  width: 100%;
  color: #2f2c2a;
  font-family: 'SchoolSafeLittleOne';
  font-size: 2.125rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

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

/* 저장 안내 텍스트 스타일 */
.save-result-image {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1.25rem;
  padding-bottom: 3.75rem;
}

.save-result-image img {
  width: 0.71875rem;
  height: 0.898125rem;
  background-color: transparent;
  border: none;
}

.save-result-image p {
  font-size: 400 !important;
  -webkit-text-stroke: 0.4px #2f2c2a !important;
}

/* 궁합 섹션 */
.result-box.type .result-box-title {
  display: none !important;
}

.result-box.type .btn-gray-round {
  display: none !important;
}

/* 궁합 컨테이너 크기 */
.result-box.type {
  width: 27.5rem;
  height: 27.5675rem;
  margin: 0 auto;
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/icons/menu-container.png');
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  background-color: transparent;
}

/* 가장 많은 유형 컨테이너 크기 (높이 증가) */
.result-box.type.most-types {
  height: 35.505rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/icons/menu-container-long.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  background-color: transparent;
}

.result-box.type.most-types .most_types li {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 1.09375rem !important;
}

/* 가장 많은 유형 ul 패딩 */
.result-box.type.most-types .most_types {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.result-box.type.most-types .img-responsive {
  max-width: 100% !important;
  width: 100% !important;
  height: 17.95rem;
  box-shadow: 0 0.25rem 0.625rem rgba(215, 201, 188, 1);
  order: 0 !important;
  border-radius: 8px;
}

/* 궁합 li 요소 레이아웃 조정 */
.result-box.type .most_types li {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 1.09375rem !important;
}

/* 최고/최악 라벨을 제일 위로 */
.result-box.type .most_types li p {
  order: -2 !important;
  font-family: 'SchoolSafeLittleOne' !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-size: 1.7875rem !important;
  line-height: 100% !important;
  letter-spacing: -0.04em !important;
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/icons/numbering.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  color: #ffffff !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 1rem !important;
  min-height: 2rem !important;
  padding-top: 0.8rem !important;
}

.result-box.type.most-types .most_types li:first-child p {
  font-size: 1.5rem !important;
}

.result-box.type.most-types .most_types li:nth-child(2) p {
  font-size: 1.5rem !important;
}

/* label-bottom을 두 번째로 */
.result-box.type .most_types li .label-bottom {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 1rem !important;
  padding-bottom: 0.75rem !important;
  order: -1 !important;
  font-family: 'Pretendard' !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 1.1875rem !important;
  line-height: 100% !important;
  letter-spacing: -0.01em !important;
}

/* result-box 패딩 제거 */
.game-wrapper.basic .game-result .result-box {
  padding: 0;
}

/* 궁합 이미지 크기 및 그림자 오버라이드 */
.result-box.type .img-responsive {
  max-width: 100% !important;
  width: 100% !important;
  height: 18.315rem;
  box-shadow: 0 0.25rem 0.625rem rgba(215, 201, 188, 1);
  order: 0 !important;
  border-radius: 8px;
}

.save-result-image p {
  font-family: 'SchoolSafeLittleOne';
  font-size: 1.4375rem;
  font-weight: 800;
}

.compatibility-content .most_types {
  padding-top: 1.75rem !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.compatibility-content .most_types li img {
  cursor: pointer;
}

/* 유형 순위 타이틀 영역 */
.list-type .game-title {
  width: 100%;
  height: 3.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  margin-bottom: 1.25rem;
}

/* 유형 순위 타이틀 부제 */
.list-type .game-title h4 {
  color: #2f2c2a;
  font-family: 'SchoolSafeLittleOne';
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 100%;
  margin: 0;
  -webkit-text-stroke: 0.3px #2f2c2a;
  margin-bottom: 0.25rem;
}

/* 유형 순위 타이틀 이미지 */
.list-type .game-title .rank-title-image {
  width: 15.88875rem;
  height: 3.5725rem;
  object-fit: contain;
  margin-top: 1.5rem;
}

/* 유형 순위 기존 타이틀 제거 */
.game-wrapper.basic .rank_title_wrap {
  display: none;
}

/* 유형 순위 리스트 */
.test-lists-wrap .test-lists {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
  padding: 0rem 1.88rem;
  margin-top: 3.2rem;
}

/* 유형 순위 아이템 박스 */
.list-type .list-item-wrap {
  display: flex;
  width: 100%;
  height: 12.5rem;
  padding: 1.5rem 1.875rem 1.5rem 2.25rem;
  justify-content: space-between;
  align-items: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  position: relative;
}

/* list-item 사이 구분선 */
.list-type .divider-line {
  width: 25rem;
  height: 0.125rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/icons/long-line.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 0.5rem;
}

/* 유형 순위 아이템 내용 */
.list-type .list-item {
  display: flex;
  padding-bottom: 0.75rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  align-self: stretch;
}

/* 유형 순위 아이템 순위 */
.list-type .list-item-rank {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/icons/numbering.png') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 3.72rem !important;
  height: 2.52rem !important;
  min-height: 2.52rem !important;
  max-height: 2.52rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.list-type .list-item-rank p {
  color: #fff;
  font-family: 'SchoolSafeLittleOne';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  padding: 0;
  padding-top: 0.4rem;
}

/* 유형 순위 아이템 타이틀 영역 */
.list-type .list-item-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

.list-item-title-wrap .list-item-title {
  font-family: 'SchoolSafeLittleOne' !important;
  font-size: 2.375rem !important;
  font-weight: 600 !important;
  line-height: 2.375rem !important;
  padding: 0 !important;
}

.list-item-title-wrap .list-item-subtitle {
  font-family: 'Pretendard' !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  line-height: 1.5rem !important;
  padding: 0 !important;
}

/* 유형 순위 아이템 이미지 */
.list-type .list-item-image img {
  width: 6.25rem;
  height: 11.1rem;
  object-fit: cover;
  border-radius: 0.25rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.24);
}

/* Modal */
.modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}
.modal .modal-header {
  width: 100%;
  text-align: right;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding-bottom: 0.62rem;
}
.modal .modal-header p {
  color: #fff;
  text-overflow: ellipsis;
  font-family: 'Pretendard Variable';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.875rem;
  letter-spacing: -0.01375rem;
  padding-left: 0.44rem;
}
.modal .modal-header .btn-close {
  background: transparent;
}
.modal .modal-header .btn-close > img {
  width: 1.875rem;
  aspect-ratio: 1/1;
}
.modal .modal-content {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 5.62rem;
}
.modal .capture-image {
  border-radius: 0.998rem;
  border: 0.075rem solid #515151;
  box-shadow: 0px 0.2rem 0.2rem 0px rgba(0, 0, 0, 0.15);
  overflow: auto;
}
.modal .modal-content .capture-image > img {
  -webkit-touch-callout: default !important;
}

/* Footer 오버라이드 */

/* 방구소 더보기 영역 배경 */
.game-result .contents-more {
  background-color: #2f2c2a !important;
  margin-bottom: 0 !important;
}

/* 방구소 더보기 제목 영역 */
.game-result .contents-more .contents-main {
  background-color: #2f2c2a !important;
}

/* 방구소 더보기 제목 텍스트 */
.game-result .contents-more .contents-main .sub-text {
  color: #ffffff !important;
}

/* 방구소 더보기 버튼들 */
.game-result .contents-more .contents-list .game-btn {
  background-color: #2f2c2a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* 방구소 더보기 버튼 텍스트 */
.game-result .contents-more .contents-list .game-btn > a {
  color: #ffffff !important;
}

/* 추천 콘텐츠 영역 배경 */
.game-result .recommend-list:before {
  background: #2f2c2a !important;
}

/* 추천 콘텐츠 제목 */
.game-result .recommend-list .inner .title {
  color: #ffffff !important;
}

/* 방구소 더보기 버튼 아이콘 (화살표) 흰색으로 변경 */
.game-result .contents-more .contents-list .game-btn::before {
  filter: brightness(0) invert(1) !important;
}

/* 추천 콘텐츠 영역 전체 배경 */
.game-result .recommend-list {
  padding-top: 2.1875rem;
  background-color: #2f2c2a !important;
}

.game-result .recommend-list .btn-wrap > a {
  background: #ffffff !important;
  color: #2f2c2a !important;
}

.chemi-wrap {
  padding-top: 4.375rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chemi-wrap img {
  width: 1.875rem;
  height: 2rem;
  margin-bottom: 0.625rem;
}

.chemi-wrap p {
  color: #2f2c2a;
  font-family: 'SchoolSafeLittleOne';
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0;
  line-height: 1;
}

.popular-types-wrap p {
  color: #2f2c2a;
  font-family: 'SchoolSafeLittleOne';
  font-size: 2.5rem;
  font-weight: 800;
}

.popular-types-wrap img {
  width: 1.875rem;
  height: 2rem;
}

.popular-types-wrap-inner {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.popular-types-wrap {
  padding-top: 4.375rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popular-types-wrap-desc {
  font-size: 1.5rem !important;
  letter-spacing: 0;
  margin-bottom: 1.125rem;
}

.most-types-rank {
  order: -2 !important;
  margin-bottom: 0.5rem !important;
  font-family: 'SchoolSafeLittleOne' !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-size: 1.5rem !important;
  line-height: 100% !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/icons/numbering.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 1rem !important;
  min-height: 2rem !important;
  padding-top: 0.8rem !important;
}

/* 가장 많은 유형 컨텐츠 영역 */
.most-types-content {
  order: 1 !important;
  margin-top: 1rem !important;
  text-align: center !important;
}

.most-types-title {
  font-family: 'Pretendard' !important;
  font-weight: 600 !important;
  font-size: 1.1875rem !important;
  color: #333 !important;
}

.most-types-percentage {
  font-family: 'Pretendard' !important;
  font-weight: 400 !important;
  font-size: 0.875rem !important;
  color: #373529cc !important;
}

/* 가장 많은 유형 버튼 영역 */
.most-types-button-wrap {
  padding: 1.5rem 0 0 0;
}

.most-types-button {
  width: 23.75rem;
  height: 4.75rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game281/questions/button-active.png');
  background-size: 100% 100%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  color: #fff;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-weight: 600;
  cursor: pointer;
}

.popular-types-wrap .img-halt-box {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

.game-result .btn_retest > a {
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/icons/retry-button.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  color: transparent !important;
  text-indent: -9999px !important;
  width: 15rem !important;
  height: 4.75rem !important;
}

.game-result .btn_retest > a::after {
  display: none !important;
}

.result-image-wrapper .img-object {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 100;
  background-color: transparent !important;
  border: none !important;
}

/* 유형 페이지 전체 배경 (헤더 포함) */
.game-wrapper.basic:has(.app-main.list-type) {
  background-image: url(https://cdn.banggooso.com/assets/images/game281/ranks/background.png) !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 0.9rem;
  min-height: 100vh;
}

.warn-info {
  width: 100%;
  height: auto;
  overflow: hidden;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}

.warn-info .heading {
  width: 100%;
  height: 4.375rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.1);
  border-bottom: 0.75px solid #0000004d;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* heading 내부 컨테이너 */
.warn-info .heading .heading-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 화살표 아이콘 */
.warn-info .heading .arrow-icon {
  width: 1.5rem;
  height: 1.5rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game281/events/icons/kakaobank_arrow_down.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
}

/* 열렸을 때 화살표 회전 */
.warn-info.open-toggle .heading .arrow-icon {
  transform: rotate(180deg);
}

.warn-info .heading p,
.warn-info .heading span {
  font-family: 'Pretendard';
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.875rem;
  letter-spacing: -0.01em;
  color: rgba(104, 104, 104, 0.8);
}

.warn-info .heading p {
  margin: 0;
}

.warn-info .txt {
  max-height: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0;
  text-align: left;
}

.warn-info.open-toggle {
  justify-content: flex-start;
}

.warn-info.open-toggle .txt {
  max-height: 1000px;
  padding: 1.75rem 1.875rem 2.25rem 1.875rem;
  opacity: 1;
}

.warn-info .txt div {
  margin: 0;
  font-weight: 600;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.warn-info .txt ol li,
.warn-info .txt li {
  margin-bottom: 0.75rem;
  line-height: 1.875rem;
  font-family: 'Pretendard';
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: rgba(104, 104, 104, 0.8);
  word-break: keep-all;
}

.warn-info .txt ol li {
  font-style: normal;
  position: relative;
  padding-left: 1.5rem;
}

.warn-info .txt ol li::before,
.warn-info .txt li ol li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(104, 104, 104, 0.8);
  font-weight: 600;
}

.warn-info .txt li.hd {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.warn-info .txt li ol {
  list-style: none !important;
  padding-left: 0;
}

.warn-info .txt li ol li {
  margin-bottom: 0.25rem;
  padding-left: 1rem;
}

.warn-info .txt li ol li span {
  font-weight: 600;
}

.warn-info .txt li.last-item {
  font-weight: 500;
}