/* ========================================
   [Main] START
   ======================================== */

.main {
	display: block;
}

/* ========================================
   [Main-sequence] Hero → Intro → Brending START
   ======================================== */

.main-sequence {
	position: relative;
	/* height는 JS에서 스크롤 구간에 맞게 갱신 */
	/* height: 1200vh; */
}

.main-sequence__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	min-height: 100vh;
	overflow: hidden;
	isolation: isolate;
}

.main-sequence .hero,
.main-sequence .intro,
.main-sequence .brending {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.main-sequence .intro {
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.main-sequence .brending {
	z-index: 3;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.main-sequence.is-intro-ready .intro {
	pointer-events: auto;
}

.main-sequence.is-brending-ready .brending {
	pointer-events: auto;
}

.main-sequence .brending__sticky {
	position: relative;
	top: auto;
	height: 100%;
	min-height: 0;
}

.main-sequence .intro__inner {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	overflow: visible;
}

.main-sequence .intro__card {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	max-width: 451px;
	overflow: hidden;
	mix-blend-mode: normal;
}

.main-sequence .intro__card-media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.main-sequence .intro__card-body {
	transform-origin: center center;
}

.main-sequence .intro__symbol {
	opacity: 0;
}

.main-sequence.is-symbol-handoff .hero__symbol-img,
.main-sequence.is-symbol-handoff .main-sequence__symbol-portal {
	opacity: 0;
	visibility: hidden;
}

.main-sequence.is-symbol-handoff .intro__symbol {
	opacity: 1;
}

.main-sequence .intro__bg {
	transform-origin: center center;
	will-change: transform, opacity;
}

.main-sequence .intro__media {
	--intro-dim: 0.8;
}

/* .main-sequence .intro__media::after {
	background: rgba(0, 0, 0, var(--intro-dim));
} */

.main-sequence .hero__symbol-img {
	opacity: 0;
}

.main-sequence__symbol-portal {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	width: 135px;
	height: 139px;
	pointer-events: none;
	will-change: transform;
}

.main-sequence__symbol-img {
	display: block;
	width: 100%;
	height: auto;
}

.main-sequence--static {
	height: auto;
}

.main-sequence--static .main-sequence__pin {
	position: relative;
	height: auto;
	min-height: 0;
	overflow: visible;
}

.main-sequence--static .hero,
.main-sequence--static .intro,
.main-sequence--static .brending {
	position: relative;
	inset: auto;
	height: auto;
	min-height: 100vh;
}

.main-sequence--static .brending {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.main-sequence--static .brending__sticky {
	position: sticky;
	top: 0;
	min-height: 640px;
}

.main-sequence--static .hero__symbol-img,
.main-sequence--static .intro__symbol {
	opacity: 1;
}

.main-sequence--static .main-sequence__symbol-portal {
	display: none;
}

.main-sequence--static .intro {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.main-sequence--static .intro__card-body {
	transform: none;
}

/* ========================================
   [Main-sequence] Hero → Intro → Brending END
   ======================================== */

/* ========================================
   [Hero] START
   ======================================== */

/* --- PC (default) --- */
:root {
	--header-height: 100px;
}

.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	overflow: hidden;
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
	pointer-events: none;
}

.hero__video {
	position: relative;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100dvh;
	padding: var(--header-height) 40px 0;
}

.main-sequence .hero__content {
	min-height: 100%;
}

.hero__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

.hero__symbol {
	display: flex;
	flex-shrink: 0;
	justify-content: flex-end;
	width: 389px;
	padding-left: 250px;
}

.hero__symbol-img {
	display: block;
	width: 135px;
	height: auto;
}

.hero__line {
	flex: 0 1 358px;
	width: 100%;
	max-width: 358px;
	height: 1px;
	background: var(--white);
	transform-origin: left center;
}

.hero__copy {
	position: relative;
	flex-shrink: 0;
	width: 707px;
	max-width: 100%;
	min-height: 154px;
}

.hero__title {
	margin: 0;
	max-width: 378px;
	color: var(--white);
    font-weight: 400;
}

.hero__title-line {
	display: block;
}

.hero__desc {
	position: absolute;
	top: 82px;
	left: 246px;
	margin: 0;
	color: var(--white);
}

.hero__desc p {
	margin: 0;
}

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 78px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 21px;
	transform: translateX(-50%);
}

.hero__scroll-icon {
	display: block;
	flex-shrink: 0;
	width: 77px;
	height: 77px;
}

.hero__scroll-line {
	opacity: 0;
}

.hero__scroll-dot {
	transform-box: fill-box;
	transform-origin: 38.084px 45.6435px;
}

.hero__scroll-text {
	margin: 0;
	color: var(--white);
	white-space: nowrap;
}
.main-sequence__symbol-portal {
	width: 135px;
	height: auto;
	aspect-ratio: 135 / 139;   /* 고정 139px 제거 */
}

@media screen and (max-width: 640px) {
	.main-sequence__symbol-portal { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
	.hero__scroll-line {
		opacity: 0.8;
	}

	.hero__scroll-dot {
		transform: translateY(-11.82px);
		opacity: 1;
	}
}

/* --- max-width: 1440px --- */
@media screen and (max-width: 1440px) {
	.hero__symbol {
		width: 280px;
		padding-left: 120px;
	}

	.hero__line {
		flex-basis: 240px;
		max-width: 240px;
	}

	.hero__copy {
		width: min(707px, 100%);
	}

	.hero__desc {
		left: 280px;
	}
}

/* --- max-width: 1024px --- */
@media screen and (max-width: 1024px) {
	:root {
		--header-height: 100px;
	}

	.hero {
		min-height: 100vh;
		min-height: 100dvh;
	}

	.hero__content {
		padding: var(--header-height) 24px 0;
	}

	.hero__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		max-width: 640px;
	}

	.hero__symbol {
		width: auto;
		padding-left: 0;
	}

	.hero__line {
		display: none;
	}

	.hero__copy {
		width: 100%;
		min-height: 0;
	}

	.hero__title {
		max-width: none;
	}

	.hero__desc {
		position: static;
		margin-top: 20px;
	}
}

/* --- max-width: 640px --- */
@media screen and (max-width: 640px) {
	:root {
		--header-height: 64px;
	}

	.hero__content {
		padding: var(--header-height) 20px 0;
	}

	.hero__symbol-img {
		width: 96px;
	}

	.hero__scroll {
		bottom: 40px;
		gap: 12px;
	}

	.hero__scroll-icon {
		width: 56px;
		height: 56px;
	}
}

/* ========================================
   [Hero] END
   ======================================== */

/* ========================================
   [Intro] START
   ======================================== */

/* --- PC (default) --- */
.intro {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	overflow: hidden;
	isolation: isolate;
}

.intro__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.intro__bg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: luminosity;
}

/* .intro__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
	pointer-events: none;
} */

.intro__marquee {
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 1;
	width: 100%;
	overflow: hidden;
	pointer-events: none;
	transform: translateY(-50%);
}

.intro__marquee-track {
	display: flex;
	align-items: center;
	gap: 40px;
	width: max-content;
	will-change: transform;
}

.intro__marquee-img {
	display: block;
	flex-shrink: 0;
	width: 983px;
	max-width: none;
	height: auto;
}

.intro__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 40px 20px;
}

.intro__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 451px;
	mix-blend-mode: luminosity;
}

