/* ==========================================================================
   K-인똥구리 놀이문화 메인 페이지 CSS
   참고 이미지 기반 — 흰색 배경, 초록 포인트 컬러 (#2E7D32)
   ========================================================================== */

/* ── 공통 변수 (메인 페이지용) ── */
:root {
    --g-primary: #2E7D32;
    /* 진초록 포인트 */
    --g-light: #4CAF50;
    /* 밝은 초록 */
    --g-bg: #F1F8E9;
    /* 연한 초록 배경 */
    --g-orange: #FF6D00;
    /* 오렌지 (버튼 등) */
    --g-orange-bg: #FFF3E0;
    /* 연한 오렌지 배경 */
    --g-dark: #1B2A1B;
    /* 다크 텍스트 */
    --g-gray: #666666;
    --g-lgray: #F5F5F5;
    --g-border: #E0E0E0;
    --g-white: #FFFFFF;
    --g-radius: 12px;
    --g-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    --font-ko: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
}

/* ── 리셋 ── */
.kid-main {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    position: relative;
}

.kid-main * {
    box-sizing: border-box;
}

.kid-main a {
    text-decoration: none;
    color: inherit;
}

.kid-main ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kid-main img {
    max-width: 100%;
    display: block;
}

/* ── 공통 컨테이너 ── */
.kid-main .m-wrap {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ── 공통 섹션 태그 라벨 ── */
.m-sec-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--g-primary);
    background: var(--g-bg);
    border: 1px solid var(--g-light);
    border-radius: 50px;
    padding: 3px 10px;
    margin-bottom: 8px;
}

/* ==========================================================================
   1. 히어로 섹션
   ========================================================================== */
.m-hero {
    position: relative;
    min-height: 600px;
    background-image: url('../img/hero_main.png');
    /* 원본 PNG 유지 */
    background-size: cover;
    background-position: center top;
    overflow: visible;
    display: flex;
    align-items: center;
    padding-bottom: 60px;
}

/* 히어로 배경 오버레이 — 사진이 잘 보이도록 투명도 낮춤 */
.m-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.0);
    z-index: 1;
}

.m-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 150px 20px 75px;  /* 전체 텍스트를 아래로 내려 상하 밸런스 확보 */
}

/* 히어로 텍스트 완폭 — 3개 버튼이 1줄로 나란히 들어가도록 넉넉하게 확보 */
.m-hero-text {
    max-width: 620px;
    width: 100%;
}

.m-hero-sub {
    font-size: clamp(0.95rem, 1.8vw, 1.12rem);
    color: #1E293B;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.55;
    letter-spacing: -0.02em;
    animation: heroFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.1s;
}

.m-hero-sub .m-sub-line1 {
    font-weight: 800;
    color: #1E293B;
}

.m-hero-sub .m-sub-line2 {
    font-weight: 800;
    color: #1E293B;
}

.m-hero-sub .color-blue {
    color: #2B6CB0;
    font-weight: 800;
}

.m-hero-sub .color-green {
    color: #2E7D32;
    font-weight: 800;
}

.m-hero-sub .color-orange {
    color: #E65100;
    font-weight: 800;
}

.m-hero-title {
    font-size: clamp(2.2rem, 4.2vw, 3rem);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 38px;   /* 놀이문화 아래 여백 대폭 확장 */
    font-family: 'Jua', var(--font-ko), sans-serif;  /* 둥그림체 */
    letter-spacing: -0.01em;
    animation: heroFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.25s;
}

/* K-인똥구리 첫 등장 래퍼 — 기울어지며 쫀득하게 진입 */
.m-hero-brand-wrap {
    display: inline-flex;
    align-items: baseline;
    animation: brandTiltIntro 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}

/* K-인똥구리 전용 인터랙티브 래퍼 — 실크 유체 플로팅 */
.m-hero-brand {
    display: inline-flex;
    align-items: baseline;
    position: relative;
    cursor: default;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 8px;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    /* 4.2초 주기의 완벽한 사인파 곡선으로 물 위에 떠 있는 듯 실크처럼 부드러운 플로팅 */
    animation: brandFloatSilk 4.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
}

/* 마우스 호버 시 살짝 톡 튀어오르는 인터랙션 */
.m-hero-brand:hover {
    transform: translate3d(0, -4px, 0) scale(1.035);
    filter: drop-shadow(0 6px 14px rgba(10, 108, 59, 0.22));
}

