/* ===== Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--h8-font-family);
    background: #fff;
    color: var(--h8-color-text);
    line-height: 1.6;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 769px) {
    html {
        scrollbar-gutter: stable;
    }
    body {
        max-height: none;
        overflow: auto;
    }
}


/* ===== Header ===== */
.header {
    position: sticky;
    top: 0;
    height: var(--h8-header-height);
    background: var(--h8-color-bg-card);
    border-bottom: 1px solid var(--h8-color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--h8-spacing-lg);
    z-index: 100;
    touch-action: manipulation;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: visible;
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--h8-spacing-lg);
    flex: 1;
}

/* Mobile Menu Button (PC에서 숨김) */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    border-radius: var(--h8-radius-sm);
}

.mobile-menu-btn .menu-line {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--h8-color-text);
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 열림 → X 모양 */
.mobile-menu-btn.active .menu-line:first-child {
    transform: translateY(4px) rotate(45deg);
}

.mobile-menu-btn.active .menu-line:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

.mobile-menu-btn:active {
    background: var(--h8-color-bg-hover);
}

.logo {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.logo img {
    height: 24px;
    width: auto;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--h8-spacing-xs);
    flex: 1;
}

/* My Page Button */
.my-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    color: var(--h8-color-text-muted);
    transition: var(--h8-transition-fast);
    padding: 0;
}
.my-page-btn:hover { color: var(--h8-color-primary); }
.my-page-btn svg { width: 20px; height: 20px; }
.my-page-btn.logged-in { color: var(--h8-color-primary); }
.my-page-btn.logged-in::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #4a7c59;
    border-radius: 50%;
    border: 2px solid var(--h8-color-bg);
}
.my-page-btn { position: relative; }

/* Term Button */
/* TOC 용어 토글 */
.toc-term-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--h8-color-bg-card);
    border-top: 1px solid var(--h8-color-border);
    -webkit-tap-highlight-color: transparent;
}
.toc-term-toggle .lang-switcher {
    margin-right: 0;
}

.toc-term-switch {
    display: flex;
    background: var(--h8-color-bg-hover);
    border-radius: var(--h8-radius-full);
    padding: 2px;
    gap: 2px;
}

.toc-term-opt {
    padding: 5px 14px;
    font-size: 12px;
    border-radius: var(--h8-radius-full);
    cursor: pointer;
    color: var(--h8-color-text-muted);
    transition: all 0.2s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.toc-term-opt.active {
    background: var(--h8-color-bg-card);
    color: var(--h8-color-text);
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 모바일 검색 열기 버튼 (PC에서 숨김) — my-page-btn 스타일 통일 */
.header-search-open {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    color: var(--h8-color-text-muted);
    transition: var(--h8-transition-fast);
    padding: 0;
    flex-shrink: 0;
}
.header-search-open:hover { color: var(--h8-color-primary); }
.header-search-open svg { width: 20px; height: 20px; }

/* 모바일 검색 뒤로가기 (PC에서 숨김) */
.search-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--h8-color-text);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 50%;
}
.search-back:active { background: var(--h8-color-bg-hover); }

/* Header Search */
.header-search {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.header-search input {
    width: 100%;
    padding: 8px 32px 8px 36px;
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius-full);
    font-size: var(--h8-font-size-sm);
    font-family: var(--h8-font-family);
    background: var(--h8-color-bg);
    transition: var(--h8-transition-fast);
}

.header-search input:focus {
    outline: none;
    border-color: var(--h8-color-primary);
    box-shadow: 0 0 0 3px var(--h8-color-primary-light);
    background: var(--h8-color-bg-card);
}

.header-search input::placeholder {
    color: var(--h8-color-text-muted);
}

.header-search .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--h8-color-text-muted);
    pointer-events: none;
}

.header-search .search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: none;
    background: var(--h8-color-text-muted);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: var(--h8-transition-fast);
}

.header-search input:not(:placeholder-shown) + .search-icon + .search-clear,
.header-search .search-clear.visible {
    opacity: 1;
}

/* Search Suggest Dropdown */
.search-suggest {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--h8-color-bg-card);
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius);
    box-shadow: var(--h8-shadow-md);
    max-height: 240px;
    overflow-y: auto;
    z-index: 200;
}

.search-suggest.active {
    display: block;
}

.search-suggest li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--h8-font-size-sm);
    color: var(--h8-color-text);
    transition: background var(--h8-transition-fast);
}

.search-suggest li:hover,
.search-suggest li.selected {
    background: var(--h8-color-bg-hover);
}

.search-suggest li .suggest-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-suggest li .suggest-name mark {
    background: rgba(187, 93, 93, 0.15);
    color: var(--h8-color-primary);
    border-radius: 2px;
    padding: 0 1px;
}

.search-suggest li .suggest-latin {
    font-size: var(--h8-font-size-xs);
    color: var(--h8-color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.search-suggest li .suggest-hint {
    flex-shrink: 1;
    font-size: var(--h8-font-size-xs);
    color: var(--h8-color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.search-suggest li .suggest-hint::before {
    content: '= ';
}

.search-suggest li .suggest-hint mark {
    background: rgba(187, 93, 93, 0.12);
    color: var(--h8-color-primary);
    border-radius: 2px;
    padding: 0 1px;
}

.search-suggest li .suggest-type {
    flex-shrink: 0;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--h8-radius-full);
    background: var(--h8-color-primary-light);
    color: var(--h8-color-primary);
    font-weight: 600;
}

.search-suggest li[data-type="video"] .suggest-type {
    background: var(--h8-color-accent-light);
    color: var(--h8-color-accent);
}

/* Search Result Bar */
.search-result-bar {
    padding: 8px 16px;
    background: var(--h8-color-bg-hover);
    border-radius: var(--h8-radius);
    font-size: var(--h8-font-size-sm);
    color: var(--h8-color-text-light);
    margin-bottom: 4px;
}

.search-result-bar strong {
    color: var(--h8-color-primary);
    font-weight: 600;
}

/* 비구매자 학습하기 — 「프리뷰만 보기」 필터 바 */
.preview-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 2px 2px 6px;
}
.preview-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1.5px solid var(--h8-color-border);
    border-radius: 999px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text-light);
    font-size: var(--h8-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.preview-filter-chip:hover {
    border-color: var(--h8-color-primary);
}
.preview-filter-chip.on {
    background: var(--h8-color-primary);
    border-color: var(--h8-color-primary);
    color: #fff;
}
.preview-filter-chip .pf-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1.5px solid currentColor;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1;
}
.preview-filter-chip .pf-count {
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.25);
    font-size: 12px;
}
.preview-filter-chip:not(.on) .pf-count {
    background: var(--h8-color-bg-hover);
}
.preview-filter-bar .pf-hint {
    font-size: var(--h8-font-size-sm);
    color: var(--h8-color-text-light);
}

/* 이미지형 본문 카드 썸네일 자리 예약 — 썸네일은 전부 정사각(thumbV·합성 DOM·라이브 렌더 모두 1:1).
   ⚠ 예약 없이 두면 하이드레이션 전 래퍼(overflow:hidden)가 높이 0이라 IntersectionObserver가
   빈 클립 영역으로 교차 판정 → 하이드레이션이 영영 안 도는 교착(실제 사고남 — 잠금 카드가
   전부 높이 0으로 사라져 그리드가 뻥뻥 뚫려 보임). 자리를 먼저 잡으면 IO도 돌고 레이아웃도 안 튄다. */
.article-card-mix .article-thumb-wrap {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.article-card-mix .article-thumb-wrap .article-book-thumb {
    height: 100%;
}

/* 🔒 본문 잠금 카드 — admin 무료노출(isFree) 미체크 + 비구매자 (영상 잠금 카드와 동일 문법) */
.article-card-mix.article-locked {
    position: relative;
    cursor: pointer;
}
.article-card-mix.article-locked .article-book-thumb,
.article-card-mix.article-locked .article-card-mix-body {
    filter: blur(7px);
    transform: scale(1.02);   /* 블러 가장자리 투명 번짐을 카드 밖으로 밀어냄 (부모 overflow:hidden이 자름) */
    pointer-events: none;
    user-select: none;
}
.article-card-mix.article-locked .article-thumb-wrap {
    overflow: hidden;
}

/* Search Highlight */
.video-title mark,
.dict-card-latin mark {
    background: rgba(201, 165, 93, 0.3);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* Search Empty Hint */
.search-empty-hint {
    font-size: var(--h8-font-size-xs);
    color: var(--h8-color-text-muted);
    margin-top: 4px;
}

/* ===== Memo Filter Button ===== */
/* 메모 기능 숨김 (필터/카드 버튼만) */
.memo-filter-btn,
.memo-btn {
    display: none !important;
}

.memo-filter-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: transparent;
    border: none;
    color: var(--h8-color-text-light);
    cursor: pointer;
    transition: var(--h8-transition-fast);
}

.memo-filter-btn:hover {
    color: var(--h8-color-warning);
}

.memo-filter-btn.active {
    color: var(--h8-color-warning);
}

.memo-filter-btn svg {
    width: 20px;
    height: 20px;
}

.memo-filter-btn .indicator-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--h8-color-warning);
    border-radius: 50%;
    display: none;
}

.memo-filter-btn.has-items .indicator-dot {
    display: block;
}

/* ===== Language Switcher ===== */
.lang-switcher {
    padding: 4px 6px;
    background: transparent;
    border: 1px solid var(--h8-color-border);
    border-radius: 4px;
    color: var(--h8-color-text-light);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--h8-transition-fast);
    margin-right: 4px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 18px;
}

.lang-switcher:hover,
.lang-switcher:focus {
    color: var(--h8-color-primary);
    border-color: var(--h8-color-primary);
    outline: none;
}

/* ===== Saved Button ===== */
.saved-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: transparent;
    border: none;
    color: var(--h8-color-text-light);
    cursor: pointer;
    transition: var(--h8-transition-fast);
}

.saved-btn:hover {
    color: var(--h8-color-primary);
}

.saved-btn.active {
    color: var(--h8-color-primary);
}

.saved-btn svg {
    width: 20px;
    height: 20px;
}

.saved-btn .indicator-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--h8-color-primary);
    border-radius: 50%;
    display: none;
}

.saved-btn.has-items .indicator-dot {
    display: block;
}

/* Filter Chips */
.filter-chips {
    display: flex;
    gap: var(--h8-spacing-xs);
    flex-wrap: wrap;
}

.chip {
    padding: 4px 10px;
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius-full);
    background: var(--h8-color-bg-card);
    color: var(--h8-color-text-light);
    font-size: var(--h8-font-size-xs);
    font-family: var(--h8-font-family);
    cursor: pointer;
    transition: var(--h8-transition-fast);
}

.chip:hover {
    border-color: var(--h8-color-primary);
    color: var(--h8-color-primary);
}

.chip.active {
    background: var(--h8-color-primary);
    border-color: var(--h8-color-primary);
    color: white;
}

/* Interactive Body Filter */
.body-filter-btn {
    padding: 6px 12px;
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius);
    background: var(--h8-color-bg-card);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--h8-transition-fast);
    flex-shrink: 0;
    font-family: var(--h8-font-family);
}

.body-filter-btn:hover {
    border-color: var(--h8-color-primary);
    background: var(--h8-color-primary-light);
}

.body-filter-btn.active {
    border-color: var(--h8-color-primary);
    background: var(--h8-color-primary-light);
}

.body-filter-btn svg {
    width: 18px;
    height: 18px;
    color: var(--h8-color-text-light);
    flex-shrink: 0;
}

.body-filter-btn:hover svg,
.body-filter-btn.active svg {
    color: var(--h8-color-primary);
}

.body-filter-label {
    font-size: var(--h8-font-size-xs);
    color: var(--h8-color-text);
    font-weight: 500;
}

.body-filter-btn:hover .body-filter-label,
.body-filter-btn.active .body-filter-label {
    color: var(--h8-color-primary);
}

/* Body Filter Popup */
.body-filter-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 400;
    opacity: 0;
    transition: opacity var(--h8-transition-normal);
}

.body-filter-popup-overlay.active {
    display: block;
    opacity: 1;
}

.body-filter-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: var(--h8-color-bg-card);
    border-radius: var(--h8-radius-lg);
    z-index: 401;
    overflow: hidden;
    opacity: 0;
    transition: all var(--h8-transition-normal);
    box-shadow: var(--h8-shadow-lg);
    max-width: 90vw;
    max-height: 90vh;
}

.body-filter-popup.active {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.body-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--h8-spacing-md) var(--h8-spacing-lg);
    border-bottom: 1px solid var(--h8-color-border);
}

.body-filter-header h3 {
    font-size: var(--h8-font-size-base);
    font-weight: 600;
    color: var(--h8-color-text);
}

.body-filter-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--h8-color-bg);
    border-radius: 50%;
    font-size: 20px;
    color: var(--h8-color-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--h8-transition-fast);
}

.body-filter-close:hover {
    background: var(--h8-color-bg-hover);
    color: var(--h8-color-text);
}

.body-filter-content {
    position: relative;
    padding: var(--h8-spacing-md);
    display: flex;
    justify-content: center;
}

.body-filter-image {
    position: relative;
    max-height: 70vh;
    width: auto;
}

.body-filter-image img {
    max-height: 70vh;
    width: auto;
    display: block;
}

/* Body Part Markers */
.body-marker {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--h8-color-primary);
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--h8-transition-fast);
    transform: translate(-50%, -50%);
}

.body-marker:hover {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.body-marker.active {
    background: var(--h8-color-primary-hover);
    transform: translate(-50%, -50%) scale(1.1);
}

.body-marker span {
    color: white;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
}

/* Marker positions */
.body-marker[data-part="head"] {
    top: 5%;
    left: 45%;
}

.body-marker[data-part="trunk"] {
    top: 28%;
    left: 50%;
}

.body-marker[data-part="upper"] {
    top: 22%;
    left: 78%;
}

.body-marker[data-part="lower"] {
    top: 60%;
    left: 42%;
}

.body-marker[data-part="all"] {
    top: 95%;
    left: 50%;
    background: var(--h8-color-text-muted);
}

.body-marker[data-part="all"]:hover,
.body-marker[data-part="all"].active {
    background: var(--h8-color-text);
}

@media (max-width: 768px) {
    .body-marker {
        width: 40px;
        height: 40px;
    }

    .body-marker span {
        font-size: 9px;
    }

    .body-filter-image {
        max-height: 60vh;
    }

    .body-filter-image img {
        max-height: 60vh;
    }
}

/* Hub Result */
.hub-result {
    display: flex;
    align-items: center;
    gap: var(--h8-spacing-sm);
    font-size: var(--h8-font-size-xs);
    color: var(--h8-color-text-muted);
    margin-left: auto;
    flex-shrink: 0;
}

.hub-result span {
    font-weight: 600;
    color: var(--h8-color-primary);
}

.filter-reset {
    padding: 3px 8px;
    border: 1px dashed var(--h8-color-border);
    border-radius: var(--h8-radius-sm);
    background: transparent;
    color: var(--h8-color-text-muted);
    font-size: 10px;
    font-family: var(--h8-font-family);
    cursor: pointer;
    transition: var(--h8-transition-fast);
}

.filter-reset:hover {
    border-color: var(--h8-color-primary);
    color: var(--h8-color-primary);
    background: var(--h8-color-primary-light);
}

/* ===== Videos Container ===== */
.videos-container {
    display: flex;
}

/* 영상 목차 사이드바 (master-panel과 동일한 구조) */
.video-toc-panel {
    width: var(--h8-master-width);
    min-width: var(--h8-master-width);
    background: var(--h8-color-bg-card);
    border-right: 1px solid var(--h8-color-border);
    position: sticky;
    top: calc(var(--h8-header-height) + var(--h8-tab-bar-height));
    height: calc(100vh - var(--h8-header-height) - var(--h8-tab-bar-height));
    height: calc(100dvh - var(--h8-header-height) - var(--h8-tab-bar-height));
    overflow: hidden;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
}

.toc-scroll-content {
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    padding: 8px 4px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* 영상 목차 리스트 (muscle-list와 동일한 구조) */
.video-toc-list {
    user-select: none;
    list-style: none;
    padding: 0;
    padding-left: 10px;
}

.toc-video-folder .video-toc-list,
.video-toc-panel .dict-root-folder .video-toc-list {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
    padding-left: 10px;
}
.toc-video-folder.expanded .video-toc-list,
.video-toc-panel .dict-root-folder.expanded .video-toc-list {
    max-height: none;
    opacity: 1;
}
.toc-video-folder.expanded > .toc-section-header .toc-section-chevron {
    transform: rotate(180deg);
}

/* 영상 목차 폴더 항목 */


/* 영상 콘텐츠 패널 */
.video-content-panel {
    flex: 1;
    padding: var(--h8-spacing-lg);
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--h8-spacing-lg);
    width: 100%;
    align-items: start;
    grid-auto-flow: dense;  /* 팁 등 가로 바 앞 빈칸을 뒤따르는 아이템이 자동 채움 */
}

.video-card {
    background: var(--h8-color-bg-card);
    border-radius: var(--h8-radius-lg);
    overflow: hidden;
    box-shadow: var(--h8-shadow-sm);
    cursor: pointer;
    transition: transform var(--h8-transition-fast), box-shadow var(--h8-transition-fast);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 페이월 (비구매 스크롤 제한) */
.paywall-gate {
    position: relative;
    margin-top: -500px;
    padding-top: 0;
    z-index: 2;
    pointer-events: none;
}
.paywall-fade {
    height: 500px;
    background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.85) 60%, var(--h8-color-bg) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    mask-image: linear-gradient(to bottom, transparent 0%, black 40%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%);
}
.paywall-cta {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 20px 20px 120px;
    color: var(--h8-color-text);
}
.paywall-cta svg {
    color: var(--h8-color-text-muted);
    margin-bottom: 16px;
}
.paywall-cta h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
}
.paywall-cta p {
    font-size: 14px;
    color: var(--h8-color-text-muted);
    margin: 0 0 24px;
}
.paywall-cta {
    pointer-events: auto;
}
.paywall-btn {
    background: var(--h8-color-primary);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.paywall-btn:hover {
    opacity: 0.85;
}

/* 카드 로딩 스켈레톤 */
.card-loading {
    position: relative;
}
.card-loading .video-thumbnail,
.card-loading .video-info {
    opacity: 0;
}
.card-skeleton {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 3;
    border-radius: inherit;
    background: linear-gradient(90deg, #f5f3f2 25%, #faf9f8 50%, #f5f3f2 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.card-loaded .video-thumbnail,
.card-loaded .video-info {
    animation: cardFadeIn 0.3s ease-out;
}
@keyframes cardFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 목차 점프 시 헤더 높이 고려 */
[id^="video-section-"] {
    scroll-margin-top: calc(var(--h8-header-height) + var(--h8-tab-bar-height) + 10px);
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--h8-shadow-md);
}

@media (hover: none) {
    .video-card:hover {
        transform: none;
        box-shadow: var(--h8-shadow-sm);
    }
}

.video-thumbnail {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--h8-color-bg);
    overflow: hidden;
    flex-shrink: 0;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-thumbnail-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--h8-color-primary-light) 0%, var(--h8-color-bg) 100%);
}

.video-thumbnail-placeholder svg {
    width: 48px;
    height: 48px;
    color: var(--h8-color-primary);
    opacity: 0.5;
}

.video-play-btn {
    display: none;
}

.video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: var(--h8-font-size-xs);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Video Save Button */
.video-save-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--h8-transition-fast);
    opacity: 0;
    z-index: 2;
}

@media (hover: hover) {
    .video-card:hover .video-save-btn {
        opacity: 1;
    }

    .video-save-btn:hover {
        background: white;
        transform: scale(1.1);
    }
}

.video-save-btn svg {
    width: 16px;
    height: 16px;
    color: var(--h8-color-text-muted);
}

.video-save-btn.saved {
    opacity: 1;
    background: var(--h8-color-primary);
}

.video-save-btn.saved svg {
    color: white;
    fill: white;
}

.video-info {
    padding: var(--h8-spacing-md);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

/* 콘텐츠 그리드 = 컨텐츠만 노출 — 카드 하단 번호(#id)·제목·배지 정보줄 숨김 → 정사각 썸네일만 남음.
   메인 그리드(#videosGrid)에만 적용 (내 폴더 등 다른 그리드는 정보줄 유지) */
#videosGrid .video-info,
#videosGrid .video-card-full-info {
    display: none;
}

.video-num {
    font-size: 11px;
    color: var(--h8-color-text-muted);
    margin-right: 4px;
}

.video-title {
    font-size: var(--h8-font-size-sm);
    font-weight: 600;
    color: var(--h8-color-text);
    margin-bottom: var(--h8-spacing-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.video-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.video-badges {
    display: flex;
    gap: 4px;
}

.video-tag-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 1px 5px;
    background: var(--h8-color-primary-light);
    color: var(--h8-color-primary);
    border-radius: 3px;
}

.video-tag-badge.badge-layer {
    background: var(--h8-color-accent-light);
    color: var(--h8-color-accent);
}

.video-meta {
    display: flex;
    align-items: center;
    gap: var(--h8-spacing-sm);
    font-size: var(--h8-font-size-xs);
    color: var(--h8-color-text-muted);
    margin-top: auto;
}

.video-category {
    padding: 2px 8px;
    background: var(--h8-color-primary-light);
    color: var(--h8-color-primary);
    border-radius: var(--h8-radius-full);
    font-weight: 500;
}

/* ===== Dict Card (vertical, visually distinct from video) ===== */
.dict-card {
    background: var(--h8-color-bg-card);
    border-radius: var(--h8-radius-lg);
    overflow: hidden;
    box-shadow: var(--h8-shadow-sm);
    cursor: pointer;
    transition: transform var(--h8-transition-fast), box-shadow var(--h8-transition-fast);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
}

.dict-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--h8-shadow-md);
}

@media (hover: none) {
    .dict-card:hover {
        transform: none;
        box-shadow: var(--h8-shadow-sm);
    }

    .video-card .video-save-btn,
    .dict-card .video-save-btn {
        display: none;
    }
}

@media (hover: hover) {
    .dict-card:hover .video-save-btn {
        opacity: 1;
    }
}

.dict-card-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dict-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.dict-card-initial {
    font-size: 48px;
    font-weight: 700;
    z-index: 1;
}

/* 타입 컬러 도트 (좌하단) */
.dict-card-type-dot {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    z-index: 3;
}
.dict-card-type-dot.badge-muscle { background: #bb5d5d; }
.dict-card-type-dot.badge-bone { background: #5d60bc; }

.dict-card-info {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dict-card-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dict-card-latin {
    font-size: 10px;
    color: var(--h8-color-text-muted);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-tags {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.dc-tag {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text-light);
}

.dc-desc {
    font-size: 10px;
    color: var(--h8-color-text-light);
    line-height: 1.5;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Featured Dict Card (2-col wide, 프로토타입 df) ===== */
.dict-card-feat {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.dict-card-feat:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}

.dcf-img {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    position: relative;
}

.dcf-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    z-index: 2;
}

.dcf-initial {
    font-size: 48px;
    font-weight: 700;
    z-index: 1;
}

.dcf-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
}

.dcf-tp {
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 3px;
}

.dcf-tp.badge-muscle {
    background: #bb5d5d18;
    color: #bb5d5d;
}

.dcf-tp.badge-bone {
    background: #5d60bc18;
    color: #5d60bc;
}

.dcf-ko {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.dcf-en {
    font-size: 11px;
    color: var(--h8-color-text-muted);
    font-style: italic;
}

.dcf-desc {
    font-size: 11px;
    color: var(--h8-color-text-light);
    line-height: 1.6;
    margin-top: 6px;
}

.dcf-meta {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.dcf-mt {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text-light);
}

@media (max-width: 500px) {
    .dict-card-feat {
        grid-column: span 2;
        grid-template-columns: 1fr;
    }
}

/* ===== Search Dict Card (full-width detail) ===== */
.dict-search-card {
    grid-column: 1 / -1;
    padding: 18px;
    position: relative;
    overflow: hidden;
}

.dict-search-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--h8-color-primary);
}

.dsc-badge {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: var(--h8-color-primary);
    padding: 3px 9px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
}

.dsc-title {
    font-size: 20px;
    font-weight: 800;
}

.dsc-latin {
    font-size: 12px;
    color: var(--h8-color-text-muted);
    font-style: italic;
    margin-bottom: 10px;
}

.dsc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}

.dsc-field {
    padding: 8px 10px;
    background: var(--h8-color-bg);
    border-radius: var(--h8-radius-sm);
}

.dsc-fk {
    font-size: 9px;
    font-weight: 600;
    color: var(--h8-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 1px;
}

.dsc-fv {
    font-size: 11px;
    color: var(--h8-color-text-light);
    line-height: 1.4;
}

.dsc-origin {
    color: #bb5d5d;
}

.dsc-insertion {
    color: #5d60bc;
}

.dsc-desc {
    font-size: 12px;
    color: var(--h8-color-text-light);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-top: 8px;
    border-top: 1px solid var(--h8-color-border-light);
}

.dsc-title mark,
.dsc-latin mark {
    background: rgba(201, 165, 93, 0.3);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

@media (max-width: 500px) {
    .dsc-grid {
        grid-template-columns: 1fr;
    }
}

/* Dict section ID scroll offset */
[id^="dict-section-"] {
    scroll-margin-top: calc(var(--h8-header-height) + var(--h8-tab-bar-height) + 10px);
}

/* Dict section divider */
.dict-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 0 8px;
    color: var(--h8-color-text-muted);
    font-size: var(--h8-font-size-sm);
    font-weight: 500;
}

.dict-section-divider::before,
.dict-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--h8-color-border);
}

/* Dict tree count badge */
/* ===== Dict Tree (New) ===== */
.dt-chevron {
    flex-shrink: 0;
    color: var(--h8-color-text-muted);
    transition: transform 0.2s;
    margin-right: 4px;
}
.tree-folder.expanded > .tree-row .dt-chevron {
    transform: rotate(180deg);
}

.dt-region-row,
.dt-sub-row {
    cursor: pointer;
    border-radius: var(--h8-radius-sm);
    transition: background 0.12s;
}
.dt-region-row:hover,
.dt-sub-row:hover {
    background: var(--h8-color-bg-hover);
}

.dt-region-row {
    padding: 4px 6px;
}
.dt-region-row .tree-label {
    font-weight: 600;
    font-size: 12.5px;
}

.dt-sub-row {
    padding: 3px 6px 3px 22px;
}
.dt-sub-row .tree-label {
    font-size: 12px;
}

.dt-sub.active > .dt-sub-row {
    background: var(--h8-color-primary-light, rgba(201, 165, 93, 0.12));
}
.dt-sub.active > .dt-sub-row .tree-label {
    font-weight: 600;
    color: var(--h8-color-primary);
}

.dt-count {
    font-size: 10px;
    color: var(--h8-color-text-muted);
    margin-left: auto;
    flex-shrink: 0;
}


