/*
 * 게시글 목록 페이지 전용 스타일
 * 페이지: /WEB-INF/jsp/vasanta/mber/ntt/list.jsp
 */

/* ========================================
   모바일 모달 표준 스타일 (390px 이하)
   문서: /docs/hr/03_MOBILE_MODAL.md
   ======================================== */

/* PC (390px 초과): 상단 X버튼 숨김 */
#nttDetailModal .modal-header .modal-close-btn-mobile {
    display: none !important;
}

/* 데스크톱 테이블 제목 컬럼 말줄임 처리 */
.table .title a {
    display: block;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 모바일 카드 스타일 - tasks.jsp 패턴 적용 */
@media screen and (max-width: 768px) {
    /* 데스크톱 테이블 숨김 */
    #lineTable .table {
        display: none !important;
    }

    /* 모바일 리스트 표시 */
    .mobile-list-container {
        display: block !important;
    }

    /* 모바일 리스트 아이템 스타일 - tasks.jsp 일관성 */
    .mobile-list-item {
        border: 1px solid #e0e0e0 !important;
        border-radius: 18px !important;
        margin-bottom: 16px !important;
        padding: 16px !important;
        background: #fff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    .mobile-list-item .item-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
        border-bottom: 1px dashed #d0d0d0 !important;
    }

    .mobile-list-item .item-title {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #252525 !important;
        margin: 0 !important;
        flex: 1 !important;
        padding-right: 12px !important;
    }

    .mobile-list-item .item-title a {
        color: #252525 !important;
        text-decoration: none !important;
    }

    .mobile-list-item .item-number {
        background: #f0f0f0 !important;
        padding: 4px 12px !important;
        border-radius: 12px !important;
        font-size: 15px !important; /* was 12px */
        font-weight: 600 !important;
        color: #696969 !important;
        white-space: nowrap !important;
    }

    .mobile-list-item .item-details {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .mobile-list-item .detail-row {
        display: flex !important;
        justify-content: space-between !important;
        padding: 6px 0 !important;
    }

    .mobile-list-item .detail-label {
        font-weight: 600 !important;
        color: #252525 !important;
        margin-right: 12px !important;
        min-width: 80px !important;
    }

    .mobile-list-item .detail-value {
        color: #696969 !important;
        text-align: right !important;
        flex: 1 !important;
    }

    /* 검색 결과 없음 스타일 */
    .mobile-list-container .empty-state {
        text-align: center !important;
        padding: 40px 20px !important;
        color: #595959 !important; /* 명암비 7:1 (was #999 2.8:1) */
    }

    .mobile-list-container .empty-state i {
        font-size: 3rem !important;
        margin-bottom: 16px !important;
        display: block !important;
    }

    .mobile-list-container .empty-state div {
        font-size: 16px !important;
        margin-bottom: 8px !important;
        color: #595959 !important; /* 명암비 7:1 (was #666 5.7:1) */
    }

    .mobile-list-container .empty-state small {
        font-size: 15px !important; /* was 14px */
        color: #595959 !important; /* 명암비 7:1 (was #999 2.8:1) */
    }
}

/* 데스크톱에서는 모바일 리스트 숨김 */
@media screen and (min-width: 769px) {
    .mobile-list-container {
        display: none !important;
    }
}

/* 모바일 (390px 이하): 모달 표준 스타일 */
@media (max-width: 430px) {
    /* ----- 외부 카드 배경 제거 ----- */
    .container-xxl > .card:not(:first-child) {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .container-xxl > .card:not(:first-child) > .card-body,
    .container-xxl > .card:not(:first-child) > .card-header,
    .container-xxl > .card:not(:first-child) > .card-footer {
        background: transparent !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ----- 목록 아이템 카드 너비 100% ----- */
    .mobile-list-item {
        border-radius: 11px !important;
        box-shadow: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* ----- 검색 카드 유지 ----- */
    .container-xxl > .card.mb-4:nth-child(2) {
        background: #fff !important;
        border: 1px solid #e9ecef !important;
        border-radius: 11px !important;
        box-shadow: none !important;
    }

    .container-xxl > .card.mb-4:nth-child(2) > .card-body {
        background: #fff !important;
        padding: 16px !important;
    }

    /* ----- 검색창 스타일 (분리된 스타일) ----- */
    #frmSearch .input-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    #frmSearch .input-group .position-relative {
        flex: 1 !important;
    }

    #frmSearch .input-group .form-control {
        border-radius: 8px !important;
        height: 38px !important;
    }

    /* X 버튼 숨김 */
    #frmSearch #clearSearchBtn {
        display: none !important;
    }

    /* 검색 버튼 - 38x38 정사각형 */
    #frmSearch .input-group #btnSearch {
        border-radius: 8px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    #frmSearch .input-group #btnSearch span {
        display: none !important;
    }

    /* ----- 작성 버튼 (white-bt 스타일) ----- */
    .card-header .d-flex.gap-2 .btn-primary {
        background-color: #fff !important;
        border: 1px solid #d0d0d0 !important;
        color: #333 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    .card-header .d-flex.gap-2 .btn-primary i {
        background-color: #696cff !important;
        color: #fff !important;
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        margin: 0 !important;
    }

    /* 모달 정중앙 배치 */
    #nttDetailModal.modal.show {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    #nttDetailModal .modal-dialog {
        margin: 0;
        width: 95vw !important;
        max-width: 95vw !important;
    }

    /* 모달 컨텐츠 스타일 */
    #nttDetailModal .modal-content {
        border-radius: 11px;
        height: 70vh !important;
    }

    /* 모달 헤더 스타일 */
    #nttDetailModal .modal-header {
        border-bottom: 1px solid #dee2e6;
        padding: 14px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* 상단 X버튼 표시 */
    #nttDetailModal .modal-header .modal-close-btn-mobile {
        display: block !important;
        background: none;
        border: none;
        font-size: 24px;
        color: #6c757d;
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }

    #nttDetailModal .modal-header .modal-close-btn-mobile:hover {
        color: #333;
    }

    /* 하단 닫기버튼 숨김 */
    #nttDetailModal .modal-footer .modal-close-btn-pc {
        display: none !important;
    }

    /* 모달 타이틀 스타일 */
    #nttDetailModal .modal-title {
        font-weight: 600;
        font-size: 1.1rem;
    }

    /* 모달 푸터 스타일 */
    #nttDetailModal .modal-footer {
        display: flex;
        flex-direction: row-reverse;
        gap: 8px;
        padding: 1rem;
    }

    #nttDetailModal .modal-footer .btn {
        flex: 1;
        margin: 0;
    }

    /* 딤 영역 드래그 방지 */
    #nttDetailModal.modal {
        overflow: hidden;
        touch-action: none;
    }

    /* ========================================
       customAlert 모달 (동적 생성) 스타일
       ======================================== */

    /* customAlert 모달 - 모바일 */
    .modal-type-alert.modal.show {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .modal-type-alert .modal-dialog {
        margin: 0;
        width: 90%;
        max-width: 320px;
    }

    .modal-type-alert .modal-content {
        border-radius: 11px;
        height: auto !important;
    }

    /* 모바일에서도 헤더 숨김 */
    .modal-type-alert .modal-header {
        display: none !important;
    }

    .modal-type-alert .modal-body {
        text-align: center;
        padding: 24px 20px 12px;
    }

    .modal-type-alert .modal-body p {
        margin: 0;
        font-size: 15px;
        line-height: 1.6;
        color: #566a7f;
    }

    /* 버튼 순서: 회색(왼쪽) - 파랑(오른쪽) */
    .modal-type-alert .modal-footer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        padding: 12px 20px 20px;
        border-top: none !important;
        margin-top: 0 !important;
    }

    .modal-type-alert .modal-footer .btn {
        flex: 1;
        margin: 0;
        max-width: 120px;
    }

    .modal-type-alert.modal {
        overflow: hidden;
        touch-action: none;
    }
}

/* ========================================
   공지사항 상세 모달 스타일
   ======================================== */

/* 모달 헤더 스타일 */
#nttDetailModal .modal-header {
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 1.5rem;
}

/* 모달 푸터 버튼 세로 배치 */
#nttDetailModal .modal-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 1rem 1.5rem;
}

#nttDetailModal .modal-footer .btn {
    width: 100%;
    margin: 0;
}