/* ─────────────────────────────────────────────────────────────────────────────
   demo 전체 메뉴 패널 (런처) — 폰 전용

   메뉴를 카테고리 박스 + 아이콘 타일로 한눈에 보여준다. 좌측 트리는 그대로 두고
   "찾아 들어가기"가 아니라 "훑어보기"를 담당한다 — 처음 오는 사람은 트리를 펼쳐 보기 전엔
   무엇이 있는지 알 수 없기 때문이다.

   ★ PC 에서는 열지 않는다(2026-09-01 지시) — 넓은 화면에서는 카테고리마다 빈 자리가 크게
     남아 훑기가 오히려 어려웠다. PC 의 메뉴는 좌측 트리, 폰의 메뉴는 이 패널이다.

   색 규칙(§82 「색이 누가 시키는 일인가를 말한다」): 카테고리 색은 **구분용 표식**이지
   동작을 뜻하지 않는다. 그래서 채도 낮은 배경 칩 + 또렷한 아이콘 색으로만 쓰고,
   버튼처럼 꽉 채우지 않는다. 주색(--c-primary)은 선택·강조에만 남긴다.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 오버레이 ────────────────────────────────────────────────────────────────
   딤에 초점 흐림(backdrop-filter)을 쓰지 않는다 — 눈이 계속 초점을 맞추려 들어 피로하다(§82).
   흐림만 빼고 **딤 자체는 둔다** — 폭 700px 이상에서 패널이 inset 으로 떠 있는 카드가 되는데,
   뒤를 가리지 않으면 대시보드가 그대로 비쳐 패널이 화면 위에 잘못 얹힌 것처럼 보인다.

   ★ 딤은 **실제 요소**여야 한다. 한때 패널의 box-shadow(퍼짐 100vmax)로 그렸는데, 그림자는
     그림일 뿐이라 클릭이 그대로 뒤로 새어 딤 위를 눌러도 뒤의 대시보드가 눌렸다(실사고).
     요소로 두면 클릭을 막고, 바깥을 눌러 닫는 동작(allmenu.js)도 여기에 건다. */
.am_panel {
  position: fixed; inset: 0; z-index: 400;
  display: none; flex-direction: column;
  background: var(--c-bg);
}
/* 딤 — 패널(400) 바로 아래 층. 농도는 엔진 모달(.bd_overlay 등)과 같은 눈높이: 다크가 더 진하다 */
.am_dim { position: fixed; inset: 0; z-index: 399; display: none; background: var(--am-scrim); }
.am_dim.is_open { display: block; }
:root            { --am-scrim: rgba(0, 0, 0, 0.55); }
:root.theme-light { --am-scrim: rgba(0, 0, 0, 0.32); }
.am_panel.is_open { display: flex; }

/* ── 헤더 ───────────────────────────────────────────────────────────────────
   좌우 여백은 본문과 같은 시작선(--m-edge)을 쓴다(§82) — 따로 적으면 조용히 갈라진다. */
.am_head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 0 var(--m-edge); min-height: 52px;
  background: var(--c-header-bg);
}
.am_title { font-size: 15px; font-weight: 700; color: var(--c-text); white-space: nowrap; }
.am_count { font-size: 12px; font-weight: 600; color: var(--c-text-muted); }

/* ── 도구 자리 (폰에서 헤더의 테마 콤보가 옮겨 온다) ──────────────────────────
   손가락으로 누를 것이라 헤더 안에서도 작아지지 않게 최소 높이를 준다.
   콤보 안쪽 select 까지 키워야 실제로 커진다 — 바깥 상자만 키우면 눌리는 건 그대로다. */
.am_tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.am_tools .header_theme_select { max-width: none; }
.am_tools select {
  height: 38px; min-width: 104px;
  padding: 0 8px; font-size: 14px;
}
/* 콤보의 「테마」 라벨 — 패널에서는 자리를 먹기만 해서 숨긴다(무엇인지는 선택값이 말해준다) */
.am_tools .moca_selectbox > label,
.am_tools .moca_label { display: none; }

