@charset "utf-8";
/* ==========================================================================
   치아교정 (/ortho/index)
   - 히어로 밴드(.sl-subhero)·토큰·헤더/푸터는 site_layout.css
   - 이 파일의 선택자는 .sl-ortho / .sl-faq / .sl-sym / .sl-dev 접두사로 스코프 한정
     (publish.md 3.4)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 서브히어로 & 섹션 공통
   -------------------------------------------------------------------------- */
.sl-subhero .sl-subhero__bg {
	object-fit: cover;
	object-position: 60% center;
}

.sl-ortho-intro,
.sl-ortho-faq,
.sl-ortho-dev {
	background: var(--sl-cream);
	box-sizing: border-box;
}
/* 증상별 교정치료 — 사진 뒤로 겹치는 카드가 크림 배경보다 흰 바탕에서 또렷하게 읽힌다 */
.sl-ortho-sym {
	background: #fff;
	box-sizing: border-box;
}
.sl-ortho__inner {
	max-width: var(--sl-container);   /* 헤더 콘텐츠 폭에 맞춘다 */
	margin: 0 auto;
}
.sl-ortho__head { text-align: center; }
.sl-ortho__title {
	font-size: 36px;
	font-weight: 700;
	color: var(--sl-dark);
	letter-spacing: -.72px;
	line-height: 1.3;
	margin: 16px 0 0;
}
.sl-ortho__lead {
	font-size: 20px;
	font-weight: 700;
	color: var(--sl-dark);
	line-height: 1.7;
	margin: 16px 0 0;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   1. 교정치료란?
   -------------------------------------------------------------------------- */
.sl-ortho-intro { padding: 120px 20px 0; }
.sl-ortho-intro__desc {
	max-width: 1180px;
	margin: 80px auto 0;   /* 머리말 아래 여백 기준값 (세 섹션 공통) */
	text-align: center;
	font-size: var(--sl-text);
	line-height: 2;
	color: rgba(43, 43, 40, .7);
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   2. 자주 묻는 질문 카드
   -------------------------------------------------------------------------- */
/* 아래 여백 60 + 다음 섹션 위 여백 60 = 섹션 간격 120 (배경색이 바뀌는 경계라 절반씩 나눈다) */
.sl-ortho-faq { padding: 64px 20px 60px; }
.sl-faq {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sl-faq__item { min-width: 0; }

.sl-faq__card {
	position: relative;
	display: block;
	width: 100%;
	height: 340px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--sl-dark);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.sl-faq__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	color: transparent;
}
/* 사진 위 글자가 읽히도록 덮는 어두운 막 */
.sl-faq__card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .3);
	pointer-events: none;
}
/* 제목은 카드 상단에 고정한다
   (button 은 내용을 세로 가운데로 모으려 하므로 절대 배치로 못 박는다) */
