/* ========== 字体引入 ========== */
@font-face {
    font-family: '方正颜宋简体';
    src: url('../font/FZYANSJW.TTF') format('truetype');
}

@font-face {
    font-family: '方正颜宋简体2';
    src: url('../font/FZYANSJW_CU.TTF') format('truetype');
    font-weight: bold;
}

/* ========== 基础重置 ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ecf5ee;
    -webkit-font-smoothing: antialiased;
}

html,
body {
    touch-action: pan-y;
}

a {
    text-decoration: none;
    color: inherit;
}

/* 竖排文本中的引号：强制横排显示，解决Chrome/Firefox/Edge差异 */
.quote-inline1 {
    height: 0.9vw;
    writing-mode: horizontal-tb;
    display: inline-block;
    font-size: 1.5vw;
    text-orientation: mixed;
    line-height: 1.3;
    /* 微调位置，让引号与汉字对齐 */
    transform: translateX(-0.45em);
}

/* 竖排文本中的引号：强制横排显示，解决Chrome/Firefox/Edge差异 */
.quote-inline2 {
    height: 0.9vw;
    font-size: 1.5vw;
    writing-mode: horizontal-tb;
    display: inline-block;
    text-orientation: mixed;
    line-height: 1.3;
    /* 微调位置，让引号与汉字对齐 */
    transform: translateX(0.5em);
}

/* ========== 页面容器 ========== */
.page-wrapper {
    width: 100%;
    margin: 0 auto;
    background: url('../img/0大背景底纹.png') no-repeat left top;
    background-size: cover;
    position: relative;
    overflow-x: hidden;
}

.section-inner {
    width: 100%;
    margin: 0 auto;
    position: relative;
    flex-direction: column;
    display: flex;
}

.section-inner-box {
    display: flex;
    margin-bottom: 4.1667vw;
}

/* ========== 顶部 Banner ========== */
.banner-section {
    position: relative;
    width: 100%;
}

.banner-img {
    width: 100%;
    height: auto;
    /* 提前占位：图片加载前按 1920x900 预留高度，
       避免刷新时滚动位置恢复后 banner 撑开导致视口被推到下一屏 */
    aspect-ratio: 1920 / 900;
}

/* ========== 展览概述 ========== */
.overview-section {
    width: 80%;
    margin: 0 auto;
    padding: 2.0833vw 0 3.125vw;
    position: relative;
}

.title-deco {
    display: flex;
    flex-direction: column;
    margin-right: 3.125vw;
}

.title-deco img {
    width: 10.6771vw;
    height: auto;
    display: block;
}

.overview-title {
    display: flex;
    height: 100%;
    justify-content: center;
    margin-top: -0.7292vw;
}

.cn-title {
    writing-mode: vertical-rl;
    font-size: 1.5625vw;
    letter-spacing: 0.625vw;
    color: #524835;
    font-weight: normal;
    font-family: '方正颜宋简体2';
    padding-top: 1.5625vw;
    margin-left: 0.5208vw;
}

.en-title {
    writing-mode: vertical-rl;
    font-size: 0.925vw;
    color: #524835;
    font-family: '方正颜宋简体';
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5208vw;
}

.overview-line {
    width: max(1px, 0.0521vw);
    height: 100%;
    background: #5f5745;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.overview-line::after {
    content: '';
    flex: 0 0 auto;
    border-radius: 50%;
    /* 固定像素兜底；支持 round() 的浏览器按整像素取整，避免圆点变形 */
    width: 5px;
    height: 5px;
    /* width: round(0.2604vw, 1px);
    height: round(0.2604vw, 1px); */
    background: #5f5745;
}

.overview-content {
    padding-top: 8.8542vw;
    font-family: '方正颜宋简体';
}

.overview-text p {
    font-size: 0.9333vw;
    color: #5f5745;
    text-indent: 2em;
    line-height: 2;
}

.overview-cn-text {
    text-align: justify;
    /* 中文两端对齐：在字符间分配伸缩空间（inter-word 只作用于空格，中文不生效） */
    text-justify: inter-character;
    overflow-wrap: break-word;
    word-break: normal;
}

