/* =========================================================================
   이음이비인후과 — 진단 섹션 공통 CSS (cmn-diag)
   갱신: 2026-06-25
   변경 이력:
     · 기존 cmn-check 카드 스타일 제거 → 실제 페이지의 diag-section/diag-list 구조에 맞춤
     · [요청1] diag-section 에 블루 배경 박스 적용 (Figma 415:2239 네이비 톤)
     · [요청2] 하단 사진 갤러리를 Figma 415:2281 디자인으로 재구현
              (연하늘 배경 #eaf3f8 / 4컷 가로 / 높이 300px / radius 20px / gap 10px)
   적용 순서: hearing.css 뒤에 로드되어 헤딩 색상만 override (카드 스타일은 기존 유지)
   ========================================================================= */

:root{
  --diag-navy:#0f4c81;       /* 진단 섹션 블루 배경 */
  --diag-point:#00a8c6;      /* 영문 라벨(청록) */
  --diag-photo-bg:#eaf3f8;   /* 하단 갤러리 연하늘 배경 */
}

/* =========================================================================
   [요청1] 진단 섹션 — 블루 배경 박스
   ※ 헤딩(cmn-en-label / cmn-sec-title)은 네이비 위 가독성을 위해 색상만 반전.
     폰트 크기·자간 등 나머지는 기존 공통 헤딩 스타일을 그대로 사용.
   ========================================================================= */
.diag-section{
  background:var(--diag-navy);
  padding:clamp(48px,7vw,100px) clamp(20px,5vw,80px);
}
/* 박스 내부 콘텐츠 최대폭 중앙 정렬 */
.diag-section > *{/*max-width:1040px;*/margin-left:auto;margin-right:auto;}

/* 헤딩 색상 반전 (네이비 배경 대응) */
.diag-section .cmn-en-label{color:var(--diag-point);}
.diag-section .cmn-sec-title{color:#fff;}
.diag-section .cmn-vline{background:rgba(255,255,255,.45);}

/* =========================================================================
   [추가 2026-06-25] 진단 섹션 — 화이트 버전 (다른 페이지용 변형)
   사용법: <section class="diag-section diag-section--white reveal"> 처럼
          기본 diag-section 에 'diag-section--white' modifier 만 추가
   - 배경: 흰색 / 타이틀: #333 / 구분선: 회색
   - 영문 라벨(청록)은 흰 배경에서도 잘 보이므로 그대로 유지
   - 카드(diag-item)는 흰 배경에 묻히지 않게 연회색으로
   ========================================================================= */
.diag-section--white{background:#fff;}
.diag-section--white .cmn-sec-title{color:#333;}
.diag-section--white .cmn-vline{background:#ddd;}
.diag-section--white .diag-item{background:#f7f9fc;border-color:#e6ecf3;}

/* =========================================================================
   [요청2] 하단 사진 갤러리 — Figma 415:2281
   마크업: <section class="cmn-photo-sec"><ul class="cmn-photo-grid">…</ul></section>
   특징: flex 균등분할 → 4장=1x4, 2장=1x2 자동 / 높이 300px / radius 20px
   ========================================================================= */
.cmn-photo-sec{
  background:var(--diag-photo-bg);
  padding:clamp(40px,7vw,100px) clamp(20px,5vw,80px);
}
.cmn-photo-grid{
  max-width:1520px;margin:0 auto;padding:0;list-style:none;
  display:flex;gap:10px;
}
/* [수정 2026-06-25] 사진 세로형(height 300px 고정) → 가로형(aspect-ratio 5/4)으로 변경
   사유: 첨부 최종 디자인이 가로로 약간 긴 직사각형(landscape) 형태
   기존: .cmn-photo-item{height:300px} / img{height:100%} */
.cmn-photo-item{flex:1 1 0;min-width:0;margin:0;}
.cmn-photo-item img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px;display:block;
}

/* ===== 반응형 ===== */
@media (max-width:900px){
  .cmn-photo-grid{flex-wrap:wrap;}
  .cmn-photo-item{flex:1 1 calc(50% - 5px);}             /* 2열 (비율 유지) */
}
@media (max-width:480px){
  .cmn-photo-item{flex:1 1 100%;}                        /* 1열 (비율 유지) */
}

/* =========================================================================
   [추가 2026-06-25] 사진 1장씩 등장 모션 (reveal + stagger)
   - 마크업: 각 <li class="cmn-photo-item reveal"> 처럼 reveal 클래스 추가
   - 트리거: 기존 페이지의 IntersectionObserver 가 .reveal → .active 를 부여
   - 효과: 아래(40px)에서 위로 + 페이드인 / 0.15초 간격 좌→우 순차 등장
   - 셀렉터 구체성을 높여(.cmn-photo-grid …reveal) 기존 .reveal 모션을 덮어씀
   ========================================================================= */
.cmn-photo-grid .cmn-photo-item.reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.cmn-photo-grid .cmn-photo-item.reveal.active{
  opacity:1;transform:translateY(0);
}
.cmn-photo-grid .cmn-photo-item.reveal:nth-child(2){transition-delay:.15s;}
.cmn-photo-grid .cmn-photo-item.reveal:nth-child(3){transition-delay:.30s;}
.cmn-photo-grid .cmn-photo-item.reveal:nth-child(4){transition-delay:.45s;}

/* 모션 최소화를 선호하는 사용자 배려 (접근성) */
@media (prefers-reduced-motion: reduce){
  .cmn-photo-grid .cmn-photo-item.reveal{opacity:1;transform:none;transition:none;}
}