.main-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 8.75vw);
}

.top-area{
  padding: 3.33vw 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100vw;
}

.top-area img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.top-area h1{
  position: absolute;
  top: 7.5vw;
  left: 50%;
  transform: translateX(-50%);
  color: #FFF;
  font-size: 2.08vw;
  font-weight: 700;
  width: 100%;
  text-align: center;
}


/* =========================
   FAQ accordion
========================= */
.faq-section{
  width: 91.66vw;
  padding: 2.08vw 0 5.416vw;
}

.faq-accordion{
  display: flex;
  flex-direction: column;
}

/* details */
.faq-item{
  border-bottom: 0;               
}

/* summary */
.faq-q{
  cursor: pointer;
  height: 4.16vw;
  padding: 1.25vw;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);

  font-size: 1.25vw;
  line-height: 1;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 기본 마커 제거 */
.faq-q::-webkit-details-marker{ display:none; }
.faq-q{ list-style: none; }

/* Q 라벨 */
.faq-q .q{
  width: 2.08vw;
  margin-right: 0.833vw;
  display: inline-block;
}
/* Q 라벨 */
.faq-a .a{
  width: 4.16vw;
  margin-right: 0.833vw;
  display: inline-block;
  font-size: 1.25vw;
  font-weight: bold;
  height: 100%;
}

/* ✅ 오른쪽 화살표: SVG를 CSS로 통제 */
.faq-arrow{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-block;
  opacity: 0.9;

  transform: rotate(0deg); /* 기본(닫힘) */
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease;
}

.faq-arrow::before{
  content:"";
  display:block;
  width: 100%;
  height: 100%;
  background: currentColor;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 10l3.5 3.5L15.5 10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 10l3.5 3.5L15.5 10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ✅ JS가 토글하는 상태 클래스(열림) */
.faq-item.is-expanded .faq-arrow{
  transform: rotate(-180deg);
}

/* 답변 래퍼/본문 */
.faq-answer-wrap{
  /* JS에서 height를 애니메이션할 것이므로 여기서 height transition은 하지 않음 */
  overflow: hidden;
  background-color: transparent;
}

/* 실제 답변 박스 */
.faq-a{
  background-color: #f4f4f4;
  padding: 1.25vw;

  color: black;
  font-size: 0.833vw;
  line-height: 1.4;

  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.8,.2,1);
  display: flex;
}

/* 열렸을 때 텍스트도 부드럽게 */
.faq-item.is-expanded .faq-a{
  opacity: 1;
  transform: translateY(0);
}

/* focus */
.faq-q:focus-visible{
  outline: 2px solid rgba(0,0,0,0.18);
  outline-offset: 2px;
  border-radius: 10px;
}

/* 접근성/모션 최소화 */
@media (prefers-reduced-motion: reduce){
  .faq-arrow,
  .faq-a{
    transition: none !important;
  }
}


@media (max-width: 1201px) {
    .top-area{
      padding: 8.59vw 0 0;
      height: 40.08vw;
    }
    .top-area img{
      object-fit: cover;  
      object-position: center center;
    }
    .top-area h1{
      top: 21.74vw;
      font-size: 3.22vw;
      width: 46.04vw;
    }


    
    /* =========================
       FAQ accordion
    ========================= */
    .faq-section{
      width: 100%;
      padding: 5.36vw 2.14vw 10.73vw;
    }

    /* summary */
    .faq-q{
      cursor: pointer;
      height:unset;
      padding: 2.14vw;
      font-size: 2.14vw;
    }

    .faq-q span{
      display: flex;
      align-items: center;
    }

    .faq-q .q{
      width: 3.22vw;
      font-size: 3.22vw;
      margin-right: 2.14vw;
    }
    .faq-a .a{
      width: 3.22vw;
      margin-right: 2.14vw;
      font-size: 3.22vw;
    }

    .faq-arrow{
      width: 2.14vw;
      height: 2.14vw;
      flex: 0 0 2.14vw;
    }


    /* 실제 답변 박스 */
    .faq-a{
      padding: 2.14vw;
      font-size: 2.14vw;
    }

    /* 열렸을 때 텍스트도 부드럽게 */
    .faq-item.is-expanded .faq-a{
      opacity: 1;
      transform: translateY(0);
    }

    /* focus */
    .faq-q:focus-visible{
      outline: 2px solid rgba(0,0,0,0.18);
      outline-offset: 2px;
      border-radius: 10px;
    }

}

@media (max-width: 744px) {
    .top-area{
      padding: 17.06vw 0 0;
      height: 81.06vw;
    }

    .top-area h1{
      top: 43.2vw;
      font-size: 8.52vw;
      width: 91.46vw;
    }


    .faq-section{
      width: 100%;
      padding: 10.66vw 4.26vw 21.33vw;
    }

    /* summary */
    .faq-q{
      padding: 4.26vw;
      font-size: 4.26vw;
    }


    .faq-q .q{
      width: 6.4vw;
      font-size: 6.4vw;
      margin-right: 4.26vw;
    }
    .faq-a .a{
      width: 6.4vw;
      margin-right: 4.26vw;
      font-size: 6.4vw;
    }

    .faq-arrow{
      width: 4.26vw;
      height: 4.26vw;
      flex: 0 0 4.26vw;
    }

    .faq-a{
      padding: 4.26vw;
      font-size: 4.26vw;
    }

}