/* ===== dear 전용 — 공통 스타일: cmm/css/main-dept-shared.css 참조 ===== */
/* ============================================================
   04_dear 전임상실험부 메인 페이지(001_main.html) 전용 스타일
   - cmm 공통 CSS 미수정 원칙에 따라 메인 페이지 override는 본 파일에 격리
   - body.page-dear-main scope으로 다른 부서 메인에 영향 없음
   ============================================================ */

/* ===================================
   주요업무 3패널 카드 (PDF 수정요청 20260514)
   - 카드 한 줄 보장 + 글씨 키움
   =================================== */
body.page-dear-main .main-showcase__panel-title,
body.page-dear-main .main-showcase__panel:hover .main-showcase__panel-title {
    font-size: var(--fs-stat);
    white-space: nowrap;
}

/* ===================================
   Hero 인증 영역
   - 인증마크 이미지 수령 후 .main-hero__cert-mark을 <img>로 교체 예정
   =================================== */
body.page-dear-main .main-hero__certs-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1440px;
    padding: 0 var(--space-10);
    margin-bottom: var(--space-12);
}

body.page-dear-main .main-hero__certs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-6);
}

body.page-dear-main .main-hero__cert {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--color-white);
    text-decoration: none;
    width: 200px;
    height: 200px;
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    justify-content: center;
    gap: var(--space-2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

body.page-dear-main .main-hero__cert:hover {
    transform: scale(1.06) translateY(-6px);
    background: var(--color-primary-700);
    border-color: var(--color-primary-700);
    box-shadow: 0 8px 32px rgba(0, 102, 204, 0.4);
}

body.page-dear-main .main-hero__cert-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    opacity: 0.9;
    margin-bottom: var(--space-1);
}

body.page-dear-main .main-hero__cert-mark svg {
    width: 48px;
    height: 48px;
}

/* 패널 배경이미지 — 인라인 style="background-image" 대체 */
.main-showcase__panel--animal      { background-image: url('../../cmm/images/pc0040625158.jpg'); }
.main-showcase__panel--nonclinical { background-image: url('../../cmm/images/pc0040643051.jpg'); }
.main-showcase__panel--iacuc       { background-image: url('../../cmm/images/td0131t307305.jpg'); }
.main-research__panel--equipment   { background-image: url('../../cmm/images/td0131t233546.jpg'); }
.main-research__panel--space       { background-image: url('../../cmm/images/td01830000268.jpg'); }

body.page-dear-main .main-hero__cert-name {
    font-family: 'GmarketSans', var(--font-family);
    font-size: var(--fs-block);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--ls-tight);
}

/* 전체 인증 아래 공통 캡션 — BRI의 연간보고서 레이블과 동일한 패턴 */
body.page-dear-main .main-hero__cert-desc {
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin-top: var(--space-3);
}

@media (max-width: 767px) {
  /* 패널 타이틀 32px + nowrap이 main-dept-shared 모바일 규칙보다 specificity가 높아 덮어씀 — 모바일에서 명시적 재보정 */
  body.page-dear-main .main-showcase__panel-title,
  body.page-dear-main .main-showcase__panel:hover .main-showcase__panel-title {
    font-size: var(--fs-body);
    white-space: normal;
  }
  /* 인증 영역 좌우 패딩 40px → 20px (좁은 화면 여백 확보) */
  body.page-dear-main .main-hero__certs-wrap {
    padding: 0 var(--space-5);
  }
}