@charset "UTF-8";
/*-----------
style.css
-----------*/
acronym, address, big, cite,
del, dfn, ins, kbd, samp,
strike, sub, sup, tt, var, fieldset,
legend, canvas, details, figure, figcaption,
hgroup, output, ruby,
time, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	img {
		height: auto;
		max-width: 100%;
		border-radius: 0.365em;
	}

	.grid > * { min-width: 0; }

	.icon {
		display: inline-block;
		width: 1.25em;
		height: 1.25em;
		vertical-align: -0.2em;
		background-color: currentColor;   /* 글자색을 그대로 따라감 */
		-webkit-mask: var(--icon) no-repeat center / contain;
		mask: var(--icon) no-repeat center / contain;
	}

	/* 메뉴 옆 아이콘: 크기만 다르게 */
	.icon.menu-icon {
		width: 1.5rem;
		height: 1.5rem;
		margin-right: 0;
		vertical-align: middle;
	}
	.icon.menus-icon {
		width: 0.7rem;
		height: 0.7rem;
		margin-right: 0;
		vertical-align: middle;
	}

	/* 메인 그래프 아이콘 */
	.icon.graph {
		width: 2.5rem;
		height: 2.5rem;
		background: var(--primary);
		margin-right: 0;
		vertical-align: middle;
	}

	/* 모바일에서만 줄바꿈 */
	@media (max-width: 767px) {
	    .br-mobile {
	        display: block;
	    }
	}

	/* PC에서는 줄바꿈 제거 */
	@media (min-width: 768px) {
	    .br-mobile {
	        display: none;
	    }
	}

	/* Breadcrumb */
		.breadcrumb {
			display: block;
			width: fit-content;
			/*margin: 0 auto;*/
			font-family: 'Noto Serif KR', sans-serif;
			font-weight: 600;
			font-size: 0.8rem;
			line-height: 1.5;
			text-align: right;
		}

		.breadcrumb a {
			color: #5d87ff;
			text-decoration: none;
		}
		.breadcrumb a:hover {
			color: #49beff;
			text-decoration: none;
		}
		.breadcrumb a:focus-visible {
			outline: 2px solid currentColor;
			outline-offset: 2px;
		}

		/* 현재 페이지 */
		.breadcrumb-current {
			color: #888;
		}

		/* 링크가 없는 상위 경로 */
		.breadcrumb-text {
			color: #888;
		}

		/* > 구분자 */
		.breadcrumb-separator {
			display: inline-block;
			margin: 0 0.5rem;
			color: #aaa;
		}

		@media screen and (max-width: 736px) {
			.breadcrumb {
				/*display: none;*/
		}
	}

	/* Breadcrumb 테이블 박스 */
		.subbar {
			display: flex;
			align-items: center;
			min-height: 60px;
			padding: 0 32px;              /* topbar 좌우 여백과 같게 */
			background: #fff;
			border-bottom: 1px solid #e5e7eb;
			font-size: .875rem;
		}

		@media (max-width: 768px) {
			.subbar {
				padding: 0 16px;
				overflow-x: auto;           /* 경로가 길면 가로 스크롤 */
				white-space: nowrap;
			}
		}


	.both {
		clear: both;
	}
	b, strong {
		color: var(--text);
		/*font-family: 'Noto Serif KR', sans-serif !important;*/
		font-weight: 600 !important;
		background: linear-gradient(transparent 0%, #90E0EF 0%);
		padding: 0.3rem 0.5rem !important;
	}

	.small {
		font-size: 0.8rem !important;
	}
	.smalls {
		font-size: 0.9rem !important;
	}

	.scn {
		font-size: 0.8rem !important;
	}
@media (max-width: 767px) {
	.small {
		font-size: 1.05rem !important;
		}

	.smalls {
		font-size: 1.05rem !important;
		}
	.scn {
		font-size: 0.8rem !important;
		}
}

/* 텍스트 위치 */
	.align-left {
		text-align: left !important;
	}
	.align-center {
		text-align: center !important;
	}
	.align-right {
		text-align: right !important;
	}

	.fl {
		float: left;
	}
	.fr {
		float: right;
	}

	.flex-left {
		justify-content: flex-start !important;
	}
/* 폰트 한글 + 영문 */
	.kr {
		font-family: 'Noto Serif KR', sans-serif !important;
	}
	.eng {
		font-family: "Taviraj", serif !important;
	}
	.ssp {
		font-family: "Source Sans Pro", Helvetica, sans-serif !important;
	}

	hr {
		clear: both;
		margin: 3rem 0;
		color: inherit;
		background-color: #303030;
		opacity: .25;
	}
	hr.major {
		border: 0;
		border-bottom: 0.1rem dashed #ddd;
		margin: 3rem 0;
		color: inherit;
		background-color: currentColor;
		opacity: .25;
	}
/* 위 · 아래 간격 */
	.mt-0 { margin-top: 0rem !important; }
	.mt-1 { margin-top: 1rem !important; }
	.mt-2 { margin-top: 2rem !important; }
	.mt-3 { margin-top: 3rem !important; }
	.mt-4 { margin-top: 4rem !important; }
	.mt-5 { margin-top: 5rem !important; }

	.mb-0 { margin-bottom: 0.3rem !important; }
	.mb-1 { margin-bottom: 1rem !important; }
	.mb-2 { margin-bottom: 2rem !important; }
	.mb-3 { margin-bottom: 3rem !important; }
	.mb-4 { margin-bottom: 4rem !important; }
	.mb-5 { margin-bottom: 5rem !important; }

	.ml-0 { margin-left: 0rem !important; }
	.ml-1 { margin-left: 1rem !important; }
	.ml-2 { margin-left: 2rem !important; }
	.ml-3 { margin-left: 3rem !important; }
	.ml-4 { margin-left: 4rem !important; }
	.ml-5 { margin-left: 5rem !important; }

	.mr-0 { margin-right: 0.3rem !important; }
	.mr-1 { margin-right: 1rem !important; }
	.mr-2 { margin-right: 2rem !important; }
	.mr-3 { margin-right: 3rem !important; }
	.mr-4 { margin-right: 4rem !important; }
	.mr-5 { margin-right: 5rem !important; }

/* 텍스트 굵기 */
	.fw-1 { font-weight: 100 !important; }
	.fw-2 { font-weight: 200 !important; }
	.fw-3 { font-weight: 300 !important; }
	.fw-4 { font-weight: 400 !important; }
	.fw-5 { font-weight: 500 !important; }
	.fw-6 { font-weight: 600 !important; }
	.fw-7 { font-weight: 700 !important; }
	.fw-8 { font-weight: 800 !important; }
	.fw-9 { font-weight: 900 !important; }

/* 텍스트 크기 */
	.fs-1 { font-size: 1rem !important; }
	.fs-2 { font-size: 1.2rem !important; }
	.fs-3 { font-size: 1.3rem !important; }
	.fs-4 { font-size: 1.4rem  !important; }
	.fs-5 { font-size: 1.5rem !important; }
	.fs-6 { font-size: 1.6rem !important; }
	.fs-7 { font-size: 1.7rem !important; }
	.fs-8 { font-size: 1.8rem !important; }
	.fs-9 { font-size: 1.9rem !important; }

/* 텍스트 컬러 */
	.text { color: #2a3547 !important; }
	.texts { color: #6c6f73 !important; }
	.texta { color: #4C4D50 !important; }
	.textb { color: #7A7D81 !important; }
	.textc { color: #9C9FA2 !important; }
	.textd { color: #AFB1B4 !important; }

	mark {
		background-color: #FFD800;
		color: var(--text);
		font-weight: 600 !important;
		padding: 0.3rem 0.5rem;
	}

	code {
		font-family: 'Noto Serif KR', sans-serif;
		font-size: 0.9rem;
		margin: 0 0.25rem;
		border: solid 2px;
		border-radius: 0.3rem;
		padding: 0.3rem 0.5rem;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.9rem;
		margin: 0 0 2rem 0;
	}

		pre code {
			display: block;
			line-height: 1.75;
			padding: 1rem 1.5rem;
			overflow-x: auto;
		}


/* New Hot */
	.new {
		font-weight: 900;
		background: linear-gradient(to right, #FF8400, #FFC600); /* 그라데이션 색상 설정 */
		-webkit-background-clip: text; /* 텍스트에 배경을 클립 */
		-webkit-text-fill-color: transparent; /* 텍스트 색상을 투명으로 설정 */
		text-align: center; /* 텍스트 정렬 */
	}
	.hot {
		font-weight: 900;
		background: linear-gradient(to right, #A12B2B, #DF7474); /* 그라데이션 색상 설정 */
		-webkit-background-clip: text; /* 텍스트에 배경을 클립 */
		-webkit-text-fill-color: transparent; /* 텍스트 색상을 투명으로 설정 */
		text-align: center; /* 텍스트 정렬 */
	}
	.mobi {
    font-weight: 900;
		background: linear-gradient(to right, #C2438B, #ED8BC2); /* 그라데이션 색상 설정 */
		-webkit-background-clip: text; /* 텍스트에 배경을 클립 */
		-webkit-text-fill-color: transparent; /* 텍스트 색상을 투명으로 설정 */
		text-align: center; /* 텍스트 정렬 */
	}


	blockquote {
		clear: both;
		border-left: solid 4px;
		font-style: italic;
		margin: 0 0 2rem 0;
		padding: 0.5rem 1rem 0.5rem 1rem;
	}
	blockquote {
		background-color: var(--bg);
		border-left-color: var(--muted);
	}
	blockquote p {
		    color: #878E94;
		    font-size: 1.15rem;		    
		    /* font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; */
		    font-family: 'Noto Serif KR', sans-serif;
		    font-weight: 400;
		    letter-spacing: 0.075em;
		    word-spacing: 0.1em;
		    line-height: 200%;
		    margin: 0 0 0.3em 0;
	}

/* 정의 목록 (용어 + 설명) */
	#content dl {
	margin: 0 0 2rem 0;
	}

	#content dt {
		    font-size: 1rem;
		    margin: 1rem 0;
		    padding: 0.1rem 0 0.25rem 0.75rem;
		    border-left: 0.25rem solid #49beff;
		    font-weight: 700;
		    color: var(--text);
	}

	#content dd {
		    font-size: 1rem;
		    margin: 0;
		    padding: 0 0 1rem 1rem;
		    border-bottom: 0.1rem dashed var(--line);
	}

	#content dd:last-child {
		    border-bottom: 0;
	}

	/* 한 용어에 설명이 여러 개일 때 */
	#content dd + dd {
		    padding-top: 0.5rem;
	}

/* 선택: 넓은 화면에서 용어와 설명을 좌우로 배치 (<dl class="dl-row">) */
@media (min-width: 737px) {
	#content dl.dl-row {
		    display: grid;
		    grid-template-columns: 12rem minmax(0, 1fr);
	}
	#content dl.dl-row dt,
	#content dl.dl-row dd {
		    padding-top: 1rem;
		    padding-bottom: 1rem;
		    border-bottom: 0.1rem dashed var(--line);
	}
	#content dl.dl-row dd {
		    padding-left: 1rem;
	}
	#content dl.dl-row dt:nth-last-of-type(1),
	#content dl.dl-row dd:last-child {
		    border-bottom: 0;
	}
}

	/* 본문 목록 (클래스가 없는 ul/ol만 적용) */
	#content ul:not([class]) {
		list-style: disc;
		margin: 0 0 2rem 0;
		padding-left: 1rem;
	}
	#content ul:not([class]):last-child {
		margin: 0 0 0 0;
	}
	#content ol:not([class]) {
		list-style: decimal;
		margin: 0 0 2rem 0;
		padding-left: 1.25rem;
	}

	#content :is(ul, ol):not([class]) > li {
		color: var(--muted);
		font-size: 1rem;
		line-height: 1.8;
		text-align: justify;
		letter-spacing: 0.08em;
		word-spacing: 0.1em;
		padding: 1rem 0 1rem 0.5rem;

		border-bottom: 0.1rem dashed var(--lines);
		padding: 1rem 0 1rem 0.5rem;
	}
	@media screen and (max-width: 736px) {
		#content :is(ul, ol):not([class]) > li {
			font-size: 1rem;
		}
	}
	#content :is(ul, ol):not([class]) > li:last-child {
		border-bottom: 0;
	}

	#content ol:not([class]) > li {
		font-size: 1.15rem;
	}

	#content :is(ul, ol):not([class]) > li::marker {
		font-family: 'Noto Serif KR', sans-serif;
		color: #2A3547;
	}

	/* 중첩 목록: 구분선 없이 간격만 */
	#content :is(ul, ol):not([class]) :is(ul, ol) {
		margin: 0.75rem 0 0 0;
	}

	#content :is(ul, ol):not([class]) :is(ul, ol) > li {
		border-bottom: 0;
		padding: 0.4rem 0 0.4rem 0.5rem;
		font-size: 1rem;
	}

	#content ul:not([class]) ul { list-style: circle; }
	#content ol:not([class]) ol { list-style: lower-alpha; }

