/*
  layout_lock.css
  ----------------
  "최종 오버라이드" 전용.
  layouts.css / core.css 에서 덕지덕지 쌓인 레이아웃 규칙을 무시하고
  프레임(헤더/메인/푸터)을 항상 동일하게 고정한다.

  목표
  - 로그인 전(index.html) / 로그인 후(app.html) 모두 동일한 프레임
  - Header 40px, Footer 40px 고정
  - Middle 은 남은 영역을 정확히 채움
  - RIGHT 패널은 "오버레이"(dockSystem/dockChat/dockLog)로만 사용 → 레이아웃에서 제외
*/

:root{
  --app-w: 960px;
  --app-h: 600px;
  --header-h: 40px;
  --footer-h: 40px;
  --gap: 10px;
}

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}

/* body 쪽 레이아웃/스크롤로 인해 #app 높이가 깨지는 걸 방지 */
body{
  overflow: hidden;
}

/* =============================
   APP SHELL (index/app 공통)
   ============================= */

#app{
  width: var(--app-w) !important;
  height: var(--app-h) !important;
  margin: 12px auto !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* header/footer는 padding 최소화 (card/pad 영향 제거) */
#header{
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
  max-height: var(--header-h) !important;
  flex: 0 0 var(--header-h) !important;
  overflow: hidden !important;
}

#footer{
  height: var(--footer-h) !important;
  min-height: var(--footer-h) !important;
  max-height: var(--footer-h) !important;
  flex: 0 0 var(--footer-h) !important;
  overflow: hidden !important;
}

#header, #footer{
  display: flex !important;
  align-items: center !important;
}

/* middle은 남은 영역을 정확히 채움 */
#middle{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  gap: var(--gap) !important;
  padding: var(--gap) !important;
  box-sizing: border-box !important;
}

#left{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* RIGHT는 레이아웃에서 제외: 오버레이로만 운영 */
#right{
  display: none !important;
}

/* 콘텐츠 슬롯 */
#pageMount{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* index(로그인)에서만: 로그인 카드가 자연스럽게 */
#app[data-auth="0"] #pageMount.login-page{
  height: auto !important;
}

/* 디버그/도킹 오버레이가 레이아웃을 밀지 않도록 */
[data-scm-debug],
#dockSystem, #dockChat, #dockLog{
  position: fixed;
}
