/* 아이폰 se */
@media (min-height: 660px) {
  /* quiz_result.html */
  .complete-answer .user-profile-img {
    width: 120px;
    height: 120px;
  }
  
  .complete-answer.card-box {
    gap: var(--spacing-lg);
  }
}
@media (min-height: 800px) {
  .complete-answer .user-profile-img,
  .partial-answer .user-profile-img {
    width: 160px;
    height: 160px;
  }
  
  .complete-answer.card-box {
    gap: var(--spacing-xl);
  }
  
  .partial-answer.card-box {
    gap: 90px;
  }
}
/* 갤럭시폴드 */
@media (max-width: 280px) {
  .banner {
    background-size: 100% 100%;
  }
}
/* 태블릿 소 사이즈 (480px 이상) */
@media (min-width: 480px) {
  /* typo */
  .card-title {
    font-size: 18px;
  }
  
  /* main.html */
  .pop-up {
    width: 50%;
  }
  
  .pop-up .content {
    width: 300px;
    margin: 0 auto;
  }
  
  /* 진행중 */
  /* report.html */
  .ctx {
    width: 60%;
  }
  
  .overall-review-section .card-box p,
  .scores-by-category .card-box p {
    /* width: 70%; */
    margin: 0 auto;
  }
  
  /* ranking.html */
  .my-ranking-section .ranking-info > div > a {
    font-size: 16px;
  }
  
  .my-ranking-section .user-profile-img {
    width: 90px;
    height: 90px;
    /* result.html */
  }
  
  /* result.html */
  .achieved-score > div {
    width: 260px;
  }
  
  
  /* 태블릿 중 사이즈 (768px 이상) */
  @media (min-width: 768px) {
    /* typo */
    :root {
      /* Typography */
      --base-font-size: 17px;
      --small-font-size: 15px;
      
      /* Spacing */
      --spacing-xs: 5px;
      --spacing-sm: 12px;
      --spacing-md: 20px;
      --spacing-lg: 24px;
      --spacing-xl: 30px;
    }
    
    .title h1 {
      font-size: 26px;
    }
    
    .sub-title {
      font-size: 20px !important;
    }
    .report-card__title .sub-title{
      font-size: 12px !important;
    }
    .card-title {
      font-size: 18px;
    }
    
    /* register.html */
    .banner {
      background-position: 50% 25%;
    }
    
    /* report.html */
    .overall-review-section .card-box {
      flex-direction: row;
      gap: 20px;
    }
    
    .overall-review-section .card-box p {
      margin: auto 0;
      text-align: left;
    }
    
    .ctx {
      width: 50%
    }
    
    /* quiz_main.html */
    .quiz-filter input[type="radio"] + label {
      font-size: 17px;
      padding: 3px 10px;
    }
    
    .brain-training-progress-section ul {
      margin: 20px;
      /* gap: 6.6%; */
    }
    
    .brain-training-progress-section ul li {
      /* width: 20%; */
      /* font-size: 17px; */
    }
    
    .brain-training-progress-section ul li > button {
      font-size: 17px;
      padding: 3px 0;
      width: 80%;
    }
    
    /* ranking.html */
    .my-ranking-section .ranking-info div {
      font-size: 24px;
    }
    
    .my-ranking img {
      width: 24px;
    }
    
    .my-ranking > div {
      margin: 20px 20px;
    }
    
    .ranking-updown img {
      flex: 0 0 16px;
      width: 16px;
    }
    
    .my-ranking {
      height: 63px;
    }
    
    .my-ranking-section .ranking-info .medal-guide {
      font-size: 14px;
    }
    
    /* quiz.html */
    .quiz .quiz-img {
      width: 180px;
    }
    
    .quiz-type5 .wrapper {
      width: auto;
    }
    
    /* quiz_result.html */
    .title-banner {
      width: 70%;
    }
    
    .achieved-score {
      width: 60%;
    }
    
    .achieved-score > div {
      width: auto;
      justify-content: space-around;
    }
    
    .complete-answer .user-profile-img, .partial-answer .user-profile-img {
      width: 300px;
      height: 300px;
    }
    
    .complete-answer .my-point {
      font-size: 42px;
    }
    
    /* levelup-popup */
    #levelup-popup .levelup-img {
      width: 200px;
    }
    
    #levelup-popup h1 {
      font-size: 42px;
    }
    
    #levelup-popup .levelup-animation {
      width: 530px;
    }
    
  }
}

/* New Responsive - 항상 포함 되어야 함. */
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
/* 태블릿 이상 (481px 이상) */
@media (min-width: 481px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e1e1e1;
  }
  
  .container {
    max-width: 480px;
    padding-bottom: 100%;
    box-shadow: 1px 27px 161px 6px rgba(224, 200, 164, 0.75);
  }
  
  /* 뇌운동 홈 */
  .container:has(.main-container) {
    padding-bottom: 0;
  }
  
  .container:has(.main-container) .navigation-bar {
    width: inherit;
    max-width: inherit;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    height: 80px;
  }
  
  /* 뇌운동 퀴즈 메인 */
  body:has(.quiz-main-container), body:has(.quiz-main-empty-container) {
    margin-bottom: 0;
  }
  
  .container:has(.quiz-main-container) {
    background: #FFFCFA;
    padding-bottom: 0;
  }
  
  .container:has(.quiz-main-empty-container) {
    background: white;
    padding-bottom: 0;
  }
  
  .quiz-main-container {
    padding-bottom: 100%;
  }
  
  .quiz-main-empty-container {
    padding-bottom: 70%;
  }
  
  .container:has(.quiz-main-container) .navigation-bar {
    width: inherit;
    max-width: inherit;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    height: 80px;
  }
  
  /* 퀴즈 페이지 */
  body:has(.quiz-container) {
    margin-bottom: 0;
  }
  
  .container:has(.quiz-container) {
    background: #FFFCFA;
    padding-bottom: 0;
  }
  
  /* 랭킹 */
  .container:has(.ranking-list-container) {
    padding-bottom: 0;
  }
  
  .container:has(.ranking-list-container) .navigation-bar {
    width: inherit;
    max-width: inherit;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    height: 80px;
  }
  
  /* 리포트 */
  body:has(.training-report) {
    margin-bottom: 0;
  }
  
  .container:has(.training-report) {
    background: #FFFCFA;
    padding-bottom: 100px;
  }
  
  .container:has(.training-report) .navigation-bar {
    width: inherit;
    max-width: inherit;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    height: 80px;
  }
  
  .dialog .dialog-container {
    max-width: 500px;
  }
}