/**
* index.html 에서만 있던 인라인 툴바 오버라이드.
* 탭 dock 의 fusion / rail / studio 차이는 이 파일 + erp-unified-toolbar.css 조합으로 적용.
* design-guidebook-index-toolbar-snapshot.html 에도 동일 링크로 로드해 가이드북 iframe 과 실앱이 같아 보이게 함.
*/
/* 탭+메타 / 필터 — 항상 타이트한 2행(한 줄 합치기 금지 → 잘림 방지) */
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterStrip .unified-toolbar__nav.atlas-toolbar-merge {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
row-gap: 1px !important;
border-bottom: none !important;
padding: 2px clamp(6px, 1vw, 16px) 3px !important;
box-sizing: border-box !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterStrip .unified-toolbar__nav.atlas-toolbar-merge > .atlas-unified-bar {
display: flex !important;
align-items: center !important;
gap: clamp(8px, 1vw, 14px) !important;
width: 100% !important;
flex: 0 0 auto !important;
min-width: 0 !important;
max-width: 100% !important;
border-bottom: none !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-sizing: border-box !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterStrip .unified-toolbar__nav.atlas-toolbar-merge > .atlas-unified-bar .tabbar.atlas-dock--top {
min-width: 0 !important;
flex: 1 1 0% !important;
width: auto !important;
max-width: none !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterStrip .atlas-unified-meta {
order: 2 !important;
flex: 0 1 auto !important;
min-width: 0 !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterStrip .filter-strip-actions--nav {
order: 3 !important;
margin-left: auto !important;
flex: 0 0 auto !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterStrip .filter-strip-actions--nav .content-zoom-control {
white-space: nowrap !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterStrip .unified-toolbar__nav.atlas-toolbar-merge > .unified-toolbar__filters.filter-strip-row {
flex: 0 0 auto !important;
width: 100% !important;
min-width: 0 !important;
border-top: 1px solid rgba(20, 18, 26, 0.06) !important;
background: transparent !important;
padding: 2px 0 1px !important;
min-height: 0 !important;
}
body.erp-atlas[data-theme="dark"]:not(.cover-mode):not(.main-summary-mode) #filterStrip .unified-toolbar__nav.atlas-toolbar-merge > .unified-toolbar__filters.filter-strip-row {
background: transparent !important;
border-top-color: rgba(148, 163, 184, 0.14) !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) .chrome-toolbar.atlas-chrome-toolbar {
gap: 2px !important;
padding: 0 clamp(6px, 1vw, 16px) 1px !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) .unified-toolbar__nav .atlas-unified-bar {
padding: 2px clamp(6px, 1vw, 14px) !important;
gap: 8px !important;
align-items: center !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-unified-meta {
gap: 4px 8px !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .unified-toolbar__filters.filter-strip-row {
min-height: 0 !important;
align-items: center !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .filter-groups-inline .filter-group-label {
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: 0.04em !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .filter-groups-inline .filter-group > label {
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .filter-groups-inline .filter-group select {
font-size: 15px !important;
min-height: 32px !important;
height: 32px !important;
padding: 0 10px !important;
border-radius: 8px !important;
min-width: 64px !important;
max-width: 200px !important;
line-height: 1.2 !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .content-zoom-label,
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .content-zoom-value {
font-size: 15px !important;
letter-spacing: -0.02em !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .content-zoom-btn {
width: 26px !important;
height: 26px !important;
font-size: 17px !important;
border-radius: 8px !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .compact-top-filters label {
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .compact-top-filters select {
font-size: 15px !important;
min-height: 30px !important;
height: 30px !important;
padding: 0 10px !important;
border-radius: 999px !important;
line-height: 1.2 !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .mini-note {
font-size: 13px !important;
line-height: 1.25 !important;
}
body.erp-atlas[data-toolbar-variant="fusion"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock.tabbar.atlas-dock--top,
body.erp-atlas:not(.cover-mode):not(.main-summary-mode):not([data-toolbar-variant]) .unified-toolbar .atlas-dock.tabbar.atlas-dock--top {
gap: 5px !important;
padding: 5px 8px !important;
}
body.erp-atlas[data-toolbar-variant="fusion"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock--top .atlas-dock-item.tab,
body.erp-atlas:not(.cover-mode):not(.main-summary-mode):not([data-toolbar-variant]) .unified-toolbar .atlas-dock--top .atlas-dock-item.tab {
font-size: 16px !important;
font-weight: 600 !important;
padding: 12px 18px !important;
min-height: 50px !important;
letter-spacing: -0.02em !important;
line-height: 1.2 !important;
white-space: nowrap !important;
min-width: max-content !important;
}
body.erp-atlas[data-toolbar-variant="fusion"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock--top .atlas-dock-glyph,
body.erp-atlas:not(.cover-mode):not(.main-summary-mode):not([data-toolbar-variant]) .unified-toolbar .atlas-dock--top .atlas-dock-glyph {
font-size: 23px !important;
}
body.erp-atlas[data-toolbar-variant="rail"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock.tabbar.atlas-dock--top {
gap: 0 !important;
padding: 0 !important;
border-radius: 8px !important;
overflow: hidden !important;
border: 1px solid var(--line-2, rgba(20, 18, 26, 0.12)) !important;
box-shadow: none !important;
background: color-mix(in srgb, var(--panel, #fff) 94%, var(--muted-2, #64748b) 6%) !important;
}
body.erp-atlas[data-toolbar-variant="rail"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock--top .atlas-dock-item.tab {
font-size: 16px !important;
font-weight: 700 !important;
padding: 12px 18px !important;
min-height: 50px !important;
border-radius: 0 !important;
border-right: 1px solid var(--line-2, rgba(20, 18, 26, 0.1)) !important;
background: transparent !important;
box-shadow: none !important;
line-height: 1.2 !important;
white-space: nowrap !important;
min-width: max-content !important;
}
body.erp-atlas[data-toolbar-variant="rail"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock--top .atlas-dock-item.tab:last-child {
border-right: none !important;
}
body.erp-atlas[data-toolbar-variant="rail"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock--top .atlas-dock-item.tab.active {
background: linear-gradient(180deg, color-mix(in srgb, var(--primary, #2563eb) 92%, #0f172a 8%), color-mix(in srgb, var(--primary, #2563eb) 78%, #0f172a 22%)) !important;
box-shadow: inset 0 -3px 0 color-mix(in srgb, #fff 35%, transparent) !important;
color: #fff !important;
font-weight: 800 !important;
}
body.erp-atlas[data-toolbar-variant="rail"][data-theme="dark"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock.tabbar.atlas-dock--top {
background: color-mix(in srgb, var(--panel, #0f172a) 92%, #000 8%) !important;
border-color: var(--line-2, rgba(148, 163, 184, 0.2)) !important;
}
body.erp-atlas[data-toolbar-variant="rail"][data-theme="dark"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock--top .atlas-dock-item.tab.active {
background: linear-gradient(180deg, color-mix(in srgb, var(--atlas-terra-deep, #c45c3e) 90%, #000 10%), color-mix(in srgb, var(--primary, #e8a090) 65%, #1a1020 35%)) !important;
color: #fff !important;
font-weight: 800 !important;
box-shadow: inset 0 -3px 0 color-mix(in srgb, #fff 18%, transparent) !important;
}
body.erp-atlas[data-toolbar-variant="rail"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock--top .atlas-dock-glyph {
font-size: 23px !important;
}
body.erp-atlas[data-toolbar-variant="studio"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock.tabbar.atlas-dock--top {
gap: 5px !important;
padding: 5px 10px !important;
border: none !important;
box-shadow: none !important;
background: color-mix(in srgb, var(--panel, #fff) 88%, transparent) !important;
}
body.erp-atlas[data-toolbar-variant="studio"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock--top .atlas-dock-item.tab {
font-size: 16px !important;
font-weight: 600 !important;
padding: 12px 18px !important;
min-height: 50px !important;
border-radius: 10px !important;
line-height: 1.2 !important;
white-space: nowrap !important;
min-width: max-content !important;
}
body.erp-atlas[data-toolbar-variant="studio"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock--top .atlas-dock-item.tab.active {
background: linear-gradient(
145deg,
var(--primary, #2563eb) 0%,
color-mix(in srgb, var(--primary, #2563eb) 78%, #0f172a 22%) 100%
) !important;
color: #fff !important;
font-weight: 800 !important;
box-shadow:
0 3px 16px color-mix(in srgb, var(--primary, #2563eb) 38%, transparent),
0 0 0 1px color-mix(in srgb, #fff 22%, transparent) inset !important;
}
body.erp-atlas[data-toolbar-variant="studio"][data-theme="dark"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock.tabbar.atlas-dock--top {
background: color-mix(in srgb, var(--panel, #1e1b2e) 75%, transparent) !important;
}
body.erp-atlas[data-toolbar-variant="studio"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock--top .atlas-dock-glyph {
font-size: 23px !important;
}
body.erp-atlas[data-toolbar-variant="studio"][data-theme="dark"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .atlas-dock--top .atlas-dock-item.tab.active {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--atlas-terra-deep, #c45c3e) 88%, #1a1020 12%) 0%,
color-mix(in srgb, var(--primary, #e8a090) 55%, #0c0a10 45%) 100%
) !important;
color: #fff !important;
font-weight: 800 !important;
box-shadow:
0 3px 18px color-mix(in srgb, var(--atlas-terra-deep, #c45c3e) 45%, transparent),
0 0 0 1px color-mix(in srgb, #fff 14%, transparent) inset !important;
}
body.erp-atlas[data-toolbar-variant="rail"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .filter-groups-inline .filter-group select {
border-radius: 5px !important;
font-weight: 600 !important;
}
body.erp-atlas[data-toolbar-variant="studio"]:not(.cover-mode):not(.main-summary-mode) .unified-toolbar .filter-groups-inline .filter-group select {
border-radius: 10px !important;
min-height: 28px !important;
height: 28px !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterStripBody {
row-gap: 0 !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterStrip .filter-strip-row {
gap: 6px !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterBox {
gap: 6px !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterStrip.filter-strip .unified-toolbar__filters.filter-strip-row {
padding: 4px clamp(6px, 1vw, 16px) !important;
}
body.erp-atlas[data-toolbar-variant="rail"]:not(.cover-mode):not(.main-summary-mode) #filterStrip.filter-strip .unified-toolbar__filters.filter-strip-row {
padding: 3px clamp(6px, 1vw, 14px) 3px 10px !important;
}
body.erp-atlas[data-toolbar-variant="studio"]:not(.cover-mode):not(.main-summary-mode) #filterStrip.filter-strip .unified-toolbar__filters.filter-strip-row {
padding: 4px clamp(6px, 1vw, 14px) 5px !important;
}
/* ═══ #tabbar: 탭 버튼 가로 균등 분배 → 패널 폭 활용·우측 빈 여백 축소 (atlas-skin 의 flex:0·min-width:max-content 보완) ═══ */
@media (min-width: 800px) {
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterStrip #tabbar.tabbar.atlas-dock--top {
overflow-x: hidden !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterStrip #tabbar > button.tab.atlas-dock-item,
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterStrip #tabbar > .tab.atlas-dock-item {
flex: 1 1 0% !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
padding-left: clamp(3px, 0.5vw, 12px) !important;
padding-right: clamp(3px, 0.5vw, 12px) !important;
gap: clamp(4px, 0.5vw, 8px) !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterStrip #tabbar > .tab.atlas-dock-item .atlas-dock-cap {
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
}
@media (min-width: 1100px) {
body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #filterStrip .atlas-unified-meta {
max-width: min(300px, 24vw) !important;
}
}