@charset "utf-8";
/* ==========================================================================
   치아미백 (/whitening/index)
   - 히어로 밴드(.sl-subhero)·토큰·헤더/푸터는 site_layout.css
   - 이 파일의 선택자는 모두 .sl-wt 접두사로 스코프 한정 (publish.md 3.4)
   - 섹션 구성·여백은 치아교정(ortho.css) 과 같은 규칙을 따른다
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 섹션 공통
   -------------------------------------------------------------------------- */
/* 모서리는 박스 크기대별로 두 값만 쓴다 — 각진 모서리는 두지 않는다 (원형 배지는 예외)
   radius    : 카드·사진 같은 큰 박스
   radius-sm : 아이콘 타일 같은 작은 박스 */
.sl-wt-intro,
.sl-wt-reco,
.sl-wt-program,
.sl-wt-faq {
	--sl-wt-radius: 20px;
	--sl-wt-radius-sm: 14px;
}

/* 흰 바탕과 크림 바탕이 한 섹션씩 번갈아 나온다 */
.sl-wt-reco,
.sl-wt-faq {
	background: var(--sl-cream);
	box-sizing: border-box;
}
.sl-wt-intro,
.sl-wt-program {
	background: #fff;
	box-sizing: border-box;
}
.sl-wt__inner {
	max-width: var(--sl-container);   /* 헤더 콘텐츠 폭에 맞춘다 */
	margin: 0 auto;
}
.sl-wt__head { text-align: center; }
.sl-wt__title {
	font-size: 36px;
	font-weight: 700;
	color: var(--sl-dark);
	letter-spacing: -.72px;
	line-height: 1.3;
	margin: 16px 0 0;
}
.sl-wt__lead {
	font-size: 20px;
	font-weight: 700;
	color: var(--sl-dark);
	line-height: 1.7;
	margin: 16px 0 0;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   1. 자가 치아미백이란?
   -------------------------------------------------------------------------- */
/* 아래 여백 60 + 다음 섹션 위 여백 60 = 섹션 간격 120 (배경색이 바뀌는 경계라 절반씩 나눈다) */
.sl-wt-intro { padding: 120px 20px 60px; }
/* 좌 사진 / 우 설명 2단 — 이 섹션의 머리말만 가운데가 아니라 왼쪽에 붙는다 */
.sl-wt-intro__row {
	display: flex;
	align-items: center;
	gap: 80px;
	box-sizing: border-box;
}
.sl-wt-intro__visual {
	flex: 0 1 620px;
	min-width: 0;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--sl-wt-radius);
	overflow: hidden;
	background: #f1ece4;
}
.sl-wt-intro__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sl-wt-intro__body { flex: 1 1 0; min-width: 0; }
.sl-wt-intro__body .sl-wt__head { text-align: left; }
.sl-wt-intro__desc {
	margin: 24px 0 0;
	font-size: var(--sl-text);
	line-height: 2;
	color: rgba(43, 43, 40, .7);
	text-wrap: pretty;
}
/* 자가미백을 이루는 세 가지 축.
   카드 배너 : 위쪽에 아이콘 타일, 아래쪽에 제목 + 설명을 두고 그 사이를 비워
   시선이 아이콘 → 제목 → 설명 순으로 떨어지게 한다. */
