/* ============================================================ 폰 · 태블릿 층 (2026-09-25)

   대표님 - 「모바일 최적화 하나도 안되어있어 ui ux 다깨지고 있음. 전수검사하고 개선해.」
   「누구나 편하고 쉽게 해야함.」 쓰는 사람은 컴퓨터가 서툰 매장 점주이고 주로 폰으로 연다.

   🔴 **이 파일은 사람이 보는 화면에서 맨 마지막에 읽힌다.** `style.css` 는 층이 여러 겹이라
      (Yodeck 틀 · gency 무드 · DESIGN v3.2 셸) 폰 규칙을 그 사이에 끼우면 뒤 층이 다시 덮는다.
      여기 모으면 폰에서 무엇이 바뀌었는지 한 파일로 읽히고, 걷어내면 예전 화면으로 돌아온다.
   🔴 **기기 플레이어 · 스틱 설정 화면은 이 파일을 안 읽는다.** `server/player_bundle.py` 가
      스틱에 싣는 것은 `style.css` · `gency-tokens.css` 둘뿐이라, 여기를 고쳐도 벽 화면은 그대로다.
   🔴 **생성 AI 모달(`photo-ai-*` · `ai-screen*` · `magic*`)은 건드리지 않는다.** 다른 회차가 통째로
      다시 만든다. 단, 그 둘이 공통 틀 `.asset-upload-dialog` 를 같이 쓰므로 아래 「대화상자 공통」
      규칙은 그 모달에도 걸린다 - 폭 · 높이 · 바닥 단추 자리만이고 안쪽 칸은 안 건드린다.

   검사 방법과 전후 숫자는 `docs/qa/mobile-audit-2026-09-25/audit.md`. 중단점은 DESIGN.md 계단
   (768 · 1024) 을 따른다 - 폰은 767 이하, 태블릿은 768~1023. */

/* ------------------------------------------------------------ 0. 안전망 - 옆으로 밀리는 화면 막기
   폰은 내용이 화면보다 넓으면 **화면 전체를 축소해서** 보여 준다. 글자가 개미만 해지고 점주는
   손가락으로 확대부터 해야 한다. 원인은 아래에서 하나씩 고쳤고, 이 줄은 새로 생기는 넘침이
   화면 전체를 줄이지 않게 막는 마지막 울타리다(검사는 이 울타리 밖으로 나간 요소를 따로 센다). */
@media (max-width: 1023px) {
  html, body { overflow-x: clip; }
  img, video { max-width: 100%; }
}

/* ------------------------------------------------------------ 1. 손가락 크기 · iOS 확대
   누르는 것은 44px, 입력칸 글자는 16px(작으면 아이폰이 칸을 누를 때마다 화면을 확대한다). */
