/* page-colors: 색 적용 규칙(웜 차콜 + 오렌지/앰버, B안 확정). 토큰 값은 style.css. 이 파일은 선택·버튼·숫자·상태·카테고리 막대·표 머리·달력·메모에 색을 입히는 규칙만 둔다.
   :root:root 는 page-sales.css 규칙보다 우선하게 하려는 것이다. */

/* ===== 토큰 연결(.ui 부품이 읽는 변수) ===== */
:root:root .ui {
  --ui-accent: var(--ps-ac-ink); --ui-accent-ink: var(--ps-btn-ink); --ui-accent-soft: var(--ps-ac-tint);
  --ui-select-bg: var(--ps-ac-tint); --ui-select-bar: var(--ps-ac);
  --ui-good-fg: var(--ps-good); --ui-warn-fg: var(--ps-warnc); --ui-info-fg: var(--ps-info); --ui-bad-fg: var(--ps-bad);
  --ui-chart-1: var(--ps-ch1); --ui-chart-2: var(--ps-ch2); --ui-chart-3: var(--ps-ch3); --ui-chart-4: var(--ps-ch4); --ui-chart-5: var(--ps-ch5); --ui-chart-6: var(--ps-ch6);
}

/* ===== ① 선택·활성: 강조색(막대·밑줄·연한 틴트) ===== */
:root:root .nav a.on { box-shadow: inset 3px 0 0 var(--ps-ac); background: var(--ps-ac-tint); }
:root:root .nav a.on .ico { color: var(--ps-ac-ink); }
:root:root .ui.ps-page .ui-seg-item[aria-pressed="true"] { background: var(--ps-ac-tint); color: var(--ps-text); box-shadow: inset 0 -3px 0 var(--ps-ac); font-weight: 500; }
:root:root .ui.ps-page .ui-seg-item:hover { background: var(--ps-raised); }
:root:root .ui.ps-page .ui-chip[aria-pressed="true"], :root:root .ui.ps-page .mx-chip { background: var(--ps-ac-tint); color: var(--ps-text); border-color: var(--ps-ac); }
:root:root .ui.ps-page .ps-row.ps-sel { --rb: var(--ps-ac-tint); }
:root:root .ui.ps-page .ps-row.ps-sel .ps-name::before { background: var(--ps-ac); }
:root:root .ui.ps-page .ps-tn::before { background: var(--ps-ac); }
:root:root .ui.ps-page .ps-tn.ps-on .ps-tname, :root:root .ui.ps-page .ps-tn.ps-on .ps-tpick { color: var(--ps-ac-ink); }
:root:root .ui.ps-page .ps-tn.ps-on { background: var(--ps-ac-tint); }
:root:root .ui.ps-page .ps-rail-item::before { background: var(--ps-ac); }
:root:root .ui.ps-page .ps-rail-item.ps-on { background: var(--ps-ac-tint); }
:root:root .ui.ps-page .ps-rail-item.ps-on .ps-rail-val { color: var(--ps-ac-ink); }
:root:root .ui.ps-page .ps-hl { background: var(--ps-ac); }
:root:root #page-kakao.ui.ps-page .kk-kpi.kk-on { box-shadow: inset 0 -3px 0 var(--ps-ac); background: var(--ps-ac-tint); }
:root:root #page-kakao.ui.ps-page .kk-radio.kk-pick { background: var(--ps-ac-tint); border-color: var(--ps-ac); box-shadow: inset 3px 0 0 var(--ps-ac); }
:root:root #page-board.ui.ps-page .sitem.open > .srow { background: var(--ps-ac-tint); box-shadow: inset 3px 0 0 var(--ps-ac); }
:root:root #page-board.ui.ps-page .srow:hover { background: var(--ps-raised); }

/* ===== ② 주 버튼·링크·포커스 ===== */
:root:root .ui.ps-page .ui-btn-primary { background: var(--ps-btn); border-color: var(--ps-btn); color: var(--ps-btn-ink); }
:root:root .ui.ps-page .ui-btn-primary:hover { background: color-mix(in srgb, var(--ps-btn) 88%, var(--ps-text)); border-color: transparent; }
:root:root .ui.ps-page .ui-btn-primary:active { background: color-mix(in srgb, var(--ps-btn) 76%, var(--ps-text)); }
:root:root .ui.ps-page .ui-btn:not(.ui-btn-primary):hover { border-color: var(--ps-ac); }
:root:root .ui.ps-page :focus-visible, :root:root .ui :focus-visible { outline-color: var(--ps-ac); }
:root:root .ui.ps-page .ui-input:focus { outline-color: var(--ps-ac); border-color: var(--ps-ac); }
:root:root .ui.ps-page .tg input:checked { background: var(--ps-ac); border-color: var(--ps-ac); }
:root:root #page-calendar.ui.ps-page .tg input:checked::after { border-color: var(--ps-btn-ink); }
:root:root .ui.ps-page .ps-radio input, :root:root #page-kakao.ui.ps-page .kk-radio input { accent-color: var(--ps-ac); }
:root:root #page-kakao.ui.ps-page .kk-switch[aria-checked="true"] { background: var(--ps-ac); border-color: var(--ps-ac); color: var(--ps-btn-ink); }
:root:root #page-kakao.ui.ps-page .kk-switch[aria-checked="true"] .kk-sq { background: var(--ps-btn-ink); border-color: var(--ps-btn-ink); }

