/* KTR ISCC 2일 과정 전용 보조 스타일 — 흐름도·인용·체크리스트·실습 안내. 기본 스타일(style.css·deck.css)은 건드리지 않는다. */

.cite { margin: 12px 0 8px; padding: 12px 16px; border-left: 4px solid #ffab40; background: #fffaf3; border-radius: 0 10px 10px 0; }
.cite p { margin: 0; font-size: 18px; font-weight: 700; color: #3a2a2a; line-height: 1.5; }

/* 절차 흐름 — 가로 단계 상자 */
.flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.flow .st { flex: 1 1 130px; border-radius: 10px; padding: 10px 12px; background: #fbf5f5; border: 1px solid #e6d3d3; font-size: 14px; line-height: 1.45; }
.flow .st b { display: block; color: #800000; margin-bottom: 2px; }
.flow .st small { display: block; color: #7a746f; font-size: 12px; margin-top: 4px; }
.flow .ar { align-self: center; color: #9fa0a0; font-size: 20px; }

/* 체크리스트 */
.check { list-style: none; padding-left: 0; margin: 10px 0; }
.check li { position: relative; padding-left: 26px; margin: 5px 0; line-height: 1.5; }
.check li::before { content: "☐"; position: absolute; left: 0; top: 0; color: #800000; font-size: 17px; }
.check li.done::before { content: "☑"; }

/* 네 칸 요약 카드 */
.crit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.crit.three { grid-template-columns: repeat(3, 1fr); }
.crit.two { grid-template-columns: repeat(2, 1fr); }
.crit div { border: 1px solid #e6d3d3; border-top: 3px solid #800000; border-radius: 8px; padding: 9px 11px; font-size: 13.5px; line-height: 1.45; background: #fffdfb; }
.crit div b { display: block; color: #800000; font-size: 15px; margin-bottom: 3px; }

/* 실습 안내 상자 */
.prac-box { border: 2px dashed #800000; border-radius: 12px; padding: 14px 18px; margin: 12px 0; background: #fff; }
.prac-box .ph { font-weight: 800; color: #800000; font-size: 16px; margin-bottom: 6px; }
.prac-box ol { margin: 6px 0 0; padding-left: 1.3em; }
.prac-box li { margin: 3px 0; }

/* 서식 흉내 — 선언서·시정조치서의 빈칸 */
.form { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0; }
.form th { width: 26%; text-align: left; background: #fbf5f5; color: #800000; font-weight: 700; padding: 6px 9px; border: 1px solid #e6d3d3; }
.form td { padding: 6px 9px; border: 1px solid #e6d3d3; min-height: 1.6em; }
.form td.blank { color: #b7aeae; font-style: italic; }
.form td.bad { color: #b00020; font-weight: 700; }
.form td.good { color: #2e6b3f; font-weight: 700; }

/* 두 단 나란히 */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0; }
@media (max-width: 720px) { .two, .crit, .crit.three { grid-template-columns: 1fr; } }

.src { font-size: 12.5px; color: #9a9a9a; margin-top: 8px; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl.small { font-size: 13px; }
.tbl.small th, .tbl.small td { padding: 5px 7px; }