/* =====================================================================
   services.css — 업무 분야 페이지 전용
   시안: Figma node 8:801 (work-1920)
   ※ 공통 토큰·유틸(.container/.section/.eyebrow/.sec-title/.btn)은 layout.css
   ※ 값은 시안 실측값 그대로. 임의 라운딩 금지.
   ===================================================================== */

/* =====================================================================
   1) PAGE HERO — 시안 node 8:805 (bg #f7f5ee / pt 88 / pb 40)
   ===================================================================== */
.svc-hero {
	background: var(--color-bg-cream);
	padding: 88px 0 40px;
	text-align: center;
}
/* 시안 — 13.12px Bold / lh 22.304 / ls 2.3616 / #093a24 */
.svc-hero__eyebrow {
	font-size: 13.12px;
	font-weight: 700;
	line-height: 22.304px;
	letter-spacing: 2.3616px;
	text-transform: uppercase;
	color: var(--color-primary-deep);
}
/* 시안 — 48px Bold / lh 72 / #1b2620 */
.svc-hero__title {
	margin-top: 16px;
	font-size: 48px;
	line-height: 72px;
	font-weight: 700;
	color: var(--color-text);
}
/* 시안 — 16px / lh 27.2 / #6a7065 / pt 16 */
.svc-hero__desc {
	margin-top: 16px;
	font-size: 16px;
	line-height: 27.2px;
	color: var(--color-text-sub);
}
@media (max-width: 900px) {
	.svc-hero { padding: 64px 0 32px; }
	.svc-hero__title { font-size: 34px; line-height: 50px; }
	.svc-hero__desc br { display: none; }
}

/* =====================================================================
   2) SERVICE GROUPS — 시안 node 8:814
      좌측 그룹 설명(431.76) + 우측 2x2 카드(291.12 x2), 그룹 하단 구분선
   ===================================================================== */
.svc-groups { background: var(--color-bg-cream); }
/* 시안 node 8:817 — 그룹 컨테이너 하단 1px #dcdacb, 내부 상단 여백 56 */
.svc-group {
	display: grid;
	grid-template-columns: 431.758px minmax(0, 1fr);
	gap: 44px;                  /* 시안: 475.758 - 431.758 = 44 */
	padding: 56px 0;
	border-bottom: 1px solid var(--color-line);
}
/* 마지막 그룹은 구분선 없음 (다음 섹션 배경이 바뀌므로 중복선 방지) */
.svc-group--last { border-bottom: 0; }
/* 시안 — 15.2px Bold / lh 25.84 / ls 1.52 / 골드 */
.svc-group__num {
	font-size: 15.2px;
	font-weight: 700;
	line-height: 25.84px;
	letter-spacing: 1.52px;
	color: var(--color-accent);
}
/* 시안 — 24px SemiBold / lh 36 / #1b2620 / pt 10 */
.svc-group__title {
	margin-top: 10px;
	font-size: 24px;
	font-weight: 600;
	line-height: 36px;
	color: var(--color-text);
}
/* 시안 — 15.68px / lh 26.656 / #6a7065 / pt 12 */
.svc-group__desc {
	margin-top: 12px;
	font-size: 15.68px;
	line-height: 26.656px;
	color: var(--color-text-sub);
}
/* 시안 — 2열 카드, 가로 간격 780.875-(475.758+291.117)=14, 세로 199.04-129.04=70-56=14 */
.svc-group__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	align-content: start;
}
/* 시안 node 8:826 — bg #edeee6 / border #dcdacb / r12 / p 21 23
   높이 129.039 고정이지만, 문구 길이가 다르므로 최소높이로 두고 늘어나게 한다
   (고정 높이로 잠그면 긴 문구가 잘린다 — 메인 카드에서 겪은 함정) */