/* ===== ③ 요약 띠 큰 숫자: 첫 숫자만 강조색, 나머지는 글자색 ===== */
:root:root .ui.ps-page .mx-kpi:first-child .mx-kv, :root:root .ui.ps-page .ps-stats > div:first-child b { color: var(--ps-ac-ink); }
:root:root .ui.ps-page .mx-kv.ps-short-bad, :root:root .ui.ps-page .mx-kpi:first-child .mx-kv.ps-short-bad { color: var(--ps-bad); }
:root:root .ui.ps-page .ps-bar-track i, :root:root #page-board.ui.ps-page .prog .bar i { background: var(--ps-ac); }

/* ===== ④ 상태 점·글자: 정상 초록 / 주의 앰버 / 위험 빨강 / 정보 파랑 (모양은 그대로) ===== */
:root:root .ui.ps-page .rv-st.rv-good { color: var(--ps-good); }
:root:root .ui.ps-page .rv-st.rv-good .ps-st-mark { background: var(--ps-good); border-color: var(--ps-good); }
:root:root .ui.ps-page .rv-st.rv-info { color: var(--ps-info); }
:root:root .ui.ps-page .rv-st.rv-info .ps-st-mark { background: var(--ps-info); border-color: var(--ps-info); }
:root:root .ui.ps-page .rv-st.rv-warn { color: var(--ps-warnc); }
:root:root .ui.ps-page .rv-st.rv-warn .ps-st-mark { background: var(--ps-warnc); border-color: var(--ps-warnc); }
:root:root .ui.ps-page .ps-st[data-s="정상"] { color: var(--ps-good); }
:root:root .ui.ps-page .ps-st[data-s="정상"] .ps-st-mark { border-color: var(--ps-good); }
:root:root .ui.ps-page .ps-st[data-s="발주 완료"] { color: var(--ps-info); }
:root:root .ui.ps-page .ps-st[data-s="발주 완료"] .ps-st-mark { background: var(--ps-info); border-color: var(--ps-info); }
:root:root .ui.ps-page .ps-st[data-s="발주 필요"] { color: var(--ps-brand-ink); }
:root:root #page-board.ui.ps-page .sstate .rv-st { font-weight: 500; }

/* ===== ⑧ 기준 줄 점: 초록, 번쩍임은 강조색 ===== */
:root:root .ui.ps-page .ps-live-dot { background: var(--ps-good); }
:root:root .ui.ps-page .ps-live.ps-none .ps-live-dot { background: transparent; }
:root:root .ui.ps-page .ps-live-dot::after { background: var(--ps-ac); }
:root:root .dot.live { background: var(--ps-good); }

/* ===== ⑤ 카테고리 박스: 박스 외곽은 중립, 이름 칸 왼쪽에 고유색 굵은 막대. 판매·재고·부자재는 같은 카테고리가 같은 색(카테고리 순서 번호 data-ci 기준, 8색 순환) ===== */
:root:root #page-sales .ps-cat[data-ci="0"], :root:root #page-parts .ps-cat[data-ci="0"] { --cc: var(--ps-cat1); }
:root:root #page-sales .ps-cat[data-ci="1"], :root:root #page-parts .ps-cat[data-ci="1"] { --cc: var(--ps-cat2); }
:root:root #page-sales .ps-cat[data-ci="2"], :root:root #page-parts .ps-cat[data-ci="2"] { --cc: var(--ps-cat3); }
:root:root #page-sales .ps-cat[data-ci="3"], :root:root #page-parts .ps-cat[data-ci="3"] { --cc: var(--ps-cat4); }
:root:root #page-sales .ps-cat[data-ci="4"], :root:root #page-parts .ps-cat[data-ci="4"] { --cc: var(--ps-cat5); }
:root:root #page-sales .ps-cat[data-ci="5"], :root:root #page-parts .ps-cat[data-ci="5"] { --cc: var(--ps-cat6); }
:root:root #page-sales .ps-cat[data-ci="6"], :root:root #page-parts .ps-cat[data-ci="6"] { --cc: var(--ps-cat7); }
:root:root #page-sales .ps-cat[data-ci="7"], :root:root #page-parts .ps-cat[data-ci="7"] { --cc: var(--ps-cat8); }
:root:root #page-sales .ps-cat[data-ci="8"], :root:root #page-parts .ps-cat[data-ci="8"] { --cc: var(--ps-cat1); }
:root:root #page-sales .ps-cat[data-ci="9"], :root:root #page-parts .ps-cat[data-ci="9"] { --cc: var(--ps-cat2); }
:root:root #page-sales .ps-cat[data-ci="10"], :root:root #page-parts .ps-cat[data-ci="10"] { --cc: var(--ps-cat3); }
:root:root #page-sales .ps-cat[data-ci="11"], :root:root #page-parts .ps-cat[data-ci="11"] { --cc: var(--ps-cat4); }
:root:root #page-sales .ps-cat .ps-catcell, :root:root #page-parts .ps-cat .ps-catcell { box-shadow: inset 5px 0 0 var(--cc, var(--ps-muted)); }

