/*
 * seran-widgets.css — 홈 동적 위젯 4종
 *   1) .sbm          [symptom_body_map]   증상 바디맵
 *   2) .exam-slider  [exam_slider]        검사 슬라이더
 *   3) .cbs          [case_banner_slider] 사례 배너 무한 슬라이더
 *   4) .stx          [scrolling_text]     배경 마퀴
 *
 * 소유: home-widgets (CONTRACT-FRONT §3). 색은 전부 seran-tokens.css 토큰.
 * 인스턴스별 동적 값(--cbs-*, --stx-*, 마커 좌표)만 PHP 가 wp_add_inline_style 로 덧댄다.
 *
 * 애니메이션 재생 규칙 (JS 유무와 무관하게 안전):
 *   - JS 없음        : CSS 애니메이션 그대로 재생 (no-JS 폴백)
 *   - JS 있음        : 초기화 시 .is-observed 부여 → 일시정지,
 *                      IntersectionObserver 가 화면에 들어오면 .is-visible 로 재생
 *   - reduce-motion  : 전면 정지
 */

/* ============================================================
   0. 공통 — 섹션 셸 / 공용 버튼
============================================================ */

.sbm,
.exam-slider {
	box-sizing: border-box;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 48px 32px;
	font-family: var(--seran-font);
	color: var(--seran-ink);
}

.sbm *,
.exam-slider *,
.cbs *,
.stx * {
	box-sizing: border-box;
}

/* 섹션 헤더 (좌측 세로 바 + 제목 + 영문 부제 + 구분선) */
.sbm-title,
.exam-title {
	position: relative;
	margin: 0 0 10px;
	padding-left: 16px;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.36px;
	color: var(--seran-ink);
}

.sbm-title::before,
.exam-title::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 4px;
	height: 30px;
	border-radius: 2px;
	transform: translateY(-50%);
}

.sbm-title::before {
	background: var(--seran-orange);
}

.exam-title::before {
	background: var(--seran-olive);
}

.sbm-subtitle,
.exam-subtitle {
	margin: 0;
	padding-left: 16px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.31px;
	color: var(--seran-ink-3);
}

.sbm-line,
.exam-line {
	height: 1px;
	margin: 30px 0 30px 16px;
	border: 0;
	background: var(--seran-line);
}

.sbm-buttons-container,
.exam-buttons-container {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 12px;
	padding-left: 16px;
}

/* 알약 버튼 (바디맵 = 주황, 검사 = 올리브) */
.sbm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 22px;
	border: 1px solid transparent;
	border-radius: 9999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease,
		box-shadow 150ms ease, transform 120ms ease;
}

.sbm .sbm-button {
	background: linear-gradient(135deg, var(--seran-orange), var(--seran-orange-grad));
	color: var(--brand-secondary);
	border-color: color-mix(in srgb, var(--seran-ink) 4%, transparent);
	box-shadow: 0 3px 7px color-mix(in srgb, var(--seran-orange) 42%, transparent);
}

/* .is-active 는 JS 가 짝 마커에 hover/focus 했을 때 버튼에 되돌려 주는 상태다
   (seran-widgets.js — 버튼[data-sbm-i] ↔ 마커[data-sbm-i]). */
.sbm .sbm-button:hover,
.sbm .sbm-button:focus-visible,
.sbm .sbm-button.is-active {
	transform: translateY(-1px);
	background: linear-gradient(135deg, var(--seran-cta), var(--seran-orange-grad));
	box-shadow: 0 5px 10px color-mix(in srgb, var(--seran-orange) 50%, transparent);
}

.exam-slider .sbm-button {
	background: linear-gradient(135deg, var(--seran-olive), var(--seran-olive-dark));
	color: var(--brand-secondary);
	border-color: color-mix(in srgb, var(--seran-ink) 4%, transparent);
	box-shadow: 0 3px 7px color-mix(in srgb, var(--seran-olive-dark) 35%, transparent);
}

