/* ============================================================
   클리닉 상세 페이지 공용 CSS (.cl-*)
   2026-06-12 전면 재작성 — 레퍼런스: 연세오케이정형외과 /ok-clinic/neck-clinic
   (sub.css 구조 분석 후 장위마디 브랜드로 충실 재현)
   브랜드: 네이비 #233E71 / primary #1C369A
   다른 클리닉 페이지에서도 그대로 재사용 (이미지·텍스트만 교체)
   ============================================================ */

.cl-page {
	--cl-navy: #233E71;
	--cl-navy2: #1C369A;
	--cl-gray-bg: #F5F6F7;
	--cl-sect-bg: #EDF1FA;
	--cl-line: rgba(0, 0, 0, 0.2);
	--cl-radius2: 20px;
	--cl-radius3: 30px;
	--cl-radius4: 40px;
	--cl-ani-y: 60px;
	color: #1c1c1c;
	overflow-x: hidden;
}

.cl-in {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ---- 스크롤 리빌 공통 (레퍼런스 .active 토글) ---- */
.cl-page [data-reveal] {
	transform: translateY(var(--cl-ani-y));
	opacity: 0;
	transition: transform 1s ease, opacity 1s ease;
}

.cl-page [data-reveal].active {
	transform: none;
	opacity: 1;
}

/* ---- 섹션 타이틀 공통 (ref .sub_tit_box) ---- */
.cl-tit-box {
	margin-bottom: 120px;
}

.cl-tit-box.center {
	text-align: center;
}

.cl-tit2 {
	font-size: clamp(28px, 3.5vw, 43px);
	line-height: 1.5;
	margin: 0 0 24px;
	font-weight: 700;
	text-align: left;
	color: #1c1c1c;
}

.cl-tit-desc {
	font-size: clamp(16px, 1.6vw, 17px);
	color: #000;
	font-weight: 500;
	line-height: 1.6;
	text-align: left;
}

.cl-h4 {
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 700;
	color: #000;
	margin: 0 0 28px;
}

/* ============================================================
   1. 비주얼 히어로 (ref .sub_visual)
   ============================================================ */
.cl-visual {
	position: relative;
	margin: 0px 65px 0;
	border-radius: var(--cl-radius4);
	overflow: hidden;
	min-height: 400px;
	background-size: cover;
	background-position: 50% 35%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 36px 48px 52px;
}

.cl-visual-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 20, 45, 0.45) 0%, rgba(10, 20, 45, 0.05) 40%, rgba(10, 20, 45, 0.45) 100%);
}

.cl-visual-crumb {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 16px;
	font-weight: 500;
}

.cl-visual-crumb a {
	color: rgba(255, 255, 255, 0.85);
	display: inline-flex;
	align-items: center;
}

.cl-visual-crumb .sep {
	opacity: 0.6;
}

.cl-visual-crumb .cur {
	color: #fff;
	font-weight: 700;
}

.cl-visual-tit {
	position: relative;
	z-index: 2;
}

