/* ===== index 모바일 (767px 이하) ===== */
@media (max-width: 767px) {
    .main-content {
        padding: 0 0 24px;
    }

    /* ----- 배너 섹션 (화면 전체 와이드) ----- */
    .banner-section {
        margin-bottom: 28px;
        position: relative;
        width: 100vw;
        height: 105vh;
        left: 50%;
        margin-left: -50vw;
        overflow: hidden;
    }

    .banner-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #e9ecef;
    }

    .banner-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    /* ...중략... */

    .banner-cta-fixed {
        display: none;
    }

    .banner-buttons {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-top: 20px;
        /* 간격 추가 */
    }

    .btn-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 180px;
        /* 최대 너비 제한으로 PC와 느낌 맞춤 */
        padding: 12px 0;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        text-align: center;
        flex: 1;
        /* 너비 동일하게 설정 */
    }

    .btn-cta.primary {
        background: #007bff;
        color: #fff;
        animation: pulse-blue 4s infinite;
    }

    .btn-cta.kakao {
        background: #fee500;
        color: #3c1e1e;
        animation: pulse-yellow 4s infinite 2s;
    }

    @keyframes pulse-blue {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
        }

        35% {
            box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
        }
    }

    @keyframes pulse-yellow {
        0% {
            box-shadow: 0 0 0 0 rgba(254, 229, 0, 0.7);
        }

        35% {
            box-shadow: 0 0 0 10px rgba(254, 229, 0, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(254, 229, 0, 0);
        }
    }

    /* ----- 퀵 버튼 ----- */
    .quick-buttons-section {
        margin-bottom: 28px;
        padding: 0 16px;
    }

    .quick-buttons-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .quick-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 12px;
        background: #f8f9fa;
        border-radius: 10px;
        border: 1px solid #e9ecef;
        min-height: 100px;
    }

    .quick-button img {
        width: 40px;
        height: 40px;
        object-fit: contain;
        margin-bottom: 8px;
    }

    .quick-button i {
        font-size: 28px;
        color: #007bff;
        margin-bottom: 8px;
    }

    .quick-button span {
        font-size: 13px;
        font-weight: 500;
        color: #333;
        text-align: center;
    }

    /* ----- 강의 일정 ----- */
    .lecture-schedule-section {
        margin-bottom: 28px;
        padding: 24px 16px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        border: 1px solid #eee;
        margin-left: 16px;
        margin-right: 16px;
    }

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

    .schedule-header h2 {
        font-size: 18px;
        font-weight: 700;
        color: #1a1a1a;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .schedule-header h2 i {
        color: #007bff;
    }

    .schedule-header .btn-more {
        font-size: 13px;
        font-weight: 500;
        color: #007bff;
    }

    .schedule-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .schedule-calendar {
        background: #fafafa;
        padding: 16px;
        border-radius: 10px;
        border: 1px solid #eee;
    }

    .calendar-month {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 12px;
        color: #1a1a1a;
        text-align: center;
    }

    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
    }

    .calendar-day {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        background: #fff;
        color: #555;
        border: 1px solid #e5e5e5;
    }

    .calendar-day.has-schedule {
        background: #007bff;
        color: #fff;
        border-color: #007bff;
        font-weight: 600;
    }

    .schedule-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .schedule-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
        padding: 14px 16px;
        background: #fafafa;
        border-radius: 10px;
        border: 1px solid #eee;
    }

    .schedule-date {
        font-size: 13px;
        font-weight: 600;
        color: #007bff;
    }

    .schedule-title {
        flex: 1;
        min-width: 0;
        font-size: 14px;
        font-weight: 500;
        color: #1a1a1a;
    }

    .schedule-link {
        font-size: 13px;
        color: #007bff;
        font-weight: 500;
    }

    /* ----- 수강생 후기 ----- */
    .reviews-section {
        margin-bottom: 0;
        padding: 32px 0;
        background: #f8f9fa;
    }

    .reviews-section h2 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 16px;
        color: #1a1a1a;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 16px;
    }

    .reviews-section h2::before {
        content: '⭐';
        font-size: 16px;
    }

    .reviews-container {
        overflow: hidden;
    }

    .reviews-slider {
        display: flex;
        gap: 12px;
        padding: 0 16px;
        will-change: transform;
    }

    .reviews-slider:empty::after {
        content: '아직 등록된 후기가 없습니다.';
        display: block;
        text-align: center;
        color: #888;
        font-size: 14px;
        padding: 32px 0;
        width: 100%;
    }

    .review-item {
        flex: 0 0 260px;
        min-width: 260px;
        padding: 18px;
        background: #fafafa;
        border-radius: 12px;
        border: 1px solid #eee;
    }

    .review-category {
        font-size: 11px;
        color: #666;
        margin-bottom: 8px;
        padding: 3px 8px;
        background: #eee;
        border-radius: 4px;
        display: inline-block;
    }

    .review-stars {
        color: #ffc107;
        font-size: 12px;
        margin-bottom: 10px;
        letter-spacing: 2px;
    }

    .review-content {
        font-size: 14px;
        line-height: 1.65;
        color: #444;
        margin-bottom: 12px;
    }

    .review-author {
        font-size: 13px;
        font-weight: 600;
        color: #1a1a1a;
    }

    .review-date {
        font-size: 11px;
        color: #888;
        margin-top: 4px;
    }

    /* ----- 대표 소개 ----- */
    .ceo-section {
        padding: 40px 16px;
        background: #fff;
    }

    .ceo-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .ceo-image img {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #f0f0f0;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    }

    .ceo-info {
        text-align: left;
    }

    .ceo-badge {
        display: inline-block;
        padding: 5px 12px;
        background: #007bff;
        color: #fff;
        border-radius: 16px;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .ceo-name {
        font-size: 24px;
        font-weight: 800;
        color: #1a1a1a;
        margin-bottom: 6px;
    }

    .ceo-title {
        font-size: 14px;
        color: #666;
        margin-bottom: 20px;
    }

    .ceo-achievements {
        margin-bottom: 20px;
    }

    .ceo-achievements li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 0;
        font-size: 14px;
        color: #333;
        border-bottom: 1px solid #f0f0f0;
    }

    .ceo-achievements li:last-child {
        border-bottom: none;
    }

    .ceo-achievements li i {
        color: #007bff;
        font-size: 16px;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .ceo-quote {
        font-size: 14px;
        font-style: italic;
        color: #555;
        padding: 14px 16px;
        background: #f8f9fa;
        border-left: 3px solid #007bff;
        border-radius: 0 8px 8px 0;
        margin-bottom: 24px;
    }

    .btn-ceo-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 16px 24px;
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        color: #fff;
        border-radius: 50px;
        font-size: 16px;
        font-weight: 700;
        box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3);
    }

    .btn-ceo-cta i {
        font-size: 18px;
    }

    .ceo-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .btn-ceo-kakao {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 16px 24px;
        background: #fee500;
        color: #3c1e1e;
        border-radius: 50px;
        font-size: 16px;
        font-weight: 700;
        box-shadow: 0 4px 16px rgba(254, 229, 0, 0.3);
    }

    .btn-ceo-kakao i {
        font-size: 18px;
    }

    /* ----- CTA 섹션 ----- */
    .cta-section {
        text-align: center;
        margin: 32px 16px 100px;
        padding: 32px 20px;
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        border-radius: 16px;
    }

    .cta-section h3 {
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 8px;
    }

    .cta-section p {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 20px;
    }

    .btn-cta-large {
        display: block;
        width: 100%;
        padding: 16px 24px;
        background: #fff;
        color: #007bff;
        border-radius: 50px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
}