/**
 * Slider Frontend Stylesheet (assets/css/slider.css)
 * 반응형 높이 변수, clamp 기반 가변 폰트, 다크 딤 오버레이, GSAP 초기 상태 처리
 */

/* ── 슬라이더 전체 용기 ── */
.archf-slider-container {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: var(--slider-height, 720px);
	overflow: hidden;
	box-sizing: border-box;
	container-type: inline-size;
	contain: layout style;
}

/* 너비 모드: 100% 화면 전체 — 실제 폭은 main.css .archf-slider-container--viewport-full */
.archf-slider-container--width-full {
	margin-left: 0;
	margin-right: 0;
}

/* 너비 모드: 부모(container) 안 100% */
.archf-slider-container--width-parent {
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* 너비 모드: 고정 px */
.archf-slider-container--width-custom {
	width: min(var(--slider-width, 100%), 100%);
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* 홈 100% — main.css #page > .archf-home-slider-wrap--full 가 전체 너비 처리 */
.archf-home-slider-wrap--full .archf-slider-container,
.archf-home-slider-wrap--full .archf-slider-container--viewport-full,
.archf-home-slider-wrap--full .archf-slider-container--home-bleed {
	max-width: none;
}

.archf-slider-container--home-bleed {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.archf-slider {
	width: 100%;
	max-width: 100%;
	height: 100%;
	overflow: hidden !important;
}

.archf-slider .swiper-wrapper {
	box-sizing: border-box;
}

/* 슬라이드 내부 .container — 전역 container 패딩만 적용 (max-width 돌출 방지) */
.archf-slide-content-container.container {
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* ── 개별 슬라이드 아이템 ── */
.archf-slide-item {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 100%;
	display: flex;
	align-items: var(--slide-valign, center);   /* 슬라이더 옵션·슬라이드별 세로 위치 */
	padding-top: var(--slide-pad-y, 0px);       /* 위/아래 정렬 시 가장자리 여백 */
	padding-bottom: var(--slide-pad-y, 0px);
	box-sizing: border-box;
	overflow: hidden;
}

/* ── 반응형 배경 이미지 ── */
.archf-slide-picture {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
}

.archf-slide-bg-img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: center;
}

/* ── 가독성을 위한 오버레이 (슬라이더 옵션 → --slider-overlay-bg) ── */
.archf-slide-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--slider-overlay-bg, linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%));
	z-index: 2;
}

/* ── 텍스트 및 콘텐츠 레이아웃 ── */
.archf-slide-content-container {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 100%;
	pointer-events: none;
}

.archf-slide-content-inner {
	max-width: 800px;
	pointer-events: auto;
}

/* 정렬 방식 분기 */
.archf-slide-item.align-left {
	justify-content: flex-start;
	text-align: left;
}

.archf-slide-item.align-center {
	justify-content: center;
	text-align: center;
}

.archf-slide-item.align-center .archf-slide-content-inner {
	margin: 0 auto;
}

.archf-slide-item.align-right {
	justify-content: flex-end;
	text-align: right;
}

.archf-slide-item.align-right .archf-slide-content-inner {
	margin-left: auto;
}

/* ── 전역 콘텐츠 정렬 (슬라이더 옵션) ── */
.archf-slider-container--content-align-left .archf-slide-item {
	justify-content: flex-start;
	text-align: left;
}

.archf-slider-container--content-align-center .archf-slide-item {
	justify-content: center;
	text-align: center;
}

.archf-slider-container--content-align-center .archf-slide-content-inner {
	margin-left: auto;
	margin-right: auto;
}

.archf-slider-container--content-align-right .archf-slide-item {
	justify-content: flex-end;
	text-align: right;
}

.archf-slider-container--content-align-right .archf-slide-content-inner {
	margin-left: auto;
}

.archf-slider-container--content-align-left .archf-slide-content-container {
	padding-left: var(--slider-content-offset, 24px);
	padding-right: 24px;
}

.archf-slider-container--content-align-right .archf-slide-content-container {
	padding-left: 24px;
	padding-right: var(--slider-content-offset, 24px);
}

