/* 모바일 앱 껍데기 — 하단 탭 (Task 6) + PC 화면 위 주입분 (Task 7, .ms-on 블록). 폰 전용 화면(mobile/_base.html)과 PC 화면(base.html)이 같이 싣는다. .ms-on 은 mobile_shell.js 가 「설치된 앱 + 좁은 화면」일 때만 에 붙인다 — PC 브라우저에서는 그 블록 전체가 죽은 규칙이다. */ :root { --ms-tabbar-h: 56px; } .ms-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; display: flex; background: var(--surface, #fff); border-top: 1px solid var(--n200, var(--line,#E5E8EB)); padding-bottom: env(safe-area-inset-bottom); font-family: var(--font, 'Pretendard', -apple-system, sans-serif); } .ms-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--ms-tabbar-h); /* 56px — 손끝 목표 44px 이상 */ text-decoration: none; font-size: 11px; font-weight: 600; color: var(--n500, var(--sub,#8B95A1)); -webkit-tap-highlight-color: transparent; } .ms-tab .ms-tab-icon { font-size: 18px; line-height: 1; } .ms-tab.on { color: var(--바탕-파랑, var(--primary,#3182F6)); } /* 내용 끝줄이 탭 뒤에 숨지 않게 — body.m-body 로 좁힌다. 폰 전용 화면은 _base.html 이 이 클래스를 직접 적고, PC 화면은 mobile_shell.js 가 껍데기를 켤 때 같은 클래스를 붙인다 — 같은 여백을 두 규칙에 적으면 탭 높이가 바뀔 때 한쪽만 고쳐진다. 맨몸 body 로 적으면 PC 바닥에 이유 없는 빈 띠가 생긴다. */ body.m-body { padding-bottom: calc(var(--ms-tabbar-h) + env(safe-area-inset-bottom)); } /* ── PC 화면 위 주입분(Task 7) — mobile_shell.js 가 만든 DOM 만 이 클래스를 입는다. 전부 .ms-on 접두: html 에 ms-on 이 없으면(=PC 브라우저·폰 전용 화면) 통째로 잔다. ── */ .ms-on .ms-topbar { position: sticky; top: 0; z-index: 2147482000; display: flex; align-items: center; gap: 8px; background: var(--surface, #fff); border-bottom: 1px solid var(--n200, var(--line,#E5E8EB)); padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); font-family: var(--font, 'Pretendard', -apple-system, sans-serif); } .ms-on .ms-back { width: 34px; height: 34px; border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--ink, #191F28); cursor: pointer; } .ms-on .ms-title { font-size: 15px; font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-on .ms-notice { background: #FFFBEB; border-bottom: 1px solid #FDE68A; color: #92400E; font-size: 11.5px; padding: 6px 12px; line-height: 1.5; }