.dt-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 6px;
}
.dt-dot-muscle { background: #d97777; }
.dt-dot-bone { background: #6b9bd2; }
.dt-dot-video { background: #e8c9a0; }
.dt-dot-topic { background: #7dab96; }
.vtoc-locked .tree-label { opacity: 0.45; }
.vtoc-locked .dt-dot-video, .vtoc-locked .dt-dot-topic { opacity: 0.3; }
.vtoc-lock { color: var(--h8-color-text-sub); opacity: 0.35; margin-left: auto; flex-shrink: 0; }

/* 토픽 카드 */
.topic-card {
    background: var(--h8-color-bg-card);
    border: 1px solid var(--h8-color-border);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}
.topic-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.topic-card-body {
    padding: 14px 16px;
}
.topic-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--h8-color-text);
    line-height: 1.4;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.topic-card-summary {
    font-size: 11.5px;
    color: var(--h8-color-text-sub);
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* (토픽 팝업 스타일 → 하단 Topic Popup 섹션으로 이동) */

.tree-file.selected .dt-leaf-row {
    background: rgba(232, 226, 223, 0.6);
}
.tree-file.selected .dt-leaf-row .tree-label {
    color: var(--h8-color-text);
    font-weight: 500;
}

/* Dict popup placeholder */
.dict-popup-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 200px;
}

.dict-popup-initial {
    font-size: 96px;
    font-weight: 700;
    z-index: 1;
}

.dict-popup-icon {
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.dict-popup-icon svg {
    width: 48px;
    height: 48px;
}

/* Dict detail in anatomy popup */
.dict-detail-section {
    display: block !important;
    padding: 16px !important;
    cursor: default;
}

.dict-detail-section:hover {
    background: transparent !important;
}

.dict-detail-field {
    margin-bottom: 12px;
}

.dict-detail-field:last-child {
    margin-bottom: 0;
}

.dict-detail-label {
    font-size: var(--h8-font-size-sm);
    font-weight: 600;
    color: var(--h8-color-text);
    margin-bottom: 4px;
}

.dict-detail-label span {
    font-weight: 400;
    color: var(--h8-color-text-muted);
    font-size: var(--h8-font-size-xs);
}

.dict-detail-field p {
    font-size: var(--h8-font-size-sm);
    color: var(--h8-color-text-light);
    line-height: 1.6;
}

/* Dict related video in anatomy list */
.dict-related-video {
    cursor: pointer;
}

/* ===== 사전 전용 팝업 ===== */
.dict-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

.dict-popup-overlay.active {
    display: block;
    background: rgba(0, 0, 0, 0.5);
}

.dict-popup-wrapper {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 401;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    pointer-events: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dict-popup-wrapper.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dict-popup-wrapper.closing {
    opacity: 0;
}

.is-windows .dict-popup-wrapper {
    transition: none;
}

.is-windows .dict-popup-overlay {
    transition: none;
}

.dict-popup-container {
    background: var(--h8-color-bg-card);
    border-radius: var(--h8-radius-lg);
    box-shadow: var(--h8-shadow-lg);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    animation: dictPopupIn 0.3s ease forwards;
}

.dict-popup-wrapper.closing .dict-popup-container {
    animation: dictPopupOut 0.25s ease forwards;
}

.is-windows .dict-popup-container {
    animation: none;
}

.is-windows .dict-popup-wrapper.closing .dict-popup-container {
    animation: none;
    display: none;
}

@keyframes dictPopupIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes dictPopupOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.95); opacity: 0; }
}

.dict-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--h8-color-border-light);
    min-height: 56px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: var(--h8-color-bg-card);
    z-index: 10;
}

.dict-popup-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.dict-popup-name {
    font-size: var(--h8-font-size-md);
    font-weight: 600;
    color: var(--h8-color-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dict-popup-latin {
    font-size: var(--h8-font-size-xs);
    color: var(--h8-color-text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dict-popup-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 12px;
}

.dict-popup-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;          /* 영상처럼 정사각형 프레임 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    background: #efeae7;
}
/* 정사각형 안에서 세로형 이미지를 비율유지로 contain → 핫스팟 오버레이도 같은 박스에 정렬 */
.dict-popup-image .dict-media-fit {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}
.dict-popup-image .dict-media-fit > svg { display: block; width: 100%; height: 100%; }
.dict-popup-image > img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
/* 사전 팝업: 정보(태그/상세/관련/설명) 숨김 — 영상처럼 미디어만 */
#dictPopupTags, #dictPopupBody, #dictPopupRelated, #dictPathDescriptions { display: none !important; }

.dict-path-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
}
.dict-path-label {
    font-size: 12px;
    color: var(--h8-color-text-secondary);
}
.dict-path-switch {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
.dict-path-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.dict-path-slider {
    position: absolute;
    inset: 0;
    background: var(--h8-color-border-light);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.dict-path-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.dict-path-switch input:checked + .dict-path-slider {
    background: #bb5d5d;
}
.dict-path-switch input:checked + .dict-path-slider::before {
    transform: translateX(16px);
}

/* 레이어 슬라이더 (근육 ↔ 뼈) */
.dict-layer-slider {
    display: flex;
    align-items: center;
    gap: 6px;
}
.dict-layer-label {
    font-size: 11px;
    color: var(--h8-color-text-secondary);
    white-space: nowrap;
}
.dict-layer-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    background: var(--h8-color-border-light);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.dict-layer-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
}
.dict-layer-slider input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    border: none;
    cursor: pointer;
}
/* 기시/정지 부연설명 */
#dictPathDescriptions {
    padding: 0 20px;
}
#dictPathDescriptions:empty {
    display: none;
}
.dict-path-desc {
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--h8-color-text-secondary);
    background: var(--h8-color-surface);
    border-radius: 4px;
}
.dict-path-desc strong {
    display: block;
    font-size: 12px;
    margin-bottom: 2px;
}
/* 2번째 이미지 (뼈만) 겹침 스타일 */
.dict-popup-image .dict-img-layer2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: var(--h8-radius);
    display: block;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.dict-popup-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--h8-color-border-light);
}

.dict-popup-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: var(--h8-font-size-xs);
    background: var(--h8-color-bg-secondary);
    color: var(--h8-color-text-light);
}

.dict-popup-tag.badge-muscle {
    background: #fee2e2;
    color: #b91c1c;
}

.dict-popup-tag.badge-bone {
    background: #dbeafe;
    color: #1d4ed8;
}

.dict-popup-body {
    padding: 16px 20px;
}

.dict-popup-section {
    margin-bottom: 16px;
}

.dict-popup-section:last-child {
    margin-bottom: 0;
}

.dict-popup-section-title {
    font-size: var(--h8-font-size-sm);
    font-weight: 600;
    color: var(--h8-color-text);
    margin: 0 0 6px 0;
}

.dict-popup-section-title span {
    font-weight: 400;
    color: var(--h8-color-text-muted);
    font-size: var(--h8-font-size-xs);
    margin-left: 4px;
}

.dict-popup-section p {
    font-size: var(--h8-font-size-sm);
    color: var(--h8-color-text-light);
    line-height: 1.7;
    margin: 0;
}

.dict-popup-related {
    padding: 0 20px 20px;
}

.dict-popup-related-title {
    font-size: var(--h8-font-size-sm);
    font-weight: 600;
    color: var(--h8-color-text);
    margin: 16px 0 10px 0;
    padding-top: 16px;
    border-top: 1px solid var(--h8-color-border-light);
}

.dict-popup-related-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.dict-popup-related-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dict-popup-related-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--h8-radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}

.dict-popup-related-item:hover {
    background: var(--h8-color-bg-secondary);
}

.dict-popup-related-initial {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    background: var(--h8-color-bg-secondary);
}

.dict-popup-related-initial svg {
    width: 14px;
    height: 14px;
}

.dict-popup-related-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dict-popup-related-name {
    font-size: var(--h8-font-size-sm);
    font-weight: 500;
    color: var(--h8-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dict-popup-related-latin {
    font-size: var(--h8-font-size-xs);
    color: var(--h8-color-text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Dictionary Root Folder ===== */
.dict-root-folder {
    background: var(--h8-color-bg-card);
    position: relative;
}

.dict-root-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 28px;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}

/* 루트 폴더에서 자식으로 연결되는 세로선 */
.dict-root-folder.expanded .dict-root-row::after {
    content: '';
    position: absolute;
    left: 18px; /* 폴더 아이콘 중앙: padding 10px + icon 절반 8px */
    top: 100%; /* dict-root-row 바로 아래부터 */
    bottom: 14px; /* 마지막 폴더 행 중앙까지 */
    width: 1px;
    background: #ccc;
    pointer-events: none;
}

.dict-root-row .folder-icon-wrap {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-right: 2px;
}

.dict-root-label {
    font-size: 13px;
    font-weight: 400;
    color: var(--h8-color-text);
}

/* 루트 폴더 아이콘 상태 (루트만 타겟) */
.dict-root-folder > .dict-root-row .folder-icon-open {
    display: none;
}

.dict-root-folder > .dict-root-row .folder-icon-closed {
    display: block;
}

.dict-root-folder.expanded > .dict-root-row .folder-icon-open {
    display: block;
}

.dict-root-folder.expanded > .dict-root-row .folder-icon-closed {
    display: none;
}

/* 루트 폴더 children */
.dict-root-folder .muscle-list {
    display: none;
}

.dict-root-folder.expanded .muscle-list {
    display: block;
}

.dict-type-filter {
    display: flex;
    gap: 4px;
}

.dict-type-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--h8-color-border);
    border-radius: 6px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text-muted);
    cursor: pointer;
    transition: var(--h8-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dict-type-btn svg {
    width: 14px;
    height: 14px;
}

.dict-type-btn:hover {
    border-color: var(--h8-color-text-light);
    color: var(--h8-color-text);
}

.dict-type-btn.active {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--h8-color-text);
}

/* Expand/Collapse All Button */
.dict-expand-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--h8-color-border);
    border-radius: 6px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text-muted);
    cursor: pointer;
    transition: var(--h8-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: auto;
}

.dict-expand-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.dict-expand-btn:hover {
    border-color: var(--h8-color-text-light);
    color: var(--h8-color-text);
}

.dict-expand-btn.expanded svg {
    transform: rotate(180deg);
}

/* ===== Tree Item Type Tags ===== */
.tree-type-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: auto;
    flex-shrink: 0;
}

.tree-type-tag.muscle {
    background: rgba(187, 93, 93, 0.08);
    color: #bb5d5d;
}

.tree-type-tag.bone {
    background: rgba(91, 127, 181, 0.08);
    color: #5b7fb5;
}

/* ===== Tree Structure (Stable Indent-based) ===== */
.tree-folder,
.tree-file {
    list-style: none;
}

/* 들여쓰기 단위 */
.tree-indent {
    width: 20px;
    height: 28px;
    position: relative;
    flex-shrink: 0;
}

/* 세로선 (위에서 아래로) */
.tree-indent.line::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ccc;
}

/* 중간 노드 (├) */
.tree-indent.branch-cont::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ccc;
}

.tree-indent.branch-cont::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 12px;
    height: 1px;
    background: #ccc;
}

/* 마지막 노드 (└) */
.tree-indent.branch::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    height: 50%;
    width: 1px;
    background: #ccc;
}

.tree-indent.branch::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 12px;
    height: 1px;
    background: #ccc;
}

.tree-row {
    display: flex;
    align-items: center;
    height: 28px;
    border-radius: 3px;
    transition: background 0.1s ease;
}

/* 폴더 행 (중분류) */
.folder-row {
    cursor: pointer;
}

/* 파일 행 (근육/뼈) */
.file-row {
    cursor: pointer;
}

/* 파일 콘텐츠 (아이콘 + 레이블) */
.file-content {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 2px 6px;
    margin-right: 10px;
    border-radius: 3px;
    transition: background 0.1s ease;
}

.file-content:hover {
    background: rgba(232, 226, 223, 0.5);
}

@media (hover: none) {
    .file-content:hover {
        background: transparent;
    }
    .file-content:active {
        background: rgba(232, 226, 223, 0.5);
    }
}

/* 폴더/파일 아이콘 */
.tree-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* 폴더 아이콘 (닫힌 폴더 / 열린 폴더) */
.folder-icon-wrap {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-right: 6px;
}

.folder-icon-wrap .folder-icon {
    width: 16px;
    height: 16px;
}

/* 열린 폴더 아이콘 숨김 (기본) */
.folder-icon-wrap .folder-icon-open {
    display: none;
}

.folder-icon-wrap .folder-icon-closed {
    display: block;
}

/* 펼쳐진 상태: 열린 폴더 표시 */
.tree-folder.expanded > .tree-row .folder-icon-wrap .folder-icon-open {
    display: block;
}

.tree-folder.expanded > .tree-row .folder-icon-wrap .folder-icon-closed {
    display: none;
}

/* 파일 아이콘 */
.file-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-right: 6px;
}

/* 라벨 */
.tree-label {
    font-size: 13px;
    color: #2d2a29;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 하위 아이템 목록 */
.tree-items {
    list-style: none;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
    max-height: 0;
    opacity: 0;
}

.tree-folder.expanded > .tree-items {
    opacity: 1;
}

/* 선택 상태 */
.tree-file.selected .file-content {
    background: rgba(232, 226, 223, 0.6);
}

.tree-file.selected .tree-label {
    font-weight: 500;
}

/* Empty State */
.list-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--h8-color-text-muted);
}

.list-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--h8-spacing-sm);
    opacity: 0.5;
}

/* Detail Image */
.detail-image {
    margin-bottom: var(--h8-spacing-lg);
    border-radius: var(--h8-radius-lg);
    overflow: hidden;
    background: var(--h8-color-bg-card);
}

.detail-image img {
    width: 100%;
    height: auto;
    display: block;
}

.image-placeholder {
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--h8-color-bg) 0%, var(--h8-color-border-light) 100%);
    color: var(--h8-color-text-muted);
}

.image-placeholder svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--h8-spacing-sm);
    opacity: 0.4;
}

.image-placeholder span {
    font-size: var(--h8-font-size-sm);
}

.related-video-item {
    display: flex;
    align-items: center;
    gap: var(--h8-spacing-sm);
    padding: var(--h8-spacing-xs);
    background: var(--h8-color-bg);
    border-radius: var(--h8-radius);
    cursor: pointer;
    transition: var(--h8-transition-fast);
    touch-action: manipulation;
}

.related-video-item:hover {
    background: var(--h8-color-primary-light);
}

@media (hover: none) {
    .related-video-item:hover {
        background: var(--h8-color-bg);
    }
}

.related-video-thumb {
    width: 60px;
    aspect-ratio: 16 / 9;
    background: var(--h8-color-border-light);
    border-radius: var(--h8-radius-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.related-video-thumb svg {
    width: 16px;
    height: 16px;
    color: var(--h8-color-primary);
    opacity: 0.5;
}

.related-video-info {
    flex: 1;
    min-width: 0;
}

.related-video-title {
    font-size: var(--h8-font-size-sm);
    font-weight: 500;
    color: var(--h8-color-text);
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-video-duration {
    font-size: var(--h8-font-size-xs);
    color: var(--h8-color-text-muted);
}

.no-videos {
    text-align: center;
    padding: var(--h8-spacing-md);
    color: var(--h8-color-text-muted);
    font-size: var(--h8-font-size-sm);
}

/* Memo Popup */
.memo-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1200;
    opacity: 0;
    transition: opacity var(--h8-transition-normal);
}

.memo-popup-overlay.active {
    display: block;
    opacity: 1;
}

.memo-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 500px;
    background: var(--h8-color-bg-card);
    border-radius: var(--h8-radius-lg);
    z-index: 1201;
    overflow: hidden;
    opacity: 0;
    transition: all var(--h8-transition-normal);
    box-shadow: var(--h8-shadow-lg);
}

.memo-popup.active {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.memo-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--h8-spacing-md) var(--h8-spacing-lg);
    border-bottom: 1px solid var(--h8-color-border);
}

.memo-popup-header h3 {
    font-size: var(--h8-font-size-base);
    font-weight: 600;
    color: var(--h8-color-text);
}

.memo-popup-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.memo-popup-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--h8-color-bg);
    border-radius: 50%;
    font-size: 20px;
    color: var(--h8-color-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--h8-transition-fast);
}

.memo-popup-close:hover {
    background: var(--h8-color-bg-hover);
    color: var(--h8-color-text);
}

.memo-popup-content {
    padding: var(--h8-spacing-lg);
}

.memo-popup-content textarea {
    width: 100%;
    min-height: 150px;
    padding: var(--h8-spacing-md);
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius);
    font-size: var(--h8-font-size-sm);
    font-family: var(--h8-font-family);
    resize: vertical;
    margin-bottom: var(--h8-spacing-md);
}

.memo-popup-content textarea:focus {
    outline: none;
    border-color: var(--h8-color-primary);
}

.memo-popup-content textarea.readonly {
    background: var(--h8-color-bg);
    color: var(--h8-color-text);
    cursor: default;
    resize: none;
}

.memo-popup-actions {
    display: flex;
    gap: var(--h8-spacing-sm);
    justify-content: flex-end;
}

.memo-save-btn {
    padding: var(--h8-spacing-sm) var(--h8-spacing-lg);
    background: var(--h8-color-primary);
    color: white;
    border: none;
    border-radius: var(--h8-radius);
    font-size: var(--h8-font-size-sm);
    font-family: var(--h8-font-family);
    cursor: pointer;
    transition: var(--h8-transition-fast);
}

.memo-save-btn:hover {
    background: var(--h8-color-primary-hover);
}

.memo-edit-btn {
    padding: var(--h8-spacing-sm) var(--h8-spacing-lg);
    background: transparent;
    color: var(--h8-color-text-muted);
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius);
    font-size: var(--h8-font-size-sm);
    font-family: var(--h8-font-family);
    cursor: pointer;
    transition: var(--h8-transition-fast);
}

.memo-edit-btn:hover {
    border-color: var(--h8-color-primary);
    color: var(--h8-color-primary);
}

.memo-delete-btn {
    padding: 0;
    background: none;
    color: var(--h8-color-text-muted);
    border: none;
    font-size: var(--h8-font-size-xs);
    font-family: var(--h8-font-family);
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.6;
    transition: var(--h8-transition-fast);
}

.memo-delete-btn:hover {
    opacity: 1;
    color: #ef4444;
}

/* ===== Video Popup ===== */
/* wrapper를 사용하므로 기존 overlay는 숨김 */
.video-popup-overlay {
    display: none !important;
}

/* PC에서도 wrapper/container 사용 */
.mobile-popup-wrapper {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 401;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    visibility: hidden;
    transition: background 0.3s ease, opacity 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, visibility 0.3s;
    pointer-events: none;
    overflow-x: auto;
    overscroll-behavior: contain;
}

.mobile-popup-wrapper.active {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Windows에서는 blur 제거 + 애니메이션 없음 (성능 이슈) */
.is-windows .mobile-popup-wrapper {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
}

.is-windows .mobile-popup-wrapper.active {
    background: rgba(0, 0, 0, 0.7);
}

.is-windows .video-popup {
    transition: none;
}

.is-windows .video-popup.active {
    animation: none;
}

.is-windows .video-popup.closing {
    animation: none;
    display: none;
}

.is-windows .anatomy-popup {
    transition: none;
}

.is-windows .anatomy-popup.active {
    animation: none;
}

.is-windows .anatomy-popup.closing {
    animation: none;
    display: none;
}

.mobile-popup-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 500px;
    margin: auto;
    transition: margin 0.4s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* anatomy-expanded 상태에서는 컨테이너가 자연스럽게 위로 밀림 */

/* PC 전용 이전/다음 화살표 */
.video-nav-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.2s, transform 0.2s;
}

.video-nav-arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.05);
}

.video-nav-arrow svg {
    width: 24px;
    height: 24px;
    color: var(--h8-color-text);
}

.video-nav-prev {
    left: 20px;
}

.video-nav-next {
    right: 20px;
}

/* PC에서만 화살표 표시 */
@media (min-width: 769px) {
    .video-nav-arrow {
        display: flex;
    }
}

/* 비디오 팝업 열림 애니메이션 */
@keyframes popupPop {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 비디오 팝업 닫힘 애니메이션 */
@keyframes popupClose {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* 관련해부학 헤더 슬라이드 애니메이션 */
@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 관련해부학 닫힘 애니메이션 */
@keyframes slideUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.video-popup {
    display: none;
    position: relative;
    width: 100%;
    background: var(--h8-color-bg-card);
    border-radius: var(--h8-radius-lg);
    overflow: hidden;
}

.video-popup.active {
    display: block;
    animation: popupPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.video-popup.closing {
    display: block;
    animation: popupClose 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* video-player 접힘 애니메이션 */
.video-popup .video-player {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 600px;
    overflow: hidden;
}

.video-popup.collapsed .video-player {
    max-height: 0;
}

/* 관련해부학 펼침 */
.anatomy-popup.expanded {
    flex: 1;
    min-height: 0;
}

.anatomy-popup.expanded .anatomy-popup-body {
    flex: 1;
    min-height: 0;
}

.video-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--h8-spacing-md) var(--h8-spacing-lg);
    border-bottom: 1px solid var(--h8-color-border);
    gap: var(--h8-spacing-md);
}

.video-popup-title {
    font-size: var(--h8-font-size-lg);
    font-weight: 600;
    color: var(--h8-color-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-popup-header-actions {
    display: flex;
    align-items: center;
    gap: var(--h8-spacing-sm);
    flex-shrink: 0;
}

.video-popup-memo-btn,
.video-popup-save-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--h8-color-border);
    background: var(--h8-color-bg);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--h8-transition-fast);
}

.video-popup-memo-btn svg,
.video-popup-save-btn svg {
    width: 18px;
    height: 18px;
    color: var(--h8-color-text-muted);
}

.video-popup-memo-btn:hover {
    border-color: var(--h8-color-warning);
    color: var(--h8-color-warning);
}

.video-popup-memo-btn:hover svg {
    color: var(--h8-color-warning);
}

.video-popup-memo-btn.has-memo {
    background: var(--h8-color-warning);
    border-color: var(--h8-color-warning);
}

.video-popup-memo-btn.has-memo svg {
    color: white;
}

.video-popup-save-btn:hover {
    border-color: var(--h8-color-primary);
    color: var(--h8-color-primary);
}

.video-popup-save-btn:hover svg {
    color: var(--h8-color-primary);
}

.video-popup-save-btn.saved {
    background: var(--h8-color-primary);
    border-color: var(--h8-color-primary);
}

.video-popup-save-btn.saved svg {
    color: white;
    fill: white;
}

.video-popup-close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--h8-color-border);
    background: var(--h8-color-bg);
    border-radius: 50%;
    font-size: 24px;
    color: var(--h8-color-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--h8-transition-fast);
}


.video-popup-close .icon-close {
    display: block;
}

.video-popup-close .icon-expand {
    display: none;
    width: 20px;
    height: 20px;
}

/* 영상 팝업 접힌 상태에서도 X 유지 */
.video-popup.collapsed .video-popup-close .icon-close {
    display: block;
}

.video-popup.collapsed .video-popup-close .icon-expand {
    display: none;
}

/* Video Popup Body */
.video-player {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    position: relative;
}

.video-player-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.video-player video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

/* ===== 비디오 오버레이 컨트롤 ===== */
.anim-overlay-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.anim-overlay-controls.visible {
    opacity: 1;
}

/* 통합 컨트롤 바 */
.anim-bar {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    padding: 2px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.anim-bar.visible {
    opacity: 1;
    pointer-events: auto;
}
.anim-bar-play {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #333;
    flex-shrink: 0;
}
.anim-bar-play:hover { background: rgba(0,0,0,0.05); }
.anim-bar-play .icon-play { display: none; }
.anim-bar-play.is-paused .icon-pause { display: none; }
.anim-bar-play.is-paused .icon-play { display: block; }
.anim-frame-track {
    flex: 1;
    height: 4px;
    background: rgba(0,0,0,0.08);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}
.anim-frame-progress {
    height: 100%;
    background: var(--h8-color-primary, #bb5d5d);
    border-radius: 3px;
    transition: width 0.05s linear;
    pointer-events: none;
    position: relative;
}
.anim-frame-progress::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--h8-color-primary, #bb5d5d);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.anim-frame-info {
    font-size: 11px;
    color: #888;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    text-align: center;
    flex-shrink: 0;
}
.anim-bar-speed {
    position: relative;
    flex-shrink: 0;
}
.anim-bar-fullscreen {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #666;
    flex-shrink: 0;
}
.anim-bar-fullscreen:hover { background: rgba(0,0,0,0.05); }
.anim-bar-fullscreen .icon-shrink { display: none; }
.anim-container.is-fullscreen .anim-bar-fullscreen .icon-expand { display: none; }
.anim-container.is-fullscreen .anim-bar-fullscreen .icon-shrink { display: block; }
.anim-fullscreen-bg {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #000;
    z-index: 99998;
}
.anim-container.is-fullscreen ~ .anim-fullscreen-bg,
.anim-container.is-fullscreen + .anim-fullscreen-bg { display: block; }
.anim-container.is-fullscreen {
    position: fixed !important;
    z-index: 99999;
    background: #fff;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: min(100vw, 100vh) !important;
    height: min(100vw, 100vh) !important;
    max-width: none;
    max-height: none;
}
.anim-container.is-fullscreen .anim-bar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    max-width: 600px;
    width: 90%;
}
@media (max-width: 480px) {
    .anim-bar { padding: 6px 8px; gap: 6px; }
}

/* 재생/정지 아이콘 — 중앙 원형 배지 */
.anim-state-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    pointer-events: auto;
    cursor: pointer;
}

.anim-state-icon .icon-play { display: none; }
.anim-state-icon .icon-pause { display: block; }
.anim-state-icon.is-paused .icon-play { display: block; }
.anim-state-icon.is-paused .icon-pause { display: none; }

/* 속도 버튼 — 우하단 라운드 배지 */
.anim-speed-btn {
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    min-width: 32px;
    text-align: center;
    letter-spacing: 0.02em;
}
.anim-speed-btn:hover { background: rgba(0,0,0,0.05); }

/* 속도 드롭다운 — 위로 올라오는 메뉴 */
.anim-speed-dropdown {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 4px 0;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    visibility: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.anim-speed-dropdown.open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.anim-speed-opt {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.1s, background 0.1s;
}

.anim-speed-opt:hover {
    color: #333;
    background: rgba(0,0,0,0.04);
}

.anim-speed-opt.active {
    color: var(--h8-color-primary, #bb5d5d);
    font-weight: 700;
}

/* ===== 영상 태그 ===== */
.video-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
    background: var(--h8-color-bg-card);
    border-top: 1px solid var(--h8-color-border);
}

.video-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--h8-color-bg-tertiary);
    color: var(--h8-color-text-secondary);
    font-size: 12px;
    border-radius: 12px;
    white-space: nowrap;
}

/* 팝업 내 태그 숨김 */
.mobile-popup-container .video-tags {
    display: none !important;
}

/* ===== 관련 해부학 관계 태그 ===== */
.anatomy-relation-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 500;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* 동일 근육/동일 뼈 - 메인 색상 */
.anatomy-relation-tag.tag-same {
    background: var(--h8-color-primary-light);
    color: var(--h8-color-primary);
}

/* 기시 */
.anatomy-relation-tag.tag-origin {
    background: rgba(93, 96, 188, 0.15);
    color: #5d60bc;
}

/* 정지 */
.anatomy-relation-tag.tag-insertion {
    background: rgba(121, 170, 109, 0.15);
    color: #79aa6d;
}

