@charset "UTF-8";
/* 최상단 공지 티커
   메인(style.css+main.css)과 서브(header.css …) 가 서로 다른 CSS 묶음을 쓰기
   때문에 어느 쪽에 넣어도 한쪽이 비어 버린다. 그래서 별도 파일로 빼서
   head.sub.php 에서 조건 없이 싣는다. */

/* ── 최상단 공지 티커 (시계 옆) ───────────────────────────
   예전에는 메인 본문 가운데 .notice 큰 카드였다. 상단 바가 얇아서
   한 줄 티커로 압축한다. */
.header_notice {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	/* 늘어나면 더보기가 화면 오른쪽 끝까지 밀려 시계와 따로 놀아서 폭을 묶는다 */
	flex: 0 1 auto;
	max-width: min(660px, 50vw);
	margin-left: 18px;
	padding-left: 18px;
	border-left: 1px solid #E5E5E5;
}
.header_notice__tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: 6px;
	background: #E6FBF8;
	color: #00857F;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
.header_notice__tag .icon { font-size: 14px; }
.header_notice__vp {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 22px;
	overflow: hidden;
}
.header_notice__list { margin: 0; padding: 0; list-style: none; }
.header_notice__item { height: 22px; }
.header_notice__item[hidden] { display: none; }
.header_notice__item a {
	display: block;
	overflow: hidden;
	color: #333;
	font-size: 13.5px;
	line-height: 22px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.header_notice__item a:hover { color: #00857F; text-decoration: underline; text-underline-offset: 3px; }
.header_notice[data-dir="next"] .header_notice__item:not([hidden]) { animation: hn_up 280ms ease-out; }
.header_notice[data-dir="prev"] .header_notice__item:not([hidden]) { animation: hn_down 280ms ease-out; }
@keyframes hn_up   { from { transform: translateY(100%);  opacity: 0; } }
@keyframes hn_down { from { transform: translateY(-100%); opacity: 0; } }

.header_notice__nav { display: grid; flex: 0 0 auto; }
.header_notice__nav button {
	display: grid;
	place-items: center;
	width: 20px;
	height: 11px;
	padding: 0;
	border: 0;
	background: none;
	color: #9AA5AD;
	cursor: pointer;
}
.header_notice__nav button:hover { color: #00857F; }
.header_notice__nav svg { width: 8px; height: 6px; }
.header_notice__more {
	flex: 0 0 auto;
	color: #666;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
}
.header_notice__more:hover { color: #00857F; }

@media (max-width: 1024px) {
	.header_notice__more,
	.header_notice__nav { display: none; }
	.header_notice { margin-left: 12px; padding-left: 12px; }
}
@media (max-width: 640px) {
	.header_notice__tag span { display: none; }
}