@charset "UTF-8";

/* ==========================================================================
   [GREEN AUTO RENEWAL 2026 - FINAL STYLESHEET (PC BASE)]
   * Description: 그린자동차직업전문학교 2026 리뉴얼 메인 스타일 (PC 기준)
   * Prefix: 'gr-'
   ========================================================================== */

/* ==========================================================================
   1. RESET & COMMON (공통 설정)
   ========================================================================== */
html, body { margin: 0; padding: 0; }

.gr-body * { box-sizing: border-box; margin: 0; padding: 0; }
ul.gr-ul, li.gr-li { list-style: none; }
a.gr-link, .gr-a { text-decoration: none; color: inherit; transition: 0.3s; }
img.gr-img { max-width: 100%; display: block; }
button.gr-btn { cursor: pointer; font-family: 'GmarketSans', sans-serif; }

/* 폰트 및 기본 바디 설정 */
body.gr-body { 
    font-family: 'GmarketSans', sans-serif; 
    color: #333; 
    overflow-x: hidden; 
    padding-top: 80px; 
    background-color: #fff;
}

/* 구글 아이콘 정렬 보정 */
.material-symbols-outlined { vertical-align: middle; }

/* 공통 컨테이너 */
.gr-inner { width: 1300px; max-width: 95%; margin: 0 auto; position: relative; }

/* 공통 섹션 타이틀 & 버튼 */
.gr-section-title { 
    display: block !important; font-size: 42px; font-weight: 900; color: #111;
    line-height: 1.5 !important; height: auto !important; margin-bottom: 30px !important;
    padding-top: 0 !important; padding-bottom: 0 !important; position: relative; z-index: 2;
}
.gr-section-desc { 
    display: block !important; font-size: 18px; color: #666;
    line-height: 1.8 !important; height: auto !important; margin-bottom: 60px !important;
    word-break: keep-all; position: relative; z-index: 2;
}
.gr-btn-area { text-align: center; margin-top: 40px; }


/* 2. 상단 띠 배너 */
.gr-top-banner { 
    position: fixed; top: 0; left: 0; width: 100%; height: 80px; 
    background: #abcfff; z-index: 3000; 
    display: flex; align-items: center; justify-content: center; 
    transition: transform 0.3s; border-bottom: 1px solid rgba(0,0,0,0.05);
    will-change: transform; transform: translateZ(0); 
}
.gr-top-banner.gr-hide { transform: translateY(-100%); }
.gr-banner-inner { display: flex; justify-content: space-between; align-items: center; width: 1300px; max-width: 95%; }

