# Summary: Changes from bio-header2.html to bio-header3.html

## Overview

`bio-header3.html` is derived from `bio-header2.html`. The main focus is a **one-step timeline navigation** on decade click, plus **mobile-specific improvements** for the timeline drawer and event cards.

---

## 1. HTML Differences

| Item | bio-header2 | bio-header3 |
|------|-------------|-------------|
| CSS | `css/bio.css?v=20260121-0945` | `css/bio.css?v=20260307-mobile` |
| JS | `js/bio.js?v=20260218-scrollsync` | `js/bio.js?v=20260307-mobile` |
| Comment | Based on bio-header.html | Adds: "年代クリックで直接その年代の最初の年にスクロール（1ステップナビ）" |

The markup (header, footer, templates, etc.) is otherwise the same. Differences are driven by the updated CSS/JS assets.

---

## 2. One-Step Timeline Navigation (Decade Click)

**bio-header2 behavior:** Decade click expands the year list; user then clicks a year to navigate.

**bio-header3 behavior:** Decade click:
- Loads the decade data (if not already loaded)
- Scrolls to the first event card of that decade
- Keeps the timeline navigator open so the user can still pick a specific year

---

## 3. Mobile Drawer Behavior

### Drawer close timing

- **Decade click:** Drawer stays open. User sees the year list and can scroll within it.
- **Year click:** Drawer closes. Navigation and scroll then run.
- **Loading overlay:** Tapping the loading overlay does not close the drawer (pointer-down handler excludes `.bio-timeline-loading`).

### Drawer restore after loading

- After the loading overlay is hidden, the timeline navigator is explicitly reopened on mobile.
- Ensures the drawer is visible again even if something closed it during loading.

---

## 4. Timeline Scroll vs. Tap

When scrolling the timeline (years/decades) on touch devices, scroll intent was sometimes treated as a tap.

**Fix:**
- Movement threshold: if the pointer moves more than 10px between down and up, treat it as scroll and do not fire the click handler.
- `touch-action: pan-y` added to `.timeline_scroll` and its decade/year buttons so the browser favors vertical scrolling.

---

## 5. Event Card Width (Mobile)

Event cards could extend past the viewport width on mobile.

**Fix:**
- `content_layout`, `main_scroll_column`, `diary_list`, and `.detail_card` constrained with `min-width: 0`, `width: 100%`, and `max-width: 100%`.
- Images, videos, iframes, and containers inside `.detail_card` use `max-width: 100%` so content stays within the card.
- Overflow handling added for `.photo_stage`, `.photo_carousel`, and `.reference_drawer`.

---

## 6. Files Touched

| File | Changes |
|------|---------|
| `bio-header3.html` | New file; asset versions updated for mobile |
| `js/bio.js` | Decade click flow, drawer logic, scroll vs tap detection, loading overlay handling |
| `css/bio.css` | Mobile timeline styles, event card width constraints, `touch-action` |

---

## 7. User Flow (Mobile)

1. User opens timeline drawer (tap “年代” tab).
2. User taps a decade (e.g. 1980s).
3. Decade loads (loading overlay shown if needed).
4. Page scrolls to the first event card of that decade.
5. Loading overlay hides; timeline drawer reopens.
6. User can optionally tap a specific year.
7. Drawer closes; page scrolls to that year.