.sl-faq__q {
	position: absolute;
	z-index: 1;
	top: 28px;
	left: 28px;
	right: 70px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.45;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
	word-break: keep-all;
}
.sl-faq__a {
	position: absolute;
	z-index: 1;
	left: 14px;
	right: 14px;
	bottom: 14px;
	padding: 22px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	font-size: var(--sl-text);   /* 본문 문단은 16px 기준 */
	line-height: 1.8;
	color: var(--sl-dark);
	text-wrap: pretty;
	/* 닫힐 때는 아래로 내려가며 사라지고, 열릴 때는 올라오며 나타난다 */
	opacity: 0;
	visibility: hidden;
	transform: translateY(24px);
	transition: opacity .35s ease,
	            transform .38s cubic-bezier(.22,.61,.36,1),
	            visibility .38s;
}
.sl-faq__item.is-open .sl-faq__a {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* 모션 최소화 설정을 켠 사용자는 이동 없이 바로 표시 */
@media (prefers-reduced-motion: reduce) {
	.sl-faq__a { transition: none; transform: none; }
	.sl-faq__item.is-open .sl-faq__a { transform: none; }
	.sl-sym__item { transition: opacity .2s ease; }
	.sl-dev__desc { transition: opacity .2s ease; }
}

.sl-faq__toggle {
	position: absolute;
	z-index: 2;
	right: 18px;
	bottom: 18px;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	color: #fff;
	transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
/* 펼친 카드의 ×  는 테두리 원 없이 아이콘만 남긴다 */
.sl-faq__item.is-open .sl-faq__toggle {
	transform: rotate(45deg);
	border-color: transparent;
}
.sl-faq__card:hover .sl-faq__toggle { background: rgba(255, 255, 255, .18); }
.sl-faq__item.is-open .sl-faq__card:hover .sl-faq__toggle { background: none; }
.sl-faq__card:focus-visible { outline: 2px solid var(--sl-orange); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. 증상별 교정치료
   -------------------------------------------------------------------------- */
/* 위아래 모두 배경색이 바뀌는 구간이라 60 + 60 으로 나눠 앞뒤 간격 120 을 유지한다 */
.sl-ortho-sym { padding: 60px 20px 60px; }

/* 3-1. 증상 탭 (둘러보기 페이지와 같은 스텝 UI) --------------------------- */
/* 머리말 ↔ 다음 블록 사이 여백은 세 섹션이 같다 (교정치료란? 기준 80px) */
.sl-sym__steps { margin-top: 80px; }
.sl-sym__tabs {
	display: flex;
	align-items: flex-start;
}
.sl-sym__tab {
	position: relative;
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
	padding: 0 4px;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}
/* 원 중앙 높이를 지나는 연결선 : 양 끝 탭만 16px 안쪽에서 끊는다 */
.sl-sym__tab::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 17px;
	height: 1px;
	background: rgba(43, 43, 40, .18);
}
.sl-sym__tab:first-child::before { left: 16px; }
.sl-sym__tab:last-child::before { right: 16px; }

.sl-sym__dot {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(43, 43, 40, .25);
	border-radius: 50%;
	background: var(--sl-cream);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: rgba(43, 43, 40, .5);
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.sl-sym__num,
.sl-sym__check { font-style: normal; }
.sl-sym__check { display: none; }
.sl-sym__tab.is-on .sl-sym__dot {
	background: var(--sl-dark);
	border-color: var(--sl-dark);
	color: #fff;
}
.sl-sym__tab.is-on .sl-sym__num { display: none; }
.sl-sym__tab.is-on .sl-sym__check { display: block; }
.sl-sym__tab:hover .sl-sym__dot { border-color: rgba(43, 43, 40, .5); }
.sl-sym__tab.is-on:hover .sl-sym__dot { border-color: var(--sl-dark); }
.sl-sym__tab:focus-visible .sl-sym__dot { outline: 2px solid var(--sl-orange); outline-offset: 3px; }

.sl-sym__label {
	font-size: var(--sl-text);
	line-height: 1.4;
	color: rgba(43, 43, 40, .4);
	letter-spacing: -.02em;
	text-align: center;
	word-break: keep-all;
	transition: color .25s ease;
}
.sl-sym__tab:hover .sl-sym__label { color: rgba(43, 43, 40, .7); }
.sl-sym__tab.is-on .sl-sym__label { color: var(--sl-dark); font-weight: 700; }

/* 3-2. 선택한 증상 설명 --------------------------------------------------- */
.sl-sym__details { margin-top: 72px; }
.sl-sym__detail { display: none; text-align: center; }
.sl-sym__detail.is-on { display: block; }
.sl-sym__name {
	font-size: 26px;
	font-weight: 700;
	color: var(--sl-dark);
	letter-spacing: -.26px;
	margin: 0;
}
.sl-sym__desc {
	font-size: var(--sl-text);
	line-height: 1.85;
	color: rgba(43, 43, 40, .68);
	margin: 15px 0 0;
	text-wrap: pretty;
}

/* 3-3. 증상 사진 캐러셀 ---------------------------------------------------
   가운데(사진) ↔ 양옆(이름 카드) 자리를 바꾸며 크기가 함께 변한다.
   자리·크기는 상태 클래스로만 주고 전환은 transition 이 맡는다.
   좌표는 % 기준 : 카드 폭 9.615%, 카드 높이 61.39%.
   가운데 사진은 62% 폭으로 중앙(left 19%) 에 두고, 양옆 카드는 그 끝에 2.6% 씩 물려
   사진 뒤(z-index) 로 숨긴다. 뒤에 있는 카드는 blur + opacity 로 흐릿하게 보인다. */
.sl-sym__carousel {
	position: relative;
	max-width: var(--sl-container);   /* 헤더 콘텐츠 폭에 맞춘다 */
	margin: 48px auto 0;
	aspect-ratio: 1560 / 518;
}

.sl-sym__item {
	position: absolute;
	margin: 0;
	/* 기본값 = 오른쪽 바깥 대기 자리 */
	left: 100%;
	top: 19.31%;
	width: 9.615%;
	height: 61.39%;
	border: 1px solid rgba(43, 43, 40, .1);
	border-radius: 16px;
	box-sizing: border-box;
	overflow: hidden;
	background: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	z-index: 1;              /* 가운데 사진(z-index 2) 뒤에 깔린다 */
	filter: blur(2px);
	transition: left .55s cubic-bezier(.22,.61,.36,1),
	            top .55s cubic-bezier(.22,.61,.36,1),
	            width .55s cubic-bezier(.22,.61,.36,1),
	            height .55s cubic-bezier(.22,.61,.36,1),
	            border-color .4s ease,
	            filter .4s ease,
	            opacity .4s ease,
	            visibility .55s;
}
.sl-sym__item.is-center { opacity: 1; visibility: visible; }
/* 양옆 카드 — 사진에 가려 일부만 보이므로 흐리게 두고, 올리면 또렷해진다 */
.sl-sym__item.is-prev,
.sl-sym__item.is-next { opacity: .55; visibility: visible; }
.sl-sym__item.is-prev:hover,
.sl-sym__item.is-next:hover { opacity: .9; filter: blur(.5px); }

.sl-sym__item.is-prev { left: 12%; }
.sl-sym__item.is-next { left: 78.385%; }
.sl-sym__item.is-center {
	left: 19%;
	top: 0;
	width: 62%;
	height: 100%;
	border-color: transparent;
	cursor: default;
	z-index: 2;
	filter: none;
}
/* 대기 중인 사진은 진행 방향 바깥에 둔다 */
.sl-sym__item.is-far-prev { left: -8%; }
.sl-sym__item.is-far-next { left: 100%; }

.sl-sym__item:hover { border-color: rgba(43, 43, 40, .3); }
.sl-sym__item.is-center:hover { border-color: transparent; }

/* 가운데로 오면 사진이 드러나고, 옆으로 물러나면 이름만 남는다 */
.sl-sym__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	color: transparent;   /* 파일이 없을 때 alt 문구가 잠깐 비치지 않게 */
	opacity: 0;
	transition: opacity .45s ease;
}
.sl-sym__item.is-center img { opacity: 1; }

/* 돌출입(1번) 사진은 세로가 긴 편이라 가운데 정렬하면 머리 위가 잘리고 목만 길게 남는다.
   기준선을 위로 올려(=사진을 아래로 내려) 얼굴이 프레임 가운데 오게 한다. */
.sl-sym__item[data-idx="1"] img { object-position: 50% 12%; }

/* 2~8번 증상은 치료 전/후가 따로 찍힌 두 장이라, 좌(전)·우(후) 로 붙여 1번과 같은 비교 화면을 만든다.
   페이드는 두 장을 묶은 이 상자가 대신 맡는다. */
.sl-sym__pair {
	position: absolute;
	inset: 0;
	display: flex;
	gap: 4px;
	background: #fff;   /* 두 장 사이에 생기는 경계선 */
	opacity: 0;
	transition: opacity .45s ease;
}
.sl-sym__item.is-center .sl-sym__pair { opacity: 1; }
.sl-sym__item .sl-sym__pair img {
	position: static;
	flex: 1 1 50%;
	width: auto;
	min-width: 0;   /* flex 아이템이 원본 폭만큼 벌어지지 않게 */
	/* 구강 접사는 가로가 긴 사진이라 칸을 꽉 채우면 어금니 쪽이 크게 잘린다.
	   높이를 조금 줄여(=사진을 축소해) 좌우가 더 보이게 하고, 남는 위아래는 섹션과 같은 흰 여백으로 둔다. */
	height: 68%;
	align-self: center;
	border-radius: 16px;   /* 카드·사진 모서리 기준값 (.sl-sym__item 과 동일) */
	opacity: 1;
}
.sl-sym__item.is-empty .sl-sym__pair { display: none; }

.sl-sym__item figcaption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	box-sizing: border-box;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(43, 43, 40, .55);
	text-align: center;
	word-break: keep-all;
	transition: opacity .35s ease;
}
.sl-sym__item.is-center figcaption { opacity: 0; }

/* 사진이 아직 준비되지 않은 증상 (테두리·점선 없이 이름만) */
.sl-sym__item.is-empty { background: #f1ece4; }
.sl-sym__item.is-empty img { display: none; }
.sl-sym__item.is-empty.is-center figcaption {
	opacity: 1;
	font-size: var(--sl-text);
	color: rgba(43, 43, 40, .45);
}

/* 좌우 이동 화살표 (사진 바깥, 배경 박스 없이 화살표 모양만) */
.sl-sym__arrow {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 56px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	appearance: none;
}
.sl-sym__arrow--prev { left: 0; }
.sl-sym__arrow--next { right: 0; }
.sl-sym__arrow i {
	display: block;
	width: 16px;
	height: 16px;
	border-left: 2px solid rgba(43, 43, 40, .55);
	border-bottom: 2px solid rgba(43, 43, 40, .55);
	transition: border-color .2s ease;   /* 호버 시 색만 바뀌고 위치는 그대로 */
}
.sl-sym__arrow--prev i { transform: rotate(45deg); }
.sl-sym__arrow--next i { transform: rotate(-135deg); }
.sl-sym__arrow:hover i { border-color: var(--sl-orange); }
.sl-sym__arrow:focus-visible { outline: 2px solid var(--sl-orange); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   4. 장치별 교정치료
   -------------------------------------------------------------------------- */
.sl-ortho-dev { padding: 60px 20px 140px; }
.sl-ortho-dev__desc {
	max-width: 1010px;
	margin: 80px auto 0;   /* 교정치료란? 과 같은 머리말 아래 여백 */
	text-align: center;
	font-size: var(--sl-text);
	line-height: 2;
	color: rgba(43, 43, 40, .7);
	text-wrap: pretty;
}

.sl-dev {
	display: flex;
	gap: 2px;   /* 카드끼리 살짝 떨어뜨려 경계를 보이게 */
	max-width: var(--sl-container);   /* 헤더 콘텐츠 폭 (카드는 grow 비율이라 함께 넓어진다) */
	height: 560px;
	margin: 48px auto 0;
}
.sl-dev__card {
	position: relative;
	/* 폭은 basis(%) 가 아니라 grow 비율로 나눈다.
	   basis 로 주면 전환 중 합이 100% 를 넘어 맨 오른쪽 카드가 밀려 흔들린다.
	   grow 는 남은 폭을 늘 비율대로 나누므로 빠르게 옮겨 다녀도 총합이 어긋나지 않는다.
	   (펼침 3 : 접힘 1 → 50% : 16.67% 로 디자인 비율과 같다) */
	flex: 1 1 0;
	height: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--sl-dark);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: flex-grow .65s cubic-bezier(.22,.61,.36,1);
}
.sl-dev__card.is-on { flex-grow: 3; cursor: default; }
.sl-dev__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	color: transparent;
}
/* 04 인비절라인 사진은 왼쪽에 invisalign 로고, 오른쪽에 인물이 있는 가로 사진(약 1.9:1).
   위아래 여백이 남지 않게 세로를 채우는 배율로 확대하고(cover),
   잘려 나가는 좌우 중에서는 로고가 있는 왼쪽을 기준으로 잡는다 */
.sl-dev__card[data-idx="4"] .sl-dev__bg { object-position: left center; }
/* 접혀 있는 카드는 전체를 어둡게 덮어 펼친 카드와 구별한다
   (z-index 를 주지 않으면 뒤에 오는 사진에 가려 보이지 않는다) */
.sl-dev__card::before {
	content: '';
	position: absolute;
	z-index: 1;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	transition: opacity .55s ease;
	pointer-events: none;
}
.sl-dev__card.is-on::before { opacity: 0; }

/* 아래쪽 글자가 읽히도록 깔리는 그라데이션 */
.sl-dev__card::after {
	content: '';
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,.92) 100%);
	pointer-events: none;
}
.sl-dev__body {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	padding: 20px;
	box-sizing: border-box;
	transition: padding .65s cubic-bezier(.22,.61,.36,1);
}
.sl-dev__card.is-on .sl-dev__body { padding: 32px; }
.sl-dev__no {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .55px;
	color: var(--sl-orange);
}
.sl-dev__name {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.35;
	color: #fff;
	word-break: keep-all;
}
/* 장치명 옆 보조 표기 — 제목보다 한 단계 작고 연하게 두어 계층을 나눈다.
   카드가 접혀 있을 때는 폭이 좁아 제목을 밀어내므로 펼친 카드에서만 드러낸다. */
