/* ============================================================
 * demo.css — demo 프로젝트 CSS (프로젝트 소유, 2026-10-02)
 *
 * 엔진 CSS(vendor/moca/css — moca.css·base.css·mobile.css)는 MOCA 제품이다. 그래서 화면에 필요한 모양 중
 * 엔진에 없는 것은 여기에 class 로 둔다. 화면 HTML 은 인라인 style 대신 이 class 를 고른다(moca-rules §6-7).
 *
 *  - 먼저 엔진 class·토큰에 있는지 찾는다(moca_find). 없을 때만 여기에 더한다.
 *  - 색·간격은 엔진 테마 변수(var(--c-*) · var(--m-*))만 쓴다 — 다크·라이트·고대비 테마를 저절로 따라간다.
 *  - 한 화면만 쓰는 class 는 화면 ID 를 앞에 붙인다(예: .sam1032_step). 여러 화면이 쓰면 접두 없이 기능 이름으로.
 *  - 선언은 한 줄(.a { padding: 8px; color: var(--c-text); }), 주석 위에는 빈 줄 하나.
 *  - AI 스튜디오 에이전트는 엔진 CSS 를 고치지 않고 여기만 고친다. 여기서 검증된 것 중 제품에 넣을 만한 것은 사람이 골라 moca.css 로 올린다.
 * ============================================================ */

/* 버튼 그룹 유형 모양(moca_config.js buttonGroupPresets 의 cls) — ★ 선택자는 .bd_modal_btns.{cls} 로 시작한다.
   .{cls} 만 쓰면 테마 CSS(:root.theme-light .btn_neutral — 화면이 뜬 뒤 붙는다)가 이겨 색이 안 먹는다(2026-10-02 실측) */

/* approve — 승인·반려: 작은 버튼 · 좁은 간격 · 승인=성공색 · 반려=위험색 옅은 배경 */
.bd_modal_btns.btg_approve { gap: 4px; }
.bd_modal_btns.btg_approve button { height: 24px; padding: 0 10px; font-size: 12px; border-radius: 12px; }
.bd_modal_btns.btg_approve button[data-label="승인"] { background: var(--c-success); border-color: var(--c-success); color: var(--c-white); }
.bd_modal_btns.btg_approve button[data-label="반려"] { background: color-mix(in srgb, var(--c-danger) 15%, transparent); border: 1px solid var(--c-danger); color: var(--c-danger); }

/* action — 보조 버튼 줄: 작은 중립 버튼 · 좁은 간격(모양만 — 상태 규칙 없음) */
.bd_modal_btns.btg_action { gap: 4px; }
.bd_modal_btns.btg_action button { height: 24px; padding: 0 10px; font-size: 12px; }