* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bar-bg: #231F20;
    --accent: #954eff;
    --stage: #454545;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #000;
    color: #e0e0e0;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    /* 모바일 브라우저 주소창 영역으로 인한 스크롤 방지 */
    overscroll-behavior: none;
    user-select: none;
}

.hidden {
    display: none !important;
}

/* Viewer Screen */
#viewer-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    position: relative;
    background: #000;
}

/* Stage (페이지 표시 영역) */
.viewer-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background: var(--stage);
    touch-action: none;
}

@media (max-width: 768px) {
    .viewer-container {
        background: #000;
    }
}

.book-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.book {
    position: relative;
    cursor: grab;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.55);
    z-index: 2;
    touch-action: none;
}

#page-canvas,
#flip-canvas,
.slide-layer,
.slide-page {
    touch-action: none;
}

.book:active {
    cursor: grabbing;
}

#page-canvas {
    display: block;
}

#flip-canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    pointer-events: none;
}

/* 인접 페이지 미리보기 (좌우로 살짝 보임) */
.page-peek {
    position: absolute;
    top: 0;
    display: none;
    pointer-events: none;
    z-index: 1;
    object-fit: fill;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.45);
    opacity: 0.5;
    filter: brightness(0.7);
}

@media (max-width: 768px) {
    .page-peek {
        display: none !important;
    }
}

/* 측면 네비게이션 화살표 (가운데 book 바로 옆, 클릭 가능) */
.nav-hint {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #929292;
    z-index: 30;
    cursor: pointer;
    transition: color 0.2s, opacity 0.2s;
    background: transparent;
}

.nav-hint:hover {
    color: #e0e0e0;
}

.nav-hint svg {
    width: 88px;
    height: 88px;
    /* filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.6)); */
}

.nav-hint-left {
    left: 0;
}

.nav-hint-right {
    right: 0;
}

@media (max-width: 768px) {
    .nav-hint {
        display: none;
    }
}

/* Loading overlay */
.loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 200;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== 하단 컨트롤 바 ===== */
.page-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 16px;
    height: 52px;
    background: var(--bar-bg);
    z-index: 100;
    position: relative;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 확대(줌) 중에도 하단 바는 유지한다.
   (스테이지 아래 별도 flex 행이라 확대 콘텐츠를 가리지 않으며,
   '화면 맞춤' 버튼이 이 바에 있어 숨기면 확대를 되돌릴 수 없다.) */

/* 확대(줌) 중에는 좌우 네비게이션 화살표를 숨겨 확대 이미지를 가리지 않도록 함 */
#viewer-screen.zoomed .nav-hint {
    display: none;
}

/* 확대(줌) 중에는 단면 모드에서 트랙에 나란히 놓인 이웃(이전/다음) 페이지를 숨긴다.
   (확대로 넓어진 화면 양옆에 이웃 페이지가 드러나 보이는 것을 방지)
   visibility 로 숨겨 트랙 위치는 유지 → 확대 해제 시 그대로 복원된다. */
#viewer-screen.zoomed .slide-page:not(.center) {
    visibility: hidden;
}

/* 현재 위치(진행도)에 따라 채워지는 상단 바 — 탭/드래그로 페이지 이동(스크러버) */
.strip-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #6C6A6B;
    overflow: hidden;
    cursor: pointer;
    touch-action: none;   /* 가로 드래그를 스크롤/제스처로 넘기지 않음 */
}

.strip-progress-fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 0.35s ease;
}

/* 스크러버 드래그 중 표시되는 페이지 번호 말풍선 */
.strip-scrub-bubble {
    position: absolute;
    bottom: 100%;
    margin-bottom: 10px;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 9px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 200;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.strip-scrub-bubble.show { opacity: 1; }

.ctrl-zone {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ctrl-zone.left {
    flex: 1;
    justify-content: flex-start;
}

.ctrl-zone.center {
    flex: 0 0 auto;
    justify-content: center;
}

.ctrl-zone.right {
    flex: 1;
    justify-content: flex-end;
}

.strip-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: 32px;
    padding: 0 4px;
    gap: 5px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: #cfcfcf;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    font-size: 13px;
}

.strip-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.strip-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.strip-btn.active {
    color: var(--accent);
}

.strip-btn .btn-label {
    font-size: 13px;
}

.ctrl-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.18);
    margin: 0 3px;
    flex-shrink: 0;
}

