/* 화면 다듬기 1차 (2026-09-30 사장님 「버튼이 세련되지 못함」 → 「세계 최고 디자이너 입장」) — ① 버튼 네 가지 규칙
 *
 * 무엇이 문제였나 — 위험성평가 8단계에만 버튼 모양 21가지 · 배경색 7 · 모서리 5 · 높이 6 · 글자 6.
 *   색에 뜻이 없었다(빨강 = 다음, 초록 = 인쇄, 회청 = PDF, 검정 = 고름 …).
 *
 * 규칙
 *   ① 주 버튼   빨강 칠 — 그 화면에서 가장 중요한 한 가지 (다음 · 모두 PDF 로 저장 · 이 곳 완료)
 *   ② 보조 버튼 흰 바탕 · 회색 테두리 — 나머지 전부 (이전 · 인쇄 · 고르기 · 사진)
 *   ③ 선택 칩   고르면 검정 칠 — 상 · 중 · 하 · 즉시 · 계획 · 30분 · 1시간 · 평가 종류 …
 *   ④ 완료     초록은 「✓ 있음 · 끝남」 뜻에만 (칠하지 않고 글자 · 테두리)
 *   모서리 12px 하나 · 높이 48 / 40 · 글자 16 / 14
 *
 * ★ 모양만 바꾼다 — 단추 이름 · 누르는 일 · 차례는 그대로.
 */
:root{
  --b-red:#E3071B; --b-red-d:#C00616;
  --b-ink:#15171C; --b-line:#D3D8DE; --b-line-d:#AEB5BE;
  --b-bg:#FFFFFF; --b-soft:#F4F5F7; --b-ok:#127A3E; --b-ok-bg:#F1F8F3;
  --b-r:12px;
}

/* ── ① 주 버튼 ── */
.btn, .qw-go, .fmx-btn.p, .nb-go{
  background:var(--b-red)!important; color:#fff!important; border:1px solid var(--b-red)!important;
  border-radius:var(--b-r)!important; min-height:48px; font-size:16px!important; font-weight:800!important;
  letter-spacing:-.2px; box-shadow:0 1px 2px rgba(227,7,27,.18)!important; transition:background .12s, transform .06s;
}
.btn:hover, .qw-go:hover, .fmx-btn.p:hover{ background:var(--b-red-d)!important; }
.btn:active, .qw-go:active{ transform:translateY(1px); }

/* ── ② 보조 버튼 ── (o · g · k · 작은 것 · 표 아래 단추 · 사진 단추) */
.btn.o, .btn.g, .btn.k, .fmx-btn:not(.p), .heatbtn, .cand, .qw-row button:not(.main), .qw-back, .linkbtn,
.ez-nav .btn.o{
  background:var(--b-bg)!important; color:var(--b-ink)!important; border:1px solid var(--b-line)!important;
  box-shadow:none!important; font-weight:700!important;
}
.btn.o:hover, .btn.g:hover, .btn.k:hover, .fmx-btn:not(.p):hover, .cand:hover{ background:var(--b-soft)!important; border-color:var(--b-line-d)!important; }
.btn.sm, .btn.o.sm, .btn.g.sm{ min-height:40px!important; font-size:14px!important; border-radius:var(--b-r)!important; padding:0 14px!important; }
.btn.o{ min-height:48px; font-size:16px!important; }
.fmx-btn{ border-radius:var(--b-r)!important; min-height:40px; font-size:14px!important; }

/* ── ④ 완료 뜻 — 초록은 글자 · 테두리만 ── */
.btn.g{ color:var(--b-ink)!important; border-color:var(--b-line)!important; background:var(--b-bg)!important; }

