/*
[POSH 회사소개 인증현황 전용 스타일 전체 파일 구조]
public/company/cert/company_cert.css    - 인증현황 전용 스타일
page/site/company/company_cert_view.php - 인증현황 화면에서 사용
public/company/cert/                    - 인증현황 문서 이미지

20260402 T1745
- 2단계 public 파일 선생성 작업입니다.
- 아직 상세 디자인 확정 전이므로 파일명과 경로만 먼저 고정했습니다.

20260423 T1040
- 사용자가 제공한 실제 인증 문서 이미지를 기준으로, 인증현황 페이지를 회사소개 인사말 페이지 톤에 맞춰 재작성했습니다.
- 배경은 장식형 월드맵/그라데이션 대신 흰색 기반으로 정리하고, 내부 카드는 약한 그림자와 연한 경계선으로만 분리했습니다.
- 인증사 로고를 별도로 쓰지 않고, 문서 이미지 카드와 텍스트 정보 중심으로 화면을 구성했습니다.

20260423 T1608
- 인증현황 페이지 노출 방식을 개별 문서 카드형이 아니라 사용자가 최종 확정한 통이미지 3장 방식으로 변경했습니다.
- 기존 카드/grid/doc-frame 계열 스타일은 아래 as-is 주석으로 보존하고, 실제 노출은 company_cert_scene_01.webp ~ 03.webp 전용 스타일로 전환했습니다.
- 흰색 바탕, 규정 폭, 내부 흰색 박스+그림자 원칙에 맞춰 장면 이미지 3장을 세로로 배치하도록 정리했습니다.

20260423 T1702
- 사용자의 추가 지시에 따라, 통이미지 주위의 흰색 테두리형 카드 박스 표현을 제거/최소화했습니다.
- 실제 화면 구조를 "구간 제목 + 통이미지 + 이미지 아래 짧은 설명" 순서로 다시 정리했습니다.
- 상단 소개문은 중복 설명을 제거하고, 인증현황의 의미를 한 번만 요약하는 문장으로 교체했습니다.
*/

.company-page {
    background: transparent;
}

.company-page__hero {
    padding: 0 0 72px;
}

.company-page__shell {
    width: min(calc(100% - 80px), 1140px);
    background: #ffffff;
    padding: 14px 20px 72px;
}

.company-page__crumbs {
    display: flex;
    justify-content: flex-end;
    font-size: 14px;
    color: #5f5f5f;
}

.company-page__crumbs span {
    font-weight: 800;
    color: #202020;
}

.company-page__intro {
    margin-top: 52px;
}

.company-page__intro h1 {
    margin: 0;
    font-size: 40px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #111;
}

.company-page__intro p {
    margin: 18px 0 0;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 500;
    color: #1d1d1d;
}

.company-cert-page__intro {
    max-width: 960px;
}

.company-cert__section {
    margin-top: 56px;
}

.company-cert__section--minor {
    margin-top: 48px;
}

.company-cert__section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.company-cert__section-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #111827;
}

.company-cert__section-copy {
    margin: 14px 0 0;
    font-size: 17px;
    line-height: 1.75;
    color: #374151;
}

/*
20260423 T1608 as-is 보존
.company-cert__notice {
    display: inline-flex;
    align-items: center;
    margin-top: 26px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #f3f6fb;
    border: 1px solid #e1e8f3;
    font-size: 14px;
    line-height: 1.5;
    color: #334155;
}
.company-cert__scene-frame {
    margin: 0;
    padding: 18px;
    border: 1px solid #edf1f5;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
}
.company-cert__scene-frame img {
    border-radius: 18px;
    background: #f8fafc;
}
*/

.company-cert__scene-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 46px;
}

.company-cert__scene {
    min-width: 0;
}

.company-cert__scene-copy {
    margin: 0 0 18px;
}

.company-cert__scene-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #111827;
}

.company-cert__scene-frame {
    margin: 0;
}

.company-cert__scene-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    background: transparent;
}

.company-cert__scene-caption {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
}

@media (max-width: 1100px) {
    .company-page__shell {
        width: min(calc(100% - 60px), 980px);
        padding: 14px 20px 64px;
    }

    .company-cert__section {
        margin-top: 48px;
    }

    .company-cert__scene-stack {
        gap: 38px;
    }

    .company-cert__scene-title {
        font-size: 22px;
    }
}

