/* WP-C: /conditions 상세 본문 보강 전용 스타일. R4_SPEC.md §4 참조.
   본문 텍스트는 전부 최상위 <p>이며, 번호·체크 아이콘은 여기서 ::before로만 만든다. */

.condition-section p {
  color: var(--color-text-muted);
  line-height: 1.85;
  margin: 0 0 16px;
  font-size: 16px;
}
.condition-section p:last-child {
  margin-bottom: 0;
}

/* 이 조건에서 놓치기 쉬운 것 — 주의 항목. <li> 대신 <p>에 카운터 배지 */
.condition-pitfalls {
  counter-reset: pitfall;
}
.condition-pitfalls p {
  position: relative;
  background: #fff7ed;
  border-radius: var(--radius-sm);
  margin: 0 0 12px;
  padding: 15px 18px 15px 52px;
  line-height: 1.7;
  color: var(--color-text);
}
.condition-pitfalls p:last-child {
  margin-bottom: 0;
}
.condition-pitfalls p::before {
  counter-increment: pitfall;
  content: counter(pitfall);
  position: absolute;
  left: 16px;
  top: 15px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  display: grid;
  place-items: center;
}

/* 이 조건이 맞는 사람 — 체크마크 문단 */
.condition-fitfor p {
  position: relative;
  margin: 0 0 12px;
  padding: 2px 0 2px 30px;
  line-height: 1.75;
  color: var(--color-text-muted);
}
.condition-fitfor p:last-child {
  margin-bottom: 0;
}
.condition-fitfor p::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--color-brand);
  font-weight: 900;
}

/* 계약 전 확인할 것 — 기존 checks 필드를 처음으로 렌더링하는 영역 */
.condition-checks {
  counter-reset: checkitem;
}
.condition-checks p {
  position: relative;
  background: var(--color-brand-soft);
  border-radius: var(--radius-sm);
  margin: 0 0 12px;
  padding: 15px 18px 15px 52px;
  line-height: 1.7;
  color: var(--color-text);
}
.condition-checks p:last-child {
  margin-bottom: 0;
}
.condition-checks p::before {
  counter-increment: checkitem;
  content: counter(checkitem);
  position: absolute;
  left: 16px;
  top: 15px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  display: grid;
  place-items: center;
}

@media (width <= 600px) {
  .condition-section p {
    font-size: 15px;
  }
  .condition-pitfalls p,
  .condition-checks p {
    padding: 13px 14px 13px 46px;
  }
  .condition-pitfalls p::before,
  .condition-checks p::before {
    left: 13px;
    top: 13px;
    width: 20px;
    height: 20px;
    font-size: 11px;
  }
}