/* 모바일 껍데기 — 세 화면이 함께 쓰는 것만 담는다. 지금은 둘이다: **하단 탭 바**와 **바텀 시트**. ⚠ **왜 skin.css 가 아닌가:** 아이템 화면(index.html)은 style.css 만 싣고 skin.css 를 안 싣는다(실측 2026-08-07). skin.css 에 넣으면 세 화면 중 하나에만 안 뜨는데, 마크업은 있으니 tests/mobile.test.js 는 **초록인 채로 샌다.** 한 파일에 두고 세 HTML 이 다 싣는 것이 유일하게 안전하다. ⚠ **이 파일은 혼자 선다.** skin.css 의 --gold 류가 없는 화면에서도 색이 나와야 하므로 되돌림 값을 아래 :root 에 적어 둔다. **정본은 skin.css 이고 여기 것은 되돌림이다** — 두 곳이 갈리면 skin.css 를 따른다(var(--gold, …) 가 그렇게 동작한다). */ :root { --m-gold: #c8a24c; --m-dim: #8d7439; --m-muted: #9a8e76; --m-cream: #e6dcc4; --m-line: #3b3122; /* 44px 은 손가락 하나의 최소 크기다(애플·구글 지침이 같은 값을 쓴다). 2026-08-07 실측: 계산 탭 터치 대상 61개 중 52개가 이 값 미만이었다. */ --m-touch: 44px; /* 하단 탭 바의 높이. **이 값 하나에서 둘이 파생된다** — 탭 바 자신의 높이와 본문 아래 여백. 따로 적었더니 탭 바가 66px 인데 여백이 52px 이라 14px 이 가려졌다(2026-08-07 실측). min-height 가 아니라 height 인 이유도 그것이다: 내용에 따라 자라면 여백이 다시 어긋난다. */ --m-tabbar: 56px; } /* ── 하단 탭 바 (A1) ────────────────────────────────────────────────────── 데스크톱에는 안 뜬다 — 헤더 링크가 이미 그 일을 하고, 아래를 가리면 손해다. 375px 에서 헤더 링크가 「4인 파 / 티」로 줄바꿈되던 것을 이것이 대신한다. */ .tabbar { display: none; } @media (max-width: 720px) { .tabbar { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; /* 홈 인디케이터가 있는 기기에서 마지막 줄이 가려진다. */ height: calc(var(--m-tabbar) + env(safe-area-inset-bottom, 0px)); background: #100e0a; box-sizing: border-box; /* ⚠ **다른 스타일시트의 nav 규칙을 되돌린다.** style.css:5 가 `header, nav { padding: var(--gap); border-bottom: … }` 를 걸어서, 아이템 화면에서는 탭 바가 위 12px 을 먹고 링크가 44px 로 줄었다(2026-08-07 실측: 바 56 · 링크 44 · 위 12px 은 눌러도 안 먹음). 화면마다 nav 규칙이 다르므로 여기서 통째로 못박는다 — 값을 물려받지 않는다. */ margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); border: 0; /* style.css 의 `nav { gap: 8px }` 도 샜다 — 아이템 화면만 칸 사이가 8px 벌어져 링크 폭이 120 대 125 로 갈렸다(리뷰 실측). 격자가 폭을 정하므로 0 이 맞다. */ gap: 0; border-top: 1px solid var(--gold-dim, var(--m-dim)); } .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; /* ⚠ height: 100% 를 쓰면 격자 칸 안에서 42px 로 줄어든다(2026-08-07 실측) — 바 위쪽 14px 을 눌러도 안 먹었다. 격자의 기본 stretch 에 맡기고 최소만 못박는다. */ min-height: var(--m-touch); line-height: 1.3; font-size: 11px; text-decoration: none; color: var(--muted, var(--m-muted)); } .tabbar a.on { color: var(--gold, var(--m-gold)); } .tabbar .ti { font-size: 17px; line-height: 1; } /* 탭 바가 덮는 만큼 본문 아래를 비운다 — 마지막 줄이 가리면 안 된다. **탭 바 높이와 같은 변수에서 나온다.** 따로 적으면 조용히 어긋난다. */ body { padding-bottom: calc(var(--m-tabbar) + env(safe-area-inset-bottom, 0px)); } /* 헤더의 화면 이동 링크는 탭 바와 **같은 말**이라 감춘다. ⚠ 마크업이 화면마다 다르다: 빌드·파티는