:root {
    --primary: #7AC8EF;
    --primary-dark: #5fb5de;
    --bg-light: #f8fafc;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --white: #ffffff;
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --glass-bg: rgba(255, 255, 255, 0.8);
    --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Language Navigation */
.lang-nav {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    gap: 8px;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    padding: 6px;
    border-radius: 30px;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.lang-nav button {
    background: none;
    border: none;
    padding: 6px 14px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 20px;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.lang-nav button.active {
    background-color: var(--primary);
    color: var(--white);
}

/* Hero Section (Scrollytelling) */
.hero-scrolly {
    height: 260vh;
    /* 200vh -> 260vh로 확장하여 스크롤 주행 길이를 늘려 페이드 속도 체감 감속 */
    position: relative;
    background: radial-gradient(circle at top right, #e0f2fe, transparent),
        radial-gradient(circle at bottom left, #f0f9ff, transparent);
}

.sticky-hero {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-content {
    text-align: center;
    padding: 20px;
}

.logo-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content .logo {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.06));
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 2;
}

.logo-wrapper:hover .logo {
    transform: scale(1.08) rotate(2deg);
    filter: drop-shadow(0 20px 30px rgba(122, 200, 239, 0.35)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.04));
}

/* 파동 효과 (Ripple Wave) */
.ripple-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 28px;
    border: 2px solid rgba(122, 200, 239, 0.4);
    background-color: rgba(122, 200, 239, 0.03);
    box-shadow: 0 0 15px rgba(122, 200, 239, 0.15);
    z-index: 1;
    pointer-events: none;
    transform: scale(1);
    opacity: 1;
    animation: rippleEffect 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

.ripple-wave.delay-1 {
    animation-delay: 1.3s;
}

.ripple-wave.delay-2 {
    animation-delay: 2.6s;
}

@keyframes rippleEffect {
    0% {
        transform: scale(0.95);
        opacity: 0.9;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* MAMO 서비스 정식 오리지널 테마 일체형 단독 타이틀 (피라미드 삼각형 구도에 맞춘 정밀 폰트 스케일링) */
.mamo-theme-title {
    font-size: 3.5rem;
    /* 꼭짓점 로고와 바닥 슬로건을 부드럽게 잇는 황금비 중간 폭(약 170px) 조정 */
    font-weight: 900;
    letter-spacing: -0.02em;
    /* 자간을 아주 미세하게 보정하여 텍스트의 견고하고 안정된 물리적 부피감 확보 */
    margin: 6px 0 10px 0;

    /* 너무 탁하고 어두운 블루(#0369a1)와 너무 흐릿한 화이트스카이(#e0f2fe)의 단점을 모두 극복한 맑고 또렷한 스카이블루 황금 배합 */
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 52%, #7AC8EF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* 맑고 선명한 코발트 스카이블루 아우라 백글로우 */
    filter: drop-shadow(0 4px 15px rgba(2, 132, 199, 0.22));
}

/* 마케팅 퍼널 단계 표시용 프리미엄 배지 */
.funnel-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(122, 200, 239, 0.08);
}

.badge-amplify {
    background: rgba(244, 63, 94, 0.08);
    color: #e11d48;
    border: 1px solid rgba(244, 63, 94, 0.2);
}

.badge-interest {
    background: rgba(122, 200, 239, 0.12);
    color: #0284c7;
    border: 1px solid rgba(122, 200, 239, 0.3);
}

.badge-solution {
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-action {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* 3페이지: Interest / Story 영역 레이아웃 (우승작 Style B: Luminous Assurance Glass 박제) */
.interest-story {
    position: relative;
    min-height: 100vh;
    /* 100vh 체급으로 격상하여 화면을 웅장하게 가득 덮는 힐링 공간감 구현 */
    padding: 180px 20px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 맑고 포근한 연청색 수채화 그라데이션 필터 + 루이비통풍 럭셔리 모노그램 명품 패턴 배경 융합 */
    background-color: #E6EDF5;
    background-image:
        /* 1층: 영롱한 루이비통풍 MAMO 스마트 센서 시그니처 모노그램 명품 패턴 (가장 우아한 황금 비율: 크기 136px, Opacity 0.08의 신의 한 수 밸런스) */
        url("data:image/svg+xml,%3Csvg width='136' height='136' viewBox='0 0 136 136' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232E5A74' fill-opacity='0.08'%3E%3C!-- 📱 스마트폰 센서 아이콘 (단정하고 오목조밀하게) --%3E%3Cpath d='M25 15h16v30H25zm3 3v24h10V18z'/%3E%3Crect x='32' y='39' width='2' height='2' rx='1'/%3E%3C!-- ❤️ 가족 안심 하트 아이콘 (단아한 크기) --%3E%3Cpath d='M102 20c-3 0-5.5 2.5-5.5 5.5 0 3 2.5 5.5 5.5 5.5s5.5-2.5 5.5-5.5c-0.1-3-2.6-5.5-5.5-5.5zm0 9c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z'/%3E%3Cpath d='M102 23s1-1 1.8-1 1.6.8 1.6 1.7c0 1.7-2.4 3.8-3.4 4.6-1-.8-3.4-2.9-3.4-4.6 0-.9.8-1.7 1.6-1.7 1 0 1.8 1 1.8 1z'/%3E%3C!-- 🏠 평화로운 부모님 보금자리 아이콘 (정갈한 조형) --%3E%3Cpath d='M32 94l-10 8h4v10h12V102h4z'/%3E%3C!-- 📡 보이지 않는 안도감 파동/별 아이콘 (기하학적 날렵한 엠블럼) --%3E%3Cpath d='M102 94l3 7 7 3-7 3-3 7-3-7-7-3 7-3z'/%3E%3C!-- 💎 중앙 교차점 MAMO 시그니처 엠블럼 별 (최고급 로고플레이 수호) --%3E%3Ccircle cx='68' cy='68' r='4'/%3E%3Cpath d='M68 58l2 6.5 6.5 2-6.5 2-2 6.5-2-6.5-6.5-2 6.5-2z'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(135deg, #F2F6FA 0%, #E6EDF5 100%);
}

/* 킨포크풍 에디토리얼 에세이 캔버스 + 초고화질 글래스모피즘 돔 */
.story-box-editorial {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    padding: 60px 40px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 36px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 50px rgba(56, 94, 114, 0.04);
}

.story-lead {
    font-family: 'Gowun Batang', serif;
    font-size: 1.85rem;
    font-weight: 700;
    color: #0f172a;
    /* 고귀하고 정갈한 클래식 잉크 블랙 */
    line-height: 1.6;
    letter-spacing: -0.02em;
    margin-bottom: 30px;
}

.story-divider {
    width: 60px;
    height: 1px;
    background: #4A7A96;
    margin: 30px auto;
}

.story-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.12rem;
    color: #475569;
    line-height: 1.95;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

.story-text.highlighted {
    color: #0f172a;
    font-family: 'Gowun Batang', serif;
    font-size: 1.24rem;
    font-weight: 700;
    margin-top: 36px;
    letter-spacing: -0.02em;
}

/* 영롱하게 유영하는 안도감의 Ambient Orb */
.story-ambient-orb {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(122, 200, 239, 0.35) 0%, rgba(244, 172, 183, 0.15) 60%, transparent 80%);
    filter: blur(40px);
    z-index: 1;
    pointer-events: none;
    animation: rotateStoryOrb 18s linear infinite;
}

@keyframes rotateStoryOrb {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(120px, 80px) scale(1.15);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

/* 모바일 전용 반응형 에디토리얼 최적화 */
@media (max-width: 768px) {
    .interest-story {
        padding: 90px 16px;
    }

    .story-box-editorial {
        padding: 45px 24px;
        text-align: left;
        /* 모바일에서 텍스트 시작점을 왼쪽 정렬하여 줄글의 압도적인 가독성 사수 */
    }

    /* 모바일에서는 데스크톱용 하드코딩 개행(<br>)을 전격 무력화하여, 기기 너비에 맞게 유기적으로 흐르도록 보정 */
    .story-box-editorial br {
        display: none;
    }

    /* 얇은 에디토리얼 구분선도 텍스트 좌측 정렬선에 맞춰 칼같이 왼쪽 정렬로 튜닝 */
    .story-box-editorial .story-divider {
        margin: 24px 0;
    }

    .story-lead {
        font-size: 1.45rem;
        margin-bottom: 20px;
        word-break: keep-all;
        /* 조사 및 단어가 낱글자로 깨져 내려가는 현상 완전 차단 */
        overflow-wrap: break-word;
    }

    .story-text {
        font-size: 0.98rem;
        line-height: 1.85;
        margin-bottom: 18px;
        word-break: keep-all;
        /* 한글 단어 단위의 자연스럽고 품격 있는 자동 줄바꿈 수호 */
        overflow-wrap: break-word;
    }

    .story-text.highlighted {
        font-size: 1.08rem;
        margin-top: 28px;
    }
}

/* --- 최종 우승 슬로건 [Gowun Batang 고운바탕체 & 아우라 라이팅] --- */
.hero-slogan-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    /* 수직 호흡 간격 */
    margin: 36px auto 0 auto;
    /* 위 로고 및 타이틀과의 황금 조화 여백 */
    min-height: 200px;
    z-index: 10;
}

.slogan-part {
    font-family: 'Gowun Batang', serif;
    /* 따스하고 다정한 고운바탕 서체 */
    font-size: 1.4rem;
    /* 1.45rem -> 1.4rem 삼각형 구도의 밑받침 안정성 확보 */
    font-weight: 400;
    /* 고운바탕 특유의 아날로그 서체 질감 극대화 */
    color: #334155;
    /* 눈이 아주 편안한 슬레이트 모노톤 다크 */
    opacity: 0;
    filter: blur(8px);
    /* 시작 상태 아웃포커싱 선언 */
    /* 1.8초 동안 아지랑이 차오르듯 극강의 가속곡선 트랜지션 제공 */
    transition: opacity 1.8s cubic-bezier(0.25, 1, 0.5, 1),
        filter 1.8s cubic-bezier(0.25, 1, 0.5, 1),
        text-shadow 1.8s cubic-bezier(0.25, 1, 0.5, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Part-2 ("그래도") 수평 에디토리얼 날개 설계: 
   짧은 단어를 시각적으로 늘려주어 피라미드 삼각형 밑받침 구도를 완벽하게 완성 */
.slogan-part.Part-2 {
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.05em;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slogan-part.Part-2::before,
.slogan-part.Part-2::after {
    content: '';
    display: inline-block;
    width: 65px;
    /* 좌우 날개 선의 길이 */
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(122, 200, 239, 0.45), transparent);
    margin: 0 16px;
    /* 글자와 선 사이의 거리 */
    transition: all 1.8s ease-in-out;
}

.slogan-part.Part-3 {
    color: var(--text-main);
    /* 마지막 도달점에만 깊은 딥블랙 컬러 부여 */
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* 스크롤 감지 활성 시: 아웃포커싱이 걷히며 아련한 스카이블루 아우라(네온 라이트)가 맑게 켜짐 */
.slogan-part.reveal-active {
    opacity: 1;
    filter: blur(0);
    text-shadow: 0 0 20px rgba(122, 200, 239, 0.42);
    /* 몽환적인 백글로우 효과 */
}

/* --- [융합 마스터피스 백그라운드 레이아웃] --- */

.hero-content {
    z-index: 10;
    text-align: center;
    width: 100%;
    max-width: 650px;
    padding: 0 20px;
}

/* 융합 레이어 1: 몽환적 아지랑이 광원 구체 (지극히 은은하고 아스라한 감도 튜닝 - sticky-hero 내에서 고정 유영) */
.sticky-hero .ambient-orb {
    position: absolute;
    top: 15%;
    left: 20%;
    width: 680px;
    height: 680px;
    /* 투명도 농도를 0.26 수준으로 맑고 정갈하게 톤다운하여 아스라한 아침안개 연출 */
    background: radial-gradient(circle, rgba(122, 200, 239, 0.26) 0%, rgba(244, 172, 183, 0.16) 40%, rgba(192, 132, 252, 0.08) 65%, rgba(255, 255, 255, 0) 80%);
    border-radius: 50%;
    filter: blur(110px);
    /* 블러를 110px로 더 넓게 펼쳐 광원의 경계선이 완전히 수채화처럼 번지게 조치 */
    z-index: 1;
    pointer-events: none;
    animation: floatMasterAmbientOrb 22s ease-in-out infinite alternate;
}

@keyframes floatMasterAmbientOrb {
    0% {
        transform: translate(-10%, -10%) scale(1);
    }

    50% {
        transform: translate(12%, 6%) scale(1.1);
    }

    100% {
        transform: translate(-6%, 15%) scale(0.92);
    }
}

/* 융합 레이어 2: 마우스 반응형 입자 캔버스 */
.sticky-hero #particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    z-index: 10;
    /* 둥실둥실 호흡하듯 상하 바운스를 주어 고급스럽게 시각 유도 (사용자 요청 반영) */
    animation: floatIndicator 2.2s infinite ease-in-out;
    /* 스크롤 시 스무스한 소멸을 위한 부드러운 감쇄 트랜지션 탑재 */
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
        filter 0.8s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform, filter;
}

/* 스크롤이 시작되면 스무스하게 가라앉으며 아스라히 소멸되는 비주얼 클래스 */
.scroll-indicator.fade-out {
    opacity: 0;
    filter: blur(6px);
    transform: translate(-50%, 15px) scale(0.9);
    pointer-events: none;
}

@keyframes floatIndicator {

    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 8px);
    }
}

.mouse {
    width: 24px;
    height: 40px;
    border: 2px solid var(--text-muted);
    border-radius: 12px;
    position: relative;
}

.mouse::before {
    content: '';
    width: 4px;
    height: 8px;
    background-color: var(--text-muted);
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    animation: scroll-wheel 2s infinite;
}

@keyframes scroll-wheel {
    0% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, 15px);
    }
}

/* Scrollytelling Section */
.scrolly-section {
    position: relative;
    height: 550vh;
    /* 300vh -> 550vh로 스크롤 주행 거리를 대대적 확장하여 훨씬 더 천천히 여유롭게 상영하도록 감속 */
}

.sticky-bg {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.progress-container {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
    z-index: 10;
}

.hero-progress {
    position: relative;
    /* Hero 내부에서는 상대 위치로 배치 */
    bottom: auto;
    left: auto;
    transform: none;
    margin: 20px auto;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: var(--primary);
    transition: width 0.1s ease-out;
    /* 부드러운 반응형 업데이트 */
}

.bg-gradient {
    position: absolute;
    width: 150%;
    height: 150%;
    background: linear-gradient(135deg, #7AC8EF 0%, #3b82f6 100%);
    opacity: 0.1;
    filter: blur(80px);
    transition: var(--transition-smooth);
}

/* --- 무한 공간감의 풀-블리드 시네마틱 풀-스크린 배경 (Frameless Cinema Slides) --- */
.cinema-screen-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.cinema-slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.24);
    /* 최종 우승(Winner) Ken Burns: 1.24배 대담한 영화적 줌인 대기 */
    transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1),
        transform 12s cubic-bezier(0.1, 1, 0.1, 1);
    /* 최종 우승(Winner): 12초간 부드럽고 장엄하게 유영 */
    pointer-events: none;
}

/* 스크롤로 해당 파트 활성화 시, 스무스하게 줌인이 안착되며 투명도 76%로 눈부시게 선명한 배경 고정 */
.cinema-slide.active {
    opacity: 0.76;
    /* 기존 0.32의 답답함을 폭파하고 76% 선명도로 맑고 시원하게 뿜어져 나오게 격상 */
    transform: scale(1.02);
    /* 최종 우승(Winner) Ken Burns: 1.02배 수준까지 대담하게 줌아웃하며 안착 */
    z-index: 2;
}

.cinema-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.02) saturate(0.85) sepia(0.04);
    /* 차분하고 온화한 필름 아날로그 필터 */
}

/* 따스한 안개 베일 레이어: 
   좌측 인물 영역을 맑고 선명하게 개방하면서, 우측 텍스트 영역의 가독성만 고정 보호하는 슬림 그라데이션 */
.cinema-veil {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0.16) 0%,
            /* 좌측 인물 구역은 안개를 16% 수준으로 완전히 맑게 걷어내어 또렷이 개방 */
            rgba(255, 255, 255, 0.32) 45%,
            rgba(255, 255, 255, 0.78) 100%
            /* 우측 글씨 영역만 78%의 포근한 안개로 감싸 가독성 사수 */
        );
    z-index: 3;
    pointer-events: none;
}

