@charset "utf-8";
/* ============================================================
   new.css — 고객 수정요청 반영분 (이 파일만 수정·업로드한다)
   다른 CSS 파일은 서버 관리분이므로 여기서 덮어쓴다.
   ============================================================ */

/* [채용공고] 상태 배지 — 모바일 목록이 PC와 색상이 달라 글씨가 안 보였다.
   접수전: 남색 / 접수중: 진한 녹색 (PC .board-job 와 동일하게 맞춤) */
.board-job-m .label--ing {background:var(--color-primary);}
.board-job-m .label--before {background:#0D3B66;}

/* [NEWSROOM > ARTICLE] 목록 카드 호버 확대로 이미지가 잘리던 문제.
   .article 카드는 object-fit:contain 이라 확대하면 밖으로 넘쳐 잘린다. */
.news-slider__card:hover .news-slider__media.article img {transform:none;}

/* [BUSINESS] 탭(주거/업무/리모델링·PCM) 이동 시 화면 전환.
   각 탭이 별개 URL이라 새 문서가 로드되면서 100vh 히어로가 한 프레임 그려진 뒤
   #container 로 점프해 "다른 화면이 스쳤다" 가 된다.
   해시로 진입한 경우에만 히어로를 아예 렌더하지 않아 곧바로 본문에서 시작한다.
   (클래스는 dynamic_header.php 의 head 인라인 스크립트가 CSS 로드 전에 건다) */
html.hero-skip .sub-visual--business {display:none;}
html.hero-skip #container {padding-top:0;}

/* [BUSINESS] CASE STUDIES : 이미지 클릭으로도 상세로 가도록 media 를 div → a 로 바꿨다.
   a 는 기본 inline 이라 aspect-ratio(.business-cases__media)가 먹지 않으므로 block 으로 잡는다. */
a.business-cases__media {display:block;}

/* [PROJECT 목록] masonry 카드 아래 공백 제거.
   2·3·5·6번(1칸짜리)에는 aspect-ratio:332/288 이 있어 높이가 정해지는데,
   2행을 차지하는 1·4·7·8번에는 비율도 높이도 없어서 안쪽 이미지의 자연 높이가
   행 높이를 밀어올렸다. 그 결과 행 높이(282px) > 1칸 카드 높이(245px) 가 되어
   1칸 카드 아래에 37px 씩 빈 틈이 생겼다.

   2행 카드의 media 를 absolute 로 빼내 높이 기여를 없앤다.
   → 행 높이는 1칸 카드의 aspect-ratio 가 결정하고,
     2행 카드는 grid 의 stretch 로 두 행을 정확히 꽉 채운다.
   (비율을 직접 주는 방법도 되지만 gap 때문에 2px 오차가 남는다) */
@media (min-width:901px){
	.project-masonry__block > .project-masonry__item:nth-child(1) > .project-masonry__media,
	.project-masonry__block > .project-masonry__item:nth-child(4) > .project-masonry__media,
	.project-masonry__block > .project-masonry__item:nth-child(7) > .project-masonry__media,
	.project-masonry__block > .project-masonry__item:nth-child(8) > .project-masonry__media{position:absolute;inset:0;}
}

/* [PROJECT] 대표이미지 유실분 플레이스홀더.
   SVG 를 object-fit:cover 로 늘리면 카드 크기마다 아이콘·문구가 제각각 커진다.
   원본 크기로 중앙 고정해 어느 카드에서도 같은 크기로 보이게 한다. */
img[src*="project-noimage.svg"]{object-fit:none !important; object-position:center; background:#00261A;}

/* [NEWSROOM > ALL UPDATES] 카드 본문이 길어 카드가 터지던 문제.
   PHP(sub/all.php)에서 글자수를 자르지만, 원문에 줄바꿈이 많은 경우를 대비한 안전장치로
   줄 수도 함께 제한한다. (awards 카드와 같은 방식) */
.news-card__desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.news-card--lg .news-card__desc{-webkit-line-clamp:2;}
/* ARTICLE(split) 카드는 정사각 이미지 옆에 본문이 붙어 세로 여유가 있다. 본문을 더 보여준다(3줄 → 14줄) */
.news-card--split .news-card__desc{-webkit-line-clamp:14;}
.news-card__award-txt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;overflow:hidden;}
.news-tv__card-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}

/* [NEWSROOM > JINYANG TV] 이 페이지만 본문 하단 여백 제거.
   TV 섹션이 어두운 배경으로 화면 끝까지 이어지는 구성이라 아래 흰 여백(108px)이 뜬다.
   .real-cont 는 전 서브페이지 공용이므로 TV 래퍼를 품은 경우에만 적용한다. */
