/* ========================================
   TEN10&0 Mobile Stylesheet
   모바일 전용 스타일 (767px 이하)
   
   ⚠️ 이 파일은 모바일(767px 이하)에서만 로드됩니다.
   ⚠️ 이 파일을 수정해도 PC/태블릿에는 영향을 주지 않습니다.
   ======================================== */

@media (max-width: 767px) {

/* ==================== 모바일 전체 레이아웃 중앙 정렬 ==================== */
body, html {
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
}

.scroll-snap-container {
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
}

.scroll-snap-section {
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
}

/* ==================== 스크롤 스냅 비활성화 (모바일) ==================== */
.scroll-snap-container {
    scroll-snap-type: none !important;  /* 스크롤 스냅 효과 제거 */
}

.scroll-snap-section {
    scroll-snap-align: none !important;  /* 섹션별 스냅 정렬 제거 */
}

/* ==================== Hero 섹션 모바일 스타일 ==================== */
#heroContent {
    padding-top: 55px !important;
}

#heroSubtitle {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 1) !important;
    white-space: nowrap !important;
}

#heroSubtitle span {
    font-weight: 800 !important;
}

.sub-title-container {
    margin-bottom: 20px !important;
}

.sub-title-line {
    width: 30px !important;
    height: 1px !important;
}

#heroTitle {
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
}

#heroVideo {
    width: 350px !important;
    margin-top: 68px !important;
}

#scrollArrow {
    bottom: -55px !important;
    top: auto !important;
    left: 47% !important;
    transform: translateX(-50%) !important;
}

#scrollArrow i {
    font-size: 24px !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

#scrollArrow > div {
    width: 36px !important;
    height: 36px !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
}


/* ========== 모바일 프로세스 섹션 CSS ========== */

/* 프로세스 히어로 */
.process-hero { 
    padding: 41px 20px !important; 
}
.process-hero-title { 
    font-size: 41px !important; 
    letter-spacing: -1px !important; 
    line-height: 1.4 !important; 
    margin-bottom: 59px !important; 
}
.process-hero-subtitle { 
    font-size: 21px !important; 
    line-height: 1.7 !important; 
    margin-bottom: 80px !important; 
}

.process-hero-subtitle br {
    display: block !important;
}
.process-hero-scroll-text { 
    font-size: 19px !important; 
    margin-top: 60px !important; 
    letter-spacing: 2px !important; 
}


/* ==================== 타임라인 ==================== */
.journey-path {
    position: static !important;      /* PC의 absolute 제거 */
    left: auto !important;            /* PC의 left: 50% 제거 */
    top: auto !important;             /* 인라인 top 제거 */
    bottom: auto !important;          /* 인라인 bottom 제거 */
    transform: none !important;       /* PC의 translateX 제거 */
    display: block !important;
    width: 2px !important;
    height: 60px !important;
    margin: 20px auto !important;
    z-index: auto !important;         /* PC의 z-index: 0 제거 */
    background: linear-gradient(180deg, transparent 0%, #97bc62 10%, #2c5f2d 90%, transparent 100%) !important;
}


/* ==================== Step 1 모바일 스타일 ==================== */
.step-wrapper[data-step="1"] {
    margin-bottom: 35px !important;
}

.step-wrapper[data-step="1"] .step-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 35px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    align-items: stretch !important;
    text-align: left !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    grid-template-columns: none !important;
}

/* Reset grid positioning and set flex order for mobile */
.step-wrapper[data-step="1"] .step-header {
    order: 1 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="1"] .step-label {
    order: 2 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 8px 16px !important;  /* 세계 최초 기술 (7글자) - 모바일 */
    width: fit-content !important;
}

.step-wrapper[data-step="1"] .step-title {
    order: 3 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="1"] .step-desc {
    order: 4 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="1"] .step-image {
    order: 5 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="1"] .step-features {
    order: 6 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="1"] .step-number {
    font-size: 72px !important;
}

.step-wrapper[data-step="1"] .step-label {
    font-size: 15px !important;
    /* padding은 위에서 이미 설정됨 */
}

.step-wrapper[data-step="1"] .step-title {
    font-size: 35px !important;
    line-height: 1.5 !important;
}

.step-wrapper[data-step="1"] .step-desc {
    font-size: 17px !important;
    line-height: 1.7 !important;
}

