@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap");

/* ── Common Animations ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s ease-out,
        transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ======================
   BASE
   ====================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    color: #212529;
    background: #fff;
    overflow-x: hidden;
    word-break: keep-all;
}

/* ======================
   GNB  ── PC
   80px / 1920 = 4.167vw
   ====================== */
.gnb {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4.167vw;
    display: flex;
    align-items: center;
    background: transparent;
    transition:
        background 0.35s ease,
        box-shadow 0.35s ease;
    z-index: 1000;
}

.gnb.scrolled {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 0.052vw 0.833vw rgba(0, 0, 0, 0.08);
}

/* Logo: x=50px=2.604vw  font=16px=0.833vw */
.gnb-logo {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 0.833vw;
    color: #fff;
    letter-spacing: -0.0313em;
    position: absolute;
    left: 2.604vw;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
}
.gnb.scrolled .gnb-logo {
    color: #212529;
}

.gnb.scrolled .gnb-menu li a {
    color: #212529;
}

/* Menu: gap≈73px=3.802vw  right pad=50px=2.604vw */
.gnb-nav {
    margin-left: auto;
    padding-right: 2.604vw;
}

.gnb-menu {
    list-style: none;
    display: flex;
    gap: 3.802vw;
}

.gnb-menu li a {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 0.833vw;
    color: #fff;
    text-decoration: none;
    letter-spacing: -0.0313em;
    transition: opacity 0.2s;
}

.gnb-menu li a:hover {
    opacity: 0.55;
}

/* Hamburger: hidden on desktop */
.gnb-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    padding: 0;
}

.gnb-menu-icon {
    color: #fff; /* 메인 히어로 위: 흰색 */
    line-height: 1;
    user-select: none;
}

.gnb.scrolled .gnb-menu-icon,
.gnb-opaque .gnb-menu-icon {
    color: #212529; /* 스크롤 후 또는 서브페이지: 검정 */
}

/* Close button inside nav drawer: hidden on desktop */
.gnb-close {
    display: none;
}

/* ======================
   HERO  ── 100vh 풀스크린 (GNB 포함)
   ====================== */
.hero {
    position: relative;
    width: 100%;
    height: 100vh; /* GNB 포함 전체 화면 */
    overflow: hidden;
}

/* ── 슬라이드 컨테이너 ── */
.hero-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* ── 슬라이드 공통 ── */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
    background-color: #cfcfcf;
    background-size: cover;
    background-position: center;
}

/* 이미지 교체 시 background-image 지정 */
.hero-slide--1 {
    background-image: url("../images/main_visual.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-slide--2 {
    background-color: #b8b8b8;
}
.hero-slide--3 {
    background-color: #d8d8d8;
}
.hero-slide.active {
    opacity: 1;
}

.hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
}
/* ── 영상 슬라이드 ── */
.hero-slide--video {
    opacity: 1; /* 영상은 항상 표시 */
}

.hero-slide--video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-slide--video video {
    width: 100%;
    height: 105%;
    object-fit: cover;
    display: block;
}

/* ── 텍스트 오버레이 ──
   하단 기준으로 배치 (원 디자인: 히어로 하단 27% 영역)
   ── */
.hero-content {
    position: absolute;
    left: 9.479vw; /* 182px / 1920 */
    bottom: 27%;
    z-index: 10;
}

/* 타이틀: 최대 1줄  45px=2.344vw  Bold */
.hero-title {
    font-weight: 700;
    font-size: 2.344vw;
    color: #fff;
    letter-spacing: -0.0111em;
    line-height: 1.2;
    margin-bottom: 0.885vw;
    /* 최대 1줄 제한 */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* 애니메이션 적용 */
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

/* 서브타이틀: 최대 2줄  24px=1.25vw  Regular */
.hero-subtitle {
    font-weight: 400;
    font-size: 1.25vw;
    color: #fff;
    letter-spacing: -0.0208em;
    line-height: 1.771vw;
    /* 최대 2줄 제한 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* 애니메이션 적용 (약간의 지연 시간) */
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

/* ======================
   FEATURE SECTIONS ── PC
   Section height = 722px = 37.604vw
   Image: left=90px=4.688vw  w=824px=42.917vw
   Text: left=1054px=54.896vw  top=252px=13.125vw
   ====================== */

/* Gap after hero = 198px = 10.313vw */
.hero + .feature {
    margin-top: 10.313vw;
}

/* Gap between sections = 204px = 10.625vw */
.feature + .feature {
    margin: 10.625vw 0;
}

.feature {
    position: relative;
    width: 100%;
    height: 37.604vw;
    background: #fff;
    overflow: hidden;
}

.feature-image {
    position: absolute;
    left: 4.688vw;
    top: 0;
    width: 42.917vw;
    height: 100%;
    background-color: #c7c7c7;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Feature 섹션별 썸네일 이미지 */
#about .feature-image {
    background-image: url("../images/main_about_img.jpg");
}
#facility .feature-image {
    background-image: url("../images/main_facility.jpg");
}
#curriculum .feature-image {
    background-image: url("../images/main_curriculum.jpg");
}
#activity .feature-image {
    background-image: url("../images/main_activity.jpg");
}

