/* ===================================
   SNUH 연구실험부 메인 페이지
   - 03_clab 전용 (CLAB 사이트 고유 스타일)
   - 공통 스타일은 main-dept.css 참조
   - colors.md CSS 변수 기준
   =================================== */

/* ===================================
   NOTE: Font Face, .main-section-title, .main-hero 전체,
         .main-quicklinks, .main-research 전체,
         .main-showcase(공통), .footer-banner-bar,
         .footer .dept-select/btn, 반응형 공통 규칙,
         09_hrpp 슬로건 회전기, prefers-reduced-motion 등
         → main-dept.css에 동일 정의 포함.
         이 파일에서는 CLAB 전용 규칙만 유지.
   =================================== */

/* ===================================
   헤더 투명 오버레이 (메인 전용) — CLAB 전용
   (main-dept.css 헤더 블록과 구조 차이:
    .header.is-scrolled 단독 vs dept의
    .header.is-scrolled, body.menu-open .header 묶음)
   =================================== */
/* 유틸리티 바: 투명 + 흰색 텍스트 */
.top-utility-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  background: rgba(0, 0, 0, 0.1);
  border-bottom: none;
}

.top-utility-bar .utility-link {
  color: rgba(255, 255, 255, 0.7);
}

.top-utility-bar .utility-link:hover {
  color: var(--color-white);
}

/* 스크롤 시 원래 스타일 복원 */
.top-utility-bar .utility-item + .utility-item::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.5);
  vertical-align: middle;
  margin-right: var(--space-3);
}

.top-utility-bar.is-scrolled .utility-item + .utility-item::before {
  background: var(--color-gray-400);
}

body:has(.gnb:hover) .top-utility-bar .utility-item + .utility-item::before {
  background: var(--color-gray-400);
}

