/**
 * 파일명: style.css
 * 버전: v2.0 (브랜드 통합 마스터 스타일)
 * 검수 완료: 스플래시, 네비게이션, 보호구역, 배너, 푸터 전수 포함
 */

/* 1. 브랜드 컬러 및 변수 정의 */
:root {
    --brand-black: #000000;       /* '1mm' 전용 블랙 */
    --brand-green: #4CAF50;       /* 'Link' 전용 그린 */
    --bg-soft-green: #F1F8F5;     /* 전체 배경색 */
    --text-main: #1A1A1A;         /* 메인 본문 색상 */
    --base-gray: #9E9E9E;         /* 보조 및 비활성 색상 */
    --border-color: #E0E0E0;      /* 구분선 및 경계선 */
    --accent-green: #2E7D32;      /* 강조 텍스트용 진한 초록 */
}

/* 2. 기본 레이아웃 및 폰트 */
body, html { 
    height: 100%; 
    margin: 0; 
    background: var(--bg-soft-green); 
    font-family: 'Pretendard', -apple-system, sans-serif; 
    -webkit-font-smoothing: antialiased; 
}
.app-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.content-area { flex: 1; padding-bottom: 20px; }
.app-container { max-width: 500px; margin: 0 auto; padding: 20px; }

/* 3. 스플래시 로딩 화면 (index/main 공통) */
#splash {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #ffffff; z-index: 9999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.splash-logo { width: 80px; margin-bottom: 20px; }
.splash-text { font-weight: bold; color: var(--brand-black); font-size: 1.2rem; }
.splash-text span { color: var(--brand-green); }

/* 4. 헤더 및 드롭다운 메뉴 */
.brand-text { font-weight: 800; color: var(--brand-black); letter-spacing: -1px; }
.custom-menu-dropdown {
    border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.12); border-radius: 1.25rem;
    padding: 0.75rem; min-width: 220px; border: 1px solid var(--border-color);
}
.custom-menu-dropdown .dropdown-item {
    padding: 0.85rem 1rem; border-radius: 0.75rem; font-weight: 500; 
    display: flex; align-items: center; color: var(--text-main); transition: background 0.2s;
}

/* 5. 보안 알림 바 (보호 중 알림) */
.security-alert { 
    background: #E8F5E9; 
    border-left: 5px solid var(--brand-green); 
    border-radius: 1rem; 
    color: var(--text-main); 
}

/* 6. 하단 네비게이션 바 (블랙 테마) */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; width: 100%; background: #111111; 
    display: flex; justify-content: space-around; padding: 15px 0 35px 0; z-index: 1000;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
}
.nav-item { text-align: center; color: #777; text-decoration: none; font-size: 0.65rem; flex: 1; transition: all 0.2s; }
.nav-item i { font-size: 1.5rem; display: block; margin-bottom: 2px; }
.nav-item.active { color: var(--brand-green); font-weight: bold; }

/* 7. 그린 스티치 보호 구역 (메인 리스트) */
.protection-zone {
    background-color: #E8F5E9; border: 3px dashed var(--brand-green); border-radius: 1.5rem;      
    padding: 1.2rem 1.5rem 1.5rem; position: relative; overflow: hidden;
}
.protection-zone::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(var(--brand-green) 1px, transparent 1px);
    background-size: 20px 20px; opacity: 0.1; pointer-events: none;
}

/* [신규] 자녀 추가 전용 미니 버튼 (배지 스타일) */
.btn-add-mini {
    background-color: #FFFFFF;
    color: var(--accent-green);
    border: 1px solid #C8E6C9;
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.btn-add-mini:active { background-color: var(--bg-soft-green); transform: scale(0.95); }
.btn-add-mini i { font-size: 0.9rem; margin-right: 4px; }

/* [신규] 자녀 삭제 버튼 스타일 (그레이 컬러) */
.btn-delete-card {
    position: absolute;
    top: 2px; /* 상단 여백 조절 */
    right: 4px; /* 우측 여백 조절 */
    color: var(--base-gray); /* #9E9E9E 그레이 적용 */
    opacity: 0.4;
    font-size: 1rem;
    padding: 5px;
    z-index: 10;
    transition: all 0.2s;
    text-decoration: none;
}
.btn-delete-card:hover {
    opacity: 1;
    color: #666; /* 호버 시 약간 진한 그레이 */
}

/* [신규] 연결 대기 중 전용 그레이 깜빡임 배지 */
.badge-waiting-gray {
    background-color: #f0f0f0 !important;
    color: #888888 !important;
    border: 1px solid #e0e0e0 !important;
    animation: waiting-blink 1.5s infinite ease-in-out !important;
}

@keyframes waiting-blink {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* 8. 정지 상태 배지 및 깜빡임 애니메이션 */
.resting-badge {
    background: #C8E6C9; color: var(--accent-green); 
    font-size: 0.7rem; padding: 4px 10px; border-radius: 20px; 
    font-weight: bold; display: inline-flex; align-items: center;
}
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
.bi-moon-stars-fill { animation: blink 2.5s infinite ease-in-out; }

/* 9. 입력창, 선택창, 그룹 입력창 통합 스타일 (그린 테마) */
.form-control:focus, .form-select:focus {
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25) !important;
    outline: 0;
}
.form-control, .form-select { 
    border-radius: 12px; 
    padding: 14px; 
    border: 1px solid var(--border-color); 
}

/* --- [추가] 돋보기 아이콘이 포함된 입력창(input-group) 전체 포커스 효과 --- */
.input-group {
    border-radius: 12px; /* 폼 컨트롤과 동일한 둥글기 적용 */
    border: 1px solid var(--border-color);
    background-color: #fff;
    transition: all 0.2s;
    overflow: hidden; /* 내부 요소가 테두리를 삐져나가지 않도록 */
}

/* 박스 내부의 입력창을 클릭하면, 부모 박스 전체에 초록색 테두리 생성 */
.input-group:focus-within {
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25) !important;
}

/* 그룹 내부 요소들(돋보기, 입력창)의 개별 테두리와 중복 포커스 효과 제거 */
.input-group .form-control,
.input-group .input-group-text {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 혜택 배너 (회원가입 전용) */
.benefit-banner {
    background-color: #E8F5E9; border: 2px dashed var(--brand-green); 
    border-radius: 1.5rem; overflow: hidden; margin-bottom: 25px;
}
.benefit-header { width: 100%; padding: 16px 20px; background: none; border: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.benefit-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; padding: 0 20px; }
.benefit-content.show { max-height: 800px; padding-bottom: 20px; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 15px; }

/* 10. 버튼 스타일 */
.btn-black { background-color: var(--brand-black); color: white; border: none; border-radius: 15px; padding: 16px; font-weight: 700; width: 100%; transition: all 0.2s; }
.btn-soft-green { background-color: var(--bg-soft-green); color: var(--text-main); border: 1px solid var(--brand-green); border-radius: 12px; font-weight: 600; }

/* 11. 통합 푸터 */
footer { 
    background: var(--bg-soft-green); 
    padding: 60px 20px 150px; /* 탭 바 공간 확보 */
    border-top: 1px solid var(--border-color); 
    text-align: center;
    color: var(--base-gray);
}