@charset "utf-8";
/* ==========================================================================
   스마일라인소개 > Vision과 Mission (/about/vision/index)
   - 히어로 밴드(.sl-subhero)·토큰·헤더/푸터는 site_layout.css
   - 이 파일의 선택자는 모두 .sl-vs- 접두사로 스코프 한정 (publish.md 3.4)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VISION (명조 대카피)
      ※ 히어로 밴드와 그 안의 영문 라벨/제목은 site_layout.css 의 .sl-subhero
   -------------------------------------------------------------------------- */
.sl-vs-vision {
	background: var(--sl-cream);
	padding: 120px 140px;
	box-sizing: border-box;
}
.sl-vs-vision__inner {
	max-width: var(--sl-container);
	margin: 0 auto;
	text-align: center;
}
.sl-vs-vision__label {
	font-family: 'Noto Serif KR', 'Batang', serif;
	font-size: var(--sl-text);
	font-weight: 400;
	color: var(--sl-orange-dark);
	letter-spacing: 4.48px;
	margin: 0 0 44px;
}
.sl-vs-vision__copy {
	font-family: 'Noto Serif KR', 'Batang', serif;
	font-size: 36px;   /* 섹션 제목 공통 (.sl-title 과 동일) */
	font-weight: 400;
	color: var(--sl-dark);
	line-height: 1.65;
	letter-spacing: -.8px;
	margin: 0;
	text-wrap: pretty;
}
.sl-vs-vision__desc {
	margin: 30px 0 0;
	font-size: var(--sl-text);   /* 본문 문단은 16px 기준 */
	line-height: 1.9;
	color: rgba(43, 43, 40, .62);
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   2. MISSION 4개 항목 (원형 이미지 + 오렌지 링, 좌우 교차)
   -------------------------------------------------------------------------- */
.sl-vs-mission {
	background: var(--sl-cream);
	padding: 0 140px 200px;
	box-sizing: border-box;
}
.sl-vs-mission__inner {
	max-width: var(--sl-container);
	margin: 0 auto;
}
.sl-vs-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 64px;
	margin-bottom: 120px;
}
.sl-vs-row:last-child { margin-bottom: 0; }

/* 컨테이너(--sl-container) 안에서, 사진이 왼쪽인 행(1·3)은 왼쪽 끝에,
   사진이 오른쪽인 행(2·4)은 오른쪽 끝에 붙인다 (컨테이너 밖으로 나가지 않는다) */
.sl-vs-row--l { justify-content: flex-start; }
.sl-vs-row--r { justify-content: flex-end; }

/* 2-1. 이미지 블록 -------------------------------------------------------
   사진은 가로형 라운드 사각으로 두되, 뒤로 살짝 어긋난 오렌지 테두리를 남겨
   기존 '원형 사진 + 오렌지 링' 의 인상을 이어 간다. */
.sl-vs-visual {
	position: relative;
	flex: 0 1 620px;
	width: 620px;
	max-width: 100%;
	margin: 64px 0 0;   /* 위로 삐져나온 숫자 자리 확보 */
	aspect-ratio: 4 / 3;
}
.sl-vs-visual img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
	display: block;
}
/* 뒤로 어긋난 테두리 프레임 — 사진이 놓인 반대편 아래로 밀어 둔다 */
.sl-vs-visual::before {
	content: '';
	position: absolute;
	top: 22px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(184, 74, 30, .45);
	border-radius: 20px;
	box-sizing: border-box;
	pointer-events: none;
}
.sl-vs-visual--l::before { left: 22px; }
.sl-vs-visual--r::before { right: 22px; }

/* 큰 명조 숫자 — 글이 있는 쪽 위 모서리에 걸쳐 두되, 사진을 덮지 않게 대부분 바깥으로 뺀다 */
.sl-vs-visual__num {
	position: absolute;
	top: -46px;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	font-family: 'Noto Serif KR', 'Batang', serif;
	color: var(--sl-orange);
}
/* 사진이 왼쪽인 행은 글이 오른쪽에 있으므로 오른쪽 위 모서리로 */
.sl-vs-visual--l .sl-vs-visual__num { right: -104px; }
/* 사진이 오른쪽인 행은 글이 왼쪽에 있으므로 왼쪽 위 모서리로 */
.sl-vs-visual--r .sl-vs-visual__num { left: -104px; }
.sl-vs-visual__num b {
	font-size: 104px;
	font-weight: 400;
	line-height: .9;
}
.sl-vs-visual__num span {
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	padding-bottom: 17px;
	color: rgba(184, 74, 30, .75);
}