/* 기시/정지 */
.anatomy-relation-tag.tag-both {
    background: rgba(173, 117, 162, 0.15);
    color: #ad75a2;
}

/* 회색 (기시/정지 컨텐츠가 아닐 때) */
.anatomy-relation-tag.tag-muted {
    background: rgba(150, 150, 150, 0.12);
    color: #999;
}
.anatomy-relation-tag.tag-topic {
    background: rgba(201, 165, 93, 0.15);
    color: #b8942e;
}
.anatomy-topic-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    line-height: 1.4;
}
.anatomy-topic-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 토픽 본문 */
.anatomy-detail-content .topic-body h2 {
    font-size: 14px;
    font-weight: 700;
    margin: 20px 0 8px;
    color: var(--h8-color-text);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 7px;
}
.anatomy-detail-content .topic-body h2::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--h8-color-accent, #bb5d5d);
    flex-shrink: 0;
}
.anatomy-detail-content .topic-body h2:first-child {
    margin-top: 0;
}
.anatomy-detail-content .topic-body h2:not(:first-child) {
    padding-top: 28px;
    margin-top: 28px;
    position: relative;
}
.anatomy-detail-content .topic-body h2:not(:first-child)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: var(--h8-color-border);
}
.anatomy-detail-content .topic-body p {
    font-size: 13px;
    line-height: 1.75;
    margin: 0 0 12px;
    color: var(--h8-color-text-sub);
}
.anatomy-detail-content .topic-body b,
.anatomy-detail-content .topic-body strong {
    color: var(--h8-color-text);
    font-weight: 600;
    background: rgba(201, 165, 93, 0.1);
    padding: 1px 4px;
    border-radius: 3px;
}

/* ===== 관련 해부학 팝업 (별도) ===== */
.anatomy-popup {
    position: relative;
    width: 100%;
    background: var(--h8-color-bg-card);
    border-radius: var(--h8-radius-lg);
    box-shadow: var(--h8-shadow-lg);
    overflow: hidden;
    display: none;
    flex-direction: column;
}

.anatomy-popup.active {
    display: flex;
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}

.anatomy-popup.closing {
    display: flex;
    animation: slideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 해부학 팝업 헤더 - 영상 헤더와 동일한 레이아웃 */
.anatomy-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--h8-spacing-md) var(--h8-spacing-lg);
    border: none;
    background: var(--h8-color-bg);
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.anatomy-popup-title {
    font-size: var(--h8-font-size-lg);
    font-weight: 600;
    font-family: var(--h8-font-family);
    color: var(--h8-color-text);
    cursor: pointer;
    flex-shrink: 0;
}

.anatomy-popup-title {
    flex: 1;
    text-align: left;
    color: var(--h8-color-text);
}

.anatomy-popup-toggle {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}


.anatomy-popup-toggle svg {
    width: 20px;
    height: 20px;
    color: var(--h8-color-text-light);
}

.anatomy-popup-toggle .icon-expand {
    display: block;
}

.anatomy-popup-toggle .icon-collapse {
    display: none;
}

.anatomy-popup.expanded .anatomy-popup-toggle .icon-expand {
    display: none;
}

.anatomy-popup.expanded .anatomy-popup-toggle .icon-collapse {
    display: block;
}

.anatomy-popup.expanded .anatomy-popup-header {
    border-bottom: 1px solid var(--h8-color-border);
}

/* 해부학 팝업 바디 */
.anatomy-popup-body {
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 0 0 auto;
}

.anatomy-popup.expanded .anatomy-popup-body {
    max-height: 80vh;
    max-height: 80dvh;
    min-height: 80vh;
    min-height: 80dvh;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* 해부학 리스트 */
.anatomy-list {
    height: 100%;
    overflow-y: auto;
    padding: var(--h8-spacing-md) var(--h8-spacing-lg);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.anatomy-empty {
    padding: var(--h8-spacing-xl) var(--h8-spacing-lg);
    text-align: center;
    color: var(--h8-color-text-light);
    font-size: var(--h8-font-size-sm);
}

.anatomy-group {
    margin-bottom: var(--h8-spacing-md);
}

.anatomy-group:last-child {
    margin-bottom: 0;
}

.anatomy-group-title {
    font-size: var(--h8-font-size-xs);
    font-weight: 500;
    color: var(--h8-color-text-muted);
    margin-bottom: var(--h8-spacing-xs);
}

.anatomy-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--h8-spacing-sm);
    padding: var(--h8-spacing-sm) var(--h8-spacing-sm) var(--h8-spacing-sm) 0;
    background: var(--h8-color-bg);
    border-radius: var(--h8-radius);
    cursor: pointer;
    transition: background 0.15s ease;
    margin-bottom: var(--h8-spacing-xs);
}

.anatomy-item:last-child {
    margin-bottom: 0;
}

/* PC에서만 호버 효과 */
@media (hover: hover) {
    .anatomy-item:hover {
        background: var(--h8-color-bg-hover);
    }
}

.anatomy-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.anatomy-item-icon.muscle {
    background: var(--h8-color-primary);
}

.anatomy-item-icon.bone {
    background: #5b7fb5;
}

.anatomy-item-info {
    flex: 1;
    min-width: 0;
}

.anatomy-item-names {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.anatomy-item-name {
    font-size: var(--h8-font-size-sm);
    font-weight: 500;
    color: var(--h8-color-text);
}

.anatomy-item-altname {
    font-size: var(--h8-font-size-sm);
    color: var(--h8-color-text-secondary);
}

.anatomy-item-altname::before {
    content: "·";
    margin-right: 8px;
    color: var(--h8-color-text-muted);
}

.anatomy-item-latin {
    font-size: var(--h8-font-size-xs);
    color: var(--h8-color-text-muted);
    opacity: 0.6;
}

.anatomy-empty {
    text-align: center;
    padding: var(--h8-spacing-lg);
    color: var(--h8-color-text-muted);
    font-size: var(--h8-font-size-sm);
}

/* 해부학 상세 */
.anatomy-detail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--h8-color-bg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.anatomy-detail.active {
    transform: translateX(0);
}

/* 상세 화면: 리스트 숨기고 detail 표시 */
.anatomy-popup:has(.anatomy-detail.active) .anatomy-list {
    visibility: hidden;
    position: absolute;
}

.anatomy-popup:has(.anatomy-detail.active) .anatomy-detail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
}

.anatomy-popup:has(.anatomy-detail.active) .anatomy-detail-header {
    display: none;
}

/* 뒤로가기 버튼 (기본 숨김) */
.anatomy-popup-back {
    display: none;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--h8-color-text-light);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.anatomy-popup-back svg {
    width: 20px;
    height: 20px;
}

/* 상세 화면일 때: 뒤로가기 표시, 토글 숨김 */
.anatomy-popup:has(.anatomy-detail.active) .anatomy-popup-back {
    display: flex;
}

.anatomy-popup:has(.anatomy-detail.active) .anatomy-popup-title {
    padding-left: 20px;
}

.anatomy-popup:has(.anatomy-detail.active) .anatomy-popup-toggle {
    visibility: visible;
}

.anatomy-detail-header {
    display: flex;
    align-items: center;
    gap: var(--h8-spacing-sm);
    padding: var(--h8-spacing-md) var(--h8-spacing-lg);
    border-bottom: 1px solid var(--h8-color-border);
    background: var(--h8-color-bg);
    flex-shrink: 0;
}

.anatomy-detail-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--h8-color-text-light);
    cursor: pointer;
    border-radius: var(--h8-radius);
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.anatomy-detail-back svg {
    width: 18px;
    height: 18px;
}

.anatomy-detail-title {
    font-size: var(--h8-font-size-lg);
    font-weight: 600;
    color: var(--h8-color-text);
    flex: 1;
}

.anatomy-detail-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--h8-spacing-md) var(--h8-spacing-lg);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.anatomy-detail-content .detail-image {
    margin-bottom: var(--h8-spacing-md);
    border-radius: var(--h8-radius);
    overflow: hidden;
}

.anatomy-detail-section {
    margin-bottom: var(--h8-spacing-md);
}

.anatomy-detail-section h4 {
    font-size: var(--h8-font-size-lg);
    font-weight: 600;
    color: var(--h8-color-text);
    margin-bottom: 4px;
}

.anatomy-detail-section h5 {
    font-size: var(--h8-font-size-xs);
    font-weight: 600;
    color: var(--h8-color-text-muted);
    margin-bottom: 4px;
}

.anatomy-detail-section p {
    font-size: var(--h8-font-size-sm);
    color: var(--h8-color-text-light);
    line-height: 1.6;
}

.anatomy-detail-latin {
    font-style: italic;
    color: var(--h8-color-text-muted) !important;
    margin-bottom: var(--h8-spacing-md) !important;
}

.video-player iframe,
.video-player video {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
    cursor: pointer;
}

.video-player video::-webkit-media-controls {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.video-player video:hover::-webkit-media-controls {
    opacity: 1;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    :root {
        --h8-header-height: 48px;
    }

    .header {
        padding: 0 var(--h8-spacing-sm);
    }

    .header-left {
        flex: 0 0 auto;
        gap: 0;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        cursor: pointer;
        margin: 0;
    }

    .logo img {
        height: 20px;
    }

    .header-right {
        flex: 0 0 auto;
        gap: 2px;
    }

    /* 모바일: 검색 아이콘 버튼 표시 */
    .header-search-open {
        display: flex;
    }

    /* 모바일: 검색바 기본 숨김, 확장 시 헤더 전체 덮기 */
    .header-search {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: var(--h8-header-height);
        max-width: none;
        margin: 0;
        background: var(--h8-color-bg-card);
        border-bottom: 1px solid var(--h8-color-border);
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        z-index: 110;
        align-items: center;
        padding: 0 12px 0 4px;
        gap: 0;
    }
    .header-search.expanded {
        display: flex;
    }
    .header-search.expanded .search-back { display: flex; }
    .header-search.expanded .search-icon { display: none; }

    .header-search input {
        flex: 1;
        height: 36px;
        padding: 0 32px 0 12px;
        font-size: 15px;
        border: 1px solid var(--h8-color-border);
        border-radius: var(--h8-radius-full);
        background: var(--h8-color-bg);
    }
    .header-search input:focus {
        border-color: var(--h8-color-primary);
        box-shadow: none;
    }

    .header-search .search-clear {
        position: absolute;
        right: 22px;
        width: 18px;
        height: 18px;
        font-size: 11px;
    }

    .header-search .search-suggest {
        top: var(--h8-header-height);
        left: 8px;
        right: 8px;
        border-radius: 0 0 12px 12px;
    }

    /* Videos - FAB 토글 버튼 제거 (햄버거로 대체) */
    .video-toc-toggle {
        display: none !important;
    }

    /* 모바일 목차 오버레이 백드롭 */
    .video-toc-overlay {
        display: block !important;
        position: fixed;
        top: var(--h8-header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 98;
    }

    .video-toc-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* Videos - 오버레이 드로어 */
    .video-toc-panel {
        position: fixed;
        top: var(--h8-header-height);
        left: 0;
        width: 280px;
        min-width: 280px;
        height: calc(100vh - var(--h8-header-height));
        height: calc(100dvh - var(--h8-header-height));
        transform: translateX(-100%);
        transition: none;
        z-index: 99;
        overflow: hidden;
        padding: 0;
        background: var(--h8-color-bg-card);
        border-right: 1px solid var(--h8-color-border);
        box-shadow: none;
    }

    .video-toc-panel.toc-ready {
        transition: transform 0.3s ease;
    }

    .video-toc-panel .toc-scroll-content {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .video-toc-panel .toc-term-toggle {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    .video-toc-panel.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
    }

    /* 모바일: 사전 TOC 구분선 */
    .video-toc-panel #dictRootFolderInVideo {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--h8-color-border);
    }

    .video-content-panel {
        padding: var(--h8-spacing-sm);
    }

    /* Mobile body filter */
    .body-filter-label {
        display: inline;
    }

    /* Mobile video grid - 2 columns */
    .videos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--h8-spacing-sm);
    }

    .video-title {
        font-size: var(--h8-font-size-xs);
        -webkit-line-clamp: 1;
    }

    .dict-card-initial {
        font-size: 32px;
    }

    .dict-popup-initial {
        font-size: 64px;
    }

    .dict-card-latin {
        font-size: 10px;
    }

    .dict-popup-wrapper {
        padding: 5px;
    }

    .dict-popup-container {
        max-width: 100%;
        max-height: 95vh;
        max-height: 95dvh;
        border-radius: var(--h8-radius-md);
    }

    .dict-popup-header {
        padding: 12px 16px;
        min-height: 48px;
    }

    .dict-popup-name {
        font-size: var(--h8-font-size-sm);
    }

    .dict-popup-tags {
        padding: 10px 16px;
    }

    .dict-popup-body {
        padding: 12px 16px;
    }

    .dict-popup-related {
        padding: 0 16px 16px;
    }

    .video-info {
        padding: var(--h8-spacing-sm);
    }

    .video-meta {
        display: none;
    }

    .detail-content {
        padding: var(--h8-spacing-md);
    }

    .detail-title {
        font-size: var(--h8-font-size-lg);
    }

    .related-muscles {
        grid-template-columns: 1fr;
    }

    /* 모바일: 패딩 줄임 */
    .mobile-popup-wrapper {
        padding: 5px;
    }

    /* 모바일: 컨테이너 최대폭 없음 */
    .mobile-popup-container {
        max-width: 100%;
    }

    /* 모바일: 영상 정사각형 + 접힘 애니메이션 */
    .video-popup .video-player {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        position: relative;
        max-height: none;
        transition: padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .video-popup.collapsed .video-player {
        padding-bottom: 0;
    }

    .video-player video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .anatomy-popup.expanded .anatomy-popup-body {
        max-height: 70vh;
        max-height: 70dvh;
        min-height: 70vh;
        min-height: 70dvh;
    }


    .video-popup-header,
    .anatomy-popup-header,
    .anatomy-detail-header {
        padding: var(--h8-spacing-sm) var(--h8-spacing-md);
    }

    .video-popup-title,
    .anatomy-popup-title,
    .anatomy-detail-title {
        font-size: var(--h8-font-size-sm);
    }

    .anatomy-list {
        padding: var(--h8-spacing-sm) var(--h8-spacing-md);
    }

    .anatomy-detail-content {
        padding: var(--h8-spacing-sm) var(--h8-spacing-md);
    }

    /* ===== 모바일 네비게이션 헤더 ===== */
    .mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 5px 8px 0;
        border-bottom: 1px solid var(--h8-color-border-light);
        min-height: 44px;
    }

    .mobile-nav-left {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 1;
    }

    .mobile-view-toggle {
        display: none; /* 모바일 사전은 폴더 네비게이션만 사용 */
    }

    .view-toggle-btn {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: var(--h8-radius-sm);
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--h8-transition-fast);
    }

    .view-toggle-btn svg {
        width: 18px;
        height: 18px;
        color: var(--h8-color-text-muted);
    }

    .view-toggle-btn.active {
        background: rgba(0, 0, 0, 0.06);
    }

    .view-toggle-btn.active svg {
        color: var(--h8-color-text);
    }

    /* ===== 모바일 폴더 리스트 (iOS 스타일) ===== */
    .mobile-folder-list {
        display: flex;
        flex-direction: column;
    }

    .mobile-folder-item {
        display: flex;
        align-items: center;
        padding: 10px 5px 10px 0;
        background: transparent;
        cursor: pointer;
        transition: background-color 0.15s;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-folder-item:hover {
        background: transparent;
    }

    .mobile-folder-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 48px; /* 아이콘 + 여백 */
        right: 0;
        height: 1px;
        background: var(--h8-color-border-light);
    }

    .mobile-folder-item:last-child::after {
        display: none;
    }

    .mobile-folder-item:active {
        background-color: var(--h8-color-bg-hover);
    }

    .mobile-folder-icon {
        width: 36px;
        height: 30px;
        margin-right: 12px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-folder-icon svg {
        width: 36px;
        height: 30px;
    }

    .mobile-folder-name {
        flex: 1;
        font-size: var(--h8-font-size-base);
        font-weight: 400;
        color: var(--h8-color-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-folder-count {
        font-size: var(--h8-font-size-sm);
        color: var(--h8-color-text-muted);
        margin-right: 8px;
    }

    .mobile-folder-chevron {
        color: #c7c7cc;
        font-size: var(--h8-font-size-lg);
        font-weight: 300;
    }

    /* 모바일 뒤로가기 버튼 & 제목 */
    .mobile-back-btn {
        width: 20px;
        height: 32px;
        border: none;
        background: transparent;
        border-radius: var(--h8-radius-sm);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--h8-transition-fast);
    }

    .mobile-back-btn:active {
        background: rgba(0, 0, 0, 0.06);
    }

    .mobile-back-btn svg {
        width: 18px;
        height: 18px;
        color: #999;
        opacity: 0.6;
    }

    .mobile-folder-title {
        font-size: var(--h8-font-size-base);
        font-weight: 400;
        color: var(--h8-color-text);
    }

    .mobile-nav-title {
        font-size: var(--h8-font-size-base);
        font-weight: 400;
        color: var(--h8-color-text);
        padding-left: 4px;
        line-height: 32px; /* 뒤로가기 버튼 높이와 맞춤 */
    }

    /* 폴더 전환 애니메이션 (클래스가 있을 때만 적용) */
    .mobile-folder-list.slide-from-left,
    .mobile-item-list.slide-from-left {
        animation: slideFromLeft 0.3s ease-out;
    }

    .mobile-folder-list.slide-from-right,
    .mobile-item-list.slide-from-right {
        animation: slideFromRight 0.3s ease-out;
    }

    @keyframes slideFromRight {
        from {
            opacity: 0;
            transform: translateX(40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes slideFromLeft {
        from {
            opacity: 0;
            transform: translateX(-40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* 모바일 항목 리스트 */
    .mobile-item-list {
        display: flex;
        flex-direction: column;
    }

    .mobile-item {
        display: flex;
        align-items: center;
        padding: 10px 5px 10px 0;
        background: transparent;
        cursor: pointer;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 48px;
        right: 0;
        height: 1px;
        background: var(--h8-color-border-light);
    }

    .mobile-item:last-child::after {
        display: none;
    }

    .mobile-item:active {
        background-color: var(--h8-color-bg-hover);
    }


    .mobile-item-icon {
        width: 36px;
        height: 30px;
        margin-right: 12px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-item-icon svg {
        width: 22px;
        height: 28px;
    }

    .mobile-item-name {
        font-size: var(--h8-font-size-base);
        font-weight: 400;
        color: var(--h8-color-text);
        white-space: nowrap;
        flex-shrink: 0;
    }

    .mobile-item-latin {
        font-size: var(--h8-font-size-xs);
        color: var(--h8-color-text-muted);
        font-style: italic;
        margin-left: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    .mobile-item-type {
        font-size: var(--h8-font-size-xs);
        padding: 2px 6px;
        border-radius: 4px;
        flex-shrink: 0;
        margin-left: auto;
    }

    .mobile-item-type.muscle {
        background: rgba(187, 93, 93, 0.1);
        color: var(--h8-color-primary);
    }

    .mobile-item-type.bone {
        background: rgba(91, 127, 181, 0.1);
        color: #5b7fb5;
    }

    /* 내 저장 폴더 항목 - 이동/삭제 버튼이 있으므로 margin-left:auto 제거 */
    .mobile-user-folder-item .mobile-item-type {
        margin-left: 6px;
    }
    .mobile-user-folder-item .mobile-item-latin {
        flex: 0 1 auto;
        max-width: 80px;
    }
}

/* PC에서는 뷰 토글 숨김 */
@media (min-width: 769px) {
    .mobile-view-toggle {
        display: none;
    }

    .video-toc-toggle,
    .video-toc-overlay,
    .mobile-menu-btn {
        display: none !important;
    }

}

/* ===== PC 팝업 레이아웃 (비디오 + 관련해부학 통합) ===== */
@media (min-width: 769px) {
    .mobile-popup-wrapper {
        align-items: center;
        justify-content: center;
        padding: 40px;
        overflow-y: auto;
    }

    /* 통합 팝업 컨테이너 - Grid 레이아웃 */
    .mobile-popup-container {
        display: grid !important;
        grid-template-columns: 650px 350px;
        grid-template-rows: auto 650px;
        width: 1000px !important;
        max-width: none !important;
        max-height: none !important;
        background: var(--h8-color-bg-card);
        border-radius: var(--h8-radius-lg);
        box-shadow: var(--h8-shadow-lg);
        overflow: visible !important;
        gap: 0 !important;
    }

    /* video-popup: display: contents로 자식들이 그리드에 직접 참여 */
    .mobile-popup-container > .video-popup {
        display: contents !important;
        animation: none !important;
    }

    .mobile-popup-container > .video-popup.active {
        display: contents !important;
        animation: none !important;
    }

    /* video-popup-header: 전체 너비 차지 */
    .mobile-popup-container .video-popup-header {
        grid-column: 1 / -1;
        grid-row: 1;
        border-bottom: 1px solid var(--h8-color-border-light);
    }

    /* 비디오 플레이어: 왼쪽 열, 정사각형 유지 */
    .mobile-popup-container .video-player {
        grid-column: 1;
        grid-row: 2;
        width: 650px !important;
        height: 650px !important;
        max-height: none !important;
        aspect-ratio: 1 / 1;
        padding-bottom: 0;
        border-radius: 0 0 0 var(--h8-radius-lg);
    }

    /* 비디오 태그: PC에서 숨김 */
    .mobile-popup-container .video-tags {
        display: none !important;
    }

    /* anatomy-popup: 오른쪽 열 - 항상 표시 */
    .mobile-popup-container > .anatomy-popup {
        grid-column: 2;
        grid-row: 2;
        display: flex !important;
        flex-direction: column;
        position: relative;
        background: var(--h8-color-bg-card);
        border-radius: 0 0 var(--h8-radius-lg) 0;
        box-shadow: none;
        border-left: 1px solid var(--h8-color-border-light);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        animation: none !important;
    }

    /* Windows 서브픽셀 렌더링 이슈 수정 - 더 밝은 선 */
    .is-windows .mobile-popup-container > .anatomy-popup {
        border-left-color: rgba(0, 0, 0, 0.06);
    }

    /* 상세 화면 신용어/구용어 스타일 */
    .anatomy-detail-newterm {
        font-size: var(--h8-font-size-xl);
        font-weight: 600;
        margin-bottom: 4px;
    }

    .anatomy-detail-oldterm {
        font-size: var(--h8-font-size-sm);
        color: var(--h8-color-text-light);
        margin-bottom: 4px;
    }


    /* PC에서 관련해부학 헤더 */
    .mobile-popup-container .anatomy-popup-header {
        padding: var(--h8-spacing-sm) var(--h8-spacing-md);
        min-height: auto;
        border-bottom: 1px solid var(--h8-color-border-light);
        cursor: default;
    }

    .mobile-popup-container .anatomy-popup-toggle {
        display: none !important;
    }

    /* 상세 화면일 때 뒤로가기 버튼 표시 */
    .mobile-popup-container .anatomy-popup:has(.anatomy-detail.active) .anatomy-popup-back {
        display: flex !important;
    }

    .mobile-popup-container .anatomy-popup-title {
        font-size: var(--h8-font-size-sm);
        font-weight: 300;
        color: var(--h8-color-text-light);
    }

    /* PC에서 뒤로가기 화살표 가늘게 */
    .mobile-popup-container .anatomy-popup-back svg {
        stroke-width: 1.5;
    }

    /* PC에서 anatomy-list, anatomy-detail-content 패딩 */
    .mobile-popup-container .anatomy-list {
        padding: 8px;
    }

    .mobile-popup-container .anatomy-detail-content {
        padding: 16px;
    }

    .mobile-popup-container .anatomy-item {
        padding-left: 8px;
    }

    /* PC에서 anatomy-popup 하단 video-tags */
    .pc-video-tags {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 6px;
        padding: 10px 16px;
        border-top: 1px solid var(--h8-color-border-light);
        background: var(--h8-color-bg-card);
    }
    .pc-video-tags .video-tag-more {
        opacity: 0.5;
        cursor: default;
    }

    .pc-video-tags .video-tag {
        padding: 5px 12px;
        background: var(--h8-color-bg-hover);
        border-radius: var(--h8-radius-full);
        font-size: 11px;
    }

    /* PC에서 관련해부학 본문 항상 표시 */
    .mobile-popup-container .anatomy-popup-body {
        display: block !important;
        flex: 1;
        overflow: hidden auto !important;
        max-height: none !important;
        min-height: 0;
        transition: none !important;
    }

    /* PC에서 이전/다음 화살표 위치 - 화면 가장자리 기준 */
    .video-nav-prev {
        left: 20px;
    }

    .video-nav-next {
        right: 20px;
    }

    /* PC: 사전 팝업 */
    .dict-popup-wrapper {
        padding: 40px;
    }

    .dict-popup-container {
        max-width: 560px;
    }

    /* PC: 사전 팝업 화살표 표시 */
    .dict-popup-wrapper .video-nav-arrow {
        display: flex;
    }

    .dict-popup-wrapper .video-nav-prev {
        left: 20px;
    }

    .dict-popup-wrapper .video-nav-next {
        right: 20px;
    }
}

/* iPad 세로 모드 - 팝업을 화면에 맞게 */
@media (min-width: 769px) and (max-width: 1100px) {
    /* 비디오 그리드 3열 */
    .videos-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .mobile-popup-wrapper {
        overflow-x: hidden;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: 1fr auto auto 1fr;
        place-items: center;
        row-gap: 40px;
        column-gap: 20px;
        padding: 40px;
    }

    .mobile-popup-container {
        width: calc(100vw - 80px) !important;
        grid-template-columns: 65% 35% !important;
        grid-template-rows: auto calc((100vw - 80px) * 0.65) !important;
    }

    .mobile-popup-container .video-player {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
    }

    .mobile-popup-container > .anatomy-popup {
        height: 100% !important;
        max-height: calc((100vw - 80px) * 0.65) !important;
        overflow-y: auto !important;
    }

    /* 팝업 컨테이너 그리드 배치 */
    .mobile-popup-container {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* 화살표 팝업 아래 배치 */
    .video-nav-arrow {
        position: static;
        grid-row: 3;
    }

    .video-nav-prev {
        grid-column: 1;
        justify-self: start;
    }

    .video-nav-next {
        grid-column: 3;
        justify-self: end;
    }

    .video-nav-arrow:hover {
        transform: scale(1.05);
    }
}

/* ===== Scrollbar ===== */
/* 내부 스크롤바 스타일 */
.toc-scroll-content {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent; /* Firefox */
}

.toc-scroll-content::-webkit-scrollbar {
    width: 5px;
}

.toc-scroll-content::-webkit-scrollbar-track {
    background: transparent;
}

.toc-scroll-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.toc-scroll-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

.video-toc-panel::-webkit-scrollbar-button {
    display: none;
}

/* 팝업/바텀시트 스크롤바 스타일 */
.bottomsheet-content::-webkit-scrollbar,
.video-popup-content::-webkit-scrollbar {
    width: 5px;
}

.bottomsheet-content::-webkit-scrollbar-track,
.video-popup-content::-webkit-scrollbar-track {
    background: transparent;
}

.bottomsheet-content::-webkit-scrollbar-thumb,
.video-popup-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.bottomsheet-content::-webkit-scrollbar-thumb:hover,
.video-popup-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

.bottomsheet-content::-webkit-scrollbar-button,
.video-popup-content::-webkit-scrollbar-button {
    display: none;
}

/* ===== 내 저장 (Save Section) ===== */
/* ===== 사이드바(TOC) 내 저장 폴더 ===== */
/* ===== Sidebar Sections ===== */
.toc-section {
    padding: 0 10px;
    margin-bottom: 2px;
}

.toc-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--h8-radius-sm);
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}
.toc-section-header:hover {
    background: var(--h8-color-bg-hover);
}

.toc-section.active > .toc-section-header {
    background: var(--h8-color-primary-light, rgba(201, 165, 93, 0.12));
}
.toc-section.active > .toc-section-header .toc-section-label {
    color: var(--h8-color-primary);
}
.toc-section.active > .toc-section-header .toc-section-icon {
    color: var(--h8-color-primary);
}

.toc-section-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--h8-color-text-muted);
}

.toc-section-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--h8-color-text);
    letter-spacing: 0.01em;
}

.toc-section-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    color: var(--h8-color-text-muted);
    background: var(--h8-color-bg-hover);
    padding: 1px 6px;
    border-radius: var(--h8-radius-full);
}
.toc-section-badge:empty { display: none; }

.toc-section-chevron {
    margin-left: auto;
    color: var(--h8-color-text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.dict-root-folder.expanded .toc-section-chevron {
    transform: rotate(180deg);
}

/* 내 저장 */
.toc-save-section {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--h8-color-border-light);
}
.toc-save-section .toc-save-header {
    cursor: pointer;
}
.toc-save-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
}
.toc-save-section.expanded .toc-save-body {
    max-height: none;
    opacity: 1;
}
.toc-save-section.expanded .toc-section-chevron {
    transform: rotate(180deg);
}
.toc-save-folder-list {
    list-style: none;
    margin: 0;
    padding: 2px 4px 2px 12px;
}
.toc-save-folder-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 10px;
    font-size: 12.5px;
    color: var(--h8-color-text);
    cursor: pointer;
    border-radius: var(--h8-radius-sm);
    transition: background 0.15s;
}
.toc-save-folder-item:hover {
    background: var(--h8-color-bg-hover);
}
.toc-save-folder-item.active {
    background: var(--h8-color-primary-light, rgba(201, 165, 93, 0.12));
    color: var(--h8-color-primary);
}
.toc-save-folder-item.active .toc-sf-icon path {
    fill: var(--h8-color-primary);
    opacity: 1;
}
.toc-save-folder-item .toc-sf-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--h8-color-text-muted);
}
.toc-save-folder-item .toc-sf-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.toc-save-folder-item .toc-sf-count {
    font-size: 10px;
    color: var(--h8-color-text-muted);
}
/* 폴더 순서 바꾸기 — 드래그(PC) + ▲▼(터치·정확한 한 칸 이동) */
.toc-save-folder-item .toc-sf-ord {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-left: 2px;
    opacity: 0;
    transition: opacity 0.12s;
}
.toc-save-folder-item:hover .toc-sf-ord,
.toc-save-folder-item:focus-within .toc-sf-ord { opacity: 1; }
.toc-save-folder-item .toc-sf-ord button {
    width: 14px;
    height: 9px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--h8-color-text-muted);
    font-size: 7px;
    line-height: 9px;
    cursor: pointer;
    border-radius: 2px;
}
.toc-save-folder-item .toc-sf-ord button:hover:not(:disabled) {
    background: var(--h8-color-bg-hover);
    color: var(--h8-color-primary);
}
.toc-save-folder-item .toc-sf-ord button:disabled { opacity: 0.25; cursor: default; }
/* hover가 없는 기기(터치)에서는 화살표를 늘 보이게 — 드래그 대신 쓸 수 있어야 한다 */
@media (hover: none) {
    .toc-save-folder-item .toc-sf-ord { opacity: 0.55; }
}
.toc-save-folder-item.dragging { opacity: 0.45; }
.toc-save-folder-item.drag-over-up { box-shadow: inset 0 2px 0 0 var(--h8-color-primary, #c9a55d); }
.toc-save-folder-item.drag-over-dn { box-shadow: inset 0 -2px 0 0 var(--h8-color-primary, #c9a55d); }
.toc-save-add {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 11.5px;
    color: var(--h8-color-text-muted);
    cursor: pointer;
    margin-top: 2px;
    border-radius: var(--h8-radius-sm);
    transition: color 0.15s, background 0.15s;
}
.toc-save-add:hover {
    color: var(--h8-color-primary);
    background: var(--h8-color-bg-hover);
}
.toc-save-add svg {
    flex-shrink: 0;
}

/* ===== 폴더 콘텐츠 뷰 (Folder View) ===== */
.folder-view {
    padding: 12px 16px;
    overflow-y: auto;
    height: 100%;
}

.folder-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--h8-color-border);
}

.folder-view-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--h8-color-text);
}

