/* ════════════════════════════════════════════════════════════════
   #701 반응형 전면 정비 — 모든 페이지 모바일(≤760)·태블릿(≤820) 점검.
   원칙: 기능 숨기지 않기(접근 가능 유지) · 가로 스크롤은 의도된 컨테이너 안에서만(body 금지).
   ════════════════════════════════════════════════════════════════ */

/* ── (1) 상단바 — 모바일 2줄: 1줄 = 로고 + 우측 유틸, 2줄 = 탭(가로 스크롤 유지).
   기존 문제: .tabs(min-width:0 + margin:auto)가 0폭까지 짜부라져 탭이 아예 안 보이고,
   flex:none 인 워드마크+우측 유틸만으로 뷰포트를 넘어 모든 페이지에 body 가로 스크롤 발생. */
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; height: auto; gap: 0 10px; padding: 7px 14px 0; }
  .topbar-right { margin-left: auto; }
  .tabs { order: 3; flex: 1 1 100%; width: 100%; height: 42px; margin: 0; }
  .tabs a { padding: 0 12px; }
  /* 프로필 이름이 길면 1줄 우측 유틸이 다시 넘침 — 이름만 말줄임 */
  .user-email span { display: block; max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 560px) {
  .wordmark-sub { display: none; }  /* 'for <조직명>' 태그라인 — 초소형 화면에서 로고만 */
  .help-link, .logout-btn { padding: 0 10px; }
}

/* ── (2) 지식 셸(#/knowledge · #/k) 컬럼 모드 보정 —
   column + align-items:flex-start 조합은 자식 폭이 max-content 로 커져(예: 문서 제목 한 줄 폭 981px)
   .kn-doc 이 뷰포트를 뚫었다 → stretch 로 100% 폭. 사이드바는 상단 고정 높이 박스(자체 스크롤)로 압축해
   본문(문서·목록)이 한 스와이프 안에 오게 한다. */
@media (max-width: 820px) {
  .kn-shell { align-items: stretch; }
  .kn-shell > .kn-side { max-height: 44vh; overflow-y: auto; }
  .kn-side-resize { display: none; }                    /* 폭 조절 핸들 — 컬럼 모드에선 무의미 */
  .kn-shell.side-off > .kn-side-reopen { position: static; margin: 12px 0 0 12px; } /* 2줄 상단바 아래로 숨지 않게 */
}
/* 문서 콘텐츠 가드(전 폭 공통) — 넓은 표·코드는 문서 캔버스 안에서만 가로 스크롤 */

/* ── (3) 프로젝트 상세·태스크 모달 프로퍼티 그리드 — 2열(라벨96+값)이 모바일에서 값 폭 ~30px 로 짜부라져
   '진행중'·'ClickUp에서 열기'가 글자 단위 세로 낱자로 깨졌다 → 1열로. 날짜쌍(기간)도 랩 허용. */
@media (max-width: 720px) {
  .pjv-tm-fields { grid-template-columns: 1fr; }
  .pjv-tm-dates { flex-wrap: wrap; }
}

/* ── (4) 카드 헤더 — 액션 묶음(작업현황 필터 등)이 flex-shrink:0 라 좁은 화면에서 카드 밖으로 밀렸다 → 랩. */
@media (max-width: 720px) {
  .card-head { flex-wrap: wrap; }
  .card-head-actions { flex-wrap: wrap; flex-shrink: 1; row-gap: 6px; }
}

/* ── (5) 휴지통 행 — 긴 이름이 안 줄어들어(min-width:auto) 복원 버튼을 화면 밖으로 밀었다. */

/* ── (6) 프로젝트 보드(사이드바 모드) — 240px 사이드바가 모바일 본문을 150px 로 잠식 → 세로 스택.
   사이드바는 상단 고정 높이 박스(자체 스크롤), 본문은 전폭. */
@media (max-width: 760px) {
  .pjv-side-wrap, .pjv-side-wrap.pjv-side-collapsed { grid-template-columns: minmax(0, 1fr); }
  .pjv-has-side .pjv-side-nav { border-right: none; border-bottom: 1px solid var(--line); }
  .pjv-side-nav-inner, .pjv-has-side .pjv-side-nav-inner {
    position: static; max-height: 40vh; overflow-y: auto; padding: 14px 14px 16px;
  }
  .pjv-has-side .pjv-side-main { --pjv-main-padl: 14px; --pjv-main-padr: 14px; padding: 8px var(--pjv-main-padr) 40px var(--pjv-main-padl); min-height: 0; }
  .pjv-side-resize { display: none; }                   /* 폭 조절 핸들(절대배치) — 스택 모드에선 뷰포트 밖으로 삐져나옴 */
  .pjv-side-rail { border-right: none; border-bottom: 1px solid var(--line); }
  .pjv-side-rail-inner { position: static; flex-direction: row; flex-wrap: wrap; padding: 6px 8px; }
}

/* ── (7) 터미널 세션 행 — 이름+배지 줄이 안 줄어 카드 밖으로 배지가 잘렸다 → 랩 + 이름 말줄임. */
.term-row-title { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
.term-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .term-row { flex-wrap: wrap; }
  .term-row-actions { flex-wrap: wrap; }
}

/* ── (8) 본문 공통 여백 — 모바일에서 좌우 24px 는 과함(콘텐츠 342px) → 14px. doc-mode(패딩 0)는 그대로. */
@media (max-width: 560px) {
  main { padding: 20px 14px 48px; }
  .page-head h1 { font-size: 24px; }
}