/* ============================================================
   FileStationNAS.css - Synology File Station 스타일
   ============================================================ */

/* === 리셋 & 기본 === */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
    font-family: '맑은 고딕', 'Malgun Gothic', 'Segoe UI', sans-serif;
    font-size: 13px;
    color: #333;
    background: #f5f5f5;
}

/* === 로그인 패널 === */
#fsLoginPanel {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f0f2f5;
}
.fs-login-box {
    width: 400px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    padding: 40px;
}
.fs-login-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #1e272e;
    margin-bottom: 30px;
    letter-spacing: 1px;
}
.fs-login-box input[type="text"],
.fs-login-box input[type="password"] {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 12px;
    outline: none;
}
.fs-login-box input[type="text"]:focus,
.fs-login-box input[type="password"]:focus {
    border-color: #0984e3;
}
#btnLogin {
    display: block;
    width: 100%;
    height: 44px;
    background: #0984e3;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}
#btnLogin:hover { background: #0773c5; }
#fsLoginMsg {
    color: #e74c3c;
    font-size: 13px;
    text-align: center;
    margin-top: 12px;
    min-height: 18px;
}

/* === 타이틀 바 === */
#fsTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: #1e272e;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 7px 12px;
    flex-shrink: 0;
}
#fsTitleText {
    flex: 1;
    text-align: center;
}
#btnLogout, #btnSettings {
    position: absolute;
    background: transparent;
    color: #fff;
    border: none;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
    letter-spacing: 0;
}
#btnLogout {
    right: 40px;
}
#btnSettings {
    right: 10px;
    font-size: 16px;
    padding: 1px 8px;
}
#btnLogout:hover, #btnSettings:hover {
    background: rgba(255,255,255,0.15);
}

/* === 전체 컨테이너 === */
#fsContainer {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ============================================================
   상단 바
   ============================================================ */
#fsTopBar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2d3436;
    color: #fff;
    padding: 8px 12px;
    min-height: 48px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

#fsTopBar select {
    height: 30px;
    font-size: 13px;
    min-width: 260px;
    font-family: inherit;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 0 8px;
    background: #3d4447;
    color: #fff;
}
#fsTopBar select option { background: #2d3436; color: #fff; }

/* 빵부스러기 (Breadcrumb) */
#fsBreadcrumb {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    padding: 0 8px;
}
.bc-item {
    color: #adb5bd;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 13px;
    transition: background 0.15s;
}
.bc-item:hover { background: rgba(255,255,255,0.15); color: #fff; }
.bc-item:last-child { color: #fff; font-weight: bold; }
.bc-separator { color: #6c757d; margin: 0 1px; font-size: 11px; }

/* 검색 */
#txtSearch {
    height: 30px;
    width: 180px;
    padding: 0 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #3d4447;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
}
#txtSearch::placeholder { color: #999; }
#txtSearch:focus { outline: none; border-color: #0984e3; background: #4a5255; }

#lblRecursive {
    font-size: 12px;
    color: #ccc;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
#lblRecursive input { cursor: pointer; }

/* 버튼 공통 */
#fsTopBar button {
    height: 30px;
    padding: 0 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.15s;
}
#btnSearch { background: #636e72; color: #fff; }
#btnSearch:hover { background: #747d80; }
#btnUpload { background: #0984e3; color: #fff; }
#btnUpload:hover { background: #0a6fc2; }
#btnNewFolder { background: #00b894; color: #fff; }
#btnNewFolder:hover { background: #009d80; }

/* ============================================================
   메인 영역 (좌측 트리 + 우측 목록)
   ============================================================ */
#fsMain {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ============================================================
   좌측 폴더 트리
   ============================================================ */
#fsTreePanel {
    width: 250px;
    min-width: 150px;
    max-width: 500px;
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 4px;
    flex-shrink: 0;
}

