/* =========================================================
   main-short-mobile — 모바일 전용 (max-width: 768px)
   PC main-short.css 는 수정하지 않음
   ========================================================= */

@media (min-width: 769px) {
	.ms-mobile-only {
		display: none !important;
	}

	.ms-layout-desktop {
		display: contents;
	}
}

@media (max-width: 768px) {
	.ms-desktop-only {
		display: none !important;
	}

	.ms-page {
		width: 100%;
		max-width: 100%;
		height: auto;
		min-height: 0;
		flex-direction: column;
		overflow: hidden;
		background: #ffffff;
	}

	/* ---- Mobile hero ---- */
	.ms-layout-mobile {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.ms-m-hero {
		position: relative;
		width: 100%;
	}

	.ms-m-hero-bg {
		position: relative;
		width: 100%;
		height: 272px;
		overflow: hidden;
		background: #f5f5f5;
	}

	.ms-m-hero-bg-img {
		position: relative;
		z-index: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 18%;
	}

	/* 상단 — 천장 조명처럼 자연스럽게 밝아지는 흰색 페이드 */
	.ms-m-hero-bg::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 42%;
		z-index: 1;
		background: linear-gradient(
			to bottom,
			#ffffff 0%,
			rgba(255, 255, 255, 0.92) 12%,
			rgba(255, 255, 255, 0.62) 24%,
			rgba(255, 255, 255, 0.28) 38%,
			rgba(255, 255, 255, 0) 100%
		);
		pointer-events: none;
	}

	.ms-m-hero-bg-fade {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 58%;
		z-index: 1;
		background: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.45) 38%,
			rgba(255, 255, 255, 0.88) 68%,
			#ffffff 100%
		);
		pointer-events: none;
	}

	.ms-m-hero-content {
		position: relative;
		z-index: 2;
		margin-top: -58px;
		padding: 0 24px 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.ms-layout-mobile .ms-brand {
		justify-content: center;
		width: auto;
		max-width: 100%;
		margin-bottom: 16px;
		gap: 10px;
	}

	.ms-layout-mobile .ms-brand-text {
		font-size: 11px;
		letter-spacing: 0.28em;
	}

	.ms-layout-mobile .ms-brand-line {
		flex: 0 1 72px;
		max-width: 72px;
		opacity: 0.55;
	}

	.ms-layout-mobile .ms-star--sm {
		width: 10px;
		height: 10px;
		opacity: 0.85;
	}

	.ms-layout-mobile .ms-kicker {
		font-size: 15px;
		font-weight: 400;
		color: #8a94a4;
		margin-bottom: 10px;
		letter-spacing: -0.02em;
	}

	.ms-layout-mobile .ms-title {
		align-items: center;
		margin-bottom: 14px;
	}

	.ms-layout-mobile .ms-title-line {
		font-size: 28px;
		line-height: 1.36;
		letter-spacing: -0.045em;
	}

	.ms-layout-mobile .ms-divider {
		justify-content: center;
		align-items: center;
		gap: 10px;
		max-width: 300px;
		height: auto;
		margin-bottom: 18px;
		position: relative;
	}

	.ms-layout-mobile .ms-divider .ms-divider-line {
		display: none;
	}

	.ms-layout-mobile .ms-divider::before,
	.ms-layout-mobile .ms-divider::after {
		content: '';
		flex: 1;
		height: 1px;
		max-width: 118px;
		background: #243d60;
		opacity: 0.28;
	}

	.ms-layout-mobile .ms-divider .ms-star {
		position: static;
		right: auto;
		width: 11px;
		height: 11px;
		opacity: 0.85;
		flex-shrink: 0;
	}

	.ms-layout-mobile .ms-desc {
		font-size: 15px;
		line-height: 1.72;
		text-align: center;
		max-width: 318px;
		margin-bottom: 0;
		color: #778191;
		letter-spacing: -0.02em;
	}

	/* ---- Featured card ---- */
	.ms-m-featured {
		margin: 10px 20px 14px;
	}

	.ms-layout-mobile .ms-m-featured.ms-card {
		width: auto;
		height: auto;
		min-height: 0;
		background: #243d60;
		border-color: transparent;
		border-radius: 14px;
		box-shadow: 0 6px 22px rgba(26, 48, 94, 0.16);
	}

	.ms-layout-mobile .ms-m-featured .ms-card-inner {
		padding: 22px 18px 18px;
	}

	.ms-layout-mobile .ms-m-featured .ms-card-pill,
	.ms-layout-mobile .ms-m-featured .ms-card-pill--featured {
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.42);
		color: rgba(255, 255, 255, 0.92);
		font-size: 10px;
		padding: 3px 13px;
		margin-bottom: 14px;
		border-radius: 4px;
	}

	.ms-layout-mobile .ms-m-featured .ms-card-wreath {
		flex: 0 0 auto;
		margin-bottom: 2px;
	}

	.ms-layout-mobile .ms-m-featured .ms-card-leaf {
		width: 64px;
		opacity: 0.3;
		filter: brightness(0) invert(1);
	}

	.ms-layout-mobile .ms-m-featured .ms-card-leaf--l {
		margin-right: -10px;
	}

	.ms-layout-mobile .ms-m-featured .ms-card-leaf--r {
		margin-left: -10px;
	}

	.ms-layout-mobile .ms-m-featured .ms-card-center {
		max-width: 170px;
	}

	.ms-layout-mobile .ms-m-featured .ms-card-achievement {
		font-size: 22px;
		font-weight: 700;
		color: #ffffff;
		line-height: 1.28;
	}

	.ms-layout-mobile .ms-m-featured .ms-card-name {
		font-size: 18px;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.94);
		margin-top: 4px;
	}

	.ms-layout-mobile .ms-m-featured .ms-card-footer-wrap {
		width: 100%;
		padding-top: 10px;
		margin-top: 2px;
	}

	.ms-layout-mobile .ms-m-featured .ms-card-divider {
		background: rgba(255, 255, 255, 0.24);
		width: calc(100% - 8px);
	}

	.ms-layout-mobile .ms-m-featured .ms-card-footer {
		font-size: 11px;
		color: rgba(255, 255, 255, 0.52);
		line-height: 1.58;
		padding-top: 10px;
		padding-bottom: 0;
	}

	/* ---- Carousel (2장 슬라이드) ---- */
	.ms-m-carousel {
		width: 100%;
		margin-bottom: 4px;
	}

	.ms-m-carousel-track {
		display: flex !important;
		flex-direction: row !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}

	@media (prefers-reduced-motion: reduce) {
		.ms-m-carousel-track {
			scroll-behavior: auto;
		}
	}

	.ms-m-carousel-track::-webkit-scrollbar {
		display: none;
	}

	.ms-m-carousel-slide {
		flex: 0 0 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		padding: 2px 20px 10px;
		box-sizing: border-box;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card {
		width: 100%;
		max-width: none;
		height: auto;
		min-height: 210px;
		border-radius: 14px;
		border: 1px solid rgba(26, 48, 94, 0.05);
		box-shadow: 0 2px 12px rgba(26, 48, 94, 0.06);
		background: #ffffff;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card-inner {
		padding: 16px 8px 14px;
		height: 100%;
		min-height: 210px;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card-pill {
		font-size: 10px;
		padding: 3px 11px;
		margin-bottom: 10px;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card-wreath {
		position: relative;
		flex: 1;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 120px;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card-leaf {
		position: absolute;
		top: 50%;
		width: 88px;
		height: auto;
		opacity: 0.24;
		pointer-events: none;
		filter: sepia(0.2) saturate(0.2) brightness(1.05) hue-rotate(-8deg);
	}

	.ms-layout-mobile .ms-m-carousel .ms-card-leaf--l {
		left: -6px;
		transform: translateY(-50%);
		margin-right: 0;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card-leaf--r {
		right: -6px;
		left: auto;
		transform: translateY(-50%) scaleX(-1);
		margin-left: 0;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card-center {
		position: relative;
		z-index: 1;
		width: 100%;
		max-width: none;
		flex: 1;
		min-width: 0;
		gap: 4px;
		padding: 0 2px;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card-achievement {
		font-size: 17px;
		font-weight: 700;
		line-height: 1.32;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card-achievement--sm {
		font-size: 13px;
		line-height: 1.36;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card-name {
		font-size: 16px;
		font-weight: 700;
		margin-top: 3px;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card-sub {
		font-size: 12px;
		line-height: 1.36;
		margin-top: 2px;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card--stars .ms-card-achievement--sm {
		font-size: 11px;
		line-height: 1.34;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card--stars .ms-card-sub {
		font-size: 10px;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card--stars .ms-card-inner {
		padding-bottom: 8px;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card-stars {
		padding-top: 4px;
		padding-bottom: 0;
		gap: 5px;
	}

	.ms-layout-mobile .ms-m-carousel .ms-card-stars .ms-card-star {
		width: 8px;
		height: 8px;
		color: #c4b5a0;
	}

	/* ---- Carousel dots (WP theme button override) ---- */
	.ms-page .ms-m-carousel .ms-m-carousel-dots {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 4px !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 8px 20px 20px !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		list-style: none !important;
	}

	.ms-page .ms-m-carousel button.ms-m-carousel-dot,
	.ms-page .ms-m-carousel .ms-m-carousel-dots > button {
		position: relative !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex: 0 0 auto !important;
		width: 28px !important;
		height: 28px !important;
		min-width: 28px !important;
		min-height: 28px !important;
		max-width: 28px !important;
		max-height: 28px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: transparent !important;
		box-shadow: none !important;
		outline: 0 !important;
		cursor: pointer !important;
		-webkit-appearance: none !important;
		   -moz-appearance: none !important;
		        appearance: none !important;
		font: inherit !important;
		line-height: 1 !important;
		color: inherit !important;
		text-decoration: none !important;
		text-transform: none !important;
		overflow: visible !important;
		vertical-align: middle !important;
		transition: none !important;
	}

	.ms-page .ms-m-carousel button.ms-m-carousel-dot::before,
	.ms-page .ms-m-carousel .ms-m-carousel-dots > button::before {
		content: "" !important;
		display: block !important;
		width: 6px !important;
		height: 6px !important;
		border-radius: 50% !important;
		background: #d8d8d8 !important;
		box-shadow: none !important;
		border: 0 !important;
		transform: scale(1) !important;
		transition:
			background-color 0.32s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
			width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
			height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
			opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
	}

	.ms-page .ms-m-carousel button.ms-m-carousel-dot:hover::before,
	.ms-page .ms-m-carousel .ms-m-carousel-dots > button:hover::before {
		background: #b8c0cc !important;
		transform: scale(1.15) !important;
	}

	.ms-page .ms-m-carousel button.ms-m-carousel-dot:focus-visible::before,
	.ms-page .ms-m-carousel .ms-m-carousel-dots > button:focus-visible::before {
		background: #9aa8bc !important;
		box-shadow: 0 0 0 2px rgba(36, 61, 96, 0.18) !important;
	}

	.ms-page .ms-m-carousel button.ms-m-carousel-dot.is-active::before,
	.ms-page .ms-m-carousel .ms-m-carousel-dots > button.is-active::before {
		width: 8px !important;
		height: 8px !important;
		background: #243d60 !important;
		transform: scale(1) !important;
		opacity: 1 !important;
	}

	.ms-page .ms-m-carousel button.ms-m-carousel-dot.is-active:hover::before,
	.ms-page .ms-m-carousel .ms-m-carousel-dots > button.is-active:hover::before {
		background: #1e3456 !important;
		transform: scale(1.08) !important;
	}

	.ms-page .ms-m-carousel button.ms-m-carousel-dot.is-scrolling::before,
	.ms-page .ms-m-carousel .ms-m-carousel-dots > button.is-scrolling::before {
		opacity: 0.72 !important;
	}

	.ms-page .ms-m-carousel button.ms-m-carousel-dot.is-active.is-scrolling::before,
	.ms-page .ms-m-carousel .ms-m-carousel-dots > button.is-active.is-scrolling::before {
		opacity: 1 !important;
	}

	body .entry-content .ms-page .ms-m-carousel .ms-m-carousel-dots,
	body .wp-block-post-content .ms-page .ms-m-carousel .ms-m-carousel-dots,
	body .elementor-widget-container .ms-page .ms-m-carousel .ms-m-carousel-dots {
		display: flex !important;
		gap: 4px !important;
		padding: 8px 20px 20px !important;
	}

	body .entry-content .ms-page .ms-m-carousel button.ms-m-carousel-dot,
	body .wp-block-post-content .ms-page .ms-m-carousel button.ms-m-carousel-dot,
	body .elementor-widget-container .ms-page .ms-m-carousel button.ms-m-carousel-dot,
	body .entry-content .ms-page .ms-m-carousel .ms-m-carousel-dots > button,
	body .wp-block-post-content .ms-page .ms-m-carousel .ms-m-carousel-dots > button,
	body .elementor-widget-container .ms-page .ms-m-carousel .ms-m-carousel-dots > button {
		width: 28px !important;
		height: 28px !important;
		min-width: 28px !important;
		min-height: 28px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: transparent !important;
		box-shadow: none !important;
		line-height: 1 !important;
		font-size: 0 !important;
	}

	/* ---- Stats ---- */
	.ms-m-stats {
		display: flex;
		align-items: stretch;
		margin: 4px 20px 28px;
		padding: 18px 6px;
		background: #ffffff;
		border-radius: 18px;
		box-shadow: 0 4px 22px rgba(0, 0, 0, 0.07);
		border: 1px solid rgba(0, 0, 0, 0.03);
	}

	.ms-m-stats .ms-stat {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
		gap: 7px;
		padding: 0 3px;
	}

	.ms-m-stats .ms-stat-icon {
		flex: 0 0 38px;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: #eef0f2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ms-m-stats .ms-stat-icon img {
		width: 19px;
		height: 19px;
		object-fit: contain;
		opacity: 0.68;
	}

	.ms-m-stats .ms-stat-body {
		text-align: center;
	}

	.ms-m-stats .ms-stat-value {
		font-size: 21px;
		font-weight: 800;
		color: #243d60;
		line-height: 1.05;
		letter-spacing: -0.02em;
	}

	.ms-m-stats .ms-stat-label {
		font-size: 10px;
		font-weight: 500;
		color: #6e6e6e;
		line-height: 1.3;
		margin-top: 2px;
	}

	.ms-m-stats .ms-stat-sub {
		font-size: 9px;
		font-weight: 400;
		color: #a3a3a3;
		line-height: 1.2;
		margin-top: 1px;
	}

	.ms-m-stats .ms-stat-divider {
		width: 1px;
		background: #e8e8e8;
		align-self: stretch;
		margin: 6px 0;
	}
}