@charset "utf-8";

/* ==========================================================================
   SUB PAGE: DETAIL VIEW (PC Layout Fix)
   * 파일명: sub_detail.css
   * 작업내용: HTML의 Swiper 클래스를 PC에서 무력화하고 레이아웃 고정
   ========================================================================== */

   /* ==========================================================================
   [GLOBAL SETTING] 페이지 전체 텍스트 선택 및 이미지 드래그 방지
   ========================================================================== */

/* 1. 페이지 내 모든 텍스트 선택(파란 블록) 방지 */
body {
    -webkit-user-select: none; /* 크롬, 사파리 */
    -moz-user-select: none;    /* 파이어폭스 */
    -ms-user-select: none;     /* 인터넷 익스플로러 */
    user-select: none;         /* 표준 */
}

/* 2. 페이지 내 모든 이미지 끌기(고스트 이미지) 방지 */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* 3. [예외 처리] 입력창과 텍스트 영역은 선택/입력 가능해야 함 (필수!) */
input, textarea {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* 4. (선택사항) 특정 텍스트만 복사하게 해주고 싶다면 이 클래스를 붙이세요 */
.allow-select {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}
   

:root {
    --gr-dark-blue: #1a2b4b;
    --gr-point-blue: #00b0ff;
    --gr-text-white: #ffffff;
    --gr-text-gray: #cfd8e5;
    --gr-text-pink: #ff1493;
}

/* [PC 공통] Swiper 껍데기 무력화 (PC에서는 슬라이드 기능 숨김) */
@media (min-width: 1025px) {
    .gr-mobile-swiper .swiper-wrapper {
        display: flex !important; /* 강제 Flex 적용 */
        flex-wrap: wrap !important; /* 줄바꿈 허용 */
        transform: none !important; /* 슬라이드 이동 제거 */
        gap: 20px; /* 간격 강제 부여 */
    }
    .gr-mobile-swiper .swiper-slide {
        width: auto !important; /* 너비 자동 */
        margin-right: 0 !important;
        height: auto !important;
    }
    .gr-mobile-swiper .swiper-pagination {
        display: none !important; /* PC에서 불필요한 점 숨김 */
    }
    .gr-swipe-guide {
        display: none !important; /* PC에서 터치 가이드 숨김 */
    }
}


/* ==========================================================================
   [UTILITY] 반응형 표시 제어
   ========================================================================== */
/* PC 화면에서는 모바일 전용 요소를 숨김 */
.mo-only {      display: none !important; }

/* =========================================
   1. HERO VISUAL (히어로 섹션)
   ========================================= */
.gr-det-hero {
    background-color: var(--gr-dark-blue);
    padding: 80px 0 60px;
    color: var(--gr-text-white);
    position: relative;
    overflow: hidden;
}

.gr-det-hero-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.gr-det-hero-text { width: 55%; padding-right: 40px; }

/* 애니메이션 키프레임 */
@keyframes detFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes detPopIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
@keyframes detFloating { 0% { transform: translateY(0); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0); } }

.gr-det-cate {
    display: inline-block; font-size: 20px; font-weight: 500;
    color: var(--gr-point-blue); margin-bottom: 15px; opacity: 0;
    animation: detFadeInUp 0.8s ease forwards 0.2s;
}
.gr-det-title {
    font-size: 48px; font-weight: 800; line-height: 1.3;
	color: #ffffff !important;
    margin-bottom: 30px; opacity: 0;
    animation: detFadeInUp 0.8s ease forwards 0.4s;
    word-break: keep-all;
}
.gr-det-desc {
    font-size: 17px; line-height: 1.8; color: var(--gr-text-gray);
    word-break: keep-all; opacity: 0;
    animation: detFadeInUp 0.8s ease forwards 0.6s;
}

.gr-det-hero-img {
    width: 45%; display: flex; justify-content: center; align-items: center;
    animation: detFloating 3s ease-in-out infinite;
}
.gr-det-hero-img img {
    max-width: 100%; height: auto;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
}

