/* ============================================================
   증상가이드 — 시안(CraftStudio 기획 1223) 톤

   딥그린 + 세리프 표제. 사이트의 다른 지면(주황·올리브)과 톤이 다르므로
   클래스를 sg- 로 따로 두고 이 파일만 로드한다. 되돌리려면 템플릿에서
   이 시트와 sg- 마크업을 빼면 기존 seran-guide.css 로 복귀한다.

   지면 구성
     hero → 섹션내비 → 본문(편집기 자유영역) → 위험신호 체크리스트(연동)
     → 관련 검사(연동) → 진단 사례(연동) → 관련 칼럼(연동) → 예약 CTA
============================================================ */

.sg {
	--sg-ink: #1e2523;
	--sg-muted: #6f7773;
	--sg-line: #dde2df;
	--sg-soft-line: #eaeeeb;
	--sg-paper: #ffffff;
	--sg-soft: #f5f7f5;
	--sg-soft-green: #edf3ef;
	--sg-green: #315f52;
	--sg-green-deep: #183f35;
	--sg-orange: #e88342;
	--sg-orange-soft: #fff3e9;
	--sg-red: #b95646;
	--sg-radius: 24px;
	--sg-shadow: 0 18px 50px rgba(22, 45, 37, .07);
	--sg-article: 1080px;

	--sg-serif: "Noto Serif KR", "Nanum Myeongjo", Georgia, serif;
	--sg-sans: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;

	color: var(--sg-ink);
	font-family: var(--sg-sans);
	letter-spacing: -.025em;
	line-height: 1.7;
	word-break: keep-all;
}

.sg *, .sg *::before, .sg *::after { box-sizing: border-box; }
.sg img { display: block; max-width: 100%; }
.sg a { color: inherit; text-decoration: none; }

.sg__wrap { width: min(calc(100% - 48px), var(--sg-article)); margin-inline: auto; }

/* ---- 히어로 ---- */
.sg-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, #f7f8f5 0%, #f1f5f1 56%, #faf6ef 100%);
	border-bottom: 1px solid #edf0ed;
}
.sg-hero::before {
	content: "";
	position: absolute; right: -120px; top: -230px;
	width: 500px; height: 500px; border-radius: 50%;
	border: 1px solid rgba(49, 95, 82, .08);
	box-shadow: 0 0 0 90px rgba(49, 95, 82, .025), 0 0 0 180px rgba(49, 95, 82, .015);
}
.sg-hero__bg {
	position: absolute; inset: 0; z-index: 0;
	background-size: cover; background-position: center;
}
.sg-hero__bg::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(247, 248, 245, .95) 0%, rgba(250, 246, 239, .15) 78%, rgba(250, 246, 239, 0) 100%);
}
.sg-hero__in { position: relative; z-index: 1; padding: 84px 0 92px; }


.sg-eyebrow {
	margin: 0 0 14px; font-size: 11px; font-weight: 800;
	letter-spacing: .18em; color: var(--sg-green); text-transform: uppercase;
}
.sg-hero__title {
	margin: 0; max-width: 900px;
	font-family: var(--sg-serif); font-weight: 600;
	font-size: clamp(32px, 4.4vw, 66px); line-height: 1.22; letter-spacing: -.055em;
}
.sg-hero__desc { margin: 25px 0 0; max-width: 650px; color: #6a716e; font-size: 17px; }
.sg-hero__actions { display: flex; align-items: center; gap: 30px; margin-top: 38px; flex-wrap: wrap; }

.sg-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 13px 22px; border-radius: 999px; font-size: 14px; font-weight: 700;
	border: 0; cursor: pointer; font-family: inherit;
}
/* 예약 트리거 — 브랜드 프라이머리(--seran-cta). 지면 톤은 딥그린이지만
   예약은 사이트 전체에서 같은 색으로 읽혀야 하는 행동이라 브랜드색을 쓴다. */
