/* 윈하이텍 보드 화면 규칙 — 꾸러미 화면 규칙(styles.css) 뒤에 실린다.
   같은 선택자면 이쪽이 이긴다.

   시뮬레이션 화면의 규칙은 여기 없다. 그것들은 screens/ 에 화면별로 있고 전부
   .sim-page 안으로 좁혀져 있다 — 그 화면들이 header·nav·a 같은 요소 선택자를
   그대로 쓰던 것이라, 풀어 두면 보드 사이드바와 상단 바까지 칠한다. */

/* 시뮬레이션 화면이 들어앉는 자리.

   그 화면들은 제 문서를 통째로 쓰던 것이라 바깥 여백을 스스로 두지 않는다.
   보드의 .content 가 이미 여백을 주므로 여기서는 자리만 만들어 준다. */
.layout-root.sim-host { display: block; min-width: 0; }

.sim-page {
  min-width: 0;
  color: var(--fg);
  font: 400 var(--fs-body)/1.5 var(--font);
}

/* 화면 안의 첫 제목 줄(header)은 상단 바와 겹친다 — 보드가 이미 화면 이름을
   상단 바에 적는다. 그래도 <header> 를 지우지 않는 이유는 그 안에 단계 표시와
   화면 사이 링크가 함께 있어서다. 제목만 감춘다. */
.sim-page > header h1 { display: none; }

/* ── 흐름 잠금 ───────────────────────────────────────────────────────────────
   결과·모니터링은 열린 요청이 있을 때만 간다. 두 화면 모두 "지금 열린 요청" 의
   결과를 보여 주는 것이라, 요청이 없으면 보여 줄 것이 없다.

   ★ 감추지 않고 흐리게 둔다. 감추면 메뉴가 늘었다 줄었다 해서 어디에 무엇이 있는지
     외울 수가 없다. 눌렀을 때는 요청 내역으로 보낸다(app.js) — 아무 일도 안 일어나면
     고장으로 읽힌다.

   ★ 열림 여부를 **모를 때는 잠그지 않는다.** 엔진이 안 떠 있을 때 잠그면 망가진 것이
     아니라 비어 있는 것처럼 보인다. */
/* ── 본문 스크롤 ─────────────────────────────────────────────────────────────
   ★ 이 규칙이 없으면 **화면이 잘린 채 스크롤이 안 된다.**

   보드 셸은 고정 틀이다 - .app-shell 이 100vh 이고 body 는 overflow: hidden 이라,
   본문이 길어져도 창이 스크롤되지 않는다. 스크롤은 이 칸이 맡아야 한다.

   꾸러미는 이것을 안 준다. 여백과 간격이 보드마다 다르고(simaps 24/28 · cheil 12/16),
   예전에 꾸러미가 그 값을 들고 있다가 보드 규칙에 밀려 조용히 죽은 적이 있다
   (@marunex/board-core 0.11.2). 그래서 보드가 제 것을 갖는다.

   시뮬레이션 화면은 촘촘한 편(밀도 0.7x)이라 여백을 작게 둔다. */
.content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 아래 여백은 이름을 갖는다 - 바닥에 붙는 줄(.nextbar)이 이 띠를 덮어야 한다.
     여백도 스크롤 통 안이라, 안 덮으면 붙은 줄 아래로 표가 비어져 나온다. */
  --content-pad-b: 12px;
  padding: 12px 16px var(--content-pad-b);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ── 창에 맞추는 화면 ───────────────────────────────────────────────────────
   모니터링처럼 캔버스가 남은 높이를 채우는 화면은 본문이 스크롤하면 안 된다.
   본문 대신 **안쪽**(설비 레일·타임라인)이 각자 스크롤한다.

   :has() 로 본문을 가르는 것은 보드 둘이 이미 쓰는 방식이다(#layoutRoot.home-fill).
   화면 클래스는 app.js 의 FIT_SCREENS 가 붙인다 - 한쪽만 고치면 조용히 안 먹는다. */
.content:has(> #layoutRoot.sim-fit) { overflow: hidden; }

.layout-root.sim-fit {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.layout-root.sim-fit > .sim-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* 화면 안의 <main> 이 남은 높이를 받아 그 안에서 스크롤한다 */
.layout-root.sim-fit > .sim-page > main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}