/* static/css/responsive.css */

/* --- 반응형 (Mobile First Approach 기반 Override) --- */
@media (max-width: 767px) {
    /* body { padding-top: 60px; } /* 기본 패딩 제거 또는 아래 chat-page에서 덮어쓰기 */
    /*************/
    /* 수정 시작 */
    body.chat-page {
        padding-top: 0; /* 채팅 페이지에서 body 상단 패딩 제거 */
    }
    /* 수정 끝 */
    /*************/
    main { padding: 15px; }
    /* body:has(.chat-container) main -> .chat-container를 가진 body의 main (선택자 확인 필요) */
    /* body.chat-page main 이 더 명확할 수 있음 */
    body.chat-page main { padding: 0; } /* 채팅 페이지 main 패딩 0 */

    #main-navbar { padding: 0 10px; }
    #sidebar-toggle-button { display: block; }

    /* 모바일 상단 메뉴 항목 표시/숨김 로직 수정 */
    #main-navbar > .navbar-menu > li {
        /* 기본적으로 모든 최상위 메뉴 항목 숨김 */
        /* display: none; */ /* 이 규칙이 너무 광범위할 수 있음 */
    }
    /* 필요한 항목만 명시적으로 보이도록 처리 */
    #main-navbar > .navbar-menu > li.dropdown { display: list-item; } /* 드롭다운 li는 항상 표시 */
    #main-navbar > .navbar-menu > li > .username-display { display: none; } /* 사용자 이름 텍스트는 숨김 (모바일 공간 부족) */

    /* 로그인/비로그인 상태에 따라 특정 li 항목 제어 */
    /* 비로그인 시: 로그인/회원가입 링크, 비회원 설정 드롭다운 표시 */
    body.not-logged-in #main-navbar > .navbar-menu > li#settings-menu-button-li { display: none; } /* 회원 설정 숨김 */
    body.not-logged-in #main-navbar > .navbar-menu > li#login-link,
    body.not-logged-in #main-navbar > .navbar-menu > li#signup-link,
    body.not-logged-in #main-navbar > .navbar-menu > li#guest-settings-menu-button-li { display: list-item; }

    /* 로그인 시: 회원 설정 드롭다운 표시, 비회원 메뉴 숨김 */
    body:not(.not-logged-in) #main-navbar > .navbar-menu > li#login-link,
    body:not(.not-logged-in) #main-navbar > .navbar-menu > li#signup-link,
    body:not(.not-logged-in) #main-navbar > .navbar-menu > li#guest-settings-menu-button-li { display: none; }
    body:not(.not-logged-in) #main-navbar > .navbar-menu > li#settings-menu-button-li { display: list-item; }


    .chat-container {
        flex-direction: column;
        /*************/
        /* 수정 시작 */
        /* height: calc(100vh - 60px); /* viewport 문제 발생 가능성 */
        height: 100%; /* 부모(main)의 높이를 따르도록 변경 */
        /* 수정 끝 */
        /*************/
        border-radius: 0; margin: 0; max-width: none;
    }

    .chat-list {
        position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 85%;
        background-color: var(--chat-list-background); /* CSS 변수 사용 */
        border-right: 1px solid var(--border-color);
        padding: 15px;
        padding-top: 70px;
        overflow-y: auto; z-index: 1060;
        transform: translateX(-100%); transition: transform 0.3s ease;
        box-sizing: border-box; height: 100vh;
    }
    .chat-area {
        width: 100%; height: 100%; display: flex; flex-direction: column;
        transition: transform 0.3s ease;
        flex: 1;
    }
    .chat-container.sidebar-open .chat-list {
        transform: translateX(0);
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }
    .chat-container.sidebar-open #sidebar-overlay {
         opacity: 1; visibility: visible; transition-delay: 0s;
    }
    /* 햄버거 버튼 X 모양 */
    .chat-container.sidebar-open #sidebar-toggle-button span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .chat-container.sidebar-open #sidebar-toggle-button span:nth-child(2) { opacity: 0; }
    .chat-container.sidebar-open #sidebar-toggle-button span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* 모바일 채팅창 패딩/폰트 조정 */
    .chat-history { padding: 15px; }
    .chat-input-area { padding: 10px 15px; }
    .message { padding: 10px 15px; font-size: 0.95em; max-width: 90%; }
    textarea#message-input.form-control { padding: 8px 15px; min-height: 40px; }
    #send-button { width: 40px; height: 40px; }
    #chat-title { padding: 15px; font-size: 1.15em; }
    #conversation-list li { padding: 10px 12px; }
    .date-separator { margin: 20px 0 15px; }

    /* 모달 크기 조정 */
    .modal-content { padding: 25px; max-width: 90%; }
    .modal-content h2 { font-size: 1.4em; }

    /* 전화번호 국가 코드 선택 너비 조정 */
    .phone-group select { width: 90px; font-size: 0.9em; }

    /* 관리자 테이블 가로 스크롤 */
    .admin-table-container { /* admin.php 등에서 table을 이 div로 감싸야 함 */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
    }

    /* 모바일 드롭다운 메뉴 위치 조정 (필요시) */
    .dropdown-menu {
        /* position: fixed; */ /* 화면 전체 기준 위치 조정 필요 시 */
        /* top: 60px; */ /* 헤더 바로 아래 */
        /* right: 10px; */
        /* min-width: calc(100vw - 20px); */ /* 화면 너비에 맞게 */
        /* box-shadow: 0 5px 10px rgba(0,0,0,0.2); */
    }
    /* 드롭다운 메뉴 내부 항목 스타일 확인 (숨겨지지 않도록) */
    .dropdown-menu li {
        display: block; /* li 요소 확실히 보이게 */
    }
    .dropdown-menu li a {
         display: block; /* 링크도 확실히 보이게 */
         padding: 12px 20px; /* 내부 패딩 충분히 */
         /* color, background-color 등은 header.css 및 CSS 변수에서 정의 */
    }
    .dropdown-divider {
         display: block; /* 구분선도 보이게 */
    }
}

/* 데스크탑 레이아웃 복원 */
@media (min-width: 768px) {
    #sidebar-toggle-button { display: none !important; }
    #sidebar-overlay { display: none !important; }
    .chat-list {
        position: static;
        transform: none;
        width: 260px;
        height: auto;
        padding-top: 20px;
        z-index: auto;
        border-right: 1px solid var(--border-color);
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
    }
    .chat-area {
        flex: 1;
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: static;
        transform: none;
    }
     /* 데스크탑에서는 모든 최상위 메뉴 항목 보이도록 */
     #main-navbar > .navbar-menu > li { display: list-item; }
     /* 로그인 상태별 드롭다운 메뉴 제어 (데스크탑에서도 필요) */
     body.not-logged-in #main-navbar > .navbar-menu > li#settings-menu-button-li { display: none; }
     body.not-logged-in #main-navbar > .navbar-menu > li#guest-settings-menu-button-li { display: list-item; }
     body:not(.not-logged-in) #main-navbar > .navbar-menu > li#guest-settings-menu-button-li { display: none; }
     body:not(.not-logged-in) #main-navbar > .navbar-menu > li#settings-menu-button-li { display: list-item; }

    /* 데스크탑에서도 .chat-container 높이 일관성 유지 */
    .chat-container {
        /*************/
        /* 추가 시작 (데스크탑에서도 일관성 위해 height: 100% 유지) */
        height: 100%; /* 부모(main) 높이 따르도록 유지 */
        /* 추가 끝 */
        /*************/
    }
}