.overview-text .en-text {
    font-size: 0.9333vw;
    line-height: 1.95;
    color: #6b5f52;
    text-indent: 2em;
}

/* 概述段落间距（原内联样式） */
.overview-text .overview-gap {
    margin-bottom: 1.0417vw;
}

.section-bottom-hw {
    width: 100%;
    height: 4.4271vw;
    display: flex;
    justify-content: flex-end;
}

.section-bottom-hw-img {
    position: absolute;
    bottom: -0.3125vw;
    left: -0.7292vw;
    width: 14.1146vw;
    height: auto;
}

.section-bottom-hw-line {
    width: 35%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    border-bottom: max(1px, 0.0521vw) solid #5f5745;
}

.section-bottom-hw-line::after {
    content: '';
    flex: 0 0 auto;
    border-radius: 50%;
    /* 固定像素兜底；支持 round() 的浏览器按整像素取整，
       避免亚像素宽高取整不一致导致圆点变形为椭圆 */
    width: 5px;
    height: 5px;
    /* width: round(0.2604vw, 1px);
    height: round(0.2604vw, 1px); */
    background: #5f5745;
    /* 圆点贴底线后，下移半个自身高度，让圆心对齐横线中心（响应式，无需 vw 计算） */
    transform: translateY(60%);
}

.deco-3 {
    width: 100%;
    height: 4.4271vw;
    display: flex;
    margin-top: 3.125vw;
    margin-bottom: 4.1667vw;
}

.deco-3-img {
    position: absolute;
    top: -0.3125vw;
    right: -0.7292vw;
    transform: rotate(180deg);
    width: 14.1146vw;
    height: auto;
}

.deco-3-line {
    width: 35%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    border-top: max(1px, 0.0521vw) solid #5f5745;
}

.deco-3-line::after {
    content: '';
    flex: 0 0 auto;
    border-radius: 50%;
    /* 固定像素兜底；支持 round() 的浏览器按整像素取整，避免圆点变形 */
    width: 5px;
    height: 5px;
    /* width: round(0.2604vw, 1px);
    height: round(0.2604vw, 1px); */
    background: #5f5745;
    /* 圆点贴顶线后，上移半个自身高度，让圆心对齐横线中心（响应式，无需 vw 计算） */
    transform: translateY(-60%);
}

/* ========== 展厅场景（全宽） ========== */
.scene-section {
    width: 100%;
}

.scene-section .scene-wrapper {
    width: 80%;
    margin: 0 auto;
}

.scene-img {
    width: 100%;
    height: auto;
    /* 视频实际为 3840x2160（16:9）：metadata 加载前预占位，
       避免 scene-section 高度塌陷引起的布局跳动 */
    aspect-ratio: 16 / 9;
}

/* ========== 虚拟展厅入口（全宽） ========== */
.virtual-section {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 4.1667vw;
    position: relative;
    z-index: 1;
}

.virtual-link {
    width: 100%;
    display: inline-block;
    height: 100%;
}

.virtual-img {
    width: 100%;
    height: auto;
    /* 提前占位（原图 1536x252），保证加载期间布局稳定 */
    aspect-ratio: 1536 / 252;
    transition: transform 0.5s ease;
}

.virtual-link:hover .virtual-img {
    transform: scale(1.01);
}

.hall-section-img {
    position: absolute;
    top: -29.3vw;
    right: -9vw;
    width: 41.45vw;
}

/* ========== 展厅/单元通用 ========== */
.hall-section,
.unit-section,
.end-section {
    margin-bottom: 3.125vw;
    position: relative;
}

/* 序厅顶部留白（原内联样式） */
.hall-section {
    padding-top: 5.7292vw;
}

.chapter-title {
    margin-bottom: 2.6042vw;
}

/* 章节标题图（所有标题图等高 30px，按高度等比缩放） */
.chapter-title img {
    height: 1.5625vw;
    width: auto;
    max-width: 100%;
    display: block;
}

.section-inner-box-content {
    width: calc(100% - 12.5vw);
}

