/* 새 디자인 시스템 UI 층 — 사람이 쓰는 파일(토큰만). theme/startus.css(생성) 다음에 불러온다.
   UI_THEME=crest 면 둘 다 불러오지 않아 예전 화면 그대로(87번). 영업 앱·회사 공간이 같은 파일을 쓴다(brand_export.py 로 공급). */

/* 제목은 Archivo(영문·숫자) + IBM Plex Sans KR(한글) — 디자인 시스템 Title 계열 */
h1 { font-family: var(--font-display); letter-spacing: -0.024em; }

/* 오렌지 위에는 네이비(디자인 시스템 원칙) — Crest 체크 표시·라디오 점, 메뉴 알림 숫자 */
.cr-check-box.is-checked, .cr-check-box.is-indeterminate { color: var(--label-on-primary); }
.cr-radio input:checked + .cr-radio-box::after, .cr-radio-box.is-on::after { background: var(--label-on-primary); }
.os-nav a .count { color: var(--label-on-primary); }

/* 왼쪽 메뉴 — 고른 메뉴 왼쪽에 오렌지 막대 하나(목업 86번) */
.a-nav a.on::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: var(--radius-full); background: var(--primary-normal); }

/* 오렌지는 화면당 핵심 행동 하나 — 회사 공간 위쪽 '자료 올리기'는 늘 보이므로 네이비(secondary) */
.os-top .os-up.cr-btn-primary { background: var(--inverse-background); color: var(--inverse-label); }

/* 밝게·어둡게·기기 설정 고르기 (_theme_choice.html) */
.ui-theme { display: grid; gap: var(--space-6); }
.ui-theme-label { font-size: 12px; line-height: 16px; color: var(--label-alternative); }
.ui-theme-options { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-10); background: var(--fill-normal); }
.ui-theme-options button { border: 0; background: transparent; padding: 4px 10px; border-radius: var(--radius-8); font: inherit; font-size: 13px; line-height: 18px; color: var(--label-alternative); cursor: pointer; }
.ui-theme-options button[aria-pressed="true"] { background: var(--background-elevated); color: var(--label-strong); font-weight: 600; box-shadow: var(--shadow-normal); }
.ui-theme-options button:focus-visible { outline: 2px solid var(--label-normal); outline-offset: 2px; }

/* 손으로 만든 표시도 오렌지 위에는 네이비 — 체크 상자·라디오(base.css), 여정 점(journey.css), 운영 체크(admin.css), 리포트 단계(report.css),
   회사 공간 알림 숫자·드라이브 표시·프로젝트 머리 단추 */
input[type=checkbox]:checked::after, input[type=radio]:checked::after,
.jy-st.done .jy-dot::after, .jy-st.now .jy-dot::after, .box.on::after { background: var(--label-on-primary); }
.rung.on b { color: var(--label-on-primary); }
.os-tabbar .count, .a-nav .count, .act-src.drive, .panel-head .pj-head-actions .cr-btn-primary { color: var(--label-on-primary); }

/* 어둡게 — 글자색(--label-strong)을 바탕으로 쓰던 검은 칩은 어둡게에서 흰 바탕에 흰 글자가 되므로 반전 색으로 */
.stage-chips a.on { background: var(--inverse-background); color: var(--inverse-label); }
.stage-chips a.on b { color: var(--inverse-label); }