@charset "utf-8";

/* =========================================================
   History board skin
   - 중복/구형 게시판 기본 CSS 제거
   - 공통 #container_title 영향 최소화
   - 1400~1024 구간에서 좌측 기간 패널/이미지 패널 비율 축소
========================================================= */

/* ---------------------------------------------------------
   1. Basic board utilities
--------------------------------------------------------- */
#bo_list,
#bo_list * {
	box-sizing: border-box;
}

#bo_list {
	position: relative;
	z-index: 1;
	overflow: visible;
}

#bo_list a.btn_admin,
#bo_v a.btn_admin {
	display: none;
}

#bo_list .cnt_cmt {
	display: inline-block;
	margin-left: 3px;
	font-weight: 700;
}

#bo_sch {
	margin-bottom: 10px;
	padding-top: 5px;
	text-align: center;
}

#bo_sch legend,
#bo_cate h2,
#bo_v_info h2,
#bo_v_file h2,
#bo_v_link h2,
#bo_v_top h2,
#bo_v_bot h2,
#bo_v_atc_title,
#bo_vc h1,
#bo_vc_w h2 {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}

/* ---------------------------------------------------------
   2. Message title
--------------------------------------------------------- */
.messageTitle {
	--history-title-fixed-top: 72px;
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	z-index: 100;
	isolation: isolate;
	margin: 0;
	padding: 76px 20px 66px;
	background: #fff;
	text-align: center;
	box-sizing: border-box;
	will-change: top;
}

.messageTitle.is-fixed {
	position: fixed;
	top: var(--history-title-fixed-top);
	left: 0;
	right: 0;
	z-index: 100;
	min-height: var(--history-title-height);
	background: linear-gradient(
		to bottom,
		#fff 0%,
		#fff 72%,
		rgba(255, 255, 255, 0.94) 86%,
		rgba(255, 255, 255, 0) 100%
	) !important;
}

.messageTitle.is-fixed::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 86px;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.92) 0%,
		rgba(255, 255, 255, 0.58) 48%,
		rgba(255, 255, 255, 0) 100%
	);
	pointer-events: none;
}

.messageTitle::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 0;
	background: #fff;
	pointer-events: none;
}

.messageTitle span {
	display: block;
	margin: 0 0 10px;
	color: #777;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.messageTitle h2 {
	margin: 0;
	color: #111;
	font-size: 55px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -1px;
}

.history_title_spacer {
	display: none;
	width: 100%;
	height: 0;
}

.history_content_mask {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	height: var(--history-cover-bottom, 0px);
	background: #fff;
	pointer-events: none;
}

.history-title-fixed .history_content_mask {
	display: block;
}

/* ---------------------------------------------------------
   3. Intro animation
--------------------------------------------------------- */
html.history-2025-page #bo_list,
#bo_list.history-ui-ready.history-content-waiting {
	opacity: 0;
}

#bo_list.history-ui-ready.history-content-reveal {
	animation: historyContentFadeIn 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

html.history-2025-page .messageTitle.history-message-waiting {
	opacity: 0;
}

html.history-2025-page .messageTitle.history-message-reveal {
	animation: historyMessageFadeIn 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes historyMessageFadeIn {
	to { opacity: 1; }
}

@keyframes historyContentFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	html.history-2025-page #bo_list,
	#bo_list.history-ui-ready.history-content-waiting,
	#bo_list.history-ui-ready.history-content-reveal,
	html.history-2025-page .messageTitle.history-message-waiting,
	html.history-2025-page .messageTitle.history-message-reveal {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* ---------------------------------------------------------
   4. Desktop history layout
--------------------------------------------------------- */
#bo_list.history-ui-ready {
	--history-panel-gap: 58px;
	--history-side-pad: 42px;
	--history-nav-width: 170px;
	--history-visual-width: 520px;
	--history-panel-top: 180px;

	display: grid;
	grid-template-columns: var(--history-nav-width) var(--history-visual-width) minmax(0, 1fr);
	column-gap: var(--history-panel-gap);
	align-items: start;
	width: 90%;
	max-width: none;
	margin: 90px auto 150px;
	padding: 0 var(--history-side-pad);
	overflow: visible;
}

/* period navigation */
.history_period_nav {
	grid-column: 1;
	grid-row: 1;
	position: sticky;
	top: var(--history-panel-top);
	left: auto;
	z-index: 30;
	display: flex;
	flex-direction: column;
	align-self: start;
	align-items: flex-start;
	gap: 18px;
	width: var(--history-nav-width);
}

.history_period_btn {
	position: relative;
	display: block;
	width: 160px;
	margin: 0;
	padding: 15px 25px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: transparent;
	color: #111;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -1px;
	text-align: center;
	cursor: pointer;
}

.history_period_btn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 0;
	height: 1px;
	background: #40b387;
	transform: translateY(-50%);
	transition: width 0.25s ease;
}