.intro__card-media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
	background-image: url('/images/brending-bg.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.intro__card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0) 17.5%,
        rgba(0, 0, 0, 0) 82.5%,
        rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
}


.intro__card-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 208px;
	width: 100%;
	padding: 30px;
}

.intro__wordmark {
	display: block;
	width: 187px;
	height: auto;
}

.intro__symbol {
	display: block;
	width: 135px;
	height: auto;
}

.intro__desc {
	margin: 0;
	width: 100%;
	color: var(--white);
	text-align: left;
}

.intro__desc p {
	margin: 0;
}

/* --- max-width: 1024px --- */
@media screen and (max-width: 1024px) {
	.intro {
		min-height: 100vh;
		min-height: 720px;
	}

	.intro__marquee-img {
		width: 640px;
	}

	.intro__card-body {
		gap: 80px;
		padding: 24px;
	}

	.intro__wordmark {
		width: 160px;
	}

	.intro__symbol {
		width: 110px;
	}
}

/* --- max-width: 640px --- */
@media screen and (max-width: 640px) {
	.intro__marquee-img {
		width: 480px;
	}

	.intro__card-body {
		gap: 48px;
	}

	.intro__wordmark {
		width: 140px;
	}

	.intro__symbol {
		width: 96px;
	}
}

/* ========================================
   [Intro] END
   ======================================== */

/* ========================================
   [Brending] START
   ======================================== */

/* --- PC (default) --- */
.brending {
	position: relative;
}

.brending__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	min-height: 640px;
	overflow: hidden;
	isolation: isolate;
}

.brending__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.brending__bg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: luminosity;
}

/* .brending__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none;
} */

.brending__viewport {
	position: relative;
	z-index: 1;
	height: 100%;
	overflow: hidden;
}

.brending__track {
	position: relative;
	width: 100%;
	height: 100%;
}

.brending__step {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	height: 100%;
	padding: 40px 20px;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.brending__step.is-active {
	pointer-events: auto;
}

.brending__step:first-child {
	opacity: 1;
	visibility: visible;
}

.brending__eyebrow,
.brending__title-img,
.brending__tagline,
.brending__step-title,
.brending__step-desc p,
.brending__cta {
	transform-origin: center center;
	will-change: transform, opacity, filter;
}

.brending__step-title {
	overflow: hidden;
}

.brending--static .brending__sticky {
	position: relative;
}

.brending--static .brending__track {
	display: flex;
	flex-direction: column;
}

.brending--static .brending__step {
	position: relative;
	inset: auto;
	min-height: 100vh;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.brending__step--last .brending__cta {
	margin-top: 0;
}

.brending__eyebrow{
    color: var(--SUB--text, #615A4E);
    font-size: var(--sp-30);
    font-weight: 300;
    line-height: 130%;
    margin-top: var(--sp-32);
}
.brending__tagline {
	color: var(--main-color);
    font-size: var(--sp-44);
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.88px;
    margin-top: var(--sp-64);
}


.brending__title-img {
	display: block;
	width: min(590px, 88vw);
	height: auto;
}


.brending__step-title {
	margin: 0;
	color: var(--point);
}

.brending__step-desc {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	color: var(--light);
}

.brending__step-desc p {
	margin: 0;
	overflow: hidden;
	color: inherit;
}

/* --- max-width: 1024px --- */
@media screen and (max-width: 1024px) {

	.brending__tagline {
        font-size: var(--sp-26);
        margin-top: var(--sp-40);
    }

	.brending__step--last {
		gap: 48px;
	}
    .brending__eyebrow{
        font-size: var(--sp-20);
        margin-top: var(--sp-10);
    }
}

/* --- max-width: 640px --- */
@media screen and (max-width: 640px) {
	.brending__tagline {
		letter-spacing: 0.18em;
		text-indent: 0.18em;
		white-space: normal;
		word-break: keep-all;
	}
    .brending__title-img {
        width: min(300px, 88vw);
    }
}

/* ========================================
   [Brending] END
   ======================================== */

/* ========================================
   [Doctor-cards] START
   ======================================== */

.doctor-cards {
	position: relative;
	isolation: isolate;
	padding: 120px 40px;
	overflow: hidden;
}

.doctor-cards {
	& .doctor-cards__bg {
		position: absolute;
		inset: 0;
		z-index: 0;
		background: #F9F7F5;
		pointer-events: none;
	}

	& .doctor-cards__bg-img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0.7;
	}

	& .doctor-cards__inner {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 80px;
		width: 100%;
		max-width: 1680px;
		margin: 0 auto;
	}

	& .doctor-cards__head {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		width: 100%;
		max-width: 920px;
		margin: 0 auto;
		text-align: center;
	}

	& .doctor-cards__title-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}

	& .doctor-cards__eyebrow {
		margin: 0;
		color: #CEBEB4;
	}

	& .doctor-cards__title {
		margin: 0;
		color: #232220;
	}

	& .doctor-cards__title-point {
		color: var(--point);
	}

	& .doctor-cards__desc {
		margin: 0;
		color: #615A4E;
	}

	& .doctor-cards__desc p {
		margin: 0;
	}

	& .doctor-cards__grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 27px;
		width: 100%;
	}

	& .doctor-cards__cta-wrap {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	& .doctor-cards__cta {
		width: 236px;
        padding-right: 7px;
	}
}

.doctor-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}

