@charset "utf-8";

/*
 * 뉴스룸(/esg_new) 전용 리디자인.
 * esg.css 는 구 /esg 페이지와 공유하므로 건드리지 않고, 여기서 .nr-page 아래로만 덮어쓴다.
 * 클래스명(news_wrap, news_flex_wrap, news_img, btn-news-more, esg-newsroom-contents-area 등)은
 * /js/esg/index.js 가 높이를 계산하며 쓰고 있어 그대로 유지한다.
 */

/* ============================== 토큰 */
.nr-page {
    --nr-navy: #1e3a5f;
    --nr-text: #1f2937;
    --nr-muted: #6b7280;
    --nr-light: #9aa4b2;
    --nr-line: #e5e9ef;
    --nr-thumb: #f2f4f7;
    --nr-max: 1280px;
    --nr-pad: 24px;

    padding: 28px 0 110px;
    background: #fff;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    color: var(--nr-text);
}

/* 서브페이지 공통 콘텐츠 폭: 1280px + 좌우 24px (768px 이하 16px) */
.nr-inner {
    max-width: var(--nr-max);
    margin: 0 auto;
    padding: 0 var(--nr-pad);
}

/* ============================== 브레드크럼 (서브페이지 공통) */
.nr-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--nr-light);
}
.nr-crumb a {
    color: inherit;
    text-decoration: none !important;
}
.nr-crumb strong {
    font-weight: 600;
    color: var(--nr-muted);
}

/* ============================== 타이틀 (서브페이지 공통: 36px/700, 설명 14px) */
.nr-head {
    padding: 44px 0 64px;
    text-align: center;
}
/* sh_common.css 의 h1 Noto Sans 지정을 덮는다 */
.nr-head__title {
    margin: 0 0 24px;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #111827;
}
.nr-head__desc {
    margin: 0 auto;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--nr-muted);
    word-break: keep-all;
}

/* 구버전 product.css 의 음수 여백 무효화 */
.nr-page .form-information-nav-top {
    margin: 0;
    padding: 0;
}

/* ============================== 섹션 라벨 */
.nr-page .esg-newsroom-contents {
    display: block;
    overflow: visible;
}
.nr-page .esg-newsroom-contents1 {
    width: 100%;
    padding: 0;
}
.nr-page .esg-newsroom-contents-title {
    display: block;
    margin: 0 0 28px;
    padding-bottom: 18px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--nr-navy);
    border-bottom: 1px solid var(--nr-line);
}

/* ============================== 목록 영역 (index.js 가 height/overflow 를 제어) */
.nr-page .esg-newsroom-contents-area {
    /* 호버 때 떠오르는 카드와 그림자가 잘리지 않게 좌우 여백 쪽으로 넓혔다 */
    width: auto;
    margin: -12px calc(var(--nr-pad) * -1) 0;
    padding: 12px var(--nr-pad) 0;
    overflow: hidden;
}

