.comic-reader { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #8a967c transparent; overscroll-behavior-x: contain; }
.travel-comic-frame { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; }
.comic-window { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1; border-radius: 12px; background: #e9e5d8; }
.comic-window img { position: absolute; width: 200%; height: 300%; max-width: none; left: calc(var(--comic-x) * -100%); top: calc(var(--comic-y) * -100%); object-fit: fill; }
.comic-teaser { display: block; margin-block: 16px; }
.travel-comic-frame figcaption { padding: 18px 0 8px; }
.travel-comic .travel-comic-frame figcaption p { margin: 8px 0; color: var(--ink); font-size: 20px; font-weight: 500; }
.comic-reader-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 24px; }
.comic-reader-controls > span { font-size: 12px; color: var(--muted); }
.comic-reader-controls > div { display: flex; gap: 8px; }
.comic-reader-controls button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #b4bca9; background: transparent; color: var(--ink); font-size: 24px; cursor: pointer; }
.comic-reader-controls button:hover { background: #e5e9dc; }
.comic-reader:focus-visible, .comic-reader-controls button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.travel-comic > .content-note { margin-top: 24px; }
.comic-context { margin-top: 24px; border-top: 1px solid #d3d8cb; padding-top: 16px; }
.comic-context summary { cursor: pointer; color: var(--ink); font-size: 14px; }
.comic-context p { font-size: 14px; line-height: 1.8; color: var(--muted); }
.comic-context .source-links { margin-top: 12px; }
@media (min-width: 1000px) { .comic-reader { max-width: 580px; } }