.draw-rule {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 17px;
}

.draw-rule-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.draw-rule-heading > i {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  height: 40px;
  border-radius: 12px;
  background: #eaf4ff;
  color: var(--blue);
  font-size: 18px;
}

.draw-rule-heading b { display: block; font-size: 13px; }
.draw-rule-heading p { color: var(--muted); font-size: 9px; line-height: 1.4; margin: 3px 0 0; }
.draw-rule ol { display: grid; gap: 10px; margin: 15px 0; padding-left: 19px; }
.draw-rule li { color: #496274; font-size: 10px; line-height: 1.55; padding-left: 3px; }
.draw-rule li::marker { color: var(--blue); font-family: var(--font-title); font-weight: 700; }
.draw-rule li b, .draw-rule li strong { color: var(--navy); }
.draw-rule-example { padding: 13px; border-radius: 14px; background: #eaf4ff; }
.draw-rule-example span { display: block; color: var(--blue); font-family: var(--font-title); font-size: 8px; font-weight: 800; letter-spacing: .12em; margin-bottom: 5px; }
.draw-rule-example p { color: #38556a; font-size: 9px; line-height: 1.55; margin: 0; }
.draw-rule-example b { color: var(--navy); }
.draw-rule-clarification { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 8px; line-height: 1.5; margin: 12px 2px 0; }
.draw-rule-clarification i { color: var(--blue); font-size: 12px; margin-top: 1px; }