.exam-slider .sbm-button:hover,
.exam-slider .sbm-button:focus-visible {
	transform: translateY(-1px);
	background: linear-gradient(135deg, var(--seran-leaf), var(--seran-olive-dark));
	box-shadow: 0 5px 10px color-mix(in srgb, var(--seran-olive-dark) 45%, transparent);
}

/* ============================================================
   1. 바디맵  [symptom_body_map]
============================================================ */

.sbm-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	min-height: 700px;
}

.sbm-buttons-section {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sbm-body-section {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/*
 * 본문 단 안에서도 홈과 같은 폭으로 펼친다.
 *
 * 이 위젯은 좌우 2단(버튼 / 인체 그림)으로 1400px 를 기준 삼아 짜였다.
 * /어디아프세요/ 는 위젯 하나가 지면 전체인데 .seran-prose(1000px) 안에 들어가
 * 실제로는 960px 만 받았고, 그림이 424px 까지 줄어 홈과 다른 물건처럼 보였다.
 * 폭만 되찾아 주면 나머지 규칙이 알아서 맞춘다.
 */
.seran-prose .sbm {
	width: min(1400px, 100vw - 40px);
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.sbm-body-container {
	position: relative;
	flex-shrink: 0;
	width: 600px;
	max-width: 100%;
	/*
	 * 높이를 600:800 비율로 묶는다.
	 *
	 * 점의 left/top(%) 은 이 상자를 기준으로 찍혀 있다. 예전에는 height 가
	 * 800px 로 고정돼 있어서, 폭이 600px 보다 좁은 자리(예: /어디아프세요/ 는
	 * 본문 단 안이라 424px)에 놓이면 그림만 작아지고 좌표계는 그대로 800px 를
	 * 유지했다. 그 결과 아래쪽 점들이 인체 그림 밖으로 흘러내렸다(실측).
	 *
	 * 비율로 묶으면 폭이 줄 때 높이도 같이 줄어 어느 폭에서나 점이 같은
	 * 자리에 앉는다. 600px 로 놓이는 홈에서는 800px 그대로라 보이는 것이 바뀌지 않는다.
	 */
	aspect-ratio: 600 / 800;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--seran-radius-lg);
	background: transparent;
}

.sbm-body-image {
	/*
	 * 그림 상자를 컨테이너와 정확히 같게 못박는다.
	 *
	 * 점의 left/top(%) 은 컨테이너(3:4) 기준이고, 그림은 정사각이라
	 * object-fit:contain 으로 세로 가운데에 놓이면서 위아래 여백이 생긴다.
	 * 이 여백까지 포함해야 좌표가 맞는다.
	 *
	 * height:100% 로 두면 컨테이너 높이가 aspect-ratio 로 계산된 경우
	 * 백분율 높이가 해석되지 않아 그림이 제 높이(정사각)로 줄고, 그러면
	 * 그림이 상자 위쪽에 붙어 점만 아래로 밀린다(실측: 14개 전부 13.47% 하향).
	 * absolute + inset:0 은 컨테이너 높이가 어떻게 정해지든 같은 상자를 보장한다.
	 */
	display: block;
	width: 100%;
	height: auto;
	/*
	 * 컨테이너와 같은 비율을 그림 상자에도 못박는다.
	 * height:100% 는 컨테이너 높이가 aspect-ratio 로 계산된 경우 해석되지 않아
	 * auto 로 떨어지고, 그러면 정사각 원본이 제 높이(=폭)로 줄면서 상자 위쪽에
	 * 붙어 점만 아래로 밀린다(실측: 14개 전부 13.47% 하향).
	 * 비율을 직접 주면 폭이 얼마든 홈과 같은 상자가 나온다.
	 */
	aspect-ratio: 600 / 800;
	object-fit: contain;
}

/*
 * 본문 스킨이 그림 상자를 밀지 않게 되돌린다.
 *
 * seran-tokens.css 의 `.seran-prose img { margin:1.2em auto; height:auto }` 가
 * 본문 단 안의 모든 이미지에 걸린다. 바디맵 그림에도 붙어 상자가 19.2px 아래로
 * 밀렸고(점만 그만큼 위로 어긋난다), height 까지 덮어써 비율 계산을 방해했다.
 * 특이도가 (0,2,0) 이라 같은 값으로 맞추고, 이 시트가 뒤에 실려 이긴다.
 */
.sbm-body-container .sbm-body-image {
	margin: 0;
	max-width: none;
}

.sbm-body-markers {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* left/top(%) 은 인스턴스별 인라인 규칙이 지정한다. */
.sbm-body-marker {
	position: absolute;
	z-index: 10;
	width: 40px;
	height: 40px;
	transform: translate(-50%, -50%);
	pointer-events: auto;
	cursor: pointer;
}

.sbm-marker-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border: 2px solid color-mix(in srgb, var(--seran-orange) 50%, transparent);
	border-radius: 50%;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.sbm-marker-dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border: 2px solid var(--brand-secondary);
	border-radius: 50%;
	background: linear-gradient(135deg, var(--seran-orange), var(--seran-orange-grad));
	box-shadow: 0 4px 8px color-mix(in srgb, var(--seran-ink) 16%, transparent);
	transform: translate(-50%, -50%);
	transition: width 0.3s ease, height 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.sbm-body-marker:hover .sbm-marker-ring,
.sbm-body-marker.is-active .sbm-marker-ring {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.2);
}

.sbm-body-marker:hover .sbm-marker-dot,
.sbm-body-marker.is-active .sbm-marker-dot {
	width: 20px;
	height: 20px;
	background: linear-gradient(135deg, var(--seran-cta), var(--seran-orange));
	box-shadow: 0 0 20px color-mix(in srgb, var(--seran-orange) 80%, transparent);
}

/* 순차 글로우 (JS 가 .is-glow 를 1.5초씩 옮겨 붙인다 — 구 012 승계) */
@keyframes sbm-glow-pulse {
	0%,
	100% {
		box-shadow: 0 4px 8px color-mix(in srgb, var(--seran-ink) 16%, transparent);
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		box-shadow: 0 0 30px color-mix(in srgb, var(--seran-orange) 80%, transparent),
			0 0 50px color-mix(in srgb, var(--seran-orange) 50%, transparent);
		transform: translate(-50%, -50%) scale(1.3);
	}
}

@keyframes sbm-ring-expand {
	0%,
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.4);
	}
}

