/* =====================================================================
   mobile-measurement-mode.css
   모바일 전용 체력 측정 UI
   - 목록 뷰 (카드 기반)
   - 전체화면 측정 모드
   - 데스크톱(>768px)에서는 모두 숨김
   ===================================================================== */

/* -----------------------------------------------------------------------
   전역: 미디어 쿼리 밖에서도 반드시 숨겨야 할 요소들
   (미디어 쿼리 내 opacity:0만으로는 로드 타이밍에 따라 노출될 수 있음)
----------------------------------------------------------------------- */
.measurement-list-view {
    display: none;
}
.fullscreen-measurement {
    display: none;
}

/* 완료 토스트: 항상 숨김 → 미디어 쿼리 + .show 클래스에서만 표시 */
.fs-complete-toast {
    display: none;
}

@media (max-width: 768px) {

    /* 기존 PC 그리드 숨김 */
    #fitnessTestGrid {
        display: none !important;
    }

    /* 장수체력연령 헬퍼 floating 패널 숨김 (목록뷰로 대체) */
    #healthAgeHelper {
        display: none !important;
    }

    /* ProgressTracker 숨김 (전체화면 모드의 헤더 진행 표시로 대체) */
    #progress-tracker-container {
        display: none !important;
    }

    /* 측정 중 저장/이전 버튼 영역 - 목록 하단으로 이동 */
    .workflow-navigation {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 12px 16px;
        border-top: 1px solid #E5E7EB;
        z-index: 10;
        gap: 8px;
    }

    /* ===================================================================
       목록 뷰 (카드 기반)
    =================================================================== */
    .measurement-list-view {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* 체격 측정 섹션 - 목록뷰에서도 표시 */
    .physical-measurements {
        margin-bottom: 0;
        border-bottom: 8px solid #F3F4F6;
    }

    /* ── 섹션 헤더 ── */
    .ls-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px 10px;
        background: #fff;
    }

    /* 장수체력 섹션 배경 */
    .life-score-section .ls-section-header {
        background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
        border-left: 4px solid #3B82F6;
    }

    .ls-section-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: #374151;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .ls-badge {
        font-size: 0.9rem;
        font-weight: 700;
        color: #1D4ED8;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .ls-progress-badge {
        font-size: 0.8rem;
        font-weight: 700;
        background: #3B82F6;
        color: #fff;
        padding: 3px 10px;
        border-radius: 20px;
        min-width: 40px;
        text-align: center;
        transition: background 0.3s;
    }

    .ls-progress-badge.all-done {
        background: #10B981;
    }

    .additional-section .ls-section-header {
        border-top: 8px solid #F3F4F6;
    }

    .additional-section-toggle {
        font-size: 0.8rem;
        color: #6B7280;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px 8px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* ── 카드 목록 ── */
    .list-cards {
        background: #fff;
    }

    /* ── 개별 측정 카드 ── */
    .test-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid #F3F4F6;
        cursor: pointer;
        transition: background 0.15s;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        min-height: 64px;
    }

    .test-card:active {
        background: #EFF6FF;
    }

    .test-card:last-child {
        border-bottom: none;
    }

    /* 장수체력 필수 카드 */
    .test-card.life-score-card {
        background: #FAFEFF;
    }

    .test-card.life-score-card:active {
        background: #DBEAFE;
    }

    /* 완료된 카드 */
    .test-card.completed {
        background: #F0FDF4;
    }

    .test-card.completed:active {
        background: #DCFCE7;
    }

    /* 카드 왼쪽 영역 */
    .card-left {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        min-width: 0;
    }

    /* 완료 상태 아이콘 */
    .card-status {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid #D1D5DB;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.2s;
        font-size: 0.75rem;
        color: #9CA3AF;
    }

    .test-card.completed .card-status {
        border-color: #10B981;
        background: #10B981;
        color: #fff;
    }

    .test-card.life-score-card .card-status {
        border-color: #93C5FD;
        color: #3B82F6;
    }

    .test-card.life-score-card.completed .card-status {
        border-color: #10B981;
        background: #10B981;
        color: #fff;
    }

    /* 종목 이모지 */
    .card-icon {
        font-size: 1.4rem;
        flex-shrink: 0;
        line-height: 1;
    }

    /* 종목 정보 */
    .card-info {
        flex: 1;
        min-width: 0;
    }

    .card-name {
        font-size: 0.9rem;
        font-weight: 600;
        color: #111827;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .test-card.completed .card-name {
        color: #6B7280;
    }

    .card-unit {
        font-size: 0.75rem;
        color: #9CA3AF;
        margin-top: 1px;
    }

    /* 카드 오른쪽 영역 */
    .card-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        margin-left: 8px;
    }

    /* 필수 뱃지 */
    .ls-tag {
        font-size: 0.7rem;
        font-weight: 700;
        color: #3B82F6;
        background: #EFF6FF;
        border: 1px solid #BFDBFE;
        border-radius: 4px;
        padding: 2px 6px;
        white-space: nowrap;
    }

    .test-card.completed .ls-tag {
        color: #10B981;
        background: #ECFDF5;
        border-color: #A7F3D0;
    }

    /* 화살표 */
    .card-arrow {
        font-size: 1.3rem;
        color: #9CA3AF;
        font-weight: 300;
        line-height: 1;
    }

    /* 측정값 미리보기 (완료 시) */
    .card-value-preview {
        font-size: 0.8rem;
        font-weight: 700;
        color: #10B981;
        text-align: right;
    }

    /* ===================================================================
       전체화면 측정 모드 오버레이
    =================================================================== */
    /* ── z-index 경쟁 없이 헤더 자체를 숨김 ── */
    body.fs-active .header,
    body.fs-active #mobile-menu,
    body.fs-active .mobile-menu-overlay {
        display: none !important;
    }

    .fullscreen-measurement {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }

    .fullscreen-measurement.active {
        transform: translateX(0);
    }

    /* 전체화면 활성 중 모달은 fullscreen 위에 표시 */
    body.fs-active .modal {
        z-index: 10000 !important;
    }

    /* ── 전체화면 헤더 ── */
    .fs-header {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid #E5E7EB;
        background: #fff;
        min-height: 56px;
        flex-shrink: 0;
        position: relative;
        z-index: 2;
    }

    .fs-back-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        color: #3B82F6;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        padding: 8px 0;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }

    .fs-back-btn svg {
        width: 18px;
        height: 18px;
    }

    /* 헤더 중앙 - 종목명 */
    .fs-title-area {
        flex: 1;
        text-align: center;
        padding: 0 8px;
        overflow: hidden;
    }

    .fs-test-name {
        font-size: 0.95rem;
        font-weight: 700;
        color: #111827;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fs-test-category {
        font-size: 0.72rem;
        color: #9CA3AF;
        display: block;
    }

    /* 헤더 오른쪽 - 진행 현황 */
    .fs-progress-area {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
        flex-shrink: 0;
    }

    .fs-progress-text {
        font-size: 0.8rem;
        font-weight: 700;
        color: #6B7280;
        white-space: nowrap;
    }

    /* 오디오 토글 버튼 */
    .fs-audio-btn {
        background: none;
        border: 1px solid #E5E7EB;
        border-radius: 8px;
        padding: 6px 8px;
        cursor: pointer;
        font-size: 1rem;
        -webkit-tap-highlight-color: transparent;
        color: #374151;
    }

    .fs-audio-btn.muted {
        opacity: 0.4;
    }

    /* ── 전체화면 본문 (스크롤 가능) ── */
    .fs-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0;
    }

    /* 전체화면 내 measurement-item 오버라이드 */
    .fullscreen-measurement .measurement-item {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 20px 16px !important;
    }

    /* 타이머 숫자 크게 */
    .fullscreen-measurement .stopwatch-display,
    .fullscreen-measurement .counter-display {
        font-size: 5rem !important;
        font-weight: 800 !important;
        letter-spacing: -2px !important;
        min-height: 90px !important;
        line-height: 1 !important;
        padding: 16px !important;
        text-align: center !important;
    }

    /* 타이머 카운트다운 - 10초 이하 경고 색상 */
    .fullscreen-measurement .stopwatch-display.warning {
        color: #F59E0B !important;
    }

    .fullscreen-measurement .stopwatch-display.danger {
        color: #EF4444 !important;
        animation: pulse-danger 0.5s ease-in-out infinite !important;
    }

    @keyframes pulse-danger {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.04); }
    }

    /* 타이머 완료 색상 */
    .fullscreen-measurement .stopwatch-display.finished {
        color: #10B981 !important;
    }

    /* 시작/중지 버튼 크게 */
    .fullscreen-measurement .btn-stopwatch {
        height: 64px !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        border-radius: 14px !important;
        letter-spacing: 0.5px !important;
    }

    .fullscreen-measurement .btn-stopwatch.running {
        background: #EF4444 !important;
        border-color: #EF4444 !important;
        color: #fff !important;
    }

    /* 카운터 버튼 크게 */
    .fullscreen-measurement .btn-counter {
        height: 64px !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        border-radius: 14px !important;
    }

    /* 리셋 버튼 */
    .fullscreen-measurement .btn-reset {
        height: 52px !important;
        font-size: 0.9rem !important;
    }

    /* 컨트롤 영역 패딩 */
    .fullscreen-measurement .test-measurement-controls {
        gap: 12px !important;
    }

    .fullscreen-measurement .measurement-display-group {
        padding: 16px !important;
    }

    /* 측정 입력 필드 */
    .fullscreen-measurement .test-inputs {
        padding: 16px 0 0 0 !important;
    }

    .fullscreen-measurement .test-inputs input[type="number"] {
        height: 52px !important;
        font-size: 1.1rem !important;
    }

    /* 측정방법 버튼 */
    .fullscreen-measurement .btn-info {
        padding: 6px 12px !important;
        font-size: 0.82rem !important;
    }

    /* ── 전체화면 하단 네비게이션 ── */
    .fs-footer {
        display: flex;
        gap: 10px;
        padding: 12px 16px;
        border-top: 1px solid #E5E7EB;
        background: #fff;
        flex-shrink: 0;
    }

    /* 목록으로 버튼 (단일) */
    .fs-nav-btn {
        flex: 1;
        height: 56px;
        border-radius: 14px;
        border: 2px solid #E5E7EB;
        background: #fff;
        color: #374151;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: all 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .fs-nav-btn:active {
        background: #F9FAFB;
    }

    /* 모바일에서 FAB 버튼 전체 숨김
       (데모 컨트롤, 측정 가이드는 모바일 측정 환경에 불필요) */
    #mobileFabContainer,
    .mobile-fab-container {
        display: none !important;
    }

    /* 전체화면 활성화 중 바텀시트도 숨김 */
    .fullscreen-measurement.active ~ .mobile-bottom-sheet,
    body.fs-active .mobile-bottom-sheet {
        display: none !important;
    }

    /* ── 장수체력 필수 배지 (전체화면 헤더) ── */
    .fs-life-score-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 0.7rem;
        font-weight: 700;
        color: #3B82F6;
        background: #EFF6FF;
        border: 1px solid #BFDBFE;
        border-radius: 4px;
        padding: 2px 6px;
    }

    /* 측정방법 모달 배경 및 레이아웃 보정 (모바일 전체화면 중 열릴 때) */
    body.fs-active .method-modal,
    body.fs-active .modal-content {
        background: #fff !important;
        border-radius: 16px !important;
    }

    body.fs-active .modal-body {
        background: #fff !important;
        padding: 16px !important;
    }

    body.fs-active .method-steps,
    body.fs-active .method-notes {
        background: #F9FAFB;
        border-radius: 10px;
        padding: 14px;
        margin-top: 10px;
    }

    body.fs-active .method-steps h4,
    body.fs-active .method-notes h4 {
        font-size: 0.85rem;
        font-weight: 700;
        color: #6B7280;
        margin: 0 0 8px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    body.fs-active .method-steps ol {
        margin: 0;
        padding-left: 20px;
    }

    body.fs-active .method-steps li {
        font-size: 0.9rem;
        line-height: 1.6;
        color: #374151;
        margin-bottom: 4px;
    }

    body.fs-active .method-notes p {
        font-size: 0.88rem;
        color: #374151;
        margin: 0;
        line-height: 1.6;
    }

    body.fs-active .method-category {
        font-size: 0.82rem;
        color: #6B7280;
        margin-bottom: 8px;
    }

    .fs-complete-toast {
        display: block; /* 전역 display:none을 미디어쿼리 안에서 복원 */
        position: absolute;
        top: 70px;
        left: 50%;
        transform: translateX(-50%) translateY(-20px);
        background: #10B981;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        padding: 10px 20px;
        border-radius: 30px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        z-index: 10;
        transition: all 0.3s;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    }

    .fs-complete-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    /* ===================================================================
       목록뷰 - 체격 측정 섹션 통합 카드
    =================================================================== */
    .physical-card {
        background: #fff;
        margin-bottom: 0;
        border-bottom: 8px solid #F3F4F6;
    }

    .physical-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px 10px;
    }

    .physical-card-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: #374151;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .physical-card-status {
        font-size: 0.8rem;
        color: #10B981;
        font-weight: 600;
    }

    /* ===================================================================
       추가 항목 섹션 - 접기/펼치기
    =================================================================== */
    .additional-section .list-cards {
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .additional-section.collapsed .list-cards {
        max-height: 0;
    }

    .additional-section-toggle .toggle-icon {
        transition: transform 0.25s;
        display: inline-block;
    }

    .additional-section.collapsed .toggle-icon {
        transform: rotate(-90deg);
    }

    /* ===================================================================
       480px 이하 (소형 폰) 조정
    =================================================================== */
    @media (max-width: 480px) {
        .fullscreen-measurement .stopwatch-display,
        .fullscreen-measurement .counter-display {
            font-size: 4rem !important;
        }

        .fullscreen-measurement .btn-stopwatch,
        .fullscreen-measurement .btn-counter {
            height: 58px !important;
            font-size: 1.05rem !important;
        }

        .card-name {
            font-size: 0.85rem;
        }

        .card-icon {
            font-size: 1.2rem;
        }
    }

} /* end @media (max-width: 768px) */