/**
 * SURVEYON — 섹션 · 컴포넌트 스타일
 *
 * style.css 의 디자인 토큰을 전제로 합니다. (surveyon-style 이후 로드)
 *
 * 목차
 * 01. 브랜드 로고
 * 02. 사이트 헤더 · GNB
 * 03. 모바일 드로어
 * 04. 문의 CTA 밴드
 * 05. 사이트 푸터
 * 06. 여성기업 인증 마크
 * 07. 페이지네이션
 * 08. 페이지 내 이동(앵커) 메뉴
 *
 * ── front-page 섹션 ──
 * 10. ② Hero
 * 11. ③ 신뢰지표 바
 * 12. ④ 대표소개 & 전문가 네트워크
 * 13. ⑤ 핵심 서비스 4카드
 */


/* ==========================================================================
   01. 브랜드 로고
   ========================================================================== */

.sv-brand {
	display: flex;
	flex-direction: column;
	gap: var(--sv-space-12);
	margin: 0;
	flex: none;
}

.sv-brand__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sv-space-12);
	color: var(--sv-primary-dark);
	transition: opacity var(--sv-dur) var(--sv-ease);
}

.sv-brand__link:hover {
	color: var(--sv-primary-dark);
	opacity: 0.78;
}

.sv-logo__mark {
	width: 30px;
	height: 30px;
	flex: none;
}

.sv-logo__peak {
	fill: var(--sv-accent);
}

.sv-brand__name {
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	white-space: nowrap;
}

.sv-brand__image {
	width: auto;
	max-height: 40px;
	object-fit: contain;
}

.sv-brand__tagline {
	font-size: var(--sv-fs-xs);
	font-style: italic;
	letter-spacing: 0.01em;
	color: var(--sv-dark-muted);
	max-width: 34ch;
}

/* 다크 배경(푸터) 대응 */
.sv-brand--footer .sv-brand__link {
	color: #fff;
}

.sv-brand--footer .sv-logo__mark {
	width: 34px;
	height: 34px;
}

.sv-brand--footer .sv-logo__peak {
	fill: var(--sv-accent-light);
}

.sv-brand--footer .sv-brand__name {
	font-size: 1.375rem;
}


/* ==========================================================================
   02. 사이트 헤더 · GNB (①)
   ========================================================================== */

.sv-site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--sv-z-header);
	background-color: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	transition: background-color var(--sv-dur) var(--sv-ease);
}

/* backdrop-filter 미지원 브라우저 폴백 */
@supports not (backdrop-filter: blur(1px)) {
	.sv-site-header {
		background-color: rgba(255, 255, 255, 0.98);
	}
}

.sv-site-header.is-scrolled {
	background-color: rgba(255, 255, 255, 0.94);
	box-shadow: 0 1px 0 var(--sv-line), 0 6px 20px -14px rgba(27, 0, 97, 0.28);
}

.sv-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sv-space-32);
	height: var(--sv-header-h);
	transition: height var(--sv-dur) var(--sv-ease);
}

.sv-site-header.is-scrolled .sv-header__inner {
	height: var(--sv-header-h-scroll);
}

/* 스크롤 진행과 무관하게 항상 얇게 깔리는 코퍼 헤어라인 */
.sv-header__rule {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(
		to right,
		transparent,
		var(--sv-accent-200) 18%,
		var(--sv-accent-400) 50%,
		var(--sv-accent-200) 82%,
		transparent
	);
	opacity: 0;
	transition: opacity var(--sv-dur) var(--sv-ease);
	pointer-events: none;
}

.sv-site-header.is-scrolled .sv-header__rule {
	opacity: 1;
}

/* --- 데스크톱 내비 --- */
.sv-nav {
	margin-inline-start: auto;
}

.sv-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 0.4rem + 1.8vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-nav__list > li {
	position: relative;
}

.sv-nav__list > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-block: var(--sv-space-8);
	font-size: var(--sv-fs-sm);
	font-weight: 600;
	color: var(--sv-ink);
	white-space: nowrap;
}

.sv-nav__list > li > a::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 2px;
	background-color: var(--sv-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--sv-dur) var(--sv-ease);
}

.sv-nav__list > li > a:hover {
	color: var(--sv-primary-dark);
}

.sv-nav__list > li > a:hover::after,
.sv-nav__list > li.current-menu-item > a::after,
.sv-nav__list > li.current-menu-ancestor > a::after,
.sv-nav__list > li.current_page_parent > a::after {
	transform: scaleX(1);
}

.sv-nav__list > li.current-menu-item > a,
.sv-nav__list > li.current-menu-ancestor > a {
	color: var(--sv-primary-dark);
}

/* --- 2뎁스 드롭다운 --- */
.sv-nav__list .sub-menu {
	position: absolute;
	inset-block-start: calc(100% + 12px);
	inset-inline-start: -16px;
	min-width: 200px;
	margin: 0;
	padding: var(--sv-space-8);
	list-style: none;
	background-color: var(--sv-surface);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-radius);
	box-shadow: var(--sv-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--sv-dur) var(--sv-ease),
		transform var(--sv-dur) var(--sv-ease),
		visibility var(--sv-dur) var(--sv-ease);
}

.sv-nav__list > li:hover > .sub-menu,
.sv-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.sv-nav__list .sub-menu a {
	display: block;
	padding: var(--sv-space-8) var(--sv-space-12);
	border-radius: var(--sv-radius-xs);
	font-size: var(--sv-fs-sm);
	font-weight: 500;
	color: var(--sv-body);
}

.sv-nav__list .sub-menu a:hover {
	background-color: var(--sv-primary-050);
	color: var(--sv-primary-dark);
}

/* --- 우측 액션 --- */
.sv-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sv-space-16);
	flex: none;
}

.sv-header__tel {
	font-size: var(--sv-fs-sm);
	font-weight: 700;
	color: var(--sv-primary-dark);
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.sv-header__tel:hover {
	color: var(--sv-accent);
}

.sv-header__cta {
	white-space: nowrap;
}

@media (max-width: 1180px) {
	.sv-header__tel {
		display: none;
	}
}

@media (max-width: 900px) {
	.sv-nav {
		display: none;
	}

	.sv-header__inner {
		gap: var(--sv-space-16);
		justify-content: space-between;
	}

	.sv-header__actions {
		margin-inline-start: auto;
		gap: var(--sv-space-8);
	}

	.sv-brand__name {
		font-size: 1.0625rem;
	}

	.sv-logo__mark {
		width: 26px;
		height: 26px;
	}
}

@media (max-width: 420px) {
	.sv-header__cta {
		display: none;
	}
}

/* --- 햄버거 버튼 --- */
.sv-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-inline-end: -10px;
	border-radius: var(--sv-radius);
	color: var(--sv-primary-dark);
}

.sv-nav-toggle__bars {
	display: block;
	position: relative;
	width: 22px;
	height: 14px;
}

.sv-nav-toggle__bars i {
	position: absolute;
	inset-inline-start: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	border-radius: 1px;
	transition:
		transform var(--sv-dur) var(--sv-ease),
		opacity var(--sv-dur-fast) var(--sv-ease);
}

.sv-nav-toggle__bars i:nth-child(1) { inset-block-start: 0; }
.sv-nav-toggle__bars i:nth-child(2) { inset-block-start: 6px; }
.sv-nav-toggle__bars i:nth-child(3) { inset-block-start: 12px; }

.sv-nav-toggle.is-active .sv-nav-toggle__bars i:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.sv-nav-toggle.is-active .sv-nav-toggle__bars i:nth-child(2) {
	opacity: 0;
}

.sv-nav-toggle.is-active .sv-nav-toggle__bars i:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}


/* ==========================================================================
   03. 모바일 드로어
   ========================================================================== */

.sv-drawer {
	position: fixed;
	inset-block-start: var(--sv-drawer-top, var(--sv-header-h));
	inset-inline: 0;
	max-height: calc(100vh - var(--sv-drawer-top, var(--sv-header-h)));
	max-height: calc(100dvh - var(--sv-drawer-top, var(--sv-header-h)));
	z-index: var(--sv-z-overlay);
	background-color: var(--sv-surface);
	border-block-start: 1px solid var(--sv-line);
	box-shadow: var(--sv-shadow-lg);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition:
		opacity var(--sv-dur) var(--sv-ease),
		transform var(--sv-dur) var(--sv-ease),
		visibility var(--sv-dur) var(--sv-ease);
}

.sv-drawer.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* 헤더가 축소된 상태에서 열면 드로어 시작점도 함께 올린다. */
.sv-site-header.is-scrolled + .sv-drawer {
	--sv-drawer-top: var(--sv-header-h-scroll);
}

