/* 화면 높이에 꼭 맞아 문서가 안 늘어나고, 스크롤은 아래 본문이 받아 상단바가 제자리에 남음. `dvh` 는 폰
   주소창이 펴진 동안에도 보이는 만큼에만 맞음. `vh` 로 두면 그때 껍데기가 화면보다 커져 문서가 다시 밂 */
.shell {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.shell__topbar {
  border-bottom: var(--border-width) solid var(--border-default);
}

.shell__body {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  --floater-covers: 0;
  --data-table-resize: block;
  --shell-phone: 0;
}

.shell__stage {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  overflow-x: clip;
}

/* 세로로 넘치는 것을 제 안에서 밂. 껍데기가 화면 높이에 못박혀 있어 이 상자가 스크롤을 받는 자리임.
   세로 상자로 둬야 화면 뿌리가 이 높이를 받아 남는 높이를 제 안에 나눠 줌. 가로를 `clip` 으로 밝히면
   밀리는 상자 옆이라 `hidden` 으로 풀림. 막대도 안 서고 손으로도 못 밂 */
.shell__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow-x: clip;
  overflow-y: auto;
  padding: var(--space-inset-md);
}

.shell__panel {
  border-left: var(--border-width) solid var(--border-default);
}

/* 세로 상자로 둬서 안에 든 것이 이 상자보다 길면 줄어드는 몫부터 줄어듦. 상자가 화면 높이에 매여 있어
   안 줄이면 껍데기 밖으로 나가고, 나가면 문서가 그만큼 길어져 상단바가 도로 밀림. 무엇이 줄어드는지는
   안에 든 것이 정함 */
.shell__rail {
  display: flex;
  flex-direction: column;
  border-left: var(--border-width) solid var(--border-default);
}

/* 창이 든 자리를 화면 높이에 맞춰 두고 창은 바닥에 붙임. 높이를 안 매면 긴 내용이 든 창이 위로 자라
   화면 위로 넘어가고, 문서가 안 밀리는 자리라 창 머리와 첫 칸에 아예 못 닿음 */
.shell__floater {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: var(--space-inset-md);
  pointer-events: none;
}

/* 뒤를 막는 판은 화면 전체를 덮는 자리로 넓어짐. 바탕 규칙과 다른 것은 왼쪽을 채우는 것과 창 머리에
   내려 주는 값 셋뿐이라 그것만 적음. 바탕 규칙의 세로 상자와 아래 붙임은 그대로 물려받음 */
.shell__floater--blocks {
  left: 0;
  --floater-top-position: absolute;
  --floater-top-inset: var(--space-inset-md);
  --floater-top-width: auto;
}

.shell__scrim {
  position: absolute;
  inset: 0;
  background: var(--surface-scrim);
  pointer-events: auto;
}

.shell__modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 넓은 모달(.dialog--wide, Dialog.css)이 375 같은 좁은 폭에서 이 안쪽 여백을 뺀 만큼만 flex 로
     줄어듦(max-width 가 아니라 flex-shrink). 여백이 없으면 화면 가장자리에 그대로 닿음(1차 리뷰
     Important 4). 보통 폭 모달(.dialog)은 고정 폭이라 이 여백을 안 씀 */
  padding: var(--space-inset-md);
}

.shell { container-type: inline-size; container-name: shell; }

/* 태블릿. overlay 는 패널이 본문 위에 겹치고 push 는 PC 처럼 본문을 밀어냄 */
@container shell (max-width: 1023px) {
  .shell[data-panel="overlay"] .shell__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: var(--surface-raised);
    border-left: var(--border-width) solid var(--border-strong);
  }
}

/* 모바일. 두 값이 같음 */
@container shell (max-width: 767px) {
  .shell__body { --floater-covers: 1; --shell-phone: 1; --data-table-resize: none; }

  /* 본문 안 탭 줄(TabBar)이 이 폭에서만 가로로 밀리고 그늘을 보임. 상단바와 같은 자리를 본문
     쪽에 걺(docs/containers/followTabBar.md) */
  .shell__main {
    --tabbar-wrap: nowrap;
    --tabbar-scroll: auto;
    --tabbar-fade: block;
  }

  /* 좌우 끝을 다 잡으므로 폭은 그 둘이 정함 */
  .shell[data-panel] .shell__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    background: var(--surface-raised);
    border-left: var(--border-width) solid var(--border-strong);
  }
  /* 바닥 오른쪽에 떠 있음. 자리를 안 차지해 본문과 패널이 화면 밑까지 씀 */
  .shell[data-panel] .shell__rail {
    position: fixed;
    right: var(--measure-rail-float-gap);
    bottom: var(--measure-rail-float-gap);
    border-left: 0;
  }
  .shell[data-panel] .shell__floater {
    top: 0;
    left: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    --floater-axis: column;
    --floater-width: 100%;
    align-items: stretch;
    --floater-position: absolute;
    --floater-inset: 0;
    --floater-top-inset: 0;
    --floater-zoom: none;
  }

  .shell[data-nav="slide"] > .shell__topbar {
    --topbar-menus-wrap: nowrap;
    --topbar-menus-scroll: auto;
    --topbar-menus-fade: block;
  }
  /* 쌓는 차례. 상단바가 몸통 위, 작성창과 모달이 그 위 */
  .shell[data-nav="drawer"] > .shell__topbar {
    position: relative;
    z-index: var(--layer-raised);
    --topbar-toggle: block;
    --topbar-menus: none;
    --topbar-drawer-position: absolute;
    --topbar-drawer-axis: column;
    --topbar-drawer-inset: var(--space-inset-md);
    --topbar-drawer-surface: var(--surface-raised);
    --topbar-drawer-line: var(--border-width);
  }
  .shell[data-nav="drawer"] > .shell__floater,
  .shell[data-nav="drawer"] > .shell__modal {
    z-index: var(--layer-raised);
  }
}