/* ============================== 카드 그리드 */
.nr-page .news_flex_wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 32px;
}
.nr-page .news_wrap {
    width: auto;
    min-width: 0;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 호버: 메인 페이지 뉴스룸 카드(sh_main.css #newsroom)와 같은 떠오름·그림자 */
.nr-page .news_wrap:hover {
    transform: translateY(-4px);
}

/* 썸네일 */
.nr-page .news_img_a {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    background: var(--nr-thumb);
    /* 확대(transform) 중인 사진이 둥근 모서리 밖으로 새지 않게 새 쌓임 맥락을 만든다 */
    isolation: isolate;
    transition: box-shadow 0.35s ease;
}
/* 테두리는 사진 위에 겹친 틀로 그린다.
   링크에 border 를 주면 사진 모서리와 테두리 모서리가 따로 굴려져 어긋나 보이고,
   이미지가 없을 때 브라우저가 그리는 사각 테두리도 이 틀이 덮는다. */
.nr-page .news_img_a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 1px solid var(--nr-line);
    border-radius: inherit;
    pointer-events: none;
    transition: border-color 0.3s ease;
}
/* 사진 아래쪽에 연한 네이비 그라데이션이 올라온다 */
.nr-page .news_img_a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30, 58, 95, 0) 45%, rgba(30, 58, 95, 0.22) 100%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.nr-page .news_wrap:hover .news_img_a {
    box-shadow: 0 14px 30px rgba(3, 9, 20, 0.08);
}
.nr-page .news_wrap:hover .news_img_a::before {
    border-color: #d9dfe8;
}
.nr-page .news_wrap:hover .news_img_a::after {
    opacity: 1;
}
.nr-page .news_img {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    color: transparent;
    font-size: 0;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* esg.css 의 .news_img:hover(scale 1.1) 보다 구체적이라 이것이 적용된다 */
.nr-page .news_wrap:hover .news_img {
    transform: scale(1.05);
}

/* 키보드 포커스는 보이고, 마우스 클릭 뒤에 남는 파란 테두리는 없앤다 */
.nr-page .news_img_a:focus,
.nr-page .news_flex_wrap .contents-title:focus {
    outline: none;
}
.nr-page .news_img_a:focus-visible {
    outline: 2px solid #2f6fb5;
    outline-offset: 3px;
}
.nr-page .news_flex_wrap .contents-title:focus-visible {
    outline: 2px solid #2f6fb5;
    outline-offset: 2px;
    border-radius: 4px;
}

/* 제목 */
.nr-page .news_flex_wrap .contents-title {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    text-decoration: none !important;
    color: inherit;
}
.nr-page .news_tit {
    margin: 18px 0 10px;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--nr-text);
    transition: color 0.2s ease;
    /* 제목이 1줄이어도 2줄 높이를 차지해 날짜 위치를 맞춘다 (line-height 1.5 × 2줄) */
    min-height: 3em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.nr-page .news_wrap:hover .news_tit {
    color: var(--nr-navy);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* 날짜 */
.nr-page .news_date {
    height: auto;
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--nr-light);
    font-variant-numeric: tabular-nums;
}

/* ============================== 더보기 버튼
   목록 끝을 알리는 가로선 가운데에 둔다. 펼친 뒤(index.js 가 버튼을 hide)엔 선도 같이 숨긴다. */
.nr-page .esg-newsroom-contents-btn {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 48px 0 0;
    border-bottom: 0;
}
.nr-page .esg-newsroom-contents-btn::before,
.nr-page .esg-newsroom-contents-btn::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--nr-line);
}
.nr-page .esg-newsroom-contents-btn:has(> .btn-news-more[style*="none"]) {
    display: none;
}
.nr-page .esg-newsroom-contents-btn button.btn-news-more {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    height: 48px;
    padding: 0 22px 0 26px;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--nr-text);
    background: #fff;
    border: 1px solid #d5dce6;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
}
.nr-page .btn-news-more__ic {
    flex: none;
    color: var(--nr-light);
    transition: transform 0.25s ease, color 0.2s ease;
}
.nr-page .esg-newsroom-contents-btn button.btn-news-more:hover {
    color: var(--nr-navy);
    border-color: var(--nr-navy);
    box-shadow: 0 6px 16px rgba(20, 40, 63, 0.08);
}
.nr-page .esg-newsroom-contents-btn button.btn-news-more:hover .btn-news-more__ic {
    color: var(--nr-navy);
    transform: translateY(2px);
}
.nr-page .esg-newsroom-contents-btn button.btn-news-more:focus {
    outline: none;
}
.nr-page .esg-newsroom-contents-btn button.btn-news-more:focus-visible {
    outline: 2px solid #2f6fb5;
    outline-offset: 3px;
}

/* ============================== 반응형 */
@media (max-width: 1024px) {
    .nr-page .news_flex_wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 24px;
    }
}

@media (max-width: 768px) {
    .nr-page {
        padding: 20px 0 72px;
    }
    .nr-page {
        --nr-pad: 16px;
    }
    .nr-inner {
        padding: 0 16px;
    }
    .nr-head {
        padding: 28px 0 36px;
    }
    .nr-head__title {
        font-size: 26px;
        margin-bottom: 16px;
    }
    .nr-head__desc {
        font-size: 13px;
    }

    /* esg.css 의 모바일 block 배치를 그리드로 되돌린다 */
    .nr-page .news_flex_wrap {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 16px;
    }
    .nr-page .news_wrap,
    .nr-page .news_tit {
        width: auto;
    }
    .nr-page .news_tit {
        font-size: 16px;
        margin: 14px 0 8px;
    }
    .nr-page .esg-newsroom-contents-btn {
        gap: 14px;
        padding: 36px 0 0;
    }
    .nr-page .esg-newsroom-contents-btn button.btn-news-more {
        height: 44px;
        padding: 0 18px 0 22px;
        font-size: 14px;
    }
}

@media (max-width: 520px) {
    .nr-page .news_flex_wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

/* 움직임 줄이기 설정 사용자에게는 떠오름·확대를 뺀다 */
@media (prefers-reduced-motion: reduce) {
    .nr-page .news_wrap,
    .nr-page .news_img,
    .nr-page .news_img_a,
    .nr-page .news_img_a::after {
        transition: none;
    }
    .nr-page .news_wrap:hover,
    .nr-page .news_wrap:hover .news_img {
        transform: none;
    }
    .nr-page .btn-news-more__ic {
        transition: none;
    }
}