/* 모바일 전용 섹션 스타일 */

/* 데스크톱에서는 모바일 섹션 숨김 */
.mobile-only-section {
    display: none;
}

.mobile-action-btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: center;
    
}

/* 모바일에서 기존 섹션들 숨기고 모바일 섹션만 표시 */
@media screen and (max-width: 768px) {
    /* 기존 섹션들 숨김 */
    .premium-section,
    .parallax-section,
    .action-section {
        display: none !important;
    }
    
    /* 모바일 섹션 표시 */
    .mobile-only-section {
        display: block;
    }
}

/* 모바일 이미지 업 모션 섹션 */
.mobile-slide-up-section {
    padding: 0px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 100vh;
    overflow: hidden;
}

.mobile-slide-container {
    margin:  0;
}

.mobile-slide-item {

    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-slide-item.animate {
    opacity: 1;
    transform: translateY(0);
}

.mobile-slide-item:nth-child(even) {
    animation-delay: 0.2s;
}

.mobile-slide-item:nth-child(odd) {
    animation-delay: 0.1s;
}

/* 이미지 컨테이너 */
.mobile-image-container {
    position: relative;
    overflow: hidden;
    background: var(--bg-white);
    transform: scale(1);
    transition: all 0.6s ease;
}

.mobile-image-container.dark {
    background: var(--primary-color);
}

.mobile-slide-item.animate .mobile-image-container {
    transform: scale(1.02);
}

.mobile-image {
    width: 100%;
    
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mobile-slide-item.animate .mobile-image {
    transform: scale(1);
}

/* 텍스트 컨테이너 */
.mobile-text-container {
    text-align: center;

    transform: translateY(20px);
    opacity: 0;
    transition: all 0.6s ease 0.3s;
    padding: 15px 10px 80px 10px;
}

/* 관심고객등록 카드 상단 GIF */
.mobile-text-gif {
    width: 100%;
    height: auto;
    margin: 0 auto 10px auto;
    overflow: hidden;
    position: relative;

}

.mobile-text-gif:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%);
    pointer-events: none;
    mix-blend-mode: screen;
}

.mobile-text-gif img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: mobileGifZoom 12s ease-in-out infinite;
}

@keyframes mobileGifFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.03); }
}

@keyframes mobileGifZoom {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.05); }
    70% { transform: scale(1.02); }
}

.mobile-slide-item.animate .mobile-text-container {
    transform: translateY(0);
    opacity: 1;
}

.mobile-title {
    font-size: 24px;
    font-weight: 700;
    color: #015152;
    margin: 20px 0;
    letter-spacing: -0.5px;
}

.mobile-subtitle {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15px;
}

.mobile-description {
    font-size: 12px;
    color: #888;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* 액션 버튼 */
.mobile-action-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: #015152;
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    transform: translateY(10px);
    opacity: 0;
    margin: 15px 0;
    white-space: nowrap;
}

.mobile-slide-item.animate .mobile-action-btn {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.5s;
}

.mobile-action-btn:hover {
    background: #003328;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(1, 81, 82, 0.4);
}

.mobile-action-btn i {
    margin-right: 8px;
    transition: transform 0.3s ease;
}


/* 특별한 카드 효과 */
.mobile-card {
    background: white;
    margin-bottom: 0px;
    position: relative;
    overflow: hidden;
    transform: rotateX(10deg) rotateY(-5deg);
    transition: all 0.6s ease;
}

.mobile-slide-item.animate .mobile-card {
    transform: rotateX(0deg) rotateY(0deg);
}

.mobile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

.mobile-slide-item.animate .mobile-card::before {
    left: 100%;
}

/* 플로팅 요소들 */
.mobile-floating-element {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(0, 16, 73, 0.1);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.mobile-floating-element:nth-child(1) {
    top: 20%;
    right: 10%;
    animation-delay: 0s;
}

.mobile-floating-element:nth-child(2) {
    top: 60%;
    left: 5%;
    animation-delay: 2s;
    width: 40px;
    height: 40px;
}

.mobile-floating-element:nth-child(3) {
    top: 80%;
    right: 20%;
    animation-delay: 4s;
    width: 30px;
    height: 30px;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 1;
    }
}

