/*
 * 스타키즈 수영장 — 공유 반응형 CSS
 * 브레이크포인트:
 *   모바일 : ≤ 767px  (기준 375px)
 *   태블릿 : 768px – 1024px (기준 768px)
 *   PC     : ≥ 1025px (기준 1200px)
 */

/* ═══════════════════════════════════════════
   햄버거 & 모바일 드로어 메뉴 (≤1024px)
═══════════════════════════════════════════ */
@media (max-width: 1024px) {

  .hamburger {
    display: flex !important;
  }

  .hamburger span {
    transition: transform 0.28s ease, opacity 0.2s ease;
  }
  .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-menu { display: none !important; }

  .nav-menu.open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    background: #0d2b4e !important;
    padding: 6px 0 28px !important;
    gap: 0 !important;
    z-index: 998 !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
    max-height: calc(100dvh - 68px) !important;
    overflow-y: auto !important;
    animation: navSlideDown 0.22s ease both;
  }

  @keyframes navSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .nav-menu.open > li { width: 100%; }

  .nav-menu.open > li > a {
    display: block !important;
    padding: 15px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    white-space: normal !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    color: rgba(255,255,255,0.88) !important;
    transition: background 0.15s !important;
  }

  .nav-menu.open > li > a:hover,
  .nav-menu.open > li > a:active {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
  }

  .nav-menu.open > li > a.nav-cta {
    margin: 16px 20px 0 !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
    text-align: center !important;
    font-size: 15px !important;
    border-bottom: none !important;
    background: #3ea8d8 !important;
    color: #fff !important;
    display: block !important;
    box-shadow: 0 4px 16px rgba(62,168,216,0.4) !important;
  }

  /* 1:1 레슨 금색 CTA — 모바일 드로어에서 정규반(하늘색)과 구분 */
  .nav-menu.open > li > a.nav-cta.nav-cta-gold {
    margin-top: 10px !important;
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: 0 4px 16px rgba(245,158,11,0.4) !important;
  }

  /* 드롭다운 → 모바일: 항상 표시, 들여쓰기 */
  .nav-menu.open .dropdown {
    display: block !important;
    position: static !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    min-width: auto !important;
  }

  .nav-menu.open .dropdown a {
    display: block !important;
    padding: 12px 24px 12px 44px !important;
    font-size: 14px !important;
    color: rgba(255,255,255,0.62) !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    white-space: normal !important;
  }

  .nav-menu.open .dropdown a:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
  }
}

/* PC (≥1025px): 기존 가로 메뉴 */
@media (min-width: 1025px) {
  .hamburger { display: none !important; }
  .nav-menu  { display: flex !important; }
}

/* ═══════════════════════════════════════════
   1:1 레슨 금색 CTA (전 페이지 공용)
   — 각 페이지 인라인 .nav-cta(하늘색)보다 특이도를 높여 덮어씀
═══════════════════════════════════════════ */
a.nav-cta.nav-cta-gold {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}
a.nav-cta.nav-cta-gold:hover {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
}

/* PC 좁은 구간(1025–1220px): 메뉴 9개로 늘어나 넘침 방지 압축 */
@media (min-width: 1025px) and (max-width: 1220px) {
  .nav-menu { gap: 0 !important; }
  .nav-menu a { font-size: 13px !important; padding: 8px 8px !important; }
  .nav-menu a.nav-cta { padding: 8px 12px !important; }
}

/* ═══════════════════════════════════════════
   공통 모바일 (≤767px)
═══════════════════════════════════════════ */
@media (max-width: 767px) {

  .page-header {
    padding: 90px 16px 36px !important;
  }

  .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .footer-inner {
    flex-direction: column !important;
    gap: 24px !important;
  }
}

/* ═══════════════════════════════════════════
   태블릿 (768px – 1024px)
═══════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {

  .page-header {
    padding: 96px 24px 44px !important;
  }
}

/* ═══════════════════════════════════════════
   블로그 본문 가독성 (전 화면 공통 + 모바일 강화)
   — 모든 블로그 글이 공유. 인라인 .post-content 규칙보다
     특이도가 높아(.post-wrap .post-content) 자동으로 우선 적용.
═══════════════════════════════════════════ */
.post-wrap .post-content p,
.post-wrap .post-content li {
  word-break: keep-all;          /* 한글을 어절 중간에서 끊지 않음 */
  overflow-wrap: break-word;
  text-wrap: pretty;             /* 외톨이 단어·들쭉날쭉한 줄 끝 완화 */
}

@media (max-width: 640px) {
  .post-wrap .post-content {
    padding: 26px 20px !important;
  }
  .post-wrap .post-content p {
    font-size: 16px !important;     /* 폰 본문 가독 최소치 */
    line-height: 1.85 !important;
    margin-bottom: 18px !important; /* 단락 사이 호흡 */
    letter-spacing: -0.01em;
  }
  .post-wrap .post-content h2 {
    font-size: 20px !important;
    line-height: 1.42 !important;
    margin: 30px 0 12px !important;
    letter-spacing: -0.02em;
  }
  .post-wrap .post-content ul li {
    font-size: 16px !important;
    line-height: 1.78 !important;
  }
  .post-hero .post-title {
    line-height: 1.34 !important;
    letter-spacing: -0.5px;
  }

  /* 정보박스·강조박스·비교박스 — 페이지별 인라인 <style>에 15px 이하로
     고정돼 있어 본문(16px)보다 작아 보이는 문제를 통일 보정 */
  .post-wrap .post-content .highlight-box {
    font-size: 16px !important;
    line-height: 1.8 !important;
    padding: 16px 18px !important;
  }
  .post-wrap .post-content .info-box {
    padding: 20px 20px !important;
  }
  .post-wrap .post-content .info-box h3 {
    font-size: 15px !important;
  }
  .post-wrap .post-content .info-row {
    flex-direction: column !important;
    gap: 3px !important;
    padding: 10px 0 !important;
  }
  .post-wrap .post-content .info-label,
  .post-wrap .post-content .info-value {
    font-size: 15px !important;
    min-width: 0 !important;
  }
  .post-wrap .post-content .compare-box h3 {
    font-size: 16px !important;
  }
  .post-wrap .post-content .compare-wrap {
    grid-template-columns: 1fr !important;
  }

  /* research-box (근거자료 서술형 박스, 2026-07-12 회복탄력성 시리즈에서 신설)
     — info-box와 같은 이유로 본문(16px)보다 작게 고정돼 있던 문제 통일 보정 */
  .post-wrap .post-content .research-box {
    padding: 18px 18px !important;
  }
  .post-wrap .post-content .research-box p {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }
  .post-wrap .post-content .research-box .rb-label {
    font-size: 11px !important;
  }
  .post-wrap .post-content .research-box .rb-source {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}

/* deploy-check 2026-07-03 pool */