/* ══════════════════════════════════════════════════════════════
   올림수학 모바일 수리 (2026-08-26)
   근거: 클라이언트 8/24 지적 4건 + 실측으로 찾은 가로 넘침

   🔴 원칙: 웹플로우 원본 CSS를 고치지 않는다. 이 파일에서만 덮어쓴다.
            원본을 건드리면 되돌릴 수 없고, 다음 웹플로우 갱신 때 충돌한다.
   ══════════════════════════════════════════════════════════════ */

/* ── ① 하단으로 스크롤하면 햄버거(헤더)가 사라지던 문제 ──
   원인: .header-nav 가 position:absolute → 문서에 붙어 있어 3000px 내리면 top:-3000
   조치: fixed 로 바꿔 화면에 남긴다. 원래도 hero 위에 떠 있는 구조라 여백 보정은 불필요. */
@media (max-width: 991px) {
  .header-nav.w-nav {
    position: fixed !important;
    top: 0; left: 0; right: 0;
  }
}

/* ── ② 상단으로 올라가는 버튼이 없던 문제 ──
   원인: .scroll-top 요소는 있는데 display:none 이고, 보여주는 로직이 없었다 */
.scroll-top {
  position: fixed !important;
  right: 16px; bottom: 20px;
  width: 48px; height: 48px;
  border-radius: 50%;
  align-items: center; justify-content: center;
  z-index: 900;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.scroll-top.sj-show {
  display: flex !important;
  opacity: 1; pointer-events: auto;
}

/* 🔴 2026-08-27 — 버튼 크기가 HOME 만 60px, 나머지 48px 로 갈려 있었다.
   원인: 원본 CSS 의 `.scroll-top.w--current`(클래스 2개)가 위의 `.scroll-top`(1개)
        보다 명시도가 높아 60px 로 이긴다. 웹플로우는 HOME 에서만 w--current 를 붙인다.
   클라이언트 요청이 "모두 동일하게" 이므로 **HOME(60px) 기준**으로 맞춘다.
   ⚠️ 명시도를 같게 맞추려고 `.w--current` 를 함께 적는 것이지, !important 를 쓰지 않는다. */
.scroll-top,
.scroll-top.w--current {
  width: 60px; height: 60px;
}
.scroll-top .scroll-top-arrow {
  width: 60px; height: 60px;
}

/* ── ③ 로고·이미지가 모바일에서 작아지지 않던 문제 ──
   원인: img.logo 가 width:200px 고정 */
@media (max-width: 767px) {
  img.logo { width: 140px !important; height: auto !important; }
  .footer-logo-img { max-width: 150px; height: auto; }
}

/* ── ④ about 예제 문제가 우측으로 밀려 안 보이던 문제 ──
   원인: .section-description 이 폭 1100px 고정 → 화면(390)을 737px 넘김 */
@media (max-width: 991px) {
  .section-description,
  .section-description.dark-color {
    max-width: 100% !important;
    width: auto !important;
  }
}

/* ── ⑤ 가로 스크롤 차단 (실측 399px > 390px) ──
   푸터 flex-v 9px 넘침 등 잔여분까지 함께 잡는다 */
@media (max-width: 991px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .hero-section-bg { max-width: 100% !important; }
  .footer-title, .nav-link-button { word-break: keep-all; }
}

/* ── ⑥ 배경 자리표시자 노출 (클라이언트 8/24 "교재 이미지 배경 없음") ──
   원인: .team-detail-section 배경이 웹플로우 기본 background-image.svg 였다.
        'Background Image' 워터마크가 페이지 전체(6183px)에 격자로 깔려 보였다. */
.team-detail-section {
  background-image: none !important;
}

/* ══════════════════════════════════════════════════════════════
   올림수학 반응형 수리 2차 (2026-09-04) — 클라이언트 09-02 지적
   🔴 원칙 그대로: 웹플로우 원본 CSS 는 손대지 않는다. 최소 규칙만.
   ══════════════════════════════════════════════════════════════ */

/* ── ⑦ 태블릿·PC 창 축소(992~1439px)에서 가로 스크롤 ──
   실측(1024px): 넘치는 것 = .section-description(폭 1100px 고정) ·
   장식 이미지(.hat .rocket .balloon 절대위치) · .hero-section-bg(101%) ·
   추천 슬라이드. 가로 스크롤이 생기면 좌우 여백이 사라지고 로고가 잘려 보인다.
   조치: 고정폭은 폭 안으로, 장식이 만드는 넘침은 문서 폭에서만 숨긴다.
   (섹션마다 overflow:hidden 을 걸면 곡선·풍선 장식이 잘리므로 쓰지 않는다) */
@media (max-width: 1439px) {
  html, body { overflow-x: hidden; }
  .section-description,
  .section-description.dark-color { max-width: 100%; }
  .hero-section-bg { width: 100%; }
  .testimonial-slide, .testimonial-box { max-width: 100%; }
}

/* ── ⑧ 태블릿(~1024px) 홈 첫 화면: 사진 옆·아래 흰 배경 노출 ──
   원인: 히어로 사진이 화면 높이보다 짧아 아래가 비었다.
   조치: 사진을 영역에 꽉 채운다(object-fit). 오버레이 색·농도는 바꾸지 않는다. */
@media (max-width: 1024px) {
  .hero-section-bg-video { overflow: hidden; }
  .hero-section-bg-video img.hero-image {
    width: 100%; height: 100%; object-fit: cover; object-position: 70% center;
  }
}

/* ── ⑨ 모바일(≤479px) 홈 첫 화면: 사진과 제목 겹침 (아이폰 캡처) ──
   헤드리스에서는 재현되지 않았다(iOS 주소창·vh 차이 추정).
   조치: 글자 뒤에만 옅은 밝은 막을 깔아 어떤 높이에서도 읽히게 한다. */
@media (max-width: 479px) {
  .hero-section .width-55 { position: relative; z-index: 2; }
  .hero-section .width-55 > .flex-block-3,
  .hero-section .width-55 > .hero-banner-description {
    background: rgba(255, 248, 240, .72); border-radius: 8px; padding: 4px 8px;
  }
}

/* ── ⑩ 모바일(≤479px) SERVICE: 글 폭이 너무 좁음 ──
   원인(실측): .service-detail-wrap-left/right 가 ≤479 에서도 width:50% 로 남아
   두 열(각 195px)에 아이콘|글이 다시 나뉜다. 글 칸이 손가락 폭.
   조치: 한 열(100%)로 쌓고, 항목은 아이콘 위·글 아래 가운데 정렬. */
@media (max-width: 479px) {
  .service-detail-wrap-left, .service-detail-wrap-right { width: 100%; max-width: 100%; }
  .service-wrap, .service-wrap.service-detail, .service-wrap.service-detail.is-right {
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .service-icon, .service-icon.service-detail { order: -1; width: 64px; margin: 0 auto 14px; }
  .service-description, .service-description.service-detail,
  .service-text { width: 100%; max-width: 100%; margin: 0; text-align: center; }
}