/* =============================================================
   휴대폰: 앱 위에 떠 있는 것 정리 (사용자 2026-11-03 시안 "1")
   - 도움말 '?' 단추(#help-fab-btn, help-system.js): 오른쪽 아래 둥근 파랑 → 머리줄 종 왼쪽 회색 아이콘.
     알림 카드와 같은 구석에서 카드 뒤에 깔리고, 알림이 없을 땐 표 맨 아래 줄을 가렸다. 누르면 도움말 열림은 그대로.
   - 알림 허용 안내(#notif-perm-banner, notifications.js): 검은 2줄 상자 81px → 머리줄 아래 흰 한 줄 띠 44px.
     허용 전 안내만 짧은 문구로 바꿔 보임(차단됨 안내는 방법 설명이라 그대로). '허용하기' · '나중에' 동작 그대로.
   PC 는 그대로. 기능 코드 변경 없음.
   ============================================================= */
@media screen and (max-width:768px){
/* ? 단추: 머리줄 종 왼쪽. body 직속 단추도 문서와 함께 스크롤해 사라져야 한다.
   fixed로 남으면 스크롤된 등록 단추와 겹친다. PC의 원래 fixed는 유지한다. */
html #help-fab-btn{ position:absolute !important; top:7px !important; bottom:auto !important; right:57px !important; width:34px !important; height:34px !important; border-radius:var(--ui-radius-control) !important; background:transparent !important; box-shadow:none !important; color:var(--ui-text-2) !important; font-size:15px !important; transform:none !important; z-index:101 !important }
html #help-fab-btn:active{ background:var(--ui-fill) !important }
/* 알림 허용 안내: 검은 2줄 상자 → 머리줄 아래 흰 한 줄 띠 */
html #notif-perm-banner{ flex-wrap:nowrap !important; top:52px !important; left:8px !important; right:8px !important; transform:none !important; max-width:none !important; min-height:44px; box-sizing:border-box; gap:8px !important; padding:6px 6px 6px 12px !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-surface) !important; color:var(--ui-text-1) !important; box-shadow:var(--ui-elev-popover) !important; font-size:var(--ui-text-footnote) !important; animation:none !important }
html #notif-perm-banner > span:first-child{ order:-1; font-size:0 !important; width:16px; display:inline-flex; justify-content:center }
html #notif-perm-banner > span:first-child::before{ content:"\f0f3"; font-family:"Font Awesome 6 Free"; font-weight:400; font-size:14px; color:var(--ui-text-2) }
html #notif-perm-banner > span:nth-child(2){ line-height:1.35 !important }
/* 허용 전 안내만 한 줄 문구로(차단됨 안내는 방법 설명이라 그대로) */
html #notif-perm-banner:has(.notif-perm-allow) > span:nth-child(2){ font-size:0 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html #notif-perm-banner:has(.notif-perm-allow) > span:nth-child(2)::before{ content:"인애드 알림을 받으려면 허용이 필요합니다"; font-size:var(--ui-text-footnote) }
html #notif-perm-banner b{ font-weight:var(--ui-weight-semibold) }
html #notif-perm-banner .notif-perm-allow{ height:32px; padding:0 12px !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; white-space:nowrap }
html #notif-perm-banner .notif-perm-later{ height:32px; padding:0 8px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; white-space:nowrap }
}

/* =============================================================
   도움말 패널이 자기 어두운 바탕 아래로 깔리던 것 (모든 폭, 사용자 2026-11-03 "1")
   app-core.js 의 창 겹침 정리가 id 가 '-overlay' 로 끝나는 #help-panel-overlay 만 창으로 보고 z 20000 으로 올려,
   z 9995 인 #help-panel 위를 덮었다 → 패널이 흐리고, 안을 누르면 바탕이 눌려 닫혔다.
   패널을 바탕 바로 위로. 닫힌 패널은 화면 밖(right:-380px)이라 다른 화면 영향 없음.
   ============================================================= */
@media screen{
html #help-panel{ z-index:20001 !important }
}