/* eMap 페이지 모바일 전용 스타일 — 사이클 32 Phase 3.
   shellHtml() (emap.js) 의 inline grid (240px 1fr 260px) 와 도구/사이트/도면
   list 의 inline flex-column 이 모바일 ≤720px 에서 우측 column 폭 ≈ 1글자로
   잘리는 문제 (사용자 414px 외부 모바일 실측) 를 해결.

   index.html <head> 에서 <link rel="stylesheet"> 으로 로드 — fragment innerHTML
   mount 와 무관하게 페이지 진입 직후 100% 적용 보장. inline <style> 금지
   (14차 교훈).

   desktop (≥721px) 은 emap.js shellHtml() 의 inline style 그대로 사용 —
   본 파일은 모바일 breakpoint 안에서만 동작. agent 경계: emap.js 미수정. */

/* ─────────────────────────────────────────────────────────────────────
   모바일 (≤720px) — 3-column grid → 세로 stack 전환
   ───────────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  /* 1) shellHtml() outer grid: 240px 1fr 260px → 1fr (세로 stack).
        inline style override 위해 !important + 속성 selector 사용. */
  .emap-page .card.card-pad > div[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  /* 2) 좌측 도구/사이트/도면 영역 자체는 stack 첫째 column 으로 그대로 유지.
        다만 도구 button list (paintTools 의 flex-direction:column) 를
        가로 wrap chip 으로 전환 — 모바일 가로폭 활용. */
  .emap-page [data-emap-tools] > div[style*="flex-direction:column"]{
    flex-direction:row !important;
    flex-wrap:wrap !important;
  }
  .emap-page [data-emap-tools] [data-emap-tool]{
    flex:0 0 auto;
    min-width:0;
  }

  /* 3) 사이트/도면 리스트 max-height 모바일에서 축소 (세로 stack 시 캔버스
        도달까지 스크롤 거리 단축). */
  .emap-page [data-emap-sites],
  .emap-page [data-emap-plans]{
    max-height:160px !important;
  }

  /* 4) 캔버스 영역 height 모바일 축소 (480 → 360). aspect 유지. */
  .emap-page #emap-stage{
    height:360px !important;
  }
  .emap-page [data-emap-stage-wrap]{
    min-height:360px !important;
  }

  /* 5) 우측 패널 (선택/레이어/Excel) — stack 시 full width.
        layer row 의 nowrap+ellipsis 는 emap.js 가 inline 으로 박은 의도
        (이름 길이 표시) — 유지하되 패널 자체 폭이 full 이 되므로 1글자
        잘림 해소. */
  .emap-page [data-emap-selection],
  .emap-page [data-emap-layers]{
    width:100%;
    min-width:0;
  }
  .emap-page [data-emap-layers]{
    max-height:200px !important;
  }

  /* 6) page-head padding 모바일 축소 (전체 화면 공간 확보). */
  .emap-page .page-head{
    padding:8px 0 !important;
  }

  /* 7) card-pad 패딩 모바일 축소. */
  .emap-page .card.card-pad{
    padding:10px !important;
  }

  /* 사이클 63 — 모바일 4 카드 grouping (운영자 directive)
     bottom-grid 의 4 cell 을 세로 stack + 카드 스타일 (border + padding).
     desktop ≥721px 은 기존 auto-fit grid 유지 (이 rule 적용 안 됨). */
  .emap-page [data-emap-bottom-grid]{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .emap-page [data-emap-cell-tools],
  .emap-page [data-emap-cell-plans],
  .emap-page [data-emap-cell-selection],
  .emap-page [data-emap-cell-layers]{
    background: var(--card-bg, rgba(255,255,255,0.02));
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
  }
}

/* 사이클 63 — 패널 타이틀 시인성 강화 (운영자 directive)
   기존 inline 11px muted → 13px var(--ink) 900 + border-bottom.
   emap.js shellHtml() 6 군데의 inline style 을 이 클래스로 통일. */
.emap-page .emap-panel-title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 0 0 6px 0;
  margin: 0 0 8px 0;
  border-bottom: 1px solid var(--line);
}

/* 하단 4 panel = 카드 형태 (구분 명확화, 운영자 directive). 데스크톱 전 폭
   적용 — 각 메뉴 그룹이 테두리 + 배경 + 패딩으로 시각적으로 분리된다.
   모바일(≤720px)은 위 미디어쿼리에서 별도 카드 스타일을 이미 적용하므로,
   이 규칙과 중복되어도 동일한 외형이라 무해. */
.emap-page .emap-card {
  background: var(--card-bg, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}