.sl-wt-point {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
}
.sl-wt-point__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 340px;
	padding: 40px 36px;
	background: none;
	border: 1px solid rgba(184, 74, 30, .38);   /* 면 대신 테두리로 잡는 카드 */
	border-radius: var(--sl-wt-radius);
	box-sizing: border-box;
}
/* 아이콘 타일 — 배경이 없는 카드라 타일만 크림으로 깔아 아이콘 자리를 잡아 준다 */
.sl-wt-point__ico {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px; height: 92px;
	background: var(--sl-cream);
	border-radius: var(--sl-wt-radius-sm);
	color: var(--sl-dark);
}
.sl-wt-point__ico img {
	display: block;
	width: 46px; height: 46px;
	object-fit: contain;
}
/* 제목 묶음은 카드 아래쪽으로 밀어 붙인다 */
.sl-wt-point__body { margin-top: auto; padding-top: 40px; }
.sl-wt-point__title {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.52px;
	color: var(--sl-dark);
	word-break: keep-all;
}
.sl-wt-point__desc {
	margin: 18px 0 0;
	font-size: var(--sl-text);   /* 본문 */
	line-height: 1.85;
	color: rgba(43, 43, 40, .7);
	text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   2. 이런 분께 추천합니다
   -------------------------------------------------------------------------- */
.sl-wt-reco { padding: 60px 20px 60px; }
/* 추천 대상 3열 — 카드로 두르지 않고, 아이콘과 글을 가로로 붙인 뒤 행마다 선으로 나눈다 */
.sl-wt-reco__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 48px;
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
}
.sl-wt-reco__item {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
	padding: 28px 4px;
	border-bottom: 1px solid rgba(43, 43, 40, .12);
	box-sizing: border-box;
}
/* 아이콘은 테두리 없이 선만 (색은 currentColor 로 물려받는다) */
.sl-wt-reco__ico {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	color: var(--sl-orange-dark);
}
.sl-wt-reco__ico svg {
	display: block;
	width: 100%; height: 100%;
}
.sl-wt-reco__text {
	margin: 0;
	font-size: var(--sl-text);   /* 본문 */
	line-height: 1.65;
	color: var(--sl-dark);
	word-break: keep-all;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   3. 자가미백 프로그램
   -------------------------------------------------------------------------- */
.sl-wt-program { padding: 60px 20px 60px; }
/* 좌 사진 / 우 설명 2단 — 이 섹션의 머리말만 가운데가 아니라 왼쪽에 붙는다 */
.sl-wt-program__row {
	display: flex;
	align-items: center;
	gap: 80px;
	box-sizing: border-box;
}
.sl-wt-program__body { flex: 1 1 0; min-width: 0; }
.sl-wt-program__body .sl-wt__head { text-align: left; }
.sl-wt-program__desc {
	margin: 24px 0 0;
	font-size: var(--sl-text);
	line-height: 2;
	color: rgba(43, 43, 40, .7);
	text-wrap: pretty;
}
.sl-wt-program__visual {
	flex: 0 1 620px;
	min-width: 0;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--sl-wt-radius);
	overflow: hidden;
	background: #f1ece4;
}
.sl-wt-program__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sl-wt-program__steptitle {
	margin: 72px 0 0;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.4px;
	color: var(--sl-dark);
}
/* 진행 단계 4칸.
   카드 오른쪽 가운데가 볼록 튀어나와 다음 카드의 평평한 왼쪽 면 위로 올라타 겹친다.
   흰 섹션 위 흰 카드라 형태는 테두리가 아니라 그림자가 잡아 준다. */
.sl-wt-step {
	--sl-wt-step-bg: #fff;   /* 카드와 볼록이 한 값을 공유해 색이 어긋날 여지를 없앤다 */
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}
.sl-wt-step__item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 300px;
	/* 오른쪽 가운데로 볼록이 지나가므로 좌우 여백을 넉넉히 둬 글이 이음매에 붙지 않게 한다 */
	padding: 40px 44px;
	background: var(--sl-wt-step-bg);
	border-radius: var(--sl-wt-radius);
	box-shadow: 0 2px 18px rgba(43, 43, 40, .1);
	box-sizing: border-box;
}
/* 앞 카드의 이음매가 뒤 카드를 덮어야 하므로 앞에 올수록 위에 쌓는다 */
.sl-wt-step__item:nth-child(1) { z-index: 4; }
.sl-wt-step__item:nth-child(2) { z-index: 3; }
.sl-wt-step__item:nth-child(3) { z-index: 2; }
.sl-wt-step__item:nth-child(4) { z-index: 1; }
/* 볼록의 그림자 — 같은 곡선을 5px 오른쪽에 깔아서 만든다.
   drop-shadow 를 쓰면 곡선 '둘레 전체'(카드와 맞닿은 왼쪽 변 포함) 에 그림자가 생겨
   카드 위에 세로 경계선이 나타난다. 아래에 깔면 왼쪽 번짐은 본체가 덮어 가려진다. */
