eomsangdonandClaude Opus 5.5
aeb6bc498f
- ui_template_theme.css = 대시보드 값(초록 강조 #1f7a4d · 바탕 #f6f7f9 · 선 #e6e8ec · 글 #1f2328 · 둥글기 10) 밝음 · 어두움 두 블록 · 시스템 어두움 = 같은 값 - 옛 보라 이름(deep-iris · plum-velvet · royal-amethyst · mist-violet · lavender-wash) = 새 값의 별칭 · 안 쓰는 그라디언트 3 · twilight-beam · shadow-feature 지움 - 새 토큰 accent-soft · hover · surface-sunken · border-strong · primary-hover · danger-fill(#e5484d 채운 바탕) · scrim · 위험 글자 = #c0392b 그대로 - 글꼴 = --font-ui 한 토큰(--font-body · --font-display 별칭) · Inter · Britti 등 앞 이름 뺌 · ui_template/fonts/ 에 Noto Sans KR 가변 굵기 woff2 39 묶음(unicode-range) + OFL.txt · 첫 화면 = 196 KB 한 파일 - 대시보드 --b01-* = 공통 값의 별칭 · 셸 덮어쓰기 10 줄 · 셸 어두움 블록 지움(판 바탕 흰색 한 줄만 남김) - test_546: 셸 hex 단정 → theme.css 값 · 셸 별칭 단정으로(값 자리가 theme.css 로 옮겨 감) · test_551_1 새 지킴 시험 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
530 lines
21 KiB
CSS
530 lines
21 KiB
CSS
/* =============================================================================
|
|
* ui_template_theme.css
|
|
* 글로벌 디자인 테마 및 CSS 변수 (라이트/다크) — 프로그램 전체 한 벌(대시보드 값)
|
|
*
|
|
* 원칙:
|
|
* - 모든 색상/간격/폰트는 이 파일의 CSS 변수(var(--...))로만 참조.
|
|
* - 하드코딩된 Hex/px 값을 컴포넌트에 직접 입력 금지 (frontend.md §1).
|
|
* - 값은 이 파일 두 블록(밝음 · 어두움)에만 — 대시보드 `--b01-*` 는 여기 값의 별칭.
|
|
* ========================================================================== */
|
|
|
|
/* 글꼴 파일(Noto Sans KR · SIL OFL 1.1) — 모든 PC 가 같은 글꼴 · CAD 앱도 이 파일을 읽음 */
|
|
@import url("./fonts/noto_sans_kr.css");
|
|
|
|
:root {
|
|
/* 브라우저 기본 부품(체크 · 색 고르개 · 펼침 목록 · 스크롤 막대)이 테마를 따름 */
|
|
color-scheme: light;
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 1. 색상 토큰 (Colors) — 중립 회색 + 초록 강조
|
|
* ------------------------------------------------------------------------ */
|
|
/* 중립 (Neutrals) */
|
|
--color-canvas: #ffffff; /* 카드 표면, 입력 필드 */
|
|
--color-paper: #f6f7f9; /* 페이지 바탕, 테이블 교차행 */
|
|
--color-mist: #e6e8ec; /* 헤어라인 보더, 구분선 */
|
|
--color-smoke: #c1c7cf; /* 비활성 상태, 스켈레톤 플레이스홀더 */
|
|
--color-ash: #9ca3af; /* 옅은 회색 글(장식) — 읽을 글은 --color-text-muted */
|
|
--color-slate: #6b7280; /* 보조 본문 텍스트, 설명 */
|
|
--color-charcoal: #1f2328; /* 본문 텍스트, 아이콘 스트로크 */
|
|
--color-carbon: #222222; /* 다크 UI 요소, 니어블랙 액센트 */
|
|
--color-ink: #000000; /* 최대 대비 텍스트/보더 */
|
|
|
|
/* 강조 (Accent) */
|
|
--color-accent: #1f7a4d; /* 링크 · 주 액션 · 고른 것 */
|
|
--color-accent-soft: #eaf5ee; /* 고른 줄 · 태그 바탕 */
|
|
--color-hover: #f3f4f6; /* 줄 · 메뉴 hover 바탕 */
|
|
|
|
/* 상태 색상 (Status) — 성공 램프는 ✓ 를 같이 띄움(강조색과 같은 초록 계열) */
|
|
--color-success: #1f8a4c; /* 성공/승인 */
|
|
--color-warning: #b45309; /* 경고 */
|
|
--color-danger: #c0392b; /* 에러/삭제 글자 · 선 */
|
|
--color-danger-fill: #e5484d; /* 위험 채운 바탕(알림 점 · 배지) */
|
|
--color-info: #2e6fb5;
|
|
/* 패널 접기/펼치기 손잡이 테두리 — 강조색 */
|
|
--panel-handle-border: var(--color-accent);
|
|
--color-scrim: rgba(16, 24, 40, 0.4); /* 모달 · 서랍 뒤 가림막 */
|
|
|
|
/* 옛 이름 — 새 코드 금지 · 새 값의 별칭 */
|
|
--color-deep-iris: var(--color-text);
|
|
--color-plum-velvet: var(--color-text);
|
|
--color-royal-amethyst: var(--color-accent);
|
|
--color-mist-violet: var(--color-accent-soft);
|
|
--color-lavender-wash: var(--color-accent);
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 2. 의미 기반 별칭 (Semantic Aliases)
|
|
* 컴포넌트는 가급적 아래 별칭을 사용해 라이트/다크 전환에 대응.
|
|
* ------------------------------------------------------------------------ */
|
|
--color-bg: var(--color-paper); /* 페이지 바탕 */
|
|
--color-surface: var(--color-paper); /* 판 바탕 · 표 머리 · 얼룩줄 */
|
|
--color-surface-raised: var(--color-canvas); /* 카드 · 떠 있는 표면 */
|
|
--color-surface-sunken: var(--color-hover);
|
|
--color-border: var(--color-mist); /* 기본 보더 */
|
|
--color-border-strong: #cfd4db; /* 좌측 카드 외곽 · 표 머리 밑줄 */
|
|
--color-text: var(--color-charcoal); /* 기본 글 · 제목 */
|
|
--color-text-body: var(--color-charcoal); /* 일반 본문 */
|
|
--color-text-secondary: var(--color-slate); /* 보조 텍스트 */
|
|
--color-text-muted: var(--color-slate); /* 뮤트/placeholder */
|
|
--color-primary: var(--color-accent); /* 주 액션 배경 */
|
|
--color-primary-text: #ffffff; /* 주 액션 위 텍스트 */
|
|
--color-primary-hover: color-mix(in srgb, var(--color-primary) 88%, #000);
|
|
--color-focus-ring: var(--color-accent);
|
|
|
|
/* 차트 시리즈 색상 (CPU/메모리/디스크 등 구분용) */
|
|
--color-chart-0: #5b8def; /* 파랑 — CPU */
|
|
--color-chart-1: #34c38f; /* 초록 — 메모리 */
|
|
--color-chart-2: #f1963b; /* 주황 — 디스크 */
|
|
--color-chart-3: #9b6dde; /* 보라 — 예비 */
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 3. 타이포그래피 (Typography)
|
|
* ------------------------------------------------------------------------ */
|
|
/* 폰트 패밀리 — 한 토큰 · Noto Sans KR 는 실은 파일(fonts/) · 뒤는 파일을 못 받을 때만 */
|
|
--font-ui: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
|
|
--font-body: var(--font-ui);
|
|
--font-display: var(--font-ui);
|
|
--font-mono: "JetBrains Mono", "Consolas", ui-monospace, monospace;
|
|
|
|
/* 스케일 (px 고정 — design.md 명세) */
|
|
--text-caption: 12px;
|
|
--leading-caption: 1.3;
|
|
--text-body-sm: 14px;
|
|
--leading-body-sm: 1.4;
|
|
--text-body: 16px;
|
|
--leading-body: 1.5;
|
|
--text-subheading: 24px;
|
|
--leading-subheading: 1;
|
|
--text-heading-sm: 32px;
|
|
--leading-heading-sm: 1;
|
|
--text-heading: 40px;
|
|
--leading-heading: 1;
|
|
--text-heading-lg: 56px;
|
|
--leading-heading-lg: 1;
|
|
--text-display: 64px;
|
|
--leading-display: 1;
|
|
|
|
/* 굵기 */
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-bold: 700;
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 4. 간격 (Spacing) — 8px 기반, compact density
|
|
* ------------------------------------------------------------------------ */
|
|
--spacing-unit: 8px;
|
|
--spacing-4: 4px; /* pill/tag 세로 패딩용 하프 유닛 */
|
|
--spacing-8: 8px;
|
|
/* 12px는 8px 배수가 아니지만 여러 화면이 이미 쓰고 있었다. 정의가 없어 그 선언들이
|
|
통째로 무효가 되고 있었다 — 특히 `top/right/bottom/left: var(--spacing-12)`가 무효라
|
|
절대 위치 요소가 offset 없이 원래 흐름 자리(좌상단)로 떨어져 라벨이 겹쳤다
|
|
(2026-08-01 B04 2D 지도에서 발견). 값을 여기서 한 번 정의해 바로잡는다. */
|
|
--spacing-12: 12px;
|
|
--spacing-16: 16px;
|
|
--spacing-24: 24px;
|
|
--spacing-32: 32px;
|
|
--spacing-40: 40px;
|
|
--spacing-48: 48px;
|
|
--spacing-56: 56px;
|
|
--spacing-64: 64px;
|
|
--spacing-96: 96px;
|
|
--spacing-104: 104px;
|
|
--spacing-216: 216px;
|
|
--btn-group-gap: var(--spacing-4); /* 붙은 단추 묶음(.ui-btn-group) 사이 */
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 5. 보더 반경 (Border Radius) — 8px 시그니처
|
|
* ------------------------------------------------------------------------ */
|
|
--radius-sm: 2px;
|
|
--radius-lg: 8px; /* 카드/버튼/입력/아이콘 = 시그니처 */
|
|
--radius-xl: 12px;
|
|
--radius-2xl: 16px;
|
|
--radius-3xl: 24px; /* large 컨테이너 */
|
|
--radius-pills: 1440px; /* pill/tag/캡슐 네비 전용 */
|
|
|
|
--radius-cards: 10px;
|
|
--radius-buttons: var(--radius-lg);
|
|
--radius-inputs: var(--radius-lg);
|
|
--radius-icons: var(--radius-lg);
|
|
--radius-large: var(--radius-3xl);
|
|
|
|
/* 입력칸 · 고르기칸 높이 — 크기마다 한 값(같은 줄이면 위아래가 맞음) */
|
|
--control-height: 42px;
|
|
--control-height-sm: 30px;
|
|
/* 좌측 패널 컨테이너 칸 높이 · 라벨 틈 — 기준 = B05/B06 「구조물 배치」 · 공용 양식 `.ui-panel-form` 이 씀 */
|
|
--panel-control-h: 26px;
|
|
--panel-label-gap: 2px;
|
|
|
|
/* 줄 위 작은 단추 한 규격 — 종단 머리 줄 [초기화]~▼ · [배수유역도] · [새 창] 이 함께 씀(높이 = 글자 12 + 여백 2 + 테두리 2) */
|
|
--btn-bar-padding: 1px var(--spacing-8);
|
|
--btn-bar-font-size: var(--text-caption);
|
|
/* 보조 탭 단추 높이 — B08 · B09 보조 탭 줄(.ui-subtabs) 한 꼴 */
|
|
--subtab-height: 24px;
|
|
/* 큰 알약 글자 — 공용 알약(.ui-tag · 12px) 한 단 위 · 종단 누가토량 배지가 씀 */
|
|
--pill-font-size-lg: var(--text-body-sm);
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 6. 그림자 (Shadows) — 떠 있는 것(메뉴 · 모달 · 툴팁)만 · 카드는 선만
|
|
* ------------------------------------------------------------------------ */
|
|
--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
|
|
--shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.12);
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 7. 레이아웃 (Layout)
|
|
* ------------------------------------------------------------------------ */
|
|
--page-max-width: 1200px;
|
|
--section-gap: 64px;
|
|
--card-padding: 24px;
|
|
--element-gap: 8px;
|
|
|
|
/* Scrollbar */
|
|
--color-scrollbar-track: transparent;
|
|
--color-scrollbar-thumb: color-mix(in srgb, var(--color-text) 12%, transparent);
|
|
--color-scrollbar-thumb-hover: color-mix(in srgb, var(--color-text) 20%, transparent);
|
|
--color-scrollbar-thumb-active: color-mix(in srgb, var(--color-text) 28%, transparent);
|
|
|
|
/* 워크플로우 3단 레이아웃 (frontend.md §2) */
|
|
--wf-header-height: 56px; /* 상단: 타이틀 + 진행 단계 */
|
|
--wf-left-panel-width: 320px; /* 좌측: 입력 폼 (너비 고정) */
|
|
/* 좁은 폭에서 좌측 패널이 물러나며 **본문에 남겨 두는 최소 폭**(2026-09-08).
|
|
이 값이 없으면 패널이 화면을 거의 다 덮어 「넘침 0 인데 못 읽는」 화면이 된다. */
|
|
--wf-min-content-width: 320px;
|
|
/* 좁은 폭에서 쓰는 좌측 패널 폭 — 입력 칸이 아직 읽히는 선까지만 줄인다. */
|
|
--wf-left-panel-narrow-width: 280px;
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 8. 상호작용 (Motion & Z-index)
|
|
* ------------------------------------------------------------------------ */
|
|
--transition-fast: 120ms ease;
|
|
--transition-base: 200ms ease;
|
|
|
|
--z-header: 100;
|
|
--z-dropdown: 200;
|
|
--z-overlay: 900;
|
|
--z-modal: 1000;
|
|
/* 확인창은 모달 위에 떠야 한다 — 모달 닫기 확인이 모달 뒤에 깔리면 못 누른다. */
|
|
--z-confirm: 1050;
|
|
--z-toast: 1100;
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 9. 2D 지도 벡터 팔레트 (B04 배경지도 · B05 배수유역도 공용)
|
|
* 캔버스에 그리는 색이라 CSS로 직접 칠할 수 없다 — TS가 이 변수를 읽어 쓴다
|
|
* (`ui_template_palette.ts`). 여기가 유일한 정의처이며 화면별 복제 금지.
|
|
* 배경이 위성사진이라 라이트/다크 공통으로 같은 색을 쓴다.
|
|
* ------------------------------------------------------------------------ */
|
|
--map-route: #f97316; /* 계획선 (B04 지도·B05 배수유역도 공통) */
|
|
--map-route-locked: #ca8a04; /* 계획노선 편집 — 고정한 선 · 호 · 점 황금 (평면의 주황 · 절토 붉음 · 성토 청록 · 하늘색과 구별) */
|
|
--map-route-node: #15803d; /* 계획노선 편집 — 교각점 녹색 (밝음 · 어두움 따로) */
|
|
--map-cadastral: #f97316;
|
|
--map-sigungu: #7c3aed;
|
|
--map-eupmyeondong: #22c55e;
|
|
--map-contour: #fdba74;
|
|
--map-sheet-contour: #a5b4fc;
|
|
--map-contour-major: #818cf8; /* 계획노선 편집 5m 등고선 — 도엽색보다 한 단 짙게 */
|
|
--map-contour-minor: rgba(165, 180, 252, 0.45); /* 계획노선 편집 1m 등고선 — 얇고 옅게 */
|
|
--map-sheet-stream: #2563eb;
|
|
--map-sheet-elev-point: #f9a8d4;
|
|
--map-sheet-cutfill: #f43f5e;
|
|
--map-sheet-wall: #0f766e;
|
|
--map-flow-arrow: #7c3aed;
|
|
--map-upstream: rgba(29, 78, 216, 0.95); /* 상류 세류망 강조선 */
|
|
--map-upstream-toggle: #1d4ed8; /* 토글 버튼 색띠 */
|
|
--map-satellite-toggle: #64748b; /* 배경사진은 선 색이 없어 중립 회색 */
|
|
--map-pipe-orphan: #e5e7eb; /* 유역이 없는 배관 마커 */
|
|
--map-pipe-marker: rgba(249, 115, 22, 0.95); /* B04 기본 관 마커(세류 교차점) */
|
|
--map-pipe-auto: rgba(14, 165, 233, 0.95); /* 최대 간격 규칙으로 자동 보충한 관 */
|
|
--map-pipe-user: rgba(22, 163, 74, 0.95); /* 사용자가 넣거나 옮긴 관 */
|
|
|
|
/* 배수유역 오버레이(B04 지도) */
|
|
--map-halo: rgba(255, 255, 255, 0.9); /* 선·글자 뒤에 까는 흰 테두리 */
|
|
--map-label-text: #1f2937; /* 지도 위 라벨 글자 */
|
|
--map-marker-text: #111827; /* 관 마커 번호 글자·선택된 마커 테두리 */
|
|
--map-marker-outline: #374151; /* 선택되지 않은 마커 테두리 */
|
|
--map-basin-outline: #92400e; /* 2차 유역 외곽선(분수령) */
|
|
--map-basin-ring: rgba(146, 64, 14, 0.95);
|
|
--map-boundary-handle: rgba(146, 64, 14, 0.95); /* 유역선 편집 핸들 */
|
|
--map-boundary-handle-moved: rgba(220, 38, 38, 0.95); /* 사용자가 옮긴 핸들 */
|
|
--map-primary-region: #059669; /* 1차 유역 */
|
|
--map-flow-region: #2563eb; /* 유역 방향 토글 */
|
|
--map-grid-line: rgba(255, 255, 255, 0.55); /* 해석 격자 셀 선 */
|
|
--map-flow-to-road-fill: rgba(220, 38, 38, 0.28);
|
|
--map-flow-to-road-line: rgba(153, 27, 27, 0.95);
|
|
--map-flow-away-fill: rgba(37, 99, 235, 0.22);
|
|
--map-flow-away-line: rgba(255, 255, 255, 0.95);
|
|
--map-flow-away-arrow: rgba(30, 64, 175, 0.95);
|
|
--map-flow-unknown-fill: rgba(120, 113, 108, 0.18); /* 표고가 없어 판정 못한 셀 */
|
|
|
|
/* 도로 유입 흐름 강도 색띠 — 적음(파랑) → 많음(빨강). 로그 스케일로 보간한다.
|
|
보간을 하려면 hex여야 한다(rgba/색이름 금지). */
|
|
--map-flow-ramp-0: #2563eb;
|
|
--map-flow-ramp-1: #06b6d4;
|
|
--map-flow-ramp-2: #22c55e;
|
|
--map-flow-ramp-3: #eab308;
|
|
--map-flow-ramp-4: #f97316;
|
|
--map-flow-ramp-5: #dc2626;
|
|
--map-inflow-outline: #dc2626; /* 선택한 지점으로 들어오는 셀들의 외곽선 */
|
|
|
|
/* 유역 채움 파스텔 8종 — 유역 번호 순으로 돌려쓴다(사용자 지시: 파스텔톤).
|
|
알파 0.45는 비선택 유역을 0.18로 낮출 때 문자열로 치환하므로 형식을 바꾸지 말 것. */
|
|
--map-basin-1: rgba(167, 216, 199, 0.45);
|
|
--map-basin-2: rgba(247, 208, 168, 0.45);
|
|
--map-basin-3: rgba(186, 199, 240, 0.45);
|
|
--map-basin-4: rgba(241, 183, 199, 0.45);
|
|
--map-basin-5: rgba(214, 226, 168, 0.45);
|
|
--map-basin-6: rgba(202, 186, 227, 0.45);
|
|
--map-basin-7: rgba(168, 214, 232, 0.45);
|
|
--map-basin-8: rgba(240, 219, 168, 0.45);
|
|
}
|
|
|
|
/* =============================================================================
|
|
* 다크 모드 (Dark) — 중립 회색 바탕 · 강조는 명도를 올려 대비 확보
|
|
* 의미 별칭(bg · surface · text …)은 :root 식 그대로라 여기서는 값만 바꿈.
|
|
* ========================================================================== */
|
|
:root[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--color-canvas: #1b1e23;
|
|
--color-paper: #121417;
|
|
--color-mist: #2c3038;
|
|
--color-smoke: #4a4f58;
|
|
--color-ash: #7d848e;
|
|
--color-slate: #9aa1ab;
|
|
--color-charcoal: #e6e8eb;
|
|
--color-carbon: #f0f1f3;
|
|
--color-ink: #ffffff;
|
|
|
|
--color-accent: #3fae75;
|
|
--color-accent-soft: #173326;
|
|
--color-hover: #242830;
|
|
--color-border-strong: #3b414b;
|
|
--color-primary-text: #0e1512;
|
|
--color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #fff);
|
|
|
|
--color-success: #3fbb6f;
|
|
--color-warning: #f5a524;
|
|
--color-danger: #e8695a;
|
|
--color-danger-fill: #f06b6f;
|
|
--color-info: #6aa6e0;
|
|
--color-scrim: rgba(0, 0, 0, 0.55);
|
|
--map-route-locked: #facc15;
|
|
--map-route-node: #4ade80;
|
|
|
|
--shadow-sm: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
|
|
--shadow-lg: rgba(0, 0, 0, 0.5) 0px 32px 24px -12px, rgba(0, 0, 0, 0.3) 0px 3px 3px 0px;
|
|
}
|
|
|
|
/* 시스템 설정 기반 자동 다크 (사용자가 명시적으로 data-theme를 안 준 경우) — 위와 같은 값 */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
color-scheme: dark;
|
|
--color-canvas: #1b1e23;
|
|
--color-paper: #121417;
|
|
--color-mist: #2c3038;
|
|
--color-smoke: #4a4f58;
|
|
--color-ash: #7d848e;
|
|
--color-slate: #9aa1ab;
|
|
--color-charcoal: #e6e8eb;
|
|
--color-carbon: #f0f1f3;
|
|
--color-ink: #ffffff;
|
|
|
|
--color-accent: #3fae75;
|
|
--color-accent-soft: #173326;
|
|
--color-hover: #242830;
|
|
--color-border-strong: #3b414b;
|
|
--color-primary-text: #0e1512;
|
|
--color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #fff);
|
|
|
|
--color-success: #3fbb6f;
|
|
--color-warning: #f5a524;
|
|
--color-danger: #e8695a;
|
|
--color-danger-fill: #f06b6f;
|
|
--color-info: #6aa6e0;
|
|
--color-scrim: rgba(0, 0, 0, 0.55);
|
|
--map-route-locked: #facc15;
|
|
--map-route-node: #4ade80;
|
|
|
|
--shadow-sm: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
|
|
--shadow-lg: rgba(0, 0, 0, 0.5) 0px 32px 24px -12px, rgba(0, 0, 0, 0.3) 0px 3px 3px 0px;
|
|
}
|
|
}
|
|
|
|
/* =============================================================================
|
|
* 기본 리셋 및 문서 스타일
|
|
* ========================================================================== */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 일반 페이지의 가로·세로 스크롤바를 동일한 얇은 테마로 표시한다.
|
|
* B08 CAD iframe은 별도 문서이므로 이 전역 스타일의 영향을 받지 않는다. */
|
|
* {
|
|
scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
@supports selector(::-webkit-scrollbar) {
|
|
* {
|
|
scrollbar-color: auto;
|
|
scrollbar-width: auto;
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
border: 2px solid transparent;
|
|
border-radius: var(--radius-pills);
|
|
background-color: var(--color-scrollbar-thumb);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--color-scrollbar-thumb-hover);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:active {
|
|
background-color: var(--color-scrollbar-thumb-active);
|
|
}
|
|
|
|
*::-webkit-scrollbar-button {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
*::-webkit-scrollbar-corner {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
* {
|
|
scrollbar-color: auto;
|
|
}
|
|
}
|
|
|
|
/* ─── 공용 접기 컨테이너 (ui_template_collapsible.ts) ─────────────────────────
|
|
컨테이너에 `ui-collapsible`, 제목에 `ui-collapsible__title`을 주면 제목 행 전체가
|
|
클릭 영역이 되고, 접히면 제목을 뺀 직속 자식이 숨겨진다. 펼침 ▾ / 접힘 ▸ 캐럿 표시. */
|
|
.ui-collapsible__title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-8, 8px);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.ui-collapsible__title::after {
|
|
content: "▾";
|
|
flex: 0 0 auto;
|
|
margin-block: -0.4em;
|
|
color: var(--color-text-muted);
|
|
/* 레이아웃 허용 범위 내에서 최대한 크게(제목 글자의 약 1.7배). 음수 margin으로 행 높이는 유지. */
|
|
font-size: 1.7em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.ui-collapsible.is-collapsed > .ui-collapsible__title::after {
|
|
content: "▸";
|
|
}
|
|
|
|
/* 카드 제목 ⚙(280-5) — 캐럿 바로 왼쪽 · 제목 높이 그대로(음수 margin) */
|
|
.ui-collapsible__settings {
|
|
flex: 0 0 auto;
|
|
margin: -0.4em 0 -0.4em auto;
|
|
padding: 0 2px;
|
|
border: none;
|
|
background: none;
|
|
color: var(--color-text-muted);
|
|
font: inherit;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ui-collapsible__settings:hover,
|
|
.ui-collapsible__settings:focus-visible {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.ui-collapsible.is-collapsed > :not(.ui-collapsible__title) {
|
|
display: none;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text-body);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body);
|
|
line-height: var(--leading-body);
|
|
font-weight: var(--font-weight-regular);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0;
|
|
font-family: var(--font-display);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text);
|
|
line-height: 1;
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--text-heading);
|
|
}
|
|
h2 {
|
|
font-size: var(--text-heading-sm);
|
|
}
|
|
h3 {
|
|
font-size: var(--text-subheading);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ─── B · M 화면 전역 글 선택 막음(81-1) ───────────────────────────────────
|
|
`html.is-bm-route` 는 main.ts 가 라우트마다 토글(A 영역은 안 붙음).
|
|
허용 = input · textarea · select · [contenteditable] · 원문 본문(m01lab-src__body). */
|
|
html.is-bm-route {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
html.is-bm-route input,
|
|
html.is-bm-route textarea,
|
|
html.is-bm-route select,
|
|
html.is-bm-route [contenteditable],
|
|
html.is-bm-route .m01lab-src__body,
|
|
html.is-bm-route .m01lab-src__body * {
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
}
|