.gr-det-hero-info-bar { margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); }
.gr-hero-info-list { display: flex; justify-content: space-between; gap: 20px; }
.gr-hero-info-list li {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; position: relative;
    opacity: 0; transform: scale(0.8);
    animation: detPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.gr-hero-info-list li:nth-child(1) { animation-delay: 0.8s; }
.gr-hero-info-list li:nth-child(2) { animation-delay: 0.9s; }
.gr-hero-info-list li:nth-child(3) { animation-delay: 1.0s; }
.gr-hero-info-list li:nth-child(4) { animation-delay: 1.1s; }

@keyframes iconTilt { 0%, 50%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.gr-info-icon-wrap {
    width: 60px; height: 60px; background-color: rgb(240, 247, 255);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin-bottom: 5px; animation: iconTilt 2s ease-in-out infinite;
}
.gr-info-icon-wrap .material-symbols-outlined { font-size: 32px; color: #3b82f6; }
.gr-hero-info-list dl { margin-top: 15px; width: 100%; }
.gr-hero-info-list dt { font-size: 16px; color: #e0e0e0; margin-bottom: 5px; font-weight: 500; }
.gr-hero-info-list dd { margin: 0; padding: 0; font-size: 18px; font-weight: 700; color: #ffffff; word-break: keep-all; }

/* =========================================
   2. VISION (비전)
   ========================================= */
.gr-det-vision { padding: 100px 0; background-color: #fff; }
.gr-det-sec-header { text-align: center; margin-bottom: 60px; }
.gr-sec-sub { display: block; font-size: 22px; color: #5f5f5f; margin-bottom: 0px; font-weight: 500; }
.gr-sec-title { font-size: 42px; font-weight: 800; line-height: 1.3; margin-bottom: 20px; }
.gr-sec-desc { font-size: 16px; color: #555; line-height: 1.6; }
.gr-det-vision-content { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.gr-vision-img { width: 50%; }
.gr-vision-img img { width: 100%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.gr-vision-list { width: 45%; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.gr-vision-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.gr-vis-icon span { font-size: 40px; color: var(--gr-point-blue); }
.gr-vision-list dt { font-size: 20px; font-weight: 700; color: #333; margin-bottom: 8px; }
.gr-vision-list dd { font-size: 15px; color: #666; line-height: 1.5; word-break: keep-all; margin: 0 !important; }

/* =========================================
   3. TARGET (타겟) - PC: 세로 리스트
   ========================================= */
.gr-det-target { padding: 80px 0; background-color: #f9fbfd; }
.gr-det-target-wrap { display: flex; align-items: center; justify-content: space-between; }
.gr-target-text { width: 40%; }
.gr-target-title { font-size: 36px; font-weight: 800; line-height: 1.3; color: #3b82f6; }
.gr-target-title .eng { display: block; font-size: 14px; color: #999; letter-spacing: 2px; margin-bottom: 10px; }

/* PC에서 Target 리스트 강제 세로 정렬 */
@media (min-width: 1025px) {
    .gr-target-swiper { width: 55%; }
    .gr-target-list {
        display: flex; flex-direction: column; gap: 15px;
    }
}
.gr-target-list li {
    background: #fff; padding: 20px 30px; border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 15px;
    font-size: 18px; font-weight: 600; color: #333; transition: 0.1s;
}
.gr-target-list li:hover { transform: translateX(10px); color: var(--gr-point-blue); }
.gr-check-icon { font-size: 24px; }

/* =========================================
   4. BANNER (NCS 배너)
   ========================================= */
.gr-det-banner { background: var(--gr-dark-blue); padding: 100px 0; color: #fff; overflow: hidden; position: relative; }
.gr-banner-flex { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; height: 100%; }
.gr-banner-text { width: 50%; position: relative; z-index: 5; padding-right: 20px; }
.gr-banner-text h4 { font-size: 32px; color: #fff; font-weight: 700; margin-bottom: 30px; line-height: 1.3; }
.gr-banner-text p { font-size: 17px; line-height: 1.6; margin-bottom: 30px; color: #e0e0e0; }
.gr-banner-text .highlight { color: #51ff00; font-weight: 700; }
.gr-ncs-box{font-size: 14px; margin-top: 30px;}
.gr-ncs-box strong { display: block; font-size: 16px; color: #51ff00; margin-bottom: -15px; }
.gr-banner-img-wrapper {
    position: absolute; top: 0; right: 0; width: 50%; height: 100%;
    border-radius: 500px 0 0 500px; overflow: hidden; z-index: 1;
    box-shadow: -20px 0 50px rgba(0,0,0,0.3); opacity: 0; margin-right: -150px;
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.gr-banner-img-wrapper.active { opacity: 1; margin-right: 0; }
.gr-banner-img-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: left center; opacity: 0.8; }

/* =========================================
   5. CURRICULUM (커리큘럼) - PC: 3개 리스트 보이기
   ========================================= */
.gr-det-curriculum { padding: 100px 0; background-color: #fff; }
.gr-curriculum-content { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 50px; }
.gr-curri-diagram { width: 48%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px; position: relative; }
.gr-circle-item {
    width: 100%; aspect-ratio: 1 / 1; background: #fff; border: 2px solid #3b83f68f;
    border-radius: 50%; display: flex; justify-content: center; align-items: center;
    text-align: center; z-index: 2; transition: 0.3s; box-shadow: 0 10px 20px rgba(0,0,0,0.03);
}
.gr-circle-txt { font-size: 16px; font-weight: 700; color: #555; line-height: 1.4; }
.gr-circle-item:hover {
    border-color: var(--gr-point-blue); background-color: var(--gr-point-blue);
    transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,176,255,0.3);
}
.gr-circle-item:hover .gr-circle-txt { color: #fff; }
@keyframes detPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.gr-circle-item:nth-child(even) { animation: detPulse 3s infinite ease-in-out 1s; }
.gr-circle-item:nth-child(odd) { animation: detPulse 3s infinite ease-in-out; }
.gr-diagram-line {
    position: absolute; top: 50%; left: 10%; right: 10%; height: 1px;
    border-top: 2px dashed #e1e7f0; z-index: 1; transform: translateY(-50%);
}

/* 커리큘럼 리스트 PC 강제 정렬 */
@media (min-width: 1025px) {
    .gr-curri-swiper { width: 45%; }
    .gr-curri-steps {
        display: flex; flex-direction: column; gap: 0;
    }
}
.gr-curri-steps li { display: flex; gap: 30px; padding: 30px 0; border-bottom: 1px solid #eee; transition: 0.3s; }
.gr-curri-steps li:hover { padding-left: 20px; background-color: #f9fbfd; }
.gr-step-badge {
    flex-shrink: 0; width: 180px; height: 34px; line-height: 32px; text-align: center;
    border: 2px solid #ddd; border-radius: 20px; font-size: 13px; font-weight: 600; color: #888; background: #fff;
}
.gr-curri-steps li:hover .gr-step-badge { border-color: var(--gr-point-blue); color: var(--gr-point-blue); }
.gr-curri-steps dl dt { font-size: 20px; font-weight: 800; color: #111; margin-bottom: 10px; }
.gr-curri-steps dl dd { font-size: 15px; color: #666; margin-bottom: 5px; position: relative; padding-left: 0; margin: 0; }

/* ==========================================================================
   [RENEWAL] 6. CERTIFICATE & REVIEW (자격증 혜택 - 센터 스와이프 최종)
   ========================================================================== */

/* 섹션 배경 */
.gr-det-cert-review { 
    padding: 100px 0; 
    background: #f8f9fa; 
}

/* 상단 레이아웃 (자격증 이미지 + 텍스트) */
.gr-cert-wrap { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 40px; 
    position: relative; 
}

/* ==========================================================================
   [RENEWAL] 자격증 이미지 (기울기 완전 제거 + 공중부양/광택 효과)
   ========================================================================== */

/* 왼쪽 자격증 이미지 영역 박스 */
.gr-cert-img-box { 
    width: 40%; 
    /* [핵심] 기존 3D 원근감 속성 강제 초기화 */
    perspective: none !important; 
    transform-style: flat !important;
    
    position: relative;
    display: flex;
    justify-content: center;
    /* 필요시 z-index 추가 */
    z-index: 5;
}

/* 자격증 이미지를 감싸는 래퍼 */
.gr-cert-3d-wrapper {
    width: 300px; 
    margin: 0 auto; 
    border-radius: 15px;
    position: relative;
    overflow: hidden; /* 광택 효과가 밖으로 나가지 않게 */
    background: #fff;
    
    /* [핵심] 기존 기울기 변환 초기화 및 기본 상태 정의 */
    transform: none !important; /* 기울기 완전 제거 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* 기본 그림자 (살짝 뜬 느낌) */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 이미지 자체 스타일 */
.gr-cert-3d-wrapper img { 
    width: 100%; 
    display: block; 
    border-radius: 15px; 
}

/* [광택 효과] 빛이 지나가는 가상 요소 */
.gr-cert-3d-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* 처음엔 왼쪽 밖에 숨김 */
    width: 50%;
    height: 100%;
    /* 흰색 빛 그라데이션 */
    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: skewX(-25deg); /* 빛을 사선으로 기울임 */
    pointer-events: none; /* 마우스 이벤트 통과 */
}

/* ==========================================================================
   [HOVER EFFECT] 마우스 올렸을 때 인터랙션
   ========================================================================== */

/* 1. 공중 부양 (Levitation) */
.gr-cert-wrap:hover .gr-cert-3d-wrapper {
    /* [핵심] 기울기 없이 위로만 떠오름! */
    transform: translateY(-12px) !important; 
    /* 그림자가 아래로 넓고 진하게 퍼짐 (높이감 표현) */
    box-shadow: 0 30px 60px rgba(0, 176, 255, 0.3);
}

/* 2. 광택 지나가기 (Sheen) */
.gr-cert-wrap:hover .gr-cert-3d-wrapper::after {
    left: 150%; /* 오른쪽 밖으로 이동 */
    transition: left 0.7s ease-in-out; /* 0.7초 동안 쓱 지나감 */
}
/* 오른쪽 텍스트 영역 */
.gr-cert-text { width: 55%; }
.gr-cert-title { font-size: 36px; font-weight: 800; color: #111; margin-bottom: 20px; line-height: 1.3; text-align: center; }
.gr-cert-desc { font-size: 16px; color: #555; line-height: 1.6; margin-bottom: 40px; text-align: center; }
.gr-cert-desc .highlight { background: linear-gradient(to top, #ffeb3b 40%, transparent 40%); font-weight: 700; }

/* ==========================================================================
   [RENEWAL] 6. CERTIFICATE & REVIEW (자격증 혜택)
   ========================================================================== */
.gr-det-cert-review { padding: 100px 0; background: #f8f9fa; }

/* 상단 레이아웃 */
.gr-cert-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; position: relative; }
.gr-cert-img-box { width: 40%; perspective: 1000px; }
.gr-cert-3d-wrapper { width: 300px; margin: 0 auto; transition: transform 0.5s ease; transform-style: preserve-3d; box-shadow: 0 30px 60px rgba(0,0,0,0.15); border-radius: 10px; }
.gr-cert-3d-wrapper img { width: 100%; display: block; border-radius: 10px; }
.gr-cert-wrap:hover .gr-cert-3d-wrapper { transform: rotateY(-15deg) rotateX(5deg) scale(1.05); box-shadow: 20px 40px 80px rgba(0,0,0,0.25); }

.gr-cert-text { width: 55%; }
.gr-cert-title { font-size: 36px; font-weight: 800; color: #111; margin-bottom: 20px; line-height: 1.3; text-align: center; }
.gr-cert-desc { font-size: 16px; color: #555; line-height: 1.6; margin-bottom: 40px; text-align: center; }
.gr-cert-desc .highlight { background: linear-gradient(to top, #ffeb3b 40%, transparent 40%); font-weight: 700; }

/* -----------------------------------------------------------
   [SWIPER STYLE] 카드 덱 스타일 (최종 수정)
   ----------------------------------------------------------- */
/* 1. 컨테이너 박스 (무대) 크기 키우기 */
.benefit-swiper {
    width: 100%;
    /* [핵심 수정]
       - padding-top: 60px (위쪽 그림자와 확대된 카드가 잘리지 않도록 공간 확보)
       - padding-bottom: 120px (아래쪽 공간을 대폭 늘려 페이지네이션이 들어갈 자리 마련)
    */
    padding: 60px 20px 120px 20px; 
    overflow: hidden; /* 넘치는 부분 숨김 */
    position: relative; /* 페이지네이션 위치 기준점 */
    box-sizing: border-box; /* 패딩을 전체 크기에 포함 */
}

/* 1. 기본 카드 (비활성) */
.gr-benefit-card {
    height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    box-shadow: none;
    padding: 30px 20px;
    box-sizing: border-box;
    height: 320px; /* 높이 고정 */
    
    /* 비활성 효과: 작고 흐리게 */
    opacity: 0.3; 
    transform: scale(0.85); 
    filter: grayscale(100%); 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}/* ==========================================================================
   [RENEWAL] 6. CERTIFICATE & REVIEW (자격증 혜택 - 센터 스와이프 최종)
   ========================================================================== */

/* 1. 섹션 기본 배경 및 패딩 */
.gr-det-cert-review { 
    padding: 100px 0; 
    background: #f8f9fa; 
}

/* 2. 상단 (자격증 이미지 + 텍스트) 레이아웃 */
.gr-cert-wrap { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 40px; 
    position: relative; 
}

/* 왼쪽 자격증 3D 이미지 */
.gr-cert-img-box { width: 40%; perspective: 1000px; }
.gr-cert-3d-wrapper {
    width: 300px; margin: 0 auto; transition: transform 0.5s ease;
    transform-style: preserve-3d; box-shadow: 0 30px 60px rgba(0,0,0,0.15); border-radius: 10px;
}
.gr-cert-3d-wrapper img { width: 100%; display: block; border-radius: 10px; }
.gr-cert-wrap:hover .gr-cert-3d-wrapper { transform: rotateY(-15deg) rotateX(5deg) scale(1.05); box-shadow: 20px 40px 80px rgba(0,0,0,0.25); }

/* 오른쪽 텍스트 영역 */
.gr-cert-text { width: 55%; }
.gr-cert-title { font-size: 36px; font-weight: 800; color: #111; margin-bottom: 20px; line-height: 1.3; text-align: center; }
.gr-cert-desc { font-size: 16px; color: #555; line-height: 1.6; margin-bottom: 40px; text-align: center; }
.gr-cert-desc .highlight { background: linear-gradient(to top, #ffeb3b 40%, transparent 40%); font-weight: 700; }


/* ==========================================================================
   [SWIPER STYLE] 카드 덱 & 페이지네이션 (답답함 해소 & 위치 수정)
   ========================================================================== */

/* 3. 스와이퍼 컨테이너 (무대 공간 확보) */
.benefit-swiper {
    width: 100%;
    /* [핵심] 
       Top: 60px (확대된 카드 머리가 안 잘리게)
       Bottom: 100px (페이지네이션이 들어갈 충분한 바닥 공간 확보) 
    */
    padding: 60px 20px 100px 20px !important; 
    overflow: hidden; 
    position: relative;
    box-sizing: border-box;
}

/* 4. 기본 카드 스타일 (비활성 상태) */
.gr-benefit-card {
    /* 레이아웃 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* 카드 디자인 */
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    box-shadow: none; /* 비활성은 그림자 없음 */
    padding: 30px 20px;
    box-sizing: border-box;
    height: 320px; /* 높이 고정 */
    
    /* 비활성 효과: 작고 흐리게 */
    opacity: 0.3; 
    transform: scale(0.85); 
    filter: grayscale(100%); 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}

/* 5. 활성 카드 스타일 (가운데) */
/* 선택자 우선순위를 위해 클래스 붙여쓰기 */
.gr-benefit-card.swiper-slide-active {
    opacity: 1;
    transform: scale(1.1); /* 1.1배 확대 */
    filter: grayscale(0%); /* 컬러 복구 */
    
    border-color: var(--gr-point-blue); /* 파란 테두리 */
    
    /* [수정] 그림자: 너무 넓지 않게, 은은하게 조절 */
    box-shadow: 0 15px 30px rgba(0, 176, 255, 0.2);
    
    z-index: 10;
    background-color: #fff;
}

/* 6. 내부 요소 스타일 (아이콘, 텍스트) */
.gr-card-icon-box {
    width: 90px;
    height: 90px;
    margin: 0 auto 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f9ff;
    border-radius: 50%;
}
.gr-card-icon-box img { width: 60%; height: 60%; object-fit: contain; }

.gr-benefit-card dt {
    width: 100%;
    font-size: 20px;
    font-weight: 800;
    color: #333;
    margin-bottom: 15px;
    transition: color 0.3s;
}
/* 활성 카드 제목만 파란색 */
.gr-benefit-card.swiper-slide-active dt { color: var(--gr-point-blue); }

.gr-benefit-card dd {
    width: 100%;
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
}

/* 7. 페이지네이션 (위치 강제 조정) */
.benefit-pagination {
    /* [핵심] 컨테이너 바닥(120px 패딩) 안쪽의 하단 40px 지점에 위치 */
    bottom: 40px !important; 
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 20;
    pointer-events: auto;
}

.benefit-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #e0e0e0;
    opacity: 1;
    margin: 0 8px !important;
    border-radius: 50%;
    transition: 0.3s;
}

.benefit-pagination .swiper-pagination-bullet-active {
    background-color: var(--gr-point-blue);
    transform: scale(1.2);
}

/* 8. 반응형 (모바일) */
@media (max-width: 1024px) {
    .gr-cert-wrap { flex-direction: column; }
    .gr-cert-img-box, .gr-cert-text { width: 100%; }
    .gr-cert-img-box { margin-bottom: 40px; }
    
    /* 모바일에서는 패딩을 조금 줄여도 됨 */
    .benefit-swiper { padding-bottom: 100px !important; }
}
/* ==========================================================================
   7. COMPARE SECTION (Why 카드 ~ 합격률 ~ 상세 비교표)
   ========================================================================== */
.gr-det-compare { 
    padding: 100px 0; 
    background-color: #fff; 
    border-top: 1px solid #eee; 
}

/* 섹션 제목 포인트 컬러 (핑크) */
.gr-det-compare .gr-sec-title { 
    color: var(--gr-text-pink); 
}

/* --- [7-1] WHY SWIPER (카드 3개 영역) --- */
.gr-why-swiper {
    width: 100%;
    /* 상하 여백 50px로 카드가 커져도 안 잘리게 설정 */
    padding: 50px 20px !important; 
    overflow: visible !important; 
    box-sizing: border-box;
}

.gr-why-card {
    flex: 1;
    background: #f8fafc;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #eee;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* WHY 카드 호버 효과 */
.gr-why-card:hover {
    transform: translateY(-15px); /* 위로 떠오름 */
    background: #fff;
    border-color: var(--gr-point-blue); 
    box-shadow: 0 20px 40px rgba(0, 176, 255, 0.12); 
}

.gr-why-icon {
    font-size: 44px;
    margin-bottom: 25px;
    transition: transform 0.3s ease;
}

.gr-why-card:hover .gr-why-icon { transform: scale(1.1); }
.gr-why-card dt { font-size: 22px; font-weight: 800; color: #111; margin-bottom: 15px; }
.gr-why-card dd { font-size: 16px; color: #555; line-height: 1.7; word-break: keep-all; margin: 0; }

/* --- [7-2] PROCESS VS (검정형 vs 과정평가형 비교박스) --- */
.gr-process-vs { 
    margin: 80px 0; 
    display: flex; 
    flex-direction: column; 
    align-items: center; /* 섹션 내 모든 요소를 세로축 중앙 정렬 */
}

.gr-comp-sub-title { 
    font-size: 22px; 
    font-weight: 800; 
    color: #111; 
    margin-bottom: 40px; 
    display: flex; 
    align-items: center; 
    justify-content: center; /* 아이콘과 텍스트를 가로 중앙 정렬 */
    gap: 10px; 
    width: 100%; 
    text-align: center;
}

.gr-vs-container { 
    display: flex; 
    gap: 30px; 
    width: 100%; 
    justify-content: center; /* 박스들을 중앙으로 배치 */
}

/* 비교 박스 공통 스타일 */
.gr-vs-box { 
    flex: 1; 
    max-width: 520px; /* PC에서 박스가 너무 길어지지 않도록 너비 제한 */
    padding: 40px 30px; 
    border-radius: 25px; 
    border: 1px solid #eee; 
    position: relative; 
    display: flex;
    flex-direction: column;
}

/* 기존(검정형) 박스 스타일 */
.gr-vs-box.type-old { background: #fdfdfd; }
.gr-vs-box.type-old .gr-vs-badge { background: #94a3b8; }

/* 과정평가형 박스 스타일 (강조) */
.gr-vs-box.type-new { 
    background: #f0f9ff; 
    border-color: #bae6fd; 
    box-shadow: 0 10px 30px rgba(0, 176, 255, 0.05); 
}
.gr-vs-box.type-new .gr-vs-badge { background: var(--gr-point-blue); }

.gr-vs-badge { 
    display: inline-block; 
    align-self: flex-start; /* 배지는 왼쪽 정렬 유지 */
    padding: 6px 16px; 
    border-radius: 20px; 
    color: #fff; 
    font-size: 14px; 
    font-weight: 700; 
    margin-bottom: 20px; 
}

.gr-vs-desc { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 25px; text-align: left; }

/* 단계별 플로우 차트 */
.gr-step-flow { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    background: #fff; 
    padding: 25px 20px; 
    border-radius: 15px; 
    border: 1px solid #eee; 
    margin-top: auto; /* 박스 하단에 정렬되도록 함 */
}

.gr-step-flow .step { 
    font-size: 14px; 
    text-align: center; 
    color: #555; 
    font-weight: 600; 
    line-height: 1.4; 
}

.gr-step-flow .step.highlight { color: var(--gr-point-blue); font-weight: 800; }

.gr-step-flow .step.final { 
    color: #fff; 
    background: #333; 
    padding: 6px 12px; 
    border-radius: 8px; 
}

.type-new .gr-step-flow .step.final { background: var(--gr-point-blue); }

.gr-step-flow .arrow { color: #ccc; font-size: 14px; font-weight: bold; }

.gr-vs-warn { font-size: 14px; color: #ff4757; margin-top: 20px; text-align: center; font-weight: 500; }
.gr-vs-good { font-size: 14px; color: var(--gr-point-blue); margin-top: 20px; text-align: center; font-weight: 700; }
/* --- [7-3] CHART & TABLE (합격률 & 테이블) --- */
.gr-compare-content { display: flex; justify-content: space-between; gap: 40px; margin-top: 40px; }
.gr-compare-chart-box, .gr-compare-table-box { 
    width: 48%; background: #fff; border: 1px solid #eee; 
    padding: 40px; border-radius: 25px; box-shadow: 0 5px 25px rgba(0,0,0,0.03); 
}

/* 합격률 그래프 */
.gr-chart-row { margin-bottom: 30px; }
.gr-chart-info { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 15px; font-weight: 700; }
.gr-chart-value.text-blue { color: var(--gr-point-blue); font-size: 24px; }
.gr-chart-track { width: 100%; height: 18px; background: #f1f5f9; border-radius: 10px; position: relative; }
.gr-chart-bar { height: 100%; border-radius: 10px; transition: width 1.5s ease-out; }
.type-exam { background: #94a3b8; }
.type-process { background: var(--gr-point-blue); position: relative; }

.gr-bar-tag {
    position: absolute; right: 5px; top: -38px; background: #ff4757; color: #fff; 
    font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 25px; 
    white-space: nowrap; animation: bounce 2s infinite }

.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 bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* 비교 테이블 */
.gr-comp-table { width: 100%; border-collapse: collapse; font-size: 16px; margin-top: 10px; }
.gr-comp-table th, .gr-comp-table td { padding: 18px 10px; border-bottom: 1px solid #eee; text-align: center; vertical-align: middle; }
.gr-comp-table thead th { background: #f8fafc; font-weight: 700; color: #333; border-top: 2px solid #333; }
.gr-comp-table thead th.th-highlight { background: #e3f2fd; color: var(--gr-point-blue); }
.gr-comp-table tbody th { background: #fcfcfc; font-weight: 600; color: #555; border-right: 1px solid #eee; }
.gr-comp-table tbody td.td-highlight { background: #f0f9ff; color: var(--gr-point-blue); font-weight: 800; }

/* --- [7-4] PC 전용 레이아웃 보정 (1025px 이상) --- */
@media (min-width: 1025px) {
    .gr-why-points {
        display: flex !important;
        justify-content: space-between;
        gap: 30px;
        transform: none !important; 
    }
}

/* --- [7-5] 모바일 반응형 (1024px 이하) --- */
@media (max-width: 1024px) {
    .gr-vs-container, .gr-compare-content { flex-direction: column; gap: 20px; }
    .gr-vs-box, .gr-compare-chart-box, .gr-compare-table-box { width: 100%; padding: 30px 20px; }
    .gr-step-flow { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .gr-step-flow .step { width: 45%; margin-bottom: 5px; font-size: 13px; }
    .gr-step-flow .arrow { display: none; }
    .gr-comp-table { font-size: 14px; }
}
/* =========================================
   8. REVIEW SECTION (졸업생 후기)
   ========================================= */
.gr-review-section { padding: 0 0 100px; background: #fff; }
.gr-review-area { margin-bottom: 100px; overflow: hidden; width: 100%; }
.gr-review-header { font-size: 24px; font-weight: 800; margin-bottom: 30px; text-align: center; }
.gr-review-track-wrap { width: 100%; position: relative; }
.gr-review-track { display: flex; gap: 20px; width: max-content; animation: detMarquee 20s linear infinite; }
.gr-review-track:hover { animation-play-state: paused; }
.gr-review-card { width: 320px; background: #fff; padding: 25px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); flex-shrink: 0; }
.gr-rev-top { display: flex; justify-content: space-between; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.gr-rev-name { font-weight: 700; color: #333; }
.gr-rev-star { color: #fbc02d; font-weight: 700; }
.gr-rev-txt { font-size: 14px; color: #666; line-height: 1.5; height: 63px; overflow: hidden; margin-bottom: 15px; }
.gr-rev-course { font-size: 12px; color: var(--gr-point-blue); background: #e3f2fd; padding: 3px 8px; border-radius: 4px; }
@keyframes detMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* =========================================
   STICKY BAR (하단 고정)
   ========================================= */
.gr-sticky-bar {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: #fff; border-top: 1px solid #ddd;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1); z-index: 1000; padding: 15px 0;
}
.gr-sticky-flex { display: flex; justify-content: space-between; align-items: center; }
.gr-sticky-info { display: flex; align-items: center; gap: 15px; }
.gr-sticky-thumb img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; background-color: var(--gr-dark-blue); }
.gr-sticky-title { font-size: 18px; font-weight: 700; color: #111; display: block; margin-bottom: 5px; }
.gr-sticky-sub { display: flex; align-items: center; gap: 8px; }
.badge-date, .badge-dday {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px; /* 높이를 고정하여 크기를 완벽히 일치시킴 */
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 13px; /* 높이의 절반값으로 둥글게 유지 */
    box-sizing: border-box;
    white-space: nowrap;
}
.badge-date {
    color: var(--gr-point-blue);
    border: 1px solid var(--gr-point-blue);
    background: #fff;
}
.badge-dday {
    color: #fff;
    background: #ff1493;
    border: 1px solid #ff1493; /* 보더 두께까지 맞춰서 크기를 동일하게 정렬 */
}
.gr-sticky-btns { display: flex; align-items: center; gap: 10px; }
.gr-sticky-btns a {
    text-decoration: none; display: inline-block; padding: 10px 20px;
    border-radius: 30px; font-size: 15px; font-weight: 700;
    text-align: center; transition: 0.2s;
}
.btn-apply { background: var(--gr-point-blue); color: #fff !important; }
.btn-apply:hover { background: #0091ea; }
.btn-visit { background: #fff; border: 1px solid #ddd; color: #333; }
.btn-visit:hover { background: #f5f5f5; }
.gr-sticky-tel { font-size: 20px; font-weight: 800; color: #333; margin-left: 10px; }
.gr-wrapper a { text-decoration: none; color: inherit; }

/* =========================================
   SCROLL ANIMATION (복구된 원본 클래스)
   ========================================= */
.scroll-animate {
    opacity: 0; transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.2s; will-change: opacity, transform;
}
.scroll-animate.fade-up { transform: translateY(60px); }
.scroll-animate.slide-right { transform: translateX(100px); }
.scroll-animate.slide-left { transform: translateX(-100px); }
.scroll-animate.active { opacity: 1; transform: translate(0, 0) scale(1); }

/* ==========================================================================
   [UX UPGRADE] 스와이프 시 텍스트 선택 및 이미지 끌림 방지
   ========================================================================== */

.benefit-swiper {
    /*  커서 모양 변경 (선택사항: 손바닥 모양) */
    cursor: grab; 
}

/* 드래그 중일 때 커서 모양 (움켜쥔 손) */
.benefit-swiper:active {
    cursor: grabbing;
}




/* =========================================
   MOBILE RESPONSIVE (1024px 이하)
   ========================================= */
@media (max-width: 1024px) {
    .gr-det-hero-wrap, .gr-banner-flex, .gr-curriculum-content, .gr-cert-wrap, .gr-compare-content, .gr-why-points, .gr-vs-container, .gr-sticky-flex { 
        flex-direction: column; 
    }
    
    .gr-det-hero-text, .gr-det-hero-img, .gr-vision-img, .gr-vision-list, .gr-target-text, .gr-target-list, .gr-banner-text, .gr-banner-img-wrapper, .gr-curri-diagram, .gr-curri-steps, .gr-cert-img-box, .gr-cert-text, .gr-compare-chart-box, .gr-compare-table-box, .gr-sticky-info, .gr-sticky-btns {
        width: 100%; padding-right: 0;
    }

    /* 모바일 Swiper 활성화 스타일 */
    .gr-mobile-swiper { overflow: hidden; padding-bottom: 40px; }
    .gr-target-list, .gr-curri-steps, .gr-why-points { display: flex !important; } /* Flex 유지 */
    .swiper-slide { width: auto !important; height: auto !important; }

    .gr-det-hero, .gr-det-banner { padding: 40px 0; text-align: center; }
    .gr-det-vision, .gr-det-target, .gr-det-curriculum, .gr-det-cert-review, .gr-det-compare { padding: 60px 0; }
    .gr-det-title { font-size: 32px; }
    .gr-ncs-box { text-align: left; }
    .gr-diagram-line, .gr-step-flow .arrow, .gr-sticky-thumb, .gr-sticky-tel { display: none; }
    .gr-hero-info-list { flex-wrap: wrap; gap: 20px 0; }
    .gr-hero-info-list li { width: 50%; border-right: none; }
    .gr-vision-list { grid-template-columns: 1fr; }
    .gr-curri-diagram { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .gr-banner-img-wrapper { position: relative; height: 200px; margin-top: 30px; margin-right: 0 !important; border-radius: 20px; }
    .gr-step-flow { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .gr-step-flow .step { width: 45%; margin-bottom: 5px; }
    .gr-sticky-btns { justify-content: space-between; margin-top: 10px; }
    .gr-sticky-btns a { flex: 1; margin: 0 5px; }
    .swiper-pagination { bottom: 0 !important; position: relative; margin-top: 20px; }
}