.na-comic-reader, .na-comic-reader * { box-sizing: border-box; }
.na-comic-reader {
width: 100%; max-width: var(--na-comic-reader-width, 1200px);
margin-inline: auto; display: flex; flex-direction: column;
gap: var(--na-comic-page-gap, 28px);
counter-reset: na-comic-page;
min-width: 0;
}
.na-comic-page {
position: relative; width: 100%; min-width: 0;
counter-increment: na-comic-page;
background: var(--na-comic-page-bg, #fff);
color: var(--na-comic-page-ink, #171320);
padding: var(--na-comic-page-padding, clamp(12px, 2vw, 26px));
padding-bottom: calc(var(--na-comic-page-padding, 26px) + 22px);
border: var(--na-comic-page-border, 1px) solid var(--na-comic-page-border-color, #d9d5df);
}
.na-comic-page::after {
content: counter(na-comic-page, decimal-leading-zero);
display: block; position: absolute; bottom: 8px; right: 15px;
color: var(--na-comic-page-number-color, #444); font: 700 12px/1.2 system-ui, sans-serif;
letter-spacing: .08em; pointer-events: none;
}
.na-comics-no-page-numbers .na-comic-page::after, .na-comic-page--unnumbered::after { display: none; }
.na-comics-page-edges .na-comic-page, .na-comic-page--edge {
box-shadow: 5px 5px 0 var(--na-comic-page-edge-color, #21192c);
}
.na-comic-grid-2, .na-comic-grid-3 {
display: grid; align-items: stretch; gap: var(--na-comic-gutter, 16px); min-width: 0;
}
.na-comic-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.na-comic-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.na-comic-grid-2 > *, .na-comic-grid-3 > * { min-width: 0; }
.na-comic-wide { grid-column: 1 / -1; }
.na-comic-panel {
min-width: 0; border: var(--na-comic-panel-border, 4px) solid var(--na-comic-panel-ink, #111);
background: var(--na-comic-panel-bg, #fff); overflow: hidden;
border-radius: var(--na-comic-panel-radius, 0px);
}
.na-comic-panel img { display: block; max-width: 100%; width: 100%; height: auto; } .na-comic-ratio-4-3, .na-comic-ratio-16-9, .na-comic-panel--ratio { overflow: hidden; }
.na-comic-ratio-4-3 { aspect-ratio: 4 / 3; }
.na-comic-ratio-16-9 { aspect-ratio: 16 / 9; }
.na-comic-panel--ratio { aspect-ratio: var(--na-comic-panel-ratio, 4 / 3); }
.na-comic-ratio-4-3 img, .na-comic-ratio-16-9 img, .na-comic-panel--ratio img { width: 100%; height: 100%; object-fit: contain; } .na-comics-reader-nav, .na-comics-reader-transcript {
width: min(100% - 32px, var(--na-comic-reader-width, 1200px));
max-width: 1200px; margin: 32px auto;
box-sizing: border-box;
}
.na-comics-reader-nav {
border-top: 1px solid #ded9e6; padding-top: 22px;
color: #22182f; font: 500 15px/1.5 system-ui, sans-serif;
}
.na-comics-reader-nav a { color: #54109c; text-decoration: none; }
.na-comics-reader-nav a:hover { text-decoration: underline; }
.na-comics-reader-nav a:focus-visible, .na-comics-reader-transcript summary:focus-visible { outline: 3px solid #a04cff; outline-offset: 3px; }
.na-comics-reader-nav__series { display: inline-block; margin-bottom: 16px; font-weight: 700; }
.na-comics-reader-nav__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.na-comics-reader-nav__link { display: flex; flex-direction: column; gap: 4px; justify-content: center; padding: 13px 16px; min-height: 68px; border: 1px solid #dcd4e6; border-radius: 5px; }
.na-comics-reader-nav__link--disabled { opacity: .55; background: #f8f7f9; color: #4d4557; }
.na-comics-reader-nav__link--next { text-align: right; }
.na-comics-reader-nav__label { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.na-comics-reader-nav__link strong { font-size: 16px; }
.na-comics-reader-transcript { background: #f8f7fa; padding: 18px 22px; border: 1px solid #e0dbe7; border-radius: 6px; }
.na-comics-reader-transcript summary { cursor: pointer; font-weight: 700; }
.na-comics-reader-transcript__text { max-width: 75ch; margin-top: 12px; }
.na-comics-reader-transcript__text p:last-child { margin-bottom: 0; } .na-comic-reader .na-comic-zoom { cursor: zoom-in; }
.na-comic-reader .na-comic-zoom:focus-visible { outline: 3px solid #a04cff; outline-offset: 3px; }
.na-comics-lightbox { border: 0; border-radius: 6px; padding: 42px 14px 18px; width: min(96vw, 1440px); max-width: none; max-height: 94vh; background: #16101f; color: #fff; box-sizing: border-box; }
.na-comics-lightbox::backdrop { background: rgba(0, 0, 0, .88); }
.na-comics-lightbox__image { display: block; margin: 0 auto; width: auto; max-width: 100%; max-height: calc(94vh - 85px); height: auto; object-fit: contain; }
.na-comics-lightbox__close { position: absolute; top: 6px; right: 8px; border: 1px solid #888; border-radius: 4px; color: #fff; background: #292135; cursor: pointer; min-width: 38px; min-height: 34px; font: 700 22px/1 system-ui, sans-serif; }
.na-comics-lightbox__caption { margin: 12px 0 0; text-align: center; font-size: 13px; }
@media (max-width: 767px) {
.na-comic-grid-2, .na-comic-grid-3 { grid-template-columns: minmax(0, 1fr); }
.na-comic-page { padding: var(--na-comic-mobile-page-padding, 12px); padding-bottom: 34px; }
.na-comic-page::after { bottom: 7px; }
.na-comics-reader-nav__steps { grid-template-columns: 1fr; }
.na-comics-reader-nav__link--next { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
.na-comic-reader *, .na-comics-reader-nav * { scroll-behavior: auto !important; transition: none !important; }
}