/* =========================================================
 * 공통 컨테이너 / 레이아웃
 * =======================================================*/
.file-explorer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* 상단 제목이 있다면 h1 스타일 (다른 페이지와 통일) */
.file-explorer-container h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-align: center;
    background: linear-gradient(135deg, var(--pink-primary), var(--pink-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 설명 텍스트 */
.file-explorer-container > p {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

/* =========================================================
 * 상단 툴바 (경로, 버튼, 개수 표시)
 * =======================================================*/
.file-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.file-toolbar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.file-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.file-toolbar .path-label {
    opacity: 0.7;
}

.file-toolbar .path-text {
    font-family: monospace;
    word-break: break-all;
    color: var(--text-primary);
}

/* 상단 버튼 (root / 상위 폴더 등) */
.btn-back {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, transform 0.1s ease;
}

.btn-back:hover {
    background: var(--pink-primary);
    border-color: var(--pink-primary);
    color: #fff;
    transform: translateY(-1px);
}

/* 파일 개수 */
.file-count {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* =========================================================
 * 테이블 래퍼 (카드 박스처럼)
 * =======================================================*/
.file-table-wrapper {
    background: var(--bg-secondary);
    border-radius: 20px;
    box-shadow: 0 4px 20px var(--shadow-color);
    border: 1px solid var(--border-color);
    overflow: hidden;      /* 👈 둥근 모서리 밖으로 내용/스크롤 안 나가게 */
}

.file-table-scroll {
    max-height: 70vh;
    overflow-y: auto;
}

/* 스크롤바 스타일은 여기로 이동 */
.file-table-scroll::-webkit-scrollbar {
    width: 8px;
}

.file-table-scroll::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.file-table-scroll::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.file-table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* 스크롤바 스타일 (다른 페이지와 비슷하게) */
.file-table-wrapper::-webkit-scrollbar {
    width: 8px;
}

.file-table-wrapper::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.file-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.file-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* =========================================================
 * 테이블 및 공통 셀 스타일
 * =======================================================*/
.file-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    background: var(--bg-secondary);
}

/* 헤더 고정 */
.file-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* 헤더 스타일 (commands / rules 톤에 맞춤) */
.file-table th {
    background: linear-gradient(135deg, var(--pink-primary), var(--pink-light));
    color: #fff;
    font-weight: 600;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

/* 공통 셀 스타일 */
.file-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    white-space: nowrap;
}

/* 이름 컬럼 */
.file-table .col-name {
    width: 100%;
}

/* Row hover 효과 */
.file-table tbody tr {
    transition: background-color 0.15s ease;
}

.file-table tbody tr:hover {
    background: var(--bg-tertiary);
}

/* =========================================================
 * 파일/폴더 이름
 * =======================================================*/
.file-name-text,
.file-name-link {
    display: inline-block;
    max-width: 700px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--text-primary);
}

.file-name-link {
    text-decoration: none;
}

.file-name-link:hover {
    text-decoration: underline;
}

/* 종류 아이콘 */
.file-type-icon {
    width: 20px;
    text-align: center;
    opacity: 0.85;
}

/* =========================================================
 * 섹션 구분 (폴더 / 파일)
 * =======================================================*/
.section-row {
    background: var(--bg-primary);
    font-weight: 600;
    color: var(--text-secondary);
}

.section-row td {
    padding-top: 0.7rem;
    padding-bottom: 0.4rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* 비어 있는 경우 안내 */
.empty-row td {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-secondary);
}

/* =========================================================
 * 다운로드 / 보기 아이콘 영역
 * =======================================================*/

/* 다운로드/보기 열 가운데 정렬 */
.file-table th.col-download,
.file-table td.col-download {
    text-align: center;
}

/* 아이콘 간 간격 조절 */
.file-table td.col-download a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 6px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.1s ease;
}

/* 아이콘 크기 통일 */
.file-table .btn-download i,
.file-table .btn-view i {
    font-size: 1.1rem;
}

/* 호버 효과 */
.file-table td.col-download a:hover {
    color: var(--pink-primary);
    transform: translateY(-1px);
}

/* 기본 링크 스타일 제거용 클래스 */
.btn-download,
.btn-view {
    text-decoration: none;
}

/* 종류 아이콘 (셀 자체) */
.file-type-icon {
    width: 20px;
    text-align: center;
    opacity: 0.85;
}

/* 실제 아이콘 요소 */
.file-type-icon-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    font-size: 1.1rem;
}
/* 정렬 아이콘 */
.sort-icon {
    margin-left: 6px;
    font-size: 0.75rem;
    opacity: 0.6;
    cursor: pointer;
}

