/* ==========================================================================
  mediaquery.css (MUI breakpoints)
  xs: 0
  sm: 600px
  md: 900px
  lg: 1200px
  xl: 1536px
============================================================================ */






@media (max-width: 1440px) {
  :root {
    --container: 1200px;
  }
  /* header */
  .header-inner {
    padding: 0 var(--gutter);
  }
  .header-inner .left{
    gap: 60px;
  }
  .gnb{
    gap: 40px;
  }
}


@media (max-width: 1024px) {
  :root {
    --gutter: 24px;
    --container: 900px;
  }

  /* 공통 */
  h1{font-size: 1.5rem;}
  h2 {font-size: 1.25rem;}
  h3{font-size: 1.125rem;}
  h4{font-size: 1.125rem;}
  h5{font-size: 1rem;}
  h6{font-size: 0.875rem;}


  /* header */
  .gnb {
  display: none;
  }

  .header-inner {
    padding: 0 var(--gutter);
    height: 60px;
  }

  .header-inner .left {
    gap: 24px;
  }

  .header-cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
  }

  .header-cta .btn-primary{
    height: 40px;
    font-size: 16px;
    padding: 0 16px;
  }

  .mobile-menu-btn {
    display: inline-flex;
  }

  /* footer */
  .footer-inner{
    padding: 40px 20px;
  }
  .footer-bottom{
    padding: 20px;
  }

  /* 서브페이지 공통 */
  .arrow{
    width: 40px;
  }
  .arrow img{
    width: 40px;
    height: 40px;
  }
  .qua-step .arrow,
  .community-step .arrow{
    height: auto;
  }


}


@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --container: 600px;

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
  }

  /* header */
  .brand img{
    width: 105px;
    height: 28px;
    aspect-ratio: 15/4;
  }
  .header-cta{
    gap: 12px;
  }
  .header-cta .btn-primary{
    height: 36px;
    font-size: 14px;
  }
  .mobile-nav a{
    font-size: 1.125rem;
  }

  /* footer */
  .footer-inner{
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 20px;
  }
  .footer-brand img{
    width: 90px;
    height: 24px;
    aspect-ratio: 15/4;
  }
  .footer-brand,
  .footer-meta{
    align-items: center;
  }
  .footer-meta p,
  .footer-meta span,
  .footer-inner a,
  .footer-bottom{
    font-size: 0.875rem;
    justify-content: center;
  }
  .footer-bottom{
    text-align: center;
  }
  .footer-meta p{
    text-align: center;
  }
  .footer-meta div{
    display: flex;
    justify-content: center;
  }
  .footer-meta span:first-child{
    margin-right: 10px;
  }

  /* 공통 */

  br{display: none;}
  br.mob{display: block;}

  .section,
  .inquiry{
    padding: 60px 0;
  }
  .section-title,
  .inquiry h2{
    font-size: 1.5rem;
    margin-bottom: 40px;
  }
  p, li{
    line-height: 145% !important;
  }
  .form-actions .btn{
    width: 100%;
  }

  .inquiry .form-mail{
    font-size: 1.75rem;
  }

  /* 문의하기 */
  .form-label{
    font-size: 1rem;
  }
  .form-input, .form-textarea{
    padding: 16px 12px;
  }
  .form-actions .btn{
    height: 56px;
    font-size: 1.125rem;
  }

  /* 서브페이지 공통 */
  .sub-banner{
    height: auto;
  }
  .sub-banner .container{
    flex-direction: column;
    gap: 60px;
  }
  .sub-banner p,
  .sub-title p{
    font-size: 1rem;
  }

  .sub-banner.dark img{
    display: none;
  }

  .qua-step article,
  .community-step .group,
  .community-step.first .group{
    align-items: center;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-lg);
    padding: 30px 20px;
  }

  .survey article .number,
  .community-step .number{
    font-size: 1.75rem;
  }
  .survey article p{
    font-size: 1rem;
  }

  .arrow{
    width: 34px;
  }
  .arrow img{
    width: 34px;
    height: 34px;
  }
  .qua-step .arrow,
  .community-step .arrow{
    width: 100%;
  }

  .qua-step .arrow img,
  .community-step .arrow img{
    transform: rotate(90deg);
    margin: 0 auto;
  }

  /* table */
.table-box{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* table */
.table-box table{
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}
.table-box th,
.table-box td{
  white-space: nowrap;
  padding: 16px 20px;
  font-size: 1rem;
}


}