/* FileStation CSS */

/* 글로벌 얇은 스크롤바 */
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.35); }
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; }

:root {
    --primary: #4a90d9;
    --primary-dark: #3a7bc8;
    --secondary: #6c757d;
    --success: #28a745;
    --danger: #dc3545;
    --warning: #ffc107;
    --light: #f8f9fa;
    --dark: #343a40;
    --bg: #f0f2f5;
    --sidebar-bg: #2c3e50;
    --sidebar-text: #ecf0f1;
    --border: #dee2e6;
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
    --radius: 8px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Malgun Gothic', sans-serif;
    background: var(--bg);
    color: var(--dark);
    line-height: 1.5;
}

/* 로그인 화면 */
.screen { width: 100%; height: 100vh; }
.screen.hidden { display: none !important; }
#login-screen.active { display: flex !important; }
#main-screen.active { display: flex !important; }

#login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    z-index: 3000;
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow-y: auto;
    padding: 20px 0;
}

/* 시작 화면 - 로고 클릭 유도 */
.login-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.5s;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.login-start * {
    pointer-events: none !important;
}

.login-start.hidden {
    opacity: 0;
    pointer-events: none;
}

.login-start-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    transition: all 0.3s;
    cursor: pointer;
}

.login-start-header:hover {
    transform: scale(1.05);
}

.login-start-header:hover .login-start-logo {
    filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.8));
}

.login-start-logo {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    pointer-events: none;
}

.login-start-logo img,
.login-start-logo svg {
    pointer-events: none;
}

.login-start-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.login-start-logo .default-logo-svg {
    width: 100%;
    height: 100%;
}

.login-start-title {
    font-size: 52px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -1px;
    pointer-events: none;
}

.login-start-title span {
    color: #3b82f6;
}

.login-start-hint {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    animation: hintPulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hintPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* 로그인 박스 */
.login-box {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0,0,0,0.5);
    width: 100%;
    max-width: 400px;
    text-align: center;
    position: relative;
    transform: scale(0.9) translateY(30px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    margin: auto;
}

.login-box.active {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.login-box-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    color: #6b7280;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    z-index: 10;
}

.login-box-close:hover {
    background: #e5e7eb;
    color: #374151;
    transform: rotate(90deg);
}

.login-logo {
    font-size: 64px;
    margin-bottom: 10px;
}

.login-box h1 {
    margin-bottom: 30px;
    color: var(--dark);
}

.login-box input {
    width: 100%;
    padding: 14px;
    margin-bottom: 15px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 16px;
    transition: border-color 0.2s;
}

.login-box input:focus {
    outline: none;
    border-color: var(--primary);
}

.error-msg {
    color: var(--danger);
    margin-top: 10px;
    font-size: 14px;
}

.input-hint {
    font-size: 11px;
    color: #999;
    margin: 2px 0 8px 2px;
    line-height: 1.3;
}

.login-box input + .input-hint,
.login-box input + .password-strength {
    margin-top: -12px;
}

.password-strength {
    margin: 2px 0 6px;
}
.password-strength .strength-bar {
    height: 4px;
    border-radius: 2px;
    transition: width 0.3s, background 0.3s;
}
.password-strength .strength-text {
    font-size: 11px;
    margin-top: 2px;
    line-height: 1.3;
}

.success-msg {
    color: #28a745;
    margin-top: 10px;
    font-size: 14px;
    background: #d4edda;
    padding: 10px;
    border-radius: var(--radius);
    text-align: center;
}

/* 버튼 */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--light);
    color: var(--dark);
}

.btn:hover { background: var(--border); }

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover { background: var(--primary-dark); }

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-block { width: 100%; }

.btn-sm { padding: 6px 12px; font-size: 12px; }

.btn-icon {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius);
    transition: background 0.2s, transform 0.15s;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #555;
}

.btn-icon:hover { background: rgba(0,0,0,0.08); color: #333; }
.btn-icon:active { transform: scale(0.92); }
.btn-icon.active { background: rgba(0,0,0,0.1); }

.btn-icon svg {
    display: block;
}

/* 헤더 */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 60px;
    background: white;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 헤더 내 아이콘 버튼 (팝업 btn-icon과 분리) */
.header-right .btn-icon {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    border-radius: 8px;
    color: #555;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}
.header-right .btn-icon:hover {
    background: rgba(0,0,0,0.08);
    color: #333;
    border: none;
}
.header-right .btn-icon:active {
    transform: scale(0.9);
}
.header-right .btn-icon svg {
    width: 20px;
    height: 20px;
}

/* 하단 상태바 */
.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 15px;
    background: var(--light, #f8f9fa);
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary, #666);
    min-height: 32px;
    flex-shrink: 0;
    width: 100%;
}

.status-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.status-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.status-copyright {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: center;
}

/* 게시판 인라인 뷰 */
#board-inline-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

#board-inline-list {
    padding: 0;
}

#board-inline-pagination {
    flex-shrink: 0;
}

#board-inline-detail {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 12px;
}

#board-inline-form {
    flex: 1;
    overflow-y: auto;
}

#board-inline-empty {
    flex: 1;
}

/* 게시판 테이블 */
.board-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}