/* 첫 등장: 살짝 기울어지면서 탄력있게 쏙 튀어나오는 진입 키프레임 */
@keyframes brandTiltIntro {
    0% {
        opacity: 0;
        transform: translateY(28px) rotate(-4deg) scale(0.92);
    }
    60% {
        opacity: 1;
        transform: translateY(-4px) rotate(1.5deg) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

/* 끊김 없는 60/120fps 실크 플로팅 (미세한 각도+서브픽셀 3D 이동 결합) */
@keyframes brandFloatSilk {
    0% {
        transform: translate3d(0, 0px, 0) rotate(0deg);
    }
    25% {
        transform: translate3d(0, -2px, 0) rotate(0.4deg);
    }
    50% {
        transform: translate3d(0, -4px, 0) rotate(0deg);
    }
    75% {
        transform: translate3d(0, -1.8px, 0) rotate(-0.4deg);
    }
    100% {
        transform: translate3d(0, 0px, 0) rotate(0deg);
    }
}

.m-hero-title .title-k {
    color: #F15A24; /* 주황 계열 */
}

.m-hero-title .title-dash {
    color: #94401C; /* 갈색 계열 */
    margin: 0 1px;
}

.m-hero-title .title-name {
    color: #0A6C3B; /* 산뜻하고 맑은 에메랄드 딥그린 계열 */
}

.m-hero-title .title-sub {
    color: #18181B; /* 깔끔한 다크 블랙 */
    display: inline-block;
    margin-top: 2px;
}

.m-hero-desc {
    margin-bottom: 42px;   /* 설명 아래 버튼과의 여백 대폭 확장 */
    max-width: 460px;
    animation: heroFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.4s;
}

.m-hero-detail {
    font-size: clamp(0.92rem, 1.7vw, 1.05rem);
    font-weight: 800;
    color: #1E293B;
    line-height: 1.65;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}

/* 6대 핵심 가치 칩 뱃지 세트 (첨부 레퍼런스 스타일) */
.m-hero-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.m-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    font-family: var(--font-ko), sans-serif;
    transition: transform 0.2s ease;
}

.m-chip:hover {
    transform: translateY(-2px);
}

.m-chip.chip-blue   { background: #3182CE; }
.m-chip.chip-green  { background: #55A24B; }
.m-chip.chip-orange { background: #ED8936; }
.m-chip.chip-purple { background: #9F7AEA; }
.m-chip.chip-pink   { background: #F687B3; }
.m-chip.chip-lime   { background: #7CB342; }

/* 히어로 버튼 2개 — 레퍼런스 디자인 + 인터랙션 */
/* 히어로 버튼 3개 세트 — PC/모바일 모두 1줄 나란히 배치 */
.m-hero-btns {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    animation: heroFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.55s;
    width: fit-content;
    max-width: 100%;
}

.m-btn-hero {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    flex-shrink: 0;
}

/* 버튼 마우스 호버 시 은은한 화이트 빛줄기(Shine Sweep) 효과 */
.m-btn-hero::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -70%;
    width: 45%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    pointer-events: none;
}

.m-btn-hero:hover::after {
    left: 150%;
    transition: left 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.m-btn-hero-icon {
    font-size: 1.55rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.m-btn-hero:hover .m-btn-hero-icon {
    transform: scale(1.12);
}

.m-btn-hero-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.22;
    font-family: var(--font-ko), sans-serif;
}

.m-btn-line1 {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.m-btn-line2 {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.m-btn-arr {
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
    margin-left: 1px;
    transition: transform 0.2s ease;
}

.m-btn-hero:hover .m-btn-arr {
    transform: translateX(2px);
}

/* 1. 녹색 버튼 (K-인똥구리 알아보기) */
.m-btn-green {
    background: #5B8C32;
}
.m-btn-green:hover {
    background: #4B7728;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(91, 140, 50, 0.35);
}

/* 2. 오렌지 버튼 (학교 프로그램 보기) */
.m-btn-orange {
    background: #EE8C24;
}
.m-btn-orange:hover {
    background: #D97A16;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(238, 140, 36, 0.35);
}

/* 3. 파란색 버튼 (사용 하지 않음) */
.m-btn-blue {
    background: #2575C4;
}
.m-btn-blue:hover {
    background: #1B60A3;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 117, 196, 0.35);
}

/* 1번 버튼: 딥 포레스트 그린 (K-인똥구리 알아보기) */
.m-btn-green-dark {
    background: #27532A;
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(39, 83, 42, 0.3);
}
.m-btn-green-dark:hover {
    background: #1E4221;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(39, 83, 42, 0.4);
}

/* 2번 버튼: 진한 초록 배경 + 선명한 흰색 테두리 + 흰색 텍스트 (학교 프로그램 보기) */
.m-btn-green-outline {
    background: #3B7E40;
    color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 12px rgba(40, 90, 45, 0.3);
}
.m-btn-green-outline .m-btn-line1,
.m-btn-green-outline .m-btn-line2,
.m-btn-green-outline .m-btn-hero-icon {
    color: #ffffff !important;
    text-shadow: none;
}
.m-btn-green-outline:hover {
    background: #2E6B33;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(40, 90, 45, 0.4);
}

/* 3번 버튼: 비비드 탠저린 오렌지 (체험·출강 신청하기) */
.m-btn-orange {
    background: #F07923;
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(240, 121, 35, 0.35);
}
.m-btn-orange:hover {
    background: #D96918;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(240, 121, 35, 0.45);
}

/* ──────────────────────────────────────────────
   히어로 오른쪽: 절대 위치 요소 2종
   1) .m-hero-badge-card  — 우상단 작은 혜택 카드
   2) .m-speech-bubble    — 우하단 원형 캐릭터 말풍선
   ────────────────────────────────────────────── */

/* 1. 우상단 혜택 카드 — 꺔끔한 미니멀 */
.m-hero-badge-card {
    position: absolute;
    top: 105px;
    right: 110px;
    z-index: 4;
    width: 196px;                /* 전체적으로 조금 작게 */
    background: rgba(255, 255, 255, 0.88);
    border: none;
    border-radius: 14px;
    padding: 9px 14px;     /* 상하 줄여서 세로 단축 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.m-badge-card-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #1B5E20;
    margin-bottom: 8px;    /* 세로 단축 */
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(76, 175, 80, 0.2);
    white-space: nowrap;
    letter-spacing: -0.01em;
    /* 구분선 스로 진한 초록으로 순환 */
    animation: titleLineColor 4s ease-in-out infinite;
}

.m-hero-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--g-dark);
    line-height: 1.4;
    margin-bottom: 4px;    /* 세로 단축 */
    padding-left: 6px;      /* 카드 안에서 오른쪽으로 */
    animation: kidIconFloat 2.2s ease-in-out infinite;
}

.m-hero-benefit-item:last-child {
    margin-bottom: 0;
}

.m-benefit-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.m-benefit-icon.green {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1.5px solid #66BB6A;   /* 진한 초록 테두리 */
}

.m-benefit-icon.orange {
    background: #FFF3E0;
    color: #E65100;
    border: 1.5px solid #FFA726;   /* 진한 오렌지 테두리 */
}

.m-benefit-icon.pink {
    background: #FCE4EC;
    color: #C62828;
    border: 1.5px solid #EC407A;   /* 진한 핑크 테두리 */
}

/* 각 행 딕딲 딜레이 — 아이콘+텍스트 함께 엇갈려 움직임 */
.m-hero-benefit-item:nth-child(2) { animation-delay: 0s; }
.m-hero-benefit-item:nth-child(3) { animation-delay: 0.35s; }
.m-hero-benefit-item:nth-child(4) { animation-delay: 0.7s; }

/* 둥둥 동작 keyframes */
@keyframes kidIconFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-3px) scale(1.03); }  /* 크기 변화 최소화 */
}

/* 구분선 초록 순환 */
@keyframes titleLineColor {
    0%, 100% { border-bottom-color: rgba(76, 175, 80, 0.18); }
    40%       { border-bottom-color: rgba(67, 160, 71, 0.55); }
    70%       { border-bottom-color: rgba(129, 199, 132, 0.45); }
}

/* 2. 우측 말풍선 — 미니멀, 캐릭터 머리 위에 위치하여 꼬리가 아래를 향함 */
.m-speech-bubble {
    position: absolute;
    bottom: 175px;
    /* 조금 아래로 */
    right: 8px;
    /* 오른쪽으로 이동 */
    z-index: 4;
    min-width: 116px;
    /* 텍스트 2줄에 맞게 */
    background: rgba(255, 255, 255, 0.90);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1B2A1B;
    line-height: 1.55;
    padding: 10px 3px;
    /* 좌우 여백 좁게 */
}

/* 꼬리 — 왼쪽 사이드 (캐릭터가 왼쪽에서 말하는 것처럼) */
.m-speech-bubble::before {
    content: '';
    position: absolute;
    left: -13px;
    /* 왼쪽에서 튀어나옴 */
    bottom: 20px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 13px solid rgba(255, 255, 255, 0.90);
    /* 왼쪽 방향 삼각형 */
    filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.07));
}

.m-speech-bubble::after {
    display: none;
}

/* 톤 제거 */

/* .m-bubble-leaf-icon 아이콘 제거 후 스타일 불필요 */

/* ── 레거시 .m-hero-right — 제거 (HTML에서도 삭제) ── */
.m-hero-right {
    display: none;
}

.m-bubble {
    display: none;
}

.m-hero-card {
    display: none;
}

/* ==========================================================================
   2. 소개 + 프로그램 과정 섹션 (흰 배경 / 상단 둥근 탭)
   ========================================================================== */
.m-about {
    background: #fff;
    padding: 55px 0 60px;
    margin-top: -36px;       /* 히어로 섹션 위로 자연스럽게 올라옴 */
    border-radius: 36px 36px 0 0;
    position: relative;
    z-index: 5;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.05);
}

/* 좌우 완벽 분할 2열 그리드 (가운데 얇은 세로 구분선) */
.m-about-grid {
    display: grid;
    grid-template-columns: 1.08fr 1.22fr;
    gap: 36px;
    align-items: start;
}

/* ──────────────────────────────────────────────
   왼쪽: K-인똥구리 놀이문화란? (4개 기능 카드)
   ────────────────────────────────────────────── */
.m-about-left {
    border-right: 1px solid #EFECE6;  /* 레퍼런스 가운데 세로 구분선 */
    padding-right: 36px;
}

.m-about-title {
    font-size: 1.4rem;
    font-weight: 900;
    color: #18181B;
    margin-bottom: 10px;
    font-family: 'Jua', var(--font-ko), sans-serif;
    border: none;
    padding: 0;
    letter-spacing: -0.01em;
}

.m-about-desc {
    font-size: 0.83rem;
    font-weight: 500;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 22px;
}

/* 4개 기능 카드 — 1행 4열 가로 정렬 */
.m-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.m-feature-item {
    background: #F9F2E0;              /* 일러스트 배경과 100% 일치하는 따뜻한 연노랑 크림 */
    border: 1px solid #EEDBBA;
    border-radius: 16px;
    padding: 16px 6px 14px;
    text-align: center;
    transition: all 0.25s ease;
}

.m-feature-item:hover {
    background: #FFFDF5;
    border-color: #A5D6A7;
    box-shadow: 0 8px 22px rgba(46, 125, 50, 0.12);
    transform: translateY(-3px);
}

/* 고화질 일러스트 아이콘 이미지 래퍼 */
.m-feature-img-wrap {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.25s ease;
}

.m-feature-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.m-feature-item:hover .m-feature-img-wrap {
    transform: translateY(-2px) scale(1.1);
}

.m-feature-name {
    font-size: 0.79rem;
    font-weight: 800;
    color: #1E293B;
    margin-bottom: 5px;
    font-family: 'Jua', var(--font-ko), sans-serif;
    white-space: nowrap;
}

.m-feature-desc {
    font-size: 0.65rem;
    color: #64748B;
    line-height: 1.38;
    font-weight: 500;
}

/* ──────────────────────────────────────────────
   오른쪽: 프로그램 진행 과정 (50분)
   ────────────────────────────────────────────── */
.m-about-right {
    display: flex;
    flex-direction: column;
}

.m-process-title {
    font-size: 1.25rem;
    font-weight: 900;
    color: #18181B;
    margin-bottom: 22px;
    font-family: 'Jua', var(--font-ko), sans-serif;
    text-align: center;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.m-process-arr {
    color: #94A3B8;
    font-size: 0.95rem;
}

/* 가로 6단계 플로우차트 */
.m-process-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 24px;
}

.m-process-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 4px;
}

