body { font-family: 'Pretendard', sans-serif; background-color: #F1F5F9; }
        
/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
        
/* Inputs */
.input-base { transition: all 0.2s ease; border: 1px solid #E2E8F0; font-size: 0.9rem; color: #334155; border-radius: 0.5rem; }
.input-base:focus { border-color: #4F46E5; outline: none; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); }

/* General Option Buttons */
.btn-option { transition: all 0.2s ease; border: 1px solid #E2E8F0; background-color: #FFFFFF; color: #64748B; font-size: 0.85rem; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.btn-option:hover { border-color: #CBD5E1; background-color: #F8FAFC; color: #475569; }
.btn-option.active { border: 1px solid #4F46E5; background-color: #EEF2FF; color: #4F46E5; font-weight: 700; }

/* Color Buttons */
.btn-color { position: relative; transition: all 0.2s; border: 1px solid #E2E8F0; }
.btn-color:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.btn-color.active { border: 1px solid #4F46E5; background-color: #FFFFFF; z-index: 10; box-shadow: 0 0 0 1px #4F46E5; }

/* Tooltip */
.tooltip { visibility: hidden; position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background-color: #1E293B; color: #fff; text-align: center; padding: 6px 10px; border-radius: 6px; font-size: 0.75rem; white-space: nowrap; opacity: 0; transition: opacity 0.2s; z-index: 20; pointer-events: none; }
@media (min-width: 768px) {
    .tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #1E293B transparent transparent transparent; }
    .btn-color:hover .tooltip { visibility: visible; opacity: 1; }
}

/* Segmented Control UI */
.segment-container { background-color: #F1F5F9; padding: 4px; border-radius: 0.5rem; display: flex; gap: 4px; border: 1px solid #E2E8F0;}
.segment-btn { flex: 1; padding: 8px 10px; text-align: center; font-size: 0.9rem; font-weight: 500; color: #64748B; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; }
.segment-btn:hover { color: #334155; }
.segment-btn.active { background-color: #FFFFFF; color: #4F46E5; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* Badge */
.card-badge { background-color: #F1F5F9; color: #64748B; font-size: 0.7rem; font-weight: 700; padding: 2px 10px; border-radius: 9999px; letter-spacing: 0.05em;}