/* ==========================================================================
   info-note — 아이콘 + 안내 문구 박스
   ========================================================================== */

.info-note {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  padding: var(--sp-5) var(--sp-8);
  background: var(--c-surface-note);
  border-radius: var(--radius);
  color: var(--c-text-sub);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
}

.info-note__icon { flex: 0 0 auto; color: var(--c-text-sub); }

.info-note__body > * + * { margin-top: var(--sp-4); }

@media (min-width: 768px) {
  .info-note { padding: var(--sp-5) 35px; }
}

/* --- 주의 변형 (--warn) ---------------------------------------------------
   만료된 견적처럼 "그대로 두면 안 되는 상태" 를 알린다.
   에러(--c-danger)와는 다르다 — 잘못된 입력이 아니라 지나간 기한이다.
   색만으로 알리지 않는다. 아이콘 모양(세모)과 문구가 함께 바뀐다.
   -------------------------------------------------------------------------- */
.info-note--warn {
  background: var(--c-warn-bg);
  color: var(--c-warn-text);
}
.info-note--warn .info-note__icon { color: var(--c-warn-icon); }
.info-note--warn strong { color: var(--c-warn-strong); }