/* ── 검색 줄 (메뉴검색 컴포넌트) ────────────────────────────────────────────
   한 줄을 통째로 쓴다 — 헤더에 끼워 넣으면 폰에서 손가락보다 작아진다.
   ★ 검색칸은 하나뿐이다: 타이핑하면 자동완성 목록이 뜨고(고르면 화면 오픈)
     동시에 아래 타일도 좁혀진다. 두 칸을 두면 어느 것을 써야 할지 고민하게 된다. */
.am_searchbar {
  flex: 0 0 auto;
  padding: 10px var(--m-edge);
  background: var(--c-header-bg);
  border-bottom: 1px solid var(--c-border);
  /* 자동완성 목록이 아래 타일 위로 떠야 한다 — 카테고리 박스보다 위 층 */
  position: relative; z-index: 2;
}
/* PC 에서는 메뉴검색 콤보가 헤더에 남아 이 줄이 빈다 — 빈 테두리만 뜨지 않게 통째로 감춘다
   (:empty 는 공백 텍스트에도 걸려 못 쓴다 — "그 콤보가 들어 있는가"로 판정한다) */
.am_searchbar:not(:has(.am_menu_search)) { display: none; }
/* 컴포넌트가 만든 이중 구조(.filterheader > input)를 키운다 —
   바깥 상자만 키우면 실제로 눌리는 input 은 그대로다.
   ★ 규칙을 .am_searchbar 안으로 한정한다 — 같은 콤보가 PC 헤더에서도 쓰이므로
     (mobPlaceHeaderTools 가 폭에 따라 DOM 을 옮긴다) 한정하지 않으면 헤더 검색칸까지 44px 로 커진다. */
/* ★ 엔진의 div[data-m-type="combobox"]{width:140px} 보다 구체적이어야 한다 —
   태그+속성(0,1,1)이라 클래스 하나(0,1,0)로는 못 이긴다. 클래스 둘(0,2,0)로 덮는다. */
.am_searchbar .am_menu_search { width: 100%; }
.am_searchbar .am_menu_search .filterheader { height: 44px; border-radius: 10px; padding-right: 30px; }
/* input 은 flex 항목이라 남는 폭을 받아야 한다 — 폭을 안 주면 기본값(약 106px)에 머문다 */
.am_searchbar .am_menu_search .filterheader input.moca_input {
  flex: 1 1 auto; width: auto; min-width: 0;
  height: 40px; font-size: 15px; padding: 0 10px;
}
/* 자동완성 목록 — 패널 높이의 절반까지만 쓰고 넘치면 스크롤 */
.am_searchbar .am_menu_search .searchCmbTable { max-height: 46vh; }

/* 닫기 — 타이틀바 아이콘 버튼과 같은 26×26 박스·mask 방식(§82) */
.am_close {
  flex: 0 0 auto; width: 38px; height: 38px; padding: 0;   /* 옆의 테마 콤보와 같은 높이 */
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--c-border-dark); border-radius: 8px;
  cursor: pointer;
}
.am_close::before {
  content: ''; width: 14px; height: 14px; background-color: var(--c-text-sub);
  -webkit-mask: url("../../../vendor/moca/images/icon_close.svg") no-repeat center / contain;
          mask: url("../../../vendor/moca/images/icon_close.svg") no-repeat center / contain;
}
.am_close:hover { border-color: var(--c-primary); }
.am_close:hover::before { background-color: var(--c-primary); }

/* ── 본문 ─────────────────────────────────────────────────────────────────── */
.am_body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: var(--m-edge);
  display: flex; flex-direction: column; gap: 14px;
}