@media (max-width: 1023px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  select, textarea { font-size: 16px; line-height: 24px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  select { min-height: 44px; }
  button, .btn, a.btn, summary, [role=button], [role=tab] { min-height: 44px; }
  button.sm, .btn.sm, a.sm { min-height: 44px; }
  button:not(.nav-more):not([data-panel]) { min-width: 44px; }
  /* 표 · 목록 · 대화상자의 네모 칸 - 칸 자체를 44 로 키운다. 그림은 `style.css` 끝 「네모 칸 · 동그라미 칸
     한 양식」의 20px 배경 SVG 가 가운데 그대로 그린다(2026-10-02 - 전에는 여기서 모서리 없는 22px 네모를
     따로 그려 PC · label 안 칸과 모양이 달랐다). label 안에 있는 것은 label 이 누르는 자리라 그대로 둔다. */
  input[type=checkbox]:not(label input):not(.switch input):not(.media-edit-row > input):not(.sch-day input):not(.asset-weekdays input),
  input[type=radio]:not(label input):not(.switch input):not(.media-edit-row > input):not(.sch-day input):not(.asset-weekdays input) {
    width: 44px; height: 44px; border-radius: 8px;
  }
  input[type=checkbox]:not(label input):focus-visible,
  input[type=radio]:not(label input):focus-visible { outline: 3px solid var(--primary); outline-offset: -6px; }
  label:has(> input[type=checkbox]), label:has(> input[type=radio]) { min-height: 44px; display: flex; align-items: center; gap: 8px; }
}

/* ------------------------------------------------------------ 2. 관리 화면 셸 - 폰
   머리는 두 줄이다. 윗줄 - 이름 · 기기에 보내기, 아랫줄 - 남은 장수 · 알림 · 언어 · 로그아웃.
   아래 탭 막대는 자주 쓰는 다섯(대시보드 · 만들기 · 자료 · 재생목록 · 기기)과 「더보기」다. */
@media (max-width: 767px) {
  body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom)); }
  .topbar .wrap { padding: 8px 16px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); gap: 4px 8px; align-items: center; }
  /* 윗줄을 이름 · 보내기 · 알림으로 채워서 남은 장수부터는 아랫줄로 내려가게 한다 */
  .topbar .brand { order: 1; flex: 1 1 calc(100% - 150px); min-width: 0; }
  .topbar .pushbtn { order: 2; min-height: 44px; }
  .topbar .bellbtn { order: 3; width: 44px; height: 44px; }
  .topbar .bellbtn.hidden { display: none; }
  .topbar .gauge { order: 4; flex: 1 1 auto; width: auto; min-width: 88px; max-width: 160px; }
  .topbar .langtog { order: 5; margin-left: auto; }
  .topbar .linkbtn { order: 6; }
  .topbar .langtog { padding: 0; }
  .langtog button, .topbar .langtog button { min-width: 44px; min-height: 44px; height: 44px; padding: 0 6px; font-size: 12px; }
  .topbar .linkbtn, .topbar #btn-logout { min-height: 44px; min-width: 44px; padding: 0 8px; font-size: 14px; line-height: 22px; }

  /* 아래 탭 막대 - 이름 12px, 칸 전체가 누르는 자리 */
  .tabbar { padding-left: max(4px, env(safe-area-inset-left)); padding-right: max(4px, env(safe-area-inset-right)); }
  .tabbar button, .tabbar .nav-more { font-size: 12px; line-height: 16px; min-width: 0; }
  .tabbar.open .nav-sub button { min-height: 44px; height: 44px; font-size: 14px; line-height: 22px; }
  .tabbar.open .nav-help { min-height: 44px; }
  /* 더보기 시트 뒤를 흐리게 - 시트가 떠 있는 것인지 화면의 일부인지 안 갈렸다 */
  .tabbar.open { box-shadow: 0 0 0 100vmax rgba(24,27,30,.5), var(--shadow-xl); }
  .nav-soon { font-size: 12px; }

  /* 🔴 `body.on-dashboard main.wrap { padding: 32px }`(style.css) 이 선택자 강도로 이 줄을 이겨, 내 TV 탭만 폰에서
     좌우 32px + 카드 16px 로 기기 카드가 화면 끝에서 58px 떨어져 시작했다(2026-10-01 대표 지적). 같은 선택자를 같이 적는다. */
  main.wrap, body.on-dashboard main.wrap { padding: 16px 16px 24px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  h1 { font-size: 20px; line-height: 30px; }
  .page-heading { gap: 12px; margin-bottom: 16px; }
  .page-heading > .row, .page-heading > div:last-child:not(:first-child) { flex-wrap: wrap; }
  .page-help-btn {
    width: 44px; height: 44px; border: 0; background:
      radial-gradient(circle, var(--bg) 12px, var(--line) 12.5px, var(--line) 13.5px, transparent 14px);
    font-size: 14px; margin: -11px -11px -11px -8px;
  }
  .row { flex-wrap: wrap; }
  .row > select, .row > input { max-width: none !important; flex: 1 1 160px; min-width: 0; }
  .row > button { flex: none; }

  /* 목록 화면 한 틀 - 검색창은 폭 가득, 도구 줄은 감긴다 */
  .lf-search { display: flex; align-items: center; gap: 8px; width: 100%; }
  .lf-search input { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; height: 44px; padding-left: 40px; }
  .lf-search > .lf-btn { margin: 0; }
  .lf-search .lf-mag { left: 14px; }
  .dev-state-chip { min-height: 44px; }
  .dev-menu { width: 44px; height: 44px; }
  #pl-delete, #pl-unassign, .pl-danger { min-height: 44px; }
  #panel-schedules .page-help-btn { min-height: 44px; height: 44px; }
  .lf-tools { gap: 8px; }
  .lf-pager button { min-width: 44px; }
  /* 템플릿 63장이면 쪽 단추가 390 폭 밖으로 나갔다(2026-10-02 측정). 줄을 바꾼다. */
  .lf-pager { flex-wrap: wrap; max-width: 100%; }
  .lf-sort { min-height: 44px; }
  .lf-btn { min-width: 44px; }
  .lf-sub, .lf-tile-when { font-size: 12px; line-height: 16px; }

  /* 작은 글자 - 폰에서 12 아래로 내려가지 않는다 */
  .tiny, .badge, .badge.neutral, .badge.brand, .badge.warn, .badge.danger, .small, .muted.small,
  .grp-store, .grp-caret, .alert-sec, .a-time, .a-store, .sch-hr, .sch-b-rank, .sch-b-time,
  .nav-soon, .adm-tag, .home-more-hint, .brand .tag { font-size: 12px; }
  .tiny, .badge { line-height: 16px; }
}

