@charset "utf-8";
/* ==========================================================================
   스마일라인치과 메인 페이지 전용 스타일
   - publish.md 3.4 : 페이지 전용 CSS 는 www/css/{모듈}.css 로 분리, headHtml include 다음에 link
   - 디자인 토큰 / 헤더 / 푸터 / 모바일메뉴 는 www/css/site_layout.css (전 페이지 공통)
   - 디자인 기준 : Figma 1920px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 히어로 (메인 비주얼)
   -------------------------------------------------------------------------- */
.sl-hero {
	position: relative;
	width: 100%;
	height: 1200px;
	max-height: 100vh;
	min-height: 620px;
	overflow: hidden;
}
.sl-hero__swiper {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
}
.sl-hero__swiper .swiper-wrapper,
.sl-hero__swiper .swiper-slide {
	height: 100%;
}
.sl-hero__swiper .swiper-slide { position: relative; }
/* 카피가 얹히는 왼쪽만 어둡게 깔아 흰 글자의 가독성을 확보한다 (오른쪽은 사진 그대로) */
.sl-hero__swiper .swiper-slide::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg,
		rgba(0, 0, 0, .52) 0%,
		rgba(0, 0, 0, .34) 30%,
		rgba(0, 0, 0, 0) 62%);
	pointer-events: none;
}
.sl-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center top;
}
.sl-hero__copy {
	position: absolute;
	left: 225px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	color: #fff;
}
/* 네 슬라이드의 헤드 크기는 72px 로 통일한다 (긴 문장도 이 크기로 한 줄에 들어간다) */
.sl-hero__title {
	font-family: 'Noto Serif KR', serif;
	font-size: 72px;
	font-weight: 700;   /* Noto Serif KR 은 700 까지만 로드한다 (800 은 가짜 굵기가 된다) */
	line-height: 1.25;
	letter-spacing: -1.44px;
	margin: 0 0 18px;
	white-space: nowrap;
}
.sl-hero__desc {
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 33px;
	margin: 0;
}

/* 히어로 인디케이터 (swiper pagination) */
.sl-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 40px;
	transform: translateX(-50%);
	display: flex;
	gap: 12px;
	width: auto;
	z-index: 2;
}
.sl-hero__dots .swiper-pagination-bullet {
	width: 10px; height: 10px;
	margin: 0;
	border-radius: 100px;
	background: rgba(255,255,255,.5);
	opacity: 1;
	cursor: pointer;
	transition: background .2s ease;
}
.sl-hero__dots .swiper-pagination-bullet-active { background: var(--sl-orange); }

/* 자동재생 진행바 (히어로 최하단) */
.sl-hero__progress {
	position: absolute;
	left: 0; right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255,255,255,.25);
	overflow: hidden;
	z-index: 2;
}
.sl-hero__progress span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--sl-orange);
}

/* FAB (Floating Action Button) — 스크롤과 무관하게 화면 우측 하단에 고정
   (헤더 z-index 1000 / 모바일메뉴 1100 보다 아래에 두어 메뉴를 가리지 않는다) */
/* --------------------------------------------------------------------------
   2. ABOUT 섹션
   -------------------------------------------------------------------------- */
.sl-about {
	background: #fff;
	padding: 70px 20px 71px;
	text-align: center;
}
.sl-about__visual {
	position: relative;
	width: 766px;
	max-width: 100%;
	height: 648px;
	margin: 0 auto;
	overflow: hidden;
}
.sl-about__visual img { width: 100%; height: 100%; object-fit: cover; }
.sl-about__visual::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 58.3%, #fff 90%);
}
.sl-about__body { max-width: 633px; margin: 0 auto; }
.sl-about__title {
	font-size: 40px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sl-dark);
	margin: 0 0 34px;
}
.sl-about__desc {
	font-family: 'Noto Serif KR', serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.5;
	color: var(--sl-dark);
	margin: 0 0 30px;
}
/* 원장소개 섹션의 '원장님소개 더보기' 버튼과 동일 규격 (14px / 700 / 16px 34px) */
.sl-about .sl-btn { padding: 16px 34px; font-size: 14px; }