@keyframes sbm-button-glow {
	0%,
	100% {
		box-shadow: 0 3px 7px color-mix(in srgb, var(--seran-orange) 42%, transparent);
		transform: translateY(0) scale(1);
	}
	50% {
		box-shadow: 0 0 25px color-mix(in srgb, var(--seran-orange) 80%, transparent),
			0 0 40px color-mix(in srgb, var(--seran-orange) 60%, transparent);
		transform: translateY(-3px) scale(1.05);
	}
}

.sbm .sbm-button.is-glow {
	z-index: 100;
	animation: sbm-button-glow 1.5s ease-in-out;
}

.sbm-body-marker.is-glow .sbm-marker-dot {
	animation: sbm-glow-pulse 1.5s ease-in-out;
}

.sbm-body-marker.is-glow .sbm-marker-ring {
	opacity: 1;
	animation: sbm-ring-expand 1.5s ease-in-out;
}

@media (max-width: 992px) {
	.sbm-grid {
		grid-template-columns: 1fr;
	}

	.sbm-body-section {
		order: -1;
	}

	.sbm-buttons-section {
		order: 1;
	}

	.sbm-title,
	.exam-title {
		font-size: 24px;
	}

	.sbm-subtitle,
	.exam-subtitle {
		font-size: 18px;
	}

	.sbm-body-container {
		width: 100%;
		max-width: 450px;
		height: auto;
		aspect-ratio: 3 / 4;
	}

	.sbm {
		padding: 32px 16px;
	}
}