/* 이미지 설명 (figcaption) 박스 */
	#content figure {
		margin: 0;
	}

	#content figure img {
		display: block;
		max-width: 100%;
		height: auto;
		border-radius: 0.5rem 0.5rem 0 0;
	}

	#content figure figcaption {
		margin: 0 0 2rem 0;
		padding: 0.6rem 1rem;
		background: var(--primary-soft);
		color: var(--text);
		font-size: 0.9rem;
		text-align: left;
		border-radius: 0 0 0.5rem 0.5rem;
	}


/* Section/Article */

	section.special, article.special {
		text-align: center;
	}

	header {
		cursor: default;
	}

		header > .date {
			display: block;
			font-size: 0.8rem;
			height: 1;
			margin: 0 0 1rem 0;
			position: relative;
		}

		@media screen and (max-width: 736px) {
			.breadcrumb {
				margin-bottom: 1rem;
				text-align: left;
		}
	}
		header > p {
			font-style: normal;
		}

		header > h1 + p {
			font-size: 1rem;
			margin-top: -0.5rem;
			line-height: 2;
		}

		header > h2 + p {
			font-size: 1rem;
			margin-top: -0.75rem;
		}

		header > h3 + p {
			font-size: 0.9rem;
			margin-top: -0.75rem;
		}

		header > h4 + p {
			font-size: 0.8rem;
			margin-top: -0.75rem;
		}

		header.major {
			margin: 0 0 4rem 0;
			text-align: center;
		}

			header.major > :last-child {
				margin-bottom: 0;
			}

			header.major > p {
				margin-top: 0;
				text-align: center;
			}

			header.major > .date {
				font-size: 1rem;
				margin: 0 0 4rem 0;
			}

				header.major > .date:before, header.major > .date:after {
					content: '';
					display: block;
					position: absolute;
					top: 50%;
					width: calc(50% - 6rem);
					border-top: solid 2px;
				}

				header.major > .date:before {
					left: 0;
				}

				header.major > .date:after {
					right: 0;
				}

		@media screen and (max-width: 980px) {

			header br {
				display: none;
			}

		}

		@media screen and (max-width: 736px) {

			header.major {
				margin: 0 0 2rem 0;
			}

		}

	header.major .date:before, header.major .date:after {
		border-top-color: #eeeeee;
	}


	h1, h2, h3, h4, h5, h6 {
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-weight: 900;
		line-height: 1.5;
		letter-spacing: 0.075em;
		text-transform: uppercase;
		margin: 0 0 1rem 0;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			border-bottom: 0;
			color: inherit;
			text-decoration: none;
		}

	h1 {
		font-size: 2.55rem;
		line-height: 1.1;
		margin: 0 0 1rem 0;
	}
	@media screen and (max-width: 736px) {
		h1 {
			font-size: 1.75rem;
			line-height: 1.2;
			margin: 0 0 1.5rem 0;
		}
	}

	h2 {
		font-size: 1.75rem;
		line-height: 1.3;
		margin: 0 0 1.5rem 0;
	}
	@media screen and (max-width: 736px) {
		h2 {
			font-size: 1.25rem;
		}
	}

	h3 {
		font-size: 1.25rem;
		margin: 0 0 1.5rem 0;
	}
	#content h3:where(:not(.chart-card h3, .post h3))::before {
		content: "";
		display: inline-block;
		width: 1.1em;
		height: 1.1em;
		margin-right: .45em;
		vertical-align: -0.2em;
		background-color: var(--primary, #5d87ff);    /* 아이콘 색 */
		-webkit-mask: url(/images/icons/material-symbols--action-key.svg) no-repeat center / contain;
		mask: url(/images/icons/material-symbols--action-key.svg) no-repeat center / contain;
	}

	h4 {
		display: inline-block;

		align-items: center;
 		vertical-align: middle;
		height: 100%;
		margin: 0;

		font-size: 1rem;
		padding: 0.5rem;
		border-radius: 0.3rem;
		background: linear-gradient(transparent 0%, #E9EDEE 0%);
	}

	h5 {
		display: inline-block;
		font-size: 1rem;
		font-family: 'Noto Serif KR', sans-serif;
		padding: 0.5rem;
		border-radius: 0.3rem;
		background: linear-gradient(transparent 0%, #E9EBED 0%);
	}

	h6 {
		font-size: 0.8rem;
	}

	/* Page Header */
	.page-header {
		margin: 2rem 0 3rem 0;
		text-align: left;
		padding: 0 0 1rem 0.5rem;
		border-bottom: 0.2rem solid #303030;
	}

	.page-header h1 {
		margin: 0 0 0.5rem 0;
	}

	.page-header p {
		margin: 0 0 1.5rem 0 !important;
		font-size: 1rem !important;
		line-height: 1.8;
		color: var(--muted) !important;
	}

	/* Paragraph */
	#content p {
		/*margin: 0 0 2rem 0;*/
		font-size: 1rem;
		/*font-family: "Source Sans Pro", Helvetica, sans-serif;*/
		line-height: 1.8;
		text-align: justify;
		letter-spacing: 0.08em;
		word-spacing: 0.1em;
		color: var(--texts);
		/*color: var(--muted);*/
	}

	#content p:last-child {
		margin-bottom: 0;
	}