.history_period_btn.is-active {
	border-color: #40b387;
	background: #40b387;
	color: #fff;
}

.history_period_btn.is-active::before {
	width: 26px;
}

/* fixed visual panel */
.history_visual_panel {
	grid-column: 2;
	grid-row: 1;
	position: sticky;
	top: var(--history-panel-top);
	left: auto;
	z-index: 5;
	align-self: start;
	width: var(--history-visual-width);
	min-width: 0;
}

.history_visual_period {
	margin: 0 0 28px;
	color: #40b387;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -2px;
	text-align: center;
}

.history_visual_frame {
	position: relative;
	width: 100%;
	overflow: visible;
	background: #fff;
}

.history_visual_empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: 1px solid #eee;
	color: #999;
	font-size: 15px;
	box-sizing: border-box;
}

.history_visual_slide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	height: auto;
	opacity: 0;
	transform: translateY(52px);
	transition: opacity 0.42s ease, transform 0.42s ease;
}

.history_visual_slide.is-active {
	position: relative;
	opacity: 1;
	transform: translateY(0);
}

.history_visual_slide.is-leaving {
	opacity: 0;
	transform: translateY(-46px);
}

.history_visual_slide img {
	display: block;
	width: 90%;
	height: auto;
	margin: 0 auto;
	border-radius: 10px;
	box-shadow: 10px 12px 20px rgba(0, 0, 0, 0.2);
	object-fit: contain;
}

.history_visual_slide.is-multiple img {
	height: auto;
}

/* content column */
.history_content_column {
	grid-column: 3;
	grid-row: 1;
	position: relative;
	z-index: 10;
	display: block;
	width: 100%;
	min-width: 0;
}

#bo_list.history-ui-ready .list_year {
	position: relative;
	z-index: 10;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 0 118px 16px;
	border: 0;
	overflow: visible;
	scroll-margin-top: calc(var(--history-cover-bottom, 170px) + 44px);
	box-sizing: border-box;
}

#bo_list.history-ui-ready .list_year > .menufont,
#bo_list.history-ui-ready .list_year.history-sticky-ready > .menufont {
	position: static !important;
	display: block;
	margin: 0 0 28px;
	padding: 0;
	transform: none !important;
	background: transparent;
	color: #111;
	font-size: 45px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -1px;
	will-change: auto;
}

#bo_list.history-ui-ready .mc_con {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 22px;
	align-items: start;
	margin: 0 0 34px;
}

#bo_list.history-ui-ready .mc_con:last-child {
	margin-bottom: 0;
}

#bo_list.history-ui-ready .mc_con .list_month {
	color: #40b387;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
}

#bo_list.history-ui-ready .mc_con .list_content {
	display: block;
	min-width: 0;
	margin: 0;
	color: #333;
	font-size: 16px;
	line-height: 1.85;
	letter-spacing: -1px;
}

#bo_list.history-ui-ready .list_image {
	display: none;
}

#bo_list.history-ui-ready .mc_con .list_content h2 {
	margin: 0 0 12px;
	color: #111;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -1px;
}

#bo_list.history-ui-ready .mc_con .list_content p {
	display: block;
	margin: 0;
	color: #333;
	font-size: 15px;
	line-height: 1.85;
	letter-spacing: -1px;
}

/* highlighted text */
.point {
	position: relative;
	z-index: 10;
	display: inline-block;
	margin: 0 5px;
	color: #d03434;
}

.point a {
	color: #111;
}

.point::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: 103%;
	height: 24px;
	border-bottom: 2px solid #40b387;
	transform: translateX(-49%);
}