.sl-dev__tag {
	margin-left: 6px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, .72);
	opacity: 0;
	transition: opacity .5s ease .15s;
}
.sl-dev__card.is-on .sl-dev__tag { opacity: 1; }
/* 구분선과 본문은 카드가 펼쳐질 때 자리를 만들며 아래에서 위로 올라온다.
   높이는 grid 0fr → 1fr 로 전환한다. max-height 로 여닫으면 지정값(고정)과 실제
   글자 높이가 달라, 중간에 실제 높이에 먼저 닿고 멈춰 위쪽 제목이 튀어 보인다.
   1fr 은 콘텐츠의 실제 높이라 처음부터 끝까지 고르게 움직인다.
   폭을 420px 로 고정해 카드가 좁아져도 줄 수가 변하지 않는다
   (넘치는 부분은 카드의 overflow:hidden 이 잘라낸다). */
.sl-dev__desc {
	display: grid;
	grid-template-rows: 0fr;
	width: 420px;
	max-width: none;
	padding-top: 0;
	border-top: 1px solid transparent;
	opacity: 0;
	font-size: var(--sl-text);
	line-height: 1.6;
	color: #fff;
	text-wrap: pretty;
	transition: grid-template-rows .65s cubic-bezier(.22,.61,.36,1),
	            padding-top .65s cubic-bezier(.22,.61,.36,1),
	            border-top-color .6s ease,
	            opacity .85s ease .1s;
}
.sl-dev__desc > span { overflow: hidden; }