.cl-visual-tit h1 {
	margin: 0;
	font-size: clamp(34px, 4.5vw, 55px);
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.5px;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   2. 인트로 (ref .top_desc — 가운데 정렬 + 그라데이션 타이틀)
   ============================================================ */
.cl-topdesc {
	text-align: center;
	padding: 130px 20px 110px;
}

.cl-grad-tit {
	font-size: clamp(28px, 3.5vw, 44px);
	line-height: 1.4;
	margin: 0 0 30px;
	font-weight: 750;
	background: linear-gradient(90deg, #1C369A 0%, #233E71 50%, #1C369A 100%);
	background-size: 200% 100%;
	color: #1c1c1c;
	-webkit-background-clip: text;
	background-clip: text;
	animation: clGradMove 2.5s linear infinite;
}

@keyframes clGradMove {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 200% 50%;
	}
}

.cl-topdesc-txt {
	font-size: clamp(15px, 1.6vw, 20px);
	font-weight: 500;
	color: #000;
	line-height: 1.8;
	margin: 0;
}

/* ============================================================
   3. 패럴랙스 (ref .img_pallax — 풀폭, 고정 배경)
   ============================================================ */
.cl-parallax {
	height: clamp(320px, 42vw, 540px);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	background-attachment: fixed;
}

@media (hover: none) {

	/* 모바일은 fixed 미지원 다수 → 일반 스크롤 */
	.cl-parallax {
		background-attachment: scroll;
	}
}

/* ============================================================
   4. 증상 · 원인 (ref .symptom_sect)
   ============================================================ */
.cl-symptom {
	padding: 150px 0 120px;
}

.cl-sym-list {
	margin-bottom: 120px;
}

.cl-sym-list ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cl-sym-list ul li {
	border-radius: var(--cl-radius2);
	background-color: var(--cl-gray-bg);
	overflow: hidden;
	text-align: center;
	padding: 44px 16px 0;
}

.cl-sym-list ul li .ico {
	width: 92px;
	height: 92px;
	margin: 0 auto;
	border-radius: 50%;
	background: #fff;
	color: var(--cl-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(35, 62, 113, 0.08);
}

.cl-sym-list ul li .ico svg {
	width: 46px;
	height: 46px;
}

.cl-sym-list ul li p {
	text-align: center;
	padding: 24px 4px 30px;
	margin: 0;
	font-size: clamp(16px, 1.8vw, 20px) !important;
	font-weight: 600;
	color: #000;
	line-height: 1.3;
}

.cl-cause {
	display: flex;
	justify-content: space-between;
	gap: 30px;
}

.cl-cause .cl-h4 {
	white-space: nowrap;
	margin-right: 30px;
}

.cl-cause .clist {
	width: min(74%, 920px);
}

.cl-cause .clist ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cl-cause .clist ul li {
	display: flex;
	align-items: center;
	padding: 26px 34px;
	border-radius: 15px;
	background-color: var(--cl-gray-bg);
	font-size: clamp(15px, 1.6vw, 19px);
	font-weight: 700;
	color: #1c1c1c;
}

.cl-cause .clist ul li::before {
	content: '';
	width: 1.1em;
	height: 1.1em;
	margin-right: 12px;
	flex-shrink: 0;
	background: url("data:image/svg+xml;utf8,<svg width='22' height='21' viewBox='0 0 22 21' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M10.7769 20.5C7.18311 20.5 3.90186 18.625 2.10498 15.5C0.308105 12.4141 0.308105 8.625 2.10498 5.5C3.90186 2.41406 7.18311 0.5 10.7769 0.5C14.3315 0.5 17.6128 2.41406 19.4097 5.5C21.2065 8.625 21.2065 12.4141 19.4097 15.5C17.6128 18.625 14.3315 20.5 10.7769 20.5ZM15.1909 8.66406H15.1519C15.5425 8.3125 15.5425 7.72656 15.1519 7.33594C14.8003 6.98438 14.2144 6.98438 13.8628 7.33594L9.52686 11.7109L7.69092 9.875C7.30029 9.48438 6.71436 9.48438 6.36279 9.875C5.97217 10.2266 5.97217 10.8125 6.36279 11.1641L8.86279 13.6641C9.21436 14.0547 9.80029 14.0547 10.1909 13.6641L15.1909 8.66406Z' fill='%23233E71'/></svg>") no-repeat center / contain;
}

/* ============================================================
   5. 마퀴 (ref .marqee_sect)
   ============================================================ */
.cl-marquee {
	margin: 0 0 50px;
	overflow: hidden;
}

.cl-marquee-track {
	display: flex;
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: clamp(56px, 9vw, 100px);
	font-weight: 700;
	letter-spacing: -1px;
}

.cl-marquee-track p {
	margin: 0;
	padding-right: 40px;
	line-height: 1.1;
	color: rgba(35, 62, 113, 0.08);
	animation: clTextLoop 120s linear infinite;
	font-size: 120px !important;
	font-weight: 900 !important;
	letter-spacing: 0.02em;
}

@keyframes clTextLoop {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-100%);
	}
}