.m-step {
    flex: 1;
    text-align: center;
    position: relative;
}

/* 스텝 고화질 일러스트 원형 이미지 래퍼 */
.m-step-img-wrap {
    width: 52px;
    height: 52px;
    margin: 0 auto 7px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

.m-step-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.m-step:hover .m-step-img-wrap {
    transform: translateY(-3px) scale(1.08);
}

/* 스텝 상단 번호 뱃지 */
.m-step-num {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

/* 6단계 번호 뱃지 색상 세트 */
.m-step-num.s1 { background: #E64A19; }
.m-step-num.s2 { background: #7E22CE; }
.m-step-num.s3 { background: #2E7D32; }
.m-step-num.s4 { background: #D97706; }
.m-step-num.s5 { background: #E11D48; }
.m-step-num.s6 { background: #0284C7; }

.m-step-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.35;
    white-space: nowrap;
}
.m-step-label small {
    display: block;
    font-size: 0.60rem;
    color: #64748B;
    font-weight: 600;
    margin-top: 1px;
}

/* 2·3단계 묶음 컨테이너 (총 40분 묶음) */
.m-step-bundle {
    flex: 2;
    background: #F4FAF4;
    border: 1.5px dashed #A5D6A7;
    border-radius: 12px;
    padding: 14px 4px 6px;
    position: relative;
    margin: 0 2px;
}
.m-bundle-tag {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: #2E7D32;
    color: #ffffff;
    font-size: 0.60rem;
    font-weight: 800;
    padding: 1.5px 8px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(46, 125, 50, 0.25);
    letter-spacing: -0.02em;
}
.m-bundle-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    width: 100%;
}
.m-step-arrow.inner {
    margin-top: -14px;
    color: #A5D6A7;
}

/* 단계 간 화살표 */
.m-step-arrow {
    flex-shrink: 0;
    color: #CBD5E1;
    font-size: 0.95rem;
    margin-top: -18px;
    padding: 0 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 중간 연결 화살표 */
.m-process-mid-arrow {
    flex-shrink: 0;
    color: #CBD5E1;
    font-size: 0.95rem;
    margin-top: -18px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mid-pc-arr { display: inline-block; }
.mid-mo-arr { display: none; }

/* ──────────────────────────────────────────────
   하단: 캐릭터 + 캡슐 말풍선 인용구 박스 (레퍼런스 디자인)
   ────────────────────────────────────────────── */
.m-quote-container {
    display: flex;
    align-items: center;
    margin-top: 12px;
    position: relative;
}

.m-quote-mascot {
    width: 78px;
    height: 78px;
    flex-shrink: 0;
    margin-right: -14px;
    z-index: 2;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.12));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.m-quote-mascot:hover {
    transform: translateY(-4px) scale(1.08);
}

.m-quote-mascot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.m-process-quote {
    flex: 1;
    background: #F4F8F1;              /* 부드러운 파스텔 연두빛 아이보리 */
    border: 1px solid #E2EFE0;
    border-radius: 40px;             /* 둥근 캡슐 타원형 */
    padding: 14px 24px 14px 28px;
    box-shadow: 0 4px 16px rgba(46, 125, 50, 0.04);
}

.m-quote-text {
    font-size: 0.88rem;
    font-weight: 800;
    color: #18181B;
    line-height: 1.55;
    font-family: 'Jua', var(--font-ko), sans-serif;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

.m-quote-line1,
.m-quote-line2 {
    display: block;
    white-space: nowrap;
}

/* ==========================================================================
   3. 선택 프로그램 2종 섹션 (레퍼런스 디자인)
   ========================================================================== */
.m-programs {
    background: #FAF8F5;              /* 따뜻한 연노랑 아이보리 배경 */
    padding: 55px 0 60px;
}

.m-programs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.m-prog-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 26px 28px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.m-prog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.m-prog-card.card-green {
    border: 1.5px solid #81C784;
}

.m-prog-card.card-orange {
    border: 1.5px solid #FFB74D;
}

/* 상단 타이틀 행 */
.m-prog-header {
    margin-bottom: 16px;
}

.m-prog-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.m-prog-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 0.82rem;
    font-weight: 900;
    color: #fff;
    font-family: 'Jua', var(--font-ko), sans-serif;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.m-prog-tag.tag-green {
    background: #006837;
}

.m-prog-tag.tag-orange {
    background: #E64A19;
}

.m-prog-heading {
    font-size: 1.25rem;
    font-weight: 900;
    margin: 0;
    font-family: 'Jua', var(--font-ko), sans-serif;
    letter-spacing: -0.01em;
    word-break: keep-all;
    line-height: 1.35;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
}

.m-head-main {
    display: inline-block;
    white-space: nowrap;
}

.m-prog-heading.head-green {
    color: #006837;
}

.m-prog-heading.head-orange {
    color: #E64A19;
}

.m-prog-sub-tag {
    font-size: 0.88rem;
    font-weight: 700;
    color: inherit;
    white-space: nowrap;
    display: inline-block;
}

.m-prog-sub {
    font-size: 0.86rem;
    font-weight: 700;
    color: #262626;
    line-height: 1.45;
    margin-top: 4px;
    word-break: keep-all;
}

/* 본문 컨텐츠 (좌측 스펙 + 우측 사진) */
.m-prog-body {
    display: flex;
    align-items: stretch;
    gap: 18px;
    margin-bottom: 20px;
    flex: 1;
}

.m-prog-specs {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}

.m-spec-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.45;
}

.m-spec-badge {
    flex-shrink: 0;
    color: #fff;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    min-width: 44px;
    margin-top: 1px;
}

.m-spec-badge.badge-green {
    background: #006837;
}

.m-spec-badge.badge-orange {
    background: #E64A19;
}

.m-spec-text {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    word-break: keep-all;
    flex: 1;
    line-height: 1.45;
}

.m-prog-photo {
    width: 170px;
    height: 145px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 가로형 (동영상파일/이미지 16:9): 170px 기준 높이 = 96px */
.m-prog-photo.photo-landscape {
    height: 96px !important;
}

.m-prog-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.m-prog-card:hover .m-prog-photo img {
    transform: scale(1.06);
}

/* 하단 버튼 */
.m-prog-footer {
    display: flex;
    justify-content: flex-start;
}

.m-prog-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 800;
    color: #FFFFFF !important;       /* 글자색 100% 흰색 명시 */
    font-family: 'Jua', var(--font-ko), sans-serif;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.m-prog-btn span,
.m-prog-btn i {
    color: #FFFFFF !important;       /* 아이콘/텍스트 모두 흰색 고정 */
    position: relative;
    z-index: 2;
}

/* 버튼 마우스 호버 시 사선 화이트 광택(Shine Sweep) 효과 */
.m-prog-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 45%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    pointer-events: none;
    z-index: 1;
}

.m-prog-btn:hover::after {
    left: 150%;
    transition: left 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 호버 시 연필 아이콘 사각사각 위글 모션 */
.m-prog-btn:hover i {
    animation: pencilWiggle 0.5s ease;
}

@keyframes pencilWiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    30%      { transform: rotate(-18deg) scale(1.15); }
    60%      { transform: rotate(12deg) scale(1.1); }
}

.m-prog-btn.btn-green {
    background: #006837;
}

.m-prog-btn.btn-green:hover {
    background: #00562e;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 22px rgba(0, 104, 55, 0.38);
}

.m-prog-btn.btn-orange {
    background: #E64A19;
}

.m-prog-btn.btn-orange:hover {
    background: #d84315;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 22px rgba(230, 74, 25, 0.38);
}

.m-prog-btn i {
    font-size: 0.88rem;
    transition: transform 0.2s ease;
}

/* ==========================================================================
   4. 현장 사진 슬라이드 섹션 (레퍼런스 디자인 / 섹션3과 통일된 배경)
   ========================================================================== */
.m-gallery {
    background: #FAF8F5;              /* 섹션3과 100% 동일한 연노랑 아이보리 (자연스럽게 이어짐) */
    padding: 20px 0 50px;             /* 세로 공간을 낭비하지 않는 컴팩트한 여백 */
}

.m-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.m-gallery-title {
    font-size: 1.35rem;
    font-weight: 900;
    font-family: 'Jua', var(--font-ko), sans-serif;
    color: #18181B;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    letter-spacing: -0.01em;
}

.m-gallery-sparkle {
    color: #84CC16;                   /* 연두빛 반짝이 데코 */
    font-size: 1.15rem;
    font-weight: 900;
}

.m-gallery-mascot {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.12));
    margin-left: 4px;
    animation: mascotTiptoeLeft 2.6s ease-in-out infinite; /* 왼쪽으로 살짝 갔다 돌아오는 반복 모션 */
    transform-origin: bottom center;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.m-gallery-mascot:hover {
    animation-play-state: paused;     /* 마우스 올리면 일시정지 후 확대 */
    transform: translate3d(0, -3px, 0) scale(1.12);
}

/* 캐릭터가 왼쪽(글자 쪽)으로 아장아장 콩콩 다가갔다가 돌아오는 키프레임 (블러 없는 픽셀 렌더링) */
@keyframes mascotTiptoeLeft {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    28% {
        transform: translate3d(-4px, -3px, 0);
    }
    55% {
        transform: translate3d(-8px, 0, 0);
    }
    82% {
        transform: translate3d(-4px, -2px, 0);
    }
}

.m-gallery-more {
    font-size: 0.88rem;
    font-weight: 800;
    color: #475569;
    font-family: 'Jua', var(--font-ko), sans-serif;
    text-decoration: none;
    transition: color 0.2s;
}

.m-gallery-more:hover {
    color: #006837;
}

/* 슬라이더 / 표준 Flex 슬라이더 레이아웃 */
.m-slider-outer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.m-slider-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #006837;
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 104, 55, 0.25);
    transition: all 0.2s ease;
    z-index: 5;
}

.m-slider-btn:hover {
    background: #004d28;
    transform: scale(1.08);
}

.m-slider-wrap {
    flex: 1;
    overflow: hidden;
    width: 100%;
    border-radius: 18px;
}

.m-slider-track {
    display: flex !important;
    gap: 16px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    width: fit-content;
}

.m-slide-item {
    flex: 0 0 240px;
    width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

.m-slide-img-box {
    width: 100%;
    height: 165px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    background: #fff;
    position: relative;
}

.m-slide-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.m-slide-item:hover .m-slide-img-box img {
    transform: scale(1.06);
}

.m-slide-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(30, 41, 59, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    color: #ffffff;
    font-size: 1.6rem;
}
.m-slide-item:hover .m-slide-hover-overlay {
    opacity: 1;
}

.m-slide-caption {
    font-size: 0.88rem;
    font-weight: 800;
    color: #1E293B;
    margin-top: 10px;
    font-family: 'Jua', var(--font-ko), sans-serif;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding: 0 4px;
}

/* ==========================================================================
   메인 갤러리 2컬럼 슬라이더 모달 팝업
   ========================================================================== */
.m-gl-modal-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.m-gl-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(30, 24, 20, 0.72);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.m-gl-modal-container {
    position: relative; z-index: 10;
    width: 100%; max-width: 960px;
    background: #FFFDF9;
    border: 2px solid #E2D9C8;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: mGlModalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes mGlModalIn {
    from { opacity: 0; transform: scale(0.94) translateY(16px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.m-gl-modal-close {
    position: absolute; top: 14px; right: 14px; z-index: 30;
    width: 36px; height: 36px; border-radius: 50%;
    background: #F7F3EA; border: 1px solid #D4C9B6;
    color: #3D2B1F; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s ease;
}
.m-gl-modal-close:hover {
    background: #4A7C59; color: #fff; border-color: #4A7C59;
    transform: rotate(90deg);
}
.m-gl-modal-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    max-height: 88vh;
    overflow: hidden;
}
@media (max-width: 768px) {
    .m-gl-modal-grid { grid-template-columns: 1fr; max-height: 85vh; overflow-y: auto; }
}
.m-gl-modal-col-left {
    background: #EDE8DC;
    display: flex; flex-direction: column;
    border-right: 1.5px solid #E2D9C8;
    overflow: hidden;
}
.m-gl-modal-slide-viewport {
    position: relative; flex: 1; min-height: 340px; max-height: 480px;
    display: flex; align-items: center; justify-content: center;
    background: #1e1814; overflow: hidden;
}
.m-gl-slide-main-img {
    max-width: 100%; max-height: 100%;
    object-fit: contain; display: block;
    transition: opacity 0.2s ease;
}
.m-gl-slide-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.25); border: none;
    color: #fff; font-size: 1.3rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s ease; z-index: 5;
}
.m-gl-slide-nav:hover {
    background: rgba(255, 255, 255, 0.55); transform: translateY(-50%) scale(1.08);
}
.m-gl-slide-prev { left: 12px; }
.m-gl-slide-next { right: 12px; }
.m-gl-slide-counter {
    position: absolute; bottom: 12px; right: 14px;
    background: rgba(0, 0, 0, 0.6); color: #fff;
    padding: 3px 9px; border-radius: 10px;
    font-size: 0.72rem; z-index: 5;
}
.m-gl-modal-thumb-rail {
    display: flex; gap: 8px; padding: 10px 12px;
    background: #F7F3EA; border-top: 1px solid #E2D9C8;
    overflow-x: auto; scrollbar-width: thin;
}
.m-gl-modal-thumb-item {
    flex-shrink: 0; width: 56px; height: 42px; border-radius: 4px;
    overflow: hidden; border: 2px solid transparent;
    cursor: pointer; opacity: 0.6; transition: all 0.2s ease;
}
.m-gl-modal-thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.m-gl-modal-thumb-item:hover { opacity: 0.9; }
.m-gl-modal-thumb-item.active { opacity: 1; border-color: #4A7C59; transform: scale(1.05); }

.m-gl-modal-col-right {
    display: flex; flex-direction: column;
    padding: 28px 26px 20px;
    position: relative; overflow: hidden;
}
.m-gl-modal-info-header {
    border-bottom: 1px solid #E2D9C8;
    padding-bottom: 14px; margin-bottom: 16px;
}
.m-gl-modal-label {
    font-size: 0.74rem; color: #4A7C59; font-weight: 700;
    letter-spacing: 0.04em; margin-bottom: 6px;
    display: flex; align-items: center; gap: 5px;
}
.m-gl-modal-title {
    font-size: 1.15rem; font-weight: 700; color: #3D2B1F;
    line-height: 1.45; word-break: keep-all; margin-bottom: 8px;
}
.m-gl-modal-meta {
    font-size: 0.76rem; color: #9B8878; display: flex; align-items: center; gap: 10px;
}
.m-gl-modal-body {
    flex: 1; overflow-y: auto; padding-right: 6px;
    font-size: 0.88rem; color: #6B5744; line-height: 1.8; word-break: break-word;
    max-height: 280px; scrollbar-width: thin;
}
.m-gl-modal-body img { max-width: 100%; border-radius: 6px; margin: 8px 0; }
.m-gl-modal-footer {
    display: flex; justify-content: flex-end; padding-top: 14px;
    border-top: 1px solid #E2D9C8; margin-top: 14px;
}
.m-gl-btn-close-bottom {
    display: inline-flex; align-items: center; gap: 6px;
    background: #4A7C59; color: #fff; font-size: 0.84rem; font-weight: 700;
    padding: 8px 18px; border: none; border-radius: 4px;
    cursor: pointer; transition: background 0.2s ease;
}
.m-gl-btn-close-bottom:hover { background: #3A6345; }

/* 슬라이더 좌우 진한 초록 원형 화살표 버튼 */
.m-slider-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #006837;
    color: #fff;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 104, 55, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    z-index: 2;
    transition: all 0.25s ease;
}

.m-slider-btn:hover {
    background: #004d29;
    transform: scale(1.1);
}

/* ==========================================================================
   5. 4컬럼 안내 섹션 (레퍼런스 디자인)
   ========================================================================== */
.m-info {
    background: #FAF8F5;              /* 섹션 3, 4와 동일한 따뜻한 연노랑 아이보리 */
    padding: 20px 0 35px;
}

.m-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: stretch;
}

.m-info-card {
    border-radius: 20px;
    padding: 20px 14px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}

.m-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* 카드별 맞춤 파스텔 배경 */
.m-info-card.card-author {
    background: #FFF5F5;              /* 연분홍 아이보리 */
    border: 1.5px solid #FFE4E6;
}

.m-info-card.card-effect {
    background: #F4F8F1;              /* 연녹색 아이보리 */
    border: 1.5px solid #E2EFE0;
}

.m-info-card.card-center {
    background: #F0F7FF;              /* 연파랑 아이보리 */
    border: 1.5px solid #E0F2FE;
}

.m-info-card.card-book {
    background: #F4F8F1;              /* 연녹색 아이보리 */
    border: 1.5px solid #E2EFE0;
}

/* 카드 헤더 타이틀 */
.m-card-head {
    text-align: center;
    margin-bottom: 12px;
}

.m-card-title {
    font-size: 1.22rem;
    font-weight: 900;
    font-family: 'Jua', var(--font-ko), sans-serif;
    margin: 0;
    letter-spacing: -0.01em;
}

.m-card-title.title-red {
    color: #E11D48;
}

.m-card-title.title-green {
    color: #006837;
}

.m-card-title.title-blue {
    color: #0284C7;
}

/* 1. 작가 소개 레이아웃 */
.author-layout {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex: 1;
    position: relative;
}

.m-author-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    z-index: 2;
    flex: 1;
    padding-bottom: 2px;
}

.m-author-header-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.m-author-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    color: #E11D48;
    background: #FFE4E6;
    padding: 2px 8px;
    border-radius: 12px;
    font-family: 'Jua', var(--font-ko), sans-serif;
    align-self: flex-start;
    letter-spacing: -0.01em;
}

.m-author-name {
    font-size: 1.02rem;
    font-weight: 900;
    color: #1E293B;
    font-family: 'Jua', var(--font-ko), sans-serif;
}

.m-author-bullets {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style: none;
    padding: 0;
    margin: 2px 0 4px;
    font-size: 0.69rem;
    color: #1E293B;
    font-weight: 800;
    white-space: nowrap;              /* 다음줄로 넘어가지 않고 1줄씩 깔끔하게 정렬 */
    position: relative;
    z-index: 3;
}

.m-author-bullets li {
    display: flex;
    align-items: center;
    gap: 5px;
}

.m-bullet-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #E11D48;
    flex-shrink: 0;
}

.m-author-photo {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 165px;
    height: 165px;
    border-radius: 14px;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* 글자와 사진이 겹치는 부위에 깔리는 부드러운 안개 블러 그라데이션 */
.m-author-photo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 245, 245, 0.8) 0%,
        rgba(255, 245, 245, 0) 100%
    );
    z-index: 2;
    pointer-events: none;
}