@media (max-width: 480px) {
	.sbm-grid {
		gap: 0;
	}

	.sbm-line {
		margin: 20px 0;
	}

	.sbm-buttons-container {
		gap: 10px;
		padding-left: 0;
	}

	.sbm-button {
		padding: 7px 15px;
	}

	.sbm-body-container {
		max-width: 100%;
	}

	.sbm-body-marker {
		width: 30px;
		height: 30px;
	}

	.sbm-marker-dot {
		width: 10px;
		height: 10px;
	}
}

/* ============================================================
   2. 검사 슬라이더  [exam_slider]
============================================================ */

.exam-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 48px;
	min-height: 600px;
}

.exam-slider-section {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.exam-slider-wrapper {
	position: relative;
	width: 600px;
	max-width: 100%;
	height: 600px;
	overflow: hidden;
	border-radius: var(--seran-radius);
	/* 가로 스와이프는 JS 가 읽고 세로 스크롤은 브라우저에 넘긴다. */
	touch-action: pan-y;
}

.exam-slides {
	position: relative;
	width: 100%;
	height: 100%;
}

.exam-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.exam-slide.is-active {
	z-index: 1;
	opacity: 1;
}

.exam-slide img,
.exam-slide-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.exam-slide-placeholder {
	background: linear-gradient(135deg, var(--seran-bg-soft), var(--seran-bg-mega));
}

.exam-slider-controls {
	position: absolute;
	bottom: 20px;
	left: 50%;
	z-index: 10;
	display: flex;
	gap: 12px;
	transform: translateX(-50%);
}

/* PHP 는 <button type="button"> 로 낸다 — iOS Safari 기본 렌더 제거 필수. */
.exam-slider-dot {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	padding: 0;
	border: 2px solid color-mix(in srgb, var(--seran-leaf) 60%, transparent);
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--brand-secondary) 40%, transparent);
	cursor: pointer;
	transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease,
		box-shadow 0.3s ease;
}

.exam-slider-dot.is-active {
	border-color: var(--seran-olive);
	background: linear-gradient(135deg, var(--seran-olive), var(--seran-olive-dark));
	box-shadow: 0 0 10px color-mix(in srgb, var(--seran-olive) 60%, transparent);
	transform: scale(1.3);
}

.exam-slider-dot:focus-visible {
	outline: 2px solid var(--seran-olive-dark);
	outline-offset: 3px;
}

.exam-buttons-section {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@keyframes exam-button-glow {
	0%,
	100% {
		box-shadow: 0 3px 7px color-mix(in srgb, var(--seran-olive-dark) 35%, transparent);
		transform: translateY(0) scale(1);
	}
	50% {
		box-shadow: 0 0 25px color-mix(in srgb, var(--seran-olive) 60%, transparent),
			0 0 40px color-mix(in srgb, var(--seran-olive) 40%, transparent);
		transform: translateY(-3px) scale(1.05);
	}
}

.exam-slider .exam-button.is-glow {
	z-index: 100;
	animation: exam-button-glow 1s ease-in-out;
}

/* 현재 슬라이드와 짝인 버튼 (JS). hover 의 background/box-shadow 와 겹치지 않도록
   outline 만 쓴다 — 자동재생으로 슬라이드가 바뀌어도 어느 검사인지 보인다. */
.exam-slider .exam-button.is-active {
	outline: 2px solid color-mix(in srgb, var(--seran-olive-dark) 70%, transparent);
	outline-offset: 2px;
}

@media (max-width: 992px) {
	.exam-grid {
		grid-template-columns: 1fr;
	}

	.exam-slider-section {
		order: -1;
	}

	.exam-buttons-section {
		order: 1;
	}

	.exam-slider-wrapper {
		width: 100%;
		max-width: 600px;
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

@media (max-width: 768px) {
	.exam-slider {
		padding: 32px 16px;
	}

	.exam-slider-wrapper {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.exam-line {
		margin: 20px 0;
	}

	.exam-buttons-container {
		gap: 10px;
		padding-left: 0;
	}
}

/* ============================================================
   3. 사례 배너 무한 슬라이더  [case_banner_slider]
   --cbs-size / --cbs-gap / --cbs-speed 는 인스턴스별 인라인 규칙이 지정.
============================================================ */

.cbs {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: none;
	margin: 0 -50vw;
	padding: 20px 0;
	overflow: hidden;
	background: transparent;
}

.cbs-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: cbs-slide var(--cbs-speed, 30s) linear infinite;
}

@keyframes cbs-slide {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.cbs.is-observed .cbs-track {
	animation-play-state: paused;
}

.cbs.is-visible .cbs-track {
	animation-play-state: running;
}

.cbs .cbs-track:hover,
.cbs.is-held .cbs-track {
	animation-play-state: paused;
}

.cbs-item {
	position: relative;
	display: block;
	flex-shrink: 0;
	width: var(--cbs-size, 100px);
	height: var(--cbs-size, 100px);
	margin-right: var(--cbs-gap, 20px);
	transition: transform 0.3s ease, filter 0.3s ease;
}

.cbs-item:hover,
.cbs-item:focus-visible {
	z-index: 10;
	transform: scale(1.1);
	filter: brightness(1.05);
}

.cbs-item img,
.cbs-item-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--seran-radius);
}

.cbs-item img {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--seran-ink) 12%, transparent);
}