/* ============================================================
   6. 질환 카드 슬라이더 .cl-dsec (ref 두드림 disease_sect)
   — 어깨 클리닉 핫스팟 섹션 대체. 네이비 풀배경 + 좌우 bleed 스와이퍼
   + 인접 슬라이드 엇갈림(translateY) + 원인/증상 2칼럼 카드 + 프로그레스바
   ============================================================ */
.cl-dsec {
	padding: 160px 0 190px;
	background-color: #233E71;
	overflow: hidden;
}

.cl-dsec .cl-tit-box .cl-tit2 {
	color: #fff;
}

.cl-dsec .cl-tit-box .cl-tit-desc {
	color: rgba(255, 255, 255, 0.72);
}

.cl-dsec-slider {
	margin-top: 90px;
}

.cl-dsec-swiper {
	width: 110%;
	margin-left: -5%;
	padding-bottom: 80px;
	overflow: visible;
}

.cl-dsec-swiper .swiper-slide {
	height: auto;
}

.cl-dsec-swiper .item {
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
	height: 100%;
	transition: transform 1s;
}

/* 레퍼런스의 엇갈림: 가운데(active) 기준 양옆 카드가 아래로 내려앉음 */
.cl-dsec-swiper .swiper-slide-prev .item,
.cl-dsec-swiper .swiper-slide-next .item {
	transform: translateY(80px);
}

.cl-dsec-swiper .item .img {
	position: relative;
	width: 100%;
	padding-top: 39%;
}

.cl-dsec-swiper .item .img img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cl-dsec-swiper .item .txt-wrap {
	background: #fff;
	padding: 44px;
}

.cl-dsec-swiper .info-box {
	position: relative;
	padding-left: 65px;
}

.cl-dsec-swiper .info-box .num {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 18px;
	line-height: 1;
	padding: 0.5em 0.7em;
	color: #1C369A;
	border-radius: 8px;
	font-weight: 750;
	background-color: #EDF1FA;
}

.cl-dsec-swiper .info-box .tit {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	color: #1c1c1c;
	margin: 0;
}

.cl-dsec-swiper .info-box .txt {
	font-weight: 500;
	font-size: 16px;
	line-height: 1.62;
	margin-top: 12px;
	color: #4b5158;
	word-break: keep-all;
}


.cl-dsec-paging {
	position: relative;
	width: 360px;
	max-width: 60%;
	height: 4px;
	margin: 80px auto 0;
	background: rgba(255, 255, 255, 0.2);
}

.cl-dsec-paging .swiper-pagination-progressbar-fill {
	background: #fff;
}

@media (max-width: 1280px) {
	.cl-dsec-swiper {
		width: 150%;
		margin-left: -25%;
	}

	.cl-dsec-swiper .item .txt-wrap {
		padding: 36px;
	}
}

@media (max-width: 1024px) {
	.cl-dsec {
		padding: 96px 0 80px;
	}

	.cl-dsec-slider {
		margin-top: 60px;
	}

	.cl-dsec-swiper {
		width: 180%;
		margin-left: -40%;
	}
}

