/* 기본 설정 */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Pretendard', sans-serif; }
body { background-color: #f0f2f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; }

/* 휴대폰 프레임 */
.phone-frame {
    width: 375px;
    height: 812px;
    background-color: #1A56DB; /* 메인 블루 */
    border-radius: 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 8px solid #333;
}

/* 헤더 & 타이틀 */
.app-header { padding: 20px 20px 10px; color: white; }
.status-bar { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 15px; }
.app-logo-area {
    display: flex;
    justify-content: space-between; /* 로고는 왼쪽, 아이콘은 오른쪽 */
    align-items: center; /* 세로 중앙 정렬 */
    width: 100%;
}
.app-logo { font-size: 20px; font-weight: bold; }
.app-logo span { color: #FF8A3D; }
/* 링크 스타일 초기화 */
a.card {
    display: flex;
    flex-direction: column;
    text-decoration: none; /* 밑줄 제거 */
    color: inherit; /* 글자색 유지 */
}

/* 로고 링크 스타일 */
.app-logo-area a {
    text-decoration: none;
    color: inherit;
}
.main-title { color: white; padding: 0 20px; margin-bottom: 20px; font-size: 18px; }
/* 아이콘들이 서로 붙지 않게 간격 조정 */
.header-icons {
    display: flex;
    gap: 12px; /* 종 아이콘과 설정 아이콘 사이 간격 */
    align-items: center;
}

.header-icons span {
    font-size: 20px;
    cursor: pointer;
}
/* 공지사항 배너 스타일 (스크린샷처럼 가로로 길게) */
.notice-banner {
    background-color: rgba(255, 255, 255, 0.15); /* 반투명 배경 */
    margin: 10px 20px 20px;
    padding: 12px 15px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 14px;
}
/* 카드 슬라이더 */
.card-slider-container { width: 100%; overflow: hidden; cursor: grab; }
.card-wrapper {
    display: flex;
    gap: 15px;
    padding: 0 20px;
    transition: transform 0.2s ease-out;
    user-select: none;
}
.card {
    flex: 0 0 260px;
    background: white;
    border-radius: 28px; /* 더 둥글게 */
    padding: 24px;
    height: 360px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.card-tag { font-size: 12px; color: #1A56DB; font-weight: bold; margin-bottom: 8px; }
.card-title { font-size: 20px; line-height: 1.3; color: #111; margin-bottom: 12px; }
.card-img-placeholder { 
    background: #f5f5f5; 
    border-radius: 12px; 
    height: 60px; 
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 24px; 
}
.card-images { display: flex; gap: 8px; margin-top: auto; }
.card-members { display: flex; margin: 15px 0; }
.member-icon { width: 30px; height: 30px; border-radius: 50%; background: #eee; border: 2px solid white; margin-right: -10px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
/* 상세 정보 (매주 업데이트 등) */
.card-info {
    font-size: 13px;
    color: #666;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 카드 색상 변형 */
.color-2 { background-color: #FFEDD5; }
.color-3 { background-color: #D1FAE5; }

/* 카드 내부 상세 정보 스타일 추가 */
.card-info-list {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-info-item {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 하단 네비게이션 바 보정 */
/* .app-bottom-nav {
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 80px; 
    background: white; 
    display: flex; 
    justify-content: space-between; /* 양 끝 정렬 */
    /* align-items: center;
    padding: 0 10px 15px 10px; 
    border-radius: 0 0 32px 32px;
} */ 


/* 하단 바 */
.app-bottom-nav {
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 85px; 
    background: white; 
    display: flex; 
    justify-content: space-around; 
    align-items: center;
    padding-bottom: 15px;
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
}
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #A0AEC0;
    font-size: 10px;
    flex: 1;
}
.nav-item span {
    font-size: 18px; /* 아이콘(이모지) 크기 */
}

/* 활성화 상태 */
.nav-item.active { color: #1A56DB; font-weight: 700; }
/* 플러스 버튼 강조 */
.center-quick-btn {
    width: 56px; 
    height: 56px; 
    background: #1A56DB; 
    color: white;
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 28px; 
    transform: translateY(-25px); /* 위로 솟아오르게 */
    box-shadow: 0 8px 15px rgba(26, 86, 219, 0.3);
    border: 4px solid white;
    cursor: pointer;
    z-index: 10;
}