.sg-btn--primary {
	background: var(--seran-cta, #d76e0f);
	color: #fff;
}
.sg-btn--primary:hover { background: #b85c0c; box-shadow: 0 6px 16px rgba(215, 110, 15, .28); }
.sg-btn--primary:focus-visible { outline: 3px solid var(--seran-cta, #d76e0f); outline-offset: 3px; }
.sg-link { font-size: 14px; font-weight: 700; border-bottom: 1px solid #9ca59f; padding: 4px 0; }
.sg-link span { margin-left: 9px; }

/* ---- 섹션 내비 ---- */
/* 헤더(.seran-hd) 아래에 붙는다. 56px 은 스크롤된 헤더 높이(--sl-bar-h-sm)다 —
   그 토큰은 .seran-hd 스코프에만 있어 여기서 var() 로 못 부른다. 헤더 높이를
   바꾸면 이 값도 같이 고칠 것. top:0 이면 z-index 900 인 헤더 뒤로 숨는다. */
.sg-nav { position: sticky; top: 56px; z-index: 40; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--sg-soft-line); backdrop-filter: blur(9px); }
.sg-nav__in { display: flex; align-items: center; justify-content: center; gap: 5px; height: 58px; overflow-x: auto; scrollbar-width: none; }
.sg-nav__in::-webkit-scrollbar { display: none; }
.sg-nav a { padding: 8px 14px; border-radius: 999px; font-size: 13px; color: #717a76; white-space: nowrap; transition: .2s; }
.sg-nav a:hover { background: var(--sg-soft-green); color: var(--sg-green-deep); }
/* 지금 보고 있는 절 — hover 와 구분되어야 하므로 채운 알약으로 둔다.
   단계 번호(.sx-step__no)와 같은 딥그린이라 지면 안에서 '현재'의 색이 하나다. */
.sg-nav a.is-current { background: var(--sg-green-deep); color: #fff; font-weight: 600; }
.sg-nav a.is-current:hover { background: var(--sg-green-deep); color: #fff; }

/* ---- 섹션 공통 ---- */
.sg-section { padding: 116px 0; border-bottom: 1px solid var(--sg-soft-line); scroll-margin-top: 120px; }
.sg-section:last-of-type { border-bottom: 0; }
.sg-head { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: end; margin-bottom: 54px; }
.sg-head.is-compact { align-items: start; }
.sg-head h2 {
	margin: 0; font-family: var(--sg-serif); font-weight: 600;
	font-size: clamp(28px, 3.8vw, 52px); line-height: 1.28; letter-spacing: -.055em;
}
.sg-head.is-compact h2 { font-size: clamp(26px, 3vw, 42px); }
.sg-head > p { margin: 0; color: #69716d; font-size: 15px; }

/* ---- 본문(편집기 자유영역) ---- */
.sg-body { font-size: 16px; color: #545d59; }
.sg-body > *:first-child { margin-top: 0; }
.sg-body h2, .sg-body h3 {
	font-family: var(--sg-serif); font-weight: 600; color: var(--sg-ink);
	letter-spacing: -.045em; line-height: 1.3;
}
.sg-body h2 { font-size: clamp(26px, 3.2vw, 40px); margin: 64px 0 20px; }
.sg-body h3 { font-size: clamp(20px, 2.2vw, 26px); margin: 44px 0 14px; }
.sg-body h4 { font-size: 18px; margin: 32px 0 12px; font-weight: 700; color: var(--sg-ink); }
.sg-body p { margin: 0 0 16px; line-height: 1.85; }
.sg-body ul, .sg-body ol { margin: 0 0 18px; padding-left: 20px; }
.sg-body li { margin: 0 0 8px; line-height: 1.8; }
.sg-body strong { color: var(--sg-ink); }
.sg-body a { color: var(--sg-green); text-decoration: underline; text-underline-offset: 3px; }
.sg-body img, .sg-body figure img { border-radius: var(--sg-radius); }
.sg-body figure { margin: 28px 0; }
.sg-body figcaption { margin-top: 13px; font-size: 12px; color: #7d8581; line-height: 1.55; }
.sg-body blockquote {
	margin: 28px 0; padding: 22px 26px; border-left: 3px solid var(--sg-green);
	background: var(--sg-soft-green); border-radius: 0 14px 14px 0; color: #4c554f;
}
.sg-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.sg-body th, .sg-body td { border: 1px solid var(--sg-line); padding: 12px 14px; text-align: left; }
.sg-body th { background: var(--sg-soft-green); font-weight: 700; }

/* ---- 위험 신호 체크리스트 ---- */
.sg-check { padding-bottom: 44px; border-bottom: 0; }
.sg-check__head {
	display: flex; align-items: center; gap: 26px;
	padding: 44px 48px; border-radius: var(--sg-radius) var(--sg-radius) 0 0;
	background: var(--sg-green-deep); color: #fff;
}
.sg-check__head .sg-eyebrow { color: #bfd4cc; }
.sg-check__head h2 { margin: 0; font-family: var(--sg-serif); font-weight: 600; font-size: clamp(24px, 3vw, 38px); line-height: 1.3; letter-spacing: -.05em; }
.sg-check__icon {
	width: 50px; height: 50px; min-width: 50px; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
	display: grid; place-items: center; font-family: Georgia, serif; font-size: 26px; color: #f4b27f;
}
.sg-check__panel { padding: 48px; border-radius: 0 0 var(--sg-radius) var(--sg-radius); background: var(--sg-soft-green); }
.sg-check__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; }
.sg-check__main { min-width: 0; }
.sg-check__main h3 { margin: 0 0 22px; font-size: 18px; }

.sg-check__item {
	position: relative; display: flex; gap: 14px; align-items: flex-start;
	padding: 17px 0; border-bottom: 1px solid rgba(49, 95, 82, .13); cursor: pointer;
}
.sg-check__item:last-child { border-bottom: 0; }
.sg-check__item input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.sg-check__mark {
	width: 22px; height: 22px; min-width: 22px; margin-top: 4px;
	border: 1.5px solid #9bb6ab; border-radius: 6px; background: #fff;
	display: grid; place-items: center; font-size: 11px; color: transparent;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.sg-check__item:hover .sg-check__mark { border-color: var(--sg-green); }
.sg-check__item input:checked ~ .sg-check__mark { background: var(--sg-green-deep); border-color: var(--sg-green-deep); color: #fff; }
.sg-check__item input:focus-visible ~ .sg-check__mark { outline: 2px solid var(--sg-green); outline-offset: 3px; }
.sg-check__item p { margin: 0; color: #5f6965; font-size: 14px; }
.sg-check__item input:checked ~ p { color: var(--sg-ink); }
.sg-check__item strong { color: var(--sg-ink); font-size: 14px; margin-right: 5px; }
.sg-check__item[data-level="high"] .sg-check__mark { border-color: var(--sg-red); }

.sg-check__result {
	height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
	padding: 26px 24px; background: #fff; border: 1px solid #dae4df; border-radius: 16px;
	transition: border-color .22s ease, box-shadow .22s ease;
}
.sg-check__result.is-active { border-color: var(--sg-green); box-shadow: 0 10px 30px rgba(24, 63, 53, .08); }
.sg-check__count {
	align-self: flex-start; min-width: 60px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 7px 9px; border-radius: 6px;
	background: var(--sg-orange-soft); color: #b3612f;
	font-size: 10px; font-weight: 900; letter-spacing: .12em;
	transition: background-color .22s ease, color .22s ease;
}
.sg-check__result.is-active .sg-check__count { background: var(--sg-green-deep); color: #fff; letter-spacing: .06em; }
.sg-check__result h4 { margin: 18px 0 10px; font-size: 21px; line-height: 1.4; letter-spacing: -.035em; font-weight: 700; }
.sg-check__result p { margin: 0; color: #5c6561; font-size: 14px; }
.sg-check__result .sg-btn { width: 100%; }

/* ---- 카드 그리드 (검사 · 칼럼) ---- */
.sg-soft { position: relative; }
.sg-soft::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: 100vw; background: var(--sg-soft); z-index: -1; }

.sg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sg-card {
	position: relative; display: flex; flex-direction: column;
	padding: 27px 24px 23px; min-height: 300px;
	background: #fff; border: 1px solid #e3e7e4; border-radius: 18px;
	transition: .25s;
}
.sg-card:hover { transform: translateY(-5px); box-shadow: var(--sg-shadow); border-color: #cfd9d4; }
.sg-card__thumb {
	width: 56px; height: 56px;
	border-radius: 16px;
	background: var(--sg-soft-green);
	display: grid; place-items: center;
	margin-bottom: 36px;
	overflow: hidden;
}
/* 아이콘은 배경까지 포함된 정사각 이미지라 타일을 그대로 채운다. */
.sg-body .sg-card__thumb img,
.sg-card__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
.sg-card__kicker { font-size: 10px; letter-spacing: .12em; color: #8b9490; }
.sg-card h3 { margin: 6px 0 10px; font-size: 21px; letter-spacing: -.03em; line-height: 1.35; }
.sg-card p { margin: 0; padding-right: 15px; font-size: 13px; color: #737b77; }
.sg-card__arrow {
	position: absolute; right: 22px; top: 22px; width: 32px; height: 32px;
	border: 1px solid #dce2de; border-radius: 50%;
	display: grid; place-items: center; font-size: 13px; color: #6a746f;
}
.sg-card:hover .sg-card__arrow { background: var(--sg-green-deep); color: #fff; border-color: var(--sg-green-deep); }

/* ---- 진단 사례 목록 ---- */
.sg-cases { border-top: 2px solid var(--sg-ink); }
.sg-case {
	display: grid; grid-template-columns: auto minmax(0, 1fr) 42px; gap: 24px;
	align-items: center; padding: 28px 0; border-bottom: 1px solid var(--sg-line); transition: .2s;
}
.sg-case:hover { padding-inline: 14px; background: #fafbf9; }
.sg-case__thumbs { display: flex; gap: 8px; }
.sg-case__thumb {
	width: 126px; height: 126px; flex: none; border-radius: 12px; overflow: hidden;
	border: 1px solid var(--sg-line);
	background: linear-gradient(135deg, #eef2ee 0%, #e2eae4 60%, #dfe7e1 100%);
}
.sg-case__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-case__tags { margin: 0 0 5px; font-size: 11px; color: var(--sg-green); }
.sg-case h3 { margin: 0; font-size: 17px; line-height: 1.45; }
.sg-case__arrow { width: 36px; height: 36px; border: 1px solid #d9dfdc; border-radius: 50%; display: grid; place-items: center; font-size: 13px; }
.sg-case:hover .sg-case__arrow { border-color: var(--sg-green); color: var(--sg-green); }

/* 관련 검사 — 사례와 같은 행 목록을 쓰되, 검사에만 있는 한 줄 설명이 붙는다.
   태그 자리에는 검사의 영문명이 온다(히어로 키워드와 같은 값). */
.sg-case--exam .sg-case__tags { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.sg-case__desc {
	display: block;
	/* 사례 행은 제목 한 줄뿐이라 폭이 상관없지만, 설명이 붙으면 864px(한글 60자)로
	   퍼져 눈이 줄을 놓친다. 45자 안팎으로 묶는다. */
	max-width: 620px;
	margin-top: 7px;
	font-size: 13.5px;
	line-height: 1.7;
	color: #737b77;
	word-break: keep-all;
}
/* 아이콘은 배경까지 포함된 정사각 이미지라 사례 썸네일의 그러데이션을 덮는다. */
.sg-case--exam .sg-case__thumb { background: #fff; }

.sg-empty { color: #8a918d; font-size: 14px; padding: 26px 0; }

/* ---- 예약 CTA ---- */
.sg-cta { background: #f0f3f0; padding: 88px 0; }
.sg-cta__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.sg-cta h2 { margin: 0 0 13px; font-family: var(--sg-serif); font-weight: 600; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.05em; }
.sg-cta p { margin: 0; color: #68716d; }

/* ---- 반응형 ---- */
@media (max-width: 1100px) {
	.sg-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
	.sg__wrap { width: min(calc(100% - 36px), var(--sg-article)); }
	.sg-hero__in { padding: 62px 0 68px; }
	.sg-section { padding: 82px 0; scroll-margin-top: 112px; }
	.sg-head, .sg-cta__in { grid-template-columns: 1fr; gap: 20px; }
	.sg-head { margin-bottom: 38px; }
	.sg-cards { grid-template-columns: 1fr; }
	.sg-card { min-height: 0; }
	.sg-card__thumb { margin-bottom: 24px; }
	.sg-check__head { padding: 34px 30px; }
	.sg-check__panel { padding: 30px; }
	.sg-check__layout { grid-template-columns: 1fr; gap: 24px; }
	.sg-nav__in { justify-content: flex-start; height: 52px; }
}
@media (max-width: 540px) {
	.sg__wrap { width: min(calc(100% - 28px), var(--sg-article)); }
	.sg-hero__in { padding: 48px 0 54px; }
	.sg-hero__actions { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 27px; }
	.sg-section { padding: 68px 0; }
	.sg-check__head { padding: 28px 22px; gap: 16px; align-items: flex-start; }
	.sg-check__icon { width: 40px; height: 40px; min-width: 40px; font-size: 20px; }
	.sg-check__panel { padding: 25px 20px; }
	.sg-case { grid-template-columns: auto minmax(0, 1fr) 34px; gap: 8px 12px; }
	.sg-case__thumb { width: 87px; height: 87px; }
	.sg-case h3 { font-size: 15px; }
	/* 좁은 화면에선 글 열이 217px 라 22단어가 6줄이 된다 — 3줄에서 끊는다. */
	.sg-case__desc {
		max-width: none;
		margin-top: 5px;
		font-size: 12.5px;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.sg-cta { padding: 68px 0; }
}
@media (prefers-reduced-motion: reduce) {
	.sg-card, .sg-case { transition: none; }
	.sg-card:hover { transform: none; }
}

/* ---- 예약 보드 ----
   예약 진입은 헤더 '예약하기'가 담당한다. 보드의 자체 launch 버튼은 지면에
   또 하나의 예약 버튼으로 보이므로 감춘다. 팝업 마크업은 그대로 남겨야 하므로
   보드를 통째로 지우지 않는다. display:none 이어도 JS 의 .click() 은 동작한다. */
.sg-board .seran-bk-launch,
.sg-board .cr-launch-btn { display: none !important; }

/* ============================================================
   본문 구조 (sg-doc-*) — 이 시트에는 없다.
   본문 디자인은 글마다 본문 맨 앞 <style> 이 직접 들고 있다(19-body-style).
   지면 하나를 다르게 꾸며도 다른 지면이 흔들리지 않고, 본문을 복사해 새 글을
   만들면 디자인까지 따라온다. 편집기는 그 <style> 을 head 로 뽑아 보존한다.
   여기에 sg-doc 규칙을 다시 넣으면 글이 가진 값과 싸우게 된다 — 넣지 말 것.
============================================================ */

/* ============================================================
   검사 지면 — 메타 본문(overview·indications·… )
   구 사이트 이관 데이터라 "• 줄바꿈" 평문이 섞여 있다. 읽기 좋게만 다듬는다.
============================================================ */
.sg-body--meta { font-size: 16px; line-height: 1.9; color: #545d59; }
.sg-body--meta > *:first-child { margin-top: 0; }
.sg-body--meta h3 {
	margin: 44px 0 14px;
	font-family: var(--sg-sans);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--sg-ink);
}
.sg-body--meta h4 {
	margin: 30px 0 10px;
	font-size: 17px;
	font-weight: 700;
	color: var(--sg-ink);
}
.sg-body--meta p { margin: 0 0 14px; }
.sg-body--meta ul,
.sg-body--meta ol { margin: 0 0 18px; padding-left: 20px; }
.sg-body--meta li { margin: 0 0 9px; }
.sg-body--meta strong { color: var(--sg-ink); }

/* ============================================================
   검사 과정 · 주의사항 — 진단 사례와 같은 행 목록
   한 지면에서 카드와 행 목록이 섞이면 결이 어긋난다. 사례 목록의 문법
   (위 2px 굵은 선 · 행마다 실선 · hover 들여쓰기)을 그대로 쓰되, 제목과
   설명을 두 열로 갈라 본문 줄길이를 한글 40자 안팎으로 묶는다.
============================================================ */
.sx-steps,
.sx-cautions {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--sg-ink);
}

.sx-step,
.sx-caution {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 24px;
	align-items: start;
	padding: 30px 0;
	border-bottom: 1px solid var(--sg-line);
	transition: .22s;
}
.sx-step:hover,
.sx-caution:hover { padding-inline: 14px; background: #fafbf9; }

/* 왼쪽 표식 — 절차는 번호, 주의는 느낌표.
   크기와 위치를 맞춰 두 절이 같은 리듬으로 읽히게 한다. */
.sx-step__no,
.sx-caution__mark {
	width: 44px;
	height: 44px;
	margin-top: -3px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: Georgia, serif;
	line-height: 1;
}
.sx-step__no {
	background: var(--sg-green-deep);
	color: #fff;
	font-size: 14px;
	letter-spacing: .02em;
}
.sx-caution__mark {
	background: var(--sg-orange);
	color: #fff;
	font-size: 18px;
}

/* 제목 | 설명 두 열 — 한 덩어리로 오는 마크업이라 안쪽에서 다시 나눈다. */
.sx-step__body,
.sx-caution__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	column-gap: 28px;
	align-items: start;
}
.sx-step__body h3,
.sx-caution__body h3 {
	margin: 0;
	font-family: var(--sg-sans);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -.035em;
	color: var(--sg-ink);
	word-break: keep-all;
}
.sx-step__body p,
.sx-caution__body p {
	margin: 0;
	padding: 2px 26px 0 0;
	font-size: 14.5px;
	line-height: 1.8;
	color: #66706b;
	word-break: keep-all;
}

/* 소요 시간 등 정보 — 경고가 아니므로 상자 없이 목록 뒤 각주처럼 둔다. */
.sx-facts {
	list-style: none;
	margin: 26px 0 0;
	padding-left: 68px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 28px;
}
.sx-facts li {
	position: relative;
	padding-left: 15px;
	font-size: 13.5px;
	line-height: 1.7;
	color: #6b736f;
	word-break: keep-all;
}
.sx-facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .66em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sg-green);
}

@media (max-width: 820px) {
	.sx-step,
	.sx-caution { grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; padding: 26px 0; }
	.sx-step__no,
	.sx-caution__mark { width: 36px; height: 36px; margin-top: -1px; font-size: 12px; }
	.sx-caution__mark { font-size: 16px; }
	.sx-step__body,
	.sx-caution__body { grid-template-columns: 1fr; row-gap: 8px; }
	.sx-step__body h3,
	.sx-caution__body h3 { font-size: 17px; }
	/* 좁은 화면에선 지면 여백이 이미 있어 본문 오른쪽 여백을 뺀다. */
	.sx-step__body p,
	.sx-caution__body p { padding-right: 0; }
	.sx-facts { grid-template-columns: 1fr; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.sx-step,
	.sx-caution { transition: none; }
}