.m-author-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    position: relative;
    z-index: 1;
    border-radius: 14px;
}

/* 2. 교육 효과 레이아웃 (한 줄 100% 정렬) */
.effect-layout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.m-edu-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.m-edu-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.m-edu-ic {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-edu-ic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.m-edu-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.70rem;
    white-space: nowrap;
    flex: 1;
}

.m-edu-info strong {
    font-size: 0.76rem;
    color: #0F172A;
    font-family: 'Jua', var(--font-ko), sans-serif;
    flex-shrink: 0;
    white-space: nowrap;
}

.m-edu-info span {
    color: #475569;
    font-size: 0.67rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

/* 3. 광산문화원 안내 레이아웃 (자연스러운 줄바꿈) */
.m-info-card.card-center {
    overflow: visible;                /* 망원경 줌인 시 카드를 뚫고 크게 튀어나오도록 허용 */
    position: relative;
    z-index: 5;
}

/* 마우스 올렸을 때 카드 4 및 주변 요소보다 무조건 최상단에 위치 */
.m-info-card.card-center:hover {
    z-index: 9999 !important;
}

.center-layout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: 6px;
    position: relative;
    overflow: visible;
}

.m-center-top {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: visible;
}

.m-center-photo {
    width: 68px;
    height: 54px;
    flex-shrink: 0;
    cursor: url('../img/cursor_loupe.png') 12 12, url('../img/cursor_loupe.svg') 12 12, zoom-in;
    position: relative;
    overflow: visible;
}

