/* ═══════════════════════════════════════════════════════════════════════════════
   강남 BPMS 3.21.0 — 화면 테마 토큰 (30-A 디자인 · 클로드 · 2026-10-14)
   출처: 28 mockup/theme.css(업무 화면 토큰) + 27/29 mockup/board.css·board.js(현황판 값·움직임) + 앱 3.20.1 app.css(지금 색)
   자세한 뜻·대응표·쓰는 법은 디자인사양_3.21.md. 이 파일은 «값»만 둔다(모양 규칙은 사양서 5~6절).
   건물 일러스트(B 지도 받침 + C 큰 카드) 전용 값은 일러스트_BC/ill_tokens.css(--ill-*) — 이 파일 다음에 읽는다.

   <html> 표시 (ui-theme.js 가 붙인다 — 자식 요소의 같은 이름 속성과 헷갈리지 않게 선택자는 늘 html[...] 로 시작)
     data-theme  = base(기본 · 지금 화면) | board(현황판 · 유리·바탕 사진)          기본값 board
     data-tone   = light | dark                                                      기본값 dark
     data-cat    = now · fac · svy · act · ast · map · doc · adm · common         (화면의 업무 성격 — 30-B theme-screens.js)
     data-accent-cat = 강조색·무늬를 고르는 값 = 카테고리 색 켬이면 data-cat(common 이면 now) · «한 색으로»면 늘 now  (30-B ui-theme.js)
     data-kind   = dash · table · form · viewer · map                              (메뉴목록.csv «화면 종류» — 30-B 는 카드형을 dash 로 합침)
     data-sub    = card                                                            (30-E 적용: 업무 앱 카드형 21화면. 창은 .modal 에 붙임)
     data-photo  = on | blur | off                                                 (바탕 사진 켬·흐리게·끔 — 30-B 값)
     data-glass-blur = 1 | 0                                                       (유리 흐림 — 느린 PC 끔 옵션 · 30-B 값)
     data-lite   = 1                                                               (휴대폰·폴드 «가벼운 현황판» — ui-theme.js 가 data-form 이 phone|fold 이고 theme=board 일 때)
     data-motion = full | less | off                                               (앱에 이미 있음 — bpms-motion.js · gn.motion)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 0. 색 변수 등록 — 카테고리를 오갈 때 강조색이 0.7초에 걸쳐 바뀌게(28) ─────────────── */
