.history { --history-nav-sticky-top: calc(var(--header-height, 80px) + var(--space-24)); }

/* History Content */
.history__content { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: start; gap: 0 var(--space-60); }

/* History Navigation */
.history-nav { position: sticky; top: var(--history-nav-sticky-top); }
.history-nav__list { display: flex; flex-direction: column; }
.history-nav__link { display: block; width: 100%; padding: var(--space-16) var(--space-20); border-top: 1px solid var(--color-border-default); color: var(--color-text-default); font-size: var(--font-size-h4); font-weight: 400; line-height: var(--line-height-h4); }
.history-nav__link:hover { color: var(--color-text-accent); }
.history-nav__item:last-child .history-nav__link { border-bottom: 1px solid var(--color-border-default); }
.history-nav__link.is-active { position: relative; background-color: var(--color-surface-brand); color: var(--color-text-inverse); font-weight: 700; }
.history-nav__link.is-active::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background-color: var(--color-brand-accent); content: ""; }

/* History Chapter List */
.history-chapter { display: flex; flex-direction: column; gap: var(--space-80); }

/* History Chapter Header */
.history-chapter__header { position: sticky; top: var(--history-nav-sticky-top); z-index: 10; padding-bottom: var(--space-20); background-color: var(--color-surface-default); isolation: isolate; }
.history-chapter__header::before { position: absolute; right: 0; bottom: 100%; left: 0; height: var(--space-40); background-color: var(--color-surface-default); content: ""; }
.history-chapter__toggle { display: none; }
.history-chapter__display { color: var(--color-text-muted); font-size: var(--font-size-display); font-weight: 700; line-height: var(--line-height-display); }

/* History Chapter Panel */
.timeline { position: relative; display: flex; flex-direction: column; padding: var(--space-20) 0 0 var(--space-80); }
.timeline-event { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; column-gap: var(--space-60); }
.timeline-event:not(:last-child) { padding-bottom: var(--space-40); }
.timeline-event::before { position: absolute; top: 0; bottom: 0; left: calc(7.5rem + (var(--space-60) / 2)); width: 1px; background-color: var(--color-neutral-200); content: ""; }
.timeline-event::after { position: absolute; top: 0; bottom: 0; left: calc(7.5rem + (var(--space-60) / 2)); z-index: 5; width: 14px; height: 14px; border-radius: 50%; background-color: #E8E3DA; content: ""; transform: translate(-50%, 50%); }
.timeline-event__date { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); width: 100%; text-align: right; white-space: nowrap; }
.timeline-event__date .year { color: var(--color-text-default); font-size: var(--font-size-h2); font-weight: 700; line-height: var(--line-height-h2); } 
.timeline-event__date .month { color: var(--color-text-muted); font-size: var(--font-size-body); line-height: var(--line-height-body); }
.timeline-event__content { display: flex; flex-direction: column; gap: var(--space-14); min-width: 0; padding-top: var(--space-4); }
.timeline-event__content .text { color: var(--color-text-default); font-size: var(--font-size-h3); line-height: var(--line-height-h3); word-break: break-word; }
.timeline-event:has(figure)::after { background-color: var(--color-brand-accent); }
.timeline-event__content .gallery-viewport { width: 100%; max-width: 976px; min-width: 0; overflow: hidden; }
.timeline-event__content .gallery { display: flex; flex-wrap: nowrap; gap: var(--space-12); will-change: transform; }
.timeline-event__content .gallery > li { flex-shrink: 0; width: 235px; }
.timeline-event__content .gallery .figure { width: 235px; aspect-ratio: 235 / 165; }
.timeline-event__content .figure { display: flex; justify-content: center; width: 480px; max-width: 100%; margin-bottom: var(--space-15); }
.timeline-event__content:has(img.contain) .figure { border: 1px solid #e8e3da; }
.timeline-event__content .figure img { width: 100%; height: 100%; object-fit: cover; }
.timeline-event__content img.contain { width: auto; object-fit: contain; object-position: center; }

@media (max-width: 1024px) {
  /* History Content */
  .history__content { grid-template-columns: 1fr; }

  /* History Navigation */
  .history-nav { display: none; }

  /* History Chapter List */
  .history-chapter { gap: 0; width: 100%; min-width: 0; }

  /* History Chapter Header */
  .history-chapter__header { position: relative; top: auto; z-index: auto; padding-bottom: 0; }
  .history-chapter__header::before { display: none; }
  .history-chapter__toggle { display: flex; justify-content: space-between; width: 100%; padding: var(--space-20); color: var(--color-text-default); border-top: 1px solid var(--color-border-default); font-size: var(--font-size-h3); font-weight: 400; line-height: var(--line-height-h3); }
  .history-chapter__item:last-child .history-chapter__toggle { border-bottom: 1px solid var(--color-border-default); }
  .history-chapter__toggle .icon { flex-shrink: 0; width: 25px; height: 25px; color: var(--color-text-primary); stroke-width: 2; transition: transform 0.35s ease; }
  .history-chapter__item.is-open .history-chapter__toggle { position: relative; background-color: var(--color-surface-brand); color: var(--color-text-inverse); }
  .history-chapter__item.is-open .history-chapter__toggle::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background-color: var(--color-brand-accent); content: ""; }
  .history-chapter__item.is-open .history-chapter__toggle .icon{ color: var(--color-text-inverse); }
  .history-chapter__display { display: none; }

  /* History Chapter Panel */
  .history-chapter__panel { display: none; }
  .history-chapter__item.is-open .history-chapter__panel { display: block; }
  .history-chapter__item.is-open .history-chapter__toggle .icon { transform: rotate(180deg); }
  .history-chapter__item.is-open .timeline { padding: var(--space-20) 0 var(--space-50) var(--space-40); }
  .timeline-event { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); column-gap: 0; }
  .timeline-event::before, .timeline-event::after { left: -15px; }
  .timeline-event__date { flex-direction: row; align-items: center; gap: var(--space-10); }
  .timeline-event__content { width: 100%; }
  .timeline-event__content .figure { width: 100%; margin-bottom: var(--space-8); }
  .timeline-event__content .gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .timeline-event__content .gallery > li { flex: 1; width: 100%; }
  .timeline-event__content .gallery .figure { width: 100%; }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .history-chapter__toggle .icon { transition: none; }
}