.folder-view-title .folder-emoji {
    font-size: 18px;
}

.folder-view-count {
    font-size: 12px;
    color: var(--h8-color-text-muted);
    font-weight: 400;
}

.folder-view-actions {
    display: flex;
    gap: 6px;
}

.folder-view-actions button {
    padding: 4px 10px;
    font-size: 11px;
    border: 1px solid var(--h8-color-border);
    border-radius: 4px;
    background: var(--h8-color-bg-card);
    color: var(--h8-color-text-muted);
    cursor: pointer;
    transition: var(--h8-transition-fast);
}

.folder-view-actions button:hover {
    border-color: var(--h8-color-primary);
    color: var(--h8-color-primary);
}

.folder-view-actions button.danger:hover {
    border-color: #e53e3e;
    color: #e53e3e;
}

.folder-view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 152px));
    gap: 12px;
    align-items: start;
}
.folder-view-grid .home-card {
    width: 100%;
}

.folder-view-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--h8-color-text-muted);
    font-size: 13px;
}

/* 폴더 뷰 드래그 상태 */
.folder-view-grid [data-folder-idx].dragging {
    opacity: 0.35;
}
.folder-view-grid [data-folder-idx].drag-over {
    outline: 2px dashed var(--h8-color-primary);
    outline-offset: 2px;
}
.folder-view-grid [data-folder-idx] {
    cursor: grab;
}
.folder-view-grid [data-folder-idx]:active {
    cursor: grabbing;
}

/* 사이드바 숨김 (마이페이지 등) */
.toc-hidden { display: none !important; }

/* ===== 마이페이지 ===== */
.my-page-view {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}
.mp-login-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    text-align: center;
}
.mp-login-prompt button:hover { opacity: 0.85; }
.mp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.mp-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--h8-color-text);
}
.mp-add-folder {
    padding: 6px 14px;
    border: 1px solid var(--h8-color-border);
    border-radius: 8px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.mp-add-folder:hover { background: var(--h8-color-bg-hover); }

/* 폴더 그리드 */
.mp-folders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.mp-folder-card {
    background: var(--h8-color-bg-card);
    border: 1px solid var(--h8-color-border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}
.mp-folder-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.mp-folder-previews {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    aspect-ratio: 16 / 10;
    background: var(--h8-color-bg-hover);
}
.mp-folder-previews img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mp-folder-ph {
    background: var(--h8-color-bg-hover);
}
.mp-folder-info {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mp-folder-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--h8-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-folder-count {
    font-size: 11px;
    color: var(--h8-color-text-muted);
    flex-shrink: 0;
    margin-left: 8px;
}
.mp-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--h8-color-text-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* 현황 카드 행 */
.mp-section-row {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}
.mp-info-card {
    flex: 1;
    background: var(--h8-color-bg-card);
    border: 1px solid var(--h8-color-border);
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
}
.mp-info-label {
    display: block;
    font-size: 11px;
    color: var(--h8-color-text-muted);
    margin-bottom: 4px;
}
.mp-info-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--h8-color-text);
}
.mp-info-value small {
    font-size: 12px;
    font-weight: 400;
    color: var(--h8-color-text-muted);
}

/* 설정 섹션 */
.mp-settings-section {
    border: 1px solid var(--h8-color-border);
    border-radius: 10px;
    padding: 16px;
}
.mp-settings-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--h8-color-text);
    margin-bottom: 8px;
}
.mp-btn-sm {
    padding: 5px 12px;
    border: 1px solid var(--h8-color-border);
    border-radius: 6px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.mp-btn-sm:hover { background: var(--h8-color-bg-hover); }
.mp-btn-sm.mp-btn-danger {
    color: #e74c3c;
    border-color: #e74c3c50;
    background: transparent;
}
.mp-btn-sm.mp-btn-danger:hover { background: #e74c3c10; }

/* 2열 그리드 (플랜 + 통계 / 설정 + 계정) */
.mp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.mp-grid-full {
    grid-column: 1 / -1;
}
@media (max-width: 600px) {
    .mp-grid { grid-template-columns: 1fr; }
}

/* 플랜 카드 */
.mp-plan {
    background: linear-gradient(135deg, var(--h8-color-primary) 0%, #a04040 100%);
    color: #fff;
    border-radius: 12px;
    padding: 24px;
}
.mp-plan-label {
    font-size: 11px;
    opacity: 0.8;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mp-plan-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}
.mp-plan-desc {
    font-size: 13px;
    opacity: 0.85;
    margin-bottom: 16px;
}
.mp-plan-upgrade {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.mp-plan-upgrade:hover {
    background: rgba(255,255,255,0.3);
}

/* 섹션 카드 */
.mp-section {
    background: var(--h8-color-bg-card);
    border: 1px solid var(--h8-color-border);
    border-radius: 12px;
    padding: 20px;
}
.mp-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--h8-color-text);
    margin-bottom: 14px;
}

/* 학습 현황 통계 */
.mp-stats {
    display: flex;
    gap: 12px;
}
.mp-stat {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    background: var(--h8-color-bg-hover);
    border-radius: 10px;
}
.mp-stat-num {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--h8-color-primary);
    line-height: 1.2;
}
.mp-stat-label {
    display: block;
    font-size: 11px;
    color: var(--h8-color-text-muted);
    margin-top: 2px;
}

/* 설정 행 */
.mp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--h8-color-border);
}
.mp-row:last-child { border-bottom: none; }
.mp-row-label {
    font-size: 13px;
    color: var(--h8-color-text);
}
.mp-row-single {
    justify-content: flex-start;
}
.mp-hidden { display: none !important; }

/* 셀렉트 */
.mp-select {
    padding: 6px 10px;
    border: 1px solid var(--h8-color-border);
    border-radius: 6px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text);
    font-size: 13px;
    cursor: pointer;
}

/* 용어 토글 */
.mp-term-toggle {
    display: flex;
    border: 1px solid var(--h8-color-border);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: none;
    padding: 0;
}
.mp-term-opt {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--h8-color-text-muted);
    transition: all 0.15s;
}
.mp-term-toggle:not(.old) .mp-term-opt[data-val="new"] {
    background: var(--h8-color-primary);
    color: #fff;
}
.mp-term-toggle.old .mp-term-opt[data-val="old"] {
    background: var(--h8-color-primary);
    color: #fff;
}

/* 비밀번호 폼 */
.mp-pw-form {
    margin-bottom: 12px;
}
.mp-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--h8-color-border);
    border-radius: 8px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text);
    font-size: 13px;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.mp-input:focus {
    outline: none;
    border-color: var(--h8-color-primary);
}

/* 버튼 */
.mp-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--h8-color-primary);
    color: #fff;
    transition: opacity 0.15s;
}
.mp-btn:hover { opacity: 0.85; }
.mp-btn-outline {
    background: none;
    border: 1px solid var(--h8-color-border);
    color: var(--h8-color-text);
}
.mp-btn-outline:hover { background: var(--h8-color-bg-hover); opacity: 1; }
.mp-btn-danger {
    background: #dc3545;
}
.mp-btn-danger:hover { opacity: 0.85; }

/* ===== 폴더에 추가 드롭다운 ===== */
.add-to-folder-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--h8-color-border);
    border-radius: 50%;
    background: var(--h8-color-bg-card);
    color: var(--h8-color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--h8-transition-fast);
    flex-shrink: 0;
}

.add-to-folder-btn:hover {
    border-color: var(--h8-color-primary);
    color: var(--h8-color-primary);
}

.add-to-folder-wrap {
    position: relative;
}

.folder-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: var(--h8-color-bg-card);
    border: 1px solid var(--h8-color-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 50;
    padding: 4px 0;
}

.folder-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

.folder-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--h8-color-text);
    cursor: pointer;
    transition: background 0.15s;
}

.folder-dropdown-item:hover {
    background: var(--h8-color-bg-hover, rgba(0,0,0,0.04));
}

.folder-dropdown-item .check-icon {
    width: 14px;
    flex-shrink: 0;
    color: var(--h8-color-primary);
}

.folder-dropdown-item .check-icon.empty {
    opacity: 0;
}

.folder-dropdown-new {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--h8-color-primary);
    background: none;
    border: none;
    border-top: 1px solid var(--h8-color-border);
    cursor: pointer;
    transition: background 0.15s;
}

.folder-dropdown-new:hover {
    background: var(--h8-color-bg-hover, rgba(0,0,0,0.04));
}

/* ===== 글로벌 폴더 선택 모달 ===== */
.folder-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 9998;
}

.folder-picker {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    background: var(--h8-color-bg-card, #fff);
    border: 1px solid var(--h8-color-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
@media (max-width: 768px) {
    .folder-picker {
        width: calc(100% - 40px);
        max-width: 300px;
    }
}

.folder-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--h8-color-border);
}

.folder-picker-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--h8-color-text-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.folder-picker-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    max-height: 260px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.folder-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--h8-color-text);
    cursor: pointer;
    transition: background 0.15s;
}

.folder-picker-item:hover {
    background: var(--h8-color-bg-hover, rgba(0,0,0,0.04));
}

.folder-picker-item .fp-check {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--h8-color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    color: transparent;
    transition: all 0.15s;
}

.folder-picker-item.checked .fp-check {
    background: var(--h8-color-primary);
    border-color: var(--h8-color-primary);
    color: #fff;
}

.folder-picker-item .fp-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-picker-item .fp-count {
    font-size: 11px;
    color: var(--h8-color-text-muted);
}

.folder-picker-new {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--h8-color-primary);
    background: none;
    border: none;
    border-top: 1px solid var(--h8-color-border);
    cursor: pointer;
    transition: background 0.15s;
}

.folder-picker-new:hover {
    background: var(--h8-color-bg-hover, rgba(0,0,0,0.04));
}
.folder-picker-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--h8-color-border);
}
.folder-picker-done {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: var(--h8-color-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.folder-picker-done:hover {
    opacity: 0.85;
}
.folder-picker-input {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--h8-color-border);
}
.folder-picker-input.hidden { display: none; }
.folder-picker-input-field {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--h8-color-border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text);
    outline: none;
}
.folder-picker-input-field:focus {
    border-color: var(--h8-color-primary);
}
.folder-picker-input-ok,
.folder-picker-input-cancel {
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}
.folder-picker-input-ok {
    background: var(--h8-color-primary);
    color: #fff;
}
.folder-picker-input-cancel {
    background: var(--h8-color-bg-hover, #eee);
    color: var(--h8-color-text-muted);
}

/* ===== Dict Detail Page (Inline) ===== */
.dict-detail-view {
    padding: 24px 32px;
    max-width: 1100px;
    width: 100%;
}
.dict-detail-view.hidden { display: none; }

/* 모바일 사전 닫기 버튼 */
.dd-close-btn {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--h8-color-bg-hover);
    border-radius: 50%;
    cursor: pointer;
    color: var(--h8-color-text);
    font-size: 20px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.dd-close-btn:active { background: var(--h8-color-border); }

/* Breadcrumb */
.pg-bc {
    font-size: 12px;
    color: var(--h8-color-text-muted);
    margin-bottom: 8px;
}
.pg-bc a {
    color: var(--h8-color-text-muted);
    text-decoration: none;
    cursor: pointer;
}
.pg-bc a:hover { color: var(--h8-color-text); }

/* Title */
.pg-t {
    font-size: 22px;
    font-weight: 800;
    color: var(--h8-color-text);
    line-height: 1.3;
}

/* Latin subtitle */
.pg-s {
    font-size: 13px;
    font-style: italic;
    color: var(--h8-color-text-muted);
    margin-top: 2px;
    margin-bottom: 6px;
}

/* Part indicators */
.pg-pts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.pg-pt {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--h8-color-text-light);
}
.pg-pt .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Two-column layout */
.pg-ly {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 20px;
    align-items: start;
}

/* Section */
.sec {
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius);
    margin-bottom: 16px;
    overflow: hidden;
}
.sec-h {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--h8-color-text);
    border-bottom: 1px solid var(--h8-color-border-light);
    background: var(--h8-color-bg-card);
}
.sec-h .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sec-b {
    padding: 14px;
}
.sec-b p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--h8-color-text-light);
}

/* Tabs */
.tb {
    display: flex;
    border-bottom: 1px solid var(--h8-color-border-light);
}
.tb-b {
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--h8-color-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.tb-b:hover { color: var(--h8-color-text-light); }
.tb-b.active {
    color: var(--h8-color-text);
    border-bottom-color: var(--h8-color-primary);
}
.tp { display: none; padding: 14px; }
.tp.active { display: block; }

/* Muscle field grid */
.mfg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 10px;
}
.mf {
    padding: 8px 10px;
    background: var(--h8-color-bg-hover);
    border-radius: var(--h8-radius-sm);
}
.mf-k {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--h8-color-text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.mf-v {
    font-size: 12px;
    font-weight: 500;
    color: var(--h8-color-text);
}

/* Photo grid */
.phg {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.phi {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--h8-radius-sm);
    overflow: hidden;
    background: var(--h8-color-bg-hover);
}
.phi img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.phi:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); transform: scale(1.02); }
.phi-l {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 6px;
    font-size: 10px;
    color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    text-align: center;
}
.phi-ph {
    aspect-ratio: 1;
    background: var(--h8-color-bg-hover);
    border-radius: var(--h8-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--h8-color-text-muted);
    text-align: center;
    padding: 8px;
    line-height: 1.4;
}

/* Video mini card */
.vm {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: var(--h8-radius-sm);
    transition: background 0.15s;
}
.vm:hover { background: var(--h8-color-bg-hover); }
.vm-th {
    width: 44px;
    height: 28px;
    background: #1a1a1a;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-th svg {
    width: 12px;
    height: 12px;
    fill: #fff;
}
.vm-t {
    font-size: 12px;
    font-weight: 500;
    color: var(--h8-color-text);
    line-height: 1.3;
}
.vm-m {
    font-size: 10px;
    color: var(--h8-color-text-muted);
    margin-top: 1px;
}

/* Side card */
.sc {
    background: var(--h8-color-bg-card);
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius);
    margin-bottom: 12px;
    overflow: hidden;
}
.sc-h {
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--h8-color-text-light);
    border-bottom: 1px solid var(--h8-color-border-light);
    background: var(--h8-color-bg-card);
}
.sc-b { padding: 10px 12px; }

/* Side field */
.sf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
}
.sf-k {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--h8-color-text-muted);
    letter-spacing: 0.3px;
}
.sf-v {
    font-size: 12px;
    color: var(--h8-color-text-light);
    text-align: right;
}

/* Structure item (related) */
.st {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--h8-color-border-light);
    cursor: pointer;
    transition: background 0.15s;
}
.st:last-child { border-bottom: none; }
.st:hover { background: var(--h8-color-bg-hover); margin: 0 -12px; padding: 7px 12px; }
.st-info { flex: 1; min-width: 0; }
.st-n {
    font-size: 12px;
    font-weight: 500;
    color: var(--h8-color-text);
}
.st-e {
    font-size: 10px;
    font-style: italic;
    color: var(--h8-color-text-muted);
}
.st-b {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-left: 8px;
}

/* Tags */
.stags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.stag {
    font-size: 11px;
    border: 1px solid var(--h8-color-border);
    border-radius: 12px;
    padding: 2px 9px;
    color: var(--h8-color-text-light);
    background: var(--h8-color-bg);
    white-space: nowrap;
}

/* Detail image area */
.dict-detail-image {
    position: relative;
    width: 100%;
    border-radius: var(--h8-radius);
    overflow: hidden;
    margin-bottom: 12px;
}
.dict-detail-image img,
.dict-detail-image svg {
    width: 100%;
    display: block;
}

/* Detail path toggle & layer slider (reuse from popup) */
.dict-detail-view .dict-path-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 12px;
    color: var(--h8-color-text-muted);
}
.dict-detail-view .dict-layer-slider {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

/* Save button in detail header */
.dict-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    margin-bottom: 12px;
}
.dict-detail-actions button {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius-sm);
    background: var(--h8-color-bg-card);
    color: var(--h8-color-text-light);
    cursor: pointer;
    transition: background 0.15s;
}
.dict-detail-actions button:hover { background: var(--h8-color-bg-hover); }
.dict-detail-actions button svg { width: 14px; height: 14px; }
.dict-detail-actions button.saved { color: var(--h8-color-primary); }
.dict-detail-actions button.saved svg { fill: var(--h8-color-primary); }

/* Mobile responsive */
@media (max-width: 768px) {
    .dict-detail-view {
        padding: 16px;
    }
    .dd-close-btn { display: flex; }
    .dict-detail-view { position: relative; }
    .pg-ly {
        grid-template-columns: 1fr;
    }
    .pg-t { font-size: 20px; }
    .mfg { grid-template-columns: 1fr; }
}


/* ===== Quiz ===== */

/* Sidebar quiz button */
/* 퀴즈 섹션은 toc-section-header 스타일 상속 */
.toc-quiz-section { padding-bottom: 2px; }

/* Quiz view container */
.quiz-view {
    padding: 24px 32px;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}
.quiz-view.hidden { display: none; }

/* Setup screen */
.qz-setup { text-align: center; padding: 40px 0; }
.qz-setup-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 6px;
}
.qz-setup-sub {
    font-size: 13px;
    color: var(--h8-color-text-muted);
    margin-bottom: 28px;
}
.qz-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
}
.qz-mode {
    padding: 14px;
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius);
    cursor: pointer;
    text-align: left;
    background: var(--h8-color-bg-card);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.qz-mode:hover { border-color: var(--h8-color-text-muted); }
.qz-mode.selected {
    border-color: var(--h8-color-primary);
    box-shadow: 0 0 0 1px var(--h8-color-primary);
}
.qz-mode-icon { font-size: 20px; margin-bottom: 6px; }
.qz-mode-name { font-size: 13px; font-weight: 600; }
.qz-mode-desc { font-size: 11px; color: var(--h8-color-text-muted); margin-top: 2px; }

/* Region selector */
.qz-regions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 24px;
}
.qz-region {
    padding: 6px 14px;
    font-size: 12px;
    border: 1px solid var(--h8-color-border);
    border-radius: 20px;
    cursor: pointer;
    background: var(--h8-color-bg-card);
    transition: all 0.15s;
}
.qz-region:hover { border-color: var(--h8-color-text-muted); }
.qz-region.selected {
    background: var(--h8-color-primary);
    color: #fff;
    border-color: var(--h8-color-primary);
}

/* Count selector */
.qz-counts {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 28px;
}
.qz-count {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius-sm);
    cursor: pointer;
    background: var(--h8-color-bg-card);
    transition: all 0.15s;
}
.qz-count:hover { border-color: var(--h8-color-text-muted); }
.qz-count.selected {
    background: var(--h8-color-text);
    color: #fff;
    border-color: var(--h8-color-text);
}

/* Start button */
.qz-start {
    padding: 12px 40px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: var(--h8-radius);
    background: var(--h8-color-primary);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}
.qz-start:hover { background: var(--h8-color-primary-hover); }
.qz-start:disabled { opacity: 0.5; cursor: default; }

/* Progress bar */
.qz-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.qz-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--h8-color-border-light);
    border-radius: 2px;
    overflow: hidden;
}
.qz-progress-fill {
    height: 100%;
    background: var(--h8-color-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.qz-progress-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--h8-color-text-muted);
    white-space: nowrap;
}

/* Question card */
.qz-card {
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius-lg);
    overflow: hidden;
    background: var(--h8-color-bg-card);
}
.qz-card-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--h8-color-border-light);
}
.qz-q-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--h8-color-primary);
    margin-bottom: 6px;
}
.qz-q-text {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}
.qz-q-hint {
    font-size: 12px;
    color: var(--h8-color-text-muted);
    margin-top: 4px;
    font-style: italic;
}
.qz-card-body { padding: 16px 20px 20px; }

/* Answer options */
.qz-options { display: flex; flex-direction: column; gap: 8px; }
.qz-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    background: var(--h8-color-bg-card);
}
.qz-opt:hover { border-color: var(--h8-color-text-muted); background: var(--h8-color-bg-hover); }
.qz-opt-key {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--h8-color-bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--h8-color-text-muted);
    flex-shrink: 0;
}
.qz-opt-text { flex: 1; }
.qz-opt.correct {
    border-color: var(--h8-color-success);
    background: rgba(93,155,109,0.08);
}
.qz-opt.correct .qz-opt-key {
    background: var(--h8-color-success);
    color: #fff;
}
.qz-opt.wrong {
    border-color: var(--h8-color-danger);
    background: rgba(187,93,93,0.08);
}
.qz-opt.wrong .qz-opt-key {
    background: var(--h8-color-danger);
    color: #fff;
}
.qz-opt.disabled { pointer-events: none; opacity: 0.6; }
.qz-opt.correct.disabled, .qz-opt.wrong.disabled { opacity: 1; }

/* Feedback */
.qz-feedback {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--h8-radius-sm);
    font-size: 12px;
    line-height: 1.6;
    display: none;
}
.qz-feedback.show { display: block; }
.qz-feedback.correct {
    background: rgba(93,155,109,0.08);
    border: 1px solid rgba(93,155,109,0.2);
    color: var(--h8-color-success);
}
.qz-feedback.wrong {
    background: rgba(187,93,93,0.08);
    border: 1px solid rgba(187,93,93,0.2);
    color: var(--h8-color-danger);
}

/* Next button */
.qz-next {
    display: none;
    margin-top: 16px;
    padding: 10px 28px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: var(--h8-radius);
    background: var(--h8-color-text);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}
.qz-next.show { display: inline-block; }
.qz-next:hover { background: #1a1a1a; }

/* Results screen */
.qz-result { text-align: center; padding: 40px 0; }
.qz-result-score {
    font-size: 56px;
    font-weight: 800;
    color: var(--h8-color-primary);
    line-height: 1;
}
.qz-result-label {
    font-size: 14px;
    color: var(--h8-color-text-muted);
    margin-top: 4px;
    margin-bottom: 24px;
}
.qz-result-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 28px;
}
.qz-stat {
    text-align: center;
}
.qz-stat-val {
    font-size: 20px;
    font-weight: 700;
}
.qz-stat-val.green { color: var(--h8-color-success); }
.qz-stat-val.red { color: var(--h8-color-danger); }
.qz-stat-lbl {
    font-size: 11px;
    color: var(--h8-color-text-muted);
}