/* 우측 스플릿 에디토리얼 텍스트 플로우 (데스크톱: 화면 전체를 시원하게 가로지르는 수평 시네마 띠 전담) */
.scroll-content {
    position: absolute;
    /* 스티키 부모 내부에서 절대 오버레이 고정 레이어로 장착 */
    top: 0;
    left: 50%;
    /* 가로 정중앙 */
    transform: translateX(-50%);
    /* 정확한 센터 정렬 */
    width: 100%;
    max-width: 100vw;
    /* 기존 720px 족쇄를 완전히 분쇄하여, 가로 안개 띠 배경이 화면 전체 가로폭(100vw)을 꽉 덮도록 해방 */
    height: 100vh;
    /* 뷰포트 높이 고정 */
    overflow: hidden;
    /* 수직 스크롤 오버플로우 격리 */
    z-index: 10;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2페이지 시네마틱 3단 스토리 탭 내비게이션 */
.story-steps-nav {
    position: absolute;
    top: 90px; /* 상단에서 단정히 내려온 위치 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 999;
    pointer-events: auto; /* 마우스 클릭 상시 감지 */
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 6px 10px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.04);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-nav-btn {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; /* 가로세로 동일 비율로 완벽한 기하학 정원(Circle) 구축 */
    height: 34px;
    border-radius: 50%; /* 완전한 구체 둥글기 */
    color: #64748b;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-nav-btn:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.5);
}

.story-nav-btn.active {
    color: #0f172a;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.story-nav-btn .nav-num {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem; /* 원 안에서 눈에 선명하게 잘 보이도록 폰트 소폭 줌인 */
    color: #94a3b8;
    font-weight: 700;
    line-height: 1; /* 완벽한 수직 중앙 정렬 정합성 */
}

.story-nav-btn.active .nav-num {
    color: #4A7A96; /* 활성화 시 안심 연청색 강조 */
}

.step {
    position: absolute;
    /* 세 장의 수필 문장 카드를 한자리에 포개어 정교히 겹침 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    /* 세로 정중앙 황금 안착대 매칭 */
    justify-content: center;
    /* 가로 정중앙 */
    pointer-events: none;
    opacity: 1;
    /* 중복 opacity 곱연산 오차를 해결하기 위해 부모 단계는 1로 완전 상시 개방 */
}

/* 지극히 미니멀하고 투명하게 스며드는 에디토리얼 타이포그래피 모션 (등장-안착-퇴장 3상 흐름 완비) */
.step-card.emotional-card {
    /* 텍스트의 완벽한 가독성을 사수하기 위한, 양 가장자리가 부드럽게 흐려지는 '가로 순백 시네마 띠' 이식 */
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.65) 20%,
            /* 65% 투명 안개 띠 */
            rgba(255, 255, 255, 0.78) 50%,
            /* 중앙은 78%로 맑게 글씨 지탱 */
            rgba(255, 255, 255, 0.65) 80%,
            rgba(255, 255, 255, 0) 100%) !important;
    /* 우아한 유리 필터 뒤로 배경을 실크처럼 뭉개주는 12px 크리스탈 블러 적용 */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: none;
    box-shadow: none;
    padding: 42px 0 !important;
    /* 위아래로 포근하게 감싸는 패딩 */
    max-width: 100% !important;
    /* 가로 띠가 화면 전체를 시원하게 가로지르도록 100% 확장 */
    width: 100% !important;
    text-align: center;
    /* 대담한 1등급 시네마 정중앙 타이포 정렬 */
    /* [1단계: 대기 상태] 안착점 바로 아래 단 18px 지점에서 영롱하게 대기 */
    transform: translateY(18px);
    opacity: 0;
    filter: blur(5px);
    /* 텍스트 페이드 등장 속도가 휙휙 급하게 바뀌지 않고, 서정적인 영화 자막처럼 아스라이 스며들도록 1.4초 평화 템포 장착 */
    transition: opacity 1.4s cubic-bezier(0.19, 1, 0.22, 1),
        filter 1.4s cubic-bezier(0.19, 1, 0.22, 1),
        transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: auto;
}