.top-utility-bar.is-scrolled {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.top-utility-bar.is-scrolled .utility-link {
  color: var(--color-gray-600);
}

.top-utility-bar.is-scrolled .utility-link:hover {
  color: var(--color-gray-900);
}

.header {
  position: fixed;
  top: var(--utility-bar-height, 40px);
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* 투명 상태: 모든 텍스트/아이콘 흰색 (대비 보장) */
.header .gnb-link {
  color: var(--color-white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.header .gnb-link::after {
  background-color: var(--color-white);
}

.header .logo-image--color {
  display: none;
}

.header .logo-image--white {
  display: block;
}

.header .btn-lang {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
}

.header .btn-lang.active {
  color: var(--color-white);
}

.header .btn-search .icon,
.header .btn-menu .icon {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.header .btn-search:hover,
.header .btn-menu:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.header .btn-search:active {
  background-color: rgba(255, 255, 255, 0.25);
}

/* 스크롤 시 원래 hover 복원 */
.header.is-scrolled .btn-search:hover,
.header.is-scrolled .btn-menu:hover {
  background-color: var(--color-surface);
}

.header.is-scrolled .btn-search:active {
  background-color: var(--color-primary-100);
}

.header .lang-divider {
  color: rgba(255, 255, 255, 0.4);
}

/* 메가메뉴 열림 상태: 흰색 배경 + 어두운 텍스트 */
.header:has(.gnb:hover) {
  background: var(--color-white);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.header:has(.gnb:hover) .gnb-link {
  color: var(--color-gray-900);
  text-shadow: none;
}

.header:has(.gnb:hover) .gnb-item:hover .gnb-link {
  color: var(--color-primary-900);
}

.header:has(.gnb:hover) .gnb-link::after {
  background-color: var(--color-primary-900);
}

.header:has(.gnb:hover) .logo-image--color {
  display: block;
}

.header:has(.gnb:hover) .logo-image--white {
  display: none;
}

.header:has(.gnb:hover) .btn-lang {
  color: var(--color-gray-500);
}

.header:has(.gnb:hover) .btn-lang.active {
  color: var(--color-gray-900);
}

.header:has(.gnb:hover) .btn-search .icon,
.header:has(.gnb:hover) .btn-menu .icon {
  filter: none;
}

.header:has(.gnb:hover) .lang-divider {
  color: var(--color-gray-400);
}

/* GNB hover 시 utility bar도 전환 */
body:has(.gnb:hover) .top-utility-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

body:has(.gnb:hover) .top-utility-bar .utility-link {
  color: var(--color-gray-600);
}

body:has(.gnb:hover) .top-utility-bar .utility-link:hover {
  color: var(--color-gray-900);
}

/* 모바일 메뉴 열림: 유틸리티 바 원래 회색 배경 + 다크 텍스트 복원 */
body.menu-open .top-utility-bar {
  background: var(--utility-bar-bg);
  border-bottom: 1px solid var(--utility-bar-border);
}

body.menu-open .top-utility-bar .utility-link {
  color: var(--utility-text-default);
}

body.menu-open .top-utility-bar .utility-link:hover {
  color: var(--utility-text-hover);
}

body.menu-open .top-utility-bar .utility-item + .utility-item::before {
  background: var(--utility-divider-color);
}

/* 스크롤 상태: 흰색 배경 + 원래 다크 텍스트 (단독 — dept와 구조 다름) */
.header.is-scrolled {
  background: var(--color-white);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid var(--color-border);
}

.header.is-scrolled .gnb-link {
  color: var(--color-gray-900);
  text-shadow: none;
}

.header.is-scrolled .gnb-item:hover .gnb-link {
  color: var(--color-primary-900);
}

.header.is-scrolled .gnb-link::after {
  background-color: var(--color-primary-900);
}

.header.is-scrolled .logo-image--color,
body.menu-open .header .logo-image--color {
  display: block;
}

.header.is-scrolled .logo-image--white,
body.menu-open .header .logo-image--white {
  display: none;
}

.header.is-scrolled .btn-lang {
  color: var(--color-gray-500);
}

.header.is-scrolled .btn-lang.active {
  color: var(--color-gray-900);
}

.header.is-scrolled .btn-search .icon,
.header.is-scrolled .btn-menu .icon {
  filter: none;
}

.header.is-scrolled .lang-divider {
  color: var(--color-gray-400);
}

/* ===== clab 전용 추가 ===== */
/* ============================================================
   clab-main.css
   03_clab / 001_main 페이지 전용
   - HERO KPI 3개 (3,200 / 580 / 420)
   - 13개 실험실 카드 그리드 (4-5-4)
   - 연구실험부 소개 섹션
   - News+ 우측 '실험실 찾기' 카드
   공통 컴포넌트(.main-hero, .main-showcase, .main-newsplus) 미수정,
   페이지 전용 변형 클래스만 추가.
   ============================================================ */

/* ====================================================
   13개 실험실 카드 영역 — 어두운 배경 섹션
   .main-showcase 컴포넌트 안에 .main-showcase--clab 변형 적용
   ==================================================== */
.main-showcase--clab {
    background: linear-gradient(135deg, var(--color-primary-950) 0%, var(--color-primary-900) 100%);
    padding: var(--space-20) 0;
}

.main-showcase--clab .main-showcase__panels {
    flex-direction: column;
    gap: var(--space-4);
    padding: 0 var(--space-4);
}

/* 13개 카드 row 행: 4 / 5 / 4 — 카드 폭 고정 + 가운데 정렬 */
.main-showcase__panels-row--lab {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    height: auto;
}

/* 아이콘 카드 변형 — L 사이즈 (232 × 200, 아이콘 72) */
/* 1280 viewport에서 5개 행 wrap 방지: 5×232 + 4×16 = 1224 ≤ 컨테이너 1248px(padding 16px 양쪽) */
.main-showcase__panel--icon {
    flex: 0 0 232px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-4);
    min-height: 200px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: var(--transition);
}

/* 기본 .main-showcase__panel의 ::before(어두운 overlay) 무력화 */
.main-showcase__panel--icon::before {
    display: none;
}

/* hover 시 flex 폭 명시적 고정 (공통 .main-showcase__panel:hover { flex: 2.5 } 무력화) */
.main-showcase__panel--icon:hover {
    flex: 0 0 232px;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.main-showcase__panel-icon-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    opacity: 1;
}

/* 기본 + hover 동일 폰트 크기 (공통 .panel:hover .panel-title { font-size: var(--fs-title-sm) } 무력화) */
.main-showcase__panel--icon .main-showcase__panel-title,
.main-showcase__panel--icon:hover .main-showcase__panel-title {
    font-family: 'GmarketSans', var(--font-family);
    font-size: var(--fs-title-md);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: var(--ls-tight);
    word-break: var(--word-break-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ====================================================
   연구실험부 소개 섹션 (전체 폭)
   - 배경: 연구실 사진 + 어두운 그라디언트 overlay
   - 위 어두운 파랑 카드와 명확한 텍스처 차이, 아래 흰색 News+와 명도 차이
   ==================================================== */
.main-clab-intro {
    position: relative;
    background-image: url('../../cmm/images/td0131t233546.jpg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
    padding: var(--space-25) var(--space-10);
    isolation: isolate;
}

.main-clab-intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(2, 43, 115, 0.92) 0%, rgba(0, 0, 0, 0.78) 100%);
    z-index: -1;
}

.main-clab-intro__container {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 3fr;
    gap: var(--space-20);
    align-items: start;
}

.main-clab-intro__heading {
    font-family: 'GmarketSans', var(--font-family);
    font-size: var(--fs-title-lg);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-white);
    letter-spacing: var(--ls-tight);
    margin: 0;
    padding-left: var(--space-4);
    border-left: 4px solid var(--color-primary-300);
}

.main-clab-intro__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.main-clab-intro__paragraph {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    word-break: var(--word-break-base);
    letter-spacing: var(--ls);
}

/* 마지막 문단(결의 문구) 살짝 강조 */
.main-clab-intro__paragraph--accent {
    color: var(--color-white);
    font-weight: 500;
}

/* ====================================================
   News+ 우측 '실험실 찾기' 카드 — 기존 .main-newsplus__media 그대로 사용
   (페이지 전용 추가 룰 없음 — HTML만 교체)
   ==================================================== */

/* ====================================================
   반응형 (clab 전용 선택자만)
   ==================================================== */
@media (max-width: 1023px) {
    .main-showcase__panel--icon {
        flex: 0 0 220px;
        min-height: 180px;
        padding: var(--space-6) var(--space-3);
    }
    .main-showcase__panel--icon:hover {
        flex: 0 0 220px;
    }
    .main-showcase__panel-icon-img {
        width: 60px;
        height: 60px;
    }
    .main-clab-intro__container {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

@media (max-width: 767px) {
    .main-showcase--clab {
        padding: var(--space-12) 0;
    }
    .main-showcase__panel--icon {
        flex: 0 0 calc(50% - 8px);
        min-height: 130px;
        padding: var(--space-4) var(--space-2);
    }
    .main-showcase__panel--icon:hover {
        flex: 0 0 calc(50% - 8px);
    }
    .main-showcase__panel-icon-img {
        width: 48px;
        height: 48px;
    }
    .main-showcase__panel--icon .main-showcase__panel-title {
        font-size: var(--fs-small);
    }
    .main-clab-intro {
        padding: 60px var(--space-6);
    }
    .main-clab-intro__heading {
        font-size: var(--fs-title-sm);
    }
    .main-clab-intro__body {
        gap: var(--space-5);
    }
    .main-clab-intro__paragraph {
        font-size: var(--fs-body);
        line-height: var(--lh-body);
    }
}