/* =============================================================================
   layout.css — 레이아웃 + 인터랙션 전용 (BML UX 트랙 ownership)
   =============================================================================

   ⚠️ 이 파일은 BML UX 트랙의 변경 영역입니다.
       Design/Quality/Feature 트랙은 절대 수정하지 마세요.

   포함:
   - 레이아웃 (display, grid, flex, position)
   - 단축키 hint UI
   - 클릭 영역 / 터치 영역 조정 (padding, hit area)
   - 인터랙션 상태 (cursor, pointer-events)
   - 모바일/데스크톱 미디어 쿼리

   포함하지 말 것:
   - 색상, 폰트, 간격 토큰 → tokens.css
   - 컴포넌트 시각 변형 → tokens.css

   적용 순서: style.css 가 마지막에 @import 하므로, 여기 정의된 레이아웃이
   기존 style.css 의 레이아웃을 cascade 로 override 합니다.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Layout metrics — 페이지 전역에서 쓰이는 고정 치수.
   색상 SSOT (tokens.css) 와 분리된 레이아웃 SSOT.
   --------------------------------------------------------------------------- */
:root {
  /* app-header (상단 네비) 실측 높이. .container-studio 가 viewport 높이에서
     이 값을 빼서 DAW 고정 레이아웃을 만든다. header 스타일이 바뀌면 여기도 갱신. */
  --header-h: 77px;
}

/* ---------------------------------------------------------------------------
   Studio DAW 고정 레이아웃 보정
   --------------------------------------------------------------------------- */

/* index.html 의 <div x-show="page === 'separation'"> 는 클래스가 없고 기본
   height:auto 다. 이 wrapper 가 .container-studio 와 .studio-layout 사이에
   끼어 있어서, .studio-layout { height: 100% } 이 container 를 못 참조한다.
   wrapper 에 full-height 를 강제해 체인을 복원. */
.container-studio > div {
  height: 100%;
}

/* flex column 의 자식이 flex:1 이어도 min-height: auto 가 기본이라, 자식의
   natural content height 가 min-content 로 계산돼 shrink 되지 않는다.
   좁은 viewport 에서 트랙 리스트가 analysis 영역을 밀어내지 않도록 0 강제. */
.studio-main {
  min-height: 0;
}

/* UX 트랙이 추가하는 레이아웃 규칙을 여기에 작성 */