/* [2단계: 안착 상태] 스크롤이 도달하여 화면 황금 높이에 오롯이 안착 */
.step.active .step-card.emotional-card {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
}

/* [3단계: 퇴장 상태] 다음 문장이 오버랩될 때 아래로 꺼지지 않고, 단 18px 위로 가볍게 유영하며 소멸 */
.step.past .step-card.emotional-card {
    transform: translateY(-18px);
    opacity: 0;
    filter: blur(5px);
}

.step-card.emotional-card h2 {
    font-family: 'Gowun Batang', serif;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-main);
    line-height: 1.4;
    letter-spacing: -0.02em;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.step-card.emotional-card p {
    color: #334155;
    font-size: 1.15rem;
    line-height: 1.82;
    letter-spacing: -0.01em;
    font-weight: 500;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* Features Section (인터랙티브 디바이스 쇼케이스 구축) */
.features {
    position: relative;
    padding: 160px 20px;
    background-color: #EBF4FA;
    /* 맑고 잔잔한 안심 연청색 기본배경 */
    transition: background-color 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

/* 기하학적 미세 도트 격자 패턴 배경 (정교한 테크 감성 연출) */
.features-grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(74, 122, 150, 0.08) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 2;
    opacity: 0.9;
}

/* 영롱하게 빛나는 Ambient Orb (안심 조명 광원) */
.features-ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
    transition: all 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0.85; /* 기본 농도를 확 끌어올려 선명하게 유지 */
}

