/* 셸 레이아웃. DevExpress 테마 **뒤에** 실린다(JSiniHead 의 link 순서). [DevExpress 데모의 껍데기를 본떴다] demos.devexpress.com/blazor 의 배치를 그대로 가져왔다 — 얇은 상단 바, 왼쪽에 검색이 달린 메뉴 판, 본문 위의 현재 위치 줄. 업무 화면이 145개라 껍데기가 스스로를 드러내지 않는 편이 낫고, 그 데모가 정확히 그렇게 생겼다. [여기에 넣는 것과 넣지 않는 것] · 넣는 것 — 셸의 뼈대(헤더·사이드바·탭·브레드크럼), 로그인·오류 화면, 모듈 여섯이 함께 쓰는 화면 조각(제목 줄·안내 줄·통계 타일) · 넣지 않는 것 — 한 업무만 쓰는 스타일. 그건 그 모듈의 wwwroot 로 간다 (`IPortalModule.StyleSheet`). 여기에 업무별 규칙이 쌓이면 모듈을 나눈 의미가 스타일에서부터 사라진다. [색을 DevExpress 변수에 붙이는 이유] 테마가 다섯이고 사용자가 고른다. 우리 색을 직접 박으면 그리드·달력·팝업만 테마를 따라가고 사이드바·헤더는 그대로 남아서 **한 화면에 두 테마**가 된다. DevExpress 가 내보내는 변수(`--dxbl-*`)를 먼저 쓰고, 없을 때만 우리 값으로 떨어진다. */ :root { /* 사이드바의 **시작 폭**이다. 지금 폭은 여기서 정하지 않는다 — 구분선을 끌면 스플리터의 판이 정하고(`MainLayout` 의 `_sidebarWidth`, 브라우저에 남는다) 이 값은 그 기본값(330px, DevExpress 데모와 같다)과 좁은 화면의 덮개 폭에만 쓰인다. **두 곳이 같은 값이어야 한다** — `MainLayout._sidebarWidth` 의 기본값이 다르면 첫 그림에서 격자 칸과 판의 폭이 어긋난다. */ --jsini-sidebar-width: 330px; /* 데모의 3.5rem 이 「보통」의 값이다. 글자를 작게 하면 그 배율만큼 낮아지고, 크게 해도 여기서 멈춘다(`--jsini-chrome-scale`). 낮아지는 것까지 함께 하는 이유는, 아이콘과 로고만 줄이면 **띠는 그대로 높아서** 작은 아이콘이 빈 띠 가운데 떠 보이기 때문이다. 이 값 하나로 격자·모바일 사이드바·테마 서랍이 다 따라온다. */ --jsini-header-height: calc(3.5rem * var(--jsini-chrome-scale)); /* 아이콘 한 변의 길이. **한동안 `1em` 이었다.** 글자 한 자와 똑같은 크기라는 뜻인데, 대문자 높이가 1em 의 0.7 쯤이라 아이콘이 **글자처럼 보이고 단추처럼 안 보였다.** 헤더 도구줄과 표 아래 엑셀 아이콘이 모두 그래서 작았다. 한 자와 같은 크기로 두지 않는다 — 아이콘은 글자가 아니라 과녁이라 조금 커야 한다. 다만 크기 모드는 따라간다(아래 사다리의 1.32배). 사용자가 Large 를 골랐는데 누르는 자리만 그대로면 그것대로 어긋나 보인다. 자리마다 다르게 하고 싶으면 그 자리에서 이 변수만 덮는다. */ --jsini-icon-size: calc(var(--jsini-fs-base) * 1.32); /* DevExpress 가 주는 값이 있으면 그것을 쓴다. 두 번째 값은 그 테마가 변수를 안 내보낼 때를 위한 것이다. */ --jsini-bg: var(--dxbl-body-bg, #ffffff); --jsini-surface: var(--dxbl-panel-bg, #f7f8fa); --jsini-border: var(--dxbl-border-color, #e3e5e8); --jsini-text: var(--dxbl-body-color, #1f2328); --jsini-text-muted: #6b7280; /* 강조색만 이름이 하나가 아니다. Fluent 무리는 고른 색을 `--dxds-color-surface-primary-default-rest`(=`--dxds-primary-90`)로 내보내고, Classic·Bootstrap 무리는 `--bs-primary` 로 내보낸다. 실린 테마가 주지 않는 이름은 통째로 건너뛰므로 var() 를 겹쳐 셋을 차례로 본다. **`--dxbl-primary` 를 보고 있었다.** 그런 변수는 DevExpress 어디에도 없어서 스물둘 중 무엇을 골라 두었든 늘 맨 뒤의 보라로 굳어 있었다 — 테마를 바꿔도 따라오지 않던 것(떠다니는 메뉴 단추 · 탭 밑줄 · 즐겨찾기 별)이 다 이것이다. */ --jsini-accent: var(--dxds-color-surface-primary-default-rest, var(--bs-primary, #7b1fa2)); } :root[data-theme='dark'] { --jsini-bg: var(--dxbl-body-bg, #16181d); --jsini-surface: var(--dxbl-panel-bg, #1e2128); --jsini-border: var(--dxbl-border-color, #2d313a); --jsini-text: var(--dxbl-body-color, #e6e8ea); --jsini-text-muted: #9aa1ab; --jsini-accent: var(--dxds-color-surface-primary-default-rest, var(--bs-primary, #c07ee0)); } /* ── 글자 크기 사다리 ─────────────────────────────────────── [왜 사다리가 필요한가 — `0.8rem` 을 박으면 안 되는 이유] `rem` 은 `` 의 크기(16px)에 묶인다. **그런데 본문은 16px 이 아니다.** DevExpress 테마가 `body { font-size: var(--dxds-font-size-base-md) }` 로 14px 을 걸어 두기 때문이다. 그래서 `0.8rem` 라벨(12.8px)은 옆에 선 DevExpress 편집기(14px)보다 작고, 그 어긋남이 화면마다 조금씩 쌓여 **"내용이 좀 작게 느껴진다"** 가 된다. 더 나쁜 것은 사용자가 크기를 Large 로 바꿔도 이 값들은 꿈쩍하지 않는다는 점이다 — 단추와 그리드만 커지고 라벨·배지·통계 숫자는 그대로다. 그래서 모든 글자 크기를 이 사다리로만 적는다. 사다리의 뿌리는 DevExpress 크기 모드를 따라가므로, 크기를 바꾸면 화면의 글자가 통째로 함께 움직인다. [뿌리 값은 DevExpress 가 정한 것이다] `--dxds-font-size-base-sm/md/lg` 를 그대로 옮겨 적었다. 우리가 고른 값이 아니다 — 다르게 적으면 우리 글자와 DevExpress 부품의 글자가 어긋난다. Small 0.75rem (12px) Medium 0.875rem (14px) ← DevExpress 기본 Large 1rem (16px) `data-dx-size` 는 theme.js 가 안에서 동기로 세운다. 스타일시트를 기다리지 않으므로 첫 그림부터 맞는 크기다. [배수는 눈대중이 아니라 옛 값에서 뽑았다] Medium 에서 각 단이 옛 하드코딩 값과 거의 같은 픽셀이 되도록 잡았다 (2xs 10.9 · xs 12.0 · sm 13.0 · md 14.0 · lg 15.4 · xl 17.1 · 2xl 20.3 · 3xl 24.5 · 4xl 28.7). 그래서 Medium 화면은 이 작업 전과 사실상 같고, 달라지는 것은 **Small·Large 를 골랐을 때 비로소 따라온다**는 점뿐이다. ------------------------------------------------------------ */ :root { --jsini-fs-base: 0.875rem; /* 헤더 껍데기(아이콘 · 로고 · 띠 높이)가 따라갈 배율. [글자와 따로 두는 이유가 둘이다] 하나는 **작아질 때만 따라가야** 한다는 것이다. 글자를 크게 하면 사다리는 1rem 까지 오르지만 헤더 아이콘까지 커지면 띠에 아이콘이 꽉 차 답답해진다. 그래서 이 값은 **「조금작게」에서 멈춘다(0.929).** 「보통」·「크게」를 골라도 껍데기는 더 커지지 않는다 — 글자만 커진다. 한동안 캡이 「보통」(1)이었는데 그 둘이 여전히 크게 느껴졌다. 또 하나는 헤더가 본문보다 한 단계 큰 아이콘을 쓰기 때문이다 (`.jsini-header` 의 `--jsini-icon-size`). 글자 사다리를 그대로 쓰면 그 「한 단계 크게」가 없어진다. 배율만 받아 자기 기준값에 곱한다. 값은 `--jsini-fs-base / 0.875rem`(보통 기준)이다. CSS 는 길이를 길이로 나눌 수 없어서 미리 계산해 적는다 — 사다리를 고치면 이 줄도 같이 고친다. */ --jsini-chrome-scale: 0.929; --jsini-fs-2xs: calc(var(--jsini-fs-base) * 0.78); --jsini-fs-xs: calc(var(--jsini-fs-base) * 0.86); --jsini-fs-sm: calc(var(--jsini-fs-base) * 0.93); --jsini-fs-md: var(--jsini-fs-base); --jsini-fs-lg: calc(var(--jsini-fs-base) * 1.1); --jsini-fs-xl: calc(var(--jsini-fs-base) * 1.22); --jsini-fs-2xl: calc(var(--jsini-fs-base) * 1.45); --jsini-fs-3xl: calc(var(--jsini-fs-base) * 1.75); --jsini-fs-4xl: calc(var(--jsini-fs-base) * 2.05); } /* 뿌리 값. **DevExpress 가 정한 세 값 사이에 우리 두 단계를 끼운 것이다.** 0.75(Small) · 0.875(Medium) · 1(Large) 은 DevExpress 가 정한 값을 그대로 옮긴 것이고, 아래 둘은 그 사이·아래로 우리가 넣었다. xxsmall 0.625rem 10px Small 아래 xsmall 0.6875rem 11px Small 아래 small 0.75rem 12px ← DevExpress Small compact 0.8125rem 13px Small~Medium 사이 medium 0.875rem 14px ← DevExpress Medium (기본값, :root 에 있다) large 1rem 16px ← DevExpress Large **부품 크기는 이 사다리와 별개다.** 우리가 넣은 세 단계는 DevExpress Small 로 접히므로 (`ThemeSize.Steps`) 줄 높이·단추 높이는 「작게」와 같고 글자만 다르다. 그것이 그 단계들의 뜻이다 — 같은 밀도에서 글자만 조절한다. */ :root[data-dx-size='xxsmall'] { --jsini-fs-base: 0.625rem; --jsini-chrome-scale: 0.714; } :root[data-dx-size='xsmall'] { --jsini-fs-base: 0.6875rem; --jsini-chrome-scale: 0.786; } :root[data-dx-size='small'] { --jsini-fs-base: 0.75rem; --jsini-chrome-scale: 0.857; } /* 여기가 껍데기의 **최대**다. 아래 둘이 이 값을 그대로 쓴다. */ :root[data-dx-size='compact'] { --jsini-fs-base: 0.8125rem; --jsini-chrome-scale: 0.929; } /* **「보통」·「크게」의 배율은 「조금작게」와 같다.** 사다리는 0.875 → 1rem 으로 계속 오르지만 껍데기는 여기서 멈춘다 — 글자만 커진다. (`:root` 의 기본값도 같은 0.929 다 — 기본 단계가 「보통」이므로.) */ :root[data-dx-size='medium'] { --jsini-fs-base: 0.875rem; --jsini-chrome-scale: 0.929; } :root[data-dx-size='large'] { --jsini-fs-base: 1rem; --jsini-chrome-scale: 0.929; } /* ── 간격·모서리·그림자 사다리 (base-design) ──────────────── [글자 사다리와 같은 이유로 필요하다] 위에서 글자 크기를 사다리로 묶은 것과 **똑같은 문제가 여백에 있었다.** `0.85rem` · `0.9rem` · `0.7rem` · `0.4rem` 처럼 자리마다 다른 값이 박혀 있어서, 나란히 놓인 두 판의 안쪽 여백이 1~2px 씩 어긋난다. 한 화면만 보면 안 보이고 화면을 옮겨 다닐 때 「뭔가 들쭉날쭉하다」로만 느껴진다. [뿌리 값은 DevExpress 가 정한 것이다] DevExpress Design System 의 기본 토큰(`--dxds-*`)을 그대로 딛는다 (docs.devexpress.com/DesignSystem/405636/foundation). 우리가 고른 숫자가 아니다 — 그리드·팝업·달력의 안쪽 여백이 이미 그 사다리로 잡혀 있어서, 다른 사다리를 쓰면 우리 판과 DevExpress 부품의 여백이 영영 안 맞는다. 그쪽 이름은 `160 = 1rem` 인 **1px 격자의 숫자**다(`--dxds-spacing-40` = 0.25rem). 숫자를 그대로 쓰면 읽는 쪽이 매번 나눗셈을 해야 해서, 글자 사다리와 같은 이름(2xs…3xl)으로 다시 붙였다. 두 번째 값은 그 테마가 토큰을 안 내보낼 때를 위한 것이다 — Classic· Bootstrap 테마에는 `--dxds-*` 가 없다. [답답하던 것을 여기서 푼다] 판의 안쪽 여백이 **한 단계씩 좁게** 잡혀 있었다(조회 영역 13.6px, 본문 위 17.6px). 사다리로 옮기면서 그 자리들을 한 단 올렸다 — 늘어나는 것은 여백뿐이고 글자와 줄 높이는 그대로다. ------------------------------------------------------------ */ :root { /* 셸 본문의 바깥 여백. **위·아래·좌우를 따로 둔다** — 셋이 서로 다른 값이고 폭에 따라 또 갈린다(휴대폰 값은 바로 아래에서 다시 적는다). 눈금(`--jsini-sp-*`)을 쓰지 않는 것은 좌우가 2px 이기 때문이다. 눈금에 없는 값이고, 가까운 칸(3xs=2px)을 당겨 쓰면 그 칸을 쓰는 다른 자리들이 본문 여백을 고칠 때마다 함께 움직인다. 쓰는 곳은 `.jsini-shell__content` 뿐이다 — `app.css` 에 셋, `tabler.css` 에 `!important` 로 하나. */ --jsini-shell-pad-top: 1rem; --jsini-shell-pad-bottom: 1rem; --jsini-shell-pad-inline: 0.5rem; /* 업무 화면이 제 바닥에 세우는 단추 줄(`.jsini-actbar`)의 높이. 휴대폰에서 그 줄은 **화면의 맨 아래 칸**(하단 띠 바로 위)을 갖고, 떠다니는 단추(☰ · ✎)는 그 위로 올라선다. 올라서는 거리를 재는 자가 이 값이다 — 줄 자신은 `min-height` 로 이만큼을 **보장하고**, 셸은 같은 값만큼 단추를 민다. 둘이 같은 토큰을 보므로 한쪽만 고쳐 어긋날 일이 없다. 3.5rem(56px)은 **재어 나온 값**이다 — 390×844 에서 단추 한 줄에 줄의 위아래 여백(0.5rem 씩)을 더해 57px 이었다(Tabler 테마. 테마를 안 입히면 49px 이라, 두꺼운 쪽에 맞춘다). 떠다니는 단추는 여기에 제 틈 (76px 중 16px)을 더 갖고 올라서므로 1~2px 의 어긋남은 그 틈이 먹는다. */ --jsini-actbar-height: 3.5rem; /* 휴대폰 아래 띠(`.jsini-bottom-nav`)의 높이. **안전 영역은 안 들어 있다** — 그 몫은 쓰는 자리마다 `env(safe-area-inset-bottom)` 으로 따로 더한다. 띠가 자리를 차지하면 본문 · 사이드바 · 프로필 판 · 떠다니는 단추 · 오른쪽 서랍 · 단추 줄이 그만큼 비켜선다 — 세어 보면 아홉 자리다. 숫자를 베껴 적어 두면 **띠 높이를 한 번 바꿀 때 그 아홉을 모두 찾아야 하고 하나는 반드시 빠진다.** 빠진 자리는 「마지막 줄이 띠에 깔린다」나 「띠 위에 빈 띠가 하나 더 있다」로 보인다. [이름을 감추면 이 값이 줄어든다] 띠의 칸은 아이콘(20px) 위에 이름(11px)을 얹는다. 환경설정에서 **이름을 감추기로** 하면 그 줄이 통째로 빠지므로 띠도 그만큼 얇아야 한다 (`.jsini-shell--bottomnav-nolabel`). 줄어든 16px 은 **본문이 가져간다** — 위 아홉 자리가 모두 이 토큰을 보고 있어서 저절로 따라온다. */ --jsini-bottomnav-h: 60px; --jsini-sp-3xs: var(--dxds-spacing-20, 0.125rem); /* 2px */ --jsini-sp-2xs: var(--dxds-spacing-40, 0.25rem); /* 4px */ --jsini-sp-xs: var(--dxds-spacing-60, 0.375rem); /* 6px */ --jsini-sp-sm: var(--dxds-spacing-80, 0.5rem); /* 8px */ --jsini-sp-md: var(--dxds-spacing-120, 0.75rem); /* 12px */ --jsini-sp-lg: var(--dxds-spacing-160, 1rem); /* 16px */ --jsini-sp-xl: var(--dxds-spacing-200, 1.25rem); /* 20px */ --jsini-sp-2xl: var(--dxds-spacing-240, 1.5rem); /* 24px */ --jsini-sp-3xl: var(--dxds-spacing-320, 2rem); /* 32px */ --jsini-radius-sm: var(--dxds-border-radius-40, 0.25rem); --jsini-radius-md: var(--dxds-border-radius-60, 0.375rem); --jsini-radius-lg: var(--dxds-border-radius-80, 0.5rem); --jsini-radius-xl: var(--dxds-border-radius-120, 0.75rem); --jsini-radius-full: var(--dxds-border-radius-full, 62rem); --jsini-shadow-xs: var(--dxds-box-shadow-xs, 0 1px 2px rgb(0 0 0 / 14%)); --jsini-shadow-sm: var(--dxds-box-shadow-sm, 0 2px 4px rgb(0 0 0 / 14%)); --jsini-shadow-md: var(--dxds-box-shadow-md, 0 4px 8px rgb(0 0 0 / 14%)); --jsini-shadow-lg: var(--dxds-box-shadow-lg, 0 8px 16px rgb(0 0 0 / 14%)); /* 라벨이 **안에 떠 있는** 입력 칸의 높이. DevExpress 기본 편집기는 32px 이다. 그 안에 라벨을 얹을 자리가 없어서 (글자 14px + 위아래 5px) 라벨이 들어가는 칸만 이만큼 키운다. **모든 편집기를 키우지 않는다.** 표 안의 거르개 줄·셀 편집기까지 커지면 줄 높이가 통째로 늘어 한 화면에 보이는 줄이 줄어든다 — 그쪽은 라벨이 없으므로 키울 까닭도 없다. */ /* 라벨이 **들어가 앉을 수 있는** 칸 높이. DevExpress 기본 편집기는 32px 인데 그 안에 라벨이 내려앉을 자리가 없다(글자 14px + 위아래 5px). **32px 이다 — DevExpress 기본 편집기와 같은 값.** 라벨이 테두리로 나가 있으므로 칸 안에는 글자 한 줄만 있으면 되고, 그러면 기본값보다 키울 까닭이 없다. 글자(20px)에 위아래 4.8px 씩과 테두리 2px 을 더한 값이다. 42 → 38 → 32 로 내려왔다. 앞의 둘은 라벨이 칸 **안**에 있던 시절의 값이거나(42) 그 자국이 남은 값이다(38). */ --jsini-field-h: 2rem; /* 떠오른 라벨의 한가운데가 테두리에 오도록 **위로 반 줄** 올린다. 칸 위끝이 0 이라 자기 높이의 절반만큼 음수다. 0.6 은 글자 크기에 줄 간격(1.2)을 반으로 접은 값이다. */ --jsini-field-label-top: calc(var(--jsini-fs-2xs) * -0.6); } /* [휴대폰은 값이 다르다] 위 0.5rem · 아래 1rem · 좌우 2px. 좌우를 2px 까지 좁히는 것은 좁은 화면에서 한 뼘이 통째로 자리값이기 때문이고, 위아래를 남기는 것은 머리글 줄과 하단 띠에 본문이 바싹 붙지 않게 하기 위해서다. 값을 규칙마다 다시 적지 않고 **토큰만 다시 적는다.** 이 여백을 보는 자리가 네 군데인데(`app.css` 셋, `tabler.css` 의 `!important` 하나) 그중 하나라도 빠뜨리면 **그 한 폭에서만 옛 값이 남는다** — 실제로 그랬다. 8px 짜리 테마 규칙 하나를 못 보고 넘겨서, 토큰을 내린 뒤에도 휴대폰만 8px 로 서 있었다. **아래쪽은 이 값이 전부가 아니다.** 하단 띠(60px + 안전영역)만큼은 따로 비켜야 마지막 줄에 닿을 수 있고, 그것은 여백이 아니라 자리 비킴이라 `calc()` 안에서 이 값에 더해진다. */ @media (max-width: 767px) { :root { --jsini-shell-pad-top: 0.5rem; --jsini-shell-pad-bottom: 1rem; --jsini-shell-pad-inline: 2px; } } /* 글꼴은 **여기서 정하지 않는다.** 테마가 거는 것을 쓴다. 글자 크기는 위 사다리의 뿌리로 덮는다. DevExpress 의 global.min.css 가 body 에 `--dxds-font-size-base-md` 를 박아 두는데, 그 값은 크기 모드와 무관하게 늘 14px 이라 Large 를 골라도 본문 글자가 안 커진다. 줄 간격도 함께 덮는다. 테마가 주는 것은 `1.25rem` 처럼 **고정 길이**라 글자만 커지면 줄이 붙어 버린다. 비율(1.45)로 두면 따라 늘어난다 — 1.45 는 테마의 14px/1.25rem 과 같은 비율이라 Medium 에서는 달라지지 않는다. */ html, body { height: 100%; margin: 0; background: var(--jsini-bg); color: var(--jsini-text); } body { font-size: var(--jsini-fs-md); /* 데모(demos.devexpress.com/blazor)에서 잰 값이다 — 14px 글자에 21px 줄, 곧 1.5. 우리는 1.45 였고 그 0.05 가 글이 많은 화면에서 답답함으로 쌓인다. */ line-height: 1.5; } .jsini-hidden { display: none !important; } /* ── 셸 뼈대 ───────────────────────────────────────────────── **DevExpress 데모(demos.devexpress.com/blazor)의 치수를 그대로 옮겼다.** 데모의 `dx-demo.css` 에서 값을 읽어 왔다 — 눈대중이 아니다. 헤더 3.5rem (56px) 사이드바 330px 검색 칸 3rem (48px) 브레드크럼 3rem 본문 여백 1.1rem 1.5rem 0 격자 두 줄 · 두 칸이다. ┌──────────────────────────────┐ │ 헤더 (두 칸에 걸친다) │ ├───────────┬──────────────────┤ │ 사이드바 │ 본문 │ └───────────┴──────────────────┘ 사이드바를 접을 때 **격자를 바꾸지 않고 폭만 0 으로** 만든다. 데모도 그렇게 한다(`width: 0` + `transition: width .2s`). 격자를 바꾸면 본문이 통째로 다시 배치되어 스크롤 위치가 튄다. ------------------------------------------------------------ */ .jsini-shell { display: grid; grid-template-columns: var(--jsini-sidebar-width) 1fr; grid-template-rows: var(--jsini-header-height) 1fr; height: 100vh; overflow: hidden; transition: grid-template-columns 0.2s ease-in-out; } .jsini-shell--collapsed { grid-template-columns: 0 1fr; } /* 아래 띠의 **이름을 감추기로** 한 사람에게 붙는 표시(`MainLayout.ShellCss`). 띠가 아이콘 한 줄 높이로 얇아지고, 띠를 피해 서 있던 것들이 그 차이 (16px)만큼 아래로 내려온다 — 본문이 세로로 그만큼을 돌려받는다. **44px 은 손가락이 빗나가지 않는 최소 높이다.** 아이콘(20px)만 남으면 28px 까지 줄일 수도 있지만, 그 띠는 칸 여덟이 나란히 선 자리라 세로로 좁히는 만큼 오타가 는다. 줄이는 것은 글자가 쓰던 16px 까지다. */ .jsini-shell--bottomnav-nolabel { --jsini-bottomnav-h: 44px; } /* ── 좁은 화면에서 메뉴를 여닫는 둘 ─────────────────────── 덮개(`__scrim`)와 떠다니는 단추(`__fab`)다. 생김새는 여기 한곳에 적고 **보이고 안 보이고는 아래 미디어 쿼리(≤767px)가 정한다** — 둘 다 기본은 안 보임이다. 넓은 화면에는 늘 자리를 차지하는 사이드바와 구분선의 접기 화살표가 있어서, 덮을 것도 띄울 것도 없다. `MainLayout` 이 **마크업은 늘 그린다.** 화면 크기로 갈아 끼우지 않는 그 파일의 규칙대로고, 그래야 프리렌더(화면 크기를 모른다)에서 나간 그림과 회로가 붙은 뒤의 그림이 같다. ---------------------------------------------------------- */ .jsini-shell__scrim { display: none; position: fixed; /* 헤더는 덮지 않는다. 사용자 메뉴(`.jsini-user__scrim`)의 덮개와 같은 자리다 — 메뉴가 펴져 있어도 알림·프로필은 눌려야 한다. 다시 닫는 일은 떠다니는 단추가 맡는다(이 덮개보다 위에 뜬다). 덮지 않을 뿐 **누르면 닫힌다** — 그 띠의 누름은 레이아웃이 직접 받는다 (`MainLayout.OnHeaderClick`). 덮개를 여기까지 늘리면 단추가 한 번에 안 눌린다. */ inset: var(--jsini-header-height) 0 0 0; /* 사이드바(1030)보다 **아래**, 본문보다 위. 판은 덮개 위에 떠 있어야 하고 본문은 그 아래로 잠겨야 한다. */ z-index: 1029; /* 옅게 어둡힌다. 아예 투명하면 「눌러서 닫는 자리」인 줄 모르고, 짙으면 본문이 없어진 것처럼 보여 메뉴를 열어 보기가 망설여진다. */ background: rgb(0 0 0 / 35%); } /* 떠다니는 메뉴 단추. **왼쪽 아래**다 — 사이드바가 나오는 쪽이고, 한 손으로 쥔 휴대폰에서 엄지가 닿는 쪽이다. `env(safe-area-inset-*)` 을 더한다. 아이폰의 홈 막대와 노치 있는 기기의 왼쪽 여백 안에 들어가면 **단추의 아래 절반이 안 눌린다.** 지원하지 않는 브라우저에서는 0 이라 0.75rem 그대로다. */ .jsini-shell__fab { display: none; position: fixed; left: calc(0.75rem + env(safe-area-inset-left)); bottom: calc(0.75rem + env(safe-area-inset-bottom)); z-index: 1031; /* 손가락으로 누르는 단추다. 접근성 안내가 말하는 최소 44px 를 넘긴다. */ width: 3rem; height: 3rem; align-items: center; justify-content: center; padding: 0; border-radius: 50%; box-shadow: 0 3px 10px rgb(0 0 0 / 30%); cursor: pointer; /* ── 속을 채우지 않는다 ────────────────────────────────────── 한동안 이 단추만 강조색으로 **통째로 칠해져** 있었다. `opacity: 0.8` 은 그때도 똑같이 걸려 있었는데, 짙은 색이 깔린 동그라미는 0.8 이어도 뒤가 안 비친다 — **재어 봤다**(390px 폭 · 글줄 위에 겹쳐 찍어 비교). 왼쪽 아래 귀퉁이에 걸린 글줄이 통째로 지워졌다. 그래서 요청 등록 단추(`--help`)와 **같은 꼴로 맞춘다** — 판 색을 깔고 테두리와 그림만 강조색으로 둔다. 둘의 `opacity` 는 원래 같았으므로 여기서 달라지는 것은 **바탕 하나**이고, 그것이 사람이 「투명도」로 읽던 바로 그 차이다. 구분은 **그림이 한다**(☰ ↔ ✎, 메뉴가 펴지면 ✕). 색으로 가르던 것을 그림으로 옮기는 셈인데, 색은 테마마다 달라지고 그림은 안 달라진다. `--jsini-surface` 는 판 색이라 본문 배경과 가깝다. 뒤가 아예 안 비치는 것이 아니라 **0.8 만큼 비친다** — 글줄 위에 서도 글자가 읽힌다. */ background: var(--jsini-surface, #fff); color: var(--jsini-accent); border: 1px solid color-mix(in srgb, var(--jsini-accent) 45%, transparent); /* 뒤에 글자가 가려져도 존재를 인지할 수 있도록 평상시 살짝 반투명하게 둔다. */ opacity: 0.8; transition: opacity 0.2s ease, background 0.15s ease, transform 0.15s ease; /* ── 오래 눌러도 브라우저가 끼어들지 않게 ────────────────── 이 단추는 **길게 누르면 제 설정 창이 뜬다**(`js/fab-hold.js`). 그 손짓은 브라우저가 이미 쓰고 있는 손짓이기도 해서, 그대로 두면 우리 창이 뜨기 전에 **아이폰의 말풍선(「복사 · 공유」)과 글자 선택**이 먼저 걸린다. 안드로이드의 바로가기 차림표는 JS 쪽에서 막는다 — 그쪽은 CSS 로 못 막는다. */ -webkit-touch-callout: none; user-select: none; } /* 누르고 있는 동안의 표시(`is-held` — JS 가 붙였다 뗀다). 길게 누르기는 **0.5초 동안 아무 일도 안 일어나는** 손짓이라, 표시가 없으면 그 사이가 「먹통」으로 읽혀 손을 떼 버린다. 살짝 줄어드는 것으로 「받고 있다」를 말한다 — 색을 바꾸면 그냥 누른 것(`:active`)과 구분이 안 된다. */ .jsini-shell__fab.is-held { opacity: 1; transform: scale(0.92); } .jsini-shell__fab:hover, .jsini-shell__fab:focus-visible, .jsini-shell__fab:active, .jsini-shell--nav-open .jsini-shell__fab { opacity: 1; } .jsini-shell__fab:active { background: color-mix(in srgb, var(--jsini-accent) 12%, var(--jsini-surface, #fff)); } /* 그림은 단추보다 한 뼘 크게. 기본값(1.35rem)으로 두면 동그라미 가운데가 비어 보인다. */ .jsini-shell__fab [class^='jsini-icon-'] { width: 1.6rem; height: 1.6rem; } /* ── 모바일 메뉴 단추 위치 ───────────────────────────────────── 환경설정에서 4가지 위치(왼쪽 위/아래, 오른쪽 위/아래)를 고를 수 있다. 위쪽 위치는 상단 헤더 띠(var(--jsini-header-height)) 아래에 안전 여백을 더해 배치한다. */ .jsini-shell__fab--bottom-left { left: calc(0.75rem + env(safe-area-inset-left)); bottom: calc(0.75rem + env(safe-area-inset-bottom)); top: auto; right: auto; } .jsini-shell__fab--top-left { left: calc(0.75rem + env(safe-area-inset-left)); top: calc(var(--jsini-header-height) + 0.75rem + env(safe-area-inset-top)); bottom: auto; right: auto; } .jsini-shell__fab--bottom-right { right: calc(0.75rem + env(safe-area-inset-right)); bottom: calc(0.75rem + env(safe-area-inset-bottom)); top: auto; left: auto; } .jsini-shell__fab--top-right { right: calc(0.75rem + env(safe-area-inset-right)); top: calc(var(--jsini-header-height) + 0.75rem + env(safe-area-inset-top)); bottom: auto; left: auto; } /* ── 떠다니는 요청 등록 단추 (`--help`) ──────────────────────── 헬프데스크 요청 등록으로 바로 가는 단추다. **생김새를 여기 따로 적지 않는다** — 속을 채우지 않는 그 꼴이 위의 `.jsini-shell__fab` 로 올라갔고, 이제 메뉴 단추도 같은 꼴이다(그 규칙의 주석 참고). 그러므로 `--help` 는 **자리를 가리키는 이름표**로만 남는다 — 감추기(`.jsini-shell--hdfab-hidden`)와 밀기(`--stacked`)가 이 이름으로 이 단추만 집는다. 구분은 안에 든 그림이 한다(☰ ↔ ✎). */ /* [넓은 화면에도 띄운다 — 물어서] 떠다니는 단추 둘은 아래 `@media (max-width: 767px)` 안에서만 켜진다. 휴대폰에서 손가락이 닿기 어려운 자리를 메우는 것이고, 책상에서는 헤더와 메뉴가 그 일을 하기 때문이다. **요청 등록만은 셈이 다르다.** 고장·문의를 적는 일은 자리에 앉아서도 생기고(전화를 받다가, 회의 중에), 메뉴를 열고 업무를 고르고 두 단계를 더 내려가야 닿는 것은 넓은 화면에서도 똑같다. 그래서 **물어서** 띄운다 — 늘 띄우면 책상에서 한 번도 안 쓰는 사람의 오른쪽 아래를 영영 먹는다. 표시를 붙이는 쪽은 `MainLayout.ShellCss` 이고 저장은 브라우저의 `jsini-hdfab-desktop` 이다. 고르는 자리는 장례식장 환경설정. */ .jsini-shell--hdfab-desktop .jsini-shell__fab--help { display: inline-flex; } /* 환경설정에서 **요청 등록 단추를 감춘 사람**(`jsini-hdfab-hidden`). 표시를 붙이는 쪽은 `MainLayout.ShellCss` 다. **메뉴 단추의 감추기와 갈라 둔다.** 한동안 그쪽이 `.jsini-shell__fab` 전부를 잡고 있었는데, 그대로 두면 메뉴 단추를 감춘 사람에게서 **요청 등록 단추까지 함께 사라진다** — 둘은 따로 켜고 끄는 것이다. **폭을 가리지 않는다.** 한동안 이 규칙이 휴대폰 블록 안에 있었는데, 바로 위에서 넓은 화면에도 띄울 수 있게 된 뒤로는 거기 두면 **감춰 둔 사람에게 책상에서만 되살아난다.** 「감췄다」는 넓든 좁든 안 보겠다는 말이다. **바로 위 규칙보다 뒤에 둔다.** 자릿수가 같아서(클래스 둘) 뒤엣것이 이긴다 — 순서를 뒤집으면 감춘 사람에게 단추가 다시 나온다. **권한이 없는 사람은 여기 오지 않는다.** 그때는 마크업 자체가 없다 (`MainLayout.HelpDeskFabAllowed`). */ .jsini-shell--hdfab-hidden .jsini-shell__fab--help { display: none; } /* ── 같은 귀퉁이에 둘이 설 때 (`--stacked`) ──────────────────── [왜 `margin` 인가] 자리를 정하는 `top`·`bottom` 은 **다른 규칙이 `!important` 로 덮어쓰는 값**이다(아래 띠를 쓰는 사람에게 76px 로 올리는 규칙). 여기서 같은 칸을 다시 쓰면 둘 중 하나가 조용히 지고, 어느 쪽이 이기는지는 띠를 쓰는지에 따라 갈린다 — 「띠를 껐더니 단추 둘이 포개진다」가 된다. `margin` 은 그 계산에 **더해진다.** 붙는 자리가 위든 아래든, 띠가 있든 없든 언제나 한 칸(단추 3rem + 틈 0.75rem)만큼 민다. 미는 것은 **요청 등록 단추 쪽**이다(`MainLayout.HelpDeskFabStacked`) — 메뉴 단추를 감춘 사람에게는 밀지 않는다. */ .jsini-shell__fab--stacked.jsini-shell__fab--bottom-left, .jsini-shell__fab--stacked.jsini-shell__fab--bottom-right { margin-bottom: 3.75rem; } .jsini-shell__fab--stacked.jsini-shell__fab--top-left, .jsini-shell__fab--stacked.jsini-shell__fab--top-right { margin-top: 3.75rem; } /* [넓은 화면에서는 밀지 않는다] 미는 까닭은 **같은 귀퉁이에 메뉴 단추가 서 있어서**인데, 넓은 화면에서 그 단추는 아예 안 보인다(아래 `@media` 안에서만 켠다). 그런데 미는 표시를 붙일지는 서버가 정하고(`MainLayout.HelpDeskFabStacked`) 거기서는 화면 폭을 보지 않으므로, 같은 귀퉁이를 골라 둔 사람이 요청 등록 단추를 넓은 화면에도 띄우면 **아무도 없는 귀퉁이 위에 한 칸 떠 있는 단추**가 된다. 그 한 칸만 여기서 되돌린다. **`margin` 칸을 쓰는 것도 그대로다** — 자리 칸(`top`·`bottom`)은 아래 띠 규칙이 `!important` 로 덮어쓰는 자리라 여기서 건드리면 어느 쪽이 이기는지가 띠를 쓰는지에 따라 갈린다. 「위로 가기」 단추는 반대로 **여기서 비켜 서야 한다** — 그쪽에 표시를 붙이는 셈은 `MainLayout.ScrollTopFabCss` 가 한다. */ @media (min-width: 768px) { .jsini-shell--hdfab-desktop .jsini-shell__fab--help.jsini-shell__fab--stacked { margin-top: 0; margin-bottom: 0; } } /* 같은 귀퉁이에 **셋**이 설 때. 떠다니는 단추 둘이 다 오른쪽 아래에 있고 그 위에 「위로 가기」가 서는 경우뿐이라 실제로 쓰는 쪽은 아래짝 하나지만, 위짝도 함께 적어 둔다 — 한쪽만 있으면 위 귀퉁이로 옮긴 날 조용히 포갠다. 값은 위의 **두 배가 아니라** 한 칸(3.75rem)을 한 번 더 더한 것이다. 단추 3rem + 틈 0.75rem 이 한 칸이라 셋째는 7.5rem 이다. */ .jsini-shell__fab--stacked2.jsini-shell__fab--bottom-left, .jsini-shell__fab--stacked2.jsini-shell__fab--bottom-right { margin-bottom: 7.5rem; } .jsini-shell__fab--stacked2.jsini-shell__fab--top-left, .jsini-shell__fab--stacked2.jsini-shell__fab--top-right { margin-top: 7.5rem; } /* ── 「위로 가기」 단추 (`--scroll-top`) ──────────────────────── 본문을 **300px 넘게 내려 읽는 동안에만** 뜬다. 그 표시(`is-visible`)를 붙였다 떼는 것은 브라우저다(theme.js) — 구르는 자리를 서버가 알 길이 없고, 알았다 해도 한 번 구를 때마다 왕복이 난다. **구르는 것이 `.jsini-shell__content` 하나가 아니다.** 업무 화면의 기본 꼴(`CommCont`)에서 그 상자는 `overflow: hidden` 이고 **자료 판만 제 안에서 구른다**(아래 「본문 높이를 꽉 채운다」). 그래서 theme.js 는 본문 **안에서** 구른 상자를 받는다 — 거기까지 넓히기 전에는 넓은 화면에서 이 단추가 한 번도 안 떴다(2026-10-11). [넓은 화면에도 그린다] 떠다니는 단추 둘(☰ · ✎)은 **휴대폰에서만** 켜진다(위 `@media` 안의 `.jsini-shell__fab { display: inline-flex }`). 이것은 반대로 양쪽 다 켠다 — 본문이 길어 내려 읽는 일은 화면이 넓을수록 잦고, 1440px 짜리 화면에서 맨 위로 돌아가는 길은 굴림 막대를 끝까지 끌어 올리는 것뿐이다. [자리는 오른쪽 아래다] 넓은 화면에서는 거기 아무것도 없고(다른 단추 둘은 안 보인다), 휴대폰에서는 메뉴 단추가 기본으로 **왼쪽** 아래라 비켜 선다. 같은 귀퉁이를 고른 사람에게는 한 칸씩 밀어 올린다(`--stacked`·`--stacked2`) — 미는 칸 수를 세는 쪽은 `MainLayout.ScrollTopFabCss` 다. [`display` 로 감추지 않는다] 감췄다 보이면 단추가 **툭 튀어나온다.** 자리는 늘 잡아 두고 `opacity` 로 스며 나오게 한다 — 그동안 눌리지 않게 `pointer-events: none` 을 함께 건다. 자릿수를 하나 올려 적는 까닭이 있다(`.jsini-shell` 을 앞에 붙였다). 위의 `.jsini-shell--nav-open .jsini-shell__fab { opacity: 1 }` 이 **같은 자릿수**라, 클래스 하나로 적으면 휴대폰에서 메뉴를 펴는 순간 안 보여야 할 이 단추가 함께 떠오른다. */ .jsini-shell__fab--scroll-top { display: inline-flex; right: calc(0.75rem + env(safe-area-inset-right)); bottom: calc(0.75rem + env(safe-area-inset-bottom)); left: auto; top: auto; } .jsini-shell .jsini-shell__fab--scroll-top:not(.is-visible) { opacity: 0; pointer-events: none; /* 살짝 가라앉혀 두었다가 떠오른다. 누르고 있을 때의 `scale` 과 같은 칸을 쓰므로(`transform`) **그 표시가 붙으면 이 값이 진다** — 안 보이는 동안의 일이라 겹칠 일이 없다. */ transform: translateY(0.5rem); } /* 휴대폰에서 메뉴가 펴져 있는 동안에는 걷는다. 그때 화면 오른쪽 아래는 덮개 위이고, 거기서 「위로 가기」는 **덮인 본문**을 가리켜 아무 뜻이 없다. 자릿수가 위의 `:not(.is-visible)` 과 같으므로 **뒤에 둔다.** */ .jsini-shell--nav-open .jsini-shell__fab--scroll-top { opacity: 0; pointer-events: none; } /* 바닥 칸을 가진 화면에서는 그 줄 위에 선다 — **넓은 화면에서도** 그렇다. 그 줄(`.jsini-actbar`)은 본문 바닥에 붙박여(`position: sticky`) 단추를 **오른쪽에 모은다.** 이 단추도 오른쪽 아래라, 그대로 두면 맨 끝 단추를 덮는다 — 모형으로 재어 보니(1400×900) 겹치는 넓이가 35×32px 이고, 그 단추 **한가운데를 눌러도 `elementFromPoint` 가 집는 것은 이쪽**이었다(가려 보이는 것이 아니라 실제로 안 눌린다). **비켜 설 몫을 토큰으로 적는다.** 그 줄의 아래끝은 화면 맨 아래가 아니라 본문 여백(`--jsini-shell-pad-bottom`)과 판 여백(`--jsini-sp-lg`)만큼 올라와 있다 — 숫자를 베껴 적으면 그 둘을 고치는 날 조용히 어긋난다. 휴대폰 갈래에는 같은 결의 규칙이 이미 있다(아래 `@media` 의 `76px + 줄 높이` — 그쪽은 본문 여백을 띠가 쓰고 있어 셈이 다르다). `!important` 를 안 붙인다 — 휴대폰 쪽 규칙이 그것을 달고 있어 그대로 이긴다. */ .jsini-shell:has(.jsini-actbar) .jsini-shell__fab--scroll-top { bottom: calc(var(--jsini-shell-pad-bottom) + var(--jsini-sp-lg) + var(--jsini-actbar-height) + 0.75rem); } /* ── 사이드바 ↔ 본문 사이의 구분선 (DxSplitter) ─────────── [격자 칸 둘을 부품 하나가 대신한다] 위 격자는 여전히 두 칸이지만, **넓은 화면에서는 스플리터가 그 두 칸에 걸쳐 앉고**(`grid-column: 1 / -1`) 사이드바·본문은 그 부품의 판 안으로 들어간다. 그래서 폭을 정하는 것이 `--jsini-sidebar-width` 가 아니라 부품의 `Size` 다. 격자 정의를 그대로 둔 이유는 **휴대폰 갈래가 아직 그것을 쓰기 때문**이다 (그때는 스플리터를 쓰지 않는다 — 사이드바가 본문을 덮어야 한다). [높이가 흘러야 한다] `.jsini-shell` 이 `height: 100vh` 고 이 줄이 `1fr` 이다. 그 높이가 판 안쪽까지 내려가야 사이드바 트리와 본문이 각자 안에서 구르므로, 판과 그 안쪽에 `min-height: 0` 을 함께 준다 — 한 겹만 빠뜨려도 본문이 판을 넘어가고, 넘어간 부분은 잘려서 아래 띠를 누를 수 없게 된다. ---------------------------------------------------------- */ .jsini-shell__split { grid-row: 2; grid-column: 1 / -1; min-width: 0; min-height: 0; } /* 판 안쪽. **여백을 걷어낸다.** DevExpress 는 판 안쪽에 여백을 준다(크기 모드마다 다르고 지금 테마에서는 16px). 문서 안의 분할 화면에는 맞는 값이지만 여기 들어오는 것은 **셸의 판 둘**이라, 그 여백이 사이드바를 안쪽으로 밀어 헤더와 세로줄이 어긋난다 — 재어 보니 사이드바가 좌우로 16px, 위아래로 16px 씩 들어와 있었다. 여백을 쓰는 규칙과 다투지 않고 **그 규칙이 읽는 변수**를 덮는다. 그 값을 정하는 규칙이 `.dxbl-splitter.dxbl-lg`(클래스 둘)이라 셋으로 적었다 — 크기 모드마다 값이 다르므로 자릿수를 넘겨야 세 모드 모두에서 걸린다. */ .jsini-shell .jsini-shell__split.dxbl-splitter { --dxbl-splitter-pane-padding-x: 0; --dxbl-splitter-pane-padding-y: 0; } .jsini-shell__split .dxbl-splitter-pane-content { min-width: 0; min-height: 0; } /* 사이드바·본문이 판을 꽉 채우고 넘치는 것은 각자 안에서 구른다. */ .jsini-shell__split .dxbl-splitter-pane-content > .jsini-shell__sidebar, .jsini-shell__split .dxbl-splitter-pane-content > .jsini-shell__main { height: 100%; min-height: 0; } /* ── 구분선 ──────────────────────────────────────────────── 바탕을 비운다. 사이드바가 이미 오른쪽에 선과 안쪽 그림자를 갖고 있어서 구분선까지 칠하면 경계가 두 겹으로 보인다. 대신 **마우스를 올리면** 강조색을 옅게 깔아 「여기를 끌 수 있다」를 알린다 — 끌 수 있다는 것은 해 보기 전에는 보이지 않는 종류다. 손잡이 그림과 접기 화살표는 DevExpress 가 그린 것을 그대로 둔다. 그 둘이 이 자리에서 유일한 단서다. ---------------------------------------------------------- */ .jsini-shell__split > .dxbl-splitter-separator { background-color: transparent; /* 잡이(아래 `::before`)가 상자 밖으로 나가야 한다. */ position: relative; overflow: visible; /* **본문 판보다 위에 있어야 한다.** 본문 판이 DOM 에서 뒤에 있어서, 층을 올리지 않으면 넓혀 둔 잡이의 **오른쪽 절반이 본문에 먹힌다** — 재어 보니 선 왼쪽 4px 에서는 구분선이 잡히고 오른쪽 4px 에서는 본문이 잡혔다. */ z-index: 1; } /* ── 구분선은 자리를 차지하지 않는다. 잡는 자리만 10px ──── [왜 폭을 0 으로 두는가] DevExpress 기본값이 12px 인데 그만큼 **본문이 오른쪽으로 밀린다.** 본문에는 이미 좌우 여백(1.5rem)이 있어서 사이드바 오른쪽에 12+24=36px 의 빈 띠가 생기고, 탭 줄과 브레드크럼도 그만큼 밀려 헤더·사이드바와 세로줄이 어긋난다. 2px 로 줄여도 **여전히 벌어져 보인다** — 사이드바에 이미 1px 테두리가 있어서 그 옆의 빈 2px 이 「선 두 개」로 읽힌다. 그래서 0 으로 둔다. 경계에 보이는 선은 사이드바의 테두리 하나뿐이고, 본문은 그 선에 바로 붙는다. 폭이 0 이어도 끌 수 있다. 잡는 일은 상자가 아니라 **상자 밖으로 나간 의사요소**가 하기 때문이다(아래 `::before`, 좌우 5px씩 10px). [본문을 구분선 아래로 겹치게 두지 않는다] 판을 왼쪽으로 당겨 겹치면(음수 여백) 구분선이 **본문의 첫 12px 위에** 놓인다. 그 띠는 화면 왼쪽 끝 전체를 따라 내려가고, 사람들이 실제로 누르는 자리 (표의 첫 칸·트리의 펼침 화살표)가 거기 있다 — 벌어져 보이는 것보다 **누른 것이 안 눌리는 것**이 나쁘다. 그리고 겹치는 값은 판 크기와 따로 관리되는 두 번째 값이 되어, DevExpress 가 크기를 다시 셈할 때마다 어긋난다. 그래서 **선 자체를 얇게** 한다(2px). 자리 차지는 2px 이고, 잡는 자리는 `::before` 로 좌우 4px 씩 넓혀 10px 로 둔다 — 상자 밖으로 나가므로 판을 밀지 않고, 마우스는 예전처럼 넉넉히 잡는다. VS Code 도 같은 방식이다. 손잡이 점과 접기 화살표는 DevExpress 가 이미 상자 밖으로 넘겨 그리고 있어 (재어 보니 32px 단추가 12px 상자에서 넘쳐 있었다) 얇아져도 그대로 보인다. ---------------------------------------------------------- */ .jsini-shell__split > .dxbl-splitter-separator::before { content: ""; position: absolute; inset-block: 0; inset-inline: -5px; } /* 마우스를 올리면 **경계에 2px 선**이 뜬다. 잡이(10px)를 통째로 칠하면 방금 없앤 「벌어져 보임」이 마우스를 올릴 때마다 되돌아오므로, 잡이 가운데 2px 만 칠한다. 자리 차지는 여전히 0 이다 — 칠하는 것은 상자 밖의 의사요소다. */ .jsini-shell__split > .dxbl-splitter-separator:hover::before { background: linear-gradient( to right, transparent calc(50% - 1px), var(--jsini-accent) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); } /* ── 끄는 도중에 미리 접어 보이기 ────────────────────────── 구분선을 100px(`SidebarSnapPx`) 안쪽까지 끌면 **놓기 전에** 사이드바가 접힌 모습이 된다. 손을 되돌려 문턱을 넘으면 그 자리에서 다시 펴진다 — 놓아 봐야 알 수 있는 것을 끌면서 알 수 있게 하는 표시다. 붙이고 떼는 일은 theme.js 가 한다(같은 이름). 여기서는 **판의 폭만** 0 으로 만든다 — DevExpress 가 끌면서 적어 넣는 `flex`·`min-width` 를 덮어야 해서 `!important` 다. 부품의 접힘(`Collapsed`)은 건드리지 않는다. 진짜 접힘은 놓을 때 C# 이 하고, 그때 이 표시는 걷힌다. ---------------------------------------------------------- */ .jsini-shell--snap .jsini-shell__split > .dxbl-splitter-pane:first-of-type { flex-basis: 0 !important; min-width: 0 !important; overflow: hidden !important; /* 접히는 쪽만 미끄러진다. 표시를 뗄 때는 이 규칙째 사라지므로 **되펴짐은 그 자리에서 일어난다** — 그래야 마우스가 있는 폭으로 곧바로 돌아온다. 판에 늘 걸어 두면 끄는 내내 폭이 마우스보다 늦게 따라온다. */ transition: flex-basis 0.12s ease-out; } /* 접힘과 같은 모습이라야 한다 — 폭만 0 이고 테두리가 남으면 본문 왼쪽에 선 한 줄이 떠 있는 것으로 보인다. */ .jsini-shell--snap .jsini-shell__sidebar { border-right-width: 0; box-shadow: none; } /* ── 헤더 ───────────────────────────────────────────────── 데모: 높이 3.5rem, 아래에 옅은 그림자(테두리가 아니다). 그림자를 쓰면 스크롤한 본문이 헤더 밑으로 들어갈 때 층이 생긴다. ---------------------------------------------------------- */ .jsini-header { grid-column: 1 / -1; display: flex; align-items: center; height: var(--jsini-header-height); /* 헤더는 띠 하나고 여기 있는 것이 전부 아이콘 단추다. 본문보다 한 단계 크게 — 데모의 상단 바가 그 정도다. 그 1.35rem 이 「보통」의 값이고, 글자를 작게 하면 배율만큼 줄어든다. 크게 해도 여기서 멈춘다 — 이유는 `--jsini-chrome-scale` 머리말에 있다. **글자 사다리(`--jsini-fs-*`)를 직접 쓰지 않는다.** 그러면 「본문보다 한 단계 크게」가 없어지고, 크게 골랐을 때 아이콘이 띠를 꽉 채운다. */ --jsini-icon-size: calc(1.35rem * var(--jsini-chrome-scale)); padding: 0 0.5rem; background: var(--jsini-bg); box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%); z-index: 1030; } /* 메뉴 접기 단추. 데모는 동그란 단추다. */ .jsini-header .jsini-header__toggle .dxbl-btn { border-radius: 50%; padding: 0.5rem; } .jsini-header__brand { display: flex; align-items: center; gap: 0.75rem; margin-left: 0.5rem; color: inherit; text-decoration: none; } /* 32px 이 「보통」의 값이다. 아이콘과 같은 배율을 쓴다 — 로고만 그대로 두면 아이콘이 줄어든 옆에서 혼자 커 보인다. */ .jsini-header__logo { width: calc(32px * var(--jsini-chrome-scale)); height: calc(32px * var(--jsini-chrome-scale)); } /* ── 브랜드 심볼 (BrandMark) ────────────────────────────────── 두 획의 색을 테마 토큰으로 준다. 어두운 테마에서는 두 값이 함께 뒤집혀 **고르는 일 없이** 따라온다 — 옛 Vue 부품이 밝은 것과 녹아웃 두 벌을 들고 있던 자리다. */ .jsini-brand-mark { display: block; } /* 헤더의 심볼은 배율을 따른다. [왜 CSS 로 덮어야 하나] `BrandMark` 는 크기를 **SVG 속성**(`width` · `height`)으로 준다. 속성은 CSS 가 덮을 수 있지만 CSS 를 안 쓰면 그 값이 그대로 남는다 — 그래서 한동안 아이콘만 줄고 **로고는 꿈쩍하지 않았다.** `height: auto` 로 두면 `viewBox`(84×60)가 비율을 지킨다. 높이를 함께 계산해 적으면 그 비율을 두 곳에서 관리하게 된다. [38 은 `BrandMark.Size` 의 기본값이다] 그 기본값을 고치면 이 줄도 같이 고쳐야 한다. 헤더로 좁혀 둔 이유는 다른 자리에서 `Size` 를 주고 쓸 때 그 값이 이기게 하려는 것이다 — 지금 쓰는 곳은 헤더 하나뿐이지만, 좁혀 두면 늘어나도 안 깨진다. */ .jsini-header .jsini-brand-mark { width: calc(38px * var(--jsini-chrome-scale)); height: auto; } /* J 가 본문 글자색, S 가 옅은 색이다. 둘을 같은 색으로 두면 겹친 자리가 한 덩어리로 뭉개져 「JS」 로 읽히지 않는다. */ .jsini-brand-mark__j { fill: var(--jsini-text); } .jsini-brand-mark__s { fill: var(--jsini-text-muted); } /* 로고와 글자 사이의 세로 선. 데모의 `.logo-sep` 과 같다. */ .jsini-header__sep { width: 1px; /* 로고와 같은 배율. 선만 그대로 두면 낮아진 띠를 위아래로 넘친다. */ height: calc(2rem * var(--jsini-chrome-scale)); background: currentcolor; opacity: 0.15; } /* 로고 옆의 권한 그룹. 역할이 둘이면 「시스템관리자 · 프로젝트관리 관리자」 처럼 길어져서 헤더의 다른 것들을 밀어낸다. 자르고 `title` 로 남긴다. 글자를 벌리지 않는다(`letter-spacing`). 「JSINI」 를 적던 자리라 벌려 두었는데, 사람이 읽는 이름에 그것을 걸면 한글 자모가 성기게 보인다. */ .jsini-header__brand-text { font-weight: 600; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jsini-header__spacer { flex: 1; } .jsini-header__login { padding: 0 0.6rem; color: var(--jsini-accent-text); text-decoration: none; } /* ── 헤더의 사용자 얼굴과 그 목록 ───────────────────────── 눌러서 펼치는 판이다. DevExpress 드롭다운을 쓰지 않은 이유는 `UserMenu.razor` 머리말에 있다 — 단추 얼굴이 사진이고 판 맨 위에 이름·소속 두 줄이 들어가서, 항목만 넣을 수 있는 부품으로는 안 된다. 자리를 잡는 것은 `position: absolute` 한 줄이다. 기준은 `.jsini-user` 고, 그것이 헤더 오른쪽 끝이라 판을 오른쪽에 붙이면 화면 밖으로 나가지 않는다. ---------------------------------------------------------- */ .jsini-user { position: relative; display: flex; align-items: center; padding-left: 0.35rem; } .jsini-user__face { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; overflow: hidden; border: 1px solid var(--jsini-border); border-radius: 50%; background: transparent; cursor: pointer; } .jsini-user__face:hover, .jsini-user__face.is-on { border-color: var(--jsini-accent); } .jsini-user__img { width: 100%; height: 100%; object-fit: cover; } /* 사진이 없는 계정이 훨씬 많다. 첫 글자를 넣어 **비어 보이지 않게** 한다. */ .jsini-user__initial { font-size: var(--jsini-fs-md); font-weight: 700; color: var(--jsini-text-muted); } /* 덮개는 헤더를 덮지 않는다 — 덮으면 방금 누른 얼굴로 다시 닫을 수 없다. 테마 서랍과 같은 이유이고 같은 자리다. */ .jsini-user__scrim { position: fixed; inset: var(--jsini-header-height) 0 0 0; z-index: 1040; } .jsini-user__menu { position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 1041; width: 250px; max-height: calc(100vh - var(--jsini-header-height) - 1rem); overflow-y: auto; padding: 0.35rem 0; border: 1px solid var(--jsini-border); border-radius: 0.35rem; background: var(--jsini-bg); color: var(--jsini-text); box-shadow: 0 8px 24px rgb(0 0 0 / 18%); /* 닫혀 있을 때는 이 판을 아예 그리지 않는다(UserMenu.razor 참고). 그래서 감췄다 보이는 상태가 없고, 여기에 적을 것도 없다. */ } @media (max-width: 767px) { .jsini-user__menu { position: fixed; top: var(--jsini-header-height); left: 0; right: 0; bottom: 0; width: auto; border: none; border-radius: 0; overflow-y: auto; /* 모바일 하단 네비게이션바 높이만큼 여백을 주어 로그아웃 버튼 등이 가려지지 않게 한다. */ padding-bottom: calc(var(--jsini-bottomnav-h) + env(safe-area-inset-bottom) + 0.35rem); } /* 환경설정에서 하단 띠를 숨긴 경우 여백을 되돌린다. */ .jsini-shell--bottomnav-hidden .jsini-user__menu { padding-bottom: calc(env(safe-area-inset-bottom) + 0.35rem); } } .jsini-user__head { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--jsini-border); } .jsini-user__head-img, .jsini-user__head-initial { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; object-fit: cover; } .jsini-user__head-initial { background: color-mix(in srgb, currentcolor 10%, transparent); font-size: var(--jsini-fs-lg); font-weight: 700; color: var(--jsini-text-muted); } .jsini-user__head-text { min-width: 0; } .jsini-user__head-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jsini-user__head-sub { font-size: var(--jsini-fs-xs); color: var(--jsini-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 묶음 제목. 항목이 열 개가 넘어서 없으면 한 덩어리로 읽힌다. */ .jsini-user__group { padding: 0.45rem 0.75rem 0.15rem; font-size: var(--jsini-fs-2xs); font-weight: 700; letter-spacing: 0.04em; color: var(--jsini-text-muted); } .jsini-user__item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4rem 0.75rem; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .jsini-user__item:hover { background: color-mix(in srgb, currentcolor 8%, transparent); } .jsini-user__item-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--jsini-fs-sm); } /* 아이콘 집안이 둘이다. 이 판에 박아 둔 것은 `jsini-icon-*`(크기를 `--jsini-icon-size` 로 잰다)이고, 「개인화」 묶음은 **메뉴에서 온** `jsini-mi--*`(크기를 `em` 으로 잰다)다. 둘을 같은 자로 맞춰 둔다 — 안 맞추면 그 묶음만 그림이 미묘하게 작아 줄이 들쭉날쭉해 보인다. 아래 띠(`.jsini-bottom-nav__icon`)·칸 바꾸기 판과 같은 규칙이다. */ .jsini-user__item > .jsini-mi { width: var(--jsini-icon-size); height: var(--jsini-icon-size); } .jsini-user__sep { margin: 0.35rem 0; border-top: 1px solid var(--jsini-border); } /* 로그아웃만 색을 달리한다. 되돌리기 어려운 항목이라 나머지와 같아 보이면 안 된다 — 목록 맨 끝이라 잘못 누르기도 쉽다. */ .jsini-user__item--out { color: #c0392b; } .jsini-user__item--out [class^='jsini-icon-'] { background-color: #c0392b; } /* ── 사이드바 ───────────────────────────────────────────── 데모: 330px, 오른쪽에 안쪽 그림자와 1px 선. 안쪽 그림자가 있어야 본문과 판이 갈려 보인다 — 선만으로는 밋밋하다. ---------------------------------------------------------- */ .jsini-shell__sidebar { grid-row: 2; grid-column: 1; background: var(--jsini-bg); border-right: 1px solid var(--jsini-border); box-shadow: inset -140px -8px 30px -100px rgb(0 0 0 / 8%); overflow: hidden; min-width: 0; } .jsini-shell--collapsed .jsini-shell__sidebar { border-right-width: 0; box-shadow: none; } /* 사이드바 안쪽 판. **폭을 스스로 정하지 않는다.** 한동안 `--jsini-sidebar-width`(330px)를 그대로 물고 있었다. 격자가 폭을 정하던 시절에는 같은 값이라 문제가 없었는데, 구분선을 끌어 폭을 바꾸게 되면서 **판만 330px 에 남았다** — 사이드바를 520px 로 넓혀도 검색 칸과 트리는 330px 자리에 그대로 있고 오른쪽 190px 이 빈 채로 남았다. 지금 폭의 임자는 스플리터의 판이다(`DxSplitterPane.Size`). 여기서는 받은 자리를 꽉 채운다. 좁은 화면에서는 사이드바가 본문을 덮는 고정 덮개라 그때만 아래 미디어 쿼리가 폭을 다시 정한다. */ .jsini-sidebar { display: flex; flex-direction: column; height: 100%; width: 100%; min-width: 0; } /* ── 사이드바 검색 ─────────────────────────────────────── **검색 칸은 우리가 그린다.** 한동안 DxTreeView 의 `ShowFilterPanel` 이 그린 칸을 썼는데, 그것은 트리 **안쪽** 맨 위에 붙는다. 검색 · 탭 · 트리 차례가 되면서 그 칸이 탭보다 아래로 내려가 버려 자리가 맞지 않았다. 거르는 일은 여전히 DevExpress 몫이다 — 여기서 받은 글자를 `FilterString` 으로 넘기기만 한다(SidebarMenu.razor 참고). 생김새는 DevExpress 데모의 "Find demo by keyword" 줄 그대로다. 높이 3rem · 바탕 한 톤 짙게 · 아래 선 하나 · 테두리 없음. ---------------------------------------------------------- */ .jsini-sidebar__search { flex: 0 0 auto; height: 3rem; display: flex; align-items: center; padding: 0 0.75rem; background: var(--jsini-surface); border-bottom: 1px solid var(--jsini-border); } /* 줄 전체가 검색 칸처럼 보이게 편집기의 테두리·바탕을 걷어낸다. */ .jsini-sidebar__search-box { width: 100%; --dxbl-text-edit-bg: transparent; --dxbl-text-edit-border-color: transparent; --dxbl-text-edit-box-shadow: none; /* ── Fluent 은 **아래 선을 따로 그린다** ────────────────── Classic(Bootstrap 계열)에서는 위 세 줄로 깔끔했는데 Fluent 에서는 칸 아래에 짙은 선 하나가 남아 있었다. 테두리 색을 안 따라간 것이 아니라 **다른 변수로 그리기 때문**이다 — .dxbl-text-edit { border-bottom-color: var(--dxbl-text-edit-underline-color) } 그 밑줄이 Fluent 입력칸의 표식이다. 상태마다 변수가 따로 있고, 고른 상태에서는 테마가 `--…-underline-color` 를 `--…-underline-focused-color` 로 갈아 끼우므로 **넷을 다 비워야** 어느 상태에서도 선이 안 남는다. (그래서 하나만 비웠을 때는 눌러 넣는 순간 선이 되돌아왔다.) [고른 상태에도 아무것도 그리지 않는다] 한동안 선 대신 옅은 바탕(강조색 8%)을 깔아 「지금 여기에 있다」를 알렸는데, 그 바탕이 둥근 네모로 보여서 **테두리가 되돌아온 것처럼** 읽혔다. 이 칸에서 원하는 것은 깔끔함이고, 그래서 바탕도 뺐다. 남는 단서는 **깜박이는 글자 자리(캐럿)와 지우기 단추**다. 자판으로만 옮겨 다니는 사람에게는 약한 단서지만, 이 칸은 사이드바 맨 위에 하나뿐이라 「어디에 있는지」를 잃을 자리가 아니다. 표 안의 편집칸처럼 여러 칸이 나란한 자리에서는 이 방식을 그대로 쓰지 않는다. */ --dxbl-text-edit-underline-color: transparent; --dxbl-text-edit-underline-hovered-color: transparent; --dxbl-text-edit-underline-active-color: transparent; --dxbl-text-edit-underline-focused-color: transparent; /* 테두리 쪽도 상태마다 변수가 따로다. **`--…-border-color` 하나만 비우면 마우스를 올릴 때 네 변이 다시 나타난다** — 그때는 테마가 그 값을 `--…-border-hovered-color` 로 갈아 끼우기 때문이다(누를 때는 `-active-color`). 위 밑줄과 같은 얘기라 둘을 나란히 적어 둔다. [왜 갈아 끼우는 규칙과 다투지 않는가] 그 규칙들은 `:not()` 을 넷 달아 자릿수가 다섯이라 우리가 이길 수 없다. 대신 **그 규칙이 읽어 가는 변수**를 비운다 — 변수를 정하는 쪽은 `.dxbl-text-edit` 하나뿐이고, app.css 가 테마보다 뒤에 꽂히므로 같은 자릿수로도 우리 값이 남는다. */ --dxbl-text-edit-border-hovered-color: transparent; --dxbl-text-edit-border-active-color: transparent; } /* ── 사이드바 탭 (메뉴 · 즐겨찾기) ──────────────────────── `DxTabs` 를 쓰지 않는 이유는 SidebarMenu.razor 에 적어 두었다. 고른 탭은 색이 아니라 **아래 선**으로 표시한다 — 색만으로 가르면 색각 이상이 있는 사용자에게는 두 탭이 같아 보인다. ---------------------------------------------------------- */ .jsini-sidebar__tabs { flex: 0 0 auto; display: flex; border-bottom: 1px solid var(--jsini-border); } /* ── 좁은 사이드바에서는 탭이 그림만 남는다 ──────────────── 구분선으로 90px 까지 좁힐 수 있게 되면서 이 두 칸이 **가로로 넘쳤다** — 「메뉴」와 「즐겨찾기 4」에 99px 이 필요한데 판이 89px 이었다. 넘친 것은 잘리지 않고 판을 밀어서, 사이드바 안에 가로 스크롤이 생겼다. [미디어 질의가 아니라 **컨테이너 질의**다] 기준이 화면 폭이 아니라 **사이드바 폭**이다. 사람이 구분선을 끌어 정하는 값이라 화면 크기와 아무 상관이 없다 — 1920px 모니터에서도 90px 사이드바를 쓸 수 있다. `container-type: inline-size` 를 사이드바에 걸어 두면 그 폭으로 물을 수 있다. 경계값 180px 은 **재서 정했다.** 「즐겨찾기 4」가 그림·글자·개수까지 들어가려면 69px, 「메뉴」가 30px, 둘 사이 여백까지 99px 이다. 여유를 두어 180px 아래에서 글자를 접는다 — 그 밑에서는 두 칸 중 하나가 반드시 잘린다. ---------------------------------------------------------- */ .jsini-sidebar { container-type: inline-size; container-name: jsini-sidebar; } /* 「메뉴」 칸의 그림은 좁을 때만 나온다. 넓을 때 함께 두면 글자와 그림이 같은 말을 두 번 하고, 옆 칸(별표+즐겨찾기)과 무게가 어긋난다. **자릿수를 하나 올려 적는다.** 아이콘 묶음의 `[class^='jsini-icon-']` 이 `display: inline-block` 을 걸고 그 규칙이 이 파일에서 **뒤에** 있어서, 클래스 하나로 적으면 안 감춰진다 — 재어 보니 330px 에서도 그림이 나와 있었다. */ .jsini-sidebar__tab > .jsini-sidebar__tab-icon { display: none; } @container jsini-sidebar (max-width: 180px) { .jsini-sidebar__tab > .jsini-sidebar__tab-icon { display: inline-block; } .jsini-sidebar__tab-text, .jsini-sidebar__tab-count { display: none; } } .jsini-sidebar__tab { flex: 1; /* **`min-width: 0` 이 없으면 줄어들지 않는다.** flex 칸의 기본 최소 크기가 내용 크기(min-content)라, 글자를 감춘 뒤에도 남은 그림과 여백이 판보다 넓으면 그대로 밀고 나간다. */ min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.6rem 0.5rem; border: 0; border-bottom: 2px solid transparent; background: none; color: inherit; font: inherit; /* 사다리 단으로 적는다. `rem` 으로 박으면 크기 여섯 단계 중 어느 것을 골라도 탭만 그대로 있다 — 바로 아래 트리는 따라가므로 그 어긋남이 눈에 띈다. sm 은 보통에서 13.0px 로, 박아 두었던 0.85rem(13.6px)과 사실상 같다. */ font-size: var(--jsini-fs-sm); cursor: pointer; /* 눌린 탭과 자리가 어긋나지 않게 굵기 자리를 미리 잡아 둔다. `font-weight` 만 바꾸면 고를 때마다 글자 폭이 늘어 탭이 흔들린다. */ letter-spacing: 0.01em; } .jsini-sidebar__tab:hover { background: color-mix(in srgb, currentcolor 7%, transparent); } .jsini-sidebar__tab.is-on { border-bottom-color: var(--jsini-accent); color: var(--jsini-accent-text); } /* 담아 둔 개수. 탭 이름과 같은 크기면 어느 쪽이 이름인지 헷갈린다. */ .jsini-sidebar__tab-count { font-size: var(--jsini-fs-2xs); opacity: 0.7; flex-shrink: 0; /* 개수가 글자에 밀려 사라지지 않는다 */ } /* ── 탭 텍스트가 세로로 나열되지 않게 한다 ──────────────── 좁은 사이드바에서 flex 칸 안의 글자가 한 글자씩 내려가는 현상을 막는다. 공간이 부족하면 글자가 잘려 보이는 것이 세로로 나열되는 것보다 낫다. */ .jsini-sidebar__tab-text { white-space: nowrap; /* 줄바꿈 금지 */ overflow: hidden; /* 넘치는 글자 숨김 */ text-overflow: ellipsis; /* 잘릴 때 … 표시 */ min-width: 0; /* flex shrink 허용 */ } /* 즐겨찾기가 비었을 때, 그리고 메뉴에 없는 즐겨찾기를 알릴 때. */ .jsini-sidebar__empty { margin: 0; padding: 1rem; font-size: var(--jsini-fs-sm); line-height: 1.6; color: var(--jsini-text-muted); } /* ── 사이드바 트리 ─────────────────────────────────────── [실제로 그려지는 모양] div.jsini-sidebar__tree.dxbl-treeview └ dxbl-treeview.dxbl-treeview-container └ dxbl-scroll-viewer ← 여기만 구른다 └ div.dxbl-scroll-viewer-content └ ul.dxbl-treeview-items-container[data-is-root] └ li.dxbl-treeview-item └ div.dxbl-treeview-item-content ├ button 펼침 └ div.dxbl-treeview-item-container[aria-level] 겉껍데기가 세 겹(`dxbl-treeview` · `dxbl-treeview-container` · `dxbl-scroll-viewer`)이라 **그 셋에 다 flex 를 걸어야** 위쪽 검색·탭이 고정되고 트리만 구른다. 한 겹이라도 빠뜨리면 높이가 안 흘러서 트리가 사이드바 밖으로 넘친다. ---------------------------------------------------------- */ .jsini-sidebar__tree { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; /* 데모가 자기 CSS 에서 바꾸는 것은 이 둘과 최상위 글자 굵기뿐이다. 여기서 색과 선을 직접 칠하기 시작하면 테마 스물둘이 전부 어긋난다. */ --dxbl-treeview-spacing-x: 0.5rem; --dxbl-treeview-spacing-y: 0.5rem; --dxbl-treeview-navigation-filter-bottom-spacing: 0; } .jsini-sidebar__tree > .dxbl-treeview-container { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* 트리 본문만 구른다. 트리 전체를 굴리면 메뉴를 내려보다가 검색 칸이 화면 밖으로 나가서, 179개 중에 찾다 말고 다시 올라와야 한다. */ .jsini-sidebar__tree .dxbl-scroll-viewer { flex: 1; min-height: 0; padding: 0 var(--dxbl-treeview-spacing-x) var(--dxbl-treeview-spacing-y); /* [스크롤 막대는 감추고 구르기는 남긴다] 여기 보이는 세로 막대는 **브라우저가 그린 것이 아니다.** 그래서 `scrollbar-width: none` 도 `::-webkit-scrollbar` 도 하나도 안 걷힌다 (그 둘을 걸어 두었다가 「여전히 보인다」는 말을 들었다). 실제로 구르는 칸은 `.dxbl-scroll-viewer-content` 이고 그쪽 네이티브 막대는 DevExpress 가 이미 감춰 두었다(그쪽 CSS 에 `scrollbar-width: none` 이 있다 — 재어 보니 `offsetWidth - clientWidth = 0`). 눈에 걸리는 것은 그 위에 **DevExpress 가 따로 그린 div** — `.dxbl-scroll-viewer-vert-scroll-bar` 와 그 안의 `dxbl-thumb` 이다 (폭 8px, 엄지 3.2px). `display: none` 으로 지우려면 DevExpress 가 켤 때 쓰는 규칙 (`…-vert-scroll-bar:not(.dxbl-disabled):not(:disabled).dxbl-active`, 클래스 다섯)을 `!important` 로 눌러야 한다. 대신 **그 막대가 폭을 꺼내 쓰는 변수를 0 으로 돌린다** — 변수는 상속되므로 특이도 싸움이 없고(`.dxbl-scroll-viewer` 한 겹보다 여기가 깊다), 구르기는 네이티브 `overflow: auto` 그대로라 **마우스 휠이 살아 있다**(실측: 휠 한 번에 scrollTop 0 → 65, 막대 폭은 8 → 0). `hover-width` 까지 같이 0 으로 둬야 한다 — 막대 위에 마우스를 올리거나 엄지를 끌 때 쓰는 폭이 그쪽이라, 빼놓으면 지나갈 때만 다시 나타난다. */ --dxbl-scroll-viewer-vert-scroll-bar-width: 0; --dxbl-scroll-viewer-vert-scroll-bar-hover-width: 0; } /* 최상위(업무 묶음)만 굵게. 데모의 사이드바가 그렇게 생겼다. `aria-level` 로 고른다. 부모를 여섯 겹 타고 내려가는 선택자보다 짧고, DevExpress 가 겉껍데기를 한 겹 더 넣어도 안 깨진다. */ .jsini-sidebar__tree .dxbl-treeview-item-container[aria-level='1'] { --dxbl-treeview-font-weight: 600; } /* 메뉴 제목을 대문자로 바꾸지 않는다 — 한글에는 뜻이 없고, 영문 제목만 혼자 커 보인다. */ .jsini-sidebar__tree .dxbl-treeview-item-container { text-transform: none; } /* 검색에 걸린 것이 없을 때 DevExpress 가 넣는 줄. 기본값이 "No data to display" 인데, 한국어 화면에서 가장 자주 보이는 자리 중 하나가 영어로 남는다. 한국어 리소스는 DevExpress 지역화 서비스로 따로 받아야 해서 여기서는 글자만 갈아 끼운다. **트리를 우리가 감추고 대신 안내를 띄우는 방법은 쓰지 않는다.** 그러려면 무엇이 걸리는지를 우리가 다시 판정해야 하는데, 그 판정이 DevExpress 와 조금이라도 어긋나면 **있는 결과를 감추는** 쪽으로 틀린다. 글자만 바꾸면 그 틀릴 자리가 없다. */ .jsini-sidebar__tree .dxbl-treeview-empty-data { font-size: 0; } .jsini-sidebar__tree .dxbl-treeview-empty-data::after { content: "찾는 메뉴가 없습니다."; font-size: var(--jsini-fs-sm); color: var(--jsini-text-muted); } /* ── 메뉴 한 줄: [아이콘] 제목 …………… [펼침] ────────────── 옛 vben 사이드바의 모양이다. 아이콘은 `SidebarMenu.NodeText` 가 그리고 (DB 의 iconify 이름 → `menu-icons.css` 의 mask 클래스), **펼침 표시는 DevExpress 가 제목 앞에 그린 단추를 여기서 오른쪽 끝으로 옮긴다.** [왜 flex 순서가 아니라 절대 자리인가] `order` 로 오른쪽에 보내면 그 단추가 **강조 알약 바깥**에 남는다. 색이 깔리는 것은 제목을 감싼 `…item-container` 하나뿐이고, 단추는 그 형제라서 마우스를 올렸을 때 알약이 화살표 앞에서 끊긴다. 절대 자리로 띄우면 알약이 줄 전체를 채우고 화살표가 그 위에 앉는다 — vben 이 한 줄 통째로 강조하던 모양과 같아진다. 그 대신 제목이 화살표 아래로 흐르지 않게 오른쪽 여백을 준다. `…item-content` 는 이미 `position: relative` 다(DevExpress 가 그렇게 준다. 재어 확인했다). 그래도 여기 한 줄 적어 둔다 — 그 값이 바뀌면 화살표가 사이드바 바깥으로 튀어 나가므로 우리 쪽에서 붙잡고 있어야 한다. [`.dxbl-btn-tool` 을 선택자에 하나 더 붙인 이유] DevExpress 도 그 단추에 `position: relative` 를 주고 그 규칙이 우리와 **자릿수가 같다**(클래스 셋). 테마 CSS 는 theme.js 가 꽂으므로 app.css **뒤**에 들어가고, 같은 자릿수면 뒤엣것이 이긴다 — 그래서 규칙은 실려 있는데 화살표가 안 움직였다(브라우저에서 재어 확인했다). 클래스를 하나 더 붙여 한 칸 이긴다. `!important` 를 쓰지 않는 이유는 그것이 이 파일에서 처음이 되기 때문이다 — 한 번 쓰면 다음 사람이 같은 자리에서 또 쓰고, 그러면 무엇이 무엇을 이기는지 아무도 모르게 된다. ---------------------------------------------------------- */ .jsini-sidebar__tree .dxbl-treeview-item-content { position: relative; /* li 와 li 사이 간격을 item-content 의 마진으로 줘서 li 끼리 붙어 있어도 시각적 간격이 유지되게 한다 */ padding-bottom: 0; margin-bottom: var(--dxbl-treeview-item-spacing-y); } /* ── 선택된 메뉴 및 호버 영역이 li 너비 전체를 차지하도록 확장 ── DevExpress 기본 동작에서는 dxbl-treeview-item-indent 가 flex 흐름 상 왼쪽 폭을 밀어내어, 그 뒤에 오는 .dxbl-treeview-item-container 의 폭이 li 전체 너비보다 줄어들고 들여쓰기된 만큼 배경색이 비게 된다. indent 폭을 0으로 만들어 item-container 가 li 전체 폭(100%)을 채우도록 하고, 계층별 들여쓰기는 item-container 의 padding-left 로 전달한다. */ .jsini-sidebar .jsini-sidebar__tree .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-indent { min-width: 0; width: 0; } .jsini-sidebar .jsini-sidebar__tree .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container { width: 100%; padding-left: calc(0.5rem + var(--dxbl-treeview-item-indent, 0) * var(--dxbl-treeview-item-content-indent, 0.9375rem)); } .jsini-sidebar__tree .dxbl-treeview-item-content > .dxbl-btn.dxbl-btn-tool { position: absolute; right: 0; /* 줄 높이가 아니라 **단추 높이**를 지킨 채 가운데로 놓는다. `top: 0; bottom: 0` 으로 잡으면 단추가 줄 높이만큼 늘어나고, 그 안의 화살표는 위쪽 여백(9px)에 붙어 있어 눈으로는 위로 치우쳐 보인다. */ top: 50%; transform: translateY(-50%); } /* ── 화살표 크기는 글자 크기를 따라간다 ─────────────────── [무엇이 문제였나 — 재어 본 값] 테마 서랍에서 크기를 바꾸면 제목과 메뉴 아이콘은 함께 움직이는데 **화살표만 두 칸에서 12px 로 같았다.** DevExpress 가 그 그림을 글자가 아니라 여백 토큰으로 재기 때문이다 — --dxbl-treeview-btn-icon-size-s: var(--dxds-spacing-120) → 12px --dxbl-treeview-btn-icon-size-m: var(--dxds-spacing-120) → 12px, 같다 --dxbl-treeview-btn-icon-size-l: var(--dxds-spacing-160) → 16px | 크기 | 제목 | 메뉴 아이콘 | 화살표(전) | 화살표(후) | |---|---|---|---|---| | 작게 | 12px | 13.8px | 12px | 12px | | 보통 | 14px | 16.1px | **12px** | **14px** | | 크게 | 16px | 18.4px | 16px | 16px | 바뀌는 것은 보통 한 칸뿐이다(12 → 14px). 작게·크게는 DevExpress 가 고른 값과 우연히 같다 — 그래서 이 고침은 **보통에서만 눈에 띈다.** [그림 규칙과 다투지 않고 **그쪽 변수**를 덮는다] 화살표 그림을 겨누는 DevExpress 규칙은 클래스 여섯 개짜리다 — .dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-btn:not(.dxbl-nav-expand-btn-custom) > .dxbl-image 그것을 이기려면 우리 선택자도 그만큼 길어져야 하고, 그 길이가 곧 **DevExpress 마크업 구조에 대한 의존**이 된다(한 겹만 바뀌어도 안 걸린다). 그래서 그 규칙이 **읽는 변수**를 나무 뿌리에서 덮는다. 뿌리에서 그 값을 정하는 규칙은 클래스 둘(`.dxbl-treeview.dxbl-sm`)이라 셋으로 이긴다. 값은 **그 줄의 글자 크기 그대로**다(`--dxbl-treeview-font-size`). 우리가 고른 배수가 아니라 DevExpress 가 크기 단마다 정해 둔 값을 그대로 쓰는 것이라, 테마를 올려 단 값이 바뀌어도 함께 따라온다. 크게에서는 DevExpress 가 원래 고른 16px 과 같아진다. ---------------------------------------------------------- */ .jsini-sidebar .jsini-sidebar__tree.dxbl-treeview { /* ── 메뉴 글자는 **여섯 단계를 그대로 따라간다** ────────── [고르는 단계는 여섯인데 DevExpress 는 셋이다] 테마 서랍의 크기는 가장작게 · 아주작게 · 작게 · 조금작게 · 보통 · 크게 여섯이고, 그중 앞의 넷이 DevExpress **Small 하나로 접힌다** (`ThemeSize.Steps` — 없는 SizeMode 를 흘리면 그리드·달력·팝업이 안 따라와 한 화면에 두 크기가 된다). 그래서 메뉴 글자가 DevExpress 의 단 값 (`--dxbl-treeview-font-size`)에 묶여 있는 동안은 **앞의 네 단계가 전부 12px 로 같았다.** 재어 확인했다 — 가장작게 12 · 아주작게 12 · 작게 12 · 조금작게 12 · 보통 14 · 크게 16 여섯 단계를 아는 것은 우리 사다리뿐이므로(`--jsini-fs-base` 를 `data-dx-size` 로 고른다) 나무의 글자 크기를 그 값으로 덮는다. 그러면 가장작게 10 · 아주작게 11 · 작게 12 · 조금작게 13 · 보통 14 · 크게 16 이 되고, 화살표(바로 아래 줄)와 메뉴 아이콘(`1.15em`)이 함께 따라온다. [줄 높이는 건드리지 않는다] 우리가 넣은 네 단계는 **밀도는 「작게」 그대로 두고 글자만 줄이는 것**이 뜻이다(사다리 머리말). 줄 높이·단추 높이는 DevExpress 가 Small 로 잡은 값을 그대로 쓴다 — 여기서 그것까지 비율로 바꾸면 서랍의 단계가 사실상 여섯 개의 밀도가 되어, 부품(그리드·달력)과 어긋나는 자리가 다시 생긴다. 자릿수로 이긴다: 이 값을 정하는 테마 규칙이 `.dxbl-treeview.dxbl-sm` (클래스 둘)이라 셋으로 적었다. */ --dxbl-treeview-font-size: var(--jsini-fs-base); --dxbl-treeview-btn-icon-size: var(--dxbl-treeview-font-size); } /* 화살표가 앉을 자리. 제목이 길면 여기서 잘린다. `em` 이라 화살표와 함께 커진다. 보통에서 26.6px 로 단추 폭(24px)보다 조금 넓다 — 딱 맞추면 긴 제목의 마지막 글자가 화살표에 닿는다. 선택자가 긴 이유는 위와 같다. 테마가 이 칸에 `padding` 을 **약칭으로** 걸어 두어(클래스 넷) 짧게 적으면 우리 값이 덮인다 — 그래서 한동안 이 여백이 실제로는 안 걸려 있었다. */ .jsini-sidebar .jsini-sidebar__tree .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container { padding-right: 1.9em; } /* 아이콘과 제목. 아이콘은 줄지 않고(`flex: 0 0 auto` 는 `.jsini-mi` 가 갖는다) 제목만 줄어들어야 하므로 `min-width: 0` 을 준다 — 없으면 제목이 안 잘리고 줄 폭을 밀어낸다. */ .jsini-sidebar__node { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } /* 아이콘은 제목보다 한 톤 옅게. 색을 죽이면 제목이 먼저 읽힌다 — 179개를 훑어 내려갈 때 그림이 글자만큼 진하면 둘이 서로를 가린다. 고른 줄에서는 글자와 같은 색으로 돌아온다(아래 규칙). */ .jsini-sidebar__node > .jsini-mi { opacity: 0.65; } .jsini-sidebar__tree .dxbl-treeview-item-container.dxbl-active .jsini-mi, .jsini-sidebar__tree .dxbl-treeview-item-container:hover .jsini-mi { opacity: 1; } /* 제목이 길면 자른다. 메뉴 이름이 스무 자를 넘는 것이 실제로 있고 (「빈소 디스플레이 재생목록 관리」), 줄바꿈하면 트리가 들쭉날쭉해진다. 두 자리에 건다 — 우리 템플릿의 제목과, 템플릿이 없을 때 DevExpress 가 그리는 제목(즐겨찾기·검색 결과도 같은 템플릿을 쓰므로 지금은 앞엣것만 나오지만, 템플릿을 떼면 뒤엣것으로 돌아간다). */ .jsini-sidebar__node-title, .jsini-sidebar__tree .dxbl-treeview-item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── 사이드바 바닥 띠 (누구로 접속했나) ─────────────────── [늘 바닥에 붙는 것은 이 두 줄이 한다] `.jsini-sidebar` 가 세로 flex 이고 트리가 `flex: 1; min-height: 0` 이다. 그래서 이 띠를 `flex: 0 0 auto` 로 두면 **남는 높이를 트리가 다 먹고** 띠는 바닥에 남는다. `position: absolute` 로 붙이지 않는다 — 그러면 트리가 띠 아래로 흘러 들어가 마지막 메뉴가 가려진다. 높이를 고정하지 않는다. 소속이 없는 계정, 아이디가 이름과 같은 계정처럼 줄 수가 달라지는 경우가 있어서다 — 고정하면 그때 글자가 잘리거나 빈 칸이 남는다. ---------------------------------------------------------- */ .jsini-sidebar__foot { flex: 0 0 auto; padding: 0.6rem 0.75rem 0.7rem; border-top: 1px solid var(--jsini-border); background: var(--jsini-surface); /* 메뉴보다 한 단계 작게. 늘 보이는 띠라 본문과 같은 크기면 시선을 끈다. */ font-size: var(--jsini-fs-xs); line-height: 1.45; } .jsini-sidebar__foot-top { display: flex; align-items: center; gap: 0.5rem; } /* 이름이 길면 자른다 — 나가기 단추를 밀어내면 안 된다. */ .jsini-sidebar__foot-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--jsini-fs-sm); font-weight: 600; } .jsini-sidebar__foot-out { flex: 0 0 auto; margin: 0; } /* DevExpress 단추를 쓰지 않는다. 이것은 폼의 제출 단추여야 하고 (SidebarFooter 머리말 — 회로가 끊긴 뒤에도 눌려야 한다) DxButton 은 자기 클릭 처리를 붙인다. */ .jsini-sidebar__foot-button { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem; border: 1px solid var(--jsini-border); border-radius: 0.25rem; background: var(--jsini-bg); color: var(--jsini-text-muted); font: inherit; font-size: var(--jsini-fs-2xs); cursor: pointer; } .jsini-sidebar__foot-button:hover { color: var(--jsini-text); background: var(--jsini-surface); } .jsini-sidebar__foot-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--jsini-text-muted); } .jsini-sidebar__foot-ip { display: flex; gap: 0.3rem; /* 주소는 숫자와 점이라 고정폭이 읽기 쉽다. */ font-variant-numeric: tabular-nums; } .jsini-sidebar__foot-label { flex: 0 0 auto; opacity: 0.75; } /* 휴대폰·태블릿에서는 이 띠를 통째로 감춘다. 좁은 화면에서 사이드바는 본문을 **덮고** 메뉴를 누르면 곧 접힌다. 몇 초 밖에 안 떠 있는 판인데, 그 판의 바닥 네 줄을 이름·소속· 아이디·접속 주소가 가져가면 **정작 메뉴가 그만큼 줄어든다.** 나가기를 잃는 것이 아니다 — 좁은 화면에도 헤더의 프로필 메뉴 (`UserMenu`)가 남아 있고(「모바일 상단 띠에는 아이콘 넷」), 그것이 같은 로그아웃 폼을 제출한다. 누구로 접속했는지도 그 메뉴가 말해 준다. 경계값 1023px 은 `MainLayout` 의 휴대폰(≤767)·태블릿(≤1023) 구분과 같다 — 한 쪽만 옮기면 메뉴는 태블릿으로 걸러졌는데 띠는 남아 있는 폭이 생긴다. `@if` 로 갈아 끼우지 않는 까닭은 나머지와 같다 — 경계를 넘을 때마다 부품이 다시 만들어지고, 그러면 접속 주소를 물고 오는 프리렌더 값도 함께 버려진다. */ @media (max-width: 1023px) { .jsini-sidebar__foot { display: none; } } /* ── 아이콘 고르개 (IconPicker) ─────────────────────────── 메뉴 수정 창 안에 들어가므로(팝업 안) **떠 있는 판을 쓰지 않는다.** 펼치면 폼이 길어지고, 격자가 스스로 굴러 창이 화면을 넘지 않는다. ---------------------------------------------------------- */ .jsini-iconpick__row { display: flex; align-items: center; gap: 0.5rem; } /* 지금 값의 그림. 고르기 전에도 보여야 한다 — 저장된 이름이 맞는지 확인할 자리가 여기밖에 없다. */ .jsini-iconpick__preview { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; } .jsini-iconpick__text { flex: 1; min-width: 0; } /* 펼친 판. **창 바탕보다 한 단 눌러 앉은 색**이라야 「창 안의 판」으로 읽힌다. `--jsini-surface` 였다. 그 값은 밝은 쪽에서 창 바탕과 **똑같은 흰색**이라 (둘 다 `#ffffff`) 판이 1px 선만 남고 사라졌다. 창의 바닥 띠가 쓰는 것과 같은 눌린 표면(`--jsini-surface-muted`)으로 바꾼다 — 밝은 쪽에서도 어두운 쪽에서도 창과 갈라진다. */ .jsini-iconpick__panel { margin-top: 0.5rem; padding: 0.6rem; border: 1px solid var(--jsini-border); border-radius: var(--jsini-radius-md); background: var(--jsini-surface-muted); } .jsini-iconpick__search { width: 100%; } /* 격자. `auto-fill` 이라 창 폭이 바뀌면 칸 수가 따라온다 — 칸 수를 박으면 좁은 화면에서 가로 스크롤이 생긴다. 높이를 묶어 두고 여기만 구른다. 안 묶으면 아이콘이 140개라 폼이 화면보다 길어지고, 그러면 창 전체가 굴러 아래의 「저장」 단추가 멀어진다. */ .jsini-iconpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr)); gap: 0.25rem; max-height: 13rem; overflow-y: auto; margin-top: 0.5rem; } .jsini-iconpick__cell { display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 0; border: 1px solid transparent; border-radius: 0.25rem; background: transparent; color: inherit; cursor: pointer; } .jsini-iconpick__cell > span { width: 1.35rem; height: 1.35rem; } .jsini-iconpick__cell:hover { background: var(--jsini-theme-hover); } /* 고른 칸은 **면으로** 칠한다. 테두리만 두르면 그 칸이 1px 커져 격자가 들썩인다 — 테마 서랍에서 같은 이유로 같은 선택을 했다. **면 색은 강조색이다.** 처음에는 테마 서랍과 같은 회색 (`--jsini-theme-picked`)을 썼는데, 그 회색은 서랍에서만 옳다 — 거기서는 **고르는 대상이 강조색 자신**이라 강조색으로 칠할 수가 없다. 여기는 그럴 이유가 없고, 표의 고른 줄이 쓰는 값 (`color-mix(… 18%, var(--jsini-surface-raised))`)과 같아야 포털 안에서 「고른 것」이 늘 같은 색으로 읽힌다. */ .jsini-iconpick__cell.is-on { background: color-mix(in srgb, var(--jsini-accent) 18%, var(--jsini-surface-raised)); border-color: var(--jsini-accent); } .jsini-iconpick__empty, .jsini-iconpick__note { margin: 0.5rem 0 0; font-size: var(--jsini-fs-2xs); color: var(--jsini-text-muted); } /* ── 본문 쪽 ─────────────────────────────────────────────── */ .jsini-shell__main { grid-row: 2; grid-column: 2; display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: margin-right 0.22s cubic-bezier(0.2, 0, 0, 1); } @media (min-width: 768px) { body.jsini-has-pinned-drawer .jsini-shell__main { margin-right: min(26rem, 100vw); } } /* 본문 여백. **3px 다** — 넓은 화면에서도 좁은 화면에서도 같다. [24px 에서 내려왔다 (2026-10-07)] 전에는 데모(demos.devexpress.com/blazor)를 재어 맞춘 24px 이었다. 그 글은 문서 사이트의 글줄을 기준으로 한 값인데, 여기 실리는 것은 글이 아니라 **표와 입력 폼**이다. 표는 폭이 넓을수록 한 줄에 담기는 칸이 늘고, 좁은 화면에서는 24px 둘이 쓸 수 있는 폭의 13% 였다 — 좁은 화면 규칙이 이미 같은 까닭으로 0.2rem 까지 내려와 있었고(아래 `max-width: 767px`), 넓은 화면만 옛 값으로 남아 있던 셈이다. 읽는 데 필요한 틈은 **안쪽 판이 이미 준다**(`commsch`·`commcont` 의 제 여백). 바깥에서 한 겹 더 두면 그 틈이 두 겹이 된다. 아래쪽만 좁은 화면에서 예외다 — 하단 띠(60px + 안전영역)가 고정으로 떠 있어서 그만큼 비워 두지 않으면 마지막 줄에 영영 닿지 못한다. 그것은 여백이 아니라 자리 비킴이다. */ .jsini-shell__content { flex: 1; padding: var(--jsini-shell-pad-top) var(--jsini-shell-pad-inline) var(--jsini-shell-pad-bottom); overflow: auto; /* 옮기는 동안의 덮개(`.jsini-pageload`)가 여기에 자리를 잡는다. 아래 「화면을 옮기는 동안의 표시」 참고. */ position: relative; } /* ── 탭 줄 ─────────────────────────────────────────────── 데모에는 없다(문서 사이트라 탭이 필요 없다). vben 에 있던 것을 되살린 자리라, 데모의 브레드크럼 줄과 같은 높이·같은 바탕으로 맞춰 두 줄이 한 덩어리로 보이게 한다. ---------------------------------------------------------- */ .jsini-tabs { display: flex; align-items: center; gap: 0.25rem; height: 2.5rem; padding: 0 0.5rem; background: var(--jsini-surface); border-bottom: 1px solid var(--jsini-border); } /* 탭이 많아지면 가로로 넘긴다. 줄바꿈하면 탭 줄이 두세 줄이 되어 본문이 그만큼 좁아진다. */ .jsini-tabs__list { display: flex; flex: 1; gap: 0.15rem; height: 100%; align-items: stretch; overflow-x: auto; scrollbar-width: none; } .jsini-tabs__list::-webkit-scrollbar { display: none; } .jsini-tab { display: flex; align-items: center; flex: 0 0 auto; max-width: 190px; border-bottom: 2px solid transparent; } .jsini-tab:hover { background: color-mix(in srgb, currentcolor 6%, transparent); } /* 켜진 탭은 **아래 선**으로 표시한다. 배경을 칠하면 테마 22가지에서 저마다 다른 색과 부딪친다. */ .jsini-tab--active { border-bottom-color: var(--jsini-accent); } /* 글자 크기를 정하지 않는다 — 테마가 주는 기본값을 쓴다(파일 첫머리 참고). */ .jsini-tab__link { display: block; padding: 0 0.3rem 0 0.65rem; line-height: 2.4rem; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jsini-tab--active .jsini-tab__link { font-weight: 600; } .jsini-tab__close { border: 0; background: none; cursor: pointer; padding: 0 0.45rem 0 0.15rem; opacity: 0.5; font: inherit; line-height: 1; color: inherit; } .jsini-tab__close:hover { opacity: 1; } /* ── 브레드크럼 ────────────────────────────────────────── **헤더 안, 로고 옆이다.** 데모는 본문 위에 제 줄(3rem)로 두는데 우리는 그 위에 탭 줄까지 있어서 본문이 시작되기 전에 9rem 이 사라졌다. 헤더 오른쪽은 도구 단추가 끝에 붙어 가운데가 늘 비어 있으므로 거기 얹는다. 그래서 **제 배경도, 아래 선도, 정해진 높이도 없다** — 헤더의 띠에 얹힌 글자 줄이다. 칸은 opacity .6 이고 사이의 구분은 **작은 삼각형**이다 (글자 › 가 아니다). ---------------------------------------------------------- */ .jsini-crumbs { display: flex; align-items: center; /* **늘이지 않고 줄기만 한다**(`0 1 auto`). 늘이면 헤더의 빈자리 (`.jsini-header__spacer`)를 이것이 먹어 도구 단추가 가운데로 딸려 온다. `min-width: 0` 이 있어야 실제로 줄어든다 — flex 항목의 기본 최소 폭이 내용 크기라, 이 줄이 없으면 줄기는 대신 **도구 단추를 헤더 밖으로 밀어낸다.** 줄어든 만큼은 아래 `overflow-x` 가 받는다. */ flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } /* 로고·권한 그룹과 갈라 주는 세로 선. 생김새는 `.jsini-header__sep` 이 정하고 여기서는 **줄지 않게만** 묶는다 — 폭 1px 짜리라 헤더가 좁아지면 0 으로 눌려 사라진다. */ .jsini-crumbs__lead { flex: 0 0 auto; /* 왼쪽은 브랜드 묶음의 간격(`.jsini-header__brand` 의 `gap`)과 같은 값이다. 이 `