/* 대문 개선 — 모프 배너(_mopf_banner.html), 메인 이미지 모션(#introVs), 회원수 통계 바(.mstat-*) */

/* ── 모프회원 배너 ─────────────────────────────── */
.mopf-banner {
	display: block;
	width: 567px;
	font-family: 'Nanum Gothic', sans-serif;
	text-decoration: none;
}
.mopf-banner svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
/* 애니메이션하는 요소만 자기 중심 기준 (전체에 걸면 SVG transform 속성의 기준점까지 바뀜) */
.mb-3min, .mb-star, .mb-pill, .mb-title, .mb-cta, .mb-arrow {
	transform-box: fill-box;
	transform-origin: center;
}
.mb-bg { fill: #fff; stroke: #dbe4ec; stroke-width: 3; }
.mb-blob1 { fill: #eaf6f8; }
.mb-blob2 { fill: #fdeeee; }
.mb-navy { fill: #1e2b45; }
.mb-watch { fill: #fff; stroke: #1e2b45; stroke-width: 9; }
.mb-track { fill: none; stroke: #e6eef3; stroke-width: 14; }
.mb-ring {
	fill: none;
	stroke: #38a8bd;
	stroke-width: 14;
	stroke-linecap: round;
	stroke-dasharray: 490.1;
	stroke-dashoffset: 0;
	animation: mb-ring 1.6s cubic-bezier(.4, 0, .2, 1) .2s backwards;
}
.mb-3min {
	fill: #e5484d;
	font-size: 60px;
	font-weight: 800;
	text-anchor: middle;
	animation: mb-pop .5s cubic-bezier(.3, 1.6, .5, 1) 1.6s backwards;
}
.mb-star { fill: #f5c443; animation: mb-twinkle 2.4s ease-in-out infinite; }
.mb-star.s2 { animation-delay: .8s; }
.mb-star.s3 { animation-delay: 1.6s; }

.mb-pill { animation: mb-slide .6s cubic-bezier(.2, .9, .3, 1.2) .3s backwards; }
.mb-pill rect { fill: #38a8bd; }
.mb-pill text { fill: #fff; font-size: 26px; font-weight: 800; text-anchor: middle; }
.mb-title {
	fill: #1e2b45;
	font-size: 64px;
	font-weight: 800;
	letter-spacing: -2px;
	animation: mb-up .6s ease-out .45s backwards;
}
.mb-teal { fill: #38a8bd; }
.mb-proof {
	fill: #6b7a90;
	font-size: 23px;
	font-weight: 700;
	animation: mb-slide .6s cubic-bezier(.2, .9, .3, 1.2) .5s backwards;
}
.mb-proof-num { fill: #e5484d; font-weight: 800; }
.mb-proof { transform-box: fill-box; transform-origin: center; }

.mb-chip { fill: #f3f7fa; stroke: #dfe8ee; stroke-width: 2; }
.mb-step text { fill: #1e2b45; font-size: 26px; font-weight: 700; }
.mb-check { fill: #38a8bd; stroke: #38a8bd; stroke-width: 3; animation: mb-check .3s ease-out backwards; }
.mb-tick {
	fill: none;
	stroke: #fff;
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 32;
	stroke-dashoffset: 0;
	animation: mb-tick .35s ease-out backwards;
}
.st1 .mb-check { animation-delay: 1.0s; } .st1 .mb-tick { animation-delay: 1.15s; }
.st2 .mb-check { animation-delay: 1.3s; } .st2 .mb-tick { animation-delay: 1.45s; }
.st3 .mb-check { animation-delay: 1.6s; } .st3 .mb-tick { animation-delay: 1.75s; }

.mb-char-in { animation: mb-rise .7s cubic-bezier(.3, 1.4, .5, 1) 2.2s backwards; }
.mb-char {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: mb-sway 3.2s ease-in-out 3s infinite;
}
.mb-cta { animation: mb-pop .5s cubic-bezier(.3, 1.6, .5, 1) 2s backwards; }
.mb-cta rect { fill: #e5484d; transition: fill .2s; }
.mb-cta text { fill: #fff; font-size: 26px; font-weight: 800; text-anchor: middle; }
.mb-arrow {
	fill: none;
	stroke: #fff;
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
	animation: mb-nudge 2.4s ease-in-out 2.6s infinite;
}
.mopf-banner:hover .mb-cta rect,
.mopf-banner:focus-visible .mb-cta rect { fill: #d23a40; }

@keyframes mb-rise { from { transform: translateY(90px); opacity: 0; } }
@keyframes mb-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes mb-ring { from { stroke-dashoffset: 490.1; } }
@keyframes mb-pop { from { transform: scale(0); opacity: 0; } }
@keyframes mb-slide { from { transform: translateX(-40px); opacity: 0; } }
@keyframes mb-up { from { transform: translateY(16px); opacity: 0; } }
@keyframes mb-check { from { fill: #fff; } }
@keyframes mb-tick { from { stroke-dashoffset: 32; } }
@keyframes mb-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .5; } }
@keyframes mb-nudge { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(6px); } 90% { transform: translateX(0); } }

/* ── 메인 이미지 모션 (?v=b) ──────────────────────── */
#introVs {
	position: relative;
	width: 567px;
}
#introVs .vs-base { display: block; width: 100%; }
#introVs .vs-tag,
#introVs .vs-heart {
	position: absolute;
	height: auto;
	pointer-events: none;
}
/* 위치·크기는 main_vs.png(1134x742) 원본 좌표를 % 로 환산 */
#introVs .vs-tag {
	left: 45.503%;
	top: 30.189%;
	width: 20.106%;
	transform-origin: 2.6% 68.75%;
	animation: vs-swing 2.6s ease-out .4s backwards;
}
#introVs .vs-heart {
	left: 53.263%;
	top: 57.951%;
	width: 6.790%;
	animation: vs-beat 3s ease-in-out 1s infinite;
}
@keyframes vs-swing {
	0% { transform: rotate(-16deg); }
	25% { transform: rotate(9deg); }
	45% { transform: rotate(-5deg); }
	65% { transform: rotate(2.5deg); }
	82% { transform: rotate(-1deg); }
	100% { transform: rotate(0); }
}
@keyframes vs-beat {
	0%, 40%, 100% { transform: scale(1); }
	10% { transform: scale(1.2); }
	20% { transform: scale(1); }
	30% { transform: scale(1.12); }
}

/* ── 회원수 영역 ───────────────────────────────── */
.mstat-label {
	display: block;
	color: #6b7a90;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 13px;
	font-weight: 700;
}
.mstat-num {
	color: #1e2b45;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.5px;
	line-height: 1.25;
}
.mstat-num small {
	margin-left: 2px;
	color: #6b7a90;
	font-size: 14px;
	font-weight: 700;
}
.is-mopf .mstat-num { color: #e5484d; }

/* 메인 이미지 아래 통계 바 */
.mstat-bar {
	display: flex;
	gap: 12px;
	width: 567px;
	margin-top: 14px;
}
.mstat-item {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border: 1px solid #dbe4ec;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(30, 43, 69, .05);
}
.mstat-icon {
	flex: none;
	width: 42px;
	height: 42px;
	padding: 9px;
	box-sizing: border-box;
	border-radius: 12px;
	background: #eaf6f8;
	fill: none;
	stroke: #38a8bd;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.is-mopf .mstat-icon { background: #fdeeee; stroke: #e5484d; }

@media (max-width: 768px) {
	.mopf-banner, #introVs { width: 100%; }
	/* default.css 의 PC float:right 가 모바일 float:none 보다 우선해 배너가 좁아지던 문제 */
	.layout-container .layout-grid .content-grid .right-image { float: none; }
	.mstat-bar { width: 100%; gap: 8px; }
	.mstat-item { gap: 10px; padding: 10px 12px; }
	.mstat-icon { width: 34px; height: 34px; padding: 7px; }
	.mstat-num { font-size: 20px; }
	.mstat-bar { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.mopf-banner *, #introVs img { animation: none !important; }
}

/* ── 로그인 카드 (PC 기본, 모바일은 아래 압축 블록에서 크기만 조정) ───── */
#acField > .newclearfix:not(.keep):not(.helpSign) {
	display: flex;
	overflow: hidden;
	border: 1px solid #d3dde6;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(30, 43, 69, .06);
}
#fo_login_widget .idpw { flex: 1; min-width: 0; float: none; }
#fo_login_widget .id { margin: 0; border-bottom: 1px solid #e6eef3; }
#fo_login_widget input[type="text"],
#fo_login_widget input[type="email"],
#fo_login_widget input[type="password"] {
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 0 16px;
	box-sizing: border-box;
	border: 0;
	font-size: 18px;
	line-height: 54px;
	transition: box-shadow .2s;
}
#fo_login_widget input[type="text"]:focus,
#fo_login_widget input[type="email"]:focus,
#fo_login_widget input[type="password"]:focus { box-shadow: inset 3px 0 0 #38a8bd; }
/* 브라우저 자동완성 하늘색 배경 제거 */
#fo_login_widget input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 40px #fff inset;
	-webkit-text-fill-color: #1e2b45;
}
#fo_login_widget .idpw label { top: 15px; left: 16px; font-size: 18px; }
#fo_login_widget .sButton { flex: none; width: 112px; }
#fo_login_widget input[type="submit"] {
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	font-size: 19px;
	line-height: normal;
	background: #3a9fb3;
	transition: background .2s;
}
#fo_login_widget input[type="submit"]:hover,
#fo_login_widget input[type="submit"]:focus { background: #2f8fa3; opacity: 1; }
#fo_login_widget .keep { float: left; margin: 8px 0 0; }
#fo_login_widget #keep_signed { accent-color: #38a8bd; }
#fo_login_widget .helpSign { float: right; margin: 8px 0 0; }
#acField::after { content: ""; display: block; clear: both; }

/* ── 모바일 첫 화면 압축: 통계 한 줄 + 로그인 카드 → 배너·광고까지 한 화면에 ───── */
@media (max-width: 768px) {
	/* 회원수: 카드 2장 → 한 줄 카드 */
	.mstat-bar {
		gap: 0;
		margin: 10px 0 12px;
		box-sizing: border-box;
		overflow: hidden;
		border: 1px solid #dbe4ec;
		border-radius: 12px;
		background: #fff;
	}
	.mstat-item {
		justify-content: center;
		gap: 8px;
		padding: 9px 8px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: none;
	}
	.mstat-item + .mstat-item { border-left: 1px solid #e6eef3; }
	.mstat-icon { width: 26px; height: 26px; padding: 5px; border-radius: 8px; }
	.mstat-item > div { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
	.mstat-label { font-size: 11px; }
	.mstat-num { font-size: 17px; }
	.mstat-num small { font-size: 11px; }

	/* 로그인: ID/PW 한 카드 + 우측 버튼 */
	.login-grid .login-text { width: 62%; margin: 0 auto 8px; }
	#acField > .newclearfix:not(.keep):not(.helpSign) { border-radius: 12px; }
	#fo_login_widget input[type="text"],
	#fo_login_widget input[type="email"],
	#fo_login_widget input[type="password"] {
		height: 40px;
		padding: 0 12px;
		font-size: 15px;
		line-height: 40px;
	}
	#fo_login_widget .idpw label { top: 11px; left: 12px; font-size: 14px; }
	#fo_login_widget .sButton { width: 84px; }
	#fo_login_widget input[type="submit"] { font-size: 16px; }
	#fo_login_widget .keep { font-size: 12px; }
	#fo_login_widget .helpSign a { font-size: 12px; }

	/* 배너 위 여백 축소 (default.css 의 !important 대응) */
	.layout-container .layout-grid .content-grid .right-image { margin-top: 12px !important; }
}