/* ---------------------------------------------------------
   5. Responsive: keep 3-column desktop layout until 1024
--------------------------------------------------------- */
@media screen and (max-width: 1500px) {
	#bo_list.history-ui-ready {
		--history-panel-gap: 46px;
		--history-side-pad: 32px;
		--history-nav-width: 160px;
		--history-visual-width: 460px;
		width: 94%;
	}

	.history_period_btn {
		width: 150px;
		padding: 14px 20px;
	}

	.history_visual_period {
		font-size: 44px;
	}

	#bo_list.history-ui-ready .list_year {
		padding-left: 10px;
	}

	#bo_list.history-ui-ready .list_year > .menufont,
	#bo_list.history-ui-ready .list_year.history-sticky-ready > .menufont {
		font-size: 42px;
	}

	#bo_list.history-ui-ready .mc_con .list_content h2 {
		font-size: 21px;
	}
}

@media screen and (max-width: 1400px) {
	#bo_list.history-ui-ready {
		--history-panel-gap: 34px;
		--history-side-pad: 24px;
		--history-nav-width: 148px;
		--history-visual-width: 390px;
		width: 96%;
	}

	.history_period_nav {
		gap: 14px;
	}

	.history_period_btn {
		width: 140px;
		padding: 13px 16px;
		font-size: 15px;
	}

	.history_visual_period {
		margin-bottom: 22px;
		font-size: 40px;
		letter-spacing: -1.5px;
	}

	#bo_list.history-ui-ready .list_year {
		padding: 0 0 94px 8px;
	}

	#bo_list.history-ui-ready .list_year > .menufont,
	#bo_list.history-ui-ready .list_year.history-sticky-ready > .menufont {
		margin-bottom: 22px;
		font-size: 40px;
	}

	#bo_list.history-ui-ready .mc_con {
		margin-bottom: 30px;
	}

	#bo_list.history-ui-ready .mc_con .list_month {
		font-size: 18px;
	}

	#bo_list.history-ui-ready .mc_con .list_content h2 {
		font-size: 20px;
		line-height: 1.45;
	}

	#bo_list.history-ui-ready .mc_con .list_content p {
		font-size: 15px;
		line-height: 1.8;
	}
}

@media screen and (max-width: 1280px) {
	.messageTitle {
		--history-title-fixed-top: 66px;
		padding: 64px 20px 56px;
	}

	.messageTitle h2 {
		font-size: 40px;
	}

	#bo_list.history-ui-ready {
		--history-panel-gap: 28px;
		--history-side-pad: 22px;
		--history-nav-width: 138px;
		--history-visual-width: 330px;
		width: 98%;
		margin-top: 78px;
	}

	.history_period_btn {
		width: 130px;
		padding: 12px 13px;
		font-size: 14px;
	}

	.history_visual_period {
		font-size: 35px;
	}

	#bo_list.history-ui-ready .list_year {
		padding: 0 0 84px 6px;
	}

	#bo_list.history-ui-ready .list_year > .menufont,
	#bo_list.history-ui-ready .list_year.history-sticky-ready > .menufont {
		font-size: 36px;
	}

	#bo_list.history-ui-ready .mc_con .list_content h2 {
		font-size: 19px;
	}

	#bo_list.history-ui-ready .mc_con .list_content p {
		font-size: 14px;
		line-height: 1.78;
	}
}

@media screen and (max-width: 1160px) {
	#bo_list.history-ui-ready {
		--history-panel-gap: 24px;
		--history-side-pad: 18px;
		--history-nav-width: 128px;
		--history-visual-width: 280px;
		width: 100%;
	}

	.history_period_btn {
		width: 120px;
		padding: 11px 10px;
		font-size: 13px;
	}

	.history_period_btn.is-active::before {
		width: 18px;
	}

	.history_visual_period {
		font-size: 31px;
	}

	#bo_list.history-ui-ready .list_year {
		padding-bottom: 72px;
	}

	#bo_list.history-ui-ready .list_year > .menufont,
	#bo_list.history-ui-ready .list_year.history-sticky-ready > .menufont {
		font-size: 32px;
	}

	#bo_list.history-ui-ready .mc_con .list_month {
		font-size: 16px;
	}

	#bo_list.history-ui-ready .mc_con .list_content h2 {
		font-size: 18px;
	}

	#bo_list.history-ui-ready .mc_con .list_content p {
		font-size: 14px;
	}
}