/* 페이지 표시기 */
.page-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #8a8a8a;
    margin-left: 6px;
}

#page-input {
    display: flex;
    align-items: center;
    width: 25px;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    color: #cfcfcf;
    font-size: 14px;
    /* font-weight: 600; */
    -moz-appearance: textfield;
    /* padding: 2px 0; */
}

#page-input:focus {
    outline: none;
    border-bottom-color: var(--accent);
}

#page-input::-webkit-outer-spin-button,
#page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

@media (max-width: 768px) {
    .slide-layer {
        background: var(--bar-bg);
    }

    /* 하단 다크 바를 레이아웃 흐름에 포함시켜 높이만큼 공간을 차지하게 함
       → viewer-container = (전체 높이 − 바 높이) 가 되어 slide-page 가
       바에 가리지 않고 그 위 영역에 전부 보인다. 버튼은 숨김. */
    .page-strip {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        height: 30px;
        padding: 0;
        background: var(--bar-bg);
    }

    /* 진행도 바: 다크 바 안에서 세로 중앙 + 좌우 여백 */
    .strip-progress {
        top: 50%;
        bottom: auto;
        left: 16px;
        right: 16px;
        transform: translateY(-50%);
        height: 5px;
        border-radius: 3px;
        overflow: visible;   /* 아래 확대된 터치 영역이 잘리지 않도록 */
    }
    .strip-progress-fill { border-radius: 3px; }

    /* 얇은 바를 손가락으로 쉽게 잡도록 위아래로 투명 터치 영역 확장 */
    .strip-progress::after {
        content: "";
        position: absolute;
        left: -10px;
        right: -10px;
        top: -15px;
        bottom: -15px;
    }

    /* 기본: 버튼 영역 전부 숨김 (strip-progress만 남김) */
    .page-strip .ctrl-zone {
        display: none;
    }

    .strip-btn .btn-label {
        display: none;
    }

    .strip-btn {
        padding: 0 4px;
        min-width: 32px;
    }

    .hide-mobile {
        display: none !important;
    }

    /* 페이지를 탭하면 툴바가 올라옴 (잠시 뒤 자동으로 다시 접힘) */
    .page-strip.bar-open {
        height: 50px;
        padding: 0 8px;
        background: var(--bar-bg);
    }

    .page-strip.bar-open .ctrl-zone {
        display: flex;
    }

    .page-strip.bar-open .ctrl-zone.left {
        flex: 0 0 auto;
    }

    .page-strip.bar-open .ctrl-zone.right {
        flex: 1;
    }

    .page-strip.bar-open .strip-progress {
        top: 0;
        bottom: auto;
    }

    /* 툴바가 열린 상태에서는 확대된 터치 영역이 버튼 위를 덮지 않도록 해제
       (열려 있을 땐 버튼으로 조작하므로 얇은 진행바 자체만 스크러버로 남긴다) */
    .page-strip.bar-open .strip-progress::after { display: none; }
}

/* ===== Panels ===== */
.strip-panel {
    position: absolute;
    background: #2a2a2c;
    border: 1px solid #3a3a3c;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 150;
    color: #e0e0e0;
}

.strip-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #3a3a3c;
    font-size: 14px;
    font-weight: 600;
}

.strip-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
}

.strip-panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.strip-panel-body {
    padding: 12px 16px;
    max-height: 56vh;
    overflow-y: auto;
}

.strip-panel-body::-webkit-scrollbar {
    width: 4px;
}

.strip-panel-body::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 2px;
}

/* 전체보기 패널 (목차 + 썸네일) */
.toc-panel {
    left: 8px;
    bottom: 60px;
    width: 340px;
    max-width: calc(100vw - 16px);
}

.toc-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9a9a9a;
    margin: 4px 0 6px;
}

.toc-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    transition: background 0.15s;
    gap: 8px;
}

.toc-item:hover {
    background: rgba(0, 188, 212, 0.12);
}

.toc-item-page {
    color: var(--accent);
    font-size: 12px;
    flex-shrink: 0;
    min-width: 28px;
}

.toc-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thumb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.thumb-item {
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: #1c1c1e;
    aspect-ratio: 3 / 4;
    transition: border-color 0.15s, transform 0.15s;
}

.thumb-item:hover {
    transform: translateY(-2px);
}