.doctor-card {
	& .doctor-card__head {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		min-height: 70px;
		text-align: center;
	}

	& .doctor-card__role {
		margin: 0;
		color: var(--point);
	}

	& .doctor-card__name {
		margin: 0;
		color: #232220;
	}

	& .doctor-card__media {
		width: 100%;
		margin: 0;
		overflow: hidden;
		background: var(--white);
	}

	& .doctor-card__media-link {
		display: block;
		width: 100%;
		text-decoration: none;
	}

	& .doctor-card__photo {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 400 / 600;
		object-fit: cover;
	}

	& .doctor-card__meta {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: 100%;
	}

	& .doctor-card__row {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		width: 100%;
	}

	& .doctor-card__row--specialty {
		padding-bottom: 12px;
		border-bottom: 0.5px solid #E3DDD9;
	}

	& .doctor-card__label {
		flex-shrink: 0;
		color: #232220;
	}

	& .doctor-card__value {
		margin: 0;
		color: #615A4E;
		word-break: keep-all;
	}
}

/* --- max-width: 1440px --- */
@media screen and (max-width: 1440px) {
    .doctor-cards {
        padding: 100px 32px;
    }

    .doctor-cards .doctor-cards__inner {
        gap: 64px;
    }

    .doctor-cards .doctor-cards__grid {
        gap: 20px;
    }
}

@media screen and (max-width: 991px) {
    .doctor-cards {
        padding: 80px 24px;
    }

    .doctor-cards .doctor-cards__inner {
        gap: 56px;
    }

    .doctor-cards .doctor-cards__swiper {
        width: calc(100% + 24px);
        margin-right: -24px;

        /* 오른쪽은 보여주되 왼쪽은 swiper 시작점에서 자름 */
        overflow: visible;
        clip-path: inset(0 -100vw 0 0);
    }

    .doctor-cards .doctor-cards__grid {
        display: flex;
        grid-template-columns: none;
        gap: 0;
        width: 100%;
    }

    .doctor-cards .doctor-card {
        flex-shrink: 0;
        max-width: none;
        margin: 0;
        height: auto;
        gap: 0;
    }
    .doctor-card__meta{
        margin-top: 20px;
    }
}

/* --- max-width: 640px --- */
@media screen and (max-width: 640px) {

    .doctor-cards {
        padding: 60px 20px;
    }

    .doctor-cards .doctor-cards__inner {
        gap: 48px;
    }

    .doctor-cards .doctor-cards__head {
        gap: 20px;
    }

    .doctor-cards .doctor-cards__cta {
        width: 100%;
        max-width: 180px;
        padding-right: 4px;
    }

    .doctor-cards .doctor-cards__swiper {
        width: calc(100% + 20px);
        margin-right: -20px;
    }
}

/* ========================================
   [Doctor-cards] END
   ======================================== */

/* ========================================
   [Medical-staff] START
   ======================================== */

.medical-staff {
	position: relative;
	/* height: JS syncMedicalStaffSectionHeight() — (SCROLL_VH + 1) viewport */
	background: var(--black);
}

.medical-staff__sticky {
	position: relative;
	display: flex;
	align-items: center;
	height: 100vh;
	min-height: 640px;
	overflow: hidden;
}

.medical-staff__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	max-width: 1920px;
	height: 100%;
	margin: 0 auto;
	padding: 80px 120px;
}

.medical-staff__left {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 64px;
	width: min(100%, 520px);
}

.medical-staff__head {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.medical-staff__eyebrow {
	margin: 0;
	color: var(--point);
}

.medical-staff__title {
	margin: 0;
	color: var(--white);
}

.medical-staff__desc {
	margin: 0;
	color: var(--neutral-400);
}

.medical-staff__desc p {
	margin: 0;
}

.medical-staff__steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.medical-staff__step {
	display: flex;
	align-items: center;
	gap: 20px;
	opacity: 0.35;
	transition: opacity 0.45s ease;
}

.medical-staff__step.is-active {
	opacity: 1;
}

.medical-staff__step.is-passed {
	opacity: 0.55;
}

.medical-staff__step-meta {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

.medical-staff__step-num,
.medical-staff__step-dash {
	color: var(--neutral-400);
	font-weight: 700;
}

.medical-staff__step-label {
	color: var(--neutral-400);
}

.medical-staff__step.is-active .medical-staff__step-num,
.medical-staff__step.is-active .medical-staff__step-dash,
.medical-staff__step.is-active .medical-staff__step-label {
	color: var(--point);
}

.medical-staff__step.is-active .medical-staff__step-label {
	color: var(--white);
}

.medical-staff__step.is-passed .medical-staff__step-num,
.medical-staff__step.is-passed .medical-staff__step-dash,
.medical-staff__step.is-passed .medical-staff__step-label {
	color: var(--neutral-400);
}

.medical-staff__step-bar {
	position: relative;
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 252, 243, 0.1);
	overflow: hidden;
}

.medical-staff__step-bar-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--point);
	transform-origin: left center;
	transition: width 0.12s linear;
}

.medical-staff__step.is-passed .medical-staff__step-bar-fill {
	width: 100%;
}

.medical-staff__cta {
	width: 256px;
}

.medical-staff__right {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 100%;
}

.medical-staff__visual {
	position: relative;
	width: min(100%, 800px);
	height: min(100%, 664px);
	aspect-ratio: 800 / 664;
}

.medical-staff__canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.medical-staff__labels {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

.medical-staff__label {
	position: absolute;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	opacity: 0.45;
	transition:
		opacity 0.45s ease,
		transform 0.45s ease;
}

.medical-staff__label-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.medical-staff__label[data-part="crown"] {
	top: 18%;
}

.medical-staff__label[data-part="abutment"] {
	top: 44%;
}

.medical-staff__label[data-part="fixture"] {
	top: 66%;
}

.medical-staff__label.is-active {
	opacity: 1;
	transform: translateX(-4px);
}

.medical-staff__label-line {
	display: block;
	flex-shrink: 0;
	width: 120px;
	height: 1px;
	background: rgba(255, 252, 243, 0.2);
	transform-origin: right center;
	transition:
		background-color 0.45s ease,
		opacity 0.45s ease;
}

.medical-staff__label.is-active .medical-staff__label-line {
	background: var(--point);
	opacity: 0.55;
}

.medical-staff__label-text {
	color: var(--white);
	white-space: nowrap;
}

.medical-staff__label.is-active .medical-staff__label-text {
	color: var(--point);
}

.medical-staff__label-text-en {
	color: rgba(255, 252, 243, 0.5);
	white-space: nowrap;
}

.medical-staff--static {
	height: auto;
}

.medical-staff--static .medical-staff__sticky {
	position: relative;
	height: auto;
	min-height: 720px;
}

/* --- max-width: 1440px --- */
@media screen and (max-width: 1440px) {
	.medical-staff__inner {
		padding: 72px 80px;
	}

	.medical-staff__left {
		width: min(100%, 460px);
		gap: 48px;
	}
}

/* --- max-width: 1024px --- */
@media screen and (max-width: 1024px) {
	.medical-staff {
		height: auto;
	}

	.medical-staff__sticky {
		position: relative;
		height: auto;
		min-height: 0;
	}

	.medical-staff__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 48px;
		padding: 80px 24px;
	}

	.medical-staff__left {
		width: 100%;
		gap: 40px;
	}

	.medical-staff__right {
		height: auto;
	}

	.medical-staff__visual {
		width: 100%;
		max-width: 560px;
		margin: 0 auto;
	}

	.medical-staff__label-line {
		width: 80px;
	}
}