/* 사진 찍기 — 그 칸의 주 행동 */
.qw-row button.main{ background:var(--b-red)!important; color:#fff!important; border:1px solid var(--b-red)!important; border-radius:var(--b-r)!important; font-weight:800!important; }

/* ── ③ 선택 칩 ── */
.chips button, .ez-chips button, .pick button, .ra-seg button, .qw-lv button, .qw-due button, .who button, .picks .pk{
  background:var(--b-bg)!important; color:var(--b-ink)!important; border:1px solid var(--b-line)!important;
  border-radius:var(--b-r)!important; min-height:40px; font-size:14px!important; font-weight:700!important; box-shadow:none!important;
}
.chips button.on, .ez-chips button.on, .pick button.on, .ra-seg button.on, .qw-lv button.on, .qw-lv button[aria-pressed="true"], .qw-due button[aria-pressed="true"], .ez-chips button[aria-pressed="true"],
.who button.on, .picks .pk.on, .btn.o.sm.on, .btn.o.on, .btnrow .btn.o.sm.on{
  background:var(--b-ink)!important; color:#fff!important; border-color:var(--b-ink)!important;
}
.who button.on b, .who button.on span{ color:#fff!important; }

/* 장소 고르기 칸 — 고르면 검정 테두리 · ✓ */
.qw-pick{ border-radius:var(--b-r)!important; border:1px solid var(--b-line)!important; box-shadow:none!important; }
.qw-pick.on{ border:2px solid var(--b-ink)!important; background:#fff!important; }

/* 끈 단추 */
.btn:disabled, .qw-go:disabled{ background:#EEF0F3!important; color:#9AA1AA!important; border-color:#E3E6EA!important; box-shadow:none!important; }

/* 마지막 저장 — 「모두 PDF로 저장」 이 그 화면의 주 버튼 (피피티 · 엑셀 저장은 보조) */
.btn.k[onclick^="pdf로저장"]{
  background:var(--b-red)!important; color:#fff!important; border-color:var(--b-red)!important; box-shadow:0 1px 2px rgba(227,7,27,.18)!important; font-weight:800!important;
}

/* ══ ② 색 줄이기 — 안내 상자는 칠하지 않고 연한 회색 바탕 + 왼쪽 가는 색 줄 하나 ══
   초록 = 됨 · 노랑 = 확인 필요 · 빨강 = 막힘/위험 · 회색 = 참고. 큰 색 덩어리를 없앤다. */
.okbox, .okbox2, .ambbox, .forced, .highflag, .src, .grade{
  background:#F7F8FA!important; border:0!important; border-left:3px solid #C9CFD6!important;
  border-radius:10px!important; color:var(--b-ink)!important; box-shadow:none!important;
}
/* 3차(흑백): 색 줄은 위험(빨강) 하나만 · 나머지 회색 · 글자는 모두 먹색 */
.highflag, .grade.g-low{ border-left-color:var(--b-red)!important; }
.okbox b, .okbox2 b, .ambbox b, .forced b, .highflag b, .grade b{ color:var(--b-ink)!important; }
.grade b{ font-size:18px!important; }
.grade s{ color:#3D434C!important; opacity:1!important; }

/* ══ ③ 상자 줄이기 — 체크 항목 카드: 베이지 칠 · 호박색 테두리 → 흰 바탕 · 옅은 선 ══ */
.dd, .dd.yet, .dd.unk{ background:#fff!important; border:1px solid #ECEEF1!important; border-radius:14px!important; }
.dd.ok{ background:#fff!important; border-color:#ECEEF1!important; }
.dd.no{ background:#fff!important; border-color:#ECEEF1!important; box-shadow:inset 3px 0 0 var(--b-red)!important; }

/* ══ ④ 하나만 고르는 것 = 붙은 「구간 선택」 막대 ══ (있음·없음·해당 없음 · 즉시·계획·예산·모름 · 평가 종류) */
.three, .qw-lv, .ra-seg{
  background:#EEF0F3!important; border-radius:14px!important; padding:4px!important; gap:4px!important; border:0!important;
}
.three button, .qw-lv button, .ra-seg button{
  background:transparent!important; border:0!important; border-radius:10px!important; box-shadow:none!important;
  min-height:44px!important; color:#3D434C!important; font-weight:700!important;
}
.three button.on, .qw-lv button[aria-pressed="true"], .qw-lv button.on, .ra-seg button.on{
  background:var(--b-ink)!important; color:#fff!important; box-shadow:0 1px 2px rgba(0,0,0,.18)!important;
}

/* ══ ⑤ 덜 중요한 작은 단추 = 테두리 없는 연회색 (글자 단추에 가깝게) ══ */
.btn.o.sm, .fmx-btn:not(.p), .heatbtn, .linkbtn{
  background:#F0F2F5!important; border:1px solid transparent!important;
}
.btn.o.sm:hover, .fmx-btn:not(.p):hover{ background:#E6E9ED!important; }
.btn.o.sm.on{ background:var(--b-ink)!important; color:#fff!important; }


/* ══ ⑥ 흑백으로 (2026-09-30 사장님 「아직도 색이 알록달록해서 산만」) ══
   색 = 로고 · 빨간 「지금 누를 것」 단추 · 진짜 위험(빨강) 셋만. 나머지는 먹색 · 회색 · 흰색. */
/* 연습 띠 — 노랑 · 갈색 → 연회색 */
#fmsPracBar{ background:#F3F4F6!important; border:1px solid #DDE1E6!important; color:var(--b-ink)!important; }
#fmsPracBar button{ background:#fff!important; border:1px solid var(--b-line)!important; color:var(--b-ink)!important; }
#fmsPracBar a{ background:var(--b-ink)!important; color:#fff!important; }
/* 단계 칸 — 빨강 · 초록 → 먹색 테두리 · 회색 작은 글 */
.steps button.on{ border:2px solid var(--b-ink)!important; background:#fff!important; color:var(--b-ink)!important; }
.steps button i, .steps button.on i{ color:#6B7280!important; }
.steps button.on b{ color:var(--b-ink)!important; }
.steps button.done{ border-color:var(--b-line)!important; background:#fff!important; }
.steps button.done s{ color:var(--b-ink)!important; }
/* 「지금 할 일」 딱지 — 빨강 → 먹색 */
.nb-do > span{ background:var(--b-ink)!important; color:#fff!important; }
/* 작은 딱지 — 칠 없이 회색 · 됨/막힘은 앞의 작은 점만 */
.tag, .tag.done, .tag.warn{ background:#F0F2F5!important; color:#3D434C!important; border:0!important; }
.tag.done::before, .tag.warn::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; vertical-align:2px; }
.tag.done::before{ background:#1F8A4C; } .tag.warn::before{ background:var(--b-red); }
/* 목록의 「만들기 · 보기 · 바꾸기」 — 빨강 · 파랑 글씨 → 먹색 */
.dc u, .dc i, .docs u{ color:var(--b-ink)!important; }
/* 화면 코드에 박힌 색 글씨(주황 · 초록 · 파랑) → 회색 먹색 (단추 안은 그대로) */
.fms-content [style*="color:var(--amb"]:not(.btn), .fms-content [style*="color:var(--grn"]:not(.btn),
.fms-content [style*="color:var(--blue"]:not(.btn), .fms-content [style*="#b45309"], .fms-content [style*="#8a5200"],
.fms-content [style*="#7A4A00"], .fms-content .dd .w, .fms-content .dd .auto{ color:#4B5563!important; }
.fms-content summary > u[style]{ color:var(--b-ink)!important; }
/* 한 화면에 빨간 단추는 하나 — 사전준비의 「수시 한 건 빠르게」 · 「표지 사진 찍기」 는 보조 */
.quick-in .btn, .ra-shot2 .btn:not(.o){ background:var(--b-bg)!important; color:var(--b-ink)!important; border:1px solid var(--b-line)!important; box-shadow:none!important; }
/* 사업장 카드 왼쪽 줄 · 「카드 / 표」 고름 표시 */
.card > .rw{ border-left-color:#C9CFD6!important; }
.fms-content .on > b{ background:var(--b-ink)!important; color:#fff!important; }   /* 2026-09-30 — 본문만. 머리의 로그인 단추(.fms-login.on > b)에 검은 상자가 생겼다 */