@charset "utf-8";
/* 메인 뉴스룸 (#section02.nr) — /include/main_newsroom.php 전용 (2026-09-24, 시안 "뉴스 타임라인 통합 디자인")
   날짜 | 타임라인 | 분류 | 제목 | 끝 의 격자. 분류: New Product(파랑, pr2) / ABOV News(연두, pr1).
   [2026-09-27] 20260924 복사본 수정: 전시 행 연도를 연도 열로, 더보기 버튼 한 줄·오른쪽, 제목 한 줄 + … (모든 폭)
   글꼴 규칙: kr/en Pretendard · jpn Pretendard JP · chn Sarasa Gothic, 굵기 400/600 만, 고정폭 글꼴 없음(tabular-nums) */
#section02.nr {--nr-abov: #1f5fae; --nr-green: #7ec23a; --nr-rose: #F4563D; /* 전시·행사 (2026-09-27 #F4563D, 이전 코랄 #f06b5b) */ --nr-sky-bg: #eaf4ff; --nr-sky-line: #cfe3fb; --nr-navy: #0f1e33; --nr-ink: #1b2330; --nr-sub: #4e5968; --nr-mute: #6b7684;
	--nr-line: #e3e8ee; --nr-soft: #f6f8fb; --nr-sky: #9fd0ff; --nr-rail: #cbd4df;
	--nr-cols: 96px 118px 36px 110px minmax(0, 1fr) auto; /* 연도 | 날짜 | 타임라인 | 분류 | 제목 | 끝 */
	padding: 88px 0 72px; background: #fff; color: var(--nr-ink); line-height: 1.55; text-align: left;
	font-family: 'Pretendard', 'Pretendard JP', 'Noto Sans KR', sans-serif; font-variant-numeric: tabular-nums;}
#section02.nr.hu_lang_jpn {font-family: 'Pretendard JP', 'Pretendard', 'Meiryo', sans-serif;}
#section02.nr.hu_lang_chn {font-family: 'Sarasa Gothic SC HU', 'Microsoft YaHei', 'PingFang SC', sans-serif;}
#section02.nr * {box-sizing: border-box; margin: 0; padding: 0;}
#section02.nr a {color: inherit; text-decoration: none;}
#section02.nr a:focus {outline: none;}
#section02.nr a:focus-visible, #section02.nr button:focus-visible {outline: 3px solid #19a7ce; outline-offset: 2px;}
#section02.nr ol {list-style: none;}
#section02.nr button {font: inherit; color: inherit; background: none; border: 0; cursor: pointer;}
#section02 .nr_wrap {max-width: 1240px; margin: 0 auto; padding: 0 32px;}

/* 머리: 제목 + 필터 */
/* 제목 아래 선: ABOV 주요색 연두 → 네이비 가로 그라데이션, 2.5px (2026-09-24).
   테두리(border)는 화면 픽셀로 반올림돼 100% 배율에서 2px 로 그려지므로, 2.5px 높이 막대(::after)로 그린다 */
#section02 .nr_head {position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 20.5px;}
#section02 .nr_head::after {content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: linear-gradient(90deg, #8cc63f 0%, #084897 100%);}
#section02 .nr_head h2 {font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--nr-ink);}
#section02 .nr_head h2 small {display: block; margin-top: 6px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--nr-mute);}
#section02 .nr_filter {display: flex; gap: 24px;}
#section02 .nr_filter button {position: relative; padding: 4px 0; font-size: 15.5px; font-weight: 400; color: var(--nr-mute); white-space: nowrap;}
#section02 .nr_filter button[aria-pressed="true"] {color: var(--nr-ink); font-weight: 600;}
#section02 .nr_filter button[aria-pressed="true"]::after {content: ""; position: absolute; left: 0; right: 0; bottom: -20.5px; height: 4px; background: var(--nr-abov);} /* 선택 표시 아래끝 = 제목 아래 선 아래끝 */