.sv-drawer__inner {
	padding: var(--sv-space-24) var(--sv-gutter) var(--sv-space-40);
	display: grid;
	gap: var(--sv-space-32);
}

.sv-drawer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
}

.sv-drawer__list > li {
	border-block-end: 1px solid var(--sv-line-soft);
}

.sv-drawer__list a {
	display: block;
	padding-block: var(--sv-space-16);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--sv-ink);
}

.sv-drawer__list > li.current-menu-item > a {
	color: var(--sv-primary);
}

.sv-drawer__list .sub-menu {
	margin: 0 0 var(--sv-space-12);
	padding: 0 0 0 var(--sv-space-16);
	list-style: none;
	border-inline-start: 1px solid var(--sv-line);
}

.sv-drawer__list .sub-menu a {
	padding-block: var(--sv-space-8);
	font-size: var(--sv-fs-sm);
	font-weight: 500;
	color: var(--sv-muted);
}

.sv-drawer__foot {
	display: grid;
	gap: var(--sv-space-24);
}

.sv-drawer__contact {
	display: grid;
	gap: var(--sv-space-12);
	margin: 0;
	font-size: var(--sv-fs-sm);
}

.sv-drawer__contact > div {
	display: flex;
	gap: var(--sv-space-12);
}

.sv-drawer__contact dt {
	flex: none;
	width: 56px;
	color: var(--sv-faint);
	font-size: var(--sv-fs-xs);
	padding-block-start: 0.15em;
}

.sv-drawer__contact dd {
	margin: 0;
	font-weight: 600;
	color: var(--sv-ink);
}

.sv-drawer__scrim {
	position: fixed;
	inset: 0;
	z-index: calc(var(--sv-z-overlay) - 1);
	background-color: rgba(27, 0, 97, 0.32);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--sv-dur) var(--sv-ease),
		visibility var(--sv-dur) var(--sv-ease);
}

.sv-drawer__scrim.is-visible {
	opacity: 1;
	visibility: visible;
}

@media (min-width: 901px) {
	.sv-drawer,
	.sv-drawer__scrim {
		display: none;
	}
}


/* ==========================================================================
   04. 문의 CTA 밴드 (⑩)
   ========================================================================== */

.sv-cta-band {
	background-color: var(--sv-base);
	border-block-start: 1px solid var(--sv-line);
	overflow: hidden;
}

.sv-cta-band__inner {
	position: relative;
	z-index: var(--sv-z-base);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-space-40);
}

.sv-cta-band__copy {
	max-width: 40ch;
}

.sv-cta-band__title {
	max-width: none;
	white-space: nowrap;
	font-size: var(--sv-fs-h2);
	color: var(--sv-primary-dark);
}

.sv-cta-band__desc {
	margin-top: var(--sv-space-12);
	font-size: var(--sv-fs-lead);
	color: var(--sv-muted);
}

@media (max-width: 420px) {
	.sv-cta-band__title {
		white-space: normal;
	}
}

.sv-cta-band__actions {
	display: grid;
	gap: var(--sv-space-16);
	justify-items: start;
}

.sv-cta-band__tel {
	font-size: var(--sv-fs-sm);
	color: var(--sv-muted);
}

.sv-cta-band__tel a {
	font-weight: 700;
	color: var(--sv-primary-dark);
	margin-inline-start: var(--sv-space-4);
}

.sv-cta-band__tel a:hover {
	color: var(--sv-accent);
}

@media (max-width: 780px) {
	.sv-cta-band__actions {
		justify-items: stretch;
		width: 100%;
	}

	.sv-cta-band__actions .sv-btn {
		width: 100%;
	}

	.sv-cta-band__tel {
		text-align: center;
	}
}


/* ==========================================================================
   05. 사이트 푸터 (⑪)
   ========================================================================== */

.sv-site-footer {
	position: relative;
	overflow: hidden;
	background-color: var(--sv-primary-dark);
	color: var(--sv-dark-body);
	padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 5.5rem) var(--sv-space-32);
	font-size: var(--sv-fs-sm);
}

.sv-site-footer > .sv-container {
	position: relative;
	z-index: var(--sv-z-base);
}

.sv-site-footer a {
	color: var(--sv-dark-body);
}

.sv-site-footer a:hover {
	color: #fff;
}

.sv-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	padding-block-end: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.sv-footer__heading {
	font-size: var(--sv-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--sv-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sv-accent-light);
	margin-block-end: var(--sv-space-20);
}

/* --- 브랜드 · 주소 --- */
.sv-footer__brand {
	display: grid;
	gap: var(--sv-space-24);
	align-content: start;
}

.sv-footer__address {
	font-style: normal;
	line-height: var(--sv-lh-loose);
	color: var(--sv-dark-muted);
}

.sv-footer__contact-lines {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-space-8) var(--sv-space-20);
	margin-top: var(--sv-space-8);
}

.sv-footer__contact-lines > span {
	display: inline-flex;
	align-items: baseline;
	gap: var(--sv-space-4);
	white-space: nowrap;
}

/* --- 푸터 메뉴 --- */
.sv-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sv-space-12);
}

.sv-footer__list a {
	display: inline-block;
	color: var(--sv-dark-muted);
	transition: color var(--sv-dur) var(--sv-ease), transform var(--sv-dur) var(--sv-ease);
}

.sv-footer__list a:hover {
	color: #fff;
	transform: translateX(3px);
}

.sv-footer__list .sub-menu {
	display: none;
}

/* --- 사업자 정보 --- */
.sv-footer__biz {
	padding-block: var(--sv-space-24);
	border-block: 1px solid var(--sv-dark-line);
}

.sv-footer__biz-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-space-8) var(--sv-space-32);
	margin: 0;
	font-size: var(--sv-fs-xs);
	color: var(--sv-dark-muted);
}

.sv-footer__biz-row {
	display: inline-flex;
	align-items: baseline;
	gap: var(--sv-space-8);
}

.sv-footer__biz-row dt {
	color: rgba(255, 255, 255, 0.42);
}

.sv-footer__biz-row dd {
	margin: 0;
	color: rgba(255, 255, 255, 0.76);
	font-variant-numeric: tabular-nums;
}

/* --- 최하단 --- */
.sv-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-space-12) var(--sv-space-24);
	padding-block-start: var(--sv-space-24);
}

.sv-footer__copy {
	font-size: var(--sv-fs-xs);
	color: var(--sv-dark-muted);
	font-variant-numeric: tabular-nums;
}

.sv-footer__utility-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-space-8) var(--sv-space-20);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--sv-fs-xs);
}

.sv-footer__utility-list a {
	color: var(--sv-dark-muted);
}

@media (max-width: 900px) {
	.sv-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sv-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.sv-footer__top {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ==========================================================================
   06. 여성기업 인증 마크
   ========================================================================== */

/* assets/img/women-enterprise.(svg|png) 가 없을 때 쓰는 대체 배지 */
.sv-cert {
	display: inline-grid;
	justify-items: center;
	align-content: center;
	gap: var(--sv-space-2);
	width: 112px;
	height: 112px;
	padding: var(--sv-space-12);
	border: 1px solid var(--sv-accent-400);
	border-radius: var(--sv-radius);
	background-color: rgba(176, 141, 87, 0.10);
	text-align: center;
}

.sv-cert__eyebrow {
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-accent-light);
}

.sv-cert__name {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	line-height: 1.2;
}

.sv-cert__sub {
	font-size: var(--sv-fs-xs);
	color: rgba(255, 255, 255, 0.68);
}

/*
 * 인증 마크는 배경 없이 그대로 얹는다.
 * assets/img/women-enterprise.svg 자체가 투명 배경이며, 흰 판을 깔면
 * 다크 푸터에서 카드가 도드라져 보인다(2026-08-24 제거).
 */
.sv-cert__image {
	width: 112px;
	height: auto;
}

.sv-cert__meta {
	display: grid;
	gap: var(--sv-space-8);
	margin-block-start: var(--sv-space-16);
	font-size: var(--sv-fs-xs);
}

.sv-cert__meta > div {
	display: grid;
	gap: var(--sv-space-2);
}

.sv-cert__meta dt {
	color: rgba(255, 255, 255, 0.42);
}

.sv-cert__meta dd {
	margin: 0;
	color: rgba(255, 255, 255, 0.76);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}


/* ==========================================================================
   07. 페이지네이션
   ========================================================================== */

.sv-pagination {
	margin-block-start: var(--sv-space-64);
	padding-block-start: var(--sv-space-32);
	border-block-start: 1px solid var(--sv-line);
}

.sv-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sv-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-pagination a,
.sv-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: var(--sv-space-12);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-radius);
	font-size: var(--sv-fs-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--sv-body);
	transition:
		border-color var(--sv-dur) var(--sv-ease),
		background-color var(--sv-dur) var(--sv-ease),
		color var(--sv-dur) var(--sv-ease);
}