th[data-sort] {
    cursor: pointer;
    user-select: none;
}

th[data-sort].asc .sort-icon::before {
    content: "\f0de"; /* fa-sort-up */
}

th[data-sort].desc .sort-icon::before {
    content: "\f0dd"; /* fa-sort-down */
}

/* =========================================================
 * 반응형
 * =======================================================*/
@media (max-width: 768px) {
    /* 1) 기본 레이아웃 */
    .file-explorer-container { padding: 1.25rem 0.75rem; }
    .file-toolbar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

    /* ✅ 이중 스크롤 제거 */
    .file-table-scroll { max-height: none; overflow-y: visible; }

    /* 2) 테이블: 고정 레이아웃로 컬럼 폭 강제 */
    .file-table {
        table-layout: fixed;
        width: 100%;
    }

    /* 셀 패딩/폰트 줄여서 폭 확보 */
    .file-table th,
    .file-table td {
        padding: 0.55rem 0.5rem;
        font-size: 0.88rem;
        white-space: nowrap;   /* 기본은 줄바꿈 금지(겹침 방지) */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 3) 컬럼 구성 (모바일에서는: 종류 / 이름 / 수정일 / 다운로드) */
    /* 크기(3번째) 숨김 */
    /*.file-table th:nth-child(3),
    .file-table td:nth-child(3) { display: none; }*/

    /* 종류(1) */
    .file-table th.file-type-icon,
    .file-table td.file-type-icon {
        width: 38px;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
        text-align: center;
    }

    /* 이름(2) : 남는 공간 */
    .file-table th:nth-child(2),
    .file-table td:nth-child(2) {
        width: auto;
        min-width: 0; /* ellipsis 필수 */
    }

    /* 수정일(4) : 고정폭 */
    .file-table th:nth-child(4),
    .file-table td:nth-child(4) {
        width: 92px;            /* 겹치면 여기 100~110으로 늘리면 됨 */
        text-align: center;
        font-size: 0.82rem;
    }

    /* 다운로드(5) : 고정폭 + 아이콘 중앙 */
    .file-table th.col-download,
    .file-table td.col-download {
        width: 64px;            /* 겹치면 70~80으로 늘리면 됨 */
        text-align: center;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    /* ✅ 다운로드 아이콘이 셀 밖으로 못 튀어나오게 */
    .file-table td.col-download {
        overflow: hidden;
    }

    /* 다운로드/보기 아이콘 간격 축소 (겹침 방지) */
    .file-table td.col-download a {
        margin: 0 4px;
    }
    .file-table .btn-download i,
    .file-table .btn-view i {
        font-size: 1.0rem;
    }

    /* 4) 파일명: 기본은 1줄 말줄임 */
    .file-name-text,
    .file-name-link {
        display: block;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 5) 선택(active) 시: “테이블은 유지” + 파일명만 아래 미리보기(별도 row) */
    tr.filename-preview td {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        padding: 0.6rem 0.75rem;
        background: rgba(255,255,255,0.04);
    }
    .filename-preview-box {
        line-height: 1.35;
        word-break: break-word;
        font-size: 0.9rem;
    }

    /* 6) 모바일 헤더 깨짐 방지: 헤더를 한 덩어리 bar로 */
    .file-table thead tr {
        background: linear-gradient(135deg, var(--pink-primary), var(--pink-light));
    }
    .file-table thead th {
        background: transparent;
    }
}