.step-wrapper[data-step="1"] img {
    width: 100% !important;
    margin: 20px auto !important;
    display: block !important;
}

.step-wrapper[data-step="1"] .feature-pill {
    font-size: 14px !important;
}


/* ==================== Step 2 모바일 스타일 ==================== */
.step-wrapper[data-step="2"] {
    margin-bottom: 35px !important;
}

.step-wrapper[data-step="2"] .step-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 35px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    align-items: stretch !important;
    text-align: left !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    grid-template-columns: none !important;
}

/* Reset grid positioning and set flex order for mobile */
.step-wrapper[data-step="2"] .step-header {
    order: 1 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="2"] .step-label {
    order: 2 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;  /* Grid 정렬 초기화 */
    padding: 8px 14px !important;  /* 고효율 처리 (6글자) - 모바일 */
    width: fit-content !important;
}

.step-wrapper[data-step="2"] .step-title {
    order: 3 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="2"] .step-desc {
    order: 4 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="2"] .step-image {
    order: 5 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="2"] .step-features {
    order: 6 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="2"] .step-number {
    font-size: 72px !important;
}

.step-wrapper[data-step="2"] .step-label {
    font-size: 15px !important;
    /* padding은 위에서 이미 설정됨 */
}

.step-wrapper[data-step="2"] .step-title {
    font-size: 32px !important;
    line-height: 1.5 !important;
}

.step-wrapper[data-step="2"] .step-desc {
    font-size: 17px !important;
    line-height: 1.7 !important;
}

.step-wrapper[data-step="2"] img {
    width: 100% !important;
    margin: 20px auto !important;
    display: block !important;
}

.step-wrapper[data-step="2"] .feature-pill {
    font-size: 13px !important;
}


/* ==================== Step 3 모바일 스타일 ==================== */
.step-wrapper[data-step="3"] {
    margin-bottom: 35px !important;
}

.step-wrapper[data-step="3"] .step-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 35px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    align-items: stretch !important;
    text-align: left !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    grid-template-columns: none !important;
}

/* Reset grid positioning and set flex order for mobile */
.step-wrapper[data-step="3"] .step-header {
    order: 1 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="3"] .step-label {
    order: 2 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 8px 12px !important;  /* 필터 제로 (5글자) - 모바일 */
    width: fit-content !important;
}

.step-wrapper[data-step="3"] .step-title {
    order: 3 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="3"] .step-desc {
    order: 4 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="3"] .step-image {
    order: 5 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="3"] .step-features {
    order: 6 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="3"] .step-number {
    font-size: 72px !important;
}

.step-wrapper[data-step="3"] .step-label {
    font-size: 15px !important;
    /* padding은 위에서 이미 설정됨 */
}

.step-wrapper[data-step="3"] .step-title {
    font-size: 30px !important;
    line-height: 1.5 !important;
}

.step-wrapper[data-step="3"] .step-desc {
    font-size: 17px !important;
    line-height: 1.7 !important;
}

.step-wrapper[data-step="3"] img {
    width: 100% !important;
    margin: 20px auto !important;
    display: block !important;
}

.step-wrapper[data-step="3"] .feature-pill {
    font-size: 14px !important;
}


/* ==================== Step 4 모바일 스타일 ==================== */
.step-wrapper[data-step="4"] {
    margin-bottom: 35px !important;
}

.step-wrapper[data-step="4"] .step-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 35px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    align-items: stretch !important;
    text-align: left !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    grid-template-columns: none !important;
}

/* Reset grid positioning and set flex order for mobile */
.step-wrapper[data-step="4"] .step-header {
    order: 1 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="4"] .step-label {
    order: 2 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;  /* Grid 정렬 초기화 */
    padding: 8px 12px !important;  /* 완전 자동 (5글자) - 모바일 */
    width: fit-content !important;
}

.step-wrapper[data-step="4"] .step-title {
    order: 3 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="4"] .step-desc {
    order: 4 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="4"] .step-image {
    order: 5 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="4"] .step-features {
    order: 6 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="4"] .step-number {
    font-size: 72px !important;
}

.step-wrapper[data-step="4"] .step-label {
    font-size: 15px !important;
    /* padding은 위에서 이미 설정됨 */
}