.m-center-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-radius 0.3s ease;
    transform-origin: top left;       /* 마우스 위치에서 우하단으로 시원하게 펼쳐짐 */
    position: relative;
    z-index: 10;
}

/* 마우스 호버 시 망원경으로 보는 듯이 3.4배 팝업 확대되는 세련된 모션 */
.m-center-photo:hover img {
    transform: scale(3.4) translate(2px, 2px);
    border-radius: 12px;
    box-shadow: 
        0 22px 50px rgba(0, 0, 0, 0.38),
        0 8px 18px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.90); /* 세련된 미니멀 화이트 클린 림 */
    z-index: 99999 !important;
    filter: brightness(1.02);
}

.m-center-desc {
    font-size: 0.67rem;
    color: #374151;
    line-height: 1.36;
    font-weight: 700;
    word-break: keep-all;
    flex: 1;
    letter-spacing: -0.02em;
}

/* 문화원 센터 안내 뱃지 행 */
.m-center-badge-row {
    display: flex;
    gap: 5px;
    margin: 2px 0;
}

.m-center-chip {
    font-size: 0.61rem;
    font-weight: 800;
    color: #0369A1;
    background: #E0F2FE;
    border: 1px solid #BAE6FD;
    padding: 2px 7px;
    border-radius: 8px;
    font-family: 'Jua', var(--font-ko), sans-serif;
    letter-spacing: -0.01em;
}

.m-center-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
    margin-top: 2px;
}

.m-center-contact {
    display: flex;
    flex-direction: column;
}

.m-center-addr {
    font-size: 0.69rem;
    color: #1E293B;
    font-weight: 800;
    line-height: 1.25;
}

.m-center-tel {
    font-size: 0.72rem;
    color: #475569;
    font-weight: 800;
    margin: 2px 0 6px;
}

.m-center-mascot {
    width: 52px;
    height: 52px;
    margin-bottom: -6px;
    margin-right: -6px;
}

.m-center-mascot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 4. 인똥구리 그림동화 레이아웃 (3D 양장본 책) */
.m-info-card.card-book {
    overflow: visible;                /* 팝업 줌인 시 카드를 뚫고 크게 튀어나오도록 허용 */
    position: relative;
    z-index: 5;
}

