/* style.css (캐러셀 추가 버전) */

/* 색상 변수 정의 */
:root {
    --color-primary: #2445EF;
    --color-primary-dark: #2952ff;
    --color-background: #f0f2f5;
    --color-container: #ffffff;
    --color-text-primary: #333333;
    --color-text-secondary: #555555;
    --color-text-tertiary: #888888;
    --color-text-nav: #aaaaaa;
    --color-border: #eeeeee;
}

/* 기본 스타일 리셋 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: var(--color-background);
    /* display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh; */
    margin :0;
    padding:  0;
}

.mobile-container {
    opacity: 0; /* Motion One 애니메이션을 위한 초기 상태 */
    width: 100%;
    max-width: none;
    background-color: var(--white-background, #FAFBFF); /* var(--color-container) 대신 약간 다른 흰색 */
    border-radius: 0;
    padding: 20px 0 100px 0; /* 좌우 패딩 제거, 콘텐츠별로 부여 */
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    min-height: 100vh;
}

/* 사용자 프로필 */
.greeting-section {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 세로 중앙 정렬 */
    padding: 0 25px;
    margin-bottom: 40px;
}

/* 1. 왼쪽 그룹 (로고, 앱 이름) */
.logo-and-title {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.logo-area {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 60px;
    width: 60px;
    margin-bottom: 5px;
    margin-left: 25px;
}
.laundry-logo {
    height: 100%;
    width: auto;
    
}
.title-group {
    display: flex;
    /* gap:6px; */
    flex-direction: column;

}
.title-group .logo-exp {
    font-size: 12px;
    color: var(--color-text-secondary);
}
.title-group .logo-name {
    font-size: 12px;
    color: var(--color-primary);
    font-weight: 700;
}
.title-group h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
}


/* 2. 오른쪽 그룹 (인삿말, 프로필 사진) */
.profile-and-greeting {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;

}
.greeting-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right; /* 텍스트를 오른쪽 정렬 */
}
.greeting-text p {
    font-size: 25px;
    font-weight: 500;
}
.greeting-text h2 {
    font-size: 27px;
    font-weight: 400;
    color: var(--color-primary);
    text-align: right;
}
.greeting-text .username {
    font-weight: 900;
    
    color: var(--color-primary);
}
.profile-pic { 
    width: 65px; 
    height: 65px; 
    border-radius: 50%; 
    cursor: pointer; 
    border: 2px solid var(--color-border);
    object-fit: cover;       
    object-position: center;
    
}