/* 프로그레스 인디케이터 */
.mobile-progress-indicator {
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cacaca93;
    transition: all 0.3s ease;
    cursor: pointer;
}

.progress-dot.active {
    background: #015152;
    transform: scale(1.5);
}

/* 인트로 애니메이션 */
.mobile-intro {
    width: 100%;
    /* 2:3 비율 유지 (가로:세로 = 2:3) */
    aspect-ratio: 2 / 3;
    text-align: center;
    margin-top: 60px;
    background: url('/images/m-img.jpg') no-repeat bottom center;
    background-size: cover;
    background-position: bottom center;
    background-attachment: fixed;
    justify-content: center;
    color: white;
    position: relative;
    overflow: hidden;
    display: flex;
    animation: backgroundPulse 5s infinite;
}

/* === 모바일 인트로 상승형 별빛 파티클 === */
.mobile-intro-stars {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%; /* 하단 절반 위주 발생 */
    pointer-events: none;
    overflow: visible;
    z-index: 1; /* 콘텐츠( z-index:2 ) 아래 */
}

/* 별 파티클 - 글리프 ✦ 회전 */
.mobile-intro-star {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: var(--star-size, 10px);
    height: var(--star-size, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translate(-50%, 0) scale(0.4);
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.75)) drop-shadow(0 0 8px rgba(255,255,255,0.35));
    animation: mobileStarRise var(--rise-duration, 4s) linear forwards;
    pointer-events: none;
    font-size: 0; /* 내부 span 기준 */
}

.mobile-intro-star span {
    font-size: 50px;
    line-height: 1;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 0 6px rgba(255,255,255,0.8), 0 0 12px rgba(255,255,255,0.4);
    animation: starGlyphSpin var(--rise-duration, 4s) linear forwards;
    transform-origin: 50% 50%;
    display: block;
}

/* 꼬리(Trail) 효과 */
.mobile-intro-star::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 15%;
    width: 2px;
    height: 0;
    background: linear-gradient(to top, rgba(255,255,255,0.55), rgba(255,255,255,0));
    transform: translateX(-50%);
    animation: mobileStarTrail var(--rise-duration, 4s) linear forwards;
}

@keyframes mobileStarRise {
    0% { opacity: 0; transform: translate(-50%, 10px) scale(0.4); }
    5% { opacity: 1; }
    70% { opacity: 0.5; }
    100% { opacity: 0; transform: translate(-50%, -200px) scale(0.2); }
}

@keyframes mobileStarTrail {
    0% { height: 0; opacity: 0; }
    15% { height: 18px; opacity: 1; }
    60% { height: 22px; opacity: 0.9; }
    100% { height: 0; opacity: 0; }
}

@keyframes starGlyphSpin {
    0% { transform: rotate(0deg) scale(1); }
    70% { transform: rotate(210deg) scale(1.05); }
    100% { transform: rotate(320deg) scale(0.65); }
}

/* 내부 여백은 콘텐츠 래퍼에서 처리 */
.mobile-intro .mobile-intro-content { 
	padding:  0; 
	width: 100%; 
}

/* aspect-ratio 미지원 브라우저 폴백 (안전패딩) */
@supports not (aspect-ratio: 2 / 3) {
    .mobile-intro { height: 75vw; max-height: 90vh; }
}


@keyframes backgroundPulse {
    0%, 100% {

        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

.mobile-intro-content {
    position: relative;
    z-index: 2;
    transform: translateY(0);
    animation: hookingMotion 0.5s ease-out forwards;
}

@keyframes hookingMotion {
    0% {
        transform: translateY(50px) scale(0.9);
        opacity: 0;
    }
    40% {
        transform: translateY(-10px) scale(1.02);
        opacity: 0.8;
    }
    60% {
        transform: translateY(5px) scale(0.98);
        opacity: 0.9;
    }
    80% {
        transform: translateY(-2px) scale(1.01);
        opacity: 0.95;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.mobile-intro-title {
    font-size: 20px;
    font-weight: 800;
    color: white;
    margin-bottom: 15px;
    opacity: 0;
    transform: translateY(30px) rotateX(20deg);
    animation: titleReveal 1.2s ease 0.3s forwards;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    perspective: 1000px;
}

/* GIF 컨테이너 - 타이틀 하단 */
.mobile-intro-gif {
    position: relative;
    width: 100%;
}

.mobile-intro-gif img {
    width: 100%;
    height: auto;

}


@keyframes gifReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


@keyframes titleReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) rotateX(20deg) scale(0.9);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-5px) rotateX(-5deg) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg) scale(1);
    }
}

