/* ════════════════════════════════════════════════════════════════
   사이트맵 페이지 — 디자인 v2 (모던, 컬러 액센트, 모바일 아코디언)
   ════════════════════════════════════════════════════════════════ */

/* CSS 변수 — 카테고리별 컬러 팔레트 */
:root {
	--sm-bg-gradient: linear-gradient(180deg, #f8fafc 0%, #eef4fc 100%);
	--sm-primary: #1251A3;
	--sm-primary-dark: #0a1d33;
	--sm-text: #475569;
	--sm-text-sub: #64748b;
	--sm-border: #e3e9f2;
	--sm-border-light: #eef2f8;
	/* 카테고리별 8색 액센트 */
	--sm-c1: #2563eb;  /* 제품 소개 (소프트웨어) — 블루 */
	--sm-c2: #0891b2;  /* 사용자별 가이드 — 시안 */
	--sm-c3: #059669;  /* 복구방법 가이드 — 그린 */
	--sm-c4: #db2777;  /* 데이터 복구 서비스 — 핑크 */
	--sm-c5: #ea580c;  /* 다운로드·매뉴얼·구매 — 오렌지 */
	--sm-c6: #7c3aed;  /* 고객 지원 — 퍼플 */
	--sm-c7: #ca8a04;  /* 회원 — 옐로우브라운 */
	--sm-c8: #475569;  /* 회사 정보 — 그레이 */
}

.sm-wrap {
	background: var(--sm-bg-gradient);
	padding: 60px 0 80px;
	min-height: 60vh;
	position: relative;
}
.sm-wrap::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; height: 240px;
	background: radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
	pointer-events: none;
}
.sm-wrap .container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	position: relative;
}

/* ───────── 헤더 ───────── */
.sm-head {
	text-align: center;
	margin-bottom: 32px;
}
.sm-head .sm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--sm-primary);
	background: #fff;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 16px;
	box-shadow: 0 2px 8px rgba(18, 81, 163, 0.12);
	border: 1px solid rgba(18, 81, 163, 0.15);
}
.sm-head .sm-eyebrow::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--sm-primary);
	box-shadow: 0 0 0 3px rgba(18, 81, 163, 0.18);
}
.sm-head h1 {
	font-size: 38px;
	font-weight: 800;
	color: var(--sm-primary-dark);
	letter-spacing: -0.02em;
	margin: 0 0 14px;
	line-height: 1.2;
}
.sm-head h1 .ac {
	background: linear-gradient(135deg, #2563eb, #1251A3);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sm-head .sm-desc {
	font-size: 15.5px;
	color: var(--sm-text);
	line-height: 1.7;
	max-width: 720px;
	margin: 0 auto;
	word-break: keep-all;
}

/* ───────── 메인 진입점 ───────── */
.sm-mains {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-bottom: 44px;
}
.sm-main {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 26px 28px;
	border: 2px solid transparent;
	border-radius: 18px;
	background: linear-gradient(135deg, #ffffff 0%, #f1f5fb 100%);
	color: var(--sm-primary-dark);
	text-decoration: none;
	transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
	box-shadow: 0 6px 20px rgba(18, 81, 163, 0.08);
	position: relative;
	overflow: hidden;
}
.sm-main::after {
	content: '';
	position: absolute;
	top: 0; right: 0; width: 140px; height: 140px;
	background: radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.12) 0%, transparent 65%);
	pointer-events: none;
	transition: opacity 0.22s;
}
.sm-main:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 38px rgba(18, 81, 163, 0.18);
	border-color: var(--sm-primary);
}
.sm-main:hover::after { opacity: 0.7; }
.sm-main-ic {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border-radius: 16px;
	background: linear-gradient(135deg, #2E7BE0, #1251A3);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	box-shadow: 0 8px 18px rgba(18, 81, 163, 0.32);
}
.sm-main-body { flex: 1; min-width: 0; }
.sm-main-body .sm-main-title {
	display: block;
	font-size: 18px;
	font-weight: 800;
	color: var(--sm-primary-dark);
	margin-bottom: 6px;
	letter-spacing: -0.01em;
}
.sm-main-body .sm-main-sub {
	display: block;
	font-size: 13px;
	color: var(--sm-text);
	line-height: 1.5;
}
.sm-main-arrow {
	flex-shrink: 0;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--sm-primary);
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.22s, background 0.22s;
	box-shadow: 0 2px 6px rgba(18, 81, 163, 0.18);
}
.sm-main:hover .sm-main-arrow {
	transform: translateX(4px);
	background: var(--sm-primary);
	color: #fff;
}

