/* ============================================================
   clab-common.css
   03_clab 사이트 페이지 공유 룰 (페이지 전용)
   - figure 기본 스타일
   - 페이지 공통 helper
   공통 컴포넌트(common.css, components.css 등) 미수정
   ============================================================ */

/* ── 이미지 figure (메인이미지·장비 이미지·다이어그램 등) ── */
.clab-figure {
    margin: var(--gap-form-divider) 0 var(--gap-card-icon-text);
    text-align: center;
}

.clab-figure img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
}

.clab-figure figcaption {
    margin-top: var(--gap-layout-h3-body);
    font-size: var(--fs-small);
    color: var(--color-gray-700);
}

/* ── 이미지 미입수 placeholder (전문 사진촬영 후 교체 예정) ──
   .clab-figure--empty: figure 안에 img 대신 placeholder div 사용
   .clab-figure--ratio-square / --ratio-43 / --ratio-169: 사용처별 비율 변형
   실제 사진 입수 시 placeholder div → <img>로 교체 (modifier 제거) */
.clab-figure--empty .clab-figure__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-layout-h3-body);
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--color-gray-100);
    border: 1px dashed var(--color-gray-400);
    border-radius: var(--radius-sm);
    color: var(--color-gray-600);
}

.clab-figure--empty.clab-figure--ratio-square .clab-figure__placeholder {
    aspect-ratio: 1 / 1;
}

.clab-figure--empty.clab-figure--ratio-169 .clab-figure__placeholder {
    aspect-ratio: 16 / 9;
}

.clab-figure--empty .clab-figure__placeholder-icon {
    width: 48px;
    height: 48px;
    color: var(--color-gray-400);
}

.clab-figure--empty .clab-figure__placeholder-text {
    font-size: var(--fs-small);
    color: var(--color-gray-600);
}

/* ============================================================
   메인이미지 슬라이더 (실험실 intro 페이지 — 메인 페이지 hero 슬라이더 톤)
   - .clab-slider: 외곽 컨테이너 (aspect-ratio 16:9, 둥근 모서리)
   - .clab-slider__slides: 슬라이드 스택 영역
   - .clab-slider__slide: 개별 슬라이드 (opacity transition으로 페이드)
   - .clab-slider__slide.is-active: 활성 슬라이드
   - .clab-slider__arrow--prev / --next: 좌우 화살표
   - .clab-slider__dots: 페이지네이션 닷
   ============================================================ */

.clab-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: var(--gap-layout-tab-content) 0 var(--gap-card-icon-text);
    border-radius: var(--radius-md);
    overflow: hidden;
    /* 발주처 요청(2026-07-13): 여백 흰색 — 세로형 이미지의 좌우 여백이 흰 배경에 묻혀 티 안 나게 */
    background-color: var(--color-white);
    /* 발주처 요청(2026-07-20, 수정요청4 B6b): 흰 배경/여백이 흰 페이지와 묻혀 경계가 모호 → 테두리로 프레임 경계 표시(전 실험실 공통) */
    border: 1px solid var(--color-gray-300);
}

.clab-slider__slides {
    position: absolute;
    inset: 0;
}

.clab-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 600ms ease-in-out;
    pointer-events: none;
}

.clab-slider__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.clab-slider__slide img {
    width: 100%;
    height: 100%;
    /* 발주처 요청(2026-07-13): 세로 크롭 방지 — 프레임(16:9)은 고정하되 이미지는 무크롭 전체 노출 */
    object-fit: contain;
    display: block;
}

.clab-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-gray-900);
    z-index: 2;
    transition: background-color 200ms ease;
}

.clab-slider__arrow:hover,
.clab-slider__arrow:focus-visible {
    background-color: rgba(255, 255, 255, 1);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.clab-slider__arrow--prev { left: var(--space-4); }
.clab-slider__arrow--next { right: var(--space-4); }

.clab-slider__arrow svg {
    width: 24px;
    height: 24px;
}

.clab-slider__dots {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--gap-button-group);
    z-index: 2;
}

.clab-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
    transition: background-color 200ms ease, transform 200ms ease;
}

.clab-slider__dot.is-active {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.25);
}

