/* 기본 배경 및 폰트 설정 */
body { margin: 0; padding: 0; font-family: 'Pretendard', 'Malgun Gothic', sans-serif; background-color: #fdf2f4; display: block; height: 100vh; height: 100dvh; overflow: hidden; }

/* 전체 화면 래퍼 */
.app-wrapper { display: flex; flex-direction: column; height: 100%; max-width: 1200px; margin: 0 auto; background: #fff; box-shadow: 0 0 15px rgba(255, 192, 203, 0.2); overflow: hidden; position: relative; }

/* 상단 브랜드 로고 영역 */
.top-brand-header { padding: 20px 25px 10px 25px; background: #fff; flex-shrink: 0; }
.logo-container { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.brand-logo { max-height: 45px; width: auto; object-fit: contain; }
.brand-title { font-size: 13px; color: #555; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 0; font-weight: bold; }

/* 메신저 컨테이너 */
.messenger-container { display: flex; flex: 1 1 0; min-height: 0; width: 100%; overflow: hidden; background: #fff; box-shadow: none; margin: 0; }

/* 💡 [신규] '선생님 상담방' 목록 전용 푸른색 배경 스타일 */
.room-list.consult-room-bg {
    /* 🎨 [추가] 파스텔 톤 푸른색 */
    background-color: #f0f4f8 !important; 
}

/* 💡 [신규] 오른쪽 대화창 배경색을 '노란색'으로 설정합니다. */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
    /* 🎨 [추가] 파스텔 톤 노란색 */
    background-color: #fffde7; 
}

/* --- 왼쪽: 대화방 목록 영역 --- */
.room-list-area { width: 320px; border-right: 1px solid #ddd; background: #fff; display: flex; flex-direction: column; flex: 0 0 320px; min-height: 0; overflow: hidden; }
.room-header { padding: 20px; font-weight: bold; font-size: 18px; border-bottom: 1px solid #eee; background: #fdf2f4; color: #ff8e9a; }


/* 1. 왼쪽 목록 영역 기본 (핑크) */
.room-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #fdf2f4 !important;
}
/* 2. 선생님 상담방 선택 시 적용할 푸른색 배경 클래스 */
.bg-pastel-blue {
    background-color: #f0f7ff !important; /* 화사한 파스텔 블루 */
}

/* 3. 오른쪽 대화창 내부 배경 (노란색) */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: #fffde7 !important; /* 부드러운 파스텔 노란색 */
}

/* 4. '단체 채팅방' 같은 구분선 줄 스타일 */
.list-label-row {
    padding: 10px 15px;
    font-size: 12px;
    font-weight: bold;
    /* 💡 JS에서 탭에 따라 배경색을 바꿔줄 것입니다 */
}

/* 탭 버튼 색상 보정 */
#tabConsult.active-consult {
    background-color: #f0f7ff !important;
    color: #2671BC !important;
}

#tabFriend.active-friend {
    background-color: #fdf2f4 !important;
    color: #ff8e9a !important;
}

/* 비활성화된 탭 스타일 (옅은 회색) */
.tab-inactive {
    background-color: #f5f5f5 !important;
    color: #aaaaaa !important;
    border-bottom: 1px solid #ddd !important;
}




/* 개별 대화방 아이템 */
/* 💡 3. 각 상담방 항목 (좌우 넉넉한 여백 + 입체 효과) */
.room-item {
    padding: 15px 25px !important; /* 👈 좌우 여백을 25px이나 줘서 벽에서 뚝 떨어지게 만듭니다! */
    display: flex !important;
    align-items: center !important;
    gap: 15px !important; /* 👈 로고와 방 이름(글씨) 사이의 간격도 넉넉하게 벌려줍니다! */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; /* 홈 파인 선 유지 */
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5) !important; /* 하이라이트 선 유지 */
    transition: background 0.2s;
    cursor: pointer;
}




/* 💡 4. [수정] 통합 로고 및 학년 아바타 스타일 */
.profile-pic {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important; /* 글씨 아주 굵게 */
    font-size: 16px !important; /* 글씨 큼직하게 */
    color: #ffffff !important; /* 글씨는 흰색 */
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1) !important; /* 약간의 입체감 */
    flex-shrink: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.05); /* 은은한 테두리 */
}