/* --------------------------------------------------------------------------
   3. DIRECTOR 섹션
   -------------------------------------------------------------------------- */
.sl-director {
	position: relative;
	background: #fff;
	padding: 80px 20px;
	overflow: hidden;
}
.sl-director__inner {
	max-width: var(--sl-container);   /* 헤더 콘텐츠 폭 */
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;   /* 사진 좌측에도 배경 여백이 있어 체감 간격은 이보다 넓다 */
}
/* 사진 묶음 — 원장님 사진(profile01)은 인물이 가운데 선 세로형(3:4) 이라
   빈 배경을 덜어 내던 음수 마진 없이 폭만 잡아 준다 */
.sl-director__visual {
	position: relative;
	flex: 0 0 460px;
	width: 460px;
}
/* 사진 기준 비율 배치. Figma 원좌표는 left 56% 였으나 그 위치는 사진 우측 빈 배경이라
   로고가 인물과 전혀 겹치지 않았다. 원장님 머리(사진 폭의 약 21~39% 지점)와 물리도록
   왼쪽으로 당겨 둔다. 세로는 위로 살짝 빠져나온다.
   logo2 는 가로형이 아닌 정사각형 로고라, 폭 62% 를 그대로 쓰면 세로가 과하게 커진다 → 26%. */
.sl-director__watermark {
	position: absolute;
	left: 34%;
	top: -2%;
	width: 26%;
	z-index: 0;
	opacity: .08;
	border-radius: 7px;
	pointer-events: none;
}
.sl-director__text { width: 538px; flex: 0 1 538px; }
.sl-director__title {
	font-size: 36px;   /* 섹션 제목 공통 (.sl-title 과 동일) */
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -0.44px;
	color: var(--sl-dark);
	margin: 38px 0 0;
}
.sl-director__list {
	list-style: none;
	margin: 33px 0 0;
	padding: 33px 0 0;
	border-top: 1px solid rgba(43,43,40,.15);
}
.sl-director__list li {
	position: relative;
	padding-left: 22px;
	font-size: var(--sl-text);   /* 본문 */
	line-height: 1.6;
	color: var(--sl-dark);
	opacity: .9;
	margin-bottom: 16px;
}
.sl-director__list li:last-child { margin-bottom: 0; }
.sl-director__list li::before {
	content: '';
	position: absolute;
	left: 0; top: 7px;
	width: 6px; height: 6px;
	border-radius: 100px;
	background: var(--sl-orange);
}
.sl-director__text .sl-btn { margin-top: 50px; padding: 16px 34px; font-size: 14px; }
/* 사진이 워터마크 위에 얹혀 머리·어깨가 로고를 가린다 (Figma 레이어 순서) */
.sl-director__photo {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 3 / 4;   /* 기존 세로 프로필컷(1652x2203) 과 같은 자리 크기를 유지한다 */
	border-radius: 12px;
	overflow: hidden;
}
/* 사진이 메인 히어로용 가로 컷(1672x941)이라 세로 자리에서는 좌우가 잘린다.
   원장님이 원본 가로의 53~92% 구간에 있어 object-position 을 88% 로 밀어 인물을 살린다
   (의료진소개 .sl-dt-doctor__photo 와 같은 방식) */
.sl-director__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 88% center;
	display: block;
}

/* --------------------------------------------------------------------------
   4. 소개 슬라이더 (Swiper)
   -------------------------------------------------------------------------- */