/* orb-1: 좌측 하단 스마트폰 아래에서 뿜어져 나오는 은은한 조명 */
.features-ambient-orb.orb-1 {
    width: 500px;
    height: 500px;
    bottom: -15%;
    left: -10%;
    background: radial-gradient(circle, rgba(122, 200, 239, 0.68) 0%, rgba(122, 200, 239, 0) 70%);
}

/* orb-2: 우측 상단 아코디언 리스트 뒤를 보좌하는 연보라/연청색 조명 */
.features-ambient-orb.orb-2 {
    width: 450px;
    height: 450px;
    top: -10%;
    right: -5%;
    background: radial-gradient(circle, rgba(244, 172, 183, 0.48) 0%, rgba(244, 172, 183, 0) 70%);
}

/* 아코디언 연동 인터랙티브 배경 오라 (Interactive Background Aura) */

/* 02. Smart Safety Setup 활성화 (소프트 퍼플 톤) */
.features[data-active-feature="1"] {
    background-color: #F6EFFB; /* 차분하고 포근한 소프트 라벤더 배경색 전환 */
}
.features[data-active-feature="1"] .features-ambient-orb.orb-1 {
    background: radial-gradient(circle, rgba(192, 132, 252, 0.62) 0%, rgba(192, 132, 252, 0) 70%);
    transform: translate(100px, -50px) scale(1.1);
}
.features[data-active-feature="1"] .features-ambient-orb.orb-2 {
    background: radial-gradient(circle, rgba(122, 200, 239, 0.48) 0%, rgba(122, 200, 239, 0) 70%);
    transform: translate(-80px, 40px);
}

