/* ============================================================
   iPlan — 모바일 반응형
   브레이크포인트: 960 / 768 / 640 / 375px
   ※ 반드시 마지막에 로드
   ============================================================ */

/* ── 태블릿 (768~960px): 사이드바 접힘 (아이콘만) ── */
@media (max-width: 960px) {
  .ip-sidebar {
    width: var(--ip-sidebar-collapsed-w);
  }

  .ip-sidebar-title,
  .ip-nav-section-title,
  .ip-nav-item-label,
  .ip-nav-item-count,
  .ip-sidebar-user-name,
  .ip-sidebar-user-email,
  .ip-add-project span {
    display: none;
  }

  .ip-sidebar-header {
    justify-content: center;
    padding: var(--s-4);
  }

  .ip-nav-item {
    justify-content: center;
    padding: var(--s-3);
  }

  .ip-sidebar-user {
    justify-content: center;
  }

  .ip-add-project {
    justify-content: center;
  }

  .ip-topbar-center {
    margin-left: var(--s-4);
    margin-right: auto;
  }
}

/* ── 소형 태블릿 (640~768px): 사이드바 드로어 ── */
@media (max-width: 768px) {
  .ip-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--ip-sidebar-w);
    transform: translateX(-100%);
    z-index: var(--z-sidebar);
    box-shadow: var(--shadow-lg);
  }

  .ip-sidebar.open {
    transform: translateX(0);
  }

  /* 드로어 열렸을 때 텍스트 다시 표시 */
  .ip-sidebar.open .ip-sidebar-title,
  .ip-sidebar.open .ip-nav-section-title,
  .ip-sidebar.open .ip-nav-item-label,
  .ip-sidebar.open .ip-nav-item-count,
  .ip-sidebar.open .ip-sidebar-user-name,
  .ip-sidebar.open .ip-sidebar-user-email,
  .ip-sidebar.open .ip-add-project span {
    display: block;
  }

  .ip-sidebar.open .ip-sidebar-header,
  .ip-sidebar.open .ip-nav-item,
  .ip-sidebar.open .ip-sidebar-user,
  .ip-sidebar.open .ip-add-project {
    justify-content: flex-start;
  }

  .ip-hamburger {
    display: flex;
  }

  .ip-sidebar-overlay.show {
    display: block;
  }

  #main-content {
    width: 100%;
  }

  .ip-topbar-center {
    margin-left: auto;
  }

  .ip-view {
    padding: var(--s-4);
  }

  #task-detail-panel {
    width: 100%;
    max-width: 100%;
  }

  .ip-list-toolbar {
    flex-wrap: wrap;
  }
}

/* ── 모바일 (<640px): 하단 탭바 ── */
@media (max-width: 640px) {
  /* 하단 탭바 표시 */
  .ip-bottom-tabbar {
    display: flex;
  }

  #main-content {
    padding-bottom: var(--ip-bottombar-h);
  }

  /* 탑바 뷰 탭 숨기고 하단 탭바 사용 */
  .ip-topbar-center {
    display: none;
  }

  .ip-topbar {
    padding: 0 var(--s-4);
  }

  .ip-view {
    padding: var(--s-3);
  }

  .ip-quick-add {
    padding: 0 var(--s-4);
    position: fixed;
    bottom: var(--ip-bottombar-h);
    left: 0;
    right: 0;
    z-index: var(--z-topbar);
    background: var(--bg-base);
  }

  .ip-list-item {
    padding: var(--s-3);
  }

  /* 태스크 메타 간소화 */
  .ip-task-actions {
    opacity: 1;
  }

  /* 검색 버튼만 표시 */
  .ip-topbar-right .ip-avatar {
    display: none;
  }

  /* 모달 풀스크린 */
  .ip-modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .ip-form-row {
    flex-direction: column;
  }

  #toast-container {
    bottom: calc(var(--ip-bottombar-h) + var(--s-4));
    left: var(--s-4);
    right: var(--s-4);
  }

  #pwa-install-banner {
    bottom: calc(var(--ip-bottombar-h) + var(--s-4));
  }
}

/* ── 최소 폭 (375px) ── */
@media (max-width: 375px) {
  :root {
    --s-6: 20px;
  }

  .ip-topbar {
    height: 48px;
    padding: 0 var(--s-3);
  }

  .ip-page-title {
    font-size: var(--text-base) !important;
  }

  .ip-list-view-title {
    font-size: var(--text-lg);
  }

  .ip-list-item {
    padding: var(--s-2);
    gap: var(--s-2);
  }

  .ip-task-title {
    font-size: var(--text-xs);
  }

  .ip-task-meta {
    display: none;
  }

  .ip-quick-add {
    padding: 0 var(--s-3);
  }

  .ip-quick-add-input {
    font-size: var(--text-sm);
  }
}

/* ── 하단 탭바 (모바일 전용) ── */
.ip-bottom-tabbar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--ip-bottombar-h);
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  z-index: var(--z-topbar);
  align-items: center;
  justify-content: space-around;
  padding: 0 var(--s-2);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.ip-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-0);
  padding: var(--s-2) var(--s-3);
  color: var(--text-faint);
  font-size: 10px;
  font-weight: var(--weight-medium);
  transition: color var(--duration-fast) var(--ease-default);
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.ip-tab-item.active {
  color: var(--accent);
}

.ip-tab-item svg {
  width: 22px;
  height: 22px;
}

/* 중앙 퀵 추가 버튼 */
.ip-tab-item--add {
  color: var(--bg-base);
  background: var(--accent);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  padding: 0;
}

.ip-tab-item--add svg {
  width: 24px;
  height: 24px;
}

/* ── 안전 영역 (노치 대응) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .ip-bottom-tabbar {
    height: calc(var(--ip-bottombar-h) + env(safe-area-inset-bottom));
  }

  /* 하단 탭바가 표시되는 모바일에서만 safe-area 패딩 적용 */
  @media (max-width: 640px) {
    #main-content {
      padding-bottom: calc(var(--ip-bottombar-h) + env(safe-area-inset-bottom));
    }
  }
}

/* ── 로그인 화면 반응형 ── */
@media (max-width: 640px) {
  .ip-login-card {
    padding: var(--s-8) var(--s-6);
    margin: var(--s-4);
    border-radius: var(--radius-card);
  }

  .ip-login-title {
    font-size: var(--text-xl);
  }
}