/* ─────────────────────────────────────────────────────────────
   chrome.css — 빌더 두 판을 사이트 머리·바닥 사이에 앉힌다.

   머리·바닥 그 자체는 여기서 그리지 않는다. shared/site-chrome.css 가 그린다 —
   랜딩(v2/index.php)이 읽는 것과 같은 한 벌이다. 여기 있는 것은
   「그 사이 남은 자리에 빌더 판을 앉히는 데 필요한 것」뿐이고,
   빌더가 쓰는 색·글자·자리(a.css · b.css)는 손대지 않는다.

   높이 셈 (1280×800 실측 기준)
     창 800  −  바닥 자리 60(site-chrome.css 의 body padding-bottom)
             −  머리 65  =  판이 쓸 수 있는 높이 675
   ───────────────────────────────────────────────────────────── */

/* ── ① body ─────────────────────────────────────────────────
   a.css 가 body 에 걸어 둔 display:flex 는 머리·바닥이 함께 들어오면 맞지 않는다.
   b.css 는 아예 안 건다. 두 판을 같은 쪽으로 못박는다 —
   머리 · 판 · (붙박이 바닥) 을 세로로 쌓고, 문서 자체는 안 움직인다. */
body {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.site-head { flex: 0 0 auto; }

/* ── ② 앱 판이 앉는 자리 ─────────────────────────────────────
   바닥 띠는 붙박이라 자리를 안 차지한다. 그 자리는 site-chrome.css 의
   body { padding-bottom:60px } 이 이미 비워 두었으므로 여기서 또 빼지 않는다.
   남은 높이가 판보다 모자라면 문서가 아니라 이 안이 움직인다. */
.cssb-app {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* 빌더 판의 최소 치수. b.css 가 이미 .screen 에 쓰던 1280×800 을 A 에도 같이 쓴다.
   이 값이 없으면 판이 눌린다 — 재 보니 800px 밑에서는 「숫자열 3배」 칸의 마지막 줄과
   「설정 안 한 자리」 목록 네 줄이 사라졌다. 눌리게 두느니 이 안에서 움직이게 한다.
   max() 를 쓰는 까닭 : 남은 높이가 800px 보다 크면 그 높이를 다 쓰고, 작으면 800px 을 지킨다. */
.cssb-shell {
  min-width: 1280px;
  min-height: max(800px, 100%);
  display: flex;
  flex-direction: column;
}

/* ── ③ B 판 ─────────────────────────────────────────────────
   b.css 의 .screen 이 곧 셸이다. 화면 전체를 쓰던 치수만 남은 높이로 바꾼다.
   min-width:1280px · min-height:800px 은 b.css 가 이미 쓴 것이라 그대로 둔다. */
.cssb-app--b > .screen {
  width: auto;
  height: auto;
  min-height: max(800px, 100%);
}

/* ── ④ 내려받기 띠를 판 바닥에 붙인다 ──────────────────────
   내려받는 것이 이 도구가 있는 까닭인데, 그 띠가 안 보였다. 실측(1280×800):
     판(.cssb-app) 65..740 · 셸 높이 800 → A 띠 799..865 · B 띠 791..865 로 판 밖.
     1600×900 도 판이 65..840 이라 띠 아래 25px 이 밖이고 붙박이 바닥에도 가렸다.

   판 높이를 창에 남는 675 로 깎는 길은 안 골랐다. 위 ②의 min-height 를 깎는 것이라
   「숫자열 3배」 마지막 줄과 「설정 안 한 자리」 네 줄이 사라진 그 자리를 다시 밟는다.
   sticky 는 셈을 하나도 안 바꾸고 그리는 자리만 바꾼다 — 굴리면 띠 뒤의 것이 그대로 나온다.

   ※ B 의 .screen 은 overflow:hidden 이라 그 자신이 스크롤 통이 되어 안쪽 sticky 가 굳는다.
     clip 으로 바꾼다. 자르는 것은 똑같고 스크롤 통만 안 만든다. .screen 을 굴리는 코드는 없다. */
.cssb-app--b > .screen { overflow: clip; }

.cssb-app--a .footbar,
.cssb-app--b > .screen > .bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
}

/* 안내 한 줄(.saybar)은 띠 아래에 붙는다. 뜰 때만 띠를 그만큼 올린다.
   19px = 위아래 padding 1+1 · 줄 16 · 윗선 1 (b.css 실측) */
.cssb-app--b > .screen { --cssb-say-h: 19px; }
.cssb-app--b > .screen > .saybar { position: sticky; bottom: 0; z-index: 6; }
.cssb-app--b > .screen:has(> .saybar.on) > .bar { bottom: var(--cssb-say-h); }