/* report-mobile.css — 모바일 전용. report.css 뒤에 로드. */

/* 768px 미만: 하단 nav bar 모드일 때 제목바 상단 고정 */
@media (max-width:767px) {
    .top-bar { position:fixed; top:0; left:0; right:0; z-index:101; }
    body { padding-top:44px; }
}

/* 480px 이하: 모바일 mini 레이아웃 */
@media (max-width:480px) {

    /* ── 1) 종합 점수: 링+"종합점수" 전체 높이가 차트와 동일 ── */
    .mini-compact .sc-ring { justify-self:center; align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
    .mini-compact .sc-ring .score-hero { align-items:stretch; text-align:center; flex:1; }
    .mini-compact .sc-ring .score-ring { width:100%; }
    .mini-compact .sc-ring.score-main-ring { width:auto; flex:none; }

    /* ── 2) 점수+차트 1행 grid ── */
    .mini-compact {
        display:grid !important;
        grid-template-columns:1fr 1.5fr;
        grid-template-areas: "ring chart" "badges badges";
        gap:8px; width:100%;
        align-items:stretch;
    }
    .mini-compact .sc-chart { margin:0; align-self:stretch; max-height:none; display:flex; flex-direction:column; justify-content:center; }
    .mini-compact .sc-chart .chart-title { font-size:0.7rem; }
    .mini-compact .sc-chart .chart-box { background:transparent; border:none; padding:0; }

    /* ── 3) 배지: 건수 빼고 등급만 가운데 ── */
    .mini-compact .sc-badges { flex-direction:row; justify-content:center; gap:16px; }
    .mini-compact .sc-badges .eval-item { max-width:90px; }
    .mini-compact .sc-badges .eval-ring { width:55%; }
    .mini-compact .sc-badges .eval-ring-grade { font-size:1rem; }
    .mini-compact .sc-badges .eval-ring-counts { display:none; }
    .mini-compact .sc-badges .eval-label { font-size:0.7rem; }

    /* ── 4) 맵/시나리오 세로 + 전폭 ── */
    .map-carousel-row { flex-direction:column; }
    .map-panel, .carousel-panel { flex:none !important; width:100% !important; }
    .map-panel canvas { display:block; margin:0 auto; }
    .carousel-panel .replay-canvas-wrap canvas,
    .carousel-panel .replay-canvas-wrap .godot-container { width:100% !important; }

    /* ── 5) 리플레이 섹션: 세로 배치 ── */
    .replay-section { flex-direction:column; }
    .replay-viewer { flex:none; width:100%; position:static; }
    .replay-event-panels { max-height:400px; }

    /* ── 6) 작업자 모달: 세로 배치 ── */
    .wm-overlay { padding:8px; align-items:flex-end; }
    .wm-modal { max-height:95vh; max-width:100%; }
    .wm-body { flex-direction:column; }
    .wm-left { width:100%; border-right:none; border-bottom:1px solid var(--border); padding:10px; }
    .wm-canvas { width:100% !important; height:auto !important; aspect-ratio:1; }
    .wm-right { max-height:240px; }

    /* ── 7) 스크롤 힌트: 안개 + ▼ ── */
    .scroll-hint {
        position:fixed; bottom:56px; left:0; right:0; height:48px;
        background:linear-gradient(transparent, var(--bg));
        display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px;
        font-size:1rem; color:var(--text-dim); opacity:0;
        z-index:99; pointer-events:none;
        transition:opacity 0.3s;
    }
    .scroll-hint.visible { opacity:1; }

    /* ── 8) 분석 탭 ── */
    .tr-controls { gap:6px; }
    .tr-ctrl-group { padding:2px; }
    .tr-period-btn, .tr-toggle { padding:4px 9px; font-size:0.75rem; }
    .tr-device-select { font-size:0.75rem; padding:5px 24px 5px 8px; }
    .tr-dim-tab { padding:7px 10px; font-size:0.78rem; }
    .tr-chart-panel { padding:12px; }
    .tr-chart-wrap { height:220px; }
    .tr-worker-grid { grid-template-columns: repeat(2, 1fr); gap:8px; }
    .tr-worker-card { padding:10px; min-height:110px; }
    .tr-zone-stack { gap:10px; }
    .tr-zone-map-wrap { height:280px; }
}

/* Issue #11 PoC: 모바일 차트 높이 보정 */
@media (max-width: 480px) {
    .wk-chart-panel .tr-chart-wrap,
    .mo-chart-panel .tr-chart-wrap {
        height: 220px;
    }
    .day-mini-trend .chart-box > div { height: 160px; }
}