/* ------------------------------------------------------------ 2-1. 표는 카드 목록 (폰 · 태블릿)
   768 에서도 표가 844 까지 밀려 옆으로 잘렸다. 태블릿까지 같은 카드로 간다. */
@media (max-width: 1023px) {
  /* 🔴 표는 폰에서 카드 목록이 된다. 머리 줄(정렬 단추)은 숨긴다 - 폰에서는 옆으로 밀어야
     보이던 칸이라 쓰이지 않았다. 네모 · 이름(두 줄까지) · 점 셋 메뉴가 한 줄에 선다. */
  .lf-table, .lf-table tbody { display: block; width: 100%; }
  .lf-table thead { display: none; }
  .lf-table tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    column-gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--divider);
  }
  .lf-table tr:hover { background: none; }
  .lf-table td { display: block; height: auto; padding: 0; border: 0; min-width: 0; width: auto; max-width: none; }
  .lf-table td.lf-check { grid-column: 1; grid-row: 1 / span 4; width: auto; padding: 0; }
  .lf-table td:not(.lf-check):not(.lf-c-act) { grid-column: 2; }
  .lf-table td.lf-c-act { grid-column: 3; grid-row: 1 / span 4; width: auto; }
  .lf-table td:empty, .lf-table .lf-c-type { display: none; }
  .lf-table .lf-c-when { display: block; color: var(--text-hint); font-size: 12px; line-height: 16px; white-space: normal; }
  .lf-name-cell { min-width: 0; }
  .lf-name-btn {
    white-space: normal; text-align: left; overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; min-height: 44px;
  }
  .asset-row-menu > summary, .lf-table details > summary { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
  .asset-row-options { right: 0; left: auto; max-width: calc(100vw - 32px); }
  .asset-row-options .sm, .asset-row-options a.sm { min-height: 44px; display: flex; align-items: center; }

  .lf-tools select, .lf-per-sel, .lf-tools select.lf-btn { font-size: 16px; min-height: 44px; }
  .lf-tools .lf-btn, .lf-view button { font-size: 14px; height: auto; min-height: 44px; min-width: 44px; }
  .kind-tag, .kind-tag > span { font-size: 12px; }
  /* 「내 앱」 줄은 단추가 셋(앱 설정 · 화면 만들기 · 삭제)이라 이름 옆 한 줄에 다 못 선다.
     옆에 세우면 이름 칸이 0 폭까지 눌려 글자가 단추 밑으로 겹쳤다(2026-10-02 삭제 단추를 더하며
     실측). 단추를 이름 아래 한 줄로 내리고, 삭제는 오른쪽 끝에 떼어 둔다 - 잘못 누르기 어렵게. */
  #apps-mine-lf .lf-table td.lf-c-act {
    grid-column: 1 / -1; grid-row: auto; display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: flex-start; margin-top: 6px; white-space: normal;
  }
  #apps-mine-lf .lf-table td.lf-c-act .apps-remove { margin-left: auto; }
}