.thumb-item.current {
    border-color: var(--accent);
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 썸네일 위 첫 번째 배너 슬라이드 (본문과 동일하게 비율 유지) */
.thumb-item .thumb-banner {
    position: absolute;
    object-fit: contain;
    z-index: 1;
}

.thumb-item .thumb-no {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 10px;
    padding: 1px 5px;
    border-top-left-radius: 4px;
    z-index: 2;
}

/* Bookmark Panel */
.bookmark-panel {
    left: 8px;
    bottom: 60px;
    width: 260px;
    max-width: calc(100vw - 16px);
}

.bookmark-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #3a3a3c;
    margin-bottom: 8px;
}

.bookmark-toggle-btn {
    padding: 6px 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s;
}

.bookmark-toggle-btn:hover {
    filter: brightness(1.08);
}

.bookmark-toggle-btn.remove {
    background: #e74c3c;
    color: #fff;
}

.bookmark-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    transition: background 0.15s;
}

.bookmark-item:hover {
    background: rgba(0, 188, 212, 0.12);
}

.bookmark-item.current {
    background: rgba(0, 188, 212, 0.18);
    color: var(--accent);
}

.bookmark-delete {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bookmark-delete:hover {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

/* Auto-flip Panel */
.autoflip-panel {
    left: 50%;
    transform: translateX(-50%);
    bottom: 60px;
    width: 280px;
    max-width: calc(100vw - 16px);
}

.autoflip-speed {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.autoflip-speed label {
    font-size: 13px;
    color: #aaa;
    flex-shrink: 0;
}

.autoflip-speed input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    height: 4px;
    background: #444;
    border-radius: 2px;
    outline: none;
}

.autoflip-speed input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
}

.autoflip-speed-val {
    font-size: 13px;
    color: var(--accent);
    min-width: 40px;
    text-align: right;
    font-weight: 600;
}

.autoflip-controls {
    display: flex;
    gap: 8px;
}

.autoflip-btn {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.autoflip-btn.primary {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

.autoflip-btn.secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #ccc;
}

.autoflip-btn.danger {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

/* Search Panel */
.search-panel {
    right: 8px;
    bottom: 60px;
    width: 320px;
    max-width: calc(100vw - 16px);
}

.search-input-wrap {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.search-input {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    outline: none;
}

.search-input:focus {
    border-color: var(--accent);
}

.search-nav {
    display: flex;
    gap: 4px;
}

.search-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #bbb;
    cursor: pointer;
    border-radius: 6px;
}

.search-nav-btn:hover {
    background: rgba(0, 188, 212, 0.15);
    color: #fff;
}

.search-status {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}

.search-result {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    transition: background 0.15s;
    border-left: 3px solid transparent;
    margin-bottom: 2px;
}

.search-result:hover {
    background: rgba(0, 188, 212, 0.1);
}

.search-result.active {
    background: rgba(0, 188, 212, 0.15);
    border-left-color: var(--accent);
}

.search-result-page {
    font-size: 11px;
    color: var(--accent);
    margin-bottom: 2px;
}

.search-result-text {
    color: #ccc;
    line-height: 1.4;
}

.search-result-text mark {
    background: rgba(0, 188, 212, 0.3);
    color: #fff;
    border-radius: 2px;
    padding: 0 2px;
}

.strip-empty {
    text-align: center;
    padding: 20px 16px;
    color: #777;
    font-size: 13px;
}

/* Share Panel */
.share-panel {
    right: 8px;
    bottom: 60px;
    width: 300px;
    max-width: calc(100vw - 16px);
}

.share-link-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.share-link-input {
    flex: 1;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    color: #ddd;
    font-size: 12px;
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-copy-btn {
    padding: 8px 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.share-qr {
    display: flex;
    justify-content: center;
    padding: 14px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 14px;
}

.share-qr canvas,
.share-qr img {
    display: block;
}

.share-sns {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.share-sns-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 11px;
    flex: 1;
    padding: 4px;
    border-radius: 8px;
    transition: background 0.15s;
}

.share-sns-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.share-sns-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
}

.share-sns-icon.kakao {
    background: #fee500;
    color: #3c1e1e;
}

.share-sns-icon.x {
    background: #000;
    border: 1px solid #333;
}

.share-sns-icon.facebook {
    background: #1877f2;
}

.share-sns-icon.native {
    background: #444;
}

.share-toast {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #04222a;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 300;
    animation: toastFade 2.2s forwards;
}

@keyframes toastFade {

    0%,
    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ===== Slide (필름스트립) 전환 ===== */
.slide-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 3;
    display: none;
}

.slide-track {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.slide-page {
    position: absolute;
}

.slide-page img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
    transition: opacity 0.42s ease, filter 0.42s ease;
}

.slide-page:not(.center) img {
    opacity: 0.55;
    filter: brightness(0.78);
}

.slide-page:not(.center) .banner-slider {
    pointer-events: none;
}

/* ===== 페이지 버튼 (클릭 오버레이) ===== */
.page-btn {
    position: absolute;
    z-index: 6;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.page-btn img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.slide-page:not(.center) .page-btn {
    pointer-events: none;
}

/* ===== 스와이프 안내 가이드 =====
   가이드는 배너 영역 안에 놓이지만, 크기는 배너가 아니라 화면(뷰포트) 크기에 비례시킨다.
   기준값(font-size)만 뷰포트 단위(vmin)로 잡고 나머지 치수는 모두 em 으로 묶어 함께 스케일.
   → 배너 영역이 작든 크든 상관없이, 어느 해상도에서도 화면 대비 일정한 크기로 보인다.
   clamp() 로 상·하한을 두어 아주 작은 화면에서도 너무 작아지지 않고, 초고해상도에서도
   과하게 커지지 않게 한다. (기준 15px 환산) */
.swipe-guide {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    /* 모든 하위 치수의 기준. 화면 대비 비례하되 12~18px 범위로 제한 */
    font-size: clamp(12px, 2vmin, 18px);
    border-radius: 0.933em;
    padding: 0.867em 1.333em;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.20);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 7;
}

.swipe-guide.show {
    opacity: 0.96;
}

.swipe-guide svg {
    width: 4.267em;
    /* 시안 64px / 15px */
    height: auto;
    /* viewBox 비율 유지 */
}

.swipe-guide .sg-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    background: #5100CA;
    border: 0.2em solid #C8BFE7;
    /* margin 대신 transform 으로 중앙 정렬 → 크기가 가변이어도 항상 정확히 가운데 */
    animation: sgNudge 1.5s ease-in-out infinite;
}

@keyframes sgNudge {

    0%,
    100% {
        transform: translate(calc(-50% - 0.467em), -50%);
    }

    50% {
        transform: translate(calc(-50% + 0.467em), -50%);
    }
}

/* ===== 모바일 진입 안내 가이드 ===== */
.entry-guide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 20, 26, 0.62);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 60;
}

.entry-guide.show {
    opacity: 1;
}

.entry-guide .eg-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transform: translateY(-4%);
}