/* 03. Community Care 활성화 (세이지 민트 / 엠버 톤) */
.features[data-active-feature="2"] {
    background-color: #EDFAF0; /* 싱그럽고 편안한 힐링 세이지 그린 배경색 전환 */
}
.features[data-active-feature="2"] .features-ambient-orb.orb-1 {
    background: radial-gradient(circle, rgba(52, 211, 153, 0.58) 0%, rgba(52, 211, 153, 0) 70%);
    transform: translate(140px, -80px) scale(0.95);
}
.features[data-active-feature="2"] .features-ambient-orb.orb-2 {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.38) 0%, rgba(251, 191, 36, 0) 70%);
    transform: translate(-100px, 60px) scale(1.05);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

/* 실제 콘텐츠 레이어가 조명 및 격자 패턴보다 확실하게 위로 올라오도록 보장 */
.features .container {
    position: relative;
    z-index: 10;
}

.section-title {
    text-align: center;
    font-family: 'Gowun Batang', serif;
    font-size: 2.6rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin-bottom: 80px;
}

/* 2열 스플릿 그리드 배치 */
.features-split-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr;
    gap: 80px;
    align-items: center;
}

/* 좌측 스마트폰 목업 디바이스 */
.mockup-display-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.floating-screen-canvas {
    position: relative;
    width: 290px;
    height: 590px;
    border-radius: 14px; /* 아이콘 잘림 방지를 위해 단정하고 미니멀한 14px로 곡률 최적화 */
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    
    /* 3D Isometric 입체 각도 투영 완화 (더 정갈하고 세련된 미니멀 각도로 튜닝) */
    transform: perspective(1000px) rotateY(-6deg) rotateX(3deg) rotateZ(0.5deg);
    transform-style: preserve-3d;
    
    /* 공중 부양 이중 흐림 안개 그림자 */
    box-shadow: 
        -10px 18px 40px -8px rgba(15, 23, 42, 0.1),
        -3px 8px 16px -4px rgba(15, 23, 42, 0.05),
        0 0 1px 1px rgba(255, 255, 255, 0.3) inset;
        
    transition: 
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 5;
}

/* 마우스 호버 시 입체 각도가 부드럽게 세워지는 인터랙티브 모션 */
.floating-screen-canvas:hover {
    transform: perspective(1000px) rotateY(-1.5deg) rotateX(0.8deg) rotateZ(0deg) scale(1.01);
    box-shadow: 
        -18px 28px 55px -12px rgba(15, 23, 42, 0.15),
        -6px 12px 24px -6px rgba(15, 23, 42, 0.08),
        0 0 1px 1px rgba(255, 255, 255, 0.5) inset;
}

/* 동적 이너 스크린 (유리 실크 엣지 가공) */
.phone-inner-screen {
    position: relative;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 14px; /* 보더 밀착 정렬을 위해 14px로 일치 */
    /* 조명 빛을 화사하게 쳐내는 럭셔리 실크 유리 보더 장착 */
    border: 1px solid rgba(255, 255, 255, 0.45);
    overflow: hidden;
}


/* 실제 앱 스크린샷 3종 Cross-fade 레이어 */
.screen-layer {
    position: absolute;
    top: 0; /* 상단 완전 고정! 이로써 상단 아이콘 잘림 0% 원천 수호 */
    left: 0;
    width: 100%;
    height: 102.2%; /* 아래쪽으로만 2.2% 연장하여 하단 검은 줄만 아래로 마스킹 아웃 */
    object-fit: cover;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.screen-layer.active {
    opacity: 1;
    filter: blur(0);
    z-index: 5;
}

/* 디바이스 소프트 섀도우 (3D 경사각 입체 투영 그림자 튜닝) */
.mockup-soft-shadow {
    width: 78%;
    height: 20px;
    background: radial-gradient(ellipse, rgba(15, 23, 42, 0.05) 0%, transparent 70%);
    margin: 28px 0 0 -18px; /* 각도 완화에 맞춰 그림자 편향 마진 축소 조율 */
    filter: blur(5px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 캔버스 호버 시 그림자도 유기적으로 납작해지며 위치를 옮기는 물리 모션 구현 */
.floating-screen-canvas:hover + .mockup-soft-shadow {
    transform: scale(0.97) translate(10px, -3px);
    opacity: 0.85;
    filter: blur(6px);
}

/* 우측 인터랙티브 아코디언 카드 리스트 */
.features-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.accordion-item {
    background: rgba(255, 255, 255, 0.35); /* 조명이 비치도록 투명도 조정 */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5); /* 우아한 흰색 실크 테두리 */
    border-radius: 24px;
    padding: 28px 32px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02);
    position: relative;
    z-index: 5;
}

.accordion-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.75);
    box-shadow: 0 15px 35px rgba(74, 122, 150, 0.04);
}

.accordion-item.active {
    background: rgba(255, 255, 255, 0.85); /* 가독성 보장을 위해 활성화 시 불투명도 상승 */
    border-color: rgba(122, 200, 239, 0.4);
    box-shadow: 0 20px 45px rgba(74, 122, 150, 0.08);
    transform: translateY(-4px);
}

.accordion-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.accordion-num {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.05em;
    transition: color 0.4s ease;
}

.accordion-item.active .accordion-num {
    color: #4A7A96;
    /* 활성화 시 맑은 연청색 테마 강조 */
}

.accordion-header h3 {
    font-family: 'Gowun Batang', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #334155;
    margin: 0;
    transition: color 0.4s ease;
}

