:root {
    color-scheme: only light;
    --viewer-bg: #000;
    --viewer-ink: #fff;
    --viewer-line: #555;
}
body[data-product="plus"] {
    --viewer-bg: #fdfbf7;
    --viewer-ink: #2c3e2e;
    --viewer-line: #c8cebf;
}
html, body { height: 100%; }
body {
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--viewer-bg);
    color: var(--viewer-ink);
}
#control-bar {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    min-height: 56px;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px;
    background: var(--viewer-bg);
    gap: 6px;
}
#control-bar .viewer-title {
    margin-right: auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}
.icon-btn, .nav-btn {
    box-sizing: border-box;
    appearance: none;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0;
    background: transparent;
    color: var(--viewer-ink);
    opacity: 1;
    min-width: 44px;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    font-family: inherit;
}
.icon-btn:hover, .nav-btn:hover { color: var(--viewer-ink); background: color-mix(in srgb, var(--viewer-ink) 10%, transparent); transform: none; }
.icon-btn:focus-visible, .nav-btn:focus-visible, #intro-overlay:focus-visible {
    outline: 3px solid #73a859;
    outline-offset: 2px;
}
#viewport {
    min-height: 0;
    height: auto;
    padding: 8px;
    box-sizing: border-box;
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
}
#flipbook {
    flex: 0 0 auto;
    max-width: none;
    max-height: none;
    margin: auto;
}
#flipbook .page { background-size: contain; background-repeat: no-repeat; }
#viewport.zoomed {
    display: block;
    overflow: auto;
    touch-action: auto;
    overscroll-behavior: contain;
}
#viewport.zoomed #flipbook { margin: 0 auto; }
#bottom-gradient { display: none; }
#page-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    min-height: 56px;
    box-sizing: border-box;
    background: var(--viewer-bg);
}
.nav-btn { position: static; font-size: 24px; }
.nav-btn.disabled { opacity: .3 !important; }
#page-number {
    position: static;
    transform: none;
    min-width: 64px;
    text-align: center;
    color: var(--viewer-ink);
    font-variant-numeric: tabular-nums;
}
/* This text layer keeps the product name readable over the light photograph. */
.page-product-title {
    position: absolute;
    top: 14.3%;
    left: 7.4%;
    width: 85.2%;
    height: 4.7%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 1%;
    background: #efe5d1;
    color: #433520;
    font-family: 'Batang', 'Noto Serif KR', Georgia, serif;
    font-size: var(--leaflet-title-size, 28px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
@media (max-width: 360px) {
    #control-bar { gap: 2px; padding-left: 8px; padding-right: 8px; }
    #control-bar .viewer-title { font-size: 10px; }
}