/* =====================
   모바일 전용 스타일
   ===================== */

/* 모바일에서만 적용 */
@media (max-width: 768px) {

    /* Header 간소화 */
    #header {
        padding: 10px 16px;
        position: relative;
    }

    #header h1 {
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    #header .header-title {
        display: none;
    }

    #header #app-version {
        display: none;
    }

    /* 햄버거 버튼 */
    #mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        padding: 0;
        color: #333;
    }

    .header-right {
        gap: 8px;
        flex-shrink: 0;
    }

    /* 헤더 검색창 모바일 */
    .header-search {
        padding: 4px 8px;
    }

    .header-search input {
        width: 80px;
        font-size: 13px;
    }

    .header-search .search-icon {
        font-size: 12px;
    }

    #auth-btn {
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Task List Selector 숨김 */
    #task-lists-selector {
        display: none !important;
    }

    /* View Menu Wrapper 숨김 */
    .view-menu-wrapper {
        display: none !important;
    }

    /* 사이드 패널 */
    #mobile-side-panel {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        background: white;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        transition: left 0.3s ease;
        overflow-y: auto;
    }

    #mobile-side-panel.open {
        left: 0;
    }

    .side-panel-header {
        padding: 16px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .side-panel-header h2 {
        font-size: 18px;
        color: #333;
    }

    .side-panel-close {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #666;
        padding: 0;
        width: 32px;
        height: 32px;
    }

    .side-panel-content {
        padding: 16px;
    }

    .side-panel-section {
        margin-bottom: 24px;
    }

    .side-panel-section h3 {
        font-size: 14px;
        color: #666;
        margin-bottom: 12px;
        text-transform: uppercase;
        font-weight: 600;
    }

    /* Task Lists in Side Panel */
    .mobile-tasklist-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        background: #f9f9f9;
        border-radius: 8px;
        margin-bottom: 8px;
        cursor: pointer;
        transition: background 0.15s;
    }

    .mobile-tasklist-item:hover {
        background: #f0f0f0;
    }

    .mobile-tasklist-item input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    .mobile-tasklist-item span {
        font-size: 15px;
        color: #333;
        flex: 1;
    }

    /* View Switcher in Side Panel */
    .mobile-view-item {
        padding: 14px 12px;
        background: #f8f9fa;
        border-radius: 12px;
        margin-bottom: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1.5px solid transparent;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }

    .mobile-view-item:hover {
        background: #f1f3f4;
    }

    .mobile-view-item:active {
        transform: scale(0.98);
    }

    .mobile-view-item.active {
        background: #e8f0fe;
        border-color: #1a73e8;
        box-shadow: 0 2px 8px rgba(26, 115, 232, 0.15);
    }

    .mobile-view-item .view-icon {
        font-size: 20px;
    }

    .mobile-view-item .view-label {
        font-size: 15px;
        color: #202124;
        font-weight: 500;
        letter-spacing: 0.2px;
    }

    .mobile-view-item.active .view-label {
        font-weight: 600;
    }

    /* Mobile Action Items - View 스타일과 동일하게 */
    .mobile-action-item {
        padding: 14px 12px;
        background: #f8f9fa;
        border-radius: 12px;
        margin-bottom: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1.5px solid transparent;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }

    .mobile-action-item:hover {
        background: #f1f3f4;
    }

    .mobile-action-item:active {
        transform: scale(0.98);
    }

    .mobile-action-item .action-icon {
        font-size: 20px;
        width: 28px;
        text-align: center;
    }

    .mobile-action-item .action-label {
        font-size: 15px;
        color: #202124;
        font-weight: 500;
        letter-spacing: 0.2px;
    }

    /* 로그아웃 버튼 특별 스타일 */
    .mobile-action-item.logout {
        background: #fff5f5;
        border-color: #ffcdd2;
    }

    .mobile-action-item.logout:hover {
        background: #ffebee;
        border-color: #ef9a9a;
    }

    .mobile-action-item.logout .action-label {
        color: #c62828;
    }

    /* 완료된 Task 섹션 */
    #mobile-completed-tasks-container {
        max-height: 250px;
        overflow-y: auto;
    }

    .completed-tasks-empty {
        color: #999;
        font-size: 13px;
        padding: 16px;
        text-align: center;
        background: #f9f9f9;
        border-radius: 8px;
    }

    .mobile-completed-task-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
        background: #f5f5f5;
        border-radius: 8px;
        margin-bottom: 8px;
        transition: background 0.15s;
    }

    .mobile-completed-task-item:hover {
        background: #eeeeee;
    }

    .completed-task-info {
        flex: 1;
        min-width: 0;
    }

    .completed-task-title {
        font-size: 14px;
        color: #666;
        text-decoration: line-through;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .completed-task-time {
        font-size: 11px;
        color: #999;
        margin-top: 4px;
    }

    .undo-complete-btn {
        background: #fff;
        border: 2px solid #ff9800;
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.15s;
        flex-shrink: 0;
        margin-left: 10px;
    }

    .undo-complete-btn:hover {
        background: #fff3e0;
        transform: scale(1.05);
    }

    .undo-complete-btn:active {
        transform: scale(0.95);
    }

    /* 패널 오버레이 */
    #mobile-panel-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    #mobile-panel-overlay.visible {
        display: block;
    }

    /* 플로팅 버튼 컨테이너 */
    #mobile-floating-buttons {
        position: fixed;
        right: 16px;
        bottom: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        z-index: 100;
    }

    .floating-btn {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #1a73e8;
        color: white;
        border: none;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .floating-btn:active {
        transform: scale(0.95);
    }

    .floating-btn.secondary {
        background: white;
        color: #1a73e8;
        border: 2px solid #1a73e8;
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    /* Filter Bottom Sheet */
    #mobile-filter-sheet {
        position: fixed;
        bottom: -100%;
        left: 0;
        width: 100%;
        background: white;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
        z-index: 1001;
        transition: bottom 0.3s ease;
        max-height: 70vh;
        overflow-y: auto;
    }

    #mobile-filter-sheet.open {
        bottom: 0;
    }

    .filter-sheet-header {
        padding: 16px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        background: white;
    }

    .filter-sheet-header h3 {
        font-size: 18px;
        color: #333;
    }

    .filter-sheet-close {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #666;
        padding: 0;
        width: 32px;
        height: 32px;
    }

    .filter-sheet-content {
        padding: 16px;
    }

    .mobile-filter-group {
        margin-bottom: 20px;
    }

    .mobile-filter-group label {
        display: block;
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
        font-weight: 600;
    }

    .mobile-filter-group select,
    .mobile-filter-group input {
        width: 100%;
        padding: 12px;
        font-size: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: white;
    }

    .mobile-filter-actions {
        padding: 16px;
        border-top: 1px solid #ddd;
        display: flex;
        gap: 12px;
    }

    .mobile-filter-actions button {
        flex: 1;
        padding: 12px;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }

    .mobile-filter-btn-apply {
        background: #1a73e8;
        color: white;
        border: none;
    }

    .mobile-filter-btn-clear {
        background: #f1f3f4;
        color: #5f6368;
        border: 1px solid #dadce0;
    }

    /* Filter Bar 숨김 */
    #filter-bar {
        display: none !important;
    }

    /* 하단 네비게이션 바 */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 64px;
        background: #f8f9fa;
        border-top: 1px solid #e8eaed;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
        padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
    }

    .mobile-nav-item {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        background: none;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        color: #5f6368;
        padding: 0;
        position: relative;
    }

    .mobile-nav-item:active {
        background: rgba(26, 115, 232, 0.08);
    }

    .mobile-nav-item .nav-icon {
        font-size: 24px;
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-nav-item .nav-label {
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.3px;
    }

    .mobile-nav-item.active {
        color: #1a73e8;
    }

    .mobile-nav-item.active .nav-icon {
        transform: scale(1.05);
    }

    .mobile-nav-item.active .nav-label {
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    /* 선택 효과 (하단 캡슐형 인디케이터) */
    .mobile-nav-item::after {
        content: '';
        position: absolute;
        bottom: calc(4px + env(safe-area-inset-bottom));
        left: 50%;
        width: 0;
        height: 4px;
        border-radius: 2px;
        background: #1a73e8;
        transform: translateX(-50%);
        transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-nav-item.active::after {
        width: 24px;
    }

    /* View Container 높이 조정 (하단 네비게이션 공간 확보) */
    #view-container {
        height: calc(100vh - 120px);
        padding-bottom: 0;
    }

    /* 각 뷰 컨테이너에 하단 네비게이션 공간 확보 */
    #today-container,
    #mindmap-container,
    #matrix-container,
    #gantt-container,
    #dashboard-container,
    #pomodoro-container,
    #undated-tasks-page {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    /* 기간 미지정 Task 페이지 리스트도 하단 공간 확보 */
    .undated-page-list {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    /* Mindmap Controls 간소화 */
    #mindmap-controls {
        padding: 8px 12px;
        gap: 8px;
    }

    #mindmap-controls select {
        font-size: 13px;
        padding: 6px 10px;
    }

    #mindmap-controls button {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    /* View Containers 모바일 스타일 */
    #mindmap-container,
    #matrix-container,
    #dashboard-container,
    #pomodoro-container {
        height: 100%;
        width: 100%;
    }

    /* 표시될 때 올바른 display 사용 */
    #mindmap-container[style*="display: block"],
    #mindmap-container[style*="display:block"] {
        display: flex !important;
        flex-direction: column;
    }

    #matrix-container[style*="display: block"],
    #matrix-container[style*="display:block"] {
        display: block !important;
    }

    #dashboard-container[style*="display: block"],
    #dashboard-container[style*="display:block"] {
        display: block !important;
        overflow-y: auto;
    }

    /* Matrix Grid 모바일 레이아웃 */
    .matrix-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto repeat(4, 1fr);
        height: auto;
        min-height: 100%;
    }

    .matrix-quadrant {
        min-height: 150px;
    }

    /* Dashboard 모바일 */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-card.wide {
        grid-column: span 1;
    }
}