.sl-dev__card.is-on .sl-dev__desc {
	grid-template-rows: 1fr;
	padding-top: 15px;
	border-top-color: rgba(255, 255, 255, .25);
	opacity: .75;
}
.sl-dev__card:focus-visible { outline: 2px solid var(--sl-orange); outline-offset: 3px; }

/* 제목 줄. PC 에서는 화살표가 절대배치라 빠져나가므로 사실상 제목만 들어 있다
   (모바일에서만 이 줄이 flex 가 되어 오른쪽 끝에 화살표를 세운다) */
.sl-dev__nameline { display: block; }

/* 펼친 카드의 오른쪽 아래 화살표 — 누르면 아래에 상세 카드가 열린다.
   접힌 카드는 폭이 좁아 화살표가 글자를 밀어내므로 펼친 카드에서만 보인다 */
.sl-dev__more {
	position: absolute;
	z-index: 3;
	right: 28px;
	bottom: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	transition: opacity .5s ease .15s, visibility .5s, background-color .2s ease, border-color .2s ease;
}
.sl-dev__card.is-on .sl-dev__more { opacity: 1; visibility: visible; }
.sl-dev__more:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.sl-dev__more:focus-visible { outline: 2px solid var(--sl-orange); outline-offset: 3px; }
/* 아래를 가리키는 꺾쇠. 열리면 위로 뒤집는다 */
.sl-dev__more::after {
	content: '';
	width: 10px;
	height: 10px;
	margin-top: -5px;   /* 꺾쇠를 회전시키면 시각 중심이 아래로 내려간다 */
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .3s ease, margin-top .3s ease;
}
.sl-dev__more[aria-expanded="true"]::after {
	margin-top: 5px;
	transform: rotate(-135deg);
}

