/* 基础样式 */
body {
    font-family: "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    background-color: #f5f5f5;
}

/* 配置区域样式调整 */
.config-area {
    font-size: 0.9rem;
    width: 360px;
    position: fixed;
    right: 20px;
    top: 80px; /* 调整顶部距离，避免与导航栏重叠 */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    z-index: 10;
}

.print-area {
    background-color: white;
    width: 210mm;
    min-height: 297mm;
    padding: 20px;
}

.print-area::after {
    content: "20s.Fun";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 120px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.03);
    pointer-events: none;
    z-index: 1;
}

/* 田字格样式 - 基于木兰辞样式优化 */
ul.py-ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
    margin: 0.75rem 0 0;
    font-size: 1rem;
}

ul.py-ul li {
    display: inline-block;
    margin: 0.25rem 0 0 calc(-1 * var(--py-width-ratio) * var(--py-base-font-size) * 0.02);
    text-align: center;
    position: relative;
    page-break-inside: avoid; /* 防止打印时元素被分页 */
    break-inside: avoid; /* 现代浏览器防止分页 */
}

:root {
    /* 基础尺寸变量 */
    --py-base-font-size: 2.25rem; /* 基础汉字字体大小 */
    --py-width-ratio: 1.33; /* 宽度与字体大小比例 */
    --py-py-height-ratio: 0.6; /* 拼音框与汉字框的比例 */
    --py-py-font-size-ratio: 0.4; /* 拼音字体大小与基础字体大小比例 */
    --py-hz-ratio: 2.14; /* 汉字与基础字体大小比例 */
}

ul.py-ul .py-box {
    font-size: calc(var(--py-py-font-size-ratio) * var(--py-base-font-size));
    width: calc(var(--py-width-ratio) * var(--py-base-font-size));
    height: calc(var(--py-py-height-ratio) * var(--py-width-ratio) * var(--py-base-font-size));
    line-height: calc(var(--py-py-height-ratio) * var(--py-width-ratio) * var(--py-base-font-size) * 0.9);
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
     /* 拼音背景 */
    /*background-image: url("../img/pybg.svg");*/
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODBweCIgaGVpZ2h0PSI1MXB4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDEgTDgwIDEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjMTExIiBmaWxsLW9wYWNpdHk9IjAiLz4KPHBhdGggZD0iTTAgNTAgTDgwIDUwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iIzExMSIgZmlsbC1vcGFjaXR5PSIwIi8+CjxwYXRoIGQ9Ik0wIDE4IEw4MCAxOCIgc3Ryb2tlLWRhc2hhcnJheT0iNSw1IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZT0iIzY2NiIgZmlsbC1vcGFjaXR5PSIwIi8+CjxwYXRoIGQ9Ik0wIDM0IEw4MCAzNCIgc3Ryb2tlLWRhc2hhcnJheT0iNSw1IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZT0iIzY2NiIgZmlsbC1vcGFjaXR5PSIwIi8+Cjwvc3ZnPg==');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: none;
    /*
    background-image:  linear-gradient(to right, #aaa 50%, transparent 20%), linear-gradient(to right, #aaa 50%, transparent 20%);
    background-position: 0 calc(100% / 3), 0 calc(100% * 2 / 3);
    background-size: 10px 2px, 10px 2px;
    background-repeat: repeat-x;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    */
}

ul.py-ul .py-box.hide-bg {
    background-image: none !important;
}

ul.py-ul .hz-box {
    font-size: var(--py-base-font-size);
    width: calc(var(--py-width-ratio) * var(--py-base-font-size));
    height: calc(var(--py-width-ratio) * var(--py-base-font-size));
    line-height: calc(var(--py-width-ratio) * var(--py-base-font-size));
    font-family: KaiTi, "楷体", STKaiti, "华文楷体", serif;
    color: #aaa;
    text-align: center;
    position: relative;
    /*background-image: url("../img/tzgbg.svg");*/
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODBweCIgaGVpZ2h0PSI4MHB4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0tMiA0MCBMODAgNDAiIHN0cm9rZS1kYXNoYXJyYXk9IjQsNCIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiM2NjYiIGZpbGwtb3BhY2l0eT0iMCIvPgo8cGF0aCBkPSJNNDAgLTIgTDQwIDgwIiBzdHJva2UtZGFzaGFycmF5PSI0LDQiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjNjY2IiBmaWxsLW9wYWNpdHk9IjAiLz4KPHBhdGggZD0iTTEgMSBsNzggMCBsMCA3OCBsLTc4IDAgWiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiMxMTEiIGZpbGwtb3BhY2l0eT0iMCIvPgo8L3N2Zz4=');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* padding-top: 0.4rem; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -1px;
    white-space: nowrap; /* 防止文字换行 */
}

/* 小尺寸 */
ul.py-ul.sm {
    --py-base-font-size: 1.75rem;
}
/* 中尺寸 */
ul.py-ul.md {
    --py-base-font-size: 2.25rem;
}
/* 大尺寸 */
ul.py-ul.lg {
    --py-base-font-size: 2.75rem;
}
/* 超大尺寸 */
ul.py-ul.xl {
    --py-base-font-size: 3.25rem;
}


/* 打印样式 */
@media print {
    .print-area {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        box-shadow: none !important;
        background: white !important;
        width: 100%!important;
    }

    /* 确保打印时背景图片显示 */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* 确保文字不换行 */
    .py-box,
    .hz-box {
        white-space: nowrap !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        overflow: visible !important;
    }
}

/* 响应式布局调整 */
@media (max-width: 1024px) {
    .config-area {
        position: static;
        width: 100% !important;
        margin-bottom: 20px;
    }
}