/* ==========================================================================
   [SECTION 1] 모바일 전용 오버라이드 (Mobile Only)
   - 화면 너비 768px 이하에서만 적용되는 스타일입니다.
   - PC 화면에는 영향을 주지 않습니다.
   ========================================================================== */
@media screen and (max-width: 768px) {

        body {
          padding-bottom: 80px !important;
          background-color: #0f0f0f !important;
          color: #f5f5f5;
          overflow: hidden;
        }
        .sidebar, .input-area-wrapper, 
        .top-app-bar:not(#mobileHeaderWrapper) { display: none !important; }
        .main-content { margin: 0 !important; padding: 0 !important; width: 100%; }

        /* 메인 헤더 */
        #mobileHeaderWrapper {
          display: flex !important; align-items: center !important; justify-content: space-between !important;
          position: sticky !important; top: 0; z-index: 100; padding: 0 16px !important;
          backdrop-filter: blur(10px) !important; background: rgba(30, 30, 30, 0.95) !important;
          border-bottom: 1px solid rgba(255,255,255,0.08) !important; height: 60px !important;
        }
        .m-brand { font-size: 19px !important; font-weight: 800 !important; color: #fff !important; letter-spacing: -0.5px !important; flex: 1 !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-right: 10px !important; display: block !important; }
        .m-controls { display: flex !important; align-items: center !important; gap: 8px !important; height: 100% !important; flex-shrink: 0 !important; width: auto !important; }
        .m-btn { width: 32px !important; height: 32px !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; background: rgba(255,255,255,0.1) !important; border-radius: 50% !important; }
        .m-btn svg { width: 18px; height: 18px; fill: #ddd; }
        .m-avatar { width: 32px !important; height: 32px !important; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.3) !important; }
        .my-task-badge { height: 32px !important; display: flex !important; align-items: center; padding: 0 12px !important; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); color: #ccc; font-size: 11px; font-weight: 700; border-radius: 20px; }
        .my-task-badge.active { background: var(--md-sys-color-primary); color: white; border-color: var(--md-sys-color-primary); }

        /* 메인 리스트 & 카드 */
        .progress-section { padding: 0 !important; margin-bottom: 0 !important; background: #1a1a1a !important; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .progress-card { padding: 10px 16px 12px !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
        .progress-info { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 8px !important; }
        .progress-label { font-size: 13px !important; font-weight: 500 !important; color: #ccc !important; width: 100%; }
        .progress-number { font-size: 18px !important; font-weight: 800 !important; color: var(--md-sys-color-primary) !important; }
        #progressDetail { display: none; }
        .progress-track { height: 6px !important; background: rgba(255,255,255,0.1); }
        .col-header { background: transparent !important; border: none !important; color: #ffffff !important; font-size: 15px !important; font-weight: 800 !important; padding: 14px 4px 8px 22px !important; margin-bottom: 0 !important; opacity: 0.9; display: flex; justify-content: flex-start !important; gap: 8px !important; }
        .header-count { font-size: 12px !important; font-weight: 500 !important; color: rgba(255,255,255,0.5) !important; background: transparent !important; padding: 0 !important; margin-top: 2px; }
        .col-header span:not(.header-count) { display: none !important; }
        .board { height: calc(100vh - 180px); padding: 0 !important; margin-top: 10px; display: flex; flex-direction: column; }
        .column { height: 100% !important; padding: 0 14px !important; background: transparent !important; display: none; flex-direction: column; }
        .column[style*="flex"] { display: flex !important; }
        .task-list { flex: 1; overflow-y: auto !important; padding-bottom: 140px !important; scrollbar-width: none; }
        .task-list::-webkit-scrollbar { display: none; }
        .card { background: #1e1e1e !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 14px !important; padding: 14px 16px !important; margin: 0 0 10px 0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; display: flex !important; align-items: center; min-height: 52px !important; position: relative; }
        .priority-band { position: absolute !important; left: 14px !important; top: 50%; bottom: auto; transform: translateY(-50%) !important; width: 4px !important; height: 26px !important; border-radius: 4px !important; }
        .card-top { margin: 0 !important; flex: 1 !important; display: flex !important; align-items: center; justify-content: space-between; width: 100%; padding-left: 8px !important; }
        .card-title-text { font-size: 14px !important; font-weight: 500 !important; color: rgba(255,255,255,0.95) !important; line-height: 1.3 !important; white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 65vw !important; margin-left: 10px !important; }
        .card-footer { display: none !important; }
        .d-day-badge { margin-left: auto !important; flex-shrink: 0; font-size: 10px !important; padding: 3px 7px !important; height: 19px; line-height: 13px; border-radius: 6px; }

        /* 하단 메뉴바 */
        #mobileBottomNav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 70px !important; background: rgba(30, 30, 30, 0.95); backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.08); z-index: 10001; padding: 0 10px calc(env(safe-area-inset-bottom) / 1.5); justify-content: space-between; align-items: center; box-shadow: 0 -10px 30px rgba(0,0,0,0.5); }
        .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; transition: all 0.2s; gap: 4px; height: 100%; }
        .nav-item.active { color: var(--md-sys-color-primary); }
        .nav-icon svg { width: 24px; height: 24px; fill: currentColor; }
        .nav-text { font-size: 10px; font-weight: 700; }
        .nav-item.center-fab { position: relative; overflow: visible; flex: 1.2; }
        .nav-item.center-fab .fab-circle { width: 54px; height: 54px; background: #0061a4 !important; border-radius: 18px; display: flex; align-items: center; justify-content: center; transform: translateY(-25px); box-shadow: 0 8px 25px rgba(0, 97, 164, 0.6); border: 4px solid #121212; transition: 0.2s; }
        .nav-item.center-fab .fab-circle svg { fill: #fff; width: 30px; height: 30px; }
        .nav-item.center-fab:active .fab-circle { transform: translateY(-20px) scale(0.95); }
        #mobileFab { display: none !important; }

        /* 1) 모달 꽉 채우기 */
        .modal { z-index: 99999 !important; }
        .modal .dialog {
            width: 100% !important;
            height: 100dvh !important;
            max-height: 100dvh !important;
            border-radius: 0 !important;
            margin: 0 !important;
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0; bottom: 0; right: 0;
            background: #1a1a1a !important;
        }

        /* 2) 헤더 여백 축소 & 위로 당기기 */
        .modal .dialog-header {
            padding: 12px 16px 12px !important; /* 하단 패딩을 줄임 */
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        /* 3) 제목 15px & 아이콘/뱃지 비율 축소 */
        .title-input-styled {
            font-size: 15px !important;
            padding: 0 !important;
            height: 24px !important;
            line-height: 24px !important;
        }
        /* 휴지통 아이콘 */
        .dialog-header button svg { width: 16px !important; height: 16px !important; }
        .dialog-header button svg { 
            width: 16px !important; 
            height: 16px !important; 
        }

        /* 2. 버튼 기본 상태 (여기서 배경색을 투명으로 못 박아야 함) */
        .dialog-header button { 
            padding: 0 !important; 
            width: 28px !important; 
            height: 28px !important; 
            color: inherit !important;      /* 글자색 초기화 */
            opacity: 0.6 !important; 

            /* [★핵심] 희끄무리한 빨간색 배경을 죽이는 코드 */
            background: transparent !important; 
            border: none !important;
            box-shadow: none !important;
        }

        /* 3. 버튼을 '꾹 눌렀을 때만' 빨간색으로 변경 */
        .dialog-header button:active { 
            color: #ef4444 !important; 
            opacity: 1 !important;
            background: transparent !important; /* 눌렀을 때도 배경은 계속 투명 */
        }
        /* 상태 뱃지 */
        .status-badge {
            height: 24px !important;
            font-size: 11px !important;
            padding: 0 8px !important;
            border-radius: 4px !important;
        }

        /* 4) 정보 영역 3단 분리 (날짜 / 사람) & 줄바꿈 강제 */
        .meta-slim-bar {
            flex-wrap: wrap !important;
            gap: 8px !important;
            margin-top: 10px !important;
            align-items: flex-start !important;
        }
        /* 불필요한 구분선 숨김 */
        .meta-slim-bar > div[style*="width:1px"] { display: none !important; }

        /* [1단] 날짜 그룹: 가로 꽉 채움 (width 100%) */
        .meta-slim-bar > div:first-child {
          width: 100% !important;
          display: flex !important;
          justify-content: flex-start !important; /* [수정] 좌측 정렬 */
          gap: 6px !important;                    /* [추가] 요소 사이 간격 */
          margin-bottom: 4px !important;
          }

                  /* [통합 수정] 모든 칩(날짜, 담당자, 협업) 높이 28px로 강제 통일 */
          .meta-chip.date-chip,
          .meta-chip.assignee-chip,
          .check-chip {
          flex: none !important;
          width: auto !important;
          height: 28px !important;     /* [수정] 높이 28px로 통일 */
          padding: 0 8px !important;
          border-radius: 6px !important;
          }
          .meta-chip.date-chip input {
          width: 85px !important;    
          text-align: center !important;

          /* [★추가] 브라우저가 몰래 넣어둔 내부 여백 싹 제거 */
          padding-left: 0 !important;   
          padding-right: 0 !important;
          margin: 0 !important;

          /* [★추가] 텍스트가 위아래, 좌우 정중앙에 오도록 강제 */
          display: inline-block !important; 
          line-height: normal !important; 

          /* 기존 코드 유지 */
          height: 100% !important;
          font-size: 11px !important; 
          letter-spacing: -0.5px !important; 
          background: transparent !important;
          border: none !important;
          color: #fff !important;
          appearance: none !important;
          -webkit-appearance: none !important;
        }

        /* 캘린더 아이콘 숨김 */
        .meta-chip.date-chip input::-webkit-calendar-picker-indicator {
            display: none !important;
            -webkit-appearance: none !important;
            width: 0 !important;
            height: 0 !important;
            margin: 0 !important;
        }

        /* 5) 본문 영역 위로 끌어올림 */
        .modal .dialog-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            padding: 10px 16px !important;
            padding-top: 0 !important;      /* [추가] 위쪽 여백 0 */
            padding-bottom: 80px !important; 
            scrollbar-width: none;
      }
        /* [추가] 히스토리(첫번째 내용)가 너무 붙지 않게 약간만 띄움 */
        .history-section {
            margin-top: 0 !important;      
            padding-top: 5px !important;    
            margin-bottom: 0 !important; 
        }

        /* 히스토리 제목(예: "일정 변경 히스토리")이 있다면 그 여백도 제거 */
        .history-section h4, 
        .history-title {
            margin-top: 0 !important;
            padding-top: 4px !important;
            font-size: 13px !important;
        }

        /* 본문 시작점 강제 상향 조정 */
        .modal .dialog-body {
            padding-top: 0 !important;
            display: flex;
            flex-direction: column;
        }
        .modal .dialog-body::-webkit-scrollbar { display: none !important; }

        /* 6) 하단 닫기 버튼 숨김 & 입력창 하단 배치 */
        .modal .dialog-footer {
            flex-shrink: 0;
            padding: 8px 12px !important;
            padding-bottom: 12px !important;
            background: #1a1a1a !important;
            border-top: 1px solid rgba(255,255,255,0.1);
            position: relative; z-index: 10;
        }
        .input-row { align-items: center !important; }

        /* 닫기 버튼 삭제 */
        .footer-actions, .btn-close-chip { display: none !important; } 
        /* 입력창 껍데기 여백 제거 */
        .kakao-chat-bar { margin-bottom: 0 !important; }

        /* [추가] 수신함 버튼 찌그러짐 방지 */
        #inboxModal .dialog-header button {
            white-space: nowrap !important;
            flex-shrink: 0 !important;
            min-width: max-content !important;
            margin-left: 10px !important;
        }

        /* 기타 모달 (내정보 등) */
        #myInfoModal .dialog { display: block !important; overflow-y: auto !important; padding-bottom: 100px !important; }
        .info-input-grid { display: flex !important; flex-direction: column !important; gap: 24px !important; }
        .info-field label { font-size: 13px !important; margin-bottom: 6px !important; display: block; }
        .info-field input { height: 52px !important; font-size: 16px !important; width: 100% !important; background: #252525 !important; border: 1px solid #333 !important; }
        .profile-edit-img { width: 110px !important; height: 110px !important; margin: 10px auto 30px !important; }
        #inboxList .noti-item { padding: 20px 16px !important; }
        #inboxList .noti-item::after { left: 16px !important; right: 16px !important; }
      }


/* ==========================================================================
   [SECTION 3] 추가 모바일 폴리싱 (Mobile Polish)
   - 파일 마지막에 추가된 최신 모바일 전용 스타일입니다.
   - 검색 시트, 하단바 안전영역 등이 포함됩니다.
   ========================================================================== */
@media screen and (max-width: 768px) {
  :root{
    --m-header-h: 56px;
    --m-nav-h: 74px;
    --m-radius: 16px;
    --m-stroke: rgba(255,255,255,0.10);
  }

  /* 헤더 리듬 통일 */
  #mobileHeaderWrapper{
    height: var(--m-header-h) !important;
    padding-left: calc(12px + env(safe-area-inset-left)) !important;
    padding-right: calc(12px + env(safe-area-inset-right)) !important;
    background: rgba(20, 20, 20, 0.92) !important;
  }

  /* 하단바 safe-area 보정 */
  #mobileBottomNav{
    height: var(--m-nav-h) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    background: rgba(20, 20, 20, 0.92) !important;
  }

  /* 카드 규칙 통일 (기존 디자인 유지 + 규칙만 고정) */
  .card{
    border-radius: var(--m-radius) !important;
    border: 1px solid var(--m-stroke) !important;
  }

  /* ===== Mobile Search Sheet ===== */
  .m-sheet{ position: fixed; inset: 0; z-index: 200000; }
  .m-sheet-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }

  .m-sheet-panel{
    position:absolute; left:0; right:0; bottom:0;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    background: rgba(20,20,20,.96);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-top: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 -20px 50px rgba(0,0,0,.55);
  }

  .m-sheet-handle{
    width:44px; height:4px; border-radius:999px;
    margin: 6px auto 10px;
    background: rgba(255,255,255,.22);
  }

  .m-sheet-title{
    color: rgba(255,255,255,.92);
    font-weight: 800;
    margin-bottom: 10px;
  }

  .m-sheet-input{
    width:100%; height:44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    padding: 0 12px;
  }

  .m-sheet-actions{ display:flex; gap:10px; margin-top: 12px; }

  .m-sheet-btn{
    flex:1; height:44px;
    border-radius: 12px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.90);
    font-weight: 800;
  }

  .m-sheet-btn.primary{
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-color: transparent;
  }
}
    /* =========================
      Inbox (mobile): unread style (no shading, left bar)
      ========================= */
    @media (max-width: 768px) {
      #inboxList .noti-item {
        background: transparent !important;
      }

      #inboxList .noti-item.unread {
        position: relative;
        background: transparent !important;
        /* 모바일은 기존이 보통 16px 좌우 패딩이라면, 바 공간만 +6~10px */
        padding-left: 26px !important;
      }

      #inboxList .noti-item.unread::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 3px;
        border-radius: 3px;
        background: var(--md-sys-color-primary);
      }

      #inboxList .noti-item.unread .noti-title { font-weight: 800; }
      #inboxList .noti-item.unread .noti-line1 { font-weight: 600; }
    }
          /* [신규] 모바일 3단 컴팩트 대응 */
      @media screen and (max-width: 768px) {
        .compact-header {
          padding: 14px 16px 10px !important;
          gap: 12px !important;
        }
        
        /* .title-input-compact { font-size: 18px !important; } */
        
        /* 모바일에서 2단(상태+날짜) 줄바꿈 허용 (화면이 좁을 경우) */
        .row-2 { flex-wrap: wrap; gap: 8px; }
        .v-sep-light { display: none; } /* 구분선 숨김 */
        
        /* 토글 버튼 꽉 채우기 */
        .status-toggle-slim { flex: 1; display: flex; min-width: 140px; }
        .st-btn { flex: 1; }
        
        /* 날짜 선택 꽉 채우기 */
        .date-range-compact { width: 100%; justify-content: space-between; margin-top: 2px; }
        .mini-chip { flex: 1; justify-content: center; }
      }