/* ============================================================
 * overview.css — 기업개요(overview) 페이지 전용
 * contents.css 이후 로드되는 오버라이드 파일.
 * (공유 contents.css는 강화-C 중복 selector 차단으로 직접 수정 불가 → 분리)
 * head.page.sub.php에서 $pageName === 'overview' 일 때만 로드 → 타 페이지 0 영향
 * 폰트는 전 요소 14px floor + clamp 반응형. 데스크탑 max는 원본 그대로 보존.
 * ============================================================ */

:root {
    /* 레이아웃 토큰 */
    --ov-title-gap: clamp(1.5rem, 5vw, 3rem);
    --ov-logo-w: clamp(7.5rem, 40vw, 20rem);       /* 로고 폭: 약 120 ~ 320 */
    --ov-logo-mb: clamp(2.5rem, 9vw, 9.125rem);    /* 로고 하단 여백: 약 40 ~ 146 */
    --ov-box-max: 27rem;                           /* 적층 시 company-box 상한 */
    --ov-pill-w: clamp(5rem, 10vw, 10rem);         /* pill 라벨 폭: 약 80 ~ 160 */
    --ov-cert-gap: clamp(0.75rem, 4vw, 1.875rem);  /* 인증서 간격: 약 12 ~ 30 */
    --ov-bullet-y: 0.57em;                         /* 리스트 점 첫줄 중앙 오프셋 */

    /* 폰트 토큰 — 전부 14px(0.875rem) floor, 데스크탑 max는 원본 변수와 동일 */
    --ov-fs-value: clamp(0.875rem, 2.5vw, 1.5rem);       /* 14 ~ 24 — company-box 값/라벨 */
    --ov-fs-label: clamp(0.875rem, 2.5vw, 1.5rem);       /* 14 ~ 24 (원본 lg) — HISTORY/CERTIFICATE/LOCATION */
    --ov-fs-body: clamp(0.875rem, 2vw, 1.25rem);         /* 14 ~ 20 (원본 md) — 리스트/인증서명/주소/badge */
    --ov-fs-bi: clamp(0.875rem, 1.4369vw, 1.875rem);     /* 14 ~ 30 (원본 product-title-store) — Business Interval */
    --ov-fs-section: clamp(0.9375rem, 2.5vw, 2.1875rem); /* 15 ~ 35 (원본 sub-title) — 연혁 섹션제목 */
    --ov-fs-h4: clamp(0.875rem, 1.5vw, 1rem);            /* 14 ~ 16 — 사업장 안내(원본 미반응형 16 보정) */
}

/* ---------- 타이틀: company-box ---------- */
/* 값 텍스트가 흰 pill 라벨 아래로 깔려 잘리던 문제 — offset을 pill 폭에 맞추고 flex:1로 남은 영역 차지 */
.company-box p {
    flex: 1;
    margin-left: var(--ov-pill-w);
    text-align: center;
    font-size: var(--ov-fs-value);
    word-break: keep-all;
}

/* 라벨 = 값 동일 크기(원본 디자인 복원) */
.company-box span {
    width: var(--ov-pill-w);
    font-size: var(--ov-fs-value);
}

/* ---------- 라벨군(14~24) ---------- */
.overview-history-title span:nth-child(2),
.overview-certificate-title p,
.overview-location-title p {
    font-size: var(--ov-fs-label);
}

/* ---------- 본문군(14~20) ---------- */
.overview-history-desc ul>li,
.overview-certificate-item p,
.overview-location-item p,
.overview-location-sub-title p {
    font-size: var(--ov-fs-body);
}

/* ---------- 연혁 개별 ---------- */
/* 연도 끝자리 분리 갭 제거 — "202" + "4" → "2024" 연속 */
.overview-history-desc span:nth-child(2) {
    margin-left: 0;
}

.overview-history-title span:nth-child(1) {
    font-size: var(--ov-fs-section);
}

.overview-history-img p {
    font-size: var(--ov-fs-bi);
}

/* 리스트 점(::before) 세로중앙 — 고정 top이 폰트 따라 어긋남 → 첫줄 중앙(em) 정렬 */
.overview-history-desc ul>li::before {
    top: var(--ov-bullet-y);
    transform: translateY(-50%);
}

/* ---------- 사업장 안내 제목 ---------- */
.overview-location-title h4 {
    font-size: var(--ov-fs-h4);
}

/* ---------- 로고 ---------- */
/* 레거시 로고 강제폭(우선순위 선언) 우회용 전용 클래스 (overview.php 에서 class 변경) */
.overview-company-logo {
    display: flex;
    align-items: center;
    margin-bottom: var(--ov-logo-mb);
}

.overview-company-logo img {
    width: var(--ov-logo-w);
}

/* ≤1200: 로고/상호 블록과 우측 그래픽을 세로 적층 */
@media (max-width: 1200px) {
    .overview-title-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ov-title-gap);
    }

    .company-box {
        width: min(100%, var(--ov-box-max));
        margin-inline: auto;
    }

    /* 인증서 4-up — 고정 gap이 좁은 폭에서 overflow → gap 연속 + gap 차감 폭 */
    .overview-certificate-items {
        gap: var(--ov-cert-gap);
    }

    .overview-certificate-item {
        width: calc((100% - 3 * var(--ov-cert-gap)) / 4);
    }
}

/* ≤480: 인증서 2x2 + 연혁 타임라인 심볼 숨김 */
@media (max-width: 480px) {
    .overview-certificate-items {
        flex-wrap: wrap;
    }

    .overview-certificate-item {
        width: calc((100% - var(--ov-cert-gap)) / 2);
    }

    /* 타임라인 빨강 심볼이 좁은 레일을 넘어 리스트 텍스트 침범 → 모바일 숨김 */
    .overview-history-line img {
        display: none;
    }
}