.accordion-item.active .accordion-header h3 {
    color: #0f172a;
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.active .accordion-body {
    max-height: 200px;
    /* 버튼 추가로 인한 텍스트 잘림을 완벽히 방어하기 위해 120px -> 200px 여유롭게 확장 */
    opacity: 1;
    margin-top: 14px;
}

.accordion-body p {
    color: #64748b;
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0;
}

/* 공동체 돌봄 서비스 가맹/제휴 등록 신청 인라인 버튼 (Beautified Glass Capsule) */
.accordion-inline-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px; /* 숨통을 트여주는 최적의 마진 */
    padding: 10px 22px;
    background: rgba(74, 122, 150, 0.08); /* 맑게 스며나오는 틴티드 청색 글래스 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(74, 122, 150, 0.3); /* 우아한 연청색 실크 테두리 */
    color: #3b6d8c !important; /* 평소에는 차분하고 고급스러운 딥블루 폰트 */
    font-size: 0.86rem;
    font-weight: 600;
    border-radius: 30px; /* 극치의 프리미엄을 상징하는 알약 캡슐 모서리 */
    text-decoration: none;
    box-shadow: none; /* 시각 피로를 없애기 위해 평소 그림자 제거 */
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-inline-btn:hover {
    background: rgba(74, 122, 150, 0.9); /* 호버 시 빛이 가득 찬 브랜드 컬러로 융합 */
    border-color: rgba(74, 122, 150, 0.9);
    color: #ffffff !important; /* 텍스트 컬러가 화이트로 극적이고 우아하게 반전 */
    transform: translateY(-2px); /* 부드러운 업 모션 */
    box-shadow: 0 4px 12px rgba(74, 122, 150, 0.06); /* 카드 바닥에 밀착되도록 초미세 솜털 그림자만 적용 */
}

.accordion-inline-btn .btn-arrow {
    font-size: 0.95rem;
    font-weight: 700;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-inline-btn:hover .btn-arrow {
    transform: translateX(5px); /* 우측 슬라이딩 화살표 모션 미세 고도화 */
}

/* 모바일 전용 반응형 대대적 최적화 */
@media (max-width: 768px) {
    .features {
        padding: 90px 16px;
    }

    /* 모바일 환경에서의 Ambient Orb 스케일 다운 및 블러 완화 */
    .features-ambient-orb {
        filter: blur(60px) !important;
        opacity: 0.45 !important;
    }
    .features-ambient-orb.orb-1 {
        width: 320px !important;
        height: 320px !important;
        bottom: -10% !important;
        left: -15% !important;
    }
    .features-ambient-orb.orb-2 {
        width: 280px !important;
        height: 280px !important;
        top: -5% !important;
        right: -10% !important;
    }

    .section-title {
        font-size: 1.85rem;
        margin-bottom: 50px;
    }

    .features-split-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    /* 모바일 아코디언 리스트 높이 시프트 댐핑 (스크롤 덜컥거림 완전 예방) */
    .features-accordion-list {
        min-height: 490px;
    }

    .premium-phone-frame {
        width: 250px;
        height: 510px;
        border: 5px solid #0f172a;
        /* 모바일에서도 5px로 기막히게 얇게 깎아낸 초슬림 메탈 프레임 */
        border-radius: 28px;
    }

    .accordion-item {
        padding: 22px 24px;
    }

    .accordion-body p {
        font-size: 0.94rem;
    }

    /* 모바일 반응형 시네마 탭 내비게이션 크기 압축 */
    .story-steps-nav {
        top: 40px;
        gap: 6px;
        padding: 4px 6px;
    }

    .story-nav-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .story-nav-btn .nav-label {
        display: none; /* 모바일에서는 01, 02, 03 숫자 단추만 남겨 미니멀리즘 극대화 */
    }
}

/* CTA Section */
.cta {
    padding: 100px 20px;
    text-align: center;
    background: linear-gradient(135deg, #7AC8EF 0%, #3b82f6 100%);
    color: var(--white);
}

.cta-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

.btn {
    display: inline-block;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.btn-primary {
    background-color: var(--white);
    color: var(--primary);
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Footer */
.footer {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition-smooth);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero-scrolly h1 {
        font-size: 2.4rem;
        /* 모바일에 안착하는 단정한 타이틀 크기 */
        margin: 6px 0 8px 0;
    }

    .hero-slogan-wrap {
        gap: 14px;
        /* 슬로건 줄 간격을 압축하여 모바일 뷰포트 내 정밀 포지셔닝 보장 */
        margin-top: 24px;
        min-height: 140px;
    }

    .slogan-part {
        font-size: 1.12rem;
        /* 모바일에서 한 줄 깨짐이 절대 생기지 않도록 감쇄 */
        line-height: 1.4;
    }

    .logo-wrapper {
        width: 80px;
        /* 로고 아이콘 크기 축소로 수직 호흡 확보 */
        height: 80px;
        margin-bottom: 16px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    /* [모바일 2페이지 시네마틱 스플릿 - 무한 시네마 스틸컷 스크린 대개조]
       모바일에서도 액자 한계를 부수고 100vh 풀-스크린 스티키 오버랩 시네마 완전 통합! */
    .scrolly-section {
        height: 300vh;
        /* 데스크톱과 동일한 300vh 모바일 스크롤 주행로 확보 */
    }

    .sticky-bg {
        position: sticky;
        top: 0;
        height: 100vh;
        /* 모바일에서도 100vh 풀-화면 고정 */
        width: 100%;
        overflow: hidden;
        z-index: 5;
        padding-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cinema-screen-wrapper {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .cinema-slide.active {
        opacity: 0.88;
        /* 모바일에서도 사진의 선명함과 서정성을 대폭 증폭 */
        transform: scale(1);
    }

    /* 모바일 순백 베일 필터: 텍스트 가독성을 사수하면서도, 배경 사진이 맑고 또렷하게 투영되도록 농도 대폭 걷어내기 */
    .cinema-veil {
        background: linear-gradient(to bottom,
                rgba(255, 255, 255, 0.12) 0%,
                /* 상단 구역은 안개를 12%로 사실상 완전 개방하여 인물 얼굴 선명 노출 */
                rgba(255, 255, 255, 0.32) 50%,
                /* 텍스트 정중앙 안착 구간에 투명한 감성 실크 베일 32% 배합 */
                rgba(255, 255, 255, 0.65) 100%
                /* 하단만 65%로 부드럽게 지탱 */
            ) !important;
        z-index: 3;
    }

    /* [3D 공간 통합] 모바일에서도 100vh 뷰포트 정중앙 배치로 극장 자막 연출 구현 */
    .scroll-content {
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        overflow: hidden !important;
        z-index: 10;
        pointer-events: none;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 42px !important;
        /* 모바일 기기 좌우 아늑한 감성 마진 42px로 거대 확장! */
    }

    .step {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        /* 수필 텍스트 슬림화 완성으로 잘림 우려가 소멸되어, 데스크톱과 동일하게 화면 완전 정중앙 황금 정렬 복원 */
        justify-content: center !important;
        pointer-events: none;
        /* 데스크톱의 0.7초 트랜지션 및 active 토글 자연 상속 */
    }

    .step-card.emotional-card {
        background: linear-gradient(to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.65) 12%,
                rgba(255, 255, 255, 0.78) 50%,
                rgba(255, 255, 255, 0.65) 88%,
                rgba(255, 255, 255, 0) 100%) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        padding: 24px 0 !important;
        max-width: 100% !important;
        /* 모바일에서도 가로 띠가 화면 끝까지 뻗어나가도록 100% 확장 */
        width: 100% !important;
        transform: translateY(18px) !important;
        /* 대기 18px 슬라이드 상속 */
        opacity: 0 !important;
        filter: blur(5px) !important;
        text-align: center !important;
        /* 모바일에서도 명작 포스터처럼 대담한 정중앙 정렬! */
        transition: opacity 1.4s cubic-bezier(0.19, 1, 0.22, 1),
            filter 1.4s cubic-bezier(0.19, 1, 0.22, 1),
            transform 1.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
    }

    /* active 시 만개 */
    .step.active .step-card.emotional-card {
        transform: translateY(0) !important;
        opacity: 1 !important;
        filter: blur(0) !important;
    }

    /* past 시 승천 */
    .step.past .step-card.emotional-card {
        transform: translateY(-18px) !important;
        opacity: 0 !important;
        filter: blur(5px) !important;
    }

    .step-card.emotional-card h2 {
        font-size: 1.25rem !important;
        /* 모바일 전용 슬림 시네마 타이틀 크기 (줄깨짐 방어) */
        margin-bottom: 8px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        /* 촌스러운 스카이블루 대신, 아스라한 흰 안개 위에 또렷이 얹히는 클래식 잉크 네이비 블랙(#0f172a) 주입 */
        letter-spacing: -0.03em !important;
        max-width: 84% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .step-card.emotional-card p {
        font-size: 0.90rem !important;
        /* 모바일 90% 황금 슬림 가독 글꼴 스케일 (하단 잘림 완전 차단) */
        line-height: 1.62 !important;
        color: #334155 !important;
        /* 옅던 그레이 대신, 안개 평원 위 활자의 선을 든든하게 받쳐주는 정갈한 묵향 먹색(#334155) 주입 */
        font-weight: 500 !important;
        letter-spacing: -0.01em !important;
        max-width: 84% !important;
        margin-left: auto !important;
    }
}

/* ==========================================================================
   최후의 다운로드 유도 (CTA) 듀얼 비활성화 버튼 디자인 (Beautified Disabled)
   ========================================================================== */

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
}

/* 프리미엄 반투명 화이트 글래스 비활성화 버튼 (블루 배경 대비 가독성 100% 확보) */
.btn-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.06); /* 블루 배경을 맑게 비쳐내는 화이트 틴티드 글래스 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2); /* 은은하고 맑은 화이트 실크 보더 */
    color: rgba(255, 255, 255, 0.55) !important; /* 가독성을 확보하되 비활성화 느낌을 주는 55% 반투명 화이트 */
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 30px; /* 극치의 단아함을 상징하는 30px 알약 모서리 */
    text-decoration: none;
    cursor: not-allowed; /* 마우스를 올리면 세련되게 금지 아이콘 표출 */
    user-select: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: none;
}

/* 비활성화 상태의 차분한 롤오버 피드백 */
.btn-disabled:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.45);
    color: rgba(255, 255, 255, 0.85) !important; /* 롤오버 시 85% 화이트로 더 또렷하게 피드백 */
    transform: translateY(-1px); /* 가벼운 클릭 불가 제스처 반응 */
}

/* 모바일 전용 듀얼 버튼 수직 최적화 쿼리 */
@media (max-width: 576px) {
    .cta-buttons {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        padding: 0 24px;
    }
    .btn-disabled {
        width: 100%;
        max-width: 320px;
        padding: 12px 20px;
        font-size: 0.88rem;
    }
}

/* ==========================================================================
   우하단 플로팅 안심 연락처 버튼 (Floating Action Button - FAB)
   ========================================================================== */
.contact-fab {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #4A7A96; /* 맑고 안락한 MAMO 대표 블루 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* 화면 최상단 강제 안착 */
    outline: none;
    box-shadow: 0 8px 24px rgba(74, 122, 150, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.fab-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 호버 시: 둥실 솟구치며 영롱한 발광 테두리 아우라 시현 */
.contact-fab:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.95);
    color: #3b627b;
    box-shadow: 0 12px 32px rgba(74, 122, 150, 0.22), 0 0 20px rgba(122, 200, 239, 0.35);
}

.contact-fab:hover .fab-icon {
    transform: scale(1.08) rotate(4deg);
}

/* FAB 잔잔한 물결 동적 링 애니메이션 */
.contact-fab::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(122, 200, 239, 0.4);
    opacity: 0;
    pointer-events: none;
    animation: fabRipple 3.5s infinite ease-out;
}

@keyframes fabRipple {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.4);
        opacity: 0;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* ==========================================================================
   글래스모피즘 문의 모달 (Glassmorphic Contact Modal Box)
   ========================================================================== */
.contact-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0); /* 평소에는 완전 투명 */
    z-index: 10000; /* FAB보다 한 단계 위에 전면 오버레이 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    /* 부드러운 투명도 및 배경색 페이드 인/아웃 연출 */
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 모달 활성화(active) 시 GPU 부하 0%의 맑고 우아한 미니멀 실크 화이트 반투명 틴팅 */
.contact-modal.active {
    opacity: 1;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.65); /* 맑고 가벼운 안개 화이트 */
}

