/* base-mobile-shell.css
   좁은 폭의 전역 셸 — 헤더 메뉴 접기 · 사이드바 가로 배치 해제 (작업 044)

   ## 왜 899px 인가 (실측: 로그인 상태 · /tutorial · 2026-08-24)

   | 뷰포트 | 사이드바 | main  | .navbar 높이 |
   |--------|---------|-------|--------------|
   |   1280 |     305 |   975 | 54 (1줄)     |
   |    900 |     305 |   595 | 54 (1줄)     |
   |    820 |     305 |   515 | **66** (접힘 시작) |
   |    768 |     305 |   463 | 66           |
   |    560 |     305 |   255 | 108          |
   |    390 |     305 | **85** | 129 (글자가 세로로 쌓인다) |

   900px 에서는 헤더가 아직 1줄이고 본문도 595px 이 남는다. 그 **아래**부터
   헤더가 접히기 시작하므로 경계는 899px 다. 이 값을 바꾸려면 위 표를 다시 잴 것.

   같은 값이 `base_sections/shell_scripts.html` 의 matchMedia 에도 있다. 두 곳이
   어긋나면 CSS 는 데스크톱을 그리는데 JS 는 메뉴를 여는 상태가 되므로
   `tests/test_mobile_shell.py` 가 두 값이 같은지 단언한다.

   ## 070 이후로 접근이 바뀌었다

   처음 044 는 좁은 폭에서 헤더 링크를 **숨기고** 사이드바 드로어로 넘겼다.
   그때는 사이드바가 같은 링크를 전부 갖고 있었기 때문이다. 070 이 그 겹침을
   걷어내고 헤더를 전역 내비의 **정본**으로 만들면서 그 전제가 사라졌다 —
   이제 헤더 링크를 숨기면 그 목적지로 갈 길이 화면에서 없어진다.

   그래서 지우지 않고 **접는다**: `.nav-actions` 가 헤더 아래로 펼쳐지는 패널이
   되고 헤더의 ☰ 가 그것을 여닫는다. 링크를 옮기지도 복제하지도 않으므로
   070 의 "목적지 하나당 링크 하나" 가 그대로 지켜진다. 사이드바는 070 이
   작업 공간(폴더·즐겨찾기·최근 파일 + 후원)만 남겨 짧아졌으므로, 별도 드로어
   장치 없이 본문 위로 올리고 기본 접힘으로 둔다(044 CONTEXT "있는 장치를
   먼저 볼 것"). */

/* 넓은 폭에서는 메뉴 버튼이 존재하지 않는다 — 아래 미디어 쿼리에서만 켠다. */
.nav-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}

.nav-menu-toggle:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* 헤더 왼쪽 묶음(메뉴 버튼 + 브랜드). 넓은 폭에서는 브랜드 하나뿐이라
   .navbar 의 space-between 이 그대로 유지된다. */
.nav-brand-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

@media (max-width: 899px) {
  /* ---------- 헤더: 전역 내비를 접는다 ---------- */
  .site-header {
    position: relative;
  }

  .navbar {
    padding: 10px 14px;
    gap: 10px;
  }

  .nav-menu-toggle {
    display: inline-flex;
  }

  /* 헤더 아래로 떨어지는 패널. 링크는 헤더 마크업 그대로이고 자리만 바뀐다 —
     070 이 셈한 "목적지 하나당 링크 하나" 가 유지된다. */
  .nav-actions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 900;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 8px 10px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    max-height: calc(100vh - 58px);
    overflow-y: auto;
  }

  .site-header.nav-open .nav-actions {
    display: flex;
  }

  .nav-actions .nav-link {
    padding: 11px 10px;
    border-radius: 8px;
    font-size: 15px;
  }

  .nav-actions .nav-link:hover {
    background: rgba(127, 127, 127, 0.12);
  }

  /* 현재 위치 표시(070). 좁은 폭에서는 목록형이라 왼쪽 막대가 더 잘 읽힌다. */
  .nav-actions .nav-link.is-current {
    background: rgba(127, 127, 127, 0.1);
    box-shadow: inset 3px 0 0 var(--brand);
  }

  /* 이름은 누를 수 없는 표시이고 링크와 같은 크기면 눌러 볼 만해 보인다. */
  .nav-actions .nav-user {
    padding: 10px;
    font-size: 13px;
    color: var(--muted);
    overflow-wrap: anywhere;
  }

  /* 테마 줄만 가로로 — 라벨과 스위치가 한 쌍이다. */
  .nav-actions .js-dark-label {
    margin: 0 !important;
    padding: 11px 10px 11px 0;
  }

  .nav-actions .js-dark-label,
  .nav-actions .dark-toggle {
    display: inline-flex;
    align-self: flex-start;
  }

  .nav-actions .dark-toggle {
    margin: 4px 0 0 10px;
  }

  /* ---------- 본문 ---------- */
  /* 사이드바를 가로로 세우지 않는다 — 390px 에서 본문이 85px 로 눌리던 원인. */
  .app-layout {
    display: block;
  }

  .app-layout .site-content {
    padding: 16px 14px;
  }

  /* ---------- 사이드바: 본문 위 접이식 ---------- */
  /* 070 이후 남은 것은 작업 공간(폴더·즐겨찾기·최근 파일)과 후원뿐이라
     오프캔버스 드로어까지 갈 필요가 없다. 가로 폭을 다 쓰고, 기본은 접어 둔다 —
     `/tutorial` 을 열었는데 폴더 목록이 본문을 밀어내면 안 된다. */
  .sidebar-explorer {
    width: auto;
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 8px 14px 12px;
    gap: 10px;
    overflow-y: visible;
  }

  /* 접기 토글은 좁은 폭에서 이 줄 전체의 손잡이가 된다. 기호는
     shell_scripts.html 이 ▾/▸ 로 바꾼다. */
  .sidebar-collapse-toggle {
    align-self: stretch;
    width: 100%;
    height: auto;
    padding: 9px 10px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
  }

  /* 접힘: 좁은 폭에서는 52px 기둥이 아니라 손잡이 한 줄만 남는다.
     넓은 폭 규칙(width:52px)을 여기서 되돌린다. */
  .app-layout.sidebar-collapsed .sidebar-explorer {
    width: auto;
    min-width: 0;
    padding: 8px 14px;
  }

  .sidebar-main-explorer {
    border: 0;
    padding: 0;
  }

  /* 손잡이가 이미 "내 작업" 이라고 말한다 — 섹션 제목까지 두면 같은 말이
     두 줄 연속으로 나온다(070 이 헤더/사이드바 사이에서 없앤 것과 같은 종류의
     겹침이다). 넓은 폭에서는 손잡이가 «/» 기호뿐이므로 제목이 그대로 필요하다. */
  .sidebar-main-explorer > .sidebar-section-title {
    display: none;
  }

  .sidebar-bottom-tools {
    border-top: 0;
    padding-top: 0;
  }
}

/* 아주 좁은 폭(구형 소형 단말). 브랜드와 메뉴 버튼이 함께 들어가야 한다. */
@media (max-width: 380px) {
  .navbar {
    padding: 10px;
  }
}