/*!
 * arkpage.css 1.1.0 — arkpage.js 전용 구조 스타일 (자체 작성, fullpage.css 대체)
 * 시각 디자인(불릿 색·크기·툴팁 폰트 등)은 skin.css의 body #fp-nav 규칙이 담당하고,
 * 여기는 엔진이 생성하는 DOM의 골격만 정의한다.
 */

/* 풀페이지 활성 상태: 문서 스크롤 차단 */
html.fp-enabled,
.fp-enabled body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 섹션 골격 */
.fp-section {
	position: relative;
	box-sizing: border-box;
}
.fp-section.fp-table {
	display: table;
	table-layout: fixed;
	width: 100%;
}
.fp-tableCell {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%;
}
/* 셀 내부 스크롤 래퍼 — 항상 존재. height:100%로 자식의 % 높이 체인(.visual_wrapper 등)을 보존 */
.fp-tableCell > .ark-scrollable {
	height: 100%;
}
.fp-notransition {
	transition: none !important;
}

/* 내용이 뷰포트보다 긴 섹션: 셀은 클리핑만 하고(고정 헤더 여백 패딩 보호) 래퍼가 스크롤 */
.fp-section.ark-overflow {
	display: block;
}
.fp-section.ark-overflow > .fp-tableCell {
	display: block;
	height: 100%;
	overflow: hidden;
}
.fp-section.ark-overflow > .fp-tableCell > .ark-scrollable {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* 스크롤바: 사이트 공통 thin 스타일 (skin.css의 인증서 목록과 동일한 디자인 언어)
 * 주의: 표준 scrollbar-width와 ::-webkit-scrollbar를 같은 요소에 병기하면
 * Chromium에서 webkit 커스텀이 무시되므로 Firefox만 @supports로 분기한다. */
.fp-section.ark-overflow > .fp-tableCell > .ark-scrollable::-webkit-scrollbar {
	width: 4px;
}
.fp-section.ark-overflow > .fp-tableCell > .ark-scrollable::-webkit-scrollbar-thumb {
	background: var(--point-color01);
	border-radius: 2px;
}
.fp-section.ark-overflow > .fp-tableCell > .ark-scrollable::-webkit-scrollbar-track {
	background: transparent;
}
@supports not selector(::-webkit-scrollbar) {
	.fp-section.ark-overflow > .fp-tableCell > .ark-scrollable {
		scrollbar-width: thin;
		scrollbar-color: var(--point-color01) transparent;
	}
}

/* footer 등 자동 높이 섹션 */
.fp-auto-height.fp-section,
.fp-auto-height .fp-tableCell {
	height: auto !important;
}

/* 동작 줄이기 설정 사용자: 전환 애니메이션 안전망 (JS도 별도 대응) */
@media (prefers-reduced-motion: reduce) {
	.fullpage-wrapper {
		transition: none !important;
	}
}

/* 점 네비게이션 골격 (시각 스타일은 skin.css가 덮어씀) */
#fp-nav {
	position: fixed;
	z-index: 100;
	top: 50%;
	margin-top: -32px;
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
#fp-nav.fp-left { left: 17px; }
#fp-nav.fp-right { right: 17px; }
#fp-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#fp-nav ul li {
	display: block;
	width: 14px;
	height: 13px;
	margin: 7px;
	position: relative;
}
#fp-nav ul li a {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
}
#fp-nav ul li a span {
	border-radius: 50%;
	position: absolute;
	z-index: 1;
	height: 4px;
	width: 4px;
	border: 0;
	background: #333;
	left: 50%;
	top: 50%;
	margin: -2px 0 0 -2px;
	transition: all 0.1s ease-in-out;
}

/* 툴팁 */
#fp-nav ul li .fp-tooltip {
	position: absolute;
	top: -2px;
	color: #fff;
	font-size: 14px;
	white-space: nowrap;
	max-width: 220px;
	overflow: hidden;
	display: block;
	opacity: 0;
	width: 0;
	cursor: pointer;
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
	transition: opacity 0.2s ease-in;
	width: auto;
	opacity: 1;
}
#fp-nav ul li .fp-tooltip.fp-left { left: 20px; }
#fp-nav ul li .fp-tooltip.fp-right { right: 20px; }

/* 스크린리더 전용 텍스트 (skin.css가 이를 시각 불릿으로 재활용함) */
.fp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}