.sl-story { position: relative; background: #fff; padding: 140px 0; overflow: hidden; }
/* 활성 슬라이드 높이(647px)로 트랙을 고정하고 슬라이드를 아래 기준으로 정렬한다.
   → 가운데 슬라이드만 위로 80px 더 커지고, 나머지는 밑변이 나란히 유지된다 (Figma 구조) */
.sl-story .swiper { overflow: visible; height: 720px; }
.sl-story .swiper-wrapper { align-items: flex-end; }
/* 슬라이드 폭을 화면의 76%(최대 1440px)로 크게 잡아 가운데 카드를 키우고,
   그만큼 좌우에 남는 폭이 줄어 옆 카드는 가장자리만 살짝 보인다.
   (1920 화면 기준 : 가운데 1440px, 양옆 각 216px 노출) */
.sl-story .swiper-slide {
	width: min(1440px, 76vw);
	height: 600px;
	align-self: flex-end;
	transition: height .45s cubic-bezier(.22,.61,.36,1);
}
/* 가운데 카드는 아래를 고정한 채 위로 120px 더 자란다 */
.sl-story .swiper-slide-active { height: 720px; }

.sl-story__card {
	position: relative;
	width: 100%; height: 100%;
	border-radius: 30px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: 0 105px 122px 77px;
	box-sizing: border-box;
}
.sl-story__card img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
/* 양옆 카드는 검은 막을 더 깔아 뒤로 물러나 보이게 한다 (가운데로 오면 원래 농도로 밝아진다) */
.sl-story__card::after {
	content: '';
	position: absolute; inset: 0;
	background: rgba(0,0,0,.62);
	transition: background .45s ease;
}
.sl-story .swiper-slide-active .sl-story__card::after { background: rgba(0,0,0,.35); }
/* 텍스트는 가운데(활성) 슬라이드에서만 보인다 — 양옆 카드는 사진만 노출 */
/* 텍스트는 가운데(활성) 슬라이드에서만 보인다 — 양옆 카드는 사진만 노출 */
.sl-story__body {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 40px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s ease;
}
.sl-story .swiper-slide-active .sl-story__body {
	opacity: 1;
	visibility: visible;
	transition-delay: .1s;
}
.sl-story__label {
	position: relative;
	display: inline-block;
	font-family: 'Noto Serif KR', serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 1.36;
	white-space: nowrap;
	flex: 0 0 auto;
}
/* 뒤에 깔리는 반투명 영문 */
.sl-story__label .en {
	display: block;
	color: rgba(255,255,255,.4);
	line-height: 1.1;   /* 영문이 2줄인 카드에서 줄간격이 벌어지지 않도록 (Figma leading-none 기준) */
}
/* 앞에 오는 흰색 한글 — 영문 위로 올라가되 아랫부분만 살짝 물린다.
   left  : 영문 첫 글자 폭(약 0.5em)만큼 밀어 "영문 두 번째 글자"와 좌측을 맞춘다.
   top   : -0.8em → 한글 밑변이 영문 첫 줄 상단에서 약 30% 지점에 놓여 윗부분이 겹친다.
                    (값을 키울수록 한글이 내려와 겹침이 늘어난다)
   ※ bottom(%) 이 아니라 top(em) 기준인 이유 : 영문이 2줄인 카드(3D Precision Diagnostics)는
     라벨 박스 높이가 두 배라 % 기준이면 겹침 위치가 어긋난다. em 기준은 줄 수와 무관하게 일정하다. */
.sl-story__label .ko {
	position: absolute;
	left: 0.5em;
	top: -0.8em;
	color: #fff;
	line-height: 1.2;
}
.sl-story__desc {
	color: #fff;
	font-size: calc(var(--sl-text) * 1.25);   /* 본문 16px 의 1.25배 = 20px */
	line-height: 1.6;
	letter-spacing: -0.18px;
	margin: 0;
	text-align: left;
	flex: 0 0 auto;
}

/* 슬라이더 화살표 */
.sl-story__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px; height: 30px;
	z-index: 10;
	cursor: pointer;
	border: 0;
	background: none;
	padding: 0;
}
.sl-story__nav::before {
	content: '';
	display: block;
	width: 16px; height: 16px;
	border-top: 3px solid #fff;
	border-left: 3px solid #fff;
	margin: 7px;
}
.sl-story__nav--prev { left: 194px; }
.sl-story__nav--prev::before { transform: rotate(-45deg); }
.sl-story__nav--next { right: 194px; }
.sl-story__nav--next::before { transform: rotate(135deg); }

/* --------------------------------------------------------------------------
   5. SPECIAL (스마일라인치과의 특별함)
   -------------------------------------------------------------------------- */
.sl-special { background: var(--sl-cream); padding: 140px 20px; }
/* 콘텐츠 폭은 .sl-inner (site_layout.css) 가 헤더와 같은 1440px 로 잡는다.
   카드는 flex:1 1 0 + aspect-ratio 라 그 폭에 맞춰 비례 축소된다 (390 → 342). */