.step-wrapper[data-step="4"] .step-title {
    font-size: 29px !important;
    line-height: 1.5 !important;
}

.step-wrapper[data-step="4"] .step-desc {
    font-size: 17px !important;
    line-height: 1.7 !important;
}

.step-wrapper[data-step="4"] img {
    width: 96% !important;
    margin: 20px auto !important;
    display: block !important;
}

.step-wrapper[data-step="4"] .feature-pill {
    font-size: 14px !important;
}


/* ==================== Step 5 모바일 스타일 ==================== */
.step-wrapper[data-step="5"] {
    margin-bottom: 35px !important;
}

.step-wrapper[data-step="5"] .step-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 35px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    align-items: stretch !important;
    text-align: left !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    grid-template-columns: none !important;
}

/* Reset grid positioning and set flex order for mobile */
.step-wrapper[data-step="5"] .step-header {
    order: 1 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="5"] .step-label {
    order: 2 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 8px 18px !important;  /* 스마트 위생 시스템 (10글자) - 모바일 */
    width: fit-content !important;
}

.step-wrapper[data-step="5"] .step-title {
    order: 3 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="5"] .step-desc {
    order: 4 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="5"] .step-image {
    order: 5 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="5"] .step-features {
    order: 6 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="5"] .step-number {
    font-size: 72px !important;
}

.step-wrapper[data-step="5"] .step-label {
    font-size: 15px !important;
    /* padding은 위에서 이미 설정됨 */
}

.step-wrapper[data-step="5"] .step-title {
    font-size: 34px !important;
    line-height: 1.5 !important;
}

/* 모바일에서만 타이틀 텍스트를 블록으로 만들어 줄바꿈 */
.step-wrapper[data-step="5"] .step-title .title-text {
    display: block !important;
}

.step-wrapper[data-step="5"] .step-desc {
    font-size: 17px !important;
    line-height: 1.7 !important;
}

.step-wrapper[data-step="5"] img {
    width: 93% !important;
    margin: 20px auto !important;
    display: block !important;
}

.step-wrapper[data-step="5"] .feature-pill {
    font-size: 13px !important;
}


/* ==================== Step 6 모바일 스타일 ==================== */
.step-wrapper[data-step="6"] {
    margin-bottom: 35px !important;
}

.step-wrapper[data-step="6"] .step-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 35px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    align-items: stretch !important;
    text-align: left !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    grid-template-columns: none !important;
}

/* Reset grid positioning and set flex order for mobile */
.step-wrapper[data-step="6"] .step-header {
    order: 1 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="6"] .step-label {
    order: 2 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;  /* Grid 정렬 초기화 */
    padding: 8px 20px !important;  /* AUTO 살균 시스템 (12글자) - 모바일 */
    width: fit-content !important;
}

.step-wrapper[data-step="6"] .step-title {
    order: 3 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="6"] .step-desc {
    order: 4 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="6"] .step-image {
    order: 5 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="6"] .step-features {
    order: 6 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.step-wrapper[data-step="6"] .step-number {
    font-size: 72px !important;
}

.step-wrapper[data-step="6"] .step-label {
    font-size: 15px !important;
    /* padding은 위에서 이미 설정됨 */
}

.step-wrapper[data-step="6"] .step-title {
    font-size: 34px !important;
    line-height: 1.5 !important;
}

/* 모바일에서만 타이틀 텍스트를 블록으로 만들어 줄바꿈 */
.step-wrapper[data-step="6"] .step-title .title-text {
    display: block !important;
}

.step-wrapper[data-step="6"] .step-desc {
    font-size: 17px !important;
    line-height: 1.7 !important;
}

.step-wrapper[data-step="6"] img {
    width: 100% !important;
    margin: 20px auto !important;
    display: block !important;
}

.step-wrapper[data-step="6"] .feature-pill {
    font-size: 13px !important;
}


/* ==================== Final Section 모바일 스타일 ==================== */
.final {
    padding: 55px 20px !important;
}

.final-title {
    font-size: 28px !important;
    line-height: 1.3 !important;
    margin-bottom: 42px !important;
}

.final-desc {
    font-size: 19px !important;
    line-height: 1.8 !important;
    margin-bottom: 13px !important;
}

.final-brand {
    font-size: 55px !important;
    margin-top: 35px !important;
}

} /* @media (max-width: 767px) 닫기 */