/*
 * 메인 화면 개편 (2026-10-08)
 * 기존 레이아웃 CSS 는 건드리지 않고, 메인 화면(.xet-main-sectionWrp) 안에서만 덮어쓴다.
 * 되돌리려면 main.html 에서 이 파일을 불러오는 <load> 한 줄과 새 구역(kh-)을 지우면 된다.
 */
.xet-main-sectionWrp {
	--kh-cyan: #0090d0;
	--kh-blue: #0a4a94;
	--kh-navy: #04183a;
	--kh-ink: #1b2a41;
	--kh-line: #dde5ef;
	--kh-soft: #f3f7fb;
}

/* ---------- 히어로: 바로가기 카드가 걸치도록 아래 표시선을 위로 ---------- */
.xet-main-sectionWrp .xet-slider-indicator { bottom: 70px; }

/* ---------- 바로가기: 히어로에 걸친 흰 카드 ---------- */
.xet-main-sectionWrp .xet-quickLnk {
	position: relative;
	z-index: 6;
	margin-top: -44px;
	padding: 0 0 6px;
	background: transparent;
}
.xet-main-sectionWrp .xet-quickLnk .flex-container {
	justify-content: center;
	gap: 10px;
}
.xet-main-sectionWrp .xet-quickLnk .flex-container a {
	width: calc(33.333% - 7px);
	padding: 16px 6px 14px;
	border: 1px solid var(--kh-line);
	border-radius: 14px;
	background: #fff;
	color: var(--kh-ink);
	text-align: center;
	box-shadow: 0 8px 24px rgba(10, 40, 90, .14);
	transition: transform .2s ease, box-shadow .2s ease;
}
.xet-main-sectionWrp .xet-quickLnk .flex-container a > div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: #e8f4fb;
	color: var(--kh-cyan);
	transition: background .2s ease, color .2s ease;
}
.xet-main-sectionWrp .xet-quickLnk .flex-container a h6 {
	margin: 0;
	font-size: 14px !important;
	font-weight: 600;
	color: var(--kh-ink);
}
.xet-main-sectionWrp .xet-quickLnk .flex-container a:hover,
.xet-main-sectionWrp .xet-quickLnk .flex-container a:focus {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(10, 40, 90, .2);
}
.xet-main-sectionWrp .xet-quickLnk .flex-container a:hover > div,
.xet-main-sectionWrp .xet-quickLnk .flex-container a:focus > div {
	background: var(--kh-cyan);
	color: #fff;
}

/* ---------- 공지사항 · 협회연혁: 카드 ---------- */
.xet-main-sectionWrp .xet-notice { padding-top: 34px; }
.xet-main-sectionWrp .xet-notice .flex-container { gap: 20px; }
.xet-main-sectionWrp .xet-notice .item,
.xet-main-sectionWrp .xet-notice .item:last-child {
	flex: 1 1 0;
	min-width: 0;
	padding: 22px 24px;
	border: 1px solid var(--kh-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(10, 40, 90, .06);
}
.xet-main-sectionWrp .xet-notice .section-title-wrp {
	border-bottom: 1px solid var(--kh-line);
}
.xet-main-sectionWrp .xet-notice .section-title-wrp h4 .s-title {
	display: inline-block;
	padding-left: 12px;
	border-left: 4px solid var(--kh-cyan);
	line-height: 1.1;
	font-weight: 700;
}
.xet-main-sectionWrp .xet-notice .section-title-wrp a {
	color: #5c6b82;
	font-size: 13px;
}
.xet-main-sectionWrp .xet-notice .section-title-wrp a:hover { color: var(--kh-cyan); }

/* ---------- 숫자로 보는 협회 ---------- */
.xet-main-sectionWrp .kh-stats {
	position: relative;
	overflow: hidden;
	margin: 34px 0 10px;
	padding: 44px 0 40px;
	background: linear-gradient(135deg, var(--kh-navy) 0%, #07306a 55%, var(--kh-blue) 100%);
	color: #fff;
}
.xet-main-sectionWrp .kh-stats::before,
.xet-main-sectionWrp .kh-stats::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.xet-main-sectionWrp .kh-stats::before {
	top: -160px; right: -80px;
	width: 420px; height: 420px;
	background: radial-gradient(circle, rgba(0, 144, 208, .38), rgba(0, 144, 208, 0) 70%);
}
.xet-main-sectionWrp .kh-stats::after {
	bottom: -200px; left: -100px;
	width: 460px; height: 460px;
	background: radial-gradient(circle, rgba(144, 128, 176, .34), rgba(144, 128, 176, 0) 70%);
}
.xet-main-sectionWrp .kh-stats .xet-container { position: relative; z-index: 1; }
.xet-main-sectionWrp .kh-stats-head { margin-bottom: 26px; text-align: center; }
.xet-main-sectionWrp .kh-stats-head h2 {
	margin: 0;
	color: #fff;
	font-weight: 700;
}
.xet-main-sectionWrp .kh-stats-head p {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, .72);
	font-size: 14px;
}
.xet-main-sectionWrp .kh-stats-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -8px;
	padding: 0;
	list-style: none;
}
.xet-main-sectionWrp .kh-stats-list li {
	width: 50%;
	padding: 8px;
}
.xet-main-sectionWrp .kh-stat {
	height: 100%;
	padding: 20px 10px 18px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 14px;
	background: rgba(255, 255, 255, .07);
	text-align: center;
}
.xet-main-sectionWrp .kh-stat-num {
	display: block;
	color: #fff;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.5px;
}
.xet-main-sectionWrp .kh-stat-num small {
	margin-left: 3px;
	color: #7fd0f2;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
}
.xet-main-sectionWrp .kh-stat-num.kh-stat-text { font-size: 24px; line-height: 1.45; }
.xet-main-sectionWrp .kh-stat-label {
	display: block;
	margin-top: 6px;
	color: rgba(255, 255, 255, .78);
	font-size: 13px;
	word-break: keep-all;
}