.sv-pagination a:hover {
	border-color: var(--sv-primary-dark);
	color: var(--sv-primary-dark);
}

.sv-pagination .current {
	background-color: var(--sv-primary-dark);
	border-color: var(--sv-primary-dark);
	color: #fff;
}

.sv-pagination .dots {
	border-color: transparent;
	color: var(--sv-faint);
}


/* ==========================================================================
   08. 페이지 내 이동(앵커) 메뉴 — GNB 아래 스티키 서브바
   --------------------------------------------------------------------------
   스티키 오프셋은 축소된 헤더 높이(--sv-header-h-scroll)다. 헤더는 z-index 200,
   이 바는 100 이므로 오프셋으로 헤더를 피하지 않으면 헤더 뒤로 숨는다.
   현재 항목은 색 + 코퍼 밑줄로만 표시한다. 굵기를 바꾸면 가로 한 줄에서
   항목들이 좌우로 밀려 흔들린다.
   ========================================================================== */

.sv-anchor {
	position: sticky;
	inset-block-start: var(--sv-header-h-scroll);
	z-index: var(--sv-z-sticky);
	background-color: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-block-end: 1px solid var(--sv-line-soft);
}

@supports not (backdrop-filter: blur(1px)) {
	.sv-anchor {
		background-color: rgba(255, 255, 255, 0.98);
	}
}

.sv-anchor__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: var(--sv-space-24);
	row-gap: 0;
}

.sv-anchor__scroller {
	min-width: 0;
}

/* 리셋(ul[class] { padding: 0 })이 padding 을 이기므로 간격은 gap 으로만 만든다. */
.sv-anchor__list {
	display: flex;
	align-items: center;
	column-gap: var(--sv-space-24);
	row-gap: 0;
	margin: 0;
	list-style: none;
}

.sv-anchor__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 56px;
	font-size: var(--sv-fs-xs);
	font-weight: 500;
	color: var(--sv-muted);
	white-space: nowrap;
	transition: color var(--sv-dur) var(--sv-ease);
}

.sv-anchor__link::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 2px;
	background-color: var(--sv-accent);
	opacity: 0;
	transition: opacity var(--sv-dur) var(--sv-ease);
}

.sv-anchor__link:hover {
	color: var(--sv-primary-dark);
}

.sv-anchor__link[aria-current="true"] {
	color: var(--sv-primary-dark);
}

.sv-anchor__link[aria-current="true"]::after {
	opacity: 1;
}

.sv-anchor__cta {
	flex: none;
}

/* 앵커 이동 시 헤더 + 서브바에 제목이 가려지지 않게 한다.
   JS 는 클릭 시 같은 값을 직접 계산하고, 이 규칙은 URL 직접 진입·JS 미실행 대비다. */
body.sv-has-anchor :target {
	scroll-margin-block-start: calc(var(--sv-header-h-scroll) + 56px + var(--sv-space-24));
}

/* 모바일 전용 회사소개서 다운로드 — 데스크톱은 앵커 바에 이미 있으므로 숨긴다. */
.sv-anchor-brochure {
	display: none;
	margin-block-start: var(--sv-space-32);
}

@media (max-width: 900px) {
	/* 모바일: 좌우 스크롤되는 한 줄. 좌우 여백은 ul 이 아니라 스크롤러에 준다. */
	.sv-anchor .sv-anchor__inner {
		position: relative;
		padding-inline: 0;
	}

	.sv-anchor__scroller {
		flex: 1 1 auto;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-inline: var(--sv-gutter) var(--sv-space-40);
	}

	.sv-anchor__scroller::-webkit-scrollbar {
		display: none;
	}

	.sv-anchor__list {
		column-gap: var(--sv-space-16);
	}

	.sv-anchor__link {
		height: 46px;
	}

	/* 오른쪽 끝 페이드 — 항목이 더 있다는 신호 */
	.sv-anchor__inner::after {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		width: var(--sv-space-40);
		background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96));
		pointer-events: none;
	}

	.sv-anchor__cta {
		display: none;
	}

	.sv-anchor-brochure {
		display: block;
	}

	body.sv-has-anchor :target {
		scroll-margin-block-start: calc(var(--sv-header-h-scroll) + 46px + var(--sv-space-16));
	}
}

@media print {
	.sv-anchor {
		display: none;
	}
}


/* ==========================================================================
   10. ② Hero
   ========================================================================== */

.sv-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--sv-surface);
	padding-block: clamp(4rem, 2.5rem + 7vw, 9rem) clamp(4.5rem, 3rem + 7vw, 9.5rem);
}

/* 배경 모티프 — 격자는 위쪽, 꺾은선은 아래쪽에 얕게 깔린다. */
.sv-hero .sv-motif--grid {
	opacity: 0.9;
}

.sv-hero .sv-motif--plot {
	inset-block-start: auto;
	height: 62%;
	opacity: 0.85;
}

.sv-hero__inner {
	position: relative;
	z-index: var(--sv-z-base);
	max-width: calc(980px + var(--sv-gutter) * 2);
	margin-inline: auto;
}

.sv-hero__title {
	margin-top: var(--sv-space-24);
	max-width: 17ch;
}

.sv-hero__desc {
	margin-top: var(--sv-space-32);
	max-width: 56ch;
	color: var(--sv-body);
}

.sv-hero__actions {
	margin-top: clamp(2rem, 1.5rem + 1.6vw, 3rem);
	gap: var(--sv-space-12) var(--sv-space-16);
}

/* 슬로건 — 코퍼 헤어라인과 함께 하단에 낮게 배치 */
.sv-hero__slogan {
	display: flex;
	align-items: center;
	gap: var(--sv-space-16);
	margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
	font-size: var(--sv-fs-sm);
	font-style: italic;
	letter-spacing: 0.01em;
	color: var(--sv-faint);
}

.sv-hero__slogan::before {
	content: "";
	width: clamp(32px, 6vw, 72px);
	height: 1px;
	background-color: var(--sv-accent);
	flex: none;
}

@media (max-width: 560px) {
	.sv-hero__title {
		max-width: none;
	}

	.sv-hero__actions .sv-btn {
		width: 100%;
	}
}


/* ==========================================================================
   11. ③ 신뢰지표 바
   ========================================================================== */

.sv-trustbar {
	background-color: var(--sv-surface);
	border-block: 1px solid var(--sv-line);
	padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

/* dt(설명) → dd(값) DOM 순서를 유지한 채 값이 위로 오도록 뒤집는다. */
.sv-trustbar .sv-stat {
	flex-direction: column-reverse;
}

.sv-trustbar .sv-stat__label {
	margin: 0;
}

.sv-trustbar .sv-stat__value {
	margin: 0;
}


/* ==========================================================================
   12. ④ 대표소개 & 전문가 네트워크
   ========================================================================== */

.sv-leader__body {
}

/* 좌우 카드(프로필 · 협업 구조) 높이를 서로 맞춘다 */
.sv-leader__profile {
	display: flex;
}

.sv-leader__profile > .sv-profile {
	flex: 1 1 auto;
}

/* --- 대표 프로필 카드 --- */
.sv-profile {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	background-color: var(--sv-surface);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-radius);
	box-shadow: var(--sv-shadow-sm);
}

.sv-profile__figure {
	margin: 0;
}

/* 메인페이지 프로필 카드 — 사진 영역 없이 텍스트만 표시해 카드 높이를 줄인다 */
.sv-profile--no-figure {
	grid-template-columns: minmax(0, 1fr);
}

.sv-profile__photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--sv-radius);
	background-color: var(--sv-base);
}

/* 사진 미등록 시 대체 블록 (assets/img/ceo.jpg 를 넣으면 자동 교체) */
.sv-profile__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: var(--sv-radius);
	background-color: var(--sv-base);
	background-image:
		linear-gradient(to right, var(--sv-primary-080) 1px, transparent 1px),
		linear-gradient(to bottom, var(--sv-primary-080) 1px, transparent 1px);
	background-size: 28px 28px;
	color: var(--sv-primary-200);
	border: 1px dashed var(--sv-line);
}

.sv-profile__placeholder .sv-logo__mark {
	width: 44px;
	height: 44px;
}