/* 자료 고치기 화면 - 뒤로 · 저장 줄 · 설명 추가 · 태그 관리가 20~40px 이라 손가락에 안 잡혔다 */
@media (max-width: 1023px) {
  .media-edit-back { height: 44px; min-height: 44px; line-height: 44px; margin-bottom: 4px; }
  .media-edit-buttons button, .media-edit-buttons .media-save-toggle { height: 44px; min-height: 44px; }
  .media-edit-buttons .media-save-toggle { width: 44px; min-width: 44px; }
  .media-edit-buttons .media-save-action { min-height: 44px; }
  .media-description-add, .media-weekly-link { min-height: 44px; }
  .media-manage-tags { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }
  .media-source-control { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  /* 사용 기간은 켜고 끄는 스위치다 - 네모 칸 규칙에서 빼고 모양은 그대로, 누르는 자리만 넓힌다 */
  .media-edit-row > input[type=checkbox] { margin: 10px 0; }
  .media-edit-row > input[type=checkbox]::after { content: ''; position: absolute; inset: -10px -4px; }
}

/* ------------------------------------------------------------ 3. 대시보드 - 폰 첫 화면
   가장 자주 하는 일 셋(새 화면 만들기 · TV 에 걸기 · 기기 상태)이 위에 모인다. 인사말 판이
   화면 하나를 다 먹고 옆으로 넘치던 것을 한 열로 줄였다. */
@media (max-width: 767px) {
  .home { gap: 16px; }
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 16px; border-radius: 12px; }
  .home-hero-main, .home-latest { min-width: 0; }
  .home-lead { font-size: 20px; line-height: 30px; margin-bottom: 4px; }
  .home-sub { margin-bottom: 16px; }
  .home-actions > * { flex: 1 1 100%; justify-content: center; min-height: 48px; }
  .home-card, .dash-card { padding: 16px; }
  .home-card-head { flex-wrap: wrap; gap: 4px 8px; }
  .home-card-head .home-card-meta { flex: 1 1 auto; min-width: 0; }
  .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .home-tile { min-width: 0; }
  .home-tile-info { min-width: 0; width: 100%; }
  .home-tile-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
  .kind-tag, .kind-tag > span { font-size: 12px; }
  .home-card-head .home-card-meta { flex-basis: 100%; order: 3; }
  .board-section-head { flex-wrap: wrap; gap: 4px 8px; }
  .board-section-head > button { white-space: nowrap; }
  .home-row { grid-template-columns: minmax(0, 1fr); }
  .home-more > summary { flex-wrap: wrap; min-height: 44px; }
  .dash-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* 「TV 에 걸기」 단추의 그림 - 크기가 안 정해져 있어 브라우저 기본 300x150 검은 판으로 그려졌다.
   폭이 넓은 화면에서도 같은 단추라 매체 조건 밖에 둔다. */
.home-btn-sub { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.home-btn-sub > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }

/* 「TV 에 걸기」 창의 화면 이름 - 단추가 가운데 맞춤이라 이름 칸이 글자 폭만큼 늘어나 말줄임이
   안 걸렸고, 긴 이름이 옆 타일 위로 겹쳐 찍혔다(독립 채점에서 찾음). 폭과 상관없는 버그라 매체
   조건 밖에 둔다. 이름은 두 줄까지 보이고 그 뒤 말줄임. */
.hang-pop, .pl-pick { align-items: stretch; }
.pl-pick-name.ellipsis { max-width: 100%; }
/* 기기 카드 그림 밑 화면 이름은 인라인 폭 108 이 박혀 있어 폰에서 80 짜리 그림 칸 밖으로 나갔다 */
.mgr-thumbwrap > .tiny.ellipsis { width: auto !important; max-width: 100%; }
.hang-pop-name.ellipsis {
  max-width: 100%; white-space: normal; overflow-wrap: anywhere; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: center;
}

/* ------------------------------------------------------------ 4. 대화상자 - 폰에서는 전체 화면 시트
   머리와 바닥 단추가 붙어 있고 본문만 스크롤한다. 확정 단추는 엄지가 닿는 아래쪽이다. */
@media (max-width: 767px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-overlay > .modal {
    width: 100%; max-width: none; margin: 0; max-height: calc(100dvh - 24px);
    border-radius: 16px 16px 0 0; display: flex; flex-direction: column;
    padding: 20px 16px 0; overflow: hidden;
  }
  .modal-overlay > .modal > * { flex: none; }
  .modal-overlay > .modal > :not(.m-actions):not(.modal-actions):not(h2):not(h3):not(.m-head) { min-height: 0; }
  .modal-overlay > .modal { overflow-y: auto; overscroll-behavior: contain; }
  .modal .m-actions, .modal .modal-actions, .modal > .row:last-child {
    position: sticky; bottom: 0; z-index: 2; margin: 16px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--divider); display: flex; gap: 8px; flex-wrap: nowrap;
  }
  .modal .m-actions > button, .modal .modal-actions > button, .modal > .row:last-child > button { flex: 1 1 0; min-height: 48px; }
  dialog.asset-upload-dialog:not(.photo-ai-dialog):not(#ai-screen-dialog), #product-preview-dialog {
    width: 100vw; max-width: 100vw; max-height: 100dvh; height: auto; margin: auto 0 0; border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 만들기 창 - 폰에서는 「디자인 만들어 저장」이 3000px 아래 미리보기 끝에 있었다. 엄지가 닿는
   아래쪽에 붙여 두고, 그 자리만큼 창 끝을 비운다. */
@media (max-width: 767px) {
  .create-overlay #btn-make {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; width: auto; margin: 0;
    min-height: 56px; border-radius: 0; padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 12px var(--elevation-color);
  }
  .create-overlay > .create-dialog { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .create-overlay .create-dialog-head { gap: 8px; }
  .create-overlay .create-dialog-head h2 { flex: 1 1 auto; }
  .gauge .g-row span, .gauge .g-val { font-size: 12px; }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 매장 직원 화면 · 번호 호출 · 폰 리모컨 - 따로 선 작은 화면들 */
@media (max-width: 1023px) {
  .sumstrip .sum-l { font-size: 12px; }
  a#back { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  a#rc-home { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 첫 화면(랜딩) - 링크로 가장 먼저 열리는 화면이다 */
@media (max-width: 1023px) {
  .lp-gal-item figcaption b, .lp-tv-res, .lp-pl li, .lp-top .langtog button { font-size: 12px; }
}
@media (max-width: 599px) {
  /* 🔴 비교 표 카드의 줄 이름이 3px 로 눌려 있었다. 표 모양일 때 쓰던 `width: 1%` 가 카드로
     접은 뒤에도 남아서다 - 글자는 칸 밖으로 흘러 보였지만 옆 칸과 겹쳤다. */
  .lp-cmp tbody th { width: auto; white-space: normal; }
  .lp-wordmark { font-size: 10.5vw; }
}

/* 태블릿 폭에서 38px 로 남던 단추 - `(hover:hover)` 층이 이 폭에서도 38 로 줄였다 */
@media (max-width: 1023px) {
  #btn-push, .tabbar .nav-cta, #pl-new, #sched-new, #asset-add, #store-form button, #btn-login,
  .page-heading .primary, .page-heading button { min-height: 44px; }
  .alert-row .a-store, .alert-row .a-store.ellipsis, .alert-row .a-time, .alert-row.closed .a-time, .bars-axis span, th .arrow, .sch-b-rank, .sch-b-time,
  .rc .langtog button, .gauge .g-row span, .gauge .g-val, .brand .tag, #bell-dot { font-size: 12px; }
  #sched-daytabs { flex-wrap: wrap; }
  .media-period-dates { grid-template-columns: minmax(0, 1fr); }
  .media-period-dates > * { min-width: 0; }
}

/* ------------------------------------------------------------ 5. 태블릿 (768~1023) - 좁은 레일
   264px 레일에 머리 막대까지 서면 본문이 500px 로 줄고 머리가 옆으로 넘쳤다(768 에서 문서 폭 931).
   이 폭에서는 레일을 아이콘 위 이름 한 줄(88px)로 줄이고, 하위 메뉴는 자료 화면 안의 거르개가 맡는다. */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --rail-w: 88px; }
  .tabbar { padding: calc(var(--header-h) + 4px) 8px 8px; }
  .tabbar .nav-scroll > button, .tabbar .nav-grp > button, .tabbar .nav-help {
    flex-direction: column; justify-content: center; height: auto; min-height: 56px; padding: 6px 2px; gap: 2px;
    font-size: 12px; line-height: 16px; text-align: center; white-space: normal; word-break: keep-all;
  }
  .tabbar .nav-scroll > button .ico, .tabbar .nav-grp > button .ico, .tabbar .nav-help .ico { width: auto; }
  .tabbar .nav-sub, .tabbar .nav-caret, .tabbar .nav-soon { display: none !important; }
  .tabbar .nav-cta { margin-bottom: 8px; }
  .tabbar .nav-scroll > .nav-cta, .tabbar .nav-scroll > .nav-cta:hover, .tabbar .nav-scroll > .nav-cta.active { height: auto; min-height: 56px; }
  body.has-tabbar .topbar #btn-logout { width: auto; min-width: 44px; padding: 0 10px; flex: none; }
  .topbar .gauge { width: 112px; min-width: 0; flex: 0 1 112px; }
  .topbar .pushbtn { padding: 0 12px; }
  #pl-assign, #space-add-btn, #sched-add-event { min-height: 44px; }
  body.has-tabbar .topbar .brand { width: var(--rail-w); padding: 0 8px; grid-template-columns: auto; justify-content: center; }
  /* 이름은 화면 읽기용으로만 남긴다 - 레일이 88px 라 로고만 선다 */
  body.has-tabbar .topbar .brand .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.has-tabbar .topbar .brand .tag, body.has-tabbar .topbar .brand .org { display: none; }
  .topbar .wrap { padding: 0 16px 0 calc(var(--rail-w) + 16px); gap: 8px; }
  body.has-tabbar .topbar { padding-left: 0; }
  .topbar .linkbtn, .topbar #btn-logout { min-height: 44px; padding: 0 8px; white-space: nowrap; }
  .langtog button, .topbar .langtog button { min-width: 44px; min-height: 44px; height: 44px; }
  .topbar .langtog { padding: 0; }
  .topbar .bellbtn { width: 44px; height: 44px; }
  body.has-tabbar main.wrap { padding: 16px 20px 24px; }
  .dash-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .dash-col-wide { grid-column: 1 / -1; }
  .home-hero { grid-template-columns: minmax(0, 1fr); }
  .lf-sub, .lf-tile-when, .tiny, .badge, .badge.brand, .badge.neutral, .badge.warn, .badge.danger,
  .grp-store, .grp-caret, .alert-sec, .a-time, .sch-hr, .adm-tag { font-size: 12px; }
  #pl-delete, #pl-unassign, .pl-danger, .dev-state-chip { min-height: 44px; }
  .dev-menu { width: 44px; height: 44px; }
  .page-help-btn, #panel-schedules .page-help-btn { width: 44px; height: 44px; min-height: 44px; border: 0; margin: -11px;
    background: radial-gradient(circle, var(--bg) 12px, var(--line) 12.5px, var(--line) 13.5px, transparent 14px); }
}

/* ------------------------------------------------------------ 6. 가로로 눕힌 폰 (높이 500 이하)
   높이가 390 인데 머리 막대 64 · 레일이 서면 본문이 반도 안 남는다. 머리를 붙이지 않고 같이 흘려보낸다. */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar { position: static; }
  .modal-overlay > .modal { max-height: 100dvh; }
}