@media (max-width: 768px) {
	.cl-dsec {
		padding: 80px 0 64px;
	}

	.cl-dsec-swiper {
		width: 230%;
		margin-left: -65%;
		padding-bottom: 48px;
	}

	.cl-dsec-swiper .swiper-slide-prev .item,
	.cl-dsec-swiper .swiper-slide-next .item {
		transform: translateY(40px);
	}

	.cl-dsec-swiper .item .img {
		padding-top: 50%;
	}

	.cl-dsec-swiper .item .txt-wrap {
		padding: 0;
	}

	.cl-dsec-swiper .info-box {
		padding: 28px 24px 18px;
	}

	.cl-dsec-swiper .info-box .num {
		left: 24px;
		top: 28px;
		font-size: 15px;
	}

	.cl-dsec-swiper .info-box .tit {
		padding-left: 56px;
		font-size: 22px;
	}

	.cl-dsec-swiper .info-box .txt {
		font-size: 14px;
		margin-top: 10px;
	}

	.cl-dsec-paging {
		height: 3px;
	}
}

@media (max-width: 480px) {
	.cl-dsec-swiper {
		width: 270%;
		margin-left: -85%;
	}

	.cl-dsec-swiper .info-box {
		padding: 26px 16px 16px;
	}

	.cl-dsec-swiper .info-box .num {
		left: 16px;
		top: 26px;
	}

	.cl-dsec-swiper .info-box .tit {
		padding-left: 50px;
		font-size: 20px;
	}
}


/* ============================================================
   7. 치료 슬라이더 (ref .special1_sect + .clinic_slider)
   ============================================================ */
.cl-treat {
	padding: 170px 0 150px;
}

.cl-slider {
	position: relative;
	overflow: hidden;
	padding-left: max(calc((100% - 1200px) / 2), 20px);
}

.cl-treat-swiper {
	overflow: visible;
}

.cl-treat-swiper .swiper-slide {
	width: min(86%, 1080px);
}

.cl-treat-swiper .item {
	display: flex;
	align-items: center;
	opacity: 0.3;
	transition: opacity 1s ease;
	padding-right: 60px;
}

.cl-treat-swiper .swiper-slide-active .item {
	opacity: 1;
}

.cl-treat-swiper .item .img {
	width: 50%;
	flex-shrink: 0;
	padding-right: 30px;
}

.cl-treat-swiper .item .img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 500px;
	transition: border-radius 1s ease;
}

.cl-treat-swiper .swiper-slide-active .item .img img {
	border-radius: var(--cl-radius4);
}

.cl-treat-swiper .item .info {
	flex: 1;
	padding-left: 30px;
	padding-top: 56px;
}

.cl-treat-swiper .item .info .tit {
	display: flex;
	align-items: flex-start;
}

.cl-treat-swiper .item .info .tit span {
	padding: 0 1em;
	margin-top: 0.25em;
	line-height: 2em;
	border-radius: 2em;
	background-color: var(--cl-navy);
	color: #fff;
	font-size: clamp(12px, 1.3vw, 15px);
	font-weight: 600;
	margin-right: 16px;
	white-space: nowrap;
}

.cl-treat-swiper .item .info .tit strong {
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 700;
	line-height: 1.4;
	color: #000;
}

.cl-treat-swiper .item .info .txt {
	font-size: clamp(14px, 1.6vw, 18px);
	font-weight: 500;
	line-height: 1.6;
	margin: 26px 0 18px;
	max-width: 560px;
	color: #1c1c1c;
}

.cl-treat-swiper .item .info .tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cl-treat-swiper .item .info .tags p {
	margin: 0;
	padding: 0 0.9em;
	line-height: 1.9em;
	border-radius: 2em;
	border: 1px solid #bbb;
	font-size: clamp(12px, 1.4vw, 15px);
	color: #000;
}

/* 컨트롤 (ref .controls — 화살표 + 1/3 카운터) */
.cl-slider-controls {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 36px;
}

.cl-slider-controls .nav-btn {
	width: 36px;
	height: 36px;
	border: 0;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
}

.cl-slider-controls .nav-btn svg {
	width: 14px;
	height: auto;
	fill: currentColor;
}

.cl-slider-controls .pg {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
}

.cl-slider-controls .pg .cur {
	font-weight: 700;
	min-width: 1.4em;
	text-align: center;
}

.cl-slider-controls .pg .bar {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.3);
}

.cl-slider-controls .pg .total {
	color: rgba(0, 0, 0, 0.5);
	min-width: 1.4em;
	text-align: center;
}

/* ============================================================
   8. FAQ (ref .faq_sect + .faq_list2)
   ============================================================ */
.cl-faq {
	padding-bottom: 170px;
}

.cl-faq-list {
	border-top: 1px solid var(--cl-line);
}

.cl-faq-list .item {
	overflow: hidden;
	border-bottom: 1px solid var(--cl-line);
	transition: border-color 0.4s;
}

.cl-faq-list .item.open {
	border-color: transparent;
}

.cl-faq-list .q {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 72px 0 32px;
	min-height: 96px;
	font-size: clamp(15px, 1.7vw, 20px);
	font-weight: 700;
	cursor: pointer;
	color: #1c1c1c;
}

.cl-faq-list .q span {
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background-color: var(--cl-navy);
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	font-size: clamp(12px, 1.4vw, 15px);
	color: #fff;
	font-weight: 700;
	margin-right: 14px;
}

.cl-faq-list .q p {
	margin: 0;
	line-height: 1.4;
	padding: 18px 0;
	font-size: 19px !important;
}

.cl-faq-list .q::before {
	content: '';
	position: absolute;
	top: calc(50% - 11px);
	right: 32px;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml;utf8,<svg width='19' height='12' viewBox='0 0 19 12' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9.27685 11.2715L8.24365 10.2832L1.05615 3.0957L0.0678697 2.0625L2.08935 0.0410162L3.12256 1.0293L9.27685 7.22852L15.4312 1.0293L16.4644 0.0410187L18.4858 2.0625L17.4976 3.09571L10.3101 10.2832L9.27685 11.2715Z' fill='%23AAAAAA'/></svg>") no-repeat center / contain;
	transition: transform 0.4s;
}

.cl-faq-list .item.open .q::before {
	transform: rotate(-180deg);
}

.cl-faq-list .a {
	display: none;
	padding: 34px 64px 34px 76px;
	background: var(--cl-gray-bg);
	border-radius: var(--cl-radius2);
	margin-bottom: 20px;
}

.cl-faq-list .item.open .a {
	display: block;
}

.cl-faq-list .a div {
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 1.75;
	color: #333;
}

/* ============================================================
   9. 진료 시스템 (ref .system_sect — 라이트 그라데이션 배경)
   ============================================================ */
.cl-system {
	padding: 150px 0;
	background: linear-gradient(180deg, #F3F6FC 0%, #CFD7E5 100%);
}

.cl-system .cl-tit-box {
	margin-bottom: 80px;
}

.cl-system-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.cl-system-grid .card {
	background: #fff;
	border-radius: var(--cl-radius2);
	padding: 38px 30px 42px;
	box-shadow: 0 12px 30px rgba(35, 62, 113, 0.07);
}

.cl-system-grid .card .num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5em;
	height: 2.5em;
	border-radius: 50%;
	background: var(--cl-sect-bg);
	color: var(--cl-navy);
	font-size: clamp(14px, 1.5vw, 17px);
	font-weight: 800;
	margin-bottom: 22px;
}

.cl-system-grid .card .tit {
	margin: 0 0 12px;
	font-size: clamp(18px, 1.9vw, 23px) !important;
	font-weight: 700;
	color: #1c1c1c1;
}

.cl-system-grid .card .txt {
	margin: 0;
	font-size: clamp(13px, 1.5vw, 16px);
	line-height: 1.4;
	color: #555;
}

/* ============================================================
   10. 4가지 약속 (ref .promise_sect — 2단 엇갈림 포토 카드)
   ============================================================ */
.cl-promise {
	padding: 170px 0 150px;
}

.cl-promise-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: center;
	max-width: 960px;
	margin: 0 auto;
}

