/** * 통합 툴바: 페이지(탭·기간·메타) + 필터를 하나의 셸로 묶음. * 변형 전환: * fusion — 기본 2단(내비 / 필터 웰), 은은한 구분 * rail — 좌측 액센트 레일 + 밀도 높은 한 덩어리 느낌 * studio — 상하 인셋 + 둥근 카드형 셸 */ /* ─── 셸: chrome-toolbar는 래퍼만 ─── */ body:not(.cover-mode) .chrome-toolbar { display: block !important; grid-template-rows: none !important; box-sizing: border-box; } .unified-toolbar.filter-strip { display: flex; flex-direction: column; width: 100%; margin: 0; gap: 0; box-sizing: border-box; } /* base의 .filter-strip 패딩이 통합 셸 전체에 들어가지 않도록 */ body:not(.cover-mode) .unified-toolbar.filter-strip { padding: 0 !important; } /* * erp-app-base.css TOOLBAR v5: .filter-strip 에 height/max-height: var(--bar-h)(46px) 고정. * 통합 후 #filterStrip 이 .filter-strip 이므로 탭+필터 전체가 46px로 잘리고 overflow:hidden 으로 안 보임. */ html body:not(.cover-mode) .unified-toolbar.filter-strip { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; align-items: stretch !important; } html body:not(.cover-mode) .unified-toolbar .unified-toolbar__filters.filter-strip-row { height: auto !important; min-height: var(--bar-h, 46px) !important; max-height: none !important; overflow-x: auto !important; overflow-y: visible !important; flex-wrap: wrap !important; } html body:not(.cover-mode) .unified-toolbar #filterBox { height: auto !important; max-height: none !important; min-height: var(--item-h, 28px) !important; overflow-x: auto !important; overflow-y: visible !important; } /* 상단 크롬이 자식을 잘라내지 않도록 */ html body:not(.cover-mode) .chrome-toolbar:has(.unified-toolbar) { overflow: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; } .unified-toolbar__nav { width: 100%; min-width: 0; box-sizing: border-box; } .unified-toolbar__nav > .toolbar.nav-combined, .unified-toolbar__nav > .atlas-unified-bar { width: 100%; box-sizing: border-box; } .unified-toolbar__filters.filter-strip-row { width: 100%; min-width: 0; box-sizing: border-box; } /* 이전 이웃 규칙 제거: 내부 툴바는 셸과 붙음 */ body:not(.cover-mode) .unified-toolbar__nav .toolbar.nav-combined { border-radius: 0 !important; margin: 0 !important; } body:not(.cover-mode) .unified-toolbar .toolbar.nav-combined::after { display: none !important; } /* 토글 제거: 인라인 필터(매출단위 등)는 항상 표시 */ #filterStrip.unified-toolbar .filter-groups-inline, .unified-toolbar.filter-strip .filter-groups-inline { display: flex !important; } /* ═══ Variant: fusion (기본 2단 웰) ═══ */ body[data-toolbar-variant="fusion"]:not(.cover-mode) .chrome-toolbar, body:not(.cover-mode):not([data-toolbar-variant]) .chrome-toolbar { padding: 0 !important; background: transparent !important; border-bottom: none !important; box-shadow: none !important; } body[data-toolbar-variant="fusion"]:not(.cover-mode) .unified-toolbar.filter-strip, body:not(.cover-mode):not([data-toolbar-variant]) .unified-toolbar.filter-strip { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; } body[data-toolbar-variant="fusion"]:not(.cover-mode) .unified-toolbar__nav, body:not(.cover-mode):not([data-toolbar-variant]) .unified-toolbar__nav { border-bottom: 1px solid var(--line-2, rgba(0, 0, 0, 0.08)); } body[data-toolbar-variant="fusion"]:not(.cover-mode) .unified-toolbar__filters, body:not(.cover-mode):not([data-toolbar-variant]) .unified-toolbar__filters { background: color-mix(in srgb, var(--panel, #fff) 94%, var(--muted-2, #64748b) 6%); padding: 10px 18px; } body[data-theme="dark"][data-toolbar-variant="fusion"]:not(.cover-mode) .unified-toolbar__filters, body[data-theme="dark"]:not(.cover-mode):not([data-toolbar-variant]) .unified-toolbar__filters { background: color-mix(in srgb, var(--panel, #0f172a) 88%, #000 12%); } /* ═══ Variant: rail ═══ */ body[data-toolbar-variant="rail"]:not(.cover-mode) .chrome-toolbar { padding: 0 !important; background: transparent !important; border-bottom: none !important; } body[data-toolbar-variant="rail"]:not(.cover-mode) .unified-toolbar.filter-strip { border-radius: 0 !important; border-left: 4px solid var(--primary, #2563eb); box-shadow: none !important; } body[data-toolbar-variant="rail"]:not(.cover-mode) .unified-toolbar__nav { border-bottom: 2px solid var(--line-2, rgba(0, 0, 0, 0.1)); padding-left: 2px; } body[data-toolbar-variant="rail"]:not(.cover-mode) .unified-toolbar__filters { padding-top: 6px; padding-bottom: 6px; padding-left: 10px; background: var(--panel-shell, var(--panel, #fff)); } body[data-theme="dark"][data-toolbar-variant="rail"]:not(.cover-mode) .unified-toolbar__filters { background: var(--panel-shell, var(--panel, #0f172a)); } /* ═══ Variant: studio (인셋 카드) ═══ */ body[data-toolbar-variant="studio"]:not(.cover-mode) .chrome-toolbar { padding: 10px 14px 12px !important; background: var(--panel-shell, var(--bg-1, #f8fafc)) !important; border-bottom: 1px solid var(--panel-shell-border, var(--line-2)) !important; } body[data-toolbar-variant="studio"]:not(.cover-mode) .unified-toolbar.filter-strip { border-radius: 14px !important; overflow: hidden; border: 1px solid var(--line-2, rgba(0, 0, 0, 0.08)) !important; box-shadow: var(--shadow-soft, 0 4px 24px rgba(0, 0, 0, 0.06)) !important; } body[data-toolbar-variant="studio"]:not(.cover-mode) .unified-toolbar__nav { border-bottom: 1px solid var(--line-2, rgba(0, 0, 0, 0.06)); } body[data-toolbar-variant="studio"]:not(.cover-mode) .unified-toolbar__filters { background: color-mix(in srgb, var(--panel, #fff) 96%, transparent); padding: 8px 14px 10px; } body[data-theme="dark"][data-toolbar-variant="studio"]:not(.cover-mode) .unified-toolbar__filters { background: color-mix(in srgb, var(--panel, #0f172a) 92%, transparent); } @media (max-width: 760px) { body[data-toolbar-variant="studio"]:not(.cover-mode) .chrome-toolbar { padding: 6px 8px 8px !important; } body[data-toolbar-variant="studio"]:not(.cover-mode) .unified-toolbar.filter-strip { border-radius: 10px !important; } }