/* Five stable destinations; the full menu is a separate, keyboard-safe dialog. */
.nav-phone-label { display: none; }
.mobile-menu-account { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line); }
.mobile-menu-account .gauge { flex: 1 1 100%; }
.mobile-menu-account .langsel { flex: 1; min-height: 44px; }
.mobile-menu-account #btn-logout { min-height: 44px; }
@media (max-width: 767px) {
  :root { --header-h: 56px; }
  .topbar { height: 56px; min-height: 56px; }
  .topbar .brand .tag, .topbar .brand .org { display: none; }
  .topbar .wrap { flex-wrap: nowrap; gap: 8px; min-height: 56px; padding: 0 16px; }
  .topbar .brand { min-width: 0; flex-shrink: 1; }
  .topbar .brand .name { white-space: nowrap; font-size: 18px; line-height: 28px; }
  .topbar .push-text { display: none; }
  .topbar .pushbtn, .topbar .bellbtn { min-width: 44px; min-height: 44px; padding: 8px; flex-shrink: 0; }
}
.mobile-menu:not([open]) { display: none; }
@media (max-width: 767px) {
  .home-hero { display: block; padding: 20px; }
  .home-hello, .home-sub, #home-hang-btn { display: none; }
  .home-lead { font-size: 24px; line-height: 1.4; margin: 0 0 20px; }
  .home-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  #home-tiles > :nth-child(n+3) { display: none; }
  #home-more { margin-top: 8px; }
  #home-more > :not(summary) { margin-top: 16px; }
  #home-more .home-latest { min-width: 0; }
  .home-more-hint { display: none; }
}
body.mobile-menu-open { overflow: hidden; }
.mobile-menu {
  inset: auto 0 0; margin: 0 auto; width: min(100%, 560px); max-width: 100%;
  max-height: calc(100dvh - 24px); padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0;
  background: var(--bg); color: var(--text); box-shadow: var(--shadow-xl);
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu::backdrop { background: color-mix(in srgb, var(--color-black) 42%, transparent); }
.mobile-menu-handle { width: 36px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 8px; }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mobile-menu-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; }
.mobile-menu-close {
  width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--surface); color: var(--text);
}
.mobile-menu-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mobile-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mobile-menu-item {
  min-height: 88px; padding: 12px 4px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 14px;
  background: var(--page); color: var(--text); font: inherit; font-size: 14px; line-height: 22px;
  overflow-wrap: anywhere; text-align: center; cursor: pointer;
}
.mobile-menu-item .ico { width: 24px; height: 24px; color: var(--text-hint); }
.mobile-menu-item .ico svg { width: 24px; height: 24px; }
.mobile-menu-item[aria-current=page] { background: var(--primary-soft); border-color: var(--color-blue-400); color: var(--color-blue-900); font-weight: 700; }
.mobile-menu-item[aria-current=page] .ico { color: inherit; }
.mobile-menu-links { display: flex; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--divider); }
.mobile-menu-link { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; color: var(--text-hint); font-size: 14px; line-height: 22px; text-decoration: none; }
.mobile-menu-link .ico { width: 20px; height: 20px; }
.mobile-menu-link .ico svg { width: 20px; height: 20px; }
.mobile-menu :is(button, a):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 767px) {
  body.has-tabbar { --tabbar-h: 76px; }
  .tabbar {
    --nav-ico: 24px;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 4px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
    background: var(--bg); border-top: 1px solid var(--line); box-shadow: var(--shadow-lg);
    align-items: stretch; gap: 2px;
  }
  .tabbar button[data-panel=playlists] { display: none; }
  .tabbar button[data-panel=board] { order: 1; }
  .tabbar .nav-grp > button[data-panel=assets] { display: none; }
  .tabbar button[data-panel=layouts] { order: 2; }
  .tabbar .nav-section { display: none; }
  .tabbar button[data-panel=create] { order: 3; }
  .tabbar button[data-panel=devices] { order: 4; }
  .tabbar .nav-more { order: 5; }
  .tabbar .nav-desktop-label { display: none; }
  .tabbar .nav-phone-label { display: inline; }
  .tabbar button, .tabbar .nav-more {
    flex: 1 1 0; min-width: 0; min-height: 68px; height: auto;
    padding: 5px 1px; gap: 4px; border: 0; border-radius: 12px;
    font-size: 11px; line-height: 16px; letter-spacing: 0; color: var(--text-hint);
  }
  .tabbar button .ico { position: relative; isolation: isolate; }
  .tabbar button.active { background: transparent; color: var(--color-blue-900); font-weight: 700; }
  .tabbar button.active .ico::before {
    content: ''; position: absolute; z-index: -1; inset: -5px -13px;
    border-radius: 12px; background: var(--primary-light);
  }
  .tabbar button.active:not(.nav-cta) .ico { margin-bottom: 4px; }
  .tabbar button.nav-cta, .tabbar button.nav-cta:hover {
    background: transparent; color: var(--text); box-shadow: none; margin: 0;
    font-weight: 600; transform: none;
  }
  .tabbar .nav-scroll > button.nav-cta .ico {
    width: 44px; height: 38px; margin-top: -6px; border-radius: 13px;
    background: var(--primary); color: var(--color-white);
  }
  .tabbar button.nav-cta .ico::before { display: none; }
  .tabbar button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
}
@media (max-width: 359px) {
  .mobile-menu { padding-left: 16px; padding-right: 16px; }
  .mobile-menu-item { font-size: 12px; letter-spacing: 0; padding-left: 2px; padding-right: 2px; }
}