/* ---------- 갤러리 ---------- */
.xet-main-sectionWrp .xet-work { padding: 34px 0 24px; }
.xet-main-sectionWrp .section-title::before,
.xet-main-sectionWrp .section-title::after {
	width: 60px;
	background-color: var(--kh-cyan);
}

/* ---------- 가입 안내 띠(CTA) ---------- */
.xet-main-sectionWrp .kh-cta { padding: 6px 0 34px; }
.xet-main-sectionWrp .kh-cta-box {
	position: relative;
	overflow: hidden;
	padding: 34px 24px;
	border-radius: 18px;
	background: linear-gradient(120deg, var(--kh-navy) 0%, #07306a 50%, var(--kh-blue) 100%);
	color: #fff;
	text-align: center;
}
.xet-main-sectionWrp .kh-cta-box::before {
	content: "";
	position: absolute;
	top: -120px; right: -60px;
	width: 360px; height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 144, 208, .4), rgba(0, 144, 208, 0) 70%);
	pointer-events: none;
}
.xet-main-sectionWrp .kh-cta-box > * { position: relative; }
.xet-main-sectionWrp .kh-cta-box h3 {
	margin: 0 0 8px;
	color: #fff;
	font-weight: 700;
}
.xet-main-sectionWrp .kh-cta-box p {
	margin: 0 0 20px;
	color: rgba(255, 255, 255, .8);
	font-size: 15px;
	word-break: keep-all;
}
.xet-main-sectionWrp .kh-cta-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.xet-main-sectionWrp .kh-btn {
	display: inline-block;
	min-width: 168px;
	padding: 13px 22px;
	border: 2px solid var(--kh-cyan);
	border-radius: 999px;
	background: var(--kh-cyan);
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.xet-main-sectionWrp .kh-btn:hover,
.xet-main-sectionWrp .kh-btn:focus {
	border-color: #29a8e0;
	background: #29a8e0;
	transform: translateY(-2px);
}
.xet-main-sectionWrp .kh-btn.kh-btn-ghost {
	border-color: rgba(255, 255, 255, .7);
	background: transparent;
}
.xet-main-sectionWrp .kh-btn.kh-btn-ghost:hover,
.xet-main-sectionWrp .kh-btn.kh-btn-ghost:focus {
	border-color: #fff;
	background: rgba(255, 255, 255, .14);
}

/* ---------- 안내(가입안내·등록안내): 카드 ---------- */
.xet-main-sectionWrp .xet-info { padding-bottom: 40px; }
.xet-main-sectionWrp .xet-info .flex-container { gap: 20px; }
.xet-main-sectionWrp .xet-info .item,
.xet-main-sectionWrp .xet-info .item:first-child {
	flex: 1 1 0;
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--kh-line);
	border-radius: 14px;
	background: var(--kh-soft);
	line-height: 1.7;
}
.xet-main-sectionWrp .xet-info .item h4 .s-title {
	display: inline-block;
	padding-left: 12px;
	border-left: 4px solid var(--kh-cyan);
	line-height: 1.1;
	font-weight: 700;
}

/* ---------- 큰 화면 ---------- */
@media (min-width: 992px) {
	.xet-main-sectionWrp .xet-slider-indicator { bottom: 78px; }
	.xet-main-sectionWrp .xet-quickLnk { margin-top: -56px; }
	.xet-main-sectionWrp .xet-quickLnk .flex-container { gap: 16px; }
	.xet-main-sectionWrp .xet-quickLnk .flex-container a {
		flex: 1 1 0;
		width: auto;
		padding: 22px 10px 18px;
	}
	.xet-main-sectionWrp .xet-quickLnk .flex-container a > div { width: 60px; height: 60px; margin-bottom: 10px; }
	.xet-main-sectionWrp .xet-quickLnk .flex-container a h6 { font-size: 16px !important; }
	.xet-main-sectionWrp .xet-notice { padding-top: 44px; }
	.xet-main-sectionWrp .kh-stats { margin-top: 44px; padding: 56px 0 52px; }
	.xet-main-sectionWrp .kh-stats-list li { width: 25%; }
	.xet-main-sectionWrp .kh-stat { padding: 28px 12px 24px; }
	.xet-main-sectionWrp .kh-stat-num { font-size: 44px; }
	.xet-main-sectionWrp .kh-stat-num small { font-size: 18px; }
	.xet-main-sectionWrp .kh-stat-num.kh-stat-text { font-size: 28px; }
	.xet-main-sectionWrp .kh-cta-box { padding: 48px 24px; }
	.xet-main-sectionWrp .kh-cta-box p { font-size: 16px; }
}

/* 움직임을 줄이고 싶은 사용자 설정 존중 */
@media (prefers-reduced-motion: reduce) {
	.xet-main-sectionWrp .xet-quickLnk .flex-container a,
	.xet-main-sectionWrp .kh-btn { transition: none; }
}