.entry-guide .eg-icon {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
}

.entry-guide .eg-hand {
    animation: egSwipe 1.6s ease-in-out infinite;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.entry-guide .eg-arrow-l {
    animation: egArrowL 1.6s ease-in-out infinite;
}

.entry-guide .eg-arrow-r {
    animation: egArrowR 1.6s ease-in-out infinite;
}

.entry-guide .eg-text {
    margin: 0;
    color: #fff;
    text-align: center;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

@keyframes egSwipe {

    0%,
    100% {
        transform: translateX(-12px);
    }

    50% {
        transform: translateX(12px);
    }
}

@keyframes egArrowL {

    0%,
    100% {
        opacity: 0.9;
    }

    50% {
        opacity: 0.3;
    }
}

@keyframes egArrowR {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.9;
    }
}

/* ===== 데스크톱 이용 안내 모달 (최초 진입 시) — 토스풍, 보라 계열 ===== */
.nav-guide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(55 55 55 / 42%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 210;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.nav-guide.show {
    opacity: 1;
}

.nav-guide-card {
    margin: 0 1.5rem;
    position: relative;
    width: min(860px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #f7f5fc;
    border-radius: 1.25rem;
    /* box-shadow: 0 30px 80px rgba(58, 37, 122, 0.3); */
    color: #2b2150;
    padding: 2rem;
    text-align: center;
    transform: translateY(16px) scale(0.98);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.32s ease;
}

.nav-guide.show .nav-guide-card {
    transform: none;
    opacity: 1;
}

.ng-close {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    color: #dad2ef;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.ng-close:hover {
    color: #5100CA;
}

.ng-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #eee6ff;
    color: #5100CA;
    font-size: 1rem;
    font-family: "PuradakGentleGothic";
    font-weight: 300;
    letter-spacing: 0.13em;
    border-radius: 999px;
    margin-bottom: 16px;
}

.ng-title {
    font-family: 'PuradakGentleGothic';
    font-size: 1.75rem;
    font-weight: 300;
    color: #333;
    line-height: 130%;
    letter-spacing: -0.07rem;
    margin: 0 0 0.5rem 0;
}

.ng-sub {
    font-family: 'PuradakGentleGothic';
    font-size: 1.25rem;
    color: #333;
    margin: 0 0 1.5rem 0;
    line-height: 130%;
    letter-spacing: -0.05rem;
}

.ng-cards {
    display: flex;
    gap: 18px;
}

.ng-item {
    flex: 1;
    border-radius: 0.5rem;
    background: #FFF;
    box-shadow: 0 4px 4px 0 #E7E1F5;
    border-radius: 22px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ng-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(90, 60, 180, 0.13);
}

.ng-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
}

.ng-item-title {
    font-family: 'PuradakGentleGothic';
    font-size: 1.25rem;
    font-weight: 300;
    color: #5100CA;
    line-height: 130%;
    letter-spacing: -0.07rem;
    margin: 6px 0 10px;
}

.ng-item-sub {
    color: #333;
    text-align: center;
    font-family: 'PretendardRegular';
    font-size: 1.125rem;
    line-height: 130%;
    letter-spacing: -0.045rem;
    margin: 0;
}

@media (max-width: 720px) {
    .nav-guide-card {
        padding: 36px 20px 30px;
    }

    .ng-cards {
        flex-direction: column;
    }

    .ng-item-icon {
        height: 108px;
    }
}

/* ===== Banner Slider ===== */
.banner-slider {
    position: absolute;
    overflow: hidden;
    z-index: 5;
    cursor: grab;
    touch-action: none;
    border-radius: 14px;
    /* 도트 크기/간격/위치를 배너 크기에 비례시키기 위한 쿼리 컨테이너 */
    container-type: size;
}

.banner-slider:active {
    cursor: grabbing;
}

.banner-track {
    display: flex;
    width: 100%;
    height: 100%;
    will-change: transform;
}

.banner-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.banner-slide img {
    width: 100%;
    height: 100%;
    /* 배너 슬라이드는 rect 를 이미지 비율에 맞춰 만들지만, 혹시 비율이 어긋나도
       강제로 늘려 찌그러뜨리지 않고 원래 비율을 유지한다(투명 여백은 뒤 페이지가 비침). */
    object-fit: contain;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

/* 배너 하단 인디케이터(도트)
   해상도가 바뀌어도 시안(1120x1310 기준)과 동일한 비율로 보이도록
   크기·간격·위치를 모두 배너 크기 기준(cqw/cqh)으로 지정한다.
   - 지름 20px  = 1.786cqw
   - 간격 32px  = 2.857cqw (도트 사이 간격)
   - 하단 49px  = 3.74cqh */
.banner-dots {
    position: absolute;
    left: 50%;
    bottom: clamp(9px, 3.74cqh, 26px);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    /* 배너 크기에 비례(시안 w2.png 기준) → 작은 화면에서 상대적으로 커지지 않음 */
    gap: 9px;
    /* 폴백 */
    gap: clamp(7px, 2.857cqw, 22px);
    z-index: 6;
    pointer-events: auto;
}

.banner-dot {
    flex: 0 0 auto;
    /* 배너 폭의 1.786%(시안 w2.png 비율)로 비례. 8~16px 범위로 제한해
       작은 화면에서도 과하게 크지 않고, 큰 화면에서도 과하게 크지 않게 유지 */
    width: 10px;
    /* 폴백 */
    height: 10px;
    width: clamp(8px, 1.786cqw, 16px);
    height: clamp(8px, 1.786cqw, 16px);
    aspect-ratio: 1 / 1;
    color: #DAD2EF;
    /* 원을 방사형 그라디언트(closest-side)로 그린다 → 배너가 소수점 위치에
       놓여도 가장자리가 중심 기준 방사 대칭으로 처리되어 항상 동그랗게 보인다.
       (border-radius 사각형 클리핑은 소수점 위치에서 축별로 흐려져 찌그러짐) */
    background: radial-gradient(circle closest-side, currentColor 90%, transparent 100%);
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.2s ease;
}

.banner-dot.active {
    color: #5100CA;
}

/* 비활성(가운데가 아닌) 페이지에서는 도트 클릭 방지 */
.slide-page:not(.center) .banner-dots {
    pointer-events: none;
}