.clab-slider__dot:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================================
   실험실 찾기 (021_lab_finder)
   검색 폼·결과 카드·empty state 는 공용 컴포넌트 사용
   (.board-search / .card-grid--3 / .card / .tag / .empty-state).
   페이지 전용은 검색 하단 hint 문구와 결과 카운트 정도만 보강.
   ============================================================ */

.lab-finder__hint {
    color: inherit;
}

.lab-finder__count {
    font-size: var(--fs-small);
    color: var(--color-gray-600);
    font-weight: var(--fw-regular);
    margin-left: var(--gap-inline-icon);
}

/* 카드 상단 대표 이미지 — 공용 .card 안에 들어가는 페이지 전용 슬롯.
   .lab-finder__card-image--icon: 현재 SVG 아이콘 (object-fit:contain + 연한 배경)
   .lab-finder__card-image--photo: 추후 실사진 교체 시 (object-fit:cover) */
.lab-finder__card-image-link {
    display: block;
    line-height: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-gray-100);
}

.lab-finder__card-image {
    width: 100%;
    aspect-ratio: 16 / 8;
    display: block;
    border-radius: var(--radius-md);
}

.lab-finder__card-image--icon {
    object-fit: contain;
    background-color: transparent;
    padding: var(--space-8);
    filter: brightness(0) invert(63%); /* ~color-gray-500 (#9CA3AF), 배경 gray-100보다 짙음 */
}

.lab-finder__card-image--photo {
    object-fit: cover;
}

/* ===================================
   Process Steps — 박스 내 텍스트 좌측 정렬 변형
   · 061 메디아실 사용절차, 131 조직혈청은행 분양절차 등 그리드 절차에서 사용
   · 기본 .process-steps__text(가운데 정렬)를 박스 좌측 정렬로 override
   =================================== */
.process-steps__card .process-steps__text--left {
    align-items: flex-start;
    text-align: left;
    width: 100%;
}

/* ===========================================
   010 소개 — info-cards 5개 항목 3+2 가운데 정렬 grid
   docx의 "연구실험부 주요 기능" 5개 항목을 균형있게 배치.
   6컬럼 grid에서 각 카드는 2칸씩(span 2) 차지 →
   1행: 3카드(col 1-2, 3-4, 5-6), 2행: 2카드 가운데 정렬(col 2-3, 4-5).
   각 카드 폭이 충분해 텍스트 줄바꿈이 자연스러움.
   cmm sub-page.css의 .info-cards(기본 3컬럼)는 그대로 두고
   03_clab에 한정해서만 5col 변형 추가.
   =========================================== */
.info-cards--5col {
    grid-template-columns: repeat(6, 1fr);
}
.info-cards--5col > .info-card:nth-child(1) { grid-column: 1 / span 2; }
.info-cards--5col > .info-card:nth-child(2) { grid-column: 3 / span 2; }
.info-cards--5col > .info-card:nth-child(3) { grid-column: 5 / span 2; }
.info-cards--5col > .info-card:nth-child(4) { grid-column: 2 / span 2; }
.info-cards--5col > .info-card:nth-child(5) { grid-column: 4 / span 2; }

@media (max-width: 1023px) {
    .info-cards--5col {
        grid-template-columns: repeat(2, 1fr);
    }
    .info-cards--5col > .info-card:nth-child(n) { grid-column: auto; }
    .info-cards--5col > .info-card:nth-child(5) { grid-column: 1 / span 2; }
}
@media (max-width: 767px) {
    .info-cards--5col {
        grid-template-columns: 1fr;
    }
    .info-cards--5col > .info-card:nth-child(n) { grid-column: auto; }
    .info-cards--5col > .info-card:nth-child(5) { grid-column: auto; }
}

/* ===========================================
   012 조직도 — Lv2 3개 노드 폭 통일
   docx 그림: 연구실험팀(가운데)에서 13개로 분기되는 "삼지창" 트렁크.
   cmm .org-chart__item(flex:1 + column + ::before vertical line)은 그대로 두고
   노드 자체의 min-width만 통일 → 가로 분기 라인의 좌우 박스 outline 정렬.
   =========================================== */
.org-chart__list--3col > .org-chart__item > .org-node--lv2 {
    min-width: 200px;
}

