/* 카드 시각화 공용 스타일 — app.html(검색)·review.html(감수) 공용.
   응급=알고리즘 스텝 / 술기=단계 타임라인 / 검사=게이지. render-cards.js와 짝. */

/* 진입 인지(응급) */
.recog { background: var(--warn-soft, #fdf7e3); border: 1px solid #f0e3ac; border-radius: 11px;
  padding: 6px 14px; margin: 6px 0; }
.recog ul { margin: 6px 0; }
.recog li { font-size: 13.8px; }

/* 스텝 플로우 / 단계 타임라인 (응급·술기 공용) */
.flow { list-style: none; margin: 8px 0 4px; padding: 0; position: relative; }
.flow li { position: relative; padding: 0 0 18px 44px; }
.flow li:last-child { padding-bottom: 2px; }
.flow li::before { content: attr(data-n); position: absolute; left: 0; top: 0; width: 30px; height: 30px;
  border-radius: 50%; background: var(--accent, #7C3ED7); color: #fff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center; z-index: 1; }
.flow li::after { content: ""; position: absolute; left: 14.5px; top: 30px; bottom: 0; width: 2px; background: #e4d8f7; }
.flow li:last-child::after { display: none; }
.flow .act { font-size: 14.5px; font-weight: 600; color: var(--ink, #37352f); line-height: 1.5; }
.flow .cau { display: block; font-size: 12.8px; color: var(--sub, #6b6a65); margin-top: 3px; line-height: 1.5; }
/* 응급은 빨강 계열 */
.flow.emg li::before { background: #b3261e; }
.flow.emg li::after { background: #f7d4d4; }

/* 하지 말 것(응급) */
.donot { background: var(--no-soft, #fdf2f2); border: 1px solid #f7d4d4; border-radius: 11px; padding: 6px 15px; margin: 8px 0; }
.donot li { font-size: 13.5px; color: #8a2620; }

/* 검사 게이지 */
.gauge-wrap { margin: 12px 0 6px; }
.gauge { position: relative; height: 26px; border-radius: 8px; overflow: hidden; display: flex;
  font-size: 11px; font-weight: 700; color: #fff; }
.gauge .seg { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; }
.gauge .low, .gauge .high { background: #c0392b; }
.gauge .normal { background: #1d7a44; }
.gauge .loww, .gauge .highw { background: #e08e0b; }
.gnums { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--sub, #6b6a65);
  margin-top: 4px; font-weight: 600; }
.crit { background: var(--no-soft, #fdf2f2); border: 1px solid #f7d4d4; border-radius: 10px;
  padding: 9px 13px; margin: 8px 0; font-size: 13.3px; color: #8a2620; }
.crit b { color: var(--no, #c0392b); }

/* 업데이트 일자 (출처 옆) */
.updated { color: var(--faint, #9b9a97); font-weight: 400; }

/* 새 카테고리 태그 색 */
.tag.img { background:#eaf1fb; color:#2b5b9e; }
.tag.op { background:#fdeef0; color:#a83254; }