.sv-profile__role {
	font-size: var(--sv-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--sv-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sv-accent);
}

.sv-profile__name {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--sv-space-12);
	margin-top: var(--sv-space-8);
	font-size: var(--sv-fs-h3);
	color: var(--sv-ink);
}

.sv-profile__name-en {
	font-size: var(--sv-fs-xs);
	font-weight: 500;
	letter-spacing: var(--sv-ls-wide);
	text-transform: uppercase;
	color: var(--sv-faint);
}

.sv-profile__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-space-8);
	margin: var(--sv-space-16) 0 0;
	padding: 0;
	list-style: none;
}

.sv-profile__desc {
	margin-top: var(--sv-space-20);
	font-size: var(--sv-fs-sm);
	line-height: var(--sv-lh-loose);
	color: var(--sv-muted);
}

.sv-profile__meta {
	margin-top: var(--sv-space-24);
	padding-top: var(--sv-space-8);
	border-top: 1px solid var(--sv-line-soft);
}

@media (max-width: 640px) {
	.sv-profile {
		grid-template-columns: minmax(0, 1fr);
	}

	.sv-profile__figure {
		max-width: 200px;
	}
}

/* --- 협업 조직도 --- */
.sv-network {
	padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	background-color: var(--sv-surface-2);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-radius);
}

.sv-network__title {
	font-size: var(--sv-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--sv-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sv-muted);
	padding-bottom: var(--sv-space-16);
	border-bottom: 1px solid var(--sv-line);
}

.sv-network__note {
	margin-top: var(--sv-space-24);
	padding-top: var(--sv-space-20);
	border-top: 1px solid var(--sv-line);
	font-size: var(--sv-fs-xs);
	line-height: var(--sv-lh-loose);
	color: var(--sv-faint);
	white-space: pre-line; /* 문장 안에 \n이 있으면 지정된 지점에서 줄바꿈 */
}

/* 조직도 — 연결선은 전부 border 로 그린다 (이미지 없음) */
.sv-org {
	margin-top: var(--sv-space-32);
	text-align: center;
}

/*
 * 대표 카드는 block + fit-content 로 가운데 정렬한다.
 * inline-block 으로 두면 글자 baseline 아래 leading 여백이 함께 붙어,
 * 바로 아래 연결선 블록과의 사이에 눈에 보이는 틈이 생긴다.
 */
.sv-org__lead {
	position: relative;
	display: block;
	width: fit-content;
	margin-inline: auto;
	min-width: 220px;
	padding: var(--sv-space-16) var(--sv-space-24);
	background-color: var(--sv-primary-dark);
	border-radius: var(--sv-radius);
	color: #fff;
}

.sv-org__lead-role {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--sv-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sv-accent-light);
}

.sv-org__lead-name {
	margin-top: var(--sv-space-4);
	font-size: var(--sv-fs-h4);
	font-weight: 700;
	color: #fff;
}

.sv-org__lead-desc {
	margin-top: var(--sv-space-4);
	font-size: var(--sv-fs-xs);
	color: rgba(255, 255, 255, 0.66);
}

/*
 * 연결선 전용 블록 (2026-08-21 전면 교체).
 *
 * 이전 방식: 대표 카드와 각 노드의 pseudo 요소에 연결선을 나눠 그리고,
 * 위치를 `.sv-org__children` 의 padding-top 28px 을 기준으로 계산했다.
 * 그런데 style.css 의 리셋 `ul[class] { padding: 0 }` 이 특이도(0,1,1)로
 * 클래스 하나짜리 `.sv-org__children`(0,1,0)을 이기기 때문에 그 28px 은
 * 애초에 적용된 적이 없었다. 기준이 사라진 채로 계산이 돌아
 *   - 가로선이 중앙이 아니라 카드 윗변에서 16px 위에 붙고
 *   - 대표 카드에서 내려온 세로선이 가로선을 지나 가운데 카드까지 관통
 * 하는 상태가 계속됐다.
 *
 * 새 방식: 대표 카드와 노드 사이에 연결선 전용 블록을 두고, 노드와 동일한
 * 그리드(3열 + 같은 열 간격)를 적용해 선을 격자 위에 얹는다. 선의 좌표를
 * 사람이 계산하지 않으므로 여백 규칙·화면 폭·반올림에 영향을 받지 않는다.
 * 행 간격은 반드시 0 이어야 한다 (gap 단축 속성을 쓰면 행에도 간격이 들어가
 * 세로선과 가로선 사이가 벌어진다).
 */
.sv-org__branch {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: 26px 26px;
	column-gap: var(--sv-space-16);
	row-gap: 0;
}

/* 대표 카드 → 가로선 (가운데 열) */
.sv-org__stem {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	width: 1px;
	background-color: var(--sv-line);
}

/* 가로선 — 첫 노드 중심에서 마지막 노드 중심까지.
   좌우 여백은 한 열의 절반: (전체폭 - 열간격 2개) / 3 / 2 */
.sv-org__bar {
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: start;
	height: 1px;
	margin-inline: calc((100% - var(--sv-space-16) * 2) / 6);
	background-color: var(--sv-line);
}

/* 가로선 → 각 노드 */
.sv-org__leg {
	grid-row: 2;
	justify-self: center;
	width: 1px;
	background-color: var(--sv-line);
}

.sv-org__leg--1 { grid-column: 1; }
.sv-org__leg--2 { grid-column: 2; }
.sv-org__leg--3 { grid-column: 3; }

/* 간격은 위 연결선 블록이 만든다. 여기에 padding 을 걸어도
   리셋 `ul[class] { padding: 0 }` 에 밀리므로 쓰지 않는다. */
.sv-org__children {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sv-space-16);
	margin: 0;
	list-style: none;
	text-align: start;
}

.sv-org__node {
	position: relative;
	padding: var(--sv-space-16);
	background-color: var(--sv-surface);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-radius);
}

.sv-org__node-title {
	font-size: var(--sv-fs-sm);
	font-weight: 700;
	color: var(--sv-ink);
}

.sv-org__node-desc {
	margin-top: var(--sv-space-8);
	font-size: var(--sv-fs-xs);
	line-height: var(--sv-lh-loose);
	color: var(--sv-muted);
}

/*
 * 좁은 폭 — 세로 스택 + 좌측 레일.
 * 레일은 border 하나로 긋고, 연결선 블록은 대표 카드에서 레일까지 내려오는
 * 세로 구간으로만 재사용한다(가로선·가지선은 숨김). 노드 들여쓰기는 padding 이
 * 아니라 margin 으로 준다 — `ul[class] { padding: 0 }` 리셋에 밀리기 때문.
 */
@media (max-width: 640px) {
	.sv-org {
		text-align: start;
	}

	.sv-org__lead {
		width: auto;
		min-width: 0;
	}

	.sv-org__branch {
		display: block;
		height: 20px;
		margin-inline-start: 24px;
		border-inline-start: 1px solid var(--sv-line);
	}

	.sv-org__branch > span {
		display: none;
	}

	.sv-org__children {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sv-space-12);
		margin: 0 0 0 24px;
		border-inline-start: 1px solid var(--sv-line);
	}

	.sv-org__node {
		margin-inline-start: 24px;
	}

	/* 레일에서 각 노드로 뻗는 가로 눈금 */
	.sv-org__node::before {
		content: "";
		position: absolute;
		inset-block-start: 24px;
		inset-inline-start: -24px;
		width: 24px;
		height: 1px;
		background-color: var(--sv-line);
	}
}


/* ==========================================================================
   13. ⑤ 핵심 서비스 4카드
   ========================================================================== */

.sv-services {
	overflow: hidden;
}

.sv-services .sv-motif--dots {
	opacity: 0.4;
}

.sv-services__grid {
	gap: var(--sv-space-20);
}

/* 4카드는 1440px 이하에서 2열, 780px 이하에서 1열 (style.css 기본 규칙) */
.sv-services .sv-card {
	background-color: var(--sv-surface);
}

.sv-services .sv-card__title {
	min-height: 2.6em;
}

@media (max-width: 1024px) {
	.sv-services .sv-card__title {
		min-height: 0;
	}
}


/* ==========================================================================
   14. ⑥ 플래그십 프로젝트 (다크)
   ========================================================================== */

.sv-flagship {
	overflow: hidden;
}

.sv-flagship__body {
	align-items: start;
}

.sv-flagship__meta-title,
.sv-predict__title {
	font-size: var(--sv-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--sv-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sv-accent-light);
	padding-bottom: var(--sv-space-16);
	margin-bottom: var(--sv-space-8);
	border-bottom: 1px solid var(--sv-dark-line);
}