/* 2-2. 텍스트 블록 ------------------------------------------------------- */
.sl-vs-text {
	flex: 0 1 520px;
	width: 520px;
	max-width: 520px;
	min-width: 320px;
}
.sl-vs-text__title {
	font-size: 36px;   /* 섹션 제목 공통 (.sl-title 과 동일) */
	font-weight: 700;
	color: var(--sl-dark);
	line-height: 1.6;
	letter-spacing: -.5px;
	margin: 0 0 22px;
	word-break: keep-all;
	text-wrap: pretty;
}
.sl-vs-text__desc {
	font-size: var(--sl-text);
	font-weight: 400;
	color: rgba(43, 43, 40, .7);
	line-height: 1.9;
	letter-spacing: -.16px;
	margin: 0;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   2-3. 맺음 블록 (짧은 세로선 + 명조 문장 + 서명)
        네 항목이 좌우로 오간 뒤라 가운데로 모아 페이지를 닫는다.
   -------------------------------------------------------------------------- */
.sl-vs-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: var(--sl-container);
	margin: 130px auto 0;
	padding: 76px 40px 0;
	box-sizing: border-box;
	text-align: center;
}
/* 문장 위 짧은 세로선 — VISION 섹션과 같은 오렌지 계열로 시선을 모은다 */
.sl-vs-cta__mark {
	width: 1px;
	height: 44px;
	background: linear-gradient(to bottom, rgba(184, 74, 30, 0), rgba(184, 74, 30, .7));
}
.sl-vs-cta__copy {
	margin: 30px 0 0;
	font-family: 'Noto Serif KR', 'Batang', serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.75;
	letter-spacing: -.56px;
	color: var(--sl-dark);
	word-break: keep-all;
	text-wrap: pretty;
}
/* 서명 — 위에 짧은 가로선을 두어 맺음말처럼 읽히게 한다 */
.sl-vs-cta__sign {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 40px 0 0;
	padding-top: 28px;
	border-top: 1px solid rgba(43, 43, 40, .14);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.34px;
	color: var(--sl-dark);
}
.sl-vs-cta__sign em {
	font-style: normal;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .2px;
	color: rgba(43, 43, 40, .5);
}

/* --------------------------------------------------------------------------
   3. 반응형 (본문은 var(--sl-text) : PC 16px / 640 이하 14px — site_layout.css 타이포 기준)
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
	.sl-vs-vision { padding: 90px 40px; }
	.sl-vs-mission { padding: 0 40px 140px; }
	.sl-vs-row { gap: 0 44px; margin-bottom: 96px; }
	.sl-vs-visual { flex-basis: 520px; width: 520px; }
	.sl-vs-text { flex-basis: 460px; width: 460px; }
	.sl-vs-cta { margin-top: 100px; padding: 60px 32px 0; }
	.sl-vs-cta__copy { font-size: 24px; }
}

@media (max-width: 1024px) {
	.sl-vs-vision { padding: 56px 20px; }
	.sl-vs-vision__label { margin-bottom: 28px; letter-spacing: 3px; }
	.sl-vs-vision__copy { font-size: 26px; line-height: 1.6; }

	/* 모바일은 한 줄로 쌓이므로 좌우 밀착 해제 */
	.sl-vs-mission { padding: 0 20px 80px; }
	.sl-vs-row { margin-bottom: 72px; gap: 32px 0; }
	.sl-vs-row--l, .sl-vs-row--r { justify-content: center; }

	/* 모바일에서는 사진이 항상 위, 글이 아래 (좌우 교차 해제) */
	.sl-vs-visual { order: 0; flex: 0 0 auto; width: 100%; max-width: 100%; }
	.sl-vs-text { order: 1; flex: 1 1 100%; width: 100%; max-width: 100%; min-width: 0; }
	/* 폭이 좁으면 어긋난 프레임이 화면 밖으로 나가므로 간격을 줄인다 */
	.sl-vs-visual::before { top: 14px; }
	.sl-vs-visual--l::before { left: 14px; }
	.sl-vs-visual--r::before { right: 14px; }

	/* 사진이 화면 폭을 꽉 채우므로 숫자는 옆으로 빼지 않고 위로만 올린다 */
	.sl-vs-visual { margin-top: 52px; }
	.sl-vs-visual--l .sl-vs-visual__num,
	.sl-vs-visual--r .sl-vs-visual__num { left: auto; right: 4px; }
	.sl-vs-visual__num { top: -50px; }
	.sl-vs-visual__num b { font-size: 72px; }
	.sl-vs-visual__num span { font-size: 20px; padding-bottom: 10px; }

	.sl-vs-text__title { font-size: 26px; margin-bottom: 16px; }

	.sl-vs-cta { margin-top: 64px; padding: 44px 24px 0; }
	.sl-vs-cta__mark { height: 34px; }
	.sl-vs-cta__copy { margin-top: 24px; font-size: 20px; line-height: 1.7; }
	.sl-vs-cta__sign { margin-top: 30px; padding-top: 22px; font-size: 16px; }
}

@media (max-width: 640px) {
	.sl-vs-text__title { font-size: 22px; }   /* 섹션 제목 공통 (.sl-title 과 동일) */

	/* 숫자 묶음을 사진 오른쪽 위 → 왼쪽 위로 옮긴다 */
	.sl-vs-visual--l .sl-vs-visual__num,
	.sl-vs-visual--r .sl-vs-visual__num { left: 4px; right: auto; }
	/* 짝수 행(2·4)은 마크업이 '둘. 2' 순서라 그대로 왼쪽에 두면 숫자가 뒤로 간다.
	   순서를 뒤집어 홀수 행과 같이 '숫자 → 한글' 로 읽히게 한다 */
	.sl-vs-visual--r .sl-vs-visual__num { flex-direction: row-reverse; }
	/* 숫자(b)는 그대로 두고 한글 라벨만 띄운다.
	   두 요소는 아래끝 정렬이라 아래 padding 을 키우면 글자만 위로 올라간다
	   (10 → 26 : 기존에 사진 위로 5px 정도 걸치던 글자가 10px 남짓 떠오른다) */
	.sl-vs-visual__num span { padding-bottom: 26px; }

	.sl-vs-vision__copy { font-size: 22px; }
	.sl-vs-cta__copy { font-size: 18px; }
	/* 좁으면 병원명과 부제가 붙어 답답하므로 줄을 나눈다 */
	.sl-vs-cta__sign { flex-direction: column; gap: 4px; }
}