/* Medical staff page: production-matched Elementor-free shell. */

.ys-bien-team-page {
	overflow: hidden;
	background: #f8f5ec;
}

.ys-team-hero,
.ys-team-hero * {
	box-sizing: border-box;
}

.ys-team-hero {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 160px 0 80px;
	background: #f8f5ec;
	color: #223226;
	text-align: center;
}

.ys-team-hero :is(h1, p) {
	margin: 0;
}

.ys-team-hero__breadcrumb {
	font-family: "Pretendard", "Noto Sans KR", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
}

.ys-team-hero__title {
	margin: 20px 0 4px !important;
	font-family: "Times New Roman", serif;
	font-size: 64px;
	font-weight: 300;
	line-height: 1;
	text-transform: uppercase;
}

.ys-team-hero__mobile-break {
	display: none;
}

.ys-team-hero__description {
	padding-bottom: 60px;
	font-family: "Pretendard", "Noto Sans KR", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
}

.ys-team-hero__visual {
	position: relative;
	flex: 0 0 auto;
	align-self: center;
	width: 100%;
	height: clamp(430px, 31vw, 540px);
	overflow: hidden;
	background-image: url("https://bienamc.com/wp-content/uploads/2026/05/menu_bg_004-1.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.ys-team-scroll-cue,
.ys-team-scroll-cue * {
	box-sizing: border-box;
}

.ys-team-scroll-cue {
	--ys-scroll-color: rgba(34, 50, 38, 0.92);
	--ys-scroll-soft: rgba(34, 50, 38, 0.24);
	--ys-scroll-bg: rgba(248, 245, 236, 0.76);
	--ys-scroll-border: rgba(255, 255, 255, 0.64);
	--ys-scroll-shadow: rgba(34, 50, 38, 0.18);
	--ys-scroll-inner: rgba(255, 255, 255, 0.58);

	position: absolute;
	bottom: clamp(28px, 3vw, 46px);
	left: 50%;
	z-index: 2;
	display: flex;
	min-width: 58px;
	min-height: 108px;
	transform: translateX(-50%);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 13px 13px;
	border: 1px solid var(--ys-scroll-border);
	border-radius: 999px;
	background:
		radial-gradient(circle at 50% 8%, var(--ys-scroll-inner), transparent 48%),
		var(--ys-scroll-bg);
	box-shadow:
		0 14px 38px var(--ys-scroll-shadow),
		0 0 0 1px rgba(255, 255, 255, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.42),
		inset 0 -1px 0 rgba(34, 50, 38, 0.05);
	color: var(--ys-scroll-color);
	font-family: "Pretendard", "Noto Sans KR", sans-serif;
	text-align: center;
	pointer-events: none;
	backdrop-filter: blur(13px) saturate(130%);
}

.ys-team-scroll-cue__label {
	display: block;
	font-size: 9px;
	font-weight: 820;
	line-height: 1;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-shadow: 0 1px 8px rgba(255, 255, 255, 0.48), 0 6px 14px rgba(34, 50, 38, 0.12);
}

.ys-team-scroll-cue__line {
	position: relative;
	display: block;
	width: 2px;
	height: clamp(44px, 3.7vw, 58px);
	overflow: hidden;
	border-radius: 999px;
	background: var(--ys-scroll-soft);
	box-shadow: 0 0 0 1px var(--ys-scroll-soft), 0 0 14px rgba(255, 255, 255, 0.62);
}

.ys-team-scroll-cue__line::after {
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(to bottom, transparent, var(--ys-scroll-color) 38%, var(--ys-scroll-color) 62%, transparent);
	box-shadow: 0 0 10px rgba(34, 50, 38, 0.38), 0 0 18px rgba(255, 255, 255, 0.52);
	content: "";
	animation: ys-team-scroll-line 1.35s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.ys-team-scroll-cue__dot {
	position: relative;
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--ys-scroll-color);
	box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.38), 0 0 18px rgba(255, 255, 255, 0.52), 0 10px 22px rgba(34, 50, 38, 0.16);
}

.ys-team-scroll-cue__dot::after {
	position: absolute;
	inset: -7px;
	border: 1px solid var(--ys-scroll-color);
	border-radius: inherit;
	content: "";
	opacity: 0.34;
	animation: ys-team-scroll-dot 1.6s ease-out infinite;
}

.ys-team-directory-shell {
	width: min(1140px, 100%);
	margin-inline: auto;
}

.ys-bien-team-page #ys-dynamic-staff {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.ys-bien-team-page #ys-dynamic-staff .ys-staff-hero,
.ys-bien-team-page #ys-dynamic-staff :is(.ys-staff-bg, .ys-soft-orb, .ys-staff-river-line) {
	display: none !important;
}

.ys-bien-team-page #ys-dynamic-staff .ys-staff-toolbar {
	margin-top: 0 !important;
	margin-bottom: 14px !important;
}

.ys-bien-team-page #ys-dynamic-staff .ys-staff-search-row {
	margin-top: 0 !important;
	margin-bottom: 48px !important;
}

.ys-bien-team-page #ys-dynamic-staff .ys-staff-search {
	position: relative !important;
	background-image: none !important;
}

.ys-bien-team-page #ys-dynamic-staff .ys-staff-search::before,
.ys-bien-team-page #ys-dynamic-staff .ys-staff-search::after {
	display: none !important;
	content: none !important;
}

.ys-bien-team-page #ys-dynamic-staff .ys-staff-search input {
	padding-left: 50px !important;
	background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10.5' cy='10.5' r='6.2' stroke='%23818a7d' stroke-width='1.8'/%3E%3Cpath d='M15.2 15.2L20 20' stroke='%23818a7d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-position: 18px 50% !important;
	background-repeat: no-repeat !important;
	background-size: 22px 22px !important;
}

@keyframes ys-team-scroll-line {
	to { top: 100%; }
}

@keyframes ys-team-scroll-dot {
	0% { transform: scale(0.55); opacity: 0.34; }
	72%, 100% { transform: scale(1.75); opacity: 0; }
}

@media (max-width: 1024px) {
	.ys-team-hero__title { font-size: 48px; }
	.ys-team-hero__description { font-size: 21px; }
}

@media (max-width: 767px) {
	.ys-team-hero {
		padding: 100px 0 30px;
	}

	.ys-team-hero__breadcrumb {
		font-size: 12px;
	}

	.ys-team-hero__title {
		margin: 0 !important;
		font-size: 32px;
		line-height: 1.2;
	}

	.ys-team-hero__mobile-break {
		display: block;
	}

	.ys-team-hero__description {
		padding-bottom: 0;
		font-size: 12px;
	}

	.ys-team-hero__visual {
		height: 310px;
		background-position: center bottom;
		background-attachment: scroll;
	}

	.ys-team-scroll-cue {
		display: none;
	}

	.ys-bien-team-page #ys-dynamic-staff .ys-staff-search-row {
		margin-bottom: 34px !important;
	}

	.ys-bien-team-page #ys-dynamic-staff .ys-staff-search input {
		padding-left: 46px !important;
		background-position: 16px 50% !important;
		background-size: 20px 20px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ys-team-scroll-cue__line::after,
	.ys-team-scroll-cue__dot::after {
		animation: none;
	}
}