.svc-card {
	background: var(--color-bg-cream-2);
	border: 1px solid var(--color-line);
	border-radius: 12px;
	padding: 21px 23px;
	min-height: 129.039px;
}
/* 시안 — 15.68px Bold / lh 26.656 / #1b2620 / pb 6 */
.svc-card__title {
	padding-bottom: 6px;
	font-size: 15.68px;
	font-weight: 700;
	line-height: 26.656px;
	color: var(--color-text);
}
/* 시안 — 14.08px / lh 22.528 / #6a7065 */
.svc-card__desc {
	font-size: 14.08px;
	line-height: 22.528px;
	color: var(--color-text-sub);
}
@media (max-width: 1100px) {
	.svc-group { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
	.svc-group__cards { grid-template-columns: 1fr; }
	.svc-card { min-height: 0; }
}

/* =====================================================================
   3) PROCESS — 시안 node 8:933 (bg #093a24)
   ===================================================================== */
.process { background: var(--color-primary-deep); }
/* 시안 — 40px SemiBold / lh 54 / 흰색 / pt 16 */
.process__title {
	margin-top: 16px;
	font-size: 40px;
	line-height: 54px;
	font-weight: 600;
	color: var(--color-text-on-dark);
}
/* 시안 node 8:941 — 4열, 간격 272-256=16 / 상단 46 */
.process__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: 46px;
	padding: 0;
	list-style: none;
}
/* 시안 node 8:943 — bg rgba(255,255,255,.06) / border rgba(255,255,255,.14) / r14 / p 29 25 */
.process-step {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	padding: 29px 25px;
}
/* 시안 — 25.6px Bold / lh 43.52 / 골드 */
.process-step__num {
	font-size: 25.6px;
	font-weight: 700;
	line-height: 43.52px;
	color: var(--color-accent);
}
/* 시안 — 16.8px SemiBold / lh 25.2 / 흰색 / pt 12 */
.process-step__title {
	margin-top: 12px;
	font-size: 16.8px;
	font-weight: 600;
	line-height: 25.2px;
	color: var(--color-text-on-dark);
}
/* 시안 — 14.4px / lh 24.48 / rgba(243,239,228,.8) / pt 8 */
.process-step__desc {
	margin-top: 8px;
	font-size: 14.4px;
	line-height: 24.48px;
	color: rgba(243, 239, 228, .8);
}
@media (max-width: 1100px) {
	.process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.process__title { font-size: 30px; line-height: 44px; }
}
@media (max-width: 560px) {
	.process__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   4) FEE GUIDE — 시안 node 8:974 (bg #f7f5ee)
   ===================================================================== */
.fee { background: var(--color-bg-cream); }
.fee__title { margin-top: 16px; }
/* 시안 node 8:983 — 16.8px / lh 28.56 / #6a7065 / pt 18
   ※ 시안 폭 640px 는 적용하지 않음(문구 길어질 때 원치 않는 줄바꿈 방지) */
.fee__lead {
	margin-top: 18px;
	font-size: 16.8px;
	line-height: 28.56px;
	color: var(--color-text-sub);
}
/* 시안 node 8:986 — 3열 344px, 간격 364-344=20 / 상단 46+48 */
.fee__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 94px;
	align-items: start;
}
/* 시안 node 8:987 — bg #f7f5ee / border #dcdacb / r14 / p 35 29
   높이 351.125 고정이지만 항목 수가 3~4개로 달라 늘어나게 둔다.
   대신 3장이 같은 높이로 보이도록 stretch (시안도 3장 동일 높이) */
.fee-card {
	background: var(--color-bg-cream);
	border: 1px solid var(--color-line);
	border-radius: 14px;
	padding: 35px 29px;
	min-height: 351.125px;
	text-align: center;
}
/* 시안 node 8:999 — 가운데 카드만 딥그린 반전 */
.fee-card--featured {
	background: var(--color-primary-deep);
	border-color: var(--color-primary-deep);
}
/* 시안 — 18.4px SemiBold / lh 27.6 / #1b2620 */
.fee-card__title {
	font-size: 18.4px;
	font-weight: 600;
	line-height: 27.6px;
	color: var(--color-text);
}
.fee-card--featured .fee-card__title { color: var(--color-text-on-dark); }
/* 시안 — 20px Bold / lh 38.08 / #093a24 / pt 10 */
.fee-card__price {
	margin-top: 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 38.08px;
	color: var(--color-primary-deep);
}
.fee-card--featured .fee-card__price { color: var(--color-text-on-dark); }
/* 시안 — (VAT포함)만 16px Regular */
.fee-card__vat {
	font-size: 16px;
	font-weight: 400;
}
/* 시안 node 8:1017 — "별도 상담"은 22.4px */
.fee-card__price--text { font-size: 22.4px; }
/* 시안 node 8:992 — pt 18, 항목 py 6 / pl 18 */
.fee-card__list {
	margin-top: 18px;
	padding: 0;
	list-style: none;
	text-align: left;
}
/* 시안 — 14.72px / lh 25.024 / #6a7065 */
.fee-card__list li {
	padding: 6px 0 6px 18px;
	font-size: 14.72px;
	line-height: 25.024px;
	color: var(--color-text-sub);
}
/* 시안 — 항목 앞 여백 18px 안에 마커 없음(텍스트만 들여쓰기) */
.fee-card--featured .fee-card__list li { color: rgba(243, 239, 228, .9); }
.fee__note { margin-top: 26px; }
@media (max-width: 900px) {
	.fee__grid { grid-template-columns: 1fr; margin-top: 48px; }
	.fee-card { min-height: 0; }
}

/* =====================================================================
   5) CTA — 시안 node 8:1029 (bg #f7f5ee, 안쪽 박스 #093a24)
   ===================================================================== */
.svc-cta { background: var(--color-bg-cream); }
/* 시안 node 8:1032 — bg #093a24 / r20 / p 64 32 */
.svc-cta__box {
	background: var(--color-primary-deep);
	border-radius: 20px;
	padding: 64px 32px;
	text-align: center;
}
/* 시안 — 32px SemiBold / lh 43.2 / 흰색 */
.svc-cta__title {
	font-size: 32px;
	font-weight: 600;
	line-height: 43.2px;
	color: var(--color-text-on-dark);
}
/* 시안 — 16px / lh 27.2 / rgba(243,239,228,.8) / pt 16 pb 30
   ※ 시안 폭 480px 는 적용하지 않음(문구 길어질 때 원치 않는 줄바꿈 방지) */
.svc-cta__desc {
	margin: 16px 0 30px;
	font-size: 16px;
	line-height: 27.2px;
	color: rgba(243, 239, 228, .8);
}
/* 시안 node 8:1039 — 골드 / r999 / p 14 28 / 16px Bold / #1b2620 */
.svc-cta__btn {
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 700;
	line-height: 27.2px;
}
@media (max-width: 900px) {
	.svc-cta__box { padding: 48px 24px; }
	.svc-cta__title { font-size: 24px; line-height: 34px; }
}