@media screen and (max-width: 1024px) {
	.messageTitle {
		--history-title-fixed-top: 0px;
		position: relative;
		top: auto;
		padding: 58px 18px 44px;
	}

	.messageTitle.is-fixed {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		min-height: 0 !important;
	}

	.messageTitle::before,
	.messageTitle.is-fixed::after,
	.history_title_spacer,
	.history_content_mask {
		display: none !important;
		height: 0 !important;
	}

	.messageTitle span {
		font-size: 16px;
	}

	.messageTitle h2 {
		font-size: 34px;
	}

	#bo_list.history-ui-ready {
		display: block;
		width: 80%;
		margin:0px auto 110px;
		padding: 0 22px;
	}

	.history_period_nav {
		position: sticky !important;
		top: 70px;
		left: auto;
		z-index: 60;
		display: flex !important;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		width: auto;
		height: auto;
		margin: 0 0 32px;
		padding: 0 0 14px;
		overflow-x: auto;
		overflow-y: hidden;
		background: #fff;
		-webkit-overflow-scrolling: touch;
	}

	.history_period_btn {
		flex: 0 0 auto;
		width: auto;
		min-width: 118px;
		padding: 13px 18px;
		font-size: 15px;
		white-space: nowrap;
	}

	.history_period_btn.is-active {
		padding-left: 28px;
	}

	.history_period_btn.is-active::before {
		width: 20px;
	}

	.history_visual_panel {
		display: none !important;
	}

	#bo_list.history-ui-ready .list_year {
		display: block;
		padding: 0 0 58px;
	}

	#bo_list.history-ui-ready .list_year > .menufont,
	#bo_list.history-ui-ready .list_year.history-sticky-ready > .menufont {
		margin: 0 0 20px;
		font-size: 36px;
	}

	#bo_list.history-ui-ready .mc_con {
		display: block;
		margin: 0 0 34px;
	}

	#bo_list.history-ui-ready .mc_con .list_month {
		margin: 0 0 8px;
		font-size: 16px;
	}

	#bo_list.history-ui-ready .list_image {
		display: block;
		margin: 0 0 18px;
	}

	#bo_list.history-ui-ready .list_image img {
		display: block;
		width: 100%;
		max-width: 400px;
		height: auto;
		border-radius:10px;
	}

	#bo_list.history-ui-ready .mc_con .list_content h2 {
		font-size: 19px;
	}

	#bo_list.history-ui-ready .mc_con .list_content p {
		font-size: 15px;
		line-height: 1.75;
	}

	.history_period_nav{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        width:100% !important;

        display:grid !important;
        grid-template-columns:repeat(4,1fr);
        gap:12px;

        overflow:visible !important;
        padding:0;
        margin:0 0 40px;
    }

    .history_period_btn{
        width:100%;
        min-width:0;
        padding:14px 10px;
        font-size:15px;
    }

    .history_period_btn.is-active{
        padding-left:10px;
    }

    .history_period_btn:before{
        display:none;
    }


}

@media screen and (max-width: 820px) {
	.history_period_nav {
		top: 64px;
	}

	
    .history_period_nav{

        grid-template-columns:repeat(2,1fr);

        gap:10px;
    }

    .history_period_btn{

        font-size:14px;

        padding:13px 8px;
    }

	.messageTitle {margin-top:0px !important}
}

@media screen and (max-width: 600px) {
	.history_period_nav {
		top: 58px;
	}

	.history_period_btn {
		min-width: 108px;
		padding: 12px 16px;
		font-size: 14px;
	}

	#bo_list.history-ui-ready {width:100%}

		#bo_list.history-ui-ready .list_image img {
		display: block;
		width: 100%;
		max-width: 300px;
		height: auto;
	}


	/* 600px 이하에서는 역사연표 제목 fixed 기능 사용 안 함 */
	html.history-2025-page .messageTitle,
	html.history-2025-page .messageTitle.is-fixed {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		z-index: 1 !important;
		min-height: 0 !important;
		transform: none !important;
		will-change: auto !important;
	}

	html.history-2025-page .history_title_spacer,
	html.history-2025-page .history_content_mask,
	html.history-2025-page.history-title-fixed .history_content_mask {
		display: none !important;
		height: 0 !important;
	}
}

/* ---------------------------------------------------------
   6. Common sub visual guard
   - 공통 head.php의 #container_title은 이 스킨 CSS가 직접 건드리지 않음
   - JS에서 class가 붙은 경우에만 애니메이션 제어
--------------------------------------------------------- */
html.history-2025-page:not(.history-2025-title-start) #container_title {
	animation-play-state: paused !important;
}

html.history-2025-page.history-2025-title-start #container_title {
	animation-play-state: running !important;
}