/* ===== ⑥ 표 머리: 아주 연한 색 틴트 ===== */
:root:root .ui.ps-page .ps-hc, :root:root .ui.ps-page .ps-gh { background: var(--ps-head-tint); }

/* ===== ⑦ 차트·무늬: 색 8색 시리즈, 무늬는 같은 모양을 유지(색이 있어 줄무늬는 얇게) ===== */
:root:root .ui.ps-page .an-sw { border-color: var(--ps-rule); }

/* ===== ⑨⑩ 달력·메모: 오늘·포커스는 강조색 ===== */
:root:root #page-calendar.ui.ps-page .cell.today { box-shadow: inset 0 3px 0 var(--ps-ac); }
:root:root #page-calendar.ui.ps-page .todaytag { border-bottom-color: var(--ps-ac); color: var(--ps-ac-ink); }
:root:root #page-calendar.ui.ps-page .cell:focus-within, :root:root #page-calendar.ui.ps-page .ln:focus { outline-color: var(--ps-ac); box-shadow: 0 0 0 2px var(--ps-ac); }
:root:root #page-memo.ui.ps-page .mm-card:focus-within { border-color: var(--ps-ac); }
:root:root #page-memo.ui.ps-page .mm-sw.on { outline-color: var(--ps-ac); }
:root:root #page-memo.ui.ps-page .mm-btn[aria-pressed="true"]::before { background: var(--ps-ac); }
:root:root .lnpop .sw.on, :root:root .lnpop .pbtn.on { outline-color: var(--ps-ac); border-color: var(--ps-ac); }
:root:root .pickbar { border-color: var(--ps-ac); }

/* 색이 있는 막대 위 무늬는 옅게(어수선하지 않게): 같은 모양, 선만 반투명 */
:root:root .an-chart pattern line { stroke-opacity: .5; }
:root:root .an-chart pattern circle { fill-opacity: .5; }
:root:root #page-analysis.ui.ps-page .an-pat1 { background-image: repeating-linear-gradient(135deg, transparent 0 2.5px, color-mix(in srgb, var(--ps-bg) 50%, transparent) 2.5px 4px); }
:root:root #page-analysis.ui.ps-page .an-pat2 { background-image: radial-gradient(circle, color-mix(in srgb, var(--ps-bg) 50%, transparent) 1.1px, transparent 1.4px); }
:root:root #page-analysis.ui.ps-page .an-pat3 { background-image: repeating-linear-gradient(0deg, transparent 0 2px, color-mix(in srgb, var(--ps-bg) 50%, transparent) 2px 3.5px); }
:root:root #page-analysis.ui.ps-page .an-pat4 { background-image: repeating-linear-gradient(90deg, transparent 0 2px, color-mix(in srgb, var(--ps-bg) 50%, transparent) 2px 3.5px); }
:root:root #page-analysis.ui.ps-page .an-pat5 { background-image: repeating-linear-gradient(135deg, transparent 0 2.5px, color-mix(in srgb, var(--ps-bg) 50%, transparent) 2.5px 4px), repeating-linear-gradient(45deg, transparent 0 2.5px, color-mix(in srgb, var(--ps-bg) 50%, transparent) 2.5px 4px); }
:root:root #page-analysis.ui.ps-page .an-pat6 { background-image: repeating-linear-gradient(45deg, transparent 0 2.5px, color-mix(in srgb, var(--ps-bg) 50%, transparent) 2.5px 4px); }
:root:root #page-analysis.ui.ps-page .an-pat7 { background-image: radial-gradient(circle, color-mix(in srgb, var(--ps-bg) 50%, transparent) 1.8px, transparent 2.1px); }