@media screen and (max-width: 736px) {
	#content p {
		font-size: 1rem;
	}
}

/* Section Icon */
	.section-title {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
	.section-title::before {
		content: "";
		display: inline-block;
		width: 1.7em;
		height: 1.7em;
		margin-right: 0.5rem;
		vertical-align: -0.15em;
		background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path stroke='%2349beff' d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path stroke='%23ffae1f' d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/></svg>") no-repeat center / contain;
	}

	/*
	.section-icon {
		width: 1.1em;
		height: 1.1em;
		margin-right: 0.5rem;
		vertical-align: -0.15em;
		color: #49beff;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.section-icon .note { stroke: #49beff; }
	.section-icon .pen  { stroke: #ffae1f; }
	.section-icon .pen { fill: #ffae1f; }
	*/

/* 표 제목 (caption) 박스 */
	#content .table-wrap table caption {
		caption-side: top;
		margin-bottom: 0.75rem;
		padding: 0.6rem 1rem;
		background: var(--primary-soft);
		color: var(--text);
		font-weight: 700;
		font-size: 0.95rem;
		text-align: left;
		border-radius: 0.5rem;
	}

/* 본문 링크: 아래 밑줄이 왼쪽에서 오른쪽으로 차오르는 효과 */
	#content :is(p, li, dd, td, figcaption, blockquote) a:where(:not(.button, .chip, .pagination a, .toc-list a, .recent-list a)) {
		color: var(--text);
		font-weight: 500;
		text-decoration: none;
		padding-bottom: 0.1em;
		background:
			linear-gradient(#49beff, #49beff) no-repeat right bottom / 0 0.15em,
			linear-gradient(rgba(73, 190, 255, .15), rgba(73, 190, 255, .15)) no-repeat left bottom / 100% 0.15em;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		transition: background-size 0.3s ease-out;
	}

	#content :is(p, li, dd, td, figcaption, blockquote) a:where(:not(.button, .chip, .pagination a, .toc-list a, .recent-list a)):hover,
	#content :is(p, li, dd, td, figcaption, blockquote) a:where(:not(.button, .chip, .pagination a, .toc-list a, .recent-list a)):focus-visible {
		background-position: left bottom, left bottom;
		background-size: 100% 0.15em, 100% 0.15em;
	}

	/* 새 창으로 열리는 외부 링크 표시 */
	#content a[target="_blank"]::after {
		content: "\2197";
		margin-left: 0.15em;
		font-size: 0.75em;
	}