.board-table thead tr {
    background: var(--theme-hover, var(--bg-tertiary, #f8f9fa));
    border-bottom: 2px solid var(--theme-border, var(--border, #e9ecef));
}

.board-table th {
    padding: 9px 12px;
    font-weight: 600;
    color: var(--theme-text-muted, #888);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.board-table td {
    padding: 10px 12px;
    color: var(--theme-text, #333);
}

.board-table tbody tr {
    border-bottom: 1px solid var(--theme-border, var(--border, #f0f0f0));
    cursor: pointer;
    transition: background 0.15s;
}

.board-table tbody tr:hover {
    background: var(--theme-hover, rgba(0,0,0,0.03));
}

.board-table tbody tr.board-row-current {
    background: var(--theme-selected, rgba(102,126,234,0.08));
    font-weight: 600;
}

.board-table tbody tr.board-row-pinned {
    background: var(--theme-hover, rgba(245,159,0,0.04));
}

.board-table .board-col-num {
    text-align: center;
    width: 60px;
    color: var(--theme-text-muted, #999);
    font-size: 12px;
    white-space: nowrap;
}

.board-table .board-col-title {
    text-align: left;
    overflow: hidden;
}
/* td 내부를 flex row로: strong/a는 flex:1로 잘리고 뱃지/아이콘은 축소 안 됨 */
.board-postlist-row > .board-col-title {
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    min-width: 0;
}
.board-postlist-row > .board-col-title > strong,
.board-postlist-row > .board-col-title > a {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.board-postlist-row > .board-col-title > *:not(strong):not(a) {
    flex-shrink: 0;
}

.board-table .board-col-author {
    text-align: center;
    width: 90px;
    color: var(--theme-text-muted, #888);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-table .board-col-date {
    text-align: center;
    width: 90px;
    color: var(--theme-text-muted, #999);
    font-size: 12px;
    white-space: nowrap;
}

.board-table .board-col-views {
    text-align: center;
    width: 50px;
    color: var(--theme-text-muted, #999);
    font-size: 12px;
    white-space: nowrap;
}

/* 모바일: 게시판 목록 column 폭 압축 → 제목에 더 많은 공간 할당 */
@media (max-width: 1024px) {
    .board-table {
        font-size: 12px;
    }
    .board-table th {
        padding: 8px 4px;
        font-size: 11px;
    }
    .board-table td {
        padding: 8px 4px;
    }
    .board-table .board-col-num {
        width: 35px;
        padding: 8px 2px;
    }
    .board-table .board-col-author {
        width: 50px;
        padding: 8px 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .board-table .board-col-date {
        width: 68px;
        padding: 8px 2px;
        font-size: 10px;
    }
    .board-table .board-col-views {
        width: 35px;
        padding: 8px 2px;
        font-size: 11px;
    }
    .board-table .board-pin-label {
        font-size: 9px;
        padding: 1px 3px;
    }
    .board-table .board-notice-badge {
        font-size: 9px;
        padding: 1px 3px;
        margin-left: 3px;
    }
    .board-table .board-attach-icon {
        font-size: 11px;
    }
    .board-table .board-comment-badge {
        font-size: 11px;
        margin-left: 2px;
    }
}

.board-notice-badge {
    display: inline-block;
    background: #f59f00;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}

.board-comment-badge {
    color: var(--theme-primary, var(--primary, #667eea));
    font-size: 12px;
    font-weight: 600;
    margin-left: 4px;
}

.board-attach-icon {
    color: var(--theme-text-muted, #999);
    margin-left: 4px;
}

.board-pin-label {
    color: #f59f00;
    font-size: 11px;
    font-weight: 700;
}

/* 게시판 글 상세 */
.board-detail-wrap {
    padding: 0;
}

.board-detail-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--theme-border, var(--border, #e9ecef));
}

.board-detail-header h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.4;
    color: var(--theme-text, #212529);
}

.board-detail-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--theme-text-muted, #999);
    flex-wrap: wrap;
}

.board-detail-author {
    font-weight: 600;
    color: var(--theme-text, #333);
}

.board-detail-body {
    padding: 24px;
    line-height: 1.6;
    font-size: 14px;
    min-height: 120px;
    word-break: break-word;
    color: var(--theme-text, #333);
}

.board-detail-body p {
    margin: 0;
    min-height: 1.6em;
}

.board-detail-body p:empty,
.board-detail-body p br:only-child {
    min-height: 1.6em;
}

.board-detail-body p:last-child {
    margin-bottom: 0;
}

.board-detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.board-detail-body figure.image {
    margin: 12px 0;
}

.board-detail-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
}

.board-detail-body table td,
.board-detail-body table th {
    border: 1px solid var(--theme-border, var(--border, #ddd));
    padding: 8px;
    color: var(--theme-text, #333);
}

.board-inline-img {
    margin: 12px 0;
}

.board-inline-img img {
    max-width: 100%;
    max-height: 600px;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.board-inline-img img:hover {
    opacity: 0.9;
}

.board-detail-footer {
    padding: 12px 24px;
    border-top: 1px solid var(--theme-border, var(--border, #e9ecef));
    text-align: center;
}

/* 검색 하이라이트 */
.board-highlight {
    background: #fff3bf;
    padding: 0 2px;
    border-radius: 2px;
}

/* 하단 게시글 목록 */
.board-detail-postlist {
    margin-top: 28px;
    border-top: 2px solid var(--theme-border, var(--border, #e9ecef));
    padding-top: 4px;
}

/* 게시판 글쓰기 버튼 - 검색창과 높이 통일 */
.btn-board-write {
    height: 32px;
    line-height: 1;
    padding: 0 14px;
    font-size: 12px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
}

#board-inline-toolbar {
    border-bottom: none;
}

/* 페이지네이션 (스케치북 스타일) */
.board-paginate {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 20px 0 24px;
    user-select: none;
    border-top: 1px solid var(--theme-border, var(--border, #eee));
    margin-top: 4px;
}

.board-paginate a,
.board-paginate strong,
.board-paginate span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    font-size: 13px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.15s;
    line-height: 1;
}

/* 페이지 번호 */
.board-pg-num {
    color: var(--theme-text, #555);
}

.board-pg-num:hover {
    background: var(--theme-hover, #f0f2f5);
    color: var(--theme-primary, var(--primary, #4a90d9));
}

/* 현재 페이지 */
.board-pg-current {
    background: var(--theme-primary, var(--primary, #4a90d9));
    color: #fff !important;
    font-weight: 700;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* 네비게이션 (처음/이전/다음/끝) */
.board-pg-nav {
    color: var(--theme-text-muted, #999);
    font-size: 14px;
    font-weight: 600;
}

.board-pg-nav:hover {
    background: var(--theme-hover, #f0f2f5);
    color: var(--theme-primary, var(--primary, #4a90d9));
}

/* 비활성 네비게이션 */
.board-pg-disabled {
    color: var(--theme-border, #ddd) !important;
    cursor: default;
    pointer-events: none;
}

.board-pg-first, .board-pg-last {
    font-size: 13px;
}

.board-pg-prev { margin-right: 4px; }
.board-pg-next { margin-left: 4px; }

/* 댓글 섹션 - velog 스타일 */
.cmt-section {
    border-top: 1px solid var(--border-color, #e9ecef);
    padding: 24px 20px;
}

.cmt-header {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color, #212529);
    margin-bottom: 16px;
}

.cmt-count {
    color: var(--primary, #667eea);
}

/* 댓글 입력 박스 */
.cmt-write-box {
    margin-bottom: 24px;
}

.cmt-write-box textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 70px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.cmt-write-box textarea:focus {
    border-color: var(--primary, #667eea);
}

.cmt-write-btns {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.cmt-write-btns .btn {
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
}

/* 댓글 리스트 */
.cmt-list {
    padding: 0;
}

/* 개별 댓글 */
.cmt-item {
    padding: 16px 0;
    border-top: 1px solid var(--border-color, #f0f0f0);
}

/* 대댓글 - 왼쪽 세로선 + 들여쓰기 */
.cmt-item-reply {
    padding: 16px 0 16px 24px;
    margin-left: 16px;
    border-left: 2px solid var(--theme-border, var(--border, #e0e0e0));
    border-top: none;
}

.cmt-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.cmt-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color, #212529);
}

.cmt-date {
    font-size: 12px;
    color: var(--theme-text-muted, #868e96);
}

.cmt-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color, #333);
    word-break: break-word;
    margin-bottom: 10px;
}

.cmt-body p {
    margin: 0;
    min-height: 1.6em;
}

.cmt-body p:empty,
.cmt-body p br:only-child {
    min-height: 1.6em;
}

.cmt-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.cmt-body video {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.cmt-body ul, .cmt-body ol {
    margin: 0.4em 0;
    padding-left: 1.5em;
}

.cmt-body a {
    color: var(--primary, #667eea);
    text-decoration: underline;
}

.cmt-body hr {
    border: none;
    border-top: 1px solid var(--border-color, #e0e0e0);
    margin: 0.8em 0;
}

.cmt-mention {
    color: var(--primary, #667eea);
    font-weight: 600;
    font-size: 13px;
}

.cmt-actions {
    display: flex;
    gap: 4px;
}

.cmt-actions button {
    background: none;
    border: none;
    color: var(--theme-text-muted, #868e96);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 3px;
    transition: all 0.15s;
}

.cmt-actions button:hover {
    background: var(--theme-hover, #f1f3f5);
    color: var(--theme-primary, var(--primary, #667eea));
}

.cmt-actions .cmt-act-del:hover {
    color: #e74c3c;
    background: #fff0f0;
}

.cmt-deleted-msg {
    color: #adb5bd;
    font-size: 13px;
    font-style: italic;
    padding: 4px 0;
}

.cmt-reply-form-area {
    margin-top: 12px;
}

.cmt-empty {
    padding: 40px 0;
    text-align: center;
    color: #adb5bd;
    font-size: 14px;
}

.cmt-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 16px 0 0;
}

.cmt-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    font-size: 13px;
    color: #666;
    text-decoration: none;
    border-radius: 4px;
    padding: 0 6px;
}

.cmt-pagination a:hover {
    background: #f1f3f5;
}

.cmt-pagination a.active {
    background: var(--primary, #667eea);
    color: #fff;
    font-weight: 600;
}

.status-quota {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-quota-bar {
    width: 120px;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.status-quota-used {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    border-radius: 4px;
    transition: width 0.3s;
}

.status-quota-used.warning {
    background: linear-gradient(90deg, #ff9800, #ffc107);
}

.status-quota-used.danger {
    background: linear-gradient(90deg, #f44336, #e91e63);
}

.status-quota-text {
    white-space: nowrap;
    font-weight: 500;
}

/* 닉시관 진공관 시계 (미니 버전) */
.digital-clock {
    display: none;
}

/* 스타일 1: 미니멀 텍스트 */
.digital-clock.style-1 {
    display: flex; flex-direction: column; align-items: center;
    font-variant-numeric: tabular-nums;
}
.digital-clock.style-1 .clock-time { font-size: 14px; color: #333; font-weight: 600; letter-spacing: 0.5px; }
.digital-clock.style-1 .clock-date { font-size: 11px; color: #999; }

/* 스타일 2: 카드 매칭 */
.digital-clock.style-2 {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(74, 144, 226, 0.08);
    border: 1px solid rgba(74, 144, 226, 0.2);
    border-radius: 20px; padding: 4px 14px;
    font-variant-numeric: tabular-nums;
}
.digital-clock.style-2 .clock-time { font-size: 14px; font-weight: 700; color: #4a90e2; }
.digital-clock.style-2 .clock-sep { color: #ccc; font-size: 11px; }
.digital-clock.style-2 .clock-date { font-size: 11px; color: #888; }

/* 스타일 3: 세그먼트 */
.digital-clock.style-3 {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    background: #f0f4f8; border-radius: 8px; padding: 4px 10px;
    border: 1px solid #d0d9e3;
}
.digital-clock.style-3 .clock-time-row { display: flex; align-items: center; gap: 2px; }
.digital-clock.style-3 .seg-digit {
    width: 18px; height: 24px; background: #fff; border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Courier New', monospace; font-size: 16px; font-weight: 700; color: #4a90e2;
    border: 1px solid #d0d9e3;
}
.digital-clock.style-3 .seg-colon { font-size: 16px; font-weight: 700; color: #4a90e2; padding: 0 1px; }
.digital-clock.style-3 .clock-date { font-size: 10px; color: #999; margin-top: 1px; }

/* 스타일 4: LED 매트릭스 */
.digital-clock.style-4 {
    display: flex; align-items: center; gap: 3px;
    background: #1a2332; border-radius: 8px; padding: 6px 12px;
    border: 1px solid #2a3a4e;
}
.digital-clock.style-4 .clock-time {
    font-family: 'Courier New', monospace; font-size: 18px; font-weight: 700;
    color: #4ade80; text-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
    letter-spacing: 1px;
}
.digital-clock.style-4 .clock-date {
    font-size: 10px; color: #4ade80; opacity: 0.6; margin-left: 8px;
}

/* 스타일 5: 플립 A — 클래식 공항 */
.digital-clock.style-5 {
    display: flex; align-items: center; gap: 3px;
    background: #1a1a1a; border-radius: 6px; padding: 4px 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.05);
}
.digital-clock.style-5 .flip-group { display: flex; gap: 2px; }
.digital-clock.style-5 .flip {
    width: 24px; height: 34px; position: relative;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.digital-clock.style-5 .flip-colon {
    display: flex; flex-direction: column; gap: 8px; padding: 0 3px; justify-content: center;
}
.digital-clock.style-5 .flip-dot { width: 4px; height: 4px; border-radius: 50%; background: #888; }
.digital-clock.style-5 .clock-date {
    font-size: 9px; color: #888; margin-left: 6px; white-space: nowrap;
    font-family: 'Helvetica Neue', sans-serif;
}

/* 스타일 6: 플립 B — 메탈릭 프리미엄 */
.digital-clock.style-6 {
    display: flex; align-items: center; gap: 3px;
    background: linear-gradient(180deg, #2c2c2c 0%, #1a1a1a 100%);
    border-radius: 8px; padding: 5px 10px;
    border: 1px solid #3a3a3a;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
.digital-clock.style-6 .flip-group { display: flex; gap: 2px; }
.digital-clock.style-6 .flip {
    width: 26px; height: 36px; position: relative;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.digital-clock.style-6 .flip-colon {
    display: flex; flex-direction: column; gap: 8px; padding: 0 3px; justify-content: center;
}
.digital-clock.style-6 .flip-dot { width: 5px; height: 5px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 4px rgba(245,158,11,0.5); }
.digital-clock.style-6 .clock-date {
    font-size: 9px; color: #999; margin-left: 8px; white-space: nowrap; letter-spacing: 0.5px;
}

/* 스타일 7: 플립 C — 컴팩트 */
.digital-clock.style-7 {
    display: flex; align-items: center; gap: 2px;
    background: #222; border-radius: 10px; padding: 4px 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.digital-clock.style-7 .flip-group { display: flex; gap: 1px; }
.digital-clock.style-7 .flip {
    width: 20px; height: 28px; position: relative;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.digital-clock.style-7 .flip-colon {
    display: flex; flex-direction: column; gap: 6px; padding: 0 2px; justify-content: center;
}
.digital-clock.style-7 .flip-dot { width: 3px; height: 3px; border-radius: 50%; background: #777; }
.digital-clock.style-7 .clock-date { font-size: 8px; color: #777; margin-left: 5px; white-space: nowrap; }

/* 스타일 8: 플립 D — 화이트 에어포트 */
.digital-clock.style-8 {
    display: flex; align-items: center; gap: 3px;
    background: #e8e8e8; border-radius: 6px; padding: 4px 8px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.digital-clock.style-8 .flip-group { display: flex; gap: 2px; }
.digital-clock.style-8 .flip {
    width: 22px; height: 32px; position: relative;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.digital-clock.style-8 .flip-colon {
    display: flex; flex-direction: column; gap: 7px; padding: 0 2px; justify-content: center;
}
.digital-clock.style-8 .flip-dot { width: 4px; height: 4px; border-radius: 50%; background: #999; }
.digital-clock.style-8 .clock-date { font-size: 9px; color: #888; margin-left: 6px; white-space: nowrap; }

/* 스타일 9: 글래스모피즘 */
.digital-clock.style-9 {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 10px; padding: 4px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.digital-clock.style-9 .clock-time { font-size: 16px; font-weight: 700; color: #333; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.digital-clock.style-9 .clock-date { font-size: 10px; color: #888; }

/* 스타일 10: 닉시관 미니 */
.digital-clock.style-10 {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 2px 8px; background: #0a0a0a; border-radius: 6px;
}
.digital-clock.style-10 .clock-time-row { display: flex; align-items: center; gap: 2px; }
.digital-clock.style-10 .nixie-tube {
    width: 16px; height: 22px;
    background: linear-gradient(180deg, #1a1816, #0d0c0a);
    border-radius: 3px; border: 1px solid #2a2520;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: Georgia, serif; font-size: 14px; font-style: italic; color: #00bfff;
}
.digital-clock.style-10 .nixie-colon { display: flex; flex-direction: column; gap: 4px; padding: 0 1px; }
.digital-clock.style-10 .nixie-dot { width: 3px; height: 3px; border-radius: 50%; background: #00bfff; }
.digital-clock.style-10 .clock-date { font-size: 9px; color: #00bfff; opacity: 0.6; }

/* 플립 애니메이션 공통 — Web Animations API 호환 */
.digital-clock .flip {
    position: relative;
    contain: layout style paint;
    transform: translate3d(0,0,0);
}
.digital-clock .flip-half {
    position: absolute; left: 0; right: 0;
    height: 50%; overflow: hidden;
    transform: translate3d(0,0,0);
}
.digital-clock .flip-half .flip-num,
.digital-clock .flip-flap .flip-num {
    position: absolute; left: 0; right: 0;
    height: 200%;
    display: flex; align-items: center; justify-content: center;
}
.digital-clock .flip-half.upper { top: 0; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; z-index: 1; }
.digital-clock .flip-half.upper .flip-num { top: 0; }
.digital-clock .flip-half.lower { bottom: 0; border-radius: inherit; border-top-left-radius: 0; border-top-right-radius: 0; z-index: 1; }
.digital-clock .flip-half.lower .flip-num { bottom: 0; }

/* 앞판: 이전 숫자 상단 → 아래로 접힘 */
.digital-clock .flip-flap {
    position: absolute; left: 0; right: 0;
    height: 50%; overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}
.digital-clock .flip-flap.front {
    top: 0; z-index: 5;
    transform-origin: 50% 100%;
    border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.digital-clock .flip-flap.front .flip-num { top: 0; }
/* 뒷판: 새 숫자 하단 → 위로 펼침 */
.digital-clock .flip-flap.back {
    bottom: 0; z-index: 5;
    transform-origin: 50% 0%;
    transform: rotateX(90deg);
    border-radius: inherit; border-top-left-radius: 0; border-top-right-radius: 0;
}
.digital-clock .flip-flap.back .flip-num { bottom: 0; }

/* === 스타일별 플립 색상 === */

/* 스타일5 (플립A) */
.digital-clock.style-5 .flip-half.upper { background: linear-gradient(180deg, #3a3a3a, #2e2e2e); border-bottom: 1px solid rgba(0,0,0,0.6); }
.digital-clock.style-5 .flip-half.lower { background: linear-gradient(180deg, #2a2a2a, #222); }
.digital-clock.style-5 .flip-flap.front { background: linear-gradient(180deg, #3a3a3a, #2e2e2e); border-bottom: 1px solid rgba(0,0,0,0.6); }
.digital-clock.style-5 .flip-flap.back  { background: linear-gradient(180deg, #2a2a2a, #222); }
.digital-clock.style-5 .flip-num {
    font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
    font-size: 24px; font-weight: 800; color: #f0f0f0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* 스타일6 (플립B) */
.digital-clock.style-6 .flip-half.upper { background: linear-gradient(180deg, #444, #383838); border-bottom: 1.5px solid rgba(0,0,0,0.6); }
.digital-clock.style-6 .flip-half.lower { background: linear-gradient(180deg, #333, #282828); }
.digital-clock.style-6 .flip-flap.front { background: linear-gradient(180deg, #444, #383838); border-bottom: 1.5px solid rgba(0,0,0,0.6); }
.digital-clock.style-6 .flip-flap.back  { background: linear-gradient(180deg, #333, #282828); }
.digital-clock.style-6 .flip-num {
    font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
    font-size: 26px; font-weight: 900; color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* 스타일7 (플립C) */
.digital-clock.style-7 .flip-half.upper { background: linear-gradient(180deg, #3d3d3d, #303030); border-bottom: 1px solid rgba(0,0,0,0.6); }
.digital-clock.style-7 .flip-half.lower { background: linear-gradient(180deg, #2d2d2d, #252525); }
.digital-clock.style-7 .flip-flap.front { background: linear-gradient(180deg, #3d3d3d, #303030); border-bottom: 1px solid rgba(0,0,0,0.6); }
.digital-clock.style-7 .flip-flap.back  { background: linear-gradient(180deg, #2d2d2d, #252525); }
.digital-clock.style-7 .flip-num {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 19px; font-weight: 800; color: #eee;
}
/* 스타일8 (플립D) */
.digital-clock.style-8 .flip-half.upper { background: linear-gradient(180deg, #fff, #f5f5f5); border-bottom: 1px solid #ccc; }
.digital-clock.style-8 .flip-half.lower { background: linear-gradient(180deg, #f0f0f0, #e8e8e8); }
.digital-clock.style-8 .flip-flap.front { background: linear-gradient(180deg, #fff, #f5f5f5); border-bottom: 1px solid #ccc; }
.digital-clock.style-8 .flip-flap.back  { background: linear-gradient(180deg, #f0f0f0, #e8e8e8); }
.digital-clock.style-8 .flip-num {
    font-family: 'Helvetica Neue', 'Arial Black', sans-serif;
    font-size: 22px; font-weight: 900; color: #222;
}
@media (max-width: 1024px) {
    .digital-clock { display: none !important; }
    
    .header-left {
        gap: 4px;
    }
    .header-right {
        gap: 4px;
    }
    .header-right .btn-icon {
        width: 32px;
        height: 32px;
    }
    .header-right .btn-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .notify-dropdown {
        right: 10px !important;
        left: 10px !important;
        min-width: auto;
        max-width: none;
    }
}

.logo {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo .header-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.search-box {
    display: flex;
    align-items: center;
    background: var(--bg);
    border-radius: 20px;
    padding: 5px 15px;
}

.search-hint {
    font-size: 10px;
    color: #999;
    text-align: center;
    padding: 2px 0 0;
    line-height: 1.2;
}

.search-box input {
    border: none;
    background: none;
    padding: 8px;
    width: 300px;
    font-size: 14px;
}

.search-box input:focus { outline: none; }

.search-box button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

#user-name {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(74, 144, 226, 0.08);
    border: 1px solid rgba(74, 144, 226, 0.2);
    border-radius: 20px;
    padding: 4px 12px 4px 8px;
    font-size: 13px;
}
#user-name .welcome-icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
#user-name .welcome-name { font-weight: 600; color: var(--primary); }
#user-name .welcome-msg { color: var(--secondary); font-size: 11px; }

/* 메인 레이아웃 */
#main-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* 헤더 고정 */
.header {
    flex-shrink: 0;
}

.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* 사이드바 */
.sidebar {
    width: 250px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    display: flex;
    flex-direction: column;
}

.sidebar-section {
    margin-bottom: 25px;
}

.sidebar-main {
    flex: 1;
}

.sidebar-divider {
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin: 20px 0 10px 0;
}

.trash-menu {
    margin-top: 5px;
    margin-bottom: 5px;
}

.sidebar-quota {
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: auto;
}

.sidebar-section h3 {
    font-size: 12px;
    text-transform: uppercase;
    color: #95a5a6;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.sidebar-section h3.section-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0 -12px 10px -12px;
    transition: color 0.2s, background 0.2s;
    border-radius: var(--radius);
}

.sidebar-section h3.section-toggle:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.sidebar-section h3.section-toggle .toggle-icon {
    font-size: 12px;
    font-weight: bold;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

.menu-list.collapsible {
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 5px;
    border-left: 2px solid rgba(255,255,255,0.1);
    margin-left: 8px;
}

.menu-group-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #3498db;
    padding: 12px 12px 6px 12px;
    letter-spacing: 1px;
    margin-top: 8px;
    font-weight: 600;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.menu-group-label:first-child {
    margin-top: 0;
    padding-top: 8px;
    border-top: none;
}

.storage-list, .menu-list {
    list-style: none;
}

.storage-list li, .menu-list li {
    margin-bottom: 5px;
}

.storage-list a, .menu-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: var(--radius);
    transition: background 0.2s;
    font-size: 14px;
}

.storage-list a:hover, .menu-list a:hover { background: rgba(255,255,255,0.1); }
/* 선택 상태: 스토리지와 통일 - 연한 파랑 배경 + 진한 파랑 텍스트 (읽기 좋음) */
.storage-list a.active, .menu-list li.active:not(.favorite-item):not(.recent-file-item) > a, .board-sidebar-item.active { background: #e3f2fd; color: #4a90d9; }
/* 포커스 검은 테두리 제거 — active 파란색 배경이 이미 선택 상태를 나타냄 */
.storage-list a:focus, .menu-list a:focus { outline: none; }
.storage-list a:focus-visible, .menu-list a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.storage-divider {
    padding: 15px 15px 8px 15px;
    margin-top: 10px;
    font-size: 11px;
    text-transform: uppercase;
    color: #3498db;
    letter-spacing: 1px;
    font-weight: 600;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.storage-divider:first-child {
    margin-top: 0;
    border-top: none;
}

.storage-icon { font-size: 18px; flex-shrink: 0; align-self: flex-start; margin-top: 1px; }

.storage-name {
    min-width: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    line-height: 1.3;
}

/* 스토리지별 용량 표시 (미니) */
.storage-list a {
    flex-wrap: wrap;
}

.storage-quota-mini {
    width: 100%;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quota-bar-mini {
    flex: 1;
    height: 4px;
    background: var(--sidebar-text);
    opacity: 0.3;
    border-radius: 2px;
    overflow: hidden;
}

.quota-used-mini {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    border-radius: 2px;
    transition: width 0.3s;
    opacity: 1;
}

.quota-used-mini.warning {
    background: linear-gradient(90deg, #ff9800, #ffc107);
}

.quota-used-mini.danger {
    background: linear-gradient(90deg, #f44336, #e91e63);
}

.quota-text-mini {
    font-size: 10px;
    color: var(--sidebar-text);
    opacity: 0.8;
    white-space: nowrap;
}

/* 파일 영역 */
.file-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* 툴바 */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 20px;
    background: white;
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: auto;
    gap: 15px;
    flex-wrap: wrap;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.breadcrumb {
    font-size: 14px;
    line-height: 1.8;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.breadcrumb a,
.breadcrumb span {
    display: inline;
}

.breadcrumb .breadcrumb-sep {
    margin: 0 3px;
    color: var(--secondary);
    white-space: nowrap;
}

#board-inline-breadcrumb {
    border-bottom: none !important;
}

.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    word-break: break-all;
}

.breadcrumb a:hover { text-decoration: underline; }

.breadcrumb span { color: var(--secondary); }

/* 파일 목록 */
.file-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    padding: 20px;
    background: var(--bg);
    contain: layout style;
    /* 모바일 롱프레스 기본 동작 차단 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.empty-msg {
    text-align: center;
    color: var(--secondary);
    padding: 60px;
    font-size: 16px;
    grid-column: 1 / -1;
    width: 100%;
}

/* 그리드 뷰 */
.file-list.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    align-content: start;
}

.file-list.grid-view .file-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
    background: white;
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    min-width: 0;
    position: relative;
    contain: layout style paint;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* 모바일 롱프레스/드래그 기본 동작 차단 */
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.file-list.grid-view .file-item:hover {
    background: #e3f2fd;
}

.file-list.grid-view .file-item.selected {
    background: #bbdefb;
    box-shadow: 0 0 0 2px var(--primary);
}

/* ==== vscode-icons 기반 외부 SVG 아이콘 공통 스타일 ==== */
/* <img class="fs-file-icon-img" src="assets/file-icons/xxx.svg"> */
/* object-fit: contain으로 비율 유지, display:block으로 인라인 gap 제거 */
img.fs-file-icon-img {
    display: block;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* 압축 파일 아이콘 (공용 archive.svg + 확장자 라벨 오버레이) */
/* <span class="fs-archive-icon"><img><span class="archive-ext">ZIP</span></span> */
/* 라벨 위치는 :root의 CSS 변수(--fs-label-*)로 제어 - 9개 위치 중 하나 */
/*   관리자가 아이콘 관리에서 설정 → body 인라인 스타일로 주입 */
.fs-archive-icon {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.fs-archive-icon > img.fs-file-icon-img {
    width: 100%;
    height: 100%;
}
.fs-archive-icon .archive-ext {
    position: absolute;
    /* 4개 위치 변수: 사용되는 2개만 값이 있고 나머지는 auto */
    top: var(--fs-label-top, auto);
    right: var(--fs-label-right, auto);
    bottom: var(--fs-label-bottom, auto);
    left: var(--fs-label-left, auto);
    transform: var(--fs-label-transform, none);
    
    background: #ffd54f;
    color: #333;
    font-size: 0.22em;       /* 컨테이너 크기에 비례 */
    font-weight: bold;
    line-height: 1;
    padding: 0.15em 0.35em;
    border-radius: 0.2em;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.02em;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* 자막 파일 아이콘 (공용 subtitle.svg + 확장자 라벨 오버레이) */
/* <span class="fs-subtitle-icon"><img><span class="subtitle-ext">SRT</span></span> */
.fs-subtitle-icon {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.fs-subtitle-icon > img.fs-file-icon-img {
    width: 100%;
    height: 100%;
}
.fs-subtitle-icon .subtitle-ext {
    position: absolute;
    /* 압축 아이콘과 동일한 CSS 변수 사용 (일관성) */
    top: var(--fs-label-top, auto);
    right: var(--fs-label-right, auto);
    bottom: var(--fs-label-bottom, auto);
    left: var(--fs-label-left, auto);
    transform: var(--fs-label-transform, none);
    
    background: #FFD54F;    /* 노란색 */
    color: #1A237E;         /* 남색 */
    font-size: 0.22em;
    font-weight: bold;
    line-height: 1;
    padding: 0.15em 0.35em;
    border-radius: 0.2em;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.02em;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* 라벨 위치 기본값 (top-right) — JS가 덮어쓰기 전 fallback */
:root {
    --fs-label-top: 4%;
    --fs-label-right: 4%;
    --fs-label-bottom: auto;
    --fs-label-left: auto;
    --fs-label-transform: none;
}

.file-list.grid-view .file-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    line-height: 48px;
}

.file-list.grid-view .file-icon svg,
.file-list.grid-view .file-icon img.fs-file-icon-img {
    width: 48px;
    height: 48px;
}

/* 썸네일 스타일 */
.file-list.grid-view .file-thumbnail {
    width: 100%;
    height: 100px;
    margin-bottom: 8px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    position: relative;
}

.file-list.grid-view .file-thumbnail .thumb-placeholder {
    font-size: 42px;
    line-height: 1;
    opacity: 0.6;
}

.file-list.grid-view .file-thumbnail .thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    transition: opacity 0.2s ease;
}

.file-list.grid-view .file-thumbnail.thumb-loaded {
    background: transparent;
}

.file-list.grid-view .file-thumbnail.thumb-loaded .thumb-img {
    opacity: 1;
}

.file-list.grid-view .file-name {
    font-size: 13px;
    line-height: 1.4;
    word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
    text-align: center;
    white-space: normal;
}

.file-list.grid-view .file-size,
.file-list.grid-view .file-date {
    display: none;
}

/* file-item 자식 요소 선택/드래그 방지 */
.file-item * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}

/* 키보드 포커스 스타일 */
.file-item:focus,
.file-item:focus-within,
.file-list:focus,
.file-list:focus-within {
    outline: none !important;
}

.file-item:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--primary);
}

.file-item[tabindex]:focus,
.file-list[tabindex]:focus {
    outline: none !important;
}

#file-list:focus {
    outline: none !important;
}

.file-item img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* 리스트 뷰 */
.file-list.list-view {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.file-list.list-view .file-item {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    background: white;
    cursor: pointer;
    gap: 15px;
    border-bottom: 1px solid #f0f0f0;
    contain: layout style paint;
    /* 모바일 롱프레스/드래그 기본 동작 차단 */
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    user-drag: none;
}

.file-list.list-view .file-item:hover { background: #e3f2fd; }
.file-list.list-view .file-item.selected { background: #bbdefb; }

.file-list.list-view .file-icon { 
    width: 24px; 
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 24px;
}

.file-list.list-view .file-icon svg,
.file-list.list-view .file-icon img.fs-file-icon-img {
    width: 24px;
    height: 24px;
}

.file-list.list-view .file-name-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.file-list.list-view .file-name-wrap .file-name {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
}

.file-list.list-view .file-name {
    flex: 1;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-list.list-view .file-size {
    width: 100px;
    text-align: left;
    color: var(--secondary);
    font-size: 13px;
    flex-shrink: 0;
}

.file-list.list-view .file-date {
    width: 170px;
    color: var(--secondary);
    font-size: 13px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-list.list-view .file-type {
    width: 100px;
    color: var(--secondary);
    font-size: 13px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 리스트 뷰 컬럼 헤더 (윈도우 탐색기 스타일, 파일 목록 바깥 배치) */
#file-list-header {
    display: flex;
    align-items: center;
    padding: 0 15px;
    background: var(--bg, #fafafa);
    border-bottom: 1px solid var(--border, #e0e0e0);
    gap: 15px;
    font-size: 12px;
    color: var(--secondary, #666);
    user-select: none;
}

/* 체크박스/아이콘 자리 — file-item과 동일한 크기 */
#file-list-header .fh-icon {
    width: 24px;
    height: 1px;
    flex-shrink: 0;
}
#file-list-header .fh-check {
    width: 18px;
    height: 1px;
    flex-shrink: 0;
    margin-right: 10px;
}

.file-list-header .col-header {
    cursor: pointer;
    white-space: nowrap;
    padding: 4px 0;
    transition: color 0.15s;
    font-size: 12px;
    line-height: 1.2;
}

.file-list-header .col-header:hover {
    color: var(--primary, #1976d2);
}

.file-list-header .col-header.active {
    color: var(--primary, #1565c0);
    font-weight: 600;
}

.file-list-header .file-name-col { flex: 1; min-width: 80px; }
.file-list-header .file-date-col { width: 170px; flex-shrink: 0; position: relative; }
.file-list-header .file-type-col { width: 100px; flex-shrink: 0; position: relative; }
.file-list-header .file-size-col { width: 100px; flex-shrink: 0; }

/* 컬럼 리사이즈 핸들 */
.col-resize {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
}
.col-resize:hover,
.col-resize.dragging {
    background: var(--primary, #1976d2);
    opacity: 0.3;
}
body.col-resizing {
    cursor: col-resize !important;
    user-select: none !important;
}
body.col-resizing * {
    cursor: col-resize !important;
}

/* 전송 진행바 */
.upload-progress,
.transfer-progress {
    position: fixed;
    top: 135px;
    right: 20px;
    background: white;
    padding: 15px 20px;
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    width: 380px;
    z-index: 7500;
}

/* 모바일: 사이드바 열릴 때 진행바를 뒤로 */
body.sidebar-open .upload-progress,
body.sidebar-open .transfer-progress {
    z-index: 3998;
}

/* 모달 열릴 때 진행바를 뒤로 */
body.modal-open .transfer-progress,
body.modal-open .upload-progress {
    z-index: 6999;
}

/* 휴지통 모달에서 삭제/복구 시 진행바를 앞으로 */
body.modal-open.trash-modal-active .transfer-progress {
    z-index: 7500;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--primary);
}

.progress-count {
    background: var(--light);
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--dark);
    font-weight: 500;
}

.progress-info {
    margin-bottom: 10px;
    font-size: 13px;
}

#upload-filename,
#transfer-filename {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dark);
}

.progress-bar {
    height: 10px;
    background: var(--border);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #764ba2);
    width: 0;
    transition: width 0.3s;
    border-radius: 5px;
}

.progress-detail {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--dark);
    margin-bottom: 5px;
}

#transfer-percent {
    font-weight: 600;
}

#transfer-speed {
    color: var(--primary);
    font-weight: 500;
}

.progress-stats {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--secondary);
}

#transfer-eta {
    color: #e67e22;
}

/* 업로드 세션 리스트 (기존 진행바 내) */
.upload-sessions-list {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--light);
    margin-bottom: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.upload-session-item {
    padding: 14px 15px;
    border-bottom: 1px solid var(--border);
}

.upload-session-item:last-child {
    border-bottom: none;
}

.upload-session-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.upload-session-count {
    font-size: 11px;
    color: var(--primary);
    background: rgba(102, 126, 234, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 6px;
    display: inline-block;
}

.upload-session-name {
    font-size: 12px;
    color: var(--dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 8px;
}

.upload-session-cancel {
    background: transparent;
    border: none;
    color: var(--secondary);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 3px;
}

.upload-session-cancel:hover {
    background: rgba(0,0,0,0.1);
    color: var(--danger);
}

.upload-session-progress {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.upload-session-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #764ba2);
    border-radius: 4px;
    transition: width 0.2s;
}

.upload-session-item.completed .upload-session-fill {
    background: var(--success);
}

.upload-session-item.error .upload-session-fill {
    background: var(--danger);
}

.upload-session-info {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--secondary);
    margin-bottom: 2px;
}

.upload-session-percent {
    font-weight: 600;
    color: var(--dark);
}

.upload-session-speed {
    color: var(--primary);
    font-weight: 500;
}

.upload-session-stats {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--secondary);
}

.upload-session-eta {
    color: #e67e22;
}

.upload-session-item.completed .upload-session-percent {
    color: var(--success);
}

.upload-session-item.error .upload-session-percent {
    color: var(--danger);
}

/* 모달 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 7000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

}

.modal {
    background: white;
    border-radius: var(--radius);
    width: 100%;
    max-width: 450px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    position: relative;
}

.modal .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.modal .modal-footer {
    flex-shrink: 0;
}

.modal .modal-header {
    flex-shrink: 0;
}

.modal.draggable {
    position: fixed;
    margin: 0;
}

.modal-lg { max-width: 850px; }
.modal-md { max-width: 500px; }

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border);
    cursor: move;
    user-select: none;
    background: var(--primary);
    color: var(--modal-header-text, white);
    flex-shrink: 0;
    overflow: hidden;
}

.modal-header h2 {
    font-size: 18px;
    color: var(--modal-header-text, white);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#preview-title {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-preview .modal-header {
    padding: 7px 14px;
}

.modal-preview .modal-header h2 {
    font-size: 14px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--modal-header-text, white);
    opacity: 0.8;
    flex-shrink: 0;
    margin-left: 8px;
}

.modal-close:hover {
    opacity: 1;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

}

/* 모달 내 직접 입력 박스 */
.modal-body > input[type="text"],
.modal-body > input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    box-sizing: border-box;
}

.modal-body > input[type="text"]:focus,
.modal-body > input[type="password"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* 폼 요소 */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
}

.form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.form-row label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

/* 데이터 테이블 */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: fixed;
}

.data-table th,
.data-table td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 사용자 관리 테이블 열 너비 */
#users-table th:nth-child(1),
#users-table td:nth-child(1) { width: 15%; } /* 아이디 */
#users-table th:nth-child(2),
#users-table td:nth-child(2) { width: 15%; } /* 이름 */
#users-table th:nth-child(3),
#users-table td:nth-child(3) { width: 10%; } /* 역할 */
#users-table th:nth-child(4),
#users-table td:nth-child(4) { width: 10%; } /* 용량 */
#users-table th:nth-child(5),
#users-table td:nth-child(5) { width: 8%; } /* 상태 */
#users-table th:nth-child(6),
#users-table td:nth-child(6) { width: 12%; } /* 가입일 */
#users-table th:nth-child(7),
#users-table td:nth-child(7) { width: 15%; } /* 마지막 로그인 */
#users-table th:nth-child(8),
#users-table td:nth-child(8) { width: 15%; white-space: nowrap; overflow: visible; } /* 관리 */

.data-table th {
    background: var(--light);
    font-weight: 600;
}

.data-table tr:hover { background: var(--light); }

.info-table td {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.info-table td:first-child {
    font-weight: 500;
    width: 100px;
}

/* 공유 */
.share-filename {
    background: var(--light);
    padding: 10px;
    border-radius: var(--radius);
    word-break: break-all;
}

.share-result { margin-top: 20px; }
.share-existing-info { margin-top: 12px; padding: 16px; background: var(--bg-secondary, #f8f9fa); border-radius: 8px; border: 1px solid var(--border-color, #eee); }
.share-existing-info .detailed-info-table { font-size: 14px; width: 100%; }
.share-existing-info .detailed-info-table th { width: 90px; padding: 8px 10px; }
.share-existing-info .detailed-info-table td { padding: 8px 10px; }
.share-existing-info .btn { font-size: 13px !important; padding: 6px 14px !important; }

.share-url-box {
    display: flex;
    gap: 10px;
}

.share-url-box input {
    flex: 1;
}

/* 권한 목록 */
.perm-list {
    max-height: 200px;
    overflow-y: auto;
}

.perm-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: var(--light);
    border-radius: var(--radius);
    margin-bottom: 8px;
}

.perm-item .perm-badges { display: flex; gap: 5px; }

.perm-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    background: var(--primary);
    color: white;
}

/* 컨텍스트 메뉴 */
.context-menu {
    position: fixed;
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 6000;
    min-width: 180px;
    overflow: visible;
    overflow-y: auto;
}

.context-menu ul { list-style: none; }

.context-menu li {
    padding: 9px 15px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}

.context-menu li:hover { background: var(--light); }

.context-menu li.danger { color: var(--danger); }

.context-menu li.divider {
    height: 1px;
    background: var(--border);
    padding: 0;
    margin: 5px 0;
}

/* 토스트 */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--dark);
    color: white;
    padding: 12px 25px;
    border-radius: 30px;
    font-size: 14px;
    opacity: 0;
    transition: all 0.3s ease;
    /* 모든 모달(서브모달 100003 포함)보다 위에 표시 */
    z-index: 1000000;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }
.toast.info { background: #17a2b8; }
.toast.warning { background: #f0ad4e; }

/* 승인 대기 알림 */
.pending-notification {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.35);
    z-index: 2500;
    animation: slideUp 0.4s ease;
    color: #fff;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.pending-icon {
    font-size: 20px;
    background: rgba(255,255,255,0.2);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pending-text {
    color: rgba(255,255,255,0.95);
    font-size: 13px;
}

.pending-text strong {
    color: #fff;
    font-size: 15px;
}

.pending-btn {
    background: #fff;
    color: #667eea;
    border: none;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pending-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.pending-close {
    background: rgba(255,255,255,0.2);
    border: none;
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 6px;
    transition: background 0.2s;
}

.pending-close:hover {
    background: rgba(255,255,255,0.3);
    color: #fff;
}

/* 헤더 알림 벨 */
.header-notify-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.header-notify-wrap .btn-icon {
    position: relative;
    font-size: 18px;
}

.notify-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    font-style: normal;
    animation: notifyPulse 2s ease-in-out infinite;
}

.menu-badge {
    color: #3b82f6;
    font-size: 12px;
    font-weight: 500;
}

@keyframes notifyPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.notify-dropdown {
    display: none;
    position: fixed;
    top: 52px;
    right: 80px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    min-width: 320px;
    max-width: 400px;
    z-index: 2147483647 !important;
    overflow: visible;
    isolation: isolate;
}

.notify-dropdown.open {
    display: block;
    animation: notifyDropIn 0.2s ease;
}

@keyframes notifyDropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.notify-dropdown-header {
    padding: 12px 16px;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

.notify-dropdown-body {
    max-height: 300px;
    overflow-y: auto;
}

.notify-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f5f5f5;
}

.notify-item:last-child { border-bottom: none; }
.notify-item:hover { background: #f8f9fa; }

.notify-item-icon {
    font-size: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notify-item-content { flex: 1; min-width: 0; }

.notify-item-text {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 모바일: 긴 알림은 2줄까지 허용 */
@media (max-width: 1024px) {
    .notify-item-text {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

.notify-item-text strong { color: #4a90e2; }

.notify-item-action {
    background: #4a90e2;
    color: #fff;
    border: none;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.notify-item-action:hover { background: #357abd; }

.notify-empty {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

/* 게시판 모드: 파일 관련 요소 숨기기 */
body.board-mode .file-area > .toolbar,
body.board-mode #file-list,
body.board-mode #search-filters,
body.board-mode #search-result-header,
body.board-mode #search-pagination,
body.board-mode #transfer-progress {
    display: none !important;
}

/* 드래그 앤 드롭 */
.file-area.dragover {
    background: rgba(74, 144, 217, 0.1);
    border: 2px dashed var(--primary);
}

/* 반응형 */
@media (max-width: 1024px) {
    .sidebar { 
        position: fixed;
        left: -250px;
        height: 100%;
        z-index: 1500;
        transition: left 0.3s;
    }
    
    .sidebar.open { left: 0; }
    
    .header-center { display: none; }
    
    .status-bar { padding: 4px 10px; font-size: 11px; }
    .status-bar .status-left { display: flex !important; }
    .status-bar .status-right { display: none !important; }
    .status-quota-bar { width: 80px; }
    
    .file-list.grid-view {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    
    .modal { margin: 10px; max-width: calc(100% - 20px); }
}

/* ========== 정렬 드롭다운 ========== */
.sort-dropdown {
    position: relative;
    display: inline-block;
}

.sort-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 185px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 7600;
    padding: 8px 0;
    margin-top: 4px;
}

.sort-option {
    padding: 9px 15px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 13px;
    transition: background 0.2s;
}

.sort-option:hover {
    background: #f5f5f5;
}

.sort-option.active {
    background: #e3f2fd;
    color: #1976d2;
}

/* ========== 드래그앤드롭 ========== */
.file-item.dragging {
    opacity: 0.5;
}

.file-item.drag-over {
    background: #e3f2fd;
    border: 2px dashed #2196f3;
    border-radius: 8px;
}

/* ========== 상세 정보 모달 ========== */
.detailed-info-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.detailed-info-table th,
.detailed-info-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.detailed-info-table th {
    width: 80px;
    font-weight: 500;
    color: #666;
    background: #f9f9f9;
    white-space: nowrap;
}

.detailed-info-table td {
    word-break: break-all;
    overflow-wrap: break-word;
}

.exif-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid #e0e0e0;
}

.exif-section h4 {
    margin: 0 0 10px 0;
    color: #333;
}
/* ========== 로그인 유지 체크박스 ========== */
.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 15px 0;
    font-size: 14px;
    cursor: pointer;
}

.remember-me input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

.remember-me span {
    line-height: 18px;
}

/* ========== 설정 탭 ========== */
.modal-large {
    max-width: 700px;
}

.settings-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
    color: #666;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}

.tab-btn:hover {
    background: #f5f5f5;
}

.tab-btn.active {
    background: #e3f2fd;
    color: #1976d2;
    font-weight: 500;
}

.tab-content {
    min-height: 300px;
}

/* ========== 세션 관리 ========== */
.session-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.session-header h4 {
    margin: 0;
}

.sessions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.session-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.session-item.current {
    background: #e3f2fd;
    border-color: #90caf9;
}

.session-info {
    flex: 1;
}

.session-device {
    font-weight: 500;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-details {
    font-size: 13px;
    color: #666;
    display: flex;
    gap: 15px;
}

.badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.badge-current {
    background: #4caf50;
    color: white;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

/* ========== 로그인 로그 ========== */
.login-logs-list {
    max-height: 400px;
    overflow-y: auto;
}

.login-logs-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: 13px;
}

.login-logs-table th,
.login-logs-table td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
}

.login-logs-table th {
    background: #f5f5f5;
    font-weight: 500;
    position: sticky;
    top: 0;
}

.login-logs-table th:last-child,
.login-logs-table td:last-child {
    text-align: center;
    min-width: 60px;
}

.login-logs-table tr.fail {
    background: #ffebee;
}

.login-logs-table tr.success:hover,
.login-logs-table tr.fail:hover {
    background: #f5f5f5;
}

/* 로그인 기록 테이블 래퍼 - 가로 스크롤 */
.login-logs-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========== 버튼 추가 스타일 ========== */
.btn-danger {
    background: #f44336;
    color: white;
    border: none;
}

.btn-danger:hover {
    background: #d32f2f;
}

.loading {
    text-align: center;
    padding: 20px;
    color: #666;
}

/* ========== 관리자 모달 스타일 ========== */
.badge-success {
    background: #4caf50;
    color: white;
}

.badge-danger {
    background: #f44336;
    color: white;
}

.badge-info {
    background: #2196f3;
    color: white;
}

.badge-secondary {
    background: #9e9e9e;
    color: white;
}

.badge-warning {
    background: #ff9800;
    color: white;
}

.info-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.info-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.info-section h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #333;
}

/* 서버 리소스 모니터 */
.resource-monitor {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 20px !important;
    margin-bottom: 20px;
    color: #fff;
}

.resource-monitor h3 {
    color: #fff !important;
    margin-bottom: 15px;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.resource-card {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 15px;
    backdrop-filter: blur(10px);
}

.resource-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.resource-icon {
    font-size: 20px;
}

.resource-title {
    font-weight: 600;
    flex: 1;
}

.resource-value {
    font-size: 18px;
    font-weight: 700;
}

.resource-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.resource-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.resource-info {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    opacity: 0.9;
}

.resource-details {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 13px;
}

.resource-details code {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

@media (max-width: 600px) {
    .resource-grid {
        grid-template-columns: 1fr;
    }
    
    .resource-details {
        flex-direction: column;
        gap: 8px;
    }
}

/* 보안 체크리스트 */
.security-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.security-item {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.security-item.ok {
    background: #dcfce7;
    color: #166534;
}

.security-item.warn {
    background: #fef3c7;
    color: #92400e;
}

.security-item.error {
    background: #fee2e2;
    color: #991b1b;
}

/* 보안 체크리스트 그리드 */
.security-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.security-card {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    transition: all 0.2s;
}

.security-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.security-card.ok {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #86efac;
}

.security-card.warn {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #fcd34d;
}

.security-card.error {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #f87171;
}

.security-icon {
    font-size: 24px;
    margin-bottom: 6px;
}

.security-label {
    font-weight: 600;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 4px;
}

.security-desc {
    font-size: 11px;
    color: #6b7280;
}

@media (max-width: 1024px) {
    .security-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .security-grid {
        grid-template-columns: 1fr;
    }
}

/* 네트워크 카드 */
.network-card {
    background: rgba(255, 255, 255, 0.2) !important;
}

.network-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.net-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.net-label {
    font-size: 11px;
    opacity: 0.9;
}

.net-value {
    font-size: 16px;
    font-weight: 700;
}

.network-speed {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 12px;
}

/* 실시간 모니터 컨트롤 */
.realtime-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.rt-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.rt-select {
    padding: 4px 8px;
    border-radius: 6px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

.rt-select option {
    background: #333;
    color: #fff;
}

.rt-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.rt-btn:hover {
    background: rgba(255, 255, 255, 0.4);
}

.rt-btn.active {
    background: #27ae60;
}

/* 웹서버 프로세스 / 네트워크 인터페이스 */
.resource-extra {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.extra-section {
    flex: 1;
}

.extra-title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    opacity: 0.9;
}

.extra-content {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ws-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    font-size: 12px;
}

.ws-badge small {
    opacity: 0.8;
    font-size: 10px;
}

.net-iface-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    font-size: 12px;
}

.net-iface-badge small {
    opacity: 0.8;
    font-size: 10px;
    margin-left: 2px;
}

.net-iface-badge .badge-speed {
    background: rgba(52, 152, 219, 0.8);
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 4px;
}

@media (max-width: 600px) {
    .resource-extra {
        flex-direction: column;
        gap: 10px;
    }
}

.info-table {
    width: 100%;
    border-collapse: collapse;
}

.info-table th,
.info-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.info-table th {
    width: 40%;
    color: #666;
    font-weight: 500;
}

/* WebDAV 연결 정보 */
.info-desc {
    color: #666;
    font-size: 13px;
    margin-bottom: 10px;
}

.webdav-url {
    display: inline-block;
    background: #f5f5f5;
    padding: 6px 10px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    margin-right: 8px;
    word-break: break-all;
}

.webdav-help {
    margin-top: 15px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 13px;
}

.webdav-help p {
    margin: 0 0 8px 0;
}

.webdav-help ol {
    margin: 0;
    padding-left: 20px;
}

.webdav-help li {
    margin-bottom: 4px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th,
.data-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.data-table th {
    background: #f5f5f5;
    font-weight: 600;
}

.data-table tr:hover {
    background: #f9f9f9;
}

/* ========== 페이지네이션 ========== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 15px;
    padding: 10px 0;
}

.pagination .page-info {
    margin-right: 15px;
    color: #666;
    font-size: 13px;
}

.pagination .page-link {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s;
}

.pagination .page-link:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

.pagination .page-current {
    display: inline-block;
    padding: 6px 12px;
    background: #4a90d9;
    border: 1px solid #4a90d9;
    border-radius: 4px;
    color: white;
    font-size: 13px;
    font-weight: 600;
}

/* ========== 테마 선택 ========== */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.theme-item {
    cursor: pointer;
    text-align: center;
    padding: 10px;
    border: 2px solid #eee;
    border-radius: 8px;
    transition: all 0.2s;
    min-width: 0;
}

.theme-item:hover {
    border-color: #4a90d9;
}

.theme-item.active {
    border-color: #4a90d9;
    background: #f0f7ff;
}

.theme-preview {
    width: 100%;
    height: 60px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.theme-item span {
    display: block;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-preview-default { background: linear-gradient(135deg, #fff 50%, #f5f7fa 50%); }
.theme-preview-dark { background: linear-gradient(135deg, #1a1a2e 50%, #16213e 50%); }
.theme-preview-blue { background: linear-gradient(135deg, #1e40af 50%, #3b82f6 50%); }
.theme-preview-mint { background: linear-gradient(135deg, #0d9488 50%, #2dd4bf 50%); }
.theme-preview-rose { background: linear-gradient(135deg, #e11d48 50%, #fb7185 50%); }
.theme-preview-blue-full { background: linear-gradient(135deg, #1e40af 50%, #1e3a5f 50%); }
.theme-preview-mint-full { background: linear-gradient(135deg, #047857 50%, #064e3b 50%); }
.theme-preview-rose-full { background: linear-gradient(135deg, #881337 50%, #4c0519 50%); }
.theme-preview-lavender { background: linear-gradient(135deg, #e9d5ff 50%, #f5f3ff 50%); }
.theme-preview-peach { background: linear-gradient(135deg, #fed7aa 50%, #fff7ed 50%); }
.theme-preview-sky { background: linear-gradient(135deg, #bae6fd 50%, #f0f9ff 50%); }
.theme-preview-lavender-full { background: linear-gradient(135deg, #ddd6fe 50%, #ede9fe 50%); }
.theme-preview-peach-full { background: linear-gradient(135deg, #fed7aa 50%, #ffedd5 50%); }
.theme-preview-sky-full { background: linear-gradient(135deg, #bae6fd 50%, #e0f2fe 50%); }
.theme-preview-pink { background: linear-gradient(135deg, #fbcfe8 50%, #fdf2f8 50%); }
.theme-preview-pink-full { background: linear-gradient(135deg, #fbcfe8 50%, #fce7f3 50%); }
.theme-preview-pastel-blue { background: linear-gradient(135deg, #bfdbfe 50%, #eff6ff 50%); }
.theme-preview-pastel-blue-full { background: linear-gradient(135deg, #bfdbfe 50%, #dbeafe 50%); }

/* 시계 스타일 선택 */
.clock-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.clock-style-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.clock-style-item:hover {
    border-color: var(--primary);
}

.clock-style-item.active {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.1);
}

.clock-style-item span {
    font-size: 11px;
    color: var(--text);
}

.clock-style-preview {
    width: 80px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
}

/* 프리뷰 1: 미니멀 */
.clock-style-preview.style-1 {
    background: #f8f9fa; border: 1px solid #dee2e6; flex-direction: column;
}
.clock-style-preview.style-1 .preview-time { font-size: 13px; font-weight: 600; color: #333; }
.clock-style-preview.style-1 .preview-date { font-size: 9px; color: #999; }

/* 프리뷰 2: 카드 */
.clock-style-preview.style-2 {
    background: rgba(74,144,226,0.08); border: 1px solid rgba(74,144,226,0.2); border-radius: 20px; gap: 4px;
}
.clock-style-preview.style-2 .preview-time { font-size: 12px; font-weight: 700; color: #4a90e2; }
.clock-style-preview.style-2 .preview-sep { font-size: 10px; color: #ccc; }
.clock-style-preview.style-2 .preview-date { font-size: 9px; color: #888; }

/* 프리뷰 3: 세그먼트 */
.clock-style-preview.style-3 {
    background: #f0f4f8; border: 1px solid #d0d9e3; gap: 1px;
}
.clock-style-preview.style-3 .preview-digit-box {
    width: 13px; height: 18px; background: #fff; border: 1px solid #d0d9e3; border-radius: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Courier New', monospace; font-size: 12px; font-weight: 700; color: #4a90e2;
}
.clock-style-preview.style-3 .preview-colon { font-size: 12px; font-weight: 700; color: #4a90e2; }

/* 프리뷰 4: LED */
.clock-style-preview.style-4 {
    background: #1a2332; border: 1px solid #2a3a4e;
}
.clock-style-preview.style-4 .preview-led {
    font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700;
    color: #4ade80; text-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}

/* 플립 프리뷰 공통 */
.clock-style-preview .pv-flip {
    width: 14px; height: 20px; position: relative;
    border-radius: 2px; overflow: hidden; display: inline-flex;
    align-items: center; justify-content: center;
    font-family: 'Helvetica Neue', sans-serif; font-size: 12px; font-weight: 800; color: #eee;
    background: linear-gradient(180deg, #3a3a3a 49%, #222 50%);
}
.clock-style-preview .pv-fc { font-size: 12px; font-weight: 700; padding: 0 1px; }

/* 프리뷰 5: 플립 A 클래식 */
.clock-style-preview.style-5 {
    background: #1a1a1a; border: 1px solid #333; gap: 1px;
}
.clock-style-preview.style-5 .pv-fc { color: #888; }

/* 프리뷰 6: 플립 B 메탈릭 */
.clock-style-preview.style-6 {
    background: linear-gradient(180deg, #2c2c2c, #1a1a1a); border: 1px solid #3a3a3a; gap: 1px;
}
.clock-style-preview.style-6 .pv-flip {
    background: linear-gradient(180deg, #444 49%, #333 50%); color: #fff;
}
.clock-style-preview.style-6 .pv-fc { color: #f59e0b; }

/* 프리뷰 7: 플립 C 컴팩트 */
.clock-style-preview.style-7 {
    background: #222; border: 1px solid #444; border-radius: 10px; gap: 1px;
}
.clock-style-preview.style-7 .pv-flip { width: 12px; height: 17px; font-size: 10px; }
.clock-style-preview.style-7 .pv-fc { color: #777; font-size: 10px; }

/* 프리뷰 8: 플립 D 화이트 */
.clock-style-preview.style-8 {
    background: #e8e8e8; border: 1px solid #ccc; gap: 1px;
}
.clock-style-preview.style-8 .pv-flip {
    background: linear-gradient(180deg, #fff 49%, #eee 50%); color: #222;
}
.clock-style-preview.style-8 .pv-fc { color: #999; }

/* 프리뷰 9: 글래스 */
.clock-style-preview.style-9 {
    background: rgba(255,255,255,0.6); border: 1px solid rgba(200,200,200,0.5);
    backdrop-filter: blur(5px); border-radius: 10px;
}
.clock-style-preview.style-9 .preview-glass {
    font-size: 14px; font-weight: 700; color: #333; letter-spacing: 1px;
}

/* 프리뷰 10: 닉시관 */
.clock-style-preview.style-10 {
    background: #0a0a0a; border: 1px solid #2a2520;
}
.clock-style-preview.style-10 .preview-nixie {
    font-family: Georgia, serif; font-size: 14px; font-style: italic; color: #00bfff;
    text-shadow: 0 0 5px #00bfff;
}

/* 프리뷰 OFF */
.clock-style-preview.style-off {
    background: #333; border: 1px solid #555;
}
.clock-style-preview.style-off .preview-off {
    color: #666; font-size: 14px; font-weight: 600;
}

/* ========== 파일 미리보기 ========== */
.modal-preview {
    max-width: min(95vw, 100%);
    max-height: min(95vh, 100%);
    min-width: 400px;
    min-height: 300px;
    width: 80vw;
    height: 80vh;
    box-sizing: border-box;
    overflow: hidden;
}

.modal-preview.resizable {
    position: absolute;
    resize: none;
    display: flex;
    flex-direction: column;
}

/* 리사이즈 핸들 */
.resize-handle {
    position: absolute;
    background: transparent;
}

.resize-handle-se {
    width: 20px;
    height: 20px;
    bottom: 0;
    right: 0;
    cursor: se-resize;
}

.resize-handle-se::after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(150, 150, 150, 0.6);
    border-bottom: 2px solid rgba(150, 150, 150, 0.6);
}

.resize-handle-e {
    width: 8px;
    height: calc(100% - 40px);
    top: 20px;
    right: 0;
    cursor: e-resize;
}

.resize-handle-s {
    width: calc(100% - 40px);
    height: 8px;
    bottom: 0;
    left: 20px;
    cursor: s-resize;
}

.modal-preview .modal-body {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    overflow: auto;
    background: #1a1a1a;
    flex: 1;
    min-width: 0;
}

/* 비디오 미리보기: modal-body 안에서 넘침 방지 */
.modal-preview .modal-body .video-player-wrap {
    max-height: 100%;
    max-width: 100%;
}
/* 비디오가 있을 때 modal-body 스크롤 방지 → object-fit:contain으로 맞춤 */
.modal-preview .modal-body:has(.video-player-wrap),
.modal-preview .modal-body.has-video {
    overflow: hidden;
}

#preview-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.preview-image.zoomed {
    max-width: none !important;
    max-height: none !important;
    object-fit: none !important;
}

/* 이미지 갤러리 네비게이션 버튼 */
.preview-nav-btn {
    position: absolute;
    top: 70px;
    width: 15%;
    bottom: 70px;
    background: transparent;
    color: #fff;
    border: none;
    font-size: 24px;
    cursor: pointer;
    z-index: 9998;
    display: flex;
    align-items: center;
}

.preview-nav-btn > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 80px;
    background: rgba(0, 0, 0, 0.5);
    transition: background 0.2s, opacity 0.2s;
    opacity: 0.7;
}

.preview-nav-btn:hover > span {
    background: rgba(0, 0, 0, 0.8);
    opacity: 1;
}

.preview-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.preview-prev {
    left: 0;
    justify-content: flex-start;
}

.preview-prev > span {
    border-radius: 0 8px 8px 0;
}

.preview-next {
    right: 0;
    justify-content: flex-end;
}

.preview-next > span {
    border-radius: 8px 0 0 8px;
}

.video-stream-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 152, 0, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 3px;
    z-index: 10;
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 0.3s;
}

/* 재생 중 뱃지/오디오 숨김, hover 시 표시 */
.video-player-wrap.playing .video-stream-badge {
    opacity: 0;
}
.video-player-wrap.playing:hover .video-stream-badge {
    opacity: 0.9;
}

.video-stream-badge.native {
    background: rgba(76, 175, 80, 0.85);
}

/* 전체화면 비활동 시 모든 오버레이 숨김 + 커서 숨김 */
:fullscreen .video-player-wrap.fs-idle .video-stream-badge,
:fullscreen .video-player-wrap.fs-idle .video-audio-select,
:fullscreen .video-player-wrap.fs-idle .video-quality-select,
:fullscreen .video-player-wrap.fs-idle .subtitle-controls,
:fullscreen .video-player-wrap.fs-idle .transcode-duration,
:fullscreen .video-player-wrap.fs-idle .video-fullscreen-btn,
:fullscreen .video-player-wrap.fs-idle .video-play-overlay,
.video-player-wrap.fs-idle:fullscreen .video-stream-badge,
.video-player-wrap.fs-idle:fullscreen .video-audio-select,
.video-player-wrap.fs-idle:fullscreen .video-quality-select,
.video-player-wrap.fs-idle:fullscreen .subtitle-controls,
.video-player-wrap.fs-idle:fullscreen .transcode-duration,
.video-player-wrap.fs-idle:fullscreen .video-fullscreen-btn,
.video-player-wrap.fs-idle:fullscreen .video-play-overlay {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.3s;
}

:fullscreen .video-player-wrap.fs-idle,
.video-player-wrap.fs-idle:fullscreen { cursor: none; }

/* 트랜스코딩 전체 길이 표시 */
.transcode-duration {
    position: absolute;
    bottom: 65px;
    left: 8px;
    background: rgba(0, 0, 0, 0.65);
    color: #ff9800;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    z-index: 10;
    pointer-events: none;
    font-family: monospace;
    opacity: 0;
    transition: opacity 0.3s;
}
.video-player-wrap:not(.playing) .transcode-duration { opacity: 1; }
.video-player-wrap.playing .transcode-duration { opacity: 0; }
.video-player-wrap.playing:hover .transcode-duration { opacity: 1; }
.video-player-wrap.playing.show-controls .transcode-duration { opacity: 1; }
.video-player-wrap:fullscreen .transcode-duration,
.video-player-wrap:-webkit-full-screen .transcode-duration { bottom: 75px; }

/* 커스텀 전체화면 버튼 (PC+모바일 공통, wrap 안 absolute) */
.video-fullscreen-btn {
    position: absolute;
    right: 12px;
    bottom: 66px;
    top: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1;
    transition: opacity 0.3s;
    padding: 0;
    margin: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.video-fullscreen-btn.hidden { opacity: 0 !important; pointer-events: none; }

/* PC: 재생 중 전체화면 버튼도 다른 오버레이와 동일하게 숨기고, hover 시 표시 */
.video-player-wrap.playing .video-fullscreen-btn {
    opacity: 0;
    pointer-events: none;
}
.video-player-wrap.playing:hover .video-fullscreen-btn {
    opacity: 1;
    pointer-events: auto;
}

/* 재생/일시정지 오버레이도 동일 패턴 (투명해도 클릭/터치는 받음) */
.video-player-wrap.playing .video-play-overlay {
    opacity: 0;
    pointer-events: auto;
}
.video-player-wrap.playing:hover .video-play-overlay {
    opacity: 0.6;
    pointer-events: auto;
}
.video-player-wrap.playing:hover .video-play-overlay:hover {
    opacity: 1;
}

/* ★ 버퍼 준비 전: 재생 버튼 흐리게 표시 + 클릭 이벤트 원천 차단 */
.video-player-wrap.video-not-ready .video-play-overlay {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none !important;  /* 클릭 자체 차단 */
}
.video-player-wrap.video-not-ready .video-play-overlay:hover {
    opacity: 0.3;
}
/* ★ 준비 전 상태 배지 스타일 (선택적) */
.video-player-wrap.video-not-ready video {
    pointer-events: none;  /* 비디오 직접 클릭/키보드 조작 차단 */
}


.vec-container {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.vec-btn {
    background: transparent;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
    color: #aaa;
    transition: all 0.15s;
}
.vec-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: #888;
}
.vec-btn.vec-active {
    background: rgba(102, 126, 234, 0.8);
    color: #fff;
    border-color: rgba(102, 126, 234, 0.8);
}
.vec-sep {
    width: 1px;
    height: 18px;
    background: #555;
    margin: 0 3px;
}

/* 전체화면에서 활동 시 모든 오버레이 표시 복원 (fullscreenElement 안에서만) */
:fullscreen .video-player-wrap:not(.fs-idle) .video-stream-badge,
:fullscreen .video-player-wrap:not(.fs-idle) .video-audio-select,
:fullscreen .video-player-wrap:not(.fs-idle) .subtitle-controls,
:fullscreen .video-player-wrap:not(.fs-idle) .transcode-duration,
:fullscreen .video-player-wrap:not(.fs-idle) .video-fullscreen-btn,
:fullscreen .video-player-wrap:not(.fs-idle) .video-play-overlay,
.video-player-wrap:not(.fs-idle):fullscreen .video-stream-badge,
.video-player-wrap:not(.fs-idle):fullscreen .video-audio-select,
.video-player-wrap:not(.fs-idle):fullscreen .subtitle-controls,
.video-player-wrap:not(.fs-idle):fullscreen .transcode-duration,
.video-player-wrap:not(.fs-idle):fullscreen .video-fullscreen-btn,
.video-player-wrap:not(.fs-idle):fullscreen .video-play-overlay {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s;
}
:fullscreen .video-player-wrap:not(.fs-idle) .video-play-overlay,
.video-player-wrap:not(.fs-idle):fullscreen .video-play-overlay {
    opacity: 0.6;
}
:fullscreen .video-player-wrap:not(.fs-idle),
.video-player-wrap:not(.fs-idle):fullscreen { cursor: auto; }
/* 전체화면에서 버튼 위치 조정 (네이티브 컨트롤바가 더 큼) */
:fullscreen .video-fullscreen-btn,
.video-player-wrap:fullscreen .video-fullscreen-btn { bottom: 80px; }
:fullscreen .subtitle-controls,
.video-player-wrap:fullscreen .subtitle-controls { bottom: 141px; }

.encoder-info {
    font-weight: bold;
    font-size: 11px;
    opacity: 0.85;
    margin-left: 2px;
}

.video-audio-select {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}

.video-player-wrap:hover .video-audio-select {
    opacity: 1;
}

/* 재생 중 hover에서만 오디오 표시 */
.video-player-wrap.playing .video-audio-select {
    opacity: 0;
}
.video-player-wrap.playing:hover .video-audio-select {
    opacity: 1;
}

.audio-track-label {
    color: #fff;
    font-size: 12px;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

.audio-track-select {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 12px;
    cursor: pointer;
    max-width: 250px;
}

/* ★ Quality 셀렉터 (v5.8.1c) — audio 셀렉터와 동일 visibility 패턴 */
/* ★ 위치 통일 (v5.8.1c 패치) — 네이티브/트랜스코딩 모두 동일 위치 (top:10px right:10px) */
/*    audio + quality 동시 존재 시: JS가 .has-quality-sibling 클래스 audio에 추가 → audio가 좌측 이동 */
.video-quality-select {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}
/* audio 셀렉터에 quality 형제가 있으면 audio를 좌측으로 이동 (가로 배치) */
.video-audio-select.has-quality-sibling {
    right: 220px; /* quality select max-width 180px + gap 여백 */
}
/* ★ 목록 버튼(.fs-vp-toggle)이 있으면 화질 셀렉트를 좌측으로 이동 (펜닐님 요청 v5.8.1c) */
/*   목록 버튼: top:8px right:8px → 화질 셀렉트는 right:80px로 회피 (펜닐님 미세조정 적용) */
/*   메인은 :has() 사용, 폴백은 .has-toggle-sibling 클래스 (JS 동기화) */
.video-player-wrap:has(.fs-vp-toggle) .video-quality-select {
    right: 80px;
}
.video-quality-select.has-toggle-sibling {
    right: 80px;
}
/* 목록 + audio + quality 모두 있을 때: audio는 더 왼쪽으로 (펜닐님 미세조정 적용) */
.video-player-wrap:has(.fs-vp-toggle) .video-audio-select.has-quality-sibling {
    right: 205px;
}
.video-audio-select.has-toggle-sibling.has-quality-sibling {
    right: 205px;
}
.video-player-wrap:hover .video-quality-select {
    opacity: 1;
}
.video-player-wrap.playing .video-quality-select {
    opacity: 0;
}
.video-player-wrap.playing:hover .video-quality-select {
    opacity: 1;
}
.video-player-wrap.playing.show-controls .video-quality-select {
    opacity: 1;
}
.quality-label {
    color: #fff;
    font-size: 12px;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
}
.quality-select {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 12px;
    cursor: pointer;
    max-width: 180px;
}

.video-player-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    overflow: hidden;
}
.video-player-wrap:fullscreen,
.video-player-wrap:-webkit-full-screen {
    background: #000;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
}
.video-player-wrap:fullscreen .preview-video,
.video-player-wrap:-webkit-full-screen .preview-video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain;
}

.video-seek-controls {
    display: none;
}

.video-seek-overlay {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
}

.video-seek-overlay.show {
    animation: seekFlash 0.6s ease-out forwards;
}

.video-seek-left {
    left: 16px;
}

.video-seek-right {
    right: 16px;
}

@keyframes seekFlash {
    0% { opacity: 0; transform: translateY(-50%) scale(0.8); }
    20% { opacity: 1; transform: translateY(-50%) scale(1.1); }
    40% { opacity: 1; transform: translateY(-50%) scale(1); }
    100% { opacity: 0; transform: translateY(-50%) scale(1); }
}

.preview-video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: auto;
}
/* ★ 전체화면/pseudo-fullscreen은 별도 !important 규칙(아래)이 width:100%/height:100% 강제 */
/* 네이티브 전체화면 버튼 숨김 → 커스텀 wrap 전체화면 사용 (오버레이 유지) */
.preview-video::-webkit-media-controls-fullscreen-button { display: none; }

.preview-video::cue {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 4px rgba(0,0,0,0.8);
    font-size: 1.1em;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: keep-all;
}

/* iOS Safari 전체화면 네이티브 자막 보완 */
video::-webkit-media-text-track-container {
    overflow: visible !important;
}
video::-webkit-media-text-track-display {
    overflow: visible !important;
    white-space: pre-wrap !important;
    word-break: keep-all !important;
    -webkit-box-decoration-break: clone !important;
}
video::cue {
    background: rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
    font-size: clamp(0.85em, 2.5vw, 1.3em) !important;
    line-height: 1.5 !important;
    white-space: pre-wrap !important;
    padding: 2px 6px !important;
    border-radius: 2px;
}

/* PC 재생 오버레이 버튼 */
.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 12;
    transition: opacity 0.25s, transform 0.15s;
    border: 2px solid rgba(255, 255, 255, 0.6);
}
.video-play-overlay:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: translate(-50%, -50%) scale(1.08);
}
.video-play-overlay:active {
    transform: translate(-50%, -50%) scale(0.95);
}
.video-play-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
@media (max-width: 1024px) {
    .video-play-overlay { display: none !important; }
}

.video-sub-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    line-height: 0;
}

.subtitle-overlay {
    position: absolute;
    bottom: 8%;
    left: 5%;
    right: 5%;
    text-align: center;
    color: #fff;
    font-size: 1.1em;
    font-weight: 500;
    line-height: 1.5;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 6px rgba(0,0,0,0.9);
    pointer-events: none;
    z-index: 10;
    display: none;
}

/* 자막 크기/위치 조절 버튼 */
.subtitle-controls {
    position: absolute;
    bottom: 125px;
    right: 8px;
    z-index: 14;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 320px;
}
.video-player-wrap:hover .subtitle-controls,
.video-sub-wrapper:hover .subtitle-controls {
    opacity: 1;
}
/* 재생 중에는 숨기고, hover 시 표시 */
.video-player-wrap.playing .subtitle-controls {
    opacity: 0;
}
.video-player-wrap.playing:hover .subtitle-controls {
    opacity: 1;
}
.sub-ctrl-btn {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 12px;
    cursor: pointer;
    line-height: 1.4;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.sub-ctrl-btn:hover {
    background: rgba(0, 0, 0, 0.85);
}
.sub-ctrl-sep {
    width: 1px;
    background: rgba(255,255,255,0.2);
    margin: 2px 2px;
}
.sub-sync-display {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    min-width: 38px;
    text-align: center;
    padding: 2px 4px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    align-self: center;
}

.preview-audio-wrap {
    text-align: center;
    padding: 0;
    background: linear-gradient(135deg, #1e1e2e 0%, #13131a 100%);
    width: 100%;
    height: 100%;
    min-width: 300px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    box-sizing: border-box;
    overflow: hidden;
}
#fs-audio-player {
    width: 100%;
    height: 100%;
    max-width: 100%;
}
/* FSAudioPlayer 커스텀 스타일 */
.fap {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 28px 32px 20px;
    color: #fff;
    font-family: inherit;
    user-select: none;
    -webkit-user-select: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
}

/* ★ 볼륨 토스트 (드래그/키보드 단축키 시 볼륨바 좌측 위에 표시) */
.fap-vol-toast {
    position: absolute;
    bottom: calc(100% + 2px);    /* 볼륨바 위 2px (살짝 내림) */
    left: 0;                      /* 볼륨바 왼쪽 끝 (시작 쪽) */
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);  /* 페이드 시작 위치 */
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 30;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
}
.fap-vol-toast.show {
    opacity: 1;
    transform: translateY(0);  /* 페이드 완료 위치 */
}
/* 현재 곡 표시 */
.fap-now {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-shrink: 0;
}
.fap-now-cover {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(124,110,246,0.25), rgba(124,110,246,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.fap-now-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fap-now-cover-icon {
    font-size: 22px;
}
.fap-now-info { overflow: hidden; flex: 1; min-width: 0; text-align: left; }
.fap-now-title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    color: #fff;
    text-align: left;
}
.fap-now-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
    letter-spacing: 0.3px;
    text-align: left;
}
/* 마퀴 공통 */
.fap-marquee {
    text-overflow: clip;
}
.fap-marquee > .fap-marquee-inner {
    display: inline-block;
    padding-right: 60px;
    animation: fapMarquee var(--fap-marquee-dur, 10s) linear infinite;
}
/* hover 시 회전 일시정지 */
.fap-marquee:hover > .fap-marquee-inner {
    animation-play-state: paused;
}
@keyframes fapMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* 비주얼라이저 (주파수 막대 그래프) — seek bar 위쪽 */
.fap-visualizer {
    display: block;
    width: 100%;
    height: 40px;
    margin-bottom: 8px;
    background: transparent;
    flex-shrink: 0;
    image-rendering: crisp-edges;
    cursor: pointer;
}
.fap-visualizer:hover {
    opacity: 0.9;
}
/* ★ VU 모드 — 캔버스 높이 (18th rev: 박스 300×150) */
.fap-visualizer.vu-mode {
    height: 160px;
    margin-bottom: 12px;
    image-rendering: auto;
}
/* ★ VU LED 모드 — 가로형 디지털 LED 미터 (14b rev) */
.fap-visualizer.vuled-mode {
    height: 60px;
    margin-bottom: 12px;
    image-rendering: auto;
    background: #050709;
    border-radius: 4px;
}
.fap-skin-soundcloud .fap-visualizer.vuled-mode,
.fap-skin-cassette .fap-visualizer.vuled-mode,
.fap-skin-terminal .fap-visualizer.vuled-mode,
.fap-skin-pixel .fap-visualizer.vuled-mode {
    filter: none !important;
    opacity: 1 !important;
}
.fap-skin-ap-fixed .fap-visualizer.vuled-mode {
    display: none !important;
}
/* 스킨별 filter는 VU 모드에선 적용 안 함 */
.fap-skin-soundcloud .fap-visualizer.vu-mode,
.fap-skin-cassette .fap-visualizer.vu-mode,
.fap-skin-terminal .fap-visualizer.vu-mode,
.fap-skin-pixel .fap-visualizer.vu-mode {
    filter: none !important;
    opacity: 1 !important;
}
/* VU 캔버스 wrapper — 캔버스를 정확히 감싸는 컨테이너 (SVG 오버레이 기준점) */
.fap-vu-canvas-wrap {
    position: relative;
    width: 100%;
    display: block;
    margin-bottom: 8px;
}
.fap-vu-canvas-wrap .fap-visualizer {
    margin-bottom: 0;
}
/* SVG 오버레이 — 캔버스 영역에만 정확히 매칭 */
.fap-vu-svg-root {
    pointer-events: none;
}
.fap-vu-svg-root .fap-vu-box {
    transition: background 0.2s, border-color 0.2s;
}
/* 스킨별 hue-rotate가 VU 미터 색상 깨지 않도록 격리 */
.fap-skin-soundcloud .fap-vu-svg-root,
.fap-skin-cassette .fap-vu-svg-root,
.fap-skin-terminal .fap-vu-svg-root,
.fap-skin-pixel .fap-vu-svg-root {
    filter: none !important;
}
/* 모드 변경 레이블 (클릭 시 잠깐 표시) */
.fap-vis-label {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 1s ease;
    z-index: 10;
}
.fap-vis-label-fade {
    opacity: 0;
}

/* 시크바 */
.fap-seek {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.fap-time {
    font-size: 11px;
    /* ★ Default 시간 색상: 보라 (재생바와 동일) */
    color: #7c6ef6;
    min-width: 36px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.fap-seek-bar {
    flex: 1;
    height: 20px;
    position: relative;
    cursor: pointer;
    background: transparent;
}
.fap-seek-bar::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    pointer-events: none;
}
.fap-seek-loaded {
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    width: 0;
    pointer-events: none;
    z-index: 1;
}
.fap-seek-played {
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: #7c6ef6;
    border-radius: 2px;
    width: 0;
    pointer-events: none;
    z-index: 2;
}
.fap-seek-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 3;
}
.fap-seek-bar:hover .fap-seek-thumb,
.fap-seek-bar:active .fap-seek-thumb { opacity: 1; }
/* 컨트롤 버튼 */
.fap-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.fap-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    line-height: 0;
}
.fap-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.fap-btn-play {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #7c6ef6;
    color: #fff;
}
.fap-btn-play:hover { background: #6b5de5; color: #fff; }
/* ★ 볼륨 버튼: 스킨 강조색 (재생바와 동일) - 모든 스킨 통일 */
/*    hover 시도 강조색 유지 (글로벌 .fap-btn:hover의 #fff 무력화) */
.fap-btn-vol {
    color: #7c6ef6;
}
.fap-btn-vol:hover {
    color: #7c6ef6;
}
/* ★ 셔플/반복 버튼 hover 시 색상/배경 변화 비활성 (active 상태와 헷갈림 방지) */
/*    펜닐님 요청: 클릭 후 마우스 떠도 active 색만 유지되어야 함 */
/*    Default: 비활성 색(rgba(255,255,255,0.6))을 hover 시도 유지 */
.fap-btn-shuffle:hover,
.fap-btn-loop:hover {
    color: rgba(255,255,255,0.6);  /* 비활성 색 유지 (hover로 흰색 안 됨) */
    background: transparent !important;
}
/* 활성 상태 hover는 active 색 유지 */
.fap-btn-shuffle.active:hover,
.fap-btn-loop.active:hover {
    color: #7c6ef6;  /* active 보라 그대로 */
}
/* ★ Active 상태 (셔플/반복 켜짐) — 색상만 변경 (배경 없음, 통일감) */
/*    각 스킨에서 재생바/볼륨바 색과 동일한 강조색 사용 */
.fap-btn-shuffle.active,
.fap-btn-loop.active {
    color: #7c6ef6;
}
.fap-btn-loop.active-one { position: relative; }
.fap-btn-loop.active-one::after {
    content: '1';
    position: absolute;
    /* ★ 아이콘 화살표 안쪽으로 이동 */
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    font-size: 7px;
    font-weight: 700;
    color: inherit;  /* 활성 색상 따라감 (스킨별) */
    line-height: 1;
    pointer-events: none;
}

/* ★ 가사 버튼 (v5.8.1c — 옵션 A) */
.fap-btn-lyrics:hover {
    color: #7c6ef6;
}
.fap-btn-lyrics.active {
    color: #7c6ef6;
}

/* ★ 가사 모달 (v5.8.1c — 옵션 A) */
/*    PC: 일반 모달 스타일 (흰 배경, 카드형) — 사이트 다른 모달과 통일 */
/*    모바일: 풀스크린 (Apple Music 스타일, 어두운 배경) */
.fap-lyrics-modal {
    position: fixed;
    inset: 0;
    z-index: 100002;  /* mp3 audio 모달(10000)과 서브모달(100003) 사이 — mp3 모달 위에 보장 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.fap-lyrics-modal.fap-lyrics-modal-open {
    opacity: 1;
    pointer-events: auto;
}
.fap-lyrics-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* ===== PC: 일반 모달 스타일 (사이트 .modal과 통일) ===== */
.fap-lyrics-modal-content {
    position: relative;
    background: white;
    border-radius: var(--radius, 8px);
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.25s ease;
    margin: 20px;
}
.fap-lyrics-modal.fap-lyrics-modal-open .fap-lyrics-modal-content {
    transform: translateY(0);
}
.fap-lyrics-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border, #e0e0e0);
    background: var(--primary, #667eea);
    color: var(--modal-header-text, white);
    flex-shrink: 0;
    cursor: move;          /* ★ PC: 헤더 드래그 가능 표시 (v5.8.1c) */
    user-select: none;     /* 드래그 중 텍스트 선택 방지 */
}
.fap-lyrics-modal-title-wrap {
    flex: 1;
    min-width: 0;
}
/* ★ PC (v5.8.1c — 펜닐님 요청): "가사" 라벨 숨김, 노래 제목만 헤더에 표시 */
.fap-lyrics-modal-title {
    display: none;
}
/* 트랙 제목을 헤더 메인으로 (이전엔 보조였음) */
.fap-lyrics-modal-track {
    color: var(--modal-header-text, white);
    font-size: 16px;
    font-weight: 600;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fap-lyrics-modal-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: var(--modal-header-text, white);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
    margin-left: 16px;
}
.fap-lyrics-modal-close:hover {
    background: rgba(255,255,255,0.28);
}
.fap-lyrics-modal-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fafafa;
}
.fap-lyrics-modal-text {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 24px;
    color: #333;
    font-size: 15px;
    line-height: 1.8;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    white-space: pre-wrap;
    word-break: break-word;
}
.fap-lyrics-modal-line {
    transition: color 0.25s ease, font-weight 0.25s ease;
    padding: 4px 0;
}
.fap-lyrics-modal-line.fap-lyrics-empty {
    height: 12px;
}
/* 동기화된 가사일 때 활성 라인 강조 (LRC 등) — PC 밝은 배경용 */
.fap-lyrics-modal-text[data-synced="true"] .fap-lyrics-modal-line {
    color: rgba(0, 0, 0, 0.4);
}
.fap-lyrics-modal-text[data-synced="true"] .fap-lyrics-modal-line.fap-lyrics-active {
    color: var(--primary, #667eea);
    font-weight: 700;
    font-size: 17px;
}
.fap-lyrics-modal-text[data-synced="true"] .fap-lyrics-modal-line.fap-lyrics-prev,
.fap-lyrics-modal-text[data-synced="true"] .fap-lyrics-modal-line.fap-lyrics-next {
    color: rgba(0, 0, 0, 0.6);
}

/* ===== 모바일: 풀스크린 (Apple Music 스타일 어두운 배경) ===== */
@media (max-width: 768px) {
    /* 모달 오버레이를 더 진하게 (풀스크린 느낌) */
    .fap-lyrics-modal-overlay {
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .fap-lyrics-modal-content {
        width: 100vw;
        height: 100vh;
        height: 100dvh;  /* iOS Safari/Chrome — 동적 viewport (주소창 고려) */
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        margin: 0;
        background: #1a1a1a;  /* 어두운 배경 */
    }
    /* ★ 모바일 헤더 — 안전영역(노치/주소창) 위로 올려 패딩 (v5.8.1c) */
    .fap-lyrics-modal-header {
        padding-top: max(16px, env(safe-area-inset-top));
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        position: sticky;
        top: 0;
        z-index: 2;
        background: #1a1a1a;  /* 모바일은 어두운 헤더로 통일 (PC primary 컬러 무효화) */
        border-bottom-color: rgba(255,255,255,0.08);
        cursor: default;  /* 모바일은 드래그 비활성 (풀스크린이라 불필요) */
    }
    .fap-lyrics-modal-title {
        color: #fff;
    }
    .fap-lyrics-modal-close {
        background: rgba(255,255,255,0.08);
        color: #fff;
        width: 36px;
        height: 36px;
    }
    .fap-lyrics-modal-close:hover {
        background: rgba(255,255,255,0.18);
    }
    .fap-lyrics-modal-body {
        background: #1a1a1a;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    .fap-lyrics-modal-text {
        color: rgba(255,255,255,0.85);
        font-size: 15px;
        padding: 24px 20px;
        padding-bottom: max(60px, env(safe-area-inset-bottom));  /* 하단 컨트롤바/홈 인디케이터 회피 */
    }
    /* 동기화 라인 — 모바일 어두운 배경용 색상 오버라이드 */
    .fap-lyrics-modal-text[data-synced="true"] .fap-lyrics-modal-line {
        color: rgba(255,255,255,0.4);
    }
    .fap-lyrics-modal-text[data-synced="true"] .fap-lyrics-modal-line.fap-lyrics-active {
        color: #fff;
        font-weight: 600;
        font-size: 17px;
    }
    .fap-lyrics-modal-text[data-synced="true"] .fap-lyrics-modal-line.fap-lyrics-prev,
    .fap-lyrics-modal-text[data-synced="true"] .fap-lyrics-modal-line.fap-lyrics-next {
        color: rgba(255,255,255,0.65);
    }
    /* ★ 모바일 (v5.8.1c — 펜닐님 요청): "가사" 라벨 숨김, 노래 제목만 헤더에 표시 */
    .fap-lyrics-modal-title {
        display: none;
    }
    /* 트랙 제목을 헤더 메인으로 (이전엔 보조였음) */
    .fap-lyrics-modal-track {
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        margin-top: 0;
    }
    /* 트랙 제목/아티스트가 헤더 우측 X 버튼과 겹치지 않게 우측 여백 */
    .fap-lyrics-modal-title-wrap {
        padding-right: 8px;
    }
}

/* 볼륨 */
.fap-volume {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 0 2px;
    flex-shrink: 0;
}
/* ★ iOS: Apple 정책상 JS에서 audio.volume 조절 불가 → 볼륨 영역 전체 숨김 (YouTube iOS 웹 방식) */
.fap.fap-ios .fap-volume { display: none; }
.fap-vol-bar {
    flex: 1;
    max-width: 120px;
    height: 20px;
    position: relative;
    cursor: pointer;
    background: transparent;
}
.fap-vol-bar::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    pointer-events: none;
}
.fap-vol-level {
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: #7c6ef6;
    border-radius: 2px;
    width: 80%;
    pointer-events: none;
    z-index: 1;
}
.fap-vol-thumb {
    position: absolute;
    top: 50%;
    left: 80%;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}
.fap-vol-bar:hover .fap-vol-thumb,
.fap-vol-bar:active .fap-vol-thumb { opacity: 1; }
/* 플레이리스트 */
/* 플레이리스트 */
.fap-playlist {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.fap-playlist-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 0 4px;
    flex-shrink: 0;
}
.fap-playlist-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.fap-playlist-count {
    font-size: 10px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    padding: 1px 6px;
    border-radius: 8px;
}
.fap-playlist-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow-y: auto;
    border-radius: 8px;
    min-height: 0;
    position: relative;
    contain: layout;
    will-change: scroll-position;
    /* 스크롤바: 작게 + 안 보이게 (호버 시만 살짝) */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.fap-playlist-list:hover {
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.fap-playlist-list::-webkit-scrollbar {
    width: 4px;
}
.fap-playlist-list::-webkit-scrollbar-track {
    background: transparent;
}
.fap-playlist-list::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px;
    transition: background 0.2s;
}
.fap-playlist-list:hover::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
}
.fap-playlist-list:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}
.fap-pl-virtual-spacer {
    pointer-events: none;
}
.fap-pl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 6px;
}
.fap-pl-item:hover { background: rgba(255,255,255,0.06); }
.fap-pl-item.active { background: rgba(124,110,246,0.12); }
/* ★ 활성 곡 이름 — 흰색 강제 제거. 각 스킨이 정의한 색상 따라감 */
/*    default 스킨에선 흰색 유지 (item이 흰색 글자 기본) */
.fap-pl-item.active .fap-pl-name { font-weight: 500; }
.fap-pl-cover {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    font-size: 14px;
}
.fap-pl-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* ★ 재생중 곡 커버 ♪ 오버레이 비활성 (모든 스킨 공통) - 펜닐님 요청 */
/*    이전엔 재생중 표시 위해 ♪ 표시했으나 썸네일과 겹쳐 보임 → 제거 */
.fap-pl-item.playing .fap-pl-cover::after {
    display: none !important;
}
.fap-pl-cover { position: relative; }
/* ★ 재생목록 트랙 순번 (1, 2, ...) — 파일명에 이미 번호가 있어도 시각적으로 구분되는 작은 박스 */
/*    color는 currentColor (곡 제목 색상 따라감) → 흰색/어두운 스킨 모두 호환 */
/*    배경은 중성 회색 반투명 → 모든 스킨에서 적당히 보임 */
.fap-pl-num {
    font-size: 10px;
    color: currentColor;
    opacity: 0.55;
    background: rgba(127,127,127,0.15);
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    min-width: 22px;
    text-align: center;
    align-self: center;
}
.fap-pl-item.active .fap-pl-num {
    opacity: 0.95;
    background: rgba(127,127,127,0.25);
}
.fap-pl-name {
    font-size: 13px;
    /* ★ color: inherit → 부모 .fap-pl-item의 색상 따라감 */
    /*    재생중일 때 각 스킨이 .fap-pl-item.playing color로 정의한 색 자연 상속 */
    /*    비재생중엔 .fap 컨테이너의 기본 색상 상속 (default 흰색 70% 효과는 opacity로) */
    color: inherit;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    text-align: left;
}
/* 재생중 곡 제목은 opacity 1로 (선명하게) */
/* 재생중(playing)일 때만 선명 — 멈춤(active만)일 땐 일반 opacity */
.fap-pl-item.playing .fap-pl-name {
    opacity: 1;
}
/* 재생 중인 항목: 자동 마퀴 */
.fap-pl-item.playing .fap-pl-name.pl-scrolling {
    text-overflow: clip;
}
.fap-pl-item.playing .fap-pl-name.pl-scrolling > .fap-pl-text {
    display: inline-block;
    padding-right: 50px;
    animation: fapMarquee var(--fap-pl-marquee-dur, 8s) linear infinite;
}
/* hover 시 마퀴 일시정지 */
.fap-pl-item.playing:hover .fap-pl-name.pl-scrolling > .fap-pl-text {
    animation-play-state: paused;
}
.fap-pl-dur {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
/* ★ 재생중 dur(재생시간) 색 — 곡 제목과 동일하게 (currentColor 활용) */
/*    재생중(playing)일 때만 강조 — 멈춤(active만)일 땐 일반색 */
.fap-pl-item.playing .fap-pl-dur {
    color: currentColor;
    opacity: 0.85;
}

/* ============================================================ */
/* 스킨 선택기 (공통) */
/* ============================================================ */
.fap-skin-selector {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
}
.fap-skin-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
    padding: 5px 10px;
    border-radius: 14px;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.15s;
}
.fap-skin-btn:hover {
    background: rgba(255,255,255,0.2);
}
.fap-skin-btn svg { flex-shrink: 0; }
.fap-skin-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: rgba(20,20,30,0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    min-width: 160px;
    max-height: 400px;  /* 메뉴가 너무 길어지지 않도록 + 스크롤 가능 */
    overflow-y: auto;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.fap-skin-item {
    padding: 8px 14px;
    font-size: 12px;
    color: #ddd;
    cursor: pointer;
    transition: background 0.12s;
}
.fap-skin-item:hover { background: rgba(255,255,255,0.1); }
.fap-skin-item.active {
    background: rgba(102,126,234,0.3);
    color: #fff;
}

/* 섹션 제목 (스킨 / 비주얼라이저 색상) */
.fap-skin-section-title {
    padding: 8px 14px 4px;
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.fap-skin-section-title:first-child { border-top: none; }

/* 비주얼라이저 색상 선택 아이템 */
.fap-vis-color-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    font-size: 12px;
    color: #ddd;
    cursor: pointer;
    transition: background 0.12s;
}
.fap-vis-color-item:hover { background: rgba(255,255,255,0.1); }
.fap-vis-color-item.active {
    background: rgba(102,126,234,0.3);
    color: #fff;
}
.fap-vis-color-swatch {
    width: 26px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.fap-vis-color-name {
    flex: 1;
    min-width: 0;
}

/* ============================================================ */
/* 스킨 1: SOUNDCLOUD */
/* ============================================================ */
.fap.fap-skin-soundcloud {
    background: #fff !important;
    color: #333 !important;
    padding: 20px !important;
}
.fap-skin-soundcloud .fap-skin-btn {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
    color: #666;
}
.fap-skin-soundcloud .fap-skin-btn:hover { background: rgba(0,0,0,0.1); }
.fap-skin-soundcloud .fap-skin-menu {
    background: #fff;
    border-color: #ddd;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.fap-skin-soundcloud .fap-skin-item { color: #333; }
.fap-skin-soundcloud .fap-skin-item:hover { background: #f5f5f5; }
.fap-skin-soundcloud .fap-skin-item.active {
    background: rgba(255,85,0,0.15); color: #f50;
}
/* 비주얼라이저 색상 아이템 (흰 배경 대응) */
.fap-skin-soundcloud .fap-skin-section-title {
    color: rgba(0,0,0,0.5);
    border-top-color: rgba(0,0,0,0.08);
}
.fap-skin-soundcloud .fap-vis-color-item { color: #333; }
.fap-skin-soundcloud .fap-vis-color-item:hover { background: #f5f5f5; }
.fap-skin-soundcloud .fap-vis-color-item.active {
    background: rgba(255,85,0,0.15); color: #f50;
}
.fap-skin-soundcloud .fap-vis-color-swatch { border-color: rgba(0,0,0,0.15); }
.fap-skin-soundcloud .fap-now-cover {
    width: 60px !important; height: 60px !important;
    border-radius: 4px !important;
    background: linear-gradient(135deg, #f50, #f80) !important;
}
.fap-skin-soundcloud .fap-now-title { color: #333 !important; }
.fap-skin-soundcloud .fap-now-meta { color: #999 !important; }
.fap-skin-soundcloud .fap-visualizer { filter: hue-rotate(-160deg) saturate(1.5); }
.fap-skin-soundcloud .fap-time { color: #f50 !important; }
.fap-skin-soundcloud .fap-seek-bar::before { background: #ddd !important; }
.fap-skin-soundcloud .fap-seek-played { background: #f50 !important; }
.fap-skin-soundcloud .fap-seek-loaded { background: #ccc !important; }
.fap-skin-soundcloud .fap-seek-thumb { background: #f50 !important; }
.fap-skin-soundcloud .fap-btn { color: #666 !important; }
.fap-skin-soundcloud .fap-btn:hover { color: #f50 !important; }
/* ★ 셔플/반복 hover 시 색상 변화 X (active와 헷갈림 방지) */
.fap-skin-soundcloud .fap-btn-shuffle:hover,
.fap-skin-soundcloud .fap-btn-loop:hover { color: #666 !important; }
.fap-skin-soundcloud .fap-btn-shuffle.active:hover,
.fap-skin-soundcloud .fap-btn-loop.active:hover { color: #f50 !important; }
.fap-skin-soundcloud .fap-btn-play {
    background: #f50 !important; color: #fff !important;
}
.fap-skin-soundcloud .fap-btn-play:hover { background: #e64a00 !important; color: #fff !important; }
/* ★ 볼륨 버튼: 스킨 강조색 (재생바와 동일) */
.fap-skin-soundcloud .fap-btn-vol {
    color: #f50 !important;
}
/* ★ Soundcloud active: 주황 색상만 (재생바와 동일) */
.fap-skin-soundcloud .fap-btn-shuffle.active,
.fap-skin-soundcloud .fap-btn-loop.active {
    color: #f50 !important;
}
.fap-skin-soundcloud .fap-vol-bar::before { background: #ddd !important; }
.fap-skin-soundcloud .fap-vol-level { background: #f50 !important; }
.fap-skin-soundcloud .fap-playlist-header,
.fap-skin-soundcloud .fap-playlist-title,
.fap-skin-soundcloud .fap-playlist-count { color: #666 !important; }
.fap-skin-soundcloud .fap-pl-item { color: #444 !important; border-bottom: 1px solid #eee; }
.fap-skin-soundcloud .fap-pl-item:hover { background: #f5f5f5 !important; }
.fap-skin-soundcloud .fap-pl-item.playing {
    background: rgba(255,85,0,0.08) !important; color: #f50 !important;
}
.fap-skin-soundcloud .fap-pl-name,
.fap-skin-soundcloud .fap-pl-dur { color: inherit !important; }

/* ============================================================ */
/* 스킨 2: CASSETTE TAPE */
/* ============================================================ */
.fap.fap-skin-cassette {
    background: linear-gradient(180deg, #8b0000 0%, #5c0000 100%) !important;
    color: #ffd700 !important;
    padding: 30px 25px !important;
    border-radius: 12px;
    box-shadow:
        0 12px 40px rgba(0,0,0,0.6),
        inset 0 2px 0 rgba(255,255,255,0.2),
        inset 0 -2px 0 rgba(0,0,0,0.3);
}
.fap-skin-cassette .fap-skin-btn {
    background: rgba(0,0,0,0.3);
    border-color: rgba(255,215,0,0.3);
    color: #ffd700;
}
.fap-skin-cassette .fap-now {
    background: #fff;
    border: 2px solid #1a1a1a;
    padding: 8px 12px !important;
    border-radius: 2px;
    color: #1a1a1a !important;
    margin-bottom: 16px !important;
}
.fap-skin-cassette .fap-now-cover { display: none !important; }
.fap-skin-cassette .fap-now-info { color: #1a1a1a !important; }
.fap-skin-cassette .fap-now-title {
    font-family: Georgia, serif; font-style: italic;
    color: #1a1a1a !important;
    font-size: 15px !important;
}
.fap-skin-cassette .fap-now-meta { color: #666 !important; font-size: 11px !important; }

.fap-skin-cassette .fap-cass-window {
    background: #1a1a1a;
    border: 3px solid #1a1a1a; border-radius: 6px;
    padding: 15px; margin-bottom: 16px;
    display: flex; justify-content: space-around; align-items: center;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    order: -1; /* 가장 위로 */
}
.fap-skin-cassette .fap-cass-reel {
    width: 60px; height: 60px; border-radius: 50%;
    background:
        radial-gradient(circle, #333 0 20%, transparent 20%),
        conic-gradient(#fff 0deg 45deg, #999 45deg 90deg, #fff 90deg 135deg, #999 135deg 180deg, #fff 180deg 225deg, #999 225deg 270deg, #fff 270deg 315deg, #999 315deg);
    animation: fap-cass-spin 2s linear infinite;
    border: 2px solid #555;
}
.fap-skin-cassette .fap-cass-center {
    color: #ffd700; font-family: monospace; font-size: 10px; text-align: center;
}
.fap-skin-cassette .fap-cass-center div:first-child { font-size: 13px; font-weight: bold; }
@keyframes fap-cass-spin { to { transform: rotate(360deg); } }

.fap-skin-cassette .fap-visualizer { filter: hue-rotate(-30deg) saturate(0.8); opacity: 0.7; }
.fap-skin-cassette .fap-time { color: #ffd700 !important; font-family: monospace; }
.fap-skin-cassette .fap-seek-bar::before { background: rgba(255,215,0,0.2) !important; }
.fap-skin-cassette .fap-seek-played { background: #ffd700 !important; }
.fap-skin-cassette .fap-seek-thumb { background: #ffd700 !important; }
.fap-skin-cassette .fap-btn {
    background: #1a1a1a !important; color: #ffd700 !important;
    width: 38px !important; height: 38px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.fap-skin-cassette .fap-btn-play { background: #ffd700 !important; color: #1a1a1a !important; width: 46px !important; height: 46px !important; }
/* ★ Cassette: 비활성 흐릿하게 (opacity), 활성 진하게 (구분) */
/*    hover 시 opacity 변화 없음 — active와 헷갈림 방지 */
.fap-skin-cassette .fap-btn-shuffle,
.fap-skin-cassette .fap-btn-loop {
    opacity: 0.5;
}
.fap-skin-cassette .fap-btn-shuffle.active,
.fap-skin-cassette .fap-btn-loop.active {
    color: #ffd700 !important;
    opacity: 1;
}
.fap-skin-cassette .fap-vol-bar::before { background: rgba(255,215,0,0.2) !important; }
.fap-skin-cassette .fap-vol-level { background: #ffd700 !important; }
.fap-skin-cassette .fap-playlist-header,
.fap-skin-cassette .fap-playlist-title,
.fap-skin-cassette .fap-playlist-count { color: #ffd700 !important; }
.fap-skin-cassette .fap-pl-item { color: rgba(255,215,0,0.8) !important; border-bottom: 1px solid rgba(255,215,0,0.1); }
.fap-skin-cassette .fap-pl-item:hover { background: rgba(255,215,0,0.1) !important; }
.fap-skin-cassette .fap-pl-item.playing { background: rgba(255,215,0,0.2) !important; color: #ffd700 !important; }
/* ★ 재생중 넘버링도 제목과 같은 색 (노랑) */
/*    재생중(playing)일 때만 강조 — 멈춤(active만)일 땐 일반색 */
.fap-skin-cassette .fap-pl-item.playing .fap-pl-num {
    color: #ffd700 !important;
    opacity: 1;
}

/* ============================================================ */
/* 스킨 3: TERMINAL */
/* ============================================================ */
.fap.fap-skin-terminal {
    background: #0c0c0c !important;
    color: #00ff41 !important;
    padding: 0 !important;
    border: 1px solid #30363d;
    border-radius: 6px;
    font-family: 'Courier New', 'Consolas', monospace !important;
    box-shadow: 0 10px 40px rgba(0,255,65,0.15);
}
.fap-skin-terminal .fap-skin-selector {
    top: 5px; right: 12px; z-index: 20;
}
.fap-skin-terminal .fap-skin-btn {
    background: rgba(0,0,0,0.5);
    border-color: #30363d;
    color: #00ff41;
    font-family: inherit;
}
.fap-skin-terminal .fap-skin-menu {
    background: #0c0c0c;
    border-color: #30363d;
    font-family: inherit;
}
.fap-skin-terminal .fap-skin-item { color: #c9d1d9; }
.fap-skin-terminal .fap-skin-item:hover { background: #161b22; }
.fap-skin-terminal .fap-skin-item.active { background: rgba(0,255,65,0.15); color: #00ff41; }
/* 비주얼라이저 색상 아이템 (터미널 다크 배경 대응) */
.fap-skin-terminal .fap-skin-section-title {
    color: #8b949e;
    border-top-color: #30363d;
}
.fap-skin-terminal .fap-vis-color-item { color: #c9d1d9; }
.fap-skin-terminal .fap-vis-color-item:hover { background: #161b22; }
.fap-skin-terminal .fap-vis-color-item.active { background: rgba(0,255,65,0.15); color: #00ff41; }
.fap-skin-terminal .fap-vis-color-swatch { border-color: #30363d; }

.fap-skin-terminal .fap-term-titlebar {
    background: #161b22;
    border-bottom: 1px solid #30363d;
    padding: 8px 12px;
    display: flex; gap: 6px; align-items: center;
    font-size: 12px; color: #8b949e;
    border-radius: 5px 5px 0 0;
    order: -10;
}
.fap-skin-terminal .fap-term-dot {
    width: 11px; height: 11px; border-radius: 50%;
}
.fap-skin-terminal .fap-term-dot.r { background: #ff5f56; }
.fap-skin-terminal .fap-term-dot.y { background: #ffbd2e; }
.fap-skin-terminal .fap-term-dot.g { background: #27c93f; }
.fap-skin-terminal .fap-term-title { margin-left: 10px; color: #8b949e; font-size: 11px; }
.fap-skin-terminal .fap-term-prompt {
    padding: 8px 16px;
    font-family: inherit;
    color: #c9d1d9;
    font-size: 13px;
    border-top: 1px solid #30363d;
}
.fap-skin-terminal .fap-term-p { color: #58a6ff; margin-right: 8px; }
.fap-skin-terminal .fap-term-cursor {
    display: inline-block;
    background: #00ff41;
    width: 7px; height: 13px;
    vertical-align: middle;
    margin-left: 2px;
    animation: fap-term-blink 1s step-end infinite;
}
@keyframes fap-term-blink { 50% { opacity: 0; } }

.fap-skin-terminal .fap-now,
.fap-skin-terminal .fap-visualizer,
.fap-skin-terminal .fap-seek,
.fap-skin-terminal .fap-controls,
.fap-skin-terminal .fap-volume,
.fap-skin-terminal .fap-playlist {
    padding-left: 16px;
    padding-right: 16px;
}
.fap-skin-terminal .fap-now-cover { display: none !important; }
.fap-skin-terminal .fap-now-title {
    color: #00ff41 !important;
    font-family: inherit;
    font-size: 14px !important;
}
.fap-skin-terminal .fap-now-title::before { content: "▶ "; color: #58a6ff; }
.fap-skin-terminal .fap-now-meta {
    color: #8b949e !important;
    font-family: inherit;
    font-size: 11px;
}
.fap-skin-terminal .fap-visualizer { filter: hue-rotate(75deg) saturate(1.5); }
/* ★ Terminal 시간 표시: 형광초록 (스킨 색상에 맞춤 - 재생바와 동일) */
.fap-skin-terminal .fap-time {
    color: #00ff41 !important;
    font-family: inherit;
}
.fap-skin-terminal .fap-seek-bar::before { background: #30363d !important; }
.fap-skin-terminal .fap-seek-played { background: #00ff41 !important; }
.fap-skin-terminal .fap-seek-loaded { background: #21262d !important; }
.fap-skin-terminal .fap-seek-thumb { background: #00ff41 !important; }
.fap-skin-terminal .fap-btn {
    background: transparent !important;
    border: 1px solid #30363d !important;
    color: #00ff41 !important;
    border-radius: 3px !important;
    width: auto !important; height: auto !important;
    padding: 6px 10px !important;
}
.fap-skin-terminal .fap-btn:hover { background: rgba(0,255,65,0.1) !important; border-color: #00ff41 !important; }
/* ★ 셔플/반복 hover 색상/배경/보더 변화 X (active와 헷갈림 방지) */
/*    기본 보더 (#30363d)는 유지, 형광초록으로 안 변하게 */
.fap-skin-terminal .fap-btn-shuffle:hover,
.fap-skin-terminal .fap-btn-loop:hover {
    background: transparent !important;
    border-color: #30363d !important;
}
.fap-skin-terminal .fap-btn-play {
    background: rgba(0,255,65,0.15) !important;
    border-color: #00ff41 !important;
}
/* ★ Terminal: 비활성 흐릿하게 (opacity), 활성 진하게 (구분) */
/*    hover 시 opacity 변화 없음 — active와 헷갈림 방지 */
.fap-skin-terminal .fap-btn-shuffle,
.fap-skin-terminal .fap-btn-loop {
    opacity: 0.5;
}
.fap-skin-terminal .fap-btn-shuffle.active,
.fap-skin-terminal .fap-btn-loop.active {
    color: #00ff41 !important;
    opacity: 1;
}
.fap-skin-terminal .fap-vol-bar::before { background: #30363d !important; }
.fap-skin-terminal .fap-vol-level { background: #00ff41 !important; }
.fap-skin-terminal .fap-playlist-header {
    color: #8b949e !important;
    border-top: 1px solid #30363d;
    padding-top: 12px !important;
    margin-top: 10px;
}
.fap-skin-terminal .fap-playlist-title,
.fap-skin-terminal .fap-playlist-count { color: #8b949e !important; }
.fap-skin-terminal .fap-pl-item { color: #c9d1d9 !important; font-family: inherit; }
.fap-skin-terminal .fap-pl-item:hover { background: #161b22 !important; }
.fap-skin-terminal .fap-pl-item.playing {
    background: rgba(0,255,65,0.1) !important; color: #00ff41 !important;
}
/* ★ 재생중 넘버링도 제목과 같은 색 (형광초록) */
/*    재생중(playing)일 때만 강조 — 멈춤(active만)일 땐 일반색 */
.fap-skin-terminal .fap-pl-item.playing .fap-pl-num {
    color: #00ff41 !important;
    opacity: 1;
}

/* ============================================================ */
/* 스킨 4: PIXEL ART */
/* ============================================================ */
.fap.fap-skin-pixel {
    background: #9bbc0f !important;
    color: #0f380f !important;
    padding: 16px !important;
    border: 4px solid #0f380f;
    font-family: 'Courier New', monospace !important;
    box-shadow: 0 0 0 4px #9bbc0f, 8px 8px 0 #306230;
    image-rendering: pixelated;
}
.fap-skin-pixel .fap-skin-btn {
    background: #0f380f;
    color: #9bbc0f;
    border: 2px solid #0f380f;
    border-radius: 0;
    font-family: inherit;
    font-weight: bold;
}
.fap-skin-pixel .fap-skin-menu {
    background: #0f380f;
    border: 2px solid #0f380f;
    border-radius: 0;
    font-family: inherit;
}
.fap-skin-pixel .fap-skin-item { color: #9bbc0f; font-weight: bold; text-transform: uppercase; }
.fap-skin-pixel .fap-skin-item:hover { background: #306230; }
.fap-skin-pixel .fap-skin-item.active { background: #9bbc0f; color: #0f380f; }
/* 비주얼라이저 색상 아이템 (Game Boy 배경 대응) */
.fap-skin-pixel .fap-skin-section-title {
    color: #8bac0f;
    border-top-color: #306230;
    font-family: inherit;
    font-weight: bold;
}
.fap-skin-pixel .fap-vis-color-item { color: #9bbc0f; font-weight: bold; text-transform: uppercase; }
.fap-skin-pixel .fap-vis-color-item:hover { background: #306230; }
.fap-skin-pixel .fap-vis-color-item.active { background: #9bbc0f; color: #0f380f; }
.fap-skin-pixel .fap-vis-color-swatch { 
    border-color: #0f380f;
    border-radius: 0;
    image-rendering: pixelated;
}

.fap-skin-pixel .fap-now-cover {
    width: 100px !important; height: 100px !important;
    border-radius: 0 !important;
    background: #306230 !important;
    border: 3px solid #0f380f !important;
    image-rendering: pixelated;
}
.fap-skin-pixel .fap-now-cover img { image-rendering: pixelated; }
.fap-skin-pixel .fap-now-title {
    font-family: inherit;
    text-transform: uppercase;
    font-weight: bold;
    color: #0f380f !important;
    letter-spacing: 1px;
}
.fap-skin-pixel .fap-now-meta {
    font-family: inherit;
    color: #306230 !important;
    text-transform: uppercase;
    font-size: 11px;
}
.fap-skin-pixel .fap-visualizer { filter: hue-rotate(35deg) saturate(0.8) contrast(1.5); image-rendering: pixelated; }
.fap-skin-pixel .fap-time { color: #0f380f !important; font-family: inherit; font-weight: bold; }
.fap-skin-pixel .fap-seek-bar::before {
    background: #0f380f !important;
    height: 14px !important;
    border-radius: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.fap-skin-pixel .fap-seek-played {
    background: repeating-linear-gradient(90deg, #9bbc0f 0 6px, #0f380f 6px 7px) !important;
    border-radius: 0 !important;
    height: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.fap-skin-pixel .fap-seek-thumb {
    background: #9bbc0f !important;
    border: 2px solid #0f380f;
    border-radius: 0 !important;
    width: 10px !important;
    height: 14px !important;
}
.fap-skin-pixel .fap-btn {
    background: #0f380f !important;
    color: #9bbc0f !important;
    border: 3px solid #0f380f !important;
    border-radius: 0 !important;
    font-weight: bold;
    font-family: inherit;
}
.fap-skin-pixel .fap-btn:hover { background: #306230 !important; }
/* ★ 셔플/반복 hover 배경 변화 X (active와 헷갈림 방지) — 원래 배경 유지 */
.fap-skin-pixel .fap-btn-shuffle:hover,
.fap-skin-pixel .fap-btn-loop:hover {
    background: #0f380f !important;  /* 픽셀 기본 배경 유지 */
}
.fap-skin-pixel .fap-btn-play { background: #306230 !important; }
/* ★ Pixel: 비활성 흐릿하게 (opacity), 활성 진하게 (구분) */
/*    hover 시 opacity 변화 없음 — active와 헷갈림 방지 */
.fap-skin-pixel .fap-btn-shuffle,
.fap-skin-pixel .fap-btn-loop {
    opacity: 0.5;
}
.fap-skin-pixel .fap-btn-shuffle.active,
.fap-skin-pixel .fap-btn-loop.active {
    color: #9bbc0f !important;
    opacity: 1;
}
.fap-skin-pixel .fap-vol-bar::before { background: #0f380f !important; border-radius: 0 !important; }
.fap-skin-pixel .fap-vol-level {
    background: repeating-linear-gradient(90deg, #9bbc0f 0 4px, #0f380f 4px 5px) !important;
    border-radius: 0 !important;
}
.fap-skin-pixel .fap-playlist-header { color: #0f380f !important; font-weight: bold; }
.fap-skin-pixel .fap-playlist-title,
.fap-skin-pixel .fap-playlist-count { color: #0f380f !important; font-family: inherit; text-transform: uppercase; }
.fap-skin-pixel .fap-pl-item { color: #0f380f !important; font-family: inherit; border-bottom: 2px solid rgba(15,56,15,0.2); }
.fap-skin-pixel .fap-pl-item:hover { background: rgba(15,56,15,0.1) !important; }
.fap-skin-pixel .fap-pl-item.playing { background: #0f380f !important; color: #9bbc0f !important; }
/* ★ 재생중 넘버링도 제목과 같은 색 (게임보이 연두) */
/*    재생중(playing)일 때만 강조 — 멈춤(active만)일 땐 일반색 */
.fap-skin-pixel .fap-pl-item.playing .fap-pl-num {
    color: #9bbc0f !important;
    opacity: 1;
}


/* ============================================================ */
/* 스킨 6: APLAYER FIXED (이미지 1 기반) - 블랙핑크 스타일 */
/* 좌측: 헤더 + 큰 앨범 커버 + 가사 + seek + 컨트롤 + 볼륨 */
/* 우측: 플레이리스트 (각 트랙에 앨범 아트 포함) */
/* ============================================================ */
.fap.fap-skin-ap-fixed {
    background: #fff !important;
    color: #333 !important;
    padding: 0 !important;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    overflow: hidden;
    display: grid !important;
    grid-template-columns: 340px 1fr;
    /* Row 1: 커버(고정) / Row 2: 가사 / Row 3: 시킹바 / Row 4: 컨트롤 / Row 5: 볼륨(남은공간 흡수) */
    /* ★ 마지막 행 1fr (펜닐님 결정 v5.8.1c): 모달 크기 변화 시 남는 공간을 마지막 볼륨 행이 흡수 */
    /*    → 컨트롤/시킹바 사이는 콘텐츠 크기 그대로(auto), 빈 공간은 볼륨 아래(밑면)로 몰림 */
    /*    이전엔 모든 행 auto라 brtype 사이에 빈 공간 분산됐음 */
    grid-template-rows: 340px auto auto auto 1fr !important;
    gap: 0 !important;
    min-height: 460px;
    position: relative;
}
/* ★ iOS: 볼륨 영역 숨김 시 grid 마지막 행 제거 (좌측 column 빈 공간 방지) */
/*    iOS도 마지막 행(컨트롤)을 1fr로 → 남는 공간을 컨트롤 아래로 몰아둠 */
.fap.fap-skin-ap-fixed.fap-ios {
    grid-template-rows: 340px auto auto 1fr !important;
    min-height: auto;
}
/* 스킨 선택기: 우측 상단에 고정, 플레이리스트 영역 위에 오버레이 */
.fap-skin-ap-fixed .fap-skin-selector {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 30;
}
.fap-skin-ap-fixed .fap-skin-btn {
    background: rgba(0,0,0,0.1);
    border-color: rgba(0,0,0,0.15);
    color: #666;
    backdrop-filter: blur(6px);
}
.fap-skin-ap-fixed .fap-skin-btn:hover { background: rgba(0,0,0,0.2); color: #333; }
.fap-skin-ap-fixed .fap-skin-menu {
    background: #fff;
    border-color: #ddd;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.fap-skin-ap-fixed .fap-skin-item { color: #333; }
.fap-skin-ap-fixed .fap-skin-item:hover { background: #f5f5f5; }
.fap-skin-ap-fixed .fap-skin-item.active { background: rgba(58,192,255,0.15); color: #3ac0ff; }
/* 비주얼라이저 색상 아이템 (흰 배경 대응) */
.fap-skin-ap-fixed .fap-skin-section-title {
    color: rgba(0,0,0,0.5);
    border-top-color: rgba(0,0,0,0.08);
}
.fap-skin-ap-fixed .fap-vis-color-item { color: #333; }
.fap-skin-ap-fixed .fap-vis-color-item:hover { background: #f5f5f5; }
.fap-skin-ap-fixed .fap-vis-color-item.active { background: rgba(58,192,255,0.15); color: #3ac0ff; }
.fap-skin-ap-fixed .fap-vis-color-swatch { border-color: rgba(0,0,0,0.15); }

/* 제목/아티스트 헤더 - 커버 위에 오버레이 (absolute) */
.fap-skin-ap-fixed .fap-now {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 340px !important;
    z-index: 10;
    background: linear-gradient(180deg, rgba(40,20,25,0.85) 0%, rgba(40,20,25,0.7) 70%, rgba(40,20,25,0) 100%) !important;
    color: #fff !important;
    padding: 14px 16px 24px !important;
    margin: 0 !important;
    text-align: center;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* grid 배치 해제 */
    grid-column: unset !important;
    grid-row: unset !important;
}
/* fap-now 안의 작은 커버는 숨김 (아래에 큰 커버로 별도 표시) */
.fap-skin-ap-fixed .fap-now-cover {
    display: none !important;
}
.fap-skin-ap-fixed .fap-now-info {
    color: #fff !important;
    text-align: center;
    width: 100%;
}
.fap-skin-ap-fixed .fap-now-title {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700;
    margin-bottom: 3px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fap-skin-ap-fixed .fap-now-meta {
    color: rgba(255,255,255,0.75) !important;
    font-size: 12px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 1행: 큰 앨범 커버 (헤더 위에 오버레이로 제목 표시됨) */
.fap-skin-ap-fixed .fap-visualizer,
.fap-skin-ap-fixed .fap-vu-canvas-wrap,
.fap-skin-ap-fixed .fap-vu-svg-root {
    /* 비주얼라이저 + VU 미터 wrapper/오버레이 모두 숨김 (10th rev) */
    display: none !important;
}
.fap-skin-ap-fixed .fap-ap-cover-big {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 340px;
    max-height: 340px;
    overflow: hidden;
    /* 기본 플레이어와 동일한 커버 배경 (옅은 보라톤) */
    background: linear-gradient(135deg, rgba(124,110,246,0.25), rgba(124,110,246,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.fap-skin-ap-fixed .fap-ap-cover-big img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 이미지 없을 때: 기본 플레이어의 🎵 아이콘 (큰 사이즈) */
.fap-skin-ap-fixed .fap-ap-cover-icon {
    font-size: 120px;
    opacity: 0.5;
    line-height: 1;
}

/* 2행: seek 바 */
.fap-skin-ap-fixed .fap-seek {
    grid-column: 1;
    grid-row: 3;  /* 가사 행(2) 추가로 한 칸 밀림 */
    align-self: start;     /* 행 상단에 고정 (행 stretch 방지) */
    /* ★ 위 여백 늘림: 썸네일과 시킹바 사이 시각적 분리 (펜닐님 요청 v5.8.1c) */
    padding: 16px 16px 8px !important;
    background: #fff;
    margin: 0 !important;
}
.fap-skin-ap-fixed .fap-time { color: #3ac0ff !important; font-size: 11px !important; }
.fap-skin-ap-fixed .fap-seek-bar::before { background: #eee !important; height: 3px !important; }
.fap-skin-ap-fixed .fap-seek-played { background: #3ac0ff !important; height: 3px !important; }
.fap-skin-ap-fixed .fap-seek-loaded { background: #ddd !important; height: 3px !important; }
.fap-skin-ap-fixed .fap-seek-thumb {
    background: #3ac0ff !important;
    width: 10px !important;
    height: 10px !important;
}

/* 4행: 컨트롤 버튼들 (중앙 정렬) - 가사 행 추가로 한 칸 밀림 */
.fap-skin-ap-fixed .fap-controls {
    grid-column: 1;
    grid-row: 4;
    align-self: start;     /* 행 상단에 고정 */
    /* ★ 상하 여백 늘림: 시킹바/볼륨과 시각적 분리 (펜닐님 요청 v5.8.1c) */
    padding: 16px 16px !important;
    background: #fff;
    justify-content: center !important;
    gap: 16px !important;
}
.fap-skin-ap-fixed .fap-btn {
    color: #444 !important;
    background: transparent !important;
    width: 36px !important;
    height: 36px !important;
}
.fap-skin-ap-fixed .fap-btn:hover { color: #3ac0ff !important; background: rgba(58,192,255,0.1) !important; }
/* ★ 셔플/반복 hover 색상 변화 X (active와 헷갈림 방지) */
.fap-skin-ap-fixed .fap-btn-shuffle:hover,
.fap-skin-ap-fixed .fap-btn-loop:hover { color: #999 !important; background: transparent !important; }
.fap-skin-ap-fixed .fap-btn-shuffle.active:hover,
.fap-skin-ap-fixed .fap-btn-loop.active:hover { color: #3ac0ff !important; }
/* ★ ap-fixed: 비활성은 중성 회색 (다른 스킨과 통일감) */
.fap-skin-ap-fixed .fap-btn-shuffle,
.fap-skin-ap-fixed .fap-btn-loop {
    color: #999 !important;
}
/* ★ ap-fixed active: 스카이블루 (재생바와 동일) */
.fap-skin-ap-fixed .fap-btn-shuffle.active,
.fap-skin-ap-fixed .fap-btn-loop.active {
    color: #3ac0ff !important;
}
.fap-skin-ap-fixed .fap-btn-play {
    background: transparent !important;
    color: #3ac0ff !important;
    width: 48px !important;
    height: 48px !important;
    border: 1.5px solid #3ac0ff !important;
}
.fap-skin-ap-fixed .fap-btn-play:hover {
    background: rgba(58,192,255,0.1) !important;
}

/* 5행: 볼륨 - 가사 행 추가로 한 칸 밀림 */
/* ★ 볼륨 컨트롤 바로 아래 고정 (펜닐님 요청 v5.8.1c) */
/*    grid 마지막 행(1fr)이 모달 크기에 따라 늘어나는데, align-self: start로 행 상단에 고정 */
/*    → 컨트롤(4행) 바로 아래에 볼륨이 붙어 보임. 남는 공간은 볼륨 아래(모달 바닥)로 몰림 */
.fap-skin-ap-fixed .fap-volume {
    grid-column: 1;
    grid-row: 5;
    align-self: start;     /* 행 상단 = 컨트롤 바로 아래에 고정 */
    padding: 12px 16px 16px !important;
    background: #fff;
    margin: 0 !important;
}
.fap-skin-ap-fixed .fap-btn-vol { color: #3ac0ff !important; }
.fap-skin-ap-fixed .fap-vol-bar::before { background: #eee !important; }
.fap-skin-ap-fixed .fap-vol-level { background: #3ac0ff !important; }
.fap-skin-ap-fixed .fap-vol-thumb { background: #3ac0ff !important; }

/* 우측: 플레이리스트 (전 행에 걸쳐) */
.fap-skin-ap-fixed .fap-playlist {
    grid-column: 2;
    grid-row: 1 / -1;
    background: #fff;
    border-left: 1px solid #eee;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.fap-skin-ap-fixed .fap-playlist-header {
    background: #fafafa;
    border-bottom: 1px solid #eee;
    padding: 14px 16px !important;
    position: sticky; top: 0; z-index: 5;
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.fap-skin-ap-fixed .fap-playlist-title,
.fap-skin-ap-fixed .fap-playlist-count { color: #666 !important; font-size: 14px !important; }
.fap-skin-ap-fixed .fap-playlist-list {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

/* 플레이리스트 아이템: 앨범 아트 + 제목 (이미지 1처럼) */
.fap-skin-ap-fixed .fap-pl-item {
    padding: 10px 16px !important;
    color: #333 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    height: 60px !important;
}
.fap-skin-ap-fixed .fap-pl-item:hover { background: #f5f5f5 !important; }
.fap-skin-ap-fixed .fap-pl-item.active,
.fap-skin-ap-fixed .fap-pl-item.playing {
    background: #eeeeee !important;
    color: #333 !important;
}
/* 재생 중일 때 제목 + 넘버링을 스카이블루 포인트 컬러로 (재생바와 동일) */
/*    재생중(playing)일 때만 강조 — 멈춤(active만)일 땐 일반색 */
.fap-skin-ap-fixed .fap-pl-item.playing .fap-pl-name,
.fap-skin-ap-fixed .fap-pl-item.playing .fap-pl-num {
    color: #3ac0ff !important;
    font-weight: 500 !important;
}
/* ap-fixed 스킨에서는 재생 중 앨범아트에 ♪ 오버레이 덮지 않음 (깔끔한 디자인 유지) */
.fap-skin-ap-fixed .fap-pl-item.playing .fap-pl-cover::after {
    display: none !important;
}
/* 각 아이템의 커버 아트를 명확히 표시 */
.fap-skin-ap-fixed .fap-pl-cover {
    width: 40px !important;
    height: 40px !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #ffb3c6, #ff6b9d) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 18px !important;
}
.fap-skin-ap-fixed .fap-pl-cover img {
    width: 100%; height: 100%; object-fit: cover;
}
.fap-skin-ap-fixed .fap-pl-name {
    flex: 1 !important;
    color: #333 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
}
.fap-skin-ap-fixed .fap-pl-dur {
    color: #999 !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
}
/* ★ ap-fixed: 재생중 dur 색상도 스카이블루 (제목과 동일) */
/*    재생중(playing)일 때만 강조 — 멈춤(active만)일 땐 일반색 */
.fap-skin-ap-fixed .fap-pl-item.playing .fap-pl-dur {
    color: #3ac0ff !important;
    opacity: 1;
}

/* 반응형: 좁은 화면에서는 위아래로 스택 */
@media (max-width: 768px) {
    .fap.fap-skin-ap-fixed {
        grid-template-columns: 1fr;
        /* Row 1: 커버 / Row 2: 가사 / Row 3: 시킹바 / Row 4: 컨트롤 / Row 5: 볼륨 / Row 6: 플레이리스트(1fr 남은공간 흡수) */
        grid-template-rows: 240px auto auto auto auto 1fr !important;
        min-height: auto;
    }
    .fap-skin-ap-fixed .fap-now {
        /* 모바일에서도 커버 위에 오버레이 */
        width: 100% !important;
    }
    .fap-skin-ap-fixed .fap-ap-cover-big { grid-column: 1; grid-row: 1; height: 240px !important; max-height: 240px; }
    .fap-skin-ap-fixed .fap-lyrics-wrap { grid-column: 1; grid-row: 2; }
    .fap-skin-ap-fixed .fap-seek { grid-column: 1; grid-row: 3; }
    .fap-skin-ap-fixed .fap-controls { grid-column: 1; grid-row: 4; }
    .fap-skin-ap-fixed .fap-volume { grid-column: 1; grid-row: 5; }
    .fap-skin-ap-fixed .fap-playlist {
        grid-column: 1; grid-row: 6;
        border-left: none;
        border-top: 1px solid #eee;
        max-height: 300px;
    }
    /* ★ iOS: 볼륨 영역 숨김 시 playlist를 row 5 자리로 이동 (빈 공간 방지) */
    .fap.fap-skin-ap-fixed.fap-ios {
        grid-template-rows: 240px auto auto auto 1fr !important;
    }
    .fap.fap-skin-ap-fixed.fap-ios .fap-playlist {
        grid-row: 5;
    }
}


/* PDF 미리보기 */
.preview-pdf,
.preview-pdf-container {
    width: 100%;
    height: 100%;
    min-width: 400px;
    border: none;
    background: #525659;
}

/* PDF 미리보기 시 모달을 크게 */
.modal-preview.preview-pdf-mode {
    width: 90vw;
    height: 90vh;
}

.modal-preview.preview-pdf-mode .modal-body {
    flex: 1;
    overflow: hidden;
}

.modal-preview.preview-pdf-mode #preview-content {
    width: 100%;
    height: 100%;
}

.modal-preview.preview-pdf-mode .preview-pdf,
.modal-preview.preview-pdf-mode .preview-pdf-container {
    width: 100%;
    height: 100%;
}

.preview-text,
.preview-code {
    margin: 0;
    padding: 20px;
    background: #1e1e1e;
    color: #d4d4d4;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.5;
    overflow: auto;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    /* 다크 배경용 스크롤바 (글로벌 스타일 오버라이드) */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.preview-text::-webkit-scrollbar,
.preview-code::-webkit-scrollbar { width: 4px; height: 4px; }
.preview-text::-webkit-scrollbar-track,
.preview-code::-webkit-scrollbar-track { background: transparent; }
.preview-text::-webkit-scrollbar-thumb,
.preview-code::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
    border-radius: 4px;
    transition: background 0.15s;
}
.preview-text:hover::-webkit-scrollbar,
.preview-code:hover::-webkit-scrollbar { width: 6px; height: 6px; }
.preview-text::-webkit-scrollbar-thumb:hover,
.preview-code::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.45);
}

.preview-footer {
    background: #f5f5f5;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.preview-footer .btn {
    padding: 4px 10px;
    font-size: 13px;
}
.preview-footer .vec-container {
    margin-right: auto;
}

.preview-header-dl {
    display: none;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    flex-shrink: 0;
    opacity: 0.85;
}
.preview-header-dl:hover {
    opacity: 1;
}

.preview-loading,
.preview-error {
    color: #fff;
    padding: 40px;
    text-align: center;
    font-size: 16px;
}

.preview-error {
    color: #ff6b6b;
}

/* ========== 권한 설정 ========== */
.permission-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.permission-section h4 {
    margin: 0 0 15px 0;
    font-size: 15px;
    color: #333;
}

.permission-bulk {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    font-size: 13px;
}

.permission-bulk span {
    font-weight: 500;
    color: #666;
}

.permission-bulk label {
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    font-size: 12px;
}

.permission-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.permission-row {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    gap: 8px;
}

.permission-row:last-child {
    border-bottom: none;
}

.permission-row:hover {
    background: #fafafa;
}

.perm-user {
    flex: 0 0 130px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.perm-checks {
    display: flex;
    gap: 6px;
    flex: 1;
}

.permission-row label {
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 12px;
}

/* 경로 셀 */
.path-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Consolas', monospace;
    font-size: 12px;
}

/* ========== 스토리지 용량 ========== */
.storage-quota {
    margin-top: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.quota-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.quota-used {
    height: 100%;
    min-width: 4px;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.3s;
}

.quota-used.quota-warning {
    background: #ff9800;
}

.quota-used.quota-danger {
    background: #f44336;
}

.quota-text {
    margin-top: 5px;
    font-size: 11px;
    color: var(--sidebar-text);
    text-align: center;
    opacity: 0.8;
}

/* ========== 보안 설정 ========== */
.security-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.security-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.security-section h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 15px;
}

.security-section textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: 'Consolas', monospace;
    font-size: 13px;
    resize: vertical;
}

.security-section input[type="text"],
.security-section input[type="number"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* TOTP 설정 스타일 */
.totp-settings-info {
    background: #e3f2fd;
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #1565c0;
}

.totp-key-info {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: #f5f5f5;
    border-radius: 4px;
    font-family: 'Consolas', monospace;
}

.totp-key-info code {
    background: #fff;
    padding: 4px 8px;
    border-radius: 3px;
    border: 1px solid #ddd;
}

.input-hint {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-warning {
    background: #ff9800;
    color: #fff;
    border: none;
}

.btn-warning:hover {
    background: #f57c00;
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-row .form-group {
    flex: 1;
}

/* 국가 코드 목록 */
.country-codes-toggle {
    margin-top: 10px;
}

.country-codes-toggle > a {
    color: var(--primary);
    font-size: 13px;
    text-decoration: none;
}

.country-codes-toggle > a:hover {
    text-decoration: underline;
}

#country-codes-list {
    margin-top: 10px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.country-codes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.country-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.country-group strong {
    color: #3498db;
    font-size: 12px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.country-group span {
    font-size: 12px;
    color: #555;
    font-family: monospace;
}

/* ========== 용량 입력 ========== */
.quota-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quota-input input {
    width: 100px !important;
}

.quota-input select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.quota-hint {
    color: #999;
    font-size: 12px;
}

/* ========== 공유 카드 ========== */
.share-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

.share-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.share-file-icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.share-file-icon img.fs-file-icon-img {
    width: 32px;
    height: 32px;
}
/* 압축/자막 라벨 오버레이도 정상 표시되도록 */
.share-file-icon .fs-archive-icon,
.share-file-icon .fs-subtitle-icon {
    width: 32px;
    height: 32px;
    display: inline-block;
    position: relative;
}
.share-file-icon .fs-archive-icon > img,
.share-file-icon .fs-subtitle-icon > img {
    width: 32px;
    height: 32px;
}

.share-file-info {
    flex: 1;
    min-width: 0;
}

.share-file-name {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
}
.share-file-name.scrollable-name {
    overflow-x: auto !important;
    overflow: auto !important;
    text-overflow: clip !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.share-file-name.scrollable-name::-webkit-scrollbar { display: none; }

.share-file-path {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    cursor: pointer;
    user-select: none;
}
.share-file-path.scrollable-name {
    overflow-x: auto !important;
    overflow: auto !important;
    text-overflow: clip !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.share-file-path.scrollable-name::-webkit-scrollbar { display: none; }

.share-delete-btn {
    flex-shrink: 0;
}

.share-card-body {
    padding: 12px 15px;
}

.share-url-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.share-url-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    color: #555;
    background: #f9f9f9;
}

.share-url-input:focus {
    outline: none;
    border-color: #4a90d9;
}

.share-meta {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px 8px;
    font-size: 11px;
    color: #666;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* iOS Safari의 자동 폰트 조정 방지 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
.share-meta::-webkit-scrollbar { display: none; }

.share-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}

.share-type-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
    flex-shrink: 0;
}
.share-type-badge.download {
    background: #e8f5e9;
    color: #2e7d32;
}
.share-type-badge.stream {
    background: #fff3e0;
    color: #e65100;
}
.expire-soon {
    color: #e65100 !important;
    font-weight: 600;
}

.expire-expired {
    color: #999 !important;
    text-decoration: line-through;
}

.share-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.share-link-icon {
    font-size: 18px;
    opacity: 0.6;
    flex-shrink: 0;
}

#shares-list-container {
    max-height: 60vh;
    overflow-y: auto;
}
@media (max-width: 1024px) {
    #shares-list-container {
        max-height: none;
        flex: 1 1 auto;
    }
}

#shares-empty {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

/* ========== 사용자 상태 배지 ========== */
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-active {
    background: #d4edda;
    color: #155724;
}

.status-inactive {
    background: #e2e3e5;
    color: #6c757d;
}

.status-suspended {
    background: #f8d7da;
    color: #721c24;
}

.status-pending {
    background: #fff3cd;
    color: #856404;
}

/* ========== 시스템 설정 ========== */
.system-settings {
    margin-bottom: 20px;
}

.system-settings h3 {
    font-size: 14px;
    color: var(--primary);
    margin: 20px 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
}

.system-settings h3:first-child {
    margin-top: 0;
}

.setting-item {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 10px;
}

.setting-item > label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 14px;
}

.setting-item input[type="text"].form-control,
.setting-item input[type="password"].form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
}

.setting-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    cursor: pointer;
}

.setting-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.setting-desc {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: #666;
}

/* 배경 필터 프리셋 */
.filter-preset {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 8px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-preset:hover {
    background: #e8e8e8;
    transform: translateY(-2px);
}

.filter-preset.active {
    background: #e3f2fd;
    border-color: #2196f3;
}

.filter-preset .filter-icon {
    font-size: 24px;
}

.filter-preset .filter-name {
    font-size: 11px;
    color: #666;
    font-weight: 500;
}

.filter-preset.active .filter-name {
    color: #1976d2;
}

.setting-desc.current-path {
    color: #0066cc;
    font-family: monospace;
    font-size: 12px;
    background: #f0f7ff;
    padding: 5px 10px;
    border-radius: 4px;
    margin-top: 5px;
}

.setting-notice {
    background: #fff8e6;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
}

.setting-notice p {
    margin: 0 0 8px 0;
    color: #856404;
}

.setting-notice ul {
    margin: 0;
    padding-left: 20px;
    color: #856404;
}

.setting-notice li {
    margin: 5px 0;
    font-size: 13px;
}

/* 이미지 업로드 */
.image-upload-wrap {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 8px;
}

.image-preview {
    width: 80px;
    height: 80px;
    border: 2px dashed var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
}

.image-preview.bg-preview {
    width: 160px;
    height: 90px;
}

.image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.image-preview .no-image {
    font-size: 32px;
    opacity: 0.5;
}

.image-upload-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.image-upload-actions .btn {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.image-upload-actions .btn:not(.btn-danger) {
    background: var(--primary);
    color: #fff;
    border: none;
}

.image-upload-actions .btn:not(.btn-danger):hover {
    background: var(--primary-dark, #5a6fd6);
    opacity: 0.9;
}

.image-upload-actions .btn-danger {
    background: #fff;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.image-upload-actions .btn-danger:hover {
    background: var(--danger);
    color: #fff;
}

/* 로그인 로고 이미지 */
.login-logo img {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
}

.tab-btn.admin-only {
    display: none;
}

/* ========== 역할 관리 ========== */
.roles-list {
    max-height: 300px;
    overflow-y: auto;
}

.role-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 8px;
}

.role-item.role-default {
    background: #e8f0fe;
}

.role-name {
    font-weight: 500;
}

.role-hint {
    font-size: 12px;
    color: #888;
}

/* ========== 부 관리자 권한 설정 ========== */
.sub-admin-section {
    margin-top: 20px;
    padding: 15px;
    background: #f0f4f8;
    border-radius: 8px;
    border: 1px solid #dde3ea;
}

.sub-admin-section h4 {
    margin: 0 0 5px 0;
    color: #333;
}

.admin-menu-checks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.admin-menu-checks label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.admin-menu-checks label:hover {
    background: #e8f0fe;
}

/* ========== 2컬럼 폼 레이아웃 ========== */
.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 600px) {
    .form-row-2col {
        grid-template-columns: 1fr;
    }
    .admin-menu-checks {
        grid-template-columns: 1fr;
    }
}

/* ========== 정지 기간 설정 ========== */
.suspend-section {
    margin-top: 15px;
    padding: 15px;
    background: #fff5f5;
    border-radius: 8px;
    border: 1px solid #fed7d7;
}

.suspend-section h4 {
    margin: 0 0 10px 0;
    color: #c53030;
}

/* ========== 회원가입 ========== */
.login-links {
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
}

.login-links span {
    color: #666;
}

.login-links a {
    color: #4a90d9;
    text-decoration: none;
    font-weight: 500;
}

.login-links a:hover {
    text-decoration: underline;
}

.login-copyright {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.08);
    text-align: center;
    font-size: 11px;
    color: #999;
    line-height: 1.5;
}

/* 로그인 화면 언어 선택 */
.login-language-selector {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
}

.login-language-selector select {
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    background: rgba(255,255,255,0.9);
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.login-language-selector select:focus {
    outline: none;
    border-color: #4a90d9;
}

#signup-box {
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 25px 30px;
}

#signup-box::-webkit-scrollbar {
    width: 4px;
}

#signup-box::-webkit-scrollbar-track {
    background: transparent;
}

#signup-box::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
}

#signup-box::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.3);
}

#signup-box .login-logo {
    font-size: 36px;
    margin-bottom: 5px;
}

#signup-box h1 {
    margin-bottom: 15px;
    font-size: 22px;
}

#signup-box input {
    padding: 8px 14px;
    margin-bottom: 8px;
}

#signup-box .input-hint {
    margin-bottom: 5px;
}

#signup-box input + .input-hint,
#signup-box input + .password-strength {
    margin-top: -5px;
}

/* ========== 업로드 드롭다운 ========== */
/* 모바일 현재 위치 바 */
.mobile-location-bar {
    display: none;
    padding: 5px 12px;
    background: white;
    border-bottom: none;
    box-shadow: 0 1px 0 #f0f0f0;
    font-size: 12px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    text-align: left;
}

.mobile-location-bar span {
    direction: ltr;
    unicode-bidi: plaintext;
}

body.is-mobile .mobile-location-bar {
    display: block;
    position: sticky;
    top: 48px;
    z-index: 196;
    background: var(--bg, #fff);
}

body.is-mobile .header {
    height: 48px;
    padding: 0 12px;
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--bg, #fff);
}

body.is-mobile .mobile-search-bar {
    z-index: 199;
    background: var(--bg, #fff);
    position: sticky;
    top: 48px; /* header 높이 */
}

body.is-mobile .search-filters {
    z-index: 198;
    background: #f8f9fa;
    position: sticky;
    top: 48px; /* 기본값, JS에서 검색바 높이에 따라 조정 */
}

body.is-mobile .file-area > .toolbar {
    position: sticky;
    top: 76px; /* 48(header) + 28(location-bar), JS에서 동적 조정 */
    z-index: 195;
    background: var(--bg, #fff);
}

/* 모바일: #main-screen 이 스크롤 컨테이너 */
body.is-mobile #main-screen {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    height: 100vh;
    height: 100dvh;
}

body.is-mobile .main-content {
    overflow: visible;
    flex: none;
    min-height: 0;
}

body.is-mobile .file-area {
    overflow: visible;
    height: auto;
    flex: none;
}

body.is-mobile .file-list {
    overflow-y: visible;
    flex: none;
    padding: 12px;
}

/* 툴바 액션 드롭다운 */
.action-dropdown {
    position: relative;
    display: inline-block;
    z-index: auto;
}

.toolbar-action-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 185px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 7600;
    margin-top: 4px;
}

.toolbar-action-menu.show {
    display: block;
}

.action-option {
    padding: 9px 15px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}

.action-option:first-child {
    border-radius: 8px 8px 0 0;
}

.action-option:last-child {
    border-radius: 0 0 8px 8px;
}

.action-option:hover {
    background: #f0f0f0;
}

.action-option.danger {
    color: #e74c3c;
}

.action-option.danger:hover {
    background: #ffeaea;
}

.action-divider {
    height: 1px;
    background: #eee;
    margin: 4px 0;
}

.upload-dropdown {
    position: relative;
    display: inline-block;
    z-index: auto;
}

.upload-drag-hint {
    position: absolute;
    bottom: 100%;
    left: 0;
    font-size: 10px;
    color: #888;
    white-space: nowrap;
    line-height: 1;
    margin-bottom: 2px;
    pointer-events: none;
}

.upload-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 160px;
    z-index: 7600;
    margin-top: 4px;
}

.upload-option {
    padding: 9px 15px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}

.upload-option:first-child {
    border-radius: 8px 8px 0 0;
}

.upload-option:last-child {
    border-radius: 0 0 8px 8px;
}

.upload-option:hover {
    background: #f0f4ff;
}

/* ========== 파일 선택/삭제 ========== */
.select-all-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
}

.select-all-wrap input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.selection-info {
    padding: 4px 10px;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.toolbar-center {
    display: none; /* 기본 숨김, JS가 가시성 제어 */
    gap: 10px;
    align-items: center;
}

/* PC에서는 확실히 숨김 */
body.is-desktop .toolbar-center {
    display: none !important;
}

/* 모바일에서 파일 항목 수 숨기기 */
body.is-mobile .status-bar .status-left {
    display: flex !important;
}
body.is-mobile .status-bar .status-right {
    display: none !important;
}

body.is-mobile .status-bar {
    justify-content: flex-start !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 190;
}

/* status-bar fixed로 빠진 만큼 file-area가 화면을 채우도록 */
body.is-mobile .file-list {
    min-height: calc(100vh - 200px);
    min-height: calc(100dvh - 200px);
}

/* status-bar에 파일 목록 마지막이 가려지지 않도록 여백 */
body.is-mobile .file-area {
    padding-bottom: 36px;
}

/* 모바일 하단 플로팅 바 스타일 (display는 JS가 제어) */
body.is-mobile .toolbar-center {
    position: static;
    transform: none;
    width: 100%;
    justify-content: flex-start;
    z-index: auto;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    gap: 6px;
}

body.is-mobile .toolbar-center .btn {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 20px;
}

/* 모바일 게시판 툴바 */
body.is-mobile #board-inline-toolbar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: none;
}

body.is-mobile #board-inline-toolbar .toolbar-left {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap;
    display: flex;
    align-items: center;
}

body.is-mobile #board-inline-toolbar .toolbar-left .breadcrumb {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    padding: 0;
    min-width: 0;
}

body.is-mobile #board-inline-toolbar .toolbar-center {
    display: none;
}

body.is-mobile #board-inline-toolbar .toolbar-right {
    justify-content: flex-end;
    width: auto;
    flex: 0 0 auto;
    gap: 4px;
    align-items: center;
}

body.is-mobile #board-inline-toolbar #board-inline-search {
    width: 80px;
    height: 28px;
    font-size: 11px;
    padding-left: 24px;
}

body.is-mobile .btn-board-write {
    height: 28px !important;
    line-height: 1 !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
}

body.is-mobile #board-detail-search {
    width: 80px;
    height: 28px;
    font-size: 11px;
    padding-left: 24px;
}

.btn-outline-danger {
    background: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
}

.btn-outline-danger:hover {
    background: #dc3545;
    color: #fff;
}

/* 파일 아이템 체크박스 */
.file-check {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
}

.file-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.file-item:hover .file-check input[type="checkbox"],
.file-check input[type="checkbox"]:checked {
    opacity: 1;
}

/* 그리드 뷰 체크박스 위치 */
.grid-view .file-item {
    position: relative;
}

/* 리스트 뷰 체크박스 위치 */
.list-view .file-item {
    position: relative;
}

.list-view .file-check {
    position: relative;
    top: auto;
    left: auto;
    margin-right: 10px;
}

/* ========== 중복 파일 모달 ========== */
.duplicate-list {
    max-height: 200px;
    overflow-y: auto;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    margin: 10px 0;
}

.duplicate-item {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.duplicate-item:last-child {
    border-bottom: none;
}

.duplicate-hint {
    color: #666;
    font-size: 14px;
    margin-top: 15px;
}

.duplicate-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.duplicate-footer .btn {
    min-width: 100px;
}

.btn-warning {
    background: #f0ad4e;
    color: #fff;
    border: none;
}

.btn-warning:hover {
    background: #ec971f;
}

/* ========== QoS 속도 제한 설정 ========== */
.qos-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.qos-tab-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    border-radius: 6px 6px 0 0;
    transition: all 0.2s;
}

.qos-tab-btn:hover {
    background: #f0f0f0;
}

.qos-tab-btn.active {
    background: var(--primary);
    color: #fff;
}

.qos-tab-content {
    min-height: 300px;
}

.qos-user-search {
    margin-bottom: 15px;
}

.qos-user-search input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
}

.qos-list {
    max-height: 400px;
    overflow-y: auto;
}

.qos-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 10px;
}

.qos-item-name {
    font-weight: 500;
    font-size: 14px;
}

.qos-username {
    color: #888;
    font-weight: normal;
    font-size: 12px;
    margin-left: 5px;
}

.qos-item-settings {
    display: flex;
    gap: 20px;
}

.qos-item-settings label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #666;
}

.qos-item-settings input {
    width: 80px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: right;
    font-size: 13px;
}

.qos-unit {
    color: #888;
    font-size: 12px;
}

.qos-empty {
    text-align: center;
    color: #888;
    padding: 40px;
}

@media (max-width: 1024px) {
    .qos-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .qos-item-settings {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }
    
    .qos-item-settings input {
        flex: 1;
    }
}

/* ========== 통합 검색 결과 ========== */
.search-storage {
    display: inline-block;
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-right: 8px;
}

.search-path {
    color: #888;
    font-size: 11px;
    word-break: break-all;
}

.file-item .file-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.breadcrumb-item.current {
    color: #333;
    font-weight: 500;
    word-break: break-all;
}

.empty-folder {
    text-align: center;
    padding: 60px 20px;
    color: #888;
    font-size: 14px;
    grid-column: 1 / -1;
    width: 100%;
}

/* ========== 휴지통 UI ========== */
.trash-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 8px;
}

.trash-info {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: #666;
    align-items: center;
    flex-wrap: wrap;
}

.trash-info span {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.trash-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.trash-actions .btn-sm {
    white-space: nowrap;
    font-size: 12px;
    padding: 4px 8px;
}

.trash-list {
    max-height: 500px;
    overflow-y: auto;
}

.trash-select-all-wrap {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 4px;
}

.trash-select-all-wrap input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary, #667eea);
}

.trash-item-check {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
}

.trash-item-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary, #667eea);
}

.trash-selected-info {
    color: var(--primary, #667eea);
    font-weight: 600;
    font-size: 13px;
}

.trash-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fff;
    transition: all 0.2s;
}

.trash-item:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
}

.trash-item-icon {
    font-size: 28px;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trash-item-icon svg {
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
}

.trash-item-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.trash-item-name {
    font-weight: 500;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    cursor: pointer;
    user-select: none;
}
.trash-item-name.scrollable-name {
    overflow-x: auto !important;
    overflow: auto !important;
    text-overflow: clip !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.trash-item-name.scrollable-name::-webkit-scrollbar { display: none; }

.trash-item-meta {
    margin-bottom: 4px;
}

.trash-item-path {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
    cursor: pointer;
    user-select: none;
}
.trash-item-path.scrollable-name {
    overflow-x: auto !important;
    overflow: auto !important;
    text-overflow: clip !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.trash-item-path.scrollable-name::-webkit-scrollbar { display: none; }

.trash-item-details {
    display: flex;
    gap: 15px;
    font-size: 11px;
    color: #999;
}

.trash-item-details span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.trash-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.trash-item-actions .btn {
    padding: 6px 10px;
    font-size: 14px;
}

.trash-empty-msg {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}

.trash-empty-msg .empty-icon {
    font-size: 64px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.trash-empty-msg p {
    font-size: 14px;
    margin: 0;
}

/* 휴지통 카운트 (사이드바) */
.trash-count {
    color: #e74c3c;
    font-size: 12px;
    font-weight: 500;
}

/* ========== 활동 로그 ========== */
.activity-filters {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.activity-filters .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

.activity-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.activity-filters .filter-group label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.activity-filters .filter-group input,
.activity-filters .filter-group select {
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    height: 36px;
}

.activity-filters .filter-group select {
    min-width: 100px;
}

/* 기간 필터 - 가로 정렬 */
.activity-filters .filter-date .date-range {
    display: flex;
    align-items: center;
    gap: 5px;
}

.activity-filters .filter-date input[type="date"] {
    width: 140px;
}

.activity-filters .date-separator {
    color: #666;
    padding: 0 3px;
}

/* 검색 필터 */
.activity-filters .filter-search input {
    width: 250px;
}

/* 버튼 그룹 */
.activity-filters .filter-buttons {
    margin-left: auto;
}

.activity-filters .filter-buttons .btn-group {
    display: flex;
    gap: 8px;
}

.activity-stats {
    padding: 8px 0;
    color: #666;
    font-size: 13px;
}

.activity-table-wrap {
    max-height: 400px;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}

#activity-table {
    margin-bottom: 0;
    min-width: 640px;
}

#activity-table th {
    position: sticky;
    top: 0;
    background: #f5f5f5;
    z-index: 1;
}

#activity-table .nowrap {
    white-space: nowrap;
}

#activity-table .path-cell {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#activity-table .text-center {
    text-align: center;
    color: #999;
    padding: 30px;
}

.activity-pagination {
    padding: 15px 0 0 0;
    text-align: center;
}

.activity-pagination .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.activity-pagination .page-info {
    color: #666;
    font-size: 13px;
}

/* 모달 xl 크기 */
.modal-xl {
    max-width: 1000px;
    width: 95%;
}

@media (max-width: 1024px) {
    .activity-filters {
        padding: 8px;
        margin-bottom: 8px;
        gap: 4px;
    }
    
    /* 필터 행: 세로가 아닌 2열 그리드로 공간 절약 */
    .activity-filters .filter-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
        align-items: stretch;
    }
    
    .activity-filters .filter-group {
        width: auto;
        gap: 2px;
        min-width: 0;
    }
    
    /* 기간, 검색, 버튼은 전체 폭 사용 */
    .activity-filters .filter-date,
    .activity-filters .filter-search,
    .activity-filters .filter-buttons {
        grid-column: 1 / -1;
    }
    
    .activity-filters .filter-group label {
        font-size: 10px;
        margin-bottom: 1px;
        line-height: 1.2;
    }
    
    .activity-filters .filter-group input,
    .activity-filters .filter-group select {
        width: 100% !important;
        padding: 4px 6px !important;
        font-size: 12px !important;
        height: 28px !important;
    }
    
    .activity-filters .filter-date .date-range {
        width: 100%;
    }
    
    .activity-filters .filter-date input[type="date"] {
        flex: 1;
        width: auto;
    }
    
    .activity-filters .filter-search input {
        width: 100%;
    }
    
    .activity-filters .filter-buttons {
        margin-left: 0;
        width: 100%;
    }
    
    .activity-filters .filter-buttons .btn-group {
        justify-content: flex-end;
    }
    .activity-filters .filter-buttons .btn {
        padding: 5px 12px;
        font-size: 12px;
    }
    /* 빈 label 숨김 (버튼 그룹 위) */
    .activity-filters .filter-buttons > label {
        display: none;
    }
    /* 통계 영역 압축 */
    .activity-stats {
        padding: 4px 0;
        font-size: 12px;
    }
    /* 로그 테이블 영역이 남은 공간을 채우도록 */
    #modal-activity-logs .modal-body {
        display: flex;
        flex-direction: column;
    }
    #modal-activity-logs .activity-table-wrap {
        flex: 1 1 auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }
    
    #activity-table .path-cell {
        max-width: 120px;
    }
}

/* ========== 조건부 일괄 삭제 ========== */
.bulk-delete-settings .form-group {
    margin-bottom: 15px;
}

.bulk-delete-settings label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.bulk-delete-settings textarea,
.bulk-delete-settings select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.bulk-delete-actions {
    margin-top: 15px;
    text-align: right;
}

.bulk-delete-results {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.bulk-delete-results h4 {
    margin-bottom: 15px;
    font-size: 14px;
}

.bulk-delete-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.bulk-delete-item {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.bulk-delete-item:last-child {
    border-bottom: none;
}

.bulk-delete-item:hover {
    background: #f8f9fa;
}

.bulk-delete-item label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    font-weight: normal;
}

.bulk-delete-item input[type="checkbox"] {
    flex-shrink: 0;
}

.bulk-item-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.bulk-item-name {
    font-weight: 500;
    flex-shrink: 0;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-item-path {
    flex: 1;
    color: #888;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-item-size {
    flex-shrink: 0;
    color: #666;
    font-size: 12px;
}

/* 모바일 휴지통 */
@media (max-width: 1024px) {
    .trash-item {
        flex-wrap: wrap;
    }
    
    .trash-item-info {
        width: calc(100% - 50px);
    }
    
    .trash-item-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #eee;
    }
    
    .trash-item-path {
        max-width: 100%;
    }
    
    .trash-item-details {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* 검색 인덱스 모달 */
.index-info {
    background: #f0f7ff;
    border: 1px solid #cce5ff;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.index-info p {
    margin: 3px 0;
    color: #004085;
    font-size: 13px;
}

.index-stats {
    margin-bottom: 10px;
    width: 100%;
}

.index-stats h3 {
    margin: 0 0 4px 0;
    font-size: 14px;
}

/* 검색 인덱스 모달 전용 테이블 */
#modal-search-index .stats-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

#modal-search-index .stats-table th,
#modal-search-index .stats-table td {
    padding: 5px 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}

#modal-search-index .stats-table th {
    background: #f8f9fa;
    font-weight: 500;
    width: 40%;
}

#modal-search-index .stats-table td {
    width: 60%;
}

.index-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

#index-progress {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

#index-progress .progress-bar {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

#index-progress .progress-fill {
    height: 100%;
    background: var(--primary);
    width: 0;
    transition: width 0.3s;
    animation: indeterminate 1.5s infinite linear;
}

@keyframes indeterminate {
    0% { margin-left: 0; width: 30%; }
    50% { margin-left: 70%; width: 30%; }
    100% { margin-left: 0; width: 30%; }
}

#index-progress .progress-text {
    margin: 10px 0 0 0;
    text-align: center;
    color: #666;
    font-size: 14px;
}

/* 인덱스 상태 표시 */
.index-complete {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    margin-top: 15px;
}

.index-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    margin-top: 15px;
}

/* 시스템 정보 - 디스크 사용량 */
.disk-usage {
    margin: 10px 0;
}

.disk-bar {
    background: #e9ecef;
    border-radius: 10px;
    height: 20px;
    overflow: hidden;
}

.disk-used {
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    height: 100%;
    transition: width 0.3s;
}

.disk-text {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
    text-align: center;
}

/* PHP 확장 상태 */
.status-ok { color: #28a745; font-weight: 500; }
.status-warn { color: #ffc107; font-weight: 500; }
.status-error { color: #dc3545; font-weight: 500; }

.ext-table th:first-child,
.folder-table th:first-child {
    width: 100px;
}

.ext-table td:nth-child(2),
.folder-table td:nth-child(2) {
    width: 100px;
    text-align: center;
}

.path-cell {
    font-size: 11px;
    color: #666;
    word-break: break-all;
    max-width: 300px;
}

/* 시스템 정보 테이블 개선 */
.info-table thead th {
    background: #f8f9fa;
    font-weight: 600;
}

.info-table tbody tr:hover {
    background: #f8f9fa;
}

/* ========================================
   모바일 반응형 디자인
   ======================================== */

/* 모바일 메뉴 버튼 (기본 숨김) */
.mobile-menu-btn,
.mobile-search-btn {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
}

/* 모바일 검색 바 */
.mobile-search-bar {
    display: none;
    padding: 10px 15px;
    background: #f5f5f5;
    border-bottom: none;
    box-shadow: 0 1px 0 #ddd;
    flex-direction: column;
    gap: 6px;
}

.mobile-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.mobile-search-hint {
    width: 100%;
    text-align: left;
    padding-left: 0;
}

.mobile-search-bar input {
    flex: 1;
    min-width: 0;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 16px;
}

.mobile-search-bar button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 5px 10px;
}

/* 사이드바 오버레이 */
/* 사이드바 닫기 버튼 (모바일 전용) */
.sidebar-close-wrap {
    display: none;
}

@media (max-width: 1024px) {
    .sidebar-close-wrap {
        display: flex;
        justify-content: flex-end;
        padding: 0 10px 15px 0;
        margin: 0;
    }
    
    .sidebar-close-btn {
        background: none;
        border: none;
        font-size: 28px;
        color: #333;
        cursor: pointer;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }
    
    .sidebar-close-btn:hover,
    .sidebar-close-btn:active {
        background: rgba(0,0,0,0.08);
        color: #000;
    }
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 3999;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.sidebar-overlay.active {
    display: block;
}

/* 태블릿 (768px ~ 1024px) */
@media (max-width: 1024px) {
    .sidebar {
        width: 220px;
    }
    
    .content-area {
        margin-left: 220px;
    }
    
    .toolbar .btn span.btn-text {
        display: none;
    }
    
    .toolbar .btn {
        padding: 8px 12px;
    }
}

/* 모바일 (768px 이하) */
@media (max-width: 1024px) {
    /* 모바일: #main-screen 이 스크롤 컨테이너 */
    #main-screen {
        overflow-y: auto;
        overflow-x: hidden;
        height: 100vh;
        height: 100dvh;
    }
    
    .main-content {
        overflow: visible;
        min-height: auto;
        flex: none;
    }
    
    .file-area {
        overflow: visible;
        height: auto;
        flex: none;
    }
    
    .file-list {
        overflow-y: visible;
        flex: none;
    }
    
    /* 레이아웃 */
    .main-content {
        flex-direction: column;
    }
    
    .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        width: 280px;
        height: 100vh;
        z-index: 4000;
        transition: left 0.3s ease;
        padding-top: 20px;
        padding-bottom: 80px;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .sidebar.open {
        left: 0;
    }
    
    .content-area {
        margin-left: 0;
        width: 100%;
    }
    
    /* 헤더 */
    .header {
        padding: 10px 15px 10px 6px;
    }
    
    .header-left {
        flex: 1;
        gap: 2px;
    }
    
    .mobile-menu-btn {
        display: inline-block;
        margin-right: 0;
        margin-left: -4px;
        padding: 5px 4px;
    }
    
    .logo-text {
        display: inline !important;
        font-size: 16px !important;
    }
    
    .header-center {
        display: none;
    }
    
    .mobile-search-btn {
        display: inline-block;
    }
    
    .header-right #user-name {
        display: none;
    }
    
    /* 모바일 검색 바 표시 */
    .mobile-search-bar.active {
        display: flex;
    }
    
    /* 툴바 */
    .toolbar {
        padding: 8px 12px;
        flex-wrap: nowrap;
        gap: 5px;
    }
    
    .toolbar-left,
    .toolbar-right {
        flex-wrap: nowrap;
    }
    
    .toolbar .btn {
        padding: 8px 10px;
        font-size: 14px;
    }
    
    .toolbar .btn span.btn-text {
        display: none;
    }
    
    /* 브레드크럼 */
    .breadcrumb {
        padding: 8px 10px;
        font-size: 13px;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* 파일 목록 - 리스트 뷰 */
    .file-list.list-view .file-item {
        padding: 10px 10px;
        gap: 10px;
    }
    
    .file-list.list-view .file-name {
        font-size: 14px;
    }
    
    .file-list.list-view .file-size,
    .file-list.list-view .file-date {
        display: none;
    }
    
    .file-list.list-view .file-type {
        width: 70px;
        flex-shrink: 0;
        font-size: 11px;
        color: #999;
    }
    
    /* ★ 모바일 list-view: 이름 아래 날짜·유형 메타 표시 (펜닐님 요청 v5.8.1c) */
    /*    HTML 구조: [checkbox] [icon] [name-wrap] [date] [type] [size] */
    /*    PC는 가로 1줄, 모바일은 grid로 2줄 배치 — 이름 가로폭 유지 + 정보 풍부 */
    /*                                                                              */
    /*    Grid 레이아웃 (모바일 list-view 한정):                                       */
    /*       [check] [icon] [name (full width, 1행)              ]                    */
    /*       [check] [icon] [date (좌)                  type (우) ]                   */
    /*    ※ size는 hide                                                               */
    .file-list.list-view .file-item {
        display: grid !important;
        grid-template-columns: auto auto 1fr 80px;  /* 4번째 컬럼(type) 80px 고정 보장 */
        grid-template-rows: auto auto;
        grid-template-areas:
            "check icon name name"
            "check icon date type";
        column-gap: 8px;
        row-gap: 2px;
        align-items: center;
        padding: 8px 10px !important;
    }
    /* 체크박스 wrapper (.file-check) */
    .file-list.list-view .file-item > .file-check {
        grid-area: check;
        align-self: center;
    }
    /* 아이콘 */
    .file-list.list-view .file-item > .file-icon {
        grid-area: icon;
        align-self: center;
        font-size: 28px !important;
        line-height: 1;
        margin: 0 !important;
    }
    /* 이름 줄: 굵게 1줄 ellipsis (name name 으로 2칸 차지 → 가로 폭 최대) */
    .file-list.list-view .file-item > .file-name-wrap {
        grid-area: name;
        align-self: end;
        min-width: 0;  /* ellipsis 작동을 위해 필수 */
        overflow: hidden;
        font-weight: 500;
    }
    .file-list.list-view .file-item > .file-name-wrap .file-name {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* 날짜: 메타 줄 좌측 */
    .file-list.list-view .file-item > .file-date {
        display: block !important; /* 위 list-view .file-date {display:none} 무효화 */
        grid-area: date;
        align-self: start;
        font-size: 11px;
        color: var(--secondary, #999);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    /* 유형: 메타 줄 우측 (grid 컬럼이 이미 80px 보장) */
    .file-list.list-view .file-item > .file-type {
        grid-area: type;
        align-self: start;
        font-size: 11px;
        color: var(--secondary, #999);
        line-height: 1.3;
        width: 100% !important;  /* grid 컬럼 80px을 꽉 채움 */
        min-width: 0;
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 0;
        text-align: right;
        padding-left: 8px;
    }
    /* size는 모바일에서 숨김 유지 */
    .file-list.list-view .file-item > .file-size {
        display: none !important;
    }
    
    /* ★ 모바일 (v5.8.1c — 펜닐님 결정 옵션 B): list-view 헤더 자체 숨김 */
    /*    이유: 모바일은 이름 아래 메타 표시 방식으로 변경되어 가로 컬럼 헤더 불필요 */
    /*    정렬은 별도 정렬 버튼(#btn-sort)에서 처리 — iOS Files / Android Files 표준 패턴 */
    #file-list-header {
        display: none !important;
    }
    
    /* 파일 목록 - 그리드 뷰 (모바일: 화면 너비에 맞게 자동 열 수) */
    .file-list.grid-view {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    
    .file-list.grid-view .file-item {
        padding: 12px 8px !important;
        min-height: 120px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    .file-list.grid-view .file-icon {
        font-size: 44px !important;
        margin-bottom: 10px !important;
        flex-shrink: 0 !important;
    }
    
    .file-list.grid-view .file-name {
        font-size: 12px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        width: 100% !important;
        max-height: 3em !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        word-break: break-all !important;
        color: #333 !important;
    }
    
    /* 모달 */
    .modal-overlay {
        padding: 0;
    }
    .modal:not(.modal-preview):not(#modal-confirm) {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
        z-index: 7001;
    }
    
    #modal-confirm {
        position: relative !important;
        width: 90% !important;
        max-width: 400px !important;
        height: auto !important;
        max-height: 80vh !important;
        margin: auto !important;
        border-radius: var(--radius) !important;
    }
    
    .modal:not(.modal-preview) .modal-body {
        overflow-y: auto;
        flex: 1 1 0px;
        min-height: 0;
        height: 0;
        display: flex;
        flex-direction: column;
    }
    
    /* confirm 모달: 내용이 짧으니 높이 자동 */
    #modal-confirm .modal-body {
        flex: 0 0 auto;
        height: auto;
        overflow: visible;
    }
    
    .modal-footer {
        flex-shrink: 0;
    }
    
    .modal-lg {
        /* 모바일: modal:not(.modal-preview)에서 풀스크린 처리 */
    }
    
    .modal-footer {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .modal-footer .btn {
        flex: 1;
        min-width: 100px;
    }
    
    /* 컨텍스트 메뉴 */
    .context-menu {
        min-width: 180px;
    }
    
    .context-menu li {
        padding: 12px 15px;
    }
    
    /* 설정 모달 탭 */
    .settings-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    
    .settings-tab {
        flex: 1;
        min-width: 80px;
        padding: 10px 5px;
        font-size: 12px;
    }
    
    /* 테이블 */
    .info-table th,
    .info-table td {
        padding: 8px 10px;
        font-size: 13px;
    }
    
    /* 업로드 진행 */
    .upload-queue {
        max-height: 150px;
    }
    
    /* 미리보기 모달 */
    .modal-preview {
        width: 100% !important;
        height: 100vh;
        margin: 0;
        border-radius: 0;
    }
    
    .modal-preview .modal-body {
        max-height: calc(100vh - 120px);
    }
    
    #preview-content img,
    #preview-content video {
        max-width: 100%;
        max-height: 70vh;
    }
}

/* 소형 모바일 (480px 이하) */
@media (max-width: 480px) {
    .header {
        padding: 8px 10px;
    }
    
    .toolbar {
        padding: 6px 8px;
        gap: 4px;
    }
    
    .toolbar .btn {
        padding: 4px 5px;
        font-size: 12px;
    }
    
    .toolbar-right {
        gap: 4px;
    }
    
    .toolbar-right .btn-icon,
    .toolbar-right #btn-view-grid,
    .toolbar-right #btn-view-list {
        width: 28px !important;
        height: 28px !important;
        padding: 2px !important;
        font-size: 13px !important;
    }
    
    .file-list.grid-view {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .file-list.grid-view .file-icon {
        font-size: 32px;
    }
    
    .modal-header h2 {
        font-size: 16px;
    }
    
    .btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    /* 로그인 폼 */
    .login-container {
        padding: 20px;
        margin: 10px;
    }
    
    .login-container h1 {
        font-size: 20px;
    }
}

/* 터치 디바이스 최적화 */
@media (hover: none) and (pointer: coarse) {
    
    /* 호버 효과 비활성화 (탭 시 깜빡임 방지) */
    .file-item:hover {
        background: inherit;
    }
    
    .file-item.selected,
    .file-item:active {
        background: #e3f2fd;
    }
    
    /* 스크롤 개선 */
    .file-list,
    .modal-body,
    .sidebar {
        -webkit-overflow-scrolling: touch;
    }
}

/* 가로 모드 */
/* ========================================
   모바일 세부 스타일 (768px 이하)
   ======================================== */
@media (max-width: 1024px) {
    /* 파일/폴더 이름 말줄임 처리 */
    .file-list .file-name {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
    }
    
    .file-list.grid-view .file-name {
        white-space: normal;
        word-break: break-word;
        line-height: 1.3;
        max-height: 2.6em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    
    /* 검색 결과 카드 - 모바일 */
    .search-result-item {
        padding: 12px !important;
    }
    
    .search-result-item .file-name {
        font-size: 13px !important;
        margin-bottom: 8px;
    }
    
    .search-result-item .result-meta {
        font-size: 11px !important;
        flex-direction: column;
        gap: 4px;
    }
    
    .search-result-item .result-path {
        font-size: 10px !important;
        word-break: break-all;
    }
    
    /* 모달 헤더 */
    .modal-header {
        padding: 12px 15px;
    }
    
    .modal-header h2 {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 40px);
    }
    
    .modal-close {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }
    
    /* 모달 바디 */
    .modal-body {
        padding: 15px;
    }
    
    /* 테이블 - 가로 스크롤 */
    .modal-body .info-table,
    .modal-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .info-table th,
    .info-table td {
        padding: 8px 10px;
        font-size: 12px;
        white-space: nowrap;
    }
    
    .info-table th:first-child {
        min-width: 80px;
    }
    
    /* 폼 요소 */
    .modal-body input[type="text"],
    .modal-body input[type="password"],
    .modal-body input[type="email"],
    .modal-body input[type="number"],
    .modal-body select,
    .modal-body textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 13px !important;
        padding: 10px 12px;
        box-sizing: border-box;
    }
    
    /* 예외: 팝업 배치 설정 영역 — 여러 작은 input이 한 줄에 배치되어야 함 */
    .popup-layout-settings .popup-layout-row {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .popup-layout-settings .popup-layout-row > div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }
    .popup-layout-settings label {
        display: inline-block !important;
        width: 100%;
        margin-bottom: 2px !important;
    }
    .popup-layout-settings input[type="number"],
    .popup-layout-settings select {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100px !important;
        padding: 6px 8px !important;
        display: inline-block !important;
    }
    .popup-layout-settings select#popup-layout {
        max-width: 200px !important;
    }
    
    .modal-body label {
        font-size: 13px;
        margin-bottom: 5px;
        display: block;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    /* 사용자/스토리지 관리 테이블 */
    .user-list,
    .storage-list-table,
    .share-list {
        font-size: 12px;
    }
    
    .user-list th,
    .user-list td,
    .storage-list-table th,
    .storage-list-table td {
        padding: 8px 6px;
    }
    
    /* 액션 버튼 */
    .user-list .btn,
    .storage-list-table .btn,
    .share-list .btn {
        padding: 5px 8px;
        font-size: 11px;
        margin: 2px;
    }
    
    /* 설정 모달 */
    .settings-content {
        padding: 15px;
    }
    
    .settings-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        gap: 2px;
        padding-bottom: 8px;
    }
    
    .settings-tabs .tab-btn {
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 12px;
        white-space: nowrap;
        min-width: auto;
    }
    
    .settings-tab {
        flex-shrink: 0;
        padding: 10px 12px;
        font-size: 12px;
        white-space: nowrap;
    }
    
    /* 시스템 정보 - 섹션 */
    .info-section {
        margin-bottom: 20px;
    }
    
    .info-section h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    /* 경로 셀 */
    .path-cell {
        max-width: 150px;
        font-size: 10px;
    }
    
    /* 버튼 그룹 */
    .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .btn-group .btn {
        flex: 1;
        min-width: 80px;
    }
    
    /* 체크박스/라디오 레이블 */
    .checkbox-label,
    .radio-label {
        font-size: 13px;
        padding: 8px 0;
    }
    
    /* 상세 정보 모달 */
    .detailed-info-table th {
        width: 80px;
        font-size: 12px;
    }
    
    .detailed-info-table td {
        font-size: 12px;
        word-break: break-all;
    }
    
    /* 업로드 진행률 */
    .upload-item {
        padding: 8px 10px;
    }
    
    .upload-item .filename {
        font-size: 12px;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 전송 모달 */
    #transfer-modal {
        padding: 15px;
    }
    
    #transfer-modal .transfer-info {
        font-size: 12px;
    }
    
    /* 공유 모달 */
    .share-url-box {
        flex-direction: column;
    }
    
    .share-url-box input {
        width: 100%;
        margin-bottom: 8px;
    }
    
    .share-url-box .btn {
        width: 100%;
    }
    
    /* QR 코드 */
    .qr-container {
        text-align: center;
    }
    
    .qr-container canvas,
    .qr-container img {
        max-width: 150px;
    }
    
    /* 로그 테이블 */
    .log-table {
        font-size: 11px;
    }
    
    .log-table th,
    .log-table td {
        padding: 6px 4px;
    }
    
    /* 권한 관리 */
    .permission-item {
        padding: 10px;
        margin-bottom: 8px;
    }
    
    .permission-item label {
        font-size: 12px;
    }
    
    /* 조건부 삭제 */
    .bulk-delete-form {
        padding: 10px;
    }
    
    .bulk-delete-form .form-row {
        flex-direction: column;
        gap: 10px;
    }
    
    /* 토스트 메시지 */
    .toast {
        left: 10px;
        right: 10px;
        max-width: none;
        font-size: 13px;
        transform: translateY(100px);  /* 모바일에서는 X축 이동 제거 */
        text-align: center;
    }
    
    .toast.show {
        transform: translateY(0);  /* 모바일에서는 X축 이동 제거 */
    }
    
    /* 전송 진행 패널 - 모바일 */
    .transfer-progress {
        width: 280px;
        right: 10px;
        left: auto;
        top: 185px;
        padding: 10px 12px;
        font-size: 12px;
    }
    
    .transfer-progress .progress-header {
        font-size: 13px;
        margin-bottom: 5px;
    }
    
    .transfer-progress .vpn-warning {
        font-size: 11px;
        padding: 4px 8px;
        margin-bottom: 5px;
    }
    
    .transfer-progress .upload-session-item {
        padding: 8px 10px;
    }
    
    .transfer-progress .upload-session-name {
        font-size: 12px;
    }
    
    .transfer-progress .upload-session-info,
    .transfer-progress .upload-session-stats {
        font-size: 11px;
    }
    
    /* 사이드바 내부 */
    .sidebar h3 {
        font-size: 13px;
    }
    
    .storage-item {
        padding: 10px 15px;
        font-size: 13px;
    }
    
    .menu-list li a {
        padding: 10px 15px;
        font-size: 13px;
    }
    
    /* 빈 폴더 메시지 */
    .empty-msg {
        font-size: 14px;
        padding: 30px 15px;
    }
    
    /* 로딩 */
    .loading {
        font-size: 14px;
    }
}

/* ========================================
   소형 모바일 세부 스타일 (480px 이하)
   ======================================== */
@media (max-width: 480px) {
    /* 파일 그리드 2열 유지 */
    .file-list.grid-view {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    
    .file-list.grid-view .file-item {
        padding: 10px 6px !important;
        min-height: 110px !important;
    }
    
    .file-list.grid-view .file-icon {
        font-size: 40px !important;
        margin-bottom: 8px !important;
    }
    
    .file-list.grid-view .file-name {
        font-size: 11px !important;
        line-height: 1.4 !important;
        max-height: 3em !important;
        text-align: center !important;
        color: #333 !important;
    }
    
    /* 툴바 더 작게 */
    .toolbar {
        padding: 6px 8px;
        gap: 3px;
    }
    
    .toolbar .btn {
        padding: 6px 8px;
        font-size: 14px;
    }
    
    /* 모달 전체화면 */
    .modal {
        width: 100% !important;
        height: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }
    
    .modal-body {
        max-height: calc(100vh - 110px);
        padding: 12px;
    }
    
    .modal-footer {
        padding: 10px 12px;
    }
    
    .modal-footer .btn {
        padding: 10px;
        font-size: 13px;
    }
    
    /* 설정 탭 */
    .settings-tab {
        padding: 8px 10px;
        font-size: 11px;
    }
    
    /* 테이블 더 작게 */
    .info-table th,
    .info-table td {
        padding: 6px 8px;
        font-size: 11px;
    }
    
    /* 사이드바 */
    .sidebar {
        width: 260px;
    }
    
    /* 브레드크럼 */
    .breadcrumb {
        padding: 6px 8px;
        font-size: 12px;
    }
    
    .breadcrumb a {
        padding: 2px 4px;
    }
}

/* ========================================
   초소형 모바일 (360px 이하)
   ======================================== */
@media (max-width: 360px) {
    .file-list.grid-view {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .toolbar .btn {
        padding: 5px 6px;
        font-size: 12px;
    }
    
    .modal-header h2 {
        font-size: 14px;
    }
}

/* ========================================
   모바일 검색 결과 스타일
   ======================================== */
@media (max-width: 1024px) {
    /* 검색 결과 리스트 아이템 */
    .search-result-item {
        flex-direction: column;
        align-items: flex-start !important;
        padding: 12px !important;
    }
    
    .search-result-item .file-checkbox {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    
    .search-result-item .file-icon {
        margin-bottom: 8px;
    }
    
    .search-result-item .file-info {
        width: 100%;
    }
    
    .search-result-item .file-name {
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 6px;
        word-break: break-word;
    }
    
    .search-result-item .file-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .search-result-item .search-storage {
        font-size: 10px;
        padding: 2px 6px;
    }
    
    .search-result-item .search-path {
        font-size: 10px;
        color: #666;
        word-break: break-all;
        line-height: 1.3;
    }
    
    .search-result-item .file-size,
    .search-result-item .file-date {
        display: none;
    }
}

/* ========================================
   모바일 로그인 페이지
   ======================================== */
@media (max-width: 1024px) {
    .login-page {
        padding: 20px 15px;
    }
    
    .login-box {
        padding: 25px 20px;
        max-width: 100%;
        border-radius: 12px;
    }
    
    .login-logo {
        font-size: 48px;
    }
    
    .login-box h1 {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .login-box input {
        padding: 12px;
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .login-box .btn {
        width: 100%;
        padding: 14px;
        font-size: 16px;
    }
    
    .login-box .remember-me {
        font-size: 13px;
    }
    
    .login-links {
        margin-top: 15px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .login-page {
        padding: 15px 10px;
    }
    
    .login-box {
        padding: 20px 15px;
    }
    
    .login-logo {
        font-size: 40px;
    }
    
    .login-box h1 {
        font-size: 18px;
    }
}

/* ========================================
   스크롤 성능 최적화 (단순화)
   ======================================== */

/* iOS 부드러운 스크롤 */
.file-list,
.sidebar,
.modal-body {
    -webkit-overflow-scrolling: touch;
}

/* 테이블/리스트 행 - 트랜지션 제거 (스크롤 성능) */
.file-item,
.storage-item,
tr,
.menu-list li {
    transition: none;
}

/* hover만 빠른 색상 변경 */
.file-item:hover,
.storage-item:hover,
tr:hover,
.menu-list li:hover {
    transition: background-color 0.05s;
}

/* 스크롤바 스타일 */
.file-list::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.file-list::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.file-list::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
}

.file-list::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.35);
}

/* Firefox 스크롤바 */
.file-list,
.modal-body,
.sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}

/* ========================================
   모바일 트랜지션 최소화
   ======================================== */
@media (max-width: 1024px) {
    /* 모든 트랜지션 단순화 */
    * {
        transition-duration: 0.1s !important;
    }
    
    /* 스크롤 관련 요소 트랜지션 제거 */
    .file-item,
    .storage-item,
    .menu-list li {
        transition: background-color 0.1s ease !important;
    }
    
    /* 사이드바 슬라이드만 예외 */
    .sidebar {
        transition: left 0.25s ease !important;
    }
    
    /* 모달 애니메이션 최소화 */
    .modal {
        transition: opacity 0.15s ease !important;
    }
}

/* 저사양 기기 감지 — 사용자 의도된 마퀴는 예외 처리 (펜닐님 결정)
   사용자 OS/브라우저 "동작 줄이기" 설정 시에도 마퀴는 의도된 기능이므로 작동해야 함
   접근성 보호 의도는 유지하되 (transition은 차단), 마퀴 animation만 허용
   :not()으로 마퀴 관련 셀렉터 제외 */
@media (prefers-reduced-motion: reduce) {
    *:not(.fap-marquee-inner):not(.fap-pl-text):not(.fs-vp-name-inner):not(.pl-name-inner) {
        transition: none !important;
        animation: none !important;
    }
}

/* ========================================
   스크롤 영역 내부 트랜지션 비활성화 (성능)
   ======================================== */

/* 파일 목록 내부 - 트랜지션 제거 */
.file-list .file-item,
.file-list .file-item * {
    transition: none !important;
}

/* 파일 목록 hover만 빠른 배경색 */
.file-list .file-item:hover {
    background-color: #f5f5f5;
}

.file-list .file-item.selected {
    background-color: #e3f2fd;
}

/* 모달 테이블 내부 - 트랜지션 제거 */
.modal-body table tr,
.modal-body table td,
.modal-body table th,
.modal-body .user-list tr,
.modal-body .log-table tr {
    transition: none !important;
}

/* 테이블 hover만 빠른 배경색 */
.modal-body table tr:hover,
.modal-body .user-list tr:hover,
.modal-body .log-table tr:hover {
    background-color: #f8f9fa;
}

/* 사이드바 내부 - 트랜지션 제거 */
.sidebar .storage-item,
.sidebar .menu-list li,
.sidebar .menu-list a {
    transition: none !important;
}

/* 사이드바 hover만 빠른 배경색 */
.sidebar .storage-item:hover,
.sidebar .menu-list li:hover,
.sidebar .menu-list a:hover {
    background-color: rgba(0,0,0,0.05);
}

/* 사이드바 슬라이드 애니메이션은 유지 */
.sidebar {
    transition: left 0.25s ease-out !important;
}

/* ========================================
   모바일 파일명 표시 강제 (최우선)
   ======================================== */
@media (max-width: 1024px) {
    /* 자동 열 수 그리드 - 화면 너비에 맞게 */
    .file-list.grid-view {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
    }
    
    /* 그리드 아이템 레이아웃 - 높이 자동 */
    .file-list.grid-view .file-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 12px 8px !important;
        min-height: auto !important;
        height: auto !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    
    /* 아이콘 */
    .file-list.grid-view .file-icon {
        flex-shrink: 0 !important;
        font-size: 42px !important;
        margin-bottom: 8px !important;
    }
    
    /* 그리드 뷰 - 파일명 반드시 표시 + 자동 줄바꿈 */
    .file-list.grid-view .file-item .file-name,
    .file-list.grid-view .file-name {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 12px !important;
        color: #333 !important;
        text-align: center !important;
        padding: 0 2px !important;
        line-height: 1.4 !important;
        width: 100% !important;
        max-width: 100% !important;
        
        /* 줄바꿈 강제 - 높이 제한 없음 */
        white-space: normal !important;
        word-break: break-all !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        
        /* 높이 자동 (제한 없음) */
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }
}

@media (max-width: 480px) {
    .file-list.grid-view .file-item .file-name,
    .file-list.grid-view .file-name {
        font-size: 11px !important;
    }
    
    .file-list.grid-view .file-icon {
        font-size: 38px !important;
    }
    
    .file-list.grid-view .file-item {
        padding: 10px 6px !important;
    }
}

/* ========================================
   공유 파일 표시
   ======================================== */
.file-item .share-badge {
    font-size: 12px;
    z-index: 5;
}

.file-list.grid-view .file-item .share-badge {
    font-size: 14px;
}

.file-list.grid-view .file-item .lock-badge {
    font-size: 14px;
}

.file-list.grid-view .file-item .fav-badge {
    font-size: 12px;
}

/* 그리드뷰: 배지 컨테이너 - 우상단에서 좌측으로 가로 정렬 */
.grid-badges {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    flex-direction: row;
    gap: 1px;
    z-index: 10;
    pointer-events: none;
}
.grid-badges .fav-badge,
.grid-badges .share-badge,
.grid-badges .lock-badge {
    position: static !important;
    top: auto !important;
    right: auto !important;
    pointer-events: auto;
}

.file-list.list-view .file-item .share-badge {
    position: static;
    margin-left: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 즐겨찾기 배지 */
.file-item .fav-badge {
    font-size: 10px;
}
.file-list.list-view .file-item .fav-badge {
    position: static;
    margin-left: 2px;
    flex-shrink: 0;
}

.file-item.is-shared {
    position: relative;
}

/* 공유된 파일 배경 약간 다르게 */
.file-item.is-shared {
    background: linear-gradient(135deg, transparent 90%, rgba(59, 130, 246, 0.1) 100%);
}

/* ========================================
   모바일 컨텍스트 메뉴 스타일
   ======================================== */
@media (max-width: 1024px) {
    /* 모바일 컨텍스트 메뉴 - 바텀시트 스타일 */
    .context-menu {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        max-height: 66vh;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding-bottom: env(safe-area-inset-bottom, 8px);
        animation: slideUp 0.2s ease-out;
    }
    
    @keyframes slideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    .context-menu::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
        margin: 8px auto 2px;
    }
    
    .context-menu ul {
        padding: 2px 0 6px;
    }
    
    .context-menu li {
        padding: 8px 16px;
        min-height: 34px;
        display: flex;
        align-items: center;
        font-size: 13px;
        touch-action: manipulation;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .context-menu li:last-child {
        border-bottom: none;
    }
    
    .context-menu li:active {
        background: #f5f5f5;
    }
    
    .context-menu li.divider {
        height: 6px;
        min-height: 6px;
        padding: 0;
        margin: 0;
        background: #f5f5f5;
        border-bottom: none;
    }
    
    .context-menu li.danger {
        color: #dc3545;
    }
    
    /* 오버레이 배경 */
    .context-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.4);
        z-index: 5999;
    }
}

/* ========================================
   모바일 미리보기 전체화면 (최우선)
   ======================================== */
@media (max-width: 1024px) {
    .modal-preview {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
    }
    
    .modal-preview .modal-header {
        padding: 5px 10px !important;
        border-radius: 0 !important;
        gap: 6px;
    }
    
    .modal-preview .modal-header h2 {
        font-size: 12px !important;
        flex: 1;
        min-width: 0;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    .modal-preview .modal-header h3 {
        font-size: 14px !important;
        max-width: calc(100% - 40px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    .modal-preview .modal-body {
        max-height: calc(100vh - 60px) !important;
        min-height: 0 !important;
    }
    
    /* 이미지 미리보기 */
    .preview-image {
        max-width: 100%;
        max-height: 70vh;
        min-width: 0;
        object-fit: contain;
    }
    .preview-image.zoomed {
        max-width: none !important;
        max-height: none !important;
        object-fit: none !important;
    }
    
    /* 비디오 미리보기 */
    .preview-video {
        max-width: 100% !important;
        max-height: 70vh !important;
        min-width: 0 !important;
        display: block;
        margin: 0 auto;
    }
    
    /* 모바일 비디오 전체화면 버튼 (wrap 안 absolute) */
    .video-fullscreen-btn {
        position: absolute;
        top: auto;
        bottom: 8px;
        right: 8px;
        left: auto !important;
        transform: none !important;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.55);
        border: 1.5px solid rgba(255, 255, 255, 0.7);
        color: #fff;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 15;
        cursor: pointer;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        transition: opacity 0.3s;
        padding: 0;
        margin: 0;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    /* 모바일: 자막 컨트롤을 상단 우측에 배치 (비디오 높이 무관) */
    .subtitle-controls {
        top: 50px;
        bottom: auto;
        right: 6px;
        max-width: 280px;
    }
    .video-fullscreen-btn:active {
        background: rgba(0, 0, 0, 0.8);
    }
    .video-fullscreen-btn.hidden {
        opacity: 0;
        pointer-events: none;
    }
    
    /* 모바일: 10초 뒤/앞 오버레이 숨김 */
    .video-seek-overlay {
        display: none !important;
    }
    
    /* 모바일 오디오 트랙 — 우측 상단, 컴팩트 */
    .video-audio-select {
        top: 4px !important;
        bottom: auto !important;
        right: 6px !important;
        left: auto !important;
        opacity: 1 !important;
        max-width: 55%;
        flex-direction: row;
        align-items: center;
    }
    .audio-track-label {
        display: none !important;
    }
    .audio-track-select {
        font-size: 11px !important;
        padding: 3px 8px !important;
        max-width: 100% !important;
        background: rgba(0, 0, 0, 0.7) !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255,255,255,0.25) !important;
    }
    /* 모바일: 셀렉트 앞에 스피커 아이콘 */
    .video-audio-select::before {
        content: '🔊';
        font-size: 13px;
        margin-right: 3px;
        line-height: 1;
    }
    /* 빈 오디오 셀렉트 숨김 (싱글 오디오) */
    .video-audio-select:empty {
        display: none !important;
    }
    .video-audio-select:empty::before {
        display: none !important;
    }
    
    /* ★ 모바일 화질 셀렉트 (v5.8.1c — 펜닐님 요청) */
    /*    PC와 달리 모바일은 화면이 좁아 audio + quality 가로 배치 불가 */
    /*    → quality는 항상 audio 아래로 (top:44px) — has-quality-sibling 룰 무효화 */
    /*    → 목록 버튼 회피용 right 80px 룰도 모바일에선 무효화 (세로 배치되니 좌우 충돌 없음) */
    .video-quality-select {
        top: 44px !important;
        right: 6px !important;
        bottom: auto !important;
        left: auto !important;
        opacity: 1 !important;
        max-width: 55%;
        flex-direction: row;
        align-items: center;
    }
    /* PC용 has-toggle-sibling/has-quality-sibling 위치 룰을 모바일에서 무효화 */
    .video-player-wrap:has(.fs-vp-toggle) .video-quality-select,
    .video-quality-select.has-toggle-sibling {
        right: 6px !important;
    }
    .video-audio-select.has-quality-sibling,
    .video-player-wrap:has(.fs-vp-toggle) .video-audio-select.has-quality-sibling,
    .video-audio-select.has-toggle-sibling.has-quality-sibling {
        right: 6px !important; /* audio도 그대로 우측 — quality는 아래로 */
    }
    .quality-label {
        display: none !important;
    }
    .quality-select {
        font-size: 11px !important;
        padding: 3px 8px !important;
        max-width: 100% !important;
        background: rgba(0, 0, 0, 0.7) !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255,255,255,0.25) !important;
    }
    /* 모바일: 셀렉트 앞에 화질 아이콘 */
    .video-quality-select::before {
        content: '🎬';
        font-size: 13px;
        margin-right: 3px;
        line-height: 1;
    }
    /* 빈 quality 셀렉트 숨김 */
    .video-quality-select:empty {
        display: none !important;
    }
    .video-quality-select:empty::before {
        display: none !important;
    }
    /* ★ 모바일: 재생 중 화질 셀렉트 숨김 — 터치 시(.show-controls) 표시 */
    .video-player-wrap.playing .video-quality-select {
        opacity: 0 !important;
        pointer-events: none;
        transition: opacity 0.3s;
    }
    .video-player-wrap.playing.show-controls .video-quality-select {
        opacity: 1 !important;
        pointer-events: auto;
    }
    .video-player-wrap.playing:not(.show-controls):hover .video-quality-select { opacity: 0; pointer-events: none; }
    
    /* 모바일 스트림 뱃지 — 멀티오디오 있으면 아래로 이동 */
    .video-stream-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
        top: 6px !important;
        left: 6px !important;
    }
    
    /* 모바일: 재생 중 뱃지/오디오 숨김 - 터치 시 표시 */
    .video-player-wrap.playing .video-stream-badge {
        opacity: 0 !important;
        transition: opacity 0.3s;
    }
    .video-player-wrap.playing.show-controls .video-stream-badge {
        opacity: 0.9 !important;
    }
    /* 모바일: hover 무효화 (터치 시 sticky hover 방지) — show-controls 제외 */
    .video-player-wrap.playing:not(.show-controls):hover .video-stream-badge { opacity: 0; }
    .video-player-wrap.playing .video-audio-select {
        opacity: 0 !important;
        pointer-events: none;
        transition: opacity 0.3s;
    }
    .video-player-wrap.playing.show-controls .video-audio-select {
        opacity: 1 !important;
        pointer-events: auto;
    }
    .video-player-wrap.playing:not(.show-controls):hover .video-audio-select { opacity: 0; pointer-events: none; }
    .video-player-wrap.playing .video-fullscreen-btn {
        opacity: 0 !important;
        pointer-events: none;
        transition: opacity 0.3s;
    }
    .video-player-wrap.playing.show-controls .video-fullscreen-btn {
        opacity: 1 !important;
        pointer-events: auto;
    }
    /* 재생 전/일시정지 시 항상 보이기 */
    .video-player-wrap:not(.playing) .video-fullscreen-btn {
        opacity: 1 !important;
        pointer-events: auto;
    }
    .video-fullscreen-btn.hidden {
        opacity: 0 !important;
        pointer-events: none;
    }
    /* 모바일: 스트리밍 시간 표시 — 재생 중 숨김, 터치 시 표시 */
    .video-player-wrap.playing .transcode-duration {
        opacity: 0 !important;
        transition: opacity 0.3s;
    }
    .video-player-wrap.playing.show-controls .transcode-duration {
        opacity: 1 !important;
    }
    .video-player-wrap.playing:not(.show-controls):hover .transcode-duration { opacity: 0; }
    
    /* 모바일 자막 조절 */
    .subtitle-controls {
        bottom: 200px !important;
        right: 6px !important;
        left: auto !important;
        opacity: 1 !important;
    }
    .video-player-wrap.playing .subtitle-controls {
        opacity: 0 !important;
        pointer-events: none;
        transition: opacity 0.3s;
    }
    .video-player-wrap.playing.show-controls .subtitle-controls {
        opacity: 1 !important;
        pointer-events: auto;
    }
    .video-player-wrap.playing:not(.show-controls):hover .subtitle-controls { opacity: 0; pointer-events: none; }
    
    /* 모바일: 재생/일시정지 오버레이 — 재생 중 투명하지만 터치는 받음 */
    .video-player-wrap.playing .video-play-overlay {
        opacity: 0 !important;
        pointer-events: auto;
        transition: opacity 0.3s;
    }
    .video-player-wrap.playing.show-controls .video-play-overlay {
        opacity: 0.6 !important;
        pointer-events: auto;
    }
    .video-player-wrap:not(.playing) .video-play-overlay {
        opacity: 1 !important;
        pointer-events: auto;
    }
    .video-player-wrap.playing:not(.show-controls):hover .video-play-overlay { opacity: 0 !important; }

    /* ★ 모바일: fs-vp-toggle 버튼 + 패널 — 터치(show-controls) 시만 표시 */
    .video-player-wrap.playing .fs-vp-toggle {
        opacity: 0 !important;
        pointer-events: none;
        transition: opacity 0.3s;
    }
    .video-player-wrap.playing.show-controls .fs-vp-toggle {
        opacity: 1 !important;
        pointer-events: auto;
    }
    .video-player-wrap.playing:not(.show-controls):hover .fs-vp-toggle { opacity: 0 !important; pointer-events: none; }
    /* 패널: 모바일은 hover 무효 + show-controls 시만 표시 (height 0 처리로 영상 폭/높이 확보) */
    .fs-vp-flex:has(.video-player-wrap.playing) .fs-vp-panel.open {
        opacity: 0 !important;
        pointer-events: none;
        max-height: 0 !important;
        margin-top: 0 !important;
        overflow: hidden;
        transition: opacity 0.3s, max-height 0.25s ease;
    }
    .fs-vp-flex:has(.video-player-wrap.playing.show-controls) .fs-vp-panel.open {
        opacity: 1 !important;
        pointer-events: auto;
        max-height: 35vh !important;
    }
    .fs-vp-flex:has(.video-player-wrap.playing:not(.show-controls)):hover .fs-vp-panel.open {
        opacity: 0 !important;
        pointer-events: none;
        max-height: 0 !important;
    }
    
    /* 모바일: 자막 오버레이 컨트롤바 겹침 방지 */
    .subtitle-overlay {
        bottom: 15% !important;
        font-size: 0.95em !important;
        left: 3% !important;
        right: 3% !important;
        padding: 2px 4px;
    }
    
    /* 오디오 미리보기 */
    .preview-audio-wrap {
        min-width: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        min-height: auto !important;
        height: 100% !important;
    }
    #fs-audio-player { max-width: 100% !important; height: 100% !important; }
    .fap { padding: 40px 14px 12px; }  /* 스킨 버튼 공간 확보를 위해 상단 패딩 증가 */
    .fap-controls { gap: 4px; }
    .fap-vol-bar { max-width: 80px; }
    
    /* 모바일에서 스킨 선택기 버튼 - z-index 상향 + 상단 위치 조정 */
    .fap-skin-selector {
        top: 6px !important;
        right: 8px !important;
        z-index: 100 !important;  /* 제목/커버 위에 확실히 표시되도록 */
    }
    .fap-skin-btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    .fap-skin-menu {
        min-width: 140px !important;
        max-height: 60vh !important;  /* 색상 7개 추가로 메뉴가 길어지므로 스크롤 처리 */
        overflow-y: auto !important;
        font-size: 11px !important;
    }
    .fap-skin-item {
        padding: 7px 12px !important;
        font-size: 11px !important;
    }
    /* 모바일: 비주얼라이저 색상 섹션 */
    .fap-skin-section-title {
        padding: 6px 12px 3px !important;
        font-size: 9px !important;
    }
    .fap-vis-color-item {
        padding: 6px 12px !important;
        font-size: 11px !important;
        gap: 8px !important;
    }
    .fap-vis-color-swatch {
        width: 22px !important;
        height: 10px !important;
    }
    
    /* PDF 미리보기 */
    .preview-pdf {
        min-width: 0 !important;
        width: 100% !important;
        height: calc(100vh - 120px) !important;
    }
    
    /* 텍스트/코드 미리보기 */
    .preview-text,
    .preview-code {
        min-width: 0 !important;
        width: 100% !important;
        height: 100% !important;
        font-size: 12px !important;
        padding: 15px !important;
    }
    
    /* 미리보기 하단 버튼 */
    .preview-footer {
        padding: 3px 8px !important;
        flex-wrap: wrap;
    }
    
    .preview-footer .btn {
        padding: 3px 8px !important;
        font-size: 11px !important;
    }
    
    .preview-footer .vec-container {
        width: 100%;
        justify-content: center;
    }
}

/* 모바일 가로모드: 미리보기 immersive 모드 */
@media (orientation: landscape) and (max-width: 1024px) {
    /* 헤더: 투명 오버레이 */
    .modal-preview.preview-immersive .modal-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 12;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
        padding: 8px 15px !important;
        background: rgba(0,0,0,0.75) !important;
    }
    .modal-preview.preview-immersive .modal-header.show-bar {
        opacity: 1;
        pointer-events: auto;
    }
    .modal-preview.preview-immersive .modal-header h2,
    .modal-preview.preview-immersive .modal-header #preview-title,
    .modal-preview.preview-immersive .modal-header #preview-counter,
    .modal-preview.preview-immersive .modal-header .modal-close {
        color: #fff !important;
    }
    .modal-preview.preview-immersive .preview-header-dl {
        display: inline-block;
        color: #fff;
    }
    
    /* 푸터: display:none으로 완전 숨김 */
    .modal-preview.preview-immersive .modal-footer.preview-footer {
        display: none !important;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 13;
        background: rgba(0,0,0,0.75) !important;
        border-top: none !important;
        padding: 5px 10px !important;
    }
    .modal-preview.preview-immersive .modal-footer.preview-footer.show-bar {
        display: flex !important;
    }
    .modal-preview.preview-immersive .preview-footer .btn {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        font-size: 12px !important;
        padding: 4px 10px !important;
    }
    .modal-preview.preview-immersive .preview-footer .btn:hover,
    .modal-preview.preview-immersive .preview-footer .btn:active {
        background: rgba(255, 255, 255, 0.25) !important;
    }
    
    /* 본문: 전체 영역 */
    .modal-preview.preview-immersive .modal-body {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 100% !important;
        height: 100% !important;
    }
    
    /* 모달 배경 + 리사이즈 핸들 숨김 + 전체화면 */
    .modal-preview.preview-immersive {
        background: #000 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        z-index: 10001 !important;
    }
    .modal-preview.preview-immersive .resize-handle {
        display: none !important;
    }
    
    /* 줌바 */
    .modal-preview.preview-immersive #preview-image-zoom-bar {
        bottom: 8px !important;
        z-index: 11 !important;
        opacity: 0;
        transition: opacity 0.3s, bottom 0.3s;
    }
    .modal-preview.preview-immersive #preview-image-zoom-bar.show-bar {
        opacity: 1;
        bottom: 50px !important;
    }
    
    /* immersive: 이미지/비디오 높이 제한 해제 */
    .modal-preview.preview-immersive #preview-content img,
    .modal-preview.preview-immersive #preview-content video {
        max-height: 100% !important;
        max-width: 100% !important;
    }
    
    /* 가로모드: 자막 컨트롤 축소 + 위치 조정 */
    .subtitle-controls {
        top: 40px;
        bottom: auto;
        right: 6px;
        max-width: 320px;
        gap: 3px;
        align-items: center;
    }
    .sub-ctrl-btn {
        padding: 2px 6px !important;
        font-size: 11px !important;
        height: auto !important;
        max-height: 24px !important;
        line-height: 1.3 !important;
    }
    .sub-sync-display {
        font-size: 10px !important;
        min-width: 32px;
        padding: 1px 3px !important;
        height: auto !important;
        max-height: 24px !important;
        line-height: 1.3 !important;
    }
    .sub-ctrl-sep {
        height: 16px !important;
        margin: 0 2px !important;
    }
    /* 가로모드: 전체화면 버튼 */
    .video-fullscreen-btn {
        bottom: 6px !important;
        right: 6px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }
    
    /* ★ v5.8.1i 1번 (펜닐님 보고): 모바일 가로 일반 음악 플레이어 재생목록 안 보임 + 터치 스크롤 안 됨 문제
       
       1차 시도 (.preview-audio-wrap에 overflow-y: auto 추가):
         PC 휠 스크롤은 됐지만 모바일 터치 스크롤 안 됨
         원인: iOS Safari의 flex + align-items:center + overflow:auto 조합 터치 버그
       
       2차 수정 (.modal-body flex-start로 변경 + .fap height auto):
         모바일 터치 스크롤은 됐지만 재생목록 가상 스크롤이 깨짐
         원인: .fap-playlist-list는 가상 스크롤 컨테이너인데 .fap이 height auto로 늘어나
                자체 스크롤 트리거 안 됨 → list.scrollTop=0 고정 → 첫 13개만 렌더링
       
       3차 수정 (현재):
         - .modal-body flex-start 유지 (모바일 터치 스크롤 정상)
         - .fap height auto 유지 (전체 콘텐츠 자연 흐름)
         - .fap-playlist-list에 명시적 max-height 부여
           → 자체 스크롤 컨테이너로 정상 동작 → 가상 스크롤(_vsRender) 정상 작동
         - max-height 60vh: 가로 모드 화면 높이의 60% (충분한 목록 영역)
       
       :has() 선택자로 음악 미리보기 컨텍스트만 정확히 매칭 (iOS Safari 15.4+ 지원)
       다른 미리보기(이미지/동영상/PDF)는 영향 없음
       세로 모드, PC 모드는 미디어쿼리로 자동 분리 — 영향 없음
       공유 페이지(share.php)는 별도 페이지 + 별도 구조 — 영향 없음 */
    .modal-preview .modal-body:has(.preview-audio-wrap) {
        align-items: flex-start !important;
        -webkit-overflow-scrolling: touch;
    }
    .modal-preview .modal-body:has(.preview-audio-wrap) #preview-content {
        height: auto !important;
        min-height: 100%;
        align-items: flex-start !important;
    }
    .modal-preview .modal-body .preview-audio-wrap {
        height: auto !important;
        min-height: 100%;
    }
    .modal-preview .modal-body #fs-audio-player {
        height: auto !important;
        min-height: 100%;
    }
    .modal-preview .modal-body .fap {
        height: auto !important;
        min-height: 100%;
    }
    /* 재생목록 자체 스크롤 영역 확보 → 가상 스크롤(_vsRender) 정상 동작 */
    .modal-preview .modal-body .fap-playlist-list {
        max-height: 60vh !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ========================================
   모바일 툴바 정렬 (최우선)
   ======================================== */
@media (max-width: 1024px) {
    .toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 8px 10px !important;
        gap: 6px 10px !important;
        z-index: 1 !important;
    }
    
    /* 1줄: 뒤로 + 전체선택 */
    .toolbar-left {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        order: 1 !important;
        flex-wrap: wrap !important;
    }
    
    .toolbar-left #btn-back {
        flex-shrink: 0 !important;
        padding: 4px !important;
    }
    
    .toolbar-left .select-all-wrap {
        display: flex !important;
        flex-shrink: 0 !important;
        padding: 2px 6px !important;
        font-size: 11px !important;
        gap: 3px !important;
    }
    
    .toolbar-left .select-all-wrap input {
        width: 14px !important;
        height: 14px !important;
    }
    
    /* 브레드크럼 - 전체 너비, 줄바꿈 허용 */
    .toolbar-left .breadcrumb {
        width: 100% !important;
        font-size: 12px !important;
        padding: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        word-break: break-all !important;
        line-height: 1.6 !important;
    }
    
    /* toolbar-center: 모바일에서 toolbar 내부 고정 */
    .toolbar-center {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        justify-content: flex-start !important;
        z-index: auto !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        gap: 6px !important;
    }
    
    /* 버튼들 */
    .toolbar-right {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        order: 2 !important;
        flex-wrap: nowrap !important;
    }
    
    #board-inline-toolbar .toolbar-right {
        justify-content: flex-end !important;
        width: auto !important;
        flex: 0 0 auto !important;
        gap: 4px !important;
        align-items: center !important;
    }
    
    #board-inline-toolbar {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 6px 8px !important;
        border-bottom: none !important;
    }
    
    #board-inline-toolbar .toolbar-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        display: flex !important;
    }
    
    #board-inline-toolbar .toolbar-left .breadcrumb {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 0 !important;
        min-width: 0 !important;
    }
    
    #board-inline-toolbar .toolbar-center {
        display: none !important;
    }
    
    #board-inline-toolbar #board-inline-search {
        width: 80px !important;
        height: 28px !important;
        font-size: 11px !important;
        padding-left: 24px !important;
    }
    
    #board-inline-toolbar .btn-board-write,
    #btn-board-detail-write.btn-board-write {
        height: 28px !important;
        line-height: 1 !important;
        padding: 0 8px !important;
        font-size: 11px !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    
    #board-detail-search {
        width: 80px !important;
        height: 28px !important;
        font-size: 11px !important;
        padding-left: 24px !important;
    }
    
    .toolbar-right .upload-dropdown {
        flex-shrink: 0 !important;
    }
    
    .upload-drag-hint {
        display: none;
    }
    
    .toolbar-right #btn-new-folder {
        flex-shrink: 0 !important;
    }
    
    .toolbar-right .sort-dropdown {
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    
    .toolbar-right #btn-view-grid,
    .toolbar-right #btn-view-list {
        flex-shrink: 0 !important;
    }
    
    .toolbar-right .btn {
        padding: 5px 8px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    
    .toolbar-right .btn-icon {
        padding: 5px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .toolbar-left .select-all-wrap span {
        display: inline !important;
        font-size: 10px !important;
    }
    
    .toolbar-left .breadcrumb {
        font-size: 11px !important;
    }
    
    .toolbar-right .btn {
        padding: 4px 6px !important;
        font-size: 11px !important;
    }
    
    .toolbar-right .btn-icon {
        padding: 4px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   모바일 로고 표시 (최우선)
   ======================================== */
@media (max-width: 1024px) {
    .logo {
        display: flex !important;
        visibility: visible !important;
        align-items: center !important;
        gap: 5px !important;
    }
    
    .logo img,
    .logo .header-logo {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 24px !important;
        height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        object-fit: contain !important;
    }
}

/* ========================================
   모바일 로그인 화면 (최우선)
   ======================================== */
@media (max-width: 1024px) {
    #login-screen.active {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        width: 100% !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #login-screen.hidden {
        display: none !important;
    }
    
    .login-box {
        width: 90% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        padding: 25px 20px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }
    
    .login-logo {
        font-size: 40px !important;
        margin-bottom: 8px !important;
    }
    
    .login-logo img {
        max-width: 60px !important;
        max-height: 60px !important;
    }
    
    .login-box h1 {
        font-size: 18px !important;
        margin-bottom: 20px !important;
    }
    
    .login-box input[type="text"],
    .login-box input[type="password"] {
        width: 100% !important;
        padding: 12px !important;
        font-size: 15px !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
    }
    
    .login-box .btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 15px !important;
    }
    
    /* 로그인 유지 체크박스 */
    .login-box .remember-me {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        font-size: 13px !important;
        margin: 10px 0 !important;
    }
    
    .login-box .remember-me input[type="checkbox"] {
        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .login-box .remember-me span {
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 480px) {
    #login-screen {
        padding: 15px !important;
    }
    
    .login-box {
        width: 92% !important;
        max-width: 300px !important;
        padding: 20px 15px !important;
    }
    
    .login-logo {
        font-size: 36px !important;
    }
    
    .login-logo img {
        max-width: 50px !important;
        max-height: 50px !important;
    }
    
    .login-box h1 {
        font-size: 16px !important;
        margin-bottom: 15px !important;
    }
    
    .login-box input[type="text"],
    .login-box input[type="password"] {
        padding: 10px !important;
        font-size: 14px !important;
    }
    
    .login-box .btn {
        padding: 10px !important;
        font-size: 14px !important;
    }
    
    .login-box .remember-me {
        font-size: 12px !important;
    }
    
    .login-box .remember-me input[type="checkbox"] {
        width: 12px !important;
        height: 12px !important;
    }
}

/* ========================================
   모바일 승인 대기 알림 (최우선)
   ======================================== */
/* 로그인 화면에서는 승인 알림 숨김 (클래스 기반) */
body:has(#login-screen.active) .pending-notification {
    display: none !important;
}

@media (max-width: 1024px) {
    .pending-notification {
        bottom: 15px !important;
        right: 10px !important;
        left: 10px !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        border-radius: 8px !important;
    }
    
    .pending-icon {
        font-size: 16px !important;
        width: 28px !important;
        height: 28px !important;
    }
    
    .pending-text {
        font-size: 11px !important;
        flex: 1 !important;
    }
    
    .pending-text strong {
        font-size: 12px !important;
    }
    
    .pending-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
        border-radius: 5px !important;
    }
    
    .pending-close {
        font-size: 14px !important;
        padding: 3px 6px !important;
    }
}

@media (max-width: 480px) {
    .pending-notification {
        bottom: 10px !important;
        right: 8px !important;
        left: 8px !important;
        padding: 8px 10px !important;
        gap: 6px !important;
    }
    
    .pending-icon {
        font-size: 14px !important;
        width: 24px !important;
        height: 24px !important;
    }
    
    .pending-text {
        font-size: 10px !important;
    }
    
    .pending-text strong {
        font-size: 11px !important;
    }
    
    .pending-btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    
    .pending-close {
        font-size: 12px !important;
        padding: 2px 5px !important;
    }
}

/* ========================================
   보안 설정 UI 스타일
   ======================================== */
.modal-xl {
    max-width: 900px !important;
}

.security-header {
    background: var(--primary) !important;
    color: var(--modal-header-text, white) !important;
}

.security-header h2 {
    color: var(--modal-header-text, white) !important;
}

.security-header .modal-close {
    color: var(--modal-header-text, white) !important;
}

.security-info-bar {
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
    margin-bottom: 20px;
}

.security-info-bar code {
    background: #1976d2;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.security-toggle-section {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 20px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.toggle-switch.small {
    width: 40px;
    height: 22px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch.small .toggle-slider:before {
    height: 16px;
    width: 16px;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #4caf50;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.toggle-switch.small input:checked + .toggle-slider:before {
    transform: translateX(18px);
}

.toggle-label {
    font-weight: bold;
    font-size: 16px;
}

.security-warning {
    color: #f57c00;
    font-size: 12px;
    background: #fff3e0;
    padding: 6px 12px;
    border-radius: 4px;
    flex-basis: 100%;
    margin-top: 10px;
}

.security-mode-section {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.security-mode-section h4 {
    margin-bottom: 15px;
    font-size: 14px;
    color: #333;
}

.security-mode-section h4 .required {
    color: #e53935;
    font-size: 12px;
    font-weight: normal;
}

.security-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.mode-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.checkbox-label:hover {
    background: #f5f5f5;
}

.checkbox-label input:checked ~ span {
    color: #1976d2;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-icon {
    font-size: 16px;
}

.mode-hint {
    color: #f57c00;
    font-size: 12px;
    text-align: center;
    margin-top: 15px;
    padding: 8px;
    background: #fff8e1;
    border-radius: 4px;
}

/* GeoIP 데이터 소스 */
.security-geoip-section {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.security-geoip-section h4 {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: #333;
}

.geoip-source-options {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 15px;
}

.geoip-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.geoip-option:hover {
    border-color: var(--primary);
    background: #f0f7ff;
}

.geoip-option input[type="radio"] {
    margin: 0;
}

.geoip-option input[type="radio"]:checked + .geoip-icon {
    color: var(--primary);
}

.geoip-option:has(input:checked) {
    border-color: var(--primary);
    background: #e3f2fd;
}

.geoip-icon {
    font-size: 16px;
}

.geoip-block-unknown {
    text-align: center;
    margin: 15px 0;
    padding: 10px;
    background: #fff;
    border-radius: 6px;
}

.geoip-block-unknown label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
}

.geoip-hint {
    color: #f57c00;
    font-size: 12px;
    text-align: center;
    padding: 8px;
    background: #fff8e1;
    border-radius: 4px;
}

#geoip-file-section {
    margin-top: 15px;
    padding: 15px;
    background: #fff;
    border-radius: 6px;
}

#geoip-file-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 13px;
}

#geoip-file-section input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}

#geoip-file-section .input-example {
    margin-top: 8px;
    font-size: 11px;
    color: #666;
    line-height: 1.6;
}

#geoip-file-section .input-example a {
    color: var(--primary);
}

.security-input-section {
    margin-bottom: 20px;
}

.input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 15px;
}

.input-column label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 13px;
}

.input-column label .label-icon {
    margin-right: 5px;
}

.input-column label small {
    color: #757575;
    font-weight: normal;
}

.input-column input,
.input-column textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.input-column input:focus,
.input-column textarea:focus {
    outline: none;
    border-color: #1976d2;
}

.input-column input:disabled,
.input-column textarea:disabled {
    background: #f5f5f5;
    color: #9e9e9e;
    cursor: not-allowed;
}

.input-example {
    font-size: 11px;
    color: #757575;
    margin-top: 5px;
}

.security-admin-section {
    background: #ffebee;
    border: 2px solid #ef5350;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.security-admin-section h4 {
    margin-bottom: 10px;
    color: #c62828;
}

.admin-ip-warning {
    background: #c62828;
    color: white;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 1.6;
}

.admin-ip-warning strong {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}

.current-ip-hint {
    display: block;
    margin-top: 8px;
    color: #ffcdd2;
}

.current-ip-hint code {
    background: rgba(255,255,255,0.2);
    padding: 2px 6px;
    border-radius: 3px;
    color: #ffeb3b;
    font-weight: bold;
}

.security-admin-section textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ef9a9a;
    border-radius: 6px;
    font-size: 14px;
}

.security-admin-section textarea:focus {
    outline: none;
    border-color: #e53935;
}

.security-extra-section {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.extra-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
    align-items: end;
}

.extra-item label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 13px;
}

.extra-item input[type="text"],
.extra-item input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
}

.input-with-unit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-with-unit input {
    flex: 1;
}

.input-with-unit .unit {
    color: #757575;
    font-size: 13px;
}

.extra-item .toggle-switch {
    vertical-align: middle;
}

.toggle-text {
    font-size: 13px;
    color: #616161;
    vertical-align: middle;
    margin-left: 5px;
}

#btn-test-security {
    background: #ff9800;
    color: white;
}

#btn-test-security:hover {
    background: #f57c00;
}

/* 반응형 */
@media (max-width: 1024px) {
    .security-mode-grid {
        grid-template-columns: 1fr;
    }
    
    .input-row {
        grid-template-columns: 1fr;
    }
    
    .extra-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* 검색 인덱스 SQLite 경고 */
.sqlite-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    color: #856404;
}

.sqlite-warning p {
    margin: 5px 0;
}

.sqlite-warning code {
    background: rgba(0,0,0,0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.index-requirement {
    color: #666;
    font-size: 13px;
    margin-top: 10px;
    padding: 8px;
    background: #f0f0f0;
    border-radius: 4px;
}

.index-requirement code {
    background: #e0e0e0;
    padding: 2px 6px;
    border-radius: 3px;
}

/* 검색 인덱스 자동 갱신 상태 */
.index-auto-status {
    padding: 0;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 13px;
}

.index-auto-status #index-auto-on {
    background: #e8f5e9;
    color: #2e7d32;
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #a5d6a7;
}

.index-auto-status #index-auto-off {
    background: #fff8e1;
    color: #f57c00;
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #ffcc80;
}

.index-auto-status a {
    color: #1976d2;
    margin-left: 10px;
}

/* 사용자 관리 설정 상태 바 */
.settings-status-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 12px 15px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 13px;
}

.settings-status-bar .status-item {
    display: inline-flex;
    align-items: center;
}

.settings-status-bar .status-on {
    color: #2e7d32;
    background: #e8f5e9;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.settings-status-bar .status-off {
    color: #c62828;
    background: #ffebee;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.settings-status-bar .settings-link {
    margin-left: auto;
    color: #1976d2;
    font-size: 12px;
}

.settings-status-bar .settings-link:hover {
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .settings-status-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .settings-status-bar .settings-link {
        margin-left: 0;
        margin-top: 8px;
    }
}

/* 로딩 스피너 */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.loading-spinner .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e9ecef;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-spinner p {
    margin-top: 15px;
    color: #6c757d;
}

/* 조건부 일괄삭제 안내 */
.bulk-delete-info {
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 20px;
}

.bulk-delete-info .info-notice {
    margin: 0;
    color: #1565c0;
    font-size: 14px;
}

.bulk-delete-settings .setting-desc code {
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
    color: #d32f2f;
}

/* 반응형 유틸리티 클래스 */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-block { display: block !important; }
}

/* User-Agent 셀 스타일 */
.ua-cell {
    white-space: nowrap;
}

.ua-cell[onclick] {
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 4px;
}

.ua-cell[onclick]:hover {
    background: rgba(0, 0, 0, 0.05);
}

.ua-cell .ua-icon {
    padding: 5px;
    border-radius: 4px;
    transition: background 0.2s;
}

.ua-cell .ua-icon:hover {
    background: rgba(0,0,0,0.1);
}

.ua-detail {
    font-size: 13px;
}

/* 텍스트 줄바꿈 방지 */
.text-nowrap {
    white-space: nowrap !important;
}

/* 첫 사용자 안내 */
.first-user-notice {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* ===== 즐겨찾기 & 최근 파일 ===== */
.favorite-item, .recent-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    min-height: 32px;
    box-sizing: border-box;
}

.favorite-item a, .recent-file-item a {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* 모바일: 좌우 스크롤 (스크롤바 숨김) */
@media (max-width: 1024px) {
    .favorite-item a, .recent-file-item a {
        overflow-x: auto;
        overflow-y: hidden;
        text-overflow: unset;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* iOS Safari의 자동 폰트 조정 방지 (스크롤시 폰트 커짐 현상 방지) */
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        font-size: 14px;
        line-height: 20px;
    }
    .favorite-item a::-webkit-scrollbar, .recent-file-item a::-webkit-scrollbar {
        display: none;
    }
}

.favorite-item.active, .recent-file-item.active {
    background: rgba(0, 120, 215, 0.15);
    border-radius: 3px;
}
.favorite-item.active a, .recent-file-item.active a {
    color: var(--text);
}
.favorite-item.active .favorite-remove,
.recent-file-item.active .recent-remove {
    color: #666;
}

/* 호버 시 연한 배경 */
.favorite-item:hover, .recent-file-item:hover {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 3px;
}
.favorite-item.active:hover, .recent-file-item.active:hover {
    background: rgba(0, 120, 215, 0.22);
}

.favorite-item a svg, .recent-file-item a svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sidebar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-icon svg {
    width: 16px;
    height: 16px;
}

.favorite-item a:hover, .recent-file-item a:hover {
    color: var(--primary);
}

.favorite-remove, .recent-remove {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s;
}

.favorite-item:hover .favorite-remove,
.recent-file-item:hover .recent-remove {
    opacity: 1;
}

.favorite-remove:hover, .recent-remove:hover {
    color: var(--danger);
}

/* 사이드바 섹션 토글 */
.section-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    user-select: none;
    font-size: 13px;
    padding: 8px 0;
}

.section-toggle:hover {
    color: var(--primary);
}

.section-toggle .toggle-icon {
    font-size: 10px;
    transition: transform 0.2s;
}

.section-toggle.open .toggle-icon {
    transform: rotate(90deg);
}

/* ===== 파일 잠금 ===== */
.file-item.is-locked {
    opacity: 0.8;
}

.file-item.is-locked .file-name {
    color: #888;
}

.lock-badge {
    font-size: 12px;
    margin-left: 2px;
    flex-shrink: 0;
}

/* 그리드 뷰에서 잠금 배지 위치 */
/* grid-view lock-badge: 위치는 상단에서 통합 관리 */

/* ===== 통합 검색 결과 ===== */
.search-result-item:hover {
    background: #f5f5f5;
}

.search-result-item {
    display: flex;
    align-items: center;
}

.search-result-item .file-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.search-result-item .file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-item .file-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.search-result-item .file-size {
    width: 90px;
    min-width: 90px;
    text-align: right;
    white-space: nowrap;
}

.search-result-item .file-date {
    width: 145px;
    min-width: 145px;
    white-space: nowrap;
}

/* 검색 모달 */
#modal-advanced-search .form-group {
    margin-bottom: 12px;
}

#modal-advanced-search .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 13px;
}

#modal-advanced-search input,
#modal-advanced-search select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

#modal-advanced-search input:focus,
#modal-advanced-search select:focus {
    border-color: var(--primary);
    outline: none;
}

/* ===== 통합 검색 필터 ===== */
.search-filters {
    background: #f8f9fa;
    border-bottom: none;
    box-shadow: 0 1px 0 #e0e0e0;
    padding: 12px 15px;
}

.search-filters .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

.search-filters .filter-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.search-filters .filter-item label {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

.search-filters .filter-item input,
.search-filters .filter-item select {
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}

.search-filters .filter-item input[type="date"] {
    width: 130px;
}

.search-filters .filter-item input[type="number"] {
    width: 70px;
}

.search-filters .filter-actions {
    display: flex;
    gap: 5px;
    margin-left: auto;
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

/* 검색 결과 헤더 */
.search-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-bottom: 1px solid #90caf9;
}

.search-result-header #btn-exit-search {
    min-width: 80px;
    min-height: 36px;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

.search-result-header .search-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-result-header .search-query {
    font-weight: 600;
    color: #1565c0;
}

.search-result-header .search-count {
    color: #666;
    font-size: 13px;
}

/* 검색 페이지네이션 */
.search-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
}

.search-pagination .page-buttons {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

.search-pagination .page-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}

.search-pagination .page-btn:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

.search-pagination .page-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    font-weight: bold;
}

.search-pagination .page-info {
    margin-top: 8px;
    font-size: 12px;
    color: #888;
}

/* 헤더 검색 필터 토글 버튼 */
#search-filter-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

#search-filter-toggle:hover {
    opacity: 1;
}

#search-filter-toggle.active {
    opacity: 1;
    color: var(--primary);
}

/* 모바일 대응 */
@media (max-width: 1024px) {
    .search-filters .filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .search-filters .filter-item {
        flex-wrap: wrap;
    }
    
    .search-filters .filter-actions {
        margin-left: 0;
        justify-content: flex-end;
    }
}

/* 검색어 하이라이트 */
.search-highlight,
.file-name .search-highlight,
mark.search-highlight {
    background-color: #ffeb3b !important;
    color: #000 !important;
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 600;
    box-shadow: 0 0 2px rgba(255, 193, 7, 0.5);
}

/* ===== 2FA 스타일 ===== */
#tab-twofa .alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

#tab-twofa .alert-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

#tab-twofa .alert-success {
    background: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
}

#tab-twofa .alert-info {
    background: #d1ecf1;
    border: 1px solid #17a2b8;
    color: #0c5460;
}

#tab-twofa h5 {
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: 600;
}

.qr-code-area {
    text-align: center;
    margin: 20px 0;
}

.qr-code-area img {
    border: 1px solid #ddd;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
}

.secret-key-area {
    text-align: center;
    margin: 15px 0;
}

.secret-key-area code {
    font-size: 16px;
    letter-spacing: 2px;
    padding: 10px 15px;
    background: #f5f5f5;
    border-radius: 4px;
    display: inline-block;
    font-family: 'Consolas', 'Monaco', monospace;
}

.backup-codes-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 300px;
    margin: 20px auto;
}

.backup-codes-list code {
    background: #f5f5f5;
    padding: 10px;
    text-align: center;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

#twofa-verify-code {
    text-align: center;
    font-size: 24px;
    letter-spacing: 5px;
    padding: 10px;
}

/* 2FA 로그인 폼 */
#twofa-form input[type="text"] {
    font-size: 24px;
    letter-spacing: 5px;
    text-align: center;
}

#twofa-form p {
    color: #666;
}

/* ===== SMTP 설정 UI ===== */
.smtp-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.smtp-col {
    flex: 1;
}

.smtp-col-small {
    flex: 0 0 120px;
}

.smtp-col label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #333;
}

.smtp-col input {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
}

.smtp-hint {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

.smtp-hint a {
    color: var(--primary);
}

/* 암호화 방식 버튼 그룹 */
.smtp-secure-btns {
    display: flex;
    gap: 0;
    margin-top: 5px;
}

.smtp-secure-btn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.smtp-secure-btn:first-child {
    border-radius: 4px 0 0 4px;
}

.smtp-secure-btn:last-child {
    border-radius: 0 4px 4px 0;
    border-left: none;
}

.smtp-secure-btn:not(:first-child):not(:last-child) {
    border-left: none;
}

.smtp-secure-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.smtp-secure-btn:hover:not(.active) {
    background: #f5f5f5;
}

/* 비밀번호 저장 상태 */
#smtp-pass-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 5px;
}

#smtp-pass-status.saved {
    background: #d4edda;
    color: #155724;
}

#smtp-pass-status.not-saved {
    background: #f8d7da;
    color: #721c24;
}

/* 테스트 발송 섹션 */
.smtp-test-section {
    background: #f0f7f0;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
}

.smtp-test-section h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #333;
}

.smtp-test-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.smtp-test-row input {
    flex: 1;
    padding: 8px 12px;
    font-size: 14px;
}

.smtp-test-row button {
    white-space: nowrap;
}

#smtp-test-result {
    margin-top: 10px;
    padding: 8px;
    border-radius: 4px;
    display: none;
}

#smtp-test-result.success {
    display: block;
    background: #d4edda;
    color: #155724;
}

#smtp-test-result.error {
    display: block;
    background: #f8d7da;
    color: #721c24;
}

#smtp-test-result.loading {
    display: block;
    background: #fff3cd;
    color: #856404;
}

/* OnlyOffice 테스트 결과 */
#onlyoffice-test-result {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
    display: none;
    font-size: 13px;
}

#onlyoffice-test-result.success {
    display: block;
    background: #d4edda;
    color: #155724;
}

#onlyoffice-test-result.error {
    display: block;
    background: #f8d7da;
    color: #721c24;
}

#onlyoffice-test-result.loading {
    display: block;
    background: #fff3cd;
    color: #856404;
}

#onlyoffice-test-result small {
    opacity: 0.8;
    word-break: break-all;
}

/* 입력필드 + 버튼 조합 */
.input-with-btn {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-with-btn .form-control {
    flex: 1;
}

.input-with-btn .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* 주요 이메일 서비스 안내 */
.smtp-info-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.smtp-info-section h4 {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: #333;
}

.smtp-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 15px;
}

.smtp-info-table th,
.smtp-info-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

.smtp-info-table th {
    background: #f5f5f5;
    font-weight: 500;
}

.smtp-info-table tr:nth-child(even) {
    background: #fafafa;
}

.smtp-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
}

.smtp-warning strong {
    color: #856404;
}

.smtp-warning ol {
    margin: 10px 0 0 0;
    padding-left: 20px;
    color: #856404;
}

.smtp-warning ol li {
    margin-bottom: 5px;
}

.smtp-warning a {
    color: #856404;
    text-decoration: underline;
}

/* 반응형 */
@media (max-width: 600px) {
    .smtp-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .smtp-col-small {
        flex: 1;
    }
    
    .smtp-test-row {
        flex-direction: column;
    }
    
    .smtp-test-row button {
        width: 100%;
    }
}

/* ========== 내 정보 카드 ========== */
.my-account-info {
    margin-bottom: 15px;
}

.my-account-info h4 {
    font-size: 14px;
    margin-bottom: 8px;
}

.account-info-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    padding: 10px 14px;
    border: 1px solid #dee2e6;
}

.account-info-card .info-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px dashed #dee2e6;
    font-size: 13px;
}

.account-info-card .info-row:last-child {
    border-bottom: none;
}

.account-info-card .info-label {
    font-weight: 500;
    color: #495057;
}

.account-info-card .info-value {
    color: #212529;
    font-family: monospace;
    font-size: 12px;
}

/* 회원 탈퇴 영역 */
.account-danger-zone {
    background: #fff5f5;
    border: 1px solid #f8d7da;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.account-danger-zone h4 {
    color: #c0392b;
    margin-bottom: 10px;
}

/* ========== 삭제된 사용자 모달 ========== */
.deleted-users-wrapper {
    overflow-x: hidden;
}

.deleted-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}

.deleted-users-table th,
.deleted-users-table td {
    padding: 6px 4px;
    border-bottom: 1px solid #eee;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deleted-users-table th {
    background: #f5f5f5;
    font-weight: 500;
    font-size: 11px;
}

.deleted-type-withdraw {
    color: #2196f3;
    font-weight: 500;
}

.deleted-type-admin {
    color: #f44336;
    font-weight: 500;
}

/* ========== 약관 스타일 ========== */
.terms-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background: #f9f9f9;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 1.6;
}

.terms-agree-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #e3f2fd;
    border-radius: 8px;
    margin-bottom: 15px;
}

.terms-agree-wrap input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

.terms-agree-wrap label {
    cursor: pointer;
    font-weight: 500;
    color: #1976d2;
    line-height: 1.4;
}

/* 약관 관리 */
.terms-editor {
    width: 100%;
    min-height: 300px;
    font-family: inherit;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    resize: vertical;
}

/* ========== 공지 설정 ========== */
.notice-section {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.notice-section h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: #333;
}

.notice-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.notice-section-header h3 {
    margin: 0;
}

.notice-form-table {
    width: 100%;
    border-collapse: collapse;
}

.notice-form-table th,
.notice-form-table td {
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
}

.notice-form-table th {
    width: 120px;
    font-weight: 500;
    color: #555;
    white-space: nowrap;
}

.notice-form-table .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.notice-form-table small {
    display: block;
    margin-top: 5px;
    color: #888;
    font-size: 12px;
}

/* 팝업 카드 */
/* 팝업 리스트 테이블 */
.popup-list-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    table-layout: fixed;
}

.popup-list-table thead {
    background: #f8f9fa;
}

.popup-list-table th {
    padding: 10px 6px;
    font-weight: 600;
    font-size: 12px;
    color: #555;
    text-align: center;
    border-bottom: 2px solid #e0e0e0;
    white-space: nowrap;
}

.popup-list-table td {
    padding: 12px 6px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    font-size: 13px;
}

.popup-list-table tr:last-child td {
    border-bottom: none;
}

.popup-list-table tr:hover {
    background: #f8f9fa;
}

.popup-list-table tr.disabled-row {
    opacity: 0.5;
    background: #f5f5f5;
}

.popup-order-badge {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-icon:hover {
    background: #f0f0f0;
    border-color: #ccc;
    color: #333;
}

.btn-icon svg {
    width: 16px;
    height: 16px;
}

.btn-danger-icon {
    border-color: #ffcdd2;
}

.btn-danger-icon:hover {
    background: #ffebee;
}

/* 팝업 카드 (기존 - 백업용) */
.popup-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    position: relative;
}

.popup-card.disabled {
    opacity: 0.6;
    background: #f5f5f5;
}

.popup-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.popup-card-title {
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.popup-card-actions {
    display: flex;
    gap: 8px;
}

.popup-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.popup-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.popup-field.full-width {
    grid-column: 1 / -1;
}

.popup-field label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.popup-field input,
.popup-field textarea,
.popup-field select {
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 13px;
    width: 100%;
}

.popup-field textarea {
    min-height: 80px;
    resize: vertical;
}

.popup-field input[type="file"] {
    padding: 6px;
    font-size: 12px;
}

.popup-field input[type="date"],
.popup-field input[type="number"] {
    width: 100%;
}

/* 팝업 이미지 미리보기 */
.popup-image-preview {
    border: 1px dashed #ddd;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    background: #f9f9f9;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.popup-image-preview.empty {
    color: #999;
    font-size: 13px;
}

.popup-image-preview img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 4px;
    object-fit: contain;
}

.popup-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.popup-status.active {
    background: #e8f5e9;
    color: #2e7d32;
}

.popup-status.inactive {
    background: #ffebee;
    color: #c62828;
}

.popup-status.scheduled {
    background: #e3f2fd;
    color: #1565c0;
}

/* 상단 배너 (실제 표시) */
.top-banner {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    z-index: 100;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.top-banner .banner-content {
    flex: 1;
    text-align: left;
}

.top-banner a {
    color: inherit;
    text-decoration: underline;
}

.top-banner .banner-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.top-banner .banner-checkbox-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.top-banner .banner-checkbox {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.top-banner .banner-close {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.7;
    padding: 0;
    font-weight: 600;
}

.top-banner .banner-close:hover {
    opacity: 1;
}

/* 팝업 공지 (실제 표시) */
.notice-popup {
    position: fixed;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 9999;
    max-width: 400px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}

.notice-popup-header {
    padding: 15px 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    flex-shrink: 0;
}

.notice-popup-header h4 {
    margin: 0;
    font-size: 15px;
}

.notice-popup-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.8;
}

.notice-popup-close:hover {
    opacity: 1;
}

.notice-popup-body {
    padding: 20px;
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.6;
    flex: 1;
}

.notice-popup-footer {
    padding: 12px 20px;
    background: #f5f5f5;
    border-radius: 0 0 12px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    margin-top: auto;
}

.notice-popup-footer label {
    font-size: 12px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}


/* 접속 통계 */
.stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.stats-card {
    background: linear-gradient(135deg, #f8f9fa, #fff);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.stats-icon {
    font-size: 32px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e3f2fd;
    border-radius: 12px;
}

.stats-value {
    font-size: 24px;
    font-weight: 700;
    color: #1976d2;
}

.stats-label {
    font-size: 12px;
    color: #666;
}

.stats-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
}

.stats-tab {
    padding: 10px 20px;
    border: none;
    background: #f5f5f5;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.stats-tab:hover {
    background: #e0e0e0;
}

.stats-tab.active {
    background: #4caf50;
    color: white;
}

.stats-content {
    display: none;
}

.stats-content.active {
    display: block;
}

.stats-content h4 {
    margin: 0 0 15px 0;
    color: #333;
}

.chart-container {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    overflow-x: auto;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 200px;
    min-width: max-content;
}

.bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 25px;
}

.bar-value {
    font-size: 10px;
    color: #666;
    margin-bottom: 4px;
}

.bar-fill {
    width: 20px;
    background: linear-gradient(to top, #4caf50, #81c784);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height 0.3s;
}

.bar-label {
    font-size: 9px;
    color: #888;
    margin-top: 4px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    max-height: 50px;
    overflow: hidden;
}

.stats-table-wrapper {
    overflow-x: auto;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.stats-table th,
.stats-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.stats-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #555;
}

.stats-table tr:hover {
    background: #f5f5f5;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.stats-section h4 {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0e0;
}

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
}

.stats-list-name {
    font-weight: 500;
}

.stats-list-count {
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.stats-rank {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 50%;
    font-weight: 600;
    font-size: 12px;
}

.stats-rank.gold { background: #fff3e0; color: #e65100; }
.stats-rank.silver { background: #eceff1; color: #546e7a; }
.stats-rank.bronze { background: #efebe9; color: #6d4c41; }

.stats-progress {
    width: 100px;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.stats-progress-bar {
    height: 100%;
    background: linear-gradient(to right, #4caf50, #81c784);
    border-radius: 4px;
}


/* 접속 통계 요약 박스 */
.stats-summary-box {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fafafa;
    margin-bottom: 20px;
    overflow: hidden;
}

.stats-summary-item {
    flex: 1;
    text-align: center;
    padding: 20px 15px;
}

.stats-summary-divider {
    width: 1px;
    background: #ddd;
}

.stats-summary-title {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.stats-summary-value {
    font-size: 28px;
    font-weight: 700;
    color: #333;
}

.stats-summary-sub {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

/* 시간대별 테이블 */
.hourly-table-wrapper {
    overflow-x: auto;
}

.hourly-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    table-layout: fixed;
}

.hourly-table th,
.hourly-table td {
    border: 1px solid #ddd;
    padding: 10px 5px;
    text-align: center;
    font-size: 13px;
    min-width: 45px;
}

.hourly-table th {
    background: #f5f5f5;
    font-weight: 600;
    color: #555;
}

.hourly-table td {
    font-weight: 500;
}

@media (max-width: 1024px) {
    .stats-summary-box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow: visible;
        gap: 0;
    }
    .stats-summary-item {
        padding: 12px 8px;
        box-shadow: -1px -1px 0 0 #ddd;
    }
    .stats-summary-value {
        font-size: 22px;
    }
    .stats-summary-divider {
        display: none;
    }
    .stats-tabs {
        flex-wrap: wrap;
    }
    .stats-tab {
        flex: 1 1 45%;
        font-size: 12px;
        padding: 8px 10px;
    }
}

/* 통계 테이블 배지 및 하이라이트 */
.stats-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

.stats-badge.today {
    background: #e3f2fd;
    color: #1976d2;
}

.stats-badge.yesterday {
    background: #fff3e0;
    color: #e65100;
}

.stats-row-highlight {
    background: #e8f5e9 !important;
}

.stats-row-highlight:hover {
    background: #c8e6c9 !important;
}

.stats-table-full {
    width: 100%;
    table-layout: fixed;
}

.stats-table-full th:first-child,
.stats-table-full td:first-child {
    width: 40%;
    text-align: left;
}

.stats-table-full th:nth-child(2),
.stats-table-full td:nth-child(2) {
    width: 35%;
    text-align: right;
}

.stats-table-full th:last-child,
.stats-table-full td:last-child {
    width: 25%;
    text-align: right;
}

.stats-table-full th,
.stats-table-full td {
    padding: 12px 15px;
}

.stats-note {
    color: #888;
    font-size: 12px;
    text-align: center;
    margin-top: 15px;
}

/* ========================================
   모바일 모달/테이블 UI 개선
   ======================================== */
@media (max-width: 1024px) {
    /* 모달 내 테이블 가로 스크롤 */
    .modal-body table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .modal-body .data-table {
        min-width: 500px;
    }
    
    .modal-body .data-table th,
    .modal-body .data-table td {
        padding: 10px 8px;
        font-size: 13px;
        white-space: nowrap;
    }
    
    /* 사용자 관리 테이블 */
    #modal-users .data-table {
        min-width: 600px;
    }
    
    #modal-users .data-table th,
    #modal-users .data-table td {
        padding: 8px 6px;
        font-size: 12px;
    }
    
    /* 활동 로그 테이블 — 모든 컬럼 보이도록 전체 폭 보장, 부족하면 가로 스크롤 */
    #modal-activity-logs .data-table {
        min-width: 640px;
    }
    
    #modal-activity-logs .data-table th,
    #modal-activity-logs .data-table td {
        padding: 8px 6px;
        font-size: 12px;
    }
    
    #modal-activity-logs .activity-filters {
        flex-direction: column;
    }
    
    #modal-activity-logs .filter-row {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    #modal-activity-logs .filter-group {
        flex: 1 1 45%;
        min-width: 140px;
    }
    
    #modal-activity-logs .activity-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* iOS Safari의 자동 폰트 조정 방지 */
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    #modal-activity-logs .activity-table-wrap::-webkit-scrollbar {
        display: none;
    }
    
    /* 로그인 로그 테이블 */
    .login-logs-table {
        min-width: 450px;
    }
    
    .login-logs-table th,
    .login-logs-table td {
        padding: 8px 6px;
        font-size: 12px;
    }
    
    /* 공지 설정 모달 */
    #modal-announcement .modal-body {
        padding: 15px;
    }
    
    #modal-announcement .popup-settings {
        flex-direction: column;
        gap: 15px;
    }
    
    #modal-announcement .popup-settings > div {
        width: 100%;
    }
    
    #modal-announcement .popup-size-settings {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    #modal-announcement table {
        min-width: 500px;
    }
    
    /* 휴지통 모달 — 내 휴지통과 동일한 레이아웃 사용 (일반 모바일 .trash-item 규칙 적용) */
    
    /* 검색 인덱스 모달 - 모바일도 PC와 동일하게 */
    #modal-search-index .modal-body {
        padding: 15px;
    }
    
    #modal-search-index .index-stats {
        width: 100%;
    }
    
    #modal-search-index .index-stats table,
    #modal-search-index .stats-table {
        width: 100%;
        table-layout: fixed;
    }
    
    #modal-search-index .stats-table th {
        width: 40%;
        text-align: left;
    }
    
    #modal-search-index .stats-table td {
        width: 60%;
        text-align: left;
    }
    
    /* 스토리지 관리 테이블 */
    #modal-storages .data-table {
        min-width: 500px;
    }
    
    /* 버튼 그룹 모바일 */
    .modal-body .btn-group {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .modal-body .btn-group .btn {
        flex: 1 1 auto;
        min-width: 120px;
        font-size: 13px;
        padding: 10px 15px;
    }
    
    /* 폼 요소 모바일 */
    .modal-body input[type="text"],
    .modal-body input[type="number"],
    .modal-body input[type="password"],
    .modal-body select {
        font-size: 16px; /* iOS 줌 방지 */
        padding: 10px 12px;
    }
    
    /* 테이블 래퍼 스타일 */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -15px;
        padding: 0 15px;
    }
    
    /* 상태 뱃지 */
    .badge, .status-badge {
        font-size: 11px;
        padding: 3px 8px;
        white-space: nowrap;
    }
    
    /* 공지 설정 모달 */
    #modal-notice .modal-body {
        padding: 15px 10px;
    }
    
    #modal-notice .notice-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    #modal-notice .notice-section-header h3 {
        font-size: 15px;
    }
    
    #modal-notice .notice-section-header h3 small {
        display: block;
        margin-top: 5px;
    }
    
    /* 팝업 배치 설정 */
    #modal-notice div[style*="flex-wrap:wrap"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    /* 팝업 테이블 */
    #popup-list-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -10px;
        padding: 0 10px;
    }
    
    .popup-list-table {
        min-width: 650px;
        font-size: 12px;
    }
    
    .popup-list-table th,
    .popup-list-table td {
        padding: 8px 5px;
    }
}

/* ===== 국가 코드 참조 UI ===== */
.country-codes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

.country-codes-header h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-link {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
}

.toggle-link:hover {
    text-decoration: underline;
}

.country-select-mode {
    display: flex;
    gap: 15px;
    font-size: 13px;
}

.country-select-mode label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.country-codes-container {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 15px;
    background: #fafafa;
    max-height: 400px;
    overflow-y: auto;
}

.country-region {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.country-region:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.region-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.region-title::before {
    content: '';
    width: 4px;
    height: 16px;
    background: var(--primary);
    border-radius: 2px;
}

.country-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.country-btn {
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.country-btn:hover {
    border-color: var(--primary);
    background: #f0f7ff;
}

.country-btn.selected {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.country-btn.selected:hover {
    background: var(--primary-dark);
}

/* 차단 모드일 때 선택된 버튼 */
.country-btn.blocked {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

.country-btn.blocked:hover {
    background: #c82333;
}

/* ===== 로그 UI 개선 ===== */
.log-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.log-date-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.log-date-filter label {
    font-size: 13px;
    color: #666;
}

.log-date-filter input[type="date"] {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
}

.log-actions {
    display: flex;
    gap: 8px;
}

.log-table-container {
    max-height: 280px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: white;
    -webkit-overflow-scrolling: touch;
}

.log-table-container table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 12px;
}

.log-table-container thead {
    position: sticky;
    top: 0;
    background: #f5f5f5;
    z-index: 1;
}

.log-table-container th,
.log-table-container td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.log-table-container th {
    font-weight: 600;
    border-bottom: 2px solid var(--border);
}

.log-table-container tr:hover {
    background: #f9f9f9;
}

.log-table-container .log-checkbox {
    width: 30px;
    text-align: center;
}

.log-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.log-pagination button {
    padding: 5px 10px;
    border: 1px solid var(--border);
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    min-width: 32px;
}

.log-pagination button:hover:not(:disabled) {
    background: #f0f0f0;
}

.log-pagination button.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.log-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.log-pagination .page-info {
    font-size: 12px;
    color: #666;
    padding: 0 10px;
}

.log-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
    flex-wrap: wrap;
}

.select-all-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    cursor: pointer;
}

/* 모바일 대응 */
@media (max-width: 1024px) {
    .country-codes-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .country-select-mode {
        width: 100%;
    }
    
    .log-filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .log-date-filter {
        width: 100%;
    }
    
    .log-date-filter input[type="date"] {
        flex: 1;
        min-width: 0;
    }
    
    .log-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .log-footer .btn {
        flex: none;
    }
}

/* 폼 힌트 */
.form-hint {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

/* 체크박스 인라인 */
.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ========== 다크 테마 호환 공통 클래스 ========== */
.info-box-light {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
}

.info-box-success {
    background: #e8f5e9;
    border: 1px solid #4caf50;
    border-radius: 8px;
    padding: 15px;
}

.info-box-danger {
    background: #ffebee;
    border: 1px solid #e53935;
    border-radius: 8px;
    padding: 15px;
}

.info-box-warning {
    background: #fff3e0;
    border: 1px solid #ff9800;
    border-radius: 8px;
    padding: 15px;
}

.text-muted {
    color: #888;
}

.text-danger {
    color: #c00;
}

.code-block {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 12px;
}

/* ========== 파일 버전 모달 ========== */
.version-file-info {
    background: #f5f5f5;
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
}

.version-file-info strong {
    color: #666;
}

#version-list-table {
    width: 100%;
    margin-top: 10px;
}

#version-list-table th {
    background: #f8f9fa;
    padding: 10px;
    font-weight: 500;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
}

#version-list-table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

#version-list-table tr:hover {
    background: #f8f9fa;
}

#version-list-table .btn-sm {
    padding: 4px 8px;
    font-size: 12px;
    margin-right: 4px;
}

#version-empty small {
    display: block;
    margin-top: 10px;
    color: #999;
}
@keyframes indeterminate { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }

/* ===== 내부 공유 카드 ===== */
.ishare-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fff;
    transition: box-shadow 0.15s;
}
.ishare-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.ishare-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.ishare-icon {
    font-size: 28px;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ishare-icon img.fs-file-icon-img {
    width: 32px;
    height: 32px;
}
.ishare-icon .fs-archive-icon,
.ishare-icon .fs-subtitle-icon {
    width: 32px;
    height: 32px;
    display: inline-block;
    position: relative;
}
.ishare-icon .fs-archive-icon > img,
.ishare-icon .fs-subtitle-icon > img {
    width: 32px;
    height: 32px;
}

/* 공유 폴더 브라우징용 아이콘 - 인라인 표시 */
.ishare-browse-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.ishare-browse-icon img.fs-file-icon-img {
    width: 20px;
    height: 20px;
    display: inline-block;
}
.ishare-browse-icon .fs-archive-icon,
.ishare-browse-icon .fs-subtitle-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: relative;
}
.ishare-browse-icon .fs-archive-icon > img,
.ishare-browse-icon .fs-subtitle-icon > img {
    width: 20px;
    height: 20px;
}
.ishare-info { min-width: 0; flex: 1; }
.ishare-filename {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
    cursor: pointer;
    user-select: none;
}
.ishare-filename.scrollable-name {
    overflow-x: auto !important;
    overflow: auto !important;
    text-overflow: clip !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ishare-filename.scrollable-name::-webkit-scrollbar { display: none; }
.ishare-meta {
    font-size: 12px;
    color: #888;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
}
.ishare-meta.scrollable-name {
    overflow-x: auto !important;
    overflow: auto !important;
    text-overflow: clip !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ishare-meta.scrollable-name::-webkit-scrollbar { display: none; }
.ishare-card-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 12px;
}
.ishare-perm-select {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #f8f8f8;
    cursor: pointer;
    min-width: 90px;
}
.ishare-perm-select:focus { border-color: #667eea; outline: none; }

/* 모바일 */
@media (max-width: 1024px) {
    .ishare-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .ishare-card-right {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
    .ishare-filename { max-width: 200px; }
}

/* 공유 폴더 탐색 아이템 */
.ishare-browse-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.1s;
}
.ishare-browse-item:hover { background: #f8f9ff; }
.ishare-browse-name {
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}
.ishare-browse-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 10px;
}
.ishare-browse-actions .btn-sm {
    font-size: 12px;
    padding: 3px 8px;
}

/* ── Viewer.js 인라인 모드 커스텀 ── */
.preview-image-wrap .viewer-container {
    background: transparent !important;
}
.preview-image-wrap .viewer-canvas {
    background: transparent !important;
}
/* 원본 img 숨김 (Viewer.js canvas 복사본만 표시) — tall 모드 아닐 때만 */
.preview-image-wrap:not(.tall-mode) > .preview-image {
    display: none !important;
}
/* Viewer.js 기본 버튼 전체 숨김 (커스텀 컨트롤바 사용) */
.preview-image-wrap .viewer-toolbar,
.preview-image-wrap .viewer-navbar,
.preview-image-wrap .viewer-title,
.preview-image-wrap .viewer-button {
    display: none !important;
}

/* Viewer.js 트랜지션 완전 제거 */
.preview-image-wrap .viewer-canvas img,
.preview-image-wrap .viewer-move,
.preview-image-wrap .viewer-container {
    transition: none !important;
    animation: none !important;
}

/* 컨트롤바 클릭 보장 */
.preview-image-zoom-bar {
    pointer-events: all !important;
    z-index: 9999 !important;
    touch-action: auto !important;
    -ms-touch-action: auto !important;
}
.preview-image-zoom-bar button {
    pointer-events: all !important;
    touch-action: auto !important;
}

/* ===== 맨 위로 버튼 ===== */
#btn-scroll-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--primary, #3b82f6);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    z-index: 3000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s, visibility .2s, transform .2s, background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#btn-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#btn-scroll-top:hover {
    background: var(--primary-dark, #2563eb);
}
body.is-mobile #btn-scroll-top {
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 14px;
}

/* PDF 페이지 입력 스피너 제거 */
#pdf-page-input::-webkit-outer-spin-button,
#pdf-page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 이미지 미리보기 전체화면 */
.modal-preview .modal-body:fullscreen,
.modal-preview .modal-body:-webkit-full-screen {
    background: #000;
    position: relative;
}

.modal-preview .modal-body:fullscreen #preview-content,
.modal-preview .modal-body:-webkit-full-screen #preview-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-preview .modal-body:fullscreen .preview-image-wrap:not(.tall-mode),
.modal-preview .modal-body:-webkit-full-screen .preview-image-wrap:not(.tall-mode) {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* tall 모드 전체화면: 스크롤 가능 */
.modal-preview .modal-body:fullscreen .preview-image-wrap.tall-mode,
.modal-preview .modal-body:-webkit-full-screen .preview-image-wrap.tall-mode {
    width: 100%;
    height: auto;
}

.modal-preview .modal-body:fullscreen .preview-nav-btn,
.modal-preview .modal-body:-webkit-full-screen .preview-nav-btn {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 80px !important;
    z-index: 10000 !important;
}

.modal-preview .modal-body:fullscreen .preview-prev,
.modal-preview .modal-body:-webkit-full-screen .preview-prev {
    left: 0 !important;
}

.modal-preview .modal-body:fullscreen .preview-next,
.modal-preview .modal-body:-webkit-full-screen .preview-next {
    right: 0 !important;
}

.modal-preview .modal-body:fullscreen #preview-image-zoom-bar,
.modal-preview .modal-body:-webkit-full-screen #preview-image-zoom-bar {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10001 !important;
}

/* 탐색 버튼 (←→↑) */
.nav-buttons .nav-btn {
    background: none;
    border: 1px solid transparent;
    color: #555;
    padding: 5px 6px;
    cursor: pointer;
    border-radius: 5px;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-buttons .nav-btn svg {
    display: block;
}
.nav-buttons .nav-btn:hover:not(:disabled) {
    background: rgba(0,0,0,0.07);
    color: #222;
}
.nav-buttons .nav-btn:active:not(:disabled) {
    background: rgba(0,0,0,0.13);
}
.nav-buttons .nav-btn:disabled {
    opacity: 0.25;
    cursor: default;
}

@media (max-width: 1024px) {
    .nav-buttons .nav-btn {
        padding: 4px 5px;
    }
    .nav-buttons .nav-btn svg {
        width: 14px;
        height: 14px;
    }
}


/* 줌바/좌우 버튼 - 모달 기준 고정 (PC/모바일 공통) */
.modal-preview .preview-nav-btn {
    position: absolute;
    z-index: 9998;
}

/* 모바일: PC와 동일한 세로 영역 */
@media (max-width: 1024px) {
    .modal-preview .preview-nav-btn {
        position: absolute !important;
        top: 70px !important;
        bottom: 70px !important;
        height: auto !important;
        transform: none !important;
        width: 15% !important;
    }
    .modal-preview .preview-prev { left: 0 !important; }
    .modal-preview .preview-next { right: 0 !important; }
    
    .modal-preview #preview-image-zoom-bar {
        position: fixed !important;
        bottom: 60px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* 모바일 tall 모드 - 가로 바운스 방지 */
@media (max-width: 1024px) {
    .modal-preview .modal-body {
        overscroll-behavior-x: none;
        -webkit-overflow-scrolling: touch;
    }
}

/* iOS 의사 전체화면 (Fullscreen API 미지원 시) */
.modal-preview.pseudo-fullscreen .modal-body {
    max-height: 100vh !important;
    height: 100vh !important;
}

/* 비디오 pseudo-fullscreen (iOS Fullscreen API 미지원 대응) */
.video-player-wrap.pseudo-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 999999 !important;
    background: #000 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}
.video-player-wrap.pseudo-fullscreen .preview-video {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}
body.video-pseudo-fs {
    overflow: hidden !important;
}
/* pseudo-fullscreen에서 전체화면 버튼 항상 보이기 */
.video-player-wrap.pseudo-fullscreen .video-fullscreen-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 9999999 !important;
}

/* tall 모드 이미지 드래그 방지 */
.preview-image-wrap.tall-mode .preview-image {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto;
}

/* 모바일: 잘린 파일명 터치 시 가로 스크롤 */
@media (max-width: 1024px) {
    .file-list.list-view .file-name.scrollable-name,
    .file-list.list-view .file-name-wrap .file-name.scrollable-name {
        overflow-x: auto !important;
        overflow: auto !important;
        text-overflow: clip !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .file-list.list-view .file-name.scrollable-name::-webkit-scrollbar,
    .file-list.list-view .file-name-wrap .file-name.scrollable-name::-webkit-scrollbar {
        display: none;
    }
    /* 미리보기 모달 제목 스크롤 */
    #preview-title.scrollable-name {
        overflow-x: auto !important;
        overflow: auto !important;
        text-overflow: clip !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #preview-title.scrollable-name::-webkit-scrollbar {
        display: none;
    }
    /* 모바일/태블릿: 리사이즈 핸들 터치 영역 확대 */
    .resize-handle-se {
        width: 30px;
        height: 30px;
    }
    .resize-handle-se::after {
        right: 5px;
        bottom: 5px;
        width: 14px;
        height: 14px;
        border-right: 3px solid rgba(150, 150, 150, 0.8);
        border-bottom: 3px solid rgba(150, 150, 150, 0.8);
    }
    .resize-handle-e {
        width: 16px;
    }
    .resize-handle-s {
        height: 16px;
    }
}


/* ===== E2E Vault (암호화 폴더) ===== */
.file-item.is-vault .file-icon {
    position: relative;
}
.file-item.is-vault .file-icon::after {
    content: '🔒';
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 0.6em;
}
.vault-badge {
    font-size: 0.75em;
    line-height: 1;
    opacity: 0.9;
}
.grid-badges .vault-badge {
    position: static !important;
    top: auto !important;
    right: auto !important;
}
#vault-toolbar {
    animation: vaultSlideIn 0.3s ease;
}
@keyframes vaultSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.vault-file {
    cursor: pointer;
}
.vault-file:hover {
    background: var(--bg-hover, #f0f0f0);
}
.vault-preview-overlay {
    animation: vaultFadeIn 0.2s ease;
}
@keyframes vaultFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color, #ddd);
    border-top-color: var(--color-primary, #4a90d9);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 폴더 권한 테이블 반응형 */
.fperm-table-wrap { max-height: 200px; overflow-y: auto; border: 1px solid #eee; border-radius: 4px; }
.fperm-table th, .fperm-table td { font-size: 12px; }
@media (max-width: 768px) {
    .fperm-table { min-width: unset !important; font-size: 11px !important; }
    .fperm-table th, .fperm-table td { padding: 3px 2px !important; }
    #fperm-browse-popup { min-width: 90vw !important; max-width: 95vw !important; }
}

/* 폴더 권한 모달 - 스토리지 수정 모달 위에 오버레이 */
#modal-fperm-browse, #modal-fperm-bulk-edit, #modal-fperm-add-user {
    z-index: 100003 !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* 아이콘 관리 서브모달 - 아이콘 관리 모달 위에 오버레이 */
#modal-icon-change, #modal-icon-add-ext {
    z-index: 100003 !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
#modal-icon-change {
    max-width: 520px !important;
    width: 90vw !important;
}
#modal-icon-add-ext {
    max-width: 400px !important;
    width: 90vw !important;
}
#modal-fperm-browse {
    max-width: 600px !important;
    width: 90vw !important;
}
#modal-fperm-browse .modal-body {
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
#fperm-browse-content {
    max-height: 300px;
    flex: 1;
}
@media (max-width: 768px) {
    #modal-fperm-browse {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: 100% !important;
        border-radius: 0 !important;
        transform: none !important;
        z-index: 100003 !important;
        display: flex;
        flex-direction: column;
    }
    #modal-fperm-browse .modal-body {
        flex: 1;
        max-height: none;
        overflow-y: auto;
    }
    #modal-fperm-browse #fperm-browse-content {
        max-height: none;
        flex: 1;
    }
    #modal-fperm-bulk-edit, #modal-fperm-add-user {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: 100% !important;
        border-radius: 0 !important;
        transform: none !important;
        z-index: 100003 !important;
        display: flex;
        flex-direction: column;
    }
    /* 아이콘 관리 서브모달 - 모바일 전체화면 (PC에선 center, 모바일은 fullscreen) */
    #modal-icon-change, #modal-icon-add-ext {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: 100% !important;
        border-radius: 0 !important;
        transform: none !important;
        z-index: 100003 !important;
        display: flex;
        flex-direction: column;
    }
    #modal-icon-change .modal-body, #modal-icon-add-ext .modal-body {
        flex: 1;
        max-height: none;
        overflow-y: auto;
    }
    /* 아이콘 관리 툴바: 모바일에서 줄바꿈 시 추가 버튼 우측 정렬 */
    .icon-mgr-toolbar .icon-mgr-add-btn {
        margin-left: auto;
    }
}

/* ========== 모바일: 모달 내부 고정높이 컨테이너 → flex 채움 ========== */
@media (max-width: 1024px) {
    .qos-list,
    .trash-list,
    .activity-table-wrap,
    .login-logs-list,
    .roles-list,
    .perm-list,
    .permission-list,
    .duplicate-list,
    .bulk-delete-list,
    .terms-container,
    .notice-popup-body {
        max-height: none !important;
        flex: 1 1 auto;
    }
}

/* ========== 모바일: modal-body 안 스크롤 영역이 남은 공간 채우기 ========== */
@media (max-width: 1024px) {
    /* 이용약관: textarea가 남은 공간 채우기 */
    .terms-editor-group {
        flex: 1 1 0px !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }
    #terms-content {
        flex: 1 1 0px !important;
        min-height: 150px;
        resize: none;
    }
    
}

/* ========== 모바일: 각 모달의 주요 리스트/스크롤 영역이 남은 공간 채우기 ========== */
@media (max-width: 1024px) {
    /* 스토리지 관리 / 사용자 관리 / 전체 로그인 기록 / 삭제된 사용자 / 버전 관리 */
    #modal-storages .modal-body,
    #modal-users .modal-body,
    #modal-all-logins .modal-body,
    #modal-deleted-users .modal-body,
    #modal-versions .modal-body {
        display: flex;
        flex-direction: column;
    }
    #modal-storages .data-table,
    #modal-users .data-table,
    #modal-all-logins .login-logs-wrapper,
    #modal-deleted-users .deleted-users-wrapper,
    #modal-versions .data-table {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
    }
    /* 탈퇴/삭제된 사용자가 없을 때: 빈 메시지를 상단 근처에 표시 */
    #modal-deleted-users #deleted-users-empty {
        padding: 20px !important;
        margin-top: 10px;
    }
    
    /* 역할 관리 */
    #modal-roles .roles-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    
    /* 휴지통 */
    #modal-trash .trash-list,
    #modal-my-trash .trash-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    
    /* 접속 통계: 탭 콘텐츠 */
    #modal-access-stats .stats-content {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
    }
    
    /* 검색 인덱스 */
    #modal-search-index .modal-body {
        display: flex;
        flex-direction: column;
    }
    #modal-search-index .stats-table {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
    }
    
    /* 권한 설정 */
    #modal-permissions .perm-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    
    /* 일괄 삭제 */
    #modal-bulk-delete .bulk-delete-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    
    /* 공지사항 관리 */
    #modal-notice .modal-body {
        display: flex;
        flex-direction: column;
    }
    #modal-notice .popup-list-table,
    #modal-notice .notice-form-table {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
    }
    
    /* 활동 로그 */
    #modal-activity-logs .activity-table-wrap {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    
    /* 스토리지 추가/편집 - 권한 목록 */
    #modal-add-storage .permission-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    
    /* QoS 속도 제한 */
    #modal-qos .qos-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    
    /* 보안 설정 */
    #modal-security .country-codes-container,
    #modal-security .log-table-container {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    
    /* 중복 파일 */
    #modal-duplicate .duplicate-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* ============================================================================
 * 🏠 [메인 MP3 플레이어 CSS] 가사 영역 (LRC + USLT + TXT) — 한 줄 가사
 * ============================================================================
 * 
 * ⚠️ 주의: 이 CSS는 *메인 페이지(index.php) 전용*입니다.
 * 
 * - 사용처: 메인 페이지 미리보기 모달 (assets/js/app.js의 FSAudioPlayer)
 * - 짝 파일: assets/css/fs-audio-player.css (공유 페이지 share.php 전용)
 * - 두 곳 모두 같은 클래스명(.fap-lyrics-*)이지만 ★독립★ 입니다.
 *   하나 수정하면 다른 쪽도 수정해야 일관성 유지됩니다.
 * 
 * ⚠️ 이 부분을 수정하면 *메인 미리보기*만 영향받습니다.
 *    공유 스트리밍 가사 CSS는 → assets/css/fs-audio-player.css
 * ============================================================================
 * 한 줄 가사 디자인:
 *  - 활성 라인 1줄만 표시 (공간 차지 최소)
 *  - 비활성 라인은 모두 숨김 (.fap-lyrics-line:not(.fap-lyrics-active) { display:none })
 *  - 페이드 트랜지션 (활성 라인 변경 시 부드럽게)
 *  - 스킨별 색상 자동 적응
 * ============================================================================
 */
.fap-lyrics-wrap {
    width: 100%;
    max-width: 600px;
    margin: 8px auto 4px;
    box-sizing: border-box;
    padding: 0 12px;
}
.fap-lyrics-scroll {
    /* 가사 박스 (synced/static 동일 높이) */
    height: 84px;
    overflow: hidden;  /* synced=true는 스크롤 없음 */
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}
/* synced=false (USLT/TXT plain)에서는 스크롤 가능 */
.fap-lyrics-content[data-synced="false"] {
    /* 부모(lyrics-scroll)의 overflow 변경: 자식 selector로 부모 영향 (CSS만) — 
       대신 wrap에 fap-lyrics-static 클래스가 붙으니 그것 사용 */
}
.fap-lyrics-wrap.fap-lyrics-static .fap-lyrics-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.fap-lyrics-wrap.fap-lyrics-static .fap-lyrics-scroll::-webkit-scrollbar {
    width: 4px;
}
.fap-lyrics-wrap.fap-lyrics-static .fap-lyrics-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}
.fap-lyrics-content {
    width: 100%;
    text-align: center;
    user-select: text;
}

/* ── synced=true (LRC/SYLT/TXT synced): 3줄 고정 (이전/현재/다음) ── */
/* 기본: 모든 라인 숨김 */
.fap-lyrics-content[data-synced="true"] .fap-lyrics-line {
    display: none;
    transition: opacity 0.4s ease, color 0.3s ease;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.5;
}
/* 이전/현재/다음 라인만 표시 */
.fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-prev,
.fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-active,
.fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-next {
    display: block;
}
/* 이전/다음 라인: 작게 + 흐릿 */
.fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-prev,
.fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-next {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    padding: 1px 0;
}
/* 현재 라인: 살짝 크게 + 진하게 (잘 보이게) */
.fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-active {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    padding: 3px 0;
    animation: fapLyricsAppear 0.4s ease;
}
@keyframes fapLyricsAppear {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── synced=false (USLT/TXT plain): 모든 라인 표시 + 스크롤 ── */
.fap-lyrics-content[data-synced="false"] .fap-lyrics-line {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    padding: 1px 0;
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.fap-lyrics-content[data-synced="false"] .fap-lyrics-line.fap-lyrics-empty {
    min-height: 6px;
    line-height: 1;
}

/* 모바일 */
@media (max-width: 768px) {
    .fap-lyrics-wrap { padding: 0 8px; margin: 6px auto 2px; }
    .fap-lyrics-scroll { height: 72px; }  /* 모바일은 약간 작게 */
    .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-prev,
    .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-next {
        font-size: 11px;
    }
    .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-active {
        font-size: 14px;
    }
    .fap-lyrics-content[data-synced="false"] .fap-lyrics-line {
        font-size: 12px;
        line-height: 1.5;
    }
}

/* ====== 스킨별 가사 색상 ====== */
/* SoundCloud (흰 배경, 검정 텍스트) */
.fap-skin-soundcloud .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-prev,
.fap-skin-soundcloud .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-next {
    color: rgba(51, 51, 51, 0.4);  /* 흐릿 회색 */
}
.fap-skin-soundcloud .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-active {
    color: #ff5500;
    font-weight: 700;
}
.fap-skin-soundcloud .fap-lyrics-content[data-synced="false"] .fap-lyrics-line {
    color: #333;
}

/* Cassette (빨강 배경, 금색 텍스트) */
.fap-skin-cassette .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-prev,
.fap-skin-cassette .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-next {
    color: rgba(255, 215, 0, 0.4);  /* 흐릿 금색 */
}
.fap-skin-cassette .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-active {
    color: #f4d03f;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(244, 208, 63, 0.5);
}
.fap-skin-cassette .fap-lyrics-content[data-synced="false"] .fap-lyrics-line {
    color: #ffd700;
}

/* Pixel (게임보이 연두 배경) */
.fap-skin-pixel .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-prev,
.fap-skin-pixel .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-next {
    color: rgba(15, 56, 15, 0.4);
    font-family: 'Courier New', monospace;
}
.fap-skin-pixel .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-active {
    color: #0f380f;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}
.fap-skin-pixel .fap-lyrics-content[data-synced="false"] .fap-lyrics-line {
    color: #0f380f;
    font-family: 'Courier New', monospace;
}

/* Terminal (검정 + 녹색) */
.fap-skin-terminal .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-prev,
.fap-skin-terminal .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-next {
    color: rgba(0, 255, 0, 0.35);
    font-family: 'Courier New', monospace;
}
.fap-skin-terminal .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-active {
    color: #0f0;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
}
.fap-skin-terminal .fap-lyrics-content[data-synced="false"] .fap-lyrics-line {
    color: #0f0;
    font-family: 'Courier New', monospace;
}

/* APlayer Fixed (흰 배경) — 가사 위치: 시킹바 위 (Row 2), 굵은 회색 */
.fap-skin-ap-fixed .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-prev,
.fap-skin-ap-fixed .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-next {
    color: rgba(85, 85, 85, 0.4);
    font-weight: 500;
}
.fap-skin-ap-fixed .fap-lyrics-content[data-synced="true"] .fap-lyrics-line.fap-lyrics-active {
    color: #555;
    font-weight: 700;
}
.fap-skin-ap-fixed .fap-lyrics-content[data-synced="false"] .fap-lyrics-line {
    color: #555;
    font-weight: 700;
}
/* AP-fixed에서 가사 영역 위치: 시킹바 위 (Row 2) */
.fap-skin-ap-fixed .fap-lyrics-wrap {
    grid-column: 1;
    grid-row: 2;
    margin: 0 !important;
    padding: 2px 16px 2px !important;
    background: #fff;
}

/* ★ 가사 인라인 표시 안 될 때(LRC 없음 또는 정적 가사) grid row 2 압축 (v5.8.1c — 펜닐님 요청) */
/*    JS: _renderLyrics에서 _lyricsSynced=false 또는 가사 없을 때 root에 .fap-no-inline-lyrics 추가 */
/*    APlayer Fixed 스킨은 grid 5행이라 row 2가 빈 채로 자리 차지 → 썸네일과 시킹바 사이 떨어짐 */
/*    또한 마지막 행 1fr로 모달 크기 변화 시 남는 공간을 마지막 행이 흡수 (펜닐님 요청 v5.8.1c) */
.fap.fap-skin-ap-fixed.fap-no-inline-lyrics {
    /* PC: row 1=커버(340px) / row 2=가사(0) / row 3=시킹바 / row 4=컨트롤 / row 5=볼륨(1fr) */
    grid-template-rows: 340px 0 auto auto 1fr !important;
}
.fap.fap-skin-ap-fixed.fap-no-inline-lyrics.fap-ios {
    /* iOS: 볼륨 영역 숨김 — row 1=커버 / row 2=0 / row 3=시킹바 / row 4=컨트롤(1fr) */
    grid-template-rows: 340px 0 auto 1fr !important;
}
@media (max-width: 768px) {
    /* 모바일: row 1=커버(240px) / row 2=가사(0) / row 3=시킹바 / row 4=컨트롤 / row 5=볼륨 / row 6=플레이리스트(1fr) */
    .fap.fap-skin-ap-fixed.fap-no-inline-lyrics {
        grid-template-rows: 240px 0 auto auto auto 1fr !important;
    }
    .fap.fap-skin-ap-fixed.fap-no-inline-lyrics.fap-ios {
        grid-template-rows: 240px 0 auto auto 1fr !important;
    }
}

/* ============================================================
   메인 인덱스 동영상 미리보기 사이드 플레이리스트 패널
   (share.php의 .share-playlist-panel 패턴을 메인용으로 포팅)
   prefix: fs-vp- (FileStation Video Playlist)
   펜닐님 결정 옵션 A: flex 방식 (영상 폭 자동 조정, 조금 흔들림 허용)
   ============================================================ */

/* flex wrapper — 영상 + 패널을 가로로 배치
   ★ align-items: center로 변경 — wrap이 영상 비율에 맞춰 작아질 때 세로 가운데 정렬
   ★ justify-content: center 추가 — wrap이 modal-body보다 좁을 때 가로 가운데 정렬
   (패널은 stretch가 필요한데 .fs-vp-panel에 align-self: stretch가 이미 설정되어 있음 — 그대로 유지됨) */
.fs-vp-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
}
.fs-vp-flex .video-player-wrap {
    flex: 0 1 auto;
    min-width: 0;
    position: relative;
}

.fs-vp-panel {
    flex: 0 0 320px;
    width: 320px;
    background: #1e1e2e;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    display: none;
    flex-direction: column;
    overflow: hidden;
    color: #ddd;
    text-align: left;
    opacity: 0;
    transition: opacity 0.2s ease, flex-basis 0.25s ease, width 0.25s ease, margin 0.25s ease;
    align-self: stretch;
    max-height: 100%;
}
.fs-vp-panel.open {
    display: flex;
    opacity: 1;
}
.fs-vp-header {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.fs-vp-header .fs-vp-icon { font-size: 20px; }
.fs-vp-header .fs-vp-title { color: #fff; font-size: 14px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-vp-header .fs-vp-count { color: #888; font-size: 12px; flex-shrink: 0; }
.fs-vp-header .fs-vp-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
.fs-vp-header .fs-vp-close:hover { color: #fff; }
/* ★ 자동 다음 재생 토글 스위치 (v5.8.1g) — 사이드 패널 헤더에 표시
   유튜브 스타일 토글: 가로 막대 + 동그라미 슬라이더 + ON/OFF 텍스트
   ON 상태: 노란색 트랙 + 우측 동그라미 + 좌측 "ON" 텍스트
   OFF 상태: 회색 트랙 + 좌측 동그라미 + 우측 "OFF" 텍스트 */
.fs-vp-header .fs-vp-autonext {
    position: relative;
    width: 44px;
    height: 18px;
    background: #555;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 4px;
    padding: 0;
    transition: background 0.2s ease;
    overflow: hidden;
}
/* 동그라미 슬라이더 */
.fs-vp-header .fs-vp-autonext::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #ddd;
    border-radius: 50%;
    transition: left 0.2s ease, background 0.2s ease;
    z-index: 2;
}
/* ON/OFF 텍스트 — OFF 상태 (기본) */
.fs-vp-header .fs-vp-autonext::after {
    content: 'OFF';
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    font-size: 8px;
    font-weight: 700;
    color: #ddd;
    letter-spacing: 0.3px;
    line-height: 1;
    transition: opacity 0.2s ease;
    z-index: 1;
}
/* ON 상태 */
.fs-vp-header .fs-vp-autonext.on {
    background: #ffc107;
}
.fs-vp-header .fs-vp-autonext.on::before {
    left: 28px;
    background: #fff;
}
.fs-vp-header .fs-vp-autonext.on::after {
    content: 'ON';
    right: auto;
    left: 5px;
    color: #1a1a1a;
}
/* hover */
.fs-vp-header .fs-vp-autonext:hover {
    background: #666;
}
.fs-vp-header .fs-vp-autonext.on:hover {
    background: #ffca2c;
}
.fs-vp-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 0;
}
.fs-vp-body::-webkit-scrollbar { width: 8px; }
.fs-vp-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.fs-vp-body::-webkit-scrollbar-track { background: transparent; }
.fs-vp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    color: #ccc;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s;
    border-left: 3px solid transparent;
    user-select: none;
}
.fs-vp-item:hover { background: rgba(255,255,255,0.06); }
.fs-vp-item.current {
    background: rgba(102,126,234,0.15);
    border-left-color: #667eea;
    color: #fff;
}
.fs-vp-item .fs-vp-num { color: #888; font-size: 11px; font-family: monospace; min-width: 26px; text-align: right; flex-shrink: 0; }
.fs-vp-item.current .fs-vp-num { color: #667eea; font-weight: 600; }
.fs-vp-item .fs-vp-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; position: relative; }
.fs-vp-item .fs-vp-name-inner {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
/* ★ 마퀴: current 트랙 + is-overflow 시 작동 (이전 정상 패턴 복원)
   - 평소: ellipsis 정상 작동
   - is-overflow 추가 시: padding-left:100%로 오른쪽에서 시작 → 왼쪽으로 흐름 */
.fs-vp-item.current .fs-vp-name-inner.is-overflow {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    padding-left: 100%;
    animation: fs-vp-marquee 12s linear infinite;
}
.fs-vp-item.current:hover .fs-vp-name-inner.is-overflow {
    animation-play-state: paused;
}
@keyframes fs-vp-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.fs-vp-item .fs-vp-meta { color: #666; font-size: 10px; flex-shrink: 0; }
.fs-vp-item .fs-vp-play-icon { color: #888; font-size: 12px; flex-shrink: 0; }
.fs-vp-item.current .fs-vp-play-icon { color: #667eea; }

/* 목록 토글 버튼 (video-player-wrap 우상단 오버레이) */
.fs-vp-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 5px 11px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    backdrop-filter: blur(4px);
}
.fs-vp-toggle:hover { background: rgba(102,126,234,0.7); border-color: rgba(102,126,234,0.9); }
.fs-vp-toggle.active { background: #667eea; border-color: #667eea; }

/* ★ 재생 중: 토글 버튼 + 패널 둘 다 숨김 / hover 시 다시 표시
   (배지 패턴과 동일 — .video-player-wrap.playing 클래스 기준)
   토글 버튼은 wrap 자식, 패널은 wrap 형제(fs-vp-flex 자식)이므로 셀렉터 분리 */
.video-player-wrap.playing .fs-vp-toggle {
    opacity: 0;
    transition: opacity 0.3s;
}
.video-player-wrap.playing:hover .fs-vp-toggle {
    opacity: 1;
}
/* 패널: fs-vp-flex 안 video-player-wrap이 재생 중일 때 숨김 + 폭 0 (영상 폭 100% 사용)
   펜닐님 결정: opacity만으로는 패널 공간 차지 → 영상이 안 커짐
   → flex-basis/width를 0으로 만들어 영상이 늘어나도록 */
.fs-vp-flex:has(.video-player-wrap.playing) .fs-vp-panel.open {
    opacity: 0;
    pointer-events: none;
    flex-basis: 0;
    width: 0;
    margin-left: 0;
    overflow: hidden;
}
/* hover 시 패널 다시 폭 320px + opacity 1 (영상이 줄어듦) */
.fs-vp-flex:has(.video-player-wrap.playing):hover .fs-vp-panel.open {
    opacity: 1;
    pointer-events: auto;
    flex-basis: 320px;
    width: 320px;
    margin-left: 0;
}
/* video-player-wrap: 재생 중 폭 변경 시 부드러운 transition */
.fs-vp-flex .video-player-wrap {
    transition: flex-basis 0.25s ease;
}
/* 전체화면 idle 시: 토글 버튼도 같이 숨김 (배지와 동일 패턴) */
:fullscreen .video-player-wrap.fs-idle .fs-vp-toggle,
.video-player-wrap.fs-idle:fullscreen .fs-vp-toggle {
    opacity: 0;
    pointer-events: none;
}

/* 모바일: 1024px 이하 — flex column으로 전환 (영상 위, 패널 아래) */
@media (max-width: 1024px) {
    .fs-vp-flex {
        flex-direction: column;
        align-items: stretch;
    }
    .fs-vp-panel {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        max-height: 35vh;
    }
    .fs-vp-flex .video-player-wrap {
        flex: 1 1 auto;
    }
    /* ★ 모바일: 사이드 패널 토글 버튼 + 패널 자체 완전 숨김 (펜닐님 요청 — 모바일 UX 단순화) */
    .fs-vp-toggle {
        display: none !important;
    }
    .fs-vp-panel {
        display: none !important;
    }
}