/* 공통 */
.ft-12 { font-size: 0.75rem !important; }
.ft-14 { font-size: 0.875rem !important; }



/* 플로팅 버전 컨트롤 박스 관련 코드 */
body > .control-box { display: none; align-items: center; position: absolute; background: #333; border-radius: 0.25rem; padding: 0.25rem 0.25rem 0.25rem 0; z-index: 33; }
body > .control-box .drag-handle { display: flex; align-items: center; cursor: grab; }
/* body > .control-box .drag-handle .icon {  } */
body > .control-box .contents-wrap { display: flex; align-items: center; }
body > .control-box .contents-wrap .btn-wrap { display: flex; align-items: center; gap: 0.125rem; }
body > .control-box .contents-wrap .btn-wrap .btn { display: flex; align-items: center; gap: 0.25rem; background: #555; color: #fff; border-radius: 0.25rem; padding: 0.25rem 0.3125rem 0.25rem 0.25rem; }
body > .control-box .contents-wrap .btn-wrap .btn:hover { background: #777; cursor: pointer; }
body > .control-box .contents-wrap .btn-wrap .btn .text { display: flex; justify-content: space-between; flex: 1; width: 3rem; }
body > .control-box .contents-wrap .btn-wrap .btn.list .icon { background: url('/main/img/archive/icon__list-view--fff.svg') no-repeat center/contain; }
body > .control-box .contents-wrap .btn-wrap .btn.grid .icon { background: url('/main/img/archive/icon__grid-view--fff.svg') no-repeat center/contain; }
body > .control-box .contents-wrap .btn-wrap .btn.map .icon { background: url('/main/img/archive/icon__map-view--fff.svg') no-repeat center/contain; }
body > .control-box .contents-wrap .btn-wrap .btn.selected { background: #fff; color: #000; }
body > .control-box .contents-wrap .btn-wrap .btn.selected.list .icon { background: url('/main/img/archive/icon__list-view--111.svg') no-repeat center/contain; }
body > .control-box .contents-wrap .btn-wrap .btn.selected.grid .icon { background: url('/main/img/archive/icon__grid-view--111.svg') no-repeat center/contain; }
body > .control-box .contents-wrap .btn-wrap .btn.selected.map .icon { background: url('/main/img/archive/icon__map-view--111.svg') no-repeat center/contain; }



.archive-main { max-width: 100vw; overflow-x: auto; overflow-y: hidden; }


/* 아카이브 좌측 영역 (타이틀, 트리, 휴지통, 컨트롤 박스) */
.archive-main-left { display: flex; flex-direction: column; min-width: 16.25rem; max-width: 16.25rem; height: 100%; }

.archive-main-left .tree-title { background: #e9eeed; border-right: 0.0625rem solid #a5b9b6; border-bottom: 0.0625rem solid #a5b9b6; }
.archive-main-left .tree-title.selected { background: #bccbc8; }
.archive-main-left .tree-title:hover { cursor: pointer; }
.archive-main-left .tree-title:not(.selected):hover { background: #cacaca80; }
.archive-main-left .tree-title .wrap { display: flex; align-items: center; min-height: 2.25rem; padding: 0.25rem 0.5rem; pointer-events: none; }
.archive-main-left .tree-title .wrap .text { font-size: 1rem; font-weight: bold; color: #1e5149; }

/* .archive-main-left .tree-container { flex: 1; min-height: 0; padding: 0 0.25rem 0 0.5rem; overflow-x: hidden; overflow-y: scroll; outline: none; } */
.archive-main-left .tree-container { flex: 1; min-height: 0; padding: 0.15rem 0.25rem 0.15rem 0.5rem; overflow-x: hidden; overflow-y: scroll; background: #e9eeed; border-right: 0.0625rem solid #a5b9b6; outline: none; }
.archive-main-left .tree-container .tree-wrap { width: 100%; }
.archive-main-left .tree-container .tree-wrap::-webkit-scrollbar { display: none; }
.archive-main-left .tree-container .tree-wrap .tree { width: 100%; }
/* .archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap { position: relative; transition: 0.3s; } */
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap { position: relative; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap .tree-item { display: flex; justify-content: space-between; align-items: center; gap: 0.2rem; min-height: 2.25rem; padding: 0 0.25rem; transition: 0.3s; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap .tree-item div { pointer-events: none; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap .tree-item .name-wrap { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap .tree-item .name-wrap .text-wrap { display: flex; flex: 1; min-width: 0; overflow: hidden; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap .tree-item .name-wrap .text-wrap .name-text { padding: 0.375rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth2 { border-bottom: 0.0625rem solid #a5b9b6; }
/* .archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth2:hover { outline: 0.15rem solid #1e5149; cursor: pointer; } */
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth2 > .tree-item .name-wrap .text-wrap .name-text { font-size: 1rem; font-weight: bold; color: #1e5149; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth3 { transition: 0.3s; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth3 > .tree-item .name-wrap .text-wrap .name-text { font-size: 0.875rem; line-height: 1.2; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth3.selected { background: #bccbc8; box-shadow: #789792 0 0 0rem 0.0625rem, #0c0c0d0d 0 0 0.25rem 0.0625rem, #0c0c0d38 0 1rem 1rem -0.5rem; z-index: 13; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth3:hover { cursor: pointer; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth3:not(.selected):hover .tree-item { background: #cacaca80; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth3.expired-warn { animation: var(--expired-warn); }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth3 .tree-item .name-wrap .image { min-width: 1.2rem; height: 1.2rem; }
/* .archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth3.default-folder .tree-item .name-wrap .image { background: url('/main/img/archive/folder-default.svg') no-repeat center/contain; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth3.drawing-folder .tree-item .name-wrap .image { background: url('/main/img/archive/folder-drawing.svg') no-repeat center/contain; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth3.gallery-folder .tree-item .name-wrap .image { background: url('/main/img/archive/folder-gallery.svg') no-repeat center/contain; } */
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth3 .tree-item .name-wrap .image { background: url('/main/img/archive/folder-bullet.svg') no-repeat center/contain; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth3 .tree-item .file-count { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth3 .tree-item .file-count-text { color: #789792; font-size: 0.75rem; padding-right: 0.25rem; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth3 .tree-item .countdown { display: flex; padding: 0.125rem 0.25rem; justify-content: center; align-items: center; gap: 0.25rem; background-color: #FF3D00; border-radius: 0.25rem; }
.archive-main-left .tree-container .tree-wrap .tree .tree-item-wrap.depth3 .tree-item .countdown .text { width: max-content; font-size: 0.75rem; font-weight: 600; color: #fff !important; }

/* 폴더 삭제 카운트다운 툴팁 */
.countdown-tooltip { display: flex; padding: 0.5rem; background: #fff; border: 0.0625rem solid #FF3D00; border-radius: 0.25rem; box-shadow: var(--box-shadow); position: absolute; z-index: 51; transform: translate(0.5rem, -50%); }
.countdown-tooltip .wrap { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.countdown-tooltip .wrap .message { display: flex; align-items: center; font-size: 0.875rem; margin: 0; }
.countdown-tooltip .wrap .message.expiry-date { gap: 0.25rem; padding: 0.25rem 0; }
.countdown-tooltip .wrap .message.expiry-date .countdown { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* 숫자 폭 고정 */
.countdown-tooltip .wrap .message span { font-size: 0.875rem; margin: 0; }
.countdown-tooltip .wrap .message span.bold { font-weight: bold; }
.countdown-tooltip .wrap .message span.color { color: #FF3D00; }
.countdown-tooltip .wrap .renew-expiry-date-btn { display: flex; justify-content: center; align-items: center; padding: 0.25rem 0.5rem; border: 0.0625rem solid #ddd; border-radius: 0.25rem; cursor: pointer; transition: 0.3s; }
.countdown-tooltip .wrap .renew-expiry-date-btn .text { font-weight: 600; pointer-events: none; }
.countdown-tooltip .wrap .renew-expiry-date-btn:hover { background: #FFECE6; }
.countdown-tooltip .wrap .dev-renew-expiry-date-btn { display: flex; justify-content: center; align-items: center; padding: 0.25rem 0.5rem; border: 0.0625rem solid #ddd; border-radius: 0.25rem; cursor: pointer; transition: 0.3s; }
.countdown-tooltip .wrap .dev-renew-expiry-date-btn .text { font-weight: 600; pointer-events: none; }
.countdown-tooltip .wrap .dev-renew-expiry-date-btn:hover { background: #FFECE6; }

/* 아카이브 좌측 영역 고정 버전 컨트롤 박스 관련 코드 */
.archive-main-left .control-box { display: none; align-items: center; height: 2.25rem; min-height: 2.25rem; max-height: 2.25rem; background: #333; }
.archive-main-left .control-box .contents-wrap { display: flex; align-items: center; flex: 1; min-width: 0; height: 100%; }
.archive-main-left .control-box .contents-wrap .btn-wrap { display: flex; align-items: center; height: 100%; flex: 1; min-width: 0; gap: 0.25rem; padding: 0.25rem; }
.archive-main-left .control-box .contents-wrap .btn-wrap .btn { display: flex; justify-content: center; align-items: center; height: 100%; flex: 1; min-width: 0; padding: 0.25rem; background: #555; border-radius: 0.25rem; }
.archive-main-left .control-box .contents-wrap .btn-wrap .btn:hover { cursor: pointer; background: #777; }
.archive-main-left .control-box .contents-wrap .btn-wrap .btn.selected { background: #fff; }
.archive-main-left .control-box .contents-wrap .btn-wrap .btn .text { color: #fff; }
.archive-main-left .control-box .contents-wrap .btn-wrap .btn.selected .text { color: #000; }

/* 아카이브 중앙 파일 영역 */
.archive-main-center { flex: 1; background: #fff; border-right: 0.0625rem solid #a5b9b6; min-width: 52.125rem; }

.list-container { display: none; flex-direction: column; width: 100%; height: 100%; }

.list-container .list-wrap { width: 100%; }

.list-container .list-wrap > .list-item-wrap { width: calc(100% - 0.75rem); margin: 0 0.25rem 0 0.5rem; } /* '>' 없으면 .sub-list-item-wrap에도 width, margin 적용됨 */
.list-container .list-wrap .list-item-wrap .sub-list-item-wrap { width: 100%; }
.list-container .list-wrap .list-item-wrap .list-item { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; }

.list-container .list-wrap.list-header { padding-right: 0.25rem; background: #e9eeed; border-bottom: 0.0625rem solid #a5b9b6; }
.list-container .list-wrap.list-header .list-item-wrap { height: 2.25rem; }

.list-container .list-wrap.list-header .list-item-wrap .list-header-area .sort-asc::after { content: ''; width: 1rem; height: 1rem; background: url('/main/img/archive/icon__arrow-up--777.svg') no-repeat center/contain; }
.list-container .list-wrap.list-header .list-item-wrap .list-header-area .sort-desc::after { content: ''; width: 1rem; height: 1rem; transform: rotate(180deg); background: url('/main/img/archive/icon__arrow-up--777.svg') no-repeat center/contain; }

.list-container .list-wrap.list-body { height: calc(100% - 2.25rem); overflow-x: hidden; overflow-y: scroll; position: relative; outline: none; }

.list-container .list-wrap.list-body .notification-wrap { display: flex; padding: 0.5rem; background: #dd0000; border: 0.0625rem solid #ccc; border-radius: 0.25rem; opacity: 0; position: absolute; top: 0.5rem; left: 50%; transform: translate(-50%, 0); z-index: 3; }
.list-container .list-wrap.list-body .notification-wrap .text { color: #fff; font-weight: bold; }

.list-container .list-wrap.list-body .list-item-wrap .list-item { position: relative; z-index: 11; transition: 0.3s; }
.list-container .list-wrap.list-body .list-item-wrap .list-item .wrap { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background: none; transition: 0.3s; }
/* .list-container .list-wrap.list-body .list-item-wrap .list-item:not(.disabled) > .wrap:hover { cursor: pointer; background: #e9eeed; } */
.list-container .list-wrap.list-body .list-item-wrap .list-item.selected { z-index: 12; }
.list-container .list-wrap.list-body .list-item-wrap .list-item.selected > .wrap { background: #bccbc8; z-index: 12; }
.list-container .list-wrap.list-body .list-item-wrap .list-item.selected > .wrap .name-text { color: #1e5149; }


/* 그리드 */
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.list-header-area { display: none !important; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area { display: flex !important; justify-content: space-between; height: 100%; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .seperate { border-left: 0.0625rem solid #ccc; height: 100%; }

.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area input[type="radio"] { vertical-align: middle; appearance: none; outline: 0.0625rem solid  #A5B9B6; border: 0.15rem solid #fff; border-radius: 50%; width: 0.8rem; height: 0.8rem; background: #fff; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area input[type="radio"]:checked { background: #1E5149; }

.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .text-wrap .text { font-weight: bold; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .radio-btn-wrap { display: flex; align-items: center; gap: 0.1rem; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .radio-btn-wrap .radio-btn { display: flex; align-items: center; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .radio-btn-wrap .radio-btn .radio-wrap { display: flex; align-items: center; gap: 0.2rem; padding: 0.2rem; pointer-events: none; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .radio-btn-wrap .radio-btn.disabled .radio-wrap input[type="radio"] { background: #bbb; outline: 0.0625rem solid #bbb; border: 0.15rem solid #ddd; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .radio-btn-wrap .radio-btn.disabled .radio-wrap div { color: #bbb; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .radio-btn-wrap .radio-btn:not(.disabled):hover { cursor: pointer; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .radio-btn-wrap .radio-btn:not(.disabled):hover .radio-wrap { border-radius: 0.25rem; outline: 0.15rem solid #a5b9b6; }

/* .list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap { display: flex; align-items: center; gap: 1rem; } */
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area { display: flex; align-items: center; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .control-item { display: flex; align-items: center; gap: 0.75rem; }

.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .thumbnail .input-wrap { display: flex; align-items: center; gap: 0.25rem; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .thumbnail .input-wrap .slider-input { display: flex; align-items: center; gap: 0.0625rem; width: 10rem; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .thumbnail .input-wrap .slider-input .thumbnail-size-slider { -webkit-appearance: none; width: 100%; height: 0.25rem; background: linear-gradient(to right, #a5b9b6 50%, #ccc 50%); border-radius: 0.25rem; outline: none; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .thumbnail .input-wrap .slider-input .thumbnail-size-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 0.875rem; height: 0.875rem; background: #fff; border: 0.0625rem solid #a5b9b6; border-radius: 50%; cursor: pointer; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .thumbnail .input-wrap .slider-input .thumbnail-size-slider:hover { cursor: pointer; background: linear-gradient(to right, #1E5149 50%, #ccc 50%); }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .thumbnail .input-wrap .slider-input .thumbnail-size-slider::-webkit-slider-thumb:hover { background: #a5b9b6; }
/* .list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .thumbnail .input-wrap .slider-input .icon { min-width: 1rem; max-width: 1rem; min-height: 1rem; max-height: 1rem; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .thumbnail .input-wrap .slider-input .icon.small { background: url('/main/img/archive/thumbnail-icon-small.svg') no-repeat center / contain; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .thumbnail .input-wrap .slider-input .icon.large { background: url('/main/img/archive/thumbnail-icon-large.svg') no-repeat center / contain; } */
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .thumbnail .input-wrap .btn { display: flex; justify-content: center; align-items: center; background: #fff; border: 0.0625rem solid #a5b9b6; border-radius: 0.25rem; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .thumbnail .input-wrap .btn:hover { cursor: pointer; background: #a5b9b6; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .thumbnail .input-wrap .btn .image { width: 1.2rem; height: 1.2rem; pointer-events: none; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .thumbnail .input-wrap .btn .text { padding-right: 0.2rem; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .thumbnail .input-wrap .btn.plus .image { background: url('/main/img/archive/thumbnail-size-plus.svg') no-repeat center / contain; }
.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .thumbnail .input-wrap .btn.minus .image { background: url('/main/img/archive/thumbnail-size-minus.svg') no-repeat center / contain; }

.list-container.grid .list-wrap.list-header .list-item-wrap .list-item .wrap.control-area .label-wrap { display: flex; align-items: center; gap: 2rem; }

/* .list-container.grid .list-wrap.list-body .list-item-wrap { width: calc(100% - 1.75rem); margin: 1rem 0.75rem 1rem 1rem; display: flex; flex-wrap: wrap; gap: var(--thumbnail-gap); } */
.list-container.grid .list-wrap.list-body .list-item-wrap { width: calc(100% - 2.25rem); margin: 1.25rem 1rem 1.25rem 1.25rem; display: flex; flex-wrap: wrap; gap: var(--thumbnail-gap); }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item { align-items: center; flex: var(--thumbnail-size); aspect-ratio: var(--thumbnail-aspect-ratio); border: 0.0625rem solid #ccc; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item:hover { cursor: pointer; }

/* .list-container.grid .list-wrap.list-body .list-item-wrap .list-item .loading-progress-wrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; padding: 4rem; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .loading-progress { width: 100%; height: 100%; } */

/* .list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap { width: 100%; height: 100%; background: #333; position: relative; pointer-events: none; } */
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap { width: 100%; height: 100%; background: #ccc; position: relative; pointer-events: none; transition: 0.3s; }

/* grid-item > wrap > div들은 z-index 기본값 3 (하이라이트랑 플레이는 2, 썸네일은 1로 별도 설정) */
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap > div { position: absolute; z-index: 3; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .text-wrap { width: 100%; bottom: 0; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .text-wrap .text { width: 100%; padding: 0.2rem 0.4rem; background: #0005; color: #fff; text-shadow: var(--text-shadow-000); }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .text-wrap .text.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 그리드 아이템 파일명 줄바꿈 적용 */
/* .list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap > div .text.line-break { white-space: normal; word-break: break-all; line-height: 1.2; } */
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .text-wrap .text.large { color: #f21d0d; font-weight: bold; text-shadow: var(--text-shadow-fff); }

.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .highlight { width: 100%; height: 100%; outline: 0.25rem solid #f9613b; background: url('/main/img/archive/highlight-bg.svg') no-repeat center / cover; opacity: 0; z-index: 2 !important; transition: 0.3s; }

.list-container.grid .list-wrap.list-body .list-item-wrap .list-item:hover .wrap .highlight { opacity: 1; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item.selected .wrap .highlight { opacity: 1; }

/* .list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .ext-badge { top: 0; left: 0; bottom: auto; width: fit-content; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .ext-badge .text { width: fit-content; } */

.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .play { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; top: 0; right: 0; bottom: auto; z-index: 2; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .play .image { width: 50%; height: 50%; opacity: 0.5; background: url('/main/img/archive/play3.svg') no-repeat center/contain; }

.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .gps-data { top: 0; right: 0; bottom: auto; width: fit-content; padding: 0.0625rem; pointer-events: auto; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .gps-data .gps-data-wrap { display: flex; align-items: center; transition: 0.4s; pointer-events: none; border: 0.125rem solid transparent; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .gps-data .gps-data-wrap .tooltip { display: none; padding: 0 0.25rem; color: #fff; width: fit-content; text-shadow: var(--text-shadow-000); word-break: keep-all; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .gps-data .gps-data-wrap .image { min-width: 1.2rem; max-width: 1.2rem; min-height: 1.2rem; max-height: 1.2rem; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .gps-data.gps-data-yes .gps-data-wrap .image { background: url('/main/img/archive/gps-data-yes.svg') no-repeat center/contain; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .gps-data.gps-data-no .gps-data-wrap .image { background: url('/main/img/archive/gps-data-no.svg') no-repeat center/contain; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item:hover .wrap .gps-data .gps-data-wrap { background: #0009; border: 0.125rem solid #0009; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item:hover .wrap .gps-data .gps-data-wrap .tooltip { display: flex; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item:hover .wrap .gps-data:hover .gps-data-wrap { background: #fff9; border: 0.125rem solid #0009; outline: 0.125rem solid #fff; }

/* .list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .gps-data .gps-data-wrap { background: #0009; border: 0.125rem solid #0009; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .gps-data .gps-data-wrap .tooltip { display: flex; } */

.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .thumbnail { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: #333; z-index: 1 !important; padding: 0 !important; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item.sub-list-item .wrap .thumbnail { width: 90%; height: 90%; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .thumbnail img { width: 100%; height: 100%; object-fit: var(--thumbnail-ratio); }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .thumbnail img.default-image { width: 50%; height: 50%; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item.sub-list-item .wrap .thumbnail { border: 0.0625rem solid #333; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item.non-selected .wrap .thumbnail { opacity: 0.5; }

.list-container.grid .list-wrap.list-body .list-item-wrap .list-item.sub-list-item .wrap .sub-sign { top: 0; left: 0; bottom: auto; width: fit-content; padding: 0.0625rem; pointer-events: none; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item.sub-list-item .wrap .sub-sign .text { padding: 0.125rem 0.25rem; border-radius: 0.25rem; background: #fff; }

.list-container.grid .list-wrap.list-body .list-item-wrap .list-item.group-style { scale: 1.02; box-shadow: var(--box-shadow); }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item.group-style .wrap { outline: 0.0625rem solid #f9613b; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item.group-style.version .wrap { background: #E7F4FE; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item.group-style.attachment .wrap { background: #F1ECF9; }


/* 리스트 */
.list-container.list .list-wrap.list-header .list-item-wrap .list-item .wrap > div { font-weight: bold; }
.list-container.list .list-wrap.list-header .list-item-wrap .list-item .wrap > div:hover { background: #bccbc8; cursor: pointer; }

.list-container.list .list-wrap.list-body .list-item-wrap { flex-direction: column; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item.main-list-item { border-bottom: 0.0625rem solid #ccc; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item.main-list-item.group-style { box-shadow: #789792 0 0 0rem 0.0625rem, #0c0c0db3 0rem 0.5rem 1rem -0.25rem; z-index: 13; }

.list-container.list .list-wrap .list-item-wrap .list-item .wrap.list-header-area { display: flex !important; }
.list-container.list .list-wrap .list-item-wrap .list-item .wrap.control-area { display: none !important; }
.list-container.list .list-wrap .list-item-wrap .list-item .wrap > div { display: flex; align-items: center; min-height: 2.25rem; padding: 0.25rem; }
.list-container.list .list-wrap .list-item-wrap .list-item .wrap .list-item-data > .text { pointer-events: none; }
.list-container.list .list-wrap .list-item-wrap .list-item .wrap .name { flex: 1; min-width: 0;  }
.list-container.list .list-wrap .list-item-wrap .list-item .wrap .original-location { width: 30rem; }
.list-container.list .list-wrap .list-item-wrap .list-item .wrap .remove-user { width: 5rem; }
.list-container.list .list-wrap .list-item-wrap .list-item .wrap .remove-date { width: 6.5rem; }
.list-container.list .list-wrap .list-item-wrap .list-item .wrap .author { width: 5rem; }
.list-container.list .list-wrap .list-item-wrap .list-item .wrap .uploader { width: 5rem; }
.list-container.list .list-wrap .list-item-wrap .list-item .wrap .create-date { width: 6.5rem; }
.list-container.list .list-wrap .list-item-wrap .list-item .wrap .size { width: 5rem; }
.list-container.list .list-wrap .list-item-wrap .list-item .wrap .state { width: 5rem; }
.list-container.list .list-wrap .list-item-wrap .list-item .wrap .memo { width: 3rem; }

.list-container.list .list-wrap.list-body .list-item-wrap .list-item:not(.disabled) > .wrap:hover { cursor: pointer; background: #e9eeed; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .name { gap: 0.25rem; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .name .type-image { width: 1.25rem; height: 1.25rem; pointer-events: none; }
/* .list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .name > .name-text { pointer-events: none; min-width: 0; flex: 1; line-height: 1.2; transition: 0.1s; white-space: pre-wrap; } */
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .name > .name-text { pointer-events: none; min-width: 0; flex: 1; line-height: 1.2; transition: 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .size.large { color: #f21d0d; font-weight: bold; text-shadow: var(--text-shadow-fff); }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .state { display: flex; flex-direction: row; align-items: center; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .state .state-text { font-weight: bold; pointer-events: none; text-shadow: var(--text-shadow-fff); }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .state.viewable .state-text { color: #4db251; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .state.unsupport .state-text { color: #f21d0d; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .state .convert-btn { display: flex; justify-content: center; align-items: center; width: auto; height: 1.25rem; outline: 0.0625rem solid #ccc; border-radius: 0.25rem; background: #fff; padding: 0.125rem 0.25rem; transition: 0.3s; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .state .convert-btn div { pointer-events: none; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .state .convert-btn .convert-btn-image { width: 1rem; height: 1rem; background: url('/main/img/archive/convert_gray.svg') no-repeat center/contain; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .state .convert-btn .convert-btn-text { color: #000; font-weight: bold; padding-left: 0.125rem; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item:not(.disabled) > .wrap .state .convert-btn:hover,
.list-container.list .list-wrap.list-body .list-item-wrap .list-item:not(.disabled) > .wrap .state.working .convert-btn { background: #000; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item:not(.disabled) > .wrap .state .convert-btn:hover .convert-btn-image,
.list-container.list .list-wrap.list-body .list-item-wrap .list-item:not(.disabled) > .wrap .state.working .convert-btn .convert-btn-image { background: url('/main/img/archive/convert_white.svg') no-repeat center/contain; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item:not(.disabled) > .wrap .state.working .convert-btn .convert-btn-image { animation: rotate-image 1.5s linear infinite; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item:not(.disabled) > .wrap .state .convert-btn:hover .convert-btn-text,
.list-container.list .list-wrap.list-body .list-item-wrap .list-item:not(.disabled) > .wrap .state.working .convert-btn .convert-btn-text { color: #fff; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .memo { justify-content: center !important; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .memo .memo-icon { width: 1rem; height: 1rem; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .sub-list-item-wrap .list-item .wrap .name .sub-sign { display: flex; align-items: center; gap: 0.5rem; pointer-events: none; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .sub-list-item-wrap .list-item .wrap .name .sub-sign .symbol { font-size: 0.875rem; color: #777; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .sub-list-item-wrap .list-item .wrap .name .sub-sign .text { font-size: 0.75rem; font-weight: 500; padding: 0.25rem; border-radius: 0.25rem; background: #fff; }

/* .list-container.list .list-wrap.list-body .list-item-wrap .list-item .sub-list-item-wrap .list-item .wrap .name .sub-sign.split .text { color: #e8175e; border: 0.0625rem solid #f6a2bf;}
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .sub-list-item-wrap .list-item .wrap .name .sub-sign.appendix .text { color: #4db251; border: 0.0625rem solid #b8e0b9; } */

/* 그리드/리스트 추가 파일 뱃지 스타일 */
/* .list-container .list-wrap.list-body .list-item-wrap .list-item .wrap .sub-sign.version .text { color: #0d8df2; border: 0.0625rem solid #9ed1fa; }
.list-container .list-wrap.list-body .list-item-wrap .list-item .wrap .sub-sign.attachment .text { color: #6d3dc2; border: 0.0625rem solid #c5b1e7; } */
/* 그리드 - 배경 색상 적용에 흰색 텍스트 */
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .sub-sign.version .text { background: #0d8df2; color: #fff; border: 0.0625rem solid #0d8df2; }
.list-container.grid .list-wrap.list-body .list-item-wrap .list-item .wrap .sub-sign.attachment .text { background: #6d3dc2; color: #fff; border: 0.0625rem solid #6d3dc2; }
/* 리스트 - 흰색 배경에 텍스트 색상 적용 */
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .sub-sign.version .text { color: #0d8df2; border: 0.0625rem solid #9ed1fa; }
.list-container.list .list-wrap.list-body .list-item-wrap .list-item .wrap .sub-sign.attachment .text { color: #6d3dc2; border: 0.0625rem solid #c5b1e7; }

/* 그리드, 리스트 공통 - 파일 드래그 업로드 영역 */
.list-container .list-wrap.list-body .dnd-area { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; position: absolute; background: #e9eeeddd; border: 0.125rem solid #a5b9b6; border-radius: 0.25rem; z-index: 41; }
.list-container .list-wrap.list-body .dnd-area .image { width: 3rem; height: 3rem; background: url('/main/img/archive/upload_out_dnd.svg') no-repeat center/contain; pointer-events: none; }
/* .list-container .list-wrap.list-body .dnd-area .text { color: #a5b9b6; font-size: 1.125rem; font-weight: bold; pointer-events: none; text-align: center; line-height: 1.5; }
.list-container .list-wrap.list-body .dnd-area .warn { color: #dd0000; font-size: 1.125rem; font-weight: bold; pointer-events: none; text-align: center; line-height: 1.5; } */

.list-container .list-wrap.list-body .dnd-area .text-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; pointer-events: none; }
.list-container .list-wrap.list-body .dnd-area .text-wrap .text { color: #a5b9b6; font-size: 1.125rem; font-weight: bold; }
.list-container .list-wrap.list-body .dnd-area .warn-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; pointer-events: none; }
.list-container .list-wrap.list-body .dnd-area .warn-wrap div { color: #dd0000; font-size: 1.125rem; font-weight: bold; }


/* 지도 */
/* .list-container.grid .list-wrap.list-body .map-container { display: none; width: calc(100% - 0.25rem); height: calc(100% - 0.5rem); background: #fff; margin: 0.25rem 0 0.25rem 0.25rem; position: relative;} */
.list-container.grid .list-wrap.list-body .map-container { display: none; width: 100%; height: 100%; background: #fff; position: relative;}

/* 세로 버전 */
/* .list-container.grid .list-wrap.list-body .map-container .ol-zoom { left: auto; right: 0.5rem; rotate: -90deg; } */
/* 가로 버전 */

.list-container.grid .list-wrap.list-body .map-container .marker { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #f00; border: 0.2rem solid #fff; outline: 0.1rem solid #000; pointer-events: none; }

.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap { display: flex; align-items: center; gap: 0.5rem; position: absolute; bottom: 0.5rem; right: 0.5rem; z-index: 1; }


.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .btn { display: flex; justify-content: center; align-items: center; gap: 0.125rem; background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid #ddd; padding: 0 0.25rem 0 0.125rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; cursor: pointer; }
.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .btn:hover { background-color: #eee; }
.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .btn div { pointer-events: none; }
.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .btn .icon { width: 1rem; height: 1rem; }
.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .btn.on { background: #111; }
.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .btn.on .text { color: #fff; }
.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .overlays-fit-btn .icon { background: url(/main/img/archive/fit-111.svg) no-repeat center / contain; }
.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .pmtiles-fit-btn .icon { background: url(/main/img/archive/fit-111.svg) no-repeat center / contain; }
.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .base-map-btn .icon { background: url(/main/img/archive/icon-map-111.svg) no-repeat center / contain; }
.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .base-map-btn.on .icon { background: url(/main/img/archive/icon-map-fff.svg) no-repeat center / contain; }

.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .ol-control { position: relative; }
.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .ol-control button { margin: unset; height: 1.25rem; min-height: 1.25rem; max-height: 1.25rem; min-width: 1.25rem; max-width: 1.25rem; width: 1.25rem; }
.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .ol-control button:hover { outline: none; background: #eee; cursor: pointer; }
.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .ol-control button:focus { outline: none; }
.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .ol-zoom { display: flex; top: unset; left: unset; }
.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .ol-zoom .ol-zoom-in { border-radius: 0.25rem 0 0 0.25rem; border: 0.0625rem solid #ddd; }
.list-container.grid .list-wrap.list-body .map-container .control-btn-wrap .ol-zoom .ol-zoom-out { border-radius: 0 0.25rem 0.25rem 0; border-top: 0.0625rem solid #ddd; border-right: 0.0625rem solid #ddd; border-bottom: 0.0625rem solid #ddd; }

.list-container.grid .list-wrap.list-body .map-container .base-map { display: none; flex-direction: column; gap: 1rem; padding: 0.5rem; background: #fff; border: 0.0625rem solid #ccc; border-radius: 0.25rem; position: absolute; bottom: 2.25rem; right: 0.5rem; z-index: 1; }
.list-container.grid .list-wrap.list-body .map-container .base-map.on { display: flex; }
.list-container.grid .list-wrap.list-body .map-container .base-map .text-wrap { display: flex; justify-content: space-between; align-items: center; }
.list-container.grid .list-wrap.list-body .map-container .base-map .text-wrap .close { width: 1rem; height: 1rem; background: url(/main/img/archive/close.svg) no-repeat center / contain; cursor: pointer; transition: 0.2s; }
.list-container.grid .list-wrap.list-body .map-container .base-map .text-wrap .close:hover { scale: 1.5; }
.list-container.grid .list-wrap.list-body .map-container .base-map .radio-btn-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.list-container.grid .list-wrap.list-body .map-container .base-map .radio-btn-wrap .radio-btn { display: flex; align-items: center; }
.list-container.grid .list-wrap.list-body .map-container .base-map .radio-btn-wrap .radio-btn .radio-wrap { display: flex; align-items: center; gap: 0.2rem; padding: 0.2rem; pointer-events: none; }
.list-container.grid .list-wrap.list-body .map-container .base-map .radio-btn-wrap .radio-btn:hover { cursor: pointer; border-radius: 0.25rem; outline: 0.15rem solid #a5b9b6; }
.list-container.grid .list-wrap.list-body .map-container .base-map .radio-btn-wrap .radio-btn .radio-wrap input[type="radio"] { vertical-align: middle; appearance: none; outline: 0.0625rem solid  #A5B9B6; border: 0.15rem solid #fff; border-radius: 50%; width: 0.8rem; height: 0.8rem; background: #fff; }
.list-container.grid .list-wrap.list-body .map-container .base-map .radio-btn-wrap .radio-btn .radio-wrap input[type="radio"]:checked { background: #1E5149; }

.list-container .list-wrap.list-body .map-container .map-progress { display: none; flex-direction: column; justify-content: center; align-items: center; position: absolute; width: 100%; height: 100%; background: #eeeeee99; backdrop-filter: blur(0.2rem); -webkit-backdrop-filter: blur(0.2rem); overflow: hidden; position: absolute; z-index: 2; }
.list-container.grid .list-wrap.list-body .map-container .map-progress .text { display: flex; flex-direction: row; align-items: center; }
.list-container.grid .list-wrap.list-body .map-container .map-progress .text span { font-size: 3.75rem; }
.list-container.grid .list-wrap.list-body .map-container .map-progress .text img { width: auto; height: 3.75rem; margin-left: 1.875rem; }
.list-container.grid .list-wrap.list-body .map-container .map-progress .count-progress { display: flex; position: relative; width: 100%; margin-top: 2rem; flex-direction: column; }
.list-container.grid .list-wrap.list-body .map-container .map-progress .count-progress span { font-size: 1.75rem; }
.list-container.grid .list-wrap.list-body .map-container .map-progress .count-progress .fileName { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.list-container.grid .list-wrap.list-body .map-container .map-progress .count-progress .count { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; }
.list-container.grid .list-wrap.list-body .map-container .map-progress .count-progress .count .index { position: absolute; right: 50.5%; }
.list-container.grid .list-wrap.list-body .map-container .map-progress .count-progress .count .division { position: absolute; left: 50%; }
.list-container.grid .list-wrap.list-body .map-container .map-progress .count-progress .count .total { position: absolute; left: 51%; }

.list-container.grid .list-wrap.list-body .map-container .cluster-list-wrap { display: flex; flex-direction: column; gap: 0.5rem; max-width: 25%; max-height: calc(100% - 1rem); padding: 0.5rem 0.25rem 0.5rem 0.5rem; border-radius: 0.25rem; background: #fffa; backdrop-filter: blur(0.2rem); -webkit-backdrop-filter: blur(0.2rem); position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2; overflow-y: scroll; box-shadow: #ccc 0 0 0rem 0.0625rem, #0c0c0db3 0rem 0.5rem 1rem -0.25rem; }
.list-container.grid .list-wrap.list-body .map-container .cluster-list-wrap .cluster-list { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem; background: #fffa; border: 0.0625rem solid #ccc; border-radius: 0.25rem; }
.list-container.grid .list-wrap.list-body .map-container .cluster-list-wrap .cluster-list:hover { outline: 0.2rem solid #000; cursor: pointer; }
.list-container.grid .list-wrap.list-body .map-container .cluster-list-wrap .cluster-list.selected { outline: 0.2rem solid #f9613b; background: #fff; }
.list-container.grid .list-wrap.list-body .map-container .cluster-list-wrap .cluster-list > div { pointer-events: none; }
.list-container.grid .list-wrap.list-body .map-container .cluster-list-wrap .cluster-list .wrap { width: 6rem; min-width: 6rem; height: 6rem; min-height: 6rem; position: relative; background: #aaa; border: 0.0625rem solid #ccc; border-radius: 0.25rem; }
.list-container.grid .list-wrap.list-body .map-container .cluster-list-wrap .cluster-list .wrap .play { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: auto; z-index: 2; }
.list-container.grid .list-wrap.list-body .map-container .cluster-list-wrap .cluster-list .wrap .play .image { width: 50%; height: 50%; opacity: 0.5; background: url('/main/img/archive/play3.svg') no-repeat center/contain; }
.list-container.grid .list-wrap.list-body .map-container .cluster-list-wrap .cluster-list .wrap .thumbnail { width: 100%; height: 100%; object-fit: var(--thumbnail-ratio); border-radius: 0.25rem; }
.list-container.grid .list-wrap.list-body .map-container .cluster-list-wrap .cluster-list .name { word-break: break-word; }

.list-container.grid .list-wrap.list-body .map-container .edit-mode-ui { display: none; justify-content: center; width: 100%; height: 100%; padding: 0.5rem; position: absolute; background: transparent; pointer-events: none; border: 0.25rem solid #f00; z-index: 1; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui { display: flex; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap { display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem; max-width: calc(100% - 2rem); padding: 0.5rem; position: absolute; bottom: 0.5rem; border: 0.0625rem solid #ccc; border-radius: 0.25rem; background: #fffa; backdrop-filter: blur(0.2rem); -webkit-backdrop-filter: blur(0.2rem); pointer-events: auto; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .title { display: flex; justify-content: center; flex: 1; min-width: 0; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .title .text { font-weight: bold; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents { display: flex; gap: 2rem; pointer-events: auto; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .info-wrap { display: flex; align-items: center; gap: 0.5rem; position: relative; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap { display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; min-width: fit-content; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .input-wrap { display: flex; gap: 0.25rem; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .input-wrap .left { display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .input-wrap .left .input { display: flex; align-items: center; height: 2rem; background: #fff; border-radius: 0.25rem; border: 0.0625rem solid #ccc; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .input-wrap .left .input .text { width: max-content; padding: 0.2rem; border-right: 0.0625rem solid #ccc; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .input-wrap .left .input .coord-input { background: transparent; padding: 0.2rem; line-height: 1.6; outline: none; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .input-wrap .right { display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 0.25rem; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .input-wrap .right .btn { display: flex; justify-content: center; align-items: center; background: #fff; width: 100%; height: 100%; padding: 0.25rem; border: 0.0625rem solid #ccc; border-radius: 0.25rem; transition: 0.2s; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .input-wrap .right .text { transition: 0.2s; pointer-events: none; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .input-wrap .right .btn:hover { background: #000; cursor: pointer; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .input-wrap .right .btn:hover .text { color: #fff; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .btn-wrap { display: flex; gap: 0.2rem; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .btn-wrap .btn { display: flex; justify-content: center; align-items: center; padding: 0 0.4rem; width: 100%; height: 2rem; background: #fff; border: 0.0625rem solid #ccc; border-radius: 0.25rem; transition: 0.2s; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .btn-wrap .btn .text { transition: 0.2s; pointer-events: none; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .btn-wrap .btn:hover { cursor: pointer; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .btn-wrap .btn:hover .text { color: #fff; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .btn-wrap .btn.save-btn { background: linear-gradient(180deg, #1e5149 0%, #12312c 100%); }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .btn-wrap .btn.save-btn .text { color: #fff; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .btn-wrap .btn.save-btn:hover { background: linear-gradient(0deg, #1e5149 0%, #12312c 100%); }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .btn-wrap .btn.delete-btn .text { color: #f00; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .btn-wrap .btn.delete-btn:hover { background: #000; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .btn-wrap .btn.delete-btn:hover .text { color: #fff; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .edit-mode-ui-wrap .contents .coord-wrap .btn-wrap .btn.cancel-btn:hover { background: #000; }
/* 위치 수정 모드에서 현재 수정중인 이미지 썸네일 및 팝업 썸네일에 적용되는 스타일 */
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .wrap { width: 100%; height: 100%; position: relative; background: #aaa; border: 0.0625rem solid #ccc; border-radius: 0.25rem; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .wrap:hover { cursor: pointer; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .wrap .play { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: auto; z-index: 2; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .wrap .play .image { width: 50%; height: 50%; opacity: 0.5; background: url('/main/img/archive/play3.svg') no-repeat center/contain; }
.list-container.grid .list-wrap.list-body .map-container.edit-mode .edit-mode-ui .wrap .thumbnail { width: 100%; height: 100%; object-fit: var(--thumbnail-ratio); border-radius: 0.2rem; }

.list-container.grid .list-wrap.list-body .map-container .list-item { position: relative; background: #fff; padding: 0.125rem; border: 0.0625rem solid #000000; opacity: 0.7; transform: translateY(-0.5rem) var(--overlay-scale-transform); transform-origin: center bottom; }
.list-container.grid .list-wrap.list-body .map-container .list-item::before { content: ""; position: absolute; left: 50%; bottom: -0.35rem; border-style: solid; border-width: 0.35rem 0.35rem 0; border-color: #000 transparent; transform: translateX(-50%); transform-origin: center bottom; z-index: 0; }
.list-container.grid .list-wrap.list-body .map-container .list-item::after { content: ""; position: absolute; left: 50%; bottom: -0.3rem; border-style: solid; border-width: 0.35em 0.35rem 0; border-color: #fff transparent; transform: translateX(-50%); transform-origin: center bottom; z-index: 1; }
.list-container.grid .list-wrap.list-body .map-container.overlay-suspend .list-item { visibility: hidden; pointer-events: none; transition: none !important; }
.list-container.grid .list-wrap.list-body .map-container.overlay-suspend .list-item * { visibility: hidden; pointer-events: none; transition: none !important; }
.list-container.grid .list-wrap.list-body .map-container:not(.edit-mode) .list-item:hover { scale: 1.2; opacity: 1; cursor: pointer; }
.list-container.grid .list-wrap.list-body .map-container .ol-overlay-container.ol-selectable { z-index: 1; }
.list-container.grid .list-wrap.list-body .map-container:not(.edit-mode) .ol-overlay-container.ol-selectable:hover { z-index: 2; }
.list-container.grid .list-wrap.list-body .map-container .ol-overlay-container.ol-selectable:has(.list-item.selected) { z-index: 3; }
.list-container.grid .list-wrap.list-body .map-container .list-item.selected { background: #f9613b; scale: 1.2; opacity: 1; }
.list-container.grid .list-wrap.list-body .map-container .list-item.selected::after { border-color: #f9613b transparent; }
.list-container.grid .list-wrap.list-body .map-container .list-item .wrap { width: 100%; height: 100%; background: #333; position: relative; pointer-events: none; }
.list-container.grid .list-wrap.list-body .map-container .list-item .wrap .play { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: auto; z-index: 2; }
.list-container.grid .list-wrap.list-body .map-container .list-item .wrap .play .image { width: 50%; height: 50%; opacity: 0.5; background: url('/main/img/archive/play3.svg') no-repeat center/contain; }
.list-container.grid .list-wrap.list-body .map-container .list-item .wrap .thumbnail { width: 3rem; height: 3rem; object-fit: var(--thumbnail-ratio); }



/* 드래그앤드롭 비허용 영역 */
.not-dnd-area { display: none; position: absolute; width: 100%; height: 100%; background: #ffffff00; z-index: 40; }



/* 아카이브 우측 영역 (미리보기, 메모(AI요약), 메타데이터) */
.archive-main-right { min-width: 55rem; max-width: 55rem; height: 100%; background: #fff; position: relative; }

.archive-main-right .viewer-container { display: none; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative; }

.archive-main-right .viewer-container .viewer-header { width: 100%; background: #e9eeed; border-bottom: 0.0625rem solid #a5b9b6; padding: 0 1rem; }
.archive-main-right .viewer-container .viewer-header .wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 2.25rem; }
.archive-main-right .viewer-container .viewer-header .text-wrap { display: flex; align-items: center; gap: 0.5rem; }
.archive-main-right .viewer-container .viewer-header .text-wrap .title { font-weight: bold; color: #1E5149; }
.archive-main-right .viewer-container .viewer-header .text-wrap .thumb-alert { color: #777; }
.archive-main-right .viewer-container .viewer-header .btn { display: flex; align-items: center; height: 1.25rem; background: #fff; outline: 0.0625rem solid #ddd; border-radius: 0.25rem; padding: 0.2rem; transition: 0.3s; }
.archive-main-right .viewer-container .viewer-header .btn:hover { background: #000; cursor: pointer; }
.archive-main-right .viewer-container .viewer-header .btn:hover .text { color: #fff; }

.archive-main-right .viewer-container .viewer-wrap { display: flex; flex: 1; width: 100%; min-height: 0; position: relative; }

/* .archive-main-right .viewer-container .viewer-wrap .thumb-alert { display: none; justify-content: flex-start; align-items: center; position: absolute; top: 1rem; left: 1rem; width: 18.125rem; height: 1.75rem; background: #fff; border: 0.0625rem solid #111; border-radius: 1rem; padding: 0.25rem; overflow: hidden; white-space: nowrap; transition: all 0.3s ease; cursor: pointer; }
.archive-main-right .viewer-container .viewer-wrap .thumb-alert .image { flex-shrink: 0; width: 1.125rem; height: 1.125rem; background: url('/main/img/archive/alert_circle_yellow.svg') no-repeat center/contain; pointer-events: none; transition: 0.3s ease; }
.archive-main-right .viewer-container .viewer-wrap .thumb-alert .text { display: inline-block; max-width: 18.75rem; opacity: 1; white-space: nowrap; padding-left: 0.25rem; font-size: 0.75rem; font-weight: bold; pointer-events: none; overflow: hidden; transition: max-width 0.3s ease, opacity 0.3s ease, padding 0.3s ease; }
.archive-main-right .viewer-container .viewer-wrap .thumb-alert.compact { width: 1.75rem; border-radius: 1rem; padding: 0.25rem; }
.archive-main-right .viewer-container .viewer-wrap .thumb-alert.compact .text { max-width: 0; opacity: 0; padding-left: 0; }
.archive-main-right .viewer-container .viewer-wrap .thumb-alert:hover { background: #000; cursor: pointer; }
.archive-main-right .viewer-container .viewer-wrap .thumb-alert:hover .text { color: #fff; } */

/* .archive-main-right .viewer-container .viewer-wrap .open-new-window-btn { display: none; justify-content: center; align-items: center; gap: 0.25rem; position: absolute; top: 1rem; right: 1rem; height: 1.75rem; background: #fff; border: 0.0625rem solid #111; border-radius: 0.25rem; padding: 0.25rem 0.5rem; transition: 0.2s; }
.archive-main-right .viewer-container .viewer-wrap .open-new-window-btn .image { width: 1rem; height: 1rem; background: url('/main/img/archive/external_link_111.svg') no-repeat center/contain; }
.archive-main-right .viewer-container .viewer-wrap .open-new-window-btn .text { font-size: 0.75rem; font-weight: bold; }
.archive-main-right .viewer-container .viewer-wrap .open-new-window-btn:hover { background: #000; cursor: pointer; }
.archive-main-right .viewer-container .viewer-wrap .open-new-window-btn:hover .image { background: url('/main/img/archive/external_link_fff.svg') no-repeat center/contain; }
.archive-main-right .viewer-container .viewer-wrap .open-new-window-btn:hover .text { color: #fff; } */

.archive-main-right .viewer-container .viewer-wrap .viewer { display: none; justify-content: center; align-items: center; width: 100%; height: 100%; }
.archive-main-right .viewer-container .viewer-wrap .viewer iframe { width: 100%; height: 100%; border: none; }
.archive-main-right .viewer-container .viewer-wrap .viewer iframe body { background-color: 383838; }
.archive-main-right .viewer-container .viewer-wrap .viewer .viewer-gsim { width: 100%; height: 100%; }
.archive-main-right .viewer-container .viewer-wrap .viewer .viewer-ifc { width: 100%; height: 100%; }
.archive-main-right .viewer-container .viewer-wrap .viewer .viewer-3d { width: 100%; height: 100%; }
.archive-main-right .viewer-container .viewer-wrap .viewer .viewer-image-wrap { display: flex; justify-content: center; align-items: center; padding: 0.5rem; width: 100%; height: 100%; }
.archive-main-right .viewer-container .viewer-wrap .viewer .viewer-image-wrap .viewer-image { pointer-events: none; border-radius: 0.25rem; box-shadow: var(--box-shadow); max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.archive-main-right .viewer-container .viewer-wrap .viewer .viewer-video-wrap { display: flex; justify-content: center; align-items: center; padding: 2rem; width: 100%; height: 100%; }
.archive-main-right .viewer-container .viewer-wrap .viewer .viewer-video-wrap .viewer-video { border-radius: 0.25rem; box-shadow: var(--box-shadow); max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.archive-main-right .viewer-container .viewer-wrap .viewer .viewer-text-wrap { display: flex; justify-content: center; align-items: center; padding: 0.125rem 1rem; width: 100%; height: 100%; overflow-y: scroll; }
.archive-main-right .viewer-container .viewer-wrap .viewer .viewer-text-wrap .viewer-text { width: 100%; height: 100%; padding: 0 1rem; white-space: pre-wrap; font-size: 0.875rem; }
.archive-main-right .viewer-container .viewer-wrap .viewer .viewer-unsupport-wrap { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.archive-main-right .viewer-container .viewer-wrap .viewer .viewer-unsupport-wrap .text { color: #777; font-size: 1.25rem; font-weight: bold; }
.archive-main-right .viewer-container .viewer-wrap .viewer .viewer-convert-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%;}
.archive-main-right .viewer-container .viewer-wrap .viewer .viewer-convert-wrap .text { color: #777; font-size: 1.25rem; font-weight: bold; }

.archive-main-right .viewer-container .info-wrap { display: flex; flex-direction: column; width: 100%; position: relative; transition: 0.3s; }
.archive-main-right .viewer-container .info-wrap.close { height: 0% !important; }

.archive-main-right .viewer-container .info-wrap .separator { position: absolute; width: 100%; border-top: 0.0625rem solid #A5B9B6; z-index: 20; }

/* .archive-main-right .viewer-container .info-wrap .separator .toolbar { display: flex; justify-content: center; position: absolute; bottom: 1.5rem; left: 50%; transform: translate(-50%, 0); z-index: 32; pointer-events: none; } */
.archive-main-right .viewer-container .info-wrap .separator .toolbar { display: flex; justify-content: center; position: absolute; bottom: 2.4rem; left: 50%; transform: translate(-50%, 0); z-index: 32; pointer-events: none; }
.archive-main-right .viewer-container .info-wrap .separator .toolbar .toolbar-container { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: auto; height: 1.6rem; padding-inline: 0.5rem; border-radius: 0.5rem; background: #f9f9fa; box-shadow: 0 0.0625rem 0 #b8b8b8; transition: opacity 0.3s linear; pointer-events: all; }
.archive-main-right .viewer-container .info-wrap .separator .toolbar .toolbar-container .btn { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin: 0.125rem 0.0625rem; border: none; border-radius: 0.125rem; }
.archive-main-right .viewer-container .info-wrap .separator .toolbar .toolbar-container .btn.disabled { opacity: 0.5; }
.archive-main-right .viewer-container .info-wrap .separator .toolbar .toolbar-container .btn:not(.disabled):hover { background: #dddedf; cursor: pointer; }
.archive-main-right .viewer-container .info-wrap .separator .toolbar .toolbar-container .btn .image { position: absolute; display: inline-block; width: 1rem; height: 1rem; opacity: 0.7; pointer-events: none; }
.archive-main-right .viewer-container .info-wrap .separator .toolbar .toolbar-container .btn.prev-btn .image { background: url('/main/img/archive/toolbar-prev.svg') no-repeat center/contain; }
.archive-main-right .viewer-container .info-wrap .separator .toolbar .toolbar-container .btn.next-btn .image { background: url('/main/img/archive/toolbar-next.svg') no-repeat center/contain; }

.archive-main-right .viewer-container .info-wrap .separator .toggle-btn { display: flex; align-items: center; justify-content: center; gap: 0.25rem; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); padding: 0.125rem 0.25rem; background: #E9EEED; border: 0.0625rem solid #A5B9B6; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; transition: 0.2s; }
.archive-main-right .viewer-container .info-wrap .separator .toggle-btn .image { width: 0.5rem; height: 0.5rem; background: url('/main/img/archive/toggle_bottom_darkgreen.svg') no-repeat center/contain; transition: 0.2s; pointer-events: none; transform: rotate(0deg); }
.archive-main-right .viewer-container .info-wrap .separator .toggle-btn .text { color: #1E5149; transition: 0.2s; }
.archive-main-right .viewer-container .info-wrap.close .separator .toggle-btn .image { transform: rotate(180deg); }
.archive-main-right .viewer-container .info-wrap .separator .toggle-btn:hover { cursor: pointer; background: #bccbc8; }
.archive-main-right .viewer-container .info-wrap .separator .toggle-btn:hover .image { scale: 1.25; }

.archive-main-right .viewer-container .info-wrap .metadata { display: none; width: 100%; height: fit-content; border-top: 0.0625rem solid #a5b9b6; position: relative; overflow-x: hidden; overflow-y: scroll; transition: 0.3s; }
.archive-main-right .viewer-container .info-wrap .metadata .metadata-item-wrap { display: flex; flex-direction: column; justify-content: center; width: calc(100% - 1.75rem); margin: 0 0.75rem 0 1rem; }
.archive-main-right .viewer-container .info-wrap .metadata .metadata-item-wrap .wrap { display: flex; justify-content: space-between; align-items: center; gap: 5rem; width: 100%; height: 2.25rem; }
.archive-main-right .viewer-container .info-wrap .metadata .metadata-item-wrap .wrap .item { display: flex; align-items: center; gap: 1rem; width: 100%; height: 100%; border-bottom: 0.0625rem solid #ddd; }
.archive-main-right .viewer-container .info-wrap .metadata .metadata-item-wrap .wrap.line2 .item,
.archive-main-right .viewer-container .info-wrap .metadata .metadata-item-wrap .wrap.line3 .item { width: 50% !important; }
.archive-main-right .viewer-container .info-wrap .metadata .metadata-item-wrap .wrap .item .key { display: flex; justify-content: space-between; white-space: nowrap; color: #777; min-width: 3rem; max-width: 3rem; }
.archive-main-right .viewer-container .info-wrap .metadata .metadata-item-wrap .wrap .item .key span { flex: 0 0 auto; }
.archive-main-right .viewer-container .info-wrap .metadata .metadata-item-wrap .wrap .item .value-wrap { display: flex; justify-content: space-between; align-items: center; width: calc(100% - 4rem); height: 100%; }
.archive-main-right .viewer-container .info-wrap .metadata .metadata-item-wrap .wrap .item .value-wrap .value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archive-main-right .viewer-container .info-wrap .metadata .metadata-item-wrap .wrap .item .btn { display: flex; align-items: center; height: 1.25rem; outline: 0.0625rem solid #aaa; border-radius: 0.25rem; padding: 0.125rem 0.25rem; transition: 0.3s; }
.archive-main-right .viewer-container .info-wrap .metadata .metadata-item-wrap .wrap .item .btn .text { transition: 0.3s; }
.archive-main-right .viewer-container .info-wrap .metadata .metadata-item-wrap .wrap .item .btn:hover { background: #000; cursor: pointer; }
.archive-main-right .viewer-container .info-wrap .metadata .metadata-item-wrap .wrap .item .btn:hover .text { color: #fff; }

.archive-main-right .viewer-container .info-wrap .memo { display: flex; flex-direction: column; flex: 1; width: 100%; min-height: 0; transition: 0.3s; }
.archive-main-right .viewer-container .info-wrap.close .memo { opacity: 0; }
.archive-main-right .viewer-container .info-wrap .memo .header { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 2.25rem; min-height: 2.25rem; padding: 0 1rem; }
.archive-main-right .viewer-container .info-wrap .memo .header .title { color: #777; }
.archive-main-right .viewer-container .info-wrap .memo .header .wrap { display: flex; align-items: center; }
.archive-main-right .viewer-container .info-wrap .memo .header .wrap .message { font-size: 0.75rem; color: #666; margin-right: 0.5rem; opacity: 0; transition: 1s; }
.archive-main-right .viewer-container .info-wrap .memo .header .wrap .btn { display: flex; align-items: center; height: 1.25rem; outline: 0.0625rem solid #aaa; border-radius: 0.25rem; padding: 0.125rem 0.25rem; transition: 0.3s; }
.archive-main-right .viewer-container .info-wrap .memo .header .wrap .btn:hover { cursor: pointer; background: #000; }
.archive-main-right .viewer-container .info-wrap .memo .header .wrap .btn .text { font-size: 0.75rem; pointer-events: none; }
.archive-main-right .viewer-container .info-wrap .memo .header .wrap .btn:hover .text { color: #fff; }
.archive-main-right .viewer-container .info-wrap .memo .header .wrap > div:not(.text) { margin-left: 0.625rem; }

.archive-main-right .viewer-container .info-wrap .memo .body { display: flex; flex: 1; width: 100%; min-height: 0; padding: 0 1rem 0.5rem 1rem; }
.archive-main-right .viewer-container .info-wrap .memo .body .wrap { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border: 0.0625rem solid #ddd; border-radius: 0.25rem; position: relative; }
.archive-main-right .viewer-container .info-wrap .memo .body .wrap .message { position: absolute; color: #aaa; font-size: 0.875rem; font-weight: 300; pointer-events: none; z-index: 20; }
.archive-main-right .viewer-container .info-wrap .memo .body .wrap .textarea { width: 100%; height: 100%; padding: 0.125rem 0.25rem 0.25rem 0.25rem; resize: none; border: none; border-radius: 0.25rem; color: #ff3d00; font-size: 0.875rem; line-height: 1rem; background: transparent; z-index: 30; }
.archive-main-right .viewer-container .info-wrap .memo .body .wrap .textarea:disabled { color: #000; }

.archive-main-right .viewer-container .viewer-progress { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.25rem; width: 100%; height: 100%; background: #fff; position: absolute; z-index: 31; }
.archive-main-right .viewer-container .viewer-progress .text { color: #111; font-size: 0.875rem; font-weight: 500; }
.archive-main-right .viewer-container .viewer-progress .wrap { display: flex; justify-content: center; align-items: center; width: 100%; height: max-content; position:relative; }
.archive-main-right .viewer-container .viewer-progress .wrap .bar { position: relative; width: 16rem; height: 0.5rem; border: 0.0625rem solid #ccc; border-radius: 0.25rem; overflow: hidden; }
.archive-main-right .viewer-container .viewer-progress .wrap .fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center; will-change: transform; background: #03aefc; }

/* AI 요약 */
.archive-main-right .viewer-container .info-wrap .memo .header .wrap .btn .ai-start { height: 1.25rem; }

/* 미리보기 10페이지 표시 제한 - 가상 스크롤바 */
.fake-scrollbar { position: absolute; top: 0; right: 0; width: 4px; height: 100%; z-index: 10; background: #383838; pointer-events: none; }
.fake-thumb { position: absolute; left: 0; width: 100%; background: #999; border-radius: 16px; cursor: pointer; pointer-events: auto; }
.fake-thumb:hover { background: #666; }

/* markdown css */
.markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
}

@media (max-width: 767px) { .markdown-body { padding: 15px;}}



/* 휴지통 모달 */
.recycle-bin-modal { display: none; justify-content: center; align-items: center; position: absolute; top: 0; z-index: 60; width: 100%; height: 100%; background: #00000099; }
.recycle-bin-modal .modal-wrap { position: relative; background: #fff; margin: auto; border-radius: 0.25rem; }
.recycle-bin-modal .modal-wrap div,
.recycle-bin-modal .modal-wrap input,
.recycle-bin-modal .modal-wrap textarea { font-size: 0.875rem; }

.recycle-bin-modal .modal-wrap .modal-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 0.5rem 0 1rem; border-bottom: 0.0625rem solid #aaa; }
.recycle-bin-modal .modal-wrap .modal-header > .title { display: flex; justify-content: space-between; align-items: center; flex: 1; min-width: 0; }

.recycle-bin-modal .modal-wrap .modal-header > .title .left-wrap { display: flex; align-items: center; gap: 0.4rem; }
.recycle-bin-modal .modal-wrap .modal-header > .title .left-wrap .title-wrap { display: flex; align-items: center; gap: 0.5rem; }
.recycle-bin-modal .modal-wrap .modal-header > .title .left-wrap .title-wrap .text { font-weight: bold; }
.recycle-bin-modal .modal-wrap .modal-header > .title .left-wrap .title-wrap .users-count { color: #777; font-size: 0.75rem; }
.recycle-bin-modal .modal-wrap .modal-header > .title .left-wrap .btn { display: none; align-items: center; padding: 0.125rem 0.25rem; border: 0.0625rem solid #aaa; border-radius: 0.25rem; transition: 0.3s; }
.recycle-bin-modal .modal-wrap .modal-header > .title .left-wrap .btn .text { color: #111; font-size: 0.75rem; pointer-events: none; }
.recycle-bin-modal .modal-wrap .modal-header > .title .left-wrap .btn:hover { cursor: pointer; background: #000; }
.recycle-bin-modal .modal-wrap .modal-header > .title .left-wrap .btn:hover .text { color: #fff; }

.recycle-bin-modal .modal-wrap .modal-header > .title .right-wrap { display: flex; align-items: center; gap: 0.5rem; }
.recycle-bin-modal .modal-wrap .modal-header > .title .right-wrap .project-manager-title { color: #777; font-size: 0.75rem; }
.recycle-bin-modal .modal-wrap .modal-header > .title .right-wrap .project-manager-name { font-weight: bold; }
.recycle-bin-modal .modal-wrap .modal-header > .close { width: 1rem; height: 1rem; background: url('/main/img/archive/close.svg') no-repeat center/contain; cursor: pointer; transition: 0.2s; }
.recycle-bin-modal .modal-wrap .modal-header > .close:hover { scale: 1.5; }

.recycle-bin-modal .modal-wrap .modal-body { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }

.recycle-bin-modal .modal-wrap .modal-body > .recycle-bin-wrap { position: relative; width: 90vw; height: 80vh; overflow: hidden; }
.recycle-bin-modal .modal-wrap .modal-body > .recycle-bin-wrap .list-container { display: flex; }



/* 아카이브 모달 */
.archive-modal { display: none; justify-content: center; align-items: center; position: absolute; z-index: 61; width: 100%; height: 100%; background: #00000099; gap: 0.5rem }
.archive-modal > .wrap { display: flex; gap: 0.5rem; }
.archive-modal > .wrap .modal-wrap { position: relative; background: #fff; border-radius: 0.25rem; }
.archive-modal > .wrap .modal-wrap div,
.archive-modal > .wrap .modal-wrap input,
.archive-modal > .wrap .modal-wrap textarea { font-size: 0.875rem; }

.archive-modal > .wrap .modal-wrap .modal-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 0.5rem 0 1rem; border-bottom: 0.0625rem solid #aaa; }
.archive-modal > .wrap .modal-wrap .modal-header > .title { display: flex; justify-content: space-between; align-items: center; flex: 1; min-width: 0; }

.archive-modal > .wrap .modal-wrap .modal-header > .title .left-wrap { display: flex; align-items: center; gap: 0.4rem; }
.archive-modal > .wrap .modal-wrap .modal-header > .title .left-wrap .title-wrap { display: flex; align-items: center; gap: 0.5rem; }
.archive-modal > .wrap .modal-wrap .modal-header > .title .left-wrap .title-wrap .text { font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.archive-modal > .wrap .modal-wrap .modal-header > .title .left-wrap .title-wrap .users-count { color: #777; font-size: 0.75rem; }
.archive-modal > .wrap .modal-wrap .modal-header > .title .left-wrap .btn { display: none; align-items: center; padding: 0.125rem 0.25rem; border: 0.0625rem solid #aaa; border-radius: 0.25rem; transition: 0.3s; }
.archive-modal > .wrap .modal-wrap .modal-header > .title .left-wrap .btn .text { color: #111; font-size: 0.75rem; pointer-events: none; }
.archive-modal > .wrap .modal-wrap .modal-header > .title .left-wrap .btn:hover { cursor: pointer; background: #000; }
.archive-modal > .wrap .modal-wrap .modal-header > .title .left-wrap .btn:hover .text { color: #fff; }

.archive-modal > .wrap .modal-wrap .modal-header > .title .right-wrap { display: flex; align-items: center; gap: 0.5rem; }
.archive-modal > .wrap .modal-wrap .modal-header > .title .right-wrap .project-manager-title { color: #777; font-size: 0.75rem; }
.archive-modal > .wrap .modal-wrap .modal-header > .title .right-wrap .project-manager-name { font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.archive-modal > .wrap .modal-wrap .modal-header > .close { width: 1rem; height: 1rem; background: url('/main/img/archive/close.svg') no-repeat center/contain; cursor: pointer; transition: 0.2s; }
.archive-modal > .wrap .modal-wrap .modal-header > .close:hover { scale: 1.5; }

.archive-modal > .wrap .modal-wrap .modal-body { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }

.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap { flex-direction: column; width: 50rem; height: 37.5rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .user-item-wrap { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0 0.75rem 0 1rem; overflow-y: scroll; }
.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .user-item-wrap .user-item { display: flex; align-items: center; width: 100%; padding: 0.625rem 0; position: relative; border-bottom: 0.0625rem solid #eee; }
.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .user-item-wrap .user-item.me { border-bottom: 0.0625rem solid #789792; }
.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .user-item-wrap .user-item .profile-image { flex: 0 0 2rem; border-radius: 50%; overflow: hidden; width: 2rem; height: 2rem; margin-left: 0.25rem; object-fit: cover; }
.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .user-item-wrap .user-item .wrap { display: flex; flex-direction: column; gap: 0.0625rem; width: calc(100% - 2rem - 0.5rem); padding-left: 1rem; margin-right: 0.25rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .user-item-wrap .user-item .wrap .top-wrap { display: flex; align-items: center; gap: 0.5rem; width: 100%; height: 1.25rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .user-item-wrap .user-item .wrap .bottom-wrap { width: 100%; }
/* .archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .user-item-wrap .user-item .wrap .bottom-wrap .cur-path { width: 100%; font-size: 0.75rem; color: #999; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } */
.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .user-item-wrap .user-item .wrap .bottom-wrap .cur-path { width: 100%; font-size: 0.75rem; color: #999; word-break: break-all; transition: 0.3s; }

.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .btn-wrap { display: flex; justify-content: center; align-items: center; width: 100%; padding: 0.5rem 0; border-top: 0.0625rem solid #aaa; }
.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .btn-wrap .logout-btn { display: flex; justify-content: center; align-items: center; width: 9.375rem; height: 2.25rem; border: 0.0625rem solid #aaa; border-radius: 0.25rem; transition: 0.3s; }
.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .btn-wrap .logout-btn .image { width: 1rem; height: 1rem; background: url('/main/img/archive/logout_111.svg') no-repeat center/contain; pointer-events: none; }
.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .btn-wrap .logout-btn .text { color: #111; font-size: 0.875rem; font-weight: bold; pointer-events: none; }
.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .btn-wrap .logout-btn:hover { cursor: pointer; background: #000; }
.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .btn-wrap .logout-btn:hover .image { background: url('/main/img/archive/logout_fff.svg') no-repeat center/contain; }
.archive-modal > .wrap .modal-wrap .modal-body > .connected-users-wrap .btn-wrap .logout-btn:hover .text { color: #fff; }

.archive-modal > .wrap .modal-wrap .modal-body > .manual-wrap { justify-content: center; align-items: center; position: relative; width: 75vw; height: 90vh; padding: 1rem; overflow: hidden; }
.archive-modal > .wrap .modal-wrap .modal-body > .manual-wrap img { width: 100%; height: 100%; object-fit: contain; }
.archive-modal > .wrap .modal-wrap .modal-body > .manual-wrap .manual-swiper.swiper { width: 100%; height: 100%; position: relative; }
.archive-modal > .wrap .modal-wrap .modal-body > .manual-wrap .manual-swiper.swiper img { width: 100%; height: 100%; object-fit: contain; }
.archive-modal > .wrap .modal-wrap .modal-body > .manual-wrap .manual-swiper.swiper .manual-swiper-wrap { display: flex; align-items: center; }
.archive-modal > .wrap .modal-wrap .modal-body > .manual-wrap .manual-swiper.swiper .button-prev,
.archive-modal > .wrap .modal-wrap .modal-body > .manual-wrap .manual-swiper.swiper .button-next { position: absolute; top: 55%; width: 2rem; height: 2rem; transform: translateY(-50%); background-size: cover; cursor: pointer; z-index: 10; border: 0.0625rem solid #ddd; border-radius: 1rem; background-color: #fff; } 
.archive-modal > .wrap .modal-wrap .modal-body > .manual-wrap .manual-swiper.swiper .button-prev { left: 0%; margin-left: 0.5rem; background-image: url('/main/img/overview/prev.svg'); }
.archive-modal > .wrap .modal-wrap .modal-body > .manual-wrap .manual-swiper.swiper .button-next { right: 0%; margin-right: 0.5rem; background-image: url('/main/img/overview/next.svg'); }
.archive-modal > .wrap .modal-wrap .modal-body > .manual-wrap .manual-swiper.swiper .button-prev::after,
.archive-modal > .wrap .modal-wrap .modal-body > .manual-wrap .manual-swiper.swiper .button-next::after { display: none; } 
.archive-modal > .wrap .modal-wrap .modal-body > .manual-wrap .manual-swiper.swiper .swiper-pagination-bullet { width: 1.5rem; height: 1.5rem; text-align: center; line-height: 1.5rem; font-size: 1rem; color: #000; opacity: 1; background: #bccbc8; }
.archive-modal > .wrap .modal-wrap .modal-body > .manual-wrap .manual-swiper.swiper .swiper-pagination-bullet-active { color: #fff; background: #1e5149; }

/* .archive-modal > .wrap .modal-wrap .modal-body > .recycle-bin-wrap { position: relative; width: 70vw; height: 80vh; overflow: hidden; }
.archive-modal > .wrap .modal-wrap .modal-body > .recycle-bin-wrap .list-container { display: flex; } */

.archive-modal > .wrap .modal-wrap .modal-body > .size-wrap { position: relative; width: 72rem; height: 45rem; overflow: hidden; }
.archive-modal > .wrap .modal-wrap .modal-body > .size-wrap .chart { width: inherit; height: inherit; }
.archive-modal > .wrap .modal-wrap .modal-body > .size-wrap .text { position: absolute; right: 1.8rem; bottom: 1.8rem; font-size: 1rem; font-weight: 600; color: #777; }

.archive-modal > .wrap .modal-wrap .modal-body > .log-wrap { display: flex; flex-direction: column; width: 62.5rem; height: 37.5rem; opacity: 0; transition: 0.3s; }
.archive-modal > .wrap .modal-wrap .modal-body > .log-wrap .log-item-wrap { display: flex; flex-direction: column; align-items: center; }
.archive-modal > .wrap .modal-wrap .modal-body > .log-wrap .log-item-wrap.log-header { width: calc(100% - 1rem); border-bottom: 0.0625rem solid #ccc ; padding: 0.2rem 0.5rem; margin: 0 0.5rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .log-wrap .log-item-wrap.log-body { width: 100%; height: 100%; overflow-y: scroll; padding: 0 0.75rem 0 1rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .log-wrap .log-item-wrap .log-item { display: flex; align-items: center; width: 100%; gap: 0.5rem; padding: 0.3rem 0.25rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .log-wrap .log-item-wrap.log-header .log-item div .text { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .log-wrap .log-item-wrap.log-body .log-item { border-bottom: 0.0625rem solid #eee; animation: var(--log-highlight); }
.archive-modal > .wrap .modal-wrap .modal-body > .log-wrap .log-item-wrap.log-body .log-item:last-child { border-bottom: 0.0625rem solid transparent; }
.archive-modal > .wrap .modal-wrap .modal-body > .log-wrap .log-item-wrap.log-body .log-item div .text { font-size: 0.75rem; font-weight: 300; letter-spacing: -0.0175rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .log-wrap .log-item-wrap.log-body .log-item .log { display: flex; flex-direction: column; flex: 1; min-width: 0; }
/* .archive-modal > .wrap .modal-wrap .modal-body > .log-wrap .log-item-wrap.log-body .log-item .log .text { line-height: 1.5; word-break: break-all; } */
.archive-modal > .wrap .modal-wrap .modal-body > .log-wrap .log-item-wrap.log-body .log-item .log .text { line-height: 1.5; word-break: break-word; }

/* 활동로그 필터 모달 */
.archive-modal > .wrap .log-filter { flex-direction: column; background: white; z-index: 99; border-radius: 0.25rem; }
.archive-modal > .wrap .log-filter div ._button-xsmall { display: flex; padding: 0.125rem 0.25rem; background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 300; cursor: pointer; }
.archive-modal > .wrap .log-filter div ._button-xsmall:hover { background-color: var(--primary-lv-0, #E9EEED); }

.archive-modal > .wrap .log-filter .head { display: flex; align-items: center; justify-content: space-between; height: 2.25rem; padding: 0 0.5rem 0 1rem; border-bottom: 0.0625rem solid #aaa; }
.archive-modal > .wrap .log-filter .head .title._h3 { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }

.archive-modal > .wrap .log-filter .body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 1rem; }
.archive-modal > .wrap .log-filter .body .subtitle { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }

.archive-modal > .wrap .log-filter .body .log-date { display: flex; flex-direction: column; gap: 0.25rem; padding-bottom: 0.5rem; border-bottom: 0.0625rem solid #ccc; }
.archive-modal > .wrap .log-filter .body .log-date .log-date-wrap { display: flex; align-items: center; gap: 0.5rem; }
.archive-modal > .wrap .log-filter .body .log-date .log-date-wrap .category { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777; }
.archive-modal > .wrap .log-filter .body .log-date .log-date-wrap input[type="date"] { flex: 1; position: relative; font-size:0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; text-align: center; }
.archive-modal > .wrap .log-filter .body .log-date .log-date-wrap input[type="date"]:hover { background-color: var(--primary-lv-0, #E9EEED); }
.archive-modal > .wrap .log-filter .body .log-date .log-date-wrap input[type="date"]::-webkit-clear-button, .log-filter .body .log-date .wrap input[type="date"]::-webkit-inner-spin-button { display: none; }
.archive-modal > .wrap .log-filter .body .log-date .log-date-wrap input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent; cursor: pointer; }

.archive-modal > .wrap .log-filter .body .log-user { display: flex; flex-direction: column; gap: 0.25rem; padding-bottom: 0.5rem; border-bottom: 0.0625rem solid #ccc; }
.archive-modal > .wrap .log-filter .body .log-user select { border: 0.0625rem solid #ddd; border-radius: 0.25rem; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; color:#111; width: 7.5rem; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url(/main/img/officialDoc/icon-down-sign-aaa.svg) no-repeat center / contain; background-position: right 0.25rem center; background-size: 1rem; }
.archive-modal > .wrap .log-filter .body .log-user select:focus { outline: 0.0625rem solid #111; }
.archive-modal > .wrap .log-filter .body .log-user .custom-select-wrap { position: relative; font-size: 0.75rem; }
.archive-modal > .wrap .log-filter .body .log-user .custom-select-wrap .custom-select-display { border: 0.0625rem solid #ddd; border-radius: 0.25rem; padding: 0.0625rem 0.5rem; font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #111; background: #fff url(/main/img/officialDoc/icon-down-sign-aaa.svg) no-repeat right 0.25rem center; background-size: 1rem; cursor: pointer; }
.archive-modal > .wrap .log-filter .body .log-user .custom-select-wrap.focused .custom-select-display { outline: 0.0625rem solid #111; }
.archive-modal > .wrap .log-filter .body .log-user .custom-select-wrap .custom-select-list { display: none; flex-direction: column; position: absolute; top: calc(100% + 0.25rem); left: 0; width: 100%; max-height: 22.3rem; overflow-y: auto; background: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.05); z-index: 9999; padding: 0; margin: 0; list-style: none; }
.archive-modal > .wrap .log-filter .body .log-user .custom-select-wrap .custom-select-list li { padding: 8px 2px; cursor: pointer; }
.archive-modal > .wrap .log-filter .body .log-user .custom-select-wrap .custom-select-list li:hover { background: #eee; }

.archive-modal > .wrap .log-filter .body .log-activity { display: flex; flex-direction: column; }
.archive-modal > .wrap .log-filter .body .log-activity .category { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777; padding-top: 0.25rem; }
.archive-modal > .wrap .log-filter .body .log-activity .head-group { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; }
.archive-modal > .wrap .log-filter .body .log-activity .head-group .button-wrap { display: flex; gap: 0.25rem; }
.archive-modal > .wrap .log-filter .body .log-activity label { padding: 0.125rem 0.25rem; display: flex; align-items: center; gap: 0.25rem; cursor: pointer; border-radius: 0.25rem; }
.archive-modal > .wrap .log-filter .body .log-activity label:hover { background-color: var(--primary-lv-0, #E9EEED); }
.archive-modal > .wrap .log-filter .body .log-activity label input[type="checkbox"] { display: none; }
.archive-modal > .wrap .log-filter .body .log-activity label .--checkbox { display: inline-block; width: 0.875rem; height: 0.875rem; background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.125rem; position: relative; vertical-align: middle; cursor: pointer; }
.archive-modal > .wrap .log-filter .body .log-activity label input[type="checkbox"]:checked+.--checkbox::after { content: "✔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -45%); font-size: 0.75rem; color: #fff; }
.archive-modal > .wrap .log-filter .body .log-activity label input[type="checkbox"]:checked+.--checkbox { background: var(--primary-lv-6, #1E5149); border-color: var(--primary-lv-6, #1E5149); }
.archive-modal > .wrap .log-filter .body .log-activity label span { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; }

.archive-modal > .wrap .log-filter .foot { display: flex; align-items: center; justify-content: center; padding: 0.25rem 1rem 1rem 1rem; }
.archive-modal > .wrap .log-filter .foot ._button-medium { display: flex; padding: 0.25rem 0; background-color: var(--primary-lv-6, #1E5149); border-radius: 0.25rem; width: 100%; justify-content: center; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; cursor: pointer; color: #fff; }
.archive-modal > .wrap .log-filter .foot ._button-medium:hover { background-color: var(--primary-lv-7, #1B443D); }

.archive-modal > .wrap .modal-wrap .modal-body > .text-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.6; }
.archive-modal > .wrap .modal-wrap .modal-body > .text-wrap span { font-size: 0.875rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .text-wrap span:not(:last-child) { padding-bottom: 0.5rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .text-wrap .warn { color: #f21d0d; font-weight: bold; }

.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .warn { display: flex; flex-direction: column; gap: 0.3rem; color: #f21d0d; font-weight: bold; text-align: center; white-space: pre; animation: vibration 0.1s; animation-iteration-count: 6; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .warn span { font-size: inherit; }

.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .top-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .top-wrap .info { display: flex; justify-content: space-between; gap: 5rem; width: 100%; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .top-wrap .info .notice-text { display: flex; justify-content: center; white-space: pre-wrap; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .top-wrap .info .notice-text span { font-size: inherit; font-weight: bold; color: #49a7ff; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .top-wrap .info .legend { display: flex; justify-content: center; gap: 2rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .top-wrap .info .legend .legend-item { display: flex; gap: 0.5rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .top-wrap .info .legend .legend-item .sign { background: #39c951; border: 0.15rem solid #2baa3d; width: 0.8rem; min-width: 0.8rem; max-width: 0.8rem; height: 0.8rem; min-height: 0.8rem; max-height: 0.8rem; border-radius: 1rem; pointer-events: none; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .top-wrap .info .legend .legend-item .sign.inactive { background: #f85656; border: 0.15rem solid #db4748; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .top-wrap .btn-wrap { display: flex; gap: 0.5rem; justify-content: center; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .top-wrap .btn-wrap .btn { display: flex; justify-content: center; align-items: center; gap: 0.5rem; width: 10rem; padding: 0.4rem 0.8rem; border: 0.0625rem solid #ccc; border-radius: 0.25rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .top-wrap .btn-wrap .btn.checked { background: #000; color: #fff; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .top-wrap .btn-wrap .btn:hover { outline: 0.15rem solid #000; cursor: pointer; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .top-wrap .btn-wrap .btn .radio { pointer-events: none; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .top-wrap .btn-wrap .btn .text { pointer-events: none; line-height: 1.2; }

.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .bottom-wrap { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; background: #e9eeed; border-radius: 0.25rem; outline: 0.0625rem solid #ccc; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .bottom-wrap .btn-wrap { display: flex; gap: 0.5rem; justify-content: center; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .bottom-wrap .btn-wrap .btn { background: #fff; padding: 0.2rem 0.4rem; border: 0.0625rem solid #ccc; border-radius: 0.25rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .bottom-wrap .btn-wrap .btn:hover { outline: 0.15rem solid #000; cursor: pointer; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .bottom-wrap .category-wrap { display: flex; justify-content: center; gap: 0.5rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .bottom-wrap .category-wrap .category-item { display: flex; flex-direction: column; align-items: center; max-height: 35rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .bottom-wrap .category-wrap .category-item .title { width: calc(100% - 1rem); padding: 0.25rem 0.5rem; margin: 0 0.5rem; border-bottom: 0.0625rem solid #ccc; font-weight: 500; text-align: center; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .bottom-wrap .category-wrap .category-item .project-item-wrap { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.25rem 0.25rem 0.25rem 0.5rem; overflow-x: hidden; overflow-y: scroll; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .bottom-wrap .category-wrap .category-item .project-item-wrap .project-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.4rem; background: #fff; border: 0.0625rem solid #ccc; border-radius: 0.25rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .bottom-wrap .category-wrap .category-item .project-item-wrap .project-item.selected { background: #000; color: #fff; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .bottom-wrap .category-wrap .category-item .project-item-wrap .project-item.current-project { color: #49a7ff; font-weight: bold; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .bottom-wrap .category-wrap .category-item .project-item-wrap .project-item.current-project.selected { color: #49a7ff; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .bottom-wrap .category-wrap .category-item .project-item-wrap .project-item .text { display: flex; gap: 0.5rem; pointer-events: none; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .bottom-wrap .category-wrap .category-item .project-item-wrap .project-item .sign { background: #39c951; border: 0.15rem solid #2baa3d; width: 0.8rem; min-width: 0.8rem; max-width: 0.8rem; height: 0.8rem; min-height: 0.8rem; max-height: 0.8rem; border-radius: 1rem; pointer-events: none; }
.archive-modal > .wrap .modal-wrap .modal-body > .project-list-wrap .bottom-wrap .category-wrap .category-item .project-item-wrap .project-item .sign.inactive { background: #f85656; border: 0.15rem solid #db4748; }


.archive-modal > .wrap .modal-wrap .modal-body > .input-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; }
.archive-modal > .wrap .modal-wrap .modal-body > .input-wrap .input-title { font-weight: bold; }
.archive-modal > .wrap .modal-wrap .modal-body > .input-wrap input { width: 30rem; padding: 0.3125rem; color: #ff3d00; outline: 0.0625rem solid #ccc; border-radius: 0.25rem; border: none; }
.archive-modal > .wrap .modal-wrap .modal-body > .input-wrap input:focus { outline: 0.125rem solid #414141; }
.archive-modal > .wrap .modal-wrap .modal-body > .input-wrap .warn { color: #f21d0d; font-weight: bold; text-align: center; white-space: pre; line-height: 1.2; animation: vibration 0.1s; animation-iteration-count: 6; }
.archive-modal > .wrap .modal-wrap .modal-body > .input-wrap textarea { width: 30rem; height: 10rem; padding: 0.3125rem; color: #ff3d00; outline: 0.0625rem solid #ccc; border-radius: 0.25rem; border: none; }
.archive-modal > .wrap .modal-wrap .modal-body > .input-wrap textarea:focus { outline: 0.125rem solid #414141; }

.archive-modal > .wrap .modal-wrap .modal-body > .input-wrap .edit-author-input-wrap { display: flex; align-items: center; gap: 0.5rem; border: 0.0625rem solid #ccc; border-radius: 0.25rem; padding: 0.25rem 0.5rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .input-wrap .edit-author-input-wrap:has(input:focus) { border: 0.0625rem solid #414141; }
.archive-modal > .wrap .modal-wrap .modal-body > .input-wrap .edit-author-input-wrap input { width: 10rem; padding: 0.125rem; outline: none }
.archive-modal > .wrap .modal-wrap .modal-body > .input-wrap .edit-author-input-wrap .separator { height: 1rem; border-left: 0.0625rem solid #ccc; }
.archive-modal > .wrap .modal-wrap .modal-body > .input-wrap .edit-author-input-wrap .search-btn { padding: 0.125rem; outline: 0.0625rem solid transparent; border-radius: 0.25rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .input-wrap .edit-author-input-wrap .search-btn .image { width: 1rem; height: 1rem; background: url('/main/img/archive/search.svg') no-repeat center/contain; pointer-events: none; }
.archive-modal > .wrap .modal-wrap .modal-body > .input-wrap .edit-author-input-wrap .search-btn:hover { cursor: pointer; outline: 0.0625rem solid #ccc; background: #ccc; }

.archive-modal > .wrap .modal-wrap .modal-body > .user-list-wrap { display: flex; flex-direction: column; border: 0.0625rem solid #ccc; border-radius: 0.25rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .user-list-wrap .user-item-wrap { display: flex; flex-direction: column; max-height: 30rem; overflow-y: scroll; }
/* 작성자 변경 선택 결과 숨김 */
/* .archive-modal > .wrap .modal-wrap .modal-body > .user-list-wrap .selected-user-item-wrap { display: none; flex-direction: column; border-top: 0.0625rem solid #ccc; }
.archive-modal > .wrap .modal-wrap .modal-body > .user-list-wrap .selected-user-item-wrap .text { display: flex; justify-content: center; padding-top: 0.5rem; font-weight: bold; } */
.archive-modal > .wrap .modal-wrap .modal-body > .user-list-wrap .user-item { display: flex; align-items: center; gap: 1rem; margin: 0 0.25rem 0 0.5rem; padding: 0.5rem 0.25rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .user-list-wrap .user-item:not(:last-child) { border-bottom: 0.0625rem solid #eee;}
.archive-modal > .wrap .modal-wrap .modal-body > .user-list-wrap .user-item .user-image { width: 3rem; height: 3rem; border: 0.0625rem solid #ddd; border-radius: 50%; object-fit: cover; pointer-events: none; }
.archive-modal > .wrap .modal-wrap .modal-body > .user-list-wrap .user-item .user-info { display: flex; flex-direction: column; height: 3rem; pointer-events: none; }
.archive-modal > .wrap .modal-wrap .modal-body > .user-list-wrap .user-item .user-info .user-company { display: flex; align-items: center; gap: 0.125rem; height: 50%;}
.archive-modal > .wrap .modal-wrap .modal-body > .user-list-wrap .user-item .user-info .user-company .user-company-icon { width: 1.5rem; height: 1.5rem; }
.archive-modal > .wrap .modal-wrap .modal-body > .user-list-wrap .user-item .user-info .user-company .user-company-text { font-size: 0.75rem; color: #777}
.archive-modal > .wrap .modal-wrap .modal-body > .user-list-wrap .user-item .user-info .user-name { display: flex; align-items: center; height: 50%; }
.archive-modal > .wrap .modal-wrap .modal-body > .user-list-wrap .user-item-wrap .user-item:hover { cursor: pointer; background: #e9eeed; }
.archive-modal > .wrap .modal-wrap .modal-body > .user-list-wrap .user-item-wrap .user-item.selected { background: #bccbc8; }

.archive-modal > .wrap .modal-wrap .modal-body > .btn-wrap { display: flex; flex-direction: row; }
.archive-modal > .wrap .modal-wrap .modal-body > .btn-wrap > div { width: 9.375rem; padding: 0.5rem; background: linear-gradient(180deg, #1e5149 0%, #12312c 100%); border-radius: 0.25rem; font-weight: bold; color: #fff; text-align: center; cursor: pointer; transition: 0.2s; }
.archive-modal > .wrap .modal-wrap .modal-body > .btn-wrap > div.disabled { background: #999; color: #ccc; }
.archive-modal > .wrap .modal-wrap .modal-body > .btn-wrap > div.cancel-btn { background: #fff; font-weight: normal; color: #000; border: 0.0625rem solid #e6e6e6; }
.archive-modal > .wrap .modal-wrap .modal-body > .btn-wrap > div:not(:last-child) { margin-right: 0.5rem; }
/* .archive-modal > .wrap .modal-wrap .modal-body .btn-wrap > div:hover { background: linear-gradient(180deg, #12312c 0%, #1e5149 100%); border-radius: 0.25rem; font-weight: bold; color: #fff; } */
.archive-modal > .wrap .modal-wrap .modal-body > .btn-wrap > div:hover { background: linear-gradient(0deg, #1e5149 0%, #12312c 100%); font-weight: bold; color: #fff; }
.archive-modal > .wrap .modal-wrap .modal-body > .btn-wrap > div.disabled:hover { background: #999; color: #ccc; cursor: not-allowed; }
.archive-modal > .wrap .modal-wrap .modal-body > .btn-wrap > div.cancel-btn:hover { background: #000; border-radius: 0.25rem; font-weight: bold; color: #fff; }

/* 아카이브 모달 내 좁은 영역, 넓은 영역 */
.narrow-area { height: 2.25rem; }
.narrow-area .btn { height: 1.25rem; outline: var(--main-border); border-radius: 0.25rem; }
.narrow-area .btn:hover { background: #ccc; cursor: pointer; }
.narrow-area .btn .image { width: 1rem; height: 1rem; pointer-events: none; }
.narrow-area .btn.disabled .image { filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(5546%) hue-rotate(195deg) brightness(114%) contrast(73%); }
.narrow-area .btn.disabled .text { color: #ddd; }
.narrow-area .btn.disabled:hover { background: none; cursor: not-allowed; }
.wide-area { height: calc(100% - 2.25rem); }



/* 권한설정 모달 */
.permission-modal { display: none; justify-content: center; align-items: center; position: absolute; top: 0; width: 100%; height: 100%; background: #00000099; z-index: 62; }
.permission-modal * { font-size: 0.875rem; }
.permission-modal .modal-header .header-user-num-wrap {display: flex; width: 50%; justify-content: center; align-items: center; gap: 0.25rem;}
.permission-modal .modal-wrap { position: relative; margin: auto; width: 52rem;}
.permission-modal .modal-wrap .modal-header { display: flex; align-items: center; position: relative; background: #fff; border-radius: 0.25rem 0.25rem 0 0; } 
.permission-modal .modal-wrap .header-tab { display: flex; width: 50%; height: 2.25rem; } 
.permission-modal .modal-wrap label { width: 100%; height: 2.25rem; display: flex; justify-content: center; align-items: center; font-size: 0.875rem; font-weight: 700; } 
.permission-modal .modal-wrap label img { margin-right: 0.25rem; } 
.permission-modal .modal-wrap .tab-input { display: none; } 
.permission-modal .modal-wrap .tab-input:first-child+.tab-label { border-radius: 0.25rem 0 0 0; }
.permission-modal .modal-wrap .tab-input:checked+.tab-label { color: #1E5149; border-bottom: 0.25rem solid #4B746D; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.permission-modal .modal-wrap .tab-input:not(:checked)+.tab-label { color: #111111; font-weight: 300; } 
.permission-modal .modal-wrap .tab-label { cursor: pointer; color: #111; font-weight: 500; } 
.permission-modal .modal-wrap img[alt="닫기"] { cursor: pointer; pointer-events: auto;} 
.permission-modal .modal-wrap .search-box { display: flex; padding: 0.5rem 0.5rem 0.5rem 1rem; border-left: 0.0625rem solid #ddd; border-bottom: 0.0625rem solid #ddd; background-color: #fff;}
.permission-modal .modal-wrap .search-box .wrap { display: flex; align-items: center; gap: 0.5rem; width: 100%; border-radius: 0.25rem; border: 0.0625rem solid #dddddd; padding: 0.25rem 0.5rem;}
.permission-modal .modal-wrap .search-box .wrap .search-image { width: 1rem; height: 1rem; cursor: pointer; pointer-events: auto}
.permission-modal .modal-wrap .search-box .wrap .search-input { border: none; outline: none; background: none; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; width: 100%;}
.permission-modal .modal-wrap .close { width: 1rem; height: 1rem; margin-right: 0.5rem; transition: 0.2s;}
.permission-modal .modal-wrap .close:hover { scale: 1.5;}
.permission-modal .modal-wrap .modal-body { display: flex; border-top: 0.0625rem solid rgb(221, 221, 221); }  
.permission-modal .modal-wrap .left { width: 100%; height: 40rem; background-color: #E9EEED; overflow-y: scroll; background-color: #fff; } 
.permission-modal .modal-wrap .left ul { width: 100%; background-color: rgb(255, 255, 255); position: relative; overflow: hidden;}
.permission-modal .modal-wrap .left li { list-style-type: none; padding-right: 0.5rem; align-items: center; width: 100%; display: flex; justify-content: space-between;}
.permission-modal .modal-wrap .left .dept-title label {width: fit-content;}
.permission-modal .modal-wrap .right { width: 100%; background: rgb(255, 255, 255); border-left: 0.0625rem solid rgb(221, 221, 221);}
.permission-modal .modal-wrap .select-list { height: 40rem; overflow-y: scroll; padding-right: 0.5rem;} 
.permission-modal .modal-wrap .select-list li {list-style-type: none;}
.permission-modal .modal-wrap .user-wrap { display: flex; width: 100%; align-items: center; cursor: pointer; padding: 0.5rem 0.5rem 0.5rem 0; border-bottom: 0.0625rem solid #eee; gap: 1rem;}
.permission-modal .modal-wrap .left .user-container .user-wrap { width: calc(100% - 2rem); margin-left : 2rem}
.permission-modal .modal-wrap .right .user-wrap {margin-left: 0.5rem;}
.permission-modal .modal-wrap .user-wrap .user-img img { border-radius: 1.25rem; width: 100%; height: 100%; object-fit: cover; border: 0.0625rem solid #ddd;}
.permission-modal .modal-wrap .user-wrap.disabled{cursor: not-allowed; opacity: 0.5;}
.permission-modal .modal-wrap .user-container .user-li:hover{ cursor: pointer; background: #cacaca80;}
.permission-modal .modal-wrap .user-img { width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; border-radius: 1.5rem; padding: 0.125rem;} 
.permission-modal .modal-wrap .user-dept { font-size: 0.75rem; color: #999; } 
.permission-modal .modal-wrap .user-permission { display: flex; justify-content: center; align-items: center; margin-left: auto; } 
.permission-modal .modal-wrap .user-out { background-color: rgb(255, 255, 255); border: 0.0625rem solid rgb(221, 221, 221); border-radius: 0.25rem; width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; padding: 0.125rem;} 
.permission-modal .modal-wrap .modal-footer { display: flex; justify-content: center; gap: 0.5rem; padding: 1rem 0; background: #ffffff; border-top: 0.0625rem solid #ddd; border-radius: 0 0 0.25rem 0.25rem; } 
.permission-modal .modal-wrap .cancel-btn { width: 10rem; height: 2.25rem; font-size: 0.875rem; font-weight: 500; display: flex; justify-content: center; align-items: center; border: 0.0625rem solid rgb(221, 221, 221); border-radius: 0.25rem; cursor: pointer;}
.permission-modal .modal-wrap .submit-btn { width: 10rem; height: 2.25rem; font-size: 0.875rem; font-weight: 500; display: flex; justify-content: center; align-items: center; color: rgb(255, 255, 255); background-color: #1e5149; border-radius: 0.25rem; cursor: pointer;}
.permission-modal .modal-wrap .company-title { display: flex; background-color: #d2dcdb; height: 2.5rem; padding-left: 1rem; margin: 0 !important; border-bottom: 0.0625rem solid #a5b9b6;}
.permission-modal .modal-wrap .company-title .dept-name { color: #1e5149;}
.permission-modal .modal-wrap .company-title label { width: 100%; justify-content: flex-start; gap: 0.5rem;}
.permission-modal .modal-wrap .company-toggle { display: flex; justify-content: center; align-items: center; margin-left: auto; cursor: pointer;}
.permission-modal .modal-wrap .dept-title { display: flex; background-color: #E9EEED; height: 2.5rem; padding-left: 2rem; border-bottom: 0.0625rem solid #D2DCDB; margin: 0px !important;}
.permission-modal .modal-wrap .dept-title .dept-name { color: rgb(17, 17, 17); font-weight: 300;}
.permission-modal .modal-wrap .dept-title label { width: 100%; justify-content: flex-start; gap: 0.25rem;}
.permission-modal .modal-wrap .dept-container {overflow-y: hidden;}
.permission-modal .modal-wrap li .toggle-wrap {display: flex; width: 100%; justify-content: space-between; align-items: center; margin-left: 0.5rem; font-weight: 600;}
.permission-modal .modal-wrap .user-container {overflow-y: hidden;}
.permission-modal .user-path { display: flex; align-items: center; gap: 0.125rem; width: 100%;}
.permission-modal .user-logo { width: 1.5rem; height: 1.5rem;}
.permission-modal .user-team { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;}
.permission-modal .user-info { flex-grow: 1;}
.permission-modal .modal-wrap .left .search-result-container li {margin-left: 0.5rem;}
.permission-modal .modal-wrap .left .search-box .search-image img { user-select: auto;}
.permission-modal .modal-wrap .right li:hover {cursor: pointer; background-color: #eee;}
.permission-modal .modal-wrap .right .user-wrap:hover {background-color: #eee;}
.permission-modal .modal-wrap li:hover .toggle-wrap:hover { outline: 0.125rem solid #789792; outline-offset: 0.125rem; border-radius: 0.25rem;}
.permission-modal .modal-wrap li:hover .custom-checkbox:hover { transform: scale(1.2); transition: transform 0.15s ease;}
.permission-modal .modal-wrap li:hover {cursor: pointer; background-color: #CAD2D1;}
.permission-modal .modal-wrap li input {cursor: pointer;}
.permission-modal .modal-wrap li .custom-checkbox { display: inline-flex; align-items: center; cursor: pointer;}
.permission-modal .modal-wrap li .custom-checkbox input { display: none; }
.permission-modal .modal-wrap li .custom-checkbox .checkmark { width: 1rem; height: 1rem; outline: 0.0625rem solid #ddd; border-radius: 0.25rem; position: relative; background-color: #fff;}
.permission-modal .modal-wrap li .custom-checkbox .checkmark.indeterminate::after { display: block; z-index: 999; content: ''; position: absolute; width: 1rem; height: 1rem; background-image: url('/main/img/permission/icon__indeterminate--primary-lv-6.svg'); background-repeat: no-repeat; background-position: center; background-size: contain;}
.permission-modal .modal-wrap li .custom-checkbox input:checked+.checkmark::after { display: block; z-index: 999; content: ''; position: absolute; width: 1rem; height: 1rem; background-image: url('/main/img/permission/icon__checked--primary-lv-6.svg'); background-repeat: no-repeat; background-position: center; background-size: contain;}

.permission-modal .header-toolbar {display: flex; width: 50%; justify-content: space-between; align-items: center;}
.permission-modal #help-btn {display: flex; padding: 0.125rem 0.25rem; border: 0.0625rem solid #aaa; border-radius: 0.25rem; font-size: 0.75rem; align-items: center; gap: 0.25rem; cursor: pointer;}
.permission-modal .selected-user-num { font-size: 0.75rem; color: #777; gap: 0.5rem;}
.permission-modal .modal-background {position:absolute; display:none; width: 100%; height: 100%; background: #00000044; z-index: 1;}
.permission-modal .--text__color-dahong { color: var(--color-dahong); font-weight: 500; font-size: 0.75rem; user-select: auto;}
.permission-modal .modal-permission-help { position: absolute; top: 50%; left: 50%; display: none; transform: translate(-50%, -50%); background-color: #fff; border: 0.0625rem solid #aaa; border-radius: 0.25rem; width: 63rem; box-shadow: 0 0.5rem 1.5rem 0 rgba(17, 17, 17, 0.16); z-index: 1;}
.permission-modal .modal-permission-help__head { padding: 0.5rem 0.5rem 0.5rem 1rem; display: flex; align-items: center; gap: 1rem;}
.permission-modal .modal-permission-help__head img { width: 1rem; height: 1rem; pointer-events: auto; cursor: pointer; transition: 0.2s;}
.permission-modal .modal-permission-help__head img:hover {scale: 1.5;}
.permission-modal .modal-permission-help__head_text { flex-grow: 1;}
.permission-modal .modal-permission-help__head_close:hover { cursor: pointer }
.permission-modal .modal-permission-help p{ font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777;}
.permission-modal .modal-permission-help h3{font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.permission-modal .modal-permission-help h5{font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.permission-modal .modal-permission-help h6{font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.permission-modal .modal-permission-help__body_tbody_tr_td { text-align: center; width: 8rem; padding: 0.5rem 0; border-top: 0.0625rem solid #eee; border-right: 0.0625rem solid #eee;}
.modal-permission-help__body_tbody_tr_td > .--icon { display: inline-block;}
.permission-modal .--permission__submaster { display: inline-block; background-color: #fff; color: var(--color-pink); border-radius: 0.25rem; border: 0.0625rem solid var(--color-pink-medium); padding: 0 0.25rem; width: fit-content;}
.permission-modal .--permission__security { display: inline-block; background-color: #fff; color: var(--color-magenta); border-radius: 0.25rem; border: 0.0625rem solid var(--color-magenta-medium); padding: 0 0.25rem; width: fit-content;}
.permission-modal .--permission__nomal { display: inline-block; background-color: #fff; color: var(--color-purple); border-radius: 0.25rem; border: 0.0625rem solid var(--color-purple-medium); padding: 0 0.25rem; width: fit-content;}
.permission-modal .--permission__viewer { display: inline-block; background-color: #fff; color: var(--color-blue); border-radius: 0.25rem; border: 0.0625rem solid var(--color-blue-medium); padding: 0 0.25rem;width: fit-content;}

/* 접속인원 창 하단의 프로젝트 관리 영역 */
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap {display: flex; flex-direction: column; padding: 0.5rem 1rem; border-top: 0.0625rem solid #ddd; gap: 0.375rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap { display: flex; align-items: center; max-height: 1.25rem; gap: 1rem}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>:first-child { min-width: 5rem; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.project-input-wrap>.project-setting-name { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.project-input-wrap>input { padding: 0.125rem 0.5rem; color: #FF3D00; background: #fff; border: 0.0625rem solid #ddd !important; border-radius: 0.25rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.project-input-wrap>input:focus { outline: 0.0625rem solid #111;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.peoject-save-wrap { display: flex; align-items: center; margin-left: auto; gap: 0.5rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.peoject-save-wrap>.project-save-btn {  display: flex; justify-content: center; align-items: center; padding: 0 0.25rem; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; background: #fff; border: 0.0625rem solid #ddd !important; border-radius: 0.25rem; cursor: pointer;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.peoject-save-wrap>.project-save-btn:hover { background: #eee;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.peoject-save-wrap>.project-cancel-btn { display: flex; justify-content: center; align-items: center; padding: 0 0.25rem; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; background: #fff; border: 0.0625rem solid #ddd !important; border-radius: 0.25rem; cursor: pointer;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.peoject-save-wrap>.project-cancel-btn:hover { background: #eee;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-manager-wrap { display: flex; align-items: center;  gap: 1rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-manager-wrap>.project-manager-title { min-width: 5rem; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-manager-wrap>.project-manager-name { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-location-wrap { display: flex; align-items: center; gap: 1rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-location-wrap>.project-location-title { min-width: 5rem; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-location-wrap>.project-location-lat>:first-child { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-location-wrap>.project-location-lon>:first-child { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-location-wrap>.project-location-btn { display: flex; justify-content: center; align-items: center; margin-left: auto; padding: 0 0.25rem; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; background: #fff; border: 0.0625rem solid #ddd !important; border-radius: 0.25rem; cursor: pointer;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-location-wrap>.project-location-btn:hover { background: #eee;}
/* 프로젝트 위치수정 창 */
.project-location-modal { display: none; position: absolute; top: 0; z-index: 60; justify-content: center; align-items: center; width: 100%; height: 100%; background: #00000099;}
.project-location-modal .modal-wrap { display: flex; position: relative; flex-direction: column; width: 50vw; margin: auto; background: #fff; border: 0.0625rem solid #aaa; border-radius: 0.25rem; box-shadow: 0rem 0.5rem 1.5rem 0rem rgba(0, 0, 0, 0.16);}
.project-location-modal .modal-wrap .modal-head { display: flex; height: 2.25rem; padding: 0.5rem 0.5rem 0.5rem 1rem; border-bottom: 0.0625rem solid #ddd; gap: 0.5rem;}
.project-location-modal .modal-wrap .modal-head .close { min-width: 1rem; min-height: 1rem; margin-left: auto; background: url(/main/img/archive/close.svg) no-repeat center / contain; transition: 0.2s; cursor: pointer;}
.project-location-modal .modal-wrap .modal-head .title { padding-right: 0.5rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.project-location-modal .modal-wrap .modal-head .custom-select-wrap { position: relative; font-size: 0.75rem;}
.project-location-modal .modal-wrap .modal-head .custom-select-wrap .custom-select-display { width: 10rem; margin-top: -0.125rem; padding: 0.0625rem 0.5rem; font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #111; background: #fff url(/main/img/officialDoc/icon-down-sign-aaa.svg) no-repeat right 0.25rem center; background-size: 1rem; border: 0.0625rem solid #ddd; border-radius: 0.25rem; cursor: pointer;}
.project-location-modal .modal-wrap .modal-head .custom-select-wrap .custom-select-display:hover { border: 0.0625rem solid #aaa;}
.project-location-modal .modal-wrap .modal-head .custom-select-wrap .custom-select-list { display: none; position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 9999; flex-direction: column; width: 100%; max-height: 25rem; margin: 0; padding: 0; padding-left: 0.25rem; overflow-y: scroll; background: #fff; border: 0.0625rem solid #aaa; border-radius: 0.25rem; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05); list-style: none;}
.project-location-modal .modal-wrap .modal-head .custom-select-wrap .custom-select-list li { padding: 0.5rem 0.25rem; border-radius: 0.25rem; cursor: pointer;}
.project-location-modal .modal-wrap .modal-head .custom-select-wrap .custom-select-list li:hover { background: #eee;}
.project-location-modal .modal-wrap .modal-body { display: flex; position: relative; flex-direction: column; height: 45.875rem;}
.project-location-modal .modal-wrap .modal-body .mapcontainer { flex-grow: 1; width: 50rem; height: 40rem; overflow: hidden; background: #eee;}
.project-location-modal .modal-wrap .modal-body .coordinate { position: absolute; bottom: 0.5rem; left: 0.5rem; padding: 0.25rem 0.5rem; background: #fff; border: 0.0625rem solid #aaa; border-radius: 0.25rem;}
.project-location-modal .modal-wrap .modal-body .coordinate h5 { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.project-location-modal .modal-wrap .modal-body .coordinate h6 { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.project-location-modal .modal-wrap .modal-body .coordinate .top { display: flex; justify-content: space-between; align-items: center; gap: 1rem;}
.project-location-modal .modal-wrap .modal-body .coordinate .top .latitude { display: flex; align-items: center; gap: 0.5rem;}
.project-location-modal .modal-wrap .modal-body .coordinate .top .latitude h6 { width: 4.5rem;}
.project-location-modal .modal-wrap .modal-body .coordinate .top .longtitude {  display: flex;  align-items: center;  gap: 0.5rem;}
.project-location-modal .modal-wrap .modal-body .coordinate .top .longtitude h6 { width: 4.5rem;}
.project-location-modal .modal-wrap .modal-body .coordinate .bottom { display: flex; align-items: center; gap: 0.5rem;}
.project-location-modal .modal-wrap .modal-body .scale { position: absolute; top: 0.5rem; right: 0.5rem; border: 0.0625rem solid #aaa;  border-radius: 0.25rem;}
.project-location-modal .modal-wrap .modal-body .scale .up {  display: flex;  justify-content: center;  align-items: center;  width: 1.25rem;  padding: 0.25rem;  font-size: 1rem;  font-weight: 500;  line-height: 0.75rem;  background: #fff; border-bottom: 0.0625rem solid #ddd; border-radius: 0.25rem 0.25rem 0 0; cursor: pointer;}
.project-location-modal .modal-wrap .modal-body .scale .up:hover { background: #eee;}
.project-location-modal .modal-wrap .modal-body .scale .down { display: flex; justify-content: center; align-items: center; width: 1.25rem; padding: 0.25rem; font-size: 1rem; font-weight: 500; line-height: 0.75rem; background: #fff; border-radius: 0 0 0.25rem 0.25rem; cursor: pointer;}
.project-location-modal .modal-wrap .modal-body .scale .down:hover { background: #eee;}
.project-location-modal .modal-wrap .modal-body .map-wrap { position: absolute; right: 0.5rem; bottom: 0.5rem; align-items: flex-end;}
.project-location-modal .modal-wrap .modal-body .map-wrap { display: flex; flex-direction: column; gap: 0.5rem;}
.project-location-modal .modal-wrap .modal-body .map-wrap .xs-button {  display: flex; align-items: center; width: fit-content; padding: 0 0.25rem; background: #fff; border: 0.0625rem solid #aaa; border-radius: 0.25rem; cursor: pointer; gap: 0.125rem;}
.project-location-modal .modal-wrap .modal-body .map-wrap .xs-button .label { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.project-location-modal .modal-wrap .modal-body .map-wrap .xs-button .icon { min-width: 1rem; min-height: 1rem; background: url(/main/img/archive/icon-map-111.svg) no-repeat center / contain;}
.project-location-modal .modal-wrap .modal-body .map-wrap .xs-button:hover { background: #eee;}
.project-location-modal .modal-wrap .modal-foot { display: flex; justify-content: center; align-items: center; padding: 1rem 0; border-top: 0.0625rem solid #ddd; gap: 0.5rem;}
.project-location-modal .modal-wrap .modal-foot .button { display: flex;  justify-content: center;  align-items: center; width: 10rem; padding: 0.5rem 0; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; background: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; cursor: pointer;}
.project-location-modal .modal-wrap .modal-foot .button:hover { background: #eee;}
.project-location-modal .modal-wrap .modal-foot .primary-button { display: flex; justify-content: center; align-items: center; width: 10rem; padding: 0.5rem 0; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #fff; background: #1E5149; border-radius: 0.25rem; cursor: pointer;}
.project-location-modal .modal-wrap .modal-foot .primary-button:hover { background: #1B443D;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map.on { display: flex;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map { display: none; flex-direction: column; padding: 0.5rem; background: #fff; border: 0.0625rem solid #aaa; border-radius: 0.25rem; gap: 1rem;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .text-wrap { display: flex; justify-content: space-between; align-items: center;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .text-wrap .close { width: 1rem; height: 1rem; background: url(/main/img/archive/close.svg) no-repeat center / contain; transition: 0.2s; cursor: pointer;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .text-wrap .close:hover { scale: 1.5;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .radio-btn-wrap { display: flex; flex-direction: column; gap: 0.5rem;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .radio-btn-wrap { display: flex;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .radio-btn-wrap .radio-wrap { display: flex; align-items: center; padding: 0.2rem; gap: 0.2rem;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .radio-btn-wrap .radio-wrap:hover { border-radius: 0.25rem; outline: 0.125rem solid #a5b9b6; cursor: pointer;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .radio-btn-wrap .radio-wrap input[type="radio"] { width: 0.75rem; height: 0.75rem; background: #fff; border: 0.1875rem solid #fff; border-radius: 0.375rem; outline: 0.0625rem solid #A5B9B6; vertical-align: middle; appearance: none;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .radio-btn-wrap .radio-wrap input[type="radio"]:checked { background: #1E5149;}

/* 구성 css */
/* .site-map-modal { display: none; position: absolute; top: 0; z-index: 60; justify-content: center; align-items: center; width: 100%; height: 100%; background: #00000099; }
.site-map-modal .modal-wrap {   display: flex;  position: relative;  flex-direction: column;  width: calc(12rem + 16.25rem + 16.25rem + 4rem + 0.1875rem); max-width: 90%;  max-height: calc(100dvh - 5rem);  margin: auto;  background: #fff;  border: 0.0625rem solid #aaa;  border-radius: 0.25rem; }
.site-map-modal .modal-wrap .modal-header { display: flex;  flex-shrink: 0; justify-content: space-between;  align-content: center;  height: 2.25rem;  padding: 0.5rem 0.5rem 0.5rem 1rem;  border-bottom: 0.0625rem solid #ddd;  gap: 1rem; }
.site-map-modal .modal-wrap .modal-header .close { min-width: 1rem; min-height: 1rem; background: url(/main/img/archive/close.svg) no-repeat center / contain; transition: 0.2s; cursor: pointer; }
.site-map-modal .modal-wrap .modal-header .title { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.site-map-modal .modal-wrap .modal-body {  display: flex;  flex-direction: column;  flex-grow: 1;  min-height: 0; box-shadow: 0rem 0.5rem 1.5rem 0rem rgba(0, 0, 0, 0.16); }
.site-map-modal .modal-wrap .modal-body .top {  display: flex;  flex-shrink: 0;  background: #e9eeed;   border-bottom: 0.0625rem solid #A5B9B6; }
.site-map-modal .modal-wrap .modal-body .title { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.site-map-modal .modal-wrap .modal-body .count { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777; }
.site-map-modal .modal-wrap .modal-body .top .tab { display: flex; align-items: center; width: 10rem; padding: 0.5rem 0.5rem 0.5rem 1rem; border-right: 0.0625rem solid #A5B9B6; gap: 0.5rem; }
.site-map-modal .modal-wrap .modal-body .top .category { display: flex; align-items: center; width: 13.25rem; padding: 0.5rem; border-right: 0.0625rem solid #A5B9B6; gap: 0.5rem; }
.site-map-modal .modal-wrap .modal-body .top .folder { display: flex; align-items: center; width: 16.25rem; padding: 0.5rem; border-right: 0.0625rem solid #A5B9B6; gap: 0.5rem; }
.site-map-modal .modal-wrap .modal-body .top .file { display: flex; align-items: center; width: 6rem; padding: 0.5rem 1rem 0.5rem 0.5rem; gap: 0.5rem; }
.site-map-modal .modal-wrap .modal-body .top .file .count { margin-left: auto; }
.site-map-modal .modal-wrap .modal-body .list-wrap {  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;}
.site-map-modal .modal-wrap .modal-body .list-wrap>ul { display: flex; flex-direction: column; }
.site-map-modal .modal-wrap .modal-body .list-wrap>ul>li { display: flex; box-shadow: 0 -0.0625rem 0 #ddd; }
.site-map-modal .modal-wrap .modal-body .list-wrap>ul>li>h3 { width: 10rem; padding: 0.5rem 0.5rem 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #1E5148; border-right: 0.0625rem solid #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-map-modal .modal-wrap .modal-body .list-wrap>ul>li>ul>li { display: flex; }
.site-map-modal .modal-wrap .modal-body .list-wrap>ul>li>ul>li>h3 { width: 13.25rem; padding: 0.5rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; border-right: 0.0625rem solid #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-map-modal .modal-wrap .modal-body .list-wrap>ul>li>ul>li>ul>li { display: flex; }
.site-map-modal .modal-wrap .modal-body .list-wrap>ul>li>ul>li>ul>li>h4 { width: 16.25rem; padding: 0.5rem; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; border-right: 0.0625rem solid #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-map-modal .modal-wrap .modal-body .list-wrap>ul>li>ul>li>ul>li>.count { width: 6rem; padding-right: 1rem; font-size: 0.875rem; font-weight: 300; text-align: right; color: #111; border-right: none; } */
.composition-modal { display: none; position: absolute; top: 0; z-index: 60; justify-content: center; align-items: center; width: 100%; height: 100%; background: #00000099; }
.composition-modal .modal-wrap { display: flex; position: relative; flex-direction: column; max-height: calc(100dvh - 4.5rem - 1rem); max-width: calc(100vw - 10rem); margin: auto; background: #fff; border: 0.0625rem solid #aaa; border-radius: 0.25rem; }
.composition-modal .modal-wrap 
{ 
    h3 { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
    h5 { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
    h6 { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.composition-modal .modal-wrap .head { display: flex; padding: 0.5rem 0.5rem 0.5rem 1rem; border-bottom: 0.0625rem solid #ddd; align-items: center; justify-content: space-between; }
.composition-modal .modal-wrap .head i { min-width: 1rem; min-height: 1rem; background: url(/main/img/archive/close.svg) no-repeat center / contain; cursor: pointer; }
.composition-modal .modal-wrap>ul { display: flex; overflow: scroll; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.composition-modal .modal-wrap>ul>li { padding: 0.5rem 1rem 0 1rem; display: flex; flex-direction: column; gap: 0.25rem; color: var(--primary-lv-6, #1E5149); min-width: 14.5rem; max-width: 14.5rem; border-right: 0.0625rem solid #eee; }
.composition-modal .modal-wrap>ul>li:nth-last-child(1) { border-right: none; padding-right: 0.5rem; }
.composition-modal .modal-wrap>ul>li>ul { display: flex; flex-direction: column; gap: 0.5rem; }
.composition-modal .modal-wrap>ul>li>ul>li { border-bottom: 0.0625rem solid var(--primary-lv-0, #E9EEED); display: flex; flex-direction: column; gap: 0.25rem; }
.composition-modal .modal-wrap>ul>li>ul li:nth-last-child(1) { padding-bottom: 0.5rem; border: none }
.composition-modal .modal-wrap>ul>li>ul>li>ul { display: flex; flex-direction: column; gap: 0.25rem; color: #111; }
.composition-modal .modal-wrap>ul>li>ul>li>ul>li { display: flex; align-items: center; gap: 0.25rem; }
.composition-modal .modal-wrap>ul>li>ul>li>ul>li>i { min-width: 1rem; min-height: 1rem; background: url(/main/img/archive/folder-bullet.svg) no-repeat center / contain; }
.composition-modal .modal-wrap>ul>li>ul>li>ul>li>h6:nth-last-child(1) { color: var(--primary-lv-3, #789792); margin-left: auto; min-width: 1.625rem; text-align: left; }
.composition-modal .modal-wrap > ul > li:nth-child(even) { background-color: #f6f8f8; }

  /* 스크롤바 css*/
._scrollbar::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

._scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

._scrollbar::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border: 0.125rem solid transparent;
    border-radius: 0.25rem;
    background-clip: padding-box;
}

._scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #777;
}

/* 스크롤바 css*/
._scrollbar::-webkit-scrollbar { width: 0.5rem;}
._scrollbar::-webkit-scrollbar-track { background: transparent;}
._scrollbar::-webkit-scrollbar-thumb { background-color: #aaa; border: 0.125rem solid transparent; border-radius: 0.25rem; background-clip: padding-box;}
._scrollbar::-webkit-scrollbar-thumb:hover { background-color: #777;}



/* 유저 캡슐디자인 */
/* 관리자 */
.user-permission-master { display: flex; padding: 0.125rem 0.25rem; justify-content: center; align-items: center; background-color: #EEF8EE; border-radius: 0.25rem; } 
.user-permission-master h6 { width: max-content; font-size: 0.75rem; font-weight: 700; color: #4DB251 !important; } 
.permission-modal .user-permission-master { margin-left: auto; } 
/* 부관리자 */
.user-permission-sub-master { display: flex; padding: 0.125rem 0.25rem; justify-content: center; align-items: center; background-color: #FDE8EF; border-radius: 0.25rem; } 
.user-permission-sub-master h6 { width: max-content; font-size: 0.75rem; font-weight: 700; color: #E8175E !important; } 
.permission-modal .user-permission-sub-master { margin-left: auto; } 
/* 보안참여자 */
.user-permission-security-worker { display: flex; padding: 0.125rem 0.25rem; justify-content: center; align-items: center; background-color: #F8EBFB; border-radius: 0.25rem; } 
.user-permission-security-worker h6 { width: max-content; font-size: 0.75rem; font-weight: 700; color: #B92ED1 !important; } 
.permission-modal .user-permission-security-worker { margin-left: auto; } 
/* 일반참여자 */
.user-permission-worker { display: flex; padding: 0.125rem 0.25rem; justify-content: center; align-items: center; background-color: #F1ECF9; border-radius: 0.25rem; } 
.user-permission-worker h6 { width: max-content; font-size: 0.75rem; font-weight: 700; color: #6D3DC2 !important; } 
.permission-modal .user-permission-worker { margin-left: auto; } 
/* 뷰어 */
.user-permission-viewer { display: flex; padding: 0.125rem 0.25rem; justify-content: center; align-items: center; background-color: #E7F4FE; border-radius: 0.25rem;} 
.user-permission-viewer h6 { width: max-content; font-size: 0.75rem; font-weight: 700; color: #0D8DF2 !important; } 
.permission-modal .user-permission-viewer { margin-left: auto; } 
/* 접속 인원 모달창, 개발자 모달창 등 유저 목록에서 본인 표시 */
.me-badge { display: flex; padding: 0.125rem 0.25rem; justify-content: center; align-items: center; background-color: #d8e7e5; border-radius: 0.25rem; }
.me-badge h6 { font-size: 0.75rem; font-weight: 700; color: #1e5149; } 


/* 개발자 메뉴 모달 */
.dev-menu-modal { display: none; justify-content: center; align-items: center; position: absolute; top: 0; width: 100%; height: 100%; background: #00000099; z-index: 60; }
.dev-menu-modal .modal-wrap { position: relative; background: #fff; margin: auto; border-radius: 0.25rem; }
.dev-menu-modal .modal-wrap div { font-size: 0.875rem; }
.dev-menu-modal .modal-wrap input { font-size: 0.875rem; }

.dev-menu-modal .modal-wrap .modal-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 0.5rem 0 1rem; border-bottom: 0.0625rem solid #aaa; }
.dev-menu-modal .modal-wrap .modal-header > .title { display: flex; justify-content: space-between; align-items: center; flex: 1; min-width: 0; }

.dev-menu-modal .modal-wrap .modal-header > .title .left-wrap { display: flex; align-items: center; gap: 0.4rem; }
.dev-menu-modal .modal-wrap .modal-header > .title .left-wrap .title-wrap { display: flex; align-items: center; gap: 0.5rem; }
.dev-menu-modal .modal-wrap .modal-header > .title .left-wrap .title-wrap .text { font-weight: bold; }

.dev-menu-modal .modal-wrap .modal-header > .close { width: 1rem; height: 1rem; background: url('/main/img/archive/close.svg') no-repeat center/contain; cursor: pointer; transition: 0.2s; }
.dev-menu-modal .modal-wrap .modal-header > .close:hover { scale: 1.5; }

.dev-menu-modal .modal-wrap .modal-body { display: flex; align-items: center; width: 60rem; height: 40rem; }
.dev-menu-modal .modal-wrap .modal-body > div { display: flex; flex-direction: column; width: 50%; height: 100%; }

.dev-menu-modal .modal-wrap .modal-body .left { border-right: 0.0625rem solid #aaa; }

.dev-menu-modal .modal-wrap .modal-body .left .btn { border: 0.0625rem solid #ccc; border-radius: 0.25rem; padding: 1rem; transition: 0.3s; }
.dev-menu-modal .modal-wrap .modal-body .left .btn:hover { cursor: pointer; background: #000; color: #fff; }

.dev-menu-modal .modal-wrap .modal-body .left .toggle-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem; border-bottom: 0.0625rem solid #aaa; }
.dev-menu-modal .modal-wrap .modal-body .left .toggle-wrap .btn { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: calc(50% - 0.25rem); padding: 1rem; border: 0.0625rem solid #ccc; border-radius: 0.25rem; }
.dev-menu-modal .modal-wrap .modal-body .left .toggle-wrap .btn .toggle-switch-track { width: 2.4rem; height: 1.4rem; display: block; position: relative; border-radius: 30px; background-color: #fff; border: 0.0625rem solid #ccc; cursor: pointer; }
.dev-menu-modal .modal-wrap .modal-body .left .toggle-wrap .btn .toggle-switch-track .toggle-switch-thumb { position: absolute; top: 50%; left: calc(100% - 1.2rem); transform: translateY(-50%); background: #39c951; border: 0.15rem solid #2baa3d; border-radius: 50%; transition: all 0.2s ease-in; width: 1rem; min-width: 1rem; max-width: 1rem; height: 1rem; min-height: 1rem; max-height: 1rem; }
.dev-menu-modal .modal-wrap .modal-body .left .toggle-wrap .btn.inactive .toggle-switch-track .toggle-switch-thumb { left: 0.2rem; background: #f85656; border: 0.15rem solid #db4748;  }

.dev-menu-modal .modal-wrap .modal-body .left .btn-wrap { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0.25rem 0.5rem 0.5rem; overflow-x: hidden; overflow-y: scroll; }
/* .dev-menu-modal .modal-wrap .modal-body .left .btn-wrap button { border: 0.0625rem solid #ccc; border-radius: 0.25rem; padding: 1rem; transition: 0.3s; }
.dev-menu-modal .modal-wrap .modal-body .left .btn-wrap button:hover { cursor: pointer; background: #000; color: #fff; } */

.dev-menu-modal .modal-wrap .modal-body .right {  }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-count { padding: 1rem 0.5rem; border-bottom: 0.0625rem solid #ccc; text-align: center; }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list { overflow-x: hidden; overflow-y: scroll; padding: 0 0.25rem 0 0.5rem; }
/* .dev-menu-modal .modal-wrap .modal-body .right .user-list .project { display: flex; flex-direction: column; padding: 1rem 0.5rem; border-bottom: 0.0625rem solid #eee; } */
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project { display: flex; flex-direction: column; padding: 0.5rem; border-bottom: 0.0625rem solid #eee; }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .title-wrap { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5rem 0; }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .title-wrap .text { font-size: 1rem; font-weight: 500; }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .title-wrap .count { color: #777; min-width: 3.6rem; max-width: 3.6rem; text-align: right; }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .user-wrap { display: flex; flex-direction: column; }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .user-wrap .user { display: flex; justify-content: space-between; align-items: center; padding: 0.2rem; transition: 0.3s; }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .user-wrap .user:hover { background: #e9eeed; }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .user-wrap .user .text-wrap { display: flex; align-items: center; gap: 0.5rem; padding-left: 0.5rem; }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .user-wrap .user .btn-wrap { display: flex; align-items: center; gap: 0.2rem; }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .user-wrap .user .btn-wrap .btn { display: flex; justify-content: center; align-items: center; width: 1.2rem; height: 1.2rem; background: #fff; border: 0.0625rem solid #ccc; border-radius: 0.25rem; transition: 0.3s; }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .user-wrap .user .btn-wrap .btn:not(.disabled):hover { border: 0.0625rem solid #000; background: #000; color: #fff; cursor: pointer; }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .user-wrap .user .btn-wrap .btn.disabled { background: #ddd; filter: invert(16%) sepia(7%) saturate(3%) hue-rotate(314deg) brightness(91%) contrast(85%); }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .user-wrap .user .btn-wrap .btn.disabled:hover { cursor: not-allowed; }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .user-wrap .user .btn-wrap .btn * { pointer-events: none; }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .user-wrap .user .btn-wrap .message .message-img { width: 1.2rem; height: 1.2rem; background: url('/main/img/archive/message_000.svg') no-repeat center/contain; }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .user-wrap .user .btn-wrap .message.disabled .message-img { filter: invert(69%) sepia(0%) saturate(1%) hue-rotate(241deg) brightness(87%) contrast(95%); }
.dev-menu-modal .modal-wrap .modal-body .right .total-user-list .project .user-wrap .user .btn-wrap .message:not(.disabled):hover .message-img { background: url('/main/img/archive/message_fff.svg') no-repeat center/contain; }



/* 우클릭 컨텍스트 메뉴 */
.contextmenu { display: none; flex-direction: column; position: absolute; top: 50%; left: 50%; min-width: 12.5rem; background: #fff; user-select: none; border: 0.0625rem solid #eee; border-radius: 0.25rem; z-index: 63; transition: 0.1s; } 
/* .contextmenu { display: none; flex-direction: column; position: absolute; top: 50%; left: 50%; min-width: 12.5rem; background: #fff; user-select: none; border: 0.0625rem solid #eee; border-radius: 0.25rem; z-index: 51; transition: 0.1s; }  */
.contextmenu div { font-size: 0.875rem; }
.contextmenu.main-menu .contextmenu-container { width: 100%; height: 100%; position: relative; padding: 0.25rem; border-radius: 0.25rem; box-shadow: var(--box-shadow); transition: 0.2s; }
.contextmenu.main-menu .contextmenu-container .contextmenu-padding { padding: 0.25rem; }
.contextmenu.main-menu .contextmenu-container .contextmenu-item { display: flex; align-items: center; position: relative; color: var(--primary); cursor: pointer; transition: 0.3s; } 
.contextmenu.main-menu .contextmenu-container .contextmenu-item:hover { background: #d4dddb80; border-radius: 0.25rem; } 
.contextmenu.main-menu .contextmenu-container .contextmenu-item.disabled { background: #aaa; }
.contextmenu.main-menu .contextmenu-container .contextmenu-item.disabled:hover { cursor: not-allowed; }
.contextmenu.main-menu .contextmenu-container .contextmenu-item .btn { width: 100%; background: none; } 
.contextmenu.main-menu .contextmenu-container .contextmenu-item .btn:hover { background: none; } 
.contextmenu.main-menu .contextmenu-container .contextmenu-item img { width: 1.25rem; height: 1.25rem; margin-right: 0.875rem; pointer-events: none; } 
.contextmenu.main-menu .contextmenu-container .contextmenu-item input[type="file"] { display: none; } 
.contextmenu.main-menu .contextmenu-container .contextmenu-item .btn label { display: flex; align-items: center; cursor: pointer; width:100%; } 
.contextmenu.main-menu .contextmenu-container .contextmenu-item .wrap { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; pointer-events: none; } 
/* .contextmenu.main-menu .contextmenu-container .contextmenu-item .wrap > div { pointer-events: none; } */
.contextmenu.main-menu .contextmenu-container .contextmenu-item .wrap .shortcut { color: #b1b8be; }
.contextmenu.main-menu .contextmenu-container .contextmenu-item .wrap .image { width: 1rem; height: 1rem; }
.contextmenu.main-menu .contextmenu-container .contextmenu-item .wrap .image.toggle { background: url('/main/img/archive/toggle_right_gray.svg') no-repeat center/contain; }
.contextmenu.main-menu .contextmenu-container .contextmenu-item.check .wrap .image { background: url('/main/img/archive/contextmenu/check.svg') no-repeat center/contain; }
.contextmenu.main-menu .contextmenu-container .contextmenu-item .sub-menu { display: none; top: -0.3125rem; left: 100%; z-index: 52; }
.contextmenu.sub-menu .contextmenu-container .contextmenu-item > div { pointer-events: none; }
/* .contextmenu.main-menu .contextmenu-container .contextmenu-warn { display: flex; align-items: center; background: #c00; border-radius: 0.25rem; }  */
.contextmenu.main-menu .contextmenu-container .contextmenu-warn { display: flex; align-items: center; background: #000; border-radius: 0.25rem; } 
.contextmenu.main-menu .contextmenu-container .contextmenu-warn .wrap { display: flex; align-items: center; height: 1.25rem; }
.contextmenu.main-menu .contextmenu-container .contextmenu-warn .wrap .text { font-weight: bold; color: #fff; }



/* 우클릭 강조 박스 */
/* .context-focus-box { display: none; position: absolute; background: #0d8ff248; border: 0.15rem solid #3bb5f9; transition: 0.2s; pointer-events: none; z-index: 20; } */
.context-focus-box { display: none; position: absolute; background: #0d8ff248; border: 0.15rem solid #3bb5f9; transition: 0.2s; pointer-events: none; z-index: 62; }



/* 아카이브용 각종 notice */
.notice { justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center; color: #777; font-size: 1.25rem; font-weight: bold; }
.archive-main-left .tree-container .tree-notice { display: flex; }
.archive-main-center .list-notice { display: flex; }
.archive-main-center .list-notice img { object-fit: contain; height:100%; }
.archive-main-center .list-notice .list-notice-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; height: 100vh;}
.archive-main-center .list-notice .list-notice-description { position: relative; padding: 0.25rem 0.5rem; border: 0.063rem solid #111; border-radius: 0.25rem; background-color: #fff; width: fit-content; min-width: fit-content; left: 0.5rem; top: 2.375rem;}
.archive-main-center .list-notice .list-notice-top { display: flex; flex-direction: column;}
.archive-main-center .list-notice .list-notice-top>.image { border: 0.063rem solid #111; border-radius: 0.25rem; width: 60dvh; box-shadow: 0rem 0.5rem 1.5rem 0rem rgba(0, 0, 0, 0.16);}
.archive-main-center .list-notice .list-notice-bottom { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-top: 2rem;}
.archive-main-center .list-notice .list-notice-bottom-body { text-align: center;}
.archive-main-center .list-notice .list-notice-bottom-footer { display: flex; gap: 0.5rem;}
.archive-main-center .list-notice .list-notice-negative { padding: 0.5rem 0; width: 10rem; min-width: 10rem; border: 0.063rem solid #ddd; border-radius: 0.25rem; background-color: #fff; display: flex; align-items: center; justify-content: center; gap: 0.25rem; cursor: pointer;}
.archive-main-center .list-notice .list-notice-positive { padding: 0.5rem 0; width: 10rem; min-width: 10rem; border-radius: 0.25rem; background-color: #1E5149; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; }
.archive-main-center .list-notice .list-notice-box .list-notice-top .list-notice-description h3 { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.archive-main-center .list-notice .list-notice-box .list-notice-bottom .list-notice-bottom-footer .list-notice-negative h3 { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #111; }
.archive-main-center .list-notice .list-notice-box .list-notice-bottom .list-notice-bottom-footer .list-notice-positive h3 { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.archive-main-center .list-notice .list-notice-box .list-notice-bottom .list-notice-bottom-body h4 { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
/* .archive-main-center .list-notice .list-notice-box-toggle { background-color: #fff; border: 0.063rem solid #ddd; padding: 0.375rem; border-radius: 0.25rem; display: flex; cursor: pointer; position: absolute; z-index: 11; top: 2.5rem; right: 55.5rem; } */
.list-notice-box-toggle { background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; padding: 0.25rem; cursor: pointer; position: absolute; z-index: 40; top: 0.625rem; right: 0.625rem; }


.archive-main-center .list-notice .list-notice-box-toggle:hover { background-color: #eee;}
.archive-main-center .list-notice .list-notice-box-toggle-menu { display: flex; flex-direction: column; gap: 0.25rem; background-color: #fff; border: 0.063rem solid #ddd; border-radius: 0.25rem; padding: 0.5rem 1rem; min-width: 12rem; max-width:12rem; position: absolute; z-index: 11; top: 4.82rem; right: 55.5rem; box-shadow: 0rem 0.5rem 1.5rem 0rem rgba(0, 0, 0, 0.16); }
.archive-main-center .list-notice .list-notice-box-toggle-menu-list { display: flex; align-items: center; gap: 0.5rem; }
.archive-main-center .list-notice .list-notice-box-toggle-menu-list:hover { cursor: pointer; background: #ccc; }
.archive-main-center .list-notice .list-notice-box-toggle-menu-list h3 { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #111; }
.archive-main-center .list-notice .list-notice-box-toggle-menu-list h4 { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #111; }
/* .archive-main-center .list-notice .list-notice-box-toggle-menu-list.delete { pointer-events: none; color: #BCCBC8 } */
.archive-main-right .viewer-notice { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; }
.archive-main-right .viewer-notice img { object-fit: contain; height: 100%; }
.main-notice { display: none; flex-direction: column; gap: 3rem; }
.main-notice div { font-size: 1.6rem; }




/* 파일 타입별 아이콘 */
.list-item.file.pdf > .wrap .name .type-image { background: url('/main/img/archive/file_extension/pdf.svg') no-repeat center/contain; }
.list-item.file.hwp > .wrap .name .type-image { background: url('/main/img/archive/file_extension/hwp.svg') no-repeat center/contain; }
.list-item.file.hwpx > .wrap .name .type-image { background: url('/main/img/archive/file_extension/hwp.svg') no-repeat center/contain; }
.list-item.file.doc > .wrap .name .type-image { background: url('/main/img/archive/file_extension/doc.svg') no-repeat center/contain; }
.list-item.file.docx > .wrap .name .type-image { background: url('/main/img/archive/file_extension/doc.svg') no-repeat center/contain; }
.list-item.file.xls > .wrap .name .type-image { background: url('/main/img/archive/file_extension/xls.svg') no-repeat center/contain; }
.list-item.file.xlsx > .wrap .name .type-image { background: url('/main/img/archive/file_extension/xls.svg') no-repeat center/contain; }
.list-item.file.xlsm > .wrap .name .type-image { background: url('/main/img/archive/file_extension/xls.svg') no-repeat center/contain; }
.list-item.file.ppt > .wrap .name .type-image { background: url('/main/img/archive/file_extension/ppt.svg') no-repeat center/contain; }
.list-item.file.pptx > .wrap .name .type-image { background: url('/main/img/archive/file_extension/ppt.svg') no-repeat center/contain; }
.list-item.file.dwg > .wrap .name .type-image { background: url('/main/img/archive/file_extension/dwg.svg') no-repeat center/contain; }
.list-item.file.dxf > .wrap .name .type-image { background: url('/main/img/archive/file_extension/dwg.svg') no-repeat center/contain; }
.list-item.file.grm > .wrap .name .type-image { background: url('/main/img/archive/file_extension/dwg.svg') no-repeat center/contain; }
.list-item.file.mp3 > .wrap .name .type-image { background: url('/main/img/archive/file_extension/audio.svg') no-repeat center/contain; }
.list-item.file.wav > .wrap .name .type-image { background: url('/main/img/archive/file_extension/audio.svg') no-repeat center/contain; }
.list-item.file.jpg > .wrap .name .type-image { background: url('/main/img/archive/file_extension/img.svg') no-repeat center/contain; }
.list-item.file.jpeg > .wrap .name .type-image { background: url('/main/img/archive/file_extension/img.svg') no-repeat center/contain; }
.list-item.file.png > .wrap .name .type-image { background: url('/main/img/archive/file_extension/img.svg') no-repeat center/contain; }
.list-item.file.webp > .wrap .name .type-image { background: url('/main/img/archive/file_extension/img.svg') no-repeat center/contain; }
.list-item.file.gif > .wrap .name .type-image { background: url('/main/img/archive/file_extension/img.svg') no-repeat center/contain; }
.list-item.file.mp4 > .wrap .name .type-image { background: url('/main/img/archive/file_extension/video.svg') no-repeat center/contain; }
.list-item.file.mov > .wrap .name .type-image { background: url('/main/img/archive/file_extension/video.svg') no-repeat center/contain; }
.list-item.file.webm > .wrap .name .type-image { background: url('/main/img/archive/file_extension/video.svg') no-repeat center/contain; }
.list-item.file.avi > .wrap .name .type-image { background: url('/main/img/archive/file_extension/video.svg') no-repeat center/contain; }
.list-item.file.mkv > .wrap .name .type-image { background: url('/main/img/archive/file_extension/video.svg') no-repeat center/contain; }
.list-item.file.zip > .wrap .name .type-image { background: url('/main/img/archive/file_extension/zip.svg') no-repeat center/contain; }
.list-item.file.txt > .wrap .name .type-image { background: url('/main/img/archive/file_extension/text.svg') no-repeat center/contain; }
.list-item.file.gsim > .wrap .name .type-image { background: url('/main/img/archive/file_extension/gsim.svg') no-repeat center/contain; }
.list-item.file.ifc > .wrap .name .type-image { background: url('/main/img/archive/file_extension/3d.svg') no-repeat center/contain; }
.list-item.file > .wrap .name .type-image { background: url('/main/img/archive/file_extension/file.svg') no-repeat center/contain; }

/* step, type 추가부분 */
/* article {position: absolute;top: 50%;left: 50%;}
.right-wrap {display: flex;align-items: center;gap: 0.5rem;} */
.project-step-wrap, .project-type-wrap { display: flex; flex-direction: column; position: relative;}
.project-type {display: flex;align-items: center;gap: 0.125rem;padding: 0 0.25rem;background-color: #fff;border: 0.0625rem solid #ddd;border-radius: 0.25rem;font-size: 0.75rem;font-weight: 500;line-height: 1rem;letter-spacing: -0.0175rem;}
.project-type:hover {background-color: #eee;cursor: pointer;}
.project-step {display: flex;align-items: center;gap: 0.125rem;padding: 0 0.25rem;background-color: #fff;border: 0.0625rem solid #ddd;border-radius: 0.25rem;font-size: 0.75rem;font-weight: 500;line-height: 1rem;letter-spacing: -0.0175rem;}
.project-step:hover {background-color: #eee;cursor: pointer;}
.project-type__icon {min-width: 1rem;max-width: 1rem;min-height: 1rem;max-height: 1rem;background: url(/main/img/officialDoc/icon-down-sign-aaa.svg) no-repeat center / contain;}
.project-step__icon {min-width: 1rem;max-width: 1rem;min-height: 1rem;max-height: 1rem;background: url(/main/img/officialDoc/icon-down-sign-aaa.svg) no-repeat center / contain;}
.project-type__list { position: absolute; background-color: #fff; padding: 0.25rem; border: 0.0625rem solid #ddd; border-radius: 0.25rem; width: 3rem; flex-direction: column; gap: 0.125rem; z-index: 99; display: none; top: 1.25rem;}
/* .project-type__list {position: absolute;background-color: #fff;padding: 0.25rem;border: 0.0625rem solid #ddd;border-radius: 0.25rem;width: 3rem;flex-direction: column;gap: 0.125rem;z-index: 99;display: none; top:35.59rem; } */
.project-type__list_item {font-size: 0.75rem;font-weight: 300;line-height: 1.25rem;letter-spacing: -0.0175rem;text-align: center;width: 100%;border-radius: 0.25rem;}
.project-type__list_item:hover {background-color: #eee;cursor: pointer;}
.project-step__list { position: absolute; background-color: #fff; padding: 0.25rem; border: 0.0625rem solid #ddd; border-radius: 0.25rem; width: 3rem; flex-direction: column; gap: 0.125rem; z-index:99; display: none; top: 1.25rem; }
/* .project-step__list {position: absolute;left: 25.2rem;background-color: #fff;padding: 0.25rem;border: 0.0625rem solid #ddd;border-radius: 0.25rem;width: 3rem;flex-direction: column;gap: 0.125rem;z-index: 99;display: none;} */
.project-step__list_item {font-size: 0.75rem;font-weight: 500;line-height: 1.25rem;letter-spacing: -0.0175rem;text-align: center;width: 100%;border-radius: 0.25rem;}
.project-step__list_item:hover {background-color: #eee;cursor: pointer;}
.--step__active {color: var(--color-red);}
.--step__stop {color: var(--color-blue);}
.--step__done {color: var(--color-steel);}
.--step__wait {color: var(--color-green);}
.--project-list__open {display: flex;}
.--type-capsule {background-color: #fff;padding: 0 0.25rem;border-radius: 0.25rem;border: 0.0625rem solid #aaa;font-size: 0.75rem;font-weight: 500;line-height: 1rem;letter-spacing: -0.0175rem;}
.--step-capsule__active {color: var(--color-red);background-color: #fff;padding: 0 0.25rem;border-radius: 0.25rem;border: 0.0625rem solid var(--color-red-medium);font-size: 0.75rem;font-weight: 500;line-height: 1rem;letter-spacing: -0.0175rem;}
.--step-capsule__stop {color: var(--color-blue);background-color: #fff;padding: 0 0.25rem;border-radius: 0.25rem;border: 0.0625rem solid var(--color-blue-medium);font-size: 0.75rem;font-weight: 500;line-height: 1rem;letter-spacing: -0.0175rem;}
.--step-capsule__done {color: var(--color-steel);background-color: #fff;padding: 0 0.25rem;border-radius: 0.25rem;border: 0.0625rem solid var(--color-steel-medium);font-size: 0.75rem;font-weight: 500;line-height: 1rem;letter-spacing: -0.0175rem;}
.--step-capsule__wait {color: var(--color-green);background-color: #fff;padding: 0 0.25rem;border-radius: 0.25rem;border: 0.0625rem solid var(--color-green-medium);font-size: 0.75rem;font-weight: 500;line-height: 1rem;letter-spacing: -0.0175rem;}
 
/* 접속인원 창 하단의 프로젝트 관리 영역 */
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap {display: flex; flex-direction: column; padding: 0.5rem 1rem; border-top: 0.0625rem solid #ddd; gap: 0.375rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap { display: flex; align-items: center; max-height: 1.25rem; gap: 1rem}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>:first-child { min-width: 5rem; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.project-input-wrap>.project-setting-name { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.project-input-wrap>input { padding: 0.125rem 0.5rem; color: #FF3D00; background: #fff; border: 0.0625rem solid #ddd !important; border-radius: 0.25rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.project-input-wrap>input:focus { outline: 0.0625rem solid #111;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.peoject-save-wrap { display: flex; align-items: center; margin-left: auto; gap: 0.5rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.peoject-save-wrap>.project-save-btn {  display: flex; justify-content: center; align-items: center; padding: 0 0.25rem; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; background: #fff; border: 0.0625rem solid #ddd !important; border-radius: 0.25rem; cursor: pointer;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.peoject-save-wrap>.project-save-btn:hover { background: #eee;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.peoject-save-wrap>.project-cancel-btn { display: flex; justify-content: center; align-items: center; padding: 0 0.25rem; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; background: #fff; border: 0.0625rem solid #ddd !important; border-radius: 0.25rem; cursor: pointer;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-name-wrap>.peoject-save-wrap>.project-cancel-btn:hover { background: #eee;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-manager-wrap { display: flex; align-items: center;  gap: 1rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-manager-wrap>.project-manager-title { min-width: 5rem; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-manager-wrap>.project-manager-name { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-location-wrap { display: flex; align-items: center; gap: 1rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-location-wrap>.project-location-title { min-width: 5rem; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-location-wrap>.project-location-lat>:first-child { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-location-wrap>.project-location-lon>:first-child { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-location-wrap>.project-location-btn { display: flex; justify-content: center; align-items: center; margin-left: auto; padding: 0 0.25rem; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; background: #fff; border: 0.0625rem solid #ddd !important; border-radius: 0.25rem; cursor: pointer;}
.archive-modal>.wrap .modal-wrap .modal-body>.connected-users-wrap>.project-setting-wrap>.project-location-wrap>.project-location-btn:hover { background: #eee;}
/* 프로젝트 위치수정 창 */
.project-location-modal { display: none; position: absolute; top: 0; z-index: 60; justify-content: center; align-items: center; width: 100%; height: 100%; background: #00000099;}
.project-location-modal .modal-wrap { display: flex; position: relative; flex-direction: column; width: 50vw; margin: auto; background: #fff; border: 0.0625rem solid #aaa; border-radius: 0.25rem; box-shadow: 0rem 0.5rem 1.5rem 0rem rgba(0, 0, 0, 0.16);}
.project-location-modal .modal-wrap .modal-head { display: flex; height: 2.25rem; padding: 0.5rem 0.5rem 0.5rem 1rem; border-bottom: 0.0625rem solid #ddd; gap: 0.5rem;}
.project-location-modal .modal-wrap .modal-head .close { min-width: 1rem; min-height: 1rem; margin-left: auto; background: url(/main/img/archive/close.svg) no-repeat center / contain; transition: 0.2s; cursor: pointer;}
.project-location-modal .modal-wrap .modal-head .title { padding-right: 0.5rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.project-location-modal .modal-wrap .modal-head .custom-select-wrap { position: relative; font-size: 0.75rem;}
.project-location-modal .modal-wrap .modal-head .custom-select-wrap .custom-select-display { width: 10rem; margin-top: -0.125rem; padding: 0.0625rem 0.5rem; font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #111; background: #fff url(/main/img/officialDoc/icon-down-sign-aaa.svg) no-repeat right 0.25rem center; background-size: 1rem; border: 0.0625rem solid #ddd; border-radius: 0.25rem; cursor: pointer;}
.project-location-modal .modal-wrap .modal-head .custom-select-wrap .custom-select-display:hover { border: 0.0625rem solid #aaa;}
.project-location-modal .modal-wrap .modal-head .custom-select-wrap .custom-select-list { display: none; position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 9999; flex-direction: column; width: 100%; max-height: 25rem; margin: 0; padding: 0; padding-left: 0.25rem; overflow-y: scroll; background: #fff; border: 0.0625rem solid #aaa; border-radius: 0.25rem; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05); list-style: none;}
.project-location-modal .modal-wrap .modal-head .custom-select-wrap .custom-select-list li { padding: 0.5rem 0.25rem; border-radius: 0.25rem; cursor: pointer;}
.project-location-modal .modal-wrap .modal-head .custom-select-wrap .custom-select-list li:hover { background: #eee;}
.project-location-modal .modal-wrap .modal-body { display: flex; position: relative; flex-direction: column; height: 45.875rem;}
.project-location-modal .modal-wrap .modal-body .mapcontainer { flex-grow: 1; width: 50rem; height: 40rem; overflow: hidden; background: #eee;}
.project-location-modal .modal-wrap .modal-body .coordinate { position: absolute; bottom: 0.5rem; left: 0.5rem; padding: 0.25rem 0.5rem; background: #fff; border: 0.0625rem solid #aaa; border-radius: 0.25rem;}
.project-location-modal .modal-wrap .modal-body .coordinate h5 { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.project-location-modal .modal-wrap .modal-body .coordinate h6 { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.project-location-modal .modal-wrap .modal-body .coordinate .top { display: flex; justify-content: space-between; align-items: center; gap: 1rem;}
.project-location-modal .modal-wrap .modal-body .coordinate .top .latitude { display: flex; align-items: center; gap: 0.5rem;}
.project-location-modal .modal-wrap .modal-body .coordinate .top .latitude h6 { width: 4.5rem;}
.project-location-modal .modal-wrap .modal-body .coordinate .top .longtitude {  display: flex;  align-items: center;  gap: 0.5rem;}
.project-location-modal .modal-wrap .modal-body .coordinate .top .longtitude h6 { width: 4.5rem;}
.project-location-modal .modal-wrap .modal-body .coordinate .bottom { display: flex; align-items: center; gap: 0.5rem;}
.project-location-modal .modal-wrap .modal-body .scale { position: absolute; top: 0.5rem; right: 0.5rem; border: 0.0625rem solid #aaa;  border-radius: 0.25rem;}
.project-location-modal .modal-wrap .modal-body .scale .up {  display: flex;  justify-content: center;  align-items: center;  width: 1.25rem;  padding: 0.25rem;  font-size: 1rem;  font-weight: 500;  line-height: 0.75rem;  background: #fff; border-bottom: 0.0625rem solid #ddd; border-radius: 0.25rem 0.25rem 0 0; cursor: pointer;}
.project-location-modal .modal-wrap .modal-body .scale .up:hover { background: #eee;}
.project-location-modal .modal-wrap .modal-body .scale .down { display: flex; justify-content: center; align-items: center; width: 1.25rem; padding: 0.25rem; font-size: 1rem; font-weight: 500; line-height: 0.75rem; background: #fff; border-radius: 0 0 0.25rem 0.25rem; cursor: pointer;}
.project-location-modal .modal-wrap .modal-body .scale .down:hover { background: #eee;}
.project-location-modal .modal-wrap .modal-body .map-wrap { position: absolute; right: 0.5rem; bottom: 0.5rem; align-items: flex-end;}
.project-location-modal .modal-wrap .modal-body .map-wrap { display: flex; flex-direction: column; gap: 0.5rem;}
.project-location-modal .modal-wrap .modal-body .map-wrap .xs-button {  display: flex; align-items: center; width: fit-content; padding: 0 0.25rem; background: #fff; border: 0.0625rem solid #aaa; border-radius: 0.25rem; cursor: pointer; gap: 0.125rem;}
.project-location-modal .modal-wrap .modal-body .map-wrap .xs-button .label { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem;}
.project-location-modal .modal-wrap .modal-body .map-wrap .xs-button .icon { min-width: 1rem; min-height: 1rem; background: url(/main/img/archive/icon-map-111.svg) no-repeat center / contain;}
.project-location-modal .modal-wrap .modal-body .map-wrap .xs-button:hover { background: #eee;}
.project-location-modal .modal-wrap .modal-foot { display: flex; justify-content: center; align-items: center; padding: 1rem 0; border-top: 0.0625rem solid #ddd; gap: 0.5rem;}
.project-location-modal .modal-wrap .modal-foot .button { display: flex;  justify-content: center;  align-items: center; width: 10rem; padding: 0.5rem 0; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; background: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; cursor: pointer;}
.project-location-modal .modal-wrap .modal-foot .button:hover { background: #eee;}
.project-location-modal .modal-wrap .modal-foot .primary-button { display: flex; justify-content: center; align-items: center; width: 10rem; padding: 0.5rem 0; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #fff; background: #1E5149; border-radius: 0.25rem; cursor: pointer;}
.project-location-modal .modal-wrap .modal-foot .primary-button:hover { background: #1B443D;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map.on { display: flex;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map { display: none; flex-direction: column; padding: 0.5rem; background: #fff; border: 0.0625rem solid #aaa; border-radius: 0.25rem; gap: 1rem;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .text-wrap { display: flex; justify-content: space-between; align-items: center;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .text-wrap .close { width: 1rem; height: 1rem; background: url(/main/img/archive/close.svg) no-repeat center / contain; transition: 0.2s; cursor: pointer;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .text-wrap .close:hover { scale: 1.5;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .radio-btn-wrap { display: flex; flex-direction: column; gap: 0.5rem;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .radio-btn-wrap { display: flex;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .radio-btn-wrap .radio-wrap { display: flex; align-items: center; padding: 0.2rem; gap: 0.2rem;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .radio-btn-wrap .radio-wrap:hover { border-radius: 0.25rem; outline: 0.125rem solid #a5b9b6; cursor: pointer;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .radio-btn-wrap .radio-wrap input[type="radio"] { width: 0.75rem; height: 0.75rem; background: #fff; border: 0.1875rem solid #fff; border-radius: 0.375rem; outline: 0.0625rem solid #A5B9B6; vertical-align: middle; appearance: none;}
.project-location-modal .modal-wrap .modal-body .map-wrap .base-map .radio-btn-wrap .radio-wrap input[type="radio"]:checked { background: #1E5149;}

/* 위치기반모델 선택 임시창 */
.model-select { display: flex; flex-direction: column; width: 12.75rem; background: #fff; border: 0.0625rem solid #aaa; border-radius: 0.25rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16); position: absolute; padding: 0.375rem 0.5rem; gap: 0.125rem; z-index: 11; }
.model-select .model-item { padding: 0.125rem 0.5rem; border-radius: 0.25rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; }
.model-select .model-item:hover { background-color: #E9EEED; }