@media (prefers-reduced-motion: reduce) {
	#content a { transition: none; }
}

/* 포인트 링크 */
	a.next-read, .next-read {
		color: #E53E3E !important; 
		font-weight: 500 !important;
		text-decoration: none !important; 
		transition: color 0.2s ease-in-out !important; 
	}

	a.next-read:hover, .next-read:hover {
		color: #1F252D !important;
		text-decoration: none !important; 
	}


/* 통계 순위 코드 */
.chart-card .cols-2-1 { --gap: 4rem; gap: var(--gap); }

.chart-card .cols-2-1 > * + * { position: relative; }
.chart-card .cols-2-1 > * + *::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gap) / -2);
  width: 1px;
  background: #e5e7eb;
}

@media (max-width: 768px) {
  .chart-card .cols-2-1 > * + *::before {
    top: calc(var(--gap) / -2);
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }
}

/* 목차 */
.toc-box {
    border: 1px solid #e5e5e5;
    border-radius: 0.4rem;
    background: var(--bg);
    margin: 1.5rem 0 4rem;
    overflow: hidden;
}

.toc-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 1rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1D232C;
    cursor: pointer;
    font-family: inherit;
    box-shadow: inset 0 0 0 0 #fff;
}

.toc-header:hover {
    background: #fff;
    box-shadow: inset 0 0 0 0 #fff;
}