/* Result item list */
.qz-result-list { text-align: left; margin-bottom: 28px; }
.qz-result-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--h8-color-border-light);
    font-size: 12px;
}
.qz-result-item:last-child { border-bottom: none; }
.qz-ri-icon { font-size: 14px; flex-shrink: 0; }
.qz-ri-q { flex: 1; color: var(--h8-color-text-light); }
.qz-ri-a { font-weight: 600; }

/* Result actions */
.qz-result-actions { display: flex; gap: 10px; justify-content: center; }
.qz-btn-retry {
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius);
    background: var(--h8-color-bg-card);
    cursor: pointer;
    transition: background 0.15s;
}
.qz-btn-retry:hover { background: var(--h8-color-bg-hover); }
.qz-btn-home {
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: var(--h8-radius);
    background: var(--h8-color-primary);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}
.qz-btn-home:hover { background: var(--h8-color-primary-hover); }

/* Mastery Progress Bar */
.qz-mastery-bar { margin-bottom: 24px; text-align: left; }
.qz-mastery-label { font-size: 12px; color: var(--h8-color-text-muted); margin-bottom: 6px; }
.qz-mastery-track {
    height: 8px;
    background: var(--h8-color-border);
    border-radius: var(--h8-radius-full);
    overflow: hidden;
}
.qz-mastery-fill {
    height: 100%;
    background: var(--h8-color-success);
    border-radius: var(--h8-radius-full);
    transition: width 0.3s;
}

/* Mastery Badge */
.qz-mastery-badge {
    font-size: 15px;
    font-weight: 600;
    color: var(--h8-color-success);
    margin: 8px 0 16px;
}

/* Mastery Tags */
.qz-mastery-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--h8-radius-full);
    font-weight: 600;
    white-space: nowrap;
}
.qz-mastery-tag.mastered { background: rgba(93, 155, 109, 0.15); color: var(--h8-color-success); }
.qz-mastery-tag.progress { background: rgba(201, 165, 93, 0.15); color: var(--h8-color-warning); }
.qz-mastery-tag.reset { background: rgba(187, 93, 93, 0.1); color: var(--h8-color-danger); }

/* Result Item Extensions */
.qz-ri-type { font-size: 12px; flex-shrink: 0; margin-right: 4px; }
.qz-ri-mastery { flex-shrink: 0; margin-left: auto; }

/* Mobile */
@media (max-width: 768px) {
    .quiz-view { padding: 16px; }
    .qz-modes { grid-template-columns: 1fr; }
    .qz-q-text { font-size: 15px; }
    .qz-result-score { font-size: 44px; }
}


/* ===== Home Nav Cards ===== */
.home-nav-cards {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}
.home-nav-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    min-height: 104px;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border: 1px solid var(--h8-color-border);
}
.home-nav-card:hover { transform: translateY(-2px); box-shadow: var(--h8-shadow-sm); }
.home-nav-video { background: linear-gradient(135deg, #fdf8f5 0%, #f9f0ea 100%); }
.home-nav-dict { background: linear-gradient(135deg, #f5f7fd 0%, #eef1fa 100%); }
.home-nav-3d { background: linear-gradient(135deg, #f2faf6 0%, #e6f5ee 100%); }
.home-nav-body {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}
.home-nav-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.home-nav-video .home-nav-icon {
    background: rgba(187, 93, 93, 0.1);
    color: var(--h8-color-primary);
}
.home-nav-video .home-nav-icon svg { width: 14px; height: 14px; }
.home-nav-dict .home-nav-icon {
    background: var(--h8-color-accent-light);
    color: var(--h8-color-accent);
}
.home-nav-dict .home-nav-icon svg { width: 18px; height: 18px; }
.home-nav-3d .home-nav-icon {
    background: rgba(34, 139, 94, 0.1);
    color: #228b5e;
}
.home-nav-3d .home-nav-icon svg { width: 18px; height: 18px; }
.home-nav-body h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--h8-color-text);
    margin-bottom: 2px;
}
.home-nav-body p {
    font-size: 11px;
    color: var(--h8-color-text-muted);
}
.home-nav-deco {
    position: absolute;
    right: -8px;
    bottom: -12px;
    display: flex;
    gap: 0;
    opacity: 0.12;
    pointer-events: none;
}
.home-nav-deco img {
    height: 110px;
    object-fit: contain;
}
.home-nav-deco img:last-child {
    margin-left: -30px;
    opacity: 0.7;
}

/* ===== Home Sections & Scroll Row ===== */
.home-section {
    grid-column: 1 / -1;
    margin-bottom: 24px;
}
.home-section:last-child { margin-bottom: 0; }
.home-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.home-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--h8-color-text);
    letter-spacing: -0.01em;
}
.home-scroll-row {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 16px 0 12px;
    margin: -16px 0 -12px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.home-scroll-row::-webkit-scrollbar { height: 3px; }
.home-scroll-row::-webkit-scrollbar-track { background: transparent; }
.home-scroll-row::-webkit-scrollbar-thumb { background: var(--h8-color-border); border-radius: 2px; }

/* ===== Home Scroll Cards ===== */
.home-card {
    flex-shrink: 0;
    width: 152px;
    cursor: pointer;
    scroll-snap-align: start;
    border-radius: 10px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.home-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.home-card-thumb {
    width: 100%;
    height: 92px;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--h8-color-bg-hover);
}
.home-card-thumb-bookmark {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe) !important;
}
.home-card-thumb-bookmark svg {
    color: #6366f1;
    opacity: 0.25;
}
.home-card-thumb img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}
/* 비디오 홈카드: 정사각형 텍스트 레이어 (object-fit:cover와 동일 크롭) */
.home-card-thumb-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: auto;
}
.home-thumb-texts-wrap {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    padding-bottom: 100%;
    transform: translateY(-50%);
    container-type: inline-size;
    pointer-events: none;
    z-index: 2;
}
.home-thumb-texts-wrap .thumb-texts,
.home-thumb-texts-wrap .thumb-texts-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.home-card-initial {
    position: absolute;
    font-size: 40px;
    font-weight: 800;
    opacity: 0.07;
    z-index: 0;
}
.home-card-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 4px;
    z-index: 2;
}
.home-card-badge.badge-muscle {
    background: rgba(187, 93, 93, 0.1);
    color: var(--h8-color-primary);
}
.home-card-badge.badge-bone {
    background: var(--h8-color-accent-light);
    color: var(--h8-color-accent);
}
.home-card-badge.badge-bookmark {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}
.home-card-badge.badge-photo {
    background: rgba(93, 157, 125, 0.12);
    color: #5d9b6d;
}

/* 폴더뷰 북마크 카드 */
.bookmark-card {
    background: var(--h8-color-bg-card);
    border-radius: var(--h8-radius-lg);
    overflow: hidden;
    box-shadow: var(--h8-shadow-sm);
    cursor: pointer;
    transition: transform var(--h8-transition-fast), box-shadow var(--h8-transition-fast);
}
.bookmark-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--h8-shadow-md);
}
@media (hover: none) {
    .bookmark-card:hover {
        transform: none;
        box-shadow: var(--h8-shadow-sm);
    }
}
.home-card-play {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}
.home-card:hover .home-card-play { opacity: 1; }
.home-thumb-labels {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px 4px;
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
    z-index: 1;
    pointer-events: none;
}
.home-thumb-labels span {
    font-size: 8px;
    color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.3);
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.3;
}
.home-card-info {
    padding: 7px 2px 0;
}
.home-card-info h4 {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--h8-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.home-card-info p {
    font-size: 11px;
    color: var(--h8-color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* ===== Home Folder Cards (in scroll row) ===== */
.home-folder-card {
    flex-shrink: 0;
    width: 120px;
    cursor: pointer;
    border-radius: 10px;
    background: linear-gradient(145deg, #faf5ef 0%, #f3ebe0 100%);
    border: 1px solid #ebe0d3;
    padding: 16px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
    scroll-snap-align: start;
}
.home-folder-card:hover { transform: translateY(-2px); box-shadow: var(--h8-shadow-sm); }
.home-folder-icon {
    margin-bottom: 8px;
    line-height: 0;
}
.home-folder-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--h8-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
}
.home-folder-count {
    font-size: 10.5px;
    color: var(--h8-color-text-muted);
    margin-top: 2px;
}

/* Home responsive */
@media (max-width: 768px) {
    .home-nav-cards { grid-template-columns: 1fr; }
    .home-nav-card { min-height: 100px; }
}

/* ===== 3D Viewer Full View ===== */

/* 뷰어 활성 시 사이드바 숨기고 콘텐츠 풀폭 */
.videos-container.viewer3d-active .video-toc-panel,
.videos-container.viewer3d-active .video-toc-toggle { display: none !important; }
.videos-container.viewer3d-active .video-content-panel {
    padding: 0;
}
/* 뷰어 활성 시 scrollbar-gutter 제거 (우측 15px 빈 공간 방지) */
html:has(.viewer3d-active) { scrollbar-gutter: auto; }

/* 뷰 컨테이너 */
.viewer3d-view {
    display: flex;
    position: relative;
    height: calc(100vh - var(--h8-header-height));
    height: calc(100dvh - var(--h8-header-height));
    touch-action: manipulation;
}

/* ── 왼쪽 패널 (항상 투명, 내부 카드 분리) ── */
.v3d-left-stack {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: none;
    border: none;
    box-shadow: none;
    gap: 8px;
    pointer-events: none;
}
/* 검색 패널 (독립) */
.v3d-search-panel {
    pointer-events: auto;
    flex: 3;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.v3d-search-panel.dock-hidden {
    display: none !important;
}
/* 사전 패널 (독립) */
.v3d-dict-panel {
    pointer-events: auto;
    flex: 7;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.v3d-dict-panel.dock-hidden {
    display: none !important;
}

/* ── 검색 카드 (항상 상단, flex:3) ── */
.v3d-search-mode {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 0 12px 12px 0;
    border: 1px solid rgba(0,0,0,0.08);
    border-left: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.v3d-search-mode-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
}
.v3d-search-mode-head svg { flex-shrink: 0; color: var(--h8-color-text-muted); }
.v3d-search-mode-head input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 13px;
    color: var(--h8-color-text);
    min-width: 0;
}
.v3d-search-mode-head input::placeholder { color: var(--h8-color-text-muted); }
.v3d-search-mode-tabs.v3d-segment {
    display: flex;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.12);
    padding: 0;
    gap: 0;
}
.v3d-search-mode-filter {
    display: flex;
    gap: 4px;
    padding: 6px 12px 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.v3d-search-mode-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ── 사전 wrapper (head + tools + dict를 고정 비율로 묶음) ── */
.v3d-dict-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0,0,0,0.08);
    border-left: none;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.v3d-dict-panel .viewer3d-panel-head {
    display: flex;
    flex-shrink: 0;
}
.v3d-dict-panel .viewer3d-panel-dict {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.v3d-dict-panel .v3d-panel-close {
    display: flex;
}
.viewer3d-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--h8-color-border);
}
.viewer3d-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--h8-color-text);
    flex-shrink: 0;
}
.viewer3d-back-btn:hover { background: var(--h8-color-hover); }
.viewer3d-panel-title-wrap {
    flex: 1;
    min-width: 0;
}
.viewer3d-panel-parent {
    display: none;
    font-size: 13px;
    color: var(--h8-color-text-muted);
    cursor: pointer;
}
.viewer3d-panel-parent:hover {
    color: var(--h8-color-primary);
}
.dict-mode .viewer3d-panel-parent:not(:empty) {
    display: block;
}
.viewer3d-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--h8-color-text);
}
.viewer3d-panel-latin {
    display: none;
    font-size: 12px;
    color: var(--h8-color-text-muted);
    font-style: italic;
    margin-top: 2px;
}
.v3d-dict-panel.dict-mode .viewer3d-back-btn { display: none; }
.v3d-dict-panel.dict-mode .viewer3d-panel-latin { display: block; }
.v3d-panel-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--h8-color-text-muted);
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.v3d-panel-close:active { background: var(--h8-color-hover); }

/* 패널 도구: 검색 + 빠른 액션 */
.viewer3d-panel-tools {
    padding: 10px 14px;
    border-bottom: 1px solid var(--h8-color-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.viewer3d-search {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--h8-color-border);
    border-radius: 8px;
    font-size: 12px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text);
    outline: none;
    box-sizing: border-box;
}
.viewer3d-search:focus { border-color: var(--h8-color-primary); }
.viewer3d-region-filter {
    display: flex;
    gap: 3px;
    margin-bottom: 6px;
}
.v3d-region-chip {
    flex: 1;
    padding: 3px 0;
    font-size: 11px;
    border: 1px solid var(--h8-color-border);
    border-radius: 12px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.v3d-region-chip:hover { background: var(--h8-color-hover); }
.v3d-region-chip.active {
    background: var(--h8-color-primary);
    color: #fff;
    border-color: var(--h8-color-primary);
}
.viewer3d-quick-actions {
    display: flex;
    gap: 4px;
}
.viewer3d-qbtn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border: 1px solid var(--h8-color-border);
    border-radius: 6px;
    background: var(--h8-color-bg);
    cursor: pointer;
    color: var(--h8-color-text-muted);
    transition: all 0.15s;
}
.viewer3d-qbtn:hover { background: var(--h8-color-hover); color: var(--h8-color-text); }
.viewer3d-qbtn.disabled, .viewer3d-qbtn:disabled {
    opacity: 0.3;
    cursor: default;
}
.viewer3d-qbtn.active {
    background: var(--h8-color-primary);
    color: #fff;
    border-color: var(--h8-color-primary);
}
.viewer3d-qbtn-sep {
    width: 1px;
    height: 20px;
    background: var(--h8-color-border);
    flex-shrink: 0;
}
.viewer3d-hidden-count {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--h8-color-text);
    background: var(--h8-color-bg-card);
    border: 1px solid var(--h8-color-border);
    padding: 5px 14px;
    border-radius: 20px;
    white-space: nowrap;
    cursor: pointer;
    z-index: 25;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: background 0.15s;
}
.viewer3d-hidden-count:hover { background: var(--h8-color-bg-hover); }
.viewer3d-hidden-count:empty { display: none; }

/* 사전 리스트 불필요 — 항상 숨김 */
.viewer3d-panel-tools,
.v3d-dict-panel .viewer3d-pose-section,
.viewer3d-mesh-scroll { display: none !important; }
.viewer3d-panel-dict {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.viewer3d-panel-dict .viewer3d-dict-latin {
    display: none;
}
.viewer3d-panel-dict .v3d-dict-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    overscroll-behavior: contain;
}

/* 모델 선택 버튼 */
/* 포즈 섹션 */
.viewer3d-pose-section {
    border-bottom: 1px solid var(--h8-color-border);
    padding: 6px 10px;
}
.viewer3d-pose-section.hidden { display: none; }

/* 포즈 드롭다운 행 */
.v3d-pose-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.v3d-pose-row:last-child { margin-bottom: 0; }

/* 커스텀 드롭다운 */
.v3d-pose-dropdown {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 120px;
}
.v3d-pose-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 26px;
    padding: 0 6px 0 8px;
    border: 1px solid var(--h8-color-border);
    border-radius: 4px;
    background: var(--h8-color-surface);
    color: var(--h8-color-text);
    font-size: 11px;
    cursor: pointer;
    gap: 4px;
}
.v3d-pose-trigger:hover { border-color: var(--h8-color-accent); }
.v3d-pose-trigger svg { flex-shrink: 0; opacity: 0.5; transition: transform 0.2s; }
.v3d-pose-dropdown.open .v3d-pose-trigger { border-color: var(--h8-color-accent); }
.v3d-pose-dropdown.open .v3d-pose-trigger svg { transform: rotate(180deg); }
.v3d-pose-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v3d-pose-menu {
    display: none;
    position: absolute;
    left: 0;
    min-width: 140px;
    bottom: calc(100% + 4px);
    max-height: 180px;
    overflow-y: auto;
    background: var(--h8-color-bg-card);
    border: 1px solid var(--h8-color-border);
    border-radius: 6px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
    z-index: 50;
    padding: 4px;
    scrollbar-width: thin;
}
.v3d-pose-dropdown.open .v3d-pose-menu { display: block; }
.v3d-pose-menu-group {
    font-size: 9px;
    font-weight: 700;
    color: var(--h8-color-text-muted);
    padding: 5px 6px 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.v3d-pose-menu-item {
    display: block;
    width: 100%;
    padding: 5px 8px;
    border: none;
    border-radius: 3px;
    background: none;
    color: var(--h8-color-text);
    font-size: 11px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v3d-pose-menu-item:hover { background: var(--h8-color-bg-hover); }
.v3d-pose-menu-item.active {
    background: color-mix(in srgb, var(--h8-color-accent) 12%, transparent);
    color: var(--h8-color-accent);
    font-weight: 600;
}

/* 동작 해제(X) 버튼: 기본 숨김, 동작 선택 시 JS로 표시 */
.v3d-pose-close-btn {
    display: none;
    width: 26px;
    height: 26px;
    border: 1px solid var(--h8-color-border);
    border-radius: 4px;
    background: var(--h8-color-surface);
    color: var(--h8-color-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}
.v3d-pose-close-btn:hover {
    border-color: var(--h8-color-accent);
    color: var(--h8-color-accent);
}
/* 재생 컨트롤: 기본 숨김 (동작 선택 시 JS로 표시) */
.v3d-anim-btn,
.v3d-anim-scrubber,
.v3d-anim-pct { display: none; }

.v3d-anim-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--h8-color-border);
    border-radius: 4px;
    background: var(--h8-color-surface);
    color: var(--h8-color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}
.v3d-anim-btn:hover {
    border-color: var(--h8-color-accent);
    color: var(--h8-color-accent);
}
.v3d-anim-scrubber {
    flex: 1;
    max-width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--h8-color-border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.v3d-anim-scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--h8-color-accent);
    cursor: pointer;
}
.v3d-anim-pct {
    font-size: 10px;
    color: var(--h8-color-text-muted);
    min-width: 32px;
    text-align: right;
}

/* ── 모바일 포즈 바텀바 ── */
/* 포즈 플로팅 바 */
.v3d-pose-float-bar {
    display: none;
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    gap: 6px;
    height: 40px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    padding: 0 10px;
    z-index: 15;
    touch-action: manipulation;
}
.v3d-pose-float-bar.visible { display: flex; }
/* 액션 재생 바 (더블클릭 동작 재생 시 하단) */
.v3d-action-bar {
    display: none;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    gap: 8px;
    height: 40px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    padding: 0 6px 0 6px;
    z-index: 15;
    white-space: nowrap;
}
.v3d-action-bar.active { display: flex; }
.v3d-action-bar-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--h8-color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.v3d-action-bar-btn:hover { background: rgba(0,0,0,0.06); }
.v3d-action-bar-reset { color: #999; margin-right: -4px; }
.v3d-action-bar-reset:hover { color: var(--h8-color-text); }
.v3d-action-bar-close { color: #999; }
.v3d-action-bar-close:hover { color: var(--h8-color-text); }
.v3d-action-bar-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 0 4px;
}
.v3d-action-bar-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--h8-color-text-muted);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v3d-action-bar-muscles {
    font-size: 11px;
    color: #888;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* PC: 포즈 아이콘은 드롭다운 트리거 역할 */
.v3d-pose-float-icon {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    background: none;
    color: var(--h8-color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.v3d-pose-float-icon:hover { background: rgba(0,0,0,0.05); }
.v3d-pose-float-bar.pose-open .v3d-pose-float-icon {
    background: var(--h8-color-primary);
    color: #fff;
    border-color: var(--h8-color-primary);
}
/* 플로팅 바 내 포즈 메뉴 */
.v3d-pose-float-bar > .v3d-pose-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 160px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--h8-color-bg-card);
    border: 1px solid var(--h8-color-border);
    border-radius: 8px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
    z-index: 50;
    padding: 4px;
    scrollbar-width: thin;
}
.v3d-pose-float-bar.pose-open > .v3d-pose-menu {
    display: block;
}

/* ── 사전 미니바 모드 (선언만, 실제 스타일은 base 뒤에서 정의) ── */
.viewer3d-dict-title-wrap {
    cursor: pointer;
    min-width: 0;
    flex: 1;
}
.viewer3d-dict-head-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.viewer3d-dict-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--h8-color-text-muted);
}
.viewer3d-dict-expand-btn:hover { background: var(--h8-color-bg-hover); }
.viewer3d-dict.active .viewer3d-dict-expand-btn svg { transform: rotate(0); }

/* 메쉬 목록 스크롤 */
.viewer3d-mesh-scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.viewer3d-loading {
    text-align: center;
    padding: 40px 16px;
    color: var(--h8-color-text-muted);
    font-size: 13px;
}

/* 그룹 (근육/뼈) */
.v3d-group {}
.v3d-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--h8-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    background: var(--h8-color-bg-card);
    z-index: 1;
    border-bottom: 1px solid var(--h8-color-border);
}
.v3d-group-head:hover { background: var(--h8-color-hover); }
.v3d-group-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.v3d-group-dot.muscle { background: #bb5d5d; }
.v3d-group-dot.bone { background: #888; }
.v3d-group-count {
    margin-left: auto;
    font-weight: 400;
    font-size: 11px;
    opacity: 0.6;
}
.v3d-group-eye {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    color: var(--h8-color-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s, background 0.1s;
}
.v3d-group-head:hover .v3d-group-eye { opacity: 1; }
.v3d-group-eye.off { opacity: 1; color: var(--h8-color-text-muted); }
.v3d-group-eye.off svg { opacity: 0.3; }
.v3d-group-eye:hover { background: rgba(0,0,0,0.06); }
.v3d-group-chevron {
    transition: transform 0.2s;
    flex-shrink: 0;
}
.v3d-group.collapsed .v3d-group-chevron { transform: rotate(-90deg); }
.v3d-group.collapsed .v3d-group-body { display: none; }

/* 개별 메쉬 아이템 */
.v3d-mesh {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 22px;
    font-size: 12px;
    color: var(--h8-color-text);
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
}
.v3d-mesh:hover { background: var(--h8-color-hover); }
.v3d-mesh.selected {
    background: rgba(187, 93, 93, 0.08);
    font-weight: 600;
}
.v3d-mesh.hidden-mesh { opacity: 0.4; }
.v3d-mesh-eye {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--h8-color-text-muted);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.1s, background 0.1s;
}
.v3d-mesh:hover .v3d-mesh-eye { opacity: 1; }
.v3d-mesh-eye:hover { background: rgba(0,0,0,0.06); }
.v3d-mesh-eye.off { opacity: 1; }
.v3d-mesh-eye.off svg { opacity: 0.2; }
.v3d-mesh-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v3d-mesh-latin {
    display: block;
    font-size: 10px;
    color: var(--h8-color-text-muted);
    font-style: italic;
    line-height: 1.2;
    margin-top: 1px;
    opacity: 0.7;
}

/* ── 메인 3D 영역 ── */
.viewer3d-main {
    flex: 1;
    width: 100%;
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: manipulation;
}
.viewer3d-container {
    flex: 1;
    background: #e8e5e2;
    position: relative;
    min-height: 0;
}
.viewer3d-container canvas {
    display: block;
}

/* 카메라 토글 (모바일 전용, PC 숨김) */
.v3d-cam-toggle {
    display: none;
}

/* 카메라 컨트롤 바 */
.viewer3d-cam {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}
.v3d-cam-btn {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: var(--h8-color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.v3d-cam-btn:hover {
    background: rgba(255,255,255,0.98);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.v3d-cam-btn.active {
    background: var(--h8-color-primary);
    color: #fff;
    border-color: var(--h8-color-primary);
}
.v3d-cam-sep {
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,0.08);
}
/* 카메라 모드 토글 (원근/정사) */
.v3d-cam-mode {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    margin-bottom: 6px;
}
.v3d-cam-mode-btn {
    flex: 1;
    height: 28px;
    border: none;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    color: var(--h8-color-text-muted);
    transition: all 0.15s;
    padding: 0 4px;
}
.v3d-cam-mode-btn:first-child { border-right: 1px solid rgba(0,0,0,0.06); }
.v3d-cam-mode-btn:hover { color: var(--h8-color-text); }
.v3d-cam-mode-btn.active {
    background: var(--h8-color-primary);
    color: #fff;
}

/* 패널 토글 (모바일용) */
.viewer3d-menu-btn {
    display: none;
    position: absolute;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: var(--h8-color-text);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* 선택된 메쉬 정보 바 */
.viewer3d-info {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    z-index: 10;
    max-width: min(420px, calc(100vw - 40px));
    transition: max-height 0.25s, padding 0.25s;
    pointer-events: none;
}
.viewer3d-info.active {
    padding: 14px 20px;
    max-height: 200px;
    pointer-events: auto;
}
.viewer3d-info-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--h8-color-text);
    margin-bottom: 2px;
}
.viewer3d-info-type {
    font-size: 11px;
    color: var(--h8-color-text-muted);
    margin-bottom: 6px;
}
.viewer3d-info-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--h8-color-primary);
    cursor: pointer;
    text-decoration: none;
}
.viewer3d-info-link:hover { text-decoration: underline; }

/* ── 플로팅 라벨 (선택 메쉬 근처) ── */
/* 해부 레이어 슬라이더 */
.viewer3d-layer-slider {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    z-index: 10;
}
.v3d-layer-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--h8-color-text-muted);
    writing-mode: horizontal-tb;
    white-space: nowrap;
}
#viewer3dLayerRange {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 20px;
    height: 120px;
    cursor: pointer;
    accent-color: var(--h8-color-primary);
}

/* 모바일 레이어 컨트롤 (PC에서 숨김) */
.v3d-mobile-layer { display: none; }

/* 키보드 단축키 힌트 */
/* 뷰 북마크 팝업 */
.v3d-bookmark-popup {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    width: 200px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 6px;
    z-index: 20;
}
.v3d-bookmark-popup.hidden { display: none; }
.v3d-bookmark-save {
    width: 100%;
    padding: 6px;
    border: 1px dashed var(--h8-color-border);
    border-radius: 6px;
    background: none;
    color: var(--h8-color-text-muted);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}
.v3d-bookmark-save:hover { background: var(--h8-color-hover); color: var(--h8-color-text); }
.v3d-bookmark-list { max-height: 200px; overflow-y: auto; }
.v3d-bookmark-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    color: var(--h8-color-text);
    transition: background 0.1s;
}
.v3d-bookmark-item:hover { background: var(--h8-color-hover); }
.v3d-bookmark-item .v3d-bk-del {
    margin-left: auto;
    opacity: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--h8-color-text-muted);
    font-size: 14px;
    padding: 0 2px;
}
.v3d-bookmark-item:hover .v3d-bk-del { opacity: 1; }

/* 오리엔테이션 큐브 */
.viewer3d-orient-cube {
    display: none;
}

/* 미니맵 */
.viewer3d-minimap {
    position: absolute;
    bottom: 50px;
    left: 12px;
    width: 40px;
    height: 120px;
    z-index: 10;
    opacity: 0.4;
    transition: opacity 0.2s;
    cursor: pointer;
}
.viewer3d-minimap:hover { opacity: 0.8; }
.v3d-minimap-body { width: 100%; height: 100%; color: var(--h8-color-text-muted); }
.v3d-minimap-indicator {
    position: absolute;
    left: 0;
    width: 100%;
    height: 16px;
    background: rgba(187, 93, 93, 0.3);
    border: 1px solid rgba(187, 93, 93, 0.6);
    border-radius: 3px;
    pointer-events: none;
    transition: top 0.15s;
}