/* ── 카테고리 박스 ────────────────────────────────────────────────────────── */
.am_cat {
  /* ★ flex: 0 0 auto 가 필수다 — 세로 flex 안에서 기본값(flex-shrink:1)이면 상자들이
     남은 높이에 맞춰 **내용보다 작게 눌린다**. 실제로 타일이 DOM 에는 다 있는데
     상자 높이가 머리글(52px)만 남아 아무것도 안 보였다. */
  flex: 0 0 auto;
  border: 1px solid var(--c-border); border-radius: 14px;
  background: var(--c-surface);
  overflow: hidden;
}
.am_cat_head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-border);
  /* 카테고리 색을 아주 옅게 깔아 박스 머리를 구분한다 — 채우지 않는다(색은 표식이지 동작이 아니다) */
  background: var(--am-bg);
}
.am_cat_dot {
  flex: 0 0 auto; width: 18px; height: 18px;
  background-color: var(--am-fg);
  -webkit-mask: var(--am-icon) no-repeat center / contain;
          mask: var(--am-icon) no-repeat center / contain;
}
.am_cat_name { font-size: 13px; font-weight: 700; color: var(--c-text); }
.am_cat_cnt  { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--c-text-muted); }

/* ── 그룹 소제목 (3단 메뉴의 중간 단계) ──────────────────────────────────────
   박스를 하나 더 두면 상자 안의 상자가 되어 답답하다 — 줄 하나로만 구분한다. */
.am_grp {
  padding: 10px 14px 2px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--c-text-sub);
}

/* ── 타일 그리드 ──────────────────────────────────────────────────────────── */
.am_tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 4px;
  padding: 10px;
}
.am_tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 4px 11px;
  background: none; border: 1px solid transparent; border-radius: 12px;
  cursor: pointer; text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.am_tile:hover  { background: var(--c-sidebar-hover); }
.am_tile:focus-visible { outline: none; border-color: var(--c-primary); }
.am_tile.is_current { border-color: var(--c-primary); background: var(--c-primary-pale); }

/* 아이콘 칩 — 색은 카테고리를 따라간다 */
.am_ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--am-bg);
}
.am_ico::before {
  content: ''; width: 24px; height: 24px; background-color: var(--am-fg);
  -webkit-mask: var(--am-icon) no-repeat center / contain;
          mask: var(--am-icon) no-repeat center / contain;
}
/* 뷰어 아이콘(풀컬러 PNG)은 칠하지 않고 그림 그대로 그린다 — mask 로 칠하면 PDF·엑셀·한글이
   전부 같은 색 덩어리가 되어 구분이 사라진다. 그림이 자기 배경(둥근 사각형)을 갖고 있으므로
   카테고리 색 칩 배경도 끈다. */
.am_ico.am_ico_img { background: none; }
.am_ico.am_ico_img::before {
  width: 100%; height: 100%;
  -webkit-mask: none; mask: none;
  background: var(--am-icon) no-repeat center / contain;
}

/* 글자는 두 줄까지 — 잘려도 알아볼 수 있게 말줄임(§82 「한 줄에 안 들어가면 …로 자른다」의 2줄판) */
.am_label {
  font-size: 11.5px; line-height: 1.35; color: var(--c-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: keep-all;
}

/* ── 검색 결과 없음 ───────────────────────────────────────────────────────── */
.am_empty {
  padding: 40px 0; text-align: center;
  font-size: 13px; color: var(--c-text-muted);
}

/* ── 메뉴 버튼(햄버거) ───────────────────────────────────────────────────────
   햄버거는 엔진 기본대로 **폰에서만** 보인다(mobile.css) — 그 폭에서만 이 패널이 메뉴이기
   때문이다. 한동안 모든 폭에서 보이게 덮어 뒀었는데, PC 가 좌측 트리로 돌아오면서
   같은 일을 하는 입구가 둘이 되어 걷어냈다(2026-09-01). */

/* 헤더 좌·우의 조작을 같은 간격으로 — 크기(36px)는 엔진 기본값이 이미 맞다
   (.header_icon_btn · .header_user_icon 모두 36px). 여기서 다시 적으면 갈라진다. */
.header_user_area { gap: 8px; }

/* ── 넓은 화면 ────────────────────────────────────────────────────────────── */
@media (min-width: 700px) {
  .am_panel { inset: 24px; border: 1px solid var(--c-border); border-radius: 18px; overflow: hidden; }
  .am_body  { padding: 18px; gap: 16px; }
  .am_tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; padding: 12px; }
}
@media (min-width: 1200px) {
  .am_panel { inset: 40px 8vw; }
}