/*頁面設定*/
@page {
    size: A4 portrait;
    margin: 0;
    orphans: 4;
    widows: 2;
}

@page a3 {
    size: a3 portrait;
    margin: 0;
}

@page a3l {
    size: a3 landscape;
    margin: 0;
}

@page a4 {
    size: a4 portrait;
    margin: 0;
}

@page a4l {
    size: a4 landscape;
    margin: 0;
}

@page a5 {
    size: a5 portrait;
    margin: 0;
}

@page a5l {
    size: a5 landscape;
    margin: 0;
}

@page tablet-l {
    size: 274mm 392mm;
    margin: 0;
}

@page tablet-m {
    size: 214mm 305mm;
    margin: 0;
}

@page tablet-s {
    size: 197mm 215mm;
    margin: 0;
}

.docs.editor { /*body*/
    --page-w: 250px;
    --page-h: 460px;
    --font-max: 22pt;
    --bg-padding: 0;
    font-family: 標楷體;
    font-size: 16px;
    margin: 0;
}

.page {
    margin: 0 auto;
    width: var(--page-w);
    height: var(--page-h);
    position: relative;
    page-break-inside: avoid;

    outline: .25pt solid #0CC;
}

.content {
    position: relative;
    margin: 0 auto;
    width: var(--page-w);
    height: var(--page-h);
    /* outline: 0.25pt solid #000; */
}

.border {
    /* outline: 0.25pt solid #000; */
}

.text {}

pre {
    font-family: 標楷體;
}

/*自動字型*/
.text-block {
    /* border: .25pt solid #000; */
    /* margin: 5mm; */

    font-family: 標楷體;
    text-align: start;
    vertical-align: middle;

    /* --divw: 120mm;  */
    /* --divh: 50mm; */
    --line_len: 10;
    --lines: 1;
    --fs_w: var(--divw)/var(--line_len);
    --fs_h: var(--divh)/var(--lines);
    --fs: min(var(--fs_w), var(--fs_h), var(--font-max));

    width: var(--divw);
    height: var(--divh);

    font-size: var(--fs);
    line-height: calc(var(--fs_h) * 1.0);

    outline: 0.25pt solid #F00; 
}

.text-block.vertical {
    --fs_r: 0.97;
    --fs_w: var(--fs_r)*var(--divw)/var(--lines);
    --fs_h: var(--fs_r)*var(--divh)/var(--line_len);
    --fs: min(var(--fs_w), var(--fs_h), var(--font-max));
    line-height: calc(var(--fs_w) * 1.0);
}

.vertical {
    writing-mode: vertical-rl;
    /*text-orientation: upright;*/
    text-orientation: mixed;
}

.text-start {
    text-align: start;
}

.text-center {
    text-align: center;
}

.text-end {
    text-align: end;
}

.bg {
    position: relative;
    margin: 0 auto;
    padding: var(--bg-padding);
}

.bg > svg,
.bg > img {
    display: block;
}

.bg img {
    width: 100%;
    height: calc(var(--page-h) - var(--bg-padding) * 2);
    max-height: var(--page-h);
    /*outline: 0.25pt solid #000;*/
}

.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

.d-flex {
    display: flex;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.text-center {
    text-align: center;
}

.text-start {
    text-align: left;
}

.text-end {
    text-align: right;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.m-0 {
    margin: 0;
}

.my-0 {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.mx-0 {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}

.mt-0 {
    margin-block-start: 0 !important;
}

.mb-0 {
    margin-block-end: 0 !important;
}

.ms-0 {
    margin-inline-start: 0 !important;
}

.me-0 {
    margin-inline-end: 0 !important;
}

.my-1 {
    margin-block-start: .25em !important;
    margin-block-end: .25em !important;
}

.mx-1 {
    margin-inline-start: .25em !important;
    margin-inline-end: .25em !important;
}

.mt-1 {
    margin-block-start: .25em !important;
}

.mb-1 {
    margin-block-end: .25em !important;
}

.ms-1 {
    margin-inline-start: .25em !important;
}

.me-1 {
    margin-inline-end: .25em !important;
}

.mid_text {
    --divw: 50mm;
    /* --divh: 220mm; */
    --divh: 200mm;
    position: absolute;
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%);
}

.mid_text_2 {
    --divw: 50mm;
    --divh: 50mm;
    position: absolute;
    left: 50%;
    bottom: 18%;
    transform: translate(-50%, 0);
}

.right_text {
    --divw: 10mm;
    --divh: 260mm;
    position: absolute;
    right: 8mm;
    top: 80mm;
}

.left_text {
    --divw: 20mm;
    --divh: 160mm;
    position: absolute;
    left: 0mm;
    top: 180mm;
}

.txt_up,
.txt_down {
    position: absolute;
    left: 5mm;

    outline: .25pt solid #090;
}

.txt_up {
    top: 155mm;
}

.txt_down {
    bottom: 30mm;
}

.top_text_1,
.top_text_2,
.top_text_3 {
    position: absolute;
}

.top_text_1 {
    top: 0;
    width: 100%;
    text-align: center;
    font-size: 20pt;
}

.top_text_2,
.top_text_3 {
    top: 2mm;
    top: 7mm;
    width: 60%;
    font-size: 0.7em;
}

.top_text_2 {
    text-align: right;
    right: 2mm;
}

.top_text_3 {
    text-align: left;
    left: 2mm;
}

.top_text_3 {
    display: none;
}

.docs.editor{
    font-size: 12px;
    & *{
        outline: 0 none !important;
    }
    & .content{
        --page-w: calc(460px * 0.3);
        --page-h: 460px;
    }
    & .bg{
        --bg-padding: 3px;
    }
    & .top_text_2, 
    & .top_text_3 {
        top: 0;
        width: 60%;
        font-size: 9px;
    }
    & .top_text_2 {
        right: 0;
    }
    & .mid_text {
        --divw: 65px;
        --divh: 260px;
    }
    & .mid_text_2{
        display: none;
    }
    & .right_text {
        display: none;
    }
    & .txt_up {
        top: 200px;
    }
    & .txt_down {
        bottom: 62px;
    }
    & .txt_up,
    & .txt_down {
        left: 4px;
    }
    & .left_text {
        --divw: 25px;
        --divh: 140px;
        position: absolute;
        left: 0mm;
        top: 62mm;
    }
}