.tree-node { user-select: none; }
.tree-node-inner {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.1s;
}
.tree-node-inner:hover { background: #e9ecef; }
.tree-node-inner.active { background: #cce5ff; font-weight: bold; }

.tree-toggle {
    width: 18px;
    text-align: center;
    font-size: 10px;
    color: #666;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.tree-toggle.empty { visibility: hidden; }
.tree-toggle.expanded { transform: rotate(90deg); }

.tree-icon { margin: 0 4px; font-size: 15px; flex-shrink: 0; }
.tree-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.tree-children { margin-left: 18px; display: none; }
.tree-children.expanded { display: block; }

/* ============================================================
   리사이저
   ============================================================ */
#fsResizer {
    width: 4px;
    background: #dee2e6;
    cursor: col-resize;
    flex-shrink: 0;
    transition: background 0.15s;
}
#fsResizer:hover, #fsResizer.active { background: #0984e3; }

/* ============================================================
   우측 파일 목록
   ============================================================ */
#fsListPanel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}

/* 리스트 헤더 (정렬) */
#fsListHeader {
    display: flex;
    align-items: center;
    background: #f1f3f5;
    border-bottom: 2px solid #dee2e6;
    padding: 7px 8px;
    font-weight: bold;
    color: #495057;
    font-size: 12px;
    user-select: none;
    flex-shrink: 0;
}
.col-icon { width: 36px; flex-shrink: 0; }
.col-name { flex: 1; cursor: pointer; padding-left: 4px; }
.col-size { width: 100px; text-align: right; cursor: pointer; padding-right: 12px; }
.col-date { width: 140px; cursor: pointer; }
.sort-col:hover { color: #0984e3; }
.sort-col.active { color: #0984e3; }
.sort-arrow { font-size: 10px; margin-left: 4px; }

/* 리스트 바디 */
#fsListBody {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 파일/폴더 항목 */
.fs-item {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    border-bottom: 1px solid #f1f3f5;
    cursor: default;
    user-select: none;
    transition: background 0.08s;
}
.fs-item:hover { background: #e8f0fe; }
.fs-item.selected { background: #cce5ff; }
.fs-item.selected:hover { background: #b3d7ff; }
.fs-item.cut-item { opacity: 0.5; }

.fs-item .item-icon {
    width: 36px;
    text-align: center;
    font-size: 20px;
    flex-shrink: 0;
}
.fs-item .item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 4px;
}
.fs-item .item-location {
    margin-left: 8px;
    font-size: 11px;
    color: #868e96;
    font-weight: normal;
    font-style: italic;
}
.fs-item .item-size {
    width: 100px;
    text-align: right;
    color: #868e96;
    font-size: 12px;
    padding-right: 12px;
}
.fs-item .item-date {
    width: 140px;
    color: #868e96;
    font-size: 12px;
}

/* 폴더 스타일 */
.fs-item.is-folder .item-name { font-weight: 600; color: #2d3436; }

/* 인라인 이름변경 입력 */
.rename-input {
    width: 300px;
    max-width: 80%;
    font-size: 13px;
    font-family: inherit;
    padding: 2px 6px;
    border: 2px solid #0984e3;
    border-radius: 3px;
    outline: none;
}

/* 비어있는 목록 */
.fs-empty-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #adb5bd;
    font-size: 14px;
}

/* 로딩 표시 */
.fs-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #868e96;
    font-size: 13px;
}

/* ============================================================
   페이징
   ============================================================ */
#fsPaging {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}
.page-btn {
    padding: 4px 10px;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    cursor: pointer;
    background: #fff;
    font-size: 12px;
    font-family: inherit;
    transition: all 0.15s;
}
.page-btn:hover { background: #e8f0fe; border-color: #0984e3; }
.page-btn.active {
    background: #0984e3;
    color: #fff;
    border-color: #0984e3;
    font-weight: bold;
}

/* ============================================================
   컨텍스트 메뉴
   ============================================================ */
.fs-context-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    min-width: 170px;
    z-index: 10000;
    padding: 4px 0;
}
.fs-context-menu ul { list-style: none; margin: 0; padding: 0; }
.fs-context-menu li {
    padding: 8px 20px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.1s;
}
.fs-context-menu li:hover { background: #e8f0fe; }
.fs-context-menu li.disabled {
    color: #adb5bd;
    pointer-events: none;
}
.fs-context-menu li.separator {
    height: 1px;
    background: #e9ecef;
    padding: 0;
    margin: 4px 8px;
    cursor: default;
}

/* ============================================================
   모달 공통
   ============================================================ */
.fs-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fs-modal-content {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
    min-width: 420px;
    max-width: 80vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.fs-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #dee2e6;
    font-weight: bold;
    font-size: 15px;
}
.fs-modal-close {
    border: none;
    background: none;
    font-size: 22px;
    cursor: pointer;
    color: #868e96;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}
.fs-modal-close:hover { color: #e74c3c; }
.fs-modal-body { flex: 1; padding: 20px; overflow-y: auto; }
.fs-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #dee2e6;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 미리보기 모달 */
.fs-preview-content {
    width: 90vw; max-width: 90vw; height: 90vh; max-height: 95vh;
    resize: both;
    overflow: hidden;
}
.fs-preview-content .fs-modal-body { display: flex; align-items: center; justify-content: center; overflow: auto; }
.fs-preview-content img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fs-preview-content iframe { width: 100%; height: 100%; border: none; }
.fs-preview-content audio { width: 100%; }
.fs-preview-content video { max-width: 100%; max-height: 100%; object-fit: contain; }

/* 미리보기 네비게이션 */
.fs-preview-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.fs-preview-btn {
    border: none;
    background: #f1f3f5;
    color: #495057;
    font-size: 14px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.fs-preview-btn:hover:not(:disabled) { background: #0984e3; color: #fff; }
.fs-preview-btn:disabled { opacity: 0.3; cursor: default; }
.fs-preview-nav .fs-modal-close {
    border: none;
    background: #f1f3f5;
    color: #495057;
    font-size: 22px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}
.fs-preview-nav .fs-modal-close:hover { background: #e74c3c; color: #fff; }

/* ============================================================
   업로드 관련
   ============================================================ */
.fs-drop-zone {
    border: 2px dashed #ced4da;
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    color: #868e96;
    font-size: 14px;
    transition: all 0.2s;
}
.fs-drop-zone:hover { border-color: #0984e3; background: #f0f7ff; color: #0984e3; }
.fs-drop-zone.dragover { border-color: #0984e3; background: #d4e6ff; border-style: solid; }

#fsUploadList { margin-top: 12px; max-height: 200px; overflow-y: auto; }
.upload-item {
    padding: 6px 10px;
    border-bottom: 1px solid #f1f3f5;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.upload-item .upload-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-item .upload-size { color: #868e96; margin-left: 12px; flex-shrink: 0; }

.fs-progress-bar-bg {
    width: 100%;
    height: 22px;
    background: #e9ecef;
    border-radius: 11px;
    overflow: hidden;
    margin-top: 12px;
}
.fs-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #0984e3, #74b9ff);
    width: 0%;
    transition: width 0.2s;
    text-align: center;
    color: #fff;
    font-size: 11px;
    line-height: 22px;
    font-weight: bold;
    border-radius: 11px;
}

#fsUploadModal .fs-modal-footer button {
    height: 34px;
    padding: 0 20px;
    border: none;
    border-radius: 4px;
    background: #0984e3;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s;
}
#fsUploadModal .fs-modal-footer button:hover { background: #0a6fc2; }
#fsUploadModal .fs-modal-footer label {
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================
   설정 관리 모달
   ============================================================ */
.fs-settings-content {
    width: 90vw;
    max-height: 80vh;
}
#fsSettingsTable {
    width: 100%;
    border-collapse: collapse;
}
#fsSettingsTable th {
    background: #f1f3f5;
    padding: 8px 8px;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
}
#fsSettingsTable td {
    padding: 5px 6px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.stg-col-title { width: 20%; }
.stg-col-path { width: 40%; }
.stg-col-userlist { width: 28%; }
.stg-col-btn { width: 12%; text-align: center; }
#fsSettingsTable td { vertical-align: top; }
#fsSettingsTable textarea {
    width: 100%;
    border: 1px solid #ddd;
    padding: 4px 6px;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
    border-radius: 3px;
    resize: vertical;
    min-height: 28px;
    line-height: 1.4;
    overflow: hidden;
}
#fsSettingsTable textarea:focus {
    border-color: #0984e3;
    outline: none;
}
.btn-save-setting, .btn-del-setting {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: inherit;
    white-space: nowrap;
}
.btn-save-setting:hover { background: #e3f2fd; border-color: #90caf9; }
.btn-del-setting:hover { background: #fde8e8; border-color: #ef9a9a; }
#btnAddSetting {
    height: 32px;
    padding: 0 16px;
    border: none;
    border-radius: 4px;
    background: #0984e3;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s;
}
#btnAddSetting:hover { background: #0a6fc2; }
#fsSettingsModal .fs-modal-footer {
    justify-content: flex-end;
}

/* ============================================================
   상태 바
   ============================================================ */
#fsStatusBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    font-size: 11px;
    color: #868e96;
    height: 26px;
    flex-shrink: 0;
}

/* ============================================================
   스크롤바 커스텀
   ============================================================ */
#fsTreePanel::-webkit-scrollbar,
#fsListBody::-webkit-scrollbar {
    width: 8px;
}
#fsTreePanel::-webkit-scrollbar-track,
#fsListBody::-webkit-scrollbar-track {
    background: transparent;
}
#fsTreePanel::-webkit-scrollbar-thumb,
#fsListBody::-webkit-scrollbar-thumb {
    background: #ced4da;
    border-radius: 4px;
}
#fsTreePanel::-webkit-scrollbar-thumb:hover,
#fsListBody::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}

/* ============================================================
   반응형 - 화면 폭에 따른 레이아웃 조정
   ============================================================ */

/* 1200px 이하: 트리 패널 축소 */
@media (max-width: 1200px) {
    #fsTreePanel { width: 200px; min-width: 120px; }
    #txtSearch { width: 150px; }
    .col-date { width: 120px; }
    .fs-item .item-date { width: 120px; }
    .fs-modal-content { min-width: 360px; }
    .fs-preview-content { min-width: 500px; }
}

/* 900px 이하: 트리 숨기고 목록만 표시, 상단바 축소 */
@media (max-width: 900px) {
    #fsTreePanel { display: none; }
    #fsResizer { display: none; }

    #fsTopBar {
        flex-wrap: wrap;
        height: auto;
        padding: 6px 8px;
        gap: 6px;
    }
    #fsTopBar select { min-width: 160px; flex: 1; }
    #fsBreadcrumb { order: 10; flex-basis: 100%; padding: 4px 0 0 0; }
    #txtSearch { width: 120px; flex: 0 0 auto; }

    .col-size { width: 80px; }
    .fs-item .item-size { width: 80px; }
    .col-date { width: 110px; font-size: 11px; }
    .fs-item .item-date { width: 110px; font-size: 11px; }

    .fs-modal-content { min-width: 300px; max-width: 95vw; }
    .fs-preview-content { min-width: 300px; max-width: 95vw; }
}

/* 600px 이하: 모바일 수준 축소 */
@media (max-width: 600px) {
    #fsTopBar select { min-width: 100%; }
    #fsBreadcrumb { font-size: 12px; }
    #txtSearch { width: 100%; flex: 1 1 100%; order: 11; }
    #btnSearch { order: 12; }
    #btnUpload { order: 13; }
    #btnNewFolder { order: 14; }

    .col-date { display: none; }
    .fs-item .item-date { display: none; }
    .col-size { width: 70px; }
    .fs-item .item-size { width: 70px; font-size: 11px; }

    .fs-modal-content { min-width: 0; width: 95vw; }
    .fs-preview-content { min-width: 0; width: 95vw; min-height: 300px; }
    .fs-preview-content img { max-height: 60vh; }
    .fs-preview-content iframe { height: 60vh; }
    .fs-preview-content video { max-height: 60vh; }

    .fs-context-menu { min-width: 140px; }
    .fs-context-menu li { padding: 10px 16px; }

    #fsStatusBar { font-size: 10px; }
}

/* ============================================================
   MessageBox 커스텀 스타일
   ============================================================ */
.custom_messagebox {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    max-width: 450px;
    font-family: '맑은 고딕', 'Malgun Gothic', 'Segoe UI', sans-serif;
}
.custom_messagebox .messagebox_content {
    padding: 28px 24px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    text-align: center;
}
.custom_messagebox .messagebox_buttons {
    padding: 10px 24px 20px;
    text-align: center;
}
.custom_messagebox .messagebox_buttons button {
    color: #fff !important;
    background-color: #0078FF !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 9px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: '맑은 고딕', 'Malgun Gothic', 'Segoe UI', sans-serif !important;
    cursor: pointer;
    margin: 0 4px;
    min-width: 80px;
    transition: background-color 0.15s;
}
.custom_messagebox .messagebox_buttons button:hover {
    background-color: #0060cc !important;
}
.custom_messagebox .messagebox_buttons button[data-messagebox-button-key="buttonFail"] {
    background-color: #868e96 !important;
}
.custom_messagebox .messagebox_buttons button[data-messagebox-button-key="buttonFail"]:hover {
    background-color: #6c757d !important;
}