/* ==========================================================================
   9romit IT-Infra UI Design System Variables
   ========================================================================== */

:root {
    /* Light Mode (기본) */
    --romit-bg-primary: #f8f9fa;       
    --romit-bg-card: #ffffff;          
    --romit-text-primary: #191f28;     
    --romit-text-secondary: #4e5968;   
    --romit-accent: #0064ff;           
    --romit-border: #e5e8eb;           
    --romit-success: #2ed573;          
    --romit-warning: #ffa502;          
    --romit-danger: #ff4757;           
    --romit-radius: 16px;              
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark Mode 글씨 시인성 업그레이드 */
        --romit-bg-primary: #0f172a;   
        --romit-bg-card: #1e293b;      
        --romit-text-primary: #f8fafc;    /* 선명한 화이트 */
        --romit-text-secondary: #cbd5e1;  /* 안 보이던 글씨를 밝은 그레이로 변경 */
        --romit-accent: #38bdf8;       
        --romit-border: #334155;
    }
}

/* 숫자로 시작하지 않도록 romit- 으로 수정 */
.romit-calculator-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 768px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--romit-bg-primary);
}

.calc-card {
    background-color: var(--romit-bg-card);
    border-radius: var(--romit-radius);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--romit-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}