/* --------------------------------------------------------------------------
   4-1. 장치 상세 카드 (화살표로 여는 접이식)
        높이는 grid 0fr → 1fr 로 전환한다. max-height 로 여닫으면 지정값과 실제
        높이가 달라 중간에 멈춘 것처럼 보인다 (.sl-dev__desc 와 같은 방식).
   -------------------------------------------------------------------------- */
/* 높이는 400px 로 고정하고 넘치는 내용은 카드 안에서 스크롤한다.
   여닫이 전환을 위해 접힘 값도 fr 이 아니라 0px 로 둔다 (다른 단위끼리는 전환되지 않는다) */
.sl-devmore {
	display: grid;
	grid-template-rows: 0px;
	max-width: var(--sl-container);
	margin: 0 auto;
	opacity: 0;
	transition: grid-template-rows .6s cubic-bezier(.22,.61,.36,1),
	            margin-top .6s cubic-bezier(.22,.61,.36,1),
	            opacity .5s ease;
}
.sl-devmore.is-open {
	grid-template-rows: 400px;
	margin-top: 24px;
	opacity: 1;
}
.sl-devmore__wrap { overflow: hidden; }
.sl-devmore__inner {
	height: 100%;
	padding: 48px 60px;
	background: #fff;
	border: 1px solid rgba(43, 43, 40, .1);
	border-radius: 20px;
	box-sizing: border-box;
	overflow-y: auto;
	overscroll-behavior: contain;   /* 끝까지 내려도 페이지가 따라 스크롤되지 않게 */
}
/* 스크롤 막대는 본문을 가리지 않게 가늘고 옅게 */
.sl-devmore__inner { scrollbar-width: thin; scrollbar-color: rgba(43, 43, 40, .25) transparent; }
.sl-devmore__inner::-webkit-scrollbar { width: 6px; }
.sl-devmore__inner::-webkit-scrollbar-track { background: transparent; }
.sl-devmore__inner::-webkit-scrollbar-thumb {
	background: rgba(43, 43, 40, .22);
	border-radius: 3px;
}
.sl-devmore__inner::-webkit-scrollbar-thumb:hover { background: rgba(43, 43, 40, .38); }
.sl-devmore__title {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -.52px;
	color: var(--sl-dark);
}
/* 제목 옆 보조 표기 — 카드의 .sl-dev__tag 와 같은 계층 */
.sl-devmore__tag {
	margin-left: 6px;
	font-size: 16px;
	font-weight: 600;
	color: rgba(43, 43, 40, .5);
}
/* 원고에서 색으로 강조된 한 줄 */
.sl-devmore__lead {
	margin: 18px 0 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--sl-orange);
	word-break: keep-all;
}
.sl-devmore__desc {
	margin: 16px 0 0;
	font-size: var(--sl-text);   /* 본문 문단은 16px 기준 */
	line-height: 1.95;
	color: rgba(43, 43, 40, .72);
	word-break: keep-all;
	text-wrap: pretty;
}
.sl-devmore__desc strong {
	font-weight: 700;
	color: var(--sl-dark);
}
.sl-devmore__sub {
	margin: 40px 0 0;
	padding-top: 32px;
	border-top: 1px solid rgba(43, 43, 40, .1);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -.44px;
	color: var(--sl-dark);
	word-break: keep-all;
}
.sl-devmore__sub em {
	font-style: normal;
	color: var(--sl-orange);
}
/* 인비절라인 다섯 가지 특징 — 라벨 폭을 고정해 설명 시작점을 맞춘다 */
.sl-devmore__points {
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
.sl-devmore__points li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 11px 0 11px 14px;
	border-left: 3px solid var(--sl-orange);
	margin-bottom: 8px;
	word-break: keep-all;
}
.sl-devmore__points li:last-child { margin-bottom: 0; }
.sl-devmore__points b {
	flex: 0 0 132px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .5px;
	color: var(--sl-dark);
}
.sl-devmore__points span {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--sl-text);
	line-height: 1.6;
	color: rgba(43, 43, 40, .72);
}