.chapter-intro p {
    font-size: 0.9333vw;
    color: #5f5745;
    line-height: 2;
    text-align: justify;
    /* 中文两端对齐：在字符间分配伸缩空间 */
    text-justify: inter-character;
    text-indent: 2em;
    font-family: "方正颜宋简体";
}

/* ========== 文物网格 ========== */
.artifact-grid {
    display: grid;
    gap: 0.5208vw;
    margin-top: 2.0833vw;
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.artifact-item {
    height: 26.0417vw;
    position: relative;
    background: #c0cac5;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.artifact-img {
    margin-bottom: 1.5625vw;
    transition: transform 0.4s ease;
    display: block;
    width: auto;
    height: auto;
    max-width: 92%;
    max-height: 75%;
    object-fit: contain;
}

.artifact-item:hover .artifact-img {
    transform: scale(1.04);
}

.artifact-tag {
    position: absolute;
    writing-mode: vertical-rl;
    top: 1.5625vw;
    left: 1.5625vw;
    font-size: 1.25vw;
    letter-spacing: 0.1042vw;
    color: #24221c;
    z-index: 2;
    font-family: "方正颜宋简体";
}

.artifact-info {
    writing-mode: vertical-rl;
    position: absolute;
    font-size: 1.0417vw;
    top: 1.5625vw;
    right: 1.5625vw;
    font-family: "方正颜宋简体";
    color: #4d473c;
}

/* ========== 展厅瞬间 ========== */
.gallery-section {
    position: relative;
    width: 100%;
    margin: 0 auto 5.2083vw;
}

.gallery-title {
    width: 80%;
    margin: 0 auto 2.3438vw;
    display: flex;
    justify-content: space-between;
}

.gallery-title-text {
    font-size: 1.4583vw;
    letter-spacing: 0.5208vw;
    color: #5f5745;
    margin-bottom: 0.4167vw;
    font-family: "方正颜宋简体2";
}

.gallery-title-en {
    display: block;
    font-size: 0.7292vw;
    color: #5f5745;
    font-family: "方正颜宋简体";
}

.gallery-title-container {
    display: flex;
    flex-direction: column;
}

.gallery-title-hw {
    width: 50%;
}

/* 展厅瞬间装饰图宽度（原内联样式） */
.gallery-title-hw .section-bottom-hw-img {
    width: 10.4167vw;
}

/* ========== 展厅瞬间轮播 ========== */
.gallery-carousel {
    position: relative;
    width: 90%;
    margin-left: auto;
    margin-right: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* 允许纵向滚动、横向交给拖拽 */
    touch-action: pan-y;
}

.gallery-carousel.is-dragging {
    cursor: grabbing;
}

.gallery-viewport {
    overflow: hidden;
}

.gallery-track {
    display: flex;
    transition: transform 0.5s ease;
}

.gallery-item {
    flex: 0 0 25%;
    padding: 0 0.3125vw;
    box-sizing: border-box;
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: auto;
    /* aspect-ratio: 4 / 3; */
    object-fit: cover;
    border-radius: 0.1042vw;
    transition: transform 0.5s ease;
    display: block;
    -webkit-user-drag: none;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* 拖拽中取消图片放大，避免视觉抖动 */
.gallery-carousel.is-dragging .gallery-item img {
    transform: none;
}

/* 轮播指示点 */
.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4167vw;
    margin-top: 1.0417vw;
}

.carousel-dot {
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s ease;
    /* 整像素取整，防止圆点变形（同 .section-bottom-hw-line::after） */
    width: 8px;
    height: 8px;
    width: round(0.4167vw, 1px);
    height: round(0.4167vw, 1px);
    background: #c3b79e;
}

.carousel-dot.active {
    background: #691216;
}

/* ========== 底部信息 ========== */
.footer-section {
    position: relative;
    width: 100%;
    height: 18.2292vw;
    /* 背景改用 ::before 承载，方便移动端对背景单独 transform 旋转 */
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 桌面端：背景层伪元素（cover 自适应铺满） */
.footer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/9底部背景.png') no-repeat center / cover;
    z-index: 0;
}

.footer-content {
    position: relative;
    z-index: 1;
    /* 抬到背景层之上，避免旋转后被遮挡 */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-cards {
    display: flex;
    justify-content: space-between;
    width: 80%;
    gap: 2vw;
}

.footer-card {
    flex: 1;
    text-align: center;
    /* padding: 0 0.7813vw; */
}

.footer-card img {
    width: 100%;
    height: auto;
}

.footer-card:hover img {
    opacity: 1;
}

/* ========== 重点展品右侧标记 ========== */
.unit-box {
    width: 80%;
    position: relative;
    margin: 0 auto;
}

.unit-right-mark {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
}

.unit-right-mark-img {
    width: 10.6771vw;
    transform: scaleX(-1);
}

.right-mark-container {
    display: flex;
    justify-content: center;
    margin-top: -0.5208vw;
    margin-left: -1.3417vw;
}

.right-mark-tip {
    writing-mode: vertical-rl;
    font-size: 0.9333vw;
    color: #524835;
    font-family: '方正颜宋简体';
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 0.5208vw;
    margin-bottom: 1.0417vw;
}

.right-mark-line {
    width: max(1px, 0.0521vw);
    height: 20.8333vw;
    background: #5f5745;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.right-mark-line::after {
    content: '';
    flex: 0 0 auto;
    border-radius: 50%;
    /* 固定像素兜底；支持 round() 的浏览器按整像素取整，避免圆点变形 */
    width: 5px;
    height: 5px;
    /* width: round(0.2604vw, 1px);
    height: round(0.2604vw, 1px); */
    background: #5f5745;
}

.gallery-title-hw-line {
    width: 100%;
    height: 3.6458vw;
}

.right-mark-h {
    writing-mode: vertical-rl;
    font-size: 1.5625vw;
    letter-spacing: 0.625vw;
    color: #524835;
    font-weight: normal;
    font-family: '方正颜宋简体2';
    padding-top: 1.5625vw;
    margin-left: 0.5208vw;
}

/* 滚动时固定在视口顶部（仅桌面端，由 JS 切换 .is-fixed / .is-bottom） */
@media (min-width: 769px) {
    .unit-right-mark.is-fixed {
        position: fixed;
        top: 2.0833vw;
        right: 10%;
        z-index: 10;
    }



    /* 滚到单元区底部后不再吸顶，贴到单元区底部随内容滚走（避免跳回顶部“消失”） */
    .unit-right-mark.is-bottom {
        position: absolute;
        top: auto;
        bottom: 0;
        right: 0;
    }
}

/* ========== 滚动进入动画（IntersectionObserver 触发） ========== */
.reveal {
    opacity: 0;
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    /* 不加 will-change: transform —— 带 will-change 的元素会被滚动锚定
       （scroll anchoring）排除在锚点候选之外，导致刷新后布局变化
       无法被补偿，视口跳到下一屏 */
}

/* 位移初始态：由 JS 在「进入视口那一刻」才加 pre-reveal，避免 transform 位移
   干扰 IntersectionObserver 的边界框判定（否则会晚触发甚至不触发）。
   transition:none 让位移瞬间到位，随后移除 pre-reveal 触发归位过渡 */
.reveal.pre-reveal {
    transition: none;
}

.reveal-left.pre-reveal {
    transform: translateX(-140px);
}

.reveal-right.pre-reveal {
    transform: translateX(140px);
}

.reveal-up.pre-reveal {
    transform: translateY(140px);
}

.reveal.is-inview {
    opacity: 1;
    transform: translate(0, 0);
}

/* 偏好减少动效：关闭位移 */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        transition-duration: 0.2s;
    }

    .reveal.pre-reveal {
        transform: none;
    }
}

