/* ==========================================================
   procedure.css : 시술 상세 템플릿 (/page/procedure/view.php)
   - 폭/여백 변수는 refine.css 의 --wrap, --gutter, --section-y 사용
   - 헤더 높이는 header.css 의 --hd-h-scrolled 사용 (섹션 탭 고정 위치)
========================================================== */
.proc {
	--accent: #844ad7;
	--accent-deep: #5b2aa6;
	--accent-soft: #f4effc;
	--ink: #121212;
	--text: #4b4b52;
	--muted: #8b8b94;
	--line: #e9e7ee;
	--soft: #f7f6f9;
	--radius-l: 28px;
	--radius-m: 20px;
	--radius-s: 14px;
	color: var(--ink);
	font-size: 16px;
	line-height: 1.65;
	word-break: keep-all;
	text-wrap: pretty;
}
/* 초기화는 :where() 로 우선순위 0 → 아래 클래스 규칙이 항상 이김 */
.proc :where(*, *:before, *:after) { box-sizing: border-box; }
.proc :where(img) { display: block; max-width: 100%; height: auto; }
.proc :where(ol, ul) { margin: 0; padding: 0; list-style: none; }
.proc :where(h1, h2, h3, p) { margin: 0; }
.proc :where(a) { text-decoration: none; }

.proc-wrap {
	position: relative;
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.proc-section { position: relative; padding: var(--section-y) 0; scroll-margin-top: 120px; }
.proc-section--soft { background: var(--soft); }
.proc-section--dark { background: #0e0d12; color: #fff; overflow: hidden; }
.proc-section--tight { padding-top: 0; }
.proc-section--soft + .proc-section--tight,
.proc-section--dark + .proc-section--tight { padding-top: var(--section-y); }

/* 타이포 */
.proc-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	margin-bottom: 14px;
	font-size: 14px; font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent);
}
.proc-eyebrow:before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.proc-section--dark .proc-eyebrow { color: #c4a3ff; }
.proc-h2 {
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.18;
	font-weight: 800;
	letter-spacing: -0.035em;
}
.proc-h3 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; }
.proc-text { font-size: 17px; line-height: 1.8; color: var(--text); }
.proc-text strong { color: var(--ink); font-weight: 700; background: linear-gradient(transparent 62%, rgba(132, 74, 215, .22) 0); }
.proc-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.proc-head__desc { margin-top: 14px; font-size: 17px; color: var(--muted); }
.proc-section--dark .proc-head__desc { color: rgba(255, 255, 255, .6); }

