/* 
   자동입찰 기능 안내 페이지 전용 스타일 
   Tailwind CSS 의존성 제거 및 순수 CSS 구현
*/

:root {
    --sf-point: #5048D7;
    --sf-sub: #7774FF;
    --sf-slate-50: #f8fafc;
    --sf-slate-100: #f1f5f9;
    --sf-slate-200: #e2e8f0;
    --sf-slate-400: #94a3b8;
    --sf-slate-500: #64748b;
    --sf-slate-600: #475569;
    --sf-slate-700: #334155;
    --sf-slate-800: #1e293b;
    --sf-slate-900: #0f172a;
}

/* Base Layout */
.sf-min-h-screen { min-height: 100vh; }
.sf-py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.sf-px-4 { padding-left: 1rem; padding-right: 1rem; }
.sf-max-w-md { max-width: 28rem; }
.sf-mx-auto { margin-left: auto; margin-right: auto; }
.sf-mt-6 { margin-top: 1.5rem; }
.sf-mb-3-5 { margin-bottom: 0.875rem; }
.sf-mb-5 { margin-bottom: 1.25rem; }
.sf-mb-6 { margin-bottom: 1.5rem; }

/* Utilities */
.sf-bg-white { background-color: #ffffff; }
.sf-bg-slate-50 { background-color: var(--sf-slate-50); }
.sf-bg-slate-100-80 { background-color: rgba(241, 245, 249, 0.8); }
.sf-bg-slate-800 { background-color: var(--sf-slate-800); }
.sf-bg-point { background-color: var(--sf-point); }
.sf-bg-point-10 { background-color: rgba(80, 72, 215, 0.1); }
.sf-bg-slate-200 { background-color: var(--sf-slate-200); }

.sf-text-white { color: #ffffff; }
.sf-text-slate-400 { color: var(--sf-slate-400); }
.sf-text-slate-500 { color: var(--sf-slate-500); }
.sf-text-slate-600 { color: var(--sf-slate-600); }
.sf-text-slate-700 { color: var(--sf-slate-700); }
.sf-text-slate-900 { color: var(--sf-slate-900); }
.sf-text-point { color: var(--sf-point); }

.sf-text-11 { font-size: 11px !important; }
.sf-text-13 { font-size: 13px !important; }
.sf-text-14 { font-size: 14px !important; }
.sf-text-15 { font-size: 15px !important; }
.sf-text-16 { font-size: 16px !important; }
.sf-text-17 { font-size: 17px !important; }
.sf-text-sm { font-size: 0.875rem !important; }

.sf-font-medium { font-weight: 500; }
.sf-font-semibold { font-weight: 600; }
.sf-font-bold { font-weight: 700; }

.sf-rounded-md { border-radius: 0.375rem; }
.sf-rounded-lg { border-radius: 0.5rem; }
.sf-rounded-xl { border-radius: 0.75rem; }
.sf-rounded-2xl { border-radius: 1rem; }
.sf-rounded-full { border-radius: 9999px; }
.sf-rounded-sm { border-radius: 0.125rem; }

.sf-shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.sf-shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }

.sf-border { border: 1px solid var(--sf-slate-200); }
.sf-border-slate-200 { border-color: var(--sf-slate-200); }
.sf-border-b { border-bottom: 1px solid var(--sf-slate-200); }
.sf-border-dashed { border-style: dashed; }
.sf-border-slate-100 { border-color: var(--sf-slate-100); }

.sf-flex { display: flex; }
.sf-flex-col { flex-direction: column; }
.sf-flex-1 { flex: 1 1 0%; }
.sf-flex-shrink-0 { flex-shrink: 0; }
.sf-items-center { align-items: center; }
.sf-justify-center { justify-content: center; }

.sf-gap-1-5 { gap: 0.375rem; }
.sf-gap-2 { gap: 0.5rem; }
.sf-gap-3 { gap: 0.75rem; }

.sf-p-1-5 { padding: 0.375rem; }
.sf-p-4 { padding: 1rem; }
.sf-p-5 { padding: 1.25rem; }
.sf-py-2-5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.sf-py-3-5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.sf-py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.sf-px-2-5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.sf-px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.sf-py-1-5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.sf-pl-5 { padding-left: 1.25rem; }

.sf-mr-2-5 { margin-right: 0.625rem; }
.sf-ml-1-5 { margin-left: 0.375rem; }
.sf-mt-2 { margin-top: 0.5rem; }

.sf-space-y-1-5 > * + * { margin-top: 0.375rem; }
.sf-space-y-3 > * + * { margin-top: 0.75rem; }
.sf-space-y-4 > * + * { margin-top: 1rem; }
.sf-space-x-2 > * + * { margin-left: 0.5rem; }

.sf-w-1-5 { width: 0.375rem; }
.sf-w-2 { width: 0.5rem; }
.sf-w-4 { width: 1rem; }
.sf-w-6 { width: 1.5rem; }
.sf-w-18 { width: 18px; }
.sf-w-full { width: 100%; }
.sf-h-2 { height: 0.5rem; }
.sf-h-4 { height: 1rem; }
.sf-h-5 { height: 1.25rem; }
.sf-h-6 { height: 1.5rem; }
.sf-h-18 { height: 18px; }
.sf-w-14 { width: 14px; }
.sf-h-14 { height: 14px; }

.sf-relative { position: relative; }
.sf-absolute { position: absolute; }
.sf--top-10 { top: -2.5rem; }
.sf-left-1-2 { left: 50%; }
.sf--bottom-1 { bottom: -0.25rem; }
.sf--translate-x-1-2 { transform: translateX(-50%); }
.sf-rotate-45 { transform: rotate(45deg); }
.sf-z-10 { z-index: 10; }

.sf-whitespace-nowrap { white-space: nowrap; }
.sf-pointer-events-none { pointer-events: none; }
.sf-list-disc { list-style-type: disc; }
.sf-leading-relaxed { line-height: 1.625; }
.sf-break-keep { word-break: keep-all; }
.sf-tracking-tight { letter-spacing: -0.025em; }
.sf-text-center { text-align: center; }
.sf-overflow-hidden { overflow: hidden; }
.sf-m-0 { margin: 0 !important; }
.sf-leading-none { line-height: 1 !important; }

.sf-divide-y > * + * { border-top-width: 1px; border-top-color: var(--sf-slate-100); }

.sf-transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.sf-duration-200 { transition-duration: 200ms; }

/* Custom Animations */
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.sf-animate-fade-in-up {
    animation: fadeInUp 0.4s ease-out;
}

@keyframes floating {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -6px); }
}

.sf-animate-floating {
    animation: floating 3s ease-in-out infinite;
}

/* Interactive States */
.tab-btn:not(.sf-bg-point):hover {
    background-color: var(--sf-slate-100);
}

/* FOUC 방지용 */
.tw-cloak {
    opacity: 0;
    visibility: hidden;
}

.tw-ready {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-in;
}