.sv-flagship__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-space-8);
	margin: var(--sv-space-24) 0 0;
	padding: 0;
	list-style: none;
}

/* --- 예측 vs 실제 차트 --- */
.sv-predict {
	padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--sv-dark-line);
	border-radius: var(--sv-radius);
}

.sv-predict__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sv-space-12);
}

.sv-predict__head .sv-predict__title {
	flex: 1 1 auto;
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

.sv-predict__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-space-16);
	font-size: var(--sv-fs-xs);
	color: var(--sv-dark-muted);
}

.sv-predict__key {
	display: inline-flex;
	align-items: center;
	gap: var(--sv-space-8);
	white-space: nowrap;
}

.sv-predict__key::before {
	content: "";
	width: 14px;
	flex: none;
}

.sv-predict__key--band::before {
	height: 8px;
	border: 1px solid var(--sv-accent);
	border-bottom: 0;
}

.sv-predict__key--bar::before {
	height: 8px;
	border-radius: 1px;
	background-color: var(--sv-primary-light);
}

.sv-predict__list {
	margin: var(--sv-space-32) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sv-space-32);
}

.sv-predict__name {
	font-size: var(--sv-fs-sm);
	font-weight: 700;
	color: #fff;
}

/* 트랙: 상단은 예측 범위 브래킷, 하단은 실제 득표율 막대 */
.sv-predict__track {
	position: relative;
	height: 40px;
	margin-top: var(--sv-space-12);
	border-bottom: 1px solid var(--sv-dark-line);
}

.sv-predict__band {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: var(--band-start, 0%);
	width: var(--band-width, 0%);
	min-width: 3px;
	height: 12px;
	border: 1px solid var(--sv-accent);
	border-bottom: 0;
}

/* 브래킷 중앙에서 막대까지 내려오는 기준선 */
.sv-predict__band::after {
	content: "";
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 50%;
	width: 1px;
	height: 8px;
	background-color: var(--sv-accent-400);
}

.sv-predict__bar {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: var(--bar-width, 0%);
	height: 14px;
	border-radius: 0 1px 1px 0;
	background: linear-gradient(to right, var(--sv-primary), var(--sv-primary-light));
}

.sv-predict__values {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-space-8) var(--sv-space-32);
	margin-top: var(--sv-space-12);
	font-size: var(--sv-fs-sm);
}

.sv-predict__pred,
.sv-predict__real {
	display: inline-flex;
	align-items: baseline;
	gap: var(--sv-space-8);
}

.sv-predict__value-label {
	font-size: var(--sv-fs-xs);
	color: var(--sv-dark-muted);
}

.sv-predict__pred .sv-num {
	color: var(--sv-accent-light);
	font-weight: 600;
}

.sv-predict__real .sv-num {
	color: #fff;
	font-weight: 700;
}

/* --- 축 --- */
.sv-predict__axis {
	position: relative;
	height: 28px;
	margin-top: var(--sv-space-24);
	padding-top: var(--sv-space-8);
	border-top: 1px solid var(--sv-dark-line);
	font-size: 0.6875rem;
	color: var(--sv-dark-muted);
}

.sv-predict__tick {
	position: absolute;
	inset-block-start: var(--sv-space-8);
	inset-inline-start: var(--tick, 0%);
	transform: translateX(-50%);
	font-variant-numeric: tabular-nums;
}

.sv-predict__tick::before {
	content: "";
	position: absolute;
	inset-block-start: calc(-1 * var(--sv-space-8) - 1px);
	inset-inline-start: 50%;
	width: 1px;
	height: 5px;
	background-color: var(--sv-dark-line);
}

.sv-predict__axis-unit {
	position: absolute;
	inset-block-start: var(--sv-space-8);
	inset-inline-end: 0;
}

@media (max-width: 480px) {
	.sv-predict__values {
		gap: var(--sv-space-4);
		flex-direction: column;
	}
}


/* ==========================================================================
   15. ⑦ Why Surveyon
   ========================================================================== */

.sv-why__grid {
	gap: var(--sv-space-32) var(--sv-space-40);
}

.sv-why__item {
	padding-top: var(--sv-space-24);
	border-top: 2px solid var(--sv-primary-dark);
}

.sv-why__num {
	font-size: var(--sv-fs-xs);
	font-weight: 700;
	letter-spacing: var(--sv-ls-wide);
	color: var(--sv-accent);
}

.sv-why__title {
	margin-top: var(--sv-space-12);
	font-size: var(--sv-fs-h4);
	color: var(--sv-ink);
}

.sv-why__desc {
	margin-top: var(--sv-space-12);
	font-size: var(--sv-fs-sm);
	line-height: var(--sv-lh-loose);
	color: var(--sv-muted);
	white-space: pre-line; /* 문장 안에 \n이 있으면 지정된 지점에서 줄바꿈 */
}


/* ==========================================================================
   16. ⑧ 조사 프로세스 타임라인
   ========================================================================== */

.sv-process {
	overflow: hidden;
}

.sv-process__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sv-space-24);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: sv-step;
}

.sv-process__step {
	position: relative;
	padding-top: var(--sv-space-40);
}

/*
 * 단계를 잇는 수평 기준선 — 첫 점 중심에서 마지막 점 중심까지.
 *
 * 이전에는 좌우를 10% 씩 잘라내는 어림값이었는데, 점은 각 칸의 시작에서 7.5px
 * 지점에 있으므로 선이 첫 점보다 한참 오른쪽에서 시작하고 마지막 점을 지나
 * 빈 공간까지 삐져나와 있었다(2026-08-21 수정). 칸 폭을 실제로 계산해 맞춘다.
 *   칸 폭 = (전체폭 - 열간격 4개) / 5,  오른쪽 여백 = 칸 폭 - 7.5px
 * 단계 수가 5개가 아니게 되면 이 계산식도 함께 고쳐야 한다.
 */
.sv-process__list::before {
	content: "";
	position: absolute;
	inset-block-start: 7.5px;
	inset-inline-start: 7.5px;
	inset-inline-end: calc((100% - var(--sv-space-24) * 4) / 5 - 7.5px);
	height: 1px;
	background-color: var(--sv-line);
}

.sv-process__marker {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	width: 15px;
	height: 15px;
}

.sv-process__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--sv-surface);
	border: 2px solid var(--sv-primary-dark);
	transition: background-color var(--sv-dur) var(--sv-ease);
}

.sv-process__step:last-child .sv-process__dot {
	background-color: var(--sv-accent);
	border-color: var(--sv-accent);
}

.sv-process__num {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--sv-ls-wide);
	color: var(--sv-faint);
}

.sv-process__title {
	margin-top: var(--sv-space-8);
	font-size: var(--sv-fs-h4);
	color: var(--sv-ink);
}

.sv-process__desc {
	margin-top: var(--sv-space-12);
	font-size: var(--sv-fs-sm);
	line-height: var(--sv-lh-loose);
	color: var(--sv-muted);
	white-space: pre-line; /* 문장 안에 \n이 있으면 지정된 지점에서 줄바꿈 */
}

.sv-process__meta {
	margin-top: var(--sv-space-16);
	padding-top: var(--sv-space-12);
	border-top: 1px solid var(--sv-line);
	font-size: var(--sv-fs-xs);
	color: var(--sv-accent-dark);
}

/* --------------------------------------------------------------------------
   ⑧-1 메인 전용 압축형 (레일형) — 단계 제목만 (2026-08-21 신설)

   메인에는 단계 제목만 두고 설명은 서비스 페이지에만 둔다. 같은 5단계가 두
   페이지에 통째로 반복되던 것을 없애기 위한 구조다.

   연결선은 조직도(.sv-org__branch)와 같은 방식 — 항목과 동일한 그리드를 씌우고
   선을 격자 위에 얹는다. 점은 각 칸의 '시작점'에 두므로(제목이 좌측 정렬이라
   중앙 정렬하면 제목과 어긋난다) 가로선은 첫 칸 시작에서 마지막 칸 시작까지다.
   끝 여백 = 한 칸 폭 = (전체폭 - 열간격 4개) / 5. 앞뒤 6.5px 은 점의 반지름.
   -------------------------------------------------------------------------- */

.sv-flow-rail {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-template-rows: 15px;
	column-gap: var(--sv-space-24);
	row-gap: 0;
	margin-top: var(--sv-space-40);
}

.sv-flow-rail__bar {
	grid-column: 1 / -1;
	grid-row: 1;
	align-self: center;
	height: 1px;
	margin-inline: 4.5px calc((100% - var(--sv-space-24) * 4) / 5 - 4.5px);
	background-color: var(--sv-line);
}