/* 타임라인 공통 */
#section02 .nr_tl > li {display: grid; grid-template-columns: var(--nr-cols); align-items: center; position: relative;}
#section02 .nr_tl > li[hidden] {display: none;}
#section02 .rail {align-self: stretch; position: relative;}
#section02 .rail::before {content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid var(--nr-rail); transform: translateX(-1px);}
#section02 .rail i {position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; border: 2px solid var(--nr-rail);}
#section02 .nr_tl > li:first-child .rail::before, #section02 .nr_tl > li.first .rail::before {top: 50%;}
#section02 .nr_tl > li:last-child .rail::before, #section02 .nr_tl > li.last .rail::before {bottom: 50%;}
#section02 .nr_tl > li.first:not(:first-child) .rail::before {top: 50%;}
/* 연도 열: 그 해 첫 행에만 글자 (행을 따로 늘리지 않는다) */
#section02 .yr {align-self: stretch; display: flex; align-items: center; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--nr-ink); visibility: hidden;}
#section02 .yr.show {visibility: visible;}
/* [2026-09-27] 다른 곳의 전역 .show{display:block} 가 flex 를 덮어 연도가 행 위쪽에 붙었다 → 가운데 정렬 유지 */
#section02 .nr_tl .yr, #section02 .nr_tl .yr.show {display: flex !important;}

/* 뉴스 행 */
#section02 .nr_row {border-bottom: 1px solid var(--nr-line); isolation: isolate;} /* hover 배경(::after, z-index:-1)이 섹션 흰 배경 뒤로 숨지 않게 */
#section02 .nr_row a {display: contents;}
#section02 .nr_row > a > * {padding: 18px 0;}
#section02 .nr_row .rail {padding: 0;}
#section02 .nr_row::after {content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nr-soft); opacity: 0; transition: opacity .15s;}
#section02 .nr_row:hover::after {opacity: 1;}
#section02 .date {font-size: 14px; color: var(--nr-mute);}
#section02 .cat {font-size: 13px; font-weight: 600; white-space: nowrap;}
#section02 .cat.p {color: var(--nr-abov);}
#section02 .cat.c {color: var(--nr-green);}
#section02 .t {padding-right: 24px; font-size: 16.5px; font-weight: 400; color: var(--nr-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#section02 .end {padding-right: 8px; font-size: 18px; color: var(--nr-mute);}
#section02 .nr_row:hover .t {color: var(--nr-abov); text-decoration: underline; text-underline-offset: 4px;}
#section02 .nr_row:hover .end {color: var(--nr-abov);}
#section02 .nr_row:hover .rail i {border-color: var(--nr-abov);}

/* 예정 전시 행 — 밝은 파랑 바탕, 전시·행사 분류는 코랄(파랑·연두 뉴스와 다른 계열) */
#section02 .nr_ev {background: var(--nr-sky-bg); color: var(--nr-ink); border-top: 1px solid var(--nr-sky-line); border-bottom: 1px solid var(--nr-sky-line);}
#section02 .nr_ev > * {padding: 26px 0;}
#section02 .nr_ev .rail {padding: 0;}
#section02 .nr_ev .rail i {width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; background: var(--nr-rose); border: 0;
	box-shadow: 0 0 0 0 rgba(244,86,61,.5); animation: nrPulse 1.4s infinite;} /* 2026-09-27 2.2s → 1.4s */