/* ========== 响应式适配：平板（<= 768px） ========== */
@media (max-width: 768px) {
    .overview-line {
        order: 2;
        /* 横线排中间 */
        width: 100%;
        /* 竖线变横线 */
        height: 1px;
        flex-direction: row;
        justify-content: flex-end;
        /* 端点圆点靠右，对应桌面端「线+底部圆点」的设计语言 */
    }

    .quote-inline1,
    .quote-inline2 {
        height: 2vw;
        font-size: 3vw;
    }

    /* .overview-line::after {
        width: 4px;
        height: 4px;
    } */

    /* 概述区 */
    .overview-section {
        padding: 20px 0 30px;
    }

    .section-inner-box {
        flex-direction: column;
        margin-bottom: 40px;
    }

    .title-deco {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .title-deco img {
        width: 90px;
    }

    .overview-title {
        width: 100%;
        /* 改为竖向堆叠：中文在上、横线在中、英文在下 */
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        margin-left: -25px;
    }

    .cn-title {
        order: 1;
        /* 中文排最上 */
        writing-mode: horizontal-tb;
        /* 横向书写 */
        font-size: 22px;
        letter-spacing: 6px;
        padding-top: 0;
        margin-left: -80px;
        margin-bottom: 8px;
    }

    .en-title {
        order: 3;
        /* 英文排最下 */
        writing-mode: horizontal-tb;
        font-size: 10px;
        margin-right: -40px;
        margin-top: 8px;
    }

    .overview-content {
        padding-top: 20px;
    }

    .overview-text p {
        font-size: 18px;
    }

    .overview-text .en-text {
        font-size: 18px;
    }

    .overview-text .overview-gap {
        margin-bottom: 12px;
    }

    /* 装饰线 */
    .section-bottom-hw {
        height: 40px;
    }

    .section-bottom-hw-img {
        width: 90px;
    }

    .section-bottom-hw-line::after {
        width: 5px;
        height: 5px;
    }

    .deco-3 {
        height: 40px;
        margin: 30px 0 40px;
    }

    .deco-3-img {
        width: 90px;
    }

    .deco-3-line::after {
        width: 5px;
        height: 5px;
    }

    /* 虚拟展厅 */
    .virtual-section {
        margin-bottom: 40px;
    }

    /* 单元区：右侧标记改为「右图 + 左文字」横排布局 */
    .unit-right-mark {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row-reverse;
        /* 图在右、文字在左 */
        /* gap: 12px; */
        position: static;
        margin-bottom: 30px;
    }

    .unit-right-mark-img {
        width: 90px;
        margin-left: 0;
    }

    .right-mark-container {
        width: 100%;
        /* 改为竖向堆叠：重点展品在上、横线在中、长句在下 */
        flex-direction: column;
        align-items: center;
        margin: 0;
        margin-right: -35px;
    }

    .right-mark-tip {
        order: 3;
        /* 长句排最下 */
        writing-mode: horizontal-tb;
        /* 横向书写 */
        display: block;
        /* 恢复块级，让 <br> 正常换行为两行 */
        text-align: center;
        font-size: 13px;
        margin-right: -40px;
        margin-bottom: 0;
        margin-top: 8px;
    }

    .right-mark-line {
        order: 2;
        /* 横线排中间 */
        width: 100%;
        /* 竖线变横线 */
        height: 1px;
        flex-direction: row;
        justify-content: flex-start;
        /* 端点圆点靠右 */
    }

    .right-mark-line::after {
        width: 5px;
        height: 5px;
    }

    .right-mark-h {
        order: 1;
        /* 标题排最上 */
        writing-mode: horizontal-tb;
        /* 横向书写 */
        font-size: 22px;
        letter-spacing: 6px;
        padding-top: 0;
        margin-left: -80px;
        margin-bottom: 8px;
    }

    .section-inner-box-content {
        width: 100%;
    }

    .hall-section {
        padding-top: 40px;
    }

    .hall-section,
    .unit-section,
    .end-section {
        margin-bottom: 40px;
    }

    .chapter-title {
        margin-bottom: 25px;
    }

    .chapter-title img {
        height: 24px;
    }

    .chapter-intro p {
        font-size: 18px;
    }

    /* 文物网格：4 列 -> 2 列 */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .artifact-grid {
        margin-top: 25px;
    }

    .artifact-item {
        height: 65vw;
    }

    .artifact-img {
        margin-bottom: 15px;
        max-width: 85%;
        max-height: 78%;
    }

    .artifact-tag {
        font-size: 18px;
        top: 12px;
        left: 12px;
        padding: 2px 5px;
        letter-spacing: 1px;
    }

    .artifact-info {
        font-size: 14px;
        top: 12px;
        right: 12px;
    }

    /* 展厅瞬间 */
    .gallery-section {
        width: 80%;
    }

    .gallery-title {
        width: 100%;
        margin-bottom: 20px;
    }

    .gallery-title-text {
        font-size: 20px;
        letter-spacing: 5px;
        margin-bottom: 4px;
    }

    .gallery-title-en {
        font-size: 12px;
    }

    .gallery-title-hw {
        display: none;
    }

    /* 展厅瞬间轮播：每屏 2 个 */
    .gallery-carousel {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .gallery-item {
        flex: 0 0 50%;
        padding: 0 5px;
    }

    .gallery-item img {
        border-radius: 2px;
    }

    .carousel-dots {
        gap: 6px;
        margin-top: 14px;
    }

    .carousel-dot {
        width: 6px;
        height: 6px;
    }

    /* 底部信息：移动端两列排列 + 背景图旋转 90° */
    .footer-section {
        height: auto;
        padding: 30px 0;
    }

    /* 移动端：把背景层旋转 90°（横幅变竖幅）。
       旋转前让 ::before 宽=父高、高=父宽（由 JS 通过 --footer-w/--footer-h 注入），
       旋转 90° 后宽高对调，恰好铺满整个 section */
    .footer-section::before {
        top: 50%;
        left: 50%;
        width: var(--footer-w, 100%);
        height: var(--footer-h, 100%);
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .footer-cards {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 22px 12px;
        width: 80%;
    }

    .footer-card {
        flex: 0 0 90%;
        padding: 0;
    }

    .footer-card img {
        width: 80%;
    }
}

/* ========== 响应式适配：手机（<= 480px） ========== */
@media (max-width: 480px) {
    .overview-title {
        margin-left: -20px;
    }

    .quote-inline1,
    .quote-inline2 {
        height: 12px;
        font-size: 18px;
    }

    /* 装饰图与标题图进一步缩小 */
    .title-deco img {
        width: 70px;
    }

    .section-bottom-hw-img {
        width: 70px;
    }

    .deco-3-img {
        width: 70px;
    }

    .chapter-title img {
        height: 20px;
    }

    /* 文物网格：单列 */
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .artifact-item {
        height: 100vw;
    }

    /* 展厅瞬间轮播：每屏 1 个 */
    .gallery-item {
        flex: 0 0 100%;
        padding: 0 5px;
    }

}

/* ========== 文物图片查看器（Lightbox） ========== */
.artifact-img {
    cursor: zoom-in;
}

.artifact-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.artifact-lightbox.is-open {
    display: flex;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    cursor: zoom-out;
}

.lightbox-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    pointer-events: none;
}

.lightbox-img {
    max-width: 85vw;
    max-height: 85vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
    transition: transform 0.15s ease-out;
    pointer-events: auto;
}

.lightbox-img.is-dragging {
    transition: none;
}

.overview-section-line {
    position: absolute;
    left: -9vw;
    bottom: 5vw;
    width: 16vw;
}

.lightbox-toolbar {
    position: fixed;
    top: 2vw;
    right: 2vw;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.4167vw;
    padding: 2px;
    background: black;
    border-radius: 0.5208vw;
    box-shadow: 0 0.2083vw 0.8333vw rgba(0, 0, 0, 0.4);
}

.lightbox-btn {
    width: 3vw;
    height: 3vw;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.2604vw;
    background: black;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}

.lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.lightbox-btn img {
    width: 25px;
}

.lightbox-btn svg {
    width: 55%;
    height: 55%;
    pointer-events: none;
}

@media (max-width: 768px) {
    .lightbox-toolbar {
        right: 10px;
        padding: 8px;
        gap: 8px;
        border-radius: 8px;
    }

    .lightbox-btn img {
        width: 20px;
    }

    .lightbox-btn {
        width: 36px;
        height: 36px;
        border-radius: 6px;
    }

    .lightbox-img {
        max-width: 92vw;
        max-height: 80vh;
    }
}