/* --- max-width: 640px --- */
@media screen and (max-width: 640px) {
	.medical-staff__inner {
		padding: 60px 20px;
		gap: 40px;
	}

	.medical-staff__head {
		gap: 24px;
	}

	.medical-staff__step {
		flex-wrap: wrap;
	}

	.medical-staff__step-bar {
		flex-basis: 100%;
		max-width: 120px;
		margin-left: calc(14px + 20px + 14px + 20px);
	}

	.medical-staff__cta {
		width: 100%;
		max-width: 256px;
	}

	.medical-staff__label[data-part="crown"] {
		top: 14%;
	}

	.medical-staff__label[data-part="abutment"] {
		top: 42%;
	}

	.medical-staff__label[data-part="fixture"] {
		top: 68%;
	}
}

/* ========================================
   [Medical-staff] END
   ======================================== */

/* ========================================
   [Ido-care] START
   ======================================== */

.ido-care {
	position: relative;
	--ido-care-section-pad-block: 120px;
	padding: var(--ido-care-section-pad-block) 0;
	background: var(--white);
	--ido-care-gutter: clamp(24px, 4.76vw, 80px);
}

.ido-care__frame {
	position: relative;
	width: 100%;
	padding: 0 clamp(20px, 6.25vw, 120px);
}

.ido-care__frame::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 100vw;
	height: 1px;
	background: var(--neutral-300);
	transform: translateX(-50%);
	pointer-events: none;
}

.ido-care__rail {
	position: relative;
	width: 100%;
	max-width: 2560px;
	margin: 0 auto;
}

.ido-care {
	& .ido-care__vline {
		position: absolute;
		top: calc(var(--ido-care-section-pad-block) * -1);
		width: 1px;
		height: calc(100% + var(--ido-care-section-pad-block) * 2);
		background: var(--neutral-300);
		pointer-events: none;
	}

	& .ido-care__vline--left {
		left: 0;
	}

	& .ido-care__vline--right {
		right: 0;
	}

	& .ido-care__inner {
		width: 100%;
		padding: 0 
	}

	& .ido-care__head {
		display: flex;
		flex-direction: column;
		gap: 20px;
		max-width: 1520px;
		margin: 0 auto 80px;
	}

	& .ido-care__eyebrow {
		margin: 0;
		color: var(--point);
	}

	& .ido-care__title {
		margin: 0;
		color: var(--dark);
	}

	& .ido-care__articles {
		display: flex;
		flex-direction: column;
		margin-inline: calc(var(--ido-care-gutter) * -1);
	}

	& .ido-care__split {
		display: grid;
		grid-template-columns: minmax(0, 747px) minmax(0, 643px);
		justify-content: space-between;
		padding-inline: var(--ido-care-gutter);
		border-top: 1px solid var(--neutral-300);
		border-bottom: 1px solid var(--neutral-300);
	}
}

.ido-care-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ido-care-card {
	& .ido-care-card__content {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	& .ido-care-card__content-main {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 24px;
	}

	& .ido-care-card__copy {
		display: flex;
		flex-direction: column;
		gap: 20px;
		min-width: 0;
	}

	& .ido-care-card__title {
		margin: 0;
		color: var(--point);
	}

	& .ido-care-card__desc {
		margin: 0;
		color: var(--gray-500);
	}

	& .ido-care-card__desc p {
		margin: 0;
	}

	& .ido-care-card__link {
		display: inline-flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		gap: 12px;
		min-width: 144px;
		padding: 15px 21px;
		border: 1px solid var(--neutral-300);
		background: transparent;
		color: var(--gray-500);
		text-decoration: none;
		transition:
			border-color 0.3s ease,
			color 0.3s ease;
	}

	& .ido-care-card__link--block {
		align-self: flex-start;
	}

	& .ido-care-card__link-text {
		color: inherit;
	}

	& .ido-care-card__link img {
		display: block;
		flex-shrink: 0;
		width: 9px;
		height: 13px;
	}

	& .ido-care-card__media {
		position: relative;
		width: 100%;
		overflow: hidden;
		background: var(--black);
	}

	& .ido-care-card__video {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform-origin: center center;
		will-change: transform;
	}
}

.ido-care-card--stack-media-bottom {
	padding: 1px 0 90px;
	border-right: 1px solid var(--neutral-300);
}

.ido-care-card--stack-media-bottom {
	& .ido-care-card__content {
		width: 100%;
		max-width: 633px;
		padding: 50px 0;
	}

	& .ido-care-card__media {
		width: 100%;
		max-width: 633px;
		aspect-ratio: 633 / 640;
	}
}

.ido-care-card--stack-media-top {
	padding: 1px 0 0;

	& .ido-care-card__media {
		width: 100%;
		max-width: 643px;
		aspect-ratio: 643 / 630;
	}

	& .ido-care-card__content {
		width: 100%;
		max-width: 643px;
		padding: 60px 0;
	}
}

.ido-care-card--row-media-right {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: clamp(32px, 5vw, 80px);
	/* padding: 90px 0 90px var(--ido-care-gutter); */
}

.ido-care-card--row-media-right {
	& .ido-care-card__content {
		flex: 0 1 auto;
		width: auto;
		max-width: none;
		gap: 32px;
	}

	& .ido-care-card__media {
		flex: 0 1 851px;
		width: 100%;
		max-width: 851px;
		margin-left: auto;
		aspect-ratio: 851 / 457;
	}
}

@media (hover: hover) and (pointer: fine) {
	.ido-care-card {
		& .ido-care-card__link:hover {
			border-color: var(--point);
			color: var(--point);
		}
	}
}

/* --- max-width: 1440px --- */
@media screen and (max-width: 1440px) {
	.ido-care {
		--ido-care-section-pad-block: 100px;
		padding: var(--ido-care-section-pad-block) 0;
	}

	.ido-care-card--row-media-right {
		padding-block: 96px;
	}
}

/* --- max-width: 1024px --- */
@media screen and (max-width: 1024px) {
	.ido-care {
		--ido-care-section-pad-block: 80px;
		padding: var(--ido-care-section-pad-block) 0;
	}

	.ido-care__frame {
		padding: 0 24px;
	}

	.ido-care {
		& .ido-care__vline {
			display: none;
		}

		& .ido-care__head {
			margin-bottom: 48px;
		}

		& .ido-care__split {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.ido-care-card--stack-media-bottom {
		padding: 0;
		border-right: none;
		border-bottom: 1px solid var(--neutral-300);
	}

	.ido-care-card--stack-media-bottom {
		& .ido-care-card__content,
		& .ido-care-card__media {
			max-width: none;
		}
	}

	.ido-care-card--stack-media-top {
		& .ido-care-card__content,
		& .ido-care-card__media {
			max-width: none;
		}
	}

	.ido-care-card--row-media-right {
		flex-direction: column;
		align-items: stretch;
		padding-block: 64px;
	}

	.ido-care-card--row-media-right {
		& .ido-care-card__media {
			flex: none;
			max-width: none;
			margin-left: 0;
		}
	}
}

/* --- max-width: 640px --- */
@media screen and (max-width: 640px) {
	.ido-care {
		--ido-care-section-pad-block: 60px;
		padding: var(--ido-care-section-pad-block) 0;
	}

	.ido-care__frame {
		padding: 0 20px;
	}

	.ido-care {
		& .ido-care__head {
			gap: 16px;
			margin-bottom: 40px;
		}
	}

	.ido-care-card {
		& .ido-care-card__content-main {
			flex-direction: column;
			align-items: flex-start;
		}

		& .ido-care-card__content {
			padding-top: 40px;
			padding-bottom: 40px;
		}
	}

	.ido-care-card--stack-media-top {
		& .ido-care-card__content {
			padding: 40px 0;
		}
	}

	.ido-care-card--row-media-right {
		padding-block: 48px;
	}
}

/* ========================================
   [Ido-care] END
   ======================================== */

/* ========================================
   [Special-yido] START
   ======================================== */

/* .special-yido {
	position: relative;
	--special-yido-gallery-pad: clamp(32px, 5vh, 80px);
	--special-yido-card-height: min(670px, calc(100vh - var(--special-yido-gallery-pad) * 2));
	--special-yido-card-width: calc(var(--special-yido-card-height) * 558 / 670);
	--special-yido-card-stack: 32px;
	--special-yido-scroll-height: 100vh;
}

.special-yido__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: var(--special-yido-scroll-height);
}

.special-yido__panel--intro,
.special-yido__panel--gallery {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
} */

.special-yido {
    position: relative;
}

.special-yido__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;

    /* 카드 애니메이션에 사용할 스크롤 공간 */
    height: 400vh;
}

/* 왼쪽 */
.special-yido__panel--intro {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

/* 오른쪽 */
.special-yido__panel--gallery {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}
.special-yido__panel--intro {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	/* background: var(--main-color); */
}

.special-yido__panel-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.special-yido__panel-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.special-yido__intro {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vh, 40px);
	width: 100%;
	max-width: 650px;
	transform: translate3d(0, 0, 0);
}

.special-yido__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.special-yido__eyebrow {
	margin: 0;
	color: #CEBEB4;
}

.special-yido__title {
	margin: 0;
	color: var(--white);
}

.special-yido__desc {
    display:flex;
    justify-content: flex-end;
	margin: 0;
	padding-top: 20px;
	color: var(--white);
}

.special-yido__desc p {
    display:inline-block;
	margin: 0;
}

.special-yido__steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.special-yido__step {
	display: flex;
	align-items: flex-end;
	flex-shrink: 0;
	gap: 20px;
	min-height: 100px;
	padding: 24px;
	box-sizing: border-box;
	opacity: 1;
	transform: translate3d(0, 0, 0);
    background: rgba(0, 0, 0, 0.10);
}

.special-yido__step--hidden {
	max-height: 0;
	margin-top: 0;
	padding-block: 0;
	border-width: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

.special-yido__step-head {
	position: relative;
	flex-shrink: 0;
	width: min(100%, 210px);
	height: 60px;
}

.special-yido__step-index {
	position: absolute;
	top: 5px;
	left: 0;
	display: block;
	width: 48px;
	height: 44px;
	object-fit: contain;
	object-position: left top;
}

.special-yido__step-title {
	position: absolute;
	left: 20px;
	bottom: 0;
	margin: 0;
	color: var(--white);
	white-space: nowrap;
}

.special-yido__step-desc {
	flex: 1;
	min-width: 0;
	max-width: 379px;
	margin: 0;
	color: var(--white);
}

.special-yido__panel--gallery {
	display: flex;
	align-items: center;
	justify-content: center;
	/* padding: var(--special-yido-gallery-pad) clamp(24px, 2.08vw, 40px); */
	/* background: var(--light); */
}

.special-yido__gallery-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	/* overflow: hidden; */
}

.special-yido__cards {
	position: relative;
	width: min(100%, var(--special-yido-card-width));
	height: 50vh;
}

.special-yido-card {
	position: absolute;
	top: -10vh;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: clamp(20px, 2.5vh, 30px);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    aspect-ratio: 558 / 670;
}

.special-yido-card:nth-child(1) {
	z-index: 1;
	transform: translateY(0);
}

.special-yido-card:nth-child(2) {
	z-index: 2;
	transform: translateY(100%);
	visibility: hidden;
}

.special-yido-card:nth-child(3) {
	z-index: 3;
	transform: translateY(100%);
	visibility: hidden;
}

.special-yido-card__bg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.special-yido-card__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	text-align: center;
}

.special-yido-card__title {
	margin: 0;
	color: var(--white);
}

.special-yido-card__desc {
	margin: 0;
	color: var(--white);
}

.special-yido--static {
	min-height: 0;
	overflow: visible;

	& .special-yido__panel--intro,
	& .special-yido__panel--gallery {
		position: relative;
		height: auto;
		overflow: visible;
	}
/* 
	& .special-yido__panel--intro {
		padding-block: clamp(60px, 9.375vw, 120px);
	}

	& .special-yido__panel--gallery {
		padding-block: clamp(60px, 9.375vw, 120px);
	} */

	& .special-yido__step {
		opacity: 1;
		transform: none;
	}
}

/* --- max-width: 1440px --- */
/* @media screen and (max-width: 1440px) {
	.special-yido__panel--intro {
		padding-inline: clamp(24px, 5.56vw, 80px);
	}
} */

/* --- max-width: 1024px --- */
@media screen and (max-width: 1024px) {

    .special-yido-card__content,
    .special-yido-card__title,
    .special-yido-card__desc {
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
        animation: none !important;
    }
	.special-yido__layout {
        height: auto;
        min-height: 0;

        display: block;
    }

    .special-yido__panel--intro,
    .special-yido__panel--gallery {
        position: relative;
        top: auto;

        height: auto;
        min-height: 0;

        overflow: visible;
        padding-top: 80px;
        padding-bottom: 80px;
    }

	.special-yido__panel--intro {
		justify-content: flex-start;
	}

	.special-yido__intro {
		max-width: none;
		max-height: none;
		overflow: visible;
	}

	.special-yido__step {
		flex-direction: column;
		align-items: flex-start;
		opacity: 1;
		transform: none;
	}

	.special-yido__step-desc {
		max-width: none;
	}

    .special-yido-card__content {
        position: relative;
        z-index: 2;
        -webkit-transform: translateZ(1px);
        transform: translateZ(1px);
    }
	.special-yido__gallery-pin {
        position: relative;
        width: 100%;
        padding-bottom: 120px;
        overflow: hidden;
    }

    .special-yido__cards {
        position: relative;
        width: min(75vw, 420px);
        height: auto;
        margin: 0 auto;
        display: block;
        aspect-ratio: 4 / 4.5;
    }

    .special-yido-card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        visibility: visible !important;
        opacity: 1 !important;
        animation-duration: 5s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        aspect-ratio: auto;
        animation-play-state: paused;
         isolation: isolate;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    .special-yido-card__bg {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .special-yido.is-mobile-card-active .special-yido-card {
        animation-play-state: running;
    }


    /* 1번 카드 */
    .special-yido-card:nth-child(1) {
        z-index: 1;
        transform: translateY(0);
    }


    /* 2번 카드 */
    .special-yido-card:nth-child(2) {
        z-index: 2;
        animation-name: specialYidoCard2;
    }


    /* 3번 카드 */
    .special-yido-card:nth-child(3) {
        z-index: 3;
        animation-name: specialYidoCard3;
    }


    @keyframes specialYidoCard2 {

        /* 처음엔 아래 */
        0%,
        20% {
            transform: translateY(140%);
        }

        /* 올라옴 */
        32% {
            transform: translateY(60px);
        }

        /* 3번이 올라와도 여기 그대로 */
        32%,
        90% {
            transform: translateY(60px);
        }

        /* 반복 직전 리셋 */
        100% {
            transform: translateY(140%);
        }
    }


    @keyframes specialYidoCard3 {

        /* 2번 올라오는 동안 아래에서 대기 */
        0%,
        48% {
            transform: translateY(140%);
        }

        /* 올라와서 2번 위에 겹침 */
        62% {
            transform: translateY(120px);
        }

        /* 그대로 유지 */
        62%,
        90% {
            transform: translateY(120px);
        }

        /* 반복 직전 아래로 리셋 */
        100% {
            transform: translateY(140%);
        }
    }
    .special-yido-card video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}

/* --- max-width: 640px --- */
@media screen and (max-width: 640px) {
	/* .special-yido__panel--intro,
	.special-yido__panel--gallery {
		padding-block: 60px;
	} */

	.special-yido__head {
		gap: 16px;
	}

	.special-yido__desc {
		padding-top: 12px;
	}

	.special-yido__steps {
		padding-top: 12px;
	}

	.special-yido__step {
		min-height: 0;
		padding: 20px;
	}

	.special-yido-card {
		min-height: 360px;
		padding: 24px;
	}
    .special-yido__cards {
        width: 100% !important;
    }
}

/* ========================================
   [Special-yido] END
   ======================================== */

/* ========================================
   [Before-after] START
   ======================================== */

.before-after {
	position: relative;
	padding: clamp(80px, 8.33vw, 160px) clamp(20px, 4.43vw, 85px);
	overflow: hidden;
}

.before-after__glow {
	position: absolute;
	top: -210px;
	right: -50px;
	width: min(690px, 55vw);
	/* opacity: 0.6; */
	pointer-events: none;
}

.before-after__glow img {
	display: block;
	width: 100%;
	height: auto;
}

.before-after__inner {
	position: relative;
	z-index: 1;
	max-width: 1750px;
	margin: 0 auto;
}

.before-after__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: clamp(40px, 4.17vw, 80px);
}

.before-after__eyebrow {
	margin: 0;
	color: #CEBEB4;
	text-align: center;
}

.before-after__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 0;
}