/* ===========================================
   012 조직도 — Core Lab Lv4 그리드
   Core Lab 노드 아래 13개 실험실을 5열 row-major로 배치
   org-node--lv4 컴포넌트 그대로 사용
   =========================================== */
.clab-lab-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
    width: 100%;
}

/* lv4를 <a>로 쓸 때 링크 기본 스타일 리셋 */
.clab-lab-grid__item {
    text-decoration: none;
    color: inherit;
}
.clab-lab-grid__item:hover,
.clab-lab-grid__item:focus-visible {
    color: var(--color-primary-700);
}

@media (max-width: 1023px) {
    .clab-lab-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 767px) {
    .clab-lab-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================================
   다중 행 표 modifier (.table--multiline) — opt-in (G1 잘림 방지)
   - 공용 components.css의 .table 전역 규칙은 table-layout:fixed +
     .table tbody td{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
     라, 칸을 넘는 긴 본문이 "…"로 잘린다(목록형 표 기준 설계).
   - 담당자(012)·층별시설(013)·출입방법(014)·분양안내(015)·이용가능항목(016)·
     장비 사양표처럼 셀에 장문이 들어가는 표에 이 클래스를 부여해 줄바꿈한다.
   - .table.table--multiline 으로 specificity를 전역(.table tbody td)보다 높여
     확실히 우선 적용. 이 클래스가 없는 표에는 무영향. 공용 components.css 무수정.
   - 참고: nstri-common.css §4와 동형(사이트별 opt-in).
   =========================================== */
.table.table--multiline tbody td,
.table.table--multiline tbody th {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: keep-all;
    overflow-wrap: break-word;
    vertical-align: top;
    line-height: var(--lh-body);
}

/* ===========================================
   분석항목 FAQ — 답변 'A.' 마커 교정 (clab 전용 opt-in)
   - 문제: 공용 components.css `.accordion__content p::before`(content:'A. ')가
     답변의 "모든 <p>마다" A.를 붙여, 문단이 여러 개면 A. 중복 /
     답변이 <ol>·<ul>로 시작하면 A. 누락.
   - 해결: FAQ 아코디언(aria-label="자주 묻는 질문") 스코프에서만 per-<p> 마커를 끄고,
     콘텐츠의 "첫 요소"에만 A.를 1개 부여. (013·016·091 등 비-FAQ .accordion--separated에
     누수되지 않도록 aria-label로 한정 — 적대검증 결함 반영)
   - specificity: 아래 두 규칙은 .accordion[aria-label]를 더해
     공용(.accordion__content p::before)보다 높고, clab-common.css가
     components.css 뒤에 로드되므로 확실히 우선 적용. 공용 components.css 무수정.
   =========================================== */
.accordion[aria-label="자주 묻는 질문"] .accordion__content p::before {
    content: none;
}
.accordion[aria-label="자주 묻는 질문"] .accordion__content > :first-child::before {
    content: 'A. ';
    font-weight: var(--fw-bold);
    color: var(--color-gray-700);
    margin-right: var(--space-1);
}
/* 발주처 요청: 답변 글자크기 default(본문 토큰)로 키움 */
.accordion[aria-label="자주 묻는 질문"] .accordion__content {
    font-size: var(--fs-body);
}

/* ===========================================
   발주처 요청: 이용안내 다운로드 버튼(절차카드 내 outline 버튼) 표시 폭 통일.
   btn-group wrap 허용 + 각 다운로드 버튼 동일 flex 기준폭으로 나란히 정렬.
   파란 '바로가기'(btn--primary)는 대상 아님(outline만).
   =========================================== */
.process-steps__card .btn-group { flex-wrap: wrap; }
.process-steps__card .btn-group .btn--outline.btn--sm {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: flex-start;
}

/* 발주처 요청: 이용신청 info-card 내 다운로드 버튼(outline)도 크기 통일.
   info-card는 좁아 카드 폭(100%)으로 맞추고, 카드(겉 박스)와 버튼 사이 간격 확보.
   :has로 다운로드 버튼이 있는 btn-group만 대상(컨설팅 primary 버튼 카드는 무영향). */
.info-card .btn-group:has(.btn--outline.btn--sm) {
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    width: 100%;
}
.info-card .btn-group .btn--outline.btn--sm {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: flex-start;
}