.sv-flow-rail__dot {
	grid-row: 1;
	justify-self: start;
	align-self: center;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--sv-surface);
	border: 2px solid var(--sv-primary-dark);
}

.sv-flow-rail__dot--1 { grid-column: 1; }
.sv-flow-rail__dot--2 { grid-column: 2; }
.sv-flow-rail__dot--3 { grid-column: 3; }
.sv-flow-rail__dot--4 { grid-column: 4; }

.sv-flow-rail__dot--5 {
	grid-column: 5;
	background-color: var(--sv-accent);
	border-color: var(--sv-accent);
}

/* padding 은 쓰지 않는다 — 리셋 `ol[class] { padding: 0 }` 에 밀린다. */
.sv-flow {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: var(--sv-space-24);
	margin: var(--sv-space-16) 0 0;
	list-style: none;
}

.sv-flow__num {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--sv-ls-wide);
	color: var(--sv-faint);
}

.sv-flow__title {
	margin-top: var(--sv-space-8);
	font-size: var(--sv-fs-h4);
	color: var(--sv-ink);
}

.sv-flow-more {
	margin-top: var(--sv-space-32);
}

/* 좁은 폭 — 가로 레일을 접고 세로 타임라인으로 전환 */
@media (max-width: 820px) {
	.sv-flow-rail {
		display: none;
	}

	.sv-flow {
		grid-template-columns: minmax(0, 1fr);
		margin-top: var(--sv-space-32);
		border-inline-start: 1px solid var(--sv-line);
	}

	.sv-flow__item {
		position: relative;
		margin-inline-start: 28px;
		padding-block: var(--sv-space-12);
	}

	.sv-flow__item::before {
		content: "";
		position: absolute;
		inset-block-start: 20px;
		inset-inline-start: -32px;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background-color: var(--sv-base);
		border: 2px solid var(--sv-primary-dark);
	}

	.sv-flow__item:last-child::before {
		background-color: var(--sv-accent);
		border-color: var(--sv-accent);
	}
}


/* 태블릿 — 3열 + 2열로 접히면 수평선이 어긋나므로 숨긴다 */
@media (max-width: 1024px) {
	.sv-process__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--sv-space-32);
	}

	.sv-process__list::before {
		display: none;
	}
}

/* 모바일 — 세로 타임라인.
   들여쓰기는 padding 이 아니라 각 단계의 margin 으로 준다 — 리셋
   `ol[class] { padding: 0 }` 이 특이도(0,1,1)로 이 규칙을 이겨 padding 이
   적용되지 않고, 그 결과 점 마커가 세로선에서 벗어나 있었다(2026-08-21 수정). */
@media (max-width: 700px) {
	.sv-process__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		border-inline-start: 1px solid var(--sv-line);
	}

	.sv-process__step {
		margin-inline-start: 28px;
		padding-top: 0;
		padding-bottom: var(--sv-space-40);
	}

	.sv-process__step:last-child {
		padding-bottom: 0;
	}

	.sv-process__marker {
		inset-block-start: 2px;
		inset-inline-start: -35px;
		background-color: var(--sv-base);
	}
}


/* ==========================================================================
   17. ⑨ 리서치 노트 카드
   ========================================================================== */

.sv-note {
	padding: 0;
	overflow: hidden;
}

.sv-note__figure {
	margin: 0;
	background-color: var(--sv-base);
}

.sv-note__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform var(--sv-dur-slow) var(--sv-ease-out);
}

.sv-note__thumb--empty {
	display: grid;
	place-items: center;
	color: var(--sv-primary-200);
	background-image:
		linear-gradient(to right, var(--sv-primary-080) 1px, transparent 1px),
		linear-gradient(to bottom, var(--sv-primary-080) 1px, transparent 1px);
	background-size: 28px 28px;
}

.sv-note__thumb--empty .sv-logo__mark {
	width: 38px;
	height: 38px;
}

.sv-note:hover .sv-note__thumb {
	transform: scale(1.03);
}

.sv-note__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.sv-note__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-space-8) var(--sv-space-12);
	font-size: var(--sv-fs-xs);
	color: var(--sv-faint);
	font-variant-numeric: tabular-nums;
}

.sv-note__cat {
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--sv-accent-dark);
}

.sv-note__read::before {
	content: "·";
	margin-inline-end: var(--sv-space-8);
	color: var(--sv-line);
}

.sv-note__title {
	margin-top: var(--sv-space-12);
	font-size: var(--sv-fs-h4);
	line-height: var(--sv-lh-snug);
	color: var(--sv-ink);
}

.sv-note__title a {
	color: inherit;
}

.sv-note:hover .sv-note__title {
	color: var(--sv-primary-dark);
}

.sv-note__excerpt {
	margin-top: var(--sv-space-12);
	font-size: var(--sv-fs-sm);
	line-height: var(--sv-lh-loose);
	color: var(--sv-muted);
}

/* 목록에서 카드가 가로형으로 필요할 때 */
.sv-note--row {
	flex-direction: row;
	align-items: stretch;
}

.sv-note--row .sv-note__figure {
	flex: 0 0 clamp(160px, 26%, 300px);
}

.sv-note--row .sv-note__thumb {
	height: 100%;
	aspect-ratio: auto;
}

@media (max-width: 640px) {
	.sv-note--row {
		flex-direction: column;
	}

	.sv-note--row .sv-note__figure {
		flex: none;
	}

	.sv-note--row .sv-note__thumb {
		height: auto;
		aspect-ratio: 3 / 2;
	}
}


/* ==========================================================================
   18. 서브 페이지 헤더 · 빈 상태
   ========================================================================== */

.sv-page-head {
	position: relative;
	overflow: hidden;
	background-color: var(--sv-base);
	border-block-end: 1px solid var(--sv-line);
	padding-block: clamp(3rem, 2rem + 4.5vw, 6rem);
}

.sv-page-head > .sv-container {
	position: relative;
	z-index: var(--sv-z-base);
}

.sv-page-head__title {
	margin-top: var(--sv-space-20);
	font-size: var(--sv-fs-h1);
	color: var(--sv-ink-strong);
}

.sv-page-head__desc {
	margin-top: var(--sv-space-20);
	max-width: 62ch;
	font-size: var(--sv-fs-lead);
	line-height: var(--sv-lh-loose);
	color: var(--sv-muted);
}

.sv-empty {
	padding: clamp(3rem, 2rem + 4vw, 5rem) var(--sv-space-24);
	text-align: center;
	border: 1px dashed var(--sv-line);
	border-radius: var(--sv-radius);
	background-color: var(--sv-surface-2);
}

.sv-empty__title {
	font-size: var(--sv-fs-h4);
	font-weight: 700;
	color: var(--sv-ink);
}

.sv-empty__desc {
	margin-top: var(--sv-space-12);
	font-size: var(--sv-fs-sm);
	color: var(--sv-muted);
}

.sv-empty .sv-cluster {
	justify-content: center;
}


/* ==========================================================================
   19. 목록 필터 칩
   ========================================================================== */

.sv-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-space-16) var(--sv-space-32);
	margin-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	padding-block-end: var(--sv-space-24);
	border-block-end: 1px solid var(--sv-line);
}

.sv-filter__nav {
	flex: 1 1 auto;
}

.sv-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-filter__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sv-space-8);
	padding: 0.5rem 1rem;
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-radius-pill);
	font-size: var(--sv-fs-xs);
	font-weight: 600;
	color: var(--sv-body);
	transition:
		border-color var(--sv-dur) var(--sv-ease),
		background-color var(--sv-dur) var(--sv-ease),
		color var(--sv-dur) var(--sv-ease);
}

.sv-filter__chip:hover {
	border-color: var(--sv-primary-dark);
	color: var(--sv-primary-dark);
}

.sv-filter__chip.is-current {
	background-color: var(--sv-primary-dark);
	border-color: var(--sv-primary-dark);
	color: #fff;
}

.sv-filter__count {
	font-size: 0.6875rem;
	color: var(--sv-faint);
}

.sv-filter__chip.is-current .sv-filter__count {
	color: rgba(255, 255, 255, 0.6);
}


/* ==========================================================================
   20. 리서치 노트 상세
   ========================================================================== */

.sv-single__head {
	position: relative;
	overflow: hidden;
	background-color: var(--sv-base);
	padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

.sv-single__head > .sv-container {
	position: relative;
	z-index: var(--sv-z-base);
}

.sv-single__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-space-8);
	font-size: var(--sv-fs-xs);
	color: var(--sv-faint);
}