.toc-arrow {
    transition: transform 0.25s ease;
    color: #888;
}

.toc-box.open .toc-arrow {
    transform: rotate(180deg);
}

.toc-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    margin: 0;
    padding: 0 1.2rem;
    list-style: none;
    border-top: 1px solid transparent;
}

.toc-box.open .toc-list {
    padding: 0.8rem 1.2rem 2rem;
    border-top: 1px solid #e5e5e5;
    /* max-height는 JS에서 scrollHeight로 동적 지정 */
}

	.toc-list li {
		border-bottom: 0.1rem dashed #ddd;
		padding: 1rem 0;
	}
	.toc-list li:last-child {
		border-bottom: none;
	}

.toc-list li a {
    color: #555;
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.5;
    transition: color 0.15s ease;
}

.toc-list li a:hover {
    color: var(--primary);
}

@media (max-width: 768px) {
    .toc-list li a {
        color: #303030;
        font-size: 1rem;
    }
}

/* 들여쓰기: h2 → h3 → h4 */
.toc-list .toc-h2 {
    padding-left: 0;
    font-weight: 600;
}

.toc-list .toc-h3 {
    color: var(--text);
    font-family: "Taviraj", serif;
    font-weight: 700;
    padding-left: 0;
    text-decoration: none;
}
.toc-list .toc-h3 a {
    display: inline-flex;
    align-items: center;
    gap: .4em;
}
.toc-list .toc-h3 a::before {
    content: "";
    flex: none;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url(/images/icons/fat-corner-down-right.svg) no-repeat center / contain;
            mask: url(/images/icons/fat-corner-down-right.svg) no-repeat center / contain;
}

