/* 1. 기본 배경 및 폰트 */
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            background: #FFEBF3;
            /* ✅ 핵심: 브라우저의 '당겨서 새로고침' 및 바운스 효과 원천 차단 */
    overscroll-behavior-y: none;
        }

        /* 2. 메인 가두리: PC에서 500px 중앙 정렬 */
        .app-container {
            width: 100%;
            max-width: 500px;
            height: 100vh;
            background: white;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            overscroll-behavior: none; 
    touch-action: pan-x pan-y;
        }

        /* 3. 모든 레이어: 부모(.app-container)의 500px 안으로 강제 고정 (수정됨) */
        .full-layer {
            position: absolute !important;
            top: 0;
            left: 50% !important;
            /* 📍 왼쪽 0에서 중앙으로 변경 */
            transform: translateX(-50%) !important;
            /* 📍 중앙 정렬 핵심 */
            width: 100% !important;
            max-width: 500px !important;
            /* 📍 부모 너비에 맞춤 */
            height: 100% !important;
            background: white;
            z-index: 1000;
            display: none;
            flex-direction: column;
            box-sizing: border-box !important;
            overflow-y: auto;
        }

        #chat-window {
            display: none;
            position: fixed !important;
            top: 0 !important;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 500px;
            height: 100%;
            z-index: 9999 !important;
            background: #abc1d1;
            flex-direction: column;
        
    box-sizing: border-box;
            
        }

        /* 4. 기타 요소 스타일 */
        .ad-container {
    width: 100%;
    /* 📍 핵심: 시스템 상단 여백만큼 패딩 추가 */
    padding-top: env(safe-area-inset-top); 
    /* 기존 60px 높이에 상단 여백을 더함 */
    min-height: calc(60px + env(safe-area-inset-top)); 
    background: #DDDDDD;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eee;
    font-size: 11px;
    color: #bbb;
    flex-shrink: 0;
    /* 패딩이 높이에 포함되도록 설정 */
    box-sizing: border-box !important; 
}

        .ad-badge {
            border: 1px solid #ccc;
            padding: 2px 5px;
            border-radius: 3px;
            margin-right: 8px;
            transform: scale(0.8);
        }

        .nav-bar {
            display: flex;
            background: #f8f8f8;
            border-bottom: 1px solid #ddd;
            flex-shrink: 0;
            z-index: 100;
        }

        /* 📍 z-index 추가 */
        .nav-item {
            flex: 1;
            padding: 12px 2px;
            text-align: center;
            cursor: pointer;
            font-size: 12px;
            font-weight: bold;
            color: #666;
            position: relative;
        }

        .badge {
            background: #ff4757;
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 10px;
            position: absolute;
            top: 5px;
            right: 5px;
            font-weight: bold;
            border: 1px solid white;
            display: none;
        }

        .nav-item.active {
            background: white;
            color: #ff4757;
            border-bottom: 3px solid #ff4757;
        }

        .sub-nav-container {
            display: flex;
            background: #fafafa;
            border-bottom: 1px solid #eee;
        }

        .sub-nav {
            flex: 1;
            padding: 10px;
            text-align: center;
            font-size: 12px;
            color: #888;
            cursor: pointer;
        }

        .sub-nav.active {
            color: #ff4757;
            border-bottom: 2px solid #ff4757;
            font-weight: bold;
            background: white;
        }

        .content {
            flex: 1;
            position: relative;
            overflow: hidden;
        }

        .page {
            display: none;
            height: 100%;
            overflow-y: auto;
            padding-bottom: 40px;
        }

        .page.active {
            display: block;
        }

        .section-title {
            padding: 15px 20px 5px;
            font-size: 13px;
            font-weight: bold;
            color: #ff4757;
            background: #fdfdfd;
        }

        .setting-section {
            padding: 10px 20px 20px;
            border-bottom: 8px solid #f0f0f0;
        }

        .setting-row {
            margin-bottom: 15px;
        }

        .setting-row label {
            display: block;
            font-size: 11px;
            color: #999;
            margin-bottom: 4px;
        }

        .setting-row input,
        .setting-row select,
        .setting-row textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-sizing: border-box;
        }

        .check-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #eee;
            font-size: 14px;
        }

        .list-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
        }

        .user-img {
            width: 50px;
            height: 50px;
            background: #eee;
            border-radius: 12px;
            margin-right: 12px;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
            border: 1px solid #f0f0f0;
        }

        #chat-msg-box {
            flex: 1;
            overflow-y: auto;
            padding: 20px 15px;
            background: #abc1d1;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .msg-wrapper {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .msg-wrapper.me {
            align-items: flex-end;
        }

        .msg-wrapper.other {
            align-items: flex-start;
        }

        .bubble-row {
            display: flex;
            align-items: flex-end;
            gap: 5px;
            max-width: 85%;
        }

        .me .bubble-row {
            justify-content: flex-end;
            flex-direction: row-reverse;
        }

        .other .bubble-row {
            justify-content: flex-start;
            flex-direction: row;
        }

        .bubble {
            padding: 10px 14px;
            border-radius: 16px;
            font-size: 14px;
            line-height: 1.4;
            word-break: break-all;
        }

        .me .bubble {
            background: #e0ffe0;
            border-top-right-radius: 2px;
        }

        .other .bubble {
            background: #ffffff;
            border-top-left-radius: 2px;
        }

        .msg-time {
            font-size: 10px;
            color: #556677;
            white-space: nowrap;
            margin-bottom: 2px;
        }

        .btn-main {
            width: 100%;
            padding: 14px;
            background: #ff4757;
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
        }

        .btn-main-action {
            width: 85%;
            height: 52px;
            border-radius: 26px;
            border: none;
            color: white;
            font-size: 1rem;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }

        /* 1. 상대 프로필 상세보기 (수정됨: 500px 가두리 적용) */
        #user-profile-view {
            position: fixed !important;
            top: 0 !important;
            left: 50% !important;
            /* 📍 중앙 정렬 */
            transform: translateX(-50%) !important;
            width: 100% !important;
            /* 📍 vw 대신 % 사용 */
            max-width: 500px !important;
            /* 📍 가로폭 고정 */
            height: 100vh !important;
            z-index: 9999 !important;
            background: white !important;
            overflow-y: auto;
        }

        .profile-details {
            width: 85%;
            margin: 20px 0;
            border-top: 1px solid #eee;
            padding-top: 15px;
        }

        #profile-img-preview {
            width: 140px;
            height: 140px;
            background: #f8f9fa;
            border-radius: 20px;
            margin: 0 auto 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 2px dashed #ccc;
            color: #999;
            cursor: pointer;
            overflow: hidden;
            position: relative;
            transition: all 0.2s ease-in-out;
            background-size: cover;
            background-position: center;
        }

        #profile-img-preview.has-image {
            border: 2px solid #ff4757;
            background-color: #fff;
        }

        /* 2. 초슬림 한 줄 칩 디자인 (지역/연령대 공용) */
        .region-chip,
        .age-chip {
            flex: 1;
            padding: 8px 0;
            border-radius: 12px;
            background: #f5f5f5;
            color: #999;
            font-size: 11px;
            font-weight: bold;
            cursor: pointer;
            border: 1px solid #eee;
            text-align: center;
            white-space: nowrap;
            transition: all 0.2s;
        }

        /* [수정] 무지개 6색 파스텔톤 활성화 스타일 */