/* 전체 영역 클릭 오버레이 링크 */
.feature-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    text-decoration: none;
}
/* Arrow: 원형 버튼 — 이미지 위 시인성 확보, 시각 전용 */
.arrow-btn {
    position: absolute;
    right: 2.083vw;
    bottom: 2.083vw;
    width: 2.969vw;
    height: 2.969vw;
    min-width: 40px;
    min-height: 40px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: transform 0.3s ease-in-out;
}
.feature:hover .arrow-btn {
    transform: translateY(-3px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.arrow-btn .material-symbols-outlined {
    font-size: max(1.563vw, 18px);
    font-variation-settings:
        "FILL" 0,
        "wght" 400,
        "GRAD" 0,
        "opsz" 48;
    color: #212529;
    line-height: 1;
    user-select: none;
}

.feature-text {
    position: absolute;
    left: 54.896vw;
    top: 13.125vw;
    width: 37.656vw;
}

/* 40px=2.083vw  SemiBold — 최대 1줄, 초과 시 ... */
.feature-title {
    font-weight: 600;
    font-size: 2.083vw;
    color: #212529;
    letter-spacing: -0.0125em;
    line-height: 1.25;
    margin-bottom: 1.042vw;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}

/* 35px=1.823vw  lineHeight=50px=2.604vw — 최대 3줄, 초과 시 ... */
.feature-desc {
    font-weight: 400;
    font-size: 1.823vw;
    color: #212529;
    letter-spacing: -0.0143em;
    line-height: 2.604vw;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* ======================
   CTA BANNER ── PC
   662px / 1920 = 34.479vw
   Gap before = 360px = 18.75vw
   ====================== */
.cta-banner {
    position: relative;
    width: 100%;
    height: 34.479vw;
    background-color: #c7c7c7;
    overflow: hidden;
    background-image: url("../images/footer_bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

/* Title: x=156px=8.125vw  y=148px=7.708vw  35px=1.823vw */
.cta-title {
    position: absolute;
    left: 8.125vw;
    top: 7.708vw;
    font-weight: 600;
    font-size: 1.823vw;
    color: #212529;
    letter-spacing: -0.0143em;
}

/* Desc: y=212px=11.042vw  30px=1.563vw  lh=40px=2.083vw */
.cta-desc {
    position: absolute;
    left: 8.125vw;
    top: 11.042vw;
    font-weight: 400;
    font-size: 1.563vw;
    color: #212529;
    letter-spacing: -0.0167em;
    line-height: 2.083vw;
}

/* Button: y=354px=18.438vw  154×56px */
.cta-btn {
    position: absolute;
    left: 8.125vw;
    top: 18.438vw;
    width: 8.021vw;
    height: 2.917vw;
    background-color: #fff;
    border-radius: 5px;
    font-family: "Pretendard", sans-serif;
    font-weight: 400;
    font-size: 1.302vw;
    color: #212529;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition:
        background-color 0.5s ease-in-out,
        color 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-btn:hover {
    background: #212529;
    color: #fff;
}

/* ======================
   FOOTER ── PC
   323px / 1920 = 16.823vw
   ====================== */
.footer {
    width: 100%;
    height: 16.823vw;
    background-color: #3b3b3b;
    overflow: hidden;
}

/* padding-left=60px=3.125vw  padding-top=46px=2.396vw */
.footer-inner {
    padding-top: 2.396vw;
    padding-left: 3.125vw;
}

/* 20px=1.042vw  Bold  lh=24px=1.25vw */
.footer-brand {
    font-weight: 700;
    font-size: 1.042vw;
    color: #fff;
    line-height: 1.25vw;
    margin-bottom: 1.25vw;
}

/* 16px=0.833vw  Medium  lh≈19px=0.99vw */
.footer-row {
    font-weight: 500;
    font-size: 0.833vw;
    color: #fff;
    line-height: 0.99vw;
    margin-bottom: 0.625vw;
}

.footer-pc {
    display: block;
}
.footer-mobile {
    display: none;
}

/* reset last row margin inside pc block */
.footer-pc .footer-row:last-child {
    margin-bottom: 0;
}

.sep {
    opacity: 0.55;
}

/* 13px=0.677vw */
.footer-copy {
    font-weight: 400;
    font-size: 0.677vw;
    color: #fff;
    margin-top: 2.865vw;
}

/* Mobile footer elements — hidden on PC */
.footer-biz-toggle,
.footer-biz-detail {
    display: none;
}

/* ======================
   FADE-IN (JS injected)
   ====================== */
/* placeholder — actual styles injected by main.js */

/* ======================
   TABLET  ── 769px ~ 1280px
   Base: 1280px viewport  (1px = 0.078125vw)
   PC 1920px 기준 vw 값을 1280px 기준으로 재계산하여
   GNB·푸터 텍스트 최소 가독성(12px+) 확보
   ====================== */
@media (min-width: 769px) and (max-width: 1280px) {
    /* ── GNB ─────────────────────────────────────────
     Logo / menu: 16px → 1.25vw  (at 1024 = 12.8px)
  ─────────────────────────────────────────────── */
    .gnb-logo {
        font-size: 1.25vw;
    }

    .gnb-menu li a {
        font-size: 1.25vw;
    }

    /* ── Hero ────────────────────────────────────────
     subtitle: 24px → 1.875vw  (at 1024 = 19.2px)
  ─────────────────────────────────────────────── */
    .hero-subtitle {
        font-size: 1.875vw;
        line-height: 2.656vw;
    }

    /* ── Footer ──────────────────────────────────────
     brand:    20px → 1.563vw  (at 1024 = 16px)
     row:      16px → 1.25vw   (at 1024 = 12.8px)
     copyright:13px → 1.016vw  (at 1024 = 10.4px)
  ─────────────────────────────────────────────── */
    .footer-brand {
        font-size: 1.563vw;
        line-height: 1.875vw;
        margin-bottom: 1.875vw;
    }

    .footer-row {
        font-size: 1.25vw;
        line-height: 1.484vw;
        margin-bottom: 0.938vw;
    }

    .footer-copy {
        font-size: 1.016vw;
    }

    /* ── Curriculum (태블릿) ─────────────────────────────
     step name/desc: 30px → 2.344vw  (at 1024 = 24px)
  ─────────────────────────────────────────────── */
    .curr-step__name,
    .curr-step__desc {
        font-size: 2.344vw;
    }

    .curr-step__desc {
        line-height: 2.813vw; /* 36px */
    }
}

/* ======================
   MOBILE  ── max-width: 768px
   Base: 375px viewport
   1px = 1/375 × 100 = 0.2667vw
   ====================== */
@media (max-width: 768px) {
    /* ── GNB ─────────────────────────────────────────
     44px = 11.733vw
  ─────────────────────────────────────────────── */
    .gnb {
        height: 11.733vw;
    }

    .gnb-logo {
        font-size: 4.267vw; /* 16px */
        left: 5.333vw; /* 20px */
    }

    .gnb-hamburger {
        display: flex;
        right: 5.333vw; /* 20px from right */
        width: 6.4vw;
        height: 6.4vw;
    }

    .gnb-menu-icon {
        font-size: 6.4vw; /* ≈24px visual */
    }

    /* Mobile nav drawer */
    .gnb-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70vw;
        height: 100vh;
        background: #fff;
        padding: 18.667vw 8vw 8vw;
        transition: right 0.35s ease;
        box-shadow: -1vw 0 4vw rgba(0, 0, 0, 0.14);
        z-index: 1001;
        margin-left: 0;
        padding-right: 8vw;
    }

    .gnb-nav.open {
        right: 0;
    }

    /* Close button inside nav drawer */
    .gnb-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 5.333vw;
        right: 5.333vw;
        width: 8vw;
        height: 8vw;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .gnb-close .material-symbols-outlined {
        font-size: 6.4vw;
        color: #212529;
        line-height: 1;
    }

    .gnb-menu {
        flex-direction: column;
        gap: 8vw;
    }

    .gnb-menu li a {
        font-size: 4.267vw; /* 16px */
        letter-spacing: -0.0313em;
        color: #212529;
    }

    /* ── Hero ─────────────────────────────────────────
     100vh 풀스크린 (GNB 포함)
     텍스트 하단 기준 배치
  ─────────────────────────────────────────────── */
    .hero {
        height: 100vh;
    }

    .hero-content {
        left: 5.333vw; /* 20px */
        bottom: 22%;
        top: auto;
    }

    .hero-title {
        font-size: 6.933vw; /* 26px */
        letter-spacing: -0.0192em;
        margin-bottom: 2.933vw;
    }

    .hero-subtitle {
        font-size: 3.733vw; /* 14px */
        line-height: 5.867vw; /* 22px */
        letter-spacing: -0.0357em;
    }

    /* ── Feature Sections ────────────────────────────
     image top (293px=78.133vw) + text below
     container padding: 20px=5.333vw each side
     gaps:  after hero=80px=21.333vw
            between sections=50px=13.333vw
  ─────────────────────────────────────────────── */
    .hero + .feature {
        margin-top: 21.333vw; /* 80px */
    }

    .feature + .feature {
        margin-top: 13.333vw; /* 50px */
    }

    .feature {
        height: auto;
        overflow: visible;
        padding: 0 5.333vw; /* 20px left/right */
        position: relative; /* feature-link absolute 기준점 유지 */
    }

    .feature-image {
        position: relative; /* arrow-btn absolute 기준점 */
        left: auto;
        top: auto;
        width: 100%;
        height: 78.133vw; /* 293px */
    }

    /* Arrow 모바일: 원형 유지, 크기 조정 */
    .arrow-btn {
        width: 10.667vw; /* 40px */
        height: 10.667vw;
        min-width: 36px;
        min-height: 36px;
        right: 3.2vw;
        bottom: 3.733vw;
    }

    .arrow-btn .material-symbols-outlined {
        font-size: 3.733vw;
    }

    .feature-text {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        margin-top: 2.933vw; /* 11px gap from image to title */
        padding: 0;
    }

    /* Title: 16px=4.267vw  SemiBold */
    .feature-title {
        font-size: 4.267vw;
        letter-spacing: -0.0313em;
        margin-bottom: 1.333vw; /* 5px gap to desc */
    }

    /* Desc: 14px=3.733vw  lh=21px=5.6vw */
    .feature-desc {
        font-size: 3.733vw;
        line-height: 5.6vw;
        letter-spacing: -0.0357em;
    }

    /* ── CTA Banner ──────────────────────────────────
     500px = 133.333vw
     margin-top: 111px = 29.6vw
     Title  y=82px=21.867vw   font=16px=4.267vw
     Desc   y=106px=28.267vw  font=14px=3.733vw
     Btn    y=197px=52.533vw  91×31px
  ─────────────────────────────────────────────── */
    .cta-banner {
        height: 133.333vw;
        margin-top: 29.6vw;
        overflow: hidden;
    }

    .cta-title {
        top: 21.867vw;
        left: 5.333vw;
        right: 5.333vw;
        font-size: 4.267vw;
        letter-spacing: -0.0313em;
        word-break: keep-all;
    }

    .cta-desc {
        top: 28.267vw;
        left: 5.333vw;
        right: 5.333vw;
        font-size: 3.733vw;
        line-height: 5.6vw;
        letter-spacing: -0.0357em;
        word-break: keep-all;
    }

    .cta-btn {
        top: 52.533vw;
        left: 5.333vw;
        width: 24.267vw; /* 91px */
        height: 8.267vw; /* 31px */
        font-size: 3.733vw;
        border-width: 0.267vw;
    }

    /* ── Footer ──────────────────────────────────────
     203px = 54.133vw  (collapsed state)
     padding-left=27px=7.2vw  padding-top=30px=8vw
  ─────────────────────────────────────────────── */
    .footer {
        height: auto;
        min-height: 54.133vw;
        overflow: visible;
    }

    .footer-inner {
        padding-top: 8vw; /* 30px */
        padding-left: 7.2vw; /* 27px */
        padding-right: 5.333vw;
        padding-bottom: 5.333vw;
    }

    /* 16px=4.267vw  Bold */
    .footer-brand {
        font-size: 4.267vw;
        line-height: 1.2;
        margin-bottom: 4.267vw; /* 16px gap to row2 */
    }

    /* PC rows off, mobile rows on */
    .footer-pc {
        display: none;
    }
    .footer-mobile {
        display: block;
    }

    /* 12px=3.2vw  Medium  lh≈14px */
    .footer-row {
        font-size: 3.2vw;
        line-height: 1.17;
        margin-bottom: 2.4vw; /* 9px */
    }

    .footer-mobile .footer-row:last-of-type {
        margin-bottom: 0;
    }

    /* 사업자 정보 toggle button */
    .footer-biz-toggle {
        display: flex;
        align-items: center;
        gap: 1.067vw;
        background: none;
        border: none;
        cursor: pointer;
        font-family: "Pretendard", sans-serif;
        font-weight: 500;
        font-size: 3.2vw;
        color: #fff;
        padding: 0;
        margin-top: 5.867vw; /* 22px gap from 주소 row */
        letter-spacing: -0.0357em;
    }

    .footer-chevron {
        font-size: 3.2vw;
        color: #fff;
        line-height: 1;
        transition: transform 0.25s ease;
        user-select: none;
    }

    .footer-biz-toggle.active .footer-chevron {
        transform: rotate(90deg);
    }

    /* 사업자 정보 detail (collapsed / expanded) */
    .footer-biz-detail {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        margin-top: 0;
    }

    .footer-biz-detail.visible {
        max-height: 40vw;
        margin-top: 2.4vw;
    }

    .footer-biz-detail .footer-row {
        margin-bottom: 1.333vw;
    }

    /* Copyright: 10px=2.667vw */
    .footer-copy {
        font-size: 2.667vw;
        margin-top: 6.133vw; /* 23px */
    }
}

/* =========================================================
   SUB-PAGE 공통 스타일
   ========================================================= */

/* ── GNB 항상 불투명 (서브페이지) ── */
.gnb-opaque {
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 0.052vw 0.833vw rgba(0, 0, 0, 0.08);
}

/* 서브페이지 GNB: 로고·메뉴 항상 검정 */
.gnb-opaque .gnb-logo,
.gnb-opaque .gnb-menu li a {
    color: #212529;
}

/* 현재 페이지 메뉴 표시 */
.gnb-menu li a.active {
    font-weight: 700;
    border-bottom: 0.104vw solid #212529;
    padding-bottom: 0.104vw;
}

/* ── 페이지 히어로 배너
   963px = 50.156vw
   Title x=160=8.333vw  y=580=30.208vw
   Subtitle y=651=33.906vw
   ── */
.page-hero {
    position: relative;
    width: 100%;
    height: 50.156vw;
    background-color: #cfcfcf;
    overflow: hidden;
}

.page-hero.about-bg {
    background-image: url("../images/about/sub_about_hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.page-hero.facility {
    background-image: url("../images/facility/main_facility_bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.page-hero.curriculum-bg {
    background-image: url("../images/curriculum/sub_curriculum_hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.page-hero.activity-bg {
    background-image: url("../images/activity/sub_activity_hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
}
.page-hero-content {
    position: absolute;
    left: 8.333vw;
    top: 30.208vw;
}

.page-hero-title {
    font-weight: 700;
    font-size: 2.344vw;
    color: #fff;
    letter-spacing: -0.0111em;
    line-height: 1.2;
    margin-bottom: 0.885vw;
    /* 애니메이션 적용 */
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

.page-hero-subtitle {
    font-weight: 400;
    font-size: 1.25vw;
    color: #fff;
    letter-spacing: -0.0208em;
    line-height: 1.927vw;
    /* 애니메이션 적용 (약간의 지연 시간) */
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

/* ── 공통 섹션 텍스트 ── */
.section-heading {
    font-weight: 600;
    font-size: 2.083vw;
    color: #212529;
    letter-spacing: -0.0125em;
    line-height: 1.25;
    margin-bottom: 1.042vw;
}

.section-body {
    font-weight: 400;
    height: 60px;
    font-size: 1.563vw;
    color: #212529;
    letter-spacing: -0.0167em;
    line-height: 2.083vw;
}

/* =========================================================
   ABOUT PAGE SECTIONS
   ========================================================= */

/* ── Section 1: 차별화된 영어 학습 환경
   Frame 8  1920×1232px  margin-top=161px=8.385vw
   Image: left=838px=43.646vw  top=121px=6.302vw  w=1131px=58.906vw  h=989px=51.510vw
   Text:  left=140px=7.292vw   top=267px=13.906vw
   ── */
.about-s1 {
    position: relative;
    width: 100%;
    height: 64.167vw;
    margin-top: 8.385vw;
    background: #fff;
    overflow: hidden;
}

.about-s1__text {
    position: absolute;
    left: 7.292vw;
    top: 13.906vw;
    width: 33vw;
}

.about-s1__image {
    position: absolute;
    left: 43.646vw;
    top: 6.302vw;
    width: 58.906vw;
    height: 51.51vw;
    background: #c7c7c7;
    overflow: hidden;
}

/* ── About 페이지 img 공통: 컨테이너 꽉 채우기 ── */
.about-s1__image img,
.about-s2__img img,
.about-grid__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Section 2: 선생님이 결과를 만듭니다
   Frame 9  1920×1361px  (no gap)
   Text:  left=140px=7.292vw  top=186px=9.688vw
   2 images: left=140px, left=977px  top=401px=20.885vw  w=804px=41.875vw  h=774px=40.313vw
   Chevron on right image: right≈0.990vw  top≈47%
   ── */
.about-s2 {
    position: relative;
    width: 100%;
    height: 70.885vw;
    background: #fff;
    overflow: hidden;
}

.about-s2__text {
    position: absolute;
    left: 7.292vw;
    top: 9.688vw;
    width: 40vw;
}

/* ── Section 2 슬라이더: 슬라이드 1장 = 제목+설명+이미지2장 전체 ── */

/* 슬라이더가 섹션 전체를 덮음 */
.about-s2__slider {
    position: absolute;
    inset: 0;
}

/* 화살표: 이미지 영역의 좌우 끝에 수직 중앙 배치
   이미지 중심 y = (20.885 + 40.313/2) = 41.041vw */
.slider-arrow {
    position: absolute;
    top: 41.041vw;
    transform: translateY(-50%);
    z-index: 10;
    width: 2.604vw;
    height: 2.604vw;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
}

.slider-arrow--prev {
    left: 3.5vw;
}
.slider-arrow--next {
    right: 3.5vw;
}

.slider-arrow:disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}

.slider-arrow .material-symbols-outlined {
    font-size: 2.604vw;
    color: #212529;
    line-height: 1;
    user-select: none;
    font-variation-settings:
        "FILL" 0,
        "wght" 300,
        "GRAD" 0,
        "opsz" 48;
}

/* 뷰포트: 넘치는 슬라이드 숨김 */
.about-s2__viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 트랙: 슬라이드를 가로로 나열 */
.about-s2__track {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* 개별 슬라이드: 섹션 전체 너비 */
.about-s2__slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
}

/* 슬라이드 내 텍스트: 피그마 좌표 그대로 */
.about-s2__slide-text {
    position: absolute;
    left: 7.292vw;
    top: 9.688vw;
    width: 40vw;
}

/* 슬라이드 내 이미지 행: 피그마 좌표 그대로 */
.about-s2__slide-images {
    position: absolute;
    left: 7.292vw;
    right: 7.24vw;
    top: 20.885vw;
    height: 40.313vw;
    display: flex;
    gap: 1.719vw;
}

.about-s2__img {
    flex: 1;
    height: 100%;
    background: #c7c7c7;
    overflow: hidden;
}

/* ── Section 3: 체계적인 학습 과정
   Frame 12  1920×1993px  (no gap)
   2×2 grid: col-w=790/789px  col-gap=61px=3.177vw  row-gap=252px=13.125vw
   Grid starts at top=407px=21.198vw
   Image h=461px=24.01vw
   Label margin-top=35px=1.823vw  font=30px SemiBold
   Desc  font=30px Regular  lineHeight=21px
   ── */
.about-s3 {
    position: relative;
    width: 100%;
    height: 103.802vw;
    background: #fff;
    overflow: hidden;
}

.about-s3__text {
    position: absolute;
    left: 7.292vw;
    top: 9.688vw;
    width: 40vw;
}

.about-grid {
    position: absolute;
    left: 7.292vw;
    top: 21.198vw;
    display: grid;
    grid-template-columns: 41.146vw 41.094vw;
    column-gap: 3.177vw;
    row-gap: 13.125vw;
}

.about-grid__image {
    width: 100%;
    height: 24.01vw;
    background: #c7c7c7;
    display: block;
    overflow: hidden;
}

.about-grid__label {
    font-weight: 600;
    font-size: 1.563vw;
    color: #212529;
    letter-spacing: -0.0167em;
    margin-top: 1.823vw;
    margin-bottom: 0.833vw;
}

.about-grid__desc {
    font-weight: 400;
    font-size: 1.563vw;
    color: #212529;
    letter-spacing: -0.0167em;
    line-height: 1.5;
}

/* ── About CTA margin override (75px = 3.906vw from S3 end) ── */
.page-about .cta-banner {
    margin-top: 3.906vw;
}

/* =========================================================
   FACILITY PAGE SECTIONS  ── PC
   Base: 1920px  (1px = 0.052083vw)
   ========================================================= */

/* ── .section-body 전역 height:60px 을 facility 섹션에서 해제 ── */
.page-facility .section-body,
.facility-s-body {
    height: auto;
    line-height: 1.2;
}

/* ── Section 1: 세부의 중심, IT PARK  (지도 섹션)
   Frame 8  1920×1511px  y=963
   Heading: x=140=7.292vw  y=180=9.375vw  (section 기준)
   Body:    x=140=7.292vw  y=248=12.917vw
   Map:     x=140=7.292vw  y=353  w=1640=85.417vw  h=978=50.938vw
   Bottom padding: (1511-353-978)/1920 = 180px=9.375vw
   ── */
.facility-s1 {
    padding-top: 9.375vw;
    padding-left: 7.292vw;
    padding-right: 7.292vw;
    padding-bottom: 9.375vw;
}

.facility-s1 .section-heading {
    margin-bottom: 1.042vw; /* 20px gap to body (공통값 유지) */
}

.facility-s1 .facility-s-body {
    margin-bottom: 3.646vw; /* 70px: map y=353 - body_bottom(248+35)=70px */
}

.facility-map {
    width: 85.417vw; /* 1640px */
    height: 50.938vw; /* 978px */
}

.facility-map iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── Section 2: 안심 할 수 있는 환경
   Frame 9  1920×1086px  y=2474  bg=#C7C7C7
   Heading: x=140=7.292vw  y=848=44.167vw (section 기준) → flex-end 로 구현
   Body:    x=140=7.292vw  y=915
   Padding-bottom: (1086-915-46)=125px=6.510vw
   ── */
.facility-s2 {
    background-image: url("../images/facility/sub_facility_bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* 배경 고정 */
    height: 56.563vw; /* 1086px */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: 7.292vw;
    padding-bottom: 6.51vw;
    position: relative;
}
.facility-s2::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 0; /* 배경 이미지 위, 텍스트 아래 */
}

/* 텍스트는 오버레이 위에 */
.facility-s2__text {
    position: relative;
    z-index: 1;
}

.facility-s2__text .section-heading {
    margin-bottom: 0.99vw; /* 19px: body y=915 - (heading_y=848 + h=48) */
    color: #fff;
}
.facility-s2__text .facility-s-body {
    color: #fff;
}

/* ── Section 3: 주요 시설 안내
   Frame 10  1920×2194px  y=3560
   Heading: x=140=7.292vw  y=180=9.375vw (section 기준)
   Body:    x=140=7.292vw  y=248=12.917vw
   Grid starts y=374:  body_bottom(248+35)=283 → gap=374-283=91px=4.740vw
   Card: 439×488px = 22.865×25.417vw
   Col-gap: 30px=1.563vw  Row-gap: 61px=3.177vw
   Padding-bottom: (2194-1472-488)=234px=12.188vw
   ── */
/* .facility-grid: 더 이상 사용하지 않음 (카테고리 슬라이더로 통합) */
.facility-grid {
    display: none;
}

/* ── Section 3: 종류별 가로 스와이프 슬라이더 ─── 전 해상도 공통
   PC 기준  card: 439×488px = 22.865×25.417vw
   카드 간격: 30px=1.563vw   행 간격: 61px=3.177vw
   왼쪽 여백: 140px=7.292vw (섹션 헤딩과 정렬)
   카페테리아(4장) → 4×22.865+3×1.563=96.149vw > 85.417vw → 오버플로 스크롤
   ── */
.facility-s3 {
    padding-top: 9.375vw;
    padding-left: 0; /* 트랙이 자체 padding 관리 */
    padding-bottom: 12.188vw;
}

.facility-s3 .section-heading {
    padding-left: 7.292vw;
    margin-bottom: 1.042vw;
}

.facility-s3 .facility-s-body {
    padding-left: 7.292vw;
    margin-bottom: 4.74vw;
}

/* 카테고리 행 공통 (PC/태블릿/모바일) */
.facility-cat-sliders {
    display: block;
}

.facility-cat {
    position: relative; /* 화살표 버튼 기준점 */
    margin-bottom: 3.177vw; /* 61px 행 간격 */
}

.facility-cat:last-child {
    margin-bottom: 0;
}

/* ── 화살표 버튼 (PC/태블릿) ── */
.fac-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 2.604vw; /* 50px */
    height: 2.604vw;
    min-width: 40px;
    min-height: 40px;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.fac-arrow:disabled {
    opacity: 0;
    pointer-events: none;
}

.fac-arrow--prev {
    /* gutter(7.292vw) 안에서 버튼(2.604vw) 중앙 정렬
     → (7.292 - 2.604) / 2 = 2.344vw  첫 카드 왼쪽 열과 일치 */
    left: 2.344vw;
}

.fac-arrow--next {
    right: 0.5vw;
}

.fac-arrow .material-symbols-outlined {
    font-size: max(1.563vw, 24px);
}

/* 가로 스크롤 트랙 */
.facility-cat__track {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 7.292vw;
    scrollbar-width: none;
    gap: 1.563vw; /* 30px */
    width: 100%;
    /* padding-left 대신 첫 카드에 margin-left 사용 —
     overflow 컨테이너에서 padding-left는 브라우저마다 동작이 달라
     overflow 행(카페테리아)과 비overflow 행(실내/강의실)의 열 기준이 어긋남 */
}

.facility-cat__track::-webkit-scrollbar {
    display: none;
}

.facility-card {
    position: relative;
    flex: 0 0 22.865vw; /* 439px */
    height: 25.417vw; /* 488px */
    background: #c7c7c7;
    overflow: hidden;
    scroll-snap-align: start;
}

/* facility-card 내 img — 카드 꽉 채우기 */
.facility-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 첫 카드 왼쪽 여백 — 섹션 콘텐츠 열(7.292vw)과 정렬 */
.facility-cat__track .facility-card:first-child {
    margin-left: 7.292vw;
}

/* label: left/bottom 각 50px=2.604vw
   (label_x=190-card_x=140=50px, label_bottom=card_h488-label_top_from_card402-label_h36=50px) */
.facility-card__label {
    position: absolute;
    left: 1.5625vw;
    bottom: 1.5625vw;
    font-family: "Pretendard", sans-serif;
    font-weight: 500;
    font-size: 1.5625vw; /* 30px */
    color: #fff;
    letter-spacing: -0.0167em;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

/* =========================================================
   CURRICULUM  (커리큘럼)  —  pages/curriculum.html
   피그마 PC_커리큘럼 (1920px 기준) 수치 적용
   ========================================================= */

/* body 텍스트: 기본 .section-body 에서 height:60px 해제 */
.curr-s-body {
    height: auto;
    line-height: 1.2;
}

/* ── Section 1: 영어가 달라지는 방식의 차이 ── */
.curr-s1 {
    padding-top: 9.375vw; /* 180px — 섹션 상단 → 헤딩 시작점 */
    padding-left: 7.292vw; /* 140px */
    padding-right: 7.292vw; /* 140px */
    padding-bottom: 9.375vw; /* 180px */
}

.curr-s1 .section-heading {
    margin-bottom: 1.042vw; /* 20px */
}

.curr-s1 .curr-s-body {
    margin-bottom: 5.625vw; /* 108px — 본문 하단 → 이미지 상단 */
}

.curr-s1__images {
    display: flex;
    gap: 3.177vw; /* 61px */
}

.curr-s1__img {
    flex: 1;
    height: 45.677vw; /* 877px */
    background: #c7c7c7;
    overflow: hidden;
}
.curr-s1__img img {
    width: 100%;
    object-fit: contain;
}

/* ── Section 2: 단계별 영어 성장 과정 ── */
.curr-s2 {
    padding-top: 9.375vw; /* 180px */
    padding-bottom: 9.375vw; /* 180px */
    /* 좌우 패딩 없음 — heading/body/step 각각 개별 처리 */
}

.curr-s2 .section-heading {
    padding-left: 7.292vw;
    margin-bottom: 1.042vw;
}

.curr-s2 .curr-s-body {
    padding-left: 7.292vw;
    margin-bottom: 7.292vw; /* 140px — 본문 → 첫 스텝 이미지 */
}

.curr-steps {
    display: flex;
    flex-direction: column;
    gap: 5.625vw; /* 108px — 스텝 행 간격 */
}

.curr-step {
    display: flex;
    align-items: center;
}

/* 좌측 텍스트 열: x=0 ~ x=843(43.906vw) */
.curr-step__text {
    flex: 0 0 43.906vw;
    padding-left: 7.292vw; /* 140px — 섹션 헤딩과 동일 열 정렬 */
    padding-right: 2.604vw; /* 50px — 텍스트↔이미지 여백 */
}

/* STEP 레이블 (예: STEP 1. Foundation) */
.curr-step__name {
    font-family: "Pretendard", sans-serif;
    font-weight: 600;
    font-size: 1.563vw; /* 30px */
    color: #212529;
    letter-spacing: -0.0167em;
    line-height: 1.2;
    margin-bottom: 1.25vw; /* 24px — 레이블↔설명 간격 */
}

/* STEP 설명 본문 */
.curr-step__desc {
    font-family: "Pretendard", sans-serif;
    font-weight: 400;
    font-size: 1.563vw; /* 30px */
    color: #212529;
    letter-spacing: -0.0167em;
    line-height: 1.875vw; /* 36px */
    word-break: keep-all;
}

/* 우측 이미지 영역: x=843(43.906vw) ~ x=1780(92.708vw) */
.curr-step__imgs {
    flex: 0 0 48.802vw; /* 937px */
    display: flex;
    gap: 2.24vw; /* 43px — 이미지 두 장 사이 간격 */
}

/* 이미지 한 장: 447px */
.curr-step__img {
    flex: 1;
    height: 25.365vw; /* 487px */
    background: #c7c7c7;
    overflow: hidden;
}
.curr-step__img img {
    width: 100%;
    object-fit: contain;
}

/* =========================================================
   ACTIVITY  (액티비티)  —  pages/activity.html
   피그마 PC_액티비티 (1920px 기준) 수치 적용
   ========================================================= */

/* body 텍스트: 기본 .section-body height:60px 해제 */
.act-s-body {
    height: auto;
    line-height: 1.2;
}

/* ── 공통: 섹션 라벨 (캠프명·액티비티명) ── */
.act-camp__label,
.act-activity__label {
    font-family: "Pretendard", sans-serif;
    font-weight: 500;
    font-size: 1.563vw; /* 30px */
    color: #212529;
    letter-spacing: -0.0167em;
    line-height: 1.2;
    margin-top: 1.042vw; /* 20px — 이미지 하단 ~ 라벨 */
}

/* ── Section 1: 모국어 습득원리 그대로 ── */
.act-s1 {
    padding: 9.375vw 7.292vw; /* 상하 180px, 좌우 140px */
}

.act-s1 .section-heading {
    margin-bottom: 1.042vw; /* 20px */
}

.act-s1 .act-s-body {
    margin-bottom: 2.604vw; /* 50px — 본문 하단 → 이미지 상단 */
}

/* 전폭 이미지 한 장 (1640×838px) */
.act-s1__img {
    width: 100%;
    height: 43.646vw; /* 838px */
    background: #c7c7c7;
    overflow: hidden;
}
.act-s1__img img {
    width: 100%;
    object-fit: contain;
}

/* ── Section 2: 더욱 업그레이드된 영어캠프 ── */
.act-s2 {
    padding: 9.375vw 7.292vw;
}

.act-s2 .section-heading {
    margin-bottom: 1.042vw;
}

.act-s2 .act-s-body {
    margin-bottom: 3.906vw; /* 75px — 본문 하단 → 이미지 상단 */
}

/* 2개 캠프 가로 배치 (794×496px each, gap 52px) */
.act-s2__camps {
    display: flex;
    gap: 2.708vw; /* 52px */
}

.act-camp {
    flex: 1;
}

.act-camp__img {
    width: 100%;
    height: 25.833vw; /* 496px */
    background: #c7c7c7;
    overflow: hidden;
}
.act-camp__img img {
    width: 100%;
    object-fit: contain;
}

/* ── Section 3: 다채로운 액티비티 ── */
.act-s3 {
    padding: 9.375vw 7.292vw 15.625vw; /* 하단 300px */
}

.act-s3 .section-heading {
    margin-bottom: 1.042vw;
}

.act-s3 .act-s-body {
    margin-bottom: 3.906vw; /* 75px */
}

/* 3행 세로 스택 (행 간격 130px=6.771vw) */
.act-activities {
    display: flex;
    flex-direction: column;
    gap: 6.771vw; /* 130px */
}

/* 각 행: 이미지 2장 + 라벨 */
.act-activity__imgs {
    display: flex;
    gap: 2.708vw; /* 52px */
}

/* 이미지 한 장 (794×807px) */
.act-activity__img {
    flex: 1;
    height: 42.031vw; /* 807px */
    background: #c7c7c7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.act-activity__img img {
    height: 100%;
    object-fit: contain;
}

/* =========================================================
   CONTACT  (문의하기)  —  pages/contact.html
   피그마 PC_문의하기 (1920px 기준) 수치 적용
   페이지 히어로 없음 — GNB 하단부터 바로 콘텐츠 시작
   ========================================================= */

/* ── Section 1: 상담 문의 정보 ── */
.cont-s1 {
    padding-top: 14.323vw; /* 275px — GNB(80) + 여백(195) 포함 */
    padding-left: 7.292vw; /* 140px */
    padding-bottom: 5.156vw; /* 99px — 섹션2 전 여백 */
}

.cont-heading {
    font-family: "Pretendard", sans-serif;
    font-weight: 700;
    font-size: 2.344vw; /* 45px */
    color: #212529;
    letter-spacing: -0.0111em;
    line-height: 1.2;
    margin-bottom: 0.885vw; /* 17px */
}

.cont-desc {
    font-family: "Pretendard", sans-serif;
    font-weight: 400;
    font-size: 1.25vw; /* 24px */
    color: #212529;
    letter-spacing: -0.0208em;
    line-height: 1.354vw; /* 26px */
    margin-bottom: 6.198vw; /* 119px — 본문 → 전화 정보 */
}

/* 전화 정보 행 (고객센터 라벨 + 값들) */
.cont-phone-row {
    display: flex;
    align-items: flex-start;
}

/* "고객센터" 라벨 열 */
.cont-phone-label {
    font-family: "Pretendard", sans-serif;
    font-weight: 400;
    font-size: 1.25vw; /* 24px */
    color: #212529;
    letter-spacing: -0.0208em;
    flex: 0 0 5.781vw; /* 111px — x=140 → x=251 정렬 */
    line-height: 1;
    padding-top: 0.1em; /* 텍스트 베이스라인 맞춤 */
}

/* 전화번호·시간·버튼 열 */
.cont-phone-values {
    display: flex;
    flex-direction: column;
}

.cont-phone-number {
    font-family: "Pretendard", sans-serif;
    font-weight: 400;
    font-size: 1.25vw; /* 24px */
    color: #212529;
    letter-spacing: -0.0208em;
    line-height: 1;
    margin-bottom: 2.083vw; /* 40px */
}

.cont-hours {
    font-family: "Pretendard", sans-serif;
    font-weight: 400;
    font-size: 1.25vw; /* 24px */
    color: #212529;
    letter-spacing: -0.0208em;
    line-height: 1;
    margin-bottom: 1.927vw; /* 37px — 운영시간 → 카카오 버튼 */
}

/* 카카오톡 문의 버튼 */
.cont-kakao {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 7.292vw; /* 140px */
    height: 2.5vw; /* 48px */
    min-width: 100px;
    min-height: 36px;
    background: #d9d9d9;
    border: none;
    border-radius: 4px;
    font-family: "Pretendard", sans-serif;
    font-weight: 400;
    font-size: 1.042vw; /* 20px */
    color: #212529;
    letter-spacing: -0.025em;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.5s ease;
}

.cont-kakao:hover,
.cont-kakao:focus {
    background: #c5c5c5;
}

/* ── Section 2: 페이지 바로가기 그리드 ── */
.cont-s2 {
    padding: 4.219vw 7.292vw; /* 상하 81px, 좌우 140px */
    margin-bottom: 6.198vw; /* 119px — 그리드 → 푸터 여백 */
}

/* 2×2 그리드 */
.cont-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3.75vw; /* 72px */
    row-gap: 3.906vw; /* 75px */
}

/* 그리드 아이템 (각 페이지 링크) */
.cont-grid__item {
    height: 9.74vw; /* 187px */
    background: #c7c7c7;
    display: flex;
    align-items: flex-end; /* 텍스트 하단 정렬 */
    padding: 0 0 2.083vw 2.083vw; /* 하단/좌측 40px */
    font-family: "Pretendard", sans-serif;
    font-weight: 600;
    font-size: 1.25vw; /* 24px */
    color: #fff;
    letter-spacing: -0.0125em;
    text-decoration: none;
    transition: all 0.5s;
}
.cont-grid__item--about {
    background: url(../images/contact/contact_about.jpg);
    background-size: cover;
}
.cont-grid__item--facility {
    background: url(../images/contact/contact_facility.jpg);
    background-size: cover;
}
.cont-grid__item--curriculum {
    background: url(../images/contact/contact_curriculum.jpg);
    background-size: cover;
}
.cont-grid__item--activity {
    background: url(../images/contact/contact_activity.jpg);
    background-size: cover;
}
.cont-grid__item:hover {
    filter: brightness(0.8);
}

/* ── Skeleton 페이지 공통 ── */
.page-coming {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vw;
    font-weight: 600;
    font-size: 1.563vw;
    color: #888;
    letter-spacing: -0.02em;
}

/* =========================================================
   SUB-PAGE MOBILE  (max-width: 768px)
   피그마 m_어학원소개 (375px 기준) 수치 적용
   ========================================================= */
@media (max-width: 768px) {
    /* ── 공통 텍스트 ── */
    .section-heading {
        font-size: 4.267vw; /* 16px */
        font-weight: 600;
        margin-bottom: 1.6vw;
    }

    .section-body {
        font-size: 3.733vw; /* 14px */
        line-height: 5.6vw; /* 21px */
    }

    /* ── 페이지 히어로 배너
     Frame y:44  h:384px=102.4vw
     Title  x:20=5.333vw  y:224(내부)=59.733vw  font:18px=4.8vw
     Sub    y:253(내부)=67.467vw  font:12px=3.2vw  lh:17px=4.533vw
     ── */
    .page-hero {
        height: 102.4vw;
        margin-top: 11.733vw; /* GNB height 44px = 11.733vw */
    }

    .page-hero-content {
        left: 5.333vw;
        top: 59.733vw;
    }

    .page-hero-title {
        font-size: 4.8vw;
        font-weight: 700;
        margin-bottom: 1.867vw;
    }

    .page-hero-subtitle {
        font-size: 3.2vw;
        line-height: 4.533vw;
    }

    /* ── About S1: 차별화된 영어 학습 환경
     모바일: 텍스트 위 / 이미지 아래 단순 수직 배치 → normal flow
     Hero끝(y:428) → 타이틀(y:545): 117px=31.2vw 간격
     텍스트~이미지 간격: 626-611(desc끝)=15px≈4vw
     이미지: 전체 너비 330px=88vw
     ── */
    .about-s1 {
        height: auto;
        margin-top: 31.2vw;
        overflow: visible;
        display: block;
        padding: 0;
    }

    .about-s1__text {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        padding: 0 5.333vw;
        margin-bottom: 4vw; /* 15px 간격 */
    }

    .about-s1__image {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        height: 88vw;
        display: block;
        overflow: hidden;
        margin-bottom: 0;
    }

    /* ── About S2: 콘텐츠 peek 슬라이더
     각 슬라이드 너비: 70.4vw(264px)  좌여백: 5.333vw  간격: 2.667vw
     슬라이드 내부: 텍스트 위 → 이미지 아래 (normal flow, flex-column)
     ── */
    .about-s2 {
        height: auto; /* 내용이 높이를 결정하게 */
        margin-top: 31.2vw;
        overflow: visible; /* 세로 클리핑 없음 */
    }

    /* slider: absolute → relative 전환 (section 높이가 auto이므로) */
    .about-s2__slider {
        position: relative;
        inset: auto;
        width: 100%;
    }

    /* viewport만 가로 클리핑 */
    .about-s2__viewport {
        overflow: hidden;
        height: auto;
    }

    /* 트랙: 왼쪽 여백 + 슬라이드 간격 */
    .about-s2__track {
        padding-left: 5.333vw;
        gap: 2.667vw;
        align-items: flex-start; /* 슬라이드 높이가 달라도 상단 정렬 */
    }

    /* 각 슬라이드: 264px = 70.4vw, 텍스트+이미지 수직 배치 */
    .about-s2__slide {
        flex: 0 0 70.4vw;
        display: flex;
        flex-direction: column;
    }

    /* 슬라이드 텍스트: normal flow */
    .about-s2__slide-text {
        position: static;
        width: auto;
        top: auto;
        left: auto;
        margin-bottom: 2.667vw; /* 10px 간격 */
    }

    /* 슬라이드 이미지: normal flow, 고정 높이 */
    .about-s2__slide-images {
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        height: 78.133vw; /* 293px */
        flex-shrink: 0;
        gap: 0;
    }

    /* 모바일: 슬라이드당 이미지 1장 */
    .about-s2__img:nth-child(2) {
        display: none;
    }

    /* 화살표: 슬라이더 기준 이미지 영역 세로 중앙
     텍스트 영역 약 17vw + 간격 2.667vw + 이미지중심 39.067vw ≈ 58.8vw */
    .slider-arrow {
        position: absolute;
        top: 58.8vw;
        transform: translateY(-50%);
        width: 7.467vw;
        height: 7.467vw;
        z-index: 20;
    }

    .slider-arrow--prev {
        left: 0;
    }
    .slider-arrow--next {
        right: 0;
    }

    .slider-arrow .material-symbols-outlined {
        font-size: 6.4vw;
    }

    /* ── About S3: 체계적인 학습 과정
     모바일: 타이틀 → 4개 아이템 수직 스택 → normal flow
     상단 패딩 8.533vw(32px), 그리드 1열, 아이템간격 8vw
     ── */
    .about-s3 {
        height: auto;
        margin-top: 37.6vw;
        overflow: visible;
        padding: 8.533vw 0 8vw;
    }

    .about-s3__text {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        padding: 0 4.533vw;
        margin-bottom: 7.2vw; /* 27px 간격: 104-77=27px */
    }

    .about-grid {
        position: static;
        left: auto;
        top: auto;
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 8vw;
        padding: 0 4.533vw;
    }

    .about-grid__image {
        height: 52.533vw; /* 197px */
    }

    .about-grid__label {
        font-size: 3.733vw;
        margin-top: 2.667vw;
        margin-bottom: 1.067vw;
    }

    .about-grid__desc {
        font-size: 3.733vw;
        line-height: 5.6vw;
    }

    /* ── About CTA
     CTA y:2906  (S3 ends y:2839, gap 67px = 17.867vw)
     ── */
    .page-about .cta-banner {
        margin-top: 17.867vw;
    }

    .page-coming {
        font-size: 4vw;
        min-height: 60vw;
    }

    /* =========================================================
     FACILITY PAGE MOBILE  (375px 기준)
     1px = 0.2667vw
     ========================================================= */

    /* ── facility section-body override ── */
    .facility-s-body {
        height: auto;
        line-height: 1.6;
        word-break: keep-all;
    }

    /* ── Section 1: 지도 섹션 ── */
    .facility-s1 {
        padding-top: 8.533vw; /* 32px */
        padding-left: 5.333vw; /* 20px */
        padding-right: 5.333vw;
        padding-bottom: 10.667vw; /* 40px */
    }

    .facility-s1 .facility-s-body {
        margin-bottom: 5.333vw; /* 20px gap to map */
    }

    .facility-map {
        width: 100%;
        height: 66.667vw; /* 250px */
    }

    /* ── Section 2: 안심 환경  (회색 배경, 텍스트 하단) ── */
    .facility-s2 {
        height: auto;
        min-height: 80vw; /* 300px */
        padding-top: 53.333vw; /* 200px 상단 이미지 여백 */
        padding-left: 5.333vw;
        padding-right: 5.333vw;
        padding-bottom: 8.533vw;
        justify-content: flex-start;
        background-attachment: fixed; /* 모바일 배경 고정 적용 */
    }

    .facility-s2__text .section-heading {
        margin-bottom: 1.6vw;
    }

    .facility-s2 .section-body {
        height: auto;
    }

    /* ── Section 3: 주요 시설 안내 ─── 모바일 override
     피그마 52-214  Frame 52:228  (375px 기준)
     카드: w=264px=70.4vw  h=293px=78.133vw
     왼쪽 여백: 17px=4.533vw  카드 gap: 10px=2.667vw  행 gap: 18px=4.8vw
     레이블 offset: left/bottom 각 30px=8vw
     ── */
    .facility-s3 {
        padding-top: 8.533vw;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 10.667vw;
    }

    .facility-s3 .section-heading {
        padding-left: 4.533vw;
    }

    .facility-s3 .facility-s-body {
        padding-left: 4.533vw;
        padding-right: 4.533vw;
        margin-bottom: 5.333vw;
    }

    /* 모바일: 화살표 버튼 표시 */
    .fac-arrow {
        display: none;
        width: 10.667vw; /* 40px */
        height: 10.667vw;
        min-width: 36px;
        min-height: 36px;
    }
    .fac-arrow--prev {
        left: 2vw;
    }
    .fac-arrow--next {
        right: 2vw;
    }
    .fac-arrow .material-symbols-outlined {
        font-size: 6vw;
    }

    /* 카테고리 행 간격 (18px=4.8vw) */
    .facility-cat {
        margin-bottom: 4.8vw;
    }

    /* 가로 스크롤 트랙 — 모바일 사이즈로 override */
    .facility-cat__track {
        gap: 2.667vw; /* 10px */
        scroll-padding-left: 4.533vw; /* 17px */
    }

    .facility-card {
        flex: 0 0 70.4vw; /* 264px */
        height: 78.133vw; /* 293px */
    }

    /* 모바일 첫 카드 여백 — 피그마 기준 17px=4.533vw */
    .facility-cat__track .facility-card:first-child {
        margin-left: 4.533vw;
    }

    .facility-card__label {
        font-size: 3.733vw; /* 14px */
        left: 8vw; /* 30px */
        bottom: 8vw; /* 30px */
    }

    /* ── 커리큘럼 모바일 ── */

    /* Section 1: 이미지 세로 스택 */
    .curr-s1 {
        padding: 10.667vw 5.333vw; /* 40px 20px */
    }

    .curr-s1 .section-heading {
        font-size: max(5.333vw, 18px); /* 20px */
        margin-bottom: 2.133vw;
    }

    .curr-s1 .curr-s-body {
        font-size: max(3.733vw, 13px); /* 14px */
        margin-bottom: 5.333vw;
    }

    .curr-s1__images {
        flex-direction: row; /* 모바일에서도 2열 나란히 */
        gap: 2.133vw; /* 8px */
    }

    .curr-s1__img {
        height: 48vw; /* 양쪽 동일 높이 */
    }

    /* Section 2: 스텝 세로 스택 (이미지 위, 텍스트 아래) */
    .curr-s2 {
        padding-top: 10.667vw;
        padding-bottom: 10.667vw;
    }

    .curr-s2 .section-heading {
        font-size: max(5.333vw, 18px);
        padding-left: 5.333vw;
        margin-bottom: 2.133vw;
    }

    .curr-s2 .curr-s-body {
        font-size: max(3.733vw, 13px);
        padding-left: 5.333vw;
        margin-bottom: 8vw; /* 30px */
    }

    .curr-steps {
        gap: 21.332vw; /* 60px */
    }

    .curr-step {
        flex-direction: column;
        align-items: stretch;
    }

    .curr-step__text {
        flex: unset;
        padding: 4.267vw 5.333vw 0; /* 16px 20px 0 */
        order: 2; /* 이미지 아래에 텍스트 배치 */
    }

    .curr-step__name {
        font-size: max(4.267vw, 15px); /* 16px */
        margin-bottom: 2.667vw; /* 10px */
        line-height: 1.4;
    }

    .curr-step__desc {
        font-size: max(3.733vw, 13px); /* 14px */
        line-height: 1.6;
    }

    .curr-step__imgs {
        flex: unset;
        width: 100%;
        gap: 2.133vw; /* 8px */
        order: 1; /* 이미지 위 배치 */
        padding: 0 5.333vw; /* 20px 좌우 여백 */
        box-sizing: border-box;
    }

    .curr-step__img {
        height: 40vw; /* 150px */
    }

    /* ── 액티비티 모바일 ── */

    /* 공통 라벨 */
    .act-camp__label,
    .act-activity__label {
        font-size: max(4.267vw, 15px); /* 16px */
        margin-top: 2.667vw; /* 10px */
    }

    /* Section 1: 전폭 이미지 */
    .act-s1 {
        padding: 10.667vw 5.333vw;
    }

    .act-s1 .section-heading {
        font-size: max(5.333vw, 18px);
        margin-bottom: 2.133vw;
    }

    .act-s1 .act-s-body {
        font-size: max(3.733vw, 13px);
        margin-bottom: 4.267vw;
    }

    .act-s1__img {
        height: 56vw; /* 210px */
    }

    /* Section 2: 2개 캠프 세로 스택 */
    .act-s2 {
        padding: 10.667vw 5.333vw;
    }

    .act-s2 .section-heading {
        font-size: max(5.333vw, 18px);
        margin-bottom: 2.133vw;
    }

    .act-s2 .act-s-body {
        font-size: max(3.733vw, 13px);
        margin-bottom: 6.4vw;
    }

    .act-s2__camps {
        flex-direction: column;
        gap: 8vw; /* 30px */
    }

    .act-camp__img {
        height: 56vw; /* 210px */
    }

    /* Section 3: 액티비티 세로 스택 */
    .act-s3 {
        padding: 10.667vw 5.333vw;
    }

    .act-s3 .section-heading {
        font-size: max(5.333vw, 18px);
        margin-bottom: 2.133vw;
    }

    .act-s3 .act-s-body {
        font-size: max(3.733vw, 13px);
        margin-bottom: 6.4vw;
    }

    .act-activities {
        gap: 10.667vw; /* 40px */
    }

    .act-activity__imgs {
        gap: 2.133vw; /* 8px */
    }

    .act-activity__img {
        height: 32vw; /* 120px */
    }

    /* ── 문의하기 모바일 ── */

    /* Section 1 */
    .cont-s1 {
        padding-top: 24vw; /* GNB(11.733vw) + 여백 */
        padding-left: 5.333vw;
        padding-bottom: 10.667vw;
    }

    .cont-heading {
        font-size: max(6.4vw, 22px);
        margin-bottom: 2.133vw;
    }

    .cont-desc {
        font-size: max(3.733vw, 13px);
        line-height: 1.5;
        margin-bottom: 8vw;
    }

    .cont-phone-label {
        font-size: max(3.733vw, 13px);
        flex: 0 0 21.333vw; /* 80px */
    }

    .cont-phone-number {
        font-size: max(4.8vw, 16px);
        margin-bottom: 3.2vw;
    }

    .cont-hours {
        font-size: max(3.2vw, 11px);
        line-height: 1.4;
        word-break: keep-all;
        margin-bottom: 5.333vw;
    }

    .cont-kakao {
        width: 34.667vw; /* 130px */
        height: 11.733vw; /* 44px */
        font-size: max(3.733vw, 13px);
    }

    /* Section 2 */
    .cont-s2 {
        padding: 8vw 5.333vw;
        margin-bottom: 0;
    }

    .cont-grid {
        grid-template-columns: 1fr; /* 모바일: 1열 */
        row-gap: 2.667vw;
    }

    .cont-grid__item {
        height: 21.333vw; /* 80px */
        font-size: max(4.267vw, 14px);
        padding: 0 0 4.267vw 4.267vw;
    }
}