@media (max-width: 860px) {
    .company-page__shell {
        width: min(calc(100% - 40px), 100%);
        padding: 12px 16px 44px;
    }

    .company-page__hero {
        padding: 12px 0 54px;
    }

    .company-page__crumbs {
        justify-content: flex-start;
        font-size: 13px;
    }

    .company-page__intro {
        margin-top: 36px;
    }

    .company-page__intro h1 {
        font-size: 40px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: -0.03em;
    }

    .company-page__intro p {
        margin-top: 18px;
        font-size: 18px;
        line-height: 1.65;
        font-weight: 500;
    }

    .company-cert__section {
        margin-top: 40px;
    }

    .company-cert__scene-stack {
        gap: 30px;
    }

    .company-cert__scene-copy {
        margin-bottom: 14px;
    }

    .company-cert__scene-title {
        font-size: 20px;
    }

    .company-cert__scene-caption {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.68;
    }
}

@media (max-width: 480px) {
    .company-page__shell {
        width: min(calc(100% - 24px), 100%);
        padding: 10px 12px 38px;
    }

    .company-page__intro h1 {
        font-size: 34px;
    }

    .company-page__intro p {
        font-size: 16px;
        line-height: 1.62;
    }

    .company-cert__scene-title {
        font-size: 18px;
    }

    .company-cert__scene-caption {
        font-size: 13px;
    }
}

/*
20260514 T1526
- POSH 모바일 공통 확정 기준에 따라 회사소개 > 인증현황 휴대폰 화면 전용 보정값을 추가했습니다.
- 기존 데스크톱/태블릿 규칙은 삭제하지 않고, 모바일 하단 override만 추가합니다.
- 모바일에서는 흰색 상단 헤더 기준과 맞도록 과한 여백을 줄이고, 통이미지 3장이 화면 폭 안에서 읽히도록 단일 컬럼·짧은 설명 중심으로 정리합니다.
*/
@media (max-width: 640px) {
    .company-page__hero {
        padding: 0 0 38px;
    }

    .company-page__shell {
        width: 100%;
        padding: 0 18px 42px;
        background: #ffffff;
    }

    .company-page__crumbs {
        display: none;
    }

    .company-page__intro {
        margin-top: 28px;
    }

    .company-page__intro h1 {
        font-size: 30px;
        line-height: 1.12;
        font-weight: 700;
        letter-spacing: -0.035em;
    }

    .company-page__intro p {
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.62;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: #2d3748;
    }

    .company-cert__section {
        margin-top: 34px;
    }

    .company-cert__section--minor {
        margin-top: 32px;
    }

    .company-cert__section-head {
        display: block;
        margin-bottom: 18px;
    }

    .company-cert__section-title {
        font-size: 22px;
        line-height: 1.22;
        font-weight: 700;
        letter-spacing: -0.035em;
    }

    .company-cert__section-copy {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.65;
        letter-spacing: -0.02em;
        color: #4b5563;
    }

    .company-cert__scene-stack {
        gap: 30px;
    }

    .company-cert__scene-copy {
        margin: 0 0 12px;
    }

    .company-cert__scene-title {
        position: relative;
        padding-left: 11px;
        font-size: 18px;
        line-height: 1.28;
        font-weight: 700;
        letter-spacing: -0.035em;
    }

    .company-cert__scene-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.18em;
        width: 3px;
        height: 1.05em;
        border-radius: 999px;
        background: #1f5fae;
    }

    .company-cert__scene-frame {
        overflow: hidden;
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
    }

    .company-cert__scene-frame img {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 0;
    }

    .company-cert__scene-caption {
        margin-top: 11px;
        font-size: 13.5px;
        line-height: 1.68;
        letter-spacing: -0.02em;
        color: #4b5563;
    }
}

@media (max-width: 380px) {
    .company-page__shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .company-page__intro h1 {
        font-size: 28px;
    }

    .company-page__intro p {
        font-size: 14px;
    }

    .company-cert__section-title {
        font-size: 20px;
    }

    .company-cert__scene-title {
        font-size: 17px;
    }

    .company-cert__scene-caption {
        font-size: 13px;
    }
}

/*
2026-05-14 T1612
- 모바일에서 인증현황 제목 위에 회색 띠가 보이는 문제를 보정합니다.
- 원인: 모바일 shell의 padding-top이 0인 상태에서 intro margin-top이 부모 바깥 배경으로 접혀 보일 수 있었습니다.
- 조치: 모바일에서는 shell 안쪽 상단 여백으로 처리하고, intro margin-top은 0으로 고정합니다.
- 기존 구조/데스크톱/태블릿 스타일은 삭제하지 않고, 휴대폰 전용 override만 추가합니다.
*/
@media (max-width: 640px) {
    .company-page__shell {
        padding-top: 22px;
    }

    .company-page__intro {
        margin-top: 0;
    }
}

@media (max-width: 380px) {
    .company-page__shell {
        padding-top: 20px;
    }
}