/* 🎨 픽업발렛 - 극한 최적화 스타일시트 */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Noto Sans KR',sans-serif;line-height:1.6;color:#333}
html{scroll-behavior:smooth}

/* 히어로 섹션 */
.hero-bg{background:linear-gradient(135deg,#2563eb 0%,#3b82f6 50%,#8b5cf6 100%);position:relative;overflow:hidden}
.hero-bg::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=800&h=600&fit=crop&crop=center');background-size:cover;background-position:center;opacity:0.2}

/* 예약 폼 */
.form-step{padding:1.5rem;border-radius:0.75rem;border:2px solid #e5e7eb;transition:all 0.3s;margin-bottom:1.5rem}
.form-step.active{border-color:#3b82f6;background-color:#eff6ff}
.form-step.completed{border-color:#10b981;background-color:#ecfdf5}

.step-indicator{display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0.5;transition:all 0.3s}
.step-indicator.active,.step-indicator.completed{opacity:1}

.step-circle{width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;margin-bottom:0.5rem}
.step-indicator:not(.active):not(.completed) .step-circle{background-color:#e5e7eb;color:#9ca3af}
.step-indicator.active .step-circle{background-color:#3b82f6;color:white}
.step-indicator.completed .step-circle{background-color:#10b981;color:white}

.price-display{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#92400e;padding:1rem;border-radius:0.5rem;text-align:center;margin:1rem 0;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1)}

/* 버튼 */
.btn-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:white;border:none;padding:0.75rem 1.5rem;border-radius:0.5rem;font-weight:600;transition:all 0.3s;cursor:pointer}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(59,130,246,0.4)}
.btn-secondary{background:white;color:#374151;border:1px solid #d1d5db;padding:0.75rem 1.5rem;border-radius:0.5rem;transition:all 0.3s;cursor:pointer}
.btn-secondary:hover{background:#f9fafb;border-color:#9ca3af}

/* 폼 요소 */
.form-input{width:100%;padding:0.75rem;border:1px solid #d1d5db;border-radius:0.5rem;font-size:1rem;transition:border-color 0.3s}
.form-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1)}
.form-select{width:100%;padding:0.75rem;border:1px solid #d1d5db;border-radius:0.5rem;background:white;cursor:pointer}

/* 채팅 */
.chat-button{position:fixed;bottom:2rem;right:2rem;width:60px;height:60px;background:linear-gradient(135deg,#10b981,#059669);color:white;border:none;border-radius:50%;cursor:pointer;box-shadow:0 4px 12px rgba(16,185,129,0.4);z-index:1000;transition:all 0.3s}
.chat-button:hover{transform:scale(1.1);box-shadow:0 8px 20px rgba(16,185,129,0.6)}

.chat-widget{position:fixed;bottom:100px;right:2rem;width:350px;max-height:500px;background:white;border-radius:1rem;box-shadow:0 10px 30px rgba(0,0,0,0.2);z-index:1001;display:none}
.chat-header{background:linear-gradient(135deg,#10b981,#059669);color:white;padding:1rem;border-radius:1rem 1rem 0 0}
.chat-body{padding:1rem;max-height:300px;overflow-y:auto}
.chat-message{margin-bottom:1rem;padding:0.5rem 1rem;border-radius:0.5rem;background:#f3f4f6}
.chat-input-area{padding:1rem;border-top:1px solid #e5e7eb}

/* 애니메이션 */
.loading{display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-radius:50%;border-top-color:#3b82f6;animation:spin 1s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.fade-in{animation:fadeIn 0.5s ease-in-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.pulse{animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}

/* 모바일 반응형 */
@media (max-width:768px){
.chat-widget{width:90%;right:5%}
.hero-bg{padding:2rem 0}
.form-step{padding:1rem}
.step-indicator{flex-direction:row}
.step-circle{margin-bottom:0;margin-right:0.5rem}
}

/* 관리자 스타일 */
.admin-card{background:white;border-radius:0.5rem;box-shadow:0 2px 4px rgba(0,0,0,0.1);padding:1.5rem;margin-bottom:1.5rem}
.admin-header{background:#1f2937;color:white;padding:1rem;border-radius:0.5rem 0.5rem 0 0}
.admin-nav{display:flex;gap:1rem;margin-bottom:2rem}
.admin-nav-item{padding:0.5rem 1rem;background:#f3f4f6;border-radius:0.25rem;cursor:pointer;transition:all 0.3s}
.admin-nav-item.active{background:#3b82f6;color:white}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{padding:0.75rem;border:1px solid #e5e7eb;text-align:left}
.admin-table th{background:#f9fafb;font-weight:600}
.status-badge{padding:0.25rem 0.5rem;border-radius:0.25rem;font-size:0.75rem;font-weight:500}
.status-confirmed{background:#d1fae5;color:#065f46}
.status-pending{background:#fef3c7;color:#92400e}
.status-cancelled{background:#fee2e2;color:#991b1b}

/* 인쇄 스타일 */
@media print{
body{font-size:12px;line-height:1.4}
.no-print{display:none!important}
.print-page{page-break-after:always}
.print-header{text-align:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #000}
.print-title{font-size:18px;font-weight:bold;margin-bottom:0.5rem}
.print-subtitle{font-size:14px;color:#666}
.print-table{width:100%;border-collapse:collapse;margin:1rem 0}
.print-table th,.print-table td{border:1px solid #000;padding:0.5rem;font-size:11px}
.print-table th{background:#f0f0f0;font-weight:bold}
}