/* 버튼 */
.proc-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.proc-btns--center { justify-content: center; }
.proc-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 56px;
	padding: 0 28px;
	border-radius: 999px;
	font-size: 16px; font-weight: 700;
	transition: transform .2s, background-color .2s, box-shadow .2s;
}
.proc-btn:hover { transform: translateY(-2px); }
.proc-btn--primary { background: var(--accent); color: #fff; box-shadow: 0 10px 28px rgba(132, 74, 215, .35); }
.proc-btn--primary:hover { background: var(--accent-deep); color: #fff; }
.proc-btn--glass {
	background: rgba(255, 255, 255, .55);
	color: var(--ink);
	border: 1px solid rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.proc-btn--glass:hover { background: #fff; color: var(--ink); }
.proc-btn--ghost { border: 1px solid var(--line); color: var(--ink); }


/* ----------------------------------------------------------
   상단 (히어로)
---------------------------------------------------------- */
.proc-hero {
	position: relative;
	overflow: hidden;
	padding-bottom: 40px;
	background:
		radial-gradient(60% 80% at 15% 20%, rgba(255, 255, 255, .7), transparent 60%),
		var(--hero-bg, #f3eeea);
}
/* 사진 원본 해상도가 낮아 과하게 키우지 않음 : 오른쪽 아래 기준, 왼쪽/위로 배경에 번지게 */
.proc .proc-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: right 30%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%);
	mask-image: linear-gradient(90deg, transparent 0, #000 38%);
}
.proc-hero__inner { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 88px); }
.proc-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: clamp(32px, 5vw, 72px); font-size: 14px; color: #6b6b6b; }
.proc-crumb > * + *:before { content: '/'; margin-right: 6px; color: #b5b0ad; }
.proc-crumb a { color: #6b6b6b; }
.proc-crumb strong { color: var(--ink); font-weight: 600; }
.proc-hero__title {
	font-size: clamp(56px, 8.4vw, 120px);
	line-height: 1;
	font-weight: 900;
	letter-spacing: -0.05em;
	color: var(--ink);
}
.proc-hero__summary { max-width: 30em; margin-top: 24px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; color: #2f2f33; font-weight: 500; }
.proc-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 36px; }
.proc-hero__tags li {
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .6);
	border: 1px solid rgba(255, 255, 255, .9);
	font-size: 14px; font-weight: 600; color: #555;
}

/* 시술 정보 유리 카드 */
.proc-facts {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
}
.proc-facts li {
	padding: 22px 22px 20px;
	border-radius: var(--radius-m);
	background: rgba(255, 255, 255, .62);
	border: 1px solid rgba(255, 255, 255, .85);
	-webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
	box-shadow: 0 12px 32px rgba(70, 30, 30, .06);
}
.proc-facts__icon { width: 30px; height: 30px; color: var(--accent); stroke-width: 1.4; }
.proc-facts__key { display: block; margin-top: 16px; font-size: 14px; color: var(--muted); }
.proc-facts__value { display: block; margin-top: 2px; font-size: 19px; line-height: 1.35; font-weight: 800; letter-spacing: -0.02em; }

.proc-icon {
	display: block;
	width: 30px; height: 30px;
	background-color: var(--accent);
	-webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
}
.proc-icon--alarm      { -webkit-mask-image: url(/assets/icon/i_alarm.svg);          mask-image: url(/assets/icon/i_alarm.svg); }
.proc-icon--scissors   { -webkit-mask-image: url(/assets/icon/i_scissors.svg);       mask-image: url(/assets/icon/i_scissors.svg); }
.proc-icon--anesthesia { -webkit-mask-image: url(/assets/icon/i_anesthesia.svg);     mask-image: url(/assets/icon/i_anesthesia.svg); }
.proc-icon--bed        { -webkit-mask-image: url(/assets/icon/i_bed.svg);            mask-image: url(/assets/icon/i_bed.svg); }
.proc-icon--recovery   { -webkit-mask-image: url(/assets/icon/i_recovery.svg);       mask-image: url(/assets/icon/i_recovery.svg); }
.proc-icon--cycle      { -webkit-mask-image: url(/assets/icon/i_cycle.svg);          mask-image: url(/assets/icon/i_cycle.svg); }
.proc-icon--calendar   { -webkit-mask-image: url(/assets/icon/i_calendar_clock.svg); mask-image: url(/assets/icon/i_calendar_clock.svg); }


/* ----------------------------------------------------------
   섹션 탭 (스크롤 시 헤더 아래 고정)
---------------------------------------------------------- */
.proc-tabs {
	position: sticky;
	top: var(--hd-h-scrolled, 68px);
	z-index: 900;
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
}
.proc-tabs ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.proc-tabs ul::-webkit-scrollbar { display: none; }
.proc-tabs a {
	position: relative;
	display: block;
	padding: 18px 16px;
	font-size: 15px; font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
	transition: color .2s;
}
.proc-tabs a:after {
	content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px;
	height: 2px; border-radius: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transition: transform .25s;
}
.proc-tabs a:hover, .proc-tabs a.is-active { color: var(--ink); }
.proc-tabs a.is-active:after { transform: scaleX(1); }


/* ----------------------------------------------------------
   소개
---------------------------------------------------------- */
.proc-about {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: end;
}
.proc-about__quote {
	margin-top: 28px;
	padding-left: 20px;
	border-left: 3px solid var(--accent);
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--accent);
}
.proc-about__lead { margin-bottom: 16px; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.6; font-weight: 700; letter-spacing: -0.02em; }

/* 벤토 : 일러스트 + 핵심 포인트 */
.proc-bento {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 12px;
	margin-top: clamp(48px, 6vw, 80px);
}
.proc-bento__visual {
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
	border-radius: var(--radius-l);
	background: radial-gradient(circle at 50% 40%, #fff, var(--soft));
	border: 1px solid var(--line);
}
.proc-intro__circle img { width: min(200px, 100%); border-radius: 50%; }
.proc-intro__compare img { width: 100%; border-radius: 16px; mix-blend-mode: multiply; }
.proc-bento__visual--wide { grid-column: span 2; }
.proc-bento--noimg { grid-template-columns: repeat(3, 1fr); }
.proc-bento__card {
	display: flex; flex-direction: column; justify-content: space-between;
	min-height: 220px;
	padding: 28px;
	border-radius: var(--radius-l);
	background: var(--accent-soft);
	transition: transform .3s, background-color .3s;
}
.proc-bento__card:nth-child(3) { background: #ece3fb; }
.proc-bento__card:nth-child(4) { background: var(--ink); color: #fff; }
.proc-bento__card:hover { transform: translateY(-4px); }
.proc-bento__num { font-size: 15px; font-weight: 800; color: var(--accent); }
.proc-bento__card:nth-child(4) .proc-bento__num { color: #c4a3ff; }
.proc-bento__card strong { font-size: clamp(22px, 2vw, 28px); line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; }

/* 특징 시술 */
.proc-feature {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	margin-top: 12px;
	padding: clamp(28px, 4vw, 56px);
	border-radius: var(--radius-l);
	background: linear-gradient(135deg, #fbf8ff 0%, #f3ecfd 100%);
	border: 1px solid #ebe2f8;
}
.proc-feature__image { padding: 16px; border-radius: var(--radius-m); background: #fff; box-shadow: 0 16px 40px rgba(91, 42, 166, .08); }
.proc-feature__image img { width: 100%; border-radius: 10px; }
.proc-feature__headline { margin: 14px 0 12px; font-size: 18px; font-weight: 700; color: var(--accent-deep); }


/* ----------------------------------------------------------
   추천 대상
---------------------------------------------------------- */
.proc-checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 12px;
}
.proc-checks li {
	position: relative;
	display: flex; align-items: center;
	min-height: 96px;
	padding: 22px 24px 22px 76px;
	border-radius: var(--radius-m);
	background: #fff;
	border: 1px solid var(--line);
	font-size: 18px; line-height: 1.45; font-weight: 600;
	transition: border-color .2s, box-shadow .2s;
}
.proc-checks li:hover { border-color: rgba(132, 74, 215, .4); box-shadow: 0 10px 30px rgba(91, 42, 166, .08); }
.proc-checks li:before {
	content: '';
	position: absolute; left: 24px; top: 50%;
	width: 34px; height: 34px;
	margin-top: -17px;
	border-radius: 50%;
	background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 18px;
}


/* ----------------------------------------------------------
   장점 (다크)
---------------------------------------------------------- */
.proc-glow {
	position: absolute;
	width: 720px; height: 720px;
	right: -200px; top: -260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(132, 74, 215, .45), transparent 65%);
	filter: blur(20px);
	pointer-events: none;
}
.proc-section--dark .proc-h2 { color: #fff; }
.proc-benefits { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; }
.proc-benefits li {
	position: relative;
	padding: 32px 28px 36px;
	border-radius: var(--radius-l);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.proc-benefits__num {
	display: block;
	font-size: clamp(56px, 6vw, 84px);
	line-height: 1;
	font-weight: 900;
	letter-spacing: -0.04em;
	background: linear-gradient(135deg, #e3d2ff 0%, #9b6bf0 55%, #ff9fbf 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}
.proc-benefits p { margin-top: 28px; font-size: 19px; line-height: 1.55; font-weight: 600; color: rgba(255, 255, 255, .92); }


/* ----------------------------------------------------------
   과정 (타임라인)
---------------------------------------------------------- */
.proc-timeline { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 20px; }
.proc-timeline:before {
	content: '';
	position: absolute; left: 0; right: 0; top: 17px;
	height: 2px;
	background: linear-gradient(90deg, var(--accent), rgba(132, 74, 215, .1));
}
.proc-timeline li { position: relative; }
.proc-timeline__dot {
	position: relative;
	display: inline-block;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-size: 13px; font-weight: 800; letter-spacing: .06em;
}
.proc-timeline__card {
	margin-top: 20px;
	padding: 12px 12px 20px;
	border-radius: var(--radius-m);
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
}
.proc-timeline__card img { width: 100%; border-radius: 12px; }
.proc-timeline__card p { margin-top: 16px; padding: 0 8px; font-size: 16px; line-height: 1.6; color: var(--text); }


/* ----------------------------------------------------------
   주의사항
---------------------------------------------------------- */
.proc-caution {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: start;
}
.proc-caution .proc-head { margin-bottom: 0; }
.proc-caution__list { border-top: 2px solid var(--ink); }
.proc-caution__list li {
	display: flex; gap: 20px; align-items: baseline;
	padding: 24px 4px;
	border-bottom: 1px solid var(--line);
	font-size: 18px; line-height: 1.55; font-weight: 500;
}
.proc-caution__list span { flex-shrink: 0; font-size: 15px; font-weight: 800; color: var(--accent); }


/* ----------------------------------------------------------
   상담 유도 + 관련 시술
---------------------------------------------------------- */
.proc-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(56px, 7vw, 104px) clamp(24px, 4vw, 64px);
	border-radius: var(--radius-l);
	background:
		radial-gradient(50% 80% at 85% 10%, rgba(255, 159, 191, .55), transparent 60%),
		radial-gradient(60% 90% at 10% 100%, rgba(132, 74, 215, .9), transparent 60%),
		#1a1424;
	color: #fff;
	text-align: center;
}
.proc-cta .proc-eyebrow { color: #e3d2ff; }
.proc-cta__title { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.25; font-weight: 800; letter-spacing: -0.035em; }
.proc-cta__desc { margin: 16px 0 36px; font-size: 17px; color: rgba(255, 255, 255, .72); }
.proc-cta .proc-btn--glass { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .28); }
.proc-cta .proc-btn--glass:hover { background: #fff; color: var(--ink); }

.proc-related { margin-top: 40px; }
.proc-related__title { margin-bottom: 14px; font-size: 15px; font-weight: 700; color: var(--muted); }
.proc-related ul { display: flex; flex-wrap: wrap; gap: 8px; }
.proc-related a {
	display: block;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--line);
	font-size: 15px; font-weight: 600;
	color: var(--ink);
	transition: border-color .2s, color .2s, background-color .2s;
}
.proc-related a:hover { border-color: var(--accent); color: var(--accent); }
.proc-related a.is-current { background: var(--ink); border-color: var(--ink); color: #fff; }


/* ----------------------------------------------------------
   준비 중
---------------------------------------------------------- */
.proc-soon { padding: clamp(96px, 14vw, 180px) 0; text-align: center; background: linear-gradient(180deg, var(--soft), #fff); }
.proc-soon .proc-eyebrow:before { display: none; }
.proc-soon__title { font-size: clamp(44px, 6vw, 80px); line-height: 1.1; font-weight: 900; letter-spacing: -0.045em; }
.proc-soon__desc { margin: 20px 0 36px; font-size: 18px; color: var(--muted); }


/* ----------------------------------------------------------
   스크롤 등장
---------------------------------------------------------- */
.proc-js .proc [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
.proc-js .proc [data-reveal].is-in { opacity: 1; transform: none; }


/* ==========================================================
   태블릿 (1024px 이하)
========================================================== */
@media screen and (max-width: 1024px) {
	.proc .proc-hero__photo { object-position: 70% 30%; opacity: .92; }
	.proc-bento { grid-template-columns: 1fr 1fr; }
	.proc-bento__visual { grid-row: span 2; }
	.proc-bento__card { min-height: 160px; }
	.proc-bento--noimg .proc-bento__card:nth-child(3):last-child { grid-column: 1 / -1; }
	.proc-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
	.proc-timeline:before { display: none; }
	.proc-caution { grid-template-columns: 1fr; }
	.proc-about { grid-template-columns: 1fr; align-items: start; }
}

/* ==========================================================
   모바일 (767px 이하)
========================================================== */
@media screen and (max-width: 767px) {
	.proc { font-size: 15px; }
	.proc-section { scroll-margin-top: 104px; }
	.proc-text { font-size: 16px; }

	.proc-hero { padding-bottom: 24px; }
	.proc .proc-hero__photo {
		position: relative;
		right: auto; top: auto;
		width: 100%; max-width: none;
		height: 240px; max-height: none;
		margin-bottom: -48px;
		object-position: 62% 40%;
		opacity: 1;
		-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
		-webkit-mask-composite: source-over;
		mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	}
	.proc-hero__inner { padding-top: 0; padding-bottom: 32px; }
	.proc-crumb { margin-bottom: 20px; font-size: 13px; }
	.proc-hero__tags { margin: 16px 0 24px; }
	.proc-btns .proc-btn { flex: 1 1 0; height: 52px; padding: 0 16px; }
	.proc-btns--center .proc-btn { flex: 1 1 100%; }

	.proc-facts { grid-template-columns: 1fr 1fr; gap: 8px; }
	.proc-facts li { padding: 16px; border-radius: var(--radius-s); }
	.proc-facts li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.proc-facts__key { margin-top: 10px; font-size: 13px; }
	.proc-facts__value { font-size: 16px; }
	.proc-facts__icon { width: 24px; height: 24px; }

	.proc-tabs a { padding: 14px 12px; font-size: 14px; }
	.proc-tabs a:after { left: 12px; right: 12px; }

	.proc-bento { grid-template-columns: 1fr 1fr; gap: 8px; }
	.proc-bento__visual { grid-column: 1 / -1; grid-row: auto; padding: 20px; }
	.proc-bento__visual img { width: 140px; }
	.proc-bento__card { min-height: 130px; padding: 20px; border-radius: var(--radius-m); }
	.proc-bento__card:nth-child(4) { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: 14px; justify-content: flex-start; }
	/* 그림 없는 카드 3장 : 마지막 카드를 한 줄 전체로 (반쪽만 남지 않게) */
	.proc-bento--noimg .proc-bento__card:nth-child(3):last-child { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: 14px; justify-content: flex-start; }
	.proc-bento__card strong { font-size: 20px; }

	.proc-feature { grid-template-columns: 1fr; padding: 20px; border-radius: var(--radius-m); }

	.proc-checks { grid-template-columns: 1fr; gap: 8px; }
	.proc-checks li { min-height: 0; padding: 18px 18px 18px 64px; font-size: 16px; }
	.proc-checks li:before { left: 18px; width: 30px; height: 30px; margin-top: -15px; }

	.proc-benefits { grid-template-columns: 1fr; gap: 10px; }
	.proc-benefits li { display: flex; gap: 20px; align-items: center; padding: 24px 20px; border-radius: var(--radius-m); }
	.proc-benefits__num { font-size: 44px; }
	.proc-benefits p { margin-top: 0; font-size: 16px; }

	.proc-timeline { grid-template-columns: 1fr 1fr; gap: 24px 10px; }
	.proc-timeline__dot { padding: 5px 10px; font-size: 11px; }
	.proc-timeline__card { margin-top: 12px; padding: 8px 8px 14px; }
	.proc-timeline__card p { margin-top: 10px; padding: 0 4px; font-size: 14px; }

	.proc-caution__list li { padding: 18px 2px; font-size: 16px; gap: 14px; }

	.proc-cta { border-radius: var(--radius-m); }
	.proc-related a { padding: 8px 14px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.proc *, .proc [data-reveal] { transition: none !important; transform: none !important; opacity: 1 !important; }
}


/* ----------------------------------------------------------
   추가 블록 : 종류별 안내 / 유형 / 비교 이미지 / 인라인 시술정보
---------------------------------------------------------- */
/* 그림 없는 소개 : PC 에서만 제목 | 설명 2단 (태블릿 · 모바일은 제목 위, 설명 아래) */
@media screen and (min-width: 1025px) { .proc-about--text { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.proc-timeline__title { display: block; margin-top: 14px; padding: 0 8px; font-size: 17px; font-weight: 800; }
.proc-timeline__title + p { margin-top: 4px; }

/* 상단 : 종류 바로가기 */
.proc-hero__variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.proc-hero__variants a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 22px 24px;
	border-radius: var(--radius-m);
	background: rgba(255, 255, 255, .62);
	border: 1px solid rgba(255, 255, 255, .85);
	-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
	font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink);
	transition: background-color .2s, transform .2s;
}
.proc-hero__variants a:hover { background: #fff; transform: translateY(-2px); }
.proc-hero__variants .mc-icon { width: 22px; height: 22px; color: var(--accent); }

/* 종류 전환 */
.proc-variants { margin-top: clamp(40px, 5vw, 72px); }
.proc-variants__switch {
	position: sticky; top: calc(var(--hd-h-scrolled, 68px) + 58px); z-index: 5;
	display: inline-flex; gap: 4px;
	margin-bottom: clamp(32px, 4vw, 56px);
	padding: 6px;
	border-radius: 999px;
	background: rgba(247, 246, 249, .92);
	border: 1px solid var(--line);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.proc-variants__switch button {
	height: 48px; padding: 0 26px;
	border: 0; border-radius: 999px;
	background: transparent;
	font-family: inherit; font-size: 16px; font-weight: 700; color: var(--muted);
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.proc-variants__switch button[aria-selected=true] { background: var(--ink); color: #fff; }
.proc-variants__switch button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.proc-variant > * + * { margin-top: clamp(28px, 3vw, 44px); }
.proc-variant__sub { font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -0.03em; }
.proc-variant__sub + * { margin-top: 20px !important; }
.proc-facts--inline li { background: var(--soft); border-color: var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* 특징 : 이미지 2장 */
.proc-feature--pair .proc-feature__image { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; }
.proc-feature__image figure { margin: 0; }
.proc-feature__image figcaption { margin-top: 8px; text-align: center; font-size: 14px; font-weight: 700; color: var(--accent-deep); }

/* 장점 : 전후 예시 이미지 */
.proc-benefit-visual { margin-bottom: 20px; overflow: hidden; border-radius: var(--radius-l); }
.proc-benefit-visual img { width: 100%; }

/* 유형 */
.proc-types { display: grid; gap: 14px; }
.proc-types__item {
	display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center;
	padding: 16px;
	border-radius: var(--radius-l);
	background: #fff;
	border: 1px solid var(--line);
}
.proc-types__image img { width: 100%; border-radius: var(--radius-m); }
.proc-types__text { padding: 8px 16px 8px 0; }
.proc-types__num { font-size: 14px; font-weight: 800; color: var(--accent); }
.proc-types__text h3 { margin: 6px 0 10px; font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; letter-spacing: -0.03em; }

@media screen and (max-width: 1024px) {
	.proc-timeline { grid-template-columns: repeat(min(var(--cols, 4), 3), minmax(0, 1fr)); }
	.proc-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.proc-bento__visual--wide { grid-column: 1 / -1; grid-row: auto; }
}
@media screen and (max-width: 767px) {
	.proc-timeline { grid-template-columns: 1fr 1fr; }
	.proc-benefits { grid-template-columns: 1fr; }
	.proc-bento--noimg { grid-template-columns: 1fr 1fr; }
	.proc-hero__variants { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
	.proc-hero__variants a { flex-direction: column; gap: 6px; padding: 14px 8px; font-size: 15px; }
	.proc-hero__variants .mc-icon { width: 18px; height: 18px; transform: rotate(90deg); }
	.proc-variants__switch { display: flex; top: calc(var(--hd-h-scrolled, 56px) + 50px); }
	.proc-variants__switch button { flex: 1 1 0; height: 42px; padding: 0 8px; font-size: 14px; }
	.proc-types__item { grid-template-columns: 1fr; padding: 12px; }
	.proc-types__text { padding: 4px 8px 8px; }
	.proc-feature--pair .proc-feature__image { grid-template-columns: 1fr; }
}

/* 종류별 장점 (작은 카드) */
.proc-mini-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.proc-mini-benefits li { padding: 22px 22px 24px; border-radius: var(--radius-m); background: #0e0d12; color: rgba(255, 255, 255, .92); font-size: 16px; line-height: 1.55; font-weight: 600; }
.proc-mini-benefits span { display: block; margin-bottom: 14px; font-size: 28px; font-weight: 900; background: linear-gradient(135deg, #e3d2ff, #9b6bf0 55%, #ff9fbf); -webkit-background-clip: text; background-clip: text; color: transparent; }

.proc-bento--solo { grid-template-columns: 1fr; }
.proc-bento--solo .proc-bento__visual--wide { grid-column: auto; padding: clamp(20px, 3vw, 40px); }
.proc-bento--solo .proc-intro__compare img { max-width: 640px; margin: 0 auto; }

/* 과정 : 이미지 없는 단계 */
.proc-timeline__card--text { padding: 22px 20px; }
.proc-timeline__card--text .proc-timeline__title { margin-top: 0; padding: 0; }
.proc-timeline__card--text p { padding: 0; }

/* 자주 묻는 질문 */
.proc-faq { max-width: 900px; border-top: 2px solid var(--ink); }
.proc-faq details { border-bottom: 1px solid var(--line); }
.proc-faq summary {
	position: relative; display: block; padding: 24px 56px 24px 44px;
	font-size: 18px; font-weight: 700; line-height: 1.5; cursor: pointer; list-style: none;
}
.proc-faq summary::-webkit-details-marker { display: none; }
.proc-faq summary:before { content: 'Q'; position: absolute; left: 4px; top: 24px; font-weight: 900; color: var(--accent); }
.proc-faq summary:after {
	content: ''; position: absolute; right: 12px; top: 50%; width: 10px; height: 10px; margin-top: -8px;
	border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s;
}
.proc-faq details[open] summary:after { transform: rotate(-135deg); margin-top: -2px; }
.proc-faq details p { margin: -6px 0 0; padding: 0 20px 26px 44px; font-size: 16px; line-height: 1.8; color: var(--text); }
@media screen and (max-width: 767px) {
	.proc-faq summary { padding: 18px 40px 18px 32px; font-size: 16px; }
	.proc-faq summary:before { top: 18px; left: 2px; }
	.proc-faq details p { padding: 0 8px 20px 32px; font-size: 15px; }
}

/* 특징 블록 : 이미지 없을 때 한 칸 */
.proc-feature:not(:has(.proc-feature__image)) { grid-template-columns: 1fr; }
.proc-feature--pair .proc-feature__image:has(figure:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }

/* 치료 프로그램 카드 */
.proc-programs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.proc-programs > li { position: relative; display: flex; flex-direction: column; padding: 28px 26px; border-radius: var(--radius-l); background: #fff; border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s, transform .2s; }
.proc-programs > li:hover { border-color: rgba(132, 74, 215, .35); box-shadow: 0 14px 36px rgba(91, 42, 166, .08); transform: translateY(-3px); }
.proc-programs__num { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--accent); }
.proc-programs h3 { margin: 8px 0 10px; font-size: 21px; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; }
.proc-programs p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text); }
.proc-programs ul { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 18px; }
.proc-programs ul li { position: relative; padding: 10px 14px 10px 34px; border-radius: 12px; background: var(--accent-soft); font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--accent-deep); }
.proc-programs ul li:before { content: ''; position: absolute; left: 13px; top: 15px; width: 10px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
@media screen and (max-width: 767px) {
	.proc-programs { grid-template-columns: 1fr; gap: 10px; }
	.proc-programs > li { padding: 22px 20px; border-radius: var(--radius-m); }
	.proc-programs h3 { font-size: 19px; }
}

/* 유형 : 원형 피부 사진 */
.proc-types--circle .proc-types__item { grid-template-columns: 140px minmax(0, 1fr); }
.proc-types--circle .proc-types__image img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; }
@media screen and (max-width: 767px) {
	.proc-types--circle .proc-types__item { grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
	.proc-types--circle .proc-types__image img { width: 96px; height: 96px; }
}

.proc-types__item--text { grid-template-columns: 1fr; padding: 24px 28px; }
.proc-types__item--text .proc-types__text { padding: 0; }
.proc-faq__more { display: inline-block; margin-left: 4px; font-weight: 700; color: var(--accent, #844ad7); white-space: nowrap; }