/* ------------------------------------------------------------ 폰 하단 「TV에 보내기」 띠 (2026-10-02)
   대표 「모사일상단 비행기메뉴 없애도되지안하?」. 폰 머리에서 비행기 단추(#btn-push)를 뺀다.
   🔴 그 단추는 변경을 기기로 내보내는 유일한 길이라 그냥 지우면 폰에서 고친 것이 TV 에 안 나간다.
      그래서 보낼 변경이 있을 때만 하단 탭 바로 위에 같은 일을 하는 띠(#push-dock)를 띄운다.
      보일지는 `renderPushBtn()` 이 `hidden` 으로 정하고, 여기서는 폭만 가른다. PC 는 머리 단추 그대로. */
.push-dock { display: none; }
@media (max-width: 767px) {
  .topbar #btn-push { display: none !important; }
  .push-dock:not([hidden]) {
    position: fixed; z-index: 16;
    left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right));
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 16px; border: 0; border-radius: 12px;
    background: var(--primary); color: var(--color-white);
    font: inherit; font-size: 16px; line-height: 24px; font-weight: 700;
    box-shadow: 0 6px 18px rgba(8, 126, 234, .28);
  }
  .push-dock-ico { display: inline-flex; }
  /* 재생순서 이름이 길면 한 줄에서 말줄임 - 띠가 두 줄로 부풀지 않게 (2026-10-02) */
  .push-dock-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .push-dock-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; }
  /* 띠가 떠 있는 동안 본문 맨 아래가 띠 밑에 숨지 않게 그만큼 더 띄운다. */
  body.has-tabbar.has-push-dock { padding-bottom: calc(var(--tabbar-h) + 24px + 58px + env(safe-area-inset-bottom)); }
  /* 보드의 「보내기 모드」 막대가 같은 자리에 선다. 그 막대가 떠 있으면 띠는 비켜 준다. */
  body:has(#sendbar:not(.hidden)) .push-dock { display: none; }
  /* 「TV에 걸기」 제안 띠(#hang-return)가 하단 메뉴 · 반영 띠를 덮던 것을 그 위로 올린다 (2026-10-02 측정). */
  body.has-tabbar .hang-return { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px); z-index: 17; }
  body.has-tabbar.has-push-dock .hang-return { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 68px); }
}