.sl-wt-step__item:not(:last-child)::before {
	content: '';
	position: absolute;
	z-index: 1;
	top: 50%;
	right: -55px;
	/* 곡선(50px)보다 박스를 10px 넓게 잡는다. 폭을 딱 맞추면 blur 로 번진 부분이
	   mask 영역(=박스) 밖으로 나가 오른쪽에서 일자로 잘린다 */
	width: 60px; height: 200px;
	margin-top: -100px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0h10c0 50 40 55 40 100s-40 50-40 100H0z' fill='%23000000'/%3E%3C/svg%3E") no-repeat left center / 50px 200px;
	opacity: .13;
	filter: blur(5px);
	/* 곡선이 카드 변으로 되돌아오는 위아래 끝에서는 그림자가 카드 사이 간격 위에 세로 띠로 남는다.
	   볼록이 실제로 튀어나온 가운데 구간에만 보이도록 위아래를 지운다. */
	-webkit-mask: linear-gradient(to bottom, transparent 8%, #000 26%, #000 74%, transparent 92%);
	mask: linear-gradient(to bottom, transparent 8%, #000 26%, #000 74%, transparent 92%);
}
/* 볼록 본체.
   색은 SVG 가 아니라 CSS 가 칠하고(카드와 같은 변수), SVG 는 mask 로 모양만 오려 낸다.
   SVG 를 이미지로 그리면 래스터화 과정에서 카드 색과 미세하게 어긋날 수 있다. */
.sl-wt-step__item:not(:last-child)::after {
	content: '';
	position: absolute;
	z-index: 2;
	top: 50%;
	right: -40px;
	width: 50px; height: 200px;   /* 왼쪽 10px 은 카드와 겹치는 여유분 */
	margin-top: -100px;
	background: var(--sl-wt-step-bg);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0h10c0 50 40 55 40 100s-40 50-40 100H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0h10c0 50 40 55 40 100s-40 50-40 100H0z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* 이음매의 이중 꺾쇠 — 볼록이 튀어나온 폭(40px) 만큼 잡아 그 안에서 가운데 정렬한다 */
.sl-wt-step__link {
	position: absolute;
	z-index: 3;
	top: 50%;
	right: -40px;
	width: 40px;
	margin-top: -15px;
	line-height: 30px;
	text-align: center;
	font-size: 22px;
	color: rgba(184, 74, 30, .5);
}
.sl-wt-step__body { flex: 1 1 auto; }
.sl-wt-step__title {
	margin: 0;
	font-size: 26px;   /* 세 가지 축 카드 제목과 같은 크기 */
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.52px;
	color: var(--sl-dark);
	word-break: keep-all;
}
.sl-wt-step__desc {
	margin: 14px 0 0;
	font-size: var(--sl-text);   /* 본문 */
	line-height: 1.7;
	color: rgba(43, 43, 40, .65);
	word-break: keep-all;
}
/* 단계 아이콘은 카드 아래 오른쪽 원 배지에 둔다.
   선 두께는 네 아이콘 모두 1.5 로 맞춰 그렸다 (마크업의 stroke-width) */
.sl-wt-step__ico {
	align-self: flex-end;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px; height: 64px;
	border: 1px solid rgba(184, 74, 30, .45);
	border-radius: 50%;
	color: var(--sl-orange-dark);
}
.sl-wt-step__ico svg {
	display: block;
	width: 30px; height: 30px;
}
/* 사용 기간 안내 — 본문보다 한 톤 낮춰 보조 설명으로 읽히게 한다 */
.sl-wt-program__note {
	max-width: 880px;
	margin: 44px auto 0;
	text-align: center;
	font-size: var(--sl-text);
	line-height: 1.9;
	color: rgba(43, 43, 40, .58);
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4. 치아미백 Q&A
   -------------------------------------------------------------------------- */
.sl-wt-faq { padding: 60px 20px; }
/* 세 항목을 가로로 나란히 두고 답변까지 모두 펼쳐 둔다 (여닫는 동작 없음) */
.sl-wt-faq__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	column-gap: 48px;
	row-gap: 48px;
	margin: 80px 0 0;
}
.sl-wt-faq__item {
	min-width: 0;
	text-align: center;
}
.sl-wt-faq__list dt {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -.36px;
	color: var(--sl-dark);
	word-break: keep-all;
}
.sl-wt-faq__list dd {
	margin: 16px 0 0;
	font-size: var(--sl-text);   /* 본문 문단은 16px 기준 */
	line-height: 1.9;
	color: rgba(43, 43, 40, .68);
	word-break: keep-all;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   5. 반응형 (본문은 var(--sl-text) : PC 16px / 640 이하 14px — site_layout.css 타이포 기준)
      히어로 밴드의 반응형은 site_layout.css 가 담당한다
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
	/* 머리말 아래 여백 : 전 섹션 동일 */
	.sl-wt-faq__list { margin-top: 64px; }

	.sl-wt-reco__list { margin-top: 48px; column-gap: 32px; }
	.sl-wt-intro__row { gap: 48px; }
	.sl-wt-point { margin-top: 48px; gap: 16px; }
	.sl-wt-point__item { min-height: 300px; padding: 32px 26px; }
	.sl-wt-point__body { padding-top: 32px; }
	.sl-wt-point__title { font-size: 23px; }
	.sl-wt-program__row { gap: 48px; }
	.sl-wt-program__steptitle { margin-top: 56px; }
	.sl-wt-step__item { min-height: 260px; padding: 32px 34px; }
	.sl-wt-step__title { font-size: 23px; }
}

@media (max-width: 1024px) {
	/* 좁은 화면에서도 배경 경계는 32 + 32 = 64 로 나눠 준다 */
	.sl-wt-intro { padding: 64px 20px 32px; }
	.sl-wt-reco { padding: 32px 20px 32px; }
	.sl-wt-program { padding: 32px 20px 32px; }
	.sl-wt-faq { padding: 32px 20px 40px; }

	.sl-wt__title { font-size: 26px; }
	.sl-wt__lead { font-size: 18px; }

	/* 머리말 아래 여백 : 전 섹션 동일 */
	.sl-wt-faq__list { margin-top: 32px; }

	/* 2단 섹션은 사진 위, 글 아래로 쌓고 글은 가운데로 모은다.
	   프로그램은 글이 먼저 오므로 사진을 order 로 끌어올린다 */
	.sl-wt-intro__row,
	.sl-wt-program__row { flex-direction: column; align-items: stretch; gap: 28px; }
	.sl-wt-intro__visual,
	.sl-wt-program__visual { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; }
	.sl-wt-program__visual { order: -1; }
	.sl-wt-intro__body .sl-wt__head,
	.sl-wt-program__body .sl-wt__head { text-align: center; }
	.sl-wt-intro__desc,
	.sl-wt-program__desc { margin-top: 16px; text-align: center; line-height: 1.9; }

	/* 세 가지 축은 한 줄에 하나씩 쌓는다.
	   세로로 쌓이면 카드 높이를 맞출 이유가 없어 내용만큼만 차지하게 둔다 */
	.sl-wt-point { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
	.sl-wt-point__item { min-height: 0; padding: 32px 26px; }
	.sl-wt-point__ico { width: 76px; height: 76px; }
	.sl-wt-point__ico img { width: 38px; height: 38px; }
	.sl-wt-point__body { padding-top: 28px; }
	.sl-wt-point__title { font-size: 21px; }
	.sl-wt-point__desc { margin-top: 12px; }

	/* 추천 — 3열은 좁아 글이 끊기므로 2열로 */
	.sl-wt-reco__list { grid-template-columns: repeat(2, 1fr); column-gap: 32px; margin-top: 32px; }
	.sl-wt-reco__item { padding: 22px 2px; gap: 16px; }
	.sl-wt-reco__ico { width: 38px; height: 38px; }

	/* 진행 단계는 2열 — 이음매는 줄이 바뀌면 흐름이 어긋나므로 걷는다 */
	.sl-wt-program__steptitle { margin-top: 40px; font-size: 18px; }
	.sl-wt-step { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
	.sl-wt-step__item { min-height: 220px; padding: 28px 22px; }
	.sl-wt-step__item:not(:last-child)::before,
	.sl-wt-step__item:not(:last-child)::after { content: none; }
	.sl-wt-step__link { display: none; }
	.sl-wt-step__ico { width: 54px; height: 54px; }
	.sl-wt-step__ico svg { width: 26px; height: 26px; }
	.sl-wt-program__note { margin-top: 32px; }

	/* Q&A — 3열은 좁아 답변이 잘게 끊기므로 한 줄에 하나씩 쌓는다 */
	.sl-wt-faq__list { grid-template-columns: 1fr; row-gap: 32px; }
	.sl-wt-faq__list dt { font-size: 17px; }
}

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

	/* 아이콘 위 / 글 아래 배치는 카드가 너무 높아진다 → 아이콘 왼쪽, 글 오른쪽 한 줄로 눕힌다 */
	/* 카드마다 설명 줄 수가 달라 높이가 제각각이 된다 → 행 높이를 가장 큰 카드에 맞춰 통일 */
	.sl-wt-point { grid-auto-rows: 1fr; }
	.sl-wt-point__item {
		flex-direction: row;
		/* 아이콘 타일 윗변과 제목 첫 줄을 같은 선에서 시작시킨다 (가운데 정렬 금지) */
		align-items: flex-start;
		gap: 16px;
		padding: 18px;
	}
	.sl-wt-point__ico { width: 56px; height: 56px; }
	.sl-wt-point__ico img { width: 30px; height: 30px; }
	/* 세로 배치에서 글을 카드 아래로 밀던 여백(margin-top:auto·padding-top)을 지운다 */
	.sl-wt-point__body { margin-top: 0; padding-top: 0; min-width: 0; }
	.sl-wt-point__title { font-size: 17px; }
	/* 세 문단 모두 두 줄로 끊어 카드 높이를 맞춘다 (줄바꿈 위치는 마크업의 <br> 이 정한다) */
	.sl-wt-point__desc { margin-top: 6px; line-height: 1.6; word-break: keep-all; }

	.sl-wt-reco { padding: 32px 16px 32px; }
	.sl-wt-reco__list { grid-template-columns: 1fr; }

	/* 좁은 화면에서는 단계도 한 줄씩 — 세로로 쌓이면 높이를 맞출 이유가 없다.
	   카드 사이 간격은 볼록이 다음 카드 글자를 덮지 않을 만큼(24px) 벌린다 */
	.sl-wt-step { grid-template-columns: 1fr; gap: 24px; }
	/* 카드를 눕혀 글 왼쪽 / 아이콘 오른쪽 한 줄로 두고 둘의 세로 가운데를 맞춘다.
	   아이콘이 글 아래로 더 이상 쌓이지 않으므로 카드 높이도 그만큼 낮아진다 */
	.sl-wt-step__item {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		min-height: 0;
		padding: 22px 20px;
	}
	.sl-wt-step__body { min-width: 0; }
	.sl-wt-step__title { font-size: 21px; }
	.sl-wt-step__desc { margin-top: 8px; }
	/* 세로 배치에서 아이콘을 오른쪽 아래로 붙이던 align-self 를 가운데로 되돌린다 */
	.sl-wt-step__ico { align-self: center; flex: 0 0 auto; width: 56px; height: 56px; }
	.sl-wt-step__ico svg { width: 27px; height: 27px; }

	/* PC 처럼 카드를 겹친다. 다만 세로로 쌓이므로 볼록이 나가는 방향은 오른쪽이 아니라 아래.
	   같은 곡선(SVG mask) 을 90° 돌려 카드 아래 가운데에 붙인다.
	   ※ 1024 구간에서 content:none 으로 껐던 것을 여기서 다시 켠다 */
	.sl-wt-step__item:not(:last-child)::before,
	.sl-wt-step__item:not(:last-child)::after {
		content: '';
		top: 100%;    /* 카드 아래 변 */
		right: auto;
		left: 50%;
		transform: rotate(90deg);   /* 곡선의 평평한 면이 위(카드 쪽), 볼록이 아래로 */
	}
	/* 볼록 본체 : 상자 50x200 → 가로 가운데(-25) / 밑변이 카드 안쪽으로 8px 걸치게(-100+8) */
	.sl-wt-step__item:not(:last-child)::after {
		margin-left: -25px;
		margin-top: -92px;
	}
	/* 그림자 : 본체보다 3px 더 바깥(아래) 으로 밀어 깔아야 본체에 가려 안쪽 번짐이 안 보인다.
	   상자는 60px 인데 곡선은 왼쪽 50px 에만 그려져 있어(= 돌리면 위로 5px 치우침),
	   그 5px 까지 함께 상쇄해야 한다 → 본체(-92) 기준 5 + 3 = 8px 아래인 -84 */
	.sl-wt-step__item:not(:last-child)::before {
		margin-left: -30px;   /* 상자 폭이 60 이라 절반은 30 */
		margin-top: -84px;
	}
	/* 단계 카드 아래 안내 문단 (본문보다 한 단계 작은 보조 문구) */
	.sl-wt-program__note { font-size: 12px; }

	/* 이음매 꺾쇠도 아래를 향하게 돌려 다시 보여 준다 */
	.sl-wt-step__link {
		display: block;
		top: 100%;
		right: auto;
		left: 50%;
		margin-left: -20px;
		margin-top: 0;
		transform: rotate(90deg);
	}
}