.real-cont:has(.page-newsroom-tv){padding-bottom:0;}
/* 상단 흰 여백(126px)의 정체는 .sub-title 이다.
   서브비주얼과 TV 섹션 안에 이미 "JINYANG TV" 제목이 있어 세 번 반복되고,
   어두운 TV 섹션 위로 흰 띠가 남는다. ALL UPDATES 페이지와 동일하게 숨긴다. */
#contArea:has(.page-newsroom-tv) .sub-title{display:none;}

/* [NEWSROOM > JINYANG TV] 관리자 로그인 시 생기던 흰 띠.
   "글쓰기" 버튼 블록(.buttons)의 아래 여백(15.6px)이 margin collapse 로 어두운 섹션 밖으로
   빠져나가, 섹션과 푸터 사이에 흰 배경이 그대로 드러났다.
   여백을 섹션 안쪽(padding)으로 옮겨 어두운 배경이 이어지게 한다. */
.page-newsroom-tv section.news-tv {padding-bottom:16px;}
.page-newsroom-tv section.news-tv > .buttons {margin-bottom:0;}

/* [NEWSROOM] 탭 이동 시 탭이 화면에 남도록.
   이전에는 링크가 #container(본문 시작점)를 가리켜 탭 줄이 화면 위로 밀려났다.
   앵커를 탭 줄(#newsroom-tab)로 바꾸고, 고정 헤더에 가리지 않게 여백을 준다. */
#newsroom-tab {scroll-margin-top:var(--header-height);}

/* [NEWSROOM > AWARDS] 카드 배경 사진이 사실상 안 보이던 문제.
   퍼블리싱 기본값이 이미지 opacity .12 위에 민트 오버레이 rgba(...,.9) 라
   최종적으로 사진이 1% 남짓만 비쳤다(=배경이 없는 것처럼 보임).
   오버레이를 옅게, 이미지를 진하게 바꿔 프로젝트 사진이 실제로 보이게 한다.
   글씨(진한 초록)가 묻히지 않는 선까지만 올린다. */
.news-awards__bg img,
.news-card__award-bg img {opacity:1;}
.news-awards__bg::after,
.news-card__award-bg::after {background:rgba(174,237,213,.82);}

/* [메인 > AWARDS] 메인 카드를 AWARDS 목록(/newsroom/awards)과 같은 모양으로 맞춘다.
   카드 본체(.news-awards__card ~)는 doc.css 규칙을 그대로 쓰고,
   여기서는 메인의 스와이퍼 그리드(PC 4개 × 2줄)에 맞는 크기 보정만 한다. */
.main-news .news-awards__card {min-height:420px;}
/* 목록(3열, 카드 340px)보다 열이 하나 많아 카드가 좁다.
   제목이 길면 위아래가 붙으므로 안쪽 여백·간격을 조금 줄이고 제목 줄 수를 제한한다. */
.main-news .news-awards__inner {gap:var(--space-30);}
.main-news .news-awards__title {display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;}
/* 등록일자(글쓰기 폼에서 수정 가능)를 분류 라벨과 같은 줄 오른쪽에 둔다.
   목록 카드에는 없는 줄이라 메인에서만 쓴다. */
.main-news .news-awards__meta {display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-12); width:100%;}
.main-news .news-awards__date {flex:0 0 auto; font-size:var(--font-size-15); font-weight:400; line-height:var(--line-height-15); color:rgba(13,61,45,.6);}

/* 모바일은 한 장씩 넘어가 카드가 넓어진다. 안쪽 간격은 목록과 같은 값(responsive.css)으로 되돌린다. */
@media (max-width: 640px) {
	.main-news .news-awards__card {min-height:340px;}
	.main-news .news-awards__inner {gap:var(--space-16);}
}

/* [NEWSROOM > ALL UPDATES] 1행 오른쪽 수상 카드가 왼쪽 큰 카드보다 짧아 아래에 흰 공백이 남던 문제.
   퍼블리싱 기본값이 align-items:flex-start 라 카드가 제 내용 높이까지만 늘어났다.
   1행만 stretch 로 바꿔 오른쪽 카드가 왼쪽 텍스트 끝까지 내려오게 한다.
   (2행 .news-featured__row--2 는 카드 크기가 서로 달라 기존 flex-start 를 유지한다.)
   카드 위쪽 여백(margin-top:60px)은 그대로라 시작 위치는 변하지 않는다. */
.news-featured__row:not(.news-featured__row--2) .contain {align-items:stretch;}
.news-card--award .news-card__award-inner {height:100%;}