/* 1. 레드 (수도권 / ~10) */
.active[data-color="#FF4757"] {
    background: #FFE5E5 !important;
    color: #D63031 !important;
    border: 1px solid #FFC1C1 !important; /* 배경보다 살짝 진한 테두리 */
}

/* 2. 오렌지 (강원 / 20) */
.active[data-color="#FFA502"] {
    background: #FFF3E0 !important;
    color: #E67E22 !important;
    border: 1px solid #FFD180 !important;
}

/* 3. 옐로우 (충청 / 30) */
.active[data-color="#ECCC68"] {
    background: #FFFDE7 !important;
    color: #B7950B !important;
    border: 1px solid #F9E79F !important;
}

/* 4. 그린 (호남 / 40) */
.active[data-color="#2ED573"] {
    background: #E8F5E9 !important;
    color: #27AE60 !important;
    border: 1px solid #C8E6C9 !important;
}

/* 5. 블루 (영남 / 50) */
.active[data-color="#1E90FF"] {
    background: #E3F2FD !important;
    color: #2980B9 !important;
    border: 1px solid #BBDEFB !important;
}

/* 6. 퍼플 (제주 / 60~) */
.active[data-color="#A29BFE"] {
    background: #F3E5F5 !important;
    color: #8E44AD !important;
    border: 1px solid #E1BEE7 !important;
}

        /* 4. 성별 파스텔톤 버튼 */
        .gender-btn {
            flex: 1;
            padding: 12px;
            border-radius: 15px;
            border: 1px solid #eee;
            background: #f9f9f9;
            color: #888;
            font-weight: bold;
            cursor: pointer;
        }

        #gen-all.active {
            background: #D1D8FF !important;
            color: #5D5FEF !important;
            border-color: #A29BFE !important;
        }

        #gen-male.active {
            background: #E1F5FE !important;
            color: #0288D1 !important;
            border-color: #81D4FA !important;
        }

        #gen-female.active {
            background: #FCE4EC !important;
            color: #D81B60 !important;
            border-color: #F48FB1 !important;
        }

        /* 1. 사람들 페이지 컨테이너: 쫀득한 터치감 부여 */
