/* ──────────────────────────────────────────
 * Hero 배너
 * ──────────────────────────────────────────*/
.hero-banner {
  width: 100%;
  padding: 100px 5vw 80px;
  text-align: center;
  background: #ffd506;
}
.hero-sub {
  font: 22px/1 'NanumSquareOTF_acR';
  color: #121212;
  margin-bottom: 24px;
}
.hero-title {
  font: 42px/1.25 'NanumSquareOTF_acEB';
  color: #000;
}

/* 애니메이션을 적용할 섹션들의 기본 상태 (숨김) */
.page-wrap section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* 애니메이션이 적용될 때의 상태 (보임) */
.page-wrap section.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* 추가: 딜레이를 위한 클래스 */
.page-wrap section.delay-0 {
  transition-delay: 0s;
}
.page-wrap section.delay-1 {
  transition-delay: 0.3s;
}
.page-wrap section.delay-2 {
  transition-delay: 0.6s;
}
.page-wrap section.delay-3 {
  transition-delay: 0.9s;
}

/* ──────────────────────────────────────────
 * 진단 카드 공통
 * ──────────────────────────────────────────*/
.diag-item {
  padding: 70px 0;
  text-align: center;
}
.talk-wrap {
  position: relative;
  width: 84%;
  max-width: 660px;
  margin: 0 auto 48px;
}
.talk-img {
  width: 100%;
  display: block;
}
.talk-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 26px 'NanumSquareOTF_acB';
  color: #121212;
  white-space: nowrap;
}
.diag-illust img {
  width: 260px;
  height: auto;
}

/* ─ 2번 카드 전용 텍스트 */
.diag-question {
  margin: 52px 0 200px;
  font: 28px/1.4 'NanumSquareOTF_acB';
  color: #646464;
}
.diag-head-1{
  font: 42px/1.3 'NanumSquareOTF_acEB';
  color: #000;
  margin-bottom: 60px;
}
.diag-head-2 {
  font: 38px/1.3 'NanumSquareOTF_acEB';
  color: #000;
  margin-bottom: 400px;
}
.diag-head-2 {
  margin-bottom: 118px;
}
.diag-caption {
  font: 18px/1.5 'NanumSquareOTF_acR';
  color: #8e8e8e;
}

/* ──────────────────────────────────────────
 * YouTube 래퍼
 * ──────────────────────────────────────────*/
.video-wrap {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  height: 300px;
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-wrap.video-short {
  padding-bottom: 30%;
}

/* ──────────────────────────────────────────
 * 필요성 섹션
 * ──────────────────────────────────────────*/
.need-why {
  padding: 120px 0 140px;
  text-align: center;
  overflow-x: hidden;
}
.need-title {
  font: 32px/1.4 'NanumSquareOTF_acB';
  color: #646464;
  margin-bottom: 90px;
}

/* 회색 패널 */
.need-panel {
  background: #e3e3e3;
  padding: 90px 0 450px;
  position: relative;
}

/* 리스트 + 캐릭터 */
.need-content {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}
.need-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.need-list li {
  background: #ffd506;
  font: 18px/1.5 'NanumSquareOTF_acB';
  color: #121212;
  padding: 26px 20px;
  margin-bottom: 32px;
  border-radius: 2px;
}
.need-list li:last-child {
  margin-bottom: 0;
}

/* 캐릭터 */
.need-char {
  position: absolute;
  right: -140px;
  top: 80%;
  transform: translateY(-50%);
  width: 200px;
}

/* 샘플 이미지 */
.need-sample {
  position: relative;
  max-width: 650px;
  margin: 80px auto 0;
}

.sample-frame {
  width: 62%;
  background: #d3d3d3;
  border-radius: 8px;
  padding: 28px 24px;
  box-sizing: border-box;
}
.sample-frame img {
  width: 100%;
  display: block;
  border-radius: 4px;
}

.sample-report {
  position: absolute;
  width: 74%;
  right: -22px;
  bottom: -400px;
  border-radius: 4px;
  z-index: 5;
}

/* ──────────────────────────────────────────
 * 맞춤형 학습 로드맵 섹션
 * ──────────────────────────────────────────*/
.roadmap {
  padding-bottom: 50px;
  text-align: center;
  overflow-x: hidden;
}

.roadmap-title {
  font: 28px/1.4 'NanumSquareOTF_acR';
  color: #646464;
  margin-bottom: 60px;
}
.roadmap-title span {
  font-family: 'NanumSquareOTF_acEB';
  color: #f08b27;
}

/* 1) 캡슐 컨테이너 공통 스타일 */
.roadmap-step,
.roadmap-step2 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 70%;
  margin: 0 auto 32px;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  box-sizing: border-box;
}

