/**
 * ============================================================
 * MoneyBull Calculator
 * Responsive Styles
 * ------------------------------------------------------------
 * Responsive Layout Management
 * ============================================================
 */

/* ============================================================
   Tablet Devices (max-width: 1024px)
============================================================ */
@media (max-width: 1024px) {
    .container {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .card,
    .summary-card,
    .result-card {
        padding: var(--space-6);
    }

    .summary-value {
        font-size: var(--font-size-3xl);
    }

    /* 차트 영역 태블릿 최적화 */
    #investmentChart, 
    .chart-container canvas {
        max-height: 340px;
    }
}

/* ============================================================
   Mobile Devices (max-width: 768px)
============================================================ */
@media (max-width: 768px) {
    body {
        font-size: var(--font-size-sm);
    }

    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    main {
        padding-top: var(--space-5);
        padding-bottom: var(--space-10);
    }

    /* 헤더 콤팩트화 */
    .header {
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .logo {
        font-size: var(--font-size-xl);
    }

    /* 타이틀 및 가이드 텍스트 압축 */
    .section-title {
        margin-bottom: var(--space-4);
    }

    .section-title h2 {
        font-size: var(--font-size-xl);
    }

    /* 버튼 그룹 모바일 배치 (수직 100% 확장) */
    .button-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        width: 100%;
    }

    .button-group .button {
        width: 100%;
    }

    /* 결과 요약창 폰트 피팅 */
    .summary-value {
        font-size: var(--font-size-2xl);
    }

    .summary-main {
        padding: var(--space-6) var(--space-3);
    }

    /* 차트 영역 모바일 스케일 다운 */
    #investmentChart,
    .chart-container canvas {
        max-height: 280px;
    }
}

/* ============================================================
   Small Mobile Devices (max-width: 480px)
============================================================ */
@media (max-width: 480px) {
    .card,
    .summary-card,
    .result-card {
        padding: var(--space-4);
    }

    /* 좁은 화면에서 숫자가 잘리거나 미어터지는 버그 방어 */
    .input-box input {
        font-size: var(--font-size-sm);
        padding-right: 56px;
    }

    .summary-value {
        font-size: var(--font-size-xl);
    }

    .result-item strong {
        font-size: var(--font-size-base);
    }

    /* 모바일 하단 디테일 정보 1열 강제 축소 */
    .summary-profit {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        padding: var(--space-4);
    }
}