.cl-promise-grid .img-box {
	position: relative;
	width: 100%;
	padding-top: 117%;
	border-radius: var(--cl-radius3);
	overflow: hidden;
}

/* 엇갈림 배치 (ref grid-row 1/3, 2/4 …) */
.cl-promise-grid .img-box:nth-child(1) {
	grid-row: 1 / 3;
}

.cl-promise-grid .img-box:nth-child(2) {
	grid-row: 2 / 4;
}

.cl-promise-grid .img-box:nth-child(3) {
	grid-row: 3 / 5;
}

.cl-promise-grid .img-box:nth-child(4) {
	grid-row: 4 / 6;
}

.cl-promise-grid .img-box .img {
	position: absolute;
	inset: 0;
}

.cl-promise-grid .img-box .img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cl-promise-grid .img-box .bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(9, 27, 60, 0) 39%, rgba(9, 27, 60, 0.55) 78%);
	z-index: 10;
}

.cl-promise-grid .img-box .txt-box {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 44px;
	z-index: 15;
	color: #fff;
}

.cl-promise-grid .img-box .txt-box .tit {
	margin: 0 0 14px;
	font-size: clamp(20px, 2.4vw, 27px) !important;
	font-weight: 700;
	line-height: 1.4;
}

.cl-promise-grid .img-box .txt-box .txt {
	margin: 0;
	font-size: clamp(13px, 1.5vw, 17px) !important;
	font-weight: 500;
	line-height: 1.6;
}

/* 리빌: 블러 + 슬라이드 업 (ref filter blur 연출) */
.cl-promise-grid .img-box[data-reveal] {
	filter: blur(10px);
	opacity: 0;
	transform: translateY(100px);
	transition: opacity 1s ease-in-out, transform 1s ease-in-out, filter 1s ease-in-out;
}

.cl-promise-grid .img-box[data-reveal].active {
	filter: blur(0);
	opacity: 1;
	transform: none;
}

/* ============================================================
   11. CTA 배너 (ref .self_sect)
   ============================================================ */
.cl-banner {
	position: relative;
	margin: 0 24px 24px;
	height: 460px;
	border-radius: var(--cl-radius4);
	overflow: hidden;
	background-size: cover;
	background-position: 50% 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.cl-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(15, 28, 55, 0.55);
}

.cl-banner .inner {
	position: relative;
	z-index: 2;
	color: #fff;
	padding: 0 20px;
}

.cl-banner .desc {
	font-size: clamp(17px, 2vw, 24px);
	font-weight: 500;
	opacity: 0.9;
}

.cl-banner .tit {
	font-size: clamp(26px, 3.4vw, 42px);
	line-height: 1.5;
	font-weight: 600;
	margin: 22px 0 34px;
	color: #fff;
}

.cl-banner .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 2em;
	height: 54px;
	border-radius: 27px;
	background-color: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	font-size: clamp(14px, 1.6vw, 17px);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.3s;
}

