@charset "utf-8";
/* =============================================================
   event-template.css — 이벤트 본문 레이아웃
   원본: components/template/template-page-body.tsx, template-faq-section.tsx
   강조색 #026478 / 본문 #17171b / 배경 #f9fafb
   ============================================================= */

main { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; }

.tpl-root { position: relative; background: #f9fafb; color: #17171b; }

/* 웹/모바일 텍스트 토글 (원본 hidden / lg:block 패턴) */
.tpl-web { display: none; }
.tpl-mobile { display: block; }

.tpl-section {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 44px 20px;
}
.tpl-container { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 353px; }
.tpl-card { display: flex; flex-direction: column; width: 100%; }

/* 이미지 */
.tpl-hero {
  position: relative; width: 100%; overflow: hidden;
  border-radius: 20px 20px 0 0; aspect-ratio: 1448 / 1086;
}
.tpl-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tpl-secondary { position: relative; width: 100%; height: 315px; overflow: hidden; }
.tpl-secondary img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 흰색 콘텐츠 블록 */
.tpl-block { display: flex; flex-direction: column; width: 100%; background: #fff; padding: 32px 16px; }
.tpl-block--last { border-radius: 0 0 20px 20px; padding: 32px 16px 58px; }

/* 섹션(제목 + 항목 리스트) */
.tpl-sectionblock { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding: 44px 0 40px; }
.tpl-heading {
  width: 100%; text-align: center; font-size: 32px; line-height: 1.3; color: #17171b;
  margin: 0;
}
.tpl-items { display: flex; flex-direction: column; align-items: flex-start; gap: 52px; width: 100%; text-align: left; }
.tpl-item { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
.tpl-item__title {
  width: 100%; text-align: left; font-size: 28px; font-weight: 700; line-height: 1.5; color: #026478; margin: 0;
}
.tpl-item__desc {
  width: 100%; text-align: left; font-size: 24px; font-weight: 300; line-height: 1.5; color: #17171b; margin: 0;
}

/* 유튜브 */
.tpl-youtube { position: relative; width: 100%; overflow: hidden; background: #313131; aspect-ratio: 16 / 9; }
.tpl-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 마지막 블록 내부 (영상 뒤 혜택 + 상담 CTA) */
.tpl-afterblock { display: flex; flex-direction: column; width: 100%; gap: 36px; }

/* 상담 CTA */
.tpl-consult {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  border-top: 1px solid #dfdfdf; padding-top: 58px;
}
.tpl-consult__text { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; text-align: center; color: #17171b; }
.tpl-consult__title { width: 100%; font-size: 32px; line-height: 1; margin: 0; }
.tpl-consult__desc { width: 100%; font-size: 24px; font-weight: 300; line-height: 1.5; margin: 0; }
.tpl-consult__btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50px; background: #026478; padding: 14px 44px;
  font-size: 28px; font-weight: 700; line-height: 1.5; color: #fff;
  text-decoration: none; transition: opacity 0.2s;
}
.tpl-consult__btn:hover { opacity: 0.9; }

/* FAQ */
.tpl-faq {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; border-radius: 20px; background: #fff; padding: 58px 16px;
}
.tpl-faq__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.tpl-faq__title { width: 100%; text-align: center; font-size: 32px; line-height: 1; color: #17171b; margin: 0; }
.tpl-faq__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.tpl-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  border: 0; border-bottom: 1px solid #dfdfdf; background: transparent; padding: 8px 0; text-align: left;
}
.tpl-faq__q-text { min-width: 0; flex: 1; font-size: 24px; line-height: 1.5; color: #17171b; }
.tpl-faq__chevron { flex-shrink: 0; color: #929292; transition: transform 0.2s; transform: rotate(180deg); }
.tpl-faq__q[aria-expanded="true"] .tpl-faq__chevron { transform: rotate(0deg); }
.tpl-faq__a { border-bottom: 1px solid #dfdfdf; padding: 8px 20px; font-size: 20px; line-height: 1.5; color: #676767; }

/* =========================== 데스크톱 (≥1024px) =========================== */
@media (min-width: 1024px) {
  .tpl-web { display: block; }
  .tpl-mobile { display: none; }

  .tpl-section { padding: 84px; }
  .tpl-container { max-width: 800px; gap: 24px; }
  .tpl-block { padding: 32px 40px; }
  .tpl-block--last { padding: 32px 40px 58px; }
  .tpl-secondary { height: auto; aspect-ratio: 1448 / 1086; }

  .tpl-sectionblock { gap: 58px; }
  .tpl-heading { font-size: 44px; line-height: 1; }
  .tpl-item__title { font-size: 32px; line-height: 28px; }
  .tpl-item__desc { font-size: 28px; }

  .tpl-consult { gap: 36px; }
  .tpl-consult__title { font-size: 44px; }
  .tpl-consult__desc { font-size: 28px; }

  .tpl-faq { padding: 58px 40px 70px; }
  .tpl-faq__title { font-size: 44px; }
}