.toc-list .toc-h4 {
    padding-left: 1.5rem;
    font-size: 0.88rem;
    color: #777;
}
.toc-list .toc-h4 a {
    display: inline-flex;
    align-items: center;
    gap: .4em;
}
.toc-list .toc-h4 a::before {
    content: "";
    flex: none;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url(/images/icons/corner-down-right-48-bold.svg) no-repeat center / contain;
            mask: url(/images/icons/corner-down-right-48-bold.svg) no-repeat center / contain;
}


/* Scroll Up Section index.php Ranked List*/
.js .chart-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.js .chart-card.is-visible {
  opacity: 1;
  transform: none;
}

/* 모션 줄이기 설정 사용자는 애니메이션 없이 바로 표시 */
@media (prefers-reduced-motion: reduce) {
  .js .chart-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.chart-card.reveal {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.chart-card.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .chart-card.reveal { opacity: 1; transform: none; transition: none; }
}


/* 프로그램 소개 컴포넌트 */
.media-row {
    --media-w: 30%;
    display: grid;
    grid-template-columns: var(--media-w) 1fr;
    gap: 1.5rem;
    align-items: start;
    padding: 2rem 0;
    border-bottom: 1px solid var(--line);
    /* margin-bottom: 2rem; */
}
.media-row:last-child { 
    border-bottom: 0px solid var(--line);
}

.media-row > .media-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.media-row > .media-text > :last-child { 
    margin-bottom: 0; 
}

/* 이미지를 오른쪽에 둘 때 */
.media-row.is-reverse { grid-template-columns: 1fr var(--media-w); }
.media-row.is-reverse > .media-img { order: 2; }

/* 모바일: 위아래로 쌓기 */
@media (max-width: 736px) {
    .media-row,
    .media-row.is-reverse { grid-template-columns: 1fr; }
    .media-row.is-reverse > .media-img { order: 0; }
}

/* 버튼 위치 박스 PC에서 우측, 모바일에서 Center */
/* 기본 스타일 및 PC 화면 (가로 해상도 769px 이상일 때 우측 정렬) */
.align-box {
  display: flex;
  justify-content: flex-end; /* PC에서는 기본 오른쪽 정렬 */
  width: 100%;
}

/* 📱 모바일 화면 (태블릿 및 스마트폰 가로 해상도 768px 이하일 때) */
@media screen and (max-width: 768px) {
  .align-box {
    justify-content: center; /* 모바일에서는 중앙(센터) 정렬 */
  }
}

/* 검색 */
.search-box {
  position: relative;
  width: 100%;
  /*max-width: 400px;*/
}

.search-input {
  width: 100%;
  height: 44px;
  padding: 0 48px 0 16px; /* 오른쪽 여백 = 버튼 자리 */
  border: 1px solid #ddd;
  border-radius: 22px;
  box-sizing: border-box;
}

.search-box .submits {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* --icon 변수로 아이콘을 쓰는 방식이 mask라면 */
.search-box .submits .icon {
  width: 20px;
  height: 20px;
  background-color: #666; /* 아이콘 색 */
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

/* guide latest css */
.recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.recent-head h3 { margin: 0; }
.recent-more { color: var(--muted, #7c8fac); }
.recent-more:hover { color: var(--primary, #5d87ff); }

.recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.recent-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--line, #e5eaef);
}
.recent-list li:last-child { border-bottom: 0; }
.recent-list li a {
    flex: 1;
    font-family: 'Noto Serif KR', sans-serif;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;          /* 긴 제목은 … 로 자르기 */
    color: var(--text, #2a3547);
}
.recent-list li a:hover { color: var(--primary, #5d87ff); }
.recent-list time {
    flex: none;
    font-size: .85em;
    color: var(--muted, #7c8fac);
}


/* 인덱스 하단 서비스 이용 및 저작권 안내 박스내 관련 코드 */
.notice-box {
	display: flex;
	align-items: flex-start;      /* 아이콘을 첫 줄 높이에 맞춤 */
	gap: 1rem;
}
.notice-box::before {
	content: "";
	flex: none;                   /* 글이 길어도 아이콘이 줄어들지 않게 */
	width: 4.25rem;
	height: 4.25rem;
	background-color: var(--primary, #5d87ff);
	-webkit-mask: url(/images/icons/shield-check.svg) no-repeat center / contain;
	        mask: url(/images/icons/shield-check.svg) no-repeat center / contain;
}
.notice-box > p {
	flex: 1;
	margin: 0;
}
@media (max-width: 736px) {
	.notice-box { flex-direction: column; gap: .75rem; }
}
@media (max-width: 736px) {
	.notice-box::before {
		display: none;
	}
}

/* 검색 결과 */
.search-count { margin-bottom: 1.5rem; }

.search-results {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-results li {
    padding: 1.5rem 0;
    border-bottom: 1px dashed var(--line, #e5eaef);
}

.search-results li:last-child { border-bottom: 0; }

/* 검색 게시판 표시 */
.search-board {
    display: inline-block;
    margin-bottom: .5rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--primary-soft, #ecf2ff);
    color: var(--primary, #5d87ff);
    font-size: .75rem;
    font-weight: 600;
}

/* 검색 결과 제목 */
#content h3.search-title {
    margin: 0 0 .5rem;
    font-size: 1rem;
    /*font-family: 'Noto Serif KR', sans-serif;*/
}

#content h3.search-title::before {
    content: none;
}

/* 검색 결과 요약 */
#content .search-snippet {
    margin: 0 0 .5rem;
    font-size: .95rem;
}

/* 검색어 강조 */
.search-results mark {
    padding: 0 .15rem;
}