/* ── clamp() 기반 반응형 타이포그래피 — vw 대신 % 기반 보조 */
.archf-slider-container .archf-slider__title {
	font-size: clamp(2rem, 4cqi, 4.2rem);
	font-weight: var(--slider-h1-weight, 800);
	color: var(--slider-h1-color, #fff);
	line-height: 1.25;
	margin: 0 0 15px 0;
	letter-spacing: -0.02em;
}

.archf-slider-container .archf-slider__subtitle {
	font-size: clamp(1.1rem, 2.5cqi, 1.8rem);
	font-weight: var(--slider-h2-weight, 600);
	color: var(--slider-h2-color, var(--color-accent, #2e86ab));
	margin: 0 0 20px 0;
	letter-spacing: 0.02em;
}

.archf-slider__sub {
	font-size: clamp(0.95rem, 1.8cqi, 1.15rem);
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.7;
	margin: 0 0 30px 0;
	font-weight: 400;
}

@supports not (font-size: 1cqi) {
	.archf-slider-container .archf-slider__title {
		font-size: clamp(2rem, 4vw, 4.2rem);
	}

	.archf-slider-container .archf-slider__subtitle {
		font-size: clamp(1.1rem, 2.5vw, 1.8rem);
	}

	.archf-slider__sub {
		font-size: clamp(0.95rem, 1.8vw, 1.15rem);
	}
}

.archf-slider__btn {
	padding: 12px 36px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.05em;
	border-radius: 4px;
	text-transform: uppercase;
	transition: all 0.3s ease;
	display: inline-block;
	text-decoration: none;
}

/* ── GSAP 제어를 위한 모션 초기 상태 (Fading) ── */
.archf-slider__title,
.archf-slider__subtitle,
.archf-slider__sub,
.archf-slider__btn {
	opacity: 0;
	transform: translateY(40px);
}

/* ── Swiper UI 오버라이드 ── */
.archf-slider .swiper-pagination {
	max-width: 100%;
	box-sizing: border-box;
}

.archf-slider .swiper-pagination-bullet {
	background: #fff;
	opacity: 0.4;
	width: 10px;
	height: 10px;
	transition: all 0.3s ease;
}

.archf-slider .swiper-pagination-bullet-active {
	opacity: 1;
	background: #fff;
	width: 30px;
	border-radius: 5px;
}

.archf-slider .swiper-button-prev,
.archf-slider .swiper-button-next {
	color: #fff;
	width: 50px;
	height: 50px;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	transition: all 0.3s ease;
}

.archf-slider .swiper-button-prev::after,
.archf-slider .swiper-button-next::after {
	font-size: 18px;
}

.archf-slider .swiper-button-prev:hover,
.archf-slider .swiper-button-next:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3);
}

/* ── 반응형 미디어쿼리 (M5-6) ── */
@media (max-width: 767px) {
	.archf-slider-container {
		height: var(--slider-height-mobile, 480px);
	}

	.archf-slide-item {
		padding: 0 20px;
	}

	.archf-slide-overlay {
		background: var(--slider-overlay-bg-mobile, rgba(0, 0, 0, 0.7));
	}

	.archf-slider .swiper-button-prev,
	.archf-slider .swiper-button-next {
		display: none;
	}
}

/* ============================================================
 * 슬라이드 텍스트 — 시안 구조 (샤인플란트치과)
 * 상단 라벨 → 강조(위) → 메인 타이틀 → 강조(아래) → 설명 박스 → 버튼
 * 좌표 기준 : 시안 1920 x 990
 * ============================================================ */

.archf-slider-container{
	--slide-accent: #e4732a;          /* 강조색 (로고 오렌지) — 슬라이드별 색상으로 덮어쓸 수 있음 */
	--slide-pad-x: 140px;             /* 시안 좌우 여백 */
	--slide-desc-w: 657px;            /* 시안 설명 박스 폭 */
}

.archf-slider-container .archf-slide-content-container.container{
	padding-left: var(--slide-pad-x);
	padding-right: var(--slide-pad-x);
}

/* 텍스트 영역 최대 폭 (슬라이더 옵션 「텍스트 영역 최대 폭」) — 화면 중앙 정렬, 페이지 콘텐츠 폭과 맞춤 */
.archf-slider-container.archf-slider-container--content-boxed .archf-slide-content-container.container{
	max-width: var(--slide-content-max, 1380px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* 좌우 여백 직접 지정 (슬라이더 옵션 「좌우 여백」) */
.archf-slider-container.archf-slider-container--pad-custom .archf-slide-content-container.container{
	padding-left: var(--slide-pad-x-custom, 24px);
	padding-right: var(--slide-pad-x-custom, 24px);
}

/* 가로/세로 이동 — PC 에서만 적용 (모바일은 화면 폭이 좁아 위치 이동을 무시) */
@media (min-width: 1024px){
	.archf-slide-content-inner{
		transform: translate(var(--slide-shift-x, 0px), var(--slide-shift-y, 0px));
	}
}

.archf-slide-content-inner{
	max-width: var(--slide-desc-w);
}

/* ── 상단 라벨 ── */
.archf-slide__eyebrow{
	margin: 0 0 55px;
	font-size: calc(var(--fs, 25px) * var(--slide-fs-mult, 1));
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.05em;
	color: #ffffff;
}

.archf-slide__eyebrow-sep{
	margin: 0 10px;
	color: var(--slide-accent);
	font-weight: 400;
}

/* ── 타이틀 ── */
/* 글자 크기 = 관리자 지정값(--fs) × 화면별 배율(--slide-fs-mult) */
.archf-slide-content-container .archf-slide__title{
	margin: 0;
	font-size: calc(var(--fs, 40px) * var(--slide-fs-mult, 1));
	font-weight: var(--slider-h1-weight, 700);
	line-height: 1.3;                /* 40px 기준 52px — 크기를 바꿔도 비율 유지 */
	letter-spacing: 0.01em;
	color: var(--slider-h1-color, #ffffff);
}

.archf-slide__title-main,
.archf-slide__title-accent{
	display: block;
	font-size: calc(var(--fs, 40px) * var(--slide-fs-mult, 1));
}

.archf-slide__title-accent{ color: var(--slide-accent); }

/* ── 보조 문구 (선택) ── */
.archf-slide__subtitle{
	margin: 14px 0 0;
	font-size: calc(var(--fs, 20px) * var(--slide-fs-mult, 1));
	font-weight: var(--slider-h2-weight, 500);
	line-height: 1.5;
	color: var(--slider-h2-color, rgba(255, 255, 255, .9));
}

/* ── 설명 박스 ── */
.archf-slide__desc{
	margin: 51px 0 0;
	padding: 36px;
	width: var(--slide-desc-w);
	max-width: 100%;
	font-size: calc(var(--fs, 17px) * var(--slide-fs-mult, 1));
	font-weight: 400;
	line-height: 1.76;               /* 17px 기준 30px — 크기를 바꿔도 비율 유지 */
	letter-spacing: 0.01em;
	color: #ffffff;
	/* 배경색은 슬라이드별 인라인 style 로 주입 */
}

/* 배경 없이 텍스트만 (시안형) — 색상은 슬라이드별 지정, 기본 흰색 */
.archf-slide__desc--plain{
	margin-top: 36px;
	padding: 0;
	background: none;
}

/* 텍스트 안 <em> 강조 — 슬라이드별 「강조 글자색」, 기울임 없이 색상만 */
.archf-slide-item em,
.archf-slide-item i:not([class]){
	font-style: normal;
	color: var(--slide-em-color, var(--slide-accent));
}

.archf-slide-item em b,
.archf-slide-item em strong{
	color: inherit;
}

/* 텍스트 안 <b>/<strong> 강조 */
.archf-slide__title b,
.archf-slide__title strong,
.archf-slide__subtitle b,
.archf-slide__subtitle strong,
.archf-slide__desc b,
.archf-slide__desc strong,
.archf-slide__eyebrow b,
.archf-slide__eyebrow strong{
	font-weight: 700;
	color: inherit;
}

/* ── 버튼 ── */
.archf-slide__btn-wrap{ margin-top: 28px; }

.archf-slide__btn{
	display: inline-block;
	padding: 14px 38px;
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 4px;
	font-size: calc(var(--fs, 16px) * var(--slide-fs-mult, 1));
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #ffffff;
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease;
}

.archf-slide__btn:hover,
.archf-slide__btn:focus-visible{
	background-color: #ffffff;
	color: #1e3a5f;
}

/* ── 정렬 ──
   오른쪽 배치는 '블록만' 오른쪽으로 보내고 글자는 왼쪽 정렬을 유지한다.
   (시안에서 우측 슬라이드도 각 줄의 시작점이 같다) */
.archf-slider-container .archf-slide-item.align-right,
.archf-slider-container--content-align-right .archf-slide-item{
	justify-content: flex-end;
	text-align: left;
}

.archf-slider-container .archf-slide-item.align-right .archf-slide-content-inner,
.archf-slider-container--content-align-right .archf-slide-content-inner{
	margin-left: auto;
	margin-right: 0;
}

.archf-slider-container .archf-slide-item.align-left,
.archf-slider-container--content-align-left .archf-slide-item{
	justify-content: flex-start;
	text-align: left;
}

.archf-slider-container .archf-slide-item.align-center,
.archf-slider-container--content-align-center .archf-slide-item{
	justify-content: center;
	text-align: center;
}

.archf-slide-item.align-center .archf-slide-content-inner,
.archf-slider-container--content-align-center .archf-slide-content-inner{
	margin-left: auto;
	margin-right: auto;
}

/* ── GSAP 초기 상태 ── */
.archf-slide__eyebrow,
.archf-slide__title,
.archf-slide__subtitle,
.archf-slide__desc,
.archf-slide__btn-wrap{
	opacity: 0;
	transform: translateY(40px);
}

/* ── 반응형 ── */
@media (max-width: 1679px){
	.archf-slider-container{ --slide-pad-x: 80px; --slide-desc-w: 600px; --slide-fs-mult: .85; }
	.archf-slide__eyebrow{ margin-bottom: 34px; }
	.archf-slide__desc{ padding: 30px; margin-top: 30px; }
	.archf-slide__desc--plain{ padding: 0; }
}

@media (max-width: 1279px){
	.archf-slider-container{ --slide-pad-x: 48px; --slide-desc-w: 540px; --slide-fs-mult: .72; }
	.archf-slide__eyebrow{ margin-bottom: 26px; letter-spacing: 0.04em; }
	.archf-slide__desc{ padding: 24px; margin-top: 24px; }
	.archf-slide__desc--plain{ padding: 0; }
	.archf-slide__btn{ padding: 12px 30px; }
}

/* 1023 이하 — 시안(모바일)대로 항상 가운데 정렬 */
@media (max-width: 1023px){
	.archf-slider-container{ --slide-pad-x: 10px; --slide-desc-w: 100%; --slide-fs-mult: .62; }
	.archf-slider-container.archf-slider-container--content-boxed .archf-slide-content-container.container{ padding-left: 10px; padding-right: 10px; }

	/* 모바일 가로 정렬 — 슬라이더 옵션 「모바일 텍스트 위치 → 가로 정렬」
	   (옵션이 'PC 설정 따름'이면 아래 클래스가 붙지 않아 슬라이드별 설정이 그대로 적용된다) */
	.archf-slide-content-inner{ max-width: 640px; }

	/* 가운데 */
	.archf-slider-container--mo-align-center .archf-slide-item,
	.archf-slider-container--mo-align-center .archf-slide-item.align-left,
	.archf-slider-container--mo-align-center .archf-slide-item.align-right{
		justify-content: center;
		text-align: center;
	}

	.archf-slider-container--mo-align-center .archf-slide-content-inner{
		margin-left: auto;
		margin-right: auto;
	}

	/* 왼쪽 */
	.archf-slider-container--mo-align-left .archf-slide-item,
	.archf-slider-container--mo-align-left .archf-slide-item.align-center,
	.archf-slider-container--mo-align-left .archf-slide-item.align-right{
		justify-content: flex-start;
		text-align: left;
	}

	.archf-slider-container--mo-align-left .archf-slide-content-inner{
		margin-left: 0;
		margin-right: auto;
	}

	/* 오른쪽 — 블록만 오른쪽으로 보내고 글자는 왼쪽 정렬 (PC 와 동일 규칙) */
	.archf-slider-container--mo-align-right .archf-slide-item,
	.archf-slider-container--mo-align-right .archf-slide-item.align-center,
	.archf-slider-container--mo-align-right .archf-slide-item.align-left{
		justify-content: flex-end;
		text-align: left;
	}

	.archf-slider-container--mo-align-right .archf-slide-content-inner{
		margin-left: auto;
		margin-right: 0;
	}

	.archf-slider-container .archf-slide-content-container.container,
	.archf-slider-container--content-align-left .archf-slide-content-container.container,
	.archf-slider-container--content-align-right .archf-slide-content-container.container{
		padding-left: var(--slide-pad-x);
		padding-right: var(--slide-pad-x);
	}

	/* 모바일 텍스트 세로 위치 · 여백 (슬라이더 옵션 「모바일 텍스트 위치」) */
	.archf-slider-container .archf-slide-item{
		align-items: var(--slide-valign-mo, flex-start);
		padding-top: var(--slide-pad-y-mo, 80px);
		padding-bottom: var(--slide-pad-y-mo, 80px);
	}

	.archf-slide-content-inner{
		transform: translateY(var(--slide-shift-y-mo, 0px));
	}

	.archf-slide__eyebrow{ margin-bottom: 22px; }
	.archf-slide__desc{ width: 100%; padding: 22px; }
	.archf-slide__desc--plain{ padding: 0; }
}

/* 모바일 — 글자 배율은 슬라이더 옵션 「모바일 글자 크기(%)」로 조정한다.
   (슬라이더 전체: --slide-fs-mult-mobile, 슬라이드별 값이 있으면 그 값이 우선) */
@media (max-width: 767px){
	.archf-slider-container{
		--slide-pad-x: 10px;
		--slide-fs-mult: var(--slide-fs-mult-mobile, .5);
	}
	.archf-slide-item{
		--slide-fs-mult: var(--slide-fs-mult-mobile, .5);
	}
	.archf-slide__eyebrow{ margin-bottom: 16px; letter-spacing: 0.03em; }
	.archf-slide__desc{ padding: 18px; margin-top: 18px; }
	.archf-slide__desc--plain{ padding: 0; }
	.archf-slide__btn{ padding: 11px 26px; }

	/* ── 모바일 글자 크기 : 화면 폭 비례(vw) ──────────────────
	   기기마다 같은 비율로 보이도록 px 이 아닌 vw 로 환산한다.
	     1vw 환산 단위 = 100vw ÷ 「모바일 기준 화면 폭」(기본 390)
	   문단별 「크기(모바일)」 값이 있으면 그 숫자를, 없으면
	   PC 값 × 「모바일 글자 크기(%)」 배율을 기준 폭에서의 px 로 본다. */
	.archf-slider-container{
		--slide-vw: calc(100vw / var(--slide-mobile-base, 390));
	}

	.archf-slide__eyebrow{
		font-size: calc(var(--fs-mo-n, calc(var(--fs-n, 25) * var(--slide-fs-mult, 1))) * var(--slide-vw));
	}

	.archf-slide-content-container .archf-slide__title{
		font-size: calc(var(--fs-mo-n, calc(var(--fs-n, 40) * var(--slide-fs-mult, 1))) * var(--slide-vw));
	}

	.archf-slide__title-main,
	.archf-slide__title-accent{
		font-size: calc(var(--fs-mo-n, calc(var(--fs-n, 40) * var(--slide-fs-mult, 1))) * var(--slide-vw));
	}

	.archf-slide__subtitle{
		font-size: calc(var(--fs-mo-n, calc(var(--fs-n, 20) * var(--slide-fs-mult, 1))) * var(--slide-vw));
	}

	.archf-slide__desc{
		font-size: calc(var(--fs-mo-n, calc(var(--fs-n, 17) * var(--slide-fs-mult, 1))) * var(--slide-vw));
	}

	.archf-slide__btn{
		font-size: calc(var(--fs-mo-n, calc(var(--fs-n, 16) * var(--slide-fs-mult, 1))) * var(--slide-vw));
	}
}