.sl-special__list {
	display: flex;
	gap: 24px;
	justify-content: center;
	flex-wrap: nowrap;          /* 데스크톱에서는 항상 4개 한 줄 (줄바꿈 금지) */
	padding-top: 48px;
	margin: 0;
	list-style: none;
}
/* 카드는 고정폭이 아니라 남는 폭을 4등분해 가진다.
   390px(Figma) 를 상한으로 두고, 컨테이너가 좁으면 비율을 유지한 채 함께 줄어든다.
   → 390*4 + gap 24*3 = 1632px 가 컨테이너(1600px)를 넘어 줄바꿈되던 문제 해결 */
.sl-special__card {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	max-width: 390px;
	aspect-ratio: 390 / 466;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;   /* 흰 텍스트 박스가 위, 사진이 아래로 노출 (Figma 기준) */
}
.sl-special__card:focus { outline: none; }
.sl-special__card:focus-visible { outline: 2px solid var(--sl-orange); outline-offset: 2px; }
.sl-special__card > img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.sl-special__card::after {
	content: '';
	position: absolute; inset: 0;
	background: rgba(0,0,0,.25);
	transition: background .45s ease;
}
/* [기본 상태] 흰 박스가 카드 위쪽 60%(466 중 280px)를 덮고, 아래로 사진이 보인다.
   호버하면 이 박스가 위로 접혀 올라가며 사진 전체가 드러난다. */