@property --acc{syntax:'<color>';inherits:true;initial-value:#45d3ff}
@property --acc2{syntax:'<color>';inherits:true;initial-value:#5d9fff}
@property --acc-ink{syntax:'<color>';inherits:true;initial-value:#45d3ff}
@property --acc-on{syntax:'<color>';inherits:true;initial-value:#04203a}

/* ── 1. 공통(네 조합 모두) — 글꼴·숫자·크기·모서리·움직임 ────────────────────────────── */
:root{
  --font:'Pretendard GOV','Malgun Gothic','맑은 고딕','Segoe UI',AppleGothic,sans-serif;   /* 앱 app.css 와 같음(SIL OFL) */
  --num:'tnum' 1;                         /* 숫자 고정폭 — font-feature-settings 와 font-variant-numeric:tabular-nums 같이 */
  --fs:15px; --fs-sm:13px; --fs-xs:12px;  /* 본문 · 보조 · 최소. 12px 아래는 사진 출처(11px, 받침 깔고)만 */
  --fs-cap:11px;
  /* 숫자 글꼴(현황판 27/29 실제 값) — 크기 · 굵기 · 자간 */
  --num-hero:76px;  --num-hero-w:820; --num-hero-ls:-.05em;   /* 화면 2 «조치 필요 시설» 큰 숫자(좁은 무대 60px) */
  --num-big:64px;   --num-big-w:830;                          /* 화면 3 노후 시설 */
  --num-kpi:36px;   --num-kpi-w:780;  --num-kpi-ls:-.03em;    /* 숫자 칸(.kt .v b) — 업무 화면 칸은 30px(높이 800 아래 24px) */
  --num-mid:30px;   --num-mid-w:800;                          /* 링 가운데 · 기준 칸 · 순회 카드 이름 */
  --num-row:22px;   --num-row-w:800;                          /* 목록 점수 · 조치 흐름 */
  --r:10px; --r-sm:7px; --r-ctl:8px; --r-tile:12px; --r-chip:13px;
  --r-pn:10px;                            /* 패널 모서리: 기본 10 · 현황판 16(아래 4절) */
  --head-h:60px;                          /* 업무 화면 머리 줄(창 높이 800 아래 54) · 현황판 머리 줄은 64 */

  /* 움직임 곡선(29 board.js EZ 와 같음). spring·pop·soft 는 linear() 가 되면 아래 @supports 값으로 덮인다 */
  --ez-out:cubic-bezier(.22,1,.36,1);     /* 빨리 출발 → 길게 감속: 투명도·선 긋기·지도 판·메뉴 들어옴 */
  --ez-in:cubic-bezier(.55,0,.75,.15);    /* 천천히 출발 → 가속: 나가는 패널·밀려 나가는 건물 */
  --ez-io:cubic-bezier(.65,0,.35,1);      /* 가속 → 감속: 화면 교차·바탕 사진 겹침 */
  --ez-spring:cubic-bezier(.34,1.45,.64,1);  /* 패널·카드 — 넘침 8.3% */
  --ez-pop:cubic-bezier(.34,1.7,.64,1);      /* 작은 표식 — 넘침 16.3% */
  --ez-soft:cubic-bezier(.3,1.2,.5,1);       /* 게이지·먼 자리 옮기기 — 넘침 2.8% */
  --ez-circle:cubic-bezier(.4,0,.15,1);      /* 밝게/어둡게 원 퍼짐 */
  --ez-cat:cubic-bezier(.2,.8,.2,1);         /* 카테고리 강조색 바뀜(28 --ease) */

  /* 길이 — 29 값(PC). --mk 는 길이 배수: PC 1 · 가벼운 현황판 .6 */
  --mk:1;
  --d-enter:calc(1000ms * var(--mk));    /* 패널 들어오기(자리·크기) — 투명도는 이 값 × .42 */
  --d-row:calc(900ms * var(--mk));       /* 패널 안 줄 들어오기 */
  --d-leave:calc(380ms * var(--mk));     /* 나가는 패널 */
  --d-flip:calc(1000ms * var(--mk));     /* 옛 자리 → 새 자리 */
  --d-bar:calc(1250ms * var(--mk));      /* 막대 게이지 다시 채움 */
  --d-band:calc(1000ms * var(--mk));     /* 띠·층 블록 */
  --d-ring:calc(1500ms * var(--mk));     /* 링 게이지 */
  --d-count:calc(1300ms * var(--mk));    /* 숫자 카운트업 */
  --d-draw:calc(1000ms * var(--mk));     /* 선 긋기(연결선) — 운영비 선은 1.8s */
  --d-pill:calc(650ms * var(--mk));      /* 고른 칸 바탕 미끄러짐 */
  --d-cross:calc(700ms * var(--mk));     /* 화면 교차 */
  --d-theme:calc(950ms * var(--mk));     /* 밝게/어둡게 원 */
  --d-swap:calc(500ms * var(--mk));      /* 화면 통째 겹쳐 바뀜 */
  --d-cat:calc(700ms * var(--mk));       /* 카테고리 강조색 */
  --d-photo:calc(900ms * var(--mk));     /* 바탕 사진 두 겹 교차 */
  --d-sweep:calc(900ms * var(--mk));     /* 머리 줄 빛줄 */
  --d-press:110ms;                       /* 누름(앱 bpms-motion.js 그대로) */
  --stg-panel:calc(60ms * var(--mk));    /* 패널끼리 시차 */
  --stg-row:calc(42ms * var(--mk));      /* 줄끼리 시차(12줄까지) */
  --stg-bar:calc(45ms * var(--mk));      /* 막대끼리 */
  --stg-band:calc(32ms * var(--mk));     /* 띠 조각·층 블록끼리 */
  --stg-leave:calc(22ms * var(--mk));    /* 나가는 패널끼리 */
  --stg-mark:calc(55ms * var(--mk));     /* 지도 위 표식끼리(BC: 동 이름 → 상주 받침·연수 칩·이름표가 55ms마다 톡 — 일러스트_BC/사양.md 3절) */
}
@supports (animation-timing-function:linear(0, 1)){
  :root{
    --ez-spring:linear(0,0.0178,0.0652,0.1343,0.218,0.3103,0.4062,0.5017,0.5935,0.6793,0.7575,0.8271,0.8876,0.9388,0.9811,1.0148,1.0408,1.0597,1.0725,1.0801,1.0833,1.083,1.0799,1.0747,1.0681,1.0606,1.0527,1.0447,1.0369,1.0295,1.0227,1.0166,1.0112,1.0067,1.0029,0.9998,0.9974,0.9956,0.9943,0.9935,0.9931,0.993,0.9932,0.9936,0.9941,0.9947,0.9953,0.996,0.9967,0.9973,0.9979,0.9984,0.9989,0.9993,0.9996,0.9999,1)   /* 감쇠 z .62 · w 11 → 넘침 8.3% */;
    --ez-pop:linear(0,0.0213,0.0788,0.1632,0.2657,0.3787,0.4955,0.6105,0.7194,0.8188,0.9065,0.9812,1.0422,1.0897,1.1244,1.1472,1.1596,1.163,1.1591,1.1493,1.1353,1.1184,1.0999,1.0809,1.0622,1.0445,1.0285,1.0143,1.0023,0.9925,0.9849,0.9794,0.9758,0.9739,0.9734,0.9742,0.9758,0.9781,0.9809,0.9839,0.987,0.9901,0.9929,0.9955,0.9978,0.9998,1.0013,1.0025,1.0034,1.004,1.0043,1.0043,1.0042,1.0039,1.0035,1.0031,1)   /* z .5 · w 12 → 16.3% */;
    --ez-soft:linear(0,0.0119,0.0439,0.0909,0.1487,0.2136,0.2826,0.3533,0.4236,0.4921,0.5575,0.619,0.6761,0.7284,0.7757,0.818,0.8554,0.8881,0.9164,0.9405,0.9608,0.9777,0.9915,1.0025,1.0111,1.0176,1.0223,1.0255,1.0274,1.0283,1.0283,1.0277,1.0266,1.0251,1.0234,1.0214,1.0195,1.0175,1.0155,1.0136,1.0118,1.0101,1.0085,1.0071,1.0058,1.0047,1.0037,1.0028,1.0021,1.0014,1.0009,1.0004,1.0001,0.9998,0.9996,0.9994,1)   /* z .75 · w 9 → 2.8% */;
  }
}

/* ── 2. 기본 · 밝게 = 지금 화면. «한 화소도 바뀌지 않게» 새 이름이 지금 변수(스킨이 정한 값)를 가리킨다 ──
   지금 변수는 html·.work-app·.bv 세 곳에서 스킨마다 다시 정해진다 → 같은 세 곳에 건다(var()는 선언한 요소에서 풀리므로). */
/* --faint는 기존 스킨 값을 보존한다. app.css의 --ink4-light만 AA 보정한다. */   /* 3.20.1 #98a3b3(흰 바탕 2.55:1) → 흰 5.18 · #f4f6f9 4.78 · #eef1f5 4.57 (의도된 차이 1건) */
html:not([data-theme]),html:not([data-theme]) :is(.work-app,.bv),
html[data-theme=base][data-tone=light],
html[data-theme=base][data-tone=light] :is(.work-app,.bv){
  --bg0:var(--bg); --ink1:var(--txt); --ink2:var(--sub); --ink3:#5f6b7c; --ink4:var(--faint);
  --hair:var(--line-soft); --line2:#c9d2de; --track:#e8edf3;
  --panel2:#fafbfd; --zebra:#f7f9fc; --hover:#eef3fa; --gsolid:#ffffff; --ghi:transparent;
  --acc:var(--pri); --acc2:var(--pri-d); --acc-ink:var(--pri); --acc-on:#ffffff; --accs:var(--pri-soft); --acc-hover:var(--pri-d);
  --side-bg:var(--gn-dark); --side-ink:#c9d6e8; --side-ink2:#8fa6c8; --side-on:rgba(255,255,255,.12); --side-mark:#7cc4ff;
  --head-bg:var(--panel); --shadow-pop:var(--shadow-lg);
  --red:var(--err); --org:#c2410c; --amb:var(--warn); --blu:#1f5fbf; --ok:#0d7a5f; --gry:#6b7685;
  --red-ink:var(--red); --org-ink:var(--org); --amb-ink:var(--amb); --blu-ink:var(--blu); --ok-ink:var(--ok);
  --input-bg:#ffffff; --input-line:#c9d2de;
  --chart1:#2a78d6; --chart2:#9fb5d3;
  --map-bg:#eef2f6; --fmap-land:#ffffff; --fmap-edge:#1f4f8f; --fmap-dong:rgba(31,90,160,.35); --fmap-water:#cfe2f5; --fmap-green:#e3f0e4; --fmap-road:#c8d2de; --fmap-rail:rgba(40,70,120,.28); --fmap-dot:#3c4c63; --fmap-halo:#ffffff;
  --motif-op:0;
}

/* ── 3. 기본 · 어둡게(새로) — 사진·유리 없이 평평한 어두운 면(28 값) ─────────────────────── */
html[data-theme=base][data-tone=dark],html[data-theme=base][data-tone=dark] :is(.work-app,.bv){
  --bg0:#0e141d; --panel:#151d29; --panel2:#18212e; --zebra:#19222f; --hover:#1f2a3a; --gsolid:#151d29; --ghi:transparent;
  --ink1:#e8edf4; --ink2:#b4c0d0; --ink3:#9aa8bb; --ink4:#7d8ba0;
  --line:#2a3546; --line2:#3a475b; --hair:#1f2835; --track:#243041;
  --acc:#7fb0ff; --acc2:#5d9fff; --acc-ink:#8fb9ff; --acc-on:#0b1a33; --accs:#1d2c45; --acc-hover:#9cc2ff;
  --side-bg:linear-gradient(180deg,#0b1526 0%,#0a1322 100%); --side-ink:#c3cfe0; --side-ink2:#8396b2; --side-on:rgba(127,176,255,.14); --side-mark:#7fb0ff;
  --head-bg:var(--panel); --shadow:none; --shadow-pop:0 12px 36px rgba(0,0,0,.5);
  --red:#ff7b74; --org:#ff9a52; --amb:#f2b54a; --blu:#6aa6ff; --ok:#3fcf9a; --gry:#93a1b5;
  --red-ink:var(--red); --org-ink:var(--org); --amb-ink:var(--amb); --blu-ink:var(--blu); --ok-ink:var(--ok);
  --input-bg:#111823; --input-line:#3a475b;
  --chart1:#3987e5; --chart2:#4a6a96;
  --map-bg:#0d1520; --fmap-land:#141d2a; --fmap-edge:#7fb0ff; --fmap-dong:rgba(150,205,255,.35); --fmap-water:#18324f; --fmap-green:#16281f; --fmap-road:#2c3a4d; --fmap-rail:rgba(200,220,255,.30); --fmap-dot:#a9bbd3; --fmap-halo:#0d1520;
  --motif-op:0;
}

/* ── 4. 현황판 · 어둡게(앱 기본값 · 27에서 처음 만든 남색) ─────────────────────────────── */
html[data-theme=board][data-tone=dark],html[data-theme=board][data-tone=dark] :is(.work-app,.bv){
  --bg0:#040c1f;
  --ink1:#eef4ff; --ink2:#c3d3ea; --ink3:#9db1cf; --ink4:#7f95b8;      /* 27 board.css 보다 ink2~4 한 단 밝힘(업무 화면 4.5:1 — 28 실측) */
  --line:rgba(140,196,255,.16); --line2:rgba(140,196,255,.30); --hair:rgba(140,196,255,.10); --track:rgba(140,196,255,.14);
  --glass1:14,36,78; --glass2:6,18,44;                                  /* 유리 색(rgb) — 투명도는 화면 종류(6절)가 정함 */
  --gsolid:#0b1d42; --ghi:rgba(255,255,255,.07); --zebra:rgba(140,196,255,.045); --hover:rgba(140,196,255,.09);
  --shadow:0 26px 60px -24px rgba(0,0,0,.75); --shadow-pop:0 26px 60px -20px rgba(0,0,0,.8);
  --red:#f0605a; --org:#f08a2e; --amb:#f2a93b; --blu:#4b93e6; --ok:#3fd8a4; --gry:#8a9ab3;
  --red-ink:var(--red); --org-ink:var(--org); --amb-ink:var(--amb); --blu-ink:var(--blu); --ok-ink:var(--ok);   /* 어둡게는 상태색 그대로 글자로 써도 4.5:1 이상 */
  --side-ink:#c9d6e8; --side-ink2:#8fa6c8; --side-on:rgba(255,255,255,.10); --side-mark:var(--acc);
  --input-bg:rgba(3,10,28,.55); --input-line:rgba(140,196,255,.34);
  --scrim0:3,10,28;
  --chart1:#3987e5; --chart2:#4a6a96;
  /* 현황판 지도 판(27 board.css) */
  --map-land:rgba(26,70,140,.30); --map-edge:#5fd8ff; --map-dong:rgba(120,190,255,.26); --map-road:rgba(150,200,255,.30); --map-road2:rgba(150,200,255,.14); --map-water:rgba(40,120,200,.38); --map-green:rgba(40,160,140,.16); --map-rail:rgba(200,220,255,.18);
  --dot:#a9c3e6; --dot-glow:rgba(120,200,255,.55);
  /* 시설 지도 화면(28 mapview) */
  --map-bg:#06142e; --fmap-land:rgba(26,70,140,.12); --fmap-edge:var(--acc); --fmap-dong:rgba(150,205,255,.35); --fmap-water:rgba(40,120,200,.30); --fmap-green:rgba(40,160,140,.10); --fmap-road:rgba(160,205,255,.32); --fmap-rail:rgba(200,220,255,.30); --fmap-dot:#c3d6f0; --fmap-halo:#06142e;
  --motif-op:.10;
}

/* ── 5. 현황판 · 밝게 ───────────────────────────────────────────────────────────────── */
html[data-theme=board][data-tone=light],html[data-theme=board][data-tone=light] :is(.work-app,.bv){
  --bg0:#e4eef7;
  --ink1:#0c1f3d; --ink2:#2e4568; --ink3:#465a7c; --ink4:#5f7392;
  --line:rgba(30,80,140,.15); --line2:rgba(30,80,140,.28); --hair:rgba(30,80,140,.10); --track:rgba(30,80,140,.12);
  --glass1:255,255,255; --glass2:244,249,255;
  --gsolid:#ffffff; --ghi:rgba(255,255,255,.9); --zebra:rgba(30,80,140,.035); --hover:rgba(30,80,140,.07);
  --shadow:0 24px 50px -26px rgba(20,50,100,.45); --shadow-pop:0 24px 50px -20px rgba(20,50,100,.5);
  --red:#d23c35; --org:#d9661a; --amb:#c97a0a; --blu:#2a6fc0; --ok:#13a372; --gry:#7d8ca3;   /* 점·띠·칩 테두리용 */
  --red-ink:#b02a25; --org-ink:#a0460a; --amb-ink:#8a5200; --blu-ink:#1f5aa0; --ok-ink:#08704d;   /* 글자로 쓸 때(배지·«노후 51년»·«담당 미지정») — 그 색 18% 배지 바탕 위 4.8 이상 · 흰 판 6.1 이상 · 바탕 #e4eef7 5.2 이상(30-A 실측) */
  --side-ink:#20385c; --side-ink2:#4f6688; --side-on:rgba(255,255,255,.75); --side-mark:var(--acc);
  --input-bg:rgba(255,255,255,.85); --input-line:rgba(30,80,140,.30);
  --scrim0:236,244,251;
  --chart1:#2a78d6; --chart2:#9fb5d3;
  --map-land:rgba(255,255,255,.55); --map-edge:#1f73c4; --map-dong:rgba(31,90,160,.28); --map-road:rgba(40,80,140,.30); --map-road2:rgba(40,80,140,.14); --map-water:rgba(80,150,215,.40); --map-green:rgba(60,170,130,.22); --map-rail:rgba(40,70,120,.20);
  --dot:#3a6fb0; --dot-glow:rgba(40,120,220,.35);
  --map-bg:#dfe9f3; --fmap-land:rgba(255,255,255,.35); --fmap-edge:var(--acc); --fmap-dong:rgba(31,90,160,.35); --fmap-water:rgba(80,150,215,.35); --fmap-green:rgba(60,170,130,.16); --fmap-road:rgba(40,80,140,.32); --fmap-rail:rgba(40,70,120,.28); --fmap-dot:#2f5f9e; --fmap-halo:#ffffff;
  --motif-op:.12;
}

/* ── 6. 화면 종류별 유리 투명도·사진 덮개(현황판 테마만) — 메뉴목록.csv «테마 규칙» 4가지 ──────────
   대시보드형(dash)            유리 .62/.58 · 덮개 .40 · 흐림 20px · 선명한 사진 · 느린 움직임 켬
   카드형(data-sub=card)       유리 .70/.66 · 덮개 .48 · 흐림 20px · 선명한 사진 · 느린 움직임 켬
   표·폼형(table·form)         유리 .90/.88 · 덮개 .66 · 흐림 24px · 흐린 판 + 머리 줄 아래 260px 띠만 선명 · 움직임 끔
   뷰어형(viewer·map)          떠 있는 조작판 .80/.76 · 사진 없음(뷰어가 장면) · 무늬 없음
   밝게는 각각 .80/.70 · .84/.78 · .94/.92 · .88/.84 */
html[data-theme=board]{ --pa1:.62; --pa2:.58; --scrim:.40; --blur:20px; --kb:1; }
html[data-theme=board]:is([data-kind=table],[data-kind=form]){ --pa1:.90; --pa2:.88; --scrim:.66; --blur:24px; --kb:0; }
html[data-theme=board]:is([data-kind=viewer],[data-kind=map]){ --pa1:.80; --pa2:.76; --scrim:0; --kb:0; }
html[data-theme=board][data-sub=card]{ --pa1:.70; --pa2:.66; --scrim:.48; --blur:20px; --kb:1; }
html[data-theme=board][data-tone=light]{ --pa1:.80; --pa2:.70; }
html[data-theme=board][data-tone=light]:is([data-kind=table],[data-kind=form]){ --pa1:.94; --pa2:.92; }
html[data-theme=board][data-tone=light]:is([data-kind=viewer],[data-kind=map]){ --pa1:.88; --pa2:.84; }
html[data-theme=board][data-tone=light][data-sub=card]{ --pa1:.84; --pa2:.78; }
html[data-theme=board],html[data-theme=board] :is(.work-app,.bv){
  --g1:rgba(var(--glass1),var(--pa1)); --g2:rgba(var(--glass2),var(--pa2));
  --panel:linear-gradient(165deg,var(--g1),var(--g2));     /* 바탕(background)으로만 쓴다 — 색 한 가지가 필요하면 --gsolid */
  --panel2:rgba(var(--glass2),.35);
  --accs:color-mix(in srgb,var(--acc) 15%,transparent);
  --acc-hover:color-mix(in srgb,var(--acc) 82%,#fff);
  --side-bg:rgba(var(--glass2),.72);
  --head-bg:linear-gradient(180deg,rgba(var(--glass2),.86),rgba(var(--glass2),.55));
  --r-pn:16px;
  --glass-fx:blur(var(--blur)) saturate(1.4);               /* .pn 의 backdrop-filter 값 */
}
html[data-theme=board][data-tone=light],html[data-theme=board][data-tone=light] :is(.work-app,.bv){ --head-bg:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.80)); --side-bg:rgba(255,255,255,.72); }

/* ── 7. 카테고리 8색(현황판 테마에서만 바뀜) — 28 tools/cats.json 과 같은 값 ─────────────────
   --acc 선·빛·채운 단추(어둡게) · --acc2 그러데이션 짝 · --acc-ink 글자로 쓸 때(밝게는 흰 바탕 4.5:1 이상, 밝게 채운 단추도 이것) · --acc-on 강조색 바탕 위 글자
   설정 «한 색으로» → ui-theme.js 가 data-cat 을 늘 now 로(= 27 현황판 남색 + 하늘색 한 색) */
html[data-theme=board][data-tone=dark]{--acc:#45d3ff;--acc2:#5d9fff;--acc-ink:#45d3ff;--acc-on:#04203a}   /* data-cat 이 없을 때 = now */
html[data-theme=board][data-tone=dark][data-accent-cat=now]{--acc:#45d3ff;--acc2:#5d9fff;--acc-ink:#45d3ff;--acc-on:#04203a}
html[data-theme=board][data-tone=dark][data-accent-cat=fac]{--acc:#b98cff;--acc2:#7c6bff;--acc-ink:#c9a6ff;--acc-on:#2a0b44}
html[data-theme=board][data-tone=dark][data-accent-cat=svy]{--acc:#b4ec6a;--acc2:#4ccfbf;--acc-ink:#b4ec6a;--acc-on:#1c2604}
html[data-theme=board][data-tone=dark][data-accent-cat=act]{--acc:#ff8fc8;--acc2:#b48cff;--acc-ink:#ff9dcf;--acc-on:#3a0a24}
html[data-theme=board][data-tone=dark][data-accent-cat=ast]{--acc:#ffd23f;--acc2:#8fc3ff;--acc-ink:#ffd23f;--acc-on:#2b2200}
html[data-theme=board][data-tone=dark][data-accent-cat=map]{--acc:#a0f0e0;--acc2:#3fa2ff;--acc-ink:#a0f0e0;--acc-on:#03282a}
html[data-theme=board][data-tone=dark][data-accent-cat=doc]{--acc:#9db0ff;--acc2:#6a7dff;--acc-ink:#a9baff;--acc-on:#0d1640}
html[data-theme=board][data-tone=dark][data-accent-cat=adm]{--acc:#d6cbb8;--acc2:#9aa6bb;--acc-ink:#ddd3c2;--acc-on:#241d10}
html[data-theme=board][data-tone=light]{--acc:#0a8fc4;--acc2:#2a62cc;--acc-ink:#006a93;--acc-on:#ffffff}
html[data-theme=board][data-tone=light][data-accent-cat=now]{--acc:#0a8fc4;--acc2:#2a62cc;--acc-ink:#006a93;--acc-on:#ffffff}
html[data-theme=board][data-tone=light][data-accent-cat=fac]{--acc:#9446d1;--acc2:#4f5fd6;--acc-ink:#8436c2;--acc-on:#ffffff}
html[data-theme=board][data-tone=light][data-accent-cat=svy]{--acc:#4f8a10;--acc2:#0f8f7f;--acc-ink:#447a08;--acc-on:#ffffff}
html[data-theme=board][data-tone=light][data-accent-cat=act]{--acc:#c9367f;--acc2:#8a4fd6;--acc-ink:#b32b6e;--acc-on:#ffffff}
html[data-theme=board][data-tone=light][data-accent-cat=ast]{--acc:#9a7400;--acc2:#2f6fc0;--acc-ink:#7f6000;--acc-on:#ffffff}
html[data-theme=board][data-tone=light][data-accent-cat=map]{--acc:#00828c;--acc2:#1f6fd0;--acc-ink:#006d77;--acc-on:#ffffff}
html[data-theme=board][data-tone=light][data-accent-cat=doc]{--acc:#4d63e0;--acc2:#7b5be0;--acc-ink:#3f55cf;--acc-on:#ffffff}
html[data-theme=board][data-tone=light][data-accent-cat=adm]{--acc:#6f6250;--acc2:#56647c;--acc-ink:#62564a;--acc-on:#ffffff}
html[data-theme=board]{transition:--acc var(--d-cat) var(--ez-cat),--acc2 var(--d-cat) var(--ez-cat),--acc-ink var(--d-cat) var(--ez-cat),--acc-on var(--d-cat) var(--ez-cat)}

/* ── 8. 무늬(카테고리마다 1종) — SVG 가림판(mask). 색은 --acc, 진하기 --motif-op(머리 줄은 × 1.6) ── */
html[data-accent-cat=now]{--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 .5H64M.5 0V64' stroke='%23000' stroke-width='1' fill='none'/%3E%3C/svg%3E");--motif-size:64px 64px}
html[data-accent-cat=fac]{--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='32.33'%3E%3Cpath d='M0 0L56 32.33M56 0L0 32.33M0 16.17L28 32.33M28 0L56 16.17M0 16.17L28 0M28 32.33L56 16.17' stroke='%23000' stroke-width='.8' fill='none'/%3E%3C/svg%3E");--motif-size:56px 32.33px}
html[data-accent-cat=svy]{--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='1.35' fill='%23000'/%3E%3C/svg%3E");--motif-size:18px 18px}
html[data-accent-cat=act]{--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M-4 4L4-4M0 16L16 0M12 20L20 12' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");--motif-size:16px 16px}
html[data-accent-cat=ast]{--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cpath d='M0 39.5H120' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M10 40V30M30 40V22M50 40V26M70 40V16M90 40V20M110 40V10' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");--motif-size:120px 40px}
html[data-accent-cat=map]{--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M-10 60C40 30 80 90 130 60S210 20 250 50'/%3E%3Cpath d='M-10 100C40 70 90 130 140 100S220 60 250 90'/%3E%3Cpath d='M-10 140C50 110 90 170 140 140S220 100 250 130'/%3E%3Cpath d='M-10 180C40 150 100 210 150 180S220 140 250 170'/%3E%3Cpath d='M-10 220C50 190 100 250 150 220S220 180 250 210'/%3E%3Cpath d='M-10 20C40 -10 90 50 140 20S220 -20 250 10'/%3E%3C/svg%3E");--motif-size:240px 240px}
html[data-accent-cat=doc]{--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='26'%3E%3Crect x='1.5' y='1.5' width='19' height='19' stroke='%23000' stroke-width='.8' fill='none'/%3E%3C/svg%3E");--motif-size:22px 26px}
html[data-accent-cat=adm]{--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='72.75'%3E%3Cpath d='M21 0L42 12.12V36.37L21 48.5L0 36.37V12.12ZM21 48.5V72.75M0 36.37L-21 48.5M42 36.37L63 48.5' stroke='%23000' stroke-width='.8' fill='none'/%3E%3C/svg%3E");--motif-size:42px 72.75px}

/* ── 9. 유리 흐림 끔(느린 PC 옵션) · 가벼운 현황판(휴대폰·폴드) ─────────────────────────────
   흐림 끔 = backdrop-filter 없이 거의 불투명한 판. 겉모습 차이가 작도록 투명도를 올린다.
   가벼운 현황판 = 흐림 끔 + 바탕은 늘 흐린 판(미리 흐린 960×540 WebP) + 사진 느린 움직임 없음 + 움직임 길이 × .6 + 그림자 가볍게 */
html[data-theme=board][data-glass-blur="0"],html[data-theme=board][data-glass-blur="0"] :is(.work-app,.bv),
html[data-theme=board][data-lite],html[data-theme=board][data-lite] :is(.work-app,.bv){ --glass-fx:none; --pa1:.94; --pa2:.92; }
html[data-theme=board][data-tone=light]:is([data-glass-blur="0"],[data-lite]),
html[data-theme=board][data-tone=light]:is([data-glass-blur="0"],[data-lite]) :is(.work-app,.bv){ --pa1:.96; --pa2:.94; }
html[data-theme=board][data-lite],html[data-theme=board][data-lite] :is(.work-app,.bv){
  --mk:.6; --kb:0;
  --shadow:0 12px 26px -16px rgba(0,0,0,.7); --shadow-pop:0 14px 30px -14px rgba(0,0,0,.7);
}
html[data-theme=board][data-tone=light][data-lite],html[data-theme=board][data-tone=light][data-lite] :is(.work-app,.bv){ --shadow:0 10px 22px -16px rgba(20,50,100,.38); }

/* ── 10. 옛 이름 → 새 이름 다리(기본·밝게 밖의 세 조합에서만) ─────────────────────────────
   지금 CSS 가 쓰는 옛 이름(--txt·--sub·--bg …)이 테마를 따라가게 한다. 스킨이 옛 이름을 다시 정하는 세 곳(html · .work-app · .bv)에 같이 건다.
   옛 --acc(초록, 6곳)은 이름이 겹쳐서 다리를 놓지 않는다 → 앱 CSS·JS 에서 var(--acc) 를 var(--ok) 로 먼저 바꾼다(사양서 3-3). */
html:is([data-theme=board],[data-theme=base][data-tone=dark]),
html:is([data-theme=board],[data-theme=base][data-tone=dark]) :is(.work-app,.bv){
  --bg:var(--bg0); --txt:var(--ink1); --sub:var(--ink2); --faint:var(--ink4);
  --line-soft:var(--hair);
  --pri:var(--acc-ink); --pri-d:var(--acc-hover); --pri-soft:var(--accs);
  --warn:var(--amb); --err:var(--red);
  --gn-dark:var(--gsolid);
  --shadow-md:var(--shadow); --shadow-lg:var(--shadow-pop);
}

/* ── 11. 움직임 끔 · 줄임 · 캡처 정지 ──────────────────────────────────────────────────────
   off(시스템 «동작 줄이기» 포함) · still(?still=1) = 움직임 0, 끝 모습 바로.  less = 자리·크기 움직임 없이 투명도만 짧게(ui-motion.js 가 처리) */
html[data-motion=off],html.still{ --mk:0; }
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after,
html.still *,html.still *::before,html.still *::after{ animation:none!important; transition:none!important; }
html[data-motion=less]{ --kb:0; }
@media (prefers-reduced-motion:reduce){
  :root{ --mk:0; --kb:0; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none!important; }
}