/* 브라우저 기본 유효성 말풍선 대체 — 인라인 필드 에러 */

.form-input.is-invalid,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
    border-color: #f0a6a6 !important;
    background-color: #fffafa;
    box-shadow: 0 0 0 3px rgba(225, 90, 90, 0.10) !important;
}

/* 밝은 카드 위가 기본. 어두운 페이지 배경에서는 아래에서 톤을 올린다. */
.field-error {
    --field-error-ink: #c0322f;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--field-error-ink);
    animation: fieldErrorIn 0.18s ease-out;
}

body.dashboard-layout .field-error { --field-error-ink: #ff9a9a; }

body.order-renewal-page .field-error,
body.dashboard-layout .service-item-row .field-error,
body.dashboard-layout .order-summary-container .field-error { --field-error-ink: #c0322f; }

.field-error::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 0.12rem;
    background-color: currentColor;
    -webkit-mask: var(--field-error-icon) center / 14px 14px no-repeat;
    mask: var(--field-error-icon) center / 14px 14px no-repeat;
}

:root {
    --field-error-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.6v5.2'/%3E%3Cpath d='M12 16.4h.01'/%3E%3C/svg%3E");
}

@keyframes fieldErrorIn {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .field-error { animation: none; }
}