.before-after__title-letter {
	margin: 0;
	color: var(--main-color);
	line-height: 1.3;
}

.before-after__title-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 107px;
	height: 18px;
}

.before-after__title-divider img {
	display: block;
	width: 100%;
	height: auto;
}

.before-after__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 285px));
	grid-template-rows: repeat(2, minmax(0, 285px));
	gap: 8px;
	justify-content: center;
}

.before-after__empty {
	margin: 40px 0 0;
	color: var(--sub-color);
	text-align: center;
}

.before-after-card {
	position: relative;
	overflow: hidden;
}

.before-after.is-scroll-reveal:not(.is-revealed) .before-after-card {
	opacity: 0;
	transform: translateY(24px);
}

.before-after.is-scroll-reveal.is-revealed .before-after-card {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.45s ease,
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--ba-reveal-delay, 0s);
}

.before-after.is-scroll-reveal.is-scroll-hide .before-after-card {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
	transition-delay: var(--ba-hide-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
	.before-after.is-scroll-reveal:not(.is-revealed) .before-after-card {
		opacity: 1;
		transform: none;
	}
}

.before-after-card__media {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--main-color);
}

.before-after-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}

.before-after-card__img--before {
	opacity: 1;
	z-index: 1;
}

.before-after-card__img--after {
	opacity: 0;
	z-index: 2;
}

.before-after-card__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 7px 15px;
	background: rgba(0, 0, 0, 0.4);
}