/* --- 메인 캐러셀 (새로 추가) --- */
.swiper-slider > a {
    display: block; /* a 태그가 div처럼 영역을 차지하도록 설정 */
    text-decoration: none; /* 밑줄 제거 */
}
.main-title{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 40px;
}
.main-title .carousel-more{
    font-weight: 500;
    font-size: 12px;
    text-decoration: none;
    color: var(--color-text-secondary);
}
.main-title .carousel-more i{

    font-size: 10px;
    margin-right: 3px;
    margin-left: 3px;
}
.main-carousel-section {
    margin-bottom: 20px;
}
.main-carousel-section .swiper {
    width: 100%;
    height: 200px;
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: 30px; /* 페이지네이션 공간 */
}
.main-carousel-section .swiper-slide {
    /* width: 70% !important; <-- 이 라인을 삭제! */
    
    /* --- 나머지 기존 스타일은 그대로 유지 --- */
    background-color: #e9ecef;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    color: white;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}
.main-carousel-section .swiper.is-first {
    /* transform을 조절하여 왼쪽으로 살짝 붙입니다. */
    transform: translateX(8%);
}

/* 마지막 슬라이드일 때 (왼쪽만 보이게) */
.main-carousel-section .swiper.is-last {
    /* transform을 조절하여 오른쪽으로 살짝 붙입니다. */
    transform: translateX(-8%);
}

.slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.slide-content h4 { font-size: 16px; margin-bottom: 5px; color:white}
.slide-content p { font-size: 12px; opacity: 0.9; color:white }
.swiper-pagination-bullet-active {
    background-color: var(--color-primary);
}


/* 세탁 정보 입력 (제목 추가) */
.mobile-container > h3 {
    font-size: 18px;
    font-weight: 700;
    padding: 0 25px;
    margin-bottom: 15px;
}

/* 세탁 사진 찍기 CTA 카드 */

.cta-title{
    margin-bottom: 5px;
}
.cta-card {
    background: var(--color-primary); /* 그라데이션 대신 단색으로 변경 */
    border-radius: 30px;
    padding: 25px;
    color: var(--color-container);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8px 16px rgba(36, 69, 239, 0.3);
    margin: 0 25px; /* 좌우 여백 추가 */
}
.cta-icon-wrapper {
    background-color: rgba(255, 255, 255, 0.2);
    width: 70px; height: 70px; border-radius: 25px;
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 15px;
}
.cta-icon-wrapper i { font-size: 36px; color: var(--color-container); }
.cta-text p { font-size: 14px; opacity: 0.9; margin-bottom: 20px; }
.cta-button {
    background-color: var(--color-container); border: none; border-radius: 50px;
    padding: 16px 25px; font-size: 16px; font-weight: 700;
    width: 100%; color: var(--color-text-primary);
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-decoration: none;
}
.cta-button i {
    background-color: var(--color-background); color: var(--color-primary);
    border-radius: 50%; width: 30px; height: 30px;
    display: inline-flex; justify-content: center; align-items: center;
}

/* 기록 보기 */
.history-section {
    margin-top: 40px;
    padding: 0 25px;
}
.history-section h3 {
    font-size: 18px; font-weight: 700; margin-bottom: 15px;
}
.history-item {
    display: flex; align-items: center; background-color: var(--color-container);
    padding: 15px; border-radius: 20px; margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); cursor: pointer;
    transition: box-shadow 0.2s;
    text-decoration: none;
    
}
.history-item:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); }
.history-img { width: 60px; height: 60px; border-radius: 15px; margin-right: 15px; }
.history-details { flex-grow: 1; }
.history-details h4 { text-decoration: none; font-size: 16px; font-weight: 500; color:black;}
.history-details p { text-decoration: none;font-size: 13px; color: var(--color-text-tertiary); margin: 4px 0; }
.history-item > .fa-chevron-right { color: #ccc; font-size: 14px; }



/* 하단 네비게이션 바 */
.bottom-nav {
    position: fixed;
    z-index: 1000;
    bottom: 0; left: 0; right: 0;
    height: 85px; background-color:var(--color-container);
    display: flex; justify-content: space-around; align-items: center;
    border-top: 1px solid var(--color-border);
    border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.nav-item {
    display: flex; flex-direction: column; align-items: center;
    text-decoration: none; color: var(--color-text-nav); font-size: 12px;
    font-weight: 500;
}
.nav-item.active i{
    color: var(--color-primary);
}
.nav-item.active span{
    color:  var(--color-primary);
    font-weight: 700;
    
}
.nav-item i { font-size: 22px; margin-bottom: 5px; }
.nav-item-main {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-container);
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-40%);
    box-shadow: 0 4px 12px rgba(74, 108, 255, 0.4);
    border: 5px solid var(--color-container);
    cursor: pointer;
    text-decoration: none;
}
.nav-item-main i { font-size: 28px; }


/* 팝업 배경 (반투명 오버레이) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    
    /* 초기에는 숨김 상태 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* 팝업이 보일 때의 스타일 */
.modal-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* 팝업 콘텐츠 박스 */
.modal-content {
    background-color: var(--color-container);
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 350px;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.visible .modal-content {
    transform: scale(1);
}

.modal-content h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.modal-content .fortune-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.modal-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: 20px 0;
}

.modal-promo {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.modal-action-btn {
    display: block;
    width: 100%;
    background-color: var(--color-primary);
    color: var(--color-container);
    padding: 14px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    margin-bottom: 25px;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.modal-footer button {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 5px;
}