.sv-single__breadcrumb a {
	color: var(--sv-muted);
	font-weight: 600;
}

.sv-single__breadcrumb a:hover {
	color: var(--sv-accent);
}

.sv-single__title {
	margin-top: var(--sv-space-20);
	font-size: var(--sv-fs-h1);
	color: var(--sv-ink-strong);
}

.sv-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-space-8) var(--sv-space-20);
	margin-top: var(--sv-space-24);
	padding-top: var(--sv-space-20);
	border-top: 1px solid var(--sv-line);
	font-size: var(--sv-fs-xs);
	color: var(--sv-muted);
	font-variant-numeric: tabular-nums;
}

.sv-single__updated {
	color: var(--sv-faint);
}

.sv-single__figure {
	margin: 0;
	padding-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.sv-single__thumb {
	width: 100%;
	border-radius: var(--sv-radius);
}

.sv-single__figure figcaption {
	margin-top: var(--sv-space-12);
	font-size: var(--sv-fs-xs);
	color: var(--sv-faint);
	text-align: center;
}

/* --- 태그 --- */
.sv-single__tags {
	margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
	padding-top: var(--sv-space-24);
	border-top: 1px solid var(--sv-line);
}

.sv-single__tags-title {
	font-size: var(--sv-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--sv-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sv-muted);
	margin-bottom: var(--sv-space-16);
}

.sv-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-tag-list a {
	display: inline-block;
	padding: 0.3125rem 0.75rem;
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-radius-pill);
	font-size: var(--sv-fs-xs);
	color: var(--sv-muted);
}

.sv-tag-list a:hover {
	border-color: var(--sv-accent);
	color: var(--sv-accent-dark);
}

/* --- 이전 · 다음 --- */
.sv-postnav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sv-space-16);
	margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.sv-postnav__item {
	display: grid;
	gap: var(--sv-space-8);
	padding: var(--sv-space-20);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-radius);
	transition:
		border-color var(--sv-dur) var(--sv-ease),
		box-shadow var(--sv-dur) var(--sv-ease);
}

.sv-postnav__item:hover {
	border-color: var(--sv-primary-200);
	box-shadow: var(--sv-shadow-sm);
}

.sv-postnav__item--next {
	text-align: end;
	grid-column: 2;
}

.sv-postnav__label {
	font-size: var(--sv-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--sv-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sv-accent);
}

.sv-postnav__title {
	font-size: var(--sv-fs-sm);
	font-weight: 600;
	line-height: var(--sv-lh-snug);
	color: var(--sv-ink);
}

.sv-page-links {
	margin-top: var(--sv-space-32);
	font-size: var(--sv-fs-sm);
	color: var(--sv-muted);
}

@media (max-width: 640px) {
	.sv-postnav {
		grid-template-columns: minmax(0, 1fr);
	}

	.sv-postnav__item--next {
		grid-column: 1;
		text-align: start;
	}
}


/* ==========================================================================
   21. 회사소개 · 정보 카드
   ========================================================================== */

.sv-about__profile {
	max-width: 860px;
}

.sv-network--wide {
	max-width: 960px;
	margin-inline: auto;
}

.sv-info-card {
	padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	background-color: var(--sv-surface);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-radius);
}

.sv-info-card__title {
	font-size: var(--sv-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--sv-ls-eyebrow);
	text-transform: uppercase;
	color: var(--sv-accent);
	padding-bottom: var(--sv-space-16);
	margin-bottom: var(--sv-space-16);
	border-bottom: 1px solid var(--sv-line);
}

.sv-info-card--cert {
	text-align: center;
}

.sv-info-card--cert .sv-deflist {
	text-align: start;
}

.sv-info-card--cert .sv-cert,
.sv-info-card--cert .sv-cert__image {
	margin-inline: auto;
}

/* 밝은 배경용 인증 배지 변형 */
.sv-cert--light {
	background-color: var(--sv-accent-080);
	border-color: var(--sv-accent-200);
}

.sv-cert--light .sv-cert__eyebrow {
	color: var(--sv-accent-dark);
}

.sv-cert--light .sv-cert__name {
	color: var(--sv-primary-dark);
}

.sv-cert--light .sv-cert__sub {
	color: var(--sv-muted);
}


/* ==========================================================================
   22. 서비스 상세
   ========================================================================== */

.sv-toc__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sv-space-12);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sv-toc__item {
	display: flex;
	align-items: baseline;
	gap: var(--sv-space-12);
	height: 100%;
	padding: var(--sv-space-16);
	background-color: var(--sv-surface);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-radius);
	font-size: var(--sv-fs-sm);
	font-weight: 600;
	color: var(--sv-ink);
	transition:
		border-color var(--sv-dur) var(--sv-ease),
		box-shadow var(--sv-dur) var(--sv-ease);
}

.sv-toc__item:hover {
	border-color: var(--sv-primary-200);
	box-shadow: var(--sv-shadow-sm);
	color: var(--sv-primary-dark);
}

.sv-toc__num {
	flex: none;
	font-size: var(--sv-fs-xs);
	font-weight: 700;
	color: var(--sv-accent);
}

@media (max-width: 900px) {
	.sv-toc__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.sv-toc__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- 상세 블록 --- */
.sv-service-detail {
	scroll-margin-top: calc(var(--sv-header-h-scroll) + 24px);
}

.sv-service-detail--alt {
	background-color: var(--sv-surface-2);
}

.sv-service-detail__num {
	font-size: var(--sv-fs-xs);
	font-weight: 700;
	letter-spacing: var(--sv-ls-wide);
	color: var(--sv-accent);
}

.sv-service-detail__title {
	margin-top: var(--sv-space-12);
	font-size: var(--sv-fs-h2);
	color: var(--sv-ink);
}

.sv-service-detail__desc {
	margin-top: var(--sv-space-16);
	font-size: var(--sv-fs-sm);
	line-height: var(--sv-lh-loose);
	color: var(--sv-muted);
}

.sv-service-detail__lead {
	font-size: var(--sv-fs-lead);
	line-height: var(--sv-lh-loose);
	color: var(--sv-body);
	white-space: pre-line; /* 문장 안에 \n이 있으면 지정된 지점에서 줄바꿈 */
	padding-bottom: var(--sv-space-32);
	border-bottom: 1px solid var(--sv-line);
}

.sv-service-detail__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sv-space-16) var(--sv-space-32);
	margin: var(--sv-space-32) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--sv-fs-sm);
	color: var(--sv-ink);
	font-weight: 500;
}

.sv-service-detail__items li {
	position: relative;
	padding-inline-start: var(--sv-space-20);
}

.sv-service-detail__items li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.62em;
	width: 8px;
	height: 1px;
	background-color: var(--sv-accent);
}

/* 짝수 블록은 시각적으로 좌우를 뒤집는다 */
.sv-order-1 { order: -1; }
.sv-order-2 { order: 1; }

@media (max-width: 1024px) {
	.sv-order-1,
	.sv-order-2 {
		order: 0;
	}
}

@media (max-width: 560px) {
	.sv-service-detail__items {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ==========================================================================
   23. 문의 페이지
   ========================================================================== */

.sv-contact__layout {
	align-items: start;
	gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.sv-contact__form-wrap {
	scroll-margin-top: calc(var(--sv-header-h-scroll) + 24px);
}

.sv-form {
	margin-top: var(--sv-space-24);
}

.sv-notice + .sv-form {
	margin-top: var(--sv-space-24);
}

.sv-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sv-space-20) var(--sv-space-24);
}

.sv-field--full {
	grid-column: 1 / -1;
}

.sv-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-space-16) var(--sv-space-24);
	margin-top: var(--sv-space-32);
	padding-top: var(--sv-space-32);
	border-top: 1px solid var(--sv-line);
}

.sv-form__note {
	font-size: var(--sv-fs-xs);
	color: var(--sv-faint);
}

/* --- 우측 연락처 패널 --- */
.sv-contact__aside {
	position: sticky;
	inset-block-start: calc(var(--sv-header-h-scroll) + 24px);
}

