/* 预览容器缩放原点控制 */
#preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100%;
    width: 100%;
    transform-origin: top center; /* 统一使用顶部中心作为缩放原点 */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), margin-bottom 0.2s ease; /* 增加平滑缩放过渡 */
}

/* 封面预览激活时，确保垂直居中 */
#preview-container:has(#preview-cover.active) {
    justify-content: center;
}

/* 封面预览区专用：弹性自适应布局 */
#preview-cover.preview-section.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    padding: 20px 10px 100px 10px !important; /* 手机端较小的内边距 */
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #preview-cover.preview-section.active {
        padding: 80px 40px 120px 40px !important; /* PC端保持原样 */
    }
}

#preview-cover #cover-canvas-container,
#preview-cover #cover-preview-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
}

#preview-cover #cover-canvas {
    --canvas-ratio: 0.75; /* 默认 3:4 */
    aspect-ratio: var(--canvas-ratio);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 当画布不是固定宽度模式时（如文章编辑器预览） */
#preview-cover #cover-canvas:not(.it-fixed-canvas) {
    width: 100% !important;
    max-width: calc((100vh - 100px) * var(--canvas-ratio)) !important; /* 手机端减去较小的标题高度 */
    max-height: calc(100vh - 100px) !important;
    height: auto !important;
    margin: auto;
}

@media (min-width: 768px) {
    #preview-cover #cover-canvas:not(.it-fixed-canvas) {
        max-width: calc((100vh - 280px) * var(--canvas-ratio)) !important; /* PC端保持原样 */
        max-height: calc(100vh - 280px) !important;
    }
}

/* 封面编辑器专属样式 */
.ratio-btn.active {
    background-color: #fef2f2;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.cover-tab-btn.active {
    color: #ef4444;
}

.image-process-mode-btn.active {
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.1);
}

/* 预览区画布比例动画 */
#cover-canvas {
    transition: aspect-ratio 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 移动端适配补丁 */
@media (max-width: 768px) {
    #cover-canvas {
        max-width: 100% !important;
    }
}

/* 叠加元素选中态样式 */
.selected-element {
    outline: 2px solid #ef4444 !important;
    outline-offset: 4px;
    cursor: move;
    z-index: 40 !important;
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.3));
}

/* 导出时隐藏选中边框 */
body.is-exporting .selected-element {
    outline: none !important;
    filter: none !important;
}