/* --------------------------------------------------------------------------
   5. 반응형 (본문은 var(--sl-text) : PC 16px / 640 이하 14px — site_layout.css 타이포 기준)
      히어로 밴드의 반응형은 site_layout.css 가 담당한다
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
	/* 머리말 아래 여백 : 세 섹션 동일 */
	.sl-ortho-intro__desc,
	.sl-ortho-dev__desc,
	.sl-sym__steps { margin-top: 64px; }
	.sl-sym__side { flex-basis: 120px; height: 260px; }
	.sl-dev { height: 480px; }
}

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

	.sl-ortho__title { font-size: 26px; }
	.sl-ortho__lead { font-size: 18px; }
	/* 머리말 아래 여백 : 세 섹션 동일 */
	.sl-ortho-intro__desc,
	.sl-ortho-dev__desc,
	.sl-sym__steps { margin-top: 32px; }
	.sl-ortho-intro__desc { line-height: 1.9; }

	/* 카드 2열 */
	.sl-faq { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.sl-faq__card { height: 300px; }
	.sl-faq__q { top: 22px; left: 22px; right: 60px; font-size: 18px; }
	.sl-faq__a { padding: 18px; }   /* 본문 크기는 반응형에서도 줄이지 않는다 */

	/* 탭 8개는 가로로 밀어 보게 한다 */
	.sl-sym__tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.sl-sym__tabs::-webkit-scrollbar { display: none; }
	.sl-sym__tab { flex: 0 0 124px; gap: 9px; }
	.sl-sym__label { font-size: 14px; }

	.sl-sym__details { margin-top: 46px; }
	.sl-sym__name { font-size: 22px; }

	/* 좁은 화면에서는 양옆 미리보기를 접고 가운데 사진과 화살표만 남긴다 */
	.sl-sym__carousel {
		margin-top: 32px;
		aspect-ratio: 4 / 3;
		padding: 0 32px;
		box-sizing: border-box;
	}
	.sl-sym__item,
	.sl-sym__item.is-prev,
	.sl-sym__item.is-next { opacity: 0; visibility: hidden; }
	.sl-sym__item.is-center {
		left: 32px;
		right: 32px;
		top: 0;
		width: auto;
		height: 100%;
		opacity: 1;
		visibility: visible;
	}
	.sl-sym__arrow { width: 22px; height: 44px; }
	.sl-sym__arrow i { width: 13px; height: 13px; }

	/* 좁은 화면에서는 카드를 세로로 쌓지 않고 한 장씩 좌우로 넘겨 본다.
	   scroll-snap 으로 스와이프하면 카드가 화면 가운데에 정확히 멈춘다 (별도 스크립트 없음) */
	.sl-dev {
		flex-direction: row;
		height: auto;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.sl-dev::-webkit-scrollbar { display: none; }
	.sl-dev__card,
	.sl-dev__card.is-on {
		/* 옆 카드가 살짝 보여야 더 넘길 수 있다는 것이 읽힌다 */
		flex: 0 0 86%;
		height: 420px;
		cursor: default;
		scroll-snap-align: center;
	}
	.sl-dev__card .sl-dev__body,
	.sl-dev__card.is-on .sl-dev__body { padding: 24px; }
	/* 한 장씩 보여 주므로 설명은 항상 펼쳐 두고 폭도 카드에 맞춘다 */
	.sl-dev__card .sl-dev__desc {
		grid-template-rows: 1fr;
		width: auto;
		max-width: 100%;
		padding-top: 15px;
		border-top-color: rgba(255, 255, 255, .25);
		opacity: .75;
	}
	/* 접힘용 딤 대신, 사진 위 글자가 읽히도록 카드 전체를 옅게 덮는다
	   (아래쪽 그라데이션(::after)만으로는 제목 줄까지 커버되지 않는다) */
	.sl-dev__card::before {
		opacity: 1;
		background: rgba(0, 0, 0, .34);
	}
	/* 카드가 펼쳐진 상태이므로 보조 표기도 항상 보인다 */
	.sl-dev__card .sl-dev__tag { opacity: 1; }
	/* 카드 가운데에 화살표가 떠 있으면 사진을 가리므로, 제목과 같은 줄 오른쪽 끝으로 옮긴다 */
	.sl-dev__nameline {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
	.sl-dev__card .sl-dev__more {
		position: static;
		flex: 0 0 auto;
		width: 30px;
		height: 30px;
		opacity: 1;
		visibility: visible;
	}
	.sl-dev__more::after { width: 8px; height: 8px; margin-top: -4px; border-width: 1.5px; }
	.sl-dev__more[aria-expanded="true"]::after { margin-top: 4px; }

	.sl-devmore__inner { padding: 32px 24px; }
	.sl-devmore__title { font-size: 22px; }
	.sl-devmore__tag { font-size: 14px; }
	.sl-devmore__lead { font-size: 17px; }
	.sl-devmore__sub { margin-top: 32px; padding-top: 26px; font-size: 19px; }
	/* 라벨 폭 고정을 풀고 두 줄로 쌓는다 */
	.sl-devmore__points li { flex-direction: column; align-items: flex-start; gap: 4px; }
	.sl-devmore__points b { flex: 0 0 auto; }
}

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

	/* 사진 카드(높이 고정 + 배경사진) 대신 제목만 보이는 아코디언으로 바꾼다.
	   PC·태블릿의 카드 형태는 위 구간 그대로 유지된다 */
	.sl-faq { grid-template-columns: 1fr; gap: 10px; }
	/* 배경 사진(.sl-faq__bg)과 그 위 어두운 막(::after)은 그대로 두고 높이만 내용에 맞춘다.
	   사진은 object-fit:cover 라 접힌 높이에 맞춰 잘려 들어간다 */
	.sl-faq__card {
		height: auto;
		border-radius: 12px;
		padding: 16px 52px 16px 18px;   /* 오른쪽은 + 버튼 자리 */
		box-sizing: border-box;
	}
	/* 제목·답변은 절대배치를 풀어 카드 높이를 스스로 만들게 한다.
	   static 으로 두면 절대배치된 사진·어두운 막 아래로 깔리므로 relative + z-index 로 띄운다 */
	.sl-faq__q {
		position: relative;
		z-index: 1;
		/* 절대배치 때 쓰던 좌표는 반드시 함께 지운다.
		   relative 에서는 같은 값이 '제자리에서 밀어내는 양' 으로 해석돼 글자가 엉뚱한 데로 간다 */
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		display: block;
		font-size: 16px;
	}
	/* 답변은 높이 0 에서 펼쳐진다 (span 이므로 display:block 을 줘야 max-height 가 먹는다).
	   max-height 는 애니메이션용 상한값이라 실제 높이보다 넉넉히 잡는다.
	   접힘 상태에서 위아래 padding 이 남으면 빈 띠가 보이므로 padding 도 같이 전환한다 */
	.sl-faq__a {
		position: relative;
		z-index: 1;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		display: block;
		max-height: 0;
		overflow: hidden;
		padding: 0 14px;
		border-radius: 10px;
		transform: none;
		opacity: 0;
		transition: max-height .35s cubic-bezier(.22,.61,.36,1),
		            padding .35s cubic-bezier(.22,.61,.36,1),
		            margin-top .35s cubic-bezier(.22,.61,.36,1),
		            opacity .25s ease;
	}
	.sl-faq__item.is-open .sl-faq__a {
		max-height: 140px;
		padding: 14px;
		margin-top: 12px;
		opacity: 1;
		transform: none;
	}
	/* + 는 제목 줄 오른쪽 끝 (열리면 기본 규칙의 rotate(45deg) 로 × 가 된다) */
	.sl-faq__toggle {
		top: 14px;
		right: 14px;
		bottom: auto;
		width: 26px;
		height: 26px;
		font-size: 16px;
	}

	.sl-sym__tab { flex-basis: 108px; }
	.sl-sym__label { font-size: 13px; }
	.sl-sym__desc br { display: none; }

	.sl-sym__carousel { aspect-ratio: 1 / 1; padding: 0 26px; }
	.sl-sym__item.is-center { left: 26px; right: 26px; }
	.sl-sym__arrow { width: 20px; height: 40px; }
	.sl-sym__arrow i { width: 11px; height: 11px; }

	/* 슬라이드 한 장이 화면을 거의 채우게 하고, 옆 카드는 살짝만 걸치게 둔다 */
	.sl-dev__card,
	.sl-dev__card.is-on { flex-basis: 88%; height: 380px; }
	.sl-dev__name { font-size: 19px; }
}