#unipost-unidocu.layout-top #sub_content.in-page-list {margin-top: 80px;}
#unipost-unidocu.layout-top #sub_content.in-page-list #tab-menu {margin-left: 0;}

/* 통합 헤더: 탭 + 유틸리티 레일 */
/* layout-top(사이드바 없음) — 전체 폭 */
#tab-menu {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 46px;
    margin-left: -16px;
    padding-left: 8px;
    padding-right: 10px;
    background-color: var(--color-surface, #fff);
    border-bottom: 1px solid var(--color-border, #E2E8F0);
    box-sizing: border-box;
    z-index: 1000;
}
/* layout-left: 좌측 사이드바 로고 영역(#top-logo-area, 208px/접힘 48px)만큼 시작점을 밀어 겹치지 않게 함 */
.layout-left #tab-menu {
    left: 208px;
    width: calc(100% - 208px);
    margin-left: 0;
}
.layout-left.left-collapsed #tab-menu {
    left: 48px;
    width: calc(100% - 48px);
}
/* 탭 행 (가로 스크롤, 스크롤바 숨김) — 우측 유틸리티 영역(#setting-area) 폭을 먼저 확보하고 남는 공간만 차지 */
#tab-area {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 46px;
    box-sizing: border-box;
    scrollbar-width: none;
    overflow-x: auto;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
#tab-area::-webkit-scrollbar { height: 0; }
#tab-area:hover { scrollbar-width: thin; }
#tab-area:hover::-webkit-scrollbar { height: 4px; }
#tab-area::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
#tab-area:hover::-webkit-scrollbar-thumb { background: var(--color-gray-200, #E2E8F0); }

#tab-menu ul li {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: auto;
    height: 34px;
    padding: 0 6px 0 12px;
    border-radius: var(--radius-md, 6px);
    background-color: transparent;
    color: var(--color-gray-500, #64748B);
    font-weight: 500;
    font-size: 13px;
    box-sizing: border-box;
    opacity: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
#tab-menu ul li::marker {
    display: none;
    color: transparent;
}
#tab-menu ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: transparent;
    flex: none;
}
#tab-menu ul li:hover {
    background-color: var(--bg-hover, #F1F5F9);
    color: var(--color-gray-800, #1E293B);
    font-weight: 800;
}
#tab-menu ul li.on {
    background-color: var(--color-primary-subtle, #EEF3FF);
    color: var(--color-brand-700, #1540B3);
    font-weight: 800;
}
#tab-menu ul li.on::before {
    background-color: var(--color-primary, #1B4FD8);
}
#tab-menu ul li.dragging {
    cursor: pointer;
    opacity: .6;
}
#tab-menu ul li .page-name {
    overflow: hidden;
    max-width: 150px;
    margin: 0;
    word-wrap: break-word;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}
/* 활성(현재 보고 있는) 탭은 잘리지 않고 풀네임으로 표시 — 나머지 탭은 hover 시 title 툴팁으로 전체 이름 안내 */
#tab-menu ul li.on .page-name {
    max-width: none;
    text-overflow: clip;
}
#tab-menu ul li .btn-del {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-sm, 4px);
    flex: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
}
#tab-menu ul li .btn-del::before {
    display: inline-block;
    width: 9px;
    height: 9px;
    content: '';
    background: url('../images/i-delete.svg') 50% 50% no-repeat;
    background-size: 9px;
}
#tab-menu ul li:hover .btn-del {
    opacity: .65;
    pointer-events: auto;
}
#tab-menu ul li .btn-del:hover { opacity: 1 !important; }
#tab-menu ul li:only-child.on .btn-del { display: none; }

/* 홈(마이페이지) 고정 탭 — 집 아이콘, 닫기 버튼 없음, 좌측 고정 앵커
   탭이 많아 가로 스크롤이 생겨도 왼쪽에 sticky 고정된다. */
#tab-menu ul li.home-tab {
    gap: 0;
    padding: 0 12px;
    margin-right: 6px;
    position: sticky;
    left: 0;
    z-index: 2;
    flex-shrink: 0;
    background-color: var(--color-surface, #fff);
    color: var(--color-gray-500, #64748B);
}
#tab-menu ul li.home-tab::before { display: none; }
/* 고정 영역과 일반 탭 영역을 나누는 세로 구분선 — 배경이 덮이도록 박스 오른쪽 안쪽 끝에 둔다 */
#tab-menu ul li.home-tab::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: var(--color-border, #E2E8F0);
}
#tab-menu ul li.home-tab .home-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    pointer-events: none;
}
#tab-menu ul li.home-tab:hover {
    background-color: var(--bg-hover, #F1F5F9);
    color: var(--color-gray-800, #1E293B);
}
#tab-menu ul li.home-tab.on {
    background-color: var(--color-primary-subtle, #EEF3FF);
    color: var(--color-brand-700, #1540B3);
}

#context-menu {
    position: fixed;
    z-index: 30000;
    width: 150px;
    background: #fff;
    transform: scale(0);
    transform-origin: top left;
}
#context-menu.visible {
    transform: scale(1);
    transition: transform 200ms ease-in-out;
    border: 1px solid #ddd;
    border-radius: 16px;
    box-sizing: border-box;
    box-shadow: 0 8px 40px rgba(0,0,0,.1) !important;
}
#context-menu .menu-item {
    display: flex;
    align-items: center;
    position: relative;
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    color: #222;
    border-bottom: 1px solid #f4f4f6;
    box-sizing: border-box;
    cursor: pointer;
}
#context-menu .menu-item:first-child {border-radius: 16px 16px 0 0;}
#context-menu .menu-item:last-child {
    border-bottom: none;
    border-radius: 0 0 16px 16px;
}
#context-menu .menu-item:hover {background: rgba(50,180,255,0.08);}
#context-menu .menu-item:hover .ico-uni-caution02,
#context-menu .menu-item .ico-uni-confirm {
    display: none;
}
#context-menu .menu-item:hover .ico-uni-confirm {display: inline;}
#context-menu .menu-item .unicon {
    position: absolute;
    top: calc(50% - 4px);
    right: 10px;
    width: 9px;
    height: 8px;
}
#context-menu .menu-item .unicon.ico-uni-confirm::before {
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: url('../images/i-delete.svg') 50% 50% no-repeat;
    background-size: 9px 8px;
    opacity: 1;
}
#context-menu .menu-item .unicon.ico-uni-caution02::before {
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: url('../images/i-delete.svg') 50% 50% no-repeat;
    background-size: 9px 8px;
    opacity: .4;
}

/* 다크: gray-* 토큰은 라이트/다크 공통 고정값이라 탭 텍스트색만 별도 오버라이드 */
:root[data-mode="dark"] #tab-menu ul li { color: var(--color-text-secondary); }
:root[data-mode="dark"] #tab-menu ul li:hover { color: var(--color-text-primary); }
:root[data-mode="dark"] #tab-area:hover::-webkit-scrollbar-thumb { background: var(--color-border-strong); }

:root[data-mode="dark"] #context-menu { background: var(--color-surface); }
:root[data-mode="dark"] #context-menu.visible { border-color: var(--color-border); }
:root[data-mode="dark"] #context-menu .menu-item {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-border);
}
:root[data-mode="dark"] #tab-menu ul li .btn-del::before,
:root[data-mode="dark"] #context-menu .menu-item .unicon.ico-uni-confirm::before,
:root[data-mode="dark"] #context-menu .menu-item .unicon.ico-uni-caution02::before {
    background-image: url('../images/i-delete-dark.svg');
}