/* ============ 커스텀 스크롤바 (얇은 막대, 화살표 없음) ============ */
.--scroll-bar::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}
.--scroll-bar::-webkit-scrollbar-track {
    background: transparent;
}
.--scroll-bar::-webkit-scrollbar-thumb {
    border: 0.125rem solid transparent;
    border-radius: 0.25rem;
    background-color: #aaa;
    background-clip: padding-box;
}
.--scroll-bar::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    cursor: pointer;
}

/* ============ 문서 아카이브 화면 (이 화면 전용) ============ */
.document-section__ {
    background: #fff;
    position: fixed;
    top: calc(3.625rem + 0.0625rem);   /* 위에 헤더(3.625rem) 있다고 가정한 오프셋 */
    bottom: 0;
    width: 100vw;
    display: flex;

    /* ---- ① 초기 안내화면(notice) ---- */
    >.article__ {
        display: flex;
        position: fixed;
        top: calc(3.625rem + 0.0625rem);
        bottom: 0;
        left: 16rem;
        right: 0;
        background: #fff;
        z-index: 2;                 /* 파일/미리보기 위를 덮어 notice 화면만 보이게 */
        /* top 오프셋은 아래 통일 (헤더 높이) */
        flex-direction: column;
        align-items: center;
        justify-content: center;

        >.edit {
            background: #fff;
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            border-radius: 0.75rem;
            border: 0.0625rem solid var(--primary-lv-5);
            cursor: pointer;
            padding: 0.5rem;
            display: flex;
        }
        >.edit:hover { background: var(--primary-lv-0); }
        >.edit:active { background: var(--primary-lv-1); }
        >.edit>.icon {
            background: url('../img/edit.svg') no-repeat center / contain;
            min-height: 1.25rem;
            min-width: 1.25rem;
        }

        >.notice {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }
        >.notice>.example { display: flex; position: relative; }
        >.notice>.example>.label {
            background: #fff;
            color: #555;
            padding: 0.25rem 0.75rem;
            border-radius: 0.75rem;
            border: 0.0625rem solid #aaa;
            position: absolute;
            top: 0.75rem;
            left: 0.75rem;
        }
        >.notice>.example>.image {
            max-width: 50rem;
            max-height: 30rem;
            border: 0.0625rem solid #aaa;
            border-radius: 1rem;
            background: #eee;
        }
        &.--notice-image > .notice { width: 100%; height: 100%; }
        /* object-fit: contain 은 남는 자리를 위아래로 나눠 붙여 상단에 흰 여백이 생긴다 →
           object-position 으로 위쪽에 붙여 여백을 아래로 몰아준다 */
        &.--notice-image > .notice > .image { width: 100%; height: 100%; object-fit: contain; object-position: top; }

        >.notice>.text { text-align: center; color: #555; }
        >.notice>.foot { display: flex; gap: 0.5rem; }
        >.notice>.foot>.download {
            width: 10rem;
            padding: 0.5rem 1rem;
            outline: 0.0625rem solid var(--primary-lv-5);
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.25rem;
            background: #fff;
            cursor: pointer;
        }
        >.notice>.foot>.download:disabled { opacity: 0.5; cursor: not-allowed; }
        >.notice>.foot>.download:disabled:hover { background: #fff; }
        >.notice>.foot>.download:hover { background: var(--primary-lv-0); }
        >.notice>.foot>.download:active { background: var(--primary-lv-1); }
        >.notice>.foot>.download>.icon {
            background: url('../img/download.svg') no-repeat center / contain;
            min-height: 1.25rem;
            min-width: 1.25rem;
        }
        >.notice>.foot>.download>.label { color: var(--primary-lv-5); }
        >.notice>.foot>.upload {
            width: 10rem;
            padding: 0.5rem 1rem;
            outline: 0.0625rem solid var(--primary-lv-5);
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.25rem;
            background: var(--primary-lv-5);
            cursor: pointer;
        }
        >.notice>.foot>.upload:hover { background: var(--primary-lv-6); }
        >.notice>.foot>.upload:active { background: var(--primary-lv-7); }
        >.notice>.foot>.upload>.label { color: #fff; }
    }

    /* 밴드 구분선을 aside 스크롤바 영역 위로 이어주는 선 —
       스크롤 컨테이너(aside) 안의 내용은 스크롤바 자리를 못 덮으므로(클리핑)
       바깥인 .document-section__ 의 가상요소로 그 구간까지 선을 그린다.
       트리에 그룹이 있을 때만 표시 */
    &:has(>.aside__ .group)::before {
        content: '';
        position: absolute;
        top: 2.75rem;                      /* 밴드 높이 = title 패딩(0.75×2) + 글줄(1.25) */
        left: 0;
        width: calc(16rem - 0.0625rem);    /* aside 오른쪽 세로 경계선 직전까지 */
        height: 0.0625rem;
        background: #ddd;
        pointer-events: none;
        z-index: -1;                       /* aside 뒤로 — 투명한 스크롤바 트랙으로 비치고, 썸이 위로 지나간다 */
    }

    /* ---- ② 좌측 폴더트리 ---- */
    >.aside__ {
        min-width: 16rem;
        max-width: 16rem;
        border-right: 0.0625rem solid #aaa;
        padding: 0 0.5rem 1rem 0.75rem;   /* top 0 — 첫 그룹 title이 옆 file__ head와 같은 밴드가 되도록 */
        display: flex;
        flex-direction: column;
        overflow-y: scroll;

        /* depth1 그룹 */
        >.group { display: flex; flex-direction: column; gap: 0.25rem; }
        >.group + .group { margin-top: 0.5rem; }
        /* depth1 제목은 헤더버튼처럼 눌러서 다시 조회하는 대상이라 커서를 바꾼다 */
        >.group>.title { color: var(--primary-lv-7); font-size: 1rem; font-weight: 600; line-height: 1.25rem; cursor: pointer; }

        /* 첫 그룹 title — file__ head와 동일한 세로 패딩(0.75rem)·구분선으로 높이/라인 맞춤.
           음수 마진으로 aside 패딩까지 확장해 구분선이 끝까지 이어지고,
           sticky라 트리를 스크롤해도 상단에 고정된다 (CSS만, DOM 변경 없음) */
        >.group:first-child>.title {
            position: sticky;
            top: 0;
            z-index: 1;
            background: #fff;
            margin: 0 -0.5rem 0.25rem -0.75rem;
            padding: 0.75rem 0.5rem 0.75rem 0.75rem;
            border-bottom: 0.0625rem solid #ddd;
        }

        /* depth2 묶음 — 제목만, 클릭 대상 아님 */
        >.group>.sub-group { display: flex; flex-direction: column; gap: 0.5rem; padding-left: 0.375rem; }
        >.group>.sub-group + .sub-group { margin-top: 0.25rem; padding-top: 0.5rem; border-top: 0.0625rem solid #ddd; }   /* sub-group 사이 구분선 + 간격 */
        /* depth1(1rem/600)과 depth3(h3 기본 0.875rem/500) 사이 크기 — 계층이 눈에 바로 들어오게 */
        >.group>.sub-group>.sub-title { color: var(--primary-lv-6); font-size: 0.9375rem; font-weight: 600; }

        /* depth3 폴더 — 파일이 들어가는 막내 단계 */
        >.group>.sub-group>.list { display: flex; flex-direction: column; gap: 0.25rem; padding-left: 0.375rem; }
        >.group>.sub-group>.list>.item {
            display: flex;
            align-items: center;
            padding: 0.25rem 0.5rem;
            border-radius: 0.75rem;
        }
        >.group>.sub-group>.list>.item:hover { background: var(--primary-lv-0); cursor: pointer; }
        >.group>.sub-group>.list>.item:active { background: var(--primary-lv-1); }
        >.group>.sub-group>.list>.item[checked] {
            background: var(--primary-lv-0);
            outline: 0.0625rem solid var(--primary-lv-5);
        }
        >.group>.sub-group>.list>.item>.label {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: max-content;
            flex-grow: 1;
        }
        >.group>.sub-group>.list>.item>.count { color: #555; }
        >.division-bar { margin: 0.5rem 0; width: 100%; min-height: 0.0625rem; background: #ddd; }
    }

    /* ---- ③ 중앙 파일목록 ---- */
    >.file__ {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        position: relative;

        >.head {
            display: flex;
            align-items: center;
            /* 행(.item)의 좌우 여백과 정확히 맞춘 값 — 어긋나면 헤더와 값이 세로로 안 맞는다.
               왼쪽  = .body 패딩 1rem + .item 보더 0.125 + .item 패딩 0.75  = 1.875rem
               오른쪽 = .body 패딩 0.5 + 스크롤바 0.5 + 보더 0.125 + 패딩 0.75
                       + ⋮버튼 1.25 + gap 0.25                              = 3.375rem */
            padding: 0.75rem 3.375rem 0.75rem 1.875rem;
            border-bottom: 0.0625rem solid #ddd;
            gap: 0.25rem;
        }
        /* 헤더 각 열은 클릭 정렬 대상 — 커서와 화살표로 표시. 드래그로 글자가 잡히지 않게 선택도 막는다 */
        >.head>div { cursor: pointer; user-select: none; }
        >.head>div.--sort-asc::after  { content: '▲'; color: var(--primary-lv-6); font-size: 0.625rem; }
        >.head>div.--sort-desc::after { content: '▼'; color: var(--primary-lv-6); font-size: 0.625rem; }

        >.head>.name { display: flex; align-items: center; gap: 0.125rem; flex-grow: 1; }
        >.head>.author   { min-width: 5rem; display: flex; align-items: center; gap: 0.125rem; }
        >.head>.uploader { min-width: 5rem; display: flex; align-items: center; gap: 0.125rem; }
        >.head>.date     { min-width: 7rem; display: flex; align-items: center; gap: 0.125rem; }
        >.head>.volume   { min-width: 5rem; display: flex; align-items: center; gap: 0.125rem; }
        >.head>.status   { min-width: 4rem; display: flex; align-items: center; gap: 0.125rem; justify-content: center; }   /* 행의 .status와 동일하게 가운데 */
        >.head .name>.label,
        >.head .author>.label,
        >.head .uploader>.label,
        >.head .date>.label,
        >.head .volume>.label,
        >.head .status>.label { color: #555; }

        >.body {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            overflow-y: scroll;
            padding: 0.5rem 0.5rem 0.5rem 1rem;
        }
        >.body>.item {
            display: flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border: 0.125rem solid transparent;
            border-radius: 0.75rem;
            gap: 0.25rem;
            cursor: pointer;
        }
        >.body>.item:hover { background: var(--primary-lv-0); }
        >.body>.item:active { background: var(--primary-lv-1); }
        >.body>.item[checked] { background: var(--primary-lv-0); }

        >.body>.item>.sub-sign { display: flex; align-items: center; gap: 0.5rem; }
        >.body>.item>.sub-sign>.line { color: #555; }
        >.body>.item>.sub-sign>.attach {
            color: var(--color-purple);
            padding: 0 0.25rem;
            border-radius: 0.375rem;
            background: var(--color-purple-light);
            border: 0.0625rem solid var(--color-purple);
        }
        >.body>.item>.sub-sign>.version {
            color: var(--color-blue);
            padding: 0 0.25rem;
            border-radius: 0.375rem;
            background: var(--color-blue-light);
            border: 0.0625rem solid var(--color-blue);
        }
        >.body>.item>.name { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        >.body>.item>.author   { min-width: 5rem; color: #555; }
        >.body>.item>.uploader { min-width: 5rem; color: #555; }
        >.body>.item>.date     { min-width: 7rem; color: #555; }
        >.body>.item>.volume   { min-width: 5rem; color: #555; }
        >.body>.item>.status {
            min-width: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        >.body>.item>.status>.convert {
            display: none;
            background: #fff;
            padding: 0.125rem 0.5rem;
            outline: 0.0625rem solid #aaa;
            border-radius: 0.5rem;
        }
        >.body>.item>.status>.convert:hover { background: var(--primary-lv-0); cursor: pointer; }
        >.body>.item>.status>.convert:active { background: var(--primary-lv-1); }
        >.body>.item:has(>.status>.convert:active) { background: var(--primary-lv-0); }
        >.body>.item>.status>.convert>.label { color: #555; }
        >.body>.item>.status>.supported   { display: none; font-size: 0.75rem; }
        >.body>.item>.status>.unsupported { display: none; font-size: 0.75rem; color: var(--color-dahong); }
        >.body>.item>.status>.converting  { display: none; font-size: 0.75rem; color: #888; }

        /* data-status 값에 따라 해당 표시만 노출 */
        >.body>.item>.status[data-status="convert"]>.convert       { display: flex; }
        >.body>.item>.status[data-status="converting"]>.converting { display: flex; }
        >.body>.item>.status[data-status="supported"]>.supported   { display: flex; }
        >.body>.item>.status[data-status="unsupported"]>.unsupported { display: flex; }

        >.body>.item>.more {
            background: url('../img/more.svg') no-repeat center / contain;
            min-height: 1.25rem;
            min-width: 1.25rem;
            cursor: pointer;
        }
    }

    /* ---- ④ 우측 미리보기 ---- */
    .preview__ {
        flex: 0 0 40rem;
        width: 40rem;
        min-width: 40rem;
        position: relative;   /* 미리보기 준비중 로더(.preview-pending)의 기준 */
        display: flex;
        flex-direction: column;
        height: 100%;
        background: #fff;
        border-left: 0.0625rem solid #aaa;
    }

    .preview__ > .preview-header {
        height: 2.8125rem;
        min-height: 2.8125rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding: 0 0.75rem;
        box-sizing: border-box;
        border-bottom: 0.0625rem solid #ddd;
        background: #fff;
    }
    .preview__ > .preview-header > .label { color: var(--primary-lv-5); font-weight: 500; margin-right: auto; flex: 1; }
    .preview__ > .preview-header > .pdf-full-view {
        padding: 0.25rem 0.75rem;
        font-size: 0.875rem;
        font-weight: 500;
        border: 0.0625rem solid #aaa;
        border-radius: 0.75rem;
        background: #fff;
        cursor: pointer;
        white-space: nowrap;
        margin-left: auto;
        color: #555;
    }
    .preview__ > .preview-header > .pdf-full-view:hover { background: var(--primary-lv-0); }
    .preview__ > .preview-header > .pdf-full-view:active { background: var(--primary-lv-1); }
    .preview__ > .pdf-viewer {
        flex: 1;
        width: 100%;
        height: calc(100% - 2.75rem) !important;
        border: 0;
        background: #fff;
    }
    .preview__.--active { background: #111; }
    .preview__.--active > .pdf-viewer { background: #111; }
    .preview__ > .preview-empty {
        flex: 1;
        min-height: 0;
        width: 100%;
        overflow: auto;
        text-align: center;
        padding: 1rem;
        box-sizing: border-box;
        background: #fff;
    }
    /* 이 컨테이너는 JS(showDefaultPreview)가 display:flex 로 켠다.
       flex 기본값(align-items: stretch)이 이미지를 패널 높이만큼 세로로 늘려
       비율이 깨지므로, align-self 로 stretch를 끊고 margin:auto 로 가운데 정렬.
       max-height 까지 걸어 가이드 전체가 스크롤 없이 비율 그대로 들어오게 한다 */
    .preview__ > .preview-empty > .image {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        align-self: center;
        margin: auto;
    }

    /* 이미지 파일 미리보기 (png/jpg 등) */
    .preview__ > .preview-image {
        flex: 1;
        min-height: 0;
        width: 100%;
        object-fit: contain;   /* 비율 유지하며 영역 안에 맞춤 */
        background: #111;
        display: none;         /* JS가 표시 */
    }

    /* 동영상 파일 미리보기 (mp4 등) */
    .preview__ > .preview-video {
        flex: 1;
        min-height: 0;
        width: 100%;
        object-fit: contain;
        background: #000;
        display: none;         /* JS가 표시 */
    }

    /* txt 미리보기 — 내용을 그대로 보여준다 */
    .preview__ > .preview-text {
        flex: 1;
        min-height: 0;
        width: 100%;
        display: none;         /* JS가 표시 */
        flex-direction: column;
        overflow: auto;
        background: #fff;
    }
    .preview__ > .preview-text > .preview-text__notice {
        display: none;         /* 내용이 잘렸을 때만 JS가 표시 */
        position: sticky;      /* 아래로 스크롤해도 안내가 계속 보이게 */
        top: 0;
        padding: 0.5rem 1rem;
        background: var(--primary-lv-0);
        border-bottom: 0.0625rem solid #ddd;
        color: #555;
        font-size: 0.8125rem;
    }
    .preview__ > .preview-text > .preview-text__body {
        margin: 0;
        padding: 1rem;
        /* 로그·표가 든 txt는 가로로 길어서, 안 감싸면 가로 스크롤만 계속 생긴다 */
        white-space: pre-wrap;
        word-break: break-all;
        font-family: Consolas, 'Courier New', monospace;
        font-size: 0.8125rem;
        line-height: 1.7;
        color: #222;
    }

    /* 모델 미리보기 — 3D·IFC 공용 뷰어(/modelViewer/model-view.html)를 iframe으로 띄운다 */
    .preview__ > .preview-model-frame {
        flex: 1;
        min-height: 0;
        width: 100%;
        display: block;
        border: 0;
        background: #fff;
    }

    /* html 미리보기 — 파일 내용을 샌드박스 iframe에 실제 화면으로 그린다 */
    .preview__ > .preview-frame {
        flex: 1;
        min-height: 0;
        width: 100%;
        display: none;         /* JS가 표시 */
        border: 0;
        background: #fff;
    }

    /* 용량 초과 3D 모델 안내 카드 — 회색 바닥에 흰 카드 */
    .preview__ > .preview-notice {
        flex: 1;
        min-height: 0;
        width: 100%;
        background: #808080;
        display: none;         /* JS가 표시 */
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
    }
    .preview__ > .preview-notice > .preview-notice__card {
        background: #fff;
        border-radius: 0.75rem;
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
        padding: 1.75rem 2rem;
        max-width: 32rem;
    }
    .preview__ > .preview-notice p {
        color: #222;
        font-size: 0.9375rem;
        line-height: 1.7;
    }
    .preview__ > .preview-notice strong {
        color: #c00;
        font-weight: 700;
    }
    /* 로딩 실패 때만 붙는 원인 문구 — 안내보다 한 단계 낮게 */
    .preview__ > .preview-notice .preview-notice__reason {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 0.0625rem solid #eee;
        color: #777;
        font-size: 0.8125rem;
        line-height: 1.6;
        word-break: break-all;
    }

    /* 브라우저가 못 여는 동영상(.mov 등) 안내 — 빈 화면만 남으면 원인을 알 수 없다 */
    .preview__ > .preview-video-unsupported {
        flex: 1;
        min-height: 0;
        width: 100%;
        background: #111;
        color: #ccc;
        display: none;         /* JS가 표시 */
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1.5rem;
        font-size: 0.875rem;
        line-height: 1.6;
    }


    /* 워커가 앞 10장 미리보기를 만드는 동안 — 가로 로딩바가 좌우로 흐른다 (문구 없음) */
    .preview__ > .preview-pending {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        background: #fff;
    }
    .preview__ > .preview-pending > .label {
        color: #888;
        font-size: 0.875rem;
    }
    /* 트랙 — 연한 회색 바탕 */
    .preview__ > .preview-pending .loader {
        display: block;
        position: relative;
        width: 60%;
        max-width: 16rem;
        height: 0.375rem;
        border-radius: 0.375rem;
        background: #e5e5e5;
        overflow: hidden;
    }
    /* 채움 — 트랙의 40% 길이 막대. 움직임은 JS(Web Animations API)가 굴린다 */
    .preview__ > .preview-pending .loader > .bar {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 40%;
        height: 100%;
        border-radius: 0.375rem;
        background: var(--primary-lv-5);
    }

    /* ---- 파일 ⋯/우클릭 메뉴 ---- */
    >.file-context-menu__ {
        display: none;
        position: absolute;
        top: 20rem;
        left: 20rem;
        background: #fff;
        border: 0.0625rem solid #aaa;
        border-radius: 1rem;
        box-shadow: 0 0.5rem 1.5rem 0 rgba(17, 17, 17, 0.16);
        flex-direction: column;
        padding: 0.5rem;
        gap: 0.25rem;
        min-width: 8rem;

        >button {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            width: 100%;
            padding: 0.375rem 0.75rem;
            border-radius: 0.5rem;
            background: #fff;
            cursor: pointer;
            text-align: left;
        }
        >button:hover { background: var(--primary-lv-0); }
        >button>.icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
        button>.label { white-space: nowrap; color: #555; }

        >.name-change>.icon    { background: url('../img/edit.svg')    no-repeat center / contain; min-height: 1.25rem; min-width: 1.25rem; }
        >.download>.icon       { background: url('../img/download.svg') no-repeat center / contain; min-height: 1.25rem; min-width: 1.25rem; }
        >.attach-upload>.icon  { background: url('../img/attach.svg')  no-repeat center / contain; min-height: 1.25rem; min-width: 1.25rem; }
        >.version-upload>.icon { background: url('../img/version.svg') no-repeat center / contain; min-height: 1.25rem; min-width: 1.25rem; }
        >.delete>.icon         { background: url('../img/delete.svg')  no-repeat center / contain; min-height: 1.25rem; min-width: 1.25rem; }
        >.delete:hover { background: #FFECE6; }
    }

    /* ---- 빈 곳 우클릭 → 업로드 메뉴 ---- */
    >.file-upload-context-menu__ {
        display: none;
        position: fixed;
        background: #fff;
        border: 0.0625rem solid #aaa;
        border-radius: 1rem;
        box-shadow: 0 0.5rem 1.5rem 0 rgba(17, 17, 17, 0.16);
        flex-direction: column;
        padding: 0.5rem;
        gap: 0.25rem;
        min-width: 8rem;
        z-index: 9999;
    }
    >.file-upload-context-menu__ >.file-upload {
        display: flex;
        align-items: center;
        padding: 0.25rem 0.75rem;
        gap: 0.25rem;
        background: #fff;
        border-radius: 0.75rem;
    }
    .file-upload-context-menu__ >.file-upload:hover { background: var(--primary-lv-0); cursor: pointer; }
    .file-upload-context-menu__ >.file-upload>.label { color: #555; }
}

/* ---- 파일 선택/연결 표시 (다중선택·첨부묶음) ---- */
.file__ .body .item.--selected { background: var(--primary-lv-1); }
.file__ .body .item.--linked   { background: #fff; }

/* 세트(메인+첨부/버전) 외곽 박스 — 행 간격은 유지한 채 세트 전체를 하나의 둥근 박스로.
   행의 border 대신 가상요소로 선을 그려서, 각 행(선택 하이라이트·호버)의
   border-radius는 박스와 무관하게 그대로 살아 있다 */
.file__ .body .item { position: relative; }

/* 메인: 박스 위 뚜껑 (위+좌우 선, 위 모서리 둥글게) */
.file__ .body .item:is(.--selected, .--linked):not(.--child):has(+ .item.--child:is(.--selected, .--linked))::before {
    content: '';
    position: absolute;
    inset: -0.125rem;                /* 자기 border-box 전체 */
    border: 0.125rem solid var(--primary-lv-5);
    border-bottom: none;
    border-radius: 0.75rem 0.75rem 0 0;
    pointer-events: none;
}
/* 세트 자식: 좌우 선 — 자기 위 gap 구간까지 이어서 위 행과 끊김 없이 연결 */
.file__ .body .item:is(.--selected, .--linked) + .item.--child:is(.--selected, .--linked)::before {
    content: '';
    position: absolute;
    left: -0.125rem;
    right: -0.125rem;
    top: -0.375rem;                  /* 행 border(0.125) + gap(0.25) */
    bottom: -0.125rem;
    border-left: 0.125rem solid var(--primary-lv-5);
    border-right: 0.125rem solid var(--primary-lv-5);
    pointer-events: none;
}
/* 세트 마지막 자식: 아래 뚜껑 (아래 선 + 아래 모서리 둥글게) */
.file__ .body .item:is(.--selected, .--linked) + .item.--child:is(.--selected, .--linked):not(:has(+ .item.--child:is(.--selected, .--linked)))::before {
    border-bottom: 0.125rem solid var(--primary-lv-5);
    border-radius: 0 0 0.75rem 0.75rem;
}

/* :has() 미지원 브라우저 폴백 — 행별 둥근 테두리로 대체 */
@supports not selector(li:has(+ li)) {
    .file__ .body .item.--selected,
    .file__ .body .item.--linked { border-color: var(--primary-lv-5); }
}

/* ============ 라디오/체크박스 기본 숨김 (커스텀 토글용) ============ */
input[type="radio"],
input[type="checkbox"] {
    display: none;
}

/* ============ 상단 헤더 (카테고리 버튼 바) ============ */
.header__ {
    position: fixed;
    top: 0;
    width: 100dvw;
    height: 3.625rem;          /* 로고(279x67) 비율에 맞춘 헤더 높이 */
    background: #2E5A4F;        /* 로고/요청 색에 맞춘 헤더바 색 */
    display: flex;
    align-items: center;
    border-bottom: 0.0625rem solid var(--primary-lv-7);
    z-index: 100;
}
/* 좌측 상단 로고 (폴더트리 폭 16rem · 헤더 버튼 왼쪽 빈 공간) */
.header__ > .brand {
    position: absolute;
    left: 0;
    top: 0;
    width: 16rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    border-right: 0.0625rem solid #aaa;   /* 폴더트리 구분선(aside border-right)과 이어지는 세로선 */
}
.header__ > .brand > .brand-logo {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.header__ > .construction {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    flex-shrink: 1;
    min-width: 0;
    margin-left: 16rem;        /* 좌측 폴더트리(aside 16rem) 폭만큼 밀어 가운데 파일목록에 정렬 */
}
.header__ > .construction > .title {
    color: #fff;
    padding-right: 0.5rem;
    flex-shrink: 0;             /* 제목은 줄어들지 않게 (있을 경우) */
}
.header__ > .construction > .construction-track {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex-shrink: 1;
    overflow-x: hidden;        /* 버튼 많아지면 이 영역에서만 가로 클립 */
    scroll-behavior: smooth;
    padding: 0.0625rem;
}
.header__ > .construction > .construction-track > label {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 0.75rem;
    outline: 0.0625rem solid #333;
    background: transparent;
    flex-shrink: 0;            /* 버튼은 안 찌그러지게 */
}
.header__ > .construction > .construction-track > label:hover { background: rgba(255,255,255,0.10); cursor: pointer; }
.header__ > .construction > .construction-track > label:active { background: rgba(255,255,255,0.18); }
.header__ > .construction > .construction-track > label > .label { color: #fff; white-space: nowrap; }
.header__ > .construction > .construction-track > label:has(input:checked) { background: #fff; outline-color: #333; }
.header__ > .construction > .construction-track > label:has(input:checked) > .label { color: var(--primary-lv-5); }

/* + (헤더 추가) 버튼 */
.header__ .construction .header-add {
    margin-left: 0.25rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.75rem;
    outline: 0.0625rem solid #333;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.25rem;
}
.header__ .construction .header-add:hover { background: rgba(255,255,255,0.10); }

/* ============ 헤더 ◁▷ 네비 (버튼 오버플로우 시 스크롤) ============ */
.header__ > .construction > .header-nav {
    display: none;            /* 넘칠 때만 JS가 flex 로 노출 */
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;           /* 항상 우측 고정 */
}
.header__ > .construction > .header-nav > button {
    color: #fff;
    background: transparent;
    outline: 0.0625rem solid #333;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 1.1rem;
    line-height: 1;
}
.header__ > .construction > .header-nav > button:hover { background: rgba(255,255,255,0.10); }
.header__ > .construction > .header-nav > button:disabled { opacity: 0.35; cursor: default; }

/* ============ 헤더 생성/이름변경 모달 ============ */
.header-modal__ {
    display: none;            /* 기본 숨김, JS가 flex 로 열음 */
    position: fixed;
    inset: 0;                 /* 화면 전체 덮기 */
    z-index: 200;
    align-items: center;      /* 가운데 정렬 */
    justify-content: center;
}

.header-modal__dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);   /* 뒤 어둡게 */
}

.header-modal__panel {
    position: relative;       /* dim 위에 올라오게 */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 20rem;
    padding: 1.5rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem 0 rgba(17, 17, 17, 0.2);
}

.header-modal__title {
    font-weight: 500;
    color: var(--primary-lv-5);
}

.header-modal__input {
    padding: 0.5rem 0.75rem;
    border: 0.0625rem solid #aaa;
    border-radius: 0.5rem;
}

.header-modal__foot {
    display: flex;
    justify-content: flex-end;   /* 버튼 우측 정렬 */
    gap: 0.5rem;
}

.header-modal__foot > button {
    padding: 0.4rem 1rem;
    border-radius: 0.75rem;
    cursor: pointer;
}

.header-modal__cancel {
    background: #fff;
    border: 0.0625rem solid #aaa;
}

.header-modal__confirm {
    background: var(--primary-lv-5);
    color: #fff;
    border: 0;
}

/* ============ 헤더버튼 우클릭 메뉴 (이름변경/삭제) ============ */
.header-context-menu__ {
    display: none;            /* 기본 숨김, JS가 flex 로 열음 */
    position: fixed;          /* 마우스 커서 위치에 띄움 (JS가 left/top 지정) */
    z-index: 100;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 8rem;
    padding: 0.5rem;
    background: #fff;
    border: 0.0625rem solid #aaa;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem 0 rgba(17, 17, 17, 0.16);
}

.header-context-menu__ > button {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: #fff;
    border-radius: 0.75rem;
    cursor: pointer;
}

.header-context-menu__ > button:hover {
    background: var(--primary-lv-0);
}

.header-context-menu__ > button > .label {
    color: #555;
}

/* ============ 폴더(aside) 우클릭 메뉴 (새폴더/이름변경/삭제) ============ */
.folder-context-menu__ {
    display: none;
    position: fixed;          /* 커서 위치에 띄움 */
    z-index: 100;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 8rem;
    padding: 0.5rem;
    background: #fff;
    border: 0.0625rem solid #aaa;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem 0 rgba(17, 17, 17, 0.16);
}

.folder-context-menu__ > button {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: #fff;
    border-radius: 0.75rem;
    cursor: pointer;
}

.folder-context-menu__ > button:hover {
    background: var(--primary-lv-0);
}

.folder-context-menu__ > button > .label {
    color: #555;
}

/* 우클릭한 대상 강조 (그룹 / 묶음 / 폴더) */
.document-section__ > .aside__ > .group > .title.--context,
.document-section__ > .aside__ > .group > .sub-group > .sub-title.--context,
.document-section__ > .aside__ > .group > .sub-group > .list > .item.--context {
    background: var(--primary-lv-2);
    outline: 0.0625rem solid var(--primary-lv-5);
    border-radius: 0.5rem;
}

/* 파일을 끌어다 놓는 중인 파일목록 영역 */
.document-section__ > .file__.--drop {
    background: var(--primary-lv-0);
    outline: 0.125rem dashed var(--primary-lv-5);
    outline-offset: -0.5rem;
    border-radius: 0.5rem;
}

/* 빈 곳 우클릭 → 트리 전체 강조 (점선) */
.aside__.--context {
    background: var(--primary-lv-0);
    outline: 0.0625rem dashed var(--primary-lv-5);
    outline-offset: -0.375rem;
    border-radius: 0.5rem;
}

/* ============ 폴더 생성/이름변경 모달 ============ */
.folder-modal__ {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
}

.folder-modal__dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.folder-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 20rem;
    padding: 1.5rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem 0 rgba(17, 17, 17, 0.2);
}

.folder-modal__title {
    font-weight: 500;
    color: var(--primary-lv-5);
}

.folder-modal__input {
    padding: 0.5rem 0.75rem;
    border: 0.0625rem solid #aaa;
    border-radius: 0.5rem;
}

.folder-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.folder-modal__foot > button {
    padding: 0.4rem 1rem;
    border-radius: 0.75rem;
    cursor: pointer;
}

.folder-modal__cancel {
    background: #fff;
    border: 0.0625rem solid #aaa;
}

.folder-modal__confirm {
    background: var(--primary-lv-5);
    color: #fff;
    border: 0;
}

/* ============ 파일 업로드 진행 모달 ============ */
.upload-progress__ {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.upload-progress__dim {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.45);
}

.upload-progress__panel {
    position: relative;
    z-index: 1;
    min-width: 22rem;
    padding: 1.5rem;
    background: #fff;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem 0 rgba(17, 17, 17, 0.16);
}

.upload-progress__title {
    font-weight: 500;
    color: var(--primary-lv-5);
}

.upload-progress__count {
    color: #555;
}

.upload-progress__bar {
    width: 100%;
    height: 0.5rem;
    background: var(--primary-lv-0);
    border-radius: 0.5rem;
    overflow: hidden;
}

.upload-progress__fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--primary-lv-5);
    transition: width 0.15s ease;
}

.upload-progress__percent {
    font-weight: 500;
    color: var(--primary-lv-5);
}

.upload-progress__status {
    color: #888;
    min-height: 1.2em;
}

/* ============ notice 편집 메뉴 (✎ → 이미지 변경/삭제) ============ */
.article__ > .notice-context-menu__ {
    display: none;            /* 기본 숨김, ✎ 누르면 flex */
    position: absolute;
    top: 3.25rem;
    right: 0.75rem;
    z-index: 10;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 9rem;
    padding: 0.5rem;
    background: #fff;
    border: 0.0625rem solid #aaa;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem 0 rgba(17, 17, 17, 0.16);
}

.article__ > .notice-context-menu__ > button {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: #fff;
    border-radius: 0.75rem;
    cursor: pointer;
}

.article__ > .notice-context-menu__ > button:hover {
    background: var(--primary-lv-0);
}

.article__ > .notice-context-menu__ > button > .label {
    color: #555;
}

.article__ > .notice-context-menu__ > button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ============ iframe 임베드 모드 ============
   부모 사이트 안에 iframe으로 들어왔을 때 (archive.js가 body에 --embedded 를 붙임).
   부모 사이트에 이미 헤더 탭이 있으므로 우리 헤더를 숨기고,
   헤더 높이(3.625rem)만큼 밀어뒀던 오프셋을 0으로 되돌려 본문이 화면 전체를 쓰게 한다. */
body.--embedded > .header__ { display: none; }

body.--embedded > .document-section__ {
    top: 0;
    height: 100dvh;
}

/* 안내(notice) 화면도 같은 오프셋을 쓰므로 함께 되돌린다 */
body.--embedded > .document-section__ > .article__ { top: 0; }