.viewer3d-shortcut-hint {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    padding: 5px 14px;
    background: transparent;
    border-radius: 8px;
    z-index: 12;
    opacity: 0.45;
    transition: opacity 1.5s ease;
    pointer-events: none;
}
.viewer3d-shortcut-hint.hidden {
    opacity: 0;
}
.viewer3d-shortcut-hint span {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
}
.viewer3d-shortcut-hint kbd {
    display: inline-block;
    padding: 1px 5px;
    font-size: 10px;
    font-family: inherit;
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 3px;
    color: #888;
    margin-right: 2px;
}

/* 로딩 프로그레스 바 */
.viewer3d-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0,0,0,0.06);
    z-index: 12;
}
.viewer3d-progress {
    height: 100%;
    width: 0%;
    background: var(--h8-color-primary);
    transition: width 0.2s ease;
    border-radius: 0 2px 2px 0;
}

/* 3D 로딩 중: 컨테이너 + 프로그레스바 + 로딩 오버레이만 표시 */
.viewer3d-view.v3d-loading > .v3d-left-stack {
    display: none !important;
}
.viewer3d-view.v3d-loading .viewer3d-main > *:not(.viewer3d-container):not(.viewer3d-progress-bar):not(.v3d-loading-overlay):not(.v3d-home-btn) {
    display: none !important;
}

/* 3D 뷰어 로딩 표시 */
.v3d-loading-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    z-index: 20;
    opacity: 1;
    transition: opacity 0.3s;
}
.v3d-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
.v3d-loading-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-top-color: #888;
    border-radius: 50%;
    animation: v3d-spin 0.7s linear infinite;
}
@keyframes v3d-spin {
    to { transform: rotate(360deg); }
}
.v3d-loading-text {
    font-size: 12px;
    color: #555;
    font-weight: 500;
    white-space: nowrap;
}

/* ── 3D 사전 정보 패널 (PC: 우측 슬라이드) ── */
.viewer3d-dict {
    position: absolute;
    top: 0;
    right: 0;
    width: 360px;
    height: 100%;
    background: var(--h8-color-bg-card);
    border-left: 1px solid var(--h8-color-border);
    z-index: 20;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 20px rgba(0,0,0,0.08);
}
.viewer3d-dict.active { transform: translateX(0); }

/* ── 사전 미니바 모드: 캔버스 아래 배치 (겹침 없음) ── */
.viewer3d-dict.mini {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    max-height: none;
    transform: none;
    transition: none;
    border-left: none;
    border-top: 1px solid var(--h8-color-border);
    border-radius: 0;
    box-shadow: none;
    z-index: auto;
    flex-shrink: 0;
}
.viewer3d-dict.mini .viewer3d-dict-handle { display: none; }
.viewer3d-dict.mini .viewer3d-dict-body { display: none; }
.viewer3d-dict.mini .viewer3d-dict-head {
    border-bottom: none;
    padding: 8px 14px;
}
.viewer3d-dict.mini .viewer3d-dict-expand-btn svg {
    transform: rotate(180deg);
}

.viewer3d-dict-handle { display: none; }
.viewer3d-dict-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--h8-color-border);
    flex-shrink: 0;
}
.viewer3d-dict-head h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--h8-color-text);
    line-height: 1.3;
}
.viewer3d-dict-latin {
    font-size: 12px;
    color: var(--h8-color-text-muted);
    font-style: italic;
}
.viewer3d-dict-close-btn {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: var(--h8-color-text-muted);
    cursor: pointer;
    padding: 0 2px;
    flex-shrink: 0;
}
.viewer3d-dict-close-btn:hover { color: var(--h8-color-text); }
.viewer3d-dict-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* 사전 패널 내부 콘텐츠 */
.v3d-dict-img {
    border-radius: 10px;
    overflow: hidden;
    background: #f5f3f1;
    margin-bottom: 16px;
}
.v3d-dict-img img {
    width: 100%;
    display: block;
    object-fit: contain;
    max-height: 200px;
}
.v3d-dict-fields { margin-bottom: 14px; }
.v3d-dict-field {
    padding: 8px 0;
    border-bottom: 1px solid var(--h8-color-border);
}
.v3d-dict-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--h8-color-text-muted);
    margin-bottom: 3px;
}
.v3d-dict-value {
    font-size: 13px;
    color: var(--h8-color-text);
    line-height: 1.5;
}
.v3d-clickable-bone {
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
}
.v3d-clickable-bone:hover {
    background: var(--h8-color-hover);
}
.v3d-clickable-bone .v3d-dict-label svg {
    vertical-align: -1px;
    margin-left: 4px;
    opacity: 0.5;
}
.v3d-dict-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 14px;
}
.v3d-dict-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--h8-color-hover);
    color: var(--h8-color-text-muted);
}
/* 기여도 색상 토글 스위치 */
.v3d-role-toggle {
    all: unset;
    display: inline-block;
    cursor: pointer;
    position: relative;
    width: 32px; height: 18px;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 9px;
    transition: background 0.25s, border-color 0.25s;
    flex-shrink: 0;
    box-sizing: border-box;
}
.v3d-role-toggle::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), background 0.25s;
}
.v3d-role-toggle:hover { border-color: rgba(255,255,255,0.25); }
.v3d-role-toggle:hover::after { background: rgba(255,255,255,0.5); }
.v3d-role-toggle.active {
    background: rgba(187,93,93,0.3);
    border-color: rgba(187,93,93,0.5);
}
.v3d-role-toggle.active::after {
    transform: translateX(13px);
    background: #bb5d5d;
    box-shadow: 0 1px 3px rgba(187,93,93,0.4);
}

/* 참여 근육 바 차트 */
.v3d-muscle-bars { display: flex; flex-direction: column; gap: 8px; }
.v3d-muscle-bar-item { display: flex; flex-direction: column; gap: 3px; }
.v3d-muscle-bar-head { display: flex; align-items: center; gap: 6px; }
.v3d-muscle-bar-name { font-size: 11px; color: var(--h8-color-text); font-weight: 500; flex: 1; }
.v3d-muscle-bar-role { font-size: 9px; font-weight: 600; opacity: 0.85; flex-shrink: 0; }
.v3d-muscle-bar-pct { font-size: 10px; color: var(--h8-color-text-muted); font-weight: 600; flex-shrink: 0; }
.v3d-muscle-bar-track { height: 6px; background: var(--h8-color-hover); border-radius: 3px; overflow: hidden; }
.v3d-muscle-bar-fill { height: 100%; border-radius: 3px; transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.v3d-dict-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--h8-color-text-muted);
    margin: 16px 0 6px;
    padding-top: 12px;
    border-top: 1px solid var(--h8-color-border);
}
.v3d-dict-video {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--h8-color-text);
    cursor: pointer;
    transition: background 0.12s;
}
.v3d-dict-video:hover { background: var(--h8-color-hover); }
.v3d-dict-video svg {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 7px;
    border-radius: 50%;
    background: var(--h8-color-primary);
    color: #fff;
}
.v3d-dict-video span {
    line-height: 1.35;
}

.v3d-dict-full {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 11px;
    border: none;
    border-radius: 10px;
    background: var(--h8-color-primary);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.15s;
}
.v3d-dict-full:hover {
    opacity: 0.85;
}

/* ── 사전 hide/isolate 버튼 ── */
.v3d-dict-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.v3d-dict-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--h8-color-border);
    border-radius: 6px;
    background: transparent;
    font-size: 12px;
    font-family: inherit;
    color: var(--h8-color-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.v3d-dict-action-btn:hover {
    background: var(--h8-color-hover);
    color: var(--h8-color-text);
}
.v3d-dict-action-btn svg {
    flex-shrink: 0;
}

/* ── config 패널 액션 버튼 ── */
.v3d-config-actions {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.v3d-config-actions .v3d-dict-label {
    margin-bottom: 2px;
}
.v3d-config-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--h8-color-border);
    border-radius: 8px;
    background: var(--h8-color-hover);
    font-size: 13px;
    font-family: inherit;
    color: var(--h8-color-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.v3d-config-action-btn:hover {
    background: var(--h8-color-primary);
    border-color: var(--h8-color-primary);
    color: #fff;
}
.v3d-config-action-btn svg {
    flex-shrink: 0;
}

/* ── 익스플로디드 뷰 바 ── */
.viewer3d-explode-bar {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(30,30,30,0.85);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 20;
}
.v3d-explode-label {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
}
.viewer3d-explode-bar input[type="range"] {
    width: 160px;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    outline: none;
}
.viewer3d-explode-bar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.v3d-explode-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 16px;
    cursor: pointer;
    padding: 0 2px;
}
.v3d-explode-close:hover { color: #fff; }

/* ── 3D 퀴즈 오버레이 ── */
.viewer3d-quiz {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(20,20,30,0.92) 0%, rgba(20,20,30,0.6) 80%, transparent 100%);
    z-index: 35;
    pointer-events: none;
}
.viewer3d-quiz > * { pointer-events: auto; }
.v3d-quiz-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.v3d-quiz-progress {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}
.v3d-quiz-score {
    font-size: 13px;
    font-weight: 700;
    color: #66ccaa;
    flex: 1;
}
.v3d-quiz-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}
.v3d-quiz-close:hover { color: #fff; }
.v3d-quiz-question {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
}
.v3d-quiz-target {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.v3d-quiz-feedback {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
.v3d-quiz-feedback.correct {
    background: rgba(80,200,120,0.2);
    color: #66ddaa;
}
.v3d-quiz-feedback.wrong {
    background: rgba(220,80,80,0.2);
    color: #ee8888;
}

/* ── 퀴즈 결과 모달 ── */
.viewer3d-quiz-result {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    z-index: 30;
}
.v3d-quiz-result-inner {
    width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 24px;
    background: var(--h8-color-bg);
    border-radius: 16px;
    border: 1px solid var(--h8-color-border);
    text-align: center;
}
.v3d-quiz-result-inner h3 {
    margin: 0 0 12px;
    font-size: 18px;
    color: var(--h8-color-text);
}
.v3d-quiz-result-score {
    font-size: 36px;
    font-weight: 800;
    color: var(--h8-color-primary);
    margin-bottom: 16px;
}
.v3d-quiz-result-list {
    text-align: left;
    margin-bottom: 16px;
    font-size: 13px;
}
.v3d-quiz-result-list div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--h8-color-border);
}
.v3d-quiz-result-list .correct { color: #66ccaa; }
.v3d-quiz-result-list .wrong { color: #ee8888; }
.v3d-quiz-result-btn {
    display: inline-block;
    padding: 10px 20px;
    margin: 4px;
    border-radius: 10px;
    border: 1px solid var(--h8-color-border);
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--h8-color-text);
    cursor: pointer;
}
.v3d-quiz-result-btn:hover { background: var(--h8-color-hover); }
.v3d-quiz-result-close { color: var(--h8-color-text-muted); }

/* ── 모바일 반응형 ── */
@media (max-width: 768px) {
    .viewer3d-view {
        height: calc(100vh - 48px);
        height: calc(100dvh - 48px);
    }
    .v3d-left-stack {
        position: fixed;
        top: 48px;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 20px rgba(0,0,0,0.15);
        pointer-events: auto;
    }
    .v3d-left-stack.open { transform: translateX(0); }
    .v3d-panel-close { display: flex; }
    .viewer3d-menu-btn {
        display: flex;
        top: 8px;
        left: 8px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255,255,255,0.9);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .viewer3d-shortcut-hint { display: none; }
    .viewer3d-layer-slider { display: none; }
    .viewer3d-orient-cube { display: none; }
    .viewer3d-minimap { display: none; }
    .viewer3d-explode-bar { bottom: 56px; }

    /* 모바일 레이어 슬라이더 */
    .v3d-mobile-layer {
        display: flex;
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
        align-items: center;
        gap: 4px;
        background: rgba(255,255,255,0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 10px;
        border: 1px solid rgba(0,0,0,0.08);
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
        padding: 8px 5px;
        z-index: 10;
    }
    .v3d-ml-label {
        font-size: 9px;
        font-weight: 600;
        color: var(--h8-color-text-muted);
        white-space: nowrap;
    }
    .v3d-ml-range {
        writing-mode: vertical-lr;
        direction: rtl;
        width: 20px;
        height: 80px;
        cursor: pointer;
        accent-color: var(--h8-color-primary);
    }
    .v3d-quiz-result-inner { width: 280px; padding: 16px; }

    /* 모바일 포즈: 좌하단 세로 원형 버튼 그룹 */
    .v3d-pose-float-bar.visible {
        bottom: 8px;
        left: 8px;
        right: auto;
        transform: none;
        flex-direction: column-reverse;
        align-items: center;
        gap: 4px;
        height: auto;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
    }
    .v3d-pose-float-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255,255,255,0.9);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border: none;
    }
    .v3d-pose-float-icon:active { background: rgba(255,255,255,1); }
    .v3d-pose-float-bar .v3d-pose-close-btn {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255,255,255,0.9);
        box-shadow: 0 1px 6px rgba(0,0,0,0.1);
        border: none;
    }
    .v3d-pose-float-bar .v3d-anim-btn {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255,255,255,0.9);
        box-shadow: 0 1px 6px rgba(0,0,0,0.1);
        border: none;
    }
    /* 모바일에서 스크러버/퍼센트 숨김 */
    .v3d-pose-float-bar .v3d-anim-scrubber { display: none !important; }
    .v3d-pose-float-bar .v3d-anim-pct { display: none !important; }
    /* 포즈 메뉴: 아이콘 오른쪽에 팝업 */
    .v3d-pose-float-bar > .v3d-pose-menu {
        left: calc(100% + 6px);
        bottom: 0;
    }

    /* 모바일 카메라: 토글 버튼 + 팝업 */
    .viewer3d-cam {
        top: 8px;
        right: 8px;
        gap: 0;
        align-items: flex-end;
    }
    .v3d-cam-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 50%;
        background: rgba(255,255,255,0.9);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        cursor: pointer;
        color: var(--h8-color-text);
        z-index: 2;
    }
    .v3d-cam-toggle:active { background: rgba(255,255,255,1); }
    .v3d-cam-mode { display: none; }
    .v3d-cam-btn { display: none; }
    .v3d-cam-sep { display: none; }
    /* 확장 시 카메라 버튼 표시 (data-cam 속성이 있는 것만) */
    .viewer3d-cam.cam-open .v3d-cam-btn[data-cam] {
        display: flex;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        font-size: 10px;
        background: rgba(255,255,255,0.95);
        box-shadow: 0 1px 6px rgba(0,0,0,0.1);
        margin-top: 4px;
    }
    .viewer3d-cam.cam-open .v3d-cam-btn[data-cam].active {
        background: var(--h8-color-primary);
        color: #fff;
        border-color: var(--h8-color-primary);
    }

    /* 사전 패널 → 바텀시트 */
    .viewer3d-dict {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        max-height: 65vh;
        border-left: none;
        border-top: 1px solid var(--h8-color-border);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    }
    .viewer3d-dict.active { transform: translateY(0); }
    /* 모바일 미니바: 바텀바에 가려지지 않도록 패딩 */
    .viewer3d-dict.mini { padding-bottom: 44px; }
    .viewer3d-dict-handle {
        display: flex;
        justify-content: center;
        padding: 10px 0 4px;
        cursor: grab;
    }
    .viewer3d-dict-handle span {
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--h8-color-border);
    }
}

/* ===== 3D Viewer Fullscreen + Sidebar ===== */

/* 3D 뷰어 활성 시 헤더 숨기기 */
body.v3d-fullscreen .header { display: none !important; }
body.v3d-fullscreen .videos-container { padding-top: 0 !important; }
body.v3d-fullscreen .viewer3d-view {
    height: 100vh !important;
    height: 100dvh !important;
}

/* 풀스크린: 패널 위치 조정 */
body.v3d-fullscreen .v3d-left-stack {
    top: 12px;
    left: 12px;
    bottom: 12px;
}
/* 풀스크린: 카드에 왼쪽 테두리 + 둥근 모서리 */
body.v3d-fullscreen .v3d-search-mode {
    border-left: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
}
body.v3d-fullscreen .v3d-dict-wrapper {
    border-left: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
}

/* 카메라바 숨김 — 사이드바에 통합 */
body.v3d-fullscreen .viewer3d-cam {
    display: none !important;
}
/* 기존 PC 레이어 슬라이더 숨기기 (사이드바에서 조작) */
body.v3d-fullscreen .viewer3d-layer-slider {
    display: none !important;
}
/* 하단 중앙 포즈 플로팅 바 숨기기 (사이드바 검색 밑에 포즈 있음) */
body.v3d-fullscreen .v3d-pose-float-bar {
    display: none !important;
}

/* ===== 우측 사이드바 (플로팅 스타일) ===== */
.v3d-sidebar {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 30;
}
.v3d-sb-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--h8-color-text);
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.v3d-sb-icon span {
    display: none;
}
.v3d-sb-icon:hover {
    background: rgba(255,255,255,0.98);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.v3d-sb-icon.active {
    background: var(--h8-color-primary);
    color: #fff;
    border-color: var(--h8-color-primary);
}
.v3d-sb-divider {
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,0.08);
}

/* ===== 우측 패널 스택 (비디오 카드 + 사진) ===== */
.v3d-right-stack {
    position: absolute;
    top: 12px;
    right: 54px;
    bottom: 12px;
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateX(calc(100% + 60px));
    transition: transform .3s ease;
    z-index: 28;
    pointer-events: none;
}
.v3d-right-stack.open { transform: translateX(0); }
.v3d-right-stack > * { pointer-events: auto; }

/* ===== 관련 영상 패널 (오른쪽) ===== */
.v3d-related-panel {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.v3d-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
}
.v3d-related-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--h8-color-text);
}
.v3d-related-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.v3d-rv-view-btn {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--h8-color-text-muted);
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.v3d-rv-view-btn.active { color: var(--h8-color-primary); background: rgba(0,0,0,0.04); }
.v3d-rv-view-btn:hover { color: var(--h8-color-text); }
.v3d-rv-action-btn {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--h8-color-text-muted);
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s;
}
.v3d-rv-action-btn:hover { color: var(--h8-color-text); }
.v3d-rv-action-btn svg { transition: transform .2s ease; }
.v3d-rv-show-all {
    margin: 8px auto 0;
    padding: 5px 18px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--h8-color-primary);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}
.v3d-rv-show-all:hover { background: var(--h8-color-primary-hover); }
/* Breadcrumb 행 */
.v3d-related-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 14px 8px;
    flex-shrink: 0;
}
/* 확장 상태 */
/* rv-fullscreen: 3D 뷰어 숨기고 비디오 카드만 전체 화면 */
.viewer3d-view.rv-fullscreen .viewer3d-main,
.viewer3d-view.rv-fullscreen .v3d-left-stack,
.viewer3d-view.rv-fullscreen .v3d-dock {
    display: none !important;
}
.v3d-related-panel.expanded,
.v3d-photo-panel.expanded {
    position: absolute;
    top: 0;
    left: 0;
    right: 0 !important;
    bottom: 0;
    width: auto !important;
    z-index: 50;
    border-radius: 0;
    transform-origin: top right;
    animation: rv-panel-expand .3s ease;
}
.v3d-related-panel.rv-shrink,
.v3d-photo-panel.rv-shrink {
    position: absolute;
    top: 0;
    left: 0;
    right: 0 !important;
    bottom: 0;
    width: auto !important;
    z-index: 50;
    border-radius: 0;
    transform-origin: top right;
    animation: rv-panel-shrink .25s ease forwards;
}
@keyframes rv-panel-expand {
    from { opacity: 0.5; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes rv-panel-shrink {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.6); }
}
.v3d-related-panel.expanded .v3d-related-body.thumb-view {
    display: flex;
    flex-wrap: wrap;
    gap: var(--h8-spacing-lg);
    padding: var(--h8-spacing-lg);
}
.v3d-related-panel.expanded .v3d-related-body.thumb-view .v3d-rv-card {
    width: calc(25% - 18px);
    border-radius: var(--h8-radius-lg);
    box-shadow: var(--h8-shadow-sm);
}
.v3d-related-panel.expanded .v3d-rv-num {
    font-size: 11px;
    color: var(--h8-color-text-muted);
    margin-right: 4px;
    margin-bottom: 2px;
}
.v3d-related-panel.expanded .v3d-related-body.thumb-view .v3d-rv-info {
    padding: var(--h8-spacing-md);
    display: flex;
    flex-direction: column;
}
.v3d-related-panel.expanded .v3d-related-body.thumb-view .v3d-rv-title {
    font-size: var(--h8-font-size-sm);
    font-weight: 600;
    color: var(--h8-color-text);
    margin-bottom: var(--h8-spacing-xs);
    -webkit-line-clamp: 2;
    line-height: 1.4;
    overflow: hidden;
}
.v3d-related-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
    overscroll-behavior: contain;
}
.v3d-related-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--h8-color-text-muted);
    font-size: 13px;
    width: 100%;
}

/* 리스트 뷰 (기본) */
.v3d-rv-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}
.v3d-rv-card:hover { background: rgba(0,0,0,0.04); }
.v3d-rv-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--h8-color-primary);
    border-radius: 6px;
    color: #fff;
}
.v3d-rv-info { flex: 1; min-width: 0; }
.v3d-rv-title {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--h8-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.v3d-rv-meta {
    font-size: 11px;
    color: var(--h8-color-text-muted);
    margin-top: 2px;
}

/* 썸네일 뷰 */
.v3d-related-body.thumb-view {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    align-content: flex-start;
    overflow-y: auto;
}
.v3d-related-body.thumb-view .v3d-rv-card {
    width: calc(50% - 3px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--h8-color-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.v3d-related-body.thumb-view .v3d-rv-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    background: var(--h8-color-bg);
}
.v3d-related-body.thumb-view .v3d-rv-icon { display: none; }
.v3d-rv-thumb {
    display: none;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    background: var(--h8-color-bg);
    overflow: hidden;
}
.v3d-rv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.v3d-related-body.thumb-view .v3d-rv-thumb { display: block; }
.v3d-rv-thumb .thumb-texts {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    container-type: inline-size;
}
.v3d-related-body.thumb-view .v3d-rv-info {
    padding: 6px 8px;
}
.v3d-related-body.thumb-view .v3d-rv-title {
    font-size: 11px;
    -webkit-line-clamp: 1;
}
.v3d-related-body.thumb-view .v3d-rv-meta { display: none; }
.v3d-related-body.thumb-view .v3d-rv-num { display: none; }
.v3d-related-panel.expanded .v3d-rv-num { display: inline; }

/* ===== 실사 사진 패널 (비디오 카드 아래, 별도 박스) ===== */
.v3d-photo-panel {
    flex: 1;
    min-height: 0;
    width: 100%;
    min-width: 0;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.v3d-photo-head {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
}
.v3d-photo-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--h8-color-text);
    display: flex;
    align-items: center;
    gap: 5px;
}
.v3d-photo-title svg { opacity: 0.5; }
.v3d-photo-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
    overscroll-behavior: contain;
}
.v3d-photo-set {
    margin-bottom: 8px;
}
.v3d-photo-set-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--h8-color-text-muted);
    padding: 2px 4px 4px;
}
.v3d-photo-angles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.v3d-photo-angle {
    position: relative;
    width: calc(33.33% - 3px);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: transparent;
    transition: transform .15s, box-shadow .15s;
}
.v3d-photo-save-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: var(--h8-transition-fast);
    z-index: 2;
}
.v3d-photo-angle:hover .v3d-photo-save-btn {
    opacity: 1;
}
.v3d-photo-save-btn:hover {
    background: white;
    transform: scale(1.1);
}
.v3d-photo-save-btn svg {
    width: 14px;
    height: 14px;
    color: var(--h8-color-text-muted);
}
.v3d-photo-save-btn.saved {
    opacity: 1;
    background: var(--h8-color-primary);
}
.v3d-photo-save-btn.saved svg {
    color: white;
    fill: white;
}
.v3d-photo-angle:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.v3d-photo-angle img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block;
}
.v3d-photo-angle-label {
    display: block;
    color: var(--h8-color-text-muted);
    font-size: 9px;
    font-weight: 500;
    padding: 2px 4px;
    text-align: center;
}

/* 사진 패널 확장 */
.v3d-photo-panel.expanded .v3d-photo-angles {
    gap: 12px;
    padding: 8px;
}
.v3d-photo-panel.expanded .v3d-photo-angle {
    width: calc(25% - 9px);
}
.v3d-photo-panel.expanded .v3d-photo-body {
    padding: 16px;
}

/* ===== 실사 사진 팝업 ===== */
.photo-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 401;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    visibility: hidden;
    transition: background 0.3s ease, opacity 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, visibility 0.3s;
    pointer-events: none;
}
.photo-popup-overlay.active {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.is-windows .photo-popup-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
}
.is-windows .photo-popup-overlay.active {
    background: rgba(0, 0, 0, 0.7);
}

.photo-popup {
    display: none;
    flex-direction: column;
    width: 800px;
    max-width: 90vw;
    max-height: calc(100vh - 80px);
    background: var(--h8-color-bg-card);
    border-radius: var(--h8-radius-lg);
    box-shadow: var(--h8-shadow-lg);
    overflow: hidden;
}
.photo-popup.active {
    display: flex;
    animation: popupPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.is-windows .photo-popup { transition: none; }
.is-windows .photo-popup.active { animation: none; }

/* 팝업 헤더 */
.photo-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--h8-spacing-sm) var(--h8-spacing-md);
    border-bottom: 1px solid var(--h8-color-border-light);
    flex-shrink: 0;
}
.photo-popup-title {
    font-size: var(--h8-font-size-base);
    font-weight: 600;
    color: var(--h8-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.photo-popup-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.photo-popup-tool {
    width: 34px;
    height: 34px;
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius-sm);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--h8-color-text-muted);
    transition: border-color .15s, color .15s, background .15s;
}
.photo-popup-tool:hover {
    border-color: var(--h8-color-primary);
    color: var(--h8-color-primary);
}
.photo-popup-tool.active {
    background: var(--h8-color-primary);
    border-color: var(--h8-color-primary);
    color: #fff;
}
.photo-popup-save-btn:hover {
    border-color: var(--h8-color-primary);
    color: var(--h8-color-primary);
}
.photo-popup-save-btn:hover svg {
    color: var(--h8-color-primary);
}
.photo-popup-save-btn.saved {
    background: var(--h8-color-primary);
    border-color: var(--h8-color-primary);
}
.photo-popup-save-btn.saved svg {
    color: white;
    fill: white;
}
.photo-popup-close {
    width: 34px;
    height: 34px;
    border: 1px solid var(--h8-color-border);
    border-radius: var(--h8-radius-sm);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--h8-color-text-muted);
    transition: border-color .15s, color .15s;
}
.photo-popup-close:hover {
    border-color: var(--h8-color-text);
    color: var(--h8-color-text);
}

/* 팝업 본체 (이미지 영역) */
.photo-popup-body {
    position: relative;
    flex: 1;
    min-height: 300px;
    background: #1a1a1a;
    overflow: hidden;
}
.photo-popup-canvas {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;
    display: grid;
    place-items: center;
    position: relative;
}
.photo-popup-canvas.dragging { cursor: grabbing; }
.photo-popup-canvas img {
    grid-area: 1 / 1;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: 0 0;
    user-select: none;
    -webkit-user-drag: none;
    transition: none;
}
.photo-onion-img {
    opacity: 0;
    pointer-events: none;
    display: none;
}
.photo-onion-img.visible {
    display: block;
    opacity: 0.3;
}