.mobile-intro-subtitle {
    font-size: calc(12px + 1vw );
    font-weight: 700;
    background-color: var(--primary-color);
    white-space:   nowrap;
    border-radius: 50px;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transform: translateX(-50px);
    animation: subtitleSlide 1s ease 0.8s forwards;
    margin: 20px 20px 0 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    animation: pulse 1s infinite;
	
}
.mobile-intro-subtitle span {
    font-weight: 700;
    color: #ffd700;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);

    }
}

@keyframes subtitleSlide {
    0% {
        opacity: 0;
        transform: translateX(-50px) scale(0.95);
    }
    60% {
        opacity: 0.8;
        transform: translateX(5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* 프리미엄 요소 컬럼 */
.mobile-premium-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 20px;
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    animation: featuresHookMotion 1.2s ease 0.9s forwards;
}

@keyframes featuresHookMotion {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    40% {
        opacity: 0.7;
        transform: translateY(-10px) scale(1.05);
    }
    70% {
        opacity: 0.9;
        transform: translateY(5px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mobile-premium-item {
    background: var(--bg-white);
    backdrop-filter: blur(10px);
    border: 3px solid rgba(0, 35, 15, 0.2);
    border-radius: 16px;
    padding: 8px 10px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-30px) rotateY(15deg);
    animation: itemSlideHook 0.8s ease forwards;

}

.mobile-premium-item:nth-child(1) {
    animation-delay: 1.6s;
}

.mobile-premium-item:nth-child(2) {
    animation-delay: 1.8s;
}

.mobile-premium-item:nth-child(3) {
    animation-delay: 2s;
}

.mobile-premium-item:nth-child(4) {
    animation-delay: 2.2s;
}

@keyframes itemSlideHook {
    0% {
        opacity: 0;
        transform: translateX(-30px) rotateY(15deg) scale(0.9);

    }
    50% {
        opacity: 0.8;
        transform: translateX(5px) rotateY(-3deg) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg) scale(1);
    }
}






.mobile-premium-item:nth-child(1) .mobile-premium-icon {
    animation-delay: 1.5s;
}

.mobile-premium-item:nth-child(2) .mobile-premium-icon {
    animation-delay: 1.7s;
}

.mobile-premium-item:nth-child(3) .mobile-premium-icon {
    animation-delay: 1.9s;
}

.mobile-premium-item:nth-child(4) .mobile-premium-icon {
    animation-delay: 2.1s;
}

@keyframes iconBounceHook {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(180deg);
    }
    60% {
        opacity: 0.8;
        transform: scale(1.3) rotate(-15deg);
    }
    80% {
        opacity: 0.9;
        transform: scale(0.9) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.mobile-premium-title {
    font-size: 20px;
    white-space: nowrap;
    font-weight: 700;
    color: var(--primary-color);
    opacity: 0;
    transform: translateY(15px);
    animation: textSlideUp 0.5s ease forwards;
}
.mobile-premium-title strong {
    color: #ff0000;
    font-weight: 700;
}

.mobile-premium-item:nth-child(1) .mobile-premium-title {
    animation-delay: 1.8s;
}

.mobile-premium-item:nth-child(2) .mobile-premium-title {
    animation-delay: 2.0s;
}

.mobile-premium-item:nth-child(3) .mobile-premium-title {
    animation-delay: 2.2s;
}

.mobile-premium-item:nth-child(4) .mobile-premium-title {
    animation-delay: 2.4s;
}

.mobile-premium-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(15px);
    animation: textSlideUp 0.5s ease forwards;
}

.mobile-premium-item:nth-child(1) .mobile-premium-desc {
    animation-delay: 2.0s;
}

.mobile-premium-item:nth-child(2) .mobile-premium-desc {
    animation-delay: 2.2s;
}

.mobile-premium-item:nth-child(3) .mobile-premium-desc {
    animation-delay: 2.4s;
}

.mobile-premium-item:nth-child(4) .mobile-premium-desc {
    animation-delay: 2.6s;
}

@keyframes textSlideUp {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 우측 하단 정사각 이미지 컨테이너 */
.mobile-intro-square-image {
	position: absolute;
	bottom: 20%;
	left: 50%;
	transform: translateX(-50%);
	width: 45%;
	height: auto;
	overflow: hidden;
	opacity: 0;
	/* 1) 최초 등장(squareImageReveal) 후 2) 위아래 부드러운 반복(sqaureImageFloat) */
	animation:
		squareImageReveal 2s ease 1.5s forwards,
		squareImageFloat 6s ease-in-out 3.5s infinite;
	z-index: 3;
}

/* 부드러운 위아래 플로팅 (reveal 끝난 뒤 시작) */
@keyframes squareImageFloat {
	0% {
		transform: translateX(-50%) translateY(-50px) scale(1);
	}
	50% {
		transform: translateX(-50%) translateY(-60px) scale(1.02);
	}
	100% {
		transform: translateX(-50%) translateY(-50px) scale(1);
	}
}




@keyframes glassShimmer {
    0% {
        left: -100%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

/* 추가 반짝임 포인트들 - 이미지 영역만 */
.mobile-intro-square-image .sparkle-point {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    opacity: 0;
    z-index: 5;
    mix-blend-mode: screen;
    pointer-events: none;
}

.mobile-intro-square-image .sparkle-point:nth-child(1) {
    top: 30%;
    left: 35%;
    animation: sparkleFlash 2s ease-in-out infinite;
    animation-delay: 0.5s;
}

.mobile-intro-square-image .sparkle-point:nth-child(2) {
    top: 55%;
    right: 35%;
    animation: sparkleFlash 2s ease-in-out infinite;
    animation-delay: 1.2s;
}

.mobile-intro-square-image .sparkle-point:nth-child(3) {
    bottom: 30%;
    left: 65%;
    width: 4px;
    height: 4px;
    animation: sparkleFlash 2s ease-in-out infinite;
    animation-delay: 1.8s;
}

@keyframes sparkleFlash {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

.mobile-intro-square-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    position: relative;
    z-index: 0;
    transition: all 0.3s ease;
}




@keyframes squareImageReveal {
    0% {
        opacity: 0;
        transform: translateY(0px) scale(1) translateX(-50%);
    }
    
    100% {
        opacity: 1;
        transform: translateY(-50px) scale(1) translateX(-50%);
    }
}

@keyframes sparkleRotate {
    0% {
        transform: rotate(0deg);
        opacity: 0.5;
    }
    25% {
        opacity: 1;
    }
    50% {
        transform: rotate(180deg);
        opacity: 0.7;
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.5;
    }
}

.mobile-intro-particle:nth-child(1) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.mobile-intro-particle:nth-child(2) {
    top: 20%;
    right: 15%;
    animation-delay: 2s;
}

.mobile-intro-particle:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 4s;
}

.mobile-intro-particle:nth-child(4) {
    bottom: 15%;
    right: 10%;
    animation-delay: 6s;
}

@keyframes float-particle {
    0% {
        transform: translateY(0px) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-20px) scale(0);
        opacity: 0;
    }
}

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 스크롤 힌트 */
.mobile-scroll-hint {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    opacity: 0.7;
    animation: bounce 2s infinite;
}

.scroll-arrow {
    width: 30px;
    height: 30px;
    border: 2px solid #015152;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
}

.scroll-arrow i {
    color: #015152;
    font-size: 14px;
}

/* 섹션 구분선 */
.mobile-section-divider {
    height: 5px;
    background: linear-gradient(90deg, transparent, #015152, transparent);
    margin:  0;
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.8s ease;
}

.mobile-section-divider.animate {
    opacity: 1;
    transform: scaleX(1);
}

/* 모바일 회전 텍스트 섹션 */
.mobile-rotating-text-section {

    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0;
    position: relative;
}



@keyframes backgroundRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.mobile-circular-text {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.mobile-circular-svg {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    animation: rotateText 15s linear infinite;
    z-index: 2;
}

.mobile-rotating-text {
    position: absolute;
    font-size: 20px;
    font-weight: 600;
    fill: #ffffff;
    font-family: 'Pretendard', sans-serif;
    letter-spacing: 2.7px;
    z-index: 2;
}

/* 초록 배경일 때 흰색 텍스트 */
.mobile-rotating-text-section.green-bg .mobile-rotating-text {
    fill: #ffffff;
}

/* 흰색 배경일 때 초록 텍스트 (기본값) */
.mobile-rotating-text-section.white-bg .mobile-rotating-text {
    fill: #015152;
}

@keyframes rotateText {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.mobile-center-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #015152 0%, #028374 100%);
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(1, 81, 82, 0.3);
    animation: centerPulse 3s ease-in-out infinite;
}

@keyframes centerPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(1, 81, 82, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(1, 81, 82, 0.4);
    }
}

.mobile-center-icon {
    color: #ffd700;
    font-size: 24px;
    margin-bottom: 4px;
    animation: iconSpin 4s linear infinite;
}

@keyframes iconSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.mobile-center-text {
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 호버 효과 */
.mobile-circular-text:hover .mobile-circular-svg {
    animation-duration: 8s;
}

.mobile-circular-text:hover .mobile-center-content {
    transform: scale(1.1);
}

.mobile-circular-text:hover .mobile-center-icon {
    animation-duration: 2s;
}

/* 모바일 최적화 */
@media screen and (max-width: 480px) {
    .mobile-circular-text {
        width: 160px;
        height: 160px;
    }
    
    .mobile-rotating-text {
        font-size: 10px;
    }
    
    .mobile-center-content {
        width: 80px;
        height: 80px;
    }
    
    .mobile-center-icon {
        font-size: 18px;
    }
    
    .mobile-center-text {
        font-size: 9px;
    }
    
    .mobile-rotating-text-section {
        padding: 40px 15px;
        min-height: 250px;
    }
}

/* 무한 스크롤링 텍스트 섹션 */
.mobile-scrolling-text-section {
    padding: 5px 0;
    background: linear-gradient(90deg, #013b3d 0%, #015152 50%, #013b3d 100%);
    overflow: hidden;
    position: relative;
    border-top: 3px solid #013b3d;
    border-bottom: 3px solid #013b3d;
    box-shadow: 
        0 -2px 8px rgba(1, 81, 82, 0.3),
        0 2px 8px rgba(1, 81, 82, 0.3),
        inset 0 2px 0 rgba(1, 81, 82, 0.6),
        inset 0 -2px 0 rgba(1, 81, 82, 0.6);
}

.mobile-scrolling-text-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.1) 50%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
    z-index: 5;
}

@keyframes shimmer {
    0%, 100% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        transform: translateX(100%);
        opacity: 1;
    }
}

.mobile-scrolling-container { position: relative; overflow: hidden; }
/* 트랙(두 번 연속으로 이어 붙인 콘텐츠)을 좌→우로 무한 이동 */
.ms-track {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    will-change: transform;
    animation: ms-marquee var(--ms-duration, 22s) linear infinite;
}

@keyframes ms-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-1 * var(--ms-track-width, 50%))); }
}