.sl-special__box {
	position: relative;
	z-index: 3;
	background: #fff;
	width: 100%;
	height: 60%;
	flex: 0 0 60%;
	padding: 45px 45px 0;
	box-sizing: border-box;
	text-align: center;
	transform: translateY(0);
	transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.sl-special__box h3 { font-size: 24px; font-weight: 500; color: var(--sl-dark); margin: 0 0 16px; line-height: 1.2; }
/* basic.css 30행의 전역 리셋 `hr{display:none}` 을 이 영역에서만 되살린다 (공유 CSS 수정 금지) */
.sl-special__box hr {
	display: block;
	width: 100%;
	height: 0;
	border: 0;
	border-top: 1px solid rgba(43,43,40,.2);
	margin: 0 0 16px;
}
.sl-special__box p { font-size: var(--sl-text); line-height: 1.6; color: var(--sl-dark); margin: 0; }   /* 본문 */
/* [호버 상태] 사진 위에 흰 텍스트. 카드 높이의 40% 지점(466 중 187px)에서 시작 */
.sl-special__hover {
	position: absolute;
	left: 0; top: 40%;
	width: 100%;
	z-index: 2;
	padding: 0 30px;
	box-sizing: border-box;
	text-align: center;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .45s ease, transform .45s ease;
	pointer-events: none;
}
.sl-special__hover h3 { font-size: 24px; font-weight: 500; color: #fff; margin: 0 0 10px; line-height: 1.2; }
.sl-special__hover hr {
	display: block;
	height: 0;
	border: 0;
	border-top: 1px solid rgba(255,255,255,.5);
	margin: 0 auto 10px;
	width: 300px;
	max-width: 100%;
}
.sl-special__hover p { font-size: var(--sl-text); line-height: 1.6; color: #fff; margin: 0; }   /* 본문 */

/* 호버 전환 — 마우스가 있는 환경에서만 동작(터치 기기는 기본 상태 유지).
   키보드 이동 시에도 동일하게 열리도록 :focus-within 을 함께 지정한다. */
@media (hover: hover) {
	/* 흰 박스가 걷히고 사진 위에 흰 글자만 남으므로 딤드를 더 깔아 가독성을 확보한다 */
	.sl-special__card:hover::after,
	.sl-special__card:focus-within::after {
		background: rgba(0,0,0,.55);
	}
	.sl-special__card:hover .sl-special__box,
	.sl-special__card:focus-within .sl-special__box {
		transform: translateY(-100%);
	}
	.sl-special__card:hover .sl-special__hover,
	.sl-special__card:focus-within .sl-special__hover {
		opacity: 1;
		transform: translateY(0);
		transition-delay: .12s;
	}
}

/* 모션 최소화 설정 시 이동 없이 전환만 */
@media (prefers-reduced-motion: reduce) {
	.sl-special__box,
	.sl-special__hover { transition: none; }
}

/* --------------------------------------------------------------------------
   6. BEFORE & AFTER (치료사례)
   -------------------------------------------------------------------------- */
.sl-ba {
	position: relative;
	padding: 80px 0 100px;
	overflow: hidden;
}
.sl-ba__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sl-ba::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.35); }   /* 배경 딤 */
.sl-ba__head { position: relative; z-index: 2; text-align: center; margin-bottom: 24px; }
.sl-ba__head .sl-eyebrow { color: rgba(255,255,255,.85); }
.sl-ba__head .sl-title { color: #fff; }

/* 카테고리 필터 */
.sl-ba__filter {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}
.sl-ba__filter button {
	border: 0;
	background: rgba(255,255,255,.85);
	color: var(--sl-dark);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 18px;
	border-radius: 100px;
	cursor: pointer;
	transition: all .2s ease;
}
.sl-ba__filter button:hover { background: #fff; }
.sl-ba__filter button.on { background: #fff; color: var(--sl-orange); }

/* 카드 슬라이더 — 한 번에 3장씩 노출, 넘치는 카드는 뷰포트 밖으로 감춘다
   좌우로 60px 씩 넓힌 만큼을 그대로 화살표 자리(padding)로 비워, 위쪽 소개 슬라이더처럼
   화살표가 카드 바깥에 놓이면서도 카드 뷰포트는 컨테이너(=헤더 라인) 와 정확히 일치한다. */
.sl-ba__slider {
	position: relative;
	z-index: 2;
	margin: 0 -60px;
	padding: 0 60px;
}
.sl-ba__slider .swiper { overflow: hidden; padding: 6px 0 16px; }
.sl-ba__slider .swiper-slide { width: auto; height: auto; }   /* 폭은 slidesPerView 가 계산 */
.sl-ba__card,
.sl-ba__card:link,
.sl-ba__card:visited {
	display: block;                 /* a 태그로 상세 링크가 걸려 있다 */
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(0,0,0,.18);
	color: inherit;
	text-decoration: none;
}
.sl-ba__imgs { position: relative; display: flex; }
/* 카드 폭이 변해도 사진 비율(183:230)이 유지되도록 aspect-ratio 로 잡는다 */
.sl-ba__imgs figure { position: relative; flex: 1 1 50%; margin: 0; aspect-ratio: 183 / 230; }
.sl-ba__imgs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-ba__tag {
	position: absolute;
	top: 10px; left: 10px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: rgba(0,0,0,.55);
	border-radius: 4px;
	padding: 3px 8px;
	letter-spacing: .5px;
}
.sl-ba__tag--after { background: var(--sl-orange); left: auto; right: 10px; }
.sl-ba__txt { padding: 18px 20px 22px; }
.sl-ba__cate { font-size: 12px; font-weight: 700; color: var(--sl-orange); margin: 0 0 6px; }
.sl-ba__name { font-size: 16px; font-weight: 700; color: var(--sl-dark); margin: 0; line-height: 1.4; }

/* 화살표는 슬라이더 뷰포트 안쪽(카드 위)에 올린다 */
/* 화살표 — 원형 배경 없이 흰 꺾쇠만 (위쪽 소개 슬라이더와 동일한 형태) */
.sl-ba__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px; height: 40px;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	z-index: 10;
	display: flex;            /* 아이콘을 상하좌우 중앙에 둔다 */
	align-items: center;
	justify-content: center;
	opacity: .85;
	transition: opacity .2s ease;
}
.sl-ba__nav:hover { opacity: 1; }
.sl-ba__nav::before {
	content: '';
	display: block;
	width: 16px; height: 16px;
	margin: 0;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));   /* 밝은 배경 위에서도 보이도록 */
}
/* 위/왼쪽 테두리만 있는 정사각형을 45° 돌린 꺾쇠라, 도형의 중심과 획의 시각적 중심이
   약 4px 어긋난다. flex 로 중앙에 놓은 뒤 그만큼 되밀어 눈에 보이는 중심을 맞춘다. */
.sl-ba__nav--prev { left: 8px; }
.sl-ba__nav--prev::before { transform: translate(4px, 0) rotate(-45deg); }
.sl-ba__nav--next { right: 8px; }
.sl-ba__nav--next::before { transform: translate(-4px, 0) rotate(135deg); }

/* --------------------------------------------------------------------------
   7. REVIEW (치료후기)
   -------------------------------------------------------------------------- */
.sl-review { background: #fff; padding: 140px 20px; }
.sl-review__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding-top: 48px;
	margin: 0;
	list-style: none;
}
.sl-review__card {
	position: relative;
	background: var(--sl-cream);
	border: 1px solid rgba(43,43,40,.06);
	border-radius: 8px;
	padding: 29px;
	box-sizing: border-box;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sl-review__card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.sl-review__star { display: none; }
.sl-review__title { font-size: 16px; font-weight: 700; color: var(--sl-dark); margin: 0 0 12px; line-height: 1.4; }
.sl-review__desc { font-size: var(--sl-text); line-height: 1.6; color: rgba(43,43,40,.75); margin: 0 0 18px; min-height: 51px; }   /* 본문 */
.sl-review__date { font-size: 12px; color: rgba(43,43,40,.45); margin: 0; }
/* 후기 목록으로 잇는 링크. 카드 전체를 덮어 어디를 눌러도 이동하게 한다
   (화살표만 눌리면 클릭 영역이 너무 좁다) */
.sl-review__go {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: 8px;   /* 카드와 같은 값 — 포커스 링이 모서리를 넘지 않게 */
}
/* 오른쪽 아래 화살표(→) — 가로선 위에 꺾쇠를 얹어 그린다.
   클릭 영역은 링크 본체가 맡으므로 모양만 담당한다 */
.sl-review__go::after {
	content: '';
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 20px;
	height: 10px;
	background: rgba(43,43,40,.7);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M1 5h17M14.2 1.8 17.4 5l-3.2 3.2' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M1 5h17M14.2 1.8 17.4 5l-3.2 3.2' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: background-color .2s ease;
}
.sl-review__card:hover .sl-review__go::after { background: var(--sl-orange); }

/* 페이징 */
.sl-review__paging { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.sl-review__paging a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	font-size: 14px;
	color: rgba(43,43,40,.6);
	text-decoration: none;
	border-radius: 4px;
	transition: all .2s ease;
}
.sl-review__paging a:hover { background: var(--sl-cream); color: var(--sl-dark); text-decoration: none; }
.sl-review__paging a.on { background: var(--sl-orange); color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   8. CONSULT (상담 유도)
   -------------------------------------------------------------------------- */
.sl-consult {
	position: relative;
	padding: 88px 20px;
	display: flex;
	justify-content: center;
	overflow: hidden;
}
.sl-consult__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sl-consult::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.sl-consult__box {
	position: relative;
	z-index: 2;
	background: var(--sl-brown);
	border-radius: 30px;
	padding: 30px 40px;
	text-align: center;
	max-width: 100%;
	box-sizing: border-box;
}
.sl-consult__title {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -0.36px;
	color: #fff;
	margin: 0 0 36px;
}
.sl-consult__list {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 16px 40px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
	text-align: left;
}
.sl-consult__list li { display: flex; align-items: center; gap: 10px; }
.sl-consult__list i {
	flex: 0 0 20px;
	width: 20px; height: 20px;
	border-radius: 100px;
	background: rgba(255,255,255,.18);
	color: #fff;
	font-size: 11px;
	font-style: normal;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sl-consult__list span { font-size: var(--sl-text); font-weight: 600; color: #fff; }   /* 본문 */
/* :link/:visited 동반 지정 — basic.css 의 `a:link{color:inherit}` 특이도 대응 */
.sl-consult__btn,
.sl-consult__btn:link,
.sl-consult__btn:visited {
	display: inline-block;
	background: #2f2f2f;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	border-radius: 8px;
	padding: 16px 40px;
	text-decoration: none;
	transition: background .2s ease;
}
.sl-consult__btn:hover,
.sl-consult__btn:focus,
.sl-consult__btn:active { background: #000; color: #fff; text-decoration: none; }

/* --------------------------------------------------------------------------
   9. 반응형
   -------------------------------------------------------------------------- */
@media (max-width: 1680px) {
	.sl-hero__copy { left: 8%; }
	.sl-story__nav--prev { left: 40px; }
	.sl-story__nav--next { right: 40px; }
	.sl-director__watermark { right: 20px; }
}

@media (max-width: 1400px) {
	.sl-story .swiper { height: 590px; }
	.sl-story .swiper-slide { height: 495px; }   /* 폭은 min(1440px, 76vw) 그대로 */
	.sl-story .swiper-slide-active { height: 590px; }
	.sl-story__card { padding: 0 60px 70px 60px; }
	.sl-story__label { font-size: 32px; }
	.sl-director__inner { gap: 30px; }
	.sl-director__visual { flex: 0 0 400px; width: 400px; }
	.sl-special__card { max-width: 300px; }
	.sl-special__hover h3 { font-size: 21px; }
	.sl-review__list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1200px) {
	.sl-hero__desc { font-size: 19px; line-height: 29px; }
	.sl-about__visual { height: 480px; }
	.sl-about__title { font-size: 32px; }
	.sl-special { padding: 100px 20px; }
	.sl-review { padding: 100px 20px; }
}

@media (max-width: 1024px) {
	.sl-hero { height: 640px; min-height: 0; }
	.sl-hero__copy { left: 24px; right: 24px; }
	.sl-hero__title { font-size: 54px; letter-spacing: -1px; }
	.sl-about { padding: 60px 20px; }
	.sl-about__visual { height: 360px; }
	.sl-about__title { font-size: 26px; margin-bottom: 20px; }
	.sl-about__desc { font-size: 17px; }

	.sl-director { padding: 60px 20px; }
	.sl-director__inner { flex-direction: column-reverse; gap: 40px; align-items: center; }
	/* 사진 아래로 글이 쌓이므로 글도 가운데로 모은다 */
	.sl-director__text { width: 100%; flex: 1 1 auto; text-align: center; }
	/* 인물이 가운데 선 사진이라 좁은 화면에서는 폭만 줄여 그대로 가운데 둔다 */
	.sl-director__visual {
		flex: 1 1 auto;
		width: 100%;
		max-width: 340px;
	}
	.sl-director__title { font-size: 26px; }
	.sl-director__watermark { display: none; }   /* 좁은 화면에서는 생략 */
	/* 목록도 가운데 정렬 — 점 불릿은 글 앞에 붙여 두면 가운데가 어긋나 보이므로 인라인으로 바꾼다 */
	.sl-director__list { display: inline-block; text-align: left; }

	.sl-story { padding: 70px 0; }
	.sl-story .swiper { height: 440px; }
	.sl-story .swiper-slide { width: 88%; height: 380px; }
	.sl-story .swiper-slide-active { height: 440px; }
	/* 제목은 카드 위, 본문은 아래로 벌린다 (PC 는 한 줄에 좌우로 둔다) */
	.sl-story__card { align-items: stretch; padding: 56px 24px 32px; border-radius: 20px; }
	.sl-story__body { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; }
	.sl-story__desc { font-size: var(--sl-text); }
	.sl-story__label { font-size: 26px; }   /* 겹침 비율은 em·% 기준이라 그대로 유지된다 */
	.sl-story__nav { display: none; }

	.sl-special { padding: 70px 20px; }
	.sl-special__list { gap: 16px; padding-top: 32px; flex-wrap: wrap; }   /* 태블릿 이하 2열 */
	.sl-special__card { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); }
	/* 흰 덮개 없이 사진 위에 내용을 바로 보여 준다 (PC 는 호버로 열리는 방식 유지) */
	.sl-special__box { display: none; }
	.sl-special__card::after { background: rgba(0,0,0,.5); }
	.sl-special__hover { opacity: 1; transform: none; }

	.sl-review { padding: 70px 20px; }
	.sl-review__list { grid-template-columns: repeat(2, 1fr); gap: 16px; padding-top: 32px; }
	/* 후기는 별점·제목·날짜만 남겨 카드 높이를 낮추고, 오른쪽 아래 화살표로 목록과 잇는다 */
	.sl-review__desc { display: none; }
	.sl-review__card { padding: 22px 48px 20px 24px; }
	.sl-review__star { margin-bottom: 8px; }
	.sl-review__title { margin-bottom: 10px; }
	.sl-review__go { display: block; }

	.sl-ba { padding: 60px 0 70px; }
	.sl-ba__slider { margin: 0 -10px; padding: 0 34px; }
	.sl-ba__nav { width: 32px; height: 32px; }   /* 중앙정렬은 flex 가 처리 */
	.sl-ba__nav::before { width: 13px; height: 13px; }
	.sl-ba__nav--prev { left: 0; }
	.sl-ba__nav--next { right: 0; }

	.sl-consult { padding: 60px 20px; }
	.sl-consult__title { font-size: 26px; margin-bottom: 24px; }
	.sl-consult__list { grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }
}

@media (max-width: 640px) {
	/* 히어로 사진은 가로로 아주 긴 편(약 1672x941)이라 좁은 화면에서 높이를 그대로 두면
	   cover 가 높이에 맞춰 확대되면서 좌우가 절반 넘게 잘린다.
	   높이를 낮춰 확대 배율을 줄이면 같은 폭에서 사진이 더 넓게 들어온다 */
	.sl-hero { height: 430px; }
	/* PC 는 카피가 얹히는 왼쪽만 어둡게 깔지만, 모바일은 카피가 화면 전체 폭을 쓰므로
	   같은 가로 그라데이션이면 오른쪽 글자가 사진에 묻힌다 → 화면 전체에 균일하게 덮는다 */
	.sl-hero__swiper .swiper-slide::after { background: rgba(0, 0, 0, .45); }
	/* 좁은 화면에서는 긴 헤드가 한 줄에 못 들어가므로 줄바꿈을 허용한다 */
	.sl-hero__title { font-size: 40px; margin-bottom: 12px; white-space: normal; }
	.sl-hero__desc { font-size: 15px; line-height: 24px; }
	.sl-about__visual { height: 260px; }
	.sl-about__title { font-size: 22px; }
	.sl-about__desc { font-size: 15px; }
	/* 4장을 세로로 쌓으면 섹션이 지나치게 길어진다 → 옆으로 밀어 보는 카드 슬라이드로 바꾼다.
	   Swiper 로 만들면 마크업(swiper-wrapper/swiper-slide)을 바꿔야 해 PC 까지 영향을 받으므로,
	   마크업은 그대로 두고 CSS 스크롤 스냅으로 처리한다 (관성 스와이프는 브라우저가 담당) */
	.sl-special__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;          /* 스크롤바는 감춘다 (자리만 차지하고 조작은 스와이프로) */
		-ms-overflow-style: none;
	}
	.sl-special__list::-webkit-scrollbar { display: none; }
	.sl-special__card {
		flex: 0 0 86%;        /* 다음 카드가 살짝 걸쳐 보여 넘길 수 있다는 걸 알린다 */
		max-width: 360px;
		scroll-snap-align: start;
	}

	/* 치료사례 카테고리 : 글자 길이에 따라 제멋대로 접히지 않게 한 칸을 1/3 로 못박는다
	   → 다섯 개가 위 3 · 아래 2 로 떨어지고, 남은 두 개는 justify-content 가 가운데로 모은다 */
	.sl-ba__filter li { flex: 0 0 calc((100% - 16px) / 3); }   /* 16px = gap 8px x 2 */
	.sl-ba__filter button { width: 100%; padding: 9px 0; }
	.sl-review__list { grid-template-columns: 1fr; }
	.sl-review__desc { min-height: 0; }
	/* 1열이라 8개를 다 세우면 섹션이 너무 길어진다 — 모바일에서는 앞 4개만 노출 */
	.sl-review__card:nth-child(n+5) { display: none; }
	.sl-director__title { font-size: 22px; }
	.sl-consult__box { padding: 24px 20px; border-radius: 20px; }
	.sl-consult__title { font-size: 21px; }
}