/* ========================================
   기본 설정
======================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #eeeeee;

  color: #222222;

  font-family:
    Pretendard,
    "Noto Sans KR",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}


[hidden] {
  display: none !important;
}



/* ========================================
   전체 페이지
======================================== */

.page {
  width: 100%;
  max-width: 750px;

  margin: 0 auto;

  background: #ffffff;

  overflow: hidden;
}



/* ========================================
   상세페이지 이미지
======================================== */

.section-image {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;

  border: 0;
}



/* ========================================
   HERO
======================================== */

.hero-section {
  position: relative;

  width: 100%;

  margin: 0;
  padding: 0;
}


/*
  이미지 안 "신청하러 가기" 버튼의
  실제 클릭 영역
*/

.hero-apply-link {
  position: absolute;

  left: 26.4%;
  top: 78.85%;

  width: 47.2%;
  height: 5.5%;

  display: block;

  border-radius: 999px;

  cursor: pointer;

  z-index: 10;

  background: transparent;

  transition:
    background 0.18s ease,
    transform 0.18s ease,
    filter 0.18s ease;
}


/*
  마우스 오버 시
  버튼이라는 느낌을 살짝 줌
*/

.hero-apply-link:hover {
  background: rgba(255, 255, 255, 0.16);

  transform: scale(1.02);
}


/*
  클릭 시 살짝 눌리는 느낌
*/

.hero-apply-link:active {
  transform: scale(0.985);
}


/*
  클릭 후 테두리 제거
*/

.hero-apply-link:focus {
  outline: none;
}



/* ========================================
   FAQ 전체 영역
======================================== */

.faq {
  width: 100%;

  padding:
    56px
    24px
    52px;

  background: #f7f3e8;
}



/* ========================================
   FAQ 제목
======================================== */

.faq-title {
  margin-bottom: 36px;

  text-align: center;
}

.faq-title h2 {
  margin: 0 0 8px;

  color: #086437;

  font-size: 30px;
  font-weight: 900;

  letter-spacing: -0.5px;
}

.faq-title p {
  margin: 0;

  color: #666666;

  font-size: 14px;
  line-height: 1.5;
}



/* ========================================
   FAQ 카드
======================================== */

.faq-item {
  width: 100%;

  margin-bottom: 10px;

  overflow: hidden;

  background: #ffffff;

  border-radius: 16px;

  box-shadow:
    0
    2px
    10px
    rgba(0, 0, 0, 0.035);
}



/* FAQ 질문 */

.faq-question {
  width: 100%;

  margin: 0;

  padding:
    18px
    20px;

  border: 0;

  background: #ffffff;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 14px;

  color: #222222;

  font-family: inherit;

  font-size: 15px;
  font-weight: 700;

  line-height: 1.5;

  text-align: left;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
}



/* + 아이콘 */

.faq-icon {
  flex: 0 0 auto;

  color: #086437;

  font-size: 22px;
  font-weight: 400;

  line-height: 1;

  transition:
    transform
    0.2s
    ease;
}



/* FAQ 답변 */

.faq-answer {
  display: none;

  padding:
    0
    20px
    18px;

  color: #555555;

  font-size: 14px;

  line-height: 1.75;

  word-break: keep-all;
}

.faq-answer p {
  margin:
    0
    0
    8px;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}



/* FAQ 펼침 */

.faq-item.active .faq-answer {
  display: block;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}



/* ========================================
   전체 FAQ 보기
======================================== */

.faq-more-button {
  width: 100%;

  margin:
    18px
    0
    0;

  padding:
    17px
    20px;

  border:
    1.5px
    solid
    #086437;

  border-radius: 999px;

  background: transparent;

  color: #086437;

  font-family: inherit;

  font-size: 15px;
  font-weight: 800;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
}

.faq-more-icon {
  color: #086437;

  font-size: 20px;

  line-height: 1;

  transition:
    transform
    0.2s
    ease;
}

.faq-more-button.open .faq-more-icon {
  transform: rotate(45deg);
}



/* ========================================
   추가 FAQ
======================================== */

.faq-more {
  width: 100%;

  margin-top: 36px;
}



/* ========================================
   추가 FAQ 카테고리
======================================== */

.faq-category {
  margin-bottom: 34px;
}

.faq-category:last-child {
  margin-bottom: 0;
}

.faq-category h3 {
  margin:
    0
    0
    14px;

  color: #086437;

  font-size: 18px;
  font-weight: 800;

  letter-spacing: -0.3px;
}



/* ========================================
   Footer
======================================== */

.footer {
  width: 100%;

  padding:
    36px
    20px
    110px;

  background: #ffffff;

  text-align: center;
}

.footer-title {
  margin: 0;

  color: #666666;

  font-size: 14px;
  font-weight: 700;

  letter-spacing: -0.3px;
}



/* ========================================
   하단 고정 신청 버튼
   캠페인 스타일
======================================== */

.bottom-cta {
  position: fixed;

  left: 50%;

  bottom: max(
    16px,
    env(safe-area-inset-bottom)
  );

  transform: translateX(-50%);

  width: calc(100% - 32px);
  max-width: 686px;

  padding:
    18px
    22px;

  background:
    linear-gradient(
      180deg,
      #ef2b22 0%,
      #d9150d 100%
    );

  color: #ffffff;

  border:
    2px solid
    rgba(255, 255, 255, 0.35);

  border-radius: 999px;

  box-shadow:
    0 7px 0 rgba(143, 17, 12, 0.28),
    0 10px 24px rgba(0, 0, 0, 0.20);

  font-family:
    Pretendard,
    "Noto Sans KR",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 20px;
  font-weight: 900;

  line-height: 1.2;

  letter-spacing: -0.8px;

  text-align: center;
  text-decoration: none;

  white-space: nowrap;

  z-index: 9999;

  transition:
    transform 0.16s ease,
    filter 0.16s ease,
    box-shadow 0.16s ease;
}



/* 하단 버튼 마우스 오버 */

.bottom-cta:hover {
  filter: brightness(1.07);

  transform:
    translateX(-50%)
    translateY(-2px);

  box-shadow:
    0 8px 0 rgba(143, 17, 12, 0.26),
    0 13px 28px rgba(0, 0, 0, 0.22);
}



/* 하단 버튼 클릭 */

.bottom-cta:active {
  transform:
    translateX(-50%)
    translateY(2px)
    scale(0.99);

  box-shadow:
    0 3px 0 rgba(143, 17, 12, 0.28),
    0 6px 14px rgba(0, 0, 0, 0.17);
}



/* ========================================
   모바일
======================================== */

@media (max-width: 480px) {

  body {
    background: #ffffff;
  }

  .page {
    max-width: none;
  }

  .faq {
    padding:
      48px
      18px
      44px;
  }

  .faq-title {
    margin-bottom: 32px;
  }

  .faq-title h2 {
    font-size: 27px;
  }

  .faq-title p {
    font-size: 13px;
  }

  .faq-question {
    padding:
      17px
      16px;

    font-size: 14px;
  }

  .faq-answer {
    padding:
      0
      16px
      17px;

    font-size: 13px;
  }

  .faq-more-button {
    padding:
      16px
      18px;

    font-size: 14px;
  }

  .faq-category h3 {
    font-size: 17px;
  }

  .footer-title {
    font-size: 13px;
  }

  .bottom-cta {
    width: calc(100% - 24px);

    padding:
      17px
      18px;

    font-size: 19px;
    font-weight: 900;

    letter-spacing: -0.7px;

    bottom: max(
      12px,
      env(safe-area-inset-bottom)
    );
  }

}