.cbs-item-placeholder {
	background: linear-gradient(135deg, var(--seran-bg-soft), var(--seran-bg-mega));
}

/* ============================================================
   4. 배경 마퀴  [scrolling_text]
   --stx-size / --stx-y / --stx-speed / --stx-opacity / --stx-color 는 인스턴스별.
============================================================ */

.stx {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: none;
	height: calc(var(--stx-size, 48px) * 1.5);
	margin: 0;
	padding: 0;
	overflow: hidden;
	transform: translateX(-50%) translateY(var(--stx-y, 0px));
}

.stx-track {
	position: absolute;
	top: 50%;
	left: 0;
	display: flex;
	white-space: nowrap;
	animation: stx-scroll var(--stx-speed, 30s) linear infinite;
}

@keyframes stx-scroll {
	0% {
		transform: translateX(0) translateY(-50%);
	}
	100% {
		transform: translateX(-50%) translateY(-50%);
	}
}

.stx.is-observed .stx-track {
	animation-play-state: paused;
}

.stx.is-visible .stx-track {
	animation-play-state: running;
}

.stx-item {
	padding-right: 30px;
	font-family: var(--seran-font);
	font-size: var(--stx-size, 48px);
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
	color: var(--stx-color, var(--seran-ink));
	opacity: var(--stx-opacity, 0.1);
}

.stx-item-sub {
	color: var(--seran-bg-mega);
	-webkit-text-stroke: 1px var(--seran-ink);
}

@media (max-width: 768px) {
	.stx {
		height: calc(var(--stx-size, 48px) * 1.2);
	}

	.stx-item {
		padding-right: 60px;
		font-size: calc(var(--stx-size, 48px) * 0.7);
	}
}

@media (max-width: 480px) {
	.stx {
		height: var(--stx-size, 48px);
	}

	.stx-item {
		padding-right: 40px;
		font-size: calc(var(--stx-size, 48px) * 0.5);
	}
}

/* ============================================================
   5. 모션 최소화 — 전 위젯 정지
============================================================ */

@media (prefers-reduced-motion: reduce) {
	.cbs-track,
	.stx-track,
	.sbm .sbm-button.is-glow,
	.sbm-body-marker.is-glow .sbm-marker-dot,
	.sbm-body-marker.is-glow .sbm-marker-ring,
	.exam-slider .exam-button.is-glow {
		animation: none !important;
	}

	.exam-slide,
	.sbm-marker-dot,
	.sbm-marker-ring,
	.cbs-item,
	.sbm-button {
		transition: none !important;
	}
}