/* ───────── 카테고리 그리드 ───────── */
.sm-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.sm-card {
	background: #fff;
	border: 1px solid var(--sm-border);
	border-radius: 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
	overflow: hidden;
	position: relative;
}
.sm-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--card-color, var(--sm-primary));
	opacity: 0.9;
}
.sm-card:hover {
	border-color: var(--card-color, var(--sm-primary));
	box-shadow: 0 14px 32px rgba(13, 27, 46, 0.08);
	transform: translateY(-2px);
}

/* 카테고리별 컬러 액센트 (--card-color) */
.sm-card:nth-child(1) { --card-color: var(--sm-c1); }
.sm-card:nth-child(2) { --card-color: var(--sm-c2); }
.sm-card:nth-child(3) { --card-color: var(--sm-c3); }
.sm-card:nth-child(4) { --card-color: var(--sm-c4); }
.sm-card:nth-child(5) { --card-color: var(--sm-c5); }
.sm-card:nth-child(6) { --card-color: var(--sm-c6); }
.sm-card:nth-child(7) { --card-color: var(--sm-c7); }
.sm-card:nth-child(8) { --card-color: var(--sm-c8); }

/* 카드 헤더 — summary 역할 (모바일에서 클릭 가능) */
.sm-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 22px 18px;
	border-bottom: 1.5px solid var(--sm-border-light);
	background: linear-gradient(135deg, rgba(248, 250, 252, 0.6), rgba(238, 244, 252, 0.5));
	cursor: default;
	list-style: none;
	position: relative;
}
/* details/summary 마커 숨김 */
.sm-card-head::-webkit-details-marker { display: none; }
.sm-card-head::marker { display: none; }
.sm-card-head .sm-card-ic {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--card-color, linear-gradient(135deg, #2E7BE0, #1251A3));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.sm-card-head h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: var(--sm-primary-dark);
	letter-spacing: -0.02em;
	flex: 1;
	min-width: 0;
}
.sm-card-head .sm-card-cnt {
	margin-left: 0;
	font-size: 11px;
	font-weight: 700;
	color: var(--card-color, var(--sm-primary));
	background: color-mix(in srgb, var(--card-color, var(--sm-primary)) 12%, transparent);
	padding: 3px 9px;
	border-radius: 99px;
	border: 1px solid color-mix(in srgb, var(--card-color, var(--sm-primary)) 25%, transparent);
}
/* 모바일 — 카드 헤더에 화살표 표시 (details toggle) */
.sm-card-head .sm-card-toggle {
	display: none;
	width: 24px; height: 24px;
	color: var(--card-color, var(--sm-primary));
	font-size: 12px;
	transition: transform 0.22s;
}

/* 카드 내부 콘텐츠 */
.sm-card-body {
	padding: 18px 22px 22px;
}

/* 카드 내부 그룹 */
.sm-group {
	margin-bottom: 16px;
}
.sm-group:last-child { margin-bottom: 0; }
.sm-group-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	font-weight: 800;
	color: var(--card-color, var(--sm-primary));
	letter-spacing: 0.06em;
	margin-bottom: 10px;
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 1px dashed color-mix(in srgb, var(--card-color, var(--sm-primary)) 25%, transparent);
}
.sm-group-title::before {
	content: '';
	width: 8px;
	height: 8px;
	background: var(--card-color, var(--sm-primary));
	border-radius: 50%;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--card-color, var(--sm-primary)) 18%, transparent);
}
.sm-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sm-list li {
	margin-bottom: 1px;
}
.sm-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 13.5px;
	color: var(--sm-text);
	text-decoration: none;
	transition: background 0.18s, color 0.18s, padding-left 0.18s;
	word-break: keep-all;
	line-height: 1.5;
}
.sm-list a::after {
	content: '\f0da';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 10px;
	color: transparent;
	transition: color 0.18s, transform 0.18s;
	flex-shrink: 0;
}
.sm-list a:hover {
	background: color-mix(in srgb, var(--card-color, var(--sm-primary)) 8%, transparent);
	color: var(--card-color, var(--sm-primary));
	padding-left: 14px;
}
.sm-list a:hover::after {
	color: var(--card-color, var(--sm-primary));
	transform: translateX(2px);
}
.sm-list a.sm-sub {
	padding-left: 22px;
	font-size: 12.5px;
	color: var(--sm-text-sub);
}
.sm-list a.sm-sub:hover {
	padding-left: 26px;
	color: var(--card-color, var(--sm-primary));
}