/* 🎨 [신규 추가] 학년별 화사한 파스텔 배경색 (원장님 픽!) */
.bg-pastel-j2 { background-color: #5781a8 !important; } /* 중2 - 차분한 블루 */
.bg-pastel-j3 { background-color: #56a756 !important; } /* 중3 - 민트 블루 */
.bg-pastel-h1 { background-color: #f6e745 !important; } /* 고1 - 살구 오렌지 */
.bg-pastel-h2 { background-color: #e47df4 !important; } /* 고2 - 연보라 라벤더 */
.bg-pastel-h3 { background-color: #fd5361 !important; } /* 고3 - 산뜻한 핑크 */
.bg-pastel-def { background-color: #cccccc !important; } /* 기본/정보없음 - 회색 */



.room-item:hover { background: #fff1f3; }
.room-item.active { background: #ffebef; }
.room-info { flex: 1; overflow: hidden; }
.room-name-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.room-name { font-weight: bold; font-size: 15px; color: #333; }
.room-time { font-size: 12px; color: #888; }
.room-preview { font-size: 13px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- 왼쪽 하단 배너 영역 --- */
.banner-area { border-top: 1px solid #eee; padding: 15px; background: #fff; position: relative; text-align: center; flex-shrink: 0; }
.banner-area img { width: 100%; max-height: 250px; object-fit: contain; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); transition: transform 0.2s; }
.banner-area img:hover { transform: scale(1.02); }
.btn-edit-banner { position: absolute; top: 20px; right: 20px; background: rgba(0,0,0,0.6); color: #fff; border: none; padding: 6px 12px; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: bold; }
.btn-edit-banner:hover { background: rgba(0,0,0,0.8); }

/* --- 오른쪽: 채팅창 영역 --- */
.chat-area { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; background: #fdf2f4; position: relative; }
.chat-header { padding: 20px; background: #fff; font-weight: bold; font-size: 18px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; color: #ff8e9a; flex-shrink: 0; }
.chat-messages { flex: 1 1 0; min-height: 0; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 15px; }

/* 공통 말풍선 스타일 */
.msg-wrapper { display: flex; flex-direction: column; max-width: 70%; flex-shrink: 0; }
.msg-time { font-size: 11px; color: #555; margin-top: 5px; }
.msg-bubble { padding: 10px 15px; border-radius: 12px; font-size: 14px; line-height: 1.5; word-break: break-all; box-shadow: 0 1px 2px rgba(255,182,193,0.3); }

/* 상대방 메시지 */
.msg-other { align-self: flex-start; }
.msg-other .msg-bubble { background: #fff; border-top-left-radius: 3px; }
.msg-other .msg-time { align-self: flex-end; margin-right: 5px; }

/* 나/역할 텍스트 */
.msg-sender-name { font-size: 12px; color: #000; margin-bottom: 5px; margin-left: 5px; font-weight: bold; }
.msg-sender-role { font-size: 11px; color: #333; font-weight: normal; margin-left: 5px; }

/* 내가 보낸 메시지 */
.msg-me { align-self: flex-end; }
.msg-me .msg-bubble { background: #fff8bf; border-top-right-radius: 3px; }
.msg-me .msg-time { align-self: flex-start; margin-left: 5px; }

/* 날짜 구분선 및 첨부파일 영역 */
.date-divider { text-align: center; margin: 20px 0; flex-shrink: 0; }
.date-divider span { background: #ffecf0; color: #000; padding: 6px 20px; border-radius: 20px; font-size: 12px; font-weight: bold; }
.date-separator { text-align: center; font-size: 12px; color: #888; background-color: rgba(0,0,0,0.05); border-radius: 15px; padding: 5px 15px; margin: 20px auto; width: fit-content; flex-shrink: 0; }

.preview-area { display: none; padding: 10px 15px; background: #f0f8ff; border-top: 1px solid #ddd; font-size: 13px; color: #333; align-items: center; justify-content: space-between; flex-shrink: 0; }
.preview-filename { font-weight: bold; color: #0066cc; }
.btn-remove-file { cursor: pointer; color: #fff; background: #ff8e9a; border: none; padding: 4px 10px; border-radius: 5px; font-weight: bold; font-size: 12px; transition: 0.2s; }
.btn-remove-file:hover { background: #ff7080; }

/* --- 하단 입력창 영역 (PC 버전에선 평범하게) --- */
.chat-input-area { display: flex; gap: 10px; align-items: center; padding: 10px 20px; background-color: #fdf2f4; border-top: 1px solid #ffc1cc; flex-shrink: 0; }
.chat-input-area textarea { flex: 1; resize: none; border: 1px solid #ddd; border-radius: 8px; padding: 10px; height: 50px; font-size: 14px; outline: none; font-family: inherit; }
.btn-send { background: #ffc1cc; color: #fff; border: none; padding: 0 25px; border-radius: 8px; cursor: pointer; height: 72px; font-weight: bold; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.btn-send:hover { background: #ff8e9a; }
.btn-attach { background: #f4f8f9; color: #555; border: 1px solid #ddd; padding: 0 15px; border-radius: 8px; cursor: pointer; height: 72px; font-size: 20px; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.btn-attach:hover { background: #e0e0e0; }

/* 채팅 이미지/파일 링크 */
.chat-img { max-width: 100%; max-height: 250px; border-radius: 8px; margin-top: 5px; cursor: pointer; border: 1px solid #eee; }
.chat-file-link { display: inline-block; margin-top: 5px; color: #0066cc; text-decoration: underline; font-weight: bold; word-break: break-all; font-size: 13px; background: #f0f8ff; padding: 5px 10px; border-radius: 5px; }
.back-btn { display: none; }

/* 📱 모바일 대응 미디어 쿼리 */
@media (max-width: 768px) {
    .app-wrapper { height: 100%; max-width: 100%; box-shadow: none; border-radius: 0; }
    .messenger-container { flex-direction: column; flex: 1 1 0; min-height: 0; }
    .room-list-area { width: 100%; border-right: none; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
    .chat-area { width: 100%; display: none; flex: 1 1 0; min-height: 0; }

    /* ✅ room-list: 모바일 터치 스크롤 */
    .room-list {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;
    }
    
  
    .messenger-container.chat-active .room-list-area { display: none !important; }
    .messenger-container.chat-active .chat-area { display: flex !important; }
    
    .back-btn { display: inline-block; cursor: pointer; color: #ff8e9a; margin-right: 15px; font-weight: bold; font-size: 18px; }
    .chat-header { padding: 15px; font-size: 16px; }
    .top-brand-header { padding: 15px 15px 5px 15px; }
    .brand-logo { max-height: 30px; }



    /* 💡 [신규] 화면 내의 모든 colorful한 이모지들을 시크한 '흑백'으로 통일합니다!
h2, p, div, span, button, option {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
    filter: grayscale(100%) !important; /* 👈 이모지의 색깔을 몽땅 뺏어버립니다! 
    opacity: 0.8; /* 👈 살짝 투명하게 만들어서 검은색 글씨와 더 부드럽게 어우러지게 합니다. 
}*/



    /* 💡 [핵심] 모바일 전용 입력창 강제 고정 + 가로 찌그러짐 방지 완벽 결합! */
    .chat-input-area {
        position: fixed !important;
        bottom: 0;
        left: 0;
        width: 100% !important;
        display: flex !important; /* 가로 정렬 부활 */
        gap: 10px;
        align-items: center;
        padding: 10px 15px !important;
        box-sizing: border-box;
        background-color: #fdf2f4;
        z-index: 9999;
        border-top: 1px solid #ffc1cc;
        /* 아이폰 하단 홈바(Safe Area) 여백 띄우기 */
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }
    .chat-messages {
        /* 고정된 입력창 높이만큼 채팅방 밑바닥 넉넉하게 띄워주기 */
        padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important; 
    }
    .chat-input-area textarea { height: 40px !important; flex: 1; }
    .btn-send, .btn-attach { height: 50px !important; padding: 0 15px; }
}

/* ========================================== */
/* 💡 프리텐다드 폰트 불러오기 및 모바일 명조체 박멸 */
/* ========================================== */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* 1. 웹페이지의 모든 요소에 프리텐다드 강제 적용 */
* {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif !important;
}

/* 2. 아이폰/안드로이드 폰트 깨짐 방지: 입력칸(input, select, button) 강제 상속 */
input, select, textarea, button {
    font-family: inherit !important;
}




/* 💡 스마트폰 텍스트 길게 누르기 & 구글 터치 검색 팝업 완벽 방지 */
.room-list, .room-list * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* ========================================== */
/* 💡 차이 메신저 학생 필터 버튼 스타일 */
/* ========================================== */
.chat-filter-container {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 20px;
    background: #fdfdfd;
    border-bottom: 1px solid #eee;
    scrollbar-width: none; /* 파이어폭스 스크롤바 숨김 */
    -ms-overflow-style: none; /* IE 스크롤바 숨김 */
}
.chat-filter-container::-webkit-scrollbar {
    display: none; /* 크롬, 사파리 스크롤바 숨김 */
}
.chat-filter-btn {
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #fff;
    color: #555;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s;
}
.chat-filter-btn.active {
    background: #2671bc; /* 차현준 학원 시그니처 블루 */
    color: #fff;
    border-color: #2671bc;
    box-shadow: 0 2px 6px rgba(38, 113, 188, 0.3);
}