.cl-banner .btn:hover {
	background-color: var(--cl-navy2);
	border-color: var(--cl-navy2);
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 1024px) {
	.cl-sym-list ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cl-cause {
		flex-direction: column;
		gap: 0;
	}

	.cl-cause .clist {
		width: 100%;
	}

	.cl-system-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.cl-visual {
		margin: 12px 12px 0;
		min-height: 340px;
		padding: 22px 24px 34px;
		border-radius: var(--cl-radius3);
	}

	.cl-topdesc {
		padding: 80px 20px 70px;
	}

	.cl-symptom {
		padding: 90px 0 80px;
	}

	.cl-sym-list {
		margin-bottom: 60px;
	}

	.cl-sym-list ul {
		gap: 14px;
	}

	.cl-sym-list ul li {
		padding-top: 28px;
	}

	.cl-sym-list ul li .ico {
		width: 68px;
		height: 68px;
	}

	.cl-sym-list ul li .ico svg {
		width: 34px;
		height: 34px;
	}

	.cl-cause .clist ul {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.cl-cause .clist ul li {
		padding: 18px 22px;
	}




	.cl-treat {
		padding: 100px 0 90px;
	}

	.cl-treat-swiper .swiper-slide {
		width: 92%;
	}

	.cl-treat-swiper .item {
		flex-direction: column;
		align-items: flex-start;
		padding-right: 24px;
	}

	.cl-treat-swiper .item .img {
		width: 100%;
		padding-right: 0;
	}

	.cl-treat-swiper .item .img img {
		border-radius: 200px;
	}

	.cl-treat-swiper .swiper-slide-active .item .img img {
		border-radius: var(--cl-radius2);
	}

	.cl-treat-swiper .item .info {
		padding-left: 0;
		padding-top: 26px;
	}

	.cl-faq {
		padding-bottom: 100px;
	}

	.cl-faq-list .q {
		padding: 0 48px 0 16px;
		min-height: 76px;
	}

	.cl-faq-list .q::before {
		right: 14px;
	}

	.cl-faq-list .a {
		padding: 22px 20px;
	}

	.cl-system {
		padding: 90px 0;
	}

	.cl-system .cl-tit-box {
		margin-bottom: 46px;
	}

	.cl-system-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.cl-system-grid .card {
		padding: 26px 24px 30px;
	}

	.cl-promise {
		padding: 100px 0 90px;
	}

	.cl-promise-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* 모바일은 엇갈림 해제 */
	.cl-promise-grid .img-box:nth-child(n) {
		grid-row: auto;
	}

	.cl-promise-grid .img-box {
		padding-top: 80%;
	}

	.cl-promise-grid .img-box .txt-box {
		padding: 26px;
	}

	.cl-banner {
		margin: 0 12px 12px;
		height: 380px;
		border-radius: var(--cl-radius3);
	}

	.cl-tit-box {
		margin-bottom: 44px;
	}
}


/* ============================================================
   모바일 폰트 일괄 축소 (2026-06-12 — 모바일서 폰트 과대 보정)
   ※ 앞선 clamp 정의를 확실히 덮도록 파일 끝에 배치
   ============================================================ */
@media (max-width: 768px) {
	.cl-visual-tit h1 {
		font-size: 26px;
	}

	.cl-grad-tit {
		font-size: 21px;
	}

	.cl-tit2 {
		font-size: 21px;
	}

	.cl-topdesc-txt {
		font-size: 15px !important;
	}

	.cl-tit-desc {
		font-size: 14px;
	}

	.cl-sym-list ul li p {
		font-size: 15px !important;
	}

	.cl-faq-list .q p {
		font-size: 15px !important;
	}

	.cl-dsec-swiper .info-box .tit {
		font-size: 19px;
	}

	.cl-dsec-swiper .info-box .txt {
		font-size: 14px !important;
	}
}

@media (max-width: 480px) {
	.cl-visual-tit h1 {
		font-size: 23px;
	}

	.cl-grad-tit {
		font-size: 19px;
	}

	.cl-tit2 {
		font-size: 19px;
	}

	.cl-topdesc-txt {
		font-size: 14px !important;
	}

	.cl-tit-desc {
		font-size: 13.5px;
	}

	.cl-sym-list ul li p {
		font-size: 14px !important;
	}

	.cl-faq-list .q p {
		font-size: 14.5px !important;
	}

	.cl-dsec-swiper .info-box .tit {
		font-size: 18px;
	}
}

/* 4가지 약속 섹션 전용 컨텐츠 폭 (다른 .cl-in 영향 없음) */
.cl-in--promise {
	max-width: 1000px;
}
/* 4가지 약속 섹션 네이비 그라데이션 배경 + 텍스트 가독성 (.cl-promise 한정) */
.cl-promise { background: linear-gradient(0deg, #1C369A, #233E71); }
.cl-promise .cl-tit2,
.cl-promise .cl-tit-desc { color: #fff; }