/* 배너 내부 요소 */
.gr-bn-left { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.gr-bn-title { font-size: 16px; color: #fff; font-weight: 500; margin-bottom: 4px; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
.gr-bn-row { display: flex; align-items: center; gap: 8px; }
.gr-badge-date { background: #00b0ff; color: #fff; padding: 2px 12px; border-radius: 20px; font-weight: bold; font-size: 18px; }
.gr-text-open { color: #fff; font-weight: bold; font-size: 20px; }
.gr-icon-bell { width: 40px; animation: grRing 2s infinite; }
@keyframes grRing { 
    0%, 50%, 100% { transform: rotate(0deg); } 
    10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 
    30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 
}

/* 배너 타이머 */
.gr-timer-group { display: flex; align-items: center; gap: 5px; }
.gr-d-day-label { font-size: 30px; color: #fff; font-weight: 900; margin-right: 10px; }
.gr-time-box { background: #fff; color: #333; font-weight: 900; font-size: 24px; width: 45px; height: 45px; border-radius: 8px; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.gr-colon { font-size: 20px; color: #fff; font-weight: bold; }
.gr-unit { font-size: 22px; color: #fff; font-weight: bold; margin-right: 10px; margin-left: 3px; }

/* 배너 버튼 */
.gr-bn-right { display: flex; align-items: center; gap: 10px; }
.gr-btn-apply { background: #00b0ff; color: #fff; padding: 10px 25px; border-radius: 30px; font-weight: bold; font-size: 18px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-decoration: none; }
.gr-btn-apply:hover { background: #008ecc; transform: translateY(-2px); }
.gr-btn-close { background: none; border: none; font-size: 28px; color: #fff; cursor: pointer; }


/* 3. HEADER (헤더 & GNB) */
.gr-header { position: relative; width: 100%; background: #fff; border-bottom: 1px solid #eee; z-index: 2000; }
.gr-header-top { height: 100px; border-bottom: 1px solid #f5f5f5; }
.gr-header-inner { display: flex; justify-content: space-between; align-items: center; height: 100%; }

.gr-logo-area { display: flex; align-items: center; }
.gr-logo-img { height: 70px; width: auto; transition: 0.3s; }
.gr-logo-img:hover { transform: scale(1.05); }

/* ==========================================================================
   [PC FIX] 모바일 전용 요소 숨김 처리
   * PC 화면에서 모바일 메뉴가 거대하게 노출되는 것을 방지합니다.
   ========================================================================== */
.gr-mobile-util-container,
.gr-mobile-call-btn, 
.gr-mobile-menu-btn, 
.gr-gnb-close-btn { 
    display: none !important; 
}

/* [PC 유틸리티 메뉴] */
.gr-util-area { display: flex; align-items: center; height: 100%; }
.gr-util-group { display: flex; gap: 25px; align-items: center; }

.gr-util-item { 
    display: flex; flex-direction: column; align-items: center; gap: 5px; 
    color: #555; font-size: 13px; font-weight: 500; text-decoration: none; transition: 0.3s; 
    position: relative; cursor: pointer;
}
/* 아이콘 이미지 크기 설정 */
.gr-util-icon-img { width: 28px; height: 28px; object-fit: contain; transition: 0.3s; }

.gr-util-item:hover .gr-util-text { color: #00b0ff; font-weight: bold; }
.gr-util-item:hover .gr-util-icon-img { transform: scale(1.1); }

/* [PC 관리자 드롭다운 메뉴] */
.gr-util-dropdown {
    position: absolute;
    top: 100%; /* 아이콘 바로 아래 */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 120px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 10px 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 100;
}
/* 관리자 메뉴에 마우스 올리면 드롭다운 표시 */
.gr-has-dropdown:hover .gr-util-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.gr-util-dropdown li a {
    display: block;
    padding: 8px 0;
    text-align: center;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    transition: 0.2s;
}
.gr-util-dropdown li a:hover {
    background-color: #f8f9fa;
    color: #00b0ff;
    font-weight: bold;
}

.gr-mobile-call-btn, .gr-mobile-menu-btn, .gr-gnb-close-btn { display: none !important; }


/* GNB */
.gr-gnb-wrap { height: 60px; display: block; background: #fff; }
.gr-gnb-list { display: flex; height: 100%; justify-content: space-between; align-items: center; list-style: none; }
.gr-gnb-item { position: relative; height: 100%; display: flex; align-items: center; flex: 1; justify-content: center; }
.gr-gnb-link { font-size: 18px; font-weight: bold; color: #333; display: block; width: 100%; text-align: center; padding: 18px 0; text-decoration: none; }
.gr-gnb-item:hover .gr-gnb-link { color: #00b0ff; }
.gr-gnb-item::after { content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 3px; background: #00b0ff; transition: 0.3s; }
.gr-gnb-item:hover::after { width: 100%; }
.gr-submenu { position: absolute; top: 60px; left: 50%; transform: translateX(-50%) translateY(-10px); width: 160px; background: #fff; border: 1px solid #eee; box-shadow: 0 5px 15px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transition: 0.3s; z-index: 100; border-radius: 0 0 10px 10px; overflow: hidden; list-style: none; }
.gr-gnb-item:hover .gr-submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.gr-submenu li a { display: block; padding: 12px 0; font-size: 15px; color: #555; text-align: center; border-bottom: 1px solid #f9f9f9; text-decoration: none; }
.gr-submenu li a:hover { background: #f5f5f5; color: #00b0ff; font-weight: bold; }


/* 4. MAIN VISUAL */
.gr-main-visual { width: 100%; height: 700px; position: relative; background: #eee; overflow: hidden; }
.gr-slide-track { display: flex; height: 100%; transition: transform 0.5s ease; }
.gr-slide-item { min-width: 100%; height: 100%; position: relative; overflow: hidden; }
.gr-slide-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-slide-item.active img { animation: grScaleAni 10s linear infinite alternate; }
.gr-slide-track.gr-paused .gr-slide-item.active img { animation-play-state: paused; }
@keyframes grScaleAni { 0% { transform: scale(1); } 100% { transform: scale(1.10); } }

.gr-slide-controls { position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; align-items: center; background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); padding: 8px 25px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.3); z-index: 50; }
.gr-ctrl-btn { background: none; border: none; color: #fff; display: flex; align-items: center; cursor: pointer; }
.gr-ctrl-btn span { font-size: 24px; }
.gr-dots-wrap { display: flex; gap: 8px; }
.gr-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: 0.3s; }
.gr-dot.active { background: #fff; width: 25px; border-radius: 10px; }


/* 5. QUICK MENU */
.gr-quick-menu { position: relative; margin-top: -70px; z-index: 20; margin-bottom: 0; pointer-events: none; }
.gr-quick-box { display: flex; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius: 20px; padding: 40px 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); align-items: center; border: 1px solid rgba(255, 255, 255, 0.6); transform: translateZ(0); pointer-events: auto; animation: grFadeInUp 1s ease-out forwards; opacity: 0; }
@keyframes grFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.gr-quick-left { padding-right: 50px; border-right: 1px solid #eee; margin-right: 30px; min-width: 250px; }
.gr-quick-desc { font-size: 20px; line-height: 1.4; color: #333; margin-bottom: 10px; }
.gr-quick-desc strong { color: #00b0ff; font-weight: 900; font-size: 24px; }
.gr-quick-phone { font-size: 28px; font-weight: 900; color: #003399; display: flex; align-items: center; gap: 5px; text-decoration: none; }
.gr-quick-list { display: flex; justify-content: space-between; flex-grow: 1; list-style: none; }
.gr-quick-list li { text-align: center; position: relative; }
.gr-quick-list a { display: flex; flex-direction: column; align-items: center; gap: 15px; text-decoration: none; }
.gr-icon-circle { width: 80px; height: 80px; border-radius: 50%; background: #f8f9fa; border: 1px solid #eee; display: flex; /* flex로 변경하여 이미지 중앙 정렬 */ justify-content: center; align-items: center; transition: 0.3s; }
.gr-icon-circle img { width: 40px; height: 40px; object-fit: contain; transition: 0.3s; }
.gr-icon-circle span { display: none; }
.gr-menu-name { font-size: 16px; font-weight: bold; color: #333; }
.gr-quick-list li:hover .gr-icon-circle { background: #00b0ff; border-color: #00b0ff; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 176, 255, 0.3); }
.gr-quick-list li:hover .gr-icon-circle img { filter: brightness(0) invert(1); /* 호버 시 아이콘 흰색으로 변경 */transform: scale(1.1); }
.gr-quick-list li:hover .gr-icon-circle span { color: #fff; }
.gr-quick-list li:hover .gr-menu-name { color: #00b0ff; }
.gr-badge-red { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: red; color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 12px; font-weight: bold; animation: grBounce 1s infinite alternate; white-space: nowrap; box-shadow: 0 2px 5px rgba(255,0,0,0.3); z-index: 2; }
@keyframes grBounce { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(-5px); } }


/* 6. STATS SECTION */
.gr-stats-section { position: relative; width: 100%; height: 475px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; background-color: #001133; margin-top: -140px; padding-top: 180px; z-index: 1; }
.gr-stats-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,17,51,0.7), rgba(0,17,51,0.7)), url('../images/bg_stats.png') no-repeat center center/cover; opacity: 0.6; transform: scale(1); transition: transform 3s cubic-bezier(0.25, 1, 0.5, 1); z-index: 1; }
.gr-stats-section.active .gr-stats-bg { transform: scale(1.1); }
.gr-stats-content { position: relative; z-index: 2; text-align: center; color: #fff; width: 100%; }
.gr-stats-title { font-size: 48px; font-weight: 900; margin-bottom: 60px; opacity: 0; transform: translateY(50px); transition: all 0.8s ease-out; }
.gr-stats-list { display: flex; justify-content: space-between; width: 100%; max-width: 1200px; margin: 0 auto; list-style: none; padding: 0 20px; }
.gr-stat-item { position: relative; width: 25%; text-align: center; opacity: 0; transform: translateY(50px); transition: all 0.8s ease-out; list-style: none; }
.gr-stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 40px; background-color: rgba(255,255,255,0.2); }
.gr-stat-label { display: block; font-size: 18px; margin-bottom: 15px; color: rgba(255,255,255,0.8); font-weight: 400; }
.gr-stat-number { display: block; font-size: 42px; font-weight: 900; line-height: 1; font-family: 'Interop', sans-serif; }
.gr-stats-section.active .gr-stats-title { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.gr-stats-section.active .gr-stat-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.gr-stats-section.active .gr-stat-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.gr-stats-section.active .gr-stat-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.gr-stats-section.active .gr-stat-item:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.9s; }


/* 7. COURSE SECTION */
.gr-course-section { padding: 80px 0; background-color: #f9f9f9; }
.gr-section-header { text-align: center; margin-bottom: 50px; }
.gr-course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.gr-course-card { display: block; position: relative; width: 100%; height: 500px; background-color: #000; border-radius: 15px; overflow: hidden; text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,0.1); opacity: 0; transform: translateY(50px); transition: transform 0.6s ease-out, opacity 0.6s ease-out, box-shadow 0.3s ease; }
.gr-course-card.active { opacity: 1; transform: translateY(0); }
.gr-course-card:hover { transform: translateY(-10px) !important; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
.gr-course-card:nth-child(1) { transition-delay: 0.1s; }
.gr-course-card:nth-child(2) { transition-delay: 0.2s; }
.gr-course-card:nth-child(3) { transition-delay: 0.3s; }
.gr-course-card:nth-child(4) { transition-delay: 0.4s; }
.gr-card-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; z-index: 0; }
.gr-course-card:hover .gr-card-bg { transform: scale(1.1); }
.gr-card-tags { position: absolute; top: 20px; left: 20px; z-index: 2; }
.gr-tag { display: inline-block; font-size: 12px; font-weight: bold; padding: 6px 12px; border-radius: 20px; margin-right: 5px; backdrop-filter: blur(5px); }
.gr-tag.gr-blue { background-color: #00b0ff; color: #fff; }
.gr-tag.gr-white { background-color: rgba(255,255,255,0.3); color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.gr-card-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 25px; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%); transition: background 0.3s ease; }
.gr-course-card:hover .gr-card-content { background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 80%, transparent 100%); }
.gr-card-title { font-size: 22px; font-weight: bold; color: #fff; margin-bottom: 0; line-height: 1.4; transition: transform 0.3s ease; }
.gr-card-hidden { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(20px); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.gr-course-card:hover .gr-card-hidden { max-height: 100px; opacity: 1; transform: translateY(0); margin-top: 15px; }
.gr-course-card:hover .gr-card-title { transform: translateY(-5px); }
.gr-card-period { font-size: 14px; color: rgba(255,255,255,0.8); }


/* 8. 취업현황 */
.gr-job-section { 
    padding: 100px 0; 
    background-color: #0B1120; /* Deep Navy Background (2번 컨셉 통일) */
    position: relative; 
    overflow: hidden; 
}

/* 배경 블롭 (Glow Effect) */
.gr-job-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.gr-blob { position: absolute; filter: blur(80px); opacity: 0.4; border-radius: 50%; will-change: transform; }
.gr-blob-1 { width: 500px; height: 500px; background: radial-gradient(circle, #3b82f6, transparent); top: -100px; left: -100px; }
.gr-blob-2 { width: 600px; height: 600px; background: radial-gradient(circle, #8b5cf6, transparent); bottom: -150px; right: -150px; }

/* 탭 버튼 스타일 업그레이드 */
.gr-job-tabs { display: flex; justify-content: center; gap: 20px; margin-bottom: 40px; position: relative; z-index: 1; }
.gr-job-tab-btn { 
    font-size: 20px; 
    font-weight: 700; 
    color: rgba(255,255,255,0.5); 
    background: rgba(255,255,255,0.05); /* 유리 버튼 베이스 */
    border: 1px solid rgba(255,255,255,0.1);
    padding: 15px 40px; 
    border-radius: 50px; /* 둥근 버튼 */
    cursor: pointer; 
    transition: all 0.3s ease; 
    backdrop-filter: blur(5px);
}
.gr-job-tab-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    transform: translateY(-2px);
}
.gr-job-tab-btn.active { 
    color: #fff; 
    background: rgba(255, 20, 147, 0.8); /* 마젠타 포인트 */
    border-color: #ff1493; 
    box-shadow: 0 0 20px rgba(255, 20, 147, 0.4);
}

.gr-job-content { display: none; }
.gr-job-content.active { display: block; }

/* [★핵심] PC 윈도우 글래스모피즘 적용 */
.gr-job-window { 
    width: 100%; 
    height: 500px; 
    overflow: hidden; 
    position: relative; 
    z-index: 1; 
    
    /* 유리 효과 (Glassmorphism) */
    background: rgba(255, 255, 255, 0.03); 
    backdrop-filter: blur(20px); /* 블러 강도 강화 */
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1); /* 얇고 세련된 테두리 */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* 상단 빛 반사 효과 */
    border-radius: 24px; 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* 깊이감 있는 그림자 */
    
    transform: translateZ(0); 
}

.gr-job-track { display: flex; flex-direction: column; will-change: transform; }

/* 리스트 아이템 스타일 */
.gr-job-item { 
    display: flex; 
    align-items: center; 
    padding: 0; 
    height: 100px; /* 높이 살짝 조정 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
    background-color: transparent; 
    transition: 0.3s; 
}
.gr-job-item:hover { 
    background-color: rgba(255, 255, 255, 0.05); /* 호버 시 살짝 밝아짐 */
}

/* 셀 내부 스타일 */
.gr-job-cell { 
    padding: 0 30px; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    border-right: 1px solid rgba(255, 255, 255, 0.05); /* 구분선도 투명하게 */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    color: #fff; 
}
.gr-job-cell:last-child { border-right: none; }

/* 로고 영역 */
.gr-job-logo-box { width: 200px; justify-content: center; flex-shrink: 0; padding: 0 30px !important; }
.gr-job-logo-img { 
    width: 100%; 
    max-height: 50px; 
    object-fit: contain; 
    background-color: #fff; 
    padding: 8px 12px; 
    border-radius: 8px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

/* 텍스트 스타일 */
.gr-job-company { width: 22%; font-size: 20px; font-weight: 700; color: #fff; }
.gr-job-course { flex: 1; font-size: 16px; color: #94A3B8; } /* 서브 텍스트 컬러 */
.gr-job-name { width: 120px; font-size: 18px; font-weight: 500; justify-content: center; color: #E2E8F0; }
.gr-job-date { width: 140px; font-size: 15px; color: rgba(255,255,255,0.4); justify-content: center; }

/* 롤링 애니메이션 */
@keyframes grVerticalRolling { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -50%, 0); } }
.gr-rolling-ani { animation: grVerticalRolling 40s linear infinite; } 
.gr-job-window:hover .gr-rolling-ani { animation-play-state: paused; }

/* 전체보기 버튼 (글래스 스타일) */
.gr-btn-view-all { 
    display: inline-block; 
    padding: 16px 40px; 
    border-radius: 50px; 
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff; 
    font-size: 18px; 
    font-weight: 700; 
    text-decoration: none; 
    transition: 0.3s; 
    backdrop-filter: blur(10px);
}
.gr-btn-view-all:hover { 
    background: #ff1493; 
    border-color: #ff1493; 
    box-shadow: 0 0 25px rgba(255, 20, 147, 0.6);
    transform: translateY(-2px);
}

/* 9. NEWS SECTION (3D Deck) */
.gr-news-section { padding: 120px 0; background-color: #f8f9fa; overflow: hidden; }
.gr-deck-container { position: relative; width: 100%; height: 600px; display: flex; justify-content: center; align-items: center; }
.gr-deck-slider { width: 100%; height: 100%; padding: 40px 0; overflow: visible !important; }
.gr-deck-slider .swiper-slide { width: 800px !important; height: 500px !important; background-color: #000; border-radius: 24px; display: flex; flex-direction: row; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3); will-change: transform, opacity; backface-visibility: hidden; transform: translateZ(0); }
.gr-deck-slider .swiper-slide-active { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255,255,255,0.1); }

.gr-slide-image-area { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
.gr-slide-bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-slide-text-box { width: 40%; height: 100%; position: absolute; right: 0; top: 0; z-index: 2; background-color: rgba(0, 0, 0, 0.65); padding: 40px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255,255,255,0.1); }
.gr-news-badge { color: #ff1493; font-size: 13px; font-weight: 800; margin-bottom: 20px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.gr-news-title { color: #fff; font-size: 32px; font-weight: 800; line-height: 1.3; margin-bottom: 20px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.gr-news-desc { color: rgba(255,255,255,0.8); font-size: 16px; line-height: 1.6; margin-bottom: 40px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

.gr-btn-more-circle { width: 50px; height: 50px; border-radius: 50%; background-color: #ff1493; color: #fff; font-size: 12px; font-weight: bold; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 40px; right: 40px; box-shadow: 0 5px 15px rgba(255, 20, 147, 0.4); transition: 0.3s; z-index: 10; }
.gr-deck-slider .swiper-slide-active .gr-btn-more-circle:hover { transform: scale(1.1); background-color: #fff; color: #ff1493; }

.gr-deck-controls { position: absolute; bottom: 40px; right: 40px; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 30px; background: none; pointer-events: auto; }
.gr-pagination { position: static !important; width: auto !important; transform: none !important; font-family: 'Montserrat', sans-serif; color: rgba(0,0,0,0.4); font-weight: 600; font-size: 16px; display: flex; align-items: baseline; gap: 8px; }
.gr-pagination .swiper-pagination-current { color: #ff1493; font-size: 30px; font-weight: 900; line-height: 1; }
.gr-pagination-separator { font-size: 18px; color: #ccc; margin: 0 2px; }

.gr-btn-prev, .gr-btn-next { position: static !important; margin: 0 !important; width: 40px; height: 40px; background-color: transparent; border: none; cursor: pointer; opacity: 0.6; transition: 0.3s; display: flex; justify-content: center; align-items: center; color: transparent; }
.gr-btn-prev::after, .gr-btn-next::after { display: none !important; content: none !important; }
.gr-btn-prev { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23333333'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18' /%3E%3C/svg%3E") no-repeat center/contain; }
.gr-btn-next { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23333333'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3' /%3E%3C/svg%3E") no-repeat center/contain; }
.gr-btn-prev:hover, .gr-btn-next:hover { opacity: 1; transform: scale(1.1); }
.gr-btn-prev:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23ff1493'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18' /%3E%3C/svg%3E"); transform: translateX(-5px); }
.gr-btn-next:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23ff1493'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3' /%3E%3C/svg%3E"); transform: translateX(5px); }


/* ==========================================================================
   10. FACILITIES (PC: 10vw - 80vw - 10vw Layout)
   ========================================================================== */
.gr-facility-section { 
    padding: 100px 0; 
    background: #f5f7fa; 
    text-align: center; 
    overflow: hidden; 
}

.gr-facility-slider-wrap { 
    position: relative; 
    width: 100%; 
    height: 650px; /* 높이 확보 */
    margin: 0 auto; 
    padding-bottom: 0; 
    display: flex;
    align-items: center; /* 슬라이드 수직 중앙 정렬 */
}

.gr-facility-track { 
    display: flex; 
    align-items: center; 
    /* gap은 JS에서 계산하므로 CSS에서는 제거하거나 최소화 */
    gap: 0; 
    will-change: transform; 
    height: 100%;
}

/* [개별 카드 스타일] */
.gr-facility-item { 
    /* [핵심] 중앙 80vw 차지 */
    min-width: 80vw; 
    height: 600px; 
    position: relative; 
    border-radius: 20px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    margin: 0 10px; /* 슬라이드 간격 */
    
    /* [비활성 상태 스타일] 작고 흐리게 */
    transform: scale(0.85); 
    opacity: 0.4; 
    filter: brightness(0.5) blur(2px); 
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
    z-index: 1;
}

/* [활성 상태 스타일] 크고 선명하게 */
.gr-facility-item.active { 
    transform: scale(1); 
    opacity: 1; 
    filter: brightness(1) blur(0); 
    z-index: 10; 
    box-shadow: 0 30px 60px rgba(0,0,0,0.4); 
}

.gr-fac-bg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* [PC 텍스트 박스 - 기본 스타일] */
.gr-fac-content { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    padding: 60px; 
    text-align: left; 
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); 
    color: #fff; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
    opacity: 0; /* 비활성 카드는 텍스트 숨김 */
    transition: opacity 0.4s ease;
}

.gr-facility-item.active .gr-fac-content {
    opacity: 1; /* 활성 카드만 텍스트 보임 */
}

.gr-fac-badge { display: inline-block; background: #00b0ff; color: #fff; font-size: 14px; font-weight: 700; padding: 6px 14px; border-radius: 50px; margin-bottom: 20px; width: fit-content; }
.gr-fac-content h3 { font-size: 42px; font-weight: 800; margin-bottom: 15px; color: #fff; line-height: 1.2; }
.gr-fac-content p { font-size: 20px; color: rgba(255, 255, 255, 0.9); line-height: 1.6; white-space: normal; word-break: keep-all; }

/* [컨트롤러 - PC] */
.gr-fac-controls { 
    position: absolute; 
    bottom: 40px; /* 위치 조정 */
    left: 50%; 
    transform: translateX(-50%); 
    display: flex; 
    align-items: center; 
    gap: 30px; 
    z-index: 20;
}
.gr-fac-btn { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.6); transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.gr-fac-btn span { font-size: 40px; font-weight: 300; }
.gr-fac-btn:hover { color: #fff; transform: scale(1.1); }
.gr-fac-counter { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; color: rgba(255,255,255,0.8);}
.gr-current { font-size: 28px; font-weight: 900; color: #ff1493; }
.gr-divider { color: rgba(255,255,255,0.5); font-weight: 300; }
.gr-total { color: #fff; font-weight: 700; }

/* [시설 섹션 전용 - 전체보기 버튼 색상 반전] 
   배경이 밝으므로 버튼을 진하게 변경 */
.gr-facility-section .gr-btn-view-all {
    color: #555;                 /* 글자색: 진한 회색 */
    border-color: #ccc;          /* 테두리: 연한 회색 */
    background: #fff;            /* 배경: 흰색 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.gr-facility-section .gr-btn-view-all:hover {
    background: #ff1493;         /* 호버 시: 마젠타 */
    color: #fff;                 /* 호버 시: 흰색 글자 */
    border-color: #ff1493;
    box-shadow: 0 10px 20px rgba(255, 20, 147, 0.3);
    transform: translateY(-3px);
}



/* 10-1. YOUTUBE SECTION */
.gr-youtube-section { padding: 80px 0; background: #fff; }
.gr-youtube-grid { display: flex; justify-content: space-between; gap: 20px; }
.gr-youtube-item { width: 32%; position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); background: #000; transition: transform 0.3s ease; }
.gr-youtube-item:hover { transform: translateY(-5px); }
.gr-youtube-item iframe { width: 100%; height: 100%; aspect-ratio: 16 / 9; display: block; }


/* 11. AWARD TROPHY SECTION */
.gr-award-section { padding: 50px 0; background-color: #0f172a; overflow: hidden; }
.gr-trophy-wrapper { width: 100%; margin-top: 30px; position: relative; overflow: hidden; }
.gr-trophy-track { display: flex; width: max-content; will-change: transform; animation: grRollingLeft 40s linear infinite; padding-top: 100px; padding-bottom: 50px; }
.gr-trophy-track:hover { animation-play-state: paused; }
@keyframes grRollingLeft { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } }

.gr-trophy-item { width: 200px; flex-shrink: 0; margin-right: 40px; position: relative; transition: transform 0.3s ease; }
.gr-trophy-item:hover { transform: translateY(-10px); }
.gr-trophy-img-area { position: absolute; top: -55px; left: 50%; transform: translateX(-50%); width: 110px; height: 110px; z-index: 10; display: flex; justify-content: center; align-items: center; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3)); }
.gr-trophy-img-area img { width: 100%; height: 100%; object-fit: contain; }
.gr-trophy-content { padding: 70px 20px 30px; text-align: center; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); border-radius: 20px; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; transition: box-shadow 0.3s ease; }
.gr-trophy-item:hover .gr-trophy-content { box-shadow: 0 20px 50px rgba(0,0,0,0.5); background: rgba(255, 255, 255, 0.25); }
.gr-award-divider { width: 40px; height: 1px; background-color: rgba(255, 255, 255, 0.3); margin: 10px 0; }
.gr-award-title { font-size: 18px; font-weight: 900; color: #fff; margin-bottom: 5px; line-height: 1.3; word-break: keep-all; }
.gr-award-type { display: block; font-size: 16px; font-weight: bold; color: #39ff14; margin-bottom: 5px; }
.gr-award-agency { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-bottom: 5px; font-weight: 500; }
.gr-award-desc { font-size: 14px; color: rgba(255, 255, 255, 0.9); font-weight: bold; }


/* 12. 푸터 */
.gr-footer { background-color: #222; color: #999; padding: 60px 0; margin-top: 0; }
.gr-footer-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #444; padding-bottom: 20px; margin-bottom: 30px; }
.gr-footer-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.gr-footer-links a { color: #ccc; font-weight: bold; font-size: 15px; }
.gr-footer-links a:hover { color: #fff; text-decoration: underline; }
.gr-footer-sns { display: flex; gap: 15px; }
.gr-footer-sns img { width: 30px; height: 30px; filter: grayscale(100%); transition: 0.3s; }
.gr-footer-sns img:hover { filter: none; }
.gr-footer-bottom { display: flex; align-items: flex-start; gap: 40px; }
.gr-footer-info p { margin-bottom: 8px; font-size: 14px; line-height: 1.6; }
.gr-copyright { margin-top: 20px; font-size: 13px; color: #666; }


/* 13. MODAL POPUP */
.gr-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.gr-modal.active { opacity: 1; visibility: visible; }
.gr-modal-box { position: relative; background-color: #fff; width: 800px; max-width: 90%; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); overflow: hidden; transform: translateY(30px); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); z-index: 2; }
.gr-modal.active .gr-modal-box { transform: translateY(0); }
.gr-modal-header { background-color: #00b0ff; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; }
.gr-modal-title-area { display: flex; align-items: center; gap: 15px; width: 90%; }
.gr-modal-status-badge { background-color: #fff; color: #00b0ff; padding: 5px 10px; border-radius: 12px; font-size: 14px; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.gr-modal-title { color: #fff; font-size: 20px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-modal-close-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 0; }
.gr-modal-close-btn span { font-size: 30px; }
.gr-modal-body { padding: 30px; }
.gr-modal-subtitle { font-size: 18px; font-weight: bold; color: #222; margin-bottom: 15px; border-bottom: 2px solid #333; padding-bottom: 10px; }
.gr-curriculum-list { max-height: 400px; overflow-y: auto; padding: 5px;}
.gr-modal-course-link {display: flex; 
    flex-direction: column; /* 위아래 배치 */
    align-items: flex-start; 
    gap: 8px; /* 윗줄과 아랫줄 간격 */
    
    background-color: #f8f9fa; 
    padding: 18px 25px; 
    border-radius: 12px; 
    text-decoration: none; 
    border: 1px solid #eee; 
    margin-bottom: 12px; 
    transition: 0.2s;
}
.gr-modal-course-link:hover { background-color: #fff; 
    border-color: #00b0ff; 
    box-shadow: 0 5px 15px rgba(0, 176, 255, 0.1);
    transform: translateY(-2px); 
}

/* 윗줄: 뱃지와 과정명 */
.gr-course-info-top {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}


.gr-sub-title { font-size: 17px; 
    font-weight: 700; 
    color: #333; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-status-badge { font-size: 13px; 
    font-weight: 800; 
    padding: 4px 10px; 
    border-radius: 6px; 
    color: #fff; 
    flex-shrink: 0;
 }

 .gr-course-info-bot {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 14px;
}

.icon-cal { 
    font-size: 16px; 
    color: #999;
}

.gr-course-date {
    font-weight: 500;
    color: #555;
    letter-spacing: 0.5px; /* 숫자 가독성 */
}


.gr-status-badge.recruiting { background-color: #00b0ff; }
.gr-status-badge.progress { background-color: #94a3b8; }

/* 뉴스 줌 모달 */
.gr-news-zoom-box { background: #fff; max-width: 900px; }
.gr-zoom-full-img { width: 100%; height: auto; display: block; border-radius: 10px; }
.gr-news-zoom-body { padding: 20px; }
.gr-news-header { background-color: #fff; color: #333; border-bottom: 1px solid #eee; }
.gr-news-header .gr-modal-title, .gr-news-header .gr-modal-close-btn { color: #333; }


/* ==========================================================================
   [PC SAFETY] 모바일 전용 요소 강제 숨김
   * 모바일 JS나 CSS가 PC 화면에 영향을 주는 것을 방지합니다.
   ========================================================================== */
@media (min-width: 769px) {
    /* 모바일 유튜브 컨트롤러 숨김 */
    .gr-yt-controls { display: none !important; }
    
    /* 혹시 모를 모바일 스타일 초기화 (PC 그리드 복구) */
    .gr-youtube-grid {
        display: flex !important; /* PC는 가로 나열 */
        padding-top: 0 !important;
        height: auto !important;
        flex-direction: row !important;
    }
    .gr-youtube-item {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        width: 32% !important; /* PC 3등분 */
        pointer-events: auto !important;
    }
}

/* ==========================================================================
   [PC RESPONSIVE FIX] 노트북 및 태블릿 구간 대응
   * 화면이 1300px보다 작아질 때 네비게이션이 넘치지 않도록 조절
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1300px) {
    
    /* 1. 컨테이너 여백 확보 */
    .gr-inner {
        width: 100%;
        padding: 0 30px; /* 양옆 여백을 조금 더 줌 */
    }

    /* 2. GNB 메뉴 폰트 및 간격 축소 */
    .gr-gnb-link {
        font-size: 15px;      /* 18px -> 15px로 축소 */
        padding: 18px 10px;   /* 터치 영역 유지하되 간격 축소 */
        letter-spacing: -0.5px; /* 자간을 좁혀서 공간 확보 */
    }

    /* 3. 로고 크기 살짝 조절 (선택사항) */
    .gr-logo-img {
        height: 55px; /* 70px -> 55px */
    }
}

/* 화면이 더 좁은 구간 (태블릿 세로 등 ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .gr-gnb-link {
        font-size: 14px;      /* 폰트 더 축소 */
        padding: 18px 5px;    /* 간격 최소화 */
    }
    
    .gr-util-group {
        gap: 15px; /* 유틸 메뉴 간격도 좁힘 */
    }
}