.modal-card {
    position: relative;
    width: 90%;
    max-width: 480px;
    background: rgba(255, 255, 255, 0.82); /* 눈부신 프로스트 글래스모피즘 바디 */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12), 0 4px 16px rgba(0, 0, 0, 0.02);
    transform: scale(0.94) translateY(15px); /* 대기 줌인 및 스무스 상향 대기 */
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-modal.active .modal-card {
    transform: scale(1) translateY(0); /* 스무스 줌인 안착 */
}

/* 닫기 버튼 ✕ */
.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    font-size: 1.8rem;
    font-weight: 300;
    color: #64748b;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    line-height: 1;
}

.modal-close-btn:hover {
    color: #0f172a;
    transform: scale(1.1);
}

.modal-title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 28px;
    letter-spacing: -0.02em;
    text-align: center;
}

/* 폼 요소 스타일링 */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
    letter-spacing: -0.01em;
}

.form-input {
    font-family: inherit;
    font-size: 0.92rem;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.5);
    color: #0f172a;
    outline: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-textarea {
    height: 120px;
    resize: none;
}

/* 입력 칸 포커싱 시 은은한 아우라 조명 링 */
.form-input:focus {
    border-color: rgba(74, 122, 150, 0.5);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(122, 200, 239, 0.16);
}