.m-info-card.card-book:hover {
    z-index: 9999 !important;
}

.book-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 10px;
    position: relative;
    overflow: visible;
}

.m-book-cover-wrap {
    width: 110px;
    height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    cursor: url('../img/cursor_loupe.png') 12 12, url('../img/cursor_loupe.svg') 12 12, zoom-in;
    z-index: 10;
}

.m-book-cover-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.16));
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
    transform-origin: center center;
    position: relative;
    z-index: 15;
}

/* 마우스 호버 시 3D 양장본 동화책이 2.35배로 시원하게 팝업 확대되는 세련된 애니메이션 */
.m-book-cover-wrap:hover img {
    transform: scale(2.35) translateY(-8px) rotate(-1deg);
    filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.45));
    z-index: 99999 !important;
}

.m-book-action-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* 공통 2D 짙은 옥빛 비취 보석 버튼 (레퍼런스 이미지 완벽 일치) */
.m-card-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 중심부는 은은한 에메랄드, 외곽은 깊은 딥그린으로 퍼지는 2D 옥빛 방사형 그라데이션 */
    background: radial-gradient(ellipse 90% 85% at 50% 45%, #0F6B38 0%, #005429 55%, #003B1C 100%);
    color: #FFFFFF !important;
    font-size: 0.78rem;
    font-weight: 800;
    font-family: 'Jua', var(--font-ko), sans-serif;
    padding: 6px 17px;
    border-radius: 9999px;            /* 완벽한 캡슐 라운드 */
    text-decoration: none;
    border: 1px solid rgba(0, 59, 28, 0.6);
    box-shadow: 
        inset 0 1px 1.5px rgba(255, 255, 255, 0.25),  /* 미세한 상단 내부 림 */
        0 2px 6px rgba(0, 0, 0, 0.16);                /* 은은한 자연스러운 다크 그림자 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);        /* 글자 또렷함 강화 */
    transition: all 0.25s ease;
    align-self: flex-start;
    letter-spacing: -0.01em;
}