/* 1단계 캡슐 스타일 (연한 분홍색) */
.roadmap-step {
  width: 330px;
  background-color: #ffcfcf;
}

/* 2단계 캡슐 스타일 (진한 분홍색) */
.roadmap-step2 {
  width: 400px;
  background-color: #e76b62;
}

/* 2) 텍스트 스타일 수정 (position 제거) */
.roadmap-text {
  font: 22px/1.4 'NanumSquareOTF_acB';
  color: #000;
  text-align: center;
  white-space: nowrap;
}

.roadmap-arrow {
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 18px solid #8e8e8e;
  margin: 28px auto;
  position: relative;
}

.roadmap-arrow::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 22px;
  background: #8e8e8e;
}

.roadmap-hwsw {
  width: 700px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ──────────────────────────────────────────
 * 학부모 상담 섹션
 * ──────────────────────────────────────────*/

 .consult-title {
  font: 32px/1.3 'NanumSquareOTF_acEB';
  color: #000;
  text-align: center;
  margin-bottom: 40px;
 }

  .consult-img {
    width: 500px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
  .consult-desc {
    font: 20px/1.5 'NanumSquareOTF_acR';
    color: #646464;
    text-align: center;
    margin-top: 30px;
  }


/* ──────────────────────────────────────────
 * 부모님 후기 캐러셀
 * ──────────────────────────────────────────*/
.review {
  padding: 110px 0 130px;
  text-align: center;
}

.review-title {
  font: 36px/1.3 'NanumSquareOTF_acEB';
  margin-bottom: 50px;
}

/* 후기 박스 : 목표 디자인에 맞게 수정 */
.review-box {
  position: relative;      /* ★★★ 버튼 위치의 기준점 */
  display: inline-block;
  max-width: 680px;
  width: 80%;
  background: #ffd506;     /* ★★★ 노란색 배경 추가 */
  padding: 40px 32px;
  border-radius: 4px;      /* ★★★ 모서리 둥글게 */
  transition: opacity .25s;
}

.review-box.fade-out {
  opacity: 0;
}

.review-box p {
  font: 20px/1.6 'NanumSquareOTF_acB';
  color: #000000;
  margin: 0;
  white-space: pre-line;
}

/* 이전/다음 버튼 : 목표 디자인에 맞게 수정 */
.nav-btn {
  position: absolute;      /* ★★★ 박스 기준으로 위치 지정 */
  bottom: 14px;
  right: 22px;
  width: 36px;
  height: 36px;
  font: 24px/1 'NanumSquareOTF_acB';
  color: gray;
  background: transparent; /* ★★★ 배경 투명하게 */
  border: none;            /* ★★★ 테두리 제거 */
  cursor: pointer;
  transition: color 0.3s;
}

/* 이전(<) 버튼 위치 조정 */
.nav-btn.prev {
  right: 70px;
}

/* 버튼 호버 시 색상 변경 */
.nav-btn:hover {
  color: #000;
}

/* ─────────────────────────────────────
 * FAQ
 * ────────────────────────────────────*/
.faq{
  padding:120px 0 140px;
  max-width:800px;
  margin:0 auto;
}
.faq-title{
  font:32px/1.3 'NanumSquareOTF_acEB';
  margin-bottom:40px;
  text-align:left;
}
.faq-title small{ font:24px 'NanumSquareOTF_acB'; }

.faq-item{
  position:relative;
  margin-bottom:52px;
  padding-left:56px;      /* 아이콘 공간 확보 */
}
.faq-icon{
  position:absolute; left:0; top:2px;
  width:36px;
}

.faq-item::after{
  content:"";
  display:block;
  clear:both;
}

.balloon{
  display:inline-block;
  width:auto;
  max-width:520px;
  box-sizing:border-box;
  padding:16px 22px;
  border-radius:4px;
  font:18px/1.6 'NanumSquareOTF_acB';
  white-space:pre-line;
}

.balloon.q{
  background:#d9d9d9;
  margin-bottom:8px;
}
.balloon.q:hover{ background:#cfcfcf; }

.balloon.a{
  background:#ffd506;
  display:block;
  width:fit-content;
  margin:8px 0 0 auto;
  text-align:left;
}

.balloon.q::after,
.balloon.a::after{ display:none; }


/* ──────────────────────────────────────────
 * 코딩진단평가 신청 폼
 * ──────────────────────────────────────────*/
.apply{
  padding:0 0 50px;
  max-width:680px;
  margin:0 auto;
  font-family:'NanumSquareOTF_acR';
}
.apply-title{
  font:32px/1.3 'NanumSquareOTF_acEB';
  text-align:center;
  margin-bottom:8px;
}
.apply-sub{
  font-size:18px;
  text-align:center;
  color:#646464;
  margin-bottom:40px;
}

.apply-form label,
.apply-form .time-choice{ display:block; margin-bottom:24px; }

.apply-label{ display:none; }

.apply-form input[type=text],
.apply-form input[type=tel],
.apply-form select{
  width:100%; 
  font:18px 'NanumSquareOTF_acR';
  padding:12px 14px;
  border:1px solid #bababa;
  border-radius:2px;
  background:#ffd506;
  box-sizing:border-box;
}

.apply-form select{ background:#fff; }

.apply-checks{ list-style:none; padding:0; margin:0 0 24px; }
.apply-checks li{ margin-bottom:8px; font-size:16px; }
.apply-checks input[type=checkbox]{ margin-right:6px; }

.route-etc input[type=text]{ width:auto; min-width:120px; margin-left:6px; }

.route-etc input[type=checkbox]:checked + input[type=text]{ background:#fff; border-color:#bababa; }

.time-choice{ font-size:0; }
.time-choice p{
  display:inline-block;
  font:18px 'NanumSquareOTF_acB';
  width:60px;
  margin:0 10px 6px 0;
}
.time-choice select{
  display:inline-block;
  width:120px;
  margin-right:10px;
  margin-bottom:6px;
}

.apply-head{
  font:18px 'NanumSquareOTF_acB';
  margin:36px 0 10px;
}
.apply-desc{
  font-size:14px;
  color:#646464;
  margin:0 0 10px;
  line-height:1.5;
}
.apply-desc a{ color:#f08b27; text-decoration:underline; }

.apply-agree{
  display:block;
  font-size:16px;
  margin-bottom:20px;
}
.apply-agree input{ margin-right:6px; }

.apply-submit{
  width:100%;
  background:#ffd506;
  border:none;
  font:22px 'NanumSquareOTF_acEB';
  padding:18px 0;
  border-radius:2px;
  cursor:pointer;
  margin-top:40px;
}
.apply-submit:hover{ opacity:.9; }

.apply-note{
  font-size:14px;
  color:#646464;
  margin-top:-6px;
  margin-bottom:18px;
}


/* ===================== 플로팅 제출 버튼 ===================== */
/* 하단 고정(플로팅) 제출 버튼 */
.apply-submit-fixed {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 999;
  
  width: 90%;
  max-width: 500px;
  padding: 1rem 2rem;
  
  color: #000000;
  background: #ffd506;
  border: none;

  font: bold 1.25rem 'NanumSquareOTF_acEB', sans-serif;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.apply-submit-fixed:hover {
  transform: translateX(-50%) translateY(-4px);
}

.apply-submit-fixed.hide {
  transform: translateX(-50%) translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.apply-submit {
  display: block;
  width: 100%;
  max-width: 768px;
  background: #ffd506;
  border: none;
  font: 20px 'NanumSquareOTF_acEB';
  text-align: center;
  cursor: pointer;
}


/* 기본 폰트 사이즈를 16px로 가정 (1rem = 16px) */

/* ---------- ① 태블릿 (≤768px) - 수정된 버전 -------------------- */
@media (max-width: 768px) {
  
  /* Hero */
  .hero-banner {
    padding: 6rem 4vw 5rem;
  }
  .hero-sub {
    font-size: 1.5em;
  }
  .hero-title {
    font-size: 3.5em;
    line-height: 1.25;
  }

  /* 카드 */
  .diag-item {
    padding: 3rem 0;
  }
  .talk-wrap {
    width: 92%;
    margin-bottom: 2rem;
  }
  .talk-text {
    font-size: 1.3em;
    white-space: normal;
  }
  .diag-illust img {
    width: 65vw;
    max-width: 25rem;
  }

  .diag-question {
    font-size: 1.6em;
    margin: 3rem 0 5rem;
  }
  .diag-head-1 {
    font-size: 2.2em;
    margin-bottom: 2rem;
  }
  .diag-head-2 {
    font-size: 3em;
    margin-bottom: 8rem;
  }
  .diag-caption {
    font-size: 1.1em;
  }

  /* 비디오 */
  .video-wrap {
    position: relative;
    width: 100%;
    max-width: 35rem;
    margin: 0 auto;
    height: 24rem;
  }
  .video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .video-wrap.video-short {
    padding-bottom: 0;
  }

  /* 필요성 */

  .need-panel {
  background: #e3e3e3;
  padding: 90px 0 500px;
  position: relative;
  }

  .need-title {
    font-size: 2.5em;
    margin-bottom: 5rem;
  }

  .need-list li {
    font-size: 1.1em;
    padding: 1.25rem 1.5rem;
  }
  .sample-frame {
    width: 75%;
  }
  .sample-report {
    width: 78%;
    right: 0;
    bottom: -28rem;
  }

  /* 로드맵 */
  .roadmap-title {
    font-size: 2em;
    margin-bottom: 3rem;
  }
  .roadmap-step{
    width: 40%;
    max-width: none;
  }
  .roadmap-step2 {
    width: 50%;
    max-width: none;
  }
  .roadmap-text {
    font-size: 1.2em;
    white-space: normal;
    line-height: 1.3;
  }
  .roadmap-hwsw {
    width: 88vw;
  }

  /* 상담 */
  .consult-title {
    font-size: 2em;
    text-align: center;
    margin-bottom: 2rem;
  }
  .consult-img {
    width: 80vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .consult-desc {
    font-size: 1.5em;
    text-align: center;
    margin-top: 2rem;
  }

  /* 캐러셀 */
  .review {
    padding: 100px 0;
  }
  .review-title {
    font-size: 2.2em;
  }
  .review-box {
    width: 90%;
    padding: 2rem 1.5rem;
  }
  .review-box p {
    font-size: 1.1em;
  }
  .nav-btn {
    bottom: 0.8rem;
    right: 1rem;
    width: 2.25rem;
    height: 2.25rem;
  }
  .nav-btn.prev {
    right: 3.75rem;
  }

  /* FAQ */
  .faq {
    padding: 5rem 1rem 6.25rem;
  }
  .faq-title {
    font-size: 2em;
  }
  .faq-title small {
    font-size: 0.8em;
  }
  .faq-icon {
    width: 3rem;
  }
  .balloon {
    font-size: 1em;
    max-width: 100%;
  }

  /* 신청 폼 */
  .apply-title {
    font-size: 2.2em;
  }
  .apply-sub {
    font-size: 1.1em;
  }
  .apply-head {
    font-size: 1.1em;
    margin: 1.75rem 0 0.5rem;
  }
  .apply-form input,
  .apply-form select {
    font-size: 1rem;
    padding: 0.8rem 0.9rem;
  }
  .time-choice p {
    width: auto;
    margin-right: 0.25rem;
  }
  .time-choice select {
    width: 48%;
    margin-right: 2%;
  }

  .day1{
    width: 48%;
    margin-right: 2%;
  }
  .day2{
    width: 48%;
  }


  /* 폼 내부 제출 버튼 */
  .apply-submit {
    font-size: 1.2rem;
    padding: 1rem 0;
    margin-top: 1rem;
    position: static;
    transform: none;
  }

  /* 하단 고정(플로팅) 제출 버튼 */
  .apply-submit-fixed {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);

    width: 90%;
    max-width: 500px;
    padding: 1rem 2rem;
    
    color: #121212;
    background: #ffd506;
    border: none;

    /* ★★★ 폰트 관련 속성을 'font' 단축 속성으로 한 줄에 정리 ★★★ */
    font: bold 1.25rem 'NanumSquareOTF_acEB', sans-serif;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-out;
  }

  .apply-submit-fixed:hover {
    transform: translateX(-50%) translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
}

/* ---------- ② 휴대폰 (≤480px) ---------------------------------- */
@media (max-width: 480px) {
  /* Hero */
  .hero-banner {
    width: 100%;
    padding: 6.25rem 5vw 5rem;
    text-align: center;
    background: #ffd506;
  }
  .hero-sub {
    font-size: 1.2em;
  }
  .hero-title {
    font-size: 2.5em;
  }

  .talk-text {
    font-size: 0.9em;
  }

  /* 카드 */
  .diag-item {
    padding: 2.5rem 0;
  }
  .diag-illust img {
    width: 70vw;
  }

  .diag-question {
    font-size: 1.2em;
    margin: 3rem 0 10rem;
  }

  .diag-head-1{
    font-size: 1.8em;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .diag-head-2 {
    font-size: 2.3em;
    margin-bottom: 7.5rem;
  }

  .diag-caption {
    font-size: 1em;
  }

  .video-wrap {
    position: relative;
    width: 100%;
    max-width: 22rem;
    margin: 0 auto;
    height: 15rem;
  }
  .video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .video-wrap.video-short {
    padding-bottom: 0%;
  }

  /* 필요성 */

  .need-title {
    font-size: 2em;
    margin-bottom: 3.75rem;
  }

  .need-panel {
    padding-bottom: 13.75rem;
  }
  .sample-report {
    bottom: -35rem;
  }
  .need-content {
    position: relative;
    max-width: 21.875rem;
    margin: 0 auto;
  }
  .need-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .need-list li {
    background: #ffd506;
    font: 1.125rem/1.5 'NanumSquareOTF_acB';
    color: #121212;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: 0.0625rem;
  }
  .need-list li:last-child {
    margin-bottom: 0;
  }
  .need-char {
    position: absolute;
    right: -2.5rem;
    top: 90%;
    transform: translateY(-50%);
    width: 7.5rem;
  }

  /* 샘플 이미지 */
  .need-sample {
    position: relative;
    max-width: 40.625rem;
    margin: 5rem auto 0;
  }

  .sample-frame {
    width: 62%;
    background: #d3d3d3;
    border-radius: 0.5rem;
    padding: 1.75rem 1.5rem;
    box-sizing: border-box;
  }

  .sample-frame img {
    width: 100%;
    display: block;
    border-radius: 0.25rem;
    left: 0.1875rem;
  }

  .sample-report {
    position: absolute;
    width: 65%;
    right: 0.5rem;
    bottom: -11.25rem;
    border-radius: 0.25rem;
    z-index: 5;
  }

  /* 로드맵 */

  .roadmap-title{
    font-size: 1.5em;
  }

  .roadmap-step {
    width: 65%;
  }
  .roadmap-step2 {
    width: 75%;
  }
  .roadmap-text {
    font-size: 1.1em;
  }
  .roadmap-hwsw {
    width: 100vw;
  }

  /* 상담 */

  .consult-title {
    font-size: 1.5em;
    width: 100%;
    text-align: center;
    margin-bottom: 1.25rem;
  }

  .consult-img {
    width: 100vw;
  }

  .consult-desc {
    font-size: 1.125em;
    margin-top: 1.25rem;
    text-align: center;
    color:#646464;
  }

  /* 캐러셀 */
.review {
    padding: 80px 0; /* 모바일에서는 패딩 약간 줄임 */
  }
  .review-title {
    font-size: 1.5em;
    margin-bottom: 2rem;
  }
  .review-box {
    width: 90%;
    padding: 1.75rem 1.25rem; /* 28px 20px */
  }
  .review-box p {
    font-size: 1em; /* 폰트 크기 조정 */
  }
  .nav-btn {
    bottom: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
  }
  .nav-btn.prev {
    right: 54px;
  }

  /* FAQ */
  .faq-icon {
    width: 2.5rem;
  }

  .faq-title {
    font-size: 1.3em;
    margin-bottom: 2.5rem;
    text-align: left;
  }

  .balloon {
    font-size: 0.9em;
    padding: 0.875rem 1.125rem;
  }

  /* 신청 폼 */
  .apply {
    padding: 0 1rem 3.125rem;
  }

  .apply-form input[type=text],
  .apply-form input[type=tel],
  .apply-form select {
    padding: 0.625rem 0.75rem;
    font-size: 1rem;
  }

  .apply-checks li,
  .time-choice select {
    width: 100%;
  }

  .apply-title {
    font-size: 1.5rem;
  }
  .apply-sub {
    font-size: 0.9375rem;
  }
  .apply-head {
    font-size: 0.9375rem;
  }
  .apply-submit {
    margin-top: -1.0rem;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
  }
  .apply-submit-fixed {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 96vw;
  }
}