/* 모달 제출 캡슐형 실크 버튼 */
.btn-modal-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    margin-top: 10px;
    background: rgba(74, 122, 150, 0.08); /* 반투명 연청색 틴티드 글래스 */
    border: 1px solid rgba(74, 122, 150, 0.15);
    color: #4A7A96;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 30px; /* 프리미엄 알약 */
    cursor: pointer;
    outline: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: none;
}

.submit-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-modal-submit:hover {
    background: #4A7A96; /* 꽉 찬 브랜드 블루 */
    border-color: #4A7A96;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(74, 122, 150, 0.15);
}

.btn-modal-submit:hover .submit-arrow {
    transform: translateX(4px);
}

/* ==========================================================================
   성공 피드백 노티 디자인 & 체크 마이크로 모션 (Success Screen)
   ========================================================================== */
.modal-success-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 0;
}

.success-icon-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
}

.success-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.1); /* 성공 에메랄드 안개 원 */
    transform: scale(0);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.success-check {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 24px;
    height: 24px;
    color: #10b981; /* 선명한 에메랄드 성공 체크 */
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    transition: stroke-dashoffset 0.6s 0.2s ease-out;
}

/* 성공화면 활성화 시 체크마크 스르륵 그려지는 마이크로 모션 발동 */
.modal-success-container.active .success-circle {
    transform: scale(1);
}

.modal-success-container.active .success-check {
    stroke-dashoffset: 0;
}

.success-title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #10b981; /* 산뜻한 그린 컬러링 */
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}

.success-desc {
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 32px;
    max-width: 320px;
}

/* 성공 닫기 캡슐 단추 */
.btn-modal-success-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    background: #10b981; /* 안심의 성공 그린 */
    border: 1px solid #10b981;
    color: #ffffff !important;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    outline: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.2);
}

.btn-modal-success-close:hover {
    background: #059669;
    border-color: #059669;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

/* 모바일 모달 여백 압축 반응형 쿼리 */
@media (max-width: 576px) {
    .modal-card {
        padding: 30px 24px;
        border-radius: 20px;
    }
    .contact-fab {
        bottom: 24px;
        right: 24px;
        width: 48px;
        height: 48px;
    }
    .fab-icon {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   글래스모피즘 문의 유형 드롭다운 셀렉트 (Custom Dropdown Select)
   ========================================================================== */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* 세련되고 연한 슬레이트 화살표 SVG를 백그라운드로 안전 투영 */
    background-image: url("data:image/svg+xml;utf8,<svg fill='%2364748b' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
    padding-right: 44px !important;
    cursor: pointer;
    /* transition: all을 한정하여 배경 아이콘이 왼쪽에서 밀려오는 애니메이션 버그 차단 */
    transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 셀렉트 드롭다운 옵션창 열렸을 때 브라우저 고유 스타일 강제 리셋 및 패딩 부여 */
.form-select option {
    background-color: #ffffff;
    color: #0f172a;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.9rem;
    padding: 10px;
}

/* ==========================================================================
   모달 개방 시 스크롤바 소멸에 의한 전체 fixed 요소 레이아웃 밀림 방지 동기화 댐퍼
   ========================================================================== */
html.modal-open body {
    padding-right: var(--scrollbar-width, 0px) !important;
}

/* lang-nav의 마진 시프트 transition을 0s로 리셋하여 뷰포트와 칼박자 동기화 */
html.modal-open .lang-nav {
    margin-right: var(--scrollbar-width, 0px) !important;
    transition: margin-right 0s !important;
}

/* contact-fab의 transition: all을 격리하여 마진 변경 시 굼뜨게 미끄러지며 튀는 결함 완전 해결 */
.contact-fab {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                color 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* contact-fab의 마진 시프트 transition을 0s로 리셋하여 뷰포트와 칼박자 동기화 */
html.modal-open .contact-fab {
    margin-right: var(--scrollbar-width, 0px) !important;
    transition: margin-right 0s !important;
}