@charset "utf-8";
/* ═══════════════════════════════════════════════════════════
   사이트정보 목록 (/sites/) · 리뉴얼
   ───────────────────────────────────────────────────────────
   site.css(상세 페이지 공용) 다음에 로드되어 목록 화면만 덮어쓴다.
   상세 페이지(site.php)에는 영향을 주지 않는다.
   ═══════════════════════════════════════════════════════════ */

.sv2 {
	--sv-mint:   #16C2AE;
	--sv-deep:   #00756F;
	--sv-ink:    #14212B;
	--sv-ink2:   #5A7180;
	--sv-ink3:   #93A6B2;
	--sv-line:   #E4EBEF;
	--sv-line2:  #EFF4F6;
	--sv-card:   #FFFFFF;
	--sv-soft:   #F2FAF8;
	--sv-gold:   #F5A623;
	--sv-warn:   #E9544A;

	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-bottom: 20px;
}

/* ─────────────────────────────────────────────
   히어로
   ───────────────────────────────────────────── */
.svh {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 28px;
	align-items: center;
	padding: 44px 44px 40px;
	border-radius: 20px;
	border: 1px solid #D7EFEA;
	background:
		radial-gradient(120% 130% at 100% 0%, #D8F6F0 0%, rgba(216, 246, 240, 0) 58%),
		linear-gradient(135deg, #F4FCFA 0%, #EAF8F5 100%);
	overflow: hidden;
}

.svh__eyebrow {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sv-deep);
	letter-spacing: -.01em;
}
.svh__title {
	margin: 0;
	font-size: 46px;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -.04em;
	color: var(--sv-ink);
	text-wrap: balance;
}
.svh__title span { color: #0E9A90; }
.svh__lead {
	margin: 16px 0 0;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.45;
	letter-spacing: -.025em;
	color: var(--sv-ink);
}
.svh__desc {
	margin: 8px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--sv-ink2);
}

/* 검색 */
.svh__sch {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	padding: 7px 7px 7px 20px;
	border: 2px solid var(--sv-mint);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(0, 117, 111, .08);
}
.svh__sch-ic {
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	color: var(--sv-deep);
}
.svh__sch input {
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
	border: 0;
	background: none;
	font-size: 15px;
	color: var(--sv-ink);
	outline: none;
}
.svh__sch input::placeholder { color: var(--sv-ink3); }
.svh__sch button {
	flex: 0 0 auto;
	height: 42px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: var(--sv-deep);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -.02em;
	cursor: pointer;
	transition: background .15s;
}
.svh__sch button:hover { background: #005F5A; }

.svh__ex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 13px;
	color: var(--sv-ink2);
}
.svh__ex a {
	padding: 5px 14px;
	border: 1px solid #D3E6E3;
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	color: var(--sv-ink2);
	transition: border-color .15s, color .15s;
}
.svh__ex a:hover { border-color: var(--sv-mint); color: var(--sv-deep); }

/* ── 우측 : 마스코트 + 체크리스트 ──
   레퍼런스처럼 "그림이 히어로 배경 위에 그냥 놓여 있는" 모양을 만든다.
   그림에 테두리·라운드·그림자를 주면 곧바로 사진 액자처럼 보이므로 전부 뺀다. */
.svh__side {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	min-height: 262px;
}

/* 마스코트 : 배경과 섞이도록 multiply + 가장자리 페더 마스크
   ─ main_abnner 의 바탕은 흰색~연한 하늘색이라 multiply 를 걸면
     바탕이 히어로의 민트 배경으로 그대로 흡수되고 캐릭터만 남는다. */
.svh__mascot {
	position: absolute;
	left: -86px;
	right: 196px;
	top: -10px;
	bottom: -10px;
	pointer-events: none;
}
.svh__mascot picture { display: block; width: 100%; height: 100%; }
.svh__mascot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 74% 48%;
	mix-blend-mode: multiply;
	/* multiply 로 옅어진 대비를 되살려 오토바이가 묻히지 않게 */
	filter: saturate(1.12) contrast(1.06);
	/* 네 변을 부드럽게 지워 배경과 경계가 생기지 않게 한다 */
	-webkit-mask-image: radial-gradient(ellipse closest-side at 56% 50%,
		#000 70%, rgba(0, 0, 0, .94) 82%, rgba(0, 0, 0, .5) 93%, transparent 100%);
	mask-image: radial-gradient(ellipse closest-side at 56% 50%,
		#000 70%, rgba(0, 0, 0, .94) 82%, rgba(0, 0, 0, .5) 93%, transparent 100%);
}

/* 체크리스트 : 레퍼런스처럼 그림 오른쪽에 떠 있는 딥틸 카드 */
.svh__chk {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 196px;
	margin: 0;
	padding: 16px 16px;
	list-style: none;
	border-radius: 16px;
	background: linear-gradient(158deg, #0E7A72 0%, #0A5B56 100%);
	box-shadow: 0 12px 30px rgba(6, 74, 70, .3);
}
.svh__chk li {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 0;
	font-size: 13px;
	font-weight: 600;
	color: #E6FBF7;
	letter-spacing: -.03em;
	white-space: nowrap;
}
.svh__chk i {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--sv-mint);
	color: #05403C;
	font-size: 11px;
	font-weight: 900;
	font-style: normal;
}

/* ─────────────────────────────────────────────
   한눈에 보기
   ───────────────────────────────────────────── */
.svk {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--sv-line);
	border-radius: 16px;
	background: var(--sv-card);
	overflow: hidden;
}
.svk > li {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	padding: 20px 22px;
	border-left: 1px solid var(--sv-line2);
}
.svk > li:first-child { border-left: 0; }
.svk__ic {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
}
.svk__ic svg { width: 22px; height: 22px; }
.svk__ic.mint { background: #E4F7F4; color: var(--sv-deep); }
.svk__ic.teal { background: #E4F7F4; color: #0E8F85; }
.svk__ic.gold { background: #FFF3DF; color: var(--sv-gold); }
.svk > li > div { min-width: 0; }
.svk__k {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--sv-ink2);
	letter-spacing: -.02em;
}
.svk__v {
	display: block;
	margin: 1px 0 2px;
	font-size: 27px;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -.035em;
	color: var(--sv-ink);
	font-variant-numeric: tabular-nums;
}
.svk__s {
	margin: 0;
	font-size: 12px;
	color: var(--sv-ink3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ─────────────────────────────────────────────
   카테고리 탭 + 정렬
   ───────────────────────────────────────────── */
.svt {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 4px;
}
.svt__tabs {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}
.svt__tabs a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 9px 18px;
	border: 1px solid var(--sv-line);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	color: var(--sv-ink2);
	letter-spacing: -.02em;
	white-space: nowrap;
	transition: border-color .15s, color .15s, background .15s;
}
.svt__tabs a em { font-style: normal; font-weight: 600; color: var(--sv-ink3); }
.svt__tabs a:hover { border-color: var(--sv-mint); color: var(--sv-deep); }
.svt__tabs a.on {
	background: var(--sv-ink);
	border-color: var(--sv-ink);
	color: #fff;
}
.svt__tabs a.on em { color: rgba(255, 255, 255, .62); }

.svt__sort { flex: 0 0 auto; }
.svt__sort select {
	height: 40px;
	padding: 0 34px 0 16px;
	border: 1px solid var(--sv-line);
	border-radius: 10px;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235A7180' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sv-ink2);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.svt__result {
	margin: -8px 0 0;
	font-size: 14px;
	color: var(--sv-ink2);
}
.svt__result b { color: var(--sv-ink); font-weight: 800; }

/* ─────────────────────────────────────────────
   사이트 카드
   ───────────────────────────────────────────── */
.svg-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.svc { min-width: 0; }
.svc__in {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 44px 18px 18px;
	border: 1px solid var(--sv-line);
	border-radius: 16px;
	background: var(--sv-card);
	transition: border-color .16s, box-shadow .16s, transform .16s;
}
.svc__in:hover {
	border-color: #A8E3DA;
	box-shadow: 0 10px 26px rgba(20, 33, 43, .09);
	transform: translateY(-2px);
}

.svc__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 4px 11px;
	border-radius: 7px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: -.02em;
	background: #EEF3F6;
	color: var(--sv-ink2);
}
.svc__badge.gt { background: #E2F6EC; color: #0B8049; }   /* 보증업체 */
.svc__badge.nm { background: #FFF3DF; color: #A86412; }   /* 일반등록 */
.svc__badge.ck { background: #E7F2FE; color: #1963B3; }   /* 정보확인중 */
.svc__badge.ca { background: #FDEAE8; color: #B3251A; }   /* 주의정보 */

.svc__logo {
	display: grid;
	place-items: center;
	width: 100%;
	height: 72px;
	margin-bottom: 14px;
	border-radius: 10px;
	background: #F4F7F9;
	overflow: hidden;
}
.svc__logo img { max-width: 82%; max-height: 56px; object-fit: contain; }
.svc__logo b {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -.03em;
	color: #9FB2BE;
}

.svc__nm {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--sv-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.svc__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 9px 0 0;
}
.svc__tags span {
	padding: 3px 10px;
	border-radius: 6px;
	background: #F1F5F7;
	font-size: 12px;
	font-weight: 600;
	color: var(--sv-ink2);
}
.svc__tags .mute { background: none; padding-left: 0; color: var(--sv-ink3); font-weight: 400; }

.svc__dm {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 10px 0 0;
	font-size: 13.5px;
	color: var(--sv-ink2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.svc__dm svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--sv-ink3); }
.svc__dm .mute { color: var(--sv-ink3); }

.svc__rate {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 10px 0 0;
	font-size: 13.5px;
	color: var(--sv-ink2);
}
.svc__rate .st { width: 16px; height: 16px; color: var(--sv-gold); }
.svc__rate .st.off { color: #D9E2E7; }
.svc__rate b {
	font-size: 15.5px;
	font-weight: 900;
	color: var(--sv-ink);
	font-variant-numeric: tabular-nums;
}
.svc__rate em { font-style: normal; color: var(--sv-ink3); font-size: 12.5px; }
.svc__rate em.none { font-size: 13px; }

.svc__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--sv-line2);
}
.svc__split .c {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 12px;
	color: var(--sv-ink3);
}
.svc__split .c:first-child {
	flex-direction: row;
	align-items: center;
	gap: 5px;
	padding-right: 10px;
	border-right: 1px solid var(--sv-line2);
}
.svc__split svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--sv-warn); }
.svc__split b {
	font-size: 12.5px;
	font-weight: 800;
	color: var(--sv-ink);
	font-variant-numeric: tabular-nums;
}
.svc__split .lb { font-size: 11.5px; }

.svc__go {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 14px;
}
.svc__go::before { content: none; }
.svc__in .svc__go {
	margin-top: 14px;
	padding: 10px 0;
	border: 1px solid #BEE7E0;
	border-radius: 10px;
	background: #fff;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sv-deep);
	letter-spacing: -.02em;
	transition: background .15s, border-color .15s;
}
.svc__in:hover .svc__go { background: #E9F8F5; border-color: var(--sv-mint); }
.svc__go em { font-style: normal; }

/* 전체 보기 */
.svg-more { display: flex; justify-content: center; margin-top: 6px; }
.svg-more__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 34px;
	border: 1px solid var(--sv-line);
	border-radius: 999px;
	background: #fff;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--sv-ink);
	letter-spacing: -.02em;
	transition: border-color .15s, background .15s;
}
.svg-more__btn:hover { border-color: var(--sv-mint); background: var(--sv-soft); }
.svg-more__btn em { font-style: normal; color: var(--sv-deep); }

/* ─────────────────────────────────────────────
   안내
   ───────────────────────────────────────────── */
.sva {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	gap: 28px;
	align-items: center;
	margin-top: 8px;
	padding: 30px 32px;
	border: 1px solid var(--sv-line);
	border-radius: 16px;
	background: var(--sv-card);
}
.sva__txt h2 {
	margin: 0 0 12px;
	font-size: 21px;
	font-weight: 900;
	letter-spacing: -.035em;
	color: var(--sv-ink);
}
.sva__txt p {
	margin: 0;
	font-size: 14px;
	line-height: 1.75;
	color: var(--sv-ink2);
}
.sva__txt p.em {
	margin-top: 10px;
	padding-left: 11px;
	border-left: 3px solid var(--sv-mint);
	font-size: 13px;
	color: var(--sv-ink3);
}
.sva__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sva__grid li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
	padding: 18px 10px;
	border: 1px solid var(--sv-line2);
	border-radius: 12px;
	background: #FBFDFD;
	text-align: center;
}
.sva__grid .ic {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-bottom: 4px;
	color: var(--sv-deep);
}
.sva__grid .ic.gold { color: var(--sv-gold); }
.sva__grid .ic svg { width: 24px; height: 24px; }
.sva__grid b {
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: -.025em;
	color: var(--sv-ink);
}
.sva__grid .d { font-size: 11.5px; color: var(--sv-ink3); line-height: 1.45; }

/* ─────────────────────────────────────────────
   자동완성 (히어로 검색창 기준으로 위치 보정)
   ───────────────────────────────────────────── */
.svh__sch .sv-auto {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	z-index: 40;
	max-height: 300px;
	overflow-y: auto;
	border: 1px solid var(--sv-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 14px 32px rgba(20, 33, 43, .14);
}
.svh__sch .sv-auto a {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 11px 18px;
	font-size: 14px;
	color: var(--sv-ink);
}
.svh__sch .sv-auto a:hover { background: var(--sv-soft); }
.svh__sch .sv-auto span { font-size: 12.5px; color: var(--sv-ink3); }

/* ─────────────────────────────────────────────
   반응형
   ───────────────────────────────────────────── */
@media (max-width: 1100px) {
	.svg-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sva { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
	.svh {
		grid-template-columns: minmax(0, 1fr);
		padding: 32px 24px 28px;
	}
	.svh__title { font-size: 38px; }
	.svh__lead { font-size: 17px; }
	.svh__side { min-height: 210px; justify-content: flex-end; }
	.svh__mascot { left: -30px; right: 178px; aspect-ratio: 300 / 230; }
	.svh__chk { max-width: 190px; }
	.svk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.svk > li:nth-child(odd) { border-left: 0; }
	.svk > li:nth-child(n + 3) { border-top: 1px solid var(--sv-line2); }
	.svg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.svt { flex-wrap: wrap; }
	.svt__sort { width: 100%; }
	.svt__sort select { width: 100%; }
}

@media (max-width: 600px) {
	.sv2 { gap: 16px; }
	.svh { padding: 26px 18px 24px; border-radius: 16px; }
	.svh__title { font-size: 31px; }
	.svh__lead { font-size: 15.5px; }
	.svh__sch { padding-left: 15px; gap: 7px; }
	.svh__sch input { height: 38px; font-size: 14px; }
	.svh__sch button { height: 38px; padding: 0 17px; font-size: 14px; }
	.svh__side { min-height: 0; flex-direction: column; align-items: stretch; gap: 10px; }
	.svh__mascot { position: relative; left: auto; right: auto; top: auto; transform: none; width: 100%; aspect-ratio: 16 / 9; }
	.svh__chk { max-width: none; }
	.svk { grid-template-columns: minmax(0, 1fr); }
	.svk > li { border-left: 0; }
	.svk > li + li { border-top: 1px solid var(--sv-line2); }
	.svg-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.sva { padding: 22px 18px; }
	.sva__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─────────────────────────────────────────────
   다크 모드
   ───────────────────────────────────────────── */
[data-theme="dark"] .sv2 {
	--sv-ink:   #E7F3F1;
	--sv-ink2:  #A4BCB9;
	--sv-ink3:  #7D9693;
	--sv-line:  #24383B;
	--sv-line2: #1D2E31;
	--sv-card:  #101B1D;
	--sv-soft:  #152A2B;
	--sv-deep:  #4FD9C8;
	--sv-mint:  #0CEFD3;
}
[data-theme="dark"] .svh {
	border-color: #1E3A3A;
	background:
		radial-gradient(120% 130% at 100% 0%, rgba(12, 239, 211, .12) 0%, rgba(12, 239, 211, 0) 58%),
		linear-gradient(135deg, #0F2123 0%, #0B1A1C 100%);
}
[data-theme="dark"] .svh__sch { background: #0B1416; border-color: #147A72; box-shadow: none; }
[data-theme="dark"] .svh__sch input { color: var(--sv-ink); }
[data-theme="dark"] .svh__sch button { background: #0E8F85; color: #04191A; }
[data-theme="dark"] .svh__sch button:hover { background: var(--sv-mint); }
[data-theme="dark"] .svh__ex a { background: #0E1E20; border-color: #24383B; color: var(--sv-ink2); }
[data-theme="dark"] .svh__ex a:hover { border-color: var(--sv-mint); color: var(--sv-mint); }
/* 다크에서는 multiply 를 쓰면 그림이 검게 묻히므로 끄고 밝기만 맞춘다 */
[data-theme="dark"] .svh__mascot img { mix-blend-mode: normal; opacity: .92; }

[data-theme="dark"] .svk__ic.mint,
[data-theme="dark"] .svk__ic.teal { background: rgba(12, 239, 211, .12); color: var(--sv-mint); }
[data-theme="dark"] .svk__ic.gold { background: rgba(245, 166, 35, .14); color: #E8B45C; }

[data-theme="dark"] .svt__tabs a { background: #0E1A1C; border-color: #24383B; color: var(--sv-ink2); }
[data-theme="dark"] .svt__tabs a:hover { border-color: var(--sv-mint); color: var(--sv-mint); }
[data-theme="dark"] .svt__tabs a.on { background: var(--sv-mint); border-color: var(--sv-mint); color: #04191A; }
[data-theme="dark"] .svt__tabs a.on em { color: rgba(4, 25, 26, .6); }
[data-theme="dark"] .svt__sort select {
	background-color: #0E1A1C;
	border-color: #24383B;
	color: var(--sv-ink2);
}

[data-theme="dark"] .svc__in:hover { border-color: #17756D; box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
[data-theme="dark"] .svc__logo { background: #16262A; }
[data-theme="dark"] .svc__logo b { color: #4E6A6C; }
[data-theme="dark"] .svc__tags span { background: #16262A; color: var(--sv-ink2); }
[data-theme="dark"] .svc__badge { background: #1B2C2F; color: var(--sv-ink2); }
[data-theme="dark"] .svc__badge.gt { background: rgba(11, 128, 73, .2);  color: #5FCB95; }
[data-theme="dark"] .svc__badge.nm { background: rgba(168, 100, 18, .22); color: #E0A75C; }
[data-theme="dark"] .svc__badge.ck { background: rgba(25, 99, 179, .22);  color: #7FB6EF; }
[data-theme="dark"] .svc__badge.ca { background: rgba(179, 37, 26, .22);  color: #EE8A7D; }
[data-theme="dark"] .svc__in .svc__go { background: #0E1A1C; border-color: #17756D; color: var(--sv-mint); }
[data-theme="dark"] .svc__in:hover .svc__go { background: rgba(12, 239, 211, .1); }

[data-theme="dark"] .svg-more__btn { background: #0E1A1C; border-color: #24383B; color: var(--sv-ink); }
[data-theme="dark"] .svg-more__btn:hover { border-color: var(--sv-mint); background: var(--sv-soft); }

[data-theme="dark"] .sva__grid li { background: #16262A; border-color: #24383B; }
[data-theme="dark"] .svh__sch .sv-auto { background: #101B1D; border-color: #24383B; }
[data-theme="dark"] .svh__sch .sv-auto a { color: var(--sv-ink); }
[data-theme="dark"] .svh__sch .sv-auto a:hover { background: var(--sv-soft); }

/* ─────────────────────────────────────────────
   사이트 등록 (최고관리자)
   ───────────────────────────────────────────── */
.svt__new {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--sv-deep);
	border-radius: 10px;
	background: var(--sv-deep);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.02em;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.svt__new svg { width: 15px; height: 15px; }
.svt__new:hover { background: #005F5A; border-color: #005F5A; }

.svreg {
	margin-top: -8px;
	padding: 20px 22px;
	border: 1px solid var(--sv-line);
	border-left: 3px solid var(--sv-mint);
	border-radius: 14px;
	background: var(--sv-card);
	box-shadow: 0 6px 20px rgba(20, 33, 43, .06);
}
.svreg[hidden] { display: none; }
.svreg__h {
	margin: 0 0 14px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--sv-ink2);
}
.svreg__row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 12px;
}
.svreg__f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.svreg__f > span {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--sv-ink2);
	letter-spacing: -.02em;
}
.svreg__f > span em {
	margin-left: 4px;
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
	color: var(--sv-ink3);
}
.svreg__f input,
.svreg__f select {
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--sv-line);
	border-radius: 9px;
	background: #fff;
	font-size: 14px;
	color: var(--sv-ink);
	outline: none;
	min-width: 0;
}
.svreg__f input:focus,
.svreg__f select:focus { border-color: var(--sv-mint); box-shadow: 0 0 0 3px rgba(22, 194, 174, .14); }
.svreg__f input::placeholder { color: var(--sv-ink3); }

.svreg__cate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--sv-line2);
}
.svreg__ck { font-size: 12.5px; font-weight: 700; color: var(--sv-ink2); }
.svreg__cate label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border: 1px solid var(--sv-line);
	border-radius: 999px;
	font-size: 13px;
	color: var(--sv-ink2);
	cursor: pointer;
}
.svreg__cate label:has(input:checked) {
	border-color: var(--sv-mint);
	background: var(--sv-soft);
	color: var(--sv-deep);
	font-weight: 700;
}

.svreg__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
}
.svreg__note {
	flex: 1 1 260px;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--sv-ink3);
}
.svreg__note b { color: var(--sv-ink2); font-weight: 700; }
.svreg__btns { flex: 0 0 auto; display: flex; gap: 8px; }

@media (max-width: 760px) {
	.svreg__row { grid-template-columns: minmax(0, 1fr); }
	.svreg__foot { flex-direction: column; align-items: stretch; }
	.svreg__btns { justify-content: flex-end; }
}

[data-theme="dark"] .svreg { background-color: var(--sv-card); border-color: var(--sv-line); box-shadow: none; }
[data-theme="dark"] .svreg__f input,
[data-theme="dark"] .svreg__f select { background-color: #0B1416; border-color: var(--sv-line); color: var(--sv-ink); }
[data-theme="dark"] .svreg__cate label { border-color: var(--sv-line); }
[data-theme="dark"] .svt__new { background-color: #0E8F85; border-color: #0E8F85; color: #04191A; }
[data-theme="dark"] .svt__new:hover { background-color: var(--sv-mint); border-color: var(--sv-mint); }

/* 안내 영역의 문맥 링크 (커뮤니티 정보) */
.sva__link {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--sv-ink2);
}
.sva__link b { color: var(--sv-ink); font-weight: 700; }
.sva__link a {
	font-weight: 700;
	color: var(--sv-deep);
	border-bottom: 1px solid currentColor;
}
.sva__link a:hover { color: var(--sv-mint); }