.m-card-action-btn:hover {
    /* 호버 시 네온/섬광 없이 옥빛 톤이 은은하게 맑아지고 부드럽게 리프트 */
    background: radial-gradient(ellipse 90% 85% at 50% 40%, #168045 0%, #006130 55%, #004522 100%);
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 1.5px rgba(255, 255, 255, 0.35),
        0 5px 12px rgba(0, 0, 0, 0.20);               /* 과하지 않은 자연스러운 깊이감 그림자 */
    filter: brightness(1.04);
}

.m-card-action-btn:active {
    transform: translateY(0);
    box-shadow: 
        inset 0 1px 1px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   6. 프로그램 문의 / 신청 배너 (레퍼런스 이미지 완벽 일치 & 푸터 일체형)
   ========================================================================== */
.m-cta {
    background: #FAF8F5;              /* 섹션 3, 4, 5와 100% 동일한 따뜻한 아이보리 */
    padding: 0 0 0;                   /* 하단 여백 제로 (푸터와 매끄럽게 밀착) */
    margin: 0;
}

.m-cta-banner {
    /* 레퍼런스 이미지의 고급스러운 짙은 숲속 딥그린 방사형 그라데이션 */
    background: radial-gradient(ellipse 110% 90% at 50% 30%, #005A2B 0%, #004621 50%, #003318 100%);
    border-radius: 20px 20px 0 0;     /* 상단 모서리만 둥글게, 하단은 0px로 푸터와 일체형 연결 */
    padding: 20px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 -4px 20px rgba(0, 45, 20, 0.08); /* 상단 쪽으로만 은은한 그림자 */
    color: #FFFFFF;
    margin-bottom: 0;
}

/* 1. 좌측 타이틀 & 서브 설명 */
.m-cta-brand {
    display: flex;
    flex-direction: column;
}

.m-cta-title {
    font-size: 1.22rem;
    font-weight: 700;
    color: #FFFFFF;
    font-family: 'Gmarket Sans', 'Noto Sans KR', sans-serif;
    letter-spacing: -0.03em;
    margin: 0 0 3px 0;
}

.m-cta-sub {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: -0.01em;
    margin: 0;
}

/* 2. 전화 / 이메일 문의 박스 */
.m-cta-contact-box {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #FFFFFF;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.m-cta-contact-box:hover {
    transform: translateY(-2px);
    opacity: 0.92;
}

.m-cta-icon-gold {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.m-cta-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.m-cta-label {
    font-size: 0.69rem;
    color: rgba(255, 255, 255, 0.80);
    font-weight: 500;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: -0.01em;
}

.m-cta-val {
    font-size: 0.94rem;
    font-weight: 700;
    color: #FFFFFF;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: -0.01em;
}

/* 3. 체험 프로그램 신청하기 버튼 열 */
.m-cta-apply-col {
    display: flex;
    align-items: center;
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.m-cta-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #E8723A;
    color: #fff;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(232,114,58,0.45);
    transition: all .22s;
    line-height: 1.4;
    text-align: center;
}
.m-cta-apply-btn:hover {
    background: #D15F27;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(232,114,58,0.5);
}
.m-cta-apply-btn i {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.m-cta-qr-frame {
    width: 48px;
    height: 48px;
    background: #FFFFFF;
    border-radius: 6px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    border: none;
    cursor: pointer;
    position: relative;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.m-cta-qr-frame:hover {
    transform: scale(1.15) translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.m-cta-qr-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* QR 호버 뱃지 (마우스 올렸을 때 살짝 뜨는 툴팁) */
.m-qr-hover-badge {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #18181B;
    color: #FFFFFF;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.m-cta-qr-frame:hover .m-qr-hover-badge {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.m-cta-qr-btn {
    font-size: 0.88rem;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Gmarket Sans', 'Noto Sans KR', sans-serif;
    letter-spacing: -0.02em;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.m-cta-qr-btn:hover {
    color: #FCD34D;
}

/* ==========================================================================
   홈페이지 바로가기 QR 모달 팝업 (정중앙 팝업)
   ========================================================================== */
.m-qr-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 15, 0.68);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.m-qr-modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.m-qr-modal {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 34px 28px 26px;
    width: 100%;
    max-width: 360px;
    text-align: center;
    position: relative;
    box-shadow: 
        0 24px 60px rgba(0, 0, 0, 0.35),
        0 4px 16px rgba(0, 104, 55, 0.15);
    border: 1px solid rgba(0, 104, 55, 0.12);
    transform: scale(0.88) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.m-qr-modal-backdrop.is-open .m-qr-modal {
    transform: scale(1) translateY(0);
}

/* 닫기 버튼 */
.m-qr-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #F1F5F9;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    transition: all 0.2s ease;
}

.m-qr-close:hover {
    background: #FFE4E6;
    color: #E11D48;
    transform: rotate(90deg);
}

/* 모달 헤더 */
.m-qr-logo-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    color: #0A6C3B;
    background: #DCFCE7;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
    font-family: 'Jua', var(--font-ko), sans-serif;
    letter-spacing: -0.01em;
}

.m-qr-modal-title {
    font-size: 1.30rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 4px;
    font-family: 'Gmarket Sans', 'Noto Sans KR', sans-serif;
    letter-spacing: -0.02em;
}

.m-qr-modal-sub {
    font-size: 0.78rem;
    color: #64748B;
    margin: 0;
    font-weight: 600;
}

/* 대형 QR 이미지 래퍼 */
.m-qr-modal-img-wrap {
    position: relative;
    width: 190px;
    height: 190px;
    margin: 18px auto 14px;
    padding: 10px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1.5px solid #F1F5F9;
}

.m-qr-big-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* QR 사방 모서리 가이드 프레임 */
.m-qr-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: #0A6C3B;
    border-style: solid;
    pointer-events: none;
}

.m-qr-corner.top-left     { top: 4px; left: 4px; border-width: 2.5px 0 0 2.5px; border-top-left-radius: 6px; }
.m-qr-corner.top-right    { top: 4px; right: 4px; border-width: 2.5px 2.5px 0 0; border-top-right-radius: 6px; }
.m-qr-corner.bottom-left  { bottom: 4px; left: 4px; border-width: 0 0 2.5px 2.5px; border-bottom-left-radius: 6px; }
.m-qr-corner.bottom-right { bottom: 4px; right: 4px; border-width: 0 2.5px 2.5px 0; border-bottom-right-radius: 6px; }

/* URL 박스 */
.m-qr-url-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 7px 12px;
    margin-bottom: 18px;
    font-size: 0.72rem;
    color: #334155;
    font-weight: 700;
    word-break: break-all;
    user-select: all;
}

/* 3대 기능 액션 버튼 그룹 (공유/복사/저장) */
.m-qr-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.m-qr-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 4px;
    border-radius: 12px;
    border: none;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'Noto Sans KR', sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.m-qr-btn:active {
    transform: scale(0.94);
}

/* 공유하기 (오렌지 그라데이션) */
.m-qr-btn.share {
    background: linear-gradient(135deg, #FF6B2C, #F15A24);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(241, 90, 36, 0.28);
}

.m-qr-btn.share:hover {
    background: linear-gradient(135deg, #FF7D45, #D94614);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(241, 90, 36, 0.40);
}

/* 링크 복사 (깔끔한 그레이/슬레이트) */
.m-qr-btn.copy {
    background: #F1F5F9;
    color: #1E293B;
    border: 1px solid #E2E8F0;
}

.m-qr-btn.copy:hover {
    background: #E2E8F0;
    transform: translateY(-2px);
}

/* QR 저장 (시그니처 그린 그라데이션) */
.m-qr-btn.download {
    background: linear-gradient(135deg, #10B981, #0A6C3B);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(10, 108, 59, 0.28);
}

.m-qr-btn.download:hover {
    background: linear-gradient(135deg, #059669, #004D25);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(10, 108, 59, 0.40);
}

/* ==========================================================================
   고급 스크롤 인터랙션 애니메이션 (섹션 2 & 섹션 3 / 100% 안전 렌더링)
   ========================================================================== */

/* ─── 섹션 2: 소개 & 4개 기능 카드 + 6단계 플로우차트 + 캐릭터 인용구 ─── */
.m-about.is-visible .m-about-title,
.m-about.is-visible .m-about-desc,
.m-about.is-visible .m-process-title {
    animation: smoothSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 4개 기능 카드: 쫀득한 팝업 스프링 (Staggered Pop-up) */
.m-about.is-visible .m-feature-item:nth-child(1) { animation: springPopUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.10s both; }
.m-about.is-visible .m-feature-item:nth-child(2) { animation: springPopUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s both; }
.m-about.is-visible .m-feature-item:nth-child(3) { animation: springPopUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.26s both; }
.m-about.is-visible .m-feature-item:nth-child(4) { animation: springPopUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.34s both; }

/* 6단계 플로우 스텝: 1번~6번 순서대로 통통 튀는 바운스 딜레이 (Sequential Bounce) */
.m-about.is-visible .m-step {
    animation: springPopUp 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.m-about.is-visible .m-step:nth-child(1)  { animation-delay: 0.12s; }
.m-about.is-visible .m-step:nth-child(3)  { animation-delay: 0.20s; }
.m-about.is-visible .m-step:nth-child(5)  { animation-delay: 0.28s; }
.m-about.is-visible .m-step:nth-child(7)  { animation-delay: 0.36s; }
.m-about.is-visible .m-step:nth-child(9)  { animation-delay: 0.44s; }
.m-about.is-visible .m-step:nth-child(11) { animation-delay: 0.52s; }

/* 단계 간 화살표 부드러운 페이드인 */
.m-about.is-visible .m-step-arrow {
    animation: smoothSlideUp 0.5s ease 0.30s both;
}

/* 하단 캐릭터 & 말풍선 */
.m-about.is-visible .m-quote-container {
    animation: smoothSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

/* ─── 섹션 3: 프로그램 2종 카드 3D 틸트 슬라이드 (천천히 부드럽게 진입) ─── */
.m-programs.is-visible .m-prog-card.card-green {
    animation: slideInTiltLeft 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.m-programs.is-visible .m-prog-card.card-orange {
    animation: slideInTiltRight 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

/* ─── 섹션 5: 4개 안내 카드 순차 스프링 팝업 (Staggered Pop-up) ─── */
.m-info.is-visible .m-info-card:nth-child(1) { animation: springPopUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.10s both; }
.m-info.is-visible .m-info-card:nth-child(2) { animation: springPopUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.20s both; }
.m-info.is-visible .m-info-card:nth-child(3) { animation: springPopUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.30s both; }
.m-info.is-visible .m-info-card:nth-child(4) { animation: springPopUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.40s both; }

/* 키프레임 정의 */
@keyframes smoothSlideUp {
    0% {
        opacity: 0;
        transform: translateY(28px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes springPopUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.88);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideInTiltLeft {
    0% {
        opacity: 0;
        transform: translateX(-35px) translateY(35px) rotate(-1.5deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(0deg);
    }
}

@keyframes slideInTiltRight {
    0% {
        opacity: 0;
        transform: translateX(35px) translateY(35px) rotate(1.5deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(0deg);
    }
}

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1024px) {
    .m-hero-inner {
        padding-top: 80px;
    }

    .m-hero-right {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .m-bubble {
        flex: 1;
        min-width: 160px;
    }

    /* 1024px: 히어로 절대 요소 조정 */
    .m-hero-text {
        max-width: 54%;   /* 카드와 격쳐 방지 */
    }

    .m-hero-badge-card {
        width: 158px;      /* 더 작게 */
        right: 10px;
        top: 70px;         /* 위로 이동 */
        padding: 10px 12px;
    }

    .m-badge-card-title { font-size: 0.76rem; }
    .m-hero-benefit-item { font-size: 0.66rem; }

    .m-speech-bubble {
        bottom: 118px;     /* 위로 올림 */
        right: 6px;
        min-width: 108px;
        font-size: 0.63rem;
        padding: 9px 5px;
    }

    /* 1024px: 말풍선 꼬리 왼쪽 위 */
    .m-speech-bubble::before {
        left: 16px;        /* 왼쪽 위 */
        right: auto;
        bottom: auto;
        top: -12px;
        border-top: none;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 12px solid rgba(255,255,255,0.90);
        filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.07));
    }

    .m-about-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .m-about-left {
        border-right: none;
        border-bottom: 1px solid #EFECE6;
        padding-right: 0;
        padding-bottom: 32px;
    }

    .m-info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .m-slide-item {
        width: calc(33.333% - 8px);
    }
}

/* ==========================================================================
   반응형 미디어 쿼리 (모바일 좌우 여백 및 가로 스크롤 완벽 차단)
   ========================================================================== */

/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
    .m-hero-inner {
        padding: 90px 20px 50px;
    }

    .m-hero-text {
        max-width: 60%;
    }

    .m-hero-badge-card {
        top: 90px;
        right: 20px;
        width: 170px;
    }

    .m-speech-bubble {
        bottom: 70px;
        right: 15px;
    }

    .m-programs-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .m-info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

/* 스마트폰 / 모바일 (768px 이하) */
@media (max-width: 768px) {
    .kid-main {
        overflow-x: clip !important;
        width: 100% !important;
    }

    .kid-main .m-wrap {
        padding: 0 16px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 1. 히어로 섹션 */
    .m-hero {
        min-height: auto;
        padding-bottom: 40px;
        overflow: hidden;
    }

    .m-hero-inner {
        padding: 80px 16px 24px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .m-hero-text {
        max-width: 100%;
    }

    .m-hero-sub {
        font-size: 0.85rem;
    }

    .m-hero-title {
        font-size: clamp(1.85rem, 7vw, 2.3rem);
        line-height: 1.25;
        margin-bottom: 18px;
    }

    .m-hero-desc {
        max-width: 100%;
        margin-bottom: 24px;
    }

    .m-hero-keywords {
        font-size: 0.82rem;
        margin-bottom: 12px;
    }

    .m-hero-detail {
        font-size: 0.78rem;
        line-height: 1.6;
    }

    /* 모바일에서 우측 절대 카드 숨김 (가로 삐져나옴 원천 차단) */
    .m-hero-badge-card,
    .m-speech-bubble {
        display: none !important;
    }

    .m-hero-btns {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .m-btn-hero {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 11px 4px 10px !important;
        gap: 6px !important;
        border-radius: 11px !important;
        box-sizing: border-box !important;
    }

    .m-btn-hero-icon {
        font-size: clamp(1.2rem, 3.8vw, 1.45rem) !important;
    }

    .m-btn-line1,
    .m-btn-line2 {
        font-size: clamp(0.72rem, 2.6vw, 0.82rem) !important;
        letter-spacing: -0.03em !important;
        white-space: nowrap !important;
    }

    .m-btn-arr {
        font-size: 0.85rem !important;
    }

    /* 2. 섹션 2 소개 & 플로우 */
    .m-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .m-feature-item {
        padding: 14px 8px 12px !important;
        border-radius: 14px !important;
    }

    .m-feature-img-wrap {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 6px !important;
    }

    .m-feature-name {
        font-size: 0.86rem !important;
        margin-bottom: 4px !important;
    }

    .m-feature-desc {
        font-size: 0.72rem !important;
        line-height: 1.4 !important;
    }

    .m-process-flow {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .m-process-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        background: #FAF8F2 !important;
        border: 1px solid #EFE8DA !important;
        border-radius: 14px !important;
        padding: 12px 6px 10px !important;
        box-sizing: border-box !important;
        gap: 2px !important;
    }

    .m-step {
        flex: 1 !important;
        text-align: center !important;
    }

    .m-step-img-wrap {
        width: 44px !important;
        height: 44px !important;
        margin: 0 auto 5px !important;
    }

    .m-step-num {
        width: 17px !important;
        height: 17px !important;
        font-size: 0.6rem !important;
    }

    .m-step-label {
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
        color: #1E293B !important;
        font-weight: 700 !important;
    }

    .m-step-arrow {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #F15A24 !important;
        font-size: 1.05rem !important;
        font-weight: 900 !important;
        flex-shrink: 0 !important;
        margin-top: -14px !important;
        padding: 0 1px !important;
    }

    .m-process-mid-arrow {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #F15A24 !important;
        font-size: 1.15rem !important;
        font-weight: 900 !important;
        margin: -4px 0 !important;
    }

    .mid-pc-arr { display: none !important; }
    .mid-mo-arr { display: inline-block !important; }

    .m-quote-container {
        padding: 8px 0 0 !important;
        gap: 6px !important;
        flex-direction: column !important;
        text-align: center !important;
        width: 100% !important;
    }

    .m-quote-mascot {
        width: 62px !important;
        height: 62px !important;
        margin: 0 auto -8px !important;
    }

    .m-process-quote {
        width: 100% !important;
        padding: 12px 8px !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
    }

    .m-quote-text {
        font-size: clamp(0.72rem, 2.7vw, 0.84rem) !important;
        line-height: 1.45 !important;
    }

    .m-quote-line1 {
        font-size: 0.78rem !important;
        margin-bottom: 2px !important;
    }

    .m-quote-line2 {
        font-size: clamp(0.68rem, 2.6vw, 0.80rem) !important;
        letter-spacing: -0.04em !important;
    }

    /* 3. 섹션 3 프로그램 */
    .m-programs-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .m-prog-card {
        padding: 20px 14px 18px !important;
    }

    .m-prog-title-row {
        gap: 6px !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

    .m-prog-heading {
        font-size: clamp(1.05rem, 4.2vw, 1.2rem) !important;
        gap: 2px 4px !important;
    }

    .m-prog-sub-tag {
        font-size: 0.8rem !important;
    }

    .m-prog-sub {
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
        word-break: keep-all !important;
    }

    .m-prog-body {
        flex-direction: column-reverse;
        gap: 14px;
    }

    .m-spec-item {
        gap: 8px !important;
    }

    .m-spec-text {
        font-size: 0.8rem !important;
        line-height: 1.45 !important;
        word-break: keep-all !important;
    }

    /* 기본 photo (유튜브 일반 16:9) */
    .m-prog-photo {
        width: 100%;
        height: 180px;
    }

    /* 가로형 (동영상파일/이미지): 모바일에서 100% 너비 + 16:9 비율 자동 높이 */
    .m-prog-photo.photo-landscape {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }

    /* 숏츠 세로형: 모바일에서 가운데 정렬 */
    .m-prog-photo.photo-shorts {
        width: 120px !important;
        height: 213px !important;
        margin: 0 auto;
        display: block;
    }

    /* 모바일 애니메이션 가로 튐 방지 */
    .m-programs.is-visible .m-prog-card.card-green,
    .m-programs.is-visible .m-prog-card.card-orange {
        animation: smoothSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /* 4. 섹션 4 갤러리 슬라이더 */
    .m-gallery-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    .m-gallery-title {
        font-size: clamp(1.02rem, 4.2vw, 1.25rem) !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .m-gallery-mascot {
        width: 32px !important;
        height: 32px !important;
        margin-left: 2px !important;
    }

    .m-gallery-more {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 0.82rem !important;
    }

    .m-slider-outer {
        position: relative !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .m-slider-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.95rem !important;
        flex-shrink: 0 !important;
    }

    .m-slider-wrap {
        width: 100% !important;
        overflow: hidden !important;
    }

    .m-slider-track {
        display: flex !important;
        gap: 10px !important;
    }

    .m-slide-item {
        flex: 0 0 calc((100% - 10px) / 2) !important;
        width: calc((100% - 10px) / 2) !important;
    }

    .m-slide-img-box {
        width: 100% !important;
        height: 115px !important;
        border-radius: 12px !important;
    }

    .m-slide-caption {
        font-size: 0.78rem !important;
        margin-top: 6px !important;
    }

    /* 5. 섹션 5 안내 카드 */
    .m-info-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* 6. 섹션 6 CTA 배너 */
    .m-cta-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 18px;
        gap: 18px;
        width: 100%;
        box-sizing: border-box;
    }

    .m-cta-qr-col {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.20);
        padding-top: 16px;
        width: 100%;
    }
}

/* 소형 모바일 (480px 이하) */
@media (max-width: 480px) {
    .m-hero-btns {
        gap: 5px;
    }

    .m-btn-hero {
        padding: 8px 3px 7px;
        gap: 4px;
        border-radius: 8px;
    }

    .m-btn-hero-icon {
        font-size: 1.05rem;
    }

    .m-btn-line1,
    .m-btn-line2 {
        font-size: 0.68rem;
        letter-spacing: -0.05em;
    }

    .m-btn-arr {
        font-size: 0.7rem;
    }

    .m-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .m-feature-item {
        padding: 12px 6px 10px !important;
    }

    .m-feature-img-wrap {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 5px !important;
    }

    .m-feature-name {
        font-size: 0.82rem !important;
    }

    .m-feature-desc {
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
    }

    .m-process-row {
        padding: 10px 4px 8px !important;
    }

    .m-step-img-wrap {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 4px !important;
    }

    .m-step-num {
        width: 15px !important;
        height: 15px !important;
        font-size: 0.55rem !important;
    }

    .m-step-label {
        font-size: 0.66rem !important;
        letter-spacing: -0.04em !important;
    }

    .m-step-arrow {
        font-size: 0.95rem !important;
    }

    .m-slider-track {
        display: flex !important;
        gap: 8px !important;
    }

    .m-slide-item {
        flex: 0 0 calc((100% - 8px) / 2) !important;
        width: calc((100% - 8px) / 2) !important;
    }

    .m-slide-img-box {
        height: 105px !important;
    }

    .m-slide-caption {
        font-size: 0.75rem !important;
    }
}