[mobile][W2·gated] Occupation pages: chaptered body + sticky chip nav (556 pages)

[jasonhnd]

Context (read this first)

• GATED — execution order is binding: do NOT start this issue until [mobile][W2] Occupation pages: numbers-first verdict card + score-band doors (556 pages) #323 is merged into preview AND the owner has reviewed it and opened this issue for work. Technical reason: this issue wraps the body around the anchor ids (#sec-aiois etc.) and the relocated type block that [mobile][W2] Occupation pages: numbers-first verdict card + score-band doors (556 pages) #323 introduces — [mobile][W2] Occupation pages: numbers-first verdict card + score-band doors (556 pages) #323 now guarantees the relocated block keeps its existing class names (.verdict-kicker/.verdict-task-grid/…), so you may rely on them; still grep its final position before moving it.
• Repo: jasonhnd/jobs → mirai-shigoto.com. The occupation page body is 15+ stacked sections (~10 screens); 40s average engagement means most visitors read only the top.
• Base branch is preview. Your PR targets preview. NEVER push, merge, or open a PR to main. Never trigger a production deploy. The owner reviews everything on preview and personally decides promotion.
• Referee spec: docs/MOBILE_SHAPES.md — §0, §3, §4.3 (this issue).
• Visual reference: scrolled portion of mockups/shots/frame-03.png. Mockup font sizes are directional; §3.1 floors and existing site sizes win (e.g. chapter summaries ≥ the existing .faq-item summary size, chip labels ≥12px).

Scope — one template, 556 pages

• src/pages/[...id].astro (wrap fragments into chapters + chip nav)
• src/pages/_id-css.ts (chapter + chip styles)
• src/pages/_IdPageScript.astro (extend the existing hashed inline script)

Spec

1. Wrap the existing body fragments into seven <details class="chap"> chapters, content byte-identical inside, per the §4.3 table:
   • スコアの中身: scoreHistoryHtml, #sec-aiois (aioisHtml), #sec-ai-detail (aiRiskDetailHtml), profileHtml, topnHtml, the type block relocated by [mobile][W2] Occupation pages: numbers-first verdict card + score-band doors (556 pages) #323
   • この仕事とは: ctx section
   • なるには・資格: howSection, orgsCertsHtml
   • 待遇と働き方: condSection, StatsGrid
   • 似た仕事・移り先: #sec-transfer (transferHtml), #sec-similar (sameRiskHtml + legacyRelatedHtml)
   • よくある質問: faqHtml (already <details>-based; nest as-is; pick a chevron style distinct from the inner FAQ markers)
   • 出典と数字: aiFactHtml (full text), JobtagAnchor, relatedHubsHtml, map-back link
     Note this is a real reorder, not wrap-in-place: profile/topn/orgsCerts/StatsGrid/aiFact move across the current DOM order to reach their chapters.
2. Anchors live on inner wrappers only (a <details> carries one id; keep the four #sec-* ids exactly as [mobile][W2] Occupation pages: numbers-first verdict card + score-band doors (556 pages) #323 created them). If chapters need their own ids for the chip nav, use a separate namespace (e.g. chp-*) — these are the only new ids permitted, and they will legitimately appear in the internal-links baseline (regen per docs/SEO_OG_BASELINE.md, commit tests/baseline/*, note in CHANGELOG).
3. Sticky chip nav under the 48px top bar (top:48px, z-index below the top bar's 100): horizontal-scroll row of the seven titles; tap = open + scroll.
4. Helper logic — extend the existing hashed inline script in _IdPageScript.astro (static body; hash gets recomputed, no new hash entries): (a) on ≥900px set open on all details.chap and hide chevrons via CSS; (b) on load and on hashchange, find the hash target, set open on its closest('details'), then scroll — this makes [mobile][W2] Occupation pages: numbers-first verdict card + score-band doors (556 pages) #323's doors and the chips open the right chapter. Reconcile with the shared desktop-open snippet [mobile][W1] Rankings template: list-first first screen, fold intro/ai-fact/stats (39 pages) #321/[mobile][W1] Compare template: pinned two-name bar + metric rows (20 pages) #322 introduced (one shared pattern, not three copies).
5. Defaults: mobile all chapters closed (この仕事とは open is an owner taste call at PR review). Content must remain fully present and indexable with JS disabled.
6. .ai-fact: complete text inside 出典と数字; if keeping its DOM position early while visually relocating is cheap, do it (§3.5); otherwise state plainly in the PR that DOM order changed.

Invariants

§3.5 (no deletion; JSON-LD/meta/H1 untouched). §3.1/§3.2. Chapter titles exactly as in Appendix A. No new GA4 events.

Acceptance

• PR screenshots 390×844: /156 top (chip nav visible under top bar), one open chapter, and /430; desktop ≥1280 with all chapters open.
• Door links from [mobile][W2] Occupation pages: numbers-first verdict card + score-band doors (556 pages) #323 (all three variants: high on /430, low on /156, mid on any 5–6.9 occupation) open the right chapter and land correctly — manual check; fragment anchors are not covered by verify-internal-links by design.
• View-source check: all seven chapters' content present in initial HTML (paste a grep count in PR, e.g. FAQ question count unchanged).
• bun run typecheck && bun run test && bun run verify:gates && bun run test:e2e green; capture:seo-baseline regenerated for the new chp-* ids and committed; check:csp-hashes recomputed for the extended _IdPageScript (hash value changes, no new entries).