/*
[POSH 회사소개 주요 소식 전용 스타일 전체 파일 구조]
public/company/news/company_news.css    - 주요 소식 전용 스타일
page/site/company/company_news_view.php - 주요 소식 화면에서 사용
public/company/news/news_img/           - 주요 소식·수상이력 이미지 폴더

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

20260424 T1524
- 이미지 제작은 중단하고, 해양블록 페이지와 같은 레이아웃 세팅만 먼저 반영했습니다.
- hero, anchor-nav, section-head, project-head, project-grid, project-card는 business_block.css의 구조·수치 기준을 그대로 맞췄습니다.
- 카드 이미지는 이후 별도 제작/교체할 예정이므로 현재는 business_block 카드 규격에 맞춰 cover 기준을 유지했습니다.

20260427 T1045
- 상단 대표 이미지를 사용하는 공개 서브페이지 공통 규정에 맞춰 hero-stage를 shell 좌우 padding만큼 확장했습니다.
- 대표 이미지 양옆 흰 여백은 제거하고, 수상이력·주요소식 본문 콘텐츠의 기본 좌우 여백은 유지했습니다.
- 복원 시 .company-news-page__hero-stage의 margin-left/margin-right 추가값과 모바일 대응값만 제거하면 됩니다.
*/

.company-news-page {
    background: transparent;
}
.company-news-page__hero {
    padding: 0 0 72px;
}
.company-news-page__shell {
    width: min(calc(100% - 80px), 1160px);
    background: #ffffff;
    padding: 16px 22px 76px;
}
.company-news-page__crumbs {
    display: flex;
    justify-content: flex-end;
    font-size: 14px;
    color: #5f5f5f;
}
.company-news-page__crumbs span {
    font-weight: 800;
    color: #202020;
}
.company-news-page__hero-stage {
    position: relative;
    margin-top: 16px;
    /*
    20260427 T1045 변경 전:
    - margin-left/right 추가값이 없어 shell padding 안쪽에서 대표 이미지가 시작되었습니다.
    - 그 결과 상단 대표 이미지 양옆에 흰 여백이 남았습니다.
    - 복원 시 아래 margin-left/margin-right 두 줄만 제거하면 됩니다.
    */
    margin-left: -22px;
    margin-right: -22px;
}
.company-news-page__hero-visual {
    margin: 0;
}
.company-news-page__hero-visual img {
    width: 100%;
    aspect-ratio: 1160 / 350;
    object-fit: cover;
    display: block;
}
.company-news-page__hero-copy {
    position: absolute;
    left: 38px;
    top: 95px;
    max-width: 360px;
    color: #133b8a;
}
.company-news-page__hero-copy h1 {
    margin: 0;
}
.company-news-page__anchor-nav {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-flex;
    align-items: stretch;
    gap: 0;
}
.company-news-page__anchor-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 98px;
    min-height: 38px;
    padding: 0 18px;
    background: rgba(9, 9, 12, 0.92);
    color: #ffffff;
    text-decoration: none;
}
.company-news-page__anchor-nav a + a {
    border-left: 1px solid rgba(255,255,255,0.14);
}
.company-news-page__anchor-nav a.is-active,
.company-news-page__anchor-nav a:hover,
.company-news-page__anchor-nav a:focus-visible {
    background: #1a22d0;
}
.company-news-page__anchor-nav a.is-active::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #1a22d0;
}
.company-news-page__section {
    margin-top: 44px;
}
.company-news-page__section-head--line {
    padding-bottom: 10px;
    border-bottom: 1px solid #d9d9d9;
}
.company-news-page__section-head h2 {
    margin: 0;
    color: #101010;
}
.company-news-page__project-group {
    margin-top: 24px;
}
.company-news-page__project-head {
    padding-bottom: 8px;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 22px;
}
.company-news-page__project-head h3 {
    margin: 0;
    color: #232323;
}
.company-news-page__project-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.company-news-page__project-card {
    display: grid;
    gap: 0;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.company-news-page__project-visual {
    margin: 0;
    background: #e8edf2;
}
.company-news-page__project-visual img {
    width: 100%;
    aspect-ratio: 4 / 2.55;
    object-fit: cover;
    display: block;
}
.company-news-page__project-title {
    display: block;
    padding: 10px 12px 12px;
    color: #232323;
}

@media (max-width: 1180px) {
    .company-news-page__project-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .company-news-page__shell {
        width: min(calc(100% - 36px), 100%);
        padding: 14px 14px 54px;
    }
    .company-news-page__hero {
        padding: 12px 0 54px;
    }
    .company-news-page__crumbs {
        justify-content: flex-start;
        font-size: 13px;
    }
    .company-news-page__hero-copy {
        left: 20px;
        top: 28px;
        max-width: 260px;
    }
    .company-news-page__hero-copy h1 {
        font-size: 38px !important;
    }
    .company-news-page__hero-visual img {
        aspect-ratio: 16 / 9;
    }
    .company-news-page__hero-stage {
        /*
        20260427 T1045 모바일 대응:
        - 모바일 shell padding 14px 기준으로 대표 이미지 좌우 흰 여백을 제거합니다.
        - 본문 콘텐츠 여백은 .company-news-page__shell의 padding 값을 유지합니다.
        */
        margin-left: -14px;
        margin-right: -14px;
    }
    .company-news-page__anchor-nav {
        position: static;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .company-news-page__anchor-nav a {
        min-width: 0;
    }
    .company-news-page__anchor-nav a.is-active::after {
        display: none;
    }
}

@media (max-width: 560px) {
    .company-news-page__hero-copy {
        max-width: 220px;
    }
    .company-news-page__hero-copy h1 {
        font-size: 32px !important;
    }
    .company-news-page__section-head h2 {
        font-size: 28px !important;
    }
    .company-news-page__project-grid {
        grid-template-columns: 1fr;
    }
}

/*
20260514 T1530 모바일 기준 확정 보정
- POSH 모바일 공통 기준(흰색 상단 헤더, 단순한 모바일 메뉴, 본문 단일 컬럼)에 맞춰 주요 소식 페이지의 휴대폰 화면만 보정합니다.
- 기존 데스크톱/태블릿 레이아웃은 유지하고, 640px 이하에서만 읽기성과 카드 폭을 정리합니다.
- 기존 860px/560px 반응형 규칙을 삭제하지 않고, 아래 override로만 덮어 적용합니다.
- 복원 시 이 20260514 T1530 블록 전체만 제거하면 됩니다.
*/
@media (max-width: 640px) {
    .company-news-page__hero {
        padding: 0 0 36px;
    }

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

    .company-news-page__crumbs {
        display: none;
    }

    .company-news-page__hero-stage {
        margin: 0;
        overflow: hidden;
        background: #0f172a;
    }

    .company-news-page__hero-visual img {
        width: 100%;
        min-height: 248px;
        aspect-ratio: auto;
        object-fit: cover;
        filter: saturate(1.04) contrast(1.02);
    }

    .company-news-page__hero-copy {
        left: 22px;
        top: auto;
        bottom: 64px;
        max-width: calc(100% - 44px);
        color: #ffffff;
        text-shadow: 0 2px 10px rgba(15, 23, 42, 0.38);
    }

    .company-news-page__hero-copy h1 {
        font-size: 30px !important;
        line-height: 1.08;
        letter-spacing: -0.04em;
    }

    .company-news-page__anchor-nav {
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 14px;
        width: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .company-news-page__anchor-nav a {
        min-width: 0;
        min-height: 38px;
        padding: 0 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.72);
        color: #111827;
        font-size: 13px;
        font-weight: 600;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
    }

    .company-news-page__anchor-nav a + a {
        border-left: 1px solid rgba(255, 255, 255, 0.72);
    }

    .company-news-page__anchor-nav a.is-active,
    .company-news-page__anchor-nav a:hover,
    .company-news-page__anchor-nav a:focus-visible {
        background: #1d4ed8;
        border-color: #1d4ed8;
        color: #ffffff;
    }

    .company-news-page__anchor-nav a.is-active::after {
        display: none;
    }

    .company-news-page__section {
        width: calc(100% - 32px);
        margin: 32px auto 0;
    }

    .company-news-page__section-head--line {
        padding-bottom: 10px;
        border-bottom: 1px solid #e5e7eb;
    }

    .company-news-page__section-head h2 {
        font-size: 26px !important;
        line-height: 1.16;
        letter-spacing: -0.04em;
    }

    .company-news-page__project-group {
        margin-top: 22px;
    }

    .company-news-page__project-head {
        margin-bottom: 14px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e5e7eb;
    }

    .company-news-page__project-head h3 {
        font-size: 18px !important;
        line-height: 1.25;
        letter-spacing: -0.03em;
        color: #111827;
    }

    .company-news-page__project-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .company-news-page__project-card {
        border-radius: 14px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
        overflow: hidden;
    }

    .company-news-page__project-visual img {
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

    .company-news-page__project-title {
        padding: 13px 14px 15px;
        font-size: 14px;
        line-height: 1.45;
        font-weight: 600;
        color: #1f2937;
    }
}

@media (max-width: 380px) {
    .company-news-page__hero-visual img {
        min-height: 228px;
    }

    .company-news-page__hero-copy {
        left: 18px;
        bottom: 62px;
        max-width: calc(100% - 36px);
    }

    .company-news-page__hero-copy h1 {
        font-size: 27px !important;
    }

    .company-news-page__anchor-nav {
        left: 12px;
        right: 12px;
        gap: 6px;
    }

    .company-news-page__anchor-nav a {
        min-height: 36px;
        font-size: 12.5px;
    }

    .company-news-page__section {
        width: calc(100% - 26px);
    }

    .company-news-page__section-head h2 {
        font-size: 24px !important;
    }
}


/*
2026-05-14 T1616
- 모바일에서 뉴스 상단의 수상이력/주요소식 앵커 메뉴가 히어로 이미지와 본문 흐름을 끊어 보였으므로 휴대폰 화면에서만 숨김 처리합니다.
- 데스크톱/태블릿 앵커 메뉴는 유지합니다.
- 복원 시 이 블록만 제거하면 됩니다.
*/
@media (max-width: 640px) {
    .company-news-page__anchor-nav {
        display: none;
    }

    .company-news-page__hero-copy {
        bottom: 24px;
    }

    .company-news-page__section {
        margin-top: 30px;
    }
}

@media (max-width: 380px) {
    .company-news-page__hero-copy {
        bottom: 22px;
    }
}


/*
2026-05-15 T1536
- [수상이력 카드 이미지 전체 노출 보정]
- as-is: 수상이력 이미지는 award별 원본 비율이 달라 같은 카드 박스 안에서 cover 기준으로 잘리거나 과확대되어 보였습니다.
- to-be: 카드 박스 크기는 키우지 않고, 수상이력 섹션(#news-awards)의 이미지만 contain 기준으로 바꿔 상패 전체가 보이게 합니다.
- 주요소식(#news-highlights) 썸네일은 기존 cover 기준을 유지합니다.
*/
#news-awards .company-news-page__project-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
}

#news-awards .company-news-page__project-visual img {
    width: 100%;
    aspect-ratio: 4 / 2.55;
    object-fit: contain;
    display: block;
}

/*
2026-05-15 T1544
- [수상이력 카드 이미지 영역 배경 구분 보정]
- as-is: 수상이력 상패 이미지 중 밝은 배경 이미지가 카드 상단 배경과 섞여 이미지 영역과 제목 영역의 구분이 약했습니다.
- to-be: 수상이력 섹션(#news-awards) 안에서만 이미지 영역을 아주 연한 회색 그라데이션으로 분리하고,
  제목 영역은 흰색 배경과 얇은 상단 라인으로 구분합니다.
- 이미지 박스 크기, 주요소식 영역, company_news_view.php, 이미지 파일은 수정하지 않습니다.
*/
#news-awards .company-news-page__project-visual {
    background: linear-gradient(180deg, #f7f8fa 0%, #eef1f4 100%);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.055);
}

#news-awards .company-news-page__project-title {
    background: #ffffff;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}


/*
2026-05-15 T1558
- [수상이력 카드 상단/제목 영역 구분 재보정]
- as-is: T1544에서 제목 영역을 흰색으로 두면서 본문 흰 배경과 섞여 제목 라인이 사라진 것처럼 보였습니다.
- to-be: 이미지 영역은 아주 연한 회색으로 유지하고, 제목 영역은 한 단계 더 분명한 연회색 배경으로 분리합니다.
- 이미지 박스 크기, contain 기준, 주요소식 영역, company_news_view.php, 이미지 파일은 수정하지 않습니다.
*/
#news-awards .company-news-page__project-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.055);
}

#news-awards .company-news-page__project-visual {
    background: #f7f8fa;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.045);
}

#news-awards .company-news-page__project-title {
    background: #eef1f4;
    border-top: 1px solid rgba(15, 23, 42, 0.075);
}