.before-after-card__label {
	margin: 0;
	color: var(--white);
	transition: opacity 0.3s ease;
}

.before-after-card__label--title {
	position: absolute;
	left: 15px;
	right: 15px;
	opacity: 0;
}

.before-after-card__lock {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 20px;
	text-align: center;
	background: rgba(0, 0, 0, 0.45);
}

.before-after-card__lock-title {
	margin: 0;
	color: var(--white);
}

.before-after-card__lock-desc {
	margin: 0;
	color: var(--white);
}

.before-after-card__lock-btn {
	padding: 8px 20px;
	border: none;
	border-radius: 999px;
	color: var(--white);
	background: var(--sub-color);
	cursor: pointer;
}

.before-after:not(.is-logged) .before-after-card__img {
	filter: none;
	transform: none;
}

.before-after:not(.is-logged) .before-after-card__lock {
	display: none;
}

.before-after:not(.is-logged) .before-after-card {
	cursor: pointer;
}

.before-after:not(.is-logged) .before-after-card:hover .before-after-card__lock,
.before-after:not(.is-logged) .before-after-card:focus-within .before-after-card__lock {
	display: flex;
}

.before-after.is-logged .before-after-card {
	cursor: pointer;
}

.before-after.is-logged .before-after-card__img {
	filter: none;
	transform: none;
}

.before-after.is-logged .before-after-card:hover .before-after-card__img--before,
.before-after.is-logged .before-after-card:focus-within .before-after-card__img--before {
	opacity: 0;
}

.before-after.is-logged .before-after-card:hover .before-after-card__img--after,
.before-after.is-logged .before-after-card:focus-within .before-after-card__img--after {
	opacity: 1;
}

.before-after.is-logged .before-after-card:hover .before-after-card__label--cat,
.before-after.is-logged .before-after-card:focus-within .before-after-card__label--cat {
	opacity: 0;
}

.before-after.is-logged .before-after-card:hover .before-after-card__label--title,
.before-after.is-logged .before-after-card:focus-within .before-after-card__label--title {
	opacity: 1;
}

.before-after-intro {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	padding: 14px 10px;
}

.before-after-intro__lead {
	margin: 0;
	color: var(--main-color);
}

.before-after-intro__hint {
	margin: 0;
	color: var(--gray-500);
}
.before-after-cta-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
}
.before-after-cta {
	position: relative;
	display: flex;
    align-items: center;
    justify-content: center;
	overflow: hidden;
	color: var(--main-color);
	text-decoration: none;
    width: 143px;
	height: 143px;
}

.before-after-cta__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 143px;
	height: 143px;
	border-radius: 143px;
	background: radial-gradient(
		70.71% 70.71% at 50% 50%,
		color-mix(in srgb, var(--point) 40%, transparent) 20%,
		rgba(255, 255, 255, 0) 50%
	);
	transform: translate(-50%, -50%) scale(1);
	pointer-events: none;
	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.before-after-cta:hover .before-after-cta__glow {
	transform: translate(-50%, -50%) scale(1.14);
}

@media (prefers-reduced-motion: reduce) {
	.before-after-cta__glow {
		transition-duration: 0.01ms;
	}

	.before-after-cta:hover .before-after-cta__glow {
		transform: translate(-50%, -50%) scale(1.05);
	}
}

.before-after-cta__text {
	position: relative;
	z-index: 1;
	margin: 0;
}

.before-after-mo-desc{
    display: none;
}
/* --- max-width: 1440px --- */
@media screen and (max-width: 1440px) {
    .before-after__grid {
        grid-template-columns: repeat(4, minmax(0, 285px));
        grid-template-rows: repeat(2, minmax(0, 285px));
        gap: 8px;
    }

    .before-after-card,
    .before-after-intro,
    .before-after-cta-wrap {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .before-after-intro,
    .before-after-cta-wrap {
        grid-column: span 2 !important;
    }
    .before-after-cta-wrap{
        justify-content: flex-end;
    }

    /* 9번째 카드부터 숨김 */
    .before-after-card:nth-of-type(n+9) {
        display: none;
    }
    
}

/* --- max-width: 1024px --- */
@media screen and (max-width: 1024px) {
	.before-after__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
        gap: 12px;
	}

	.before-after-card,
	.before-after-intro,
	.before-after-cta-wrap {
		grid-column: auto !important;
		grid-row: auto !important;
		min-height: 0;
        aspect-ratio: 1 / 1;
	}

	.before-after__glow {
		display: none;
	}
    .before-after-card:nth-of-type(n+4) {
        display: none;
    }
    .before-after-intro{
        display: none;
    }
    .before-after-card__bar{
        justify-content: center;
    }
    .before-after-card{
        border-radius: 12px;
        overflow: hidden;
    }
    .before-after-cta-wrap{
        border: 1px solid #E3DDD9;
        border-radius: 12px;
        justify-content: center;
    }
    .before-after-mo-desc{
        display: block;
    }
}

/* --- max-width: 640px --- */
@media screen and (max-width: 640px) {
	.before-after {
		padding-top: 60px;
		padding-bottom: 60px;
	}

}

/* ========================================
   [Before-after] END
   ======================================== */

/* ========================================
   [Yido-space] START
   ======================================== */

.yido-space {
	position: relative;
	padding: clamp(80px, 6.67vw, 128px) 0;
	overflow: hidden;
    background-image: url(/images/YIDOSPACE-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.yido-space__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.yido-space__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
}

.yido-space__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: clamp(40px, 3.33vw, 64px);
}

.yido-space__slider-wrap {
	--yido-space-slider-pad-left: clamp(20px, 6.25vw, 120px);
	overflow-x: clip;
	padding-left: var(--yido-space-slider-pad-left);
	padding-right: clamp(20px, 4vw, 80px);
}

.yido-space__slider-stage {
	position: relative;
	--yido-space-deco-size: clamp(120px, 10.9vw, 209px);
	padding-top: calc(var(--yido-space-deco-size) / 2);
}

.yido-space__deco {
	position: absolute;
	top: calc(var(--yido-space-deco-size) / 2);
	left: calc(clamp(12px, 0.78vw, 15px) - var(--yido-space-slider-pad-left));
	z-index: 2;
	width: var(--yido-space-deco-size);
	height: var(--yido-space-deco-size);
	pointer-events: none;
	transform: translateY(-50%);
    z-index: -1;
}

.yido-space__deco img {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: center center;
	animation: yido-space-deco-spin 48s linear infinite;
}