@keyframes nrPulse {70% {box-shadow: 0 0 0 10px rgba(244,86,61,0);} 100% {box-shadow: 0 0 0 0 rgba(244,86,61,0);}}
#section02 .nr_ev .date {color: var(--nr-ink);}
#section02 .nr_ev .date b {display: block; font-size: 17px; font-weight: 600; line-height: 1.2; white-space: nowrap;}
#section02 .cat.e {color: var(--nr-rose);}
#section02 .nr_ev .ttl {min-width: 0; padding-right: 24px;}
#section02 .nr_ev .ttl strong {display: block; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--nr-navy);}
#section02 .nr_ev .ttl em {display: block; font-style: normal; font-size: 14.5px; color: var(--nr-sub);}
/* [2026-09-27] 제목·장소는 무조건 한 줄, 넘치면 … (자동 두 줄 금지) */
#section02 .nr_ev .ttl strong, #section02 .nr_ev .ttl em {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#section02 .nr_ev .ttl em b {font-weight: 600; color: var(--nr-ink);}
#section02 .nr_ev .end {display: flex; align-items: center; gap: 18px; padding-right: 24px; font-size: 15px;}
#section02 .nr_ev .dday {font-size: 14px; font-weight: 600; color: var(--nr-rose); white-space: nowrap;}
#section02 .nr_ev .btn {display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 4px; background: var(--nr-abov); color: #fff; font-weight: 600; white-space: nowrap;}
#section02 .nr_ev .btn:hover {background: #174c8f;}

/* 하단 줄 */
#section02 .nr_foot {display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-left: 250px; font-size: 15px; color: var(--nr-sub);}
#section02 .nr_foot a {font-weight: 600; color: var(--nr-abov);}
#section02 .nr_foot a:hover {text-decoration: underline; text-underline-offset: 4px;}
#section02 .nr_foot .links {display: flex; gap: 28px;}

@media (prefers-reduced-motion: reduce) {#section02 * {animation: none !important; transition: none !important;}}
@media screen and (max-width: 900px) {
	#section02.nr {--nr-cols: 64px 88px 28px minmax(0, 1fr) auto;}
	#section02 .nr_row .cat, #section02 .nr_ev .cat {display: none;}
	#section02 .nr_row .t {grid-column: 4;}
	#section02 .nr_ev .date b {font-size: 15px;}
	#section02 .nr_ev .end .dday {display: none;}
	#section02 .nr_foot {padding-left: 0;}
}
@media screen and (max-width: 640px) {
	#section02.nr {padding: 56px 0; --nr-cols: 40px 60px 22px minmax(0, 1fr) auto;}
	#section02 .yr {font-size: 12px;}
	#section02 .nr_wrap {padding: 0 16px;}
	#section02 .nr_head {flex-direction: column; align-items: flex-start;}
	#section02 .nr_head h2 {font-size: 26px;}
	/* [2026-09-27] 선택 표시(::after)가 스크롤 상자 밖으로 나가 ▲▼ 세로 스크롤바가 생겼다 →
	   아래 여백을 필터 안(padding)으로 옮기고 스크롤바는 숨긴다 (가로로 밀어서 보기는 그대로) */
	#section02 .nr_head {padding-bottom: 0;}
	#section02 .nr_filter {gap: 18px; overflow-x: auto; overflow-y: hidden; width: 100%; padding-bottom: 16px; scrollbar-width: none;}
	#section02 .nr_filter::-webkit-scrollbar {display: none;}
	#section02 .nr_filter button[aria-pressed="true"]::after {bottom: -16px;}
	#section02 .nr_row .end {display: none;}
	#section02 .t {padding-right: 8px;} /* 한 줄 + … 유지 (두 줄 금지) */
	#section02 .nr_ev .ttl strong {font-size: 19px;}
	#section02 .nr_ev .date b {font-size: 12px;}
	#section02 .nr_ev > * {padding: 18px 0;}
	#section02 .nr_ev .rail {padding: 0;}
	#section02 .nr_ev .ttl {padding-right: 10px;}
	/* 전시 행: 더보기 버튼은 같은 줄 오른쪽 (아래 줄로 내리면 왼쪽 타임라인 선이 끊긴다) */
	#section02 .nr_ev > .end {justify-content: flex-end; padding: 0 12px 0 0;}
	#section02 .nr_ev .btn {height: 32px; padding: 0 12px; font-size: 13px;}
}