/* 좌우 네비 */
.photo-popup-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.85);
    border: none;
    color: #333;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, box-shadow .15s;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.photo-popup-nav:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.photo-popup-prev { left: 10px; }
.photo-popup-next { right: 10px; }

/* 줌 컨트롤 (우하단) */
.photo-popup-zoom {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    z-index: 2;
}
.photo-popup-zoom-btn {
    background: rgba(255,255,255,0.85);
    border: none;
    color: #333;
    width: 30px;
    height: 30px;
    border-radius: var(--h8-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: background .15s;
}
.photo-popup-zoom-btn:hover { background: #fff; }

/* 하단 필름스트립 */
.photo-popup-strip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--h8-color-border-light);
    background: var(--h8-color-bg-card);
}
.photo-popup-counter {
    color: var(--h8-color-text-muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.photo-popup-filmstrip {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
}
.photo-popup-filmstrip::-webkit-scrollbar { height: 3px; }
.photo-popup-filmstrip::-webkit-scrollbar-track { background: transparent; }
.photo-popup-filmstrip::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 2px; }
.photo-strip-item {
    width: 56px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.45;
    border: 2px solid transparent;
    transition: opacity .15s, border-color .15s;
}
.photo-strip-item.active {
    opacity: 1;
    border-color: var(--h8-color-primary);
}
.photo-strip-item:hover { opacity: 0.8; }
.photo-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== 사이드바 팝업 패널 ===== */
.v3d-sb-panel {
    position: absolute;
    top: 12px;
    right: 54px;
    width: 280px;
    max-height: calc(100% - 24px);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 25;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    color: var(--h8-color-text);
}
.v3d-sb-panel.open {
    display: flex;
}
.v3d-sb-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--h8-color-border);
    font-size: 13px;
    font-weight: 600;
}
.v3d-sb-panel-close {
    border: none;
    background: none;
    color: var(--h8-color-text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.v3d-sb-panel-close:hover { color: var(--h8-color-text); }
.v3d-sb-panel-body {
    padding: 10px;
    overflow-y: auto;
    flex: 1;
    overscroll-behavior: contain;
}

/* ===== 통합 패널 ===== */
.v3d-sb-unified {
    display: none;
    flex-direction: column;
}
.v3d-sb-unified.open { display: flex; }
.v3d-sb-unified-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-shrink: 0;
}
.v3d-sb-unified-search svg { flex-shrink: 0; color: var(--h8-color-text-muted); }
.v3d-sb-unified-search input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 13px;
    color: var(--h8-color-text);
    min-width: 0;
}
.v3d-sb-unified-search input::placeholder { color: var(--h8-color-text-muted); }
.v3d-sb-unified-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px 4px;
    flex-shrink: 0;
}
.v3d-sb-tab {
    padding: 4px 10px;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-align: center;
    transition: all .15s;
}
.v3d-sb-tab:hover { background: var(--h8-color-bg-hover); }
.v3d-sb-tab.active {
    background: var(--h8-color-primary);
    color: #fff;
    border-color: var(--h8-color-primary);
}
.v3d-sb-unified-filter {
    display: flex;
    gap: 4px;
    padding: 6px 12px 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.v3d-sb-unified-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.v3d-sb-unified-content { padding: 4px 6px; }

/* 검색 (레거시) */
.v3d-sb-search-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--h8-color-border);
    border-radius: 8px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.v3d-sb-search-input::placeholder { color: var(--h8-color-text-muted); }
.v3d-sb-search-input:focus { border-color: var(--h8-color-primary); }
.v3d-sb-search-results {
    margin-top: 8px;
    max-height: 320px;
    overflow-y: auto;
}
.v3d-sb-search-item {
    padding: 7px 10px;
    font-size: 12px;
    color: var(--h8-color-text);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s;
}
.v3d-sb-search-item:hover { background: var(--h8-color-bg-hover); }
.v3d-sb-search-item .latin {
    display: block;
    font-size: 10px;
    color: var(--h8-color-text-muted);
    font-style: italic;
    margin-top: 1px;
}

/* 도구 그리드 */
.v3d-sb-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.v3d-sb-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border: 1px solid var(--h8-color-border);
    border-radius: 8px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 10px;
}
.v3d-sb-tool:hover {
    background: var(--h8-color-bg-hover);
    color: var(--h8-color-text);
}
.v3d-sb-tool.active {
    background: var(--h8-color-primary);
    color: #fff;
    border-color: var(--h8-color-primary);
}
.v3d-sb-hidden-info {
    margin-top: 8px;
    font-size: 11px;
    color: var(--h8-color-text-muted);
    text-align: center;
}
.v3d-sb-hidden-info:empty { display: none; }

/* 목록 */
.v3d-sb-region-filter {
    display: flex;
    gap: 3px;
    margin-bottom: 8px;
}
.v3d-sb-region {
    padding: 4px 8px;
    font-size: 11px;
    border: 1px solid var(--h8-color-border);
    border-radius: 10px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text-muted);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    white-space: nowrap;
}
.v3d-sb-region:hover { background: var(--h8-color-bg-hover); }
.v3d-sb-region.active {
    background: var(--h8-color-primary);
    color: #fff;
    border-color: var(--h8-color-primary);
}
.v3d-sb-mesh-list {
    max-height: 400px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.v3d-sb-mesh-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--h8-color-text);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s;
}
.v3d-sb-mesh-item:hover { background: var(--h8-color-bg-hover); }
.v3d-sb-mesh-item.selected {
    background: var(--h8-color-primary);
    color: #fff;
}
.v3d-sb-mesh-item.hidden-mesh { opacity: 0.4; }
.v3d-sb-mesh-eye {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s;
}
.v3d-sb-mesh-eye:hover { opacity: 1; }
.v3d-sb-mesh-item.hidden-mesh .v3d-sb-mesh-eye { opacity: 0.3; }
.v3d-sb-mesh-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--h8-color-primary);
    flex-shrink: 0;
}
.v3d-sb-mesh-dot.bone { background: #aaa; }

/* 구조탭 그룹 (V5 스타일) */
.v3d-sb-mesh-group {
    margin-bottom: 1px;
}
.v3d-sb-mesh-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--h8-color-text);
    cursor: pointer;
    border-radius: 6px;
    user-select: none;
    transition: background 0.1s;
}
.v3d-sb-mesh-group-head:hover { background: var(--h8-color-bg-hover); }
.v3d-sb-mesh-group.selected > .v3d-sb-mesh-group-head {
    background: var(--h8-color-primary, #4499ff);
    color: #fff;
}
.v3d-sb-mesh-group.selected > .v3d-sb-mesh-group-head .v3d-sb-mesh-group-count {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.v3d-group-arrow {
    font-size: 8px;
    color: var(--h8-color-text-dim, #999);
    width: 12px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.15s;
    cursor: pointer;
    padding: 2px;
}
.v3d-sb-mesh-group.expanded > .v3d-sb-mesh-group-head > .v3d-group-arrow {
    transform: rotate(90deg);
}
.v3d-sb-mesh-group.selected > .v3d-sb-mesh-group-head > .v3d-group-arrow {
    color: rgba(255,255,255,0.7);
}
.v3d-sb-mesh-group-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3d-sb-mesh-group-count {
    font-size: 10px;
    font-weight: 400;
    color: var(--h8-color-text-dim, #999);
    flex-shrink: 0;
}
.v3d-sb-mesh-group-children {
    padding-left: 14px;
    display: none;
}
.v3d-sb-mesh-group.expanded > .v3d-sb-mesh-group-children {
    display: block;
}
.v3d-sb-section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--h8-color-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 8px 4px;
    border-bottom: 1px solid var(--h8-color-border, rgba(255,255,255,0.08));
    margin-bottom: 2px;
}

/* 카테고리 섹션 (구조탭) */
.v3d-sb-cat-section {
    margin-bottom: 4px;
}
.v3d-sb-cat-section:first-child .v3d-sb-cat-label {
    padding-top: 4px;
}
.v3d-sb-cat-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--h8-color-text-muted, #888);
    letter-spacing: 0.3px;
    padding: 10px 8px 4px;
    border-bottom: 1px solid var(--h8-color-border, rgba(255,255,255,0.06));
    margin-bottom: 2px;
    position: sticky;
    top: 0;
    background: var(--h8-color-bg, #1a1a1a);
    z-index: 1;
}

/* ── 패널 스플릿 레이아웃 (CSS-only, DOM 이동 없음) ── */
/* 같은 쪽에 2패널만 활성 → 스택을 row로, 크기는 기본값 유지 */

/* === 왼쪽만 활성 (검색+사전): 기본 크기/여백 유지, 좌우 배치 === */
.viewer3d-view.split-left-only .v3d-left-stack {
    width: auto;
    right: 12px;         /* 기존 right-stack의 right 값과 동일 */
    flex-direction: row;
}
.viewer3d-view.split-left-only .v3d-search-panel {
    flex: none;
    width: 300px;
}
.viewer3d-view.split-left-only .v3d-dict-panel {
    flex: none;
    width: 300px;
    margin-left: auto;
}

/* === 오른쪽만 활성 (비디오+사진): 기본 크기/여백 유지, 좌우 배치 === */
.viewer3d-view.split-right-only .v3d-right-stack {
    left: 12px;          /* 기존 left-stack의 left 값과 동일 */
    width: auto;
    transform: translateX(0);
    flex-direction: row;
}
.viewer3d-view.split-right-only .v3d-related-panel {
    flex: none;
    width: 300px;
}
.viewer3d-view.split-right-only .v3d-photo-panel {
    flex: none;
    width: 300px;
    margin-left: auto;
}

/* 포즈 목록 */
.v3d-sb-pose-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.v3d-sb-pose-cat {
    font-size: 10px;
    font-weight: 600;
    color: var(--h8-color-text-muted);
    padding: 6px 4px 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.v3d-sb-pose-item {
    padding: 7px 10px;
    font-size: 12px;
    color: var(--h8-color-text);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s;
}
.v3d-sb-pose-item:hover { background: var(--h8-color-bg-hover); }
.v3d-sb-pose-item.active {
    background: var(--h8-color-primary);
    color: #fff;
}

/* 설정 */
.v3d-sb-setting-group { margin-bottom: 12px; }
.v3d-sb-setting-label {
    display: block;
    font-size: 11px;
    color: var(--h8-color-text-muted);
    margin-bottom: 6px;
}

/* [숨김] 되돌리기/다시하기 — 복귀 시 display:none 제거 */
.v3d-undo-group {
    display: none !important;
    /* position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    gap: 4px;
    z-index: 20; */
}

/* [숨김] 홈 버튼 — 복귀 시 display:none 제거 */
.v3d-home-btn {
    display: none !important;
    /* position: absolute;
    top: 12px;
    left: 12px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--h8-color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    z-index: 20;
    transition: all 0.15s; */
}
.v3d-home-btn:hover {
    background: rgba(255,255,255,0.98);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* [임시 숨김] 사이드바 + 레이어 슬라이더 — 나중에 다듬을 때 display 복원 */
.v3d-sidebar { display: none !important; }
.v3d-sb-layer { display: none !important; }
.v3d-right-stack { right: 12px; width: 300px; }

/* 레이어 슬라이더 (우하단 플로팅 카드) */
.v3d-sb-layer {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 38px;
    box-sizing: border-box;
    padding: 8px 0;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    z-index: 20;
}
.v3d-lf-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--h8-color-text-muted);
    white-space: nowrap;
}
.v3d-sb-layer input[type="range"] {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 24px;
    height: 110px;
    cursor: pointer;
    accent-color: var(--h8-color-primary);
    margin: 0 -10px;
    padding: 0 10px;
}

/* 퀴즈 클릭 팝업 */
.v3d-quiz-click-popup {
    display: none;
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--h8-color-bg-card);
    border: 1px solid var(--h8-color-border);
    border-radius: 12px;
    padding: 12px 16px;
    z-index: 36;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    text-align: center;
    min-width: 160px;
}
.v3d-quiz-click-popup.show { display: block; }
.v3d-qcp-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--h8-color-text);
}
.v3d-qcp-btns {
    display: flex;
    gap: 8px;
}
.v3d-qcp-btn {
    flex: 1;
    padding: 8px 0;
    border: 1px solid var(--h8-color-border);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    background: var(--h8-color-bg);
    color: var(--h8-color-text);
}
.v3d-qcp-btn:hover { background: var(--h8-color-bg-hover); }
.v3d-qcp-answer {
    background: var(--h8-color-primary);
    color: #fff;
    border-color: var(--h8-color-primary);
}
.v3d-qcp-answer:hover { opacity: 0.9; }

/* 기시/정지 토글 (순환: off → 기시 → 정지 → off) */
.v3d-label-origin-wrap {
    padding: 2px 0 0;
}
.v3d-label-origin-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 6px;
    background: rgba(255,255,255,0.6);
    font-size: 11px;
    color: var(--h8-color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    justify-content: center;
}
.v3d-label-origin-toggle:hover { background: rgba(255,255,255,0.9); }
.v3d-label-origin-toggle.origin {
    border-color: #e74c3c;
    color: #e74c3c;
    background: rgba(231,76,60,0.08);
}
.v3d-label-origin-toggle.insertion {
    border-color: #3498db;
    color: #3498db;
    background: rgba(52,152,219,0.08);
}

/* 카메라 패널 */
.v3d-sb-cam-mode {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.v3d-sb-cam-mode-btn {
    flex: 1;
    padding: 6px;
    border: 1px solid var(--h8-color-border);
    border-radius: 8px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.v3d-sb-cam-mode-btn:hover { background: var(--h8-color-bg-hover); }
.v3d-sb-cam-mode-btn.active {
    background: var(--h8-color-primary);
    color: #fff;
    border-color: var(--h8-color-primary);
}
.v3d-sb-cam-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}
.v3d-sb-cam-btn {
    padding: 8px;
    border: 1px solid var(--h8-color-border);
    border-radius: 8px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.v3d-sb-cam-btn:hover {
    background: var(--h8-color-bg-hover);
    color: var(--h8-color-text);
}
.v3d-sb-cam-actions {
    display: flex;
    gap: 4px;
}
.v3d-sb-cam-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--h8-color-border);
    border-radius: 8px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}
.v3d-sb-cam-action:hover { background: var(--h8-color-bg-hover); color: var(--h8-color-text); }

/* ===== 북마크 패널 ===== */
.v3d-bk-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--h8-color-border);
    border-radius: 8px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 8px;
}
.v3d-bk-save-btn:hover {
    border-color: var(--h8-color-primary);
    color: var(--h8-color-primary);
    background: var(--h8-color-bg-hover);
}
.v3d-bk-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;
}
.v3d-bk-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    user-select: none;
}
/* 범용 드래그 핸들 */
.v3d-bk-drag,
.toc-sf-drag,
.fp-drag {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--h8-color-text-muted);
    cursor: grab;
    opacity: 0.4;
    touch-action: none;
}
.v3d-bk-drag:active,
.toc-sf-drag:active,
.fp-drag:active { cursor: grabbing; }
.drag-active {
    background: var(--h8-color-bg-hover) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 10;
    opacity: 0.9;
}
@media (hover: hover) {
    .v3d-bk-item:hover {
        background: var(--h8-color-bg-hover);
    }
}
.v3d-bk-item:active {
    background: var(--h8-color-bg-hover);
}
.v3d-bk-item-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--h8-color-primary);
}
.v3d-bk-item-name {
    flex: 1;
    font-size: 12px;
    color: var(--h8-color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v3d-bk-item-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
@media (hover: hover) {
    .v3d-bk-item:hover .v3d-bk-item-actions {
        opacity: 1;
        pointer-events: auto;
    }
}
.v3d-bk-item-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--h8-color-text-muted);
    cursor: pointer;
    padding: 0;
}
.v3d-bk-item-actions button:hover {
    background: var(--h8-color-bg-hover);
    color: var(--h8-color-text);
}
.v3d-bk-action-btn.saved {
    color: var(--h8-color-primary) !important;
    opacity: 1;
}
.v3d-bk-action-btn.saved svg {
    fill: var(--h8-color-primary);
}
.v3d-bk-action-btn.has-memo {
    color: var(--h8-color-warning) !important;
    opacity: 1;
}
/* 모바일에서 저장/메모 상태 버튼은 항상 보이도록 */
.v3d-bk-action-btn.saved,
.v3d-bk-action-btn.has-memo {
    pointer-events: auto;
}
.v3d-bk-empty {
    text-align: center;
    font-size: 11px;
    color: var(--h8-color-text-muted);
    padding: 16px 0;
}
.v3d-bk-input {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.v3d-bk-input.hidden { display: none; }
.v3d-bk-input-field {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--h8-color-border);
    border-radius: 6px;
    font-size: 12px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text);
    outline: none;
}
.v3d-bk-input-field:focus {
    border-color: var(--h8-color-primary);
}
.v3d-bk-input-ok,
.v3d-bk-input-cancel {
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}
.v3d-bk-input-ok {
    background: var(--h8-color-primary);
    color: #fff;
}
.v3d-bk-input-cancel {
    background: var(--h8-color-bg-hover, #eee);
    color: var(--h8-color-text-muted);
}

/* ===== 모바일 백드롭 ===== */
.v3d-mobile-backdrop {
    display: none;
}

/* ===== 풀스크린 사이드바 모바일 반응형 (≤768px) ===== */
@media (max-width: 768px) {
    /* 풀스크린 높이 */
    body.v3d-fullscreen .viewer3d-view {
        height: 100vh !important;
        height: 100dvh !important;
    }

    /* 기존 모바일 전용 UI 숨기기 */
    body.v3d-fullscreen .viewer3d-menu-btn { display: none !important; }
    body.v3d-fullscreen .v3d-mobile-layer { display: none !important; }
    body.v3d-fullscreen .v3d-pose-float-bar { display: none !important; }
    body.v3d-fullscreen .viewer3d-cam { display: none !important; }

    /* 관련 영상 패널 — 모바일 숨김 */
    .v3d-related-panel { display: none !important; }

    /* 사이드바 → 하단 가로 바 */
    .v3d-sidebar {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: center;
        gap: 6px;
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(0,0,0,0.08);
        border-radius: 0;
    }
    .v3d-sb-divider {
        width: 1px;
        height: 28px;
    }
    .v3d-sb-icon {
        width: 36px;
        height: 36px;
    }
    /* 팝업 패널 → 바텀시트 (하단바 위) */
    .v3d-sb-panel {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 60vh;
        border-radius: 16px 16px 0 0;
        padding-bottom: 0;
        z-index: 32;
    }

    /* 사전 패널 → 바텀시트 */
    body.v3d-fullscreen .v3d-left-stack {
        position: fixed;
        top: auto;
        left: 0; right: 0; bottom: 0;
        width: 100%;
        max-height: 55vh;
        border-radius: 16px 16px 0 0;
        border: none;
        border-top: 1px solid rgba(0,0,0,0.08);
        box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
        transform: translateY(100%);
        padding-bottom: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 32;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        gap: 0;
        pointer-events: auto;
    }
    body.v3d-fullscreen .v3d-left-stack.dict-mode,
    body.v3d-fullscreen .v3d-left-stack.open {
        transform: translateY(0);
    }
    /* 모바일: 카드 스타일 리셋 (바텀시트 내부) */
    body.v3d-fullscreen .v3d-left-stack .v3d-search-mode,
    body.v3d-fullscreen .v3d-left-stack .v3d-dict-wrapper,
    body.v3d-fullscreen .v3d-left-stack .viewer3d-panel-head,
    body.v3d-fullscreen .v3d-left-stack .viewer3d-panel-dict {
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* 홈 버튼: 좌상단, 축소 */
    .v3d-home-btn {
        width: 36px; height: 36px;
        top: 8px; left: 8px;
    }
    /* dict-mode일 때 < 뒤로가기 숨기고 ×만 표시 */
    .v3d-dict-panel.dict-mode .viewer3d-back-btn {
        display: none;
    }

    /* 되돌리기/다시하기: 우상단 */
    .v3d-undo-group {
        bottom: auto;
        left: auto;
        top: 8px;
        right: 8px;
        transform: none;
    }

    /* 레이어 슬라이더: 우측 세로 중앙 */
    .v3d-sb-layer {
        bottom: auto;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* 모바일 백드롭 (하단바 위, 바텀시트 아래) */
    .v3d-mobile-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.3);
        z-index: 31;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }
    .v3d-mobile-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ===== 하단 독 바 (PC only, floating) ===== */
.v3d-dock {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.05);
    z-index: 30;
    transition: opacity 0.25s ease;
}
.v3d-dock-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    color: #888;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
    font-family: inherit;
    padding: 0;
}
.v3d-dock-item:hover {
    background: #f5f5f5;
}
.v3d-dock-item.active {
    color: #888;
}
.v3d-dock-item.active::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #aaa;
}
.v3d-dock-label { display: none; }
.v3d-dock-sep {
    width: 1px;
    height: 28px;
    background: rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    margin: 0 2px;
}

/* Dock-driven panel hide — 개별 패널에 적용 (v3d-search-panel, v3d-dict-panel 위에 정의됨) */
/* 비디오: 위로 슬라이드 아웃, 사진: 아래로 슬라이드 아웃 */
.v3d-related-panel.dock-hidden,
.v3d-photo-panel.dock-hidden {
    display: none !important;
}
.v3d-mp-panel.hidden { display: none !important; }

/* ── 3D 뷰어 마이페이지 패널 (확장형 — rv 패턴) ── */
.v3d-mp-panel {
    background: var(--h8-color-bg-card);
    border: 1px solid var(--h8-color-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.v3d-mp-panel.mp-expanded {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto !important;
    z-index: 50;
    border-radius: 0;
    transform-origin: bottom center;
    animation: mp-panel-expand .3s ease;
}
.v3d-mp-panel.mp-shrink {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto !important;
    z-index: 50;
    border-radius: 0;
    transform-origin: bottom center;
    animation: mp-panel-shrink .25s ease forwards;
}
@keyframes mp-panel-expand {
    from { opacity: 0.5; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes mp-panel-shrink {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.6); }
}
.v3d-mp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--h8-color-border);
    flex-shrink: 0;
}
.v3d-mp-head-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--h8-color-text);
}
.v3d-mp-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
/* 사이드바 + 메인 레이아웃 */
.v3d-mp-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.v3d-mp-sidebar {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid var(--h8-color-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 8px 0;
}
.v3d-mp-side-section {
    padding: 0 8px;
}
.v3d-mp-side-section + .v3d-mp-side-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--h8-color-border-light);
}
.v3d-mp-side-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--h8-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.v3d-mp-side-add {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--h8-color-text-muted);
    padding: 2px;
    border-radius: 4px;
    display: flex;
}
.v3d-mp-side-add:hover { color: var(--h8-color-text); background: var(--h8-color-bg-hover); }
.v3d-mp-side-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.v3d-mp-side-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 13px;
    color: var(--h8-color-text);
}
.v3d-mp-side-item:hover { background: var(--h8-color-bg-hover); }
.v3d-mp-side-item.active {
    background: var(--h8-color-primary-light);
    color: var(--h8-color-primary);
    font-weight: 600;
}
.v3d-mp-side-item.active .v3d-mp-side-icon path { fill: var(--h8-color-primary); opacity: 0.9; }
.v3d-mp-side-icon { flex-shrink: 0; width: 16px; height: 16px; }
.v3d-mp-side-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v3d-mp-side-count {
    font-size: 10px;
    color: var(--h8-color-text-muted);
    background: var(--h8-color-bg-hover);
    padding: 1px 6px;
    border-radius: 8px;
}
.v3d-mp-main {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    min-width: 0;
}
.v3d-mp-welcome {
    padding: 40px 20px;
    text-align: center;
    color: var(--h8-color-text-muted);
}
.v3d-mp-welcome h3 {
    font-size: 18px;
    color: var(--h8-color-text);
    margin-bottom: 8px;
}
.v3d-mp-welcome p { font-size: 13px; margin-bottom: 20px; }
.v3d-mp-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    min-height: 0;
}
.v3d-mp-empty {
    text-align: center;
    padding: 30px 16px;
    color: var(--h8-color-text-muted);
    font-size: 13px;
}
/* 마이페이지 카드 그리드 — v3d-related-body.thumb-view 재활용 */
.v3d-mp-main .v3d-related-body.thumb-view {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
}
.v3d-mp-main .v3d-related-body.thumb-view .v3d-rv-card {
    width: calc(20% - 5px);
}

/* 폴더 상세 */
.v3d-mp-detail-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--h8-color-border);
}
.v3d-mp-detail-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.v3d-mp-btn-sm {
    padding: 4px 10px;
    border: 1px solid var(--h8-color-border);
    border-radius: 6px;
    background: transparent;
    color: var(--h8-color-text-muted);
    font-size: 11px;
    cursor: pointer;
}
.v3d-mp-btn-sm:hover { background: var(--h8-color-bg-hover); color: var(--h8-color-text); }
.v3d-mp-detail-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--h8-color-text);
}
.v3d-mp-detail-count {
    font-size: 11px;
    color: var(--h8-color-text-muted);
}
.v3d-mp-item-list { display: flex; flex-direction: column; gap: 2px; }
.v3d-mp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}
.v3d-mp-item:hover { background: var(--h8-color-bg-hover); }
.v3d-mp-item-thumb {
    width: 40px;
    height: 28px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--h8-color-bg-hover);
}
.v3d-mp-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.v3d-mp-item-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--h8-color-text);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.v3d-mp-item-sub {
    font-size: 10px;
    color: var(--h8-color-text-muted);
}

/* 관리 탭 */
.v3d-mp-settings { display: flex; flex-direction: column; gap: 0; }
.v3d-mp-plan-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.v3d-mp-plan-badge {
    padding: 3px 10px;
    background: var(--h8-color-primary);
    color: #fff;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.v3d-mp-plan-desc {
    font-size: 12px;
    color: var(--h8-color-text-muted);
}
.v3d-mp-stat-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.v3d-mp-stat {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    background: var(--h8-color-bg-hover);
    border-radius: 8px;
}
.v3d-mp-stat span {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--h8-color-text);
}
.v3d-mp-stat small {
    font-size: 10px;
    color: var(--h8-color-text-muted);
}
.v3d-mp-divider {
    height: 1px;
    background: var(--h8-color-border);
    margin: 4px 0;
}
.v3d-mp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 13px;
    color: var(--h8-color-text);
}
.v3d-mp-select {
    padding: 4px 8px;
    border: 1px solid var(--h8-color-border);
    border-radius: 6px;
    font-size: 12px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text);
}
.v3d-mp-btn {
    padding: 4px 10px;
    border: 1px solid var(--h8-color-border);
    border-radius: 6px;
    background: var(--h8-color-bg);
    color: var(--h8-color-text);
    font-size: 12px;
    cursor: pointer;
}
.v3d-mp-btn:hover { background: var(--h8-color-bg-hover); }
.v3d-mp-btn-danger {
    color: #e74c3c;
    border-color: #e74c3c50;
}
.v3d-mp-btn-danger:hover { background: #e74c3c10; }

/* Hide dock on mobile */
@media (max-width: 768px) {
    .v3d-dock { display: none !important; }
}

/* ===== Dict Group Section (근육 그룹 계층 구조) ===== */
.dict-group-section {
    grid-column: 1 / -1;
    margin-bottom: var(--h8-spacing-md);
}

.dict-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px 8px;
    border-bottom: 1px solid var(--h8-color-border);
    margin-bottom: var(--h8-spacing-sm);
}