@keyframes yido-space-deco-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.yido-space__deco img {
		animation: none;
	}
}

.yido-space__swiper {
	overflow: visible;
}

.yido-space__swiper .swiper-wrapper {
	align-items: flex-start;
}

.yido-space-slide {
	width: auto;
	height: auto;
}

.yido-space-slide__media {
	margin: 0;
	overflow: hidden;
	background: var(--dark);
}

.yido-space-slide__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yido-space-slide--size-a .yido-space-slide__media {
	width: clamp(280px, 37.8vw, 726px);
	aspect-ratio: 726 / 437;
}

.yido-space-slide--size-b .yido-space-slide__media {
	width: clamp(220px, 28vw, 537px);
	aspect-ratio: 537 / 323;
}

.yido-space-slide--size-c .yido-space-slide__media {
	width: clamp(250px, 32vw, 614px);
	aspect-ratio: 614 / 394;
}

/* 장소명 — Figma 미노출, 추후 사용 가능 */
.yido-space-slide__place {
	display: none;
	margin: 0;
}

.yido-space__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 1.67vw, 26px);
	padding-inline: clamp(20px, 4vw, 40px);
}

.yido-space__desc {
	margin: 0;
	color: var(--main-color);
	text-align: center;
}

.yido-space__title {
	margin: 0;
	color: var(--main-color);
	text-align: center;
	letter-spacing: 0.02em;
}

.yido-space__progress {
	position: relative;
	width: min(100%, 304px);
	height: 2px;
	margin-inline: auto;
	background: color-mix(in srgb, var(--light) 50%, transparent);
}

.yido-space__progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: var(--gray-0);
	transition: width 0.25s ease;
}

/* --- max-width: 1024px --- */
@media screen and (max-width: 1024px) {
	.yido-space__slider-stage {
		--yido-space-deco-size: clamp(96px, 18vw, 140px);
	}

	.yido-space__deco {
		opacity: 0.85;
	}
}

/* --- max-width: 640px --- */
@media screen and (max-width: 640px) {
	.yido-space {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.yido-space__slider-wrap {
		--yido-space-slider-pad-left: 16px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.yido-space__slider-stage {
		--yido-space-deco-size: 0px;
		padding-top: 0;
	}

	.yido-space__deco {
		display: none;
	}

	.yido-space-slide--size-a .yido-space-slide__media {
		width: clamp(240px, 72vw, 320px);
	}

	.yido-space-slide--size-b .yido-space-slide__media {
		width: clamp(200px, 62vw, 280px);
	}

	.yido-space-slide--size-c .yido-space-slide__media {
		width: clamp(220px, 68vw, 300px);
	}
}

/* ========================================
   [Yido-space] END
   ======================================== */

/* ========================================
   [Yido-contact] START
   ======================================== */

.yido-contact {
	padding: clamp(80px, 6.25vw, 120px) 0;
	background: var(--bg);
}

.yido-contact__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 2.08vw, 40px);
	max-width: 1440px;
	margin: 0 auto;
}

.yido-contact__top {
	display: grid;
	grid-template-columns: minmax(0, 324px) minmax(0, 1fr) minmax(0, 416px);
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
}

.yido-contact__title {
	margin: 0 0 30px;
	color: var(--main-color);
}

.yido-contact__subtitle {
	margin: 0;
	color: var(--main-color);
}

.yido-contact__tel {
	margin: 0 0 30px;
}

.yido-contact__tel a {
	color: var(--main-color);
	text-decoration: none;
}

.yido-contact__phone-note {
	margin: 0;
	color: var(--main-color);
}

.yido-contact-hours {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yido-contact-hours__row {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: clamp(24px, 3.33vw, 48px);
	align-items: center;
	margin: 0;
	padding: 0;
}

.yido-contact-hours__label {
	display: flex;
	justify-content: space-between;
	width: 80px;
	margin: 0;
	color: var(--main-color);
}

.yido-contact-hours__char {
	flex-shrink: 0;
}

.yido-contact-hours__time {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--main-color);
}

.yido-contact-hours__time-text {
	flex-shrink: 0;
}

.yido-contact-hours__highlight {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	padding: 2px 6px;
	color: var(--white);
	background: var(--point);
}

.yido-contact-hours__row--highlight .yido-contact-hours__label {
	color: var(--point);
}

.yido-contact-hours__icon {
	display: block;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.yido-contact__hours-note {
	margin: 20px 0 0;
	color: var(--sub-color);
}

.yido-contact__map-wrap {
	overflow: hidden;
	background: var(--gray-0);
}

.yido-contact__map {
	width: 100%;
	height: clamp(320px, 38.75vw, 552px);
}

.yido-contact-map-pin {
	display: flex;
	flex-direction: column;
	align-items: center;
	filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--black) 18%, transparent));
}

.yido-contact-map-pin__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 170px;
	height: 61px;
	background: var(--main-color);
	border-radius: 8px;
}

.yido-contact-map-pin__logo {
	display: block;
	width: 130px;
	height: auto;
}

.yido-contact-map-pin__tail {
	width: 38px;
	height: 22px;
	margin-top: -1px;
	background: var(--main-color);
	clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.yido-contact__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 5vw, 64px);
	/* max-width: 1280px; */
    width:100%;
    margin: 0 auto;
}

.yido-contact-info {
	display: flex;
	/* flex: 1 1 280px; */
    flex: 1 1 auto;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.yido-contact-info.yido-contact-info--parking {
	justify-content: flex-end;
}

.yido-contact-info__badge {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	min-width: 76px;
	padding: 10px;
	color: var(--gray-0);
	text-align: center;
	background: var(--point);
	border-radius: 30px;
}

.yido-contact-info__text {
	margin: 0;
	color: var(--main-color);
	word-break: keep-all;
}

/* --- max-width: 1024px --- */
@media screen and (max-width: 1024px) {
	.yido-contact__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.yido-contact__hours {
		grid-column: 1 / -1;
	}
}

/* --- max-width: 640px --- */
@media screen and (max-width: 640px) {
	.yido-contact {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.yido-contact__top {
		grid-template-columns: minmax(0, 1fr);
	}

	.yido-contact__info {
		flex-direction: column;
		align-items: stretch;
	}

	.yido-contact-hours__row {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 16px;
	}

	.yido-contact-hours__label {
		width: 72px;
	}
}

/* ========================================
   [Yido-contact] END
   ======================================== */

/* ========================================
   [Main] END
   ======================================== */