/* =====================
   모바일 보라색 그라데이션 → 단색 대체
   ===================== */
@media (max-width: 768px) {

    /* 포모도로 컨테이너 */
    .pomodoro-container {
        background: linear-gradient(135deg, #1a73e8, #4285f4) !important;
    }

    .pomodoro-display {
        background: linear-gradient(135deg, #1a73e8, #4285f4) !important;
    }

    /* 오늘 뷰 완료된 카드 */
    .today-card.completed {
        background: #e8f0fe !important;
    }

    /* 대시보드 featured 카드 */
    .dashboard-card.featured {
        background: #e8f0fe !important;
    }

    /* 단축키 헤더 */
    .shortcuts-header {
        background: #f1f3f4 !important;
    }

    /* 마인드맵 노드 보라색 그라데이션 오버라이드 */
    .node-urgent {
        background: #ea4335 !important;
    }

    .node-important {
        background: #1a73e8 !important;
    }

    .node-completed {
        background: #34a853 !important;
    }

    /* 버튼 보라색 그라데이션 오버라이드 */
    button[style*="667eea"],
    button[style*="764ba2"] {
        background: #1a73e8 !important;
    }

    /* 정렬/필터 버튼 */
    .sort-btn,
    .filter-btn {
        background: #f1f3f4 !important;
    }

    .sort-btn:hover,
    .filter-btn:hover {
        background: #e8eaed !important;
    }

    /* 태그 배지 */
    .tag-badge {
        background: #e8f0fe !important;
        color: #1a73e8 !important;
    }

    .tag-badge.tag-urgent {
        background: #fce8e6 !important;
        color: #c5221f !important;
    }

    .tag-badge.tag-important {
        background: #e8f0fe !important;
        color: #1a73e8 !important;
    }

    .tag-badge.tag-completed {
        background: #e6f4ea !important;
        color: #137333 !important;
    }
}

/* =====================
   타이포그래피 개선
   ===================== */
@media (max-width: 768px) {

    /* 숫자 카운트 배지 */
    .count-badge,
    .task-count {
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    /* 헤딩 텍스트 */
    .side-panel-header h2,
    .filter-sheet-header h3 {
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    /* 섹션 제목 */
    .side-panel-section h3 {
        letter-spacing: 0.4px;
    }
}

/* =====================
   카드 레이아웃 개선
   ===================== */
@media (max-width: 768px) {

    /* Task List Items */
    .mobile-tasklist-item {
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-tasklist-item:hover {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    /* 완료된 Task Items */
    .mobile-completed-task-item {
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }

    /* 대시보드 카드 */
    .dashboard-card {
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* 플로팅 버튼 */
    .floating-btn {
        box-shadow: 0 4px 16px rgba(26, 115, 232, 0.3);
    }

    .floating-btn:active {
        box-shadow: 0 2px 8px rgba(26, 115, 232, 0.4);
    }
}

/* 데스크톱에서는 모바일 요소 숨김 */
@media (min-width: 769px) {

    #mobile-menu-btn,
    #mobile-side-panel,
    #mobile-panel-overlay,
    #mobile-floating-buttons,
    #mobile-filter-sheet {
        display: none !important;
    }
}