.sv-contact__list {
	display: grid;
	gap: var(--sv-space-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-contact__list > li {
	display: grid;
	gap: var(--sv-space-4);
}

.sv-contact__label {
	font-size: var(--sv-fs-xs);
	color: var(--sv-faint);
}

.sv-contact__value {
	font-size: var(--sv-fs-sm);
	font-weight: 600;
	color: var(--sv-ink);
	line-height: var(--sv-lh-snug);
}

a.sv-contact__value:hover {
	color: var(--sv-accent-dark);
}

@media (max-width: 1024px) {
	.sv-contact__aside {
		position: static;
	}
}

@media (max-width: 560px) {
	.sv-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sv-form__foot .sv-btn {
		width: 100%;
	}
}


/* ==========================================================================
   24. 검색 폼
   ========================================================================== */

.sv-search {
	position: relative;
	flex: 0 1 260px;
}

.sv-search__input {
	width: 100%;
	padding: 0.5rem 2.75rem 0.5rem 1rem;
	min-height: 42px;
	background-color: var(--sv-surface);
	color: var(--sv-ink);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-radius-pill);
	font-size: var(--sv-fs-xs);
	appearance: none;
	transition:
		border-color var(--sv-dur) var(--sv-ease),
		box-shadow var(--sv-dur) var(--sv-ease);
}

.sv-search__input:focus {
	outline: none;
	border-color: var(--sv-primary);
	box-shadow: 0 0 0 3px var(--sv-primary-120);
}

.sv-search__submit {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: grid;
	place-items: center;
	width: 42px;
	color: var(--sv-muted);
	border-radius: var(--sv-radius-pill);
	transition: color var(--sv-dur) var(--sv-ease);
}

.sv-search__submit:hover {
	color: var(--sv-primary-dark);
}

.sv-search__submit svg {
	fill: none;
}

@media (max-width: 560px) {
	.sv-search {
		flex: 1 1 100%;
	}
}


/* ==========================================================================
   25. 댓글
   ========================================================================== */

.sv-comments {
	margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem);
	padding-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
	border-block-start: 1px solid var(--sv-line);
}

.sv-comments__title {
	font-size: var(--sv-fs-h4);
	color: var(--sv-ink);
	margin-block-end: var(--sv-space-24);
}

.sv-comments__list {
	margin: 0 0 var(--sv-space-40);
	padding: 0;
	list-style: none;
}

.sv-comments__list .children {
	margin: var(--sv-space-20) 0 0 var(--sv-space-24);
	padding-inline-start: var(--sv-space-24);
	list-style: none;
	border-inline-start: 1px solid var(--sv-line);
}

.sv-comments__list .comment,
.sv-comments__list .pingback {
	padding-block: var(--sv-space-24);
	border-block-start: 1px solid var(--sv-line-soft);
}

.sv-comments__list > li:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.sv-comments .comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-space-8) var(--sv-space-12);
	margin-block-end: var(--sv-space-12);
	font-size: var(--sv-fs-xs);
	color: var(--sv-faint);
}

.sv-comments .comment-author {
	display: flex;
	align-items: center;
	gap: var(--sv-space-8);
	font-weight: 700;
	color: var(--sv-ink);
}

.sv-comments .comment-author img {
	border-radius: 50%;
}

.sv-comments .comment-content {
	font-size: var(--sv-fs-sm);
	line-height: var(--sv-lh-loose);
	color: var(--sv-body);
}

.sv-comments .comment-content > * + * {
	margin-top: var(--sv-space-12);
}

.sv-comments .reply {
	margin-top: var(--sv-space-12);
	font-size: var(--sv-fs-xs);
	font-weight: 600;
}

.sv-comments__closed {
	font-size: var(--sv-fs-sm);
	color: var(--sv-muted);
	margin-block-end: var(--sv-space-32);
}

/* --- 댓글 작성 폼 --- */
.sv-comment-form .comment-form-comment,
.sv-comment-form .comment-form-author,
.sv-comment-form .comment-form-email,
.sv-comment-form .comment-form-url {
	margin-block-end: var(--sv-space-20);
}

.sv-comment-form label {
	display: block;
	margin-block-end: var(--sv-space-8);
	font-size: var(--sv-fs-xs);
	font-weight: 700;
	color: var(--sv-ink);
}

.sv-comment-form input[type="text"],
.sv-comment-form input[type="email"],
.sv-comment-form input[type="url"] {
	width: 100%;
	padding: 0.8125rem 1rem;
	min-height: 50px;
	background-color: var(--sv-surface);
	color: var(--sv-ink);
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-radius);
	font-size: var(--sv-fs-sm);
	appearance: none;
}

.sv-comment-form input[type="text"]:focus,
.sv-comment-form input[type="email"]:focus,
.sv-comment-form input[type="url"]:focus {
	outline: none;
	border-color: var(--sv-primary);
	box-shadow: 0 0 0 3px var(--sv-primary-120);
}

.sv-comment-form .comment-notes,
.sv-comment-form .comment-form-cookies-consent label {
	font-size: var(--sv-fs-xs);
	font-weight: 400;
	color: var(--sv-faint);
	line-height: var(--sv-lh-normal);
}

.sv-comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--sv-space-12);
	margin-block-end: var(--sv-space-20);
}

.sv-comment-form .comment-form-cookies-consent input {
	margin-block-start: 0.2em;
	accent-color: var(--sv-primary-dark);
}

@media (min-width: 641px) {
	.sv-comment-form .comment-form-author,
	.sv-comment-form .comment-form-email {
		display: inline-block;
		width: calc(50% - var(--sv-space-12));
	}

	.sv-comment-form .comment-form-author {
		margin-inline-end: var(--sv-space-20);
	}
}


/* ==========================================================================
   26. 일반 고정 페이지
   ========================================================================== */

.sv-page .sv-entry > *:first-child {
	margin-top: 0;
}

.sv-page .sv-entry h2:first-child {
	margin-top: 0;
	padding-top: 0;
}


/* ==========================================================================
   27. 프로필 카드 내 표 폭 보정 (좁은 컬럼에서 세로 배치)
   ========================================================================== */

.sv-profile__meta .sv-deflist__row {
	grid-template-columns: 1fr;
	gap: var(--sv-space-4);
}


/* ==========================================================================
   28. 전문분야 목록 · 실적 테이블 · 회사소개 앵커 메뉴 · 신뢰지표 더보기 링크
   ========================================================================== */

/* 대표 프로필 카드 — 전문분야 (dl 밖으로 분리된 전체 폭 블록) */
.sv-profile__expertise {
	margin-top: var(--sv-space-16);
	padding-top: var(--sv-space-16);
	border-top: 1px solid var(--sv-line-soft);
}

.sv-profile__expertise-title {
	margin: 0 0 var(--sv-space-8);
	font-size: var(--sv-fs-xs);
	font-weight: 600;
	color: var(--sv-faint);
	letter-spacing: 0.01em;
}

.sv-profile__expertise-list {
	display: grid;
	gap: var(--sv-space-4) var(--sv-space-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.sv-profile__expertise-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sv-profile__expertise-list li {
	padding: var(--sv-space-4) 0;
	line-height: 1.3;
}

.sv-profile__expertise-term {
	display: block;
	font-size: var(--sv-fs-xs);
	font-weight: 600;
	color: var(--sv-ink);
}

.sv-profile__expertise-sub {
	display: block;
	margin-top: 0.15em;
	font-size: 0.75rem;
	color: var(--sv-muted);
}

.sv-profile__tools {
	margin: var(--sv-space-12) 0 0;
	font-size: var(--sv-fs-xs);
	color: var(--sv-muted);
}

/* 신뢰지표 바 — "자세히 보기" 더보기 링크 (작게) */
.sv-stat__more {
	display: inline-flex;
	align-items: center;
	gap: 0.2em;
	margin-top: var(--sv-space-4);
	font-size: 0.6875rem;
	line-height: 1.4;
	color: var(--sv-primary);
	text-decoration: none;
}

.sv-stat__more span {
	font-size: 0.85em;
}

.sv-stat__more:hover {
	text-decoration: underline;
}

/* 회사소개 페이지 — 수행실적 테이블 */
.sv-track__table-wrap {
	overflow-x: auto;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(27, 0, 97, 0.06);
}

.sv-track-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	background: var(--sv-surface);
	font-size: var(--sv-fs-sm);
}

.sv-track-table thead th {
	background: var(--sv-primary-dark);
	color: #fff;
	text-align: left;
	font-weight: 600;
	font-size: var(--sv-fs-xs);
	padding: var(--sv-space-16) var(--sv-space-20);
}

.sv-track-table tbody td {
	padding: var(--sv-space-16) var(--sv-space-20);
	border-top: 1px solid var(--sv-line-soft);
	vertical-align: top;
}

.sv-track-table__year {
	color: var(--sv-primary);
	font-weight: 700;
	white-space: nowrap;
}

.sv-track-table__org {
	color: var(--sv-accent-dark);
	font-weight: 600;
	white-space: nowrap;
}