/* ========================================
   하나로교회 성경구절 카드 - Tailwind CSS 기반 미니멀 테마
   ======================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;600;700&family=Noto+Serif+KR:wght@400;600;700&display=swap');

/* 스크롤바 스타일 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* 브라우저 자동완성 오버라이드 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #1e293b !important;
}
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #1e293b inset !important;
    -webkit-text-fill-color: #f1f5f9 !important;
}

/* 다크 모드 날짜/시간 입력 */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"] { color-scheme: dark; }

/* 다크 모드 select 화살표 */
[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F0F4F8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* 다크 모드 브라우저 아이콘 */
[data-theme="dark"] input::-ms-reveal,
[data-theme="dark"] input::-ms-clear { filter: invert(1); }
[data-theme="dark"] input::-webkit-calendar-picker-indicator { filter: invert(1); }

/* 스피너 애니메이션 */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
    width: 24px; height: 24px;
    border: 3px solid #e2e8f0; border-top-color: #3b82f6;
    border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block;
}
.spinner-small {
    width: 16px; height: 16px;
    border: 2px solid #e2e8f0; border-top-color: #3b82f6;
    border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block;
}
.spinner-large {
    width: 40px; height: 40px;
    border: 4px solid #e2e8f0; border-top-color: #3b82f6;
    border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block;
}
.spinner-tiny {
    width: 14px; height: 14px;
    border: 2px solid #e2e8f0; border-top-color: #3b82f6;
    border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block;
}

/* Blazor 에러 UI */
#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    padding: 16px; background: #fef2f2; color: #dc2626;
    text-align: center; z-index: 9999; border-top: 2px solid #fca5a5;
}
#blazor-error-ui.show { display: flex; align-items: center; justify-content: center; gap: 12px; }
#blazor-error-ui .reload { color: #dc2626; font-weight: 600; text-decoration: underline; }
#blazor-error-ui .dismiss { cursor: pointer; opacity: 0.6; font-weight: bold; }
#blazor-error-ui .dismiss:hover { opacity: 1; }

/* Blazor validation */
.valid.modified:not([type=checkbox]) { outline: 2px solid #10b981; }
.invalid { outline: 2px solid #ef4444; }
.validation-message { color: #ef4444; font-size: 0.8125rem; margin-top: 4px; }
.blazor-error-boundary { background: #ef4444; padding: 1rem; color: white; border-radius: 12px; }
.blazor-error-boundary::after { content: "오류가 발생했습니다."; }

/* 선택 영역 */
::selection { background: rgba(59, 130, 246, 0.2); }

/* 테이블 반응형 */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }