@charset "utf-8";
/* ----------------------------------------------------------------------------------------------
 *                 ORANGE-PMI PLATFORM  Version 2.0.0 - Last modified 2026-10-13
 *           Modular Web Architecture · Powered by Orangecommunication · www.oranc.net
 * ----------------------------------------------------------------------------------------------
 * 연혁 타임라인 — 이 스킨만의 구조(sk-history*). 색·글자 크기는 사이트 토큰을 읽는다.
 *
 * history.css (skin/history/basic/asset) — list.php 가 asset_head('skin::history.css') 로 건다. 셸이 여섯 장 뒤에 낸다.
 *   왼쪽 칸에 연도(h2), 그 경계에 세로 선 하나, 오른쪽 칸의 항목마다 선 위에 점이 선다.
 *   800px 아래에서는 한 칸으로 접히고 선이 왼쪽 가장자리로 간다 — 그때는 연도 머리에 점이 선다(레거시 skin.css 의 반응형과 같은 흐름).
 *   값: 칸 폭·간격은 이 스킨만의 구조라 여기 적는다. 색은 --color-primary(선·점·날짜) · --color-primary-ink(연도) · --border-color-cell(연도 사이 점선).
 * ---------------------------------------------------------------------------------------------- */

.sk-history {
	--sk-history-col : 200px;   /* 연도 칸 폭 */
	--sk-history-gap : 48px;    /* 연도 칸과 내용 칸 사이 */
	position : relative;
	margin   : 0;
	padding  : 0;
	list-style : none;
}
/* 세로 선 — 연도 칸의 오른쪽 경계 */
.sk-history::before {
	content    : '';
	position   : absolute;
	top        : .6em;
	bottom     : 0;
	left       : var(--sk-history-col);
	width      : 1px;
	background : var(--color-primary);
}

.sk-history__year {
	display               : grid;
	grid-template-columns : var(--sk-history-col) 1fr;
	column-gap            : var(--sk-history-gap);
	padding               : 0 0 2.5em;
}
.sk-history__year + .sk-history__year {
	padding-top : 2.5em;
	border-top  : 1px dashed var(--border-color-cell);
}

.sk-history__yr {
	margin      : 0;
	color       : var(--color-primary-ink);
	font-size   : 2.4em;
	font-weight : 800;
	line-height : 1;
}

.sk-history__list {
	margin     : 0;
	padding    : .2em 0 0;
	list-style : none;
}
.sk-history__item {
	position : relative;
}
.sk-history__item + .sk-history__item {
	margin-top : 1.4em;
}
/* 점 — 세로 선 위에 */
.sk-history__item::before {
	content       : '';
	position      : absolute;
	top           : .5em;
	left          : calc(-1 * var(--sk-history-gap) - 3px);
	width         : 7px;
	height        : 7px;
	border-radius : 50%;
	background    : var(--color-primary);
}

.sk-history__date {
	display     : block;
	margin      : 0 0 .25em;
	color       : var(--color-primary);
	font-size   : var(--font-size-lg);
	font-weight : 700;
}
.sk-history__txt {
	margin      : 0;
	line-height : 1.6;
	word-break  : keep-all;
}
.sk-history__fig {
	margin : .8em 0 0;
}
.sk-history__fig img {
	display   : block;
	max-width : 100%;
	height    : auto;
}

@media screen and (max-width: 1024px) {
	.sk-history {
		--sk-history-col : 150px;
		--sk-history-gap : 40px;
	}
	.sk-history__yr {
		font-size : 2em;
	}
}

/* 한 칸 — 선이 왼쪽 가장자리로, 점은 연도 머리에 */
@media screen and (max-width: 800px) {
	.sk-history::before {
		top  : .4em;
		left : 8px;
	}
	.sk-history__year {
		grid-template-columns : 1fr;
		row-gap               : 1em;
		padding-left          : 32px;
	}
	.sk-history__yr {
		position  : relative;
		font-size : 1.8em;
	}
	.sk-history__yr::before {
		content       : '';
		position      : absolute;
		top           : .35em;
		left          : -27px;
		width         : 7px;
		height        : 7px;
		border-radius : 50%;
		background    : var(--color-primary);
	}
	.sk-history__item::before {
		display : none;
	}
	.sk-history__item + .sk-history__item {
		margin-top : 1em;
	}
	.sk-history__date {
		font-size : var(--font-size-base);
	}
}