.mobile-scrolling-text {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.mobile-scrolling-text span {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    font-family: "Cormorant Garamond", serif;
    letter-spacing: 1px;
}

.mobile-scrolling-text span:nth-child(even) {
    color: #ffd700;
    font-size: 16px;
    font-weight: 400;
}

/* 가장자리 페이드(고급스러운 마감) + 호버 일시정지 */
.mobile-scrolling-text-section::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, #013b3d 0%, rgba(1,81,82,0) 12%, rgba(1,81,82,0) 88%, #013b3d 100%);
    z-index: 6;
}
.mobile-scrolling-text-section:hover .ms-track{ animation-play-state: paused; }

/* 사용자의 접근성 설정 존중 */
@media (prefers-reduced-motion: reduce){
    .ms-track{ animation: none !important; }
    .mobile-scrolling-text-section::before{ animation: none !important; }
}

/* ============================
   관심고객 등록 혜택 카드
   ============================ */
.mobile-benefits-card{
    position: relative;
    border-radius: 14px;
    background: var(--primary-color);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 8px 22px rgba(1,81,82,0.18), inset 0 1px 0 rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    color: white;
}

.mbc-header{ padding: 14px 16px 8px 16px; }
.mbc-header[role="button"]{ cursor: pointer; user-select: none; }
.mbc-header[role="button"]::after{
    content: '\f078'; /* Font Awesome chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: rgba(255,255,255,0.95);
    float: center;
    transition: transform .3s ease;
}

.mobile-benefits-card.open .mbc-header[role="button"]::after{ transform: rotate(180deg); }
.mbc-eyebrow{
    display: inline-flex; 
    align-items: center;
     gap: 8px;
    font-size: 24px; 
	font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase;
}
.mbc-eyebrow i{ color: #ffd700; }
.mbc-title{ 
	margin-top: 10px;
	font-size: 12px; 
	font-weight: 800; 
	letter-spacing: -0.3px; 
}
.mbc-sub{ margin-top: 4px; font-size: 12px;  }

/* 아코디언 본문 */
.mbc-body{
    padding: 0 12px 0px 12px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(4px);
    transition: max-height .5s ease, opacity .45s ease, transform .45s ease;
}
.mobile-benefits-card.open .mbc-body{
    width: 100%;
    max-height: 550px;
    opacity: 1;
    transform: translateY(0);
    background-color: #f8f9fa;
    border-radius: 14px 14px 0 0;
    padding: 12px;
}
.mbc-list{ 
    list-style: none; 
    margin: 8px 2px 0; 
    padding: 0; 
    display: grid; 
    gap: 8px; 
    grid-template-columns: 1fr 1fr;
}
.mbc-item{
    display: flex;
    align-items: center; 
    gap: 10px; 
    flex-direction: column; 
	padding: 10px 12px; 
	background: rgba(255,255,255,0.65); 
	border: 1px solid rgba(1,81,82,0.12); 
	border-radius: 10px; box-shadow: 0 2px 10px rgba(1,81,82,0.08); transform: translateY(8px); opacity: 0; transition: transform .45s ease, opacity .45s ease, box-shadow .3s ease;}

	.mobile-benefits-card.open .mbc-item{ opacity: 1; transform: translateY(0); }
.mbc-item i{ color: #00a08a; width: 18px; text-align: center; }
.mbc-item strong{ color: #0b3a3b; font-weight: 800; font-size: 14px; }
.mbc-item span{ color: #386b6c; font-size: 10px; }
.mbc-item:hover{ box-shadow: 0 6px 16px rgba(1,81,82,0.18); }

/* 항목 순차 등장 지연 */
.mobile-benefits-card.open .mbc-item:nth-child(1){ transition-delay: .05s; }
.mobile-benefits-card.open .mbc-item:nth-child(2){ transition-delay: .12s; }
.mobile-benefits-card.open .mbc-item:nth-child(3){ transition-delay: .19s; }
.mobile-benefits-card.open .mbc-item:nth-child(4){ transition-delay: .26s; }
.mobile-benefits-card.open .mbc-item:nth-child(5){ transition-delay: .33s; }

/* 카드 내부 CTA 버튼 정렬 보정 */
.mobile-benefits-card .mobile-action-btn{ width: 100%; }

@media (prefers-reduced-motion: reduce){
    .mbc-body{ transition: none; max-height: none; opacity: 1; transform: none; }
    .mobile-benefits-card.open .mbc-body{ max-height: none; }
    .mbc-item{ transition: none; opacity: 1; transform: none; }
}

/* 오픈 전 헤더 살짝 바운스 모션으로 클릭 유도 (열리면 자동 중지) */
.mobile-benefits-card:not(.open) .mbc-header[role="button"]{
    animation: mbcHeaderBounce 2.6s ease-in-out infinite;
    transform-origin: center;
}
@keyframes mbcHeaderBounce{
    0%, 100% { transform: translateY(0); }
    20% { transform: translateY(-3px); }
    40% { transform: translateY(0); }
    60% { transform: translateY(-2px); }
    80% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
    .mobile-benefits-card:not(.open) .mbc-header[role="button"]{ animation: none; }
}



@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}