/* 背景样式定义 */

/* 横线本背景 */
.background-lined {
    background-color: #f8f9fa;
    background-image: 
        linear-gradient(to right, #e9ecef 1px, transparent 1px),
        linear-gradient(to bottom, #e9ecef 1px, transparent 1px);
    background-size: 20px 30px;
    background-position: 40px 40px;
}

/* 点阵纸背景 */
.background-grid {
    background-color: #f8f9fa;
    background-image: 
        radial-gradient(circle, #dee2e6 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 10px 10px;
}

/* 纯色背景 */
.background-plain {
    background-color: #ffffff;
}

/* 牛皮纸背景 */
.background-kraft {
    background-color: #d4a574;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(180, 140, 80, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(160, 120, 70, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(190, 150, 90, 0.1) 0%, transparent 50%);
    background-size: 100px 100px, 80px 80px, 60px 60px;
}

/* 便利贴背景 */
.background-note {
    background-color: #fffacd;
    background-image: 
        linear-gradient(45deg, rgba(255, 215, 0, 0.1) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 215, 0, 0.1) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 215, 0, 0.1) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 215, 0, 0.1) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* 古典纸张背景 */
.background-vintage {
    background-color: #f5f1e8;
    background-image: 
        radial-gradient(circle at 100% 50%, transparent 20%, rgba(139, 69, 19, 0.05) 21%, rgba(139, 69, 19, 0.05) 34%, transparent 35%, transparent),
        linear-gradient(0deg, rgba(139, 69, 19, 0.03) 50%, transparent 50%);
    background-size: 50px 50px, 20px 20px;
}

/* 格子纸背景 */
.background-graph {
    background-color: #ffffff;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* 毛边纸背景 */
.background-rough {
    background-color: #fefefe;
    background-image: 
        radial-gradient(ellipse at top left, rgba(0, 0, 0, 0.02) 0%, transparent 50%),
        radial-gradient(ellipse at top right, rgba(0, 0, 0, 0.02) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(0, 0, 0, 0.02) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(0, 0, 0, 0.02) 0%, transparent 50%);
    background-size: 100px 100px;
}

/* 手帐纸背景 */
.background-journal {
    background-color: #f9f7f4;
    background-image: 
        linear-gradient(to right, #e8e4e0 1px, transparent 1px),
        linear-gradient(to bottom, #e8e4e0 1px, transparent 1px),
        linear-gradient(to right, #d4a574 2px, transparent 2px);
    background-size: 25px 25px, 25px 25px, 200px 25px;
    background-position: 0 0, 0 0, 30px 0;
}

/* 信纸背景 */
.background-letter {
    background-color: #ffffff;
    background-image: 
        linear-gradient(to right, #4a90e2 2px, transparent 2px),
        linear-gradient(to bottom, #e8e8e8 1px, transparent 1px);
    background-size: 40px 30px, 100% 30px;
    background-position: 0 0, 0 0;
}

/* 背景容器样式 */
.background-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* 背景预览样式 */
.background-preview {
    width: 60px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #ddd;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}