#people {
    position: relative;
    height: 100%;             /* 부모(.content) 높이 꽉 채우기 */
    overflow-y: auto;         /* 세로 스크롤 허용 */
    -webkit-overflow-scrolling: touch; /* iOS/안드로이드 부드러운 가속 스크롤 */
}

/* 2. 새로고침 안내 문구 스타일 */
#pull-to-refresh {
    width: 100%;
    z-index: 10;              /* 목록보다 살짝 위에 뜨게 */
    background: #f8fbff;      /* 쭌쓰님 스타일의 연한 파스텔 블루 */
    border-bottom: 1px solid #e1f0ff;
    display: none;            /* 평소엔 숨김 (JS가 켬) */
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    color: #1e90ff;           /* 신뢰감 있는 블루 폰트 */
    font-size: 13px;
    font-weight: bold;
    animation: slideDownIn 0.3s ease-out; /* 나타날 때 애니메이션 */
}

/* 3. 위에서 아래로 쓱 내려오는 효과 애니메이션 */
@keyframes slideDownIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
        /* [추가] 프로필 입력 전까지 상단 메뉴를 돌덩이로 만드는 마법 */
/* 📍 [수정] 숨기기와 잠금을 동시에! */
.hide-and-lock {
    display: none !important;      /* 아예 안 보이게 치우기 */
    pointer-events: none !important; /* 혹시 모를 유격 터치 차단 */
    touch-action: none;
}
/* 📍 대화창 상단바 (뒤로가기 버튼 영역) - 노치 대응 */
#chat-window > div:first-child {
    /* 쭌쓰님, 여기가 시계랑 겹치지 않게 위쪽 여백을 주는 곳이에요! */
    padding-top: calc(5px + env(safe-area-inset-top)) !important;
    background: white;
}

/* 📍 대화창 하단 입력창 (전송 버튼 영역) - 시스템 바 대응 */
#chat-window > div:last-child {
    /* 쭌쓰님, 여기가 홈 바(제스처 바)랑 겹치지 않게 바닥 여백을 주는 곳이에요! */
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    background: #FFEBF3;
}