@charset "utf-8";

/* ==========================================================================
   [MOBILE INITIAL] 공통 레이아웃 초기화 (max-width: 1024px)
   ========================================================================== */
   
/* html, body 최상단에 추가하여 유령 스크롤 방지 */
html, body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
}

/* 1. 모든 ul, ol, li의 기본 여백과 점(bullet) 제거 */
ul, ol, li {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

/* 2. 스와이퍼 래퍼도 확실하게 0으로 잡기 */
.swiper-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 3. 전체 컨테이너 여백 확보 */
.gr-inner {
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box;
}

/* 4. 한글 줄바꿈 최적화 */
body, p, h1, h2, h3, h4, h5, h6, span, div, li, dt, dd {
    word-break: keep-all;
}

/* 5. 섹션 공통 여백 줄이기 */
section {
    padding: 60px 0 !important;
}

/* 6. 모바일 전용 숨김/표시 클래스 */
.pc-only { display: none !important; }
.mo-only { display: block !important; }

/* ==========================================================================
   [GLOBAL] 모든 섹션 메인 타이틀 폰트 통일 (28px)
   ========================================================================== */
.gr-det-title, .gr-sec-title, .gr-target-title, 
.gr-banner-text h4, .gr-cert-title, .gr-review-header {
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.5px !important;
    word-break: keep-all !important;
    text-align: center !important;
}

.gr-det-title, .gr-sec-title, .gr-target-title, .gr-cert-title {
    margin-bottom: 25px !important;
}


/* ==========================================================================
   [SECTION 1] 히어로 섹션
   ========================================================================== */
.gr-det-hero { height: auto !important; padding-top: 50px !important; padding-bottom: 50px !important; text-align: center; }
.gr-det-hero-wrap { display: flex; flex-direction: column !important; align-items: center; gap: 30px; }
.gr-det-hero-text { width: 100% !important; order: 1; padding: 0 10px; }
.gr-det-cate { font-size: 20px !important; font-weight: 700; display: inline-block; margin-bottom: 5px; }
.gr-det-title { font-size: 26px !important; line-height: 1.35; color: #ffffff !important; margin: 0px 0px 30px 0px; letter-spacing: -0.5px; }
.gr-det-title br { display: none; }
.gr-det-desc { font-size: 16px !important; line-height: 1.6; word-break: keep-all; }
.gr-det-hero-img { width: 100% !important; max-width: 200px; margin: 0 auto; order: 2; }
.gr-det-hero-info-bar { margin-top: 30px; padding: 25px 20px !important; border-radius: 15px; width: 100%; box-sizing: border-box; }
.gr-hero-info-list { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 60px 30px !important; padding: 40px 0px 0px 0px !important; margin: 0 !important; width: 100% !important; }
.gr-hero-info-list li { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; text-align: center !important; }
.gr-info-icon-wrap { width: 50px !important; height: 50px !important; min-width: 50px !important; min-height: 50px !important; margin: 0 auto 8px auto !important; background: #fff; border-radius: 50%; display: flex !important; justify-content: center !important; align-items: center !important; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.gr-info-icon-wrap span { font-size: 38px !important; line-height: 1 !important; }
.gr-hero-info-list dl { width: 100% !important; text-align: center !important; margin: 0 !important; }
.gr-hero-info-list dl dt { display: block !important; font-size: 16px !important; margin-bottom: 4px !important; font-weight: 500; text-align: center !important; }
.gr-hero-info-list dl dd { display: block !important; font-size: 18px !important; font-weight: 800; margin: 0 !important; text-align: center !important; }

/* ==========================================================================
   [SECTION 2] Vision 섹션
   ========================================================================== */
.gr-det-vision-content { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; overflow: hidden; }
.gr-vision-swiper { width: 100% !important; overflow: visible !important; padding: 20px 0 70px 0 !important; height: 300px !important; }
.gr-vision-swiper .swiper-wrapper { padding: 0 !important; margin: 0 !important; }
.gr-vision-card { width: 68% !important; height: 240px !important; background: #f8f9fa !important; border: 1px solid #eee !important; border-radius: 25px; padding: 35px 20px !important; box-sizing: border-box; text-align: center; filter: grayscale(100%); opacity: 0.4; transform: scale(0.85); transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); display: flex !important; flex-direction: column !important; align-items: center; justify-content: center; }
.gr-vision-swiper .swiper-slide-active { background: #fff !important; border-color: #00b0ff !important; filter: grayscale(0%); opacity: 1 !important; transform: scale(1) !important; z-index: 10; box-shadow: 0 15px 35px rgba(0, 176, 255, 0.2) !important; }
.gr-vis-icon { width: 75px !important; height: 75px !important; background: #f0f9ff !important; border-radius: 50% !important; display: flex !important; justify-content: center !important; align-items: center !important; margin-bottom: 15px !important; flex-shrink: 0; }
.gr-vis-icon span { font-size: 55px !important; color: var(--gr-point-blue) !important; }
.gr-vision-card dt { font-size: 18px !important; font-weight: 800 !important; color: #222 !important; margin-bottom: 10px !important; line-height: 1.3; word-break: keep-all; }
.gr-vision-card dd { font-size: 16px !important; color: #666 !important; line-height: 1.5 !important; word-break: keep-all !important; margin: 0; }

/* ==========================================================================
   [SECTION 3] Target 섹션
   ========================================================================== */
.gr-det-target { padding: 60px 0 80px 0 !important; background: #fbfcfd !important; }
.gr-det-target-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 30px !important; width: 100% !important; }
.gr-target-text { width: 100% !important; text-align: center !important; margin: 0 !important; }
.gr-target-title { font-size: 28px !important; font-weight: 800 !important; color: #222 !important; line-height: 1.3 !important; }
.gr-target-title .eng { display: block !important; font-size: 13px !important; color: var(--gr-point-blue) !important; font-weight: 700 !important; margin-bottom: 8px !important; letter-spacing: 1px !important; }
.gr-target-swiper { width: 100% !important; padding: 0 20px !important; box-sizing: border-box !important; overflow: visible !important; }
.gr-target-list { padding: 0 !important; margin: 0 !important; list-style: none !important; display: flex !important; flex-direction: column !important; gap: 15px !important; width: 100% !important; transform: none !important; }
.gr-target-list .swiper-slide { width: 100% !important; height: auto !important; margin: 0 !important; opacity: 1 !important; background: #fff !important; border: dashed 1px  rgba(0, 174, 255, 0.5) !important; border-radius: 16px !important; padding: 10px !important; box-sizing: border-box !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important; }
.gr-check-icon { width: 50px !important; height: 50px !important; font-size: 24px !important; background: #f0f9ff !important; color: #00b0ff !important; border-radius: 50% !important; display: flex !important; justify-content: center !important; align-items: center !important; margin-right: 20px !important; flex-shrink: 0; }
.gr-target-list span:not(.gr-check-icon) { font-size: 16px !important; color: #333 !important; font-weight: 700 !important; line-height: 1.4 !important; }
.gr-target-swiper .swiper-pagination { display: none !important; }

/* ==========================================================================
   [SECTION 4] NCS 배너 섹션
   ========================================================================== */
.gr-det-banner { padding: 60px 0 !important; }
.gr-banner-flex { display: flex !important; flex-direction: column !important; gap: 40px !important; align-items: center !important; }
.gr-banner-text { width: 100% !important; text-align: center !important; padding: 0 !important; }
.gr-banner-text h4 { font-size: 28px !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1.3 !important; margin-bottom: 20px !important; word-break: keep-all !important; }
.gr-banner-text p { font-size: 15px !important; line-height: 1.6 !important; margin-bottom: 30px !important; word-break: keep-all !important; }
.gr-banner-text .highlight { font-weight: 700 !important; }
.gr-ncs-box { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid #eef2f5 !important; border-left: 5px solid var(--gr-point-blue) !important; border-radius: 8px !important; padding: 20px !important; text-align: left !important; margin-top: 20px !important; font-size: 14px !important; color: #666 !important; line-height: 1.5 !important; box-shadow: 0 5px 15px rgba(0,0,0,0.03) !important; }
.gr-ncs-box strong { display: block !important; font-size: 16px !important; color: #222 !important; margin-bottom: -15px !important; }
.gr-banner-img-wrapper { width: 100% !important; height: auto !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; }
.gr-banner-img-wrapper img { width: 100% !important; height: auto !important; display: block !important; }

/* ==========================================================================
   [SECTION 5] 커리큘럼
   ========================================================================== */
.gr-det-curriculum { padding: 60px 0 80px 0 !important; background: #fff !important; overflow: hidden !important; }
.gr-curri-diagram { padding: 0 !important; margin: 0 auto 40px auto !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap:20px !important; width: 100% !important; max-width: 400px !important; box-sizing: border-box !important; justify-items: center !important; }
.gr-circle-item { width: 100% !important; max-width: 140px !important; aspect-ratio:  1 / 1 !important; height: auto !important; background: #fff !important; border: 2px solid rgba(0, 176, 255, 0.15) !important; border-radius: 50% !important; display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.03) !important; transition: all 0.3s ease !important; }
.gr-circle-txt { font-size: 15px !important; font-weight: 700 !important; color: #444 !important; line-height: 1.2 !important; word-break: keep-all !important; }
.gr-diagram-line { display: none !important; }
.gr-curri-swiper { width: 100% !important; height: auto !important; min-height: 380px !important; padding: 0 0 50px 0 !important; overflow: visible !important; }
.gr-curri-steps .swiper-slide { width: 75% !important; height: auto !important; margin: 0 !important; background: #fff !important; border: 1px solid #eef2f5 !important; border-radius: 25px !important; padding: 30px 20px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; filter: grayscale(100%); opacity: 0.4; transform: scale(0.9); transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important; }
.gr-curri-steps .swiper-slide-active { background: #fff !important; border: 1px solid #00b0ff !important; filter: grayscale(0%) !important; opacity: 1 !important; transform: scale(1) !important; z-index: 10; box-shadow: 0 15px 35px rgba(0, 176, 255, 0.15) !important; }
.gr-step-badge { display: inline-block !important; background: var(--gr-point-blue) !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; border-radius: 20px !important; margin-bottom: 25px !important; box-shadow: 0 4px 10px rgba(0, 176, 255, 0.3) !important; }
.gr-curri-steps dt { font-size: 20px !important; font-weight: 800 !important; color: #222 !important; margin-bottom: 15px !important; }
.gr-curri-steps dd { font-size: 15px !important; color: #555 !important; line-height: 1.6 !important; margin-bottom: 8px !important; text-align: left !important; padding-left: 10px !important; position: relative !important; }
.gr-curri-steps dd::before { content: '•'; position: absolute; left: 0; color: var(--gr-point-blue); font-weight: bold; }
.gr-curri-swiper .swiper-pagination { bottom: 0 !important; }

/* ==========================================================================
   [SECTION 6] 자격증 & 혜택 섹션
   ========================================================================== */
.gr-det-cert-review { padding: 60px 0 80px 0 !important; background: #fbfcfd !important; overflow: hidden !important; }
.gr-cert-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; width: 100% !important; }
.gr-cert-img-box { display: none !important; }
.gr-cert-text { width: 100% !important; text-align: center !important; padding: 0 10px !important; margin-bottom: 40px !important; }
.gr-cert-title { font-size: 28px !important; font-weight: 800 !important; color: #222 !important; line-height: 1.3 !important; margin-bottom: 30px !important; word-break: keep-all !important; }
.gr-cert-desc { font-size: 17px !important; color: #555 !important; line-height: 1.6 !important; margin-bottom: 30px !important; word-break: keep-all !important; }
.gr-cert-desc .highlight { background: linear-gradient(to top, #fff3cd 40%, transparent 40%) !important; font-weight: 700 !important; color: #222 !important; }
.benefit-swiper { width: 100% !important; padding: 10px 0 50px 0 !important; overflow: visible !important; }
.gr-benefit-card { width: 75% !important; height: auto !important; min-height: 240px !important; background: #fff !important; border: 1px solid #eef2f5 !important; border-radius: 25px !important; padding: 30px 20px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; opacity: 0.4; transform: scale(0.9); transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important; }
.benefit-swiper .swiper-slide-active { opacity: 1 !important; transform: scale(1) !important; border: 1px solid #00b0ff !important; background: #fff !important; z-index: 10; box-shadow: 0 15px 35px rgba(0, 176, 255, 0.15) !important; }
.gr-card-icon-box { width: 70px !important; height: 70px !important; margin: 0 auto 20px auto !important; background: #f0f9ff !important; border-radius: 50% !important; display: flex !important; justify-content: center !important; align-items: center !important; }
.gr-card-icon-box img { width: 40px !important; height: auto !important; object-fit: contain !important; }
.gr-benefit-card dl { margin: 0 !important; width: 100% !important; }
.gr-benefit-card dt { font-size: 19px !important; font-weight: 800 !important; color: #222 !important; margin-bottom: 10px !important; word-break: keep-all !important; }
.gr-benefit-card dd { font-size: 15px !important; color: #666 !important; line-height: 1.5 !important; margin: 0 !important; word-break: keep-all !important; }
.benefit-swiper .swiper-pagination { bottom: 0px !important; width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; z-index: 10 !important; }
.benefit-swiper .swiper-pagination-bullet { width: 8px !important; height: 8px !important; background: #dcdcdc !important; opacity: 1 !important; margin: 0 4px !important; border-radius: 50% !important; transition: background 0.3s ease !important; transform: none !important; }
.benefit-swiper .swiper-pagination-bullet-active { width: 8px !important; height: 8px !important; background: #00b0ff !important; border-radius: 50% !important; box-shadow: none !important; }

/* ==========================================================================
   [SECTION 7] 비교 & 합격률 섹션 (Why / VS / Chart / Table)
   ========================================================================== */
.gr-det-compare { padding: 60px 0 80px 0 !important; background: #fff !important; overflow: hidden !important; }

/* 1. Why 스와이퍼 가로 정렬 카드덱 완벽 이식 */
.gr-why-swiper { width: 100% !important; padding: 10px 0 50px 0 !important; overflow: visible !important; }
.gr-why-swiper .gr-why-points { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; padding: 0 !important; }
.gr-why-card { flex: none !important; width: 85% !important; max-width: 360px !important; height: auto !important; min-height: 280px !important; background: #fff !important; border: 1px solid #eef2f5 !important; border-radius: 25px !important; padding: 40px 15px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; filter: grayscale(100%); opacity: 0.4; transform: scale(0.9); transition: all 0.4s ease; flex-shrink: 0 !important; }
.gr-why-swiper .swiper-slide-active { border: 1px solid #00b0ff !important; filter: grayscale(0%) !important; opacity: 1 !important; transform: scale(1) !important; z-index: 10; box-shadow: 0 15px 35px rgba(0, 176, 255, 0.15) !important; }
.gr-why-icon { font-size: 45px !important; margin-bottom: 20px !important; }
.gr-why-card dl { width: 100% !important; margin: 0 !important; }
.gr-why-card dt { font-size: 20px !important; font-weight: 800 !important; color: #222 !important; margin-bottom: 15px !important; word-break: keep-all !important; }
.gr-why-card dd { font-size: 15px !important; color: #555 !important; line-height: 1.6 !important; margin: 0 !important; text-align: center !important; padding: 0 !important; word-break: keep-all !important; }
.gr-why-card dd strong { color: #222 !important; font-weight: 700 !important; background: linear-gradient(to top, #e3f2fd 40%, transparent 40%) !important; }
.gr-why-swiper .swiper-pagination { bottom: -5px !important; }

/* 2. VS 프로세스 (상하 배치 + 경계선 중앙 VS 뱃지) */
.gr-process-vs { margin-top: 60px !important; width: 100% !important; }
.gr-comp-sub-title { font-size: 24px !important; font-weight: 800 !important; text-align: center !important; margin-bottom: 30px !important; color: #222 !important; }
.gr-vs-container { display: flex !important; flex-direction: column !important; gap: 0 !important; align-items: center !important; width: 100% !important; }
.gr-vs-box.type-old { width: 100% !important; flex: none !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 20px !important; padding: 35px 20px 45px 20px !important; box-sizing: border-box !important; margin-bottom: 30px !important; position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
.gr-vs-box.type-old::after { content: 'VS' !important; position: absolute !important; bottom: -15px !important; left: 50% !important; transform: translate(-50%, 50%) !important; width: 48px !important; height: 48px !important; background: #222 !important; color: #fff !important; font-size: 16px !important; font-weight: 900 !important; font-style: italic !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 4px solid #fff !important; box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important; z-index: 10 !important; }
.gr-vs-box.type-new { width: 100% !important; flex: none !important; background: #fff !important; border: 2px solid #00b0ff !important; border-radius: 20px !important; padding: 40px 20px 35px 20px !important; box-sizing: border-box !important; box-shadow: 0 15px 35px rgba(0, 176, 255, 0.1) !important; position: relative !important; z-index: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
.gr-vs-badge { display: inline-block !important; align-self: center !important; padding: 8px 24px !important; border-radius: 25px !important; font-size: 15px !important; font-weight: 800 !important; margin-bottom: 20px !important; text-align: center !important; }
.type-old .gr-vs-badge { background: #94a3b8 !important; color: #fff !important; }
.type-new .gr-vs-badge { background: #00b0ff !important; color: #fff !important; }
.gr-vs-desc { width: 100% !important; font-size: 15px !important; font-weight: 700 !important; color: #333 !important; margin-bottom: 25px !important; text-align: center !important; word-break: keep-all !important; }
.gr-step-flow { width: 100% !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; background: transparent !important; border: none !important; }
.gr-step-flow .step { width: 80% !important; max-width: 280px !important; font-size: 14px !important; padding: 14px 10px !important; background: #fff !important; border-radius: 12px !important; border: 1px solid #eef2f5 !important; color: #555 !important; display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important; font-weight: 600 !important; line-height: 1.4 !important; }
.gr-step-flow .arrow { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; font-size: 16px !important; color: #ccc !important; transform: rotate(90deg) !important; height: 15px !important; margin: 2px 0 !important; }
.gr-step-flow .step.highlight { color: #00b0ff !important; border: 2px solid #00b0ff !important; font-weight: 800 !important; background: #f0f9ff !important; }
.gr-step-flow .step.fail-risk { background: #fff5f5 !important; border: 1px solid #ffcdd2 !important; color: #d32f2f !important; }
.gr-step-flow .step.final { background: #333 !important; color: #fff !important; font-weight: 800 !important; border: none !important; }
.type-new .gr-step-flow .step.final { background: #00b0ff !important; box-shadow: 0 8px 20px rgba(0,176,255,0.3) !important; }
.gr-vs-warn, .gr-vs-good { width: 100% !important; font-size: 13px !important; margin-top: 25px !important; text-align: center !important; font-weight: 700 !important; line-height: 1.5 !important; word-break: keep-all !important; }
.gr-vs-warn { color: #d32f2f !important; }
.gr-vs-good { color: #00b0ff !important; }

/* 3. 합격률 차트 & 테이블 */
.gr-compare-content { display: flex !important; flex-direction: column !important; gap: 30px !important; margin-top: 60px !important; width: 100% !important; box-sizing: border-box !important; }
.gr-compare-chart-box, .gr-compare-table-box { width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 30px 15px !important; }
.gr-chart-container { width: 100% !important; background: #f8f9fa !important; padding: 40px 15px 20px 15px !important; border-radius: 15px !important; box-sizing: border-box !important; margin: 0 !important; }
.gr-chart-row { margin-bottom: 25px !important; width: 100% !important; }
.gr-chart-row:last-child { margin-bottom: 0 !important; }
.gr-chart-info { display: flex !important; justify-content: space-between !important; margin-bottom: 35px !important; font-size: 14px !important; font-weight: 700 !important; width: 100% !important; }
.gr-chart-track { width: 100% !important; height: 12px !important; background: #eee !important; border-radius: 10px !important; position: relative !important; }
.gr-chart-bar { height: 100% !important; border-radius: 10px !important; position: relative !important; }
.gr-chart-bar.type-exam { background: #ccc !important; }
.gr-chart-bar.type-process { background: #00b0ff !important; }
.gr-bar-tag { position: absolute !important; right: 0 !important; top: -32px !important; background: #ff4757 !important; color: #fff !important; font-size: 12px !important; padding: 2px 7px !important; border-radius: 15px !important; font-weight: 800 !important; white-space: nowrap !important; animation: bounceMobile 2s infinite !important; z-index: 10 !important; }
.gr-bar-tag::after { content: '' !important; position: absolute !important; bottom: -5px !important; right: 15px !important; border-left: 5px solid transparent !important; border-right: 5px solid transparent !important; border-top: 5px solid #ff4757 !important; }
@keyframes bounceMobile { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.gr-comp-table { width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; margin: 0 auto !important; box-sizing: border-box !important; }
.gr-comp-table th, .gr-comp-table td { padding: 12px 5px !important; font-size: 13px !important; text-align: center !important; border-bottom: 1px solid #eee !important; vertical-align: middle !important; word-break: keep-all !important; }
.gr-comp-table th { background: #fbfcfd !important; color: #666 !important; font-weight: 700 !important; }
.gr-comp-table .th-highlight { color: #00b0ff !important; background: #f0f9ff !important; }
.gr-comp-table .td-highlight { color: #00b0ff !important; font-weight: 700 !important; background: #f0f9ff !important; }

/* ==========================================================================
   [SECTION 8] 리뷰 섹션 (모바일 스크롤 터치 멈춤 방지 적용)
   ========================================================================== */
.gr-review-section { padding: 0px 0 50px 0 !important; background: #fbfcfd !important; overflow: hidden !important; }
.gr-review-area { margin-bottom: 0 !important; }
.gr-review-track-wrap { width: 100% !important; overflow: hidden !important; }

/* 🎯 [핵심] 모바일에서는 터치(스크롤)해도 마키 애니메이션이 멈추지 않도록 강제 실행! */
.gr-review-track, 
.gr-review-track:hover, 
.gr-review-track:active { 
    animation-play-state: running !important; 
}

.gr-review-card { width: 280px !important; padding: 20px !important; border-radius: 15px !important; box-sizing: border-box !important; box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important; }
.gr-rev-top { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 15px !important; border-bottom: 1px solid #f0f0f0 !important; padding-bottom: 10px !important; }
.gr-rev-name { font-size: 15px !important; font-weight: 800 !important; color: #222 !important; }
.gr-rev-star { font-size: 13px !important; color: #ffb400 !important; font-weight: 700 !important; }
.gr-rev-txt { font-size: 14px !important; color: #555 !important; line-height: 1.6 !important; margin-bottom: 15px !important; word-break: keep-all !important; height: auto !important; }
.gr-rev-course { font-size: 12px !important; color: var(--gr-point-blue) !important; font-weight: 700 !important; background: #f0f9ff !important; padding: 5px 10px !important; border-radius: 8px !important; align-self: flex-start !important; display: inline-block !important; }


/* ==========================================================================
   #작업3 [SECTION 9] 스티키 바 모바일 최적화 (이중 패딩 제거 및 쏠림 픽스)
   ========================================================================== */
/* 1. 스티키 바 뼈대 */
.gr-sticky-bar {
    width: 100% !important;
    box-sizing: border-box !important; /* [핵심] 패딩이 100%를 넘지 않게 가둠 */
    padding: 15px 20px calc(15px + env(safe-area-inset-bottom)) 20px !important;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.08) !important;
    background: #fff !important;
}

/* 🎯 [핵심 버그픽스] 스티키 바 내부의 .gr-inner는 패딩을 강제로 0으로 만들어 이중 패딩 방지! */
.gr-sticky-bar .gr-inner {
    padding: 0 !important; 
}

/* 2. 전체 컨테이너 세로(위아래) 배치 */
.gr-sticky-flex {
    flex-direction: column !important;
    gap: 12px !important;
}

/* 3. 모바일에서 불필요한 요소 숨김 */
.gr-sticky-thumb, .gr-sticky-tel {
    display: none !important;
}

/* 4. 상단 정보 영역 */
.gr-sticky-info {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 텍스트와 뱃지 위아래 분리 */
.gr-sticky-txt {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}

/* 5. 타이틀 (크게) */
.gr-sticky-title {
    width: 100% !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #222 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 6. 뱃지 영역 */
.gr-sticky-sub {
    display: flex !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}
.badge-date, .badge-dday {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 24px !important; /* 모바일 환경에 맞는 높이 고정 */
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

/* 7. 하단 버튼 영역 */
.gr-sticky-btns {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.gr-sticky-btns a {
    margin: 0 !important;
    padding: 11px 0 !important;
    font-size: 14px !important;
    border-radius: 25px !important;
    box-sizing: border-box !important;
}

/* 전화 상담 버튼 */
.btn-visit {
    flex: 0 0 35% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 수강 신청 버튼 */
.btn-apply {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 8. 본문 하단 여백 추가 (스티키 바에 가려짐 방지) */
.gr-wrapper {
    padding-bottom: 120px !important;
}