.dict-group-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--h8-color-text);
}

.dict-group-latin {
    font-size: 12px;
    color: var(--h8-color-text-dim);
    font-style: italic;
}

.dict-group-count {
    font-size: 11px;
    color: var(--h8-color-text-dim);
    background: var(--h8-color-bg-subtle, #f0f0f0);
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: auto;
}

.dict-group-children {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--h8-spacing-lg);
}

@media (min-width: 769px) and (max-width: 1100px) {
    .dict-group-children {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .dict-group-children {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--h8-spacing-sm);
    }

    .dict-group-header {
        padding: 8px 2px 6px;
    }

    .dict-group-name {
        font-size: 14px;
    }
}

/* ===== 커스텀 모달 (alert/confirm) ===== */
.custom-modal-overlay {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.custom-modal-overlay.active { opacity: 1; }
.custom-modal {
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px 20px;
    max-width: 340px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}
.custom-modal-overlay.active .custom-modal { transform: scale(1); }
.custom-modal-msg {
    font-size: 0.9375rem;
    color: #333;
    text-align: center;
    line-height: 1.5;
    margin: 0 0 20px;
}
.custom-modal-btns {
    display: flex;
    gap: 8px;
}
.custom-modal-btn {
    flex: 1;
    padding: 11px;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.2s;
}
.custom-modal-btn.primary {
    background: var(--h8-color-primary, #bb5d5d);
    color: #fff;
}
.custom-modal-btn.primary:hover { opacity: 0.9; }
.custom-modal-btn.secondary {
    background: #f0f0f0;
    color: #666;
}
.custom-modal-btn.secondary:hover { background: #e5e5e5; }

/* ===== 잠금 카드 ===== */
.video-locked {
    cursor: pointer;
}
.video-locked .video-thumbnail {
    position: relative;
}
.thumb-texts-blur {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    filter: blur(4px);
    pointer-events: none;
}
.video-lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* ===== 인증 모달 ===== */
.auth-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.auth-modal-overlay.active {
    display: flex;
}
.auth-modal-card {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    padding: 40px 36px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}
.auth-modal-card h1 { font-size: 1.5rem; font-weight: 700; text-align: center; margin: 0 0 4px; color: #1a1a1a; }
.am-subtitle { text-align: center; color: #888; font-size: 0.9375rem; margin-bottom: 24px; }
.am-social { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.am-social .social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px; border-radius: 8px; font-size: 0.9375rem; font-weight: 500; border: 1px solid #ddd; cursor: pointer; transition: box-shadow 0.2s, transform 0.2s; font-family: inherit; }
.am-social .social-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); transform: translateY(-1px); }
.am-social .social-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.am-social .social-google { background: #fff; color: #333; }
.am-social .social-kakao { background: #FEE500; color: #191919; border-color: #FEE500; }
.am-social .social-naver { background: #03C75A; color: #fff; border-color: #03C75A; }
.am-social .social-apple { background: #000; color: #fff; border-color: #000; }
.am-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #aaa; font-size: 0.8125rem; }
.am-divider::before, .am-divider::after { content: ''; flex: 1; height: 1px; background: #e5e5e5; }
.am-field { margin-bottom: 14px; }
.am-field label { display: block; font-size: 0.8125rem; font-weight: 600; color: #333; margin-bottom: 6px; }
.am-field input { width: 100%; padding: 11px 14px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 0.9375rem; color: #1a1a1a; background: #fff; box-sizing: border-box; font-family: inherit; transition: border-color 0.2s; }
.am-field input::placeholder { color: #bbb; }
.am-field input:focus { outline: none; border-color: #bb5d5d; box-shadow: 0 0 0 3px rgba(187,93,93,0.1); }
.am-submit { width: 100%; padding: 13px; font-size: 1rem; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; background: #bb5d5d; color: #fff; font-family: inherit; transition: background 0.2s; }
.am-submit:hover { background: #a34e4e; }
.am-email-display { padding: 10px 14px; border-radius: 8px; background: #f8f7f6; border: 1px solid #eee; font-size: 0.9375rem; color: #333; margin-bottom: 14px; }
.am-forgot { text-align: center; font-size: 0.8125rem; color: #aaa; margin-top: 12px; }
.am-forgot a { color: #bb5d5d; text-decoration: none; }
.am-forgot a:hover { text-decoration: underline; }
.am-back { display: flex; align-items: center; gap: 4px; margin-top: 16px; background: none; border: none; cursor: pointer; font-size: 0.8125rem; color: #aaa; font-family: inherit; }
.am-back:hover { color: #333; }
.auth-modal-close {
    position: absolute;
    top: 12px; right: 14px;
    background: none;
    border: none;
    color: #aaa;
    font-size: 22px;
    cursor: pointer;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}
.auth-modal-close:hover { background: rgba(0,0,0,0.05); }
.purchase-modal-card {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    padding: 48px 36px 36px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    text-align: center;
    box-sizing: border-box;
}
.purchase-modal-icon { color: #aaa; margin-bottom: 20px; }
.purchase-modal-card h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 12px; color: #1a1a1a; }
.purchase-modal-card p { font-size: 0.9rem; color: #888; line-height: 1.6; margin: 0 0 28px; }
.purchase-modal-btn {
    display: block; width: 100%; padding: 14px;
    background: #bb5d5d; color: #fff; border: none; border-radius: 8px;
    font-size: 1rem; font-weight: 600; text-decoration: none; text-align: center;
    cursor: pointer; transition: background 0.2s; box-sizing: border-box;
}
.purchase-modal-btn:hover { background: #a34e4e; }
.purchase-modal-close-text {
    display: block; width: 100%; margin-top: 12px; padding: 10px;
    background: none; border: none; color: #aaa; font-size: 0.8125rem;
    cursor: pointer; font-family: inherit;
}
.purchase-modal-close-text:hover { color: #666; }
@media (max-width: 480px) {
    .auth-modal-card { padding: 32px 24px; width: 95%; }
    .purchase-modal-card { padding: 40px 24px 28px; width: 95%; }
}
.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
}
.auth-tab {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    color: #888;
    font-size: 15px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.auth-tab.active {
    color: #fff;
    border-bottom-color: #d4a66a;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-form input {
    padding: 12px 14px;
    border: 1px solid #333;
    border-radius: 8px;
    background: #2a2a2a;
    color: #e0e0e0;
    font-size: 14px;
    outline: none;
}
.auth-form input:focus {
    border-color: #d4a66a;
}
.auth-submit {
    padding: 12px;
    background: #d4a66a;
    color: #1e1e1e;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.auth-submit:hover {
    background: #c4964a;
}
.auth-error {
    color: #e57373;
    font-size: 13px;
    min-height: 18px;
    text-align: center;
}
.auth-note {
    margin-top: 16px;
    font-size: 12px;
    color: #666;
    text-align: center;
    line-height: 1.5;
}

/* ===== Topic Popup ===== */
.topic-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.topic-popup-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.topic-popup-wrapper {
    position: fixed;
    inset: 0;
    z-index: 1101;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.topic-popup-wrapper.active {
    pointer-events: auto;
    opacity: 1;
}

.topic-popup-container {
    background: var(--h8-color-bg-card, #fff);
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15);
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}
.topic-popup-wrapper.active .topic-popup-container {
    transform: translateY(0);
}
.topic-popup-wrapper.closing .topic-popup-container {
    transform: translateY(20px);
}

.topic-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--h8-color-border);
    flex-shrink: 0;
}

.topic-popup-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--h8-color-text);
    flex: 1;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 12px;
}

.topic-popup-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.topic-popup-close {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--h8-radius-sm, 6px);
    color: var(--h8-color-text-secondary);
    font-size: 22px;
    transition: background 0.15s;
}
.topic-popup-close:hover {
    background: var(--h8-color-bg-hover);
}

.topic-popup-body-area {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    -webkit-overflow-scrolling: touch;
}

.topic-popup-body-area .topic-popup-summary {
    font-size: 13px;
    color: var(--h8-color-text-sub, #888);
    margin: 0 0 20px;
    line-height: 1.7;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--h8-color-border);
}

.topic-popup-body-area .topic-body {
    font-size: 14px;
    line-height: 1.8;
    color: var(--h8-color-text);
}
.topic-popup-body-area .topic-body h2 {
    font-size: 15px;
    font-weight: 600;
    margin: 28px 0 12px;
    padding-top: 16px;
    border-top: 1px solid var(--h8-color-border);
    position: relative;
}
.topic-popup-body-area .topic-body h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.topic-popup-body-area .topic-body p {
    margin: 0 0 12px;
}
.topic-popup-body-area .topic-body b,
.topic-popup-body-area .topic-body strong {
    font-weight: 600;
    color: var(--h8-color-text);
}

.topic-popup-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 20px;
    border-top: 1px solid var(--h8-color-border);
    flex-shrink: 0;
}
.topic-popup-tags:empty {
    display: none;
}

/* Topic nav arrows */
.topic-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--h8-color-bg-card, #fff);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.15s, transform 0.15s;
    pointer-events: auto;
}
.topic-nav-arrow:hover {
    background: var(--h8-color-bg-hover, #f5f5f5);
}
.topic-nav-arrow svg {
    width: 20px;
    height: 20px;
    color: var(--h8-color-text);
}
.topic-nav-prev {
    left: max(16px, calc(50% - 410px));
}
.topic-nav-next {
    right: max(16px, calc(50% - 410px));
}

/* Mobile topic popup */
@media (max-width: 768px) {
    .topic-popup-wrapper {
        align-items: flex-end;
    }
    .topic-popup-container {
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    .topic-popup-wrapper.active .topic-popup-container {
        transform: translateY(0);
    }
    .topic-popup-wrapper.closing .topic-popup-container {
        transform: translateY(100%);
    }
    .topic-nav-arrow {
        display: none;
    }
    .topic-popup-body-area {
        padding: 20px 16px;
    }
    .topic-popup-tags {
        padding: 10px 16px;
    }
}

/* ===== [신규 포맷] 진짜 영상 카드 — 2칸 spanning, 옆 영상 카드와 높이 일치 ===== */
.video-card-full {
    grid-column: span 2;
    align-self: stretch;   /* 데스크탑·태블릿: 옆 카드 높이에 맞춤 */
    background: var(--h8-color-bg);
    border-radius: var(--h8-radius-lg);
    overflow: hidden;
    box-shadow: var(--h8-shadow-sm);
    cursor: pointer;
    transition: transform var(--h8-transition-fast), box-shadow var(--h8-transition-fast);
    position: relative;
    display: flex;
    flex-direction: column;
}
/* 포스터 로딩 중엔 스켈레톤 표시 */
.video-card-full.card-loading .video-card-full-poster,
.video-card-full.card-loading .video-card-full-info,
.video-card-full.card-loading .video-card-full-play,
.video-card-full.card-loading .video-card-full-duration,
.video-card-full.card-loading .video-card-full-badge {
    opacity: 0;
}
.video-card-full .card-skeleton {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    background: linear-gradient(90deg, #f5f3f2 25%, #faf9f8 50%, #f5f3f2 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    pointer-events: none;
}
.video-card-full.card-loaded .card-skeleton {
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}
.video-card-full.card-loaded .video-card-full-poster,
.video-card-full.card-loaded .video-card-full-info,
.video-card-full.card-loaded .video-card-full-play,
.video-card-full.card-loaded .video-card-full-duration,
.video-card-full.card-loaded .video-card-full-badge {
    animation: cardFadeIn 0.3s ease-out;
}
@media (hover: hover) {
    .video-card-full:hover {
        transform: translateY(-4px);
        box-shadow: var(--h8-shadow-md);
    }
}
.video-card-full-player {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.video-card-full-poster,
.video-card-full-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-card-full-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}
.video-card-full-play svg {
    width: 22px;
    height: 22px;
    color: #1a1614;
    margin-left: 3px;
}
.video-card-full-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 2;
}
.video-card-full-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--h8-color-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
    z-index: 2;
    letter-spacing: 0.02em;
}
/* 정보 영역: 영상 위 하단 오버레이로 표시 — 그라데이션 없이 검정 텍스트만 */
.video-card-full-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 12px 18px 14px;
    background: transparent;
    color: var(--h8-color-text);
    pointer-events: none;
}
.video-card-full-info .video-info-row,
.video-card-full-info .video-num,
.video-card-full-desc {
    display: none;
}
.video-card-full-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    color: var(--h8-color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 768px) {
    /* 모바일에선 풀 영상이 단독 행이라 비교 카드가 없음 → aspect-ratio로 높이 결정 */
    .video-card-full { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
    .video-card-full { grid-column: span 2; }
    .video-card-full-play { width: 44px; height: 44px; }
    .video-card-full-play svg { width: 18px; height: 18px; }
    .video-card-full-duration { font-size: 10.5px; padding: 2px 6px; bottom: 8px; right: 8px; }
    .video-card-full-badge { font-size: 9.5px; padding: 2px 7px; top: 8px; left: 8px; }
    .video-card-full-info { padding: 20px 14px 12px; }
    .video-card-full-title { font-size: 15px; }
}

/* ===== [신규] 혼합 그리드 — 팁 카드 (단색 배경, 인용글 스타일) ===== */
/* 팁 카드 — 전체 그리드 폭을 차지하는 가로 바 (인용 위, 본문 아래 — 세로 두 줄) */
.tip-card-mix {
    grid-column: 1 / -1;
    border-radius: var(--h8-radius-lg);
    padding: 16px 18px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    box-shadow: var(--h8-shadow-sm);
    transition: transform var(--h8-transition-fast), box-shadow var(--h8-transition-fast);
    color: #fff;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
/* 팁 변주 — 채도 낮춰 톤 다운 (덜 튀게) */
.tip-card-mix.variant-primary { background: #9c6868; }  /* 더스티 로즈 */
.tip-card-mix.variant-alt     { background: #5c8369; }  /* 더스티 세이지 그린 (빨강·파랑과 명도 맞춤) */
.tip-card-mix.variant-accent  { background: #6e809d; }  /* 더스티 블루 */
@media (hover: hover) {
    .tip-card-mix:hover {
        transform: translateY(-2px);
        box-shadow: var(--h8-shadow-md);
    }
}
@media (hover: none) {
    .tip-card-mix:active {
        transform: scale(0.99);
        transition: transform 0.1s;
    }
}
.tip-card-mix-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.tip-card-mix-quote {
    font-size: 22px;
    line-height: 1.1;
    opacity: 0.4;
    font-family: Georgia, serif;
    margin-bottom: 2px;
}
.tip-card-mix-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    color: #fff;
}
.tip-card-mix-text em {
    font-style: normal;
    border-bottom: 2px solid rgba(255,255,255,0.5);
    padding-bottom: 1px;
}
.tip-card-mix-foot {
    font-size: 10.5px;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    flex: 0 0 auto;
    align-self: flex-end;
    white-space: nowrap;
    margin-bottom: 2px;
}
@media (max-width: 640px) {
    .tip-card-mix { padding: 14px 16px 12px; gap: 12px; }
    .tip-card-mix-quote { font-size: 18px; }
    .tip-card-mix-text { font-size: 13px; }
    .tip-card-mix-foot { font-size: 9.5px; }
}

/* ===== [신규] 혼합 그리드 — 사전 카드 (muscle / bone) ===== */
.dict-card-mix {
    background: var(--h8-color-bg-card);
    border: 1px solid var(--h8-color-border-light);
    border-radius: var(--h8-radius-lg);
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform var(--h8-transition-fast), box-shadow var(--h8-transition-fast), border-color var(--h8-transition-fast);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.dict-card-mix.bone { border-left: 3px solid #6da89e; }
.dict-card-mix.muscle { border-left: 3px solid #bb5d5d; }
@media (hover: hover) {
    .dict-card-mix:hover {
        transform: translateY(-4px);
        box-shadow: var(--h8-shadow-sm);
        border-color: var(--h8-color-border);
    }
}
@media (hover: none) {
    .dict-card-mix:active {
        transform: scale(0.985);
        transition: transform 0.1s;
    }
}
.dict-card-mix-initial {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    flex-shrink: 0;
}
.dict-card-mix-body {
    flex: 1;
    min-width: 0;
}
.dict-card-mix-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 2px;
    line-height: 1.35;
    color: var(--h8-color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dict-card-mix-latin {
    font-size: 11px;
    font-style: italic;
    color: var(--h8-color-text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Stack 안 dict 카드 */
.topic-card-mix-stack > .dict-card-mix {
    flex: 1;
    min-height: 0;
    padding: 11px 14px;
}
@media (max-width: 640px) {
    .dict-card-mix { padding: 10px 12px; gap: 10px; }
    .dict-card-mix-initial { width: 30px; height: 30px; font-size: 14px; }
    .dict-card-mix-title { font-size: 12.5px; }
    .dict-card-mix-latin { font-size: 10px; }
    .topic-card-mix-stack > .dict-card-mix { padding: 9px 11px; }
}

/* ===== [신규] 혼합 그리드 — 본문 카드 (article) ===== */
/* 토픽과 완전 동일한 디자인 (시각 구분 없음 — 사용자 요청에 따라) */
.article-card-mix {
    background: var(--h8-color-bg-card);
    border-radius: var(--h8-radius-lg);
    padding: 14px 16px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    box-shadow: var(--h8-shadow-sm);
    transition: transform var(--h8-transition-fast), box-shadow var(--h8-transition-fast);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    .article-card-mix:hover {
        transform: translateY(-4px);
        box-shadow: var(--h8-shadow-md);
    }
}
@media (hover: none) {
    .article-card-mix:active {
        transform: scale(0.985);
        transition: transform 0.1s;
    }
}
.article-card-mix-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.article-card-mix-title {
    font-size: var(--h8-font-size-sm);
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.4;
    color: var(--h8-color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-card-mix-preview {
    font-size: 12px;
    color: var(--h8-color-text-light);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
/* 강조 본문 — 공통 (medium/wide) — 시각 강조 제거, 크기만 다름 */
.article-card-mix.featured {
    padding: 18px 22px;
    align-self: stretch;  /* 옆 영상 카드 높이에 맞춤 */
}
.article-card-mix.featured.size-medium { grid-column: span 1; }
.article-card-mix.featured.size-wide { grid-column: span 2; }
/* 강조 본문 제목 — 0.5칸과 동일 (base 스타일 그대로 사용) */
.article-card-mix.featured .article-card-mix-subtitle {
    font-size: 12px;
    font-style: italic;
    color: var(--h8-color-primary);
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-card-mix.featured .article-card-mix-preview {
    font-size: 12.5px;
    line-height: 1.55;
    -webkit-line-clamp: 5;
}
.article-card-mix.featured.size-wide .article-card-mix-preview {
    font-size: 13px;
    line-height: 1.6;
    -webkit-line-clamp: 4;
}
@media (max-width: 640px) {
    .article-card-mix.featured { padding: 14px 16px; }
    .article-card-mix.featured .article-card-mix-subtitle { font-size: 11px; }
    .article-card-mix.featured .article-card-mix-preview { font-size: 11.5px; -webkit-line-clamp: 4; }
    .article-card-mix.featured.size-wide .article-card-mix-preview { -webkit-line-clamp: 3; }
}

/* ===== 단일페이지 카드 크기 — 영상 카드 스타일 (½/1/2) ===== */
.video-card.page-card.size-half { /* ½ 칸 — 일단 medium과 동일하게 표시 */
    grid-column: span 1;
}
.video-card.page-card.size-medium { grid-column: span 1; }
.video-card.page-card.size-wide { grid-column: span 2; }
.video-card.page-card.size-wide .video-thumbnail {
    /* 2칸 span 시 썸네일 비율 유지 — aspect-ratio가 그대로 따라옴 */
}

/* Stack 안 본문 카드 — 토픽과 동일 */
.topic-card-mix-stack > .article-card-mix {
    flex: 1;
    min-height: 0;
    padding: 14px 18px;
}
@media (max-width: 640px) {
    .article-card-mix { padding: 11px 12px; }
    .article-card-mix-title { font-size: 13px; }
    .article-card-mix-preview { font-size: 11.5px; -webkit-line-clamp: 3; }
    .topic-card-mix-stack > .article-card-mix { padding: 9px 12px; }
    .topic-card-mix-stack .article-card-mix-title { font-size: 12px; margin-bottom: 5px; }
    .topic-card-mix-stack .article-card-mix-preview { font-size: 11px; -webkit-line-clamp: 3; }
}

/* ===== [실험 v1] 혼합 그리드 — 토픽 카드 ===== */
/* 영상 카드 1개 셀에 토픽 2개를 세로로 쌓는 wrapper */
.topic-card-mix-stack {
    display: flex;
    flex-direction: column;
    gap: var(--h8-spacing-lg);
    align-self: stretch;  /* videosGrid의 align-items: start 오버라이드 */
    min-width: 0;
}
.topic-card-mix-stack > .topic-card-mix {
    flex: 1;
    min-height: 0;
    padding: 14px 18px;
}
.topic-card-mix-stack .topic-card-mix-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}
.topic-card-mix-stack .topic-card-mix-title {
    font-size: var(--h8-font-size-sm);
    font-weight: 600;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    margin-bottom: 8px;
}
.topic-card-mix-stack .topic-card-mix-preview {
    font-size: 12px;
    line-height: 1.55;
    color: var(--h8-color-text-light);
    margin: 0;
    -webkit-line-clamp: 5;  /* 요약 빠진 만큼 본문 더 보임 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.topic-card-mix-stack .topic-card-mix-tags {
    display: none;  /* 본문 미리보기로 대체 */
}

.topic-card-mix {
    background: var(--h8-color-bg-card);
    border-radius: var(--h8-radius-lg);
    padding: 14px 16px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    box-shadow: var(--h8-shadow-sm);
    transition: transform var(--h8-transition-fast), box-shadow var(--h8-transition-fast);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    .topic-card-mix:hover {
        transform: translateY(-4px);
        box-shadow: var(--h8-shadow-md);
    }
}
@media (hover: none) {
    .topic-card-mix:active {
        transform: scale(0.985);
        transition: transform 0.1s;
    }
}
.topic-card-mix-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.topic-card-mix-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--h8-color-accent-light);
    color: var(--h8-color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.topic-card-mix-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--h8-color-accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.topic-card-mix-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.topic-card-mix-title {
    font-size: var(--h8-font-size-sm);
    font-weight: 600;
    margin: 0 0 6px;
    line-height: 1.4;
    color: var(--h8-color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.topic-card-mix-summary {
    font-size: 12.5px;
    color: var(--h8-color-text-light);
    line-height: 1.55;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.topic-card-mix-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: auto;
}
.topic-card-mix-tag {
    font-size: 10px;
    color: var(--h8-color-text-muted);
    background: var(--h8-color-bg-soft);
    padding: 2px 7px;
    border-radius: 5px;
}
.topic-card-mix-preview {
    font-size: 12px;
    color: var(--h8-color-text-light);
    line-height: 1.55;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 768px) {
    /* 모바일은 videosGrid의 gap이 작아져서 stack도 맞춰야 함 */
    .topic-card-mix-stack { gap: var(--h8-spacing-sm); }
}
@media (max-width: 640px) {
    .topic-card-mix { padding: 11px 12px; }
    .topic-card-mix-icon { width: 20px; height: 20px; border-radius: 5px; }
    .topic-card-mix-icon svg { width: 11px; height: 11px; }
    .topic-card-mix-label { font-size: 9.5px; }
    .topic-card-mix-title { font-size: 12.5px; }
    .topic-card-mix-summary { font-size: 11.5px; -webkit-line-clamp: 3; }
    .topic-card-mix-tag { font-size: 9.5px; padding: 1.5px 6px; }
    /* 모바일 stack은 영상 카드 높이(≈210px)에 맞춰 콘텐츠 압축 */
    .topic-card-mix-stack > .topic-card-mix {
        padding: 9px 12px;
        overflow: hidden;
    }
    .topic-card-mix-stack .topic-card-mix-title {
        font-size: 12px;
        line-height: 1.3;
        -webkit-line-clamp: 2;
        margin-bottom: 5px;
    }
    .topic-card-mix-stack .topic-card-mix-preview {
        font-size: 11px;
        line-height: 1.4;
        -webkit-line-clamp: 3;  /* 요약 빠진 만큼 한 줄 더 */
    }
}

/* ===== Utilities ===== */
.hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════════════
   비구매자 헤더 전환 — html.is-buyer(구매자·어드민)가 아니면:
   학습하기 헤더·사이드바·모바일 목차 토글을 숨기고 제품 페이지 공용 헤더(#siteNavMount)를 보인다.
   ★헤더의 모양은 전부 /global/site-header.css(pages와 공용 — index.html에서 로드) —
     여기엔 보이기/숨기기 전환만 둔다. 판정·마크업은 app.js applyHeaderMode/mountSiteNavHeader
     + /global/site-nav.js. .site-header는 pages처럼 position:fixed라 #siteNavMount는
     같은 높이(--p-header-h, pages와 동일 48px)의 자리 예약 스페이서로만 쓴다.
═══════════════════════════════════════════════════ */
#siteNavMount { display: none; }
html:not(.is-buyer) .header,
html:not(.is-buyer) .video-toc-panel,
html:not(.is-buyer) .video-toc-toggle,
html:not(.is-buyer) .video-toc-overlay { display: none !important; }
html:not(.is-buyer) #siteNavMount {
    display: block;
    height: var(--p-header-h, 48px);
}
/* 구매자 뷰에선 fixed 헤더·모바일 메뉴도 확실히 숨김 (mount가 display:none이어도 fixed 자손이 남지 않게) */
html.is-buyer #siteNavMount .site-header,
html.is-buyer #siteNavMount .mobile-nav { display: none; }

/* ═══ 🔒 어드민 전용 기능 진입 UI — 토픽·3D 뷰어·사전·퀴즈 (요청됨: 고객에게 완전 비공개) ═══
   기본 = 숨김. app.js _applyAdminOnlyUI가 check_is_admin 통과 시에만 html.is-adminview를 붙인다.
   진짜 보호는 데이터 부재(배포본 strip + ref/_data 어드민 존) — 이 규칙은 빈 섹션 정리용. */
#topicRootFolder,
#tocViewer3dSection,
#dictRootFolderInVideo,
#tocQuizSection { display: none; }
html.is-adminview #topicRootFolder,
html.is-adminview #tocViewer3dSection,
html.is-adminview #dictRootFolderInVideo,
html.is-adminview #tocQuizSection { display: block; }

/* 💰 잠금 카드가 '진짜 블러 이미지'를 그린 경우(app.js가 art-blur-img 부착) — 영상처럼 이미지 블러만.
   CSS 블러(7px)는 블러 이미지가 없어 라이브 렌더(진짜 내용 DOM)로 폴백한 카드에서만 계속 가린다. */
.article-card-mix.article-locked.art-blur-img .article-book-thumb {
    filter: none;
    transform: none;
}