/* 배지 */
.sm-list a .sm-badge-free,
.sm-list a .sm-badge-new,
.sm-list a .sm-badge-hot {
	display: inline-block;
	margin-left: 4px;
	font-size: 9.5px;
	font-weight: 800;
	color: #fff;
	padding: 1px 7px;
	border-radius: 99px;
	letter-spacing: 0.04em;
	vertical-align: 1px;
	line-height: 1.6;
}
.sm-list a .sm-badge-free { background: linear-gradient(135deg, #f59e0b, #d97706); }
.sm-list a .sm-badge-new  { background: linear-gradient(135deg, #ef4444, #dc2626); }
.sm-list a .sm-badge-hot  { background: linear-gradient(135deg, #ec4899, #db2777); }

/* ───────── 태블릿 (641-1024px) ───────── */
@media screen and (min-width: 641px) and (max-width: 1024px) {
	.sm-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ───────── 모바일 (≤640px) — 아코디언 모드 ───────── */
@media screen and (max-width: 640px) {
	.sm-wrap { padding: 32px 0 56px; }
	.sm-wrap .container { padding: 0 14px; }
	.sm-head { margin-bottom: 26px; }
	.sm-head h1 { font-size: 26px; }
	.sm-head .sm-desc { font-size: 13.5px; }
	.sm-mains { grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
	.sm-main { padding: 18px 18px; gap: 14px; border-radius: 14px; }
	.sm-main-ic { width: 48px; height: 48px; font-size: 20px; border-radius: 12px; }
	.sm-main-body .sm-main-title { font-size: 16px; }
	.sm-main-body .sm-main-sub { font-size: 12.5px; }
	.sm-main-arrow { width: 32px; height: 32px; }
	.sm-grid { grid-template-columns: 1fr; gap: 10px; }
	.sm-card { border-radius: 14px; }
	.sm-card-head {
		padding: 14px 16px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.sm-card-head:active { background: rgba(238, 244, 252, 0.9); }
	.sm-card-head h2 { font-size: 15px; }
	.sm-card-head .sm-card-ic { width: 34px; height: 34px; font-size: 14px; }
	.sm-card-head .sm-card-toggle { display: flex; align-items: center; justify-content: center; }
	.sm-card[open] .sm-card-toggle { transform: rotate(180deg); }
	.sm-card-body { padding: 14px 16px 18px; }
	.sm-list a { padding: 10px 10px; font-size: 13.5px; }
	.sm-group-title { font-size: 11px; margin-bottom: 8px; }
}

/* PC 표시 시 카드는 항